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

import { defineComponent } from "vue";
import { CellGroup, Field, Button, CountDown, Row, Col, Toast } from "vant";
import ImgCode from "@/components/ImgCode";
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;
    },
  },
  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.username)) {
        return Toast('请输入正确的手机号码');
      }
      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 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={this.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>
    )
  }
})