添加页面

src/helpers/request.ts

@@ -31,7 +31,13 @@ let initRequest = false;
 
 request.interceptors.request.use(
   (url, options: any) => {
-    openLoading();
+    // openLoading();
+    Toast.loading({
+      message: '加载中...',
+      forbidClick: true,
+      loadingType: 'spinner',
+      duration: 0
+    })
     initRequest = options.initRequest || false;
     const Authorization = sessionStorage.getItem('Authorization') || '';
     const authHeaders: any = {};
@@ -62,9 +68,10 @@ request.interceptors.request.use(
 
 request.interceptors.response.use(
   async res => {
-    setTimeout(() => {
-      closeLoading();
-    }, 100);
+    // setTimeout(() => {
+    // closeLoading();
+    // }, 100);
+    Toast.clear();
     if (res.status > 299 || res.status < 200) {
       const msg = '服务器错误，状态码' + res.status;
       Toast(msg);

src/router/routes-student.ts

@@ -31,19 +31,19 @@ export default [
         meta: {
           title: '陪练课'
         }
-      },
-      {
-        path: '/memberCenter',
-        name: 'memberCenter',
-        component: () => import('@/student/member-center/index'),
-        meta: {
-          title: '会员中心'
-        }
       }
     ]
   },
   ...rootRouter,
   {
+    path: '/memberCenter',
+    name: 'memberCenter',
+    component: () => import('@/student/member-center/index'),
+    meta: {
+      title: '会员中心'
+    }
+  },
+  {
     path: '/registerProtocol',
     name: 'registerProtocol',
     component: () => import('@/student/protocol/register'),

src/student/member-center/index.module.less

@@ -74,6 +74,19 @@
     }
   }
 
+  .intro {
+    background: url('./images/tip_bg.png') no-repeat center;
+    background-size: contain;
+    height: 142px;
+    font-size: 14px;
+    color: #BB6E3A;
+    p {
+      padding: 45px 25px 0;
+      text-align: justify;
+      line-height: 22px;
+    }
+  }
+
   .memberContainer {
     height: calc(100vh - 196px);
     overflow-y: auto;
@@ -84,6 +97,115 @@
     padding: 0 14px;
     z-index: 99;
   }
+  .memberItem {
+    padding-top: 20px;
+    .title {
+      font-size: 16px;
+      color: #333333;
+      font-weight: 500;
+      span {
+        color: #F7B500;
+      }
+    }
+  }
+
+  .member_function {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    .function_item__content {
+      height: 100%;
+    }
+    .function_item {
+      width: 80px;
+      padding: 12px 0;
+      margin-top: 8px;
+      border-radius: 8px;
+      overflow: hidden;
+      background-color: #FAEFE3;
+      text-align: center;
+    }
+    .function_text {
+      font-size: 12px;
+      color: #814014;
+      line-height: 16px;
+    }
+  }
+
+  .system-list {
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    display: flex;
+    position: relative;
+    user-select: none;
+    box-sizing: content-box;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+  }
+  .system-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1 0 auto;
+    width: 96px;
+    min-height: 120px;
+    box-sizing: border-box;
+    background: #FFFFFF;
+    border-radius: 12px;
+    border: 1px solid #E5E5E5;
+    margin-right: 10px;
+    .title {
+      font-size: 14px;
+      font-weight: 500;
+      color: #333333;
+      line-height: 20px;
+    }
+    .price {
+      color: #DC9362;
+      font-size: 25px;
+      line-height: 1.5;
+      span {
+        font-size: 16px;
+      }
+    }
+    .originalPrice {
+      color: #937059;
+      font-size: 13px;
+    }
+
+    &.active {
+      background: linear-gradient(215deg, #FFE7C4 0%, rgba(250, 211, 156, 0.21) 100%);
+      border: 1px solid #B1652E;
+      position: relative;
+      .title {
+        color: #814014;
+      }
+      .price {
+        color: #B1652E;
+      }
+      .originalPrice {
+        color: #937059;
+      }
+      &::before {
+        content: "\e728";
+        font: 14px/1 'vant-icon';
+        color: #fff;
+        background-color: #b1652e;
+        width: 27px;
+        height: 18px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        top: 0;
+        right: 0;
+        border-radius: 0 12px 0 12px;
+      }
+    }
+  }
 
 
   .btnGroup {

src/student/member-center/index.tsx

@@ -1,16 +1,33 @@
 import ColHeader from "@/components/col-header";
-import { Button, Cell, Image } from "vant";
+import { Button, Cell, Col, Grid, GridItem, Icon, Image, Row } from "vant";
 import { defineComponent } from "vue";
 import styles from './index.module.less';
+import ColProtocol from "@/components/col-protocol";
 
 import iconTeacher from '@common/images/icon_teacher.png';
-import ColProtocol from "@/components/col-protocol";
+import a1 from './images/1.png';
+import a2 from './images/2.png';
+import a3 from './images/3.png';
+import a4 from './images/4.png';
+import a5 from './images/5.png';
+import a6 from './images/6.png';
+import a7 from './images/7.png';
+import a8 from './images/8.png';
 
 export default defineComponent({
   name: 'MemberCenter',
   data() {
     return {
       agreeStatus: false,
+      functionList: [{ title: '五线谱<br />跟播', icon: a1 },
+        { title: '演奏指法<br />跟播', icon: a2 },
+        { title: '原声/伴奏<br />切换', icon: a3 },
+        { title: '播放速度<br />调整', icon: a4 },
+        { title: '五线谱选段<br />播放', icon: a5 },
+        { title: '智能评测', icon: a6 },
+        { title: '评测报告', icon: a7 },
+        { title: '评测音视频<br />云储存', icon: a8 },
+      ]
     }
   },
   render() {
@@ -26,13 +43,63 @@ export default defineComponent({
               <span class={styles.phone} v-html="（15907121013）"></span>
             </div>),
             label: () => (<div class={styles.member_time}>
-              {true ? <div> 会员权益有效期剩余<span class={styles.remaining}>200</span>天</div> :<div>亲，您还不是会员哟</div>}
+              {true ? <div> 会员权益有效期剩余<span class={styles.remaining}>200</span>天</div> : <div>亲，您还不是会员哟</div>}
             </div>)
           }}></Cell>
         </div>
 
         <div class={styles.memberContainer}>
-          <ColProtocol v-model={this.agreeStatus} style={{ paddingLeft: 0, paddingRight: 0 }} />
+          <div class={styles.memberItem}>
+            <div class={styles.title}>
+              会员<span>VIP</span>
+            </div>
+
+            <div class={styles['system-list']}>
+              <div class={[styles['system-item'], styles.active]}>
+                <p class={styles.title}>月度会员</p>
+                <p class={styles.price}><span>￥</span>199</p>
+                <del class={styles.originalPrice}>￥199</del>
+              </div>
+
+              <div class={styles['system-item']}>
+                <p class={styles.title}>月度会员</p>
+                <p class={styles.price}><span>￥</span>199</p>
+                <del class={styles.originalPrice}>￥199</del>
+              </div>
+
+              <div class={styles['system-item']}>
+                <p class={styles.title}>月度会员</p>
+                <p class={styles.price}><span>￥</span>199</p>
+                <del class={styles.originalPrice}>￥199</del>
+              </div>
+
+              <div class={styles['system-item']}>
+                <p class={styles.title}>月度会员</p>
+                <p class={styles.price}><span>￥</span>199</p>
+                <del class={styles.originalPrice}>￥199</del>
+              </div>
+            </div>
+          </div>
+
+          <div class={[styles.intro]}>
+            <p>黄金会员使用包括平台提供教材的所有训练乐谱，并专享“<b>乐器练习云教练</b>”八大核心功能，孩子在家就能轻松完成乐器自主规范练习。</p>
+          </div>
+
+          <div class={styles.memberItem}>
+            <div class={styles.title}>会员功能</div>
+
+            <div class={styles.member_function}>
+              {this.functionList.map((item: any) => (
+                <div class={styles.function_item}>
+                  <Icon name={item.icon} size={34} />
+                  <div class={styles.function_text} v-html={item.title}></div>
+                </div>
+              ))}
+            </div>
+
+          </div>
+
+          <ColProtocol v-model={this.agreeStatus} style={{ paddingLeft: 0, paddingRight: 0, marginBottom: '20px' }} />
         </div>
         <div class={styles.btnGroup}>
           <div class={styles.priceSection}>

src/styles/index.less

@@ -88,6 +88,7 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
+  min-height: 100vh;
 }
 
 body {

src/teacher/music-cert/index.module.less

@@ -1,7 +1,6 @@
 .music-cert {
   background-color: #fff;
   padding: 12px;
-  min-height: 100vh;
   position: relative;
   padding-bottom: 75px;
 

src/teacher/music-cert/index.tsx

@@ -12,9 +12,13 @@ export default defineComponent({
       authStatus: null
     }
   },
+  mounted() {
+    if (state.user.data?.musicianAuthStatus) {
+      state.musicCertStatus = !!state.user.data.musicianAuthStatus
+    }
+  },
   methods: {
     async onClick() {
-      // teacherState.authStatus = true
       try {
         await request.post('/api-teacher/TeacherAuthMusicianRecord/doApply', {})
         Toast('申请认证成功')

src/teacher/open-live/index.module.less

@@ -1,8 +1,7 @@
 .open-live {
   overflow: hidden;
-  min-height: 100vh;
   background: url('./images/header_bg.png') top center no-repeat;
-  background-size: contain;
+  background-size: 100%;
 
   .header-content {
     display: flex;

src/teacher/open-live/index.tsx

@@ -30,7 +30,7 @@ export default defineComponent({
           content: () => (
             <Sticky>
               <div class={styles['header-content']}>
-                <Button round plain size="small" class={styles.openBtn} onClick={this.onOpenLive}>开通直播</Button>
+                <Button round plain size="small" disabled={!this.users.liveFlag} class={styles.openBtn} onClick={this.onOpenLive}>开通直播</Button>
               </div>
             </Sticky>
           )
@@ -58,10 +58,10 @@ export default defineComponent({
             </div>
         </Cell>
 
-        <div class={styles['open-tips']}>
+        {!this.users.liveFlag ? <div class={styles['open-tips']}>
           <Icon name={tips} size="16" />
           <p>你尚未达到开通直播的条件</p>
-        </div>
+        </div> : null}
 
         <div class={styles['open-content']}>
           <h2>开通直播能为您带来什么？</h2>

src/teacher/teacher-cert/cert-one.tsx

@@ -50,7 +50,7 @@ export default defineComponent({
       return sex;
     },
     onConfirm(_date: any) {
-      teacherState.teacherCert.birthdate = dayjs(this.popupDate).format('YYYY/MM/DD')
+      teacherState.teacherCert.birthdate = dayjs(this.popupDate).format('YYYY-MM-DD')
       this.popupShow = false;
     },
     formatter(type: any, val: any) {

src/teacher/teacher-cert/index.tsx

@@ -61,16 +61,17 @@ export default defineComponent({
       }
 
       try {
-        await request.post('/api-teacher/TeacherAuthEntryRecord/realNameAuth', {
+        await request.post('/api-auth/user/realNameAuth', {
           data: {
             realName,
-            idCardNo
+            idCardNo,
+            save: false
           }
         })
-        teacherState.active = 2;
       } catch {
         //
       }
+      teacherState.active = 2;
     },
     next2() {
       if(!teacherState.teacherCert.subjectId) {