更新

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

@@ -0,0 +1,35 @@
+.step {
+  @apply flex-1 flex items-center justify-center text-[#999] text-[14px] last:mr-0 relative h-[38px] -mr-2;
+}
+.small {
+  background: url('./images/small_default_bg.png') no-repeat center;
+  background-size: contain;
+
+  &.active {
+    background: url('./images/small_bg.png') no-repeat center;
+    background-size: contain;
+    @apply text-white;
+  }
+}
+
+.medium {
+  background: url('./images/medium_default_bg.png') no-repeat center;
+  background-size: contain;
+
+  &.active {
+    background: url('./images/medium_bg.png') no-repeat center;
+    background-size: contain;
+    @apply text-white;
+  }
+}
+
+.large {
+  background: url('./images/large_default_bg.png') no-repeat center;
+  background-size: contain;
+
+  &.active {
+    background: url('./images/large_bg.png') no-repeat center;
+    background-size: contain;
+    @apply text-white;
+  }
+}

src/components/col-steps/index.tsx

@@ -0,0 +1,100 @@
+import { defineComponent, PropType } 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: 'col-steps',
+  props: {
+    type: {
+      type: String,
+      default: 'small' as 'small' | 'medium' | 'large'
+    },
+    active: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      list: {
+        small: [
+          {
+            title: '课程信息',
+            iconActive: getAssetsHomeFile('6.png')
+          },
+          {
+            title: '课程安排',
+            icon: getAssetsHomeFile('4.png'),
+            iconActive: getAssetsHomeFile('4_active.png')
+          },
+          {
+            title: '教学计划',
+            icon: getAssetsHomeFile('2.png'),
+            iconActive: getAssetsHomeFile('2_active.png')
+          },
+          {
+            title: '开课条件',
+            icon: getAssetsHomeFile('3.png'),
+            iconActive: getAssetsHomeFile('3_active.png')
+          }
+        ],
+        medium: [
+          {
+            title: '实名认证',
+            iconActive: getAssetsHomeFile('7.png')
+          },
+          {
+            title: '基本信息',
+            icon: getAssetsHomeFile('1.png'),
+            iconActive: getAssetsHomeFile('1_active.png')
+          },
+          {
+            title: '学历信息',
+            icon: getAssetsHomeFile('8.png'),
+            iconActive: getAssetsHomeFile('8_active.png')
+          }
+        ],
+        large: [
+          {
+            title: '课程信息',
+            iconActive: getAssetsHomeFile('6.png')
+          },
+          {
+            title: '课程内容',
+            icon: getAssetsHomeFile('5.png'),
+            iconActive: getAssetsHomeFile('5_active.png')
+          }
+        ]
+      }
+    }
+  },
+  render() {
+    return (
+      <div class={[styles.steps, 'flex items-center bg-white']}>
+        {this.list[this.type].map((item: any, index: number) => (
+          <div
+            class={[
+              styles.step,
+              styles[this.type],
+              this.active >= index && styles.active
+            ]}
+          >
+            <div class="w-[30px] h-[30px] rounded-full overflow-hidden bg-slate-600 mr-3">
+              {index === 0 || this.active >= index ? (
+                <img src={item.iconActive} />
+              ) : (
+                <img src={item.icon} />
+              )}
+            </div>
+            {item.title}
+          </div>
+        ))}
+      </div>
+    )
+  }
+})

src/style/index.css

@@ -7,7 +7,7 @@
   --el-color-primary: #2DC7AA !important;
   --el-color-primary-light-3: #2DC7AF !important;
   --el-color-primary-light-5: #2FD8AC !important;
-  --el-color-primary-light-7: #86ffe3 !important;
+  --el-color-primary-light-7: #2FD8AC !important;
   --el-color-primary-light-8: #bbffef !important;
   --el-color-primary-light-9: #ecf9f6 !important;
   --el-color-primary-dark-2: #24ad93 !important;

src/views/App.tsx

