Ci2Order.vue/App/pages/center/setting/forgetpass.vue

<template>
	<view>
		<z-navbar title="重置密码" back></z-navbar>
		<z-card width="630" class="mt-30 flex-n fac step_area">
			<view class="step_area_item flex-n fac">
				<view class="step_area_num" :class="step==0?'step_area_num_choose':''">1</view>
				<view class="step_area_text" :class="step==0?'step_area_text_choose':''">验证手机号码</view>
			</view>
			<view class="line flex-1 mlr-20"></view>
			<view class="step_area_item flex-n fac">
				<view class="step_area_num" :class="step==1?'step_area_num_choose':''">2</view>
				<view class="step_area_text" :class="step==1?'step_area_text_choose':''">设置新密码</view>
			</view>
		</z-card>
		<template v-if="step==0">
			<z-card class="mt-40">
				<view class="mlr-40 card_area">
					<view class="flex-n fac card_area_item">
						<view class="card_icon iconfont iconyuanjiaojuxing2"></view>
						<z-input class="ml-19" type="number" align="left" placeholder="请输入手机号码" v-model="phone"></z-input>
					</view>
					<view class="line"></view>
					<view class="flex-n fac card_area_item">
						<view class="card_icon iconfont iconjuxing11" style="font-size: 30rpx;"></view>
						<z-input class="ml-19 flex-1"  align="left" placeholder="请输入短信验证码" v-model="code"></z-input>

						<view class="card_send_message" v-if="sendCodeState!=2" type="primary" @click="sendCode(phone)">{{sendCodeState=='0'?'发送验证码':'重新获取'}}
						</view>
						<view class="card_send_message" v-else disabled type="primary">{{countdown}}s</view>
					</view>
				</view>
			</z-card>
			<z-button class="mt-50" @click="nextStep">下一步</z-button>
		</template>
		<template v-else>
			<z-card class="mt-40">
				<view class="mlr-40 card_area">
					<view class="flex-n fac card_area_item">
						<view class="card_icon iconfont iconsuotou"></view>
						<z-input class="ml-19 flex-1" type="password" placeholder="请设置6-20位新的登录密码" v-model="password"></z-input>
					</view>
					<view class="line"></view>
					<view class="flex-n fac card_area_item">
						<view class="card_icon iconfont iconsuotou"></view>
						<z-input class="ml-19 flex-1" type="password" placeholder="请再次输入新的登录密码"  v-model="repeatpassword"></z-input>
					</view>
				</view>

			</z-card>
			<z-button class="mt-50" @click="submit">提 交</z-button>
		</template>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//入参
				phone: '',
				code:'',
				
				id:'',
				password:'',
				repeatpassword:'',
				
				step: 0,//下一步
				sendCodeState: 0,//发送验证码 0 重新发送 1 倒计时2
				countdown: 60,//倒计时
				cleartime: '',//清除定时器
			}
		},
		mounted() {

		},
		watch:{
			countdown(newval, oldval) {
			                if (newval == 0) {
			                    clearInterval(this.cleartime);
			                    this.countdown = 60;
			                    this.sendCodeState = 1;
			                }
			            },
		},
		methods: {
			//发送验证码
			sendCode(phone) {
				this.$axios.post('sms/sendSms', {
					"phone": phone,
					"type": "SEND_CODE"
				}).then(res => {
					this.$refs.uToast.success('验证码发送成功');
					this.sendCodeState = 2;
					this.cleartime = setInterval(() => {
						this.countdown--;
					}, 1000)
				}).catch(err => {
					this.$refs.uToast.error(err.msg);
				})
			},
			//下一步
			nextStep() {
				this.$axios.post('sms/validCodeRetUserId', {
					"phone": this.phone,
					"code": this.code
				}).then(res => {
					this.id=res.data.userId;
					this.step = 1;
					this.countdown = 0;//清除倒计时
				}).catch(err => {
					this.$refs.uToast.error(err.msg);
				})
			},
			submit(){
				if(this.password==''||this.password.length<6||this.password.length>20){
					return this.$refs.uToast.error('请输入6-20位新的登录密码');
				}
				if(this.repeatpassword==''){
					return this.$refs.uToast.error('请再次输入新的登录密码');
				}
				if(this.password!=this.repeatpassword){
					return this.$refs.uToast.error('两次输入的登录密码不同');
				}
				this.$axios.post('app/appUser/resetPassword', {
					"id": this.id,
					"passWord": this.password
				}).then(res => {
					// this.$refs.uToast.success('密码修改成功,请在登录页重新登录');
					uni.showToast({
					  title:'密码修改成功,请在登录页重新登录',
					  icon: 'none',
					  duration: 2000
					})
					uni.reLaunch({
					    url: '../../login/newlogin'
					});
					
				}).catch(err => {
					this.$refs.uToast.error(err.msg);
				})
			}
		},
		beforeDestroy() {
			clearTimeout(this.cleartime);
		}
	}
</script>

<style lang="scss" scoped>
	.step_area {
		padding: 24rpx 30rpx;

		.step_area_item {

			.step_area_num {
				width: 54rpx;
				height: 54rpx;
				border: 1px solid #999999;
				border-radius: 50%;
				text-align: center;
				line-height: 54rpx;
				color: #999999;
				font-size: 30rpx;
			}

			.step_area_num_choose {
				background: #2481EE;
				color: white;
				border: 1px solid #2481EE;
			}

			.step_area_text_choose {
				color: #2481EE !important;
			}

			.step_area_text {
				color: #999999;
				font-size: 30rpx;
				margin-left: 25rpx;
			}
		}
	}

	.card_area {
		.card_area_item {
			height: 100rpx;
		}

		.card_icon {
			font-size: 40rpx;
			min-width: 40rpx;
			color: gray;
		}

		.card_send_message {
			font-size: 28rpx;
			color: #2481EE;
		}
	}
</style>