<template>
|
<view class="box">
|
<view class="u-text-right u-font-30 color-666 u-p-h-20 u-p-t-10" @click="close">关闭</view>
|
<view class="u-p-10 u-flex u-row-between">
|
<view class="u-flex u-flex-wrap">
|
<view v-for="(num,index) in numList" :key="index" class="num-item" hover-class="num-hover" @click="inputStr(num)">{{num}}</view>
|
</view>
|
<view class="flex-1 u-flex-col">
|
<view hover-class="num-hover" class="del-item u-flex u-row-center" @click="delStr">
|
<image src="@/static/del-icon.png" class="del-btn"></image>
|
</view>
|
<view hover-class="num-hover" class="flex-1 pay-btn u-font-30 color-fff font-bold" @click="pay">付款</view>
|
</view>
|
</view>
|
</view>
|
|
</template>
|
|
<script>
|
export default {
|
props: {
|
num: {
|
type: String,
|
default: ''
|
}
|
},
|
watch: {
|
num(val) {
|
this.emitNum = val
|
}
|
},
|
data() {
|
return {
|
emitNum: '',
|
numList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.']
|
}
|
},
|
methods: {
|
// 输入框
|
inputStr(num) {
|
var dotinx = this.emitNum.indexOf('.');
|
if (dotinx != -1) {
|
if (num == '.') {
|
// 小数点不能重复添加
|
return;
|
}
|
if (dotinx == this.emitNum.length - 3) {
|
//小数点后面最多两位
|
return;
|
}
|
if (this.emitNum == '0.0' && num == '0') {
|
//小数点后面最多两位
|
return;
|
}
|
} else if (num == '0' && this.emitNum == '0') {
|
// 首位的0最多1个
|
return;
|
} else {
|
if (num != '.' && this.emitNum.length > 7) {
|
//整数不能超过10位
|
return;
|
}
|
}
|
if (this.emitNum == '' && num == '.') {
|
this.emitNum = '0.';
|
} else if (this.emitNum == '0' && num != '.') {
|
this.emitNum = num;
|
} else {
|
this.emitNum += num;
|
}
|
this.$emit('changeMoney', this.emitNum)
|
},
|
// 删除
|
delStr() {
|
this.emitNum = this.emitNum.slice(0, -1)
|
this.$emit('changeMoney', this.emitNum)
|
},
|
// 支付
|
pay() {
|
this.$emit('pay')
|
},
|
// 关闭输入框
|
close() {
|
this.$emit('close')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.box {
|
background-color: #F5F5F5;
|
transition: all 0.3s;
|
padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
|
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
|
}
|
|
.show-box {
|
bottom: 0rpx;
|
}
|
|
.bord-box {
|
}
|
|
.num-item {
|
width: 175rpx;
|
height: 90rpx;
|
line-height: 90rpx;
|
color: #333333;
|
font-size: 36rpx;
|
font-weight: bold;
|
text-align: center;
|
margin: 0 10rpx 10rpx 0;
|
background-color: #FFFFFF;
|
}
|
|
.num-hover {
|
opacity: 0.7;
|
}
|
|
.num-item:nth-child(10n) {
|
width: 356rpx;
|
}
|
|
.h-100 {
|
height: 100%;
|
}
|
|
.pay-btn {
|
background-color: #D45159;
|
border-radius: 16rpx;
|
text-align: center;
|
height: 290rpx;
|
line-height: 290rpx;
|
vertical-align: middle;
|
color: white;
|
margin-bottom: 10rpx;
|
}
|
|
.del-item {
|
width: 175rpx;
|
height: 90rpx;
|
margin-bottom: 10rpx;
|
background-color: #FFFFFF;
|
}
|
|
.del-btn {
|
width: 40rpx;
|
height: 40rpx;
|
}
|
</style>
|
