my-resetpassword.vue

<template>
	<view class="main">
		<view class="top">
			<image @click="goBack" class="back" src="/static/discover/back.png"></image>
			<view class="title">重置密码</view>
			<span class="empty"></span>
		</view>
		<view class="content">
			<view class="text-area">
				<uni-forms :modelValue="formData" label-position="left" :labelWidth='90' :rules="confirmRules"
					ref="form" validate-trigger="bind" err-show-type="undertext">
					<uni-forms-item name="phone" required label="手机号">
						<uni-easyinput type="text" :inputBorder="true" v-model="formData.phone"
							placeholder="请输入注册使用的手机号"></uni-easyinput>
					</uni-forms-item>
					<view style="display: flex;flex-flow: row nowrap;">
						<uni-forms-item name="captcha" required label="验证码">
							<uni-easyinput type="number" :inputBorder="true" v-model="formData.captcha"
								placeholder="请输入六位验证码"></uni-easyinput>
						</uni-forms-item>
						<button size="mini" class="captchaButton" :disabled="btnDis" @tap="sendCaptcha">{{btnText}}</button>
						<!-- <button class="captchaButton" @click="sendCaptcha()">发送验证码</button> -->
					</view>
					<uni-forms-item name="newPassword" required label="新密码">
						<uni-easyinput type="password" :inputBorder="true" v-model="formData.newPassword"
							placeholder="请输入密码"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="confirmPassword" required label="确认密码">
						<uni-easyinput type="password" :inputBorder="true" v-model="formData.confirmPassword"
							placeholder="请确认新密码"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item>
						<button class="confirmButton" @click="confirm('form')">确认</button>
					</uni-forms-item>
				</uni-forms>
			</view>
		</view>
		<uni-popup ref="popupDialog" type="center">
			<view class="mcaptcha">
				<view style="padding: 30px 20px;text-align: center;">
					<canvas canvas-id="canvas" @click="updateImageCode" class="canvas"></canvas>
					<input class="ginput" v-model="graphicVerifyCode" placeholder="请输入验证码" />
					<button style="margin-top: 10px;" :loading="loading" @tap="submitFcha" class="btn-big">验证</button>
					<view class="text" @click="updateImageCode">获取验证码</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog cancelText="取消" confirmText="确定" title="提示" content="确定修改你的密码吗？"
				@confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	let code = 200;
	import {
		Fcaptcha
	} from "@/common/fcaptcha.js"
	export default {
		name: 'login',
		components: {},
		data() {
			return {
				btnDis: false,// 发送验证码按钮不禁用
				btnText: "发送验证码",// 提示
				loading: false,
				graphicVerifyCode: "",
				formData: {
					phone: '',
					password: '',
					captcha: '',
					newPassword: ''
				},
				confirmRules: {
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号'
						}, {
							validateFunction: function(rule, value, data, callback) {
								if (value === '') {
									callback(new Error('手机号不能为空'))
								} else {
									const reg = /^(13[0-9]|14[0-9]|15[0-9]|166|17[0-9]|18[0-9]|19[8|9])\d{8}$/
									if (reg.test(value)) {
										this.yzmshow = true
										callback()
									} else {
										callback('请输入正确的手机号')
									}
								}
							}
						}]
					},
					captcha: {
						rules: [{
							required: true,
							errorMessage: '请输入六位验证码'
						}, {
							validateFunction: function(rule, value, data, callback) {
								if (value.length != 6) {
									callback('验证码为六位！')
								} else {
									callback();
								}
							}
						}]
					},
					newPassword: {
						rules: [{
							required: true,
							errorMessage: '请输入密码'
						}, {
							validateFunction: function(rule, value, data, callback) {
								if (value.length > 20 || value.length < 8) {
									callback('密码长度在8-20位！')
								} else {
									callback();
								}
							}
						}]
					},
					confirmPassword: {
						rules: [{
							required: true,
							errorMessage: '请确认密码'
						}, {
							validateFunction: function(rule, value, data, callback) {
								if (value.length > 20 || value.length < 8) {
									callback('密码长度在8-20位！')
								} else if (value != data.newPassword) {
									callback('密码不一致')
								} else {
									callback();
								}
							}
						}]
					}
				}
			}
		},
		methods: {
			async sendCaptcha() {
				await this.$refs['popupDialog'].open()
				await this.fcaptcha.refresh()
				
			},
			countDown() {
			  	// 初始化定时器
				let t = null;
				// 倒计时1分钟
				let timer = 300;
				// 按钮禁用
				this.btnDis = true;
				// 计时器清零
				clearInterval(t);
				// 按钮显示时间
				this.btnText = `${timer}s`;
				t = setInterval(() => {
				// 当倒计时完时，显示重新发送,按钮开启
					if (timer == 0) {
						clearInterval(t);
						this.btnText = "重新发送";
						this.btnDis = false;
						return;
					}
					// 实现倒计时效果
					timer--;
					this.btnText = `${timer}s`;
				}, 1000)
			},
			confirm(validateForm) {
				this.$refs.alertDialog.open();
				
			},
			dialogConfirm() {
				this.$refs[validateForm].validate(valid => {
					if (!valid) {
						
						this.calluniCloud()
					}
				})
			},
			async calluniCloud() {
				await uniCloud.callFunction({
						name: 'fe-retrievePassword',
						data: {
							phone: this.formData.phone,
							password: this.formData.newPassword,
							code: this.formData.captcha
						}
					})
					.then(res => {
						this.code = res.result.code
						console.log(res)
					})
				await this.showTorM()
			},
			showTorM() {
				if (this.code == 200) {
					console.log(this.code, 'this.code1')
					uni.showToast({
						title: '修改成功',
						duration: 2000
					});
				} else if (this.code == 400) {
					uni.showToast({
						title: '验证码错误或超时',
						icon: "error",
						duration: 2000
					});
				} else {
					uni.showToast({
						title: '错误',
						icon: "error",
						duration: 2000
					});
				}
			},
			goBack() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			dialogClose() {
				this.$refsalertDialog.close();
			},
			
			// 刷新验证码
			updateImageCode() {
				this.fcaptcha.refresh()
			},
			// 提交前校验图形验证码
			submitFcha() {
				if (!this.graphicVerifyCode) {
					return uni.showToast({
						title: '请输入图形验证码',
						icon: 'error'
					})
				}
				let validate = this.fcaptcha.validate(this.graphicVerifyCode)
				if (!validate) {
					this.updateImageCode();
					this.graphicVerifyCode = ''
					uni.showToast({
						title: '图形验证码错误',
						icon: 'error'
					})
					this.fcaptcha.refresh()
				} else {
					uni.showToast({
						title: '图形验证码通过'
					})
					this.$refs['popupDialog'].close();
					uniCloud.callFunction({
							name: 'fe-auth-code',
							data: {
								phone: this.formData.phone
							}
						})
						.then(res => {
							this.code = res.result.code
							console.log(this.userId)
						})
					this.countDown();
				}
			}
		},
		onReady() {
			this.fcaptcha = new Fcaptcha({
				el: 'canvas',
				width: 80,
				height: 35,
				createCodeImg: ""
			});
		},
	}
