|
|
|
@ -1,17 +1,17 @@ |
|
|
|
<template> |
|
|
|
<view class="u-p-l-50 u-p-r-50 u-p-t-30"> |
|
|
|
<u-form :model="form" ref="loginForm" :error-type="['message']"> |
|
|
|
<u-form-item label="手机号码" prop="phone" label-width="150"> |
|
|
|
<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"></u-input> |
|
|
|
</u-form-item> |
|
|
|
|
|
|
|
<u-form-item label="图形验证码" prop="verificationCodeValue" label-width="150"> |
|
|
|
<u-form-item label="图形验证码" prop="verificationCodeValue" label-width="160"> |
|
|
|
<u-input placeholder="请输入计算结果" v-model="form.verificationCodeValue" type="number"></u-input> |
|
|
|
<image slot="right" :src="imageBase64" mode="aspectFit" class="code-image" @click="getImageCode"></image> |
|
|
|
<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="150"> |
|
|
|
<u-input @focus="mixinInit.hasvalue(form)" placeholder="请输入验证码" v-model="form.smsCode" type="text"></u-input> |
|
|
|
<u-form-item label="验证码" prop="smsCode" label-width="160"> |
|
|
|
<u-input @focus="mixinInit.hasvalue(form, renderData)" placeholder="请输入验证码" v-model="form.smsCode" type="text"></u-input> |
|
|
|
<u-button slot="right" type="primary" size="mini" v-show="mixinInit.dataObj.showPaste" @click="mixinInit.setCode" 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> |
|
|
|
@ -23,7 +23,7 @@ |
|
|
|
</u-form> |
|
|
|
|
|
|
|
<view class="u-m-t-50"> |
|
|
|
<u-button @click="submit" type="primary">立即登录</u-button> |
|
|
|
<u-button @click="submitLogin" type="primary">立即登录</u-button> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="flex justify-between"> |
|
|
|
@ -43,51 +43,43 @@ |
|
|
|
<script setup> |
|
|
|
import { ref, computed, reactive } from 'vue'; |
|
|
|
import { useStore } from 'vuex'; |
|
|
|
import { onLoad, onReady } from '@dcloudio/uni-app'; |
|
|
|
import { onReady } from '@dcloudio/uni-app'; |
|
|
|
import userMixin from '@/hooks/user/userMixin' |
|
|
|
|
|
|
|
const store = useStore(); |
|
|
|
const mixinInit = userMixin(); |
|
|
|
const loginForm = ref(null); |
|
|
|
const phoneLoginForm = ref(null); |
|
|
|
|
|
|
|
const form = reactive({ |
|
|
|
phone: '', |
|
|
|
verificationCodeId: '', // 图形验证码id |
|
|
|
verificationCodeValue: '', // 图形验证码值 |
|
|
|
smsCode: '' |
|
|
|
}); |
|
|
|
const imageBase64 = ref(null); // 图形验证码图片 |
|
|
|
|
|
|
|
getImageCode(); |
|
|
|
const renderData = reactive({ |
|
|
|
verificationCodeId: '', // 图形验证码id |
|
|
|
imageBase64: '' // 图形验证码图片 |
|
|
|
}) |
|
|
|
|
|
|
|
onReady(() => { |
|
|
|
loginForm.value.setRules(mixinInit.rules); |
|
|
|
phoneLoginForm.value.setRules(mixinInit.rules); |
|
|
|
}); |
|
|
|
|
|
|
|
function submit() { |
|
|
|
getImageCode(); // 获取图形验证码 |
|
|
|
|
|
|
|
// 表单验证 |
|
|
|
const submitLogin = () => { |
|
|
|
console.log('111111') |
|
|
|
loginForm.value.validate(valid => { |
|
|
|
console.log('22222', valid) |
|
|
|
phoneLoginForm.value.validate(valid => { |
|
|
|
console.log('2222', valid) |
|
|
|
if (valid) { |
|
|
|
login() |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
// 获取图形验证码 |
|
|
|
async function getImageCode() { |
|
|
|
uni.$ui.showLoading(); |
|
|
|
try { |
|
|
|
const data = await uni.$u.api.getImageCode(); |
|
|
|
imageBase64.value = data.imageBase64 || ''; |
|
|
|
form.verificationCodeId = data.verificationCodeId || ''; |
|
|
|
uni.$ui.hideLoading(); |
|
|
|
} catch (error) { |
|
|
|
uni.$ui.hideLoading(); |
|
|
|
uni.$ui.showToast(error); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* 登录 |
|
|
|
*/ |
|
|
|
async function login() { |
|
|
|
uni.$ui.showLoading(); |
|
|
|
try { |
|
|
|
@ -117,6 +109,21 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 获取图形验证码 |
|
|
|
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 |
|
|
|
|
