Update index.tsx

src/views/courseList/index.tsx

@@ -1,5 +1,5 @@
 import request from '@/helpers/request';
-import { state } from '@/state';
+import { setLogin, state } from '@/state';
 import {
   Button,
   Cell,
@@ -14,7 +14,8 @@ import {
   reactive,
   onUnmounted,
   TransitionGroup,
-  computed
+  computed,
+  watch
 } from 'vue';
 import styles from './index.module.less';
 import { useRoute, useRouter } from 'vue-router';
@@ -34,12 +35,14 @@ import { handleCheckVip, gotoMemberCenter, hasVip } from '../hook/useFee';
 import iconList from './image/icon-list.png';
 // import OSticky from '@/components/o-sticky';
 import OHeader from '@/components/o-header';
-import { useEventListener } from '@vant/use';
+import { useEventListener, usePageVisibility } from '@vant/use';
 import OLoading from '@/components/o-loading';
 import OSticky from '@/components/o-sticky';
+import dayjs from 'dayjs';
 export default defineComponent({
   name: 'courseList',
   setup() {
+    const pageVisibility = usePageVisibility();
     const route = useRoute();
     const router = useRouter();
     const browserInfo = browser();
@@ -133,13 +136,31 @@ export default defineComponent({
       // window.location.href = location.origin + '/#/member';
     };
 
+    const isHasVip = computed(() => {
+      console.log('isHasVip');
+      return !dayjs().isBefore(
+        dayjs(state.user.data.student.membershipEndTime)
+      ) && !state.user.data.isExistPendingMember
+        ? false
+        : true;
+    });
+
+    const pageStatus = () => {
+      console.log(document.visibilityState, '');
+      if (document.visibilityState === 'visible') {
+        console.log('页面可见');
+      }
+    };
     onMounted(() => {
       getDetail();
       getList();
       listenerMessage('downloadCoursewareToCache', getProgress);
+
+      window.addEventListener('visibilitychange', pageStatus);
     });
     onUnmounted(() => {
       removeListenerMessage('downloadCoursewareToCache', getProgress);
+      window.removeEventListener('visibilitychange', pageStatus);
     });
 
     const handleClick = async (item: any) => {
@@ -281,6 +302,30 @@ export default defineComponent({
         document.documentElement.scrollTop;
       data.titleOpacity = height > 100 ? 1 : height / 100;
     });
+
+    watch(
+      () => pageVisibility.value,
+      async (val: any) => {
+        // 为了处理从没有会员，到购买会员返回时状态变化
+        if (val === 'visible') {
+          try {
+            const res = await request.get(
+              state.platformType === 'STUDENT'
+                ? state.platformApi + '/student/queryUserInfo'
+                : state.platformApi + '/teacher/queryUserInfo',
+              {
+                initRequest: true, // 初始化接口
+                requestType: 'form',
+                hideLoading: true
+              }
+            );
+            setLogin(res.data);
+          } catch (e: any) {
+            //
+          }
+        }
+      }
+    );
     return () => (
       <div class={styles.courseList}>
         <OHeader
@@ -365,7 +410,7 @@ export default defineComponent({
                                         styles.baseBtn,
                                         styles.look,
                                         state.platformType === 'STUDENT' &&
-                                        !hasVip()
+                                        !isHasVip.value
                                           ? styles.disabled
                                           : ''
                                       ]}>
@@ -377,7 +422,7 @@ export default defineComponent({
                                         styles.baseBtn,
                                         styles.down,
                                         state.platformType === 'STUDENT' &&
-                                        !hasVip()
+                                        !isHasVip.value
                                           ? styles.disabled
                                           : '',
                                         item.downloadStatus == 1
@@ -407,7 +452,7 @@ export default defineComponent({
         {data.loading && <OLoading />}
         {!data.loading && !data.list.length && <OEmpty tips="暂无内容" />}
 
-        {state.platformType === 'STUDENT' && !hasVip() && (
+        {state.platformType === 'STUDENT' && !isHasVip.value && (
           <OSticky position="bottom">
             <div class={styles.btnGroup}>
               <Button round block type="primary" onClick={gotoMemberCenter}>