You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
1.2 KiB
54 lines
1.2 KiB
<template>
|
|
<keyboard confirmText="付款" ref="keyboard" @change="change" @confirm="confirm" @hide="hide">
|
|
<view class="payment-box">
|
|
<view class="payment-box-title position-relative flex align-center justify-center">
|
|
<view class="position-absolute payment-box-title-icon">
|
|
<u-icon name="close" color="#000" size="28"></u-icon>
|
|
</view>
|
|
<text class="font-32 text-black">输入支付密码</text>
|
|
</view>
|
|
<u-message-input dot-fill @change="handleChange" :maxlength="6" active-color="#01AEEA" />
|
|
</view>
|
|
</keyboard>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
change(e) {
|
|
this.value = e;
|
|
console.log('数字改变', e);
|
|
},
|
|
open() {
|
|
console.log('打开键盘');
|
|
this.$refs.keyboard.open();
|
|
},
|
|
confirm(e) {
|
|
console.log('付款', e);
|
|
},
|
|
hide() {
|
|
console.log('关闭键盘');
|
|
},
|
|
handleChange (val) {
|
|
console.log(val)
|
|
this.$emit('change', val)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.payment-box {
|
|
margin-bottom: 60rpx;
|
|
&-title {
|
|
height: 100rpx;
|
|
border-bottom: 2rpx solid #d7d7d7;
|
|
margin-bottom: 60rpx;
|
|
&-icon {
|
|
top: 50%;
|
|
left: 40rpx;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
}
|
|
</style>
|