fundHoldApp/components/keyboard/payPopup.vue

<template>
	<view class="">
		<u-popup :show="show" :round="20" class="key_main">
			<view class="main_title">
				<u-icon class="title_icon" name="close" bold @click="hideFun" />
				<text>{{this.$languageData.settings.enterTranPwd}}</text>
				<view class="title_forget" @tap="forgetFun">
					{{this.$languageData.settings.forgotPwd}}
				</view>
			</view>
			<view class="main_content">
				<view class="content_num">
					<view v-for="item in pwdLen" :key="item" class="content_item">
						{{ password[item - 1] ? '●' : '' }}
					</view>
				</view>
				<view class="error_text" v-if='errorMsg'>
					{{this.$languageData.settings.pwdNotMatch}} {{ count }} {{this.$languageData.settings.times}}
				</view>
			</view>
			<view class="main_keyboard">
				<view v-for="item in numberLen" :key="item" class="key_num" @tap="inputNumFun({ num: item })">
					{{ item }}
				</view>
				<view class="key_null" />
				<view class="key_0" @tap="inputNumFun({ num: 0 })">
					0
				</view>
				<view class="key_del" @tap="delNumFun">
					<image src="/static/deIimage/numberDel.png" mode="aspectFill" />
				</view>
			</view>
		</u-popup>
		
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="warn" :cancelText="this.$languageData.settings.cancel" :confirmText="this.$languageData.settings.goSetting" :title="this.$languageData.settings.tip" :content="this.$languageData.settings.pwdNOtSet" @confirm="dialogConfirm"
					@close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import { haveOrNotPayPwd } from '@/api/mine/payPwd.js'
	import { getToken } from '@/utils/auth'
	export default {
		props: {
			show: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				pwdLen: 6, //输入密码的长度
				numberLen: 9, //密码键盘的数字
				password: '', //密码
				count: 6,
				errorMsg: false
			};
		},
		computed: {},
		onLoad() {
			this.checkPayPassword();
		},
    
		created() {
			// this.checkPayPassword();
		},
		methods: {
			// 验证用户有无支付密码
			checkPayPassword(){
				// console.log("---------x-----------")
				haveOrNotPayPwd().then(res=>{
					if(res.data){//有密码
						// this.$refs.alertDialog.open()
					}else{//无密码
						this.$refs.alertDialog.open()
					}
				})
			},
			dialogConfirm(){
				uni.navigateTo({
					url: '/pages/mine/pwd/payPwd'
				})
			},
			dialogClose(){
				uni.switchTab({
					url: '/pages/home/index'
				})
			},
			inputNumFun(op) {
				if (this.password.length <= 6) {
					this.password += op.num;
					if (this.password.length !== this.pwdLen) return;
					this.handleSubmit();
				}
			},
			delNumFun() {
				if (this.password.length == 0) return;
				this.password = this.password.substring(
					0,
					this.password.length - 1
				);
			},
			forgetFun() {
				uni.navigateTo({
					url:'/pages/mine/security/index'
				})
				// uni.showToast({
				// 	title: '功能开发中',
				// 	icon: 'none',
				// });
			},
			//关闭
			hideFun() {
				this.password = '';
				this.$emit('update:show', false);
			},
			async handleSubmit() {
				this.$emit('getPassword', {
					password: this.password
				});
			},
			errorPwd() {
				this.errorMsg = true;
				this.count = this.count - 1;
				if (this.count < 1) {
					uni.showToast({
						title: this.$languageData.settings.overTimes,
						icon: "none",
					});
					this.show = false;
				} else {
					uni.showToast({
						title: this.$languageData.settings.passNotMatch,
						icon: "none",
					});
				}
				this.password = '';
			},
			clearPwd() {
				this.errorMsg = false;
				this.password = '';
			}
		},
	};
</script>

<style lang="scss" scoped>
	.key_main {
		.main_title {
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0px 40rpx;

			.title_icon,
			.title_forget {
				width: 120rpx;
			}

			text {
				text-align: center;
			}

			.title_forget {
				color: #000;
				font-size: 14px;
			}
		}

		.main_content {
			padding: 20rpx 100rpx;

			.content_num {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.content_item {
					width: 80rpx;
					height: 80rpx;
					background-color: #ccc;
					border-radius: 16rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.error_text {
				font-size: 24rpx;
				color: $u-error;
				text-align: center;
				margin-top: 20rpx;
			}
		}

		.main_keyboard {
			height: 500rpx;
			display: flex;
			flex-flow: wrap;

			.key_null,
			.key_del {
				background: #ededed;
			}

			image {
				width: 40rpx;
				height: 30rpx;
			}

			.key_num,
			.key_null,
			.key_del,
			.key_0 {
				width: 250rpx;
				height: 125rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.key_num {
				border-right: 2rpx solid #f1f4f4;
				border-bottom: 2rpx solid #f1f4f4;
				border-top: 2rpx solid #f1f4f4;

				&:nth-child(n + 4) {
					border-top: none;
				}

				&:nth-child(n + 7) {
					border-bottom: none;
				}
			}

			.key_0 {
				border-top: 2rpx solid #f1f4f4;
			}
		}
	}
</style>