@@ -51,12 +51,14 @@ export default defineComponent({
             closeOnClickModal={false}
             closeOnPressEscape={false}
           >
-            <Login
-              onClose={() => {
-                clearTimeout(state.loginPopupTimer)
-                state.loginPopupStatus = false
-              }}
-            />
+            {state.loginPopupStatus && (
+              <Login
+                onClose={() => {
+                  clearTimeout(state.loginPopupTimer)
+                  state.loginPopupStatus = false
+                }}
+              />
+            )}
           </ElDialog>
         </div>
       </>

src/views/login/components/form/index.tsx

@@ -12,6 +12,7 @@ import Cookies from 'js-cookie'
 import ImgCode from '../img-code'
 import styles from './index.module.less'
 import { setAuth } from '@/helpers/utils'
+import { checkPhone } from '@/helpers/validate'
 
 const validatePassword = (
   rule: any,
@@ -52,6 +53,7 @@ export default defineComponent({
       codeDsiable: false,
       codeStatus: false, // 是否显示图形验证码
       codeTimer: 120, // 发短信时长
+      codeInverval: null as any,
       form: {
         username: '',
         code: '',
@@ -73,6 +75,10 @@ export default defineComponent({
       }
     }
   },
+  unmounted() {
+    console.log('form unmounted')
+    clearInterval(this.codeInverval)
+  },
   methods: {
     onSubmit() {
       ;(this as any).$refs.loginForm.validate(async (valid: boolean) => {
@@ -184,10 +190,13 @@ export default defineComponent({
                     type="primary"
                     underline={false}
                     onClick={() => {
+                      if (!checkPhone(this.form.username)) {
+                        return ElMessage.error('请输入正确的手机号码')
+                      }
                       this.codeStatus = true
                     }}
                   >
-                    获取验证码
+                    {!this.codeDsiable ? '获取验证码' : this.codeTimer + 's'}
                   </ElLink>
                 </div>
               )
@@ -202,7 +211,6 @@ export default defineComponent({
               placeholder="请输入您的登录密码"
               type="password"
               autocomplete={'off'}
-              // rules={[/^1[3456789]\d{9}$/]}
             ></ElInput>
           </ElFormItem>
         )}
@@ -223,9 +231,21 @@ export default defineComponent({
         {/* 图形验证码 */}
         {this.codeStatus && (
           <ImgCode
+            phone={this.form.username}
             onClose={() => {
               this.codeStatus = false
             }}
+            onSendCode={async () => {
+              this.codeDsiable = true
+              this.codeInverval = setInterval(() => {
+                this.codeTimer--
+                if (this.codeTimer === 0) {
+                  this.codeDsiable = false
+                  clearInterval(this.codeInverval)
+                  this.codeTimer = 120
+                }
+              }, 1000)
+            }}
           />
         )}
       </ElForm>

src/views/login/components/img-code/index.tsx

@@ -1,11 +1,20 @@
+import request from '@/helpers/request'
 import { Close } from '@element-plus/icons-vue'
-import { ElCol, ElIcon, ElImage, ElInput, ElRow } from 'element-plus'
+import { ElCol, ElIcon, ElImage, ElInput, ElMessage, ElRow } from 'element-plus'
 import { defineComponent } from 'vue'
 import styles from './index.module.less'
 
 export default defineComponent({
   name: 'img-code',
   props: {
+    phone: {
+      type: String,
+      default: ''
+    },
+    onSendCode: {
+      type: Function,
+      default: () => {}
+    },
     onClose: {
       type: Function,
       default: () => {}
@@ -13,7 +22,49 @@ export default defineComponent({
   },
   data() {
     return {
-      identifyingCode: location.origin + '/api-admin/code/getImageCode'
+      loading: false,
+      code: '',
+      identifyingCode:
+        location.origin + '/api-website/code/getImageCode?phone=' + this.phone
+    }
+  },
+  methods: {
+    updateIdentifyingCode() {
+      // 刷新token
+      this.identifyingCode = `${this.identifyingCode}&token=${Math.random()}`
+    },
+    async checkVerifyLoginImage() {
+      try {
+        if ((this as any).code.length < 4) {
+          return
+        }
+        // this.loading = true
+        // await request.post('/api-website/code/verifyLoginImage', {
+        //   data: {
+        //     phone: this.phone,
+        //     code: this.code
+        //   }
+        // })
+        // await request.post('/api-website/code/sendSmsCode', {
+        //   data: {
+        //     mobile: this.phone
+        //   }
+        // })
+        this.loading = false
+        ElMessage.success('验证码已发送')
+        this.onClose()
+        this.onSendCode()
+      } catch {
+        this.loading = false
+        this.updateIdentifyingCode()
+      }
+    }
+  },
+  watch: {
+    code(val) {
+      if (val.length >= 4) {
+        this.checkVerifyLoginImage()
+      }
     }
   },
   render() {
@@ -25,6 +76,8 @@ export default defineComponent({
             styles.loginImgCode,
             'absolute w-[90%] left-[5%] top-0 bg-white pt-5 pb-8 px-6 rounded-md'
           ]}
+          // @ts-ignore
+          loading={this.loading}
         >
           <div
             onClick={() => {
@@ -42,27 +95,16 @@ export default defineComponent({
 
           <ElRow gutter={8} class="mt-3">
             <ElCol span={16}>
-              <ElInput placeholder="请输入图形中字母"></ElInput>
+              <ElInput placeholder="请输入验证码" v-model={this.code}></ElInput>
             </ElCol>
             <ElCol span={8}>
-              <ElImage
-                class="w-full h-full"
-                src={this.identifyingCode}
-                fit="cover"
-                v-slots={{
-                  error: () => (
-                    <div
-                      class={
-                        'text-3xl w-full h-full flex items-center justify-center'
-                      }
-                    >
-                      {/* <ElIcon>
-                      <Picture />
-                    </ElIcon> */}
-                    </div>
-                  )
-                }}
-              />
+              <div onClick={this.updateIdentifyingCode}>
+                <ElImage
+                  class="w-full h-full"
+                  src={this.identifyingCode}
+                  fit="cover"
+                />
+              </div>
             </ElCol>
           </ElRow>
         </div>

src/views/login/index.tsx

@@ -5,6 +5,7 @@ import Form from './components/form'
 import QrcodeVue from 'qrcode.vue'
 import QrLogin from './components/qr-login'
 import TeacherAuth from './components/teacher-auth'
+import { state } from '@/state'
 
 export const getAssetsHomeFile = (fileName: string) => {
   const path = `./images/${fileName}`
@@ -48,6 +49,14 @@ export default defineComponent({
       }
     }
   },
+  watch: {
+    type(val: string) {
+      // 切换登录类型时需要清除定时器
+      if (val != 'qr-login') {
+        clearInterval(state.loginPopupTimer)
+      }
+    }
+  },
   render() {
     return (
       <div class={[styles.loginSection, 'relative']}>
@@ -89,22 +98,28 @@ export default defineComponent({
               </div>
               <ElTabs v-model={this.loginType}>
                 <ElTabPane label="老师登录" name="teacher">
-                  <Form
-                    type="teacher-login"
-                    ref="teacherLogin"
-                    onClose={() => {
-                      this.onClose()
-                    }}
-                  />
+                  {this.loginType === 'teacher' && (
+                    <Form
+                      type="teacher-login"
+                      key="teacherLogin"
+                      ref="teacherLogin"
+                      onClose={() => {
+                        this.onClose()
+                      }}
+                    />
+                  )}
                 </ElTabPane>
                 <ElTabPane label="学员登录" name="student">
-                  <Form
-                    type="student-login"
-                    ref="studentLogin"
-                    onClose={() => {
-                      this.onClose()
-                    }}
-                  />
+                  {this.loginType === 'student' && (
+                    <Form
+                      type="student-login"
+                      key="studentLogin"
+                      ref="studentLogin"
+                      onClose={() => {
+                        this.onClose()
+                      }}
+                    />
+                  )}
                 </ElTabPane>
               </ElTabs>
               <div class={[styles.scanTxt]}>
@@ -147,28 +162,34 @@ export default defineComponent({
             <>
               <ElTabs v-model={this.registerType}>
                 <ElTabPane label="老师注册" name="teacher">
-                  <Form
-                    type="teacher-register"
-                    ref="teacherRegister"
-                    onClose={() => {
-                      this.onClose()
-                    }}
-                    onChange={(type: any) => {
-                      this.type = type
-                    }}
-                  />
+                  {this.registerType === 'teacher' && (
+                    <Form
+                      type="teacher-register"
+                      key="teacher-register"
+                      ref="teacherRegister"
+                      onClose={() => {
+                        this.onClose()
+                      }}
+                      onChange={(type: any) => {
+                        this.type = type
+                      }}
+                    />
+                  )}
                 </ElTabPane>
                 <ElTabPane label="学员注册" name="student">
-                  <Form
-                    type="student-register"
-                    ref="studentRegister"
-                    onClose={() => {
-                      this.onClose()
-                    }}
-                    onChange={(type: any) => {
-                      this.type = type
-                    }}
-                  />
+                  {this.registerType === 'student' && (
+                    <Form
+                      type="student-register"
+                      key="student-register"
+                      ref="studentRegister"
+                      onClose={() => {
+                        this.onClose()
+                      }}
+                      onChange={(type: any) => {
+                        this.type = type
+                      }}
+                    />
+                  )}
                 </ElTabPane>
               </ElTabs>
               <div class={[styles.scanTxt]}>

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

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

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

@@ -1,42 +0,0 @@
-.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

@@ -1,3 +1,4 @@
+import ColSteps from '@/components/col-steps'
 import {
   ElButton,
   ElDatePicker,
@@ -8,6 +9,10 @@ import {
   ElRadioGroup
 } from 'element-plus'
 import { defineComponent } from 'vue'
+import { teacherState } from '../../teacherState'
+import BaseInfo from '../base-info'
+import CertInfo from '../cert-info'
+import EduInformation from '../edu-information'
 import styles from './index.module.less'
 
 export default defineComponent({
@@ -20,47 +25,11 @@ export default defineComponent({
   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>
+        <ColSteps type="medium" active={teacherState.active} />
 
-        <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>
+        {teacherState.active === 0 && <CertInfo />}
+        {teacherState.active === 1 && <BaseInfo />}
+        {teacherState.active === 2 && <EduInformation />}
       </div>
     )
   }

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+.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);
+      box-shadow: no;
+    }
+  }
+}

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

@@ -1,8 +1,89 @@
+import { ElButton, ElForm, ElFormItem, ElInput, ElSelect } from 'element-plus'
 import { defineComponent } from 'vue'
+import { teacherState } from '../../teacherState'
+import styles from './index.module.less'
 
 export default defineComponent({
   name: 'auth',
   render() {
-    return <></>
+    return (
+      <ElForm
+        class={[styles.form, 'mx-4 mt-7']}
+        ref="form"
+        size="large"
+        model={teacherState.teacherCert}
+        labelPosition="left"
+      >
+        <ElFormItem
+          label="可教授声部（可多选）"
+          labelWidth={'170px'}
+          prop="subjectId"
+          rules={[
+            {
+              required: true,
+              message: '请选择可教授声部'
+            }
+          ]}
+        >
+          {/* <ElInput
+            v-model={teacherState.teacherCert.subjectId}
+            placeholder="请选择可教授声部"
+          /> */}
+          <ElSelect multiple filterable>
+            {/* <ElSelect */}
+          </ElSelect>
+          {/*       <el-select v-model="value" placeholder="Select">
+    <el-option-group
+      v-for="group in options"
+      :key="group.label"
+      :label="group.label"
+    >
+      <el-option
+        v-for="item in group.options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-option-group>
+  </el-select> */}
+        </ElFormItem>
+        <ElFormItem label="个人简介" labelWidth={'170px'}>
+          <ElInput
+            placeholder="例：毕业于中国音乐学院长笛专业，曾获得中国青年管乐演奏大赛一等奖，具有8年教学经验，能够将专业知识通过简单易懂的方式教授给学员。"
+            type="textarea"
+            v-model={teacherState.teacherCert.introduction}
+            // @ts-ignore
+            maxlength="200"
+            showWordLimit={true}
+            rows={5}
+          />
+        </ElFormItem>
+        <ElFormItem>
+          <div class="text-center w-full">
+            <ElButton
+              class="!w-40 !h-[38px]"
+              onClick={() => {
+                teacherState.active = 0
+              }}
+            >
+              上一步
+            </ElButton>
+            <ElButton
+              type="primary"
+              class="!w-40 !h-[38px]"
+              onClick={() => {
+                ;(this as any).$refs['form'].validate(async (_: boolean) => {
+                  if (_) {
+                    teacherState.active = 2
+                  }
+                })
+              }}
+            >
+              下一步
+            </ElButton>
+          </div>
+        </ElFormItem>
+      </ElForm>
+    )
   }
 })

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

@@ -1,33 +1,19 @@
-.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;
+.form {
+  :global {
+    .el-radio-button__inner {
+      border: var(--el-border);
+      border-radius: var(--el-border-radius-base) !important;
       width: 100%;
-      height: 13px;
-      background: #cbfdd5;
-      position: absolute;
-      bottom: 15px;
-      left: 0;
-      z-index: -1;
-      opacity: 0.63;
-      @apply rounded-xl;
+      padding: 11px 19px !important;
+    }
+    .el-radio-button__original-radio:checked + .el-radio-button__inner {
+      background-color: #e9fff8;
+      color: var(--el-color-primary);
+      box-shadow: none;
     }
-  }
 
-  .col {
-    background: #ffffff;
-    box-shadow: 0px 10px 36px 0px rgba(0, 0, 0, 0.13);
-    border-radius: 10px;
-    min-height: 197px;
+    .el-checkbox__inner {
+      @apply rounded-full overflow-hidden;
+    }
   }
 }

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

@@ -1,6 +1,17 @@
-import { state } from '@/state'
-import { ElButton, ElCol, ElRow } from 'element-plus'
+import { checkIDCard } from '@/helpers/validate'
+import {
+  ElButton,
+  ElRadioGroup,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElDatePicker,
+  ElRadioButton,
+  ElCheckbox,
+  ElLink
+} from 'element-plus'
 import { defineComponent } from 'vue'
+import { teacherState } from '../../teacherState'
 import styles from './index.module.less'
 export const getAssetsHomeFile = (fileName: string) => {
   const path = `../../../images/${fileName}`
@@ -8,113 +19,178 @@ export const getAssetsHomeFile = (fileName: string) => {
   return modules[path].default
 }
 
+// checkIDCard
 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: '在您授课及上传曲谱销售后，经过平台核算，将您获得的收益发放至您的个人账户下，您可随时将自己获得的收益提现。'
+      agreeStatus: false
+    }
+  },
+  methods: {
+    onIdCardValidate() {
+      const idCardNo = teacherState.teacherCert.idCardNo
+      // 判断是否有身份证号
+      if (!idCardNo) {
+        return
+      }
+      if (!checkIDCard(idCardNo || '')) {
+        return false
+      }
+
+      console.log(this.getSex(idCardNo))
+      teacherState.teacherCert.birthdate = this.getBirth(idCardNo)
+      teacherState.teacherCert.gender = this.getSex(idCardNo)
+    },
+    getBirth(idCard: string | null) {
+      let birthday = ''
+      if (idCard != null && idCard != '') {
+        if (idCard.length == 15) {
+          birthday = '19' + idCard.slice(6, 12)
+        } else if (idCard.length == 18) {
+          birthday = idCard.slice(6, 14)
         }
-      ]
+        birthday = birthday.replace(/(.{4})(.{2})/, '$1-$2-')
+      }
+      return birthday
+    },
+    getSex(idCard: string | null): number {
+      let sex = 1
+      if (idCard && parseInt(idCard.slice(-2, -1)) % 2 == 1) {
+        sex = 1
+      } else {
+        sex = 0
+      }
+      return sex
+    },
+    onSubmit() {
+      ;(this as any).$refs.certForm.validate(async (_: boolean) => {
+        console.log(_)
+        if (_) {
+          teacherState.active = 1
+        }
+      })
     }
   },
   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">
+      <ElForm
+        ref={'certForm'}
+        class={[styles.form, 'mx-4 mt-7']}
+        size="large"
+        model={teacherState.teacherCert}
+        labelPosition="left"
+      >
+        <ElFormItem
+          label="真实姓名"
+          labelWidth={'90px'}
+          prop="realName"
+          rules={[
+            {
+              required: true,
+              message: '请输入真实姓名'
+            }
+          ]}
+        >
+          <ElInput
+            v-model={teacherState.teacherCert.realName}
+            placeholder="请输入您的真实姓名"
+          />
+        </ElFormItem>
+        <ElFormItem
+          label="身份证号"
+          labelWidth={'90px'}
+          prop="idCardNo"
+          rules={[
+            {
+              required: true,
+              message: '请输入身份证号'
+            },
+            {
+              pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
+              message: '请输入正确的身份证号',
+              trigger: 'blur'
+            }
+          ]}
+        >
+          <ElInput
+            v-model={teacherState.teacherCert.idCardNo}
+            onBlur={this.onIdCardValidate}
+            placeholder="请输入您的身份证号码"
+          />
+        </ElFormItem>
+        <ElFormItem
+          label="性别"
+          labelWidth={'90px'}
+          prop="gender"
+          rules={[
+            {
+              required: true,
+              message: '请选择性别'
+            }
+          ]}
+        >
+          <ElRadioGroup v-model={teacherState.teacherCert.gender} disabled>
+            <ElRadioButton label={1} class="mr-3 w-24">
+              男
+            </ElRadioButton>
+            <ElRadioButton label={0} class="w-24">
+              女
+            </ElRadioButton>
+          </ElRadioGroup>
+        </ElFormItem>
+        <ElFormItem
+          label="出生日期"
+          labelWidth={'90px'}
+          prop="birthdate"
+          rules={[
+            {
+              required: true,
+              message: '请选择出生日期'
+            }
+          ]}
+        >
+          <ElDatePicker
+            disabled
+            v-model={teacherState.teacherCert.birthdate}
+            type="date"
+            class="!h-[38px] !w-full"
+            placeholder="请选择出生日期"
+          />
+        </ElFormItem>
+        <ElFormItem>
+          <div class="text-center w-full">
+            <div class="text-[14px] text-[#999] flex items-center justify-center">
+              <div
+                class="flex items-center justify-center cursor-pointer"
+                onClick={() => {
+                  this.agreeStatus = !this.agreeStatus
+                }}
+              >
+                <ElCheckbox
+                  v-model={this.agreeStatus}
+                  class="!mr-2 rounded-full overflow-hidden"
+                />
+                我已阅读并同意
+                <a
+                  href="https://dev.colexiu.com/student/#/registerProtocol"
+                  class="text-[#2DC7AA]"
+                  target="_blank"
+                >
+                  《酷乐秀平台服务协议》
+                </a>
+              </div>
+            </div>
             <ElButton
               type="primary"
-              class="rounded w-40 !h-[38px]"
-              disabled={this.auth.status}
+              class="!w-40 !h-[38px]"
+              onClick={this.onSubmit}
             >
-              {this.auth.text}
+              下一步
             </ElButton>
           </div>
-        </div>
-      </div>
+        </ElFormItem>
+      </ElForm>
     )
   }
 })

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

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

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

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

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

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

src/views/roleAuth/teacherAuth/components/edu-information/index.module.less

@@ -0,0 +1,19 @@
+.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);
+      box-shadow: none;
+    }
+
+    .el-checkbox__inner {
+      @apply rounded-full overflow-hidden;
+    }
+  }
+}

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

@@ -1,8 +1,66 @@
+import { ElButton, ElForm, ElFormItem, ElInput } from 'element-plus'
 import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import { teacherState } from '../../teacherState'
 
 export default defineComponent({
   name: 'auth',
+  data() {
+    return {
+      labelWidth: '140px'
+    }
+  },
   render() {
-    return <></>
+    return (
+      <ElForm
+        class={[styles.form, 'mx-4 mt-7']}
+        ref="form"
+        size="large"
+        model={teacherState.teacherCert}
+        labelPosition="left"
+      >
+        <ElFormItem labelWidth={this.labelWidth} label="毕业院校（必填）">
+          <ElInput placeholder="请输入您的毕业院校" />
+        </ElFormItem>
+        <ElFormItem labelWidth={this.labelWidth} label="专业（选填）">
+          <ElInput placeholder="请输入您的专业名称" />
+        </ElFormItem>
+        <ElFormItem labelWidth={this.labelWidth} label="毕业证书（选填）">
+          <ElInput placeholder="请输入您的毕业院校" />
+        </ElFormItem>
+        <ElFormItem labelWidth={this.labelWidth} label="学位证书（选填）">
+          <ElInput placeholder="请输入您的毕业院校" />
+        </ElFormItem>
+        <ElFormItem labelWidth={this.labelWidth} label="教师资格证（选填）">
+          <ElInput placeholder="请输入您的毕业院校" />
+        </ElFormItem>
+
+        <ElFormItem>
+          <div class="text-center w-full">
+            <ElButton
+              class="!w-40 !h-[38px]"
+              onClick={() => {
+                teacherState.active = 1
+              }}
+            >
+              上一步
+            </ElButton>
+            <ElButton
+              type="primary"
+              class="!w-40 !h-[38px]"
+              onClick={() => {
+                ;(this as any).$refs['form'].validate(async (_: boolean) => {
+                  if (_) {
+                    // teacherState.active = 2
+                  }
+                })
+              }}
+            >
+              提交审核
+            </ElButton>
+          </div>
+        </ElFormItem>
+      </ElForm>
+    )
   }
 })

src/views/roleAuth/teacherAuth/index.tsx

@@ -65,6 +65,7 @@ export default defineComponent({
     return (
       <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

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