更新

auto-imports.d.ts

@@ -1,5 +1,5 @@
 // Generated by 'unplugin-auto-import'
 export {}
 declare global {
-
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
 }

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

@@ -0,0 +1,10 @@
+.uploadSection {
+  width: 156px;
+  height: 106px;
+  background: #f8faf9;
+  border-radius: 4px;
+  border: 1px solid rgba(45, 199, 170, 0.26);
+  font-size: 14px;
+  color: #2dc7aa;
+  line-height: 20px;
+}

src/components/col-upload/index.tsx

@@ -0,0 +1,113 @@
+import { ElUpload } from 'element-plus'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import iconUpload from './images/icon_upload.png'
+import request from '@/helpers/request'
+
+export default defineComponent({
+  name: 'col-upload',
+  props: {
+    modelValue: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    bucket: {
+      type: String,
+      default: 'daya'
+    },
+    accept: {
+      type: String,
+      default: 'images/*'
+    },
+    tips: {
+      type: String,
+      default: '请上传图片'
+    },
+    extraTips: {
+      type: String,
+      default: '图片最大不能超过5MB'
+    }
+  },
+  data() {
+    return {
+      ossUploadUrl: 'https://ks3-cn-beijing.ksyuncs.com/' + this.bucket,
+      dataObj: {
+        policy: '',
+        signature: '',
+        key: '',
+        KSSAccessKeyId: '',
+        acl: 'public-read',
+        name: ''
+      },
+      fileList: [] as any
+    }
+  },
+  methods: {
+    handleSuccess() {},
+    handleRemove() {},
+    handleChange() {},
+    handleProgress() {},
+    handleError() {},
+    async beforeUpload(file: any) {
+      // beforeUpload
+      try {
+        let fileName = file.name.replaceAll(' ', '_')
+        let key = new Date().getTime() + fileName
+        let obj = {
+          filename: fileName,
+          bucketName: this.bucket,
+          postData: {
+            filename: fileName,
+            acl: 'public-read',
+            key: key,
+            unknowValueField: []
+          }
+        }
+        const res = await request.post('/api-website/getUploadSign', {
+          data: obj
+        })
+        console.log(res)
+      } catch {}
+    },
+    handleExceed() {}
+  },
+  render() {
+    return (
+      <div class={styles.colUpload}>
+        <ElUpload
+          disabled={this.disabled}
+          action={this.ossUploadUrl}
+          data={this.dataObj}
+          onSuccess={this.handleSuccess}
+          onRemove={this.handleRemove}
+          onChange={this.handleChange}
+          onProgress={this.handleProgress}
+          onError={this.handleError}
+          fileList={this.fileList}
+          showFileList={false}
+          accept={this.accept}
+          beforeUpload={this.beforeUpload}
+          onExceed={this.handleExceed}
+          limit={1}
+          ref="uploadRef"
+        >
+          <div
+            class={[
+              styles.uploadSection,
+              'flex items-center flex-col justify-center'
+            ]}
+          >
+            <img src={iconUpload} class="w-8 h-7 mb-3" />
+            <p>{this.tips}</p>
+          </div>
+        </ElUpload>
+
+        <p class="text-3 text-[#999999] leading-6 pt-1">{this.extraTips}</p>
+      </div>
+    )
+  }
+})

src/helpers/deep-clone.ts

@@ -0,0 +1,18 @@
+// form: https://www.30secondsofcode.org/js/s/deep-clone
+
+const deepClone = obj => {
+  if (obj === null) return null
+  const clone = Object.assign({}, obj)
+  Object.keys(clone).forEach(
+    key =>
+      (clone[key] =
+        typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key])
+  )
+  if (Array.isArray(obj)) {
+    clone.length = obj.length
+    return Array.from(clone)
+  }
+  return clone
+}
+
+export default deepClone

src/router/routes-admin.ts

