|
|
@@ -1,72 +1,83 @@
|
|
|
-import { defineComponent, ref } from "vue";
|
|
|
+import { computed, defineComponent, ref } from "vue";
|
|
|
import styles from "./index.module.less";
|
|
|
import state from "/src/state";
|
|
|
import { storeData } from "/src/store";
|
|
|
import { evaluatingData } from "/src/view/evaluating";
|
|
|
import imgs from "./img/index.json";
|
|
|
-import iconBack from '../sound-effect/icons/back.png'
|
|
|
+import iconBack from "../sound-effect/icons/back.png";
|
|
|
+import iconUpload from "./img/icon-upload.svg";
|
|
|
+import iconShare from "./img/icon-share.svg";
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: "evaluatResult",
|
|
|
emits: ["close"],
|
|
|
setup(props, { emit }) {
|
|
|
+ const iconBg = computed(() => {
|
|
|
+ const index: any = evaluatingData.resultData.leve;
|
|
|
+ switch (index) {
|
|
|
+ case 0:
|
|
|
+ return imgs[5];
|
|
|
+ case 1:
|
|
|
+ return imgs[4];
|
|
|
+ case 2:
|
|
|
+ return imgs[3];
|
|
|
+ case 3:
|
|
|
+ return imgs[2];
|
|
|
+ case 4:
|
|
|
+ return imgs[1];
|
|
|
+ }
|
|
|
+ return imgs[1];
|
|
|
+ });
|
|
|
return () => (
|
|
|
<div class={styles.evaluatResult}>
|
|
|
<div class={styles.closeBtn} onClick={() => emit("close")}>
|
|
|
<img src={iconBack} />
|
|
|
</div>
|
|
|
|
|
|
- <div class={styles.headerButton}>
|
|
|
- <div class={styles.headBtn} onClick={() => emit("close", "update")}>
|
|
|
- 保存演奏
|
|
|
- </div>
|
|
|
- <div class={styles.headBtn} style={{ display: storeData.platformType === "STUDENT" ? "block" : "" }} onClick={() => emit("close", "share")}>
|
|
|
- 分享
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
<div class={styles.fraction}>
|
|
|
- <img class={styles.bg} src={imgs.bg} />
|
|
|
+ <img class={styles.bg} src={iconBg.value} />
|
|
|
+ <div class={styles.headerButton}>
|
|
|
+ <div class={styles.headBtn} onClick={() => emit("close", "update")}>
|
|
|
+ <img src={iconUpload} />
|
|
|
+ 上传
|
|
|
+ </div>
|
|
|
+ <div class={styles.headBtn} style={{ display: storeData.platformType === "STUDENT" ? "" : "none" }} onClick={() => emit("close", "share")}>
|
|
|
+ <img src={iconShare} />
|
|
|
+ 分享
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class={styles.top}>
|
|
|
- {/* {evaluatingData.resultData.score > 79 && <img style={{}} class={styles.badge} src={iconBadge} />} */}
|
|
|
<div class={styles.text}>
|
|
|
<div>
|
|
|
<span class={styles.num}>{evaluatingData.resultData.score}</span>分
|
|
|
</div>
|
|
|
- <div style={{marginLeft: '6px'}}>{evaluatingData.resultData.clxmome}</div>
|
|
|
+ <div style={{ marginLeft: "6px" }}>{evaluatingData.resultData.clxmome}</div>
|
|
|
</div>
|
|
|
- <img class={styles.rightBadge} src={evaluatingData.resultData.clxImg} />
|
|
|
</div>
|
|
|
- {state.isPercussion ? (
|
|
|
- <div class={styles.percussion}>
|
|
|
- <img class={styles.leftIcon} src={evaluatingData.resultData.img} />
|
|
|
- <div class={styles.scoreDes}>
|
|
|
- <span class={styles.scoreNum}>{evaluatingData.resultData.score}</span>分
|
|
|
- <span style={{ marginLeft: "8px" }}>{evaluatingData.resultData.mome}</span>
|
|
|
+ <div class={styles.box}>
|
|
|
+ {state.isPercussion ? null : (
|
|
|
+ <div class={styles.detail}>
|
|
|
+ <div class={styles.progressitem}>
|
|
|
+ <div class={styles.intonation}>音准</div>
|
|
|
+ <span>{evaluatingData.resultData.intonation}分</span>
|
|
|
+ </div>
|
|
|
+ <div class={styles.progressitem}>
|
|
|
+ <div class={styles.cadence}>节奏</div>
|
|
|
+ <span>{evaluatingData.resultData.cadence}分</span>
|
|
|
+ </div>
|
|
|
+ <div class={styles.progressitem}>
|
|
|
+ <div class={styles.integrity}>完成度</div>
|
|
|
+ <span>{evaluatingData.resultData.integrity}分</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- ) : (
|
|
|
- <div class={styles.detail}>
|
|
|
- <div class={styles.progressitem}>
|
|
|
- <div class={styles.intonation}>音准</div>
|
|
|
- <span>{evaluatingData.resultData.intonation}分</span>
|
|
|
- </div>
|
|
|
- <div class={styles.progressitem}>
|
|
|
- <div class={styles.cadence}>节奏</div>
|
|
|
- <span>{evaluatingData.resultData.cadence}分</span>
|
|
|
- </div>
|
|
|
- <div class={styles.progressitem}>
|
|
|
- <div class={styles.integrity}>完成度</div>
|
|
|
- <span>{evaluatingData.resultData.integrity}分</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )}
|
|
|
+ )}
|
|
|
|
|
|
- <div class={styles.tips}>{evaluatingData.resultData.clxtip}</div>
|
|
|
- <div class={styles.ctrls}>
|
|
|
- <img src={imgs.btn1} class={styles.ctrlsBtn} onClick={() => emit("close", "practise")} />
|
|
|
- <img src={imgs.btn2} class={styles.ctrlsBtn} onClick={() => emit("close", "tryagain")} />
|
|
|
- <img src={imgs.btn3} class={styles.ctrlsBtn} onClick={() => emit("close", "look")} />
|
|
|
+ <div class={styles.tips}>{evaluatingData.resultData.clxtip}</div>
|
|
|
+ <div class={styles.ctrls}>
|
|
|
+ <img src={imgs.btn1} class={styles.ctrlsBtn} onClick={() => emit("close", "practise")} />
|
|
|
+ <img src={imgs.btn2} class={styles.ctrlsBtn} onClick={() => emit("close", "tryagain")} />
|
|
|
+ <img src={imgs.btn3} class={styles.ctrlsBtn} onClick={() => emit("close", "look")} />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
