NurseStationPersonApp/pages/forgotPassword/forgotPassword.vue

<template>
	<view class="app">
		<view class="item">
			<view class="lefttext">
				输入新密码
			</view>
			<u-input class='righttext' style='left:30%' placeholder="请输入密码" maxlength="10" type="password"
				:border="false" :password-icon="true" v-model="newpassword" />
		</view>
		<view class="item">
			<view class="lefttext">
				重复新密码
			</view>
			<u-input class='righttext' style='left:30%' placeholder="请再次输入密码" maxlength="10" type="password"
				:border="false" :password-icon="true" v-model="password" />
		</view>
		<view class="item">
			<view class="lefttext">
				手机号
			</view>
			<input class="righttext" style='left:23%' type="text" placeholder="请输入" maxlength="11"
				v-model="phonenumber" />
		</view>
		<!-- <view class="item">
			<view class="lefttext">
				验证码
			</view>
			<input class="righttext" style='left:23%' type="text" placeholder="" maxlength="6" v-model="verification" />
			<view class="obtaincode" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">
				{{getCodeText}}
			</view>
		</view> -->
		<view class="loginbtn" @tap='pwdlogin'>
			确定
		</view>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	import {
		updatePassword
	} from '@/api/forgotPassword/forgotPassword.js'
	export default {
		data() {
			return {
				phonenumber: '',
				password: '',
				newpassword: '',
				getCodeText: '获取验证码', //获取验证码的文字
				getCodeBtnColor: "#4C7BC9", //获取验证码的color
			}
		},
		methods: {
			pwdlogin() {
				if (this.password !== this.newpassword) {
					this.$refs.uToast.show({
						title: '密码输入不一致，请重新输入',
						type: 'error',
						duration: '1500'
					})
				} else {
					updatePassword(this.phonenumber, this.password, this.verification).then(res => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								title: '密码修改成功',
								type: 'success',
								url: '/pages/login/login',
								duration: '1500'
							})
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							})
						}
					})
				}
			},
			//点击获取验证码
			getCode() {
				uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
				if (this.getCodeisWaiting) { //是否在倒计时中
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phonenumber))) { //校验手机号码是否有误
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				this.getCodeText = "发送中..." //发送验证码
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "rgba(138,139,133,1)" //追加样式，修改颜色
				//示例用定时器模拟请求效果
				//setTimeout(()用于在指定的毫秒数后调用函数或计算表达式
				setTimeout(() => {
					uni.showToast({
						title: '验证码已发送',
						icon: "none"
					}); //弹出提示框
					// this.code = '1234'; //发送验证码，进行填入	示例默认1234，生产中请删除这一句。
					this.setTimer(); //调用定时器方法
				}, 1000)
			},
			//获取验证码的倒计时 setTimer： 需要每隔一段时间执行一件事的的时候就需要使用SetTimer函数
			setTimer() {
				let holdTime = 60; //定义变量并赋值
				this.getCodeText = "重新获取(60)"
				//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
				//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#4C7BC9";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},
		},
	}
</script>

<style lang="scss">
	@import "./forgotPassword.scss";
</style>