更新

src/helpers/utils.ts

@@ -66,7 +66,7 @@ export const getAuth = () => {
 export const getUserType = () => {
   let token = Cookies.get('token')
   token = token ? JSON.parse(token) : {}
-  return token.userType || null
+  return token.loginUserType || null
 }
 
 export const getWeekCh = (week: number, type = 0) => {

src/helpers/zhCn.ts

@@ -0,0 +1,123 @@
+'use strict'
+export const zhCn = {
+  name: 'zh-cn',
+  el: {
+    colorpicker: {
+      confirm: '\u786E\u5B9A',
+      clear: '\u6E05\u7A7A'
+    },
+    datepicker: {
+      now: '\u6B64\u523B',
+      today: '\u4ECA\u5929',
+      cancel: '\u53D6\u6D88',
+      clear: '\u6E05\u7A7A',
+      confirm: '\u786E\u5B9A',
+      selectDate: '\u9009\u62E9\u65E5\u671F',
+      selectTime: '\u9009\u62E9\u65F6\u95F4',
+      startDate: '\u5F00\u59CB\u65E5\u671F',
+      startTime: '\u5F00\u59CB\u65F6\u95F4',
+      endDate: '\u7ED3\u675F\u65E5\u671F',
+      endTime: '\u7ED3\u675F\u65F6\u95F4',
+      prevYear: '\u524D\u4E00\u5E74',
+      nextYear: '\u540E\u4E00\u5E74',
+      prevMonth: '\u4E0A\u4E2A\u6708',
+      nextMonth: '\u4E0B\u4E2A\u6708',
+      year: '\u5E74',
+      month1: '1 \u6708',
+      month2: '2 \u6708',
+      month3: '3 \u6708',
+      month4: '4 \u6708',
+      month5: '5 \u6708',
+      month6: '6 \u6708',
+      month7: '7 \u6708',
+      month8: '8 \u6708',
+      month9: '9 \u6708',
+      month10: '10 \u6708',
+      month11: '11 \u6708',
+      month12: '12 \u6708',
+      weeks: {
+        sun: '\u65E5',
+        mon: '\u4E00',
+        tue: '\u4E8C',
+        wed: '\u4E09',
+        thu: '\u56DB',
+        fri: '\u4E94',
+        sat: '\u516D'
+      },
+      months: {
+        jan: '\u4E00\u6708',
+        feb: '\u4E8C\u6708',
+        mar: '\u4E09\u6708',
+        apr: '\u56DB\u6708',
+        may: '\u4E94\u6708',
+        jun: '\u516D\u6708',
+        jul: '\u4E03\u6708',
+        aug: '\u516B\u6708',
+        sep: '\u4E5D\u6708',
+        oct: '\u5341\u6708',
+        nov: '\u5341\u4E00\u6708',
+        dec: '\u5341\u4E8C\u6708'
+      }
+    },
+    select: {
+      loading: '\u52A0\u8F7D\u4E2D',
+      noMatch: '\u65E0\u5339\u914D\u6570\u636E',
+      noData: '\u65E0\u6570\u636E',
+      placeholder: '\u8BF7\u9009\u62E9'
+    },
+    cascader: {
+      noMatch: '\u65E0\u5339\u914D\u6570\u636E',
+      loading: '\u52A0\u8F7D\u4E2D',
+      placeholder: '\u8BF7\u9009\u62E9',
+      noData: '\u6682\u65E0\u6570\u636E'
+    },
+    pagination: {
+      goto: '\u524D\u5F80',
+      pagesize: '\u6761/\u9875',
+      total: '\u5171 {total} \u6761',
+      pageClassifier: '\u9875',
+      deprecationWarning:
+        '\u4F60\u4F7F\u7528\u4E86\u4E00\u4E9B\u5DF2\u88AB\u5E9F\u5F03\u7684\u7528\u6CD5\uFF0C\u8BF7\u53C2\u8003 el-pagination \u7684\u5B98\u65B9\u6587\u6863'
+    },
+    messagebox: {
+      title: '\u63D0\u793A',
+      confirm: '\u786E\u5B9A',
+      cancel: '\u53D6\u6D88',
+      error: '\u8F93\u5165\u7684\u6570\u636E\u4E0D\u5408\u6CD5!'
+    },
+    upload: {
+      deleteTip: '\u6309 delete \u952E\u53EF\u5220\u9664',
+      delete: '\u5220\u9664',
+      preview: '\u67E5\u770B\u56FE\u7247',
+      continue: '\u7EE7\u7EED\u4E0A\u4F20'
+    },
+    table: {
+      emptyText: '\u6682\u65E0\u6570\u636E',
+      confirmFilter: '\u7B5B\u9009',
+      resetFilter: '\u91CD\u7F6E',
+      clearFilter: '\u5168\u90E8',
+      sumText: '\u5408\u8BA1'
+    },
+    tree: {
+      emptyText: '\u6682\u65E0\u6570\u636E'
+    },
+    transfer: {
+      noMatch: '\u65E0\u5339\u914D\u6570\u636E',
+      noData: '\u65E0\u6570\u636E',
+      titles: ['\u5217\u8868 1', '\u5217\u8868 2'],
+      filterPlaceholder: '\u8BF7\u8F93\u5165\u641C\u7D22\u5185\u5BB9',
+      noCheckedFormat: '\u5171 {total} \u9879',
+      hasCheckedFormat: '\u5DF2\u9009 {checked}/{total} \u9879'
+    },
+    image: {
+      error: '\u52A0\u8F7D\u5931\u8D25'
+    },
+    pageHeader: {
+      title: '\u8FD4\u56DE'
+    },
+    popconfirm: {
+      confirmButtonText: '\u786E\u5B9A',
+      cancelButtonText: '\u53D6\u6D88'
+    }
+  }
+}

src/views/App.tsx

@@ -1,6 +1,7 @@
 import ColFooter from '@/components/col-footer'
 import ColHeader from '@/components/col-header'
-import { ElDialog } from 'element-plus'
+import { ElConfigProvider, ElDialog } from 'element-plus'
+import { zhCn } from '@/helpers/zhCn'
 import { defineComponent } from 'vue'
 import { RouterView } from 'vue-router'
 import Login from './login'
@@ -20,19 +21,27 @@ export default defineComponent({
     }
 
     try {
+      console.log(userType)
       const url =
         userType === 'TEACHER'
           ? '/api-website/teacher/queryUserInfo'
           : '/api-website/student/queryUserInfo'
       const res = await request.get(url)
-      console.log(res)
-    } catch {}
+      state.user.data = res.data || {}
+
+      // 登录状态
+      state.user.status = 'login'
+    } catch {
+      state.user.status = 'init'
+    }
   },
   render() {
     return (
       <>
         <ColHeader />
-        <RouterView></RouterView>
+        <ElConfigProvider locale={zhCn}>
+          <RouterView></RouterView>
+        </ElConfigProvider>
         <ColFooter />
         {/* 登录弹窗 */}
         <div class={styles.loginContainer}>

src/views/roleAuth/musicAuth/index.module.less

@@ -30,4 +30,14 @@
     border-radius: 10px;
     min-height: 197px;
   }
+
+  :global {
+    .el-dialog {
+      --el-dialog-width: 379px !important;
+    }
+    .el-dialog__header,
+    .el-dialog__body {
+      padding: 0;
+    }
+  }
 }

src/views/roleAuth/musicAuth/index.tsx

@@ -1,4 +1,6 @@
-import { ElButton, ElCol, ElRow } from 'element-plus'
+import request from '@/helpers/request'
+import { state } from '@/state'
+import { ElButton, ElCol, ElDialog, ElRow } from 'element-plus'
 import { defineComponent } from 'vue'
 import styles from './index.module.less'
 
@@ -10,6 +12,60 @@ export const getAssetsHomeFile = (fileName: string) => {
 
 export default defineComponent({
   name: 'musicAuth',
+  data() {
+    return {
+      btnTxt: '立即认证',
+      musicCertStatus: false as boolean, // 是否音乐认证
+      popupStatus: false // 弹窗状态
+    }
+  },
+  computed: {
+    auth() {
+      // 音乐人审核状态 UNPAALY、未申请 DOING、审核中 PASS、通过 UNPASS、不通过,可用值:UNPAALY,DOING,PASS,UNPASS
+      let auth = state.user.data?.musicianAuthStatus
+      let obj = {
+        text: '立即认证',
+        status: false
+      }
+      switch (auth) {
+        case 'DOING':
+          obj.text = '审核中'
+          obj.status = true
+          break
+        case 'PASS':
+          obj.text = '已认证'
+          obj.status = true
+      }
+      return obj
+    }
+  },
+  mounted() {
+    // 音乐人审核状态 0、未申请 UNPAALY、已申请 DOING、审核中 PASS、通过 UNPASS、不通过
+    let musicianAuthStatus = state.user.data?.musicianAuthStatus
+    console.log(state.user)
+    if (musicianAuthStatus) {
+      this.musicCertStatus =
+        musicianAuthStatus === 'DOING' || musicianAuthStatus === 'PASS'
+          ? true
+          : false
+    }
+  },
+  methods: {
+    async onSubmit() {
+      try {
+        // 判断是否有登录
+        if (state.user.status !== 'login') {
+          state.loginPopupStatus = true
+          return
+        }
+
+        // 判断是否有权限
+        await request.post('/api-website/teacherAuthMusicianRecord/doApply', {})
+        state.user.data.musicianAuthStatus = 'DOING'
+        this.popupStatus = true
+      } catch {}
+    }
+  },
   render() {
     return (
       <div
@@ -75,11 +131,44 @@ export default defineComponent({
           </ElRow>
 
           <div class="text-center">
-            <ElButton type="primary" class="rounded w-40 !h-[38px]">
-              立即认证
+            <ElButton
+              type="primary"
+              class="rounded w-40 !h-[38px]"
+              onClick={this.onSubmit}
+              disabled={this.auth.status}
+            >
+              {this.auth.text}
             </ElButton>
           </div>
         </div>
+
+        <ElDialog
+          modelValue={this.popupStatus}
+          onUpdate:modelValue={val => (this.popupStatus = val)}
+          closeOnClickModal={false}
+          closeOnPressEscape={false}
+          showClose
+        >
+          <div class="p-8">
+            <img src={getAssetsHomeFile('icon_music.png')} />
+            <p class="text-center text-[#666] text-base -m-1 pb-6">
+              您已成功提交音乐人认证申请
+              <br />
+              我们将在2个工作日内与您取得联系
+            </p>
+
+            <ElButton
+              type="primary"
+              class="w-full rounded-sm"
+              style={{ height: '38px' }}
+              onClick={() => {
+                this.popupStatus = false
+              }}
+            >
+              我知道了
+            </ElButton>
+          </div>
+        </ElDialog>
       </div>
     )
   }

src/views/roleAuth/teacherAuth/components/auth/auth/index.tsx

@@ -0,0 +1,8 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'auth',
+  render() {
+    return <></>
+  }
+})

src/views/roleAuth/teacherAuth/components/auth/index.module.less

@@ -0,0 +1,42 @@
+.steps {
+  height: 40px;
+  border-top: 1px solid #eaeaea;
+  border-bottom: 1px solid #eaeaea;
+  @apply flex-1 bg-slate-200 flex items-center justify-center text-[#999] mr-[6px] last:mr-0 relative;
+  &::after {
+    content: '';
+    display: block;
+    border-top: 20px solid transparent;
+    border-bottom: 20px solid transparent;
+    border-left: 20px solid rgb(226 232 240 / var(--tw-bg-opacity));
+    position: absolute;
+    right: -20px;
+    top: 0;
+    z-index: 10;
+  }
+  &::before {
+    content: '';
+    display: block;
+    border-top: 20px solid rgb(226 232 240 / var(--tw-bg-opacity));
+    border-bottom: 20px solid rgb(226 232 240 / var(--tw-bg-opacity));
+    border-left: 20px solid #fff;
+    position: absolute;
+    left: 0px;
+    top: 0;
+  }
+}
+
+.form {
+  :global {
+    .el-radio-button__inner {
+      border: var(--el-border);
+      border-radius: var(--el-border-radius-base) !important;
+      width: 100%;
+      padding: 11px 19px !important;
+    }
+    .el-radio-button__original-radio:checked + .el-radio-button__inner {
+      background-color: #e9fff8;
+      color: var(--el-color-primary);
+    }
+  }
+}

src/views/roleAuth/teacherAuth/components/auth/index.tsx

@@ -0,0 +1,67 @@
+import {
+  ElButton,
+  ElDatePicker,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElRadioButton,
+  ElRadioGroup
+} from 'element-plus'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+
+export default defineComponent({
+  name: 'auth',
+  data() {
+    return {
+      radio: '1'
+    }
+  },
+  render() {
+    return (
+      <div class="pt-12 px-72 pb-24">
+        <div class="flex items-center bg-white">
+          {[1, 2, 3].map(i => (
+            <div class={styles.steps}>
+              <div class="w-[30px] h-[30px] rounded-full overflow-hidden bg-slate-600 mr-3"></div>
+              实名认证
+            </div>
+          ))}
+        </div>
+
+        <ElForm
+          class={[styles.form, 'mx-4 mt-7']}
+          size="large"
+          labelPosition="left"
+        >
+          <ElFormItem label="真实姓名" labelWidth={'70px'}>
+            <ElInput placeholder="请输入您的真实姓名" />
+          </ElFormItem>
+          <ElFormItem label="身份证号" labelWidth={'70px'}>
+            <ElInput placeholder="请输入您的身份证号码" />
+          </ElFormItem>
+          <ElFormItem label="性别" labelWidth={'70px'}>
+            <ElRadioGroup v-model={this.radio}>
+              <ElRadioButton label="男" name="1" class="mr-3 w-24" />
+              <ElRadioButton label="女" name="2" class="w-24" />
+            </ElRadioGroup>
+          </ElFormItem>
+          <ElFormItem label="出生日期" labelWidth={'70px'}>
+            <ElDatePicker
+              type="date"
+              class="!h-[38px] !w-full"
+              placeholder="请选择出生日期"
+            />
+          </ElFormItem>
+          <ElFormItem>
+            <div class="text-center w-full">
+              <ElButton type="primary" class="!w-40 !h-[38px]">
+                下一步
+              </ElButton>
+            </div>
+          </ElFormItem>
+        </ElForm>
+      </div>
+    )
+  }
+})

src/views/roleAuth/teacherAuth/components/base-info/auth copy/auth/index.tsx

@@ -0,0 +1,8 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'auth',
+  render() {
+    return <></>
+  }
+})

src/views/roleAuth/teacherAuth/components/base-info/auth copy/index.tsx

@@ -0,0 +1,8 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'auth',
+  render() {
+    return <></>
+  }
+})

src/views/roleAuth/teacherAuth/components/base-info/auth/index.tsx

@@ -0,0 +1,8 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'auth',
+  render() {
+    return <></>
+  }
+})

