Merge branch 'feature-tianyong' into klx-test

src/page-instrument/component/the-music-list/list.tsx

@@ -41,6 +41,7 @@ export default defineComponent({
       recentFlag: props.recentFlag ? true : null, // 最近练习
       favoriteFlag: props.favoriteFlag ? true : null, // 我的收藏
       excludeMusicId: props.recentFlag || props.favoriteFlag ? null : state.examSongId,
+      albumId: query.albumId ? query.albumId : null,
     });
     const data = reactive({
       isFocus: false,

src/page-instrument/custom-plugins/guide-driver/index.tsx

@@ -1154,7 +1154,7 @@ export const EvaluatingReportDriver = defineComponent({
       options.config.stagePadding = 0;
       try {
         const rect = options.state.activeElement?.getBoundingClientRect();
-        popover.wrapper.style.marginLeft = -(rect?.width || 0) / 2 + 16 + "px";
+        popover.wrapper.style.marginLeft = ((rect?.width || 0) / 2) * position - 4 + "px";
       } catch {}
     };
 
@@ -1169,17 +1169,12 @@ export const EvaluatingReportDriver = defineComponent({
               title: "",
               description: "",
               popoverClass: "popoverClass popoverClassReport2",
-              align: "end",
+              align: "start",
               side: "bottom",
               nextBtnText: "下一步 (1/2)",
               showButtons: ["next"],
               onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
-                options.config.stageRadius = 12;
-                options.config.stagePadding = 0;
-                try {
-                  const rect = options.state.activeElement?.getBoundingClientRect();
-                  popover.wrapper.style.marginLeft = ((rect?.width || 0) / 2) * -1 + 16 + "px";
-                } catch {}
+                driverInitialPosition(popover, options);
               },
             },
           },
@@ -1199,7 +1194,7 @@ export const EvaluatingReportDriver = defineComponent({
                 options.config.stagePadding = 5;
                 try {
                   const rect = options.state.activeElement?.getBoundingClientRect();
-                  popover.wrapper.style.marginLeft = ((rect?.width || 0) / 2) * -1 + 16 + "px";
+                  popover.wrapper.style.marginLeft = ((rect?.width || 0) / 2) * -1 + 4 + "px";
                 } catch {}
               },
               onPrevClick: () => {
@@ -1228,7 +1223,7 @@ export const EvaluatingReportDriver = defineComponent({
                 options.config.stagePadding = 0;
                 try {
                   const rect = options.state.activeElement?.getBoundingClientRect();
-                  popover.wrapper.style.marginLeft = ((rect?.width || 0) / 2) * -1 + 16 + "px";
+                  popover.wrapper.style.marginLeft = ((rect?.width || 0) / 2) * -1 + 4 + "px";
                 } catch {}
               },
               onPrevClick: () => {
@@ -1250,7 +1245,7 @@ export const EvaluatingReportDriver = defineComponent({
             title: "",
             description: "",
             popoverClass: "popoverClass popoverClassReport1",
-            align: "end",
+            align: "start",
             side: "bottom",
             nextBtnText: `下一步 (1/${count})`,
             showButtons: ["next"],
@@ -1265,17 +1260,12 @@ export const EvaluatingReportDriver = defineComponent({
             title: "",
             description: "",
             popoverClass: "popoverClass popoverClassReport2",
-            align: "end",
+            align: "start",
             side: "bottom",
             nextBtnText: `下一步 (2/${count})`,
             showButtons: ["next"],
             onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
-              options.config.stageRadius = 12;
-              options.config.stagePadding = 0;
-              try {
-                const rect = options.state.activeElement?.getBoundingClientRect();
-                popover.wrapper.style.marginLeft = ((rect?.width || 0) / 2) * -1 + 16 + "px";
-              } catch {}
+              driverInitialPosition(popover, options);
             },
           },
         },
@@ -1288,18 +1278,12 @@ export const EvaluatingReportDriver = defineComponent({
               title: "",
               description: "",
               popoverClass: "popoverClass popoverClassReport3",
-              align: "end",
+              align: "start",
               side: "bottom",
               nextBtnText: "下一步 (3/4)",
               showButtons: ["next"],
               onPopoverRender: (popover: PopoverDOM, options: { config: Config; state: State }) => {
-                // driverInitialPosition(popover, options, -1);
-                options.config.stageRadius = 12;
-                options.config.stagePadding = 0;
-                try {
-                  const rect = options.state.activeElement?.getBoundingClientRect();
-                  popover.wrapper.style.marginLeft = ((rect?.width || 0) / 2) * -1 + 16 + "px";
-                } catch {}
+                driverInitialPosition(popover, options);
               },
             },
           },
@@ -1319,7 +1303,7 @@ export const EvaluatingReportDriver = defineComponent({
                 options.config.stagePadding = 5;
                 try {
                   const rect = options.state.activeElement?.getBoundingClientRect();
-                  popover.wrapper.style.marginLeft = ((rect?.width || 0) / 2) * -1 + 16 + "px";
+                  popover.wrapper.style.marginLeft = ((rect?.width || 0) / 2) * -1 + 4 + "px";
                 } catch {}
               },
               onPrevClick: () => {

src/page-instrument/header-top/index.module.less

@@ -492,20 +492,36 @@
         position: relative;
         top: 50%;
         transform: translateY(-42%);
-
         &.twoModeBox {
             justify-content: center;
-
-            >.modeImg+.modeImg {
+            >.modeItem+.modeItem {
                 margin-left: 150px;
             }
         }
-        > .modeImg {
+        .modeItem {
+            position: relative;
             cursor: pointer;
             width: calc((100% - 2*32px)/3);
             max-width: 220px;
             height: intrinsic;
         }
+        .modeImg {
+            width: 100%;
+        }
+        .vipIcon {
+            position: absolute;
+            left: 30px;
+            top: 12px;
+            width: 55px;
+            height: 21px;
+        }
+        .svipIcon {
+            position: absolute;
+            left: 30px;
+            top: 12px;
+            width: 63px;
+            height: 21px;
+        }
     }
 }
 

src/page-instrument/header-top/modeView.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, watch, reactive, ref, nextTick } from "vue";
+import { defineComponent, onMounted, watch, reactive, ref, nextTick, computed } from "vue";
 import styles from "./index.module.less";
 import backImg from "./image/icon-back.png";
 import titmeImg from "./image/modeTitle.png";
@@ -6,9 +6,8 @@ import nameImg from "./image/zt.png";
 import lxMode from "./image/lxMode.json";
 import glMode from "./image/glMode.json";
 import pcMode from "./image/pcMode.json";
-// import lxImg from "./image/lxImg.png";
-// import glImg from "./image/glImg.png";
-// import pcImg from "./image/pcImg.png";
+import modeVip from "./image/mode_vip.png";
+import modesVip from "./image/mode_svip.png";
 import { headTopData } from "./index";
 import { getQuery } from "/src/utils/queryString";
 import { storeData } from "/src/store";
@@ -58,6 +57,14 @@ export default defineComponent({
     );      
     const browserInfo = browser();
     const isPad =  navigator?.userAgent?.includes("UAWEIVRD-W09") || browserInfo?.iPad || browserInfo.isTablet;
+
+    const showVip = computed(() => {
+			return evaluatingData.tipErjiShow && !state.isLoading && !state.hasDriverPop;
+		});
+    const showsVip = computed(() => {
+			return evaluatingData.tipErjiShow && !state.isLoading && !state.hasDriverPop;
+		});
+
     return () => (
       <div class={[styles.modeView, isPad && styles.isiPad, headTopData.modeType !== "init" && styles.hidden]}>
         <img
@@ -78,12 +85,16 @@ export default defineComponent({
         />
         <img src={titmeImg} class={styles.modeTitle} />
         <div class={[styles.modeBox, ((!state.isPercussion && !state.enableEvaluation) || (state.isPercussion && state.enableEvaluation) || (state.isPercussion && !state.enableEvaluation)) && styles.twoModeBox]}>
-          <Vue3Lottie ref={modeImgDom1} class={styles.modeImg} animationData={lxMode} autoPlay={false} loop={true} onClick={() => {
-            if(state.isSingleLine){
-              smoothAnimationState.isShow.value = state.melodyLine;
-            }
-            headTopData.handleChangeModeType("practise")
-            }}></Vue3Lottie>
+          <div class={styles.modeItem}>
+            <Vue3Lottie ref={modeImgDom1} class={styles.modeImg} animationData={lxMode} autoPlay={false} loop={true} onClick={() => {
+              if(state.isSingleLine){
+                smoothAnimationState.isShow.value = state.melodyLine;
+              }
+              headTopData.handleChangeModeType("practise")
+              }}></Vue3Lottie>
+              {/* <img class={styles.vipIcon} src={modeVip} /> */}
+          </div>
+
           {/* <img class={styles.modeImg} src={lxImg} 
             onClick={() => {
               if(state.isSingleLine){
@@ -92,16 +103,22 @@ export default defineComponent({
               headTopData.handleChangeModeType("practise")
             }} /> */}
           {!state.isPercussion && 
+            <div class={styles.modeItem}>
               <Vue3Lottie ref={modeImgDom2} class={styles.modeImg} animationData={glMode} autoPlay={false} loop={true} onClick={() => headTopData.handleChangeModeType("follow")}></Vue3Lottie>
+              {/* <img class={styles.svipIcon} src={modesVip} /> */}
+            </div>
               // <img class={styles.modeImg} src={glImg} 
               //   onClick={() => headTopData.handleChangeModeType("follow")} />
           }
           {state.enableEvaluation && 
-            <Vue3Lottie ref={modeImgDom3} class={styles.modeImg} animationData={pcMode} autoPlay={false} loop={true} onClick={() => {
-               // 点击评测模式进入评测模块的需要检测耳机状态，通过返回按钮进入评测模块的，不检测耳机状态
-              evaluatingData.needCheckErjiStatus = true;
-              headTopData.handleChangeModeType("evaluating")
-            }}></Vue3Lottie>
+            <div class={styles.modeItem}>
+              <Vue3Lottie ref={modeImgDom3} class={styles.modeImg} animationData={pcMode} autoPlay={false} loop={true} onClick={() => {
+                // 点击评测模式进入评测模块的需要检测耳机状态，通过返回按钮进入评测模块的，不检测耳机状态
+                evaluatingData.needCheckErjiStatus = true;
+                headTopData.handleChangeModeType("evaluating")
+              }}></Vue3Lottie>
+              {/* <img class={styles.svipIcon} src={modesVip} /> */}
+            </div>
             // <img class={styles.modeImg} src={pcImg} 
             //   onClick={() => {
             //       // 点击评测模式进入评测模块的需要检测耳机状态，通过返回按钮进入评测模块的，不检测耳机状态

src/state.ts

@@ -750,6 +750,7 @@ const handlePlaying = () => {
           return;
         }
         // #8698 bug修复
+        
         if (state.modeType === "practise" && state.sectionStatus) {
           // 练习作业，练习完一次需要增加练习次数
           if (query.workRecord) {