useLogin.js 2.99 KB
/*
 * @Date: 2022-06-22 00:07:42
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-06-30 13:45:54
 * @FilePath: /tswj/src/composables/useLogin.js
 * @Description: 文件描述
 */
import { bLoginAPI } from '@/api/B/login'
import { useRouter } from 'vue-router'
import { wxInfo } from '@/utils/tools';
import { ref } from 'vue'
import { useCountDown } from '@vant/use';
import { smsAPI } from '@/api/common'
import { Toast } from 'vant'

export const useLogin = () => {
  const phone = ref('');
  const code = ref('')

  const refForm = ref(null);
  const validateForm = () => {
    const valid = refForm.value.validate();
    valid
      .then(() => {
        refForm.value.submit();
      })
      .catch(error => {
        console.error(error);
        Toast({
          message: '请检查后再次提交',
          icon: 'cross',
        });
      })
  }

  /**
   * 判断微信环境看是否弹出控件框
   * 桌面微信直接输入
   * 其他环境弹出输入框
   */
  let use_widget = ref(true);
  use_widget.value = !!(wxInfo().isiOS || wxInfo().isAndroid);

  /**
   * 手机号码校验
   * 函数返回 true 表示校验通过,false 表示不通过
   * @param {*} val 
   */
  const sms_disabled = ref(true);
  const phoneValidator = (val) => {
    let flag = false;
    // 简单判断手机号位数
    if (/1\d{10}/.test(val) && phone.value.length === 11) {
      sms_disabled.value = false;
      flag = true;
    } else {
      sms_disabled.value = true;
      flag = false;
    }
    return flag
  };

  /**
   * 手机号数字弹框
   */
  const keyboard_show = ref(false);
  const refPhone = ref(null)
  const showKeyboard = () => { // 弹出数字弹框
    keyboard_show.value = true;
  };
  const keyboardBlur = () => { // 数字键盘失焦回调
    keyboard_show.value = false;
    refPhone.value.validate();
  };

  // 设置发送短信倒计时
  // TAG: vant 自带倒计时函数
  const limitSeconds = ref(60000); // 配置倒计时秒数
  const countDown = useCountDown({ // 配置倒计时
    time: limitSeconds.value,
    onFinish: () => {
      countDown.reset();
    }
  });

  const sendCode = async () => { // 发送验证码
    countDown.start();
    // 验证码接口
    const { code } = await smsAPI({ phone: phone.value });
    if (code) {
      Toast.success('发送成功');
    }
  };

  // 过滤输入的数字 只能四位
  const smsFormatter = (value) => value.substring(0, 4);

  /**
   * 用户登录
   * @param {*} phone 
   * @param {*} pin 
   */
  const $router = useRouter();
  const onSubmit = async (values) => {
    const { code } = await bLoginAPI({ phone: values.phone, pin: values.code })
    if (code) {
      $router.push({
        path: '/business/index'
      });
    }
  };

  return {
    phone,
    code,
    onSubmit,
    use_widget,
    sms_disabled,
    phoneValidator,
    keyboardBlur,
    keyboard_show,
    showKeyboard,
    refPhone,
    refForm,
    validateForm,
    smsFormatter,
    limitSeconds,
    countDown,
    sendCode,
  }
}