src/views/roleAuth/teacherAuth/components/base-info/index.tsx

@@ -0,0 +1,8 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'auth',
+  render() {
+    return <></>
+  }
+})

src/views/roleAuth/teacherAuth/components/cert-info/index.module.less

@@ -0,0 +1,33 @@
+.musicAuth {
+  background: url('../../../images/bg_top.png') no-repeat top left,
+    url('../../../images/bg_left_bottom.png') no-repeat left bottom,
+    url('../../../images/bg_right_center.png') no-repeat right 70%,
+    url('../../../images/teacher_main.png') no-repeat top right;
+  background-size: 212px 126px, 178px 172px, 171px 230px, 682px 458px;
+  background-color: #fff;
+  .txt {
+    position: relative;
+    z-index: 1;
+    @apply pb-5;
+    &::after {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 13px;
+      background: #cbfdd5;
+      position: absolute;
+      bottom: 15px;
+      left: 0;
+      z-index: -1;
+      opacity: 0.63;
+      @apply rounded-xl;
+    }
+  }
+
+  .col {
+    background: #ffffff;
+    box-shadow: 0px 10px 36px 0px rgba(0, 0, 0, 0.13);
+    border-radius: 10px;
+    min-height: 197px;
+  }
+}

src/views/roleAuth/teacherAuth/components/cert-info/index.tsx

