添加会员解锁功能

src/components/select-courseware-member/index.module.less

@@ -0,0 +1,68 @@
+.popBox {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 3000;
+}
+
+.popBody {
+  width: 290px;
+  height: 256px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 200;
+
+  .popBg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 290px;
+    height: 256px;
+  }
+
+  .popClose {
+    position: absolute;
+    top: 49px;
+    right: 3px;
+    width: 24px;
+    height: 25px;
+  }
+
+  .list {
+    width: 258px;
+    margin-top: 110px;
+    margin-left: 17px;
+    position: relative;
+    font-size: 14px;
+    color: #333333;
+    line-height: 22px;
+    padding-bottom: 20px;
+
+    span {
+      color: #FF5A56;
+    }
+  }
+
+  .btnGroup {
+    position: relative;
+    width: 161px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: 16px;
+    color: #777;
+    line-height: 22px;
+    text-align: center;
+
+    img {
+      width: 100%;
+      margin-bottom: 9px;
+    }
+  }
+}

src/components/select-courseware-member/index.tsx

@@ -0,0 +1,63 @@
+import { defineComponent, ref, reactive, onMounted } from 'vue';
+import styles from './index.module.less';
+import popBox from './select_courseware_box.png';
+import popClose from './selce_courseware_close.png';
+import icon_btn from './select_btn.png';
+import { postMessage } from '@/helpers/native-message';
+
+export default defineComponent({
+  name: 'SelectCoursewarePop',
+  emits: ['close', 'select'],
+  setup(props, { emit }) {
+    const close = () => {
+      postMessage({
+        api: 'goBack'
+      });
+    };
+
+    onMounted(() => {
+      // vipMember
+    });
+    return () => (
+      <div
+        class={styles.popBox}
+        onClick={(e: Event) => e.stopPropagation()}
+        onTouchmove={(e: TouchEvent) => e.stopPropagation()}>
+        <div class={styles.popBody}>
+          <img class={styles.popBg} src={popBox} />
+          <img
+            class={styles.popClose}
+            src={popClose}
+            onClick={(e: Event) => {
+              emit('close');
+            }}
+          />
+          <div class={styles.list} id="list">
+            该功能为会员专属权限，开通会员即可<span>查看所有课件</span>
+            ，是否立即开通会员
+          </div>
+          <div class={styles.btnGroup}>
+            <img
+              class={styles.btn}
+              src={icon_btn}
+              onClick={() => {
+                postMessage({
+                  api: 'openWebView',
+                  content: {
+                    url: `${
+                      location.origin.includes('localhost')
+                        ? 'https://test.lexiaoya.cn'
+                        : location.origin
+                    }/classroom-app/#/member-center`,
+                    orientation: 1
+                  }
+                });
+              }}
+            />
+            <div onClick={close}>暂不开通</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+});

src/views/courseware-play/index.tsx

@@ -56,6 +56,7 @@ import SelectCoursewarePop from '@/components/select-courseware-pop';
 import { debounce } from '../../helpers/utils';
 import TempoItem from './component/tempo-item';
 import ListenItem from './component/listen-item';
+import SelectCoursewareMember from '@/components/select-courseware-member';
 
 export default defineComponent({
   name: 'CoursewarePlay',
@@ -63,6 +64,7 @@ export default defineComponent({
     const pageVisibility = usePageVisibility();
     const lastTimeKey = 'lastTime' + (state?.user?.data?.phone ?? '');
     const showSelectCourseware = ref(false);
+    const showMember = ref(false);
     const debounceSkip = ref(false);
     /** 设置播放容器 16:9 */
     const parentContainer = reactive({
@@ -352,6 +354,17 @@ export default defineComponent({
     };
 
     onMounted(() => {
+      // needVipLock
+      const schoolInfos = state.user.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;
+      }
       postMessage({
         api: 'courseLoading',
         content: {
@@ -1337,14 +1350,18 @@ export default defineComponent({
             }}
           />
         </Popup>
-        {showSelectCourseware.value && (
-          <SelectCoursewarePop
-            list={data.coursewareList}
-            kjId={data.kjId}
+        {showMember.value && (
+          // <SelectCoursewarePop
+          //   list={data.coursewareList}
+          //   kjId={data.kjId}
+          //   onClose={() => {
+          //     showSelectCourseware.value = false;
+          //   }}
+          //   onSelect={item => loadNewCourseware(item)}></SelectCoursewarePop>
+          <SelectCoursewareMember
             onClose={() => {
               showSelectCourseware.value = false;
-            }}
-            onSelect={item => loadNewCourseware(item)}></SelectCoursewarePop>
+            }}></SelectCoursewareMember>
         )}
       </div>
     );