yicangzongtai_app_240321/pages/research/setup/forgetPass.vue

<template>
	<view class="forget-pass">
		<navbar ref="navbar" :config="config" backColor="#666"></navbar>
		<form @submit="formSubmit">
			<view class="phone">
				<view class="phone-item">
					手机号码
				</view>
				<input type="number" name="phone" value="" maxlength="11" @input="onPhone" placeholder="请输入您的手机号码"
					placeholder-style="color:#cccccc; font-size:28rpx; font-weight:500;" />
			</view>
			<view class="verification-code">
				<view class="verification-item">
					验证码
				</view>
				<input type="text" name="code" value="" maxlength="6" @input="onCode" placeholder="请输入您的验证码"
					placeholder-style="color:#cccccc; font-size:28rpx; font-weight:500;" />
				<button class="verification-right" :disabled="disabled" @click="judgeRegister"
					:class="isPhone?'active':''">
					{{verificationCode}}
				</button>
			</view>
			<view class="background">

			</view>
			<view class="new-pass">
				<view class="new-pass-item">
					新密码
				</view>
				<input type="text" password="true" name="newPass" value="" maxlength="11" @input="onNewPass"
					placeholder="请输入您的新密码" placeholder-style="color:#cccccc; font-size:28rpx; font-weight:500;" />
			</view>
			<view class="confirm-pass">
				<view class="confirm-pass-item">
					确认密码
				</view>
				<input type="text" password="true" name="confirmPass" maxlength="11" @input="onConfirmPass" value=""
					placeholder="确认密码" placeholder-style="color:#cccccc; font-size:28rpx; font-weight:500;" />
			</view>
			<view class="button">
				<button form-type="submit">确认提交</button>
			</view>
		</form>
	</view>
</template>

<script>
	import {
		getVerfityCode,
		forgetPass
	} from "@/api/login.js"
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '忘记密码',
					color: '#1A1A1A',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#fff"],
					statusBarFontColor: '#1A1A1A',
					// backTabPage: "/pages/index/my"
				},
				phone: "", //手机号
				isPhone: false, //手机号正则
				code: "", //验证码
				newPass: "", //新密码
				confirmPass: "", //确认密码
				disabled: false,
				time: 60,
				verificationCode: "发送验证码"

			}
		},
		methods: {
			//获取验证码

			async obtainCode() {
				if (this.isPhone) {
					let res = await this.$http.post(getVerfityCode, this.phone)
					if (res && res.code == 200) {
						this.$mUtil.toast("发送成功")
						this.disabled = false;
						this.isPhone = false;
						this.verificationCode = this.time + "s";
						this.clear = setInterval(this.countDown, 1000);
					}
				}
			},
			judgeRegister() {
				this.$http.get('/account/verify-mobile/' + this.phone).then(res => {
					if (res && res.code == 200) {
						console.log(res.data)
						if (res.data == false) {
							this.$mUtil.toast("该手机号还未注册")
						} else if (res.data == true) {
							this.obtainCode()
						}
					}
				})





			},
			countDown() {
				if (this.time <= 0) {
					this.disabled = false;
					this.verificationCode = "重新获取";
					this.isPhone = true;
					this.time = 60;
					clearInterval(this.clear)
				} else {
					--this.time;
					this.verificationCode = this.time + 's'
				}
			},
			//清楚计时器
			beforeDestroy() {
				clearInterval(this.clear)
			},

			//手机号
			onPhone(e) {
				this.phone = e.detail.value
				if (this.phone.match(this.$mConfig.telRegex)) {
					if (this.verificationCode == '发送验证码' || this.verificationCode == '重新获取') {
						this.isPhone = true
					}
				} else {
					this.isPhone = false
				}
			},
			//验证码
			onCode(e) {
				this.code = e.detail.value
			},
			//新密码
			onNewPass(e) {
				this.newPass = e.detail.value
			},
			//确认密码
			onConfirmPass(e) {
				this.confirmPass = e.detail.value
			},
			//提交信息
			formSubmit(e) {
				let target = e.detail.value;
				if (!target.phone) {
					this.$mUtil.toast("请输入手机号")
					return false
				}
				if (!(target.phone.match(this.$mConfig.telRegex))) {
					this.$mUtil.toast("请输入正确的手机号")
					return false
				}
				if (!target.code) {
					this.$mUtil.toast("请输入验证码")
					return false
				}
				if (!target.newPass) {
					this.$mUtil.toast("请输入新密码")
					return false
				}
				if (!target.confirmPass) {
					this.$mUtil.toast("请输入确认密码")
					return false
				}
				if (!(target.newPass.match(target.confirmPass))) {
					this.$mUtil.toast("两次密码不一致")
					return false
				}
				let param = {
					mobile: target.phone,
					new_password: target.newPass,
					captcha: target.code
				}
				this.$http.post(forgetPass, param)
					.then(res => {
						if (res.code == 200) {
							this.$mUtil.toast("修改成功")
							setTimeout(() => {
								this.$http.post("/account/logout").then(res => {
									if (res && res.code == 200) {

										uni.clearStorageSync()
										uni.navigateBack({
											delta: 1
										})
									}
								})
							}, 2000)

							this.$mUtil.toast("修改成功")
						}
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.button {
		margin: 700rpx 30rpx 0 30rpx;
		
		button {
			width: 100%;
			text-align: center;
			margin-top: 70rpx;
			color: #ffffff;
			font-size: 32rpx;
			font-weight: Regular;
			background-color: #FA6138;
			border-radius: 43rpx;
		}
	}

	.phone {
		margin: 0 30rpx;
		display: flex;
		padding: 27rpx 0 30rpx 0;
		align-items: center;
		border-bottom: 1rpx solid #E6E6E6;

		.phone-item {
			font-size: 28rpx;
			font-weight: 400;
			color: #1A1A1A;

		}

		input {
			flex: 1;
			margin-left: 60rpx;
		}
	}

	.verification-code {
		margin: 0 30rpx;
		display: flex;
		align-items: center;
		padding: 12rpx 0;

		.verification-item {
			font-size: 28rpx;
			font-weight: 400;
			color: #1A1A1A;
		}

		input {
			flex: 1;
			margin-left: 88rpx;
		}

		.verification-right {
			font-size: 28rpx;
			color: #999999;
			background-color: #FFFFFF;
			font-weight: 400;
			border: 1rpx solid #b3b3b3;
			border-radius: 36rpx;
			padding: 0 30rpx;
		}

		.active {
			background-color: #FA6138;
			color: #FFFFFF;
      border: none;
		}
	}

	.background {
		height: 10rpx;
		background-color: #F5F5F5;
	}

	.new-pass {
		margin: 0 30rpx;
		display: flex;
		align-items: center;
		padding: 23rpx 0 30rpx 0;
		border-bottom: 1rpx solid #E6E6E6;

		.new-pass-item {
			font-size: 28rpx;
			color: #1A1A1A;
			font-weight: 400;
		}

		input {
			flex: 1;
			margin-left: 88rpx;
		}
	}

	.confirm-pass {
		margin: 0 30rpx;
		display: flex;
		padding: 34rpx 0 30rpx 0;
		border-bottom: 1rpx solid #E6E6E6;

		.confirm-pass-item {
			font-size: 28rpx;
			font-weight: 400;
			color: #1A1A1A;
		}

		input {
			flex: 1;
			margin-left: 60rpx;
		}
	}
</style>