@@ -0,0 +1,120 @@
+import { state } from '@/state'
+import { ElButton, ElCol, ElRow } from 'element-plus'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `../../../images/${fileName}`
+  const modules = import.meta.globEager('../../../images/*')
+  return modules[path].default
+}
+
+export default defineComponent({
+  name: 'cert-info',
+  computed: {
+    auth() {
+      // 音乐人审核状态 UNPAALY、未申请 DOING、审核中 PASS、通过 UNPASS、不通过,可用值:UNPAALY,DOING,PASS,UNPASS
+      let auth = state.user.data?.entryStatus
+      let obj = {
+        text: '立即认证',
+        status: false
+      }
+      switch (auth) {
+        case 'DOING':
+          obj.text = '审核中'
+          obj.status = true
+          break
+        case 'PASS':
+          obj.text = '已认证'
+          obj.status = true
+      }
+      return obj
+    }
+  },
+  data() {
+    return {
+      list: [
+        {
+          logo: getAssetsHomeFile('o1.png'),
+          num: getAssetsHomeFile('num1.png'),
+          title: '线上授课',
+          desc: '认证成为酷乐秀老师后，可设置您的空闲时间为平台中的求学者进行1对1的线上课程指导。'
+        },
+        {
+          logo: getAssetsHomeFile('o2.png'),
+          num: getAssetsHomeFile('num2.png'),
+          title: '个人风采展示',
+          desc: '可发布自己的专业经历、获奖记录及音视频资料对求学者展示，让学员更加深入的了解您的专业技能，从而提高约课率。'
+        },
+        {
+          logo: getAssetsHomeFile('o3.png'),
+          num: getAssetsHomeFile('num3.png'),
+          title: '曲谱上传',
+          desc: '可上传您制作的MIDI乐谱为求学者提供学习曲目的途径，并从中获得收益。'
+        },
+        {
+          logo: getAssetsHomeFile('o4.png'),
+          num: getAssetsHomeFile('num4.png'),
+          title: '收益提现',
+          desc: '在您授课及上传曲谱销售后，经过平台核算，将您获得的收益发放至您的个人账户下，您可随时将自己获得的收益提现。'
+        }
+      ]
+    }
+  },
+  render() {
+    return (
+      <div class={[styles.musicAuth, 'px-[138px]']}>
+        <div class="w-[388px] pt-24 pb-28">
+          <div class="text-[28px] font-semibold pb-5">酷乐秀基本介绍</div>
+          <p class={[styles.txt]}>
+            酷乐秀是一款为器乐学习者提供智能陪练及线上授课撮
+          </p>
+          <p class={[styles.txt]}>
+            合的乐器教学平台，器乐老师可通过自身的专业知识为
+          </p>
+          <p class={[styles.txt, 'inline-block']}>
+            自己带来<span class="font-medium">授课及曲谱销售收益</span>。
+          </p>
+        </div>
+        <div class="pb-20">
+          <h2 class="text-2xl pb-11 text-center font-semibold">认证权益</h2>
+
+          <ElRow class="mb-24" gutter={28}>
+            {this.list.map((item: any) => (
+              <ElCol span={6} class="pr-3 !flex">
+                <div class={[styles.col, 'flex items-center flex-col p-4']}>
+                  <img class="w-[94px] h-[87px]" src={item.logo} />
+
+                  <div class="flex items-center font-[18px] font-medium pb-3 pt-5">
+                    <img class="w-[30px] h-[22px] mr-1" src={item.num} />
+                    {item.title}
+                  </div>
+                  <p class="text-[14px] text-[#666] leading-6 text-justify">
+                    {item.desc}
+                  </p>
+                </div>
+              </ElCol>
+            ))}
+          </ElRow>
+
+          <h2 class="text-2xl pb-10 text-center font-semibold">
+            酷乐秀欢迎您的加入
+          </h2>
+
+          <p class="text-lg text-center mb-10">
+            在艺术的殿堂中，为他人照亮前进的道路，用自己的经验和点拨，传播艺术的种子，获取硕果。
+          </p>
+
+          <div class="text-center">
+            <ElButton
+              type="primary"
+              class="rounded w-40 !h-[38px]"
+              disabled={this.auth.status}
+            >
+              {this.auth.text}
+            </ElButton>
+          </div>
+        </div>
+      </div>
+    )
+  }
+})

