ec.uniapp-master/pages/user/my/setPassword.vue

<template>
	<view>
		<lf-nav :title="title" :showIcon="true"></lf-nav>
		<view class="content">
			<view class="list">
				<view class="lf-flex">
					<input class="input" placeholder="请输入手机号" v-model="phone" maxlength="11" />
				</view>
				<view class="clear" v-if="phone.length" @click="phone = ''">
					<text class="lf-iconfont icon--"></text>
				</view>
			</view>
			<view class="list">
				<view class="lf-flex">
					<input class="input input-code" placeholder="请输入验证码" maxlength="8" v-model="code" />
				</view>
				<view class="code" :class="{'active-bg': is_code}" @click="getCode">
					<text>{{ is_code ? num +'秒后重新获取' : '获取验证码' }}</text>
				</view>
			</view>
		</view>
		<button class="next-btn" hover-class="lf-opacity" @click="next">下一步</button>
		<lf-pay-password v-if="show_pay" @comfirm="payComfirm" title="请设置6位支付密码"></lf-pay-password>
		<lf-pay-password v-else-if="show_again_pay" @comfirm="againPayComfirm" title="请再次输入密码"></lf-pay-password>
	</view>
</template>

<script>
	import lfPayPassword from '@/components/lf-payPassword/lf-payPassword.vue'
	export default {
		components: {
			lfPayPassword
		},
		data(){
			return {
				phone: '',
				code: '',
				is_code: false,
				timer: null,
				num: 60,
				show_pay: false,
				show_again_pay: false,
				token: '',
				title: '验证手机号',
				password: ''
			}
		},
		onLoad(){
			var token = this.$cookieStorage.get('user_token');
			this.token = token;
		},
		onUnload(){
			if(this.timer){
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		methods: {
			getCode(){
				let phone = this.phone;
				if(!phone) return this.$msg('请输入手机号');
				if(!this.$check(phone, 'mobile')) return this.$msg('请输入正确的手机号');
				if(this.is_code) return;
				this.is_code = true;
				if(this.timer){
					clearInterval(this.timer);
					this.timer = null;
				}
				this.getVerifyCode();
				this.timer = setInterval(() => {
					this.num--;
					if(this.num <= 0){
						clearInterval(this.timer);
						this.timer = null;
						this.num = 60;
						this.is_code = false;
					}
				}, 1000);
			},
			getVerifyCode(){
				this.$http.post({
					api: 'api/sms/verify-code',
					data: {
						mobile: this.phone
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						Authorization: this.token
					}
				}).then(res => {
					if(res.data.success){
						this.$msg(res.data.message, {icon: 'success'});
					}else{
						this.$msg(res.data.message);
						if(this.timer){
							clearInterval(this.timer);
							this.timer = null;
							this.num = 60;
							this.is_code = false;
						}
					}
				})
			},
			// 下一步
			next(){
				let phone = this.phone;
				if(!phone) return this.$msg('请输入手机号');
				if(!this.$check(phone, 'mobile')) return this.$msg('请输入正确的手机号');
				if(!this.code) return this.$msg('请输入验证码');
				
				this.$http.post({
					api: 'api/user/check_old_mobile',
					data: {
						code: this.code,
						mobile: this.phone
					},
					header: {
						Authorization: this.token
					}
				}).then(res => {
					if(res.data.code == 200){
						this.title = '设置密码';
						this.show_pay = true;
					}else{
						this.$msg(res.data.message);
					}
				})
			},
			// 输入支付密码
			payComfirm(event){
				this.show_pay = false;
				this.show_again_pay = true;
				this.password = event;
			},
			// 再次输入密码
			againPayComfirm(event){
				if(this.password == event){
					this.$http.post({
						api: 'api/user/update_pay_pwd',
						data: {
							code: this.code,
							pay_pwd: event
						},
						header: {
							Authorization: this.token
						}
					}).then(res => {
						if(res.data.code == 200){
							this.$msg('设置成功', {icon: 'success'}).then(() => {
								this.$toBack();
							})
						}else{
							this.$msg(res.data.message);
						}
					})
				}else{
					this.$msg('两次密码不同', {icon: 'error'});
					this.phone = '';
					this.code = '';
					this.show_again_pay = false;
					this.title = '验证手机号';
				}
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.content{
		padding: 0 32rpx;
	}
	.next-btn{
		width: 550rpx;
		height: 100rpx;
		background: #15716E;
		border-radius: 50rpx;
		position: fixed;
		bottom: 10vh;
		left: calc(50% - 275rpx);
		line-height: 100rpx;
		color: #FFFFFF;
	}
	.list{
		height: 106rpx;
		width: 100%;
		border-bottom: 1rpx solid #e5e5e5;
		display: flex;
		justify-content: space-between;
		align-items: center;
		&:nth-child(2n){
			margin-top: 30rpx;
		}
		.input{
			width: 540rpx;
			height: 80rpx;
			font-size: 32rpx;
		}
		.input-code{
			width: 430rpx;
		}
		.clear{
			padding: 20rpx;
		}
		.code{
			min-width: 180rpx;
			max-width: 220rpx;
			height: 64rpx;
			padding: 0 4rpx;
			font-size: 24rpx;
			color: #15716E;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 32rpx;
			border: 2rpx solid #15716E;
		}
		.active-bg{
			background: #efefef;
		}
	}
</style>