fix

src/components/the-vip/index.module.less

@@ -0,0 +1,54 @@
+.container {
+    position: relative;
+    width: 335px;
+    height: 298px;
+    background: url('./icon_bg.png') no-repeat;
+    background-size: 100%;
+    display: flex;
+    flex-direction: column;
+    padding-top: 56px;
+}
+
+.close {
+    position: absolute;
+    right: 0;
+    top: 30px;
+    width: 30px;
+    height: 30px;
+}
+
+.title {
+    margin-left: 14px;
+    width: 131px;
+    display: block;
+}
+
+.content {
+    position: relative;
+    padding: 40px 20px 20px 20px;
+    font-size: 16px;
+    font-weight: 400;
+    color: #333333;
+    line-height: 22px;
+    z-index: 10;
+}
+
+.btns {
+    position: absolute;
+    bottom: 18px;
+    width: 50%;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: 18px;
+    color: #777;
+    line-height: 26px;
+    text-align: center;
+
+    img {
+        width: 100%;
+        margin-bottom: 12px;
+    }
+}

src/components/the-vip/index.tsx

@@ -0,0 +1,35 @@
+import { defineComponent } from 'vue';
+import icon_bg from './icon_bg.png';
+import icon_title from './icon_title.png';
+import icon_btn from './icon_btn.png';
+import icon_close from './icon_close.png';
+import styles from './index.module.less';
+
+export default defineComponent({
+  name: 'TheVip',
+  emits: ['close'],
+  setup(props, { emit }) {
+    return () => (
+      <div class={styles.container}>
+        <img
+          class={styles.close}
+          src={icon_close}
+          onClick={() => emit('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}
+            src={icon_btn}
+            onClick={() => emit('close', true)}
+          />
+          <div onClick={() => emit('close')}>暂不领取</div>
+        </div>
+      </div>
+    );
+  }
+});

src/router/router-root.ts

@@ -30,13 +30,6 @@ export default [
       title: '数字化乐器学练工具'
     }
   },
-  {
-    path: '/courseware-play',
-    component: () => import('@/views/courseware-play/index'),
-    meta: {
-      title: '课件播放'
-    }
-  },
 
   {
     path: '/payment-result',

src/router/routes-common.ts

@@ -156,6 +156,14 @@ export default [
         meta: {
           title: '小酷AI'
         }
+      },
+
+      {
+        path: '/courseware-play',
+        component: () => import('@/views/courseware-play/index'),
+        meta: {
+          title: '课件播放'
+        }
       }
     ]
   },

src/views/co-ai/index.tsx

@@ -15,6 +15,7 @@ import {
   List,
   Loading,
   NoticeBar,
+  Popup,
   showLoadingToast,
   showToast
 } from 'vant';
@@ -34,6 +35,7 @@ import { api_musicSheetCategoriesPage, api_musicSheetPage } from './api';
 import { state } from '@/state';
 import MEmpty from '@/components/m-empty';
 import { usePageVisibility } from '@vant/use';
+import TheVip from '@/components/the-vip';
 export default defineComponent({
   name: 'co-ai',
   setup() {
@@ -70,7 +72,8 @@ export default defineComponent({
         top: '',
         width: '',
         height: ''
-      }
+      },
+      showVip: false
     });
     const downRef = ref();
     // 返回
@@ -79,6 +82,10 @@ export default defineComponent({
     };
     /** 去云教练 */
     const handleGoto = () => {
+      if (!state.user.data?.vipMember) {
+        data.showVip = true;
+        return;
+      }
       let src = `${location.origin}/instrument?id=${
         data.musics[data.musicIndex]?.id
       }`;
@@ -240,13 +247,16 @@ export default defineComponent({
             </div>
             <div class={styles.center}>
               <MSearch
-                class={["searchNotice", data.searchNoticeShow ? styles.searchNoticeShow : '']}
+                class={[
+                  'searchNotice',
+                  data.searchNoticeShow ? styles.searchNoticeShow : ''
+                ]}
                 shape="round"
                 background="transparent"
                 clearable={false}
                 placeholder="请输入关键字"
                 onFocus={() => (data.searchNoticeShow = false)}
-                onBlur={(val) => {
+                onBlur={val => {
                   musicForms.keyword = val;
                   requestAnimationFrame(() => {
                     requestAnimationFrame(() => {
@@ -318,7 +328,8 @@ export default defineComponent({
               {data.isShowJianpu ? (
                 <>
                   <TransitionGroup name="van-fade">
-                    {data.musics[data.musicIndex]?.musicSvg?.split(',')
+                    {data.musics[data.musicIndex]?.musicSvg
+                      ?.split(',')
                       .map((item: any, index: number) => {
                         return (
                           <img
@@ -370,6 +381,27 @@ export default defineComponent({
             />
           </div>
         )}
+
+        <Popup
+          class="popup-custom van-scale"
+          transition="van-scale"
+          closeOnClickOverlay={false}
+          v-model:show={data.showVip}>
+          <TheVip
+            onClose={val => {
+              if (val) {
+                postMessage({
+                  api: 'openWebView',
+                  content: {
+                    url: `${location.origin}${location.pathname}#/member-center`,
+                    orientation: 1,
+                  }
+                });
+              }
+              data.showVip = false;
+            }}
+          />
+        </Popup>
       </div>
     );
   }

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

@@ -3,12 +3,14 @@ import styles from './musicScore.module.less';
 import qs from 'query-string';
 import iconStart from '../image/icon-start.svg';
 import { listenerMessage, postMessage } from '@/helpers/native-message';
-import { Loading, Skeleton } from 'vant';
+import { Loading, Popup, Skeleton } from 'vant';
 import { usePageVisibility } from '@vant/use';
 import { useRoute } from 'vue-router';
 import { browser } from '@/helpers/utils';
 import { storage } from '@/helpers/storage';
 import { ACCESS_TOKEN } from '@/store/mutation-types';
+import TheVip from '@/components/the-vip';
+import { state } from '@/state';
 
 export default defineComponent({
   name: 'musicScore',
@@ -65,6 +67,7 @@ export default defineComponent({
     const isLoaded = ref(false);
     const renderError = ref(false);
     const renderSuccess = ref(false);
+    const showVip = ref(false);
     const Authorization = storage.get(ACCESS_TOKEN);
     const origin = /(localhost|192)/.test(location.host)
       ? 'https://test.lexiaoya.cn'
@@ -97,6 +100,10 @@ export default defineComponent({
 
     // 去云教练完整版
     const gotoAccomany = () => {
+      if (!state.user.data?.vipMember) {
+        showVip.value = true;
+        return;
+      }
       if (isLoading.value) return;
       if (!browserInfo.ios) {
         isLoading.value = true;
@@ -162,6 +169,27 @@ export default defineComponent({
         <div class={styles.skeletonWrap}>
           <Skeleton class={styles.skeleton} row={8} />
         </div>
+        <Popup
+          teleport="body"
+          class="popup-custom van-scale"
+          transition="van-scale"
+          closeOnClickOverlay={false}
+          v-model:show={showVip.value}>
+          <TheVip
+            onClose={val => {
+              if (val) {
+                postMessage({
+                  api: 'openWebView',
+                  content: {
+                    url: `${location.origin}${location.pathname}#/member-center`,
+                    orientation: 1
+                  }
+                });
+              }
+              showVip.value = false;
+            }}
+          />
+        </Popup>
       </div>
     );
   }