src/views/roleAuth/teacherAuth/components/edu-information/auth copy/auth/index.tsx

@@ -0,0 +1,8 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'auth',
+  render() {
+    return <></>
+  }
+})

src/views/roleAuth/teacherAuth/components/edu-information/auth copy/index.tsx

@@ -0,0 +1,8 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'auth',
+  render() {
+    return <></>
+  }
+})

src/views/roleAuth/teacherAuth/components/edu-information/auth/index.tsx

@@ -0,0 +1,8 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'auth',
+  render() {
+    return <></>
+  }
+})

src/views/roleAuth/teacherAuth/components/edu-information/index.tsx

@@ -0,0 +1,8 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'auth',
+  render() {
+    return <></>
+  }
+})

src/views/roleAuth/teacherAuth/index.module.less

@@ -1,33 +0,0 @@
-.musicAuth {
-  background: url('../images/bg_top.png') no-repeat top left,
-    url('../images/bg_left_bottom.png') no-repeat left bottom,
-    url('../images/bg_right_center.png') no-repeat right 70%,
-    url('../images/teacher_main.png') no-repeat top right;
-  background-size: 212px 126px, 178px 172px, 171px 230px, 682px 458px;
-  background-color: #fff;
-  .txt {
-    position: relative;
-    z-index: 1;
-    @apply pb-5;
-    &::after {
-      content: '';
-      display: block;
-      width: 100%;
-      height: 13px;
-      background: #cbfdd5;
-      position: absolute;
-      bottom: 15px;
-      left: 0;
-      z-index: -1;
-      opacity: 0.63;
-      @apply rounded-xl;
-    }
-  }
-
-  .col {
-    background: #ffffff;
-    box-shadow: 0px 10px 36px 0px rgba(0, 0, 0, 0.13);
-    border-radius: 10px;
-    min-height: 197px;
-  }
-}

