TALL-MUI-4/pages/user/mixin.js

import { ref, computed } from 'vue';
import { useStore } from 'vuex';
import clipboard from "@/common/js/dc-clipboard/clipboard.js"

export default function mixinInit {
  const store = useStore();
  const user = computed(() => store.state.user.user);
  const rules = ref({
    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 errorType = ref(['message']);
  const labelPosition = ref('left');
  const border = ref(false);
  const smsCode = ref(''); // 短信验证码
  const showInterval = ref(false);
  const interval = ref(120);
  const codeTimer = ref(null);
  const showPaste = ref(false);

  return {
    errorType,
    // getImageCode,
    // hasvalue,
    // getCode,
    // getCodeInterval,
    // checkRules,
    // setCode,
    // getClipboardContents,
    // verifyPhone,
    // verifyLoginname,
    // handleWxLogin
  }
}


// const mixin = {
	// computed: mapState('user', ['user']),

	// onReady() {
	// 	this.$refs.uForm.setRules(this.rules);
	// },

	// methods: {
		// ...mapActions('user', ['sendCode']),

		// 获取图形验证码
	// 	async getImageCode() {
	// 	  this.$util.showLoading();
	// 	  try {
	// 	    const data = await uni.$u.api.getImageCode();
	// 	    const { imageBase64, verificationCodeId } = data;
	// 	    this.imageBase64 = imageBase64 || '';
	// 	    this.verificationCodeId = verificationCodeId || '';
	// 	    uni.hideLoading();
	// 	  } catch (error) {
	// 	    uni.hideLoading();
	// 	    uni.$ui.showToast(error);
	// 	  }
	// 	},

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

	// 	// 获取验证码
	// 	async getCode() {
	// 	  try {
	// 	    const { phone, verificationCodeValue } = this.model;
	// 	    const { verificationCodeId } = this;

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

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

	// 	// 验证信息
	// 	checkRules() {
	// 	  // const { smsCode, phone, user } = this;
	// 	  if (!this.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;
	// 	},

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

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

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

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

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

	// 	// 微信登录
	// 	handleWxLogin() {
	// 		const origin = 'https://test.tall.wiki/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`;
	// 	},
	// // }
// };