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