colexiu-project/src/views/login/index.tsx

import { defineComponent } from 'vue'
import styles from './index.module.less'
import { ElButton, ElIcon, ElTabPane, ElTabs, ElTooltip } from 'element-plus'
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}`
  const modules = import.meta.globEager('./images/*')
  return modules[path].default
}

export default defineComponent({
  name: 'Login',
  props: {
    onClose: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      qrCodeDownLoad: 'http://dev.colexiu.com/student/#/download',
      type: 'login' as
        | 'login'
        | 'qr-login'
        | 'register'
        | 'register-success'
        | 'teacher-auth',
      registerType: 'teacher' as 'teacher' | 'student',
      loginType: 'teacher' as 'teacher' | 'student'
    }
  },
  methods: {
    onReset(type: 'login' | 'register') {
      if (type === 'login') {
        ;(this as any).$refs.teacherLogin &&
          (this as any).$refs.teacherLogin.onResetFields()
        ;(this as any).$refs.studentLogin &&
          (this as any).$refs.studentLogin.onResetFields()
      } else if (type === 'register') {
        ;(this as any).$refs.teacherRegister &&
          (this as any).$refs.teacherRegister.onResetFields()
        ;(this as any).$refs.studentRegister &&
          (this as any).$refs.studentRegister.onResetFields()
      }
    }
  },
  watch: {
    type(val: string) {
      // 切换登录类型时需要清除定时器
      if (val != 'qr-login') {
        clearInterval(state.loginPopupTimer)
      }
    }
  },
  render() {
    return (
      <div class={[styles.loginSection, 'relative']}>
        <i
          class={[
            styles.iconClose,
            'w-9 h-9 rounded-full flex absolute -top-1 -right-[18px]'
          ]}
          onClick={() => {
            this.onClose()
          }}
        ></i>
        <img
          src={getAssetsHomeFile('register_bg.png')}
          class={[styles.loginBg, '-mt-[10px]']}
        />
        <div
          class={[
            styles.loginTabs,
            'px-9 pt-5 pb-12 bg-white relative',
            this.type === 'qr-login' ? 'pb-4' : '',
            this.type === 'teacher-auth' ? 'px-6 pb-8' : ''
          ]}
        >
          {this.type === 'login' && (
            <>
              <div class={'absolute top-2 right-2 z-10'}>
                <div class={styles.toolTips}>
                  <span>扫码登录更方便</span>
                  <span class={styles.toolTips_arrow}></span>
                </div>
                <img
                  src={getAssetsHomeFile('icon_qrcode_login.png')}
                  class="w-14 h-14 cursor-pointer"
                  onClick={() => {
                    this.type = 'qr-login'
                  }}
                />
              </div>
              <ElTabs v-model={this.loginType}>
                <ElTabPane label="老师登录" name="teacher">
                  {this.loginType === 'teacher' && (
                    <Form
                      type="teacher-login"
                      key="teacherLogin"
                      ref="teacherLogin"
                      onClose={() => {
                        this.onClose()
                      }}
                    />
                  )}
                </ElTabPane>
                <ElTabPane label="学员登录" name="student">
                  {this.loginType === 'student' && (
                    <Form
                      type="student-login"
                      key="studentLogin"
                      ref="studentLogin"
                      onClose={() => {
                        this.onClose()
                      }}
                    />
                  )}
                </ElTabPane>
              </ElTabs>
              <div class={[styles.scanTxt]}>
                没有账号，
                <span
                  class="cursor-pointer"
                  onClick={() => {
                    this.onReset('login')
                    this.type = 'register'
                  }}
                >
                  马上注册
                </span>
              </div>
            </>
          )}

          {this.type === 'qr-login' && (
            <>
              <QrLogin
                onChange={(type: any) => {
                  this.type = type
                }}
              />
              <div class={[styles.scanTxt, 'pt-14 text-center']}>
                没有账号，
                <span
                  class="cursor-pointer"
                  onClick={() => {
                    this.type = 'register'
                  }}
                >
                  马上注册
                </span>
              </div>
            </>
          )}

          {this.type === 'register' && (
            <>
              <ElTabs v-model={this.registerType}>
                <ElTabPane label="老师注册" name="teacher">
                  {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">
                  {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]}>
                已有账号，
                <span
                  class="cursor-pointer"
                  onClick={() => {
                    this.onReset('register')
                    this.type = 'login'
                  }}
                >
                  马上登录
                </span>
              </div>
            </>
          )}

          {this.type === 'register-success' && (
            <div class={'text-center pt-4'}>
              <QrcodeVue
                value={this.qrCodeDownLoad}
                class="mx-auto shadow-lg w-[138px] h-[138px] align-middle"
              />

              <h3 class="text-lg text=[#1a1a1a] pt-4 pb-2">注册成功</h3>
              <div class={[styles.scanTxt, 'leading-6']}>
                <p>恭喜您已成功注册酷乐秀老师账号！</p>
                <p>
                  <span>下载酷乐秀老师端APP</span>发现更大的世界
                </p>
              </div>

              <ElButton
                type="primary"
                class="w-full mt-4"
                style={{ height: '40px' }}
                onClick={() => {
                  if (this.registerType == 'teacher') {
                    this.type = 'teacher-auth'
                  } else {
                    this.onClose()
                  }
                }}
              >
                知道了
              </ElButton>
            </div>
          )}

          {this.type === 'teacher-auth' && (
            <TeacherAuth
              onClose={() => {
                this.type = 'login'
                this.loginType = 'teacher'
                this.onClose()
              }}
            />
          )}
        </div>
      </div>
    )
  }
})