MeiMeiZhuan/pages/set/password.vue

<template>
	<view class="container">
		<!-- <view class="row b-b">
			<text class="tit">手机号</text>
			<input class="input" v-model="account" type="text" placeholder="请填写手机号" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">验证码</text>
			<input class="input" v-model="captcha" type="text" placeholder="请填写验证码" placeholder-class="placeholder" />
			<view class="code" @click="verification">{{ countDown == 0 ? '验证码' : countDown }}</view>
		</view>
		<view class="row b-b">
			<text class="tit">新密码</text>
			<input class="input" v-model="password" type="password" placeholder="请填写新密码" placeholder-class="placeholder" />
		</view>
		<button class="add-btn" :class="{'bg-gray':loding}" @click="loding?'':confirm()">提交</button> -->
		<view class="container_text" ></view>
		<view class="top_bar" @click="fallback()">
			<view class="top_img">
				<image src="../../static/img/img03.png" ></image>
			</view>
			<view class="top_tit">修改密码</view>
		</view>
		<view class="login_text">
			<view class="login_input flex-upDown-center">
				<view class="login_img one"></view>
				<input class="input" v-model="account" type="number" maxlength="11" placeholder="请填写手机号" placeholder-class="placeholder" />
			</view>
			<view class="login_input flex-upDown-center">
				<view class="login_img two"></view>
				<input class="input" v-model="password" type="password" placeholder="请填写新密码" placeholder-class="placeholder" />
			</view>
			<view class="login_input flex-upDown-center">
				<view class="login_img two"></view>
				<input class="input" v-model="passwords" type="password" placeholder="请重复输入新密码" placeholder-class="placeholder" />
			</view>
			<view class="login_input flex-upDown-center ">
				<view class="flex-upDown-center">
					<view class="login_img three"></view>
					<input class="input" v-model="captcha" type="text" placeholder="请输入验证码" placeholder-class="placeholder" />
				</view>
				<view class="code" @click="verification">{{ countDown == 0 ? '验证码' : countDown }}</view>
			</view>
			<view><button class="uni-button" :class="{'bg-gray':loding}" @click="loding?'':confirm()">修改密码</button></view>
		</view>
	</view>
</template>

<script>
import { verify } from '@/api/login.js';
import { registerReset } from '@/api/set.js';
export default {
	data() {
		return {
			time: '', //保存倒计时对象
			countDown: 0, //倒计时
			account: '', //手机号
			captcha: '', //验证码
			password: '' ,//新密码
			passwords:'',
			loding:false,//是否载入中
		};
	},
	watch: {
		// 监听倒计时
		countDown(i) {
			if (i == 0) {
				clearInterval(this.time);
			}
		}
	},
	methods: {
		fallback() {
			console.log(1);
			uni.navigateTo({
				url:'/pages/set/set'
			});
		},
		//发送验证码
		verification() {
			let obj = this;
			if (this.account == '') {
				console.log(this.account);
				this.$api.msg('请输入电话号码');
				return;
			}
			if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(this.account)) {
				this.$api.msg('请输入正确的手机号');
				return;
			}
			if(this.password == ''){
				this.$api.msg('请输入新密码');
				return;
			}
			if(this.password != this.passwords){
				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: 'reset'
				})
					.then(({ data }) => {})
					.catch(err => {
						console.log(err);
					});
			}
		},
		confirm(e) {
			this.loding = true;
			registerReset({ 
				account: this.account,
				captcha: this.captcha,
				password: this.password,
			})
				.then(({ data }) => {
					this.loding = false;
					this.$api.msg('修改成功');
					setTimeout(() => {
					      uni.switchTab({
					       url: '/pages/user/user'
					      });
					     }, 1000);
				})
				.catch(err => {
					this.loding = true;
					console.log(err);
				});
		}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
}
.row {
	display: flex;
	align-items: center;
	position: relative;
	background: #fff;
	.tit {
		flex-shrink: 0;
		width: 120rpx;
		font-size: 30rpx;
		color: $font-color-dark;
	}
	.input {
		flex: 1;
		font-size: 30rpx;
		color: $font-color-dark;
	}
	.iconlocation {
		font-size: 36rpx;
		color: $font-color-light;
	}
}
.add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690rpx;
	height: 80rpx;
	margin: 60rpx auto;
	font-size: $font-lg;
	color: #fff;
	background-color: $base-color;
	border-radius: 10rpx;
	// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}

.bg-gray{
	background-color: $color-gray;
}

.login_text {
	position: absolute;
	top: -150rpx;
	margin:0  25rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 0rpx 60rpx 215rpx 90rpx;
	position:relative;
	z-index: 10;
	.login_input {
		padding-top: 65rpx;
		border-bottom: 1px solid #F0F0F0;
		padding-bottom: 10rpx;
		color: #999999;
		&:nth-child(4){
			justify-content: space-between;
		}
		.login_img{
			width:30rpx;
			height: 35rpx;
			margin-right: 20rpx;
		}
		.one{
			background: url(../../static/password/img01.png) no-repeat center;
			background-size: 30rpx 35rpx;
		}
		.two{
			background: url(../../static/password/img02.png) no-repeat center;
			background-size: 30rpx 35rpx;
		}
		.three{
			background: url(../../static/password/img03.png) no-repeat center;
			background-size: 30rpx 35rpx;
		}
		.input {
			width: 400rpx;
			font-size: 28rpx;
			letter-spacing: 3rpx;
			color: #999999;
			display: block;
		}
		.code {
			color: #FA2740;
			font-size: 23rpx;
		}
	}
	.uni-button {
		height: 80rpx;
		line-height: 80rpx;
		font-size:30rpx;
		color: #ffffff;
		background:linear-gradient(#FE5544, #FA2740);
		margin-top: 40rpx;
		border-radius:40rpx;
	}
}

.container_text {
	width: 100%;
	height: 500rpx;
	background:linear-gradient(#FE5544, #FA2740);
}
.top_bar{
	width: 750rpx;
	padding: 30rpx 30rpx;
	position: absolute;
	top: 0;
	.top_img{
		float: left;
		width: 5%;
		image{
			width: 21rpx;
			height: 36rpx
		}
	}
	.top_tit{
		float: left;
		font-size:36rpx;
		color:#ffffff;
		width:95%;
		text-align: center;
	}

}
</style>