great_group/center/setPaypass.vue

<template>
	<view class="page-wrap">
		<u-navbar
			v-if="fromPage=='reset'"
			:placeholder="true"
			title="密码设置"
			:autoBack="true"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
		<view class="step-reset"  v-if="step=='reset'&&noPaypass==false">
			<view class="title">请输入当前密码，以身份认证</view>
			<u-code-input v-model="paypass0" 
				ref="paypass0"
				:space="codeInput.space" 
				:size="codeInput.size" 
				@finish="finish0" 
				:maxlength="codeInput.maxlength" 
				:adjustPosition="codeInput.adjustPosition"
				:dot="codeInput.dot"
				:focus="paypass0Focus"
				:disabled-keyboard="codeInput.disabledKeyboard" >
			</u-code-input>
			<view class="findpaypass" @click="$u.route('/center/findpaypass')">忘记密码？</view>
		</view>
		<view class="step-1"  v-if="step==1">
			<view class="title">设置6位数数字支付密码</view>
			<u-code-input v-model="paypass1" 
				ref="paypass1"
				:space="codeInput.space" 
				:size="codeInput.size" 
				@finish="finish1" 
				:maxlength="codeInput.maxlength" 
				:adjustPosition="codeInput.adjustPosition"
				:dot="codeInput.dot"
				:focus="paypass1Focus"
				:disabled-keyboard="codeInput.disabledKeyboard" >
			</u-code-input>
			<view class="tip">建议密码不重复，不连续，不同于登录密码</view>
		</view>
		<view class="step-2"  v-if="step==2">
			<view class="title">请在再次输入</view>
			<u-code-input v-model="paypass2" 
				ref="paypass2"
				:space="codeInput.space"
				:size="codeInput.size" 
				@finish="finish2" 
				:maxlength="codeInput.maxlength" 
				:adjustPosition="codeInput.adjustPosition"
				:dot="codeInput.dot"
				:focus="paypass2Focus"
				:disabled-keyboard="codeInput.disabledKeyboard" >
			</u-code-input>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noPaypass:true,
				fromPage:'',
				step:1,
				paypass0:'',
				paypass1:'',
				paypass2:'',
				paypass0Focus:false,
				paypass1Focus:false,
				paypass2Focus:false,
				codeInput:{
					space:10,
					size:45,
					maxlength:6,
					adjustPosition:false,
					dot:true,
					disabledKeyboard:false
				},
				code:'',
			}
		},
		onShow() {	
			this.checkPaypass()
		},
		onLoad(page) {
			this.fromPage = page.fromPage;
			this.code = page.code;
			if(this.fromPage == 'reset'){
				this.$nextTick(()=>{
					this.paypass0Focus = true;
				})
			}else{
				this.$nextTick(()=>{
					this.paypass1Focus = true;
				})
			}
		},
		methods: {
			checkPaypass(){
				this.$u.api.balanceInfo().then(res=>{
					// console.log('res',res.data);
					if(res.data.isSetPayPassword==0){
						this.noPaypass = true
					}else{
						this.noPaypass = false;
						this.step = 1;
						if(this.fromPage=='reset'){
							this.step = 'reset'
						}
						if(this.fromPage=='reset'){
							this.step = 'reset'
						}
					}
					console.log('this.noPaypass',this.noPaypass);
				}).catch(err=>{
					console.log('checkPaypass',err);
				})
			},
			finish0(){
				this.$u.api.checkPayPassword({payPassword:this.paypass0}).then(res=>{
					console.log('res',res.data);
					if(res.msg=='操作成功'){//密码正确
						this.step = 1;
						this.$nextTick(()=>{
							this.paypass1Focus = true;
						})
					}else{
						this.paypass0 = ''
					}
					
				}).catch(err=>{
					if(err.msg=='密码错误!'){
						this.paypass0 = '';
					}
					console.log('checkPayPassword',err);
				})
			},
			finish1(){
				this.step = 2;
				this.$nextTick(()=>{
					this.paypass2Focus = true;
					console.log('this.paypass2Focus',this.paypass2Focus);
				})
				console.log('paypass',this.paypass1);
				console.log('paypass2',this.paypass2);
			},
			finish2(){
				console.log('paypass1',this.paypass1);
				console.log('paypass2',this.paypass2);
				let that = this;
				if(this.paypass1==this.paypass2){
					console.log('两次密码一样');
					if(this.fromPage == 'forget'){
						this.updatePayPassword();
						// this.resetPayPassword();
					}else{
						this.updatePayPassword();
					}
				}else{
					uni.showModal({
						showCancel:false,
					    title: '提示',
					    content: '两次密码不一样！',
					    success: res => {
							if (res.confirm) {
								that.paypass1 = '';
								that.paypass2 = '';
								that.step = 1;
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
					    }
					});
				}
			},
			updatePayPassword(){
				this.$u.api.updatePayPassword({payPassword:this.paypass2}).then(res=>{
					uni.showToast({
						title:res.msg,
						icon:'success',
						complete() {
							setTimeout(()=>{
								uni.reLaunch({url: '/center/center'});
							},2000)
						}
					})
					console.log('res',res.data);
				}).catch(err=>{
					console.log('setPaypass',err);
				})
			},
			resetPayPassword(){
				let params = {
					payPassword:this.paypass2,
					code:this.code,
					mobile:this.vuex_member_info.mobile
				}
				this.$u.api.resetPayPassword(params).then(res=>{
					uni.showToast({
						title:res.msg,
						icon:'success',
						complete() {
							setTimeout(()=>{
								uni.reLaunch({url: '/center/center'});
							},2000)
						}
					})
					console.log('res',res.data);
				}).catch(err=>{
					setTimeout(()=>{
						uni.reLaunch({url: '/center/findpaypass'});
					},2000)
					console.log('setPaypass',err);
				})
			}
		}
	}
</script>
<style>
page{
	padding-top: 100rpx;
}
</style>
<style lang="scss" scoped>
.page-wrap{
	text-align: center;
	/deep/ .u-code-input__item{
		flex-grow: 1!important;
	}
}
.title{
	font-size: 40rpx;
	font-weight: 600;
	margin-bottom: 40rpx;
}

.tip{
	margin: 24rpx auto 40rpx;
	color: #999;
}
.findpaypass{
	text-align: right;
	margin-top: 40rpx;
	color: #999;
	font-size: 24rpx;
}
</style>