web-backset.cn/apps/server/view/page/login/index.ts

import './index.less';
import { getVerifyCode, userLogin } from '../../api';
import { RegUtil } from '@backset/util';

$(() => {
  $('#page-signup')
    .on('click', '#btn-switch-login-type', handleSwitchLoginType)
    .on('click', '#btn-signup-password', handlePasswordLogin)
    .on('click', '#btn-signup-verify', handleVerifyLogin)
    .on('click', '#btn-verify-code', handleGetVerifyCode);

  /**
   * 获取验证码
   */
  function handleGetVerifyCode() {
    const params = { phone: '' + $('#tel').val() };
    if (!RegUtil.PHONE.test(params.phone)) return;
    // return message.error({ text: '手机号格式错误' });
    $('#btn-verify-code').addClass('loading');
    getVerifyCode(params).then(res => {
      console.log(res);
      if (res) {
        $('#btn-verify-code').removeClass('loading');
      }
    });
  }

  /**
   * 验证码登录
   */
  function handleVerifyLogin() {
    const params = {
      login_type: 'verifycode',
      user_login: '' + $('#tel').val(),
      verify_code: '' + $('#verify-code').val(),
    };
    userLogin(params).then(res => {
      console.log(res);
    });
  }

  /**
   * 密码登录
   */
  function handlePasswordLogin() {
    const params = {
      login_type: 'password',
      user_login: '' + $('#username').val(),
      user_pass: '' + $('#password').val(),
    };
    userLogin(params).then(res => {
      console.log(res);
    });
  }

  /**
   * 点击登录方式切换
   */
  function handleSwitchLoginType(this: any) {
    const switchVerify = $(this).attr('data-login-type') === 'password';
    if (switchVerify) {
      $('#verify-form').removeClass('d-none');
      $('#password-form').addClass('d-none');
      $(this).attr('data-login-type', 'verify').html('密码登陆');
    } else {
      $('#verify-form').addClass('d-none');
      $('#password-form').removeClass('d-none');
      $(this).attr('data-login-type', 'password').html('验证码登陆');
    }
  }
});