更新

src/teacher/teacher-cert/cert-two.tsx

@@ -1,220 +1,220 @@
-import { defineComponent } from 'vue'
-import ColField from '@/components/col-field'
-import SubjectModel from '../../business-components/subject-list'
-import styles from './cert-two.module.less'
-import { Button, Col, Dialog, Field, Icon, Popup, Row, Tag } from 'vant'
-import { teacherState } from './teacherState'
-
-import icon1 from './images/icon_1.png'
-import icon2 from './images/icon_2.png'
-import icon3 from './images/icon_3.png'
-import ColPopup from '@/components/col-popup'
-import request from '@/helpers/request'
-import ColFieldGroup from '@/components/col-field-group'
-import ColUploadVideo from '@/components/col-upload-video'
-import ColUpload from '@/components/col-upload'
-
-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() {
-      // 学科列表
-      return teacherState.subjectList || []
-    },
-    choiceSubject() {
-      // 选择的科目
-      let tempArr: any[] = []
-      console.log(this.choiceSubjectIds, this.subjectList)
-      this.subjectList.forEach((parent: any) => {
-        parent.subjects &&
-          parent.subjects.forEach((sub: any) => {
-            if (this.choiceSubjectIds.includes(sub.id)) {
-              tempArr.push(sub as never)
-            }
-          })
-      })
-      console.log(tempArr, 'tempArr')
-      return tempArr
-    }
-  },
-  methods: {
-    onChoice(item: any) {
-      teacherState.teacherCert.subjectId = item.join(',') || ''
-
-      this.subjectStatus = false
-    },
-    async onSubjectOpen() {
-      this.subjectStatus = true
-    }
-  },
-  render() {
-    return (
-      <div>
-        <ColFieldGroup class={styles.items}>
-          <ColField
-            title="可教授乐器（可多选）"
-            border={false}
-            class={styles.itemSubject}
-            required
-            v-slots={{
-              icon: () => <Icon name={icon1} size="24" />,
-              right: () => (
-                <Button
-                  class={styles.select}
-                  round
-                  type="primary"
-                  size="small"
-                  onClick={this.onSubjectOpen}
-                >
-                  选择
-                </Button>
-              )
-            }}
-          >
-            {this.choiceSubject && this.choiceSubject.length > 0 ? (
-              <div class={styles['tag-list']}>
-                {this.choiceSubject.map((item: any) => (
-                  <Tag
-                    type="primary"
-                    plain
-                    round
-                    closeable
-                    size="large"
-                    style={{ backgroundColor: '#E9FFF8' }}
-                    onClose={() => {
-                      Dialog.confirm({
-                        title: '提示',
-                        message: '请确认是否删除？',
-                        confirmButtonColor: 'var(--van-primary)'
-                      }).then(() => {
-                        let ids = teacherState.teacherCert.subjectId
-                          ? teacherState.teacherCert.subjectId.split(',')
-                          : []
-                        ids = ids.map((item: any) => Number(item))
-                        const index = ids.indexOf(item.id)
-                        if (index !== -1) {
-                          ids.splice(index, 1)
-                        }
-                        teacherState.teacherCert.subjectId = ids.join(',')
-                      })
-                    }}
-                  >
-                    {item.name}
-                  </Tag>
-                ))}
-              </div>
-            ) : null}
-          </ColField>
-        </ColFieldGroup>
-
-        <ColFieldGroup class={styles.items}>
-          <ColField
-            title="个人简介"
-            border={false}
-            v-slots={{
-              icon: () => <Icon name={icon2} size="24" />,
-              right: () => (
-                <div class={styles.limit}>
-                  {teacherState.teacherCert.introduction?.length || 0}/200
-                </div>
-              )
-            }}
-          >
-            <Field
-              v-model={teacherState.teacherCert.introduction}
-              rows="3"
-              autosize
-              maxlength={200}
-              style={{ fontSize: '13px' }}
-              type="textarea"
-              placeholder="例：毕业于中国音乐学院长笛专业，曾获得中国青年管乐演奏大赛一等奖，具有8年教学经验，能够将专业知识通过简单易懂的方式教授给学员。"
-            />
-          </ColField>
-        </ColFieldGroup>
-
-        <ColFieldGroup class={styles.items}>
-          {teacherState.teacherCert.styleVideo.map((item: any) => (
-            <ColField
-              title="个人风采"
-              required
-              border={false}
-              v-slots={{
-                icon: () => <Icon name={icon3} size="24" />
-              }}
-            >
-              <Row
-                justify="space-between"
-                style={{ width: '100%', paddingTop: '12px' }}
-              >
-                <Col span={12}>
-                  <Field
-                    style={{ padding: 0 }}
-                    name="videoUrl"
-                    rules={[{ required: true, message: '请上传课程视频' }]}
-                    v-slots={{
-                      input: () => (
-                        <ColUploadVideo
-                          // bucket="video-course"
-                          v-model={item.videoUrl}
-                          // v-model:posterUrl={item.posterUrl}
-                          class={styles.upload}
-                          tips="点击上传视频"
-                        />
-                      )
-                    }}
-                  />
-                </Col>
-                <Col span={12}>
-                  <Field
-                    style={{ padding: 0 }}
-                    name="coverUrl"
-                    rules={[{ required: true, message: '请上传视频封面' }]}
-                    error
-                    v-slots={{
-                      input: () => (
-                        <ColUpload
-                          class={styles.upload}
-                          cropper
-                          // bucket="video-course"
-                          options={{
-                            fixedNumber: [1.77, 1],
-                            autoCropWidth: 750,
-                            autoCropHeight: 424
-                          }}
-                          v-model={item.cover}
-                          tips="点击上传视频封面"
-                        />
-                      )
-                    }}
-                  />
-                </Col>
-              </Row>
-            </ColField>
-          ))}
-        </ColFieldGroup>
-
-        <ColPopup v-model={this.subjectStatus} destroy>
-          <SubjectModel
-            subjectList={this.subjectList}
-            choiceSubjectIds={this.choiceSubjectIds}
-            onChoice={this.onChoice}
-          />
-        </ColPopup>
-      </div>
-    )
-  }
-})
+import { defineComponent } from 'vue'
+import ColField from '@/components/col-field'
+import SubjectModel from '../../business-components/subject-list'
+import styles from './cert-two.module.less'
+import { Button, Col, Dialog, Field, Icon, Popup, Row, Tag } from 'vant'
+import { teacherState } from './teacherState'
+
+import icon1 from './images/icon_1.png'
+import icon2 from './images/icon_2.png'
+import icon3 from './images/icon_3.png'
+import ColPopup from '@/components/col-popup'
+import request from '@/helpers/request'
+import ColFieldGroup from '@/components/col-field-group'
+import ColUploadVideo from '@/components/col-upload-video'
+import ColUpload from '@/components/col-upload'
+
+export default defineComponent({
+  name: 'cert-two',
+  data() {
+    return {
+      // choiceSubject: [],
+      subjectStatus: false
+    }
+  },
+  computed: {
+    choiceSubjectIds() {
+      // 选择的科目编号
+      let ids = teacherState.teacherCert.subjectId
+        ? teacherState.teacherCert.subjectId.split(',')
+        : []
+      console.log(ids, '1212')
+      ids = ids.map((item: any) => Number(item))
+      return ids
+    },
+    subjectList() {
+      // 学科列表
+      return teacherState.subjectList || []
+    },
+    choiceSubject() {
+      // 选择的科目
+      const 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)
+            }
+          })
+      })
+      console.log(tempArr, 'tempArr')
+      return tempArr
+    }
+  },
+  methods: {
+    onChoice(item: any) {
+      teacherState.teacherCert.subjectId = item.join(',') || ''
+
+      this.subjectStatus = false
+    },
+    async onSubjectOpen() {
+      this.subjectStatus = true
+    }
+  },
+  render() {
+    return (
+      <div>
+        <ColFieldGroup class={styles.items}>
+          <ColField
+            title="可教授乐器（可多选）"
+            border={false}
+            class={styles.itemSubject}
+            required
+            v-slots={{
+              icon: () => <Icon name={icon1} size="24" />,
+              right: () => (
+                <Button
+                  class={styles.select}
+                  round
+                  type="primary"
+                  size="small"
+                  onClick={this.onSubjectOpen}
+                >
+                  选择
+                </Button>
+              )
+            }}
+          >
+            {this.choiceSubject && this.choiceSubject.length > 0 ? (
+              <div class={styles['tag-list']}>
+                {this.choiceSubject.map((item: any) => (
+                  <Tag
+                    type="primary"
+                    plain
+                    round
+                    closeable
+                    size="large"
+                    style={{ backgroundColor: '#E9FFF8' }}
+                    onClose={() => {
+                      Dialog.confirm({
+                        title: '提示',
+                        message: '请确认是否删除？',
+                        confirmButtonColor: 'var(--van-primary)'
+                      }).then(() => {
+                        let ids = teacherState.teacherCert.subjectId
+                          ? teacherState.teacherCert.subjectId.split(',')
+                          : []
+                        ids = ids.map((item: any) => Number(item))
+                        const index = ids.indexOf(item.id)
+                        if (index !== -1) {
+                          ids.splice(index, 1)
+                        }
+                        teacherState.teacherCert.subjectId = ids.join(',')
+                      })
+                    }}
+                  >
+                    {item.name}
+                  </Tag>
+                ))}
+              </div>
+            ) : null}
+          </ColField>
+        </ColFieldGroup>
+
+        <ColFieldGroup class={styles.items}>
+          <ColField
+            title="个人简介"
+            border={false}
+            v-slots={{
+              icon: () => <Icon name={icon2} size="24" />,
+              right: () => (
+                <div class={styles.limit}>
+                  {teacherState.teacherCert.introduction?.length || 0}/200
+                </div>
+              )
+            }}
+          >
+            <Field
+              v-model={teacherState.teacherCert.introduction}
+              rows="3"
+              autosize
+              maxlength={200}
+              style={{ fontSize: '13px' }}
+              type="textarea"
+              placeholder="例：毕业于中国音乐学院长笛专业，曾获得中国青年管乐演奏大赛一等奖，具有8年教学经验，能够将专业知识通过简单易懂的方式教授给学员。"
+            />
+          </ColField>
+        </ColFieldGroup>
+
+        <ColFieldGroup class={styles.items}>
+          {teacherState.teacherCert.styleVideo.map((item: any) => (
+            <ColField
+              title="个人风采"
+              required
+              border={false}
+              v-slots={{
+                icon: () => <Icon name={icon3} size="24" />
+              }}
+            >
+              <Row
+                justify="space-between"
+                style={{ width: '100%', paddingTop: '12px' }}
+              >
+                <Col span={12}>
+                  <Field
+                    style={{ padding: 0 }}
+                    name="videoUrl"
+                    rules={[{ required: true, message: '请上传课程视频' }]}
+                    v-slots={{
+                      input: () => (
+                        <ColUploadVideo
+                          // bucket="video-course"
+                          v-model={item.videoUrl}
+                          // v-model:posterUrl={item.posterUrl}
+                          class={styles.upload}
+                          tips="点击上传视频"
+                        />
+                      )
+                    }}
+                  />
+                </Col>
+                <Col span={12}>
+                  <Field
+                    style={{ padding: 0 }}
+                    name="coverUrl"
+                    rules={[{ required: true, message: '请上传视频封面' }]}
+                    error
+                    v-slots={{
+                      input: () => (
+                        <ColUpload
+                          class={styles.upload}
+                          cropper
+                          // bucket="video-course"
+                          options={{
+                            fixedNumber: [1.77, 1],
+                            autoCropWidth: 750,
+                            autoCropHeight: 424
+                          }}
+                          v-model={item.cover}
+                          tips="点击上传视频封面"
+                        />
+                      )
+                    }}
+                  />
+                </Col>
+              </Row>
+            </ColField>
+          ))}
+        </ColFieldGroup>
+
+        <ColPopup v-model={this.subjectStatus} destroy>
+          <SubjectModel
+            subjectList={this.subjectList}
+            choiceSubjectIds={this.choiceSubjectIds}
+            onChoice={this.onChoice}
+          />
+        </ColPopup>
+      </div>
+    )
+  }
+})

