GSExamProj/pages/fixPwd/fixPwd.vue

<template>
	<view>
		<view class="nav-bar"></view>
		<view class="fix-upper">
			<h4 :class="[{ active: upperStatus == 0 }]">1.验证手机号码</h4>
			<h4 :class="[{ active: upperStatus == 1 }]">2.设置新密码</h4>
		</view>
		<view class="veri-log login-area" v-show="upperStatus == 0">
			<uni-easyinput prefix-icon="phone" type="number" maxlength="11" v-model="veriPhoneVal" placeholder="请输入手机号" style="margin-bottom: 30rpx;"></uni-easyinput>
			<view class="send-veri">
				<uni-easyinput prefix-icon="locked" maxlength="4" type="number" v-model="iptVal" placeholder="请输入验证码" style="width: 60%;"></uni-easyinput>
				<button class="count-down" :disabled="sendDisabled" @click="sendVeriCode" style="font-size: 14px;">
					<span v-if="countDownStatus == 0">发送验证码</span>
					<span v-if="countDownStatus == 1">
						{{ countDown }}s
					</span>
				</button>
			</view>
			<view class="veri-toggle" @click="veriToggle">下一步</view>
		</view>
		<view class="new-pwd" v-show="upperStatus == 1">
			<uni-easyinput type="password" prefix-icon="locked" v-model="pwd" placeholder="请设置6-20位新的登录密码" style="margin-bottom: 30rpx;"></uni-easyinput>
			<uni-easyinput type="password" prefix-icon="locked" v-model="rePwd" placeholder="请再次输入新的登录密码" style="margin-bottom: 30rpx;"></uni-easyinput>
			<view class="pwd-toggle" @click="sendPwd">提交</view>
		</view>
	</view>
</template>

<script>
import { publicPath } from '../../public';
	export default {
		data() {
			return {
				upperStatus: 0,
				veriPhoneVal: '',
				iptVal: '',
				veriCode: '',
				countDown: 60,
				countDownStatus: 0,
				sendDisabled: false,
				pwd: '',
				rePwd: '',
				givenCode: ''
			}
		},
		methods: {
			// 点击验证下一步
			veriToggle () {
				let that = this
				console.log(that.iptVal, that.veriCode);
				if (this.veriPhoneVal == '' || this.iptVal == '') {
					uni.showToast({
						icon: 'none',
						title: '手机号或验证码未填写！'
					})
				} else if (that.iptVal != that.veriCode) {
					uni.showToast({
						icon: 'none',
						title: '验证码不正确！'
					})
				} else {
					that.upperStatus = 1
				}
			},
			// 发送验证码
			sendVeriCode () {
				let that = this
				console.log(that.veriPhoneVal);
				// 发送短信
				uni.request({
					url: publicPath + '/backstage/app/captcha',
					method: 'GET',
					header: {
						'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
					},
					data: {
						telphone: that.veriPhoneVal
					},
					success: (res) => {
						console.log(res);
						// that.givenCode = code
						if (res.data.obj == 200) {
							that.veriCode = res.data.resMsg
						}
					}
				})
				this.countDownStatus = 1
				this.sendDisabled = true
				let timeInterval = setInterval(() => {
					that.countDown -= 1
				}, 1000)
				let timeOut = setTimeout(() => {
					that.countDownStatus = 0
					that.countDown = 60
					that.sendDisabled = false
					clearInterval(timeInterval)
					clearTimeout(timeOut)
				}, 1000 * 60)
			},
			sendPwd () {
				console.log(this.pwd, this.rePwd);
				let pwdReg = /^(?![a-zA-Z]+$)[0-9a-zA-Z]{6,20}$/
				if (this.pwd == '' || this.rePwd == '') {
					uni.showToast({
						icon: 'none',
						title: '输入框不能为空！'
					})
				} else if (!pwdReg.test(this.pwd)) {
					uni.showToast({
						icon: 'none',
						title: '密码不符合规则！'
					})
				} else if (this.rePwd != this.pwd) {
					uni.showToast({
						icon: 'none',
						title: '两则密码需保持一致！'
					})
				} else {
					uni.request({
						url: publicPath + '/backstage/user/resetPwd',
						method: 'POST',
						header: {
							'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
						},
						data: {
							pwd: this.pwd,
							id: uni.getStorageSync('id')
						},
						success: (res) => {
							console.log(res); 
							if (res.data.res == 1) {
								uni.showToast({
									icon: 'none',
									title: '修改成功！',
									success: () => {
										uni.reLaunch({
											url: '/pages/login/login'
										})
									}
								})
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	body{
		background-color: #F9F9F9;
	}
	.nav-bar{
		width: 100%;
		height: var(--status-bar-height);
		padding-top: var(--status-bar-height);
	}
	.fix-upper{
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;
		border-bottom: 1px solid #F2F2F2;
		h4{
			font-weight: normal;
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			padding: 20rpx;
		}
		.active{
			color: #0079FE;
		}
	}
	.login-area{
		width: 80%;
		margin: 50rpx auto;
		height: 300rpx;
		box-sizing: border-box;
		padding: 30rpx;
	}
	.veri-log{
		.send-veri{
			width: 100%;
			height: 70rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.count-down{
				width: 35%;
				height: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 14px;
			}
		}
		.veri-toggle{
			width: 100%;
			height: 90rpx;
			margin-top: 40rpx;
			background-color: #0079FE;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 15rpx;
		}
	}
	.new-pwd{
		width: 80%;
		margin: 50rpx auto;
		height: 300rpx;
		box-sizing: border-box;
		padding: 30rpx;
		.pwd-toggle{
			width: 100%;
			height: 90rpx;
			margin-top: 40rpx;
			background-color: #0079FE;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 15rpx;
		}
	}
</style>