14 changed files with 627 additions and 470 deletions
@ -1,285 +0,0 @@ |
|||||
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); |
|
||||
|
|
||||
// 获取图形验证码
|
|
||||
async function getImageCode() { |
|
||||
console.log('5555') |
|
||||
uni.$ui.showLoading(); |
|
||||
try { |
|
||||
const data = await uni.$u.api.getImageCode(); |
|
||||
const { imageBase64, verificationCodeId } = data; |
|
||||
imageBase64 = imageBase64 || ''; |
|
||||
verificationCodeId = verificationCodeId || ''; |
|
||||
uni.$ui.hideLoading(); |
|
||||
} catch (error) { |
|
||||
uni.$ui.hideLoading(); |
|
||||
uni.$ui.showToast(error); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
return { |
|
||||
// errorType,
|
|
||||
// rules,
|
|
||||
// labelPosition,
|
|
||||
// border,
|
|
||||
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`;
|
|
||||
// },
|
|
||||
// // }
|
|
||||
// };
|
|
||||
@ -0,0 +1,277 @@ |
|||||
|
import { ref, computed, reactive } from 'vue'; |
||||
|
import { useStore } from 'vuex'; |
||||
|
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 uni.$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: 60, |
||||
|
showPaste: false |
||||
|
}); |
||||
|
|
||||
|
//有图片验证码的值
|
||||
|
function hasvalue(form, renderData) { |
||||
|
uni.hideKeyboard();//隐藏软键盘
|
||||
|
|
||||
|
if(form.smsCode || form.showPaste) return |
||||
|
if (!verifyPhone(form.phone)) { |
||||
|
uni.$ui.showToast('请输入正确的手机号'); |
||||
|
return; |
||||
|
} |
||||
|
if (!form.verificationCodeValue) { |
||||
|
uni.$ui.showToast('请输入图形验证码'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if (!dataObj.showInterval) { |
||||
|
getCode(form, renderData); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 获取验证码
|
||||
|
async function getCode(form, renderData) { |
||||
|
try { |
||||
|
if (!renderData.verificationCodeId || !form.verificationCodeValue) { |
||||
|
uni.$ui.showToast('缺少图形验证码参数'); |
||||
|
return; |
||||
|
} |
||||
|
const params = { |
||||
|
phone: form.phone, |
||||
|
verificationCodeId: renderData.verificationCodeId, |
||||
|
verificationCodeValue: form.verificationCodeValue, |
||||
|
}; |
||||
|
const data = await store.dispatch('user/sendCode', params); |
||||
|
if (data) { |
||||
|
getCodeInterval(); |
||||
|
dataObj.showPaste = true; |
||||
|
} |
||||
|
} catch (err) { |
||||
|
dataObj.showPaste = false; |
||||
|
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 = 60; |
||||
|
return; |
||||
|
} |
||||
|
dataObj.interval = dataObj.interval - 1; |
||||
|
}, 1000); |
||||
|
} |
||||
|
|
||||
|
// 粘贴
|
||||
|
function setCode(form) { |
||||
|
// 获取粘贴板内容
|
||||
|
// 小程序平台
|
||||
|
//#ifdef MP-WEIXIN
|
||||
|
uni.getClipboardData({ |
||||
|
success(res) { |
||||
|
form.smsCode = res.data; |
||||
|
}, |
||||
|
}); |
||||
|
//#endif
|
||||
|
|
||||
|
// 非小程序平台
|
||||
|
//#ifndef MP-WEIXIN
|
||||
|
getClipboardContents(form) |
||||
|
//#endif
|
||||
|
} |
||||
|
|
||||
|
// 非小程序平台粘贴
|
||||
|
async function getClipboardContents(form) { |
||||
|
try { |
||||
|
const text = await navigator.clipboard.readText(); |
||||
|
form.smsCode = 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() { |
||||
|
// #ifdef H5
|
||||
|
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`; |
||||
|
// #endif
|
||||
|
|
||||
|
// #ifdef APP-PLUS
|
||||
|
uni.getProvider({ |
||||
|
service: 'oauth', |
||||
|
success: function(res) { |
||||
|
console.log(res.provider); |
||||
|
//支持微信、qq和微博等
|
||||
|
if (~res.provider.indexOf('weixin')) { |
||||
|
uni.login({ |
||||
|
provider: 'weixin', |
||||
|
success: function(loginRes) { |
||||
|
uni.$ui.showToast("App微信获取用户信息成功", loginRes); |
||||
|
console.log("App微信获取用户信息成功", loginRes); |
||||
|
// 获取用户信息
|
||||
|
uni.getUserInfo({ |
||||
|
provider: 'weixin', |
||||
|
success: function(infoRes) { |
||||
|
uni.$ui.showToast('-------获取微信用户所有-----'); |
||||
|
uni.$ui.showToast(infoRes.userInfo.openId); |
||||
|
uni.$ui.showToast(JSON.stringify(infoRes.userInfo)); |
||||
|
console.log('-------获取微信用户所有-----'); |
||||
|
console.log(infoRes.userInfo.openId); |
||||
|
console.log(JSON.stringify(infoRes.userInfo)); |
||||
|
// 提交信息
|
||||
|
// that.wxSubmit(infoRes.userInfo.openId)
|
||||
|
} |
||||
|
}); |
||||
|
// that.getApploginData(loginRes) //请求登录接口方法
|
||||
|
}, |
||||
|
fail: function(res) { |
||||
|
console.log("App微信获取用户信息失败", res); |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
// #endif
|
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
rules, |
||||
|
// showPaste,
|
||||
|
// showInterval,
|
||||
|
// interval,
|
||||
|
dataObj, |
||||
|
hasvalue, |
||||
|
// checkRules,
|
||||
|
setCode, |
||||
|
verifyLoginname, |
||||
|
handleWxLogin |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,206 @@ |
|||||
|
<template> |
||||
|
<view class="statbar"> |
||||
|
<view class="status_bar"></view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="u-p-l-50 u-p-r-50 u-p-t-30"> |
||||
|
<view class="mt-5 mb-10 text-4xl text-center">登录</view> |
||||
|
|
||||
|
<u-form :model="form" ref="phoneLoginForm" :error-type="['message']"> |
||||
|
<u-form-item label="手机号码" prop="phone" label-width="160"> |
||||
|
<u-input placeholder="请输入手机号" v-model="form.phone" type="number" @focus="handleFocus" @click="handleShowKeyboard(1)"></u-input> |
||||
|
</u-form-item> |
||||
|
|
||||
|
<u-form-item label="图形验证码" prop="verificationCodeValue" label-width="160"> |
||||
|
<u-input placeholder="请输入计算结果" v-model="form.verificationCodeValue" type="number" @focus="handleFocus" @click="handleShowKeyboard(2)"></u-input> |
||||
|
<image slot="right" :src="renderData.imageBase64" mode="aspectFit" class="code-image" @click="getImageCode"></image> |
||||
|
</u-form-item> |
||||
|
|
||||
|
<u-form-item label="验证码" prop="smsCode" label-width="160"> |
||||
|
<u-input @focus="mixinInit.hasvalue(form, renderData)" placeholder="请输入验证码" v-model="form.smsCode" type="number" @click="handleShowKeyboard(3)"></u-input> |
||||
|
<u-button slot="right" type="primary" size="mini" v-show="mixinInit.dataObj.showPaste" @click="toPaste" class="u-m-r-20">粘贴</u-button> |
||||
|
<u-button slot="right" size="mini" v-if="mixinInit.dataObj.showInterval">{{ mixinInit.dataObj.interval }}</u-button> |
||||
|
</u-form-item> |
||||
|
|
||||
|
<!-- <view class="flex flex-nowrap"> |
||||
|
<view class="flex-sub"></view> |
||||
|
<view class="u-m-t-30 u-font-12 text-gray-400" @click="openPage('/pages/user/forgetPassword')">忘记密码</view> |
||||
|
</view> --> |
||||
|
</u-form> |
||||
|
|
||||
|
<view class="u-m-t-50"> |
||||
|
<u-button @click="submitLogin" type="primary">立即登录</u-button> |
||||
|
</view> |
||||
|
|
||||
|
<!-- <view class="flex justify-between"> |
||||
|
<view class="u-m-t-30" style="color: #2885ED;" @click="openPage('/pages/user/rigister')">新用户注册</view> |
||||
|
<view class="u-m-t-30" style="color: #2885ED;" @click="openPage('/pages/user/accountLogin')">用户名登录</view> |
||||
|
</view> --> |
||||
|
|
||||
|
<!-- <view style="margin-top: 200rpx; text-align: center; color: #999999;font-size: 35rpx;"> |
||||
|
快速登录 |
||||
|
</view> |
||||
|
<view style="text-align: center; margin-top: 20rpx;" @click="mixinInit.handleWxLogin"> |
||||
|
<image src="../../static/weixinIcon.png" mode="" style="width: 85rpx;height: 85rpx;"></image> |
||||
|
</view> --> |
||||
|
</view> |
||||
|
|
||||
|
<master-keyboard ref="keyboard" keyboardtype="number" :randomNumber="true" :newCar="false" :defaultValue="title" @keyboardClick="handleClick" @toPaste="toPaste"></master-keyboard> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { ref, computed, reactive } from 'vue'; |
||||
|
import { useStore } from 'vuex'; |
||||
|
import { onReady } from '@dcloudio/uni-app'; |
||||
|
import userMixin from '@/hooks/user/userMixin' |
||||
|
|
||||
|
const store = useStore(); |
||||
|
const mixinInit = userMixin(); |
||||
|
const phoneLoginForm = ref(null); |
||||
|
|
||||
|
// 自定义键盘 |
||||
|
const keyboard = ref(null); |
||||
|
const currIndex = ref(null); // 当前点击的下标 |
||||
|
const title = ref(''); |
||||
|
const showKeyboard = ref(false); |
||||
|
const numberArr = ref(['1', '2', '3', '4', '5', '6', '7', '8', '9','0']); |
||||
|
|
||||
|
const form = reactive({ |
||||
|
phone: '', |
||||
|
verificationCodeValue: '', // 图形验证码值 |
||||
|
smsCode: '' |
||||
|
}); |
||||
|
const renderData = reactive({ |
||||
|
verificationCodeId: '', // 图形验证码id |
||||
|
imageBase64: '' // 图形验证码图片 |
||||
|
}) |
||||
|
|
||||
|
onReady(() => { |
||||
|
phoneLoginForm.value.setRules(mixinInit.rules); |
||||
|
}); |
||||
|
|
||||
|
getImageCode(); // 获取图形验证码 |
||||
|
|
||||
|
// 表单验证 |
||||
|
const submitLogin = () => { |
||||
|
phoneLoginForm.value.validate(valid => { |
||||
|
if (valid) { |
||||
|
login() |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 粘贴 |
||||
|
function toPaste() { |
||||
|
uni.getClipboardData({ |
||||
|
success(res) { |
||||
|
if (currIndex.value === 1) { |
||||
|
form.phone = res.data; |
||||
|
} else if (currIndex.value === 2) { |
||||
|
form.verificationCodeValue = res.data; |
||||
|
} else if (currIndex.value === 3) { |
||||
|
form.smsCode = res.data; |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 登录 |
||||
|
*/ |
||||
|
async function login() { |
||||
|
uni.$ui.showLoading(); |
||||
|
try { |
||||
|
// #ifdef H5 |
||||
|
const client = 0; |
||||
|
// #endif |
||||
|
// #ifdef APP-PLUS |
||||
|
const client = 1; |
||||
|
// #endif |
||||
|
|
||||
|
const params = reactive({ |
||||
|
client: client, |
||||
|
data: { |
||||
|
identifier: form.phone, |
||||
|
credential: form.smsCode, |
||||
|
}, |
||||
|
type: 1, |
||||
|
}); |
||||
|
|
||||
|
let res = await uni.$u.api.signin(params); |
||||
|
store.commit('user/setToken', res.token); |
||||
|
store.commit('user/setUser', res); |
||||
|
uni.$storage.setStorageSync('anyringToken', res.token || ''); |
||||
|
uni.$storage.setStorageSync('user', JSON.stringify(res) || ''); |
||||
|
store.dispatch('socket/initSocket'); |
||||
|
|
||||
|
uni.$ui.hideLoading(); |
||||
|
|
||||
|
uni.navigateTo({ |
||||
|
url: '/pages/index/index' |
||||
|
}); |
||||
|
} catch (error) { |
||||
|
uni.$ui.hideLoading(); |
||||
|
uni.$ui.showToast(error.msg); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 获取图形验证码 |
||||
|
async function getImageCode() { |
||||
|
uni.$ui.showLoading(); |
||||
|
try { |
||||
|
const data = await uni.$u.api.getImageCode(); |
||||
|
renderData.imageBase64 = data.imageBase64 || ''; |
||||
|
renderData.verificationCodeId = data.verificationCodeId || ''; |
||||
|
uni.$ui.hideLoading(); |
||||
|
} catch (error) { |
||||
|
uni.$ui.hideLoading(); |
||||
|
uni.$ui.showToast(error); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 页面跳转 |
||||
|
function openPage(url) { |
||||
|
uni.navigateTo({ |
||||
|
url: url |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 获取焦点事件隐藏软键盘 |
||||
|
function handleFocus() { |
||||
|
uni.hideKeyboard();//隐藏软键盘 |
||||
|
} |
||||
|
|
||||
|
// 点击弹出键盘 |
||||
|
function handleShowKeyboard(index) { |
||||
|
keyboard.value.open(true); |
||||
|
currIndex.value = index; |
||||
|
|
||||
|
if (currIndex.value === 1) { |
||||
|
title.value = form.phone; |
||||
|
} else if (currIndex.value === 2) { |
||||
|
title.value = form.verificationCodeValue; |
||||
|
} else if (currIndex.value === 3) { |
||||
|
title.value = form.smsCode; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function handleClick(e) { |
||||
|
title.value = e.value; |
||||
|
|
||||
|
if (currIndex.value === 1) { |
||||
|
form.phone = e.value; |
||||
|
} else if (currIndex.value === 2) { |
||||
|
form.verificationCodeValue = e.value; |
||||
|
} else if (currIndex.value === 3) { |
||||
|
form.smsCode = e.value; |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.code-image { |
||||
|
width: 200rpx; |
||||
|
height: 70rpx; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue