shangfutong-ui/jeepay-ui-uapp-merchant/pages/login/forgetPassword.vue

<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>