TALL-MUI-4/hooks/user/userMixin.js

import { ref, computed, reactive } from 'vue';
import { useStore } from 'vuex';
import { onReady } from '@dcloudio/uni-app';
import clipboard from "@/common/js/dc-clipboard/clipboard.js";
import Config from '@/common/js/config.js'

export default function userMixin() {
  const store = useStore();
  const user = computed(() => store.state.user.user);
  const rules = {
    phone: [{
        required: true,
        message: '请输入手机号',
        trigger: ['change', 'blur'],
      },
      {
        validator: (rule, value, callback) => {
          // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
          return this.$u.test.mobile(value);
        },
        message: '手机号码不正确',
        // 触发器可以同时用blur和change，二者之间用英文逗号隔开
        trigger: ['change', 'blur'],
      }
    ],
    verificationCodeValue: [{
        required: true,
        message: '请输入图形验证码',
        trigger: ['change', 'blur'],
      },
      {
        type: 'number',
        message: '图形验证码只能为数字',
        trigger: ['change', 'blur'],
      }
    ],
    smsCode: [{
        required: true,
        message: '请输入验证码',
        trigger: ['change', 'blur'],
      },
      {
        type: 'number',
        message: '验证码只能为数字',
        trigger: ['change', 'blur'],
      }
    ],
    account: [{
        required: true,
        message: '请输入用户名',
        trigger: ['change', 'blur'],
      },
      {
        min: 2,
        max: 20,
        message: '用户名长度在2到20个字符',
        trigger: ['change', 'blur'],
      },
      {
        pattern: /^[a-zA-Z0-9._-]{2,20}$/,
        message: '请输入2-20位字母、数字、汉字或字符"_ - ."',
        trigger: ['change', 'blur'],
      }
    ],
    password: [{
        required: true,
        message: '请输入密码',
        trigger: ['change', 'blur'],
      },
      {
        min: 6,
        max: 20,
        message: '密码长度在6到20个字符',
        trigger: ['change', 'blur'],
      },
      {
        // 正则不能含有两边的引号
        pattern: /^[a-zA-Z0-9._-]{6,20}$/,
        message: '请输入6-20位字母、数字、汉字或字符"_ - ."',
        trigger: ['change', 'blur'],
      }
    ],
  };
  const smsCode = ref(null); // 短信验证码
  // const showInterval = ref(false);
  // const interval = ref(120);
  const codeTimer = ref(null);
  // const showPaste = ref(false);
  const dataObj = reactive({
    showInterval: false,
    interval: 120,
    showPaste: false
  })

  //有图片验证码的值
  function hasvalue(form) {
    if(form.smsCode || dataObj.showPaste) return
    if (!verifyPhone(form.phone)) {
      uni.$ui.showToast('请输入正确的手机号');
      return;
    }
    if (!form.verificationCodeValue) {
      uni.$ui.showToast('请输入图形验证码');
      return;
    }
    getCode(form);
  }

  // 获取验证码
  async function getCode(form) {
    try {
      if (!form.verificationCodeId || !form.verificationCodeValue) {
        uni.$ui.showToast('缺少图形验证码参数');
        return;
      }
      const params = {
        phone: form.phone,
        verificationCodeId: form.verificationCodeId,
        verificationCodeValue: form.verificationCodeValue,
      };
      const date = await store.dispatch('user/sendCode', params);
      getCodeInterval();
      dataObj.showPaste = true;
    } catch (err) {
      throw err;
    }
  }

  // 获取验证码倒计时
  function getCodeInterval() {
    dataObj.showInterval = true;
    codeTimer.value = setInterval(() => {
      if (dataObj.interval === 0) {
        clearInterval(codeTimer.value);
        codeTimer.value = null;
        dataObj.showInterval = false;
        dataObj.interval = 120;
        return;
      }
      dataObj.interval = dataObj.interval - 1;
    }, 1000);
  }

  // 粘贴
  function setCode() {
    // 获取粘贴板内容
    // 小程序平台
    //#ifdef MP-WEIXIN
    uni.getClipboardData({
      success (res) {
        smsCode.value = res.data;
      }
    });
    //#endif

    // 非小程序平台
    //#ifndef MP-WEIXIN
    getClipboardContents()
    //#endif
  }

  // 非小程序平台粘贴
  async function getClipboardContents() {
    try {
      const text = await navigator.clipboard.readText();
      smsCode.value = text;
    } catch (err) {
      console.error('Failed to read clipboard contents: ', err);
    }
  }

  // 验证信息
  function checkRules() {
    if (!verifyPhone(phone.value)) {
      uni.$ui.showToast('请输入正确的手机号');
      return false;
    }
    if (!smsCode.value) {
      uni.$ui.showToast('验证码无效');
      return false;
    }

    if (phone.value === user.value.phone) {
      uni.$ui.showToast('新手机号不能与旧手机号相同');
      return;
    }
    return true;
  }

  /**
   * 验证手机号格式
   * @param {string} phone 手机号
   */
  function verifyPhone(phone) {
    const phoneExg = /^1\d{10}$/;
    return phoneExg.test(phone);
  }

  /**
   * 验证账号/密码 格式
   * @param {string} account 账号
   */
  function verifyLoginname(account) {
    const accountExg = /^[a-zA-Z0-9._-]{2,20}$/;
    return accountExg.test(account);
  }

  // 微信登录
  function handleWxLogin() {
    const origin = `${Config.baseUrl}/pt-mui`; // 测试
    const appid = 'wxd1842e073e0e6d91';
    const state = 'wx_web';
    const href = 'https://open.weixin.qq.com/connect/qrconnect';
    // eslint-disable-next-line
    window.location.href =
      `${href}?appid=${appid}&redirect_uri=${origin}&response_type=code&scope=snsapi_login&state=${state}#wechat_redirect`;
  }

  return {
    rules,
    // showPaste,
    // showInterval,
    // interval,
    dataObj,
    hasvalue,
    checkRules,
    setCode,
    verifyLoginname,
    handleWxLogin
  }
}