@@ -22,7 +22,7 @@ export default [
   {
     path: '/teacherAuth',
     name: 'teacherAuth',
-    component: () => import('@/views/roleAuth/teacherAuth'),
+    component: () => import('@/views/role-auth/teacherAuth'),
     meta: {
       title: '老师认证'
     }
@@ -30,10 +30,19 @@ export default [
   {
     path: '/musicAuth',
     name: 'musicAuth',
-    component: () => import('@/views/roleAuth/musicAuth'),
+    component: () => import('@/views/role-auth/musicAuth'),
     meta: {
       title: '音乐人认证'
     }
+  },
+  {
+    path: '/userInfo',
+    name: 'userInfo',
+    component: () => import('@/views/user-info/index'),
+    meta: {
+      title: '个人信息'
+    }
+    // children: [{}]
   }
   // {
   //   path: '/',

src/views/App.tsx

@@ -39,7 +39,7 @@ export default defineComponent({
     return (
       <>
         <ColHeader />
-        <ElConfigProvider locale={zhCn}>
+        <ElConfigProvider locale={zhCn} message={{ max: 1 }}>
           <RouterView></RouterView>
         </ElConfigProvider>
         <ColFooter />

src/views/role-auth/teacherAuth/components/auth/index.tsx

@@ -0,0 +1,59 @@
+import ColSteps from '@/components/col-steps'
+import request from '@/helpers/request'
+import {
+  ElButton,
+  ElDatePicker,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElRadioButton,
+  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({
+  name: 'auth',
+  data() {
+    return {
+      radio: '1'
+    }
+  },
+  async mounted() {
+    try {
+      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
+        ? info.subjectId.split(',')
+        : []
+      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 {}
+  },
+  render() {
+    return (
+      <div class="pt-12 px-72 pb-24">
+        <ColSteps type="medium" active={teacherState.active} />
+        {teacherState.active === 0 && <CertInfo />}
+        {teacherState.active === 1 && <BaseInfo />}
+        {teacherState.active === 2 && <EduInformation />}
+      </div>
+    )
+  }
+})

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

@@ -1,4 +1,12 @@
-import { ElButton, ElForm, ElFormItem, ElInput, ElSelect } from 'element-plus'
+import {
+  ElButton,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElOptionGroup,
+  ElSelect
+} from 'element-plus'
 import { defineComponent } from 'vue'
 import { teacherState } from '../../teacherState'
 import styles from './index.module.less'
@@ -6,6 +14,7 @@ import styles from './index.module.less'
 export default defineComponent({
   name: 'auth',
   render() {
+    console.log(teacherState.subjectList)
     return (
       <ElForm
         class={[styles.form, 'mx-4 mt-7']}
@@ -25,27 +34,23 @@ export default defineComponent({
             }
           ]}
         >
-          {/* <ElInput
+          <ElSelect
+            multiple
+            filterable
             v-model={teacherState.teacherCert.subjectId}
             placeholder="请选择可教授声部"
-          /> */}
-          <ElSelect multiple filterable>
-            {/* <ElSelect */}
+            class="w-full"
+            multipleLimit={5}
+          >
+            {teacherState.subjectList.map((group: any) => (
+              <ElOptionGroup key={group.id} label={group.name}>
+                {group.subjects &&
+                  group.subjects.map((item: any) => (
+                    <ElOption key={item.id} value={item.id} label={item.name} />
+                  ))}
+              </ElOptionGroup>
+            ))}
           </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

src/views/role-auth/teacherAuth/components/cert-brief/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/role-auth/teacherAuth/components/cert-brief/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/cert-info/index.tsx → src/views/role-auth/teacherAuth/components/cert-info/index.tsx

@@ -1,4 +1,6 @@
+import request from '@/helpers/request'
 import { checkIDCard } from '@/helpers/validate'
+import { state } from '@/state'
 import {
   ElButton,
   ElRadioGroup,
@@ -8,7 +10,8 @@ import {
   ElDatePicker,
   ElRadioButton,
   ElCheckbox,
-  ElLink
+  ElLink,
+  ElMessage
 } from 'element-plus'
 import { defineComponent } from 'vue'
 import { teacherState } from '../../teacherState'
@@ -27,6 +30,13 @@ export default defineComponent({
       agreeStatus: false
     }
   },
+  computed: {
+    userAuth() {
+      // 判断是否实名过
+      const users = state.user.data || {}
+      return !!(users.idCardNo && users.realName)
+    }
+  },
   methods: {
     onIdCardValidate() {
       const idCardNo = teacherState.teacherCert.idCardNo
@@ -64,12 +74,28 @@ export default defineComponent({
       return sex
     },
     onSubmit() {
-      ;(this as any).$refs.certForm.validate(async (_: boolean) => {
-        console.log(_)
-        if (_) {
-          teacherState.active = 1
-        }
-      })
+      try {
+        ;(this as any).$refs.certForm.validate(async (_: boolean) => {
+          console.log(_)
+          if (_) {
+            if (!this.agreeStatus) {
+              return ElMessage.error('请阅读并同意协议')
+            }
+            if (!this.userAuth) {
+              const realName = teacherState.teacherCert.realName
+              const idCardNo = teacherState.teacherCert.idCardNo
+              await request.post('/api-auth/user/realNameAuth', {
+                data: {
+                  realName,
+                  idCardNo,
+                  save: true
+                }
+              })
+            }
+            teacherState.active = 1
+          }
+        })
+      } catch {}
     }
   },
   render() {
@@ -167,10 +193,16 @@ export default defineComponent({
                   this.agreeStatus = !this.agreeStatus
                 }}
               >
-                <ElCheckbox
-                  v-model={this.agreeStatus}
-                  class="!mr-2 rounded-full overflow-hidden"
-                />
+                <div
+                  onClick={(e: any) => {
+                    e.stopPropagation()
+                  }}
+                >
+                  <ElCheckbox
+                    v-model={this.agreeStatus}
+                    class="!mr-2 rounded-full overflow-hidden"
+                  />
+                </div>
                 我已阅读并同意
                 <a
                   href="https://dev.colexiu.com/student/#/registerProtocol"

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

@@ -15,5 +15,13 @@
     .el-checkbox__inner {
       @apply rounded-full overflow-hidden;
     }
+
+    .el-dialog {
+      --el-dialog-width: 379px !important;
+    }
+    .el-dialog__header,
+    .el-dialog__body {
+      padding: 0;
+    }
   }
 }

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

@@ -0,0 +1,151 @@
+import {
+  ElButton,
+  ElDialog,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessage
+} from 'element-plus'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import { teacherState } from '../../teacherState'
+import ColUpload from '@/components/col-upload'
+import request from '@/helpers/request'
+import deepClone from '@/helpers/deep-clone'
+import iconTeacherAuth from '../../../images/icon_teacher_auth.png'
+
+export default defineComponent({
+  name: 'auth',
+  data() {
+    return {
+      labelWidth: '140px',
+      loading: false,
+      popupStatus: true
+    }
+  },
+  methods: {
+    onSubmit() {
+      try {
+        ;(this as any).$refs['form'].validate(async (_: boolean) => {
+          if (_) {
+            this.loading = true
+            const params = deepClone(teacherState.teacherCert)
+            params.subjectId = params.subjectId.join(',')
+            await request.post('/api-website/teacherAuthEntryRecord/doApply', {
+              data: params
+            })
+            ElMessage.success('提交成功')
+            this.loading = false
+          }
+        })
+      } catch {
+        this.loading = false
+      }
+    }
+  },
+  render() {
+    return (
+      <ElForm
+        class={[styles.form, 'mx-4 mt-7']}
+        ref="form"
+        size="large"
+        model={teacherState.teacherCert}
+        labelPosition="left"
+      >
+        <ElFormItem
+          labelWidth={this.labelWidth}
+          label="毕业院校（必填）"
+          prop="graduateSchool"
+          rules={[
+            {
+              required: true,
+              message: '请输入您的毕业院校'
+            }
+          ]}
+        >
+          <ElInput
+            v-model={teacherState.teacherCert.graduateSchool}
+            placeholder="请输入您的毕业院校"
+          />
+        </ElFormItem>
+        <ElFormItem labelWidth={this.labelWidth} label="专业（选填）">
+          <ElInput
+            v-model={teacherState.teacherCert.subject}
+            placeholder="请输入您的专业名称"
+          />
+        </ElFormItem>
+        <ElFormItem labelWidth={this.labelWidth} label="毕业证书（选填）">
+          <ColUpload
+            modelValue={teacherState.teacherCert.gradCertificate}
+            accept=".png, .jpg"
+          />
+        </ElFormItem>
+        <ElFormItem labelWidth={this.labelWidth} label="学位证书（选填）">
+          <ElInput
+            v-model={teacherState.teacherCert.degreeCertificate}
+            placeholder="请输入您的毕业院校"
+          />
+        </ElFormItem>
+        <ElFormItem labelWidth={this.labelWidth} label="教师资格证（选填）">
+          <ElInput
+            v-model={teacherState.teacherCert.teacherCertificate}
+            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.onSubmit}
+              loading={this.loading}
+            >
+              提交审核
+            </ElButton>
+          </div>
+        </ElFormItem>
+
+        <ElDialog
+          modelValue={this.popupStatus}
+          onUpdate:modelValue={val => (this.popupStatus = val)}
+          closeOnClickModal={false}
+          closeOnPressEscape={false}
+          showClose
+        >
+          <div class="p-8">
+            <img src={iconTeacherAuth} />
+            <p class="text-center text-[#666] text-base -m-1 pb-6">
+              感谢您的教学热情，小酷将在24小时内
+              <br />
+              完成审核，请留意APP消息及短信获取
+              <br />
+              审核结果。
+            </p>
+
+            <ElButton
+              type="primary"
+              class="w-full rounded-sm"
+              style={{ height: '38px' }}
+              onClick={() => {
+                this.popupStatus = false
+                teacherState.active = 0
+                teacherState.authStatus = false
+              }}
+            >
+              我知道了
+            </ElButton>
+          </div>
+        </ElDialog>
+      </ElForm>
+    )
+  }
+})

src/views/roleAuth/teacherAuth/index.tsx → src/views/role-auth/teacherAuth/index.tsx

@@ -1,9 +1,7 @@
-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 CertBrief from './components/cert-brief'
 import { teacherState } from './teacherState'
 
 export const getAssetsHomeFile = (fileName: string) => {
@@ -29,24 +27,6 @@ export default defineComponent({
         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 {
       //
     }
@@ -64,9 +44,7 @@ export default defineComponent({
   render() {
     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 />
+        {!teacherState.authStatus ? <CertBrief /> : <Auth />}
       </div>
     )
   }

src/views/roleAuth/teacherAuth/teacherState.ts → src/views/role-auth/teacherAuth/teacherState.ts

@@ -14,8 +14,8 @@ export const teacherState = reactive({
     introduction: '',
     graduateSchool: null,
     subject: null,
-    gradCertificate: null,
-    degreeCertificate: null,
-    teacherCertificate: null
+    gradCertificate: '',
+    degreeCertificate: '',
+    teacherCertificate: ''
   }
 })

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

@@ -1,36 +0,0 @@
-import ColSteps from '@/components/col-steps'
-import {
-  ElButton,
-  ElDatePicker,
-  ElForm,
-  ElFormItem,
-  ElInput,
-  ElRadioButton,
-  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({
-  name: 'auth',
-  data() {
-    return {
-      radio: '1'
-    }
-  },
-  render() {
-    return (
-      <div class="pt-12 px-72 pb-24">
-        <ColSteps type="medium" active={teacherState.active} />
-
-        {teacherState.active === 0 && <CertInfo />}
-        {teacherState.active === 1 && <BaseInfo />}
-        {teacherState.active === 2 && <EduInformation />}
-      </div>
-    )
-  }
-})

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

@@ -1,66 +0,0 @@
-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 (
-      <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/user-info/components/user-menu/index.tsx

@@ -0,0 +1,21 @@
+import { defineComponent } from 'vue'
+
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `./images/${fileName}`
+  const modules = import.meta.globEager('./images/*')
+  return modules[path].default
+}
+
+export default defineComponent({
+  name: 'user-menu',
+  render() {
+    return (
+      <div class="bg-white rounded-[6px] text-center py-6 px-[18px] flex items-center flex-col">
+        <div class="py-2 px-6 flex items-center text-base text-[#666] w-full">
+          <img class="w-7 h-7 mr-[14px]" src={getAssetsHomeFile('1.png')} />
+          帖子
+        </div>
+      </div>
+    )
+  }
+})

src/views/user-info/components/users/index.tsx

@@ -0,0 +1,34 @@
+import { defineComponent } from 'vue'
+import iconTeacher from '@/common/images/icon_teacher.png'
+import { ElTag } from 'element-plus'
+
+export default defineComponent({
+  name: 'users',
+  render() {
+    return (
+      <div class="bg-white rounded-[6px] text-center pt-[30px] pb-8 flex items-center flex-col">
+        <img src={iconTeacher} class="w-[68px] h-[68px] rounded-full" />
+
+        <p class="text-[#1A1A1A] text-lg pt-4">李老师</p>
+
+        <div class="pt-3 pb-6">
+          <ElTag round color="#fff" class="mx-1 !border-[#2DC7AA]">
+            老师认证
+          </ElTag>
+          <ElTag round color="#fff" class="mx-1 !border-[#2DC7AA]">
+            音乐人认证
+          </ElTag>
+        </div>
+
+        <div class="text-[14px] text-[#666] flex items-center justify-center">
+          <span class="pr-3 flex items-center justify-center leading-6">
+            粉丝<b class="text-black text-[20px] pl-1">134</b>
+          </span>
+          <span class="flex items-center justify-center leading-6">
+            帖子<b class="text-black text-[20px] pl-1">124</b>
+          </span>
+        </div>
+      </div>
+    )
+  }
+})

src/views/user-info/index.tsx

@@ -0,0 +1,21 @@
+import { defineComponent, render } from 'vue'
+import { RouterView } from 'vue-router'
+import UserMenu from './components/user-menu'
+import Users from './components/users'
+
+export default defineComponent({
+  name: 'user-info',
+  render() {
+    return (
+      <div class="w-[1200px] mt-[30px] mb-14 min-h-full m-auto text-[#333] flex">
+        <div class="w-56 mr-4">
+          <Users class="mb-3" />
+          <UserMenu />
+        </div>
+        <div class="w-[960px] bg-white rounded-[6px]">
+          <RouterView></RouterView>
+        </div>
+      </div>
+    )
+  }
+})