h5-colexiu/src/student/layout/login.tsx

import { defineComponent } from "vue";
import { CellGroup, Field, Button, CountDown } from "vant";
import ImgCode from "@/components/imgCode";
import request from "@/helpers/request";
import { setLogin, state } from "@/student/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;
    },
  },
  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;
        if(this.loginType === 'PWD') {
          res = await request.post('/api-auth/usernameLogin', {
            data: {
              username: this.username,
              password: this.password,
              clientId: 'student',
              clientSecret: 'student'
            }
          });
        } else {
          res = await request.post('/api-auth/smsLogin', {
            data: {
              clientId: 'student',
              clientSecret: 'student',
              phone: this.username,
              smsCode: this.smsCode,
              channel: 'H5'
            }
          });
        }

        const { authentication } = res.data;
        setAuth(authentication.token_type + " " + authentication.access_token);

        let userCash = await request.get('/api-student/userCashAccount/get', {
          initRequest: true // 初始化接口
        })
        setLogin(userCash.data)

        this.directNext();
      } catch{

      }
    },
    async onSendCode() { // 发送验证码
      // if(!checkPhone(this.phoneNumber)) {
      //     return
      // }
      this.imgCodeStatus = true
    },
    onCodeSend() {
      this.countDownStatus = false;
      this.countDownRef.start();
    },
    onFinished() {
      this.countDownStatus = true;
      this.countDownRef.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 /> 欢迎使用酷乐秀</div>
        <CellGroup inset>
          <Field
            v-model={this.username}
            name="手机号"
            label="手机号"
            placeholder="手机号"
            type="tel"
            maxlength={11}
          />
          { this.loginType === 'PWD' ? <Field
            v-model={this.password}
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
          /> : <Field
            v-model={this.smsCode}
            name="验证码"
            label="验证码"
            placeholder="验证码"
            type="tel"
            maxlength={6}
            // @ts-ignore
            vSlots={{
              button: () => (
                this.countDownStatus ? <Button size="small" round type="primary" onClick={this.onSendCode}>发送验证码</Button> :  <CountDown ref={this.countDownRef} auto-start="false" time={this.countDownTime} onFinish={this.onFinished} format="ss秒" />
              )
            }}
          /> }

        </CellGroup>
        <div style="margin: 16px;">
          <Button round block type="primary" disabled={this.codeDisable} onClick={this.onLogin}>
            提交
          </Button>
          <Button plain 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>
    )
  }
})