src/views/roleAuth/teacherAuth/index.tsx

@@ -1,6 +1,10 @@
-import { ElButton, ElCol, ElRow } from 'element-plus'
+import request from '@/helpers/request'
+import { state } from '@/state'
 import { defineComponent } from 'vue'
+import Auth from './components/auth'
+import CertInfo from './components/cert-info'
 import styles from './index.module.less'
+import { teacherState } from './teacherState'
 
 export const getAssetsHomeFile = (fileName: string) => {
   const path = `../images/${fileName}`
@@ -10,91 +14,58 @@ export const getAssetsHomeFile = (fileName: string) => {
 
 export default defineComponent({
   name: 'teacherAuth',
-  data() {
-    return {
-      list: [
-        {
-          logo: getAssetsHomeFile('o1.png'),
-          num: getAssetsHomeFile('num1.png'),
-          title: '线上授课',
-          desc: '认证成为酷乐秀老师后，可设置您的空闲时间为平台中的求学者进行1对1的线上课程指导。'
-        },
-        {
-          logo: getAssetsHomeFile('o2.png'),
-          num: getAssetsHomeFile('num2.png'),
-          title: '个人风采展示',
-          desc: '可发布自己的专业经历、获奖记录及音视频资料对求学者展示，让学员更加深入的了解您的专业技能，从而提高约课率。'
-        },
-        {
-          logo: getAssetsHomeFile('o3.png'),
-          num: getAssetsHomeFile('num3.png'),
-          title: '曲谱上传',
-          desc: '可上传您制作的MIDI乐谱为求学者提供学习曲目的途径，并从中获得收益。'
-        },
-        {
-          logo: getAssetsHomeFile('o4.png'),
-          num: getAssetsHomeFile('num4.png'),
-          title: '收益提现',
-          desc: '在您授课及上传曲谱销售后，经过平台核算，将您获得的收益发放至您的个人账户下，您可随时将自己获得的收益提现。'
-        }
-      ]
+  async mounted() {
+    try {
+      // 判断是否登录
+      if (state.user.status !== 'login') {
+        return
+      }
+      // 老师入驻状态 0、未申请 UNPAALY、未申请 DOING、审核中 PASS、通过 UNPASS、不通过
+      const entryStatus = state.user.data?.entryStatus || 0
+      teacherState.authStatus =
+        entryStatus === 'DOING' || entryStatus === 'PASS' ? true : false
+      // 如果已经认证，则不用获取声部信息
+      if (teacherState.authStatus) {
+        teacherState.active = teacherState.authStatus ? 4 : 1
+        return
+      }
+
+      // if (teacherState.subjectList.length <= 0) {
+      //   const res = await request.get('/api-website/subject/subjectSelect')
+      //   teacherState.subjectList = res.data || []
+      // }
+
+      const teacherInfo = await request.get(
+        '/api-website/teacherAuthEntryRecord/getLastRecordByUserId'
+      )
+      teacherState.teacherInfo = teacherInfo.data || {}
+      const info = teacherState.teacherInfo
+      teacherState.teacherCert.introduction = info.introduction
+      teacherState.teacherCert.subjectId = info.subjectId
+      teacherState.teacherCert.graduateSchool = info.graduateSchool
+      teacherState.teacherCert.subject = info.subject
+      teacherState.teacherCert.gradCertificate = info.gradCertificate
+      teacherState.teacherCert.degreeCertificate = info.degreeCertificate
+      teacherState.teacherCert.teacherCertificate = info.teacherCertificate
+    } catch {
+      //
+    }
+  },
+  computed: {
+    authStatus(): Boolean {
+      return !!teacherState.authStatus
+    },
+    userAuth() {
+      // 判断是否实名过
+      const users = state.user.data || {}
+      return !!(users.idCardNo && users.realName)
     }
   },
   render() {
     return (
-      <div
-        class={[
-          styles.musicAuth,
-          'w-[1200px] mt-[72px] mb-[60px] bg-white min-h-full m-auto px-[138px] text-[#333]'
-        ]}
-      >
-        <div class="w-[388px] pt-24 pb-28">
-          <div class="text-[28px] font-semibold pb-5">酷乐秀基本介绍</div>
-          <p class={[styles.txt]}>
-            酷乐秀是一款为器乐学习者提供智能陪练及线上授课撮
-          </p>
-          <p class={[styles.txt]}>
-            合的乐器教学平台，器乐老师可通过自身的专业知识为
-          </p>
-          <p class={[styles.txt, 'inline-block']}>
-            自己带来<span class="font-medium">授课及曲谱销售收益</span>。
-          </p>
-        </div>
-        <div class="pb-20">
-          <h2 class="text-2xl pb-11 text-center font-semibold">认证权益</h2>
-
-          <ElRow class="mb-24" gutter={28}>
-            {this.list.map((item: any) => (
-              <ElCol span={6} class="pr-3 !flex">
-                <div class={[styles.col, 'flex items-center flex-col p-4']}>
-                  <img class="w-[94px] h-[87px]" src={item.logo} />
-
-                  <div class="flex items-center font-[18px] font-medium pb-3 pt-5">
-                    <img class="w-[30px] h-[22px] mr-1" src={item.num} />
-                    {item.title}
-                  </div>
-                  <p class="text-[14px] text-[#666] leading-6 text-justify">
-                    {item.desc}
-                  </p>
-                </div>
-              </ElCol>
-            ))}
-          </ElRow>
-
-          <h2 class="text-2xl pb-10 text-center font-semibold">
-            酷乐秀欢迎您的加入
-          </h2>
-
-          <p class="text-lg text-center mb-10">
-            在艺术的殿堂中，为他人照亮前进的道路，用自己的经验和点拨，传播艺术的种子，获取硕果。
-          </p>
-
-          <div class="text-center">
-            <ElButton type="primary" class="rounded w-40 !h-[38px]">
-              立即认证
-            </ElButton>
-          </div>
-        </div>
+      <div class="w-[1200px] mt-[72px] mb-[60px] bg-white min-h-full m-auto text-[#333]">
+        {/* {!teacherState.authStatus ? <CertInfo /> : <div>2323</div>} */}
+        <Auth />
       </div>
     )
   }

src/views/roleAuth/teacherAuth/teacherState.ts

@@ -0,0 +1,21 @@
+import { reactive } from 'vue'
+
+export const teacherState = reactive({
+  authStatus: false as boolean, // 是否立即认证
+  subjectList: [], // 声部列表
+  active: 1,
+  teacherInfo: {} as any,
+  teacherCert: {
+    realName: null,
+    idCardNo: null,
+    gender: 1,
+    birthdate: null as any,
+    subjectId: null as any,
+    introduction: '',
+    graduateSchool: null,
+    subject: null,
+    gradCertificate: null,
+    degreeCertificate: null,
+    teacherCertificate: null
+  }
+})