orchestra-app/src/views/layout/login.tsx

import { defineComponent } from 'vue'
import { CellGroup, Field, Button, CountDown, Row, Col, Toast } from 'vant'
import ImgCode from '@/components/o-img-code'
import { checkPhone } from '@/helpers/validate'
import request from '@/helpers/request'
import { setLogin, state } from '@/state'
import { removeAuth, setAuth } from '@/helpers/utils'
import styles from './login.module.less'

type loginType = 'PWD' | 'SMS'
export default defineComponent({
  name: 'login',
  data() {
    return {
      loginType: 'SMS' as loginType,
      username: '',
      password: '',
      smsCode: '',
      countDownStatus: true, // 是否发送验证码
      countDownTime: 1000 * 120, // 倒计时时间
      // countDownRef: null as any, // 倒计时实例
      imgCodeStatus: false
    }
  },
  computed: {
    codeDisable() {
      let status = true
      if (this.loginType === 'PWD') {
        this.username && this.password && (status = false)
      } else {
        this.username && this.smsCode && (status = false)
      }
      return status
    },
    appName() {
      const template = {
        STUDENT: '学生端',
        TEACHER: '老师端',
        SCHOOL: '管理端'
      }
      return template[state.platformType]
    }
  },
  mounted() {
    removeAuth()
    this.directNext()
  },
  methods: {
    directNext() {
      if (state.user.status === 'login' || state.user.status === 'error') {
        const { returnUrl, isRegister, ...rest } = this.$route.query
        this.$router.replace({
          path: returnUrl as any,
          query: {
            ...rest
          }
        })
      }
    },
    async onLogin() {
      try {
        // let res: any
        const forms: any = {
          username: this.username,
          client_id: state.clientId[state.platformType],
          client_secret: state.clientId[state.platformType]
        }
        if (this.loginType === 'PWD') {
          forms.password = this.password
          forms.loginType = 'PASSWORD'
          forms.grant_type = 'PASSWORD'
        } else {
          forms.password = this.smsCode
          forms.loginType = 'SMS'
          forms.grant_type = 'SMS'
        }
        const { data } = await request.post('/api-oauth/userlogin', {
          requestType: 'form',
          data: {
            ...forms
          }
        })

        setAuth(data.token_type + ' ' + data.access_token)

        const userCash = await request.get(state.platformApi + '/appLoginUser/getUserInfo', {
          initRequest: true // 初始化接口
        })
        setLogin(userCash.data)

        this.directNext()
      } catch {
        //
      }
    },
    async onSendCode() {
      // 发送验证码
      if (!checkPhone(this.username)) {
        return Toast('请输入正确的手机号码')
      }
      this.imgCodeStatus = true
    },
    onCodeSend() {
      this.countDownStatus = false
      this.$nextTick(() => {
        ;(this.$refs.countDownRef as any).start()
      })
    },
    onFinished() {
      this.countDownStatus = true
      ;(this.$refs.countDownRef as any).reset()
    },
    onChange() {
      if (this.loginType === 'PWD') {
        this.loginType = 'SMS'
      } else if (this.loginType === 'SMS') {
        this.loginType = 'PWD'
      }
    }
  },
  render() {
    return (
      <div class={styles.login}>
        <div class={styles.loginTitle}>
          您好，
          <br /> 欢迎使用管乐团{this.appName}
        </div>
        <CellGroup class={styles.margin34} border={false}>
          <Row style={{ marginBottom: '16px' }}>
            <Col span={24} class={styles.formTitle}>
              手机号
            </Col>
            <Col span={24} class="van-hairline--bottom">
              <Field
                v-model={this.username}
                name="手机号"
                placeholder="请输入您的手机号"
                type="tel"
                maxlength={11}
              />
            </Col>
          </Row>

          {this.loginType === 'PWD' ? (
            <Row>
              <Col span={24} class={styles.formTitle}>
                密码
              </Col>
              <Col span={24} class="van-hairline--bottom">
                <Field
                  v-model={this.password}
                  type="password"
                  name="密码"
                  placeholder="请输入密码"
                />
              </Col>
            </Row>
          ) : (
            <Row>
              <Col span={24} class={styles.formTitle}>
                验证码
              </Col>
              <Col span={24} class="van-hairline--bottom">
                <Field
                  v-model={this.smsCode}
                  name="验证码"
                  placeholder="请输入验证码"
                  type="tel"
                  maxlength={6}
                  // @ts-ignore
                  vSlots={{
                    button: () =>
                      this.countDownStatus ? (
                        <span class={styles.codeText} onClick={this.onSendCode}>
                          获取验证码
                        </span>
                      ) : (
                        <CountDown
                          ref="countDownRef"
                          auto-start={false}
                          time={this.countDownTime}
                          onFinish={this.onFinished}
                          format="ss秒"
                        />
                      )
                  }}
                />
              </Col>
            </Row>
          )}
        </CellGroup>
        <div class={styles.margin34}>
          <Button round block type="primary" disabled={this.codeDisable} onClick={this.onLogin}>
            提交
          </Button>
          <Button block round color="#F5F7FB" onClick={this.onChange}>
            {this.loginType === 'PWD' ? '验证码登录' : '密码登录'}
          </Button>
        </div>

        {this.imgCodeStatus ? (
          <ImgCode
            v-model:value={this.imgCodeStatus}
            phone={this.username}
            onClose={() => {
              this.imgCodeStatus = false
            }}
            onSendCode={this.onCodeSend}
          />
        ) : null}
      </div>
    )
  }
})