添加认证

src/components/col-result/index.module.less

@@ -7,4 +7,8 @@
     color: #333;
     padding: 20px 0;
   }
+  .btn {
+    width: 90%;
+    margin: 0 auto;
+  }
 }

src/components/col-result/index.tsx

@@ -43,7 +43,6 @@ export default defineComponent({
         {/* { this.tips && <p class={styles.tips}>{ this.tips }</p> } */}
 
         { this.btnStatus ? <Button class={styles.btn} round block type="primary" onClick={this.onResult}>{this.buttonText}</Button> : null }
-        
       </div>
     )
   }

src/router/routes-common.ts

@@ -0,0 +1,5 @@
+// 需要登录的路由
+export const router = [];
+
+// 不需要登录的路由
+export const rootRouter = [];

src/router/routes-student.ts

@@ -1,4 +1,5 @@
 import Auth from '@/student/layout/auth';
+import { router, rootRouter } from './routes-common';
 
 type metaType = {
   isRegister: boolean;
@@ -28,10 +29,12 @@ export default [
         component: () => import('@/student/practice-class/index'),
         meta: {
           title: '陪练课'
-        }
+        },
+        ...router
       }
     ]
   },
+  ...rootRouter,
   {
     path: '/registerProtocol',
     name: 'registerProtocol',

src/state.ts

@@ -5,8 +5,9 @@ type status = 'init' | 'login' | 'logout' | 'error';
 export const state = reactive({
   user: {
     status: 'init' as status,
-    data: null as null | any,
-  }
+    data: {} as any
+  },
+  musicCertStatus: false as boolean // 是否音乐认证
 });
 
 export const setLoginInit = () => {

src/teacher/music-cert/index.tsx

@@ -1,6 +1,9 @@
 import { defineComponent } from "vue";
-import { Button, Image } from 'vant';
+import { Button, Image, Toast } from 'vant';
 import styles from './index.module.less';
+import request from "@/helpers/request";
+import { state } from "@/state";
+import ColResult from "@/components/col-result";
 
 export default defineComponent({
   name: 'music-cert',
@@ -10,41 +13,53 @@ export default defineComponent({
     }
   },
   methods: {
-    onClick() {
+    async onClick() {
       // teacherState.authStatus = true
+      try {
+        await request.post('/api-teacher/TeacherAuthMusicianRecord/doApply', {})
+        Toast('申请认证成功')
+        state.musicCertStatus = true
+      } catch {
+        //
+      }
     }
   },
   render() {
     return (
-      <div class={styles['music-cert']}>
-        <h2>音乐人认证是什么？</h2>
-        <p class={styles['cert-text']}>
-          酷乐秀对有能力编曲的音乐人开通上传曲谱权限，开通后您可上传自己编曲的乐谱MIDI让平台学员进行练习，并获取收益
-        </p>
-        <p class={styles['cert-img']}>
-          <Image src="https://daya.ks3-cn-beijing.ksyun.com/202110/Sn76BUQ.png" width="100%" height="150px" fit="cover" />
-        </p>
+      <>
+        {
+          state.musicCertStatus ? <ColResult tips="您已成功提交音乐人认证申请我们将在2个工作日内与您取得联系" /> : <div class={styles['music-cert']}>
+            <h2>音乐人认证是什么？</h2>
+            <p class={styles['cert-text']}>
+              酷乐秀对有能力编曲的音乐人开通上传曲谱权限，开通后您可上传自己编曲的乐谱MIDI让平台学员进行练习，并获取收益
+            </p>
+            <p class={styles['cert-img']}>
+              <Image src="https://daya.ks3-cn-beijing.ksyun.com/202110/Sn76BUQ.png" width="100%" height="150px" fit="cover" />
+            </p>
 
-        <h2>MIDI文件上传</h2>
-        <p class={styles['cert-text']}>
-          您可上传自己编曲的乐谱MIDI，并自定义乐谱价格，为平台学员提供智能陪练练习
-        </p>
-        <p class={styles['cert-img']}>
-          <Image src="https://daya.ks3-cn-beijing.ksyun.com/202110/Sn76BUQ.png" width="100%" height="150px" fit="cover" />
-        </p>
+            <h2>MIDI文件上传</h2>
+            <p class={styles['cert-text']}>
+              您可上传自己编曲的乐谱MIDI，并自定义乐谱价格，为平台学员提供智能陪练练习
+            </p>
+            <p class={styles['cert-img']}>
+              <Image src="https://daya.ks3-cn-beijing.ksyun.com/202110/Sn76BUQ.png" width="100%" height="150px" fit="cover" />
+            </p>
 
-        <h2>乐谱收益</h2>
-        <p class={styles['cert-text']}>
-          您可对上传的乐谱自定义价格，学员可自行挑选乐谱购买，购买后您将获取学员购买收入。
-        </p>
-        <p class={styles['cert-img']}>
-          <Image src="https://daya.ks3-cn-beijing.ksyun.com/202110/Sn76BUQ.png" width="100%" height="150px" fit="cover" />
-        </p>
+            <h2>乐谱收益</h2>
+            <p class={styles['cert-text']}>
+              您可对上传的乐谱自定义价格，学员可自行挑选乐谱购买，购买后您将获取学员购买收入。
+            </p>
+            <p class={styles['cert-img']}>
+              <Image src="https://daya.ks3-cn-beijing.ksyun.com/202110/Sn76BUQ.png" width="100%" height="150px" fit="cover" />
+            </p>
 
-        <div class={styles["btn-group"]}>
-          <Button round block type="primary" disabled={this.authStatus === '1'} onClick={this.onClick}>立即认证</Button>
-        </div>
-      </div>
+            <div class={styles["btn-group"]}>
+              <Button round block type="primary" disabled={this.authStatus === '1'} onClick={this.onClick}>立即认证</Button>
+            </div>
+          </div>
+        }
+
+      </>
     )
   }
 })

src/teacher/open-live/index.tsx

@@ -1,18 +1,26 @@
 import { defineComponent } from "vue";
 import { Button, Cell, Icon, Image, NavBar, Rate, Sticky } from "vant";
+import ColHeader from "@/components/col-header";
 import styles from './index.module.less';
+import { state } from '@/state';
 
 import tips from './images/icon_tips.png';
 import banner1 from './images/1.png';
 import banner2 from './images/2.png';
 import banner3 from './images/3.png';
-import ColHeader from "@/components/col-header";
+import iconTeacher from '@common/images/icon_teacher.png';
+import request from "@/helpers/request";
 
 export default defineComponent({
   name: 'live-cert',
-  data() {
-    return {
-      rate: 4
+  computed: {
+    users() {
+      return state.user.data
+    }
+  },
+  methods: {
+    async onOpenLive() {
+      // await request('')
     }
   },
   render() {
@@ -22,7 +30,7 @@ export default defineComponent({
           content: () => (
             <Sticky>
               <div class={styles['header-content']}>
-                <Button round plain size="small" class={styles.openBtn}>开通直播</Button>
+                <Button round plain size="small" class={styles.openBtn} onClick={this.onOpenLive}>开通直播</Button>
               </div>
             </Sticky>
           )
@@ -30,21 +38,21 @@ export default defineComponent({
         </ColHeader>
 
         <Cell class={styles['open-teacher-info']} border={false} v-slots={{
-          icon: () => (<Image class={styles.userLogo} src="https://daya.ks3-cn-beijing.ksyun.com/202108/SfbC1JU.jpeg" fit="cover" />)
+          icon: () => (<Image class={styles.userLogo} src={this.users?.headUrl || iconTeacher} fit="cover" />)
         }}>
             <div class={styles['teacher-info']}>
-              <div class={styles['teacher-name']}>李老师</div>
+              <div class={styles['teacher-name']}>{ this.users?.username }</div>
               <div class={styles.level}>
-                <Rate v-model={this.rate} color="#FFC459" void-icon="star" voidColor="#D6D6D6" size={15} />
+                <Rate modelValue={this.users?.starGrade} color="#FFC459" void-icon="star" voidColor="#D6D6D6" size={15} />
               </div>
             </div>
             <div class={styles['teacher-desc']}>
               <div class={styles.teacherItem}>
-                <div class={styles.title}>12/20</div>
+                <div class={styles.title}>{this.users?.fansNum}/20</div>
                 <div class={styles.content}>粉丝</div>
               </div>
               <div class={styles.teacherItem} style={{ textAlign: 'right' }}>
-                <div class={styles.title}>12/20</div>
+                <div class={styles.title}>{this.users?.expTime}/10</div>
                 <div class={styles.content}>已上课时</div>
               </div>
             </div>

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/cert-two.tsx

@@ -8,18 +8,53 @@ import { teacherState } from "./teacherState";
 import icon1 from './images/icon_1.png';
 import icon2 from './images/icon_2.png';
 import ColPopup from "@/components/col-popup";
+import request from "@/helpers/request";
 
 export default defineComponent({
   name: 'cert-two',
   data() {
     return {
+      // choiceSubject: [],
       subjectStatus: false
     }
   },
+  computed: {
+    choiceSubjectIds() { // 选择的科目编号
+      let ids = teacherState.teacherCert.subjectId ? teacherState.teacherCert.subjectId.split(',') : [];
+      ids = ids.map((item: any) => Number(item))
+      return ids
+    },
+    subjectList() { // 学科列表
+      console.log(teacherState.subjectList)
+      return teacherState.subjectList || []
+    },
+    choiceSubject() { // 选择的科目
+      let tempArr: any[] = []
+      this.subjectList.forEach((parent: any) => {
+        parent.subjects && parent.subjects.forEach((sub: any) => {
+          if (this.choiceSubjectIds.includes(sub.id)) {
+            tempArr.push(sub as never)
+          }
+        })
+      })
+      return tempArr
+    }
+  },
   methods: {
     onChoice(item: any) {
-      console.log(item)
+      // this.subjectList.forEach((parent: any) => {
+      //   parent.subjects && parent.subjects.forEach((sub: any) => {
+      //     if (item.includes(sub.id)) {
+      //       this.choiceSubject.push(sub as never)
+      //     }
+      //   })
+      // })
+      teacherState.teacherCert.subjectId = item.join(',') || ''
+
       this.subjectStatus = false
+    },
+    async onSubjectOpen() {
+      this.subjectStatus = true
     }
   },
   render() {
@@ -28,13 +63,13 @@ export default defineComponent({
         <div class={styles.items}>
           <ColField title="可教授乐器（可多选）" border={false} required v-slots={{
             icon: () => <Icon name={icon1} size="24" />,
-            right: () => <Button class={styles.select} round type="primary" size="small" onClick={() => { this.subjectStatus = true }}>选择</Button>
+            right: () => <Button class={styles.select} round type="primary" size="small" onClick={this.onSubjectOpen}>选择</Button>
           }}>
-            <div class={styles['tag-list']}>
-              <Tag type="primary" plain round closeable size="medium">长笛</Tag>
-              <Tag type="primary" plain round closeable size="medium">长笛</Tag>
-              <Tag type="primary" plain round closeable size="medium">长笛</Tag>
-            </div>
+            {this.choiceSubject && this.choiceSubject.length > 0 ? <div class={styles['tag-list']}>
+              {this.choiceSubject.map((item: any) => (
+                <Tag type="primary" plain round closeable size="medium">{item.name}</Tag>
+              ))}
+            </div> : null}
           </ColField>
         </div>
 
@@ -55,7 +90,7 @@ export default defineComponent({
         </div>
 
         <ColPopup v-model:popupStatus={this.subjectStatus}>
-          <SubjectModel onChoice={this.onChoice} />
+          <SubjectModel subjectList={this.subjectList} choiceSubjectIds={this.choiceSubjectIds} onChoice={this.onChoice} />
         </ColPopup>
       </div>
     )

src/teacher/teacher-cert/index.tsx

@@ -22,6 +22,21 @@ export default defineComponent({
       agreeStatus: false,
     }
   },
+  async mounted() {
+    try {
+      if (teacherState.subjectList.length <= 0) {
+        const res = await request.get('/api-teacher/subject/queryPageTree', {
+          params: {
+            rows: 100,
+            page: 1
+          }
+        })
+        teacherState.subjectList = res.data.rows || [];
+      }
+    } catch {
+      //
+    }
+  },
   methods: {
     async next() {
       const realName = teacherState.teacherCert.realName
@@ -46,20 +61,22 @@ export default defineComponent({
       }
 
       try {
-        let res = await request.post('/api-teacher/TeacherAuthEntryRecord/realNameAuth', {
+        await request.post('/api-teacher/TeacherAuthEntryRecord/realNameAuth', {
           data: {
             realName,
             idCardNo
           }
         })
-        console.log(res)
+        teacherState.active = 2;
       } catch {
         //
       }
-
-      teacherState.active = 2;
     },
     next2() {
+      if(!teacherState.teacherCert.subjectId) {
+        Toast('请选择教授科目')
+        return
+      } 
       teacherState.active = 3;
     },
     async onSubmit() {

src/teacher/teacher-cert/module/subject-model.module.less

@@ -1,5 +1,5 @@
 .subjects {
-  padding: 15px;
+  padding: 15px 15px 80px;
 
   .btn-group {
     position: fixed;

src/teacher/teacher-cert/module/subject-model.tsx

@@ -1,10 +1,9 @@
-import { Button, Checkbox, Icon, Image } from "vant";
+import { Button, Checkbox, CheckboxGroup, Icon, Image, Loading } from "vant";
 import { defineComponent } from "vue";
 import styles from './subject-model.module.less';
 
 import checkBoxActive from '../images/checkbox_active.png';
 import checkBoxDefault from '../images/checkbox_default.png';
-import request from "@/helpers/request";
 import ColResult from "@/components/col-result";
 
 export default defineComponent({
@@ -13,48 +12,64 @@ export default defineComponent({
     onChoice: {
       type: Function,
       default: (item: any) => { }
+    },
+    choiceSubjectIds: {
+      type: Array,
+      default: []
+    },
+    subjectList: {
+      type: Array,
+      default: []
+    },
+    max: {// 最多可选数量
+      type: Number,
+      default: 5
     }
   },
   data() {
     return {
-      subjectList: [],
-      checkBox: []
+      checkBox: [],
+      checkboxRefs: [] as any,
     }
   },
   async mounted() {
-    try {
-      const res = await request.get('/api-teacher/subject/queryPage', {
-        params: {
-          rows: 100,
-          page: 1
-        }
-      })
-      console.log(res)
-    } catch {
-      // 
+    this.checkBox = this.choiceSubjectIds as never[]
+  },
+  methods: {
+    onSelect(id: number) {
+      this.checkboxRefs[id].toggle();
     }
   },
   render() {
     return (
       <div class={styles.subjects}>
-        <div class={styles['subject-list']}>
-          { this.subjectList.length ? [1, 2, 3, 4, 5].map((item: any) => (
-            <div class={styles['subject-item']}>
-            <Image src="https://daya.ks3-cn-beijing.ksyun.com/202110/Sn76BUQ.png" width="100%" height="100%" fit="cover" />
-            <div class={styles.topBg}>
-              <Checkbox v-model={this.checkBox} name={1} class={styles.checkbox} v-slots={{
-                icon: (props: any) => (
-                  <Icon name={props.checked ? checkBoxActive : checkBoxDefault} size="22" />
-                )
-              }} />
-              <p class={styles.name}>长笛</p>
-            </div>
-          </div>
-          )) : <ColResult tips="暂无声部数据" btnStatus={false} /> }
-        </div>
+        {this.subjectList.length ? <CheckboxGroup v-model={this.checkBox} max={this.max}>
+          {this.subjectList.map((item: any) => (
+            <>
+              <div class={styles.title}>{item.name}</div>
+              <div class={styles['subject-list']}>
+                {item.subjects && item.subjects.map((sub: any) => (
+                  <div class={styles['subject-item']} onClick={() => this.onSelect(sub.id)}>
+                    <Image src={sub.img} width="100%" height="100%" fit="cover" v-slots={{
+                      loading: () => <Loading type="spinner" size={20} />
+                    }} />
+                    <div class={styles.topBg}>
+                      <Checkbox name={sub.id} class={styles.checkbox} ref={(el: any) => this.checkboxRefs[sub.id] = el} v-slots={{
+                        icon: (props: any) => (
+                          <Icon name={props.checked ? checkBoxActive : checkBoxDefault} size="22" />
+                        )
+                      }} />
+                      <p class={styles.name}>{sub.name}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </>
+          ))}
+        </CheckboxGroup> : <ColResult tips="暂无声部数据" btnStatus={false} />}
 
         <div class={styles["btn-group"]}>
-          <Button round block type="primary" onClick={() => this.onChoice(true)}>确定</Button>
+          <Button round block type="primary" onClick={() => this.onChoice(this.checkBox)}>确定</Button>
         </div>
       </div>
     )

src/teacher/teacher-cert/teacherState.ts

@@ -2,13 +2,14 @@ import { reactive } from 'vue';
 
 export const teacherState = reactive({
   authStatus: false, // 是否立即认证
-  active: 2,
+  subjectList: [], // 声部列表
+  active: 1,
   teacherCert: {
     realName: null,
     idCardNo: null,
     gender: 1,
     birthdate: null as any,
-    subjectId: null,
+    subjectId: null as any,
     introduction: '',
     graduateSchool: null,
     subject: null,