</script>

<style>
	.bg {
		background-color: #edeef0;
	}

	.main {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	
	.content {
		/* background-color: #edeef0; */
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.top {
		width: 100%;
		height: 50px;
		background-color: #EDEEF0;
		text-align: center;
	}
	
	.back {
		width: 40px;
		height: 30px;
		margin-top: 10px;
		margin-bottom: 10px;
		float: left;
		margin-left: 10px;
	}
	
	.empty {
		width: 40px;
		height: 30px;
		margin-top: 10px;
		margin-bottom: 10px;
		float: right;
		margin-right: 10px;
	}
	
	.title {
		font-size: 20px;
		margin-top: 15px;
		font-weight: bold;
		color: #f1992d;
		display: inline-block;
	}

	.returnBack {
		height: 55rpx;
		width: 55rpx;
		margin-top: 60rpx;
		margin-left: 20rpx;
		margin-right: auto;
	}

	.confirmButton {
		background-color: #f1992d;
		color: #fff;
		border: 0;
		border-radius: 20px;
	}

	.confirmButton::after {
		border: 0;
	}

	.captchaButton {
		background-color: #f1992d;
		color: #fff;
		width: 90px;
		height: 35px;
		font-size: 0.7em;
		border: 0;
		border-radius: 18px;
	}

	.captchaButton::after {
		border: 0;
	}

	.mcaptcha {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		width: 270px;
		height: 200px;
		border-radius: 10px;
	}

	.canvas {
		margin: auto;
		width: 200rpx;
		height: 100rpx;
	}

	.btn-big {
		background-color: #f1992d;
		color: #fff;
		border: 0;
		border-radius: 20px;
	}
	
	.text{
		margin-top: 12px;
		font-size: 10px;
		color: #f1992d;
	}
	
</style>