添加显示逻辑

src/views/courseware-play/component/musicScore.tsx

@@ -74,12 +74,13 @@ export default defineComponent({
     //   ? 'https://test.lexiaoya.cn'
     //   : location.origin;
     let src = qs.stringifyUrl({
-      url: vaildMusicScoreUrl() + '/instrument',
+      url: vaildMusicScoreUrl() + '/instrument/',
       query: {
         id: props.music.content,
         modelType: 'practise',
         Authorization: Authorization,
         showGuide: true,
+        showCourseMember: false,
         iscurseplay: 'play'
       }
     });
@@ -116,7 +117,7 @@ export default defineComponent({
       //   ? 'https://test.lexiaoya.cn'
       //   : location.origin;
       let src = qs.stringifyUrl({
-        url: vaildMusicScoreUrl() + '/instrument',
+        url: vaildMusicScoreUrl() + '/instrument/',
         query: {
           id: props.music.content,
           Authorization: Authorization,

src/views/courseware-play/index.module.less

@@ -143,6 +143,8 @@
     justify-content: center;
     flex-direction: column;
 
+    z-index: 99;
+
     .memberLockBg {
       width: 303px;
       height: 91px;

src/views/courseware-play/index.tsx

@@ -1095,6 +1095,43 @@ export default defineComponent({
       }
     };
 
+    const gotoMember = () => {
+      postMessage({
+        api: 'openWebView',
+        content: {
+          url: `${
+            location.origin.includes('localhost')
+              ? 'https://test.lexiaoya.cn'
+              : location.origin
+          }/classroom-app/#/member-center`,
+          orientation: 1
+        }
+      });
+    };
+
+    watch(
+      () => pageVisibility.value,
+      async (val: any) => {
+        // 为了处理从没有会员，到购买会员返回时状态变化
+        if (val === 'visible') {
+          const userCash = await request.get('/edu-app/user/getUserInfo', {
+            initRequest: true // 初始化接口
+          });
+          setLogin(userCash.data);
+          const schoolInfos = userCash.data?.schoolInfos;
+          const schoolLock =
+            schoolInfos && schoolInfos.length > 0
+              ? schoolInfos[0].needVipLock
+              : true;
+          if (!state?.user?.data.vipMember && schoolLock) {
+            showMember.value = true;
+          } else {
+            showMember.value = false;
+          }
+        }
+      }
+    );
+
     return () => (
       <div id="playContent" class={styles.playContent}>
         <div
@@ -1115,6 +1152,17 @@ export default defineComponent({
                     : { opacity: 0, zIndex: -1 }
                 }
                 class={styles.itemDiv}>
+                {activeVideoItem.value.paymentType === 'VIP' &&
+                  showMember.value && (
+                    <div class={styles.memberLock}>
+                      <img src={memberLockBg} class={styles.memberLockBg} />
+                      <img
+                        src={selectIcon}
+                        class={styles.selectIcon}
+                        onClick={gotoMember}
+                      />
+                    </div>
+                  )}
                 <VideoItem
                   ref={(el: any) => (data.videoItemRef = el)}
                   item={activeVideoItem.value}
@@ -1172,10 +1220,17 @@ export default defineComponent({
                       }
                       activeData.nowTime = Date.now();
                     }}>
-                    <div class={styles.memberLock}>
-                      <img src={memberLockBg} class={styles.memberLockBg} />
-                      <img src={selectIcon} class={styles.selectIcon} />
-                    </div>
+                    {m.paymentType === 'VIP' && showMember.value && (
+                      <div class={styles.memberLock}>
+                        <img src={memberLockBg} class={styles.memberLockBg} />
+                        <img
+                          src={selectIcon}
+                          class={styles.selectIcon}
+                          onClick={gotoMember}
+                        />
+                      </div>
+                    )}
+
                     {m.type === 'IMG' && <img src={m.content} />}
                     {m.type === 'PPT' && (
                       <iframe

src/views/hot-music-more/index.tsx

@@ -130,7 +130,7 @@ export default defineComponent({
     const onDetail = (item: any) => {
       let src = `${vaildMusicScoreUrl()}/instrument/?id=${
         item?.id
-      }&showGuide=true`;
+      }&showGuide=true&modelType=practise`;
       postMessage({
         api: 'openAccompanyWebView',
         content: {