sct/pagesT/money/PayPassword.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">
				<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>
		<u-keyboard
			default=""
			ref="uKeyboard"
			mode="number"
			:mask="false"
			:mask-close-able="false"
			:dot-enabled="false"
			v-model="show"
			:safe-area-inset-bottom="true"
			:tooltip="false"
			@change="onChange"
			@backspace="onBackspace"
		></u-keyboard>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: true,
			password: ''
		};
	},
	onLoad() {},
	methods: {
		backPage() {
			uni.navigateBack();
		},
		//按键被点击(不包含退格键被点击)
		onChange(val) {
			if (this.password.length < 6) {
				this.password += val;
			}

			if (this.password.length >= 6) {
				this.pay();
			}
		},
		//键盘退格键被点击
		onBackspace(e) {
			if (this.password.length > 0) {
				this.password = this.password.substring(0, this.password.length - 1);
			}
		},
		pay() {
			this.goPage('/pagesT/money/PayPasswordAgin?password=' + this.password, 'redirectTo');
		},
		showPop(flag = true) {
			this.password = '';
			this.show = flag;
		},
		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;
	}
}
.back-icon {
	position: fixed;
	top: 100rpx;
	left: 40rpx;
	z-index: 999999;
}
</style>