修改密码改为短信验证

teamwork/pages/login/find.vue

@@ -14,7 +14,8 @@
 							<uni-easyinput type="number" :inputBorder="true" v-model="formData.captcha"
 								placeholder="请输入六位验证码"></uni-easyinput>
 						</uni-forms-item>
-						<button class="captchaButton" @click="sendCaptcha()">发送验证码</button>
+						<!-- <button class="captchaButton" @click="sendCaptcha()">发送验证码</button> -->
+						<button size="mini" class="captchaButton" :disabled="btnDis" @tap="sendCaptcha">{{btnText}}</button>
 					</view>
 					<uni-forms-item name="newPassword" required label="新密码">
 						<uni-easyinput type="password" :inputBorder="true" v-model="formData.newPassword"
@@ -53,6 +54,8 @@
 		components: {},
 		data() {
 			return {
+				btnDis: false,// 发送验证码按钮不禁用
+				btnText: "发送验证码",// 提示
 				loading: false,
 				graphicVerifyCode: "",
 				formData: {
@@ -134,6 +137,30 @@
 				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[validateForm].validate(valid => {
 					if (!valid) {
@@ -223,6 +250,7 @@
 							this.code = res.result.code
 							console.log(this.userId)
 						})
+					this.countDown();
 				}
 			}
 		},

teamwork/pages/my/my-resetpassword.vue

@@ -6,25 +6,46 @@
 			<span class="empty"></span>
 		</view>
 		<view class="content">
-			<view class="password">
-				<span>原&ensp;密&ensp;码：</span>
-				<input placeholder="请输入原密码" @input="bindPassword" type="text" :password="showPassword"
-					name="input"></input>
+			<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 class="password">
-				<span>新&ensp;密&ensp;码：</span>
-				<input placeholder="请输入新密码" type="text" @input="bindNewPassword" :password="showPassword"
-					name="input"></input>
-			</view>
-			<view class="password">
-				<span>确认密码：</span>
-				<input placeholder="请确认密码" type="text" @input="bindConfirmPassword" :password="showPassword"
-					name="input"></input>
-			</view>
-		</view>
-		<view class="confirm">
-			<button class="confirm-btn" @click="confirmModification()">确认修改</button>
 		</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>
@@ -33,115 +54,252 @@
 </template>
 
 <script>
+	let code = 200;
+	import {
+		Fcaptcha
+	} from "@/common/fcaptcha.js"
 	export default {
+		name: 'login',
+		components: {},
 		data() {
 			return {
-				showPassword: true,
-				password: '',
-				newPassword: '',
-				confirmPassword: '',
+				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: {
-			bindPassword(e) {
-				this.password = e.detail.value;
+			async sendCaptcha() {
+				await this.$refs['popupDialog'].open()
+				await this.fcaptcha.refresh()
+				
 			},
-			bindNewPassword(e) {
-				this.newPassword = e.detail.value;
+			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)
 			},
-			bindConfirmPassword(e) {
-				this.confirmPassword = e.detail.value;
+			confirm(validateForm) {
+				this.$refs.alertDialog.open();
+				
 			},
 			dialogConfirm() {
-				let that = this;
-				let password = that.password;
-				let newPassword = that.newPassword;
-				let confirmPassword = that.confirmPassword;
-				let updata = {};
-				if (!that.isPasswordAvailable(newPassword)) {
+				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: '密码长度在8-20位！',
-						icon: 'none',
+						title: '修改成功',
 						duration: 2000
 					});
-					return;
-				} else if (!that.isConfirmPasswordAvailable(newPassword, confirmPassword)) {
+				} else if (this.code == 400) {
 					uni.showToast({
-						title: '两次密码不一致',
-						icon: 'none',
+						title: '验证码错误或超时',
+						icon: "error",
 						duration: 2000
 					});
-					return;
-				} else if (that.password == newPassword) {
+				} else {
 					uni.showToast({
-						title: '与原密码一致',
-						icon: 'none',
+						title: '错误',
+						icon: "error",
 						duration: 2000
 					});
-				} else {
-					updata.password = password;
-					updata.newPassword = newPassword;
-					this.Upload(updata);
 				}
-				this.$refs.alertDialog.close();
+			},
+			goBack() {
+				uni.navigateBack({
+					delta: 1, //返回层数，2则上上页
+				})
 			},
 			dialogClose() {
 				this.$refsalertDialog.close();
 			},
-			confirmModification() {
-				this.$refs.alertDialog.open();
+			
+			// 刷新验证码
+			updateImageCode() {
+				this.fcaptcha.refresh()
 			},
-			isPasswordAvailable(newPassword) {
-				if (newPassword.length > 20 || newPassword.length < 8) {
-					return false;
-				} else {
-					return true;
+			// 提交前校验图形验证码
+			submitFcha() {
+				if (!this.graphicVerifyCode) {
+					return uni.showToast({
+						title: '请输入图形验证码',
+						icon: 'error'
+					})
 				}
-			},
-			isConfirmPasswordAvailable(newPassword, confirmPassword) {
-				if (newPassword == confirmPassword) {
-					return true;
+				let validate = this.fcaptcha.validate(this.graphicVerifyCode)
+				if (!validate) {
+					this.updateImageCode();
+					this.graphicVerifyCode = ''
+					uni.showToast({
+						title: '图形验证码错误',
+						icon: 'error'
+					})
+					this.fcaptcha.refresh()
 				} else {
-					return false;
-				}
-			},
-			goBack() {
-				uni.navigateBack({
-					delta: 1, //返回层数，2则上上页
-				})
-			},
-			Upload(updata) {
-				uniCloud.callFunction({
-						name: 'fe-my-resetpassword',
-						data: {
-							userId: getApp().globalData.userId,
-							password: updata.password,
-							newPassword: updata.newPassword
-						},
-
+					uni.showToast({
+						title: '图形验证码通过'
 					})
-					.then(res => {
-						uni.showToast({
-							title: res.result.message,
-							icon: 'none',
-							duration: 2000
-						});
-						console.log(res);
-					});
-			},
-			onload() {
-				plus.navigator.setStatusBarBackground('#EDEEF0');
+					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%;
@@ -149,7 +307,7 @@
 		background-color: #EDEEF0;
 		text-align: center;
 	}
-
+	
 	.back {
 		width: 40px;
 		height: 30px;
@@ -158,7 +316,7 @@
 		float: left;
 		margin-left: 10px;
 	}
-
+	
 	.empty {
 		width: 40px;
 		height: 30px;
@@ -167,7 +325,7 @@
 		float: right;
 		margin-right: 10px;
 	}
-
+	
 	.title {
 		font-size: 20px;
 		margin-top: 15px;
@@ -176,46 +334,65 @@
 		display: inline-block;
 	}
 
-	.content {
-
-		width: 80%;
-		margin-top: 50%;
-		margin-left: auto;
+	.returnBack {
+		height: 55rpx;
+		width: 55rpx;
+		margin-top: 60rpx;
+		margin-left: 20rpx;
 		margin-right: auto;
 	}
 
-	.password {
+	.confirmButton {
+		background-color: #f1992d;
+		color: #fff;
+		border: 0;
+		border-radius: 20px;
+	}
 
-		margin-top: 50rpx;
-		height: 20%;
-		display: flex;
-		align-items: center;
+	.confirmButton::after {
+		border: 0;
+	}
 
-		/* border-bottom: 1px solid #ccc; */
+	.captchaButton {
+		background-color: #f1992d;
+		color: #fff;
+		width: 90px;
+		height: 35px;
+		font-size: 0.7em;
+		border: 0;
+		border-radius: 18px;
 	}
 
-	.password span {
-		font-size: 35rpx;
+	.captchaButton::after {
+		border: 0;
 	}
 
-	.password input {
-		border-bottom: 1px solid #ccc;
+	.mcaptcha {
+		display: flex;
+		flex-direction: column;
+		background-color: #fff;
+		width: 270px;
+		height: 200px;
+		border-radius: 10px;
 	}
 
-	.confirm {
-		height: 20%;
-		margin-top: 20%;
+	.canvas {
+		margin: auto;
+		width: 200rpx;
+		height: 100rpx;
 	}
 
-	.confirm-btn {
-		background-color: #F1992D;
-		color: #FFFFFF;
-		width: 70%;
-		height: 85rpx;
-		line-height: 85rpx;
-		margin-top: 100rpx;
-		margin-left: auto;
-		margin-right: auto;
-		border-radius: 20rpx;
+	.btn-big {
+		background-color: #f1992d;
+		color: #fff;
+		border: 0;
+		border-radius: 20px;
+	}
+	
+	.text{
+		margin-top: 12px;
+		font-size: 10px;
+		color: #f1992d;
 	}
+	
 </style>
\ No newline at end of file