sct/pagesT/money/PayPasswordAgin.vue

<template>
	<view :class="['qn-page-' + theme]">
		<view class="back-icon" @click="backPage"><u-icon name="close" size="32"></u-icon></view>
		<view>
			<view class="top-view">
				<view class="title">设置支付密码</view>
				<view class="desc">请再次填写确认</view>
			</view>
			<view class="u-flex u-row-center" @click="openKey">
				<u-message-input :mask="false" mode="box" :maxlength="6" :dot-fill="true" v-model="password" :disabled-keyboard="true" @finish="finish"></u-message-input>
			</view>
			<view class="confirm-btn primary-btn" @click="confirm">完成</view>
		</view>
		<u-keyboard
			default=""
			ref="uKeyboard"
			mode="number"
			:mask="false"
			:mask-close-able="false"
			:dot-enabled="false"
			v-model="keyboard_show"
			:safe-area-inset-bottom="true"
			:tooltip="false"
			@change="onChange"
			@backspace="onBackspace"
		></u-keyboard>
		<u-modal
			v-model="model_show"
			:show-cancel-button="true"
			content="是否要放弃设置支付密码？"
			cancel-text="否"
			confirm-text="是"
			:confirm-color="primaryColor"
			@confirm="modelConfirm"
		></u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			model_show: false,
			keyboard_show: true,
			password: '',
			agin_pwd: ''
		};
	},
	computed: {
		userInfo() {
			return this.$store.state.userStatus;
		}
	},
	onLoad(options) {
		this.agin_pwd = options.password;
	},
	methods: {
		backPage() {
			this.model_show = true;
		},
		openKey() {
			this.keyboard_show = true;
		},
		//按键被点击(不包含退格键被点击)
		onChange(val) {
			if (this.password.length < 6) {
				this.password += val;
			}
			if (this.password.length >= 6) {
				if (this.agin_pwd !== this.password) {
					this.password = '';
					this.$u.toast('两次密码输入不一致');
				} else {
					this.keyboard_show = false;
				}
			}
		},
		//键盘退格键被点击
		onBackspace(e) {
			if (this.password.length > 0) {
				this.password = this.password.substring(0, this.password.length - 1);
			}
		},
		modelConfirm() {
			uni.navigateBack();
		},
		confirm() {
			if (!this.userInfo.payPassword) {
				this.$u.api
					.addpayPassword({
						id: this.userInfo.id,
						payPassword: this.password
					})
					.then(res => {
						this.$u.toast('设置成功');
						this.$store.commit('commit_userStatus', {
							...this.userInfo,
							payPassword: this.password
						});
						setTimeout(res => {
							uni.navigateBack();
						}, 2000);
					});
			} else {
				this.$u.api
					.updatePayPassword({
						id: this.userInfo.id,
						payPassword: this.password
					})
					.then(res => {
						this.$u.toast('修改成功');
						this.$store.commit('commit_userStatus', {
							...this.userInfo,
							payPassword: this.password
						});
						setTimeout(res => {
							uni.navigateBack();
						}, 2000);
					});
			}
		},
		finish() {
			console.log(11111);
		}
	}
};
</script>
<style>
page {
	background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
.top-view {
	text-align: center;
	padding-top: 300rpx;
	.title {
		font-size: 32rpx;
		font-weight: bold;
		padding-bottom: 30rpx;
	}
	.desc {
		padding-bottom: 100rpx;
	}
}
.confirm-btn {
	width: 680rpx;
	margin: 40rpx auto;
	color: #ffffff;
	background-color: $uni-color-primary;
	line-height: 80rpx;
	height: 80rpx;
	text-align: center;
	border-radius: 12rpx;
	position: relative;
	z-index: 10070;
}
.back-icon {
	position: fixed;
	top: 100rpx;
	left: 40rpx;
	z-index: 999999;
}
</style>