描述:uni-app + uview 实现自定义交易密码弹框
// EnterTradePwd/index.vue
<template>
<u-popup
:show="show"
:round="20"
class="key_main"
>
<view class="main_title">
<u-icon
class="title_icon"
name="close"
bold
@click="hideFun"
/>
<text>请输入交易密码</text>
<view
class="title_forget"
@tap="forgetFun"
>
忘记密码
</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">
密码错误,还可输入{{ count }}次
</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/images/base/boardDel.png"
mode="aspectFill"
/>
</view>
</view>
</u-popup>
</template>
<script>
export default {
props: {
show: {
type: Boolean,
default: false
},
},
data () {
return {
pwdLen: 6, //输入密码的长度
numberLen: 9, //密码键盘的数字
password: '', //密码
count: 6
};
},
computed: {},
methods: {
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.showToast({
title: '忘记密码操作',
icon: 'none',
});
},
hideFun () {
this.$emit('update:show', false);
},
async handleSubmit () {
this.$emit('getPassword', { password: this.password });
}
},
};
</script>
<style lang="scss">
.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>
<!-- 使用 -->
<EnterTradePwd :show.sync="show" />
data () {
return{
show: false
};
},