src/teacher/teacher-cert/index.tsx

@@ -1,231 +1,237 @@
-import { Button, Sticky, Toast } from 'vant'
-import { defineComponent } from 'vue'
-import styles from './index.module.less'
-import CertInfo from './cert-info'
-import ColProtocol from '@/components/col-protocol'
-import { teacherState } from './teacherState'
-import Steps from './steps'
-import CertOne from './cert-one'
-import CertTwo from './cert-two'
-import CertThree from './cert-three'
-import { checkIDCard } from '@/helpers/validate'
-import request from '@/helpers/request'
-import ColResult from '@/components/col-result'
-import { state } from '@/state'
-
-export default defineComponent({
-  name: 'teacherCert',
-  data() {
-    const query = this.$route.query
-    return {
-      agreeStatus: false
-    }
-  },
-  async mounted() {
-    try {
-      // 老师入驻状态 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-teacher/subject/subjectSelect')
-        teacherState.subjectList = res.data || []
-      }
-
-      const teacherInfo = await request.get(
-        '/api-teacher/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.styleVideo = info.styleVideoJson
-        ? JSON.parse(info.styleVideoJson)
-        : [{ videoUrl: '', cover: '' }]
-      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)
-    }
-  },
-  methods: {
-    async next() {
-      const realName = teacherState.teacherCert.realName
-      if (!realName) {
-        Toast('请填写真实姓名')
-        return
-      }
-      const idCardNo = teacherState.teacherCert.idCardNo
-      if (!this.userAuth) {
-        if (!checkIDCard(idCardNo || '')) {
-          Toast('请填写正确的身份证号码')
-          return false
-        }
-      }
-
-      if (!this.agreeStatus) {
-        Toast('请阅读并同意协议')
-        return
-      }
-
-      if (!teacherState.teacherCert.birthdate) {
-        Toast('请选择出生日期')
-        return
-      }
-
-      try {
-        if (!this.userAuth) {
-          await request.post('/api-teacher/teacher/realNameAuth', {
-            data: {
-              realName,
-              idCardNo,
-              contract: true,
-              save: true
-            }
-          })
-        }
-        teacherState.active = 2
-      } catch {}
-    },
-    next2() {
-      if (!teacherState.teacherCert.subjectId) {
-        Toast('请选择教授科目')
-        return
-      }
-      if (!teacherState.teacherCert.styleVideo[0].videoUrl) {
-        Toast('请上传个人风采视频')
-        return
-      }
-      if (!teacherState.teacherCert.styleVideo[0].cover) {
-        Toast('请上传个人风采封面')
-        return
-      }
-      teacherState.active = 3
-    },
-    async onSubmit() {
-      try {
-        const graduateSchool = teacherState.teacherCert.graduateSchool
-        if (!graduateSchool) {
-          Toast('请输入您的毕业院校')
-          return
-        }
-        const subject = teacherState.teacherCert.subject
-        if (!subject) {
-          Toast('请输入您的专业')
-          return
-        }
-        const teacherCert = teacherState.teacherCert
-        teacherCert.styleVideoJson = JSON.stringify(teacherCert.styleVideo)
-        await request.post('/api-teacher/teacherAuthEntryRecord/doApply', {
-          data: teacherState.teacherCert
-        })
-        Toast('提交成功')
-        teacherState.active = 4
-      } catch {
-        //
-      }
-    },
-    prev() {
-      teacherState.active = teacherState.active - 1
-    }
-  },
-  render() {
-    return (
-      <div class={styles['teacher-cert']}>
-        {!teacherState.authStatus ? (
-          <CertInfo />
-        ) : (
-          <div>
-            {teacherState.active != 4 ? (
-              <Steps style={{ marginBottom: '12px' }} />
-            ) : null}
-            {teacherState.active === 1 ? (
-              <>
-                <CertOne />
-                <div class={'btnGroup'}>
-                  <ColProtocol
-                    v-model={this.agreeStatus}
-                    prototcolType="REGISTER"
-                    style={{ paddingLeft: 0, paddingRight: 0 }}
-                  />
-                  <Button
-                    block
-                    round
-                    onClick={this.next}
-                    type="primary"
-                    text="下一步"
-                  />
-                </div>
-              </>
-            ) : null}
-            {teacherState.active === 2 ? (
-              <>
-                <CertTwo />
-                <div class={['btnGroup', 'btnMore']}>
-                  <Button block round type="primary" plain onClick={this.prev}>
-                    上一步
-                  </Button>
-                  <Button
-                    block
-                    round
-                    onClick={this.next2}
-                    type="primary"
-                    text="下一步"
-                  />
-                </div>
-              </>
-            ) : null}
-            {teacherState.active === 3 ? (
-              <>
-                <CertThree />
-                {/* <Sticky position="bottom" offsetBottom={0}> */}
-                <div class={['btnGroup', 'btnMore']}>
-                  <Button block round type="primary" plain onClick={this.prev}>
-                    上一步
-                  </Button>
-                  <Button
-                    block
-                    round
-                    onClick={this.onSubmit}
-                    type="primary"
-                    text="提交审核"
-                  />
-                </div>
-                {/* </Sticky> */}
-              </>
-            ) : null}
-
-            {/* 提交完数据之后显示状态页 */}
-            {teacherState.active === 4 ? (
-              <ColResult
-                type="teacherCert"
-                style={{ paddingTop: '60px' }}
-                classImgSize="CERT"
-                tips="感谢您的申请，小酷将在24小时内完成审核，请留意APP消息及短信获取审核结果。"
-              />
-            ) : null}
-          </div>
-        )}
-      </div>
-    )
-  }
-})
+import { Button, Sticky, Toast } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import CertInfo from './cert-info'
+import ColProtocol from '@/components/col-protocol'
+import { teacherState } from './teacherState'
+import Steps from './steps'
+import CertOne from './cert-one'
+import CertTwo from './cert-two'
+import CertThree from './cert-three'
+import { checkIDCard } from '@/helpers/validate'
+import request from '@/helpers/request'
+import ColResult from '@/components/col-result'
+import { state } from '@/state'
+
+export default defineComponent({
+  name: 'teacherCert',
+  data() {
+    const query = this.$route.query
+    return {
+      agreeStatus: false
+    }
+  },
+  async mounted() {
+    try {
+      // 老师入驻状态 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-teacher/subject/subjectSelect')
+        teacherState.subjectList = res.data || []
+      }
+
+      const teacherInfo = await request.get(
+        '/api-teacher/teacherAuthEntryRecord/getLastRecordByUserId'
+      )
+      teacherState.teacherInfo = teacherInfo.data || {}
+      const info = teacherState.teacherInfo
+      console.log(info, 'info')
+      teacherState.teacherCert.introduction = info.introduction
+      teacherState.teacherCert.subjectId = info.subjectId
+      teacherState.teacherCert.graduateSchool = info.graduateSchool
+      teacherState.teacherCert.subject = info.subject
+      teacherState.teacherCert.styleVideo = info.styleVideoJson
+        ? JSON.parse(info.styleVideoJson)
+        : [{ videoUrl: '', cover: '' }]
+      teacherState.teacherCert.gradCertificate = info.gradCertificate
+      teacherState.teacherCert.degreeCertificate = info.degreeCertificate
+      teacherState.teacherCert.teacherCertificate = info.teacherCertificate
+
+      // 判断是否在声部，如果没有声部则取用户信息里面的声部
+      if (!info.subjectId) {
+        teacherState.teacherCert.subjectId = state.user.data.subjectId || ''
+      }
+    } catch {
+      //
+    }
+  },
+  computed: {
+    authStatus(): boolean {
+      return !!teacherState.authStatus
+    },
+    userAuth() {
+      // 判断是否实名过
+      const users = state.user.data || {}
+      return !!(users.idCardNo && users.realName)
+    }
+  },
+  methods: {
+    async next() {
+      const realName = teacherState.teacherCert.realName
+      if (!realName) {
+        Toast('请填写真实姓名')
+        return
+      }
+      const idCardNo = teacherState.teacherCert.idCardNo
+      if (!this.userAuth) {
+        if (!checkIDCard(idCardNo || '')) {
+          Toast('请填写正确的身份证号码')
+          return false
+        }
+      }
+
+      if (!this.agreeStatus) {
+        Toast('请阅读并同意协议')
+        return
+      }
+
+      if (!teacherState.teacherCert.birthdate) {
+        Toast('请选择出生日期')
+        return
+      }
+
+      try {
+        if (!this.userAuth) {
+          await request.post('/api-teacher/teacher/realNameAuth', {
+            data: {
+              realName,
+              idCardNo,
+              contract: true,
+              save: true
+            }
+          })
+        }
+        teacherState.active = 2
+      } catch {}
+    },
+    next2() {
+      if (!teacherState.teacherCert.subjectId) {
+        Toast('请选择教授科目')
+        return
+      }
+      if (!teacherState.teacherCert.styleVideo[0].videoUrl) {
+        Toast('请上传个人风采视频')
+        return
+      }
+      if (!teacherState.teacherCert.styleVideo[0].cover) {
+        Toast('请上传个人风采封面')
+        return
+      }
+      teacherState.active = 3
+    },
+    async onSubmit() {
+      try {
+        const graduateSchool = teacherState.teacherCert.graduateSchool
+        if (!graduateSchool) {
+          Toast('请输入您的毕业院校')
+          return
+        }
+        const subject = teacherState.teacherCert.subject
+        if (!subject) {
+          Toast('请输入您的专业')
+          return
+        }
+        const teacherCert = teacherState.teacherCert
+        teacherCert.styleVideoJson = JSON.stringify(teacherCert.styleVideo)
+        await request.post('/api-teacher/teacherAuthEntryRecord/doApply', {
+          data: teacherState.teacherCert
+        })
+        Toast('提交成功')
+        teacherState.active = 4
+      } catch {
+        //
+      }
+    },
+    prev() {
+      teacherState.active = teacherState.active - 1
+    }
+  },
+  render() {
+    return (
+      <div class={styles['teacher-cert']}>
+        {!teacherState.authStatus ? (
+          <CertInfo />
+        ) : (
+          <div>
+            {teacherState.active != 4 ? (
+              <Steps style={{ marginBottom: '12px' }} />
+            ) : null}
+            {teacherState.active === 1 ? (
+              <>
+                <CertOne />
+                <div class={'btnGroup'}>
+                  <ColProtocol
+                    v-model={this.agreeStatus}
+                    prototcolType="REGISTER"
+                    style={{ paddingLeft: 0, paddingRight: 0 }}
+                  />
+                  <Button
+                    block
+                    round
+                    onClick={this.next}
+                    type="primary"
+                    text="下一步"
+                  />
+                </div>
+              </>
+            ) : null}
+            {teacherState.active === 2 ? (
+              <>
+                <CertTwo />
+                <div class={['btnGroup', 'btnMore']}>
+                  <Button block round type="primary" plain onClick={this.prev}>
+                    上一步
+                  </Button>
+                  <Button
+                    block
+                    round
+                    onClick={this.next2}
+                    type="primary"
+                    text="下一步"
+                  />
+                </div>
+              </>
+            ) : null}
+            {teacherState.active === 3 ? (
+              <>
+                <CertThree />
+                {/* <Sticky position="bottom" offsetBottom={0}> */}
+                <div class={['btnGroup', 'btnMore']}>
+                  <Button block round type="primary" plain onClick={this.prev}>
+                    上一步
+                  </Button>
+                  <Button
+                    block
+                    round
+                    onClick={this.onSubmit}
+                    type="primary"
+                    text="提交审核"
+                  />
+                </div>
+                {/* </Sticky> */}
+              </>
+            ) : null}
+
+            {/* 提交完数据之后显示状态页 */}
+            {teacherState.active === 4 ? (
+              <ColResult
+                type="teacherCert"
+                style={{ paddingTop: '60px' }}
+                classImgSize="CERT"
+                tips="感谢您的申请，小酷将在24小时内完成审核，请留意APP消息及短信获取审核结果。"
+              />
+            ) : null}
+          </div>
+        )}
+      </div>
+    )
+  }
+})