xusfood_client/center/setPaypass.vue

<template>
	<view class="page-wrap">
		<view class="step-reset" v-if="step=='reset'">
			<view class="title">请输入原始密码</view>
			<u-code-input v-model="paypass0" 
				:space="codeInput.space" 
				:size="codeInput.size" 
				@finish="finish0" 
				:maxlength="codeInput.maxlength" 
				:adjustPosition="codeInput.adjustPosition"
				:dot="codeInput.dot"
				:focus="true"
				:disabled-keyboard="codeInput.disabledKeyboard" >
			</u-code-input>
			<view class="tip">建议密码不重复，不连续，不同于登录密码</view>
		</view>
		<view class="step-1" v-if="step==1">
			<view class="title">设置6位数数字支付密码</view>
			<u-code-input v-model="paypass1" 
				:space="codeInput.space" 
				:size="codeInput.size" 
				@finish="finish1" 
				:maxlength="codeInput.maxlength" 
				:adjustPosition="codeInput.adjustPosition"
				:dot="codeInput.dot"
				:focus="true"
				: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" 
				:space="codeInput.space"
				:size="codeInput.size" 
				@finish="finish2" 
				:maxlength="codeInput.maxlength" 
				:adjustPosition="codeInput.adjustPosition"
				:dot="codeInput.dot"
				:focus="true"
				:disabled-keyboard="codeInput.disabledKeyboard" >
			</u-code-input>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fromPage:'',
				step:1,
				paypass0:'',
				paypass1:'',
				paypass2:'',
				codeInput:{
					space:0,
					size:45,
					maxlength:6,
					adjustPosition:false,
					dot:true,
					disabledKeyboard:false
				}
			}
		},
		onShow() {	
		},
		onLoad(page) {
			if(page.fromPage=='reset'){
				this.step = 'reset'
			}
		},
		methods: {
			finish0(){
				this.$u.api.checkPayPassword({payPassword:this.paypass0}).then(res=>{
					console.log('res',res.data);
					if(res.data==1){//密码正确
						this.step = 1
					}else{
						this.paypass0 = ''
					}
					
				}).catch(err=>{
					if(err.msg=='密码错误!'){
						this.paypass0 = '';
					}
					console.log('checkPayPassword',err);
				})
			},
			finish1(){
				this.step = 2;
				console.log('paypass',this.paypass1);
			},
			finish2(){
				console.log('paypass1',this.paypass1);
				console.log('paypass2',this.paypass2);
				let that = this;
				if(this.paypass1==this.paypass2){
					console.log('两次密码一样');
					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() {
							uni.reLaunch({url: '/center/center'});
						}
					})
					console.log('res',res.data);
				}).catch(err=>{
					console.log('setPaypass',err);
				})
			}
		}
	}
</script>

<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;
}
</style>