first
This commit is contained in:
169
pages/login/forgetPassword.vue
Normal file
169
pages/login/forgetPassword.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<view class="forget-password">
|
||||
<view v-if="vdata.isRetrieve" class="tips">
|
||||
<text>我们已将短信验证码发送至您的手机</text>
|
||||
<text style="margin-top: 30rpx; font-size: 46rpx; font-weight: 500; color: rgba(0,0,0,1);">{{ vdata.userInfo.telphone }}</text>
|
||||
</view>
|
||||
<view v-else class="tips">
|
||||
<text>您正在尝试找回密码</text>
|
||||
<text>请在下方输入注册手机号，并填写短信验证码</text>
|
||||
</view>
|
||||
|
||||
<view class="jeepay-form">
|
||||
<uni-forms ref="formRef" label-width="0" :model="vdata.formData" :rules="rules">
|
||||
<uni-forms-item v-if="vdata.isRetrieve !== '1'" name="phone">
|
||||
<uni-easyinput class='jeepay-easyinput' v-model="vdata.formData.phone" type="number" :maxlength="11" :disabled="!vdata.allowSendMsgFlag" placeholder="请输入手机号" :clearable="false">
|
||||
<template #prefixIcon><image src="@/static/login/icon-phone.svg" class="input-icon" /></template>
|
||||
<template #suffixIcon> <view class='show-tips' style="color: rgba(88,132,204,1);font-weight: 400;font-size: 32rpx;" @tap="sendSmscodeFunc">{{ vdata.sendMsgText }}</view> </template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item>
|
||||
<!-- 手机验证码， 不限制数字还是本文， 如果发送为文本则无需app升级。 -->
|
||||
<view style="display: flex;">
|
||||
<uni-easyinput class='jeepay-easyinput' :maxlength="6" placeholder="请输入验证码" v-model="vdata.formData.vercode" :clearable="false">
|
||||
<template #prefixIcon><image src="@/static/login/icon-sms-code.svg" class="input-icon" /></template>
|
||||
</uni-easyinput>
|
||||
<image :src="vdata.formData.imgCodeUrl" style="width: 200rpx; height: 110rpx;margin-left: 10rpx;" @click="getCode" mode=""></image>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
|
||||
<uni-forms-item name="code">
|
||||
<!-- 手机验证码， 不限制数字还是本文， 如果发送为文本则无需app升级。 -->
|
||||
<uni-easyinput class='jeepay-easyinput' :maxlength="6" placeholder="请输入手机验证码" v-model="vdata.formData.code" :clearable="false">
|
||||
<template #prefixIcon><image src="@/static/login/icon-sms-code.svg" class="input-icon" /></template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<view v-if="vdata.isRetrieve" style="font-size: 29rpx; text-align: center; color: rgba(128,128,128,1);" @tap="sendSmscodeFunc">{{ vdata.sendMsgText }}</view>
|
||||
<Button @tap="nextRetrieve">下一步</Button>
|
||||
</uni-forms>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, getCurrentInstance } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { $sendSms, $retrieve,$isCode } from '@/http/apiManager.js';
|
||||
import storageManage from '@/commons/utils/storageManage.js'
|
||||
import infoBox from '@/commons/utils/infoBox.js';
|
||||
import go from '@/commons/utils/go.js'
|
||||
import timer from '@/commons/utils/timer.js'
|
||||
import formUtil from '@/commons/utils/formUtil.js'
|
||||
const rules = {
|
||||
phone: {
|
||||
rules:[ formUtil.rules.requiredInputShowToast('手机号') ],
|
||||
},
|
||||
code: {
|
||||
rules:[ formUtil.rules.requiredInputShowToast('短信验证码') ],
|
||||
},
|
||||
}
|
||||
const formRef = ref()
|
||||
const vdata = reactive({
|
||||
formData: {
|
||||
phone: '', // 手机号
|
||||
code: '' // 短信验证码
|
||||
},
|
||||
sendMsgText : '发送验证码',
|
||||
allowSendMsgFlag : true, // 是否可发送短信验证码
|
||||
isRetrieve: '' ,// 是否在设置中找回密码跳转
|
||||
userInfo: storageManage.userInfo()
|
||||
})
|
||||
// const instance = getCurrentInstance()
|
||||
// console.log('instance', instance)
|
||||
|
||||
onLoad((options) => {
|
||||
Object.assign(vdata, options)
|
||||
console.log(vdata)
|
||||
if (vdata.isRetrieve) {
|
||||
vdata.formData.phone = vdata.userInfo.telphone
|
||||
sendSmscodeFunc()
|
||||
}
|
||||
})
|
||||
|
||||
const getCode=()=>{
|
||||
$isCode().then(res=>
|
||||
{
|
||||
console.log(res);
|
||||
vdata.formData.imgCodeUrl=res.bizData.imageBase64Data
|
||||
vdata.formData.vercodeToken=res.bizData.vercodeToken
|
||||
})
|
||||
}
|
||||
|
||||
getCode()
|
||||
|
||||
// 验证验证码是否正确进行下一步
|
||||
const nextRetrieve = () => {
|
||||
let phone = vdata.formData.phone;
|
||||
if(phone && !formUtil.regexp.mobile.test(phone)){
|
||||
return infoBox.showToast("请输入正确的手机号")
|
||||
}
|
||||
formUtil.validate(formRef.value).then(() => {
|
||||
$retrieve(vdata.formData).then(() => {
|
||||
go.to('PAGES_SET_NEW_PASSWORD', vdata.formData)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 点击发送验证码的函数
|
||||
const sendSmscodeFunc = () => {
|
||||
|
||||
// 按钮禁用
|
||||
if(!vdata.allowSendMsgFlag){
|
||||
return false ;
|
||||
}
|
||||
|
||||
if(!vdata.formData.vercode){
|
||||
return infoBox.showToast("请输入图像验证码");
|
||||
}
|
||||
// 验证失败
|
||||
if(!formUtil.regexp.mobile.test(vdata.formData.phone)){
|
||||
return infoBox.showToast("请输入正确的手机号")
|
||||
}
|
||||
|
||||
vdata.allowSendMsgFlag = false; // 按钮禁用
|
||||
|
||||
let data= {
|
||||
phone:vdata.formData.phone,
|
||||
vercode:vdata.formData.vercode,
|
||||
vercodeToken:vdata.formData.vercodeToken,
|
||||
}
|
||||
// 发送短信验证码
|
||||
$sendSms(data, 'retrieve').then(({bizData}) => {
|
||||
infoBox.showSuccessToast('验证码发送成功')
|
||||
timer.startTimeoutTask(1, 60, (subTime) => {
|
||||
|
||||
if(subTime <= 0){ // 任务结束
|
||||
vdata.sendMsgText = '发送验证码'
|
||||
vdata.allowSendMsgFlag = true;
|
||||
return false;
|
||||
}
|
||||
|
||||
vdata.sendMsgText = `${subTime}s后可重新发送`
|
||||
})
|
||||
}).catch(() => {
|
||||
vdata.allowSendMsgFlag = true
|
||||
})
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.forget-password {
|
||||
padding: 142rpx 50rpx 0;
|
||||
.tips {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 56rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
color: rgba(128,128,128,1);
|
||||
}
|
||||
.jeepay-form {
|
||||
.jeepay-btn {
|
||||
width: 400rpx;
|
||||
margin-top: 120rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user