133 lines
2.4 KiB
Vue
133 lines
2.4 KiB
Vue
<template>
|
|
<view class="password-input-modal" v-if="isShow">
|
|
<view class="modal-mask" @click="closeModal"></view>
|
|
<view class="modal-content">
|
|
<view class="title">请输入支付密码</view>
|
|
<view class="input-container">
|
|
<view v-for="(item, index) in 6" :key="index" class="input-box">
|
|
{{ password[index] ? '*' : '' }}
|
|
</view>
|
|
</view>
|
|
<view class="keyboard">
|
|
<view v-for="(num, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, '', 0, 'delete']" :key="index" class="key"
|
|
@click="handleKeyClick(num)">
|
|
{{ num === 'delete' ? '删除' : num }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
defineProps,
|
|
defineExpose,
|
|
defineEmits
|
|
} from 'vue';
|
|
|
|
// 接收父组件传递的显示状态
|
|
const props = defineProps({
|
|
isShow: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
|
|
// 定义向父组件发送事件
|
|
const emits = defineEmits(['inputComplete', 'close', 'closeModal']);
|
|
|
|
// 存储输入的密码
|
|
const password = ref('');
|
|
|
|
// 处理键盘点击事件
|
|
const handleKeyClick = (num) => {
|
|
if (num === 'delete') {
|
|
password.value = password.value.slice(0, -1);
|
|
} else if (password.value.length < 6) {
|
|
password.value += num;
|
|
}
|
|
if (password.value.length === 6) {
|
|
emits('inputComplete', password.value);
|
|
}
|
|
};
|
|
|
|
// 关闭模态框
|
|
const closeModal = () => {
|
|
emits('close');
|
|
password.value = '';
|
|
};
|
|
// 将方法暴露给父组件
|
|
defineExpose({
|
|
closeModal
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.password-input-modal {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: 999;
|
|
}
|
|
|
|
.modal-mask {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.modal-content {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #fff;
|
|
padding: 40rpx;
|
|
border-radius: 30rpx 30rpx 0 0;
|
|
}
|
|
|
|
.title {
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.input-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.input-box {
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
border: 1px solid #ccc;
|
|
margin: 0 10rpx;
|
|
text-align: center;
|
|
line-height: 90rpx;
|
|
font-size: 24rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.keyboard {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 10px;
|
|
}
|
|
|
|
.key {
|
|
text-align: center;
|
|
padding: 30rpx;
|
|
border: 1rpx solid #ccc;
|
|
font-size: 26rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
</style> |