Merge branch 'feature-tianyong' into gym-test

src/page-instrument/api.ts

@@ -15,7 +15,6 @@ export const studentQueryUserInfo = async () => {
         phone:data.phone,
         clientType:"TEACHER",
         id:data.id,
-        vipMember: true, // 管乐迷 会员现在在外面判断的 所以这里默认不开启会员验证
         gender:""
       }
       return res
@@ -36,7 +35,6 @@ export const studentQueryUserInfo = async () => {
         phone:data.phone,
         clientType:"web",
         id:data.id,
-        vipMember: true, // 管乐迷 会员现在在外面判断的 所以这里默认不开启会员验证
         gender:""
       }
       return res
@@ -50,7 +48,6 @@ export const studentQueryUserInfo = async () => {
         phone:data.phone,
         clientType:"STUDENT",
         id:data.id,
-        vipMember: true, // 管乐迷 会员现在在外面判断的 所以这里默认不开启会员验证
         gender:"",
         membershipEndTime: data.membershipEndTime
       }

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

@@ -6,10 +6,9 @@ import { followData } from "/src/view/follow-practice";
 import state, {IPlatform} from "/src/state";
 import { evaluatingData } from "/src/view/evaluating";
 import { getQuery } from "/src/utils/queryString";
-import Vip from "../vip"
 const query: any = getQuery();
 export const isMusicList = computed(()=>{
-	return !(query.workRecord || query.modelType || state.platform === IPlatform.PC || query.isCbs)
+	return !(state.isHomeWork || query.modelType || state.platform === IPlatform.PC || query.isCbs)
 })
 export const musicListShow = ref(false)
 export default defineComponent({
@@ -17,7 +16,6 @@ export default defineComponent({
 	setup() {
 		return () => (
 			<>
-				<Vip></Vip>
 				<Popup class={styles.popup} position="left" v-model:show={musicListShow.value} round overlay-style={{background:'rgba(0, 0, 0, 0.7)'}}>
 					<div class={[styles.tabs]}>
 						<Tabs>

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

@@ -9,9 +9,7 @@ import searImg from "./imgs/searImg.png"
 import huoimg from "./imgs/huo.png"
 import emptyImg from "./imgs/empty.png"
 import { getQuery } from "/src/utils/queryString";
-import dayjs from "dayjs";
-import { storeData } from "/src/store"
-import { vipShow } from "../vip"
+import { vipData, isVip } from "../vip"
 
 export default defineComponent({
   name: "TheMusicList-list",
@@ -77,12 +75,14 @@ export default defineComponent({
     });
 
     const openAccomapina = (item: any) => {
-      if(item.paymentType === "VIP" && state.systemType === "student" && !dayjs().isBefore(dayjs(storeData.user?.membershipEndTime))){
-        vipShow.value = true
+      // 学生端 没有开会员查看会员曲目
+      if(item.paymentType === "VIP" && state.systemType === "student" && !isVip.value){
+        vipData.show = true
         return
       }
+      // 学校查看会员曲目
       if(item.paymentType === "VIP" && state.systemType === "web" && state.isSchool){
-        vipShow.value = true
+        vipData.show = true
         return
       }
       if (item.id === state.examSongId) return;

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

@@ -1,39 +1,100 @@
-import { defineComponent, ref } from "vue";
-import { Button, Popup } from "vant";
-import state from "/src/state";
-import TipsIcon from "./tips.png";
-import styles from "./index.module.less";
+import { defineComponent, reactive, computed, onMounted, watch } from "vue"
+import { Button, Popup } from "vant"
+import state from "/src/state"
+import TipsIcon from "./tips.png"
+import styles from "./index.module.less"
+import dayjs from "dayjs"
+import { storeData } from "/src/store"
+import { postMessage } from "/src/utils/native-message"
+import { usePageVisibility } from "@vant/use"
+import { studentQueryUserInfo } from "/src/page-instrument/api"
+import { api_back } from "/src/helpers/communication";
+
+export const vipData = reactive({
+   show: false
+})
+
+export const isVip = computed(() => {
+   return dayjs().isBefore(dayjs(storeData.user?.membershipEndTime))
+})
 
-export const vipShow = ref(false)
 export default defineComponent({
-  name: "vip-popup",
-  data() {
-    return {
-      content: "您尚未开通云练习服务，请联系乐团老师开通",
-    };
-  },
-  methods: {
-    open() {
-      vipShow.value = false;
-    },
-    getContent() {
-      if (state.isSchool) {
-        this.content = "VIP曲目暂不可用";
+   name: "vip-popup",
+   setup() {
+      const getContent = computed(() => {
+         if (state.isHomeWork) {
+            return "您还不是团练宝会员，请开通服务后使用该功能"
+         } else if (state.isSchool) {
+            return "VIP曲目暂不可用"
+         } else {
+            return "您尚未开通云练习服务，请联系乐团老师开通"
+         }
+      })
+      onMounted(() => {
+         if (state.isHomeWork && !isVip.value && state.paymentType === "VIP") {
+            vipData.show = true
+         }
+      })
+      function vaildMusicScoreUrl() {
+         const url = window.location.hostname
+         let returnUrl = ""
+         if (/dev/.test(url) || /192.168/.test(url)) {
+            returnUrl = "https://test.gym.lexiaoya.cn"
+         } else if (/test/.test(url)) {
+            // test 环境
+            returnUrl = "https://test.gym.lexiaoya.cn"
+         } else {
+            returnUrl = "https://gym.lexiaoya.cn"
+         }
+         return returnUrl
+      }
+      function hanldeOpen() {
+         if (state.isHomeWork) {
+            postMessage({
+               api: "openWebView",
+               content: {
+                  url: vaildMusicScoreUrl() + `/mdaya/#/member?id=${state.examSongId}`,
+                  orientation: 1
+               }
+            })
+         } else {
+            vipData.show = false
+         }
+      }
+      function handleClose() {
+         if (state.isHomeWork) {
+            api_back()
+         } else {
+            vipData.show = false
+         }
       }
-      return this.content;
-    },
-  },
-  render() {
-    return (
-      <Popup show={vipShow.value} get-container="body" closeable onClickCloseIcon={() => (vipShow.value = false)} round>
-        <div class={styles.vip}>
-          <img src={TipsIcon} />
-          <p>{this.getContent()}</p>
-          <Button class={styles.btn} onClick={this.open} round color="#01C1B5">
-            确定
-          </Button>
-        </div>
-      </Popup>
-    );
-  },
-});
+      const pageVisibility = usePageVisibility()
+      watch(pageVisibility, value => {
+         if (state.isHomeWork && value === "visible") {
+            if (!isVip.value) {
+               studentQueryUserInfo().then(res => {
+                  if (res.code === 200) {
+                     storeData.user.membershipEndTime = res?.data?.membershipEndTime
+                     if (isVip.value) {
+                        vipData.show = false
+                     }
+                  }
+               })
+            }
+         }
+      })
+      return () => (
+         <>
+            <Popup zIndex={9999999} show={vipData.show} get-container="body" closeable onClickCloseIcon={handleClose} round>
+               <div class={styles.vip}>
+                  <img src={TipsIcon} />
+                  <p>{getContent.value}</p>
+                  <Button class={styles.btn} round color="#01C1B5" onClick={hanldeOpen}>
+                     {state.isHomeWork ? "开通" : " 确定"}
+                  </Button>
+               </div>
+            </Popup>
+         </>
+      )
+   }
+})

src/page-instrument/custom-plugins/the-vip/index.module.less

@@ -1,60 +0,0 @@
-.container {
-    position: relative;
-    width: 278px;
-    height: 252px;
-    background: url('./icon_bg.png') no-repeat;
-    background-size: contain;
-    display: flex;
-    flex-direction: column;
-    padding-top: 126px;
-}
-
-.close {
-    position: absolute;
-    right: 0;
-    top: 30px;
-    width: 24px;
-    height: 24px;
-}
-
-.title {
-    margin-left: 14px;
-    width: 80px;
-    display: block;
-}
-
-.content {
-    position: relative;
-    padding: 0 13px 25px 13px;
-    font-size: 14px;
-    font-weight: 400;
-    color: #333333;
-    line-height: 22px;
-    z-index: 10;
-}
-
-.btns {
-    // width: 159px;
-    margin: 0 auto 23px;
-    display: flex;
-    justify-content: center;
-    font-size: 16px;
-    color: #777;
-    line-height: 22px;
-    text-align: center;
-
-    .btn {
-        width: 101px;
-        height: 37px;
-        cursor: pointer;
-    }
-
-    .btnCancel {
-        margin-right: 10px;
-    }
-
-    img {
-        width: 100%;
-        // margin-bottom: 9px;
-    }
-}

src/page-instrument/custom-plugins/the-vip/index.tsx

@@ -1,59 +0,0 @@
-import { defineComponent } from "vue";
-import icon_title from "./icon_title.png";
-import icon_btn from "./icon_btn.png";
-import icon_btn_cancel from "./icon_btn_cancel.png";
-import icon_close from "./icon_close.png";
-import styles from "./index.module.less";
-import { Popup } from "vant";
-import { api_back, api_goback } from "/src/helpers/communication";
-import { postMessage } from "/src/utils/native-message";
-import { getQuery } from "/src/utils/queryString";
-
-export default defineComponent({
-  name: "TheVip",
-  setup() {
-    const apiUrls = {
-      dev: "https://dev.kt.colexiu.com",
-      test: "https://test.lexiaoya.cn",
-      online: "https://kt.colexiu.com",
-    };
-    let environment: "dev" | "test" | "online" = location.origin.includes("//dev") ? "dev" : location.origin.includes("//test") ? "test" : location.origin.includes("//online") || location.origin.includes("//kt") || location.origin.includes("//mec") ? "online" : "dev";
-    const close = () => {
-      const query = getQuery();
-      if (query.modelType) {
-        api_goback();
-      } else {
-        api_back();
-      }
-    };
-
-    return () => (
-      <Popup teleport="body" closeOnClickOverlay={false} class={["popup-custom"]} show={true}>
-        <div class={styles.container}>
-          {/* <img class={styles.close} src={icon_close} onClick={close} /> */}
-          {/* <img class={styles.title} src={icon_title} /> */}
-          <div class={styles.content}>
-            立即开通<span style={{ color: "#FF5A56" }}>"乐器AI学练工具"</span>服务，解锁更多专属权益，享受全新学习体验！
-          </div>
-          <div class={styles.btns}>
-            <img class={[styles.btn, styles.btnCancel]} src={icon_btn_cancel} onClick={close} />
-            <img
-              class={styles.btn}
-              src={icon_btn}
-              onClick={() => {
-                postMessage({
-                  api: "openWebView",
-                  content: {
-                    url: `${location.origin.includes("192") ? "https://test.lexiaoya.cn" : apiUrls[environment]}/classroom-app/#/member-center`,
-                    orientation: 1,
-                  },
-                });
-              }}
-            />
-            {/* <div onClick={close}>暂不领取</div> */}
-          </div>
-        </div>
-      </Popup>
-    );
-  },
-});

src/page-instrument/evaluat-model/evaluat-result/index.tsx

@@ -191,7 +191,7 @@ export default defineComponent({
             </div>
 
             {/* 评测模式-结果弹窗 功能引导 加载音频完成 不是会员 */}
-            {evaluatingData.resulstMode && !evaluatingData.hideResultModal && !evaluatingData.earphoneMode && !query.isCbs && state.audioDone && !state.isVip && !data.saveLoading && <EvaluatingResultDriver saveBtn={evaluatingData.resultData.recordId ? true : false} />}
+            {evaluatingData.resulstMode && !evaluatingData.hideResultModal && !evaluatingData.earphoneMode && !query.isCbs && state.audioDone && !data.saveLoading && <EvaluatingResultDriver saveBtn={evaluatingData.resultData.recordId ? true : false} />}
           </div>
         )}
       </>

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

@@ -986,7 +986,7 @@ export default defineComponent({
         {isAllBtnsStudent.value && !query.isCbs && showGuideIndex.value && <StudentTop></StudentTop>} */}
 
         {/* 练习模式功能引导 加载音频完成 不是会员 */}
-        {state.modeType === "practise" && headTopData.modeType !== "init" && !query.isCbs && state.audioDone && !state.isLoading && !state.isVip && showWebGuide.value && (
+        {state.modeType === "practise" && headTopData.modeType !== "init" && !query.isCbs && state.audioDone && !state.isLoading && showWebGuide.value && (
           <PractiseDriver
             statusAll={{
               playBtnStatus: playBtn.value.display,
@@ -1001,7 +1001,7 @@ export default defineComponent({
           />
         )}
         {/* 跟练模式功能引导 加载音频完成 不是会员 */}
-        {state.modeType === "follow" && headTopData.modeType !== "init" && !followData.earphone && !query.isCbs && state.audioDone && !state.isLoading && !state.isVip && showWebGuide.value && (
+        {state.modeType === "follow" && headTopData.modeType !== "init" && !query.isCbs && state.audioDone && !state.isLoading && showWebGuide.value && (
           <FollowDriver
             statusAll={{
               subjectStatus: state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert,
@@ -1009,7 +1009,7 @@ export default defineComponent({
           />
         )}
         {/* 评测模式功能引导 加载音频完成 不是会员 */}
-        {state.modeType === "evaluating" && headTopData.modeType !== "init" && !evaluatingData.earphoneMode && !query.isCbs && state.audioDone && !state.isLoading && !state.isVip && evaluatingData.websocketState && !evaluatingData.startBegin && evaluatingData.checkEnd && showWebGuide.value && (
+        {state.modeType === "evaluating" && headTopData.modeType !== "init" && !evaluatingData.earphoneMode && !query.isCbs && state.audioDone && !state.isLoading && evaluatingData.websocketState && !evaluatingData.startBegin && evaluatingData.checkEnd && showWebGuide.value && (
           <EvaluatingDriver
             statusAll={{
               subjectStatus: state.musicRendered && !query.lessonTrainingId && !query.questionId && state.isConcert,

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

@@ -9,7 +9,6 @@ import lxImg from "./image/lxImg.png";
 import glImg from "./image/glImg.png";
 import pcImg from "./image/pcImg.png";
 import { headTopData } from "./index";
-import TheVip from "../custom-plugins/the-vip";
 import { getQuery } from "/src/utils/queryString";
 import { storeData } from "/src/store";
 import state from "/src/state";
@@ -25,50 +24,9 @@ import { browser } from "/src/utils";
 export default defineComponent({
   name: "modeView",
   setup() {
-    const query = getQuery();
-    const data = reactive({
-      showVip: false,
-    });
     // const modeImgDom1 = ref();
     // const modeImgDom2 = ref();
     // const modeImgDom3 = ref();
-    const openGuid = () => {
-      // 加载后 判断 端口号 加载对应的引导
-      if (storeData.platformType !== "STUDENT" || storeData.user.clientType !== "STUDENT") {
-      } else {
-        // 从课堂乐器学生端课件预览默认不显示会员
-        if (storeData.user.vipMember || state.paymentType === "FREE" || query.showCourseMember === "true") {
-
-        } else {
-          // 不是vip
-          data.showVip = true;
-          state.isVip = true;
-        }
-      }
-    };
-
-    const getUserInfo = async () => {
-      const res = await studentQueryUserInfo();
-      const student = res?.data || {};
-      storeData.user.vipMember = student.vipMember;
-      // console.log("🚀 ~ student:", student);
-      if (storeData.user.vipMember) {
-        data.showVip = false;
-        state.isVip = false;
-        openGuid();
-      }
-    };
-    const pageVisible = usePageVisibility();
-    watch(
-      () => pageVisible.value,
-      (val) => {
-        if (val === "visible") {
-          if (storeData.user.vipMember) return;
-          console.log("页面显示");
-          getUserInfo();
-        }
-      }
-    );
     // watch(
     //   () => headTopData.modeType,
     //   (value, oldValue) => {
@@ -87,9 +45,6 @@ export default defineComponent({
     //     });
     //   }
     // );
-    onMounted(() => {
-      openGuid();
-    });
     watch(
       () => evaluatingData.socketErrorStatus,
       () => {
@@ -153,7 +108,6 @@ export default defineComponent({
                 }} />
           }
         </div>
-        {data.showVip && <TheVip />}
         {/** 延迟检测中途，socket出错，网络提示弹窗 */}
         {/* {
           state.modeType !== 'evaluating' && 

src/page-instrument/view-detail/index.tsx

@@ -39,6 +39,7 @@ import { position } from "html2canvas/dist/types/css/property-descriptors/positi
 import Loading from "./loading"
 import ExerciseStatistics from "../custom-plugins/ExerciseStatistics"
 import { musicData } from "/src/view/music-score"
+import Vip from "/src/page-instrument/component/vip"
 // import bgJson from "./images/index.json";
 
 // const DelayCheck = defineAsyncComponent(() =>
@@ -630,6 +631,11 @@ export default defineComponent({
             {isMusicList.value && <TheMusicList />}
           </>
         )}
+        
+        {/* vip */}
+        {
+          !detailData.isLoading && <Vip></Vip>
+        }
         <Loading tipText={state.loadingText} />
         <Popup
           zIndex={5050}

src/state.ts

@@ -299,7 +299,6 @@ const state = reactive({
   /** 声部ID */
   subjectId: 0 as number,
   trackId: 0 as string | number,
-  isVip: false, // 是否会员
   /** 分类ID */
   categoriesId: 0,
   /** 分类名称 */
@@ -588,6 +587,7 @@ const state = reactive({
   instrumentId: null,
   /** 是否是作业模式(包含练习和评测) */
   isHomeWork: false,
+  headTopHeight: 0,
 });
 const browserInfo = browser();
 let offset_duration = 0;
@@ -1345,24 +1345,25 @@ let offsetTop = 0;
  */
 export const scrollViewNote = (resetTop?: boolean) => {
   // const cursorElement = document.getElementById("cursorImg-0")!;
-  const noteId = state.times[state.activeNoteIndex].id;
   if (state.isSingleLine) {
     return;
   }
-  if (state.activeNoteIndex <= 1 || resetTop) {
-    offsetTop = 0;
+  const noteId = state.times[state.activeNoteIndex].id;
+  if (!noteId) {
+    return;
   }
   const domId = "vf" + noteId;
-  const cursorElement: any = noteId ? document.querySelector(`[data-vf=${domId}]`)?.parentElement : document.getElementById('restDot')?.parentElement;
+  const cursorElement: any = document.querySelector(`[data-vf=${domId}]`)?.parentElement;
   const musicAndSelection = document.getElementById(state.scrollContainer)!;
-  // offsetTop = musicAndSelection.scrollTop || offsetTop;
-  const noteCenterOffsetTop = cursorElement ? cursorElement?.offsetTop + (cursorElement?.offsetHeight/2) : 0;
-  // console.log('滑动',offsetTop, noteCenterOffsetTop)
-  if (!cursorElement || !noteCenterOffsetTop || !musicAndSelection || offsetTop === noteCenterOffsetTop || Math.abs(offsetTop - noteCenterOffsetTop) < 30) return;
-  offsetTop = noteCenterOffsetTop;
-  if (offsetTop > 100) {
+  if (!state.headTopHeight) {
+    state.headTopHeight = document.querySelector('.headHeight')?.getBoundingClientRect()?.height || 100;
+  }
+  // console.log('滑动',cursorElement.offsetTop,offsetTop, cursorElement, )
+  if (!cursorElement || !musicAndSelection || offsetTop === cursorElement.offsetTop || Math.abs(offsetTop - cursorElement.offsetTop) < 30) return;
+  offsetTop = cursorElement.offsetTop;
+  if (offsetTop > (state.headTopHeight + 30)) {
     musicAndSelection.scrollTo({
-      top: (offsetTop - 100) * state.musicZoom,
+      top: (offsetTop - state.headTopHeight - 30) * state.musicZoom,
       behavior: "smooth",
     });
   } else {
@@ -2289,8 +2290,10 @@ export const handleGuide = async () => {
 
 export const resetCursorPosition = () => {
   if (metronomeData.cursorMode === 1) {
-    const currentActive = document.querySelector(`.dotActive`);
-    currentActive?.classList.remove('dotActive');
+    const currentActives: HTMLElement[] = Array.from(document.querySelectorAll(".dotActive"));
+    currentActives.forEach((currentActive) => {
+      currentActive?.classList.remove("dotActive");
+    })
     // const currentDot = document.querySelector(`.noteIndex_${state.activeNoteIndex}`)
     const noteId = state.times[state.activeNoteIndex].id;
     const domId = "vf" + noteId;
@@ -2301,8 +2304,10 @@ export const resetCursorPosition = () => {
       }, 0);
     }
   } else {
-    const currentActive = document.querySelector(`.dotActive`);
-    currentActive?.classList.remove('dotActive');
+    const currentActives: HTMLElement[] = Array.from(document.querySelectorAll(".dotActive"));
+    currentActives.forEach((currentActive) => {
+      currentActive?.classList.remove("dotActive");
+    })
   }
 }
 

src/store.ts

@@ -17,8 +17,6 @@ type IUser = {
   memberRankSettingId?: number;
   id?: string | number;
   clientType?: "BACKEND" | "SCHOOL" | "TEACHER" | "STUDENT";
-  /** 是否是VIP */
-  vipMember?: boolean;
   phone?: string;
   schoolInfos?: any[];
   // 当前用户 绑定 的乐器