FE-lab-xcx/pages_basics/views/forgotPassword/forgotPassword.vue

<!-- 忘记密码 -->
<template>
	<view id="forgotPassword">
		<view class="page-title">忘记密码</view>
		<view class="input-max-box">
			<view>手机号</view>
			<input v-model="form.mobile" maxlength="11" focus placeholder="请输入手机号码" />
		</view>
		<view class="input-button-max-box">
			<view>手机验证码</view>
			<view class="input-button-box">
				<input maxlength="6" v-model="form.captcha" focus placeholder="请输入手机验证码" />
				<view @click="getCode()" :class="codeType?'checkButton':'noCheckButton'">
					{{codeType?seconds+'秒后重试':'获取验证码'}}
				</view>
			</view>
		</view>
		<view class="input-max-box">
			<view>新密码</view>
			<input type="password" maxlength="16" v-model="form.newPassword" focus placeholder="请输入新密码" />
		</view>
		<view class="input-max-box">
			<view>确认新密码</view>
			<input type="password" maxlength="16" v-model="form.confirmPassword" focus placeholder="请再次输入确认密码" />
		</view>
		<view class="bottom-button-box">
			<view @click="outButton()">稍后修改</view>
			<view @click="submitButton()">确定修改</view>
		</view>
	</view>
</template>

<script>
	import md5 from '@/utils/md5.js'
	import {
		authNumCaptcha,
		authForgetPassword,
	} from '@/pages_basics/api/index.js'
	export default {
		data() {
			return {
				form: {
					mobile:"",
					captcha:"",
					newPassword:"",
					confirmPassword:"",
				},
				codeType: false,
				seconds: 0,
				timer: null,
			}
		},

		onLoad(option) {

		},
		onShow() {

		},
		methods: {
			//返回上级页面
			outButton() {
				uni.navigateBack();
			},
			//获取验证码
			getCode() {
				let self = this;
				const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
				if (this.codeType) {
					uni.showToast({
						title: '请稍后再试',
						icon: "none",
						duration: 3000
					});
					return
				} else if (!this.form.mobile) {
					uni.showToast({
						title: '请输入手机号码',
						icon: "none",
						duration: 3000
					});
					return
				} else if (!reg.test(this.form.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: "none",
						duration: 3000
					});
					return
				}
				this.authNumCaptcha();
			},
			//获取验证码
			async authNumCaptcha() {
				let self = this;
				const {
					data
				} = await authNumCaptcha({mobile:this.form.mobile});
				if (data.code == 200) {
					uni.showToast({
						title: '发送成功',
						icon: "none",
						mask: true,
						duration: 2000
					});
					const TIME_COUNT = 60;
					this.$set(this, 'codeType', true);
					if (!this.timer) {
						this.$set(this, 'seconds', TIME_COUNT);
						this.timer = setInterval(() => {
							if (this.seconds > 1 && this.seconds <= TIME_COUNT) {
								this.seconds -= 1;
							} else {
								this.$set(this, 'codeType', false);
								clearInterval(this.timer);
								this.$set(this, 'timer', null);
							}
						}, 1000);
					}
				}
			},
			//提交
			submitButton() {
				let self = this;
				const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
				const password =
					/^(?=(?:.*[A-Z]){1})(?=(?:.*[a-z]){1})(?=(?:.*[0-9]){1})(?=(?:.*[!@#*?&]){1})(?!(.)\1)(.{10,16})$/
				if (!this.form.mobile) {
					uni.showToast({
						title: '请输入手机号码',
						icon: "none",
						duration: 3000
					});
					return
				} else if (!reg.test(this.form.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: "none",
						duration: 3000
					});
					return
				} else if (!this.form.captcha) {
					uni.showToast({
						title: '请输入手机验证码',
						icon: "none",
						duration: 3000
					});
					return
				} else if (!this.form.newPassword) {
					uni.showToast({
						title: '请输入新密码',
						icon: "none",
						duration: 3000
					});
					return
				} else if (!this.form.confirmPassword) {
					uni.showToast({
						title: '请再次输入确认密码',
						icon: "none",
						duration: 3000
					});
					return
				} else if (this.form.newPassword != this.form.confirmPassword) {
					uni.showToast({
						title: '新密码与确认新密码不一致',
						icon: "none",
						duration: 3000
					});
					return
				} else if (!password.test(this.form.newPassword) || !password.test(this.form.confirmPassword)) {
					uni.showToast({
						title: '密码长度最少10位 最多16位，必须同时包含一个大写字母、一个小写字母、一个数字和一个特殊字符!@#*?&',
						icon: "none",
						duration: 5000
					});
					return
				}
				uni.showModal({
					title: '确认提交?',
					cancelColor: '#999999',
					confirmColor: '#0183FA',
					content: '',
					success(res) {
						if (res.confirm) {
							// console.log('确定')
							self.authForgetPassword();
						} else if (res.cancel) {
							// console.log('取消')
						}
					}
				})
			},
			async authForgetPassword(){
				let self = this;
				let obj = {
					mobile:this.form.mobile,
					captcha:this.form.captcha,
					newPassword:md5.hex_md5(this.form.newPassword),
					confirmPassword:md5.hex_md5(this.form.confirmPassword),
				};
				const {
					data
				} = await authForgetPassword(obj);
				if (data.code == 200) {
					uni.showToast({
						title: '操作成功',
						icon: "none",
						mask: true,
						duration: 2000
					});
					setTimeout(function(){
						uni.navigateBack();
					},2000);
				}
			},
		},

	}
</script>


<style lang="stylus" scoped>
	#forgotPassword {
		height: 100%;
		display: flex;
		flex-direction: column;
		flex: 1;
		background-color: #FFFFFF;
		overflow-y: scroll;
		overflow-x: hidden;

		.page-title {
			line-height: 120rpx;
			font-weight: 700;
			font-size: 34rpx;
			margin-left: 30rpx;
		}

		.input-max-box {
			padding: 0 30rpx;

			view {
				line-height: 80rpx;
				font-size: 30rpx;
				font-weight: 700;
			}

			input {
				width: 630rpx;
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 10rpx;
				border: 1px solid #D8D8D8;
				padding: 0 30rpx;
			}
		}

		.input-button-max-box {
			padding: 0 30rpx;

			view:nth-child(1) {
				line-height: 80rpx;
				font-size: 30rpx;
				font-weight: 700;
			}

			.input-button-box {
				display: flex;

				input {
					width: 412rpx;
					height: 100rpx;
					line-height: 100rpx;
					border-radius: 10rpx;
					border: 1px solid #D8D8D8;
					padding: 0 30rpx;
					margin-right: 18rpx;
				}

				view {
					width: 200rpx;
					line-height: 100rpx;
					text-align: center;
					font-size: 30rpx;
					border-radius: 10rpx;
				}

				.checkButton {
					color: #333;
					background-color: #E8E8E8;
				}

				.noCheckButton {
					color: #fff;
					background-color: #0183FA;
				}
			}
		}

		.bottom-button-box {
			display: flex;
			margin: 43rpx 0;

			view {
				font-size: 30rpx;
				line-height: 100rpx;
				text-align: center;
			}

			view:nth-child(1) {
				width: 220rpx;
				margin: 0 33rpx 0 30rpx;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				border: 1rpx solid #E0E0E0;
			}

			view:nth-child(2) {
				width: 437rpx;
				color: #fff;
				background: #0183FA;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
			}
		}
	}
</style>