feat: 模式切换vip逻辑修改

src/page-instrument/App.tsx

@@ -44,6 +44,7 @@ export default defineComponent({
         }
         const student = res?.data || {};
         setUserInfo(student);
+        state.vipType = res.data.vipType || ''
         storeData.platformType = student.clientType === "STUDENT" ? "STUDENT" : "";
       } catch (error) {
         storeData.status = "error";

src/page-instrument/component/vip/permission.tsx

@@ -1,9 +1,13 @@
 import { Popup } from 'vant'
-import { defineComponent, reactive } from 'vue'
+import { defineComponent, reactive, watch } from 'vue'
 import styles from './index.module.less'
 import Member from './member'
 import Demand from './demand'
 import MemberAndDemand from './memberAndDemand'
+import { usePageVisibility } from "@vant/use"
+import { studentQueryUserInfo } from "/src/page-instrument/api";
+import { getMusicSheetDetail } from "/src/utils/baseApi"
+import state from "/src/state";
 
 export type IActive = 'member' | 'demand' | 'memberAndDemand'
 export const permissionPopup = reactive({
@@ -13,6 +17,28 @@ export const permissionPopup = reactive({
   musicPrice: 0
 })
 
+const pageVisibility = usePageVisibility()
+watch(pageVisibility, async (value) => {
+  if (value === "visible") {
+    const res = await studentQueryUserInfo()
+    state.vipType = res.data.vipType
+    if (permissionPopup.active === 'member' && (state.vipType === 'VIP' || state.vipType.includes('SVIP'))) {
+      permissionPopup.show = false
+    }
+    if (permissionPopup.show && (permissionPopup.active === 'demand' || permissionPopup.active === 'memberAndDemand')) {
+      getMusicSheetDetail(state.examSongId).then(res => {
+        if (res?.code === 200) {
+          state.musicBuyInfo.buyed = res?.data?.buyed
+           // 已经购买
+           if(state.musicBuyInfo.buyed){
+            permissionPopup.show = false
+           }
+        }
+     })
+    }
+  }
+})
+
 export default defineComponent({
   name: 'ColexiuPermission',
   setup(props, { expose }) {

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

@@ -358,7 +358,7 @@
 
 .disabled {
     pointer-events: none;
-    opacity: .4;
+    opacity: 0;
 }
 
 .playBtn {
@@ -477,7 +477,7 @@
 
     .modeTitle {
         width: auto;
-        height: 28px;
+        height: 50px;
         position: absolute;
         left: 50%;
         top: 22px;

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

@@ -32,11 +32,37 @@ import { smoothAnimationState } from "../view-detail/smoothAnimation";
 import { isMusicList, musicListShow } from "../component/the-music-list";
 import { EvaluatingDriver, FollowDriver, PractiseDriver } from "../custom-plugins/guide-driver";
 import { fingerRef } from "/src/page-instrument/view-detail/index"
+import { permissionPopup } from "/src/page-instrument/component/vip/permission";
 
 const ModeView = defineAsyncComponent(() =>
   import('./modeView')
 )
 
+/** 校验是否能切换模式，会员的曲子，酷乐秀跟练模式、评测模式需要svip */
+export const checkMusicBuy = (item: any) => {
+  let checked = true;
+  // 学生端或者老师端需要校验点播和会员曲目
+  if (state.systemType === "student" || state.systemType === "teacher") {
+    // 如果是点播的曲子，并且还没有购买，需要弹窗提醒
+    if (item.paymentType === "CHARGE" && !item.buyed) {
+      permissionPopup.active = "demand"
+      permissionPopup.musicId = item.id
+      permissionPopup.musicPrice = item.musicPrice
+      permissionPopup.show = true
+      checked = false
+    }
+    // 如果是vip的曲子，当前用户不是会员时，需要弹窗提醒
+    if (storeData.user.vipType === "NOT_VIP" && item.paymentType !== "FREE") {
+      permissionPopup.active = item.paymentType.includes('CHARGE') ? "memberAndDemand" : "member"
+      permissionPopup.musicId = item.id
+      permissionPopup.musicPrice = item.musicPrice
+      permissionPopup.show = true
+      checked = false
+    }
+  }
+  return checked;
+};
+
 /** 头部数据和方法 */
 export const headTopData = reactive({
   /** 模式 */

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

@@ -6,11 +6,11 @@ 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 modeTitle from "./image/modeTitle.json";
 import modeVip from "./image/mode_vip.png";
 import modesVip from "./image/mode_svip.png";
-import { headTopData } from "./index";
+import { headTopData, checkMusicBuy } from "./index";
 import { getQuery } from "/src/utils/queryString";
-import { storeData } from "/src/store";
 import state from "/src/state";
 import { studentQueryUserInfo } from "../api";
 import { usePageVisibility } from "@vant/use";
@@ -20,6 +20,7 @@ import { Popup } from "vant";
 import AbnormalPop from "/src/view/abnormal-pop";
 import { smoothAnimationState } from "../view-detail/smoothAnimation";
 import { browser } from "/src/utils";
+import { stat } from "fs";
 
 export default defineComponent({
   name: "modeView",
@@ -27,6 +28,7 @@ export default defineComponent({
     const modeImgDom1 = ref();
     const modeImgDom2 = ref();
     const modeImgDom3 = ref();
+    const modeImgDom4 = ref();
     watch(
       () => headTopData.modeType,
       (value, oldValue) => {
@@ -37,10 +39,12 @@ export default defineComponent({
             modeImgDom1.value?.pause();
             modeImgDom2.value?.pause();
             modeImgDom3.value?.pause();
+            modeImgDom4.value?.stop();
           } else if (value === "init") {
             modeImgDom1.value?.play();
             modeImgDom2.value?.play();
             modeImgDom3.value?.play();
+            modeImgDom4.value?.goToAndPlay(0);
           }
         });
       }
@@ -58,11 +62,13 @@ export default defineComponent({
     const browserInfo = browser();
     const isPad =  navigator?.userAgent?.includes("UAWEIVRD-W09") || browserInfo?.iPad || browserInfo.isTablet;
 
+    // vip图标
     const showVip = computed(() => {
-			return evaluatingData.tipErjiShow && !state.isLoading && !state.hasDriverPop;
+			return state.vipType === "NOT_VIP" && state.paymentType !== "FREE" && !state.musicBuyInfo.buyed
 		});
+    // svip图标
     const showsVip = computed(() => {
-			return evaluatingData.tipErjiShow && !state.isLoading && !state.hasDriverPop;
+			return !state.vipType?.includes("SVIP") && state.paymentType !== "FREE" && !state.musicBuyInfo.buyed
 		});
 
     return () => (
@@ -83,16 +89,23 @@ export default defineComponent({
             headTopData.modeType = "show";
           }}
         />
-        <img src={titmeImg} class={styles.modeTitle} />
+        {/* <img src={titmeImg} class={styles.modeTitle} /> */}
+        {
+          <Vue3Lottie ref={modeImgDom4} class={styles.modeTitle} animationData={modeTitle} autoPlay={false} loop={false} delay={2000}></Vue3Lottie>
+        }
         <div class={[styles.modeBox, ((!state.isPercussion && !state.enableEvaluation) || (state.isPercussion && state.enableEvaluation) || (state.isPercussion && !state.enableEvaluation)) && styles.twoModeBox]}>
           <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;
+              if (checkMusicBuy(state.musicBuyInfo)) {
+                if(state.isSingleLine){
+                  smoothAnimationState.isShow.value = state.melodyLine;
+                }
+                headTopData.handleChangeModeType("practise")
               }
-              headTopData.handleChangeModeType("practise")
               }}></Vue3Lottie>
-              {/* <img class={styles.vipIcon} src={modeVip} /> */}
+              {
+                showVip.value && <img class={styles.vipIcon} src={modeVip} />
+              }
           </div>
 
           {/* <img class={styles.modeImg} src={lxImg} 
@@ -104,8 +117,12 @@ export default defineComponent({
             }} /> */}
           {!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} /> */}
+              <Vue3Lottie ref={modeImgDom2} class={styles.modeImg} animationData={glMode} autoPlay={false} loop={true} onClick={() => { 
+                if (checkMusicBuy(state.musicBuyInfo)) {
+                  headTopData.handleChangeModeType("follow")
+                }
+                }}></Vue3Lottie>
+              { showsVip.value && <img class={styles.svipIcon} src={modesVip} /> }
             </div>
               // <img class={styles.modeImg} src={glImg} 
               //   onClick={() => headTopData.handleChangeModeType("follow")} />
@@ -113,11 +130,13 @@ export default defineComponent({
           {state.enableEvaluation && 
             <div class={styles.modeItem}>
               <Vue3Lottie ref={modeImgDom3} class={styles.modeImg} animationData={pcMode} autoPlay={false} loop={true} onClick={() => {
-                // 点击评测模式进入评测模块的需要检测耳机状态，通过返回按钮进入评测模块的，不检测耳机状态
-                evaluatingData.needCheckErjiStatus = true;
-                headTopData.handleChangeModeType("evaluating")
+                if (checkMusicBuy(state.musicBuyInfo)) {
+                  // 点击评测模式进入评测模块的需要检测耳机状态，通过返回按钮进入评测模块的，不检测耳机状态
+                  evaluatingData.needCheckErjiStatus = true;
+                  headTopData.handleChangeModeType("evaluating")
+                }
               }}></Vue3Lottie>
-              {/* <img class={styles.svipIcon} src={modesVip} /> */}
+              { showsVip.value && <img class={styles.svipIcon} src={modesVip} /> }
             </div>
             // <img class={styles.modeImg} src={pcImg} 
             //   onClick={() => {

src/state.ts

@@ -553,8 +553,12 @@ const state = reactive({
   guideInfo: null as any,
   noteCoords: [] as any,
   specialPosInit: false,
-  /** 资源类型 */
+  /** 曲子付费类型 */
   paymentType: null,
+  /** 曲子付费信息 */
+  musicBuyInfo: null as any,
+  // vip类型 VIP:会员 SVIP:SVIP，PERMANENT_SVIP:永久SVIP，NOT_VIP:不是vip
+  vipType: '' as any,
   /** 播放模式，默认练习模式 */
   defaultModeType: 1,
   /** 音符最多歌词次数 */
@@ -1730,7 +1734,15 @@ const setState = (data: any, index: number) => {
   state.detailId = data.bizId;
   state.musicPrice = data.musicPrice || 0;
   state.xmlUrl = data.xmlFileUrl;
-  state.paymentType = data.useStatus
+  // 曲子付费类型
+  state.paymentType = data.paymentType;
+  // 是否已经购买
+  state.musicBuyInfo = {
+    id: data.bizId,
+    musicPrice: data.musicPrice,
+    paymentType: data.paymentType,
+    buyed: data.buyed
+  }
   state.partIndex = index >= 0 ? index : 0;
   state.trackId = data.track;
   state.subjectId = data.subjectIds ? data.subjectIds.split(',')?.[0] : 0;