cashier_weapp/components/payPasswordtwo.vue

119 lines
2.5 KiB
Vue

<template>
<view class="content">
<view style="margin-bottom: 128rpx;">
<view class="contenttext flex-center">
<text></text>
<text>{{payAmount}}</text>
</view>
<view class="contentbox flex-between">
<view class="contentboxitem flex-colum">
<text v-show="consumeFee.length >= 1">●</text>
</view>
<view class="contentboxitem flex-colum">
<text v-show="consumeFee.length >= 2">●</text>
</view>
<view class="contentboxitem flex-colum">
<text v-show="consumeFee.length >= 3">●</text>
</view>
<view class="contentboxitem flex-colum">
<text v-show="consumeFee.length >= 4">●</text>
</view>
<view class="contentboxitem flex-colum">
<text v-show="consumeFee.length >= 5">●</text>
</view>
<view class="contentboxitem flex-colum">
<text v-show="consumeFee.length >= 6">●</text>
</view>
</view>
</view>
<cwx-keyboard ref="keyboard" :pos="'inherit'" @confirmEvent="confirmEvent"
:money.sync="consumeFee"></cwx-keyboard>
</view>
</template>
<script>
import cwxKeyboard from '@/components/cwx-keyboard/cwx-keyboard';
export default {
components: {
cwxKeyboard
},
props: {
payAmount: {
default: 0,
type: Number
},
},
data() {
return {
isPwd: uni.cache.get('userInfo').isPwd,
consumeFee: '', //第一遍
money: ''
};
},
onLoad() {
console.log(uni.cache.get('userInfo').isPwd)
},
watch: {
consumeFee(newVal, oldVal) {
}
},
methods: {
confirmEvent(val) {
// uni.showModal({
// title: '温馨提示',
// content: '输入密码是 = ' + JSON.stringify(this.passwordArr)
// })
// 判断是否等于6
if (val.length === 6) {
this.$emit('accountPayevent', val)
this.money = "";
}
this.$forceUpdate();
},
}
};
</script>
<style lang="scss">
.content {
height: 100%;
background: #FFFFFF;
.contenttext {
padding: 48rpx 0;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 40rpx;
color: #333333;
text:nth-child(1){
font-weight: bold;
font-size: 48rpx;
color: #333333;
}
text:nth-child(2){
font-weight: bold;
font-size: 60rpx;
color: #333333;
}
}
.contentbox {
margin-top: 48rpx;
padding: 0 56rpx;
.contentboxitem {
width: 88rpx;
height: 88rpx;
background: #FFFFFF;
border-radius: 8rpx 8rpx 8rpx 8rpx;
border: 2rpx solid #999999;
}
}
}
</style>