ltred/pages/login/modifypass.vue

<template>
	<view class="container">
		<view class="top">
		</view>
		<view class="center">
			<view class="login_input">
				<image class="img" src="https://zhxc2030.com/img/img08.png"></image>
				<input class="input"  v-model="account" focus placeholder="请输入手机号" />
			</view>
			<view class="login_input">
				<image class="img" src="https://zhxc2030.com/img/img67.png"></image>
				<input class="input"   type="password" v-model="password" placeholder="请输入新密码"  />
			</view>
			<view class="login_input">
				<image class="img" src="https://zhxc2030.com/img/img67.png"></image>
				<input class="input"   type="password" v-model="password2" placeholder="请重复输入新密码"  />
			</view>
			<view class="login_input">
				<image class="img" src="../../static/icon/i9.png"></image>
				<input class="input"   type="password" v-model="captcha" placeholder="请输入验证码"  />
				<text class="yzm"  @click="verification">{{ countDown == 0 ? '验证码' : countDown }}</text>
			</view>
			<!-- 按钮 -->
			<view class="login_buttom" :class="{'bg-gray':loding}" @click="loding?'':confirm()">
				修改密码
			</view>
		</view>
	</view>
</template>

<script>
import { verify } from '@/api/login.js';
import { mapState ,mapMutations} from 'vuex';
import { registerReset } from '@/api/set.js';
export default {
	data() {
		return {
			password: '' ,//新密码
			password2:'',//重复新密码
			time: '', //保存倒计时对象
			countDown: 0, //倒计时
			account: '', //手机号
			captcha: '', //验证码
			loding:false,//是否载入中
			// #ifdef APP-PLUS
			// 保存当前是否为微信浏览器
			weixinB:false,
			// #endif
		};
	},
	computed: {
		...mapState('user',['userInfo'])
	},
	watch: {
		// 监听倒计时
		countDown(i) {
			if (i == 0) {
				clearInterval(this.time);
			}
		}
	},
	onLoad() {
		console.log(this)
		console.log(this.userInfo);
		if(this.userInfo.phone == null){
			this.account = '';
		}else{
			this.account = this.userInfo.phone;
		}
	},
	methods: {
	//发送验证码
	verification() {
		let obj = this;
		if (this.account == '') {
			this.$api.msg('请输入电话号码');
			return;
		}
		if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(this.account)) {
			this.$api.msg('请输入正确的手机号');
			return;
		}
		// 判断是否在倒计时
		if (obj.countDown > 0) {
			return false;
		} else {
			obj.countDown = 60;
			obj.time = setInterval(() => {
				obj.countDown--;
			}, 1000);
			//调用验证码接口
			verify({
				phone: obj.account,
				type: ''
			})
				.then(({ data }) => {})
				.catch(err => {
					console.log(err);
				});
		}
	},
	...mapMutations('user',['logout']),
	confirm(e) {
		this.loding = true;
		registerReset({
			account: this.account,
			captcha: this.captcha,
			password: this.password,
		})
			.then(({ data }) => {
				this.loding = false;
				this.$api.msg('修改成功');
				logout();
			})
			.catch(err => {
				this.loding = false;
				console.log(err);
			});
	}
	}
};
</script>

<style lang="scss">
	.bg-gray{
		background-color: $color-gray;
	}
	.yzm{
		font-size:23rpx;
		font-weight:500;
		color:rgba(249,39,63,1);
	}
	.container {
		line-height: 1;

		.top {
			width: 750rpx;
			height: 400rpx;
			position: relative;
      background-color: $base-color;
			image {
				width: 750rpx;
				height: 500rpx;
			}

		
		}

		.center {
			z-index: 9;
			width: 700rpx;
			height: 840rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			margin-top: -150rpx;
			margin-left: 24rpx;
			position: absolute;

			.login_input {
				width: 560rpx;
				display: flex;
				justify-content: center;
				margin: 70rpx auto;
				border-bottom: 2rpx solid #F0F0F0;
				padding-bottom: 9rpx;
				color: #999999;
				.img {
					width: 30rpx;
					height: auto;
					margin-right: 18rpx;
				}

				.input {
					// width: 470rpx;
					flex:1;
					font-size: $font-base;
					letter-spacing: 3rpx;
				}
			}

			.login_buttom {
				width: 560rpx;
				// height:80rpx;
			background:linear-gradient(0deg,rgba(70,126,192,1),rgba(87,155,236,1));
				border-radius: 40rpx;
				margin: 0 auto;
				margin-bottom: 20rpx;
				text-align: center;
				line-height: 80rpx;
				color: #FFFFFF;
				font-size: 30rpx;
			}

			.register_buttom {
				width: 560rpx;
				line-height: 80rpx;
				border: 1rpx solid $base-color;
				border-radius: 40rpx;
				text-align: center;
				margin: 0 auto;
				font-size: 30rpx;
				font-weight: 500;
				color: $base-color;
			}
		

		     
		
			 .login_wx_text{
				 text-align: center;
				 font-size:24rpx;
				 font-weight:400;
				 color:rgba(153,153,153,1);
				 margin-top: 15rpx;
			 }
		}
	}
</style>