mschool/src/views/layout/login.tsx

import { defineComponent } from 'vue';
import { CellGroup, Field, Button, CountDown, showToast } from 'vant';
import ImgCode from '@/components/m-img-code';
import request from '@/helpers/request';
import { setLogin, state } from '@/state';
import { checkPhone, removeAuth, setAuth } from '@/helpers/utils';
import styles from './login.module.less';
import logo from '@/common/images/logo.png';

type loginType = 'PWD' | 'SMS';
export default defineComponent({
  name: 'layout-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') {
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        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 = {
          phone: this.username,
          clientId: 'EDUCATION',
          clientSecret: 'EDUCATION'
        };

        if (this.loginType === 'PWD') {
          forms.password = this.password;
          forms.grant_type = 'password';
          const { data } = await request.post('/api-auth/usernameLogin', {
            requestType: 'form',
            data: {
              ...forms
            }
          });
          setAuth(
            data.authentication.token_type +
              ' ' +
              data.authentication.access_token
          );
        } else {
          forms.smsCode = this.smsCode;
          const { data } = await request.post('/api-auth/smsLogin', {
            requestType: 'form',
            data: {
              ...forms
            }
          });
          setAuth(
            data.authentication.token_type +
              ' ' +
              data.authentication.access_token
          );
        }

        const userCash = await request.get(
          '/api-web/schoolStaff/queryUserInfo',
          {
            initRequest: true // 初始化接口
          }
        );
        setLogin(userCash.data);

        this.directNext();
      } catch {
        //
      }
    },
    async onSendCode() {
      // 发送验证码
      if (!checkPhone(this.username)) {
        return showToast('请输入正确的手机号码');
      }
      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.logo}>
          <img src={logo} />
        </div>
        <CellGroup class={styles.container} border={false}>
          <Field
            v-model={this.username}
            name="手机号"
            placeholder="请输入您的手机号"
            type="tel"
            class={styles['input-group']}
            maxlength={11}
          />

          {this.loginType === 'PWD' ? (
            <Field
              v-model={this.password}
              type="password"
              name="密码"
              class={styles['input-group']}
              placeholder="请输入密码"
            />
          ) : (
            <Field
              v-model={this.smsCode}
              name="验证码"
              placeholder="请输入验证码"
              type="tel"
              class={styles['input-group']}
              maxlength={6}
              v-slots={{
                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秒"
                    />
                  )
              }}
            />
          )}
        </CellGroup>
        <div class={styles.margin34}>
          <Button
            round
            block
            disabled={this.codeDisable}
            onClick={this.onLogin}>
            提交
          </Button>
          <span class={styles['login-change']} onClick={this.onChange}>
            {this.loginType === 'PWD' ? '验证码登录' : '密码登录'}
          </span>
        </div>

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