<template>
|
<view>
|
<view class="u-text-right u-font-30 color-666 u-p-20" @click="close">关闭</view>
|
<view class="bord-box 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="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="['pay-btn', 'u-font-30', 'color-fff', 'font-bold',{'disa-btn':Number(emitNum||'0')===0}]" @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 (this.emitNum == '0.0' && num == '0') {
|
//小数点后面不能是两个0
|
return;
|
}
|
if (dotinx == this.emitNum.length - 3) {
|
//小数点后面最多两位
|
return;
|
}
|
} else if (num == '0' && this.emitNum == '0') {
|
// 首位的0最多1个
|
return;
|
} else {
|
if (num != '.' && this.emitNum.length > 7) {
|
//整数不能超过10位
|
return;
|
}
|
}
|
if (num == '.' && this.emitNum == '') {
|
this.emitNum = '0.';
|
} else if (num != '.' && this.emitNum == '0') {
|
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() {
|
if(Number(this.emitNum||'0')===0) return
|
this.$emit('pay')
|
},
|
// 关闭输入框
|
close() {
|
this.$emit('close')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.bord-box {
|
background-color: #F5F5F5;
|
display: flex;
|
padding: 10rpx 10rpx 0;
|
font-size: 0;
|
}
|
|
.num-item {
|
width: 175rpx;
|
height: 80rpx;
|
line-height: 80rpx;
|
color: #333333;
|
font-size: 32rpx;
|
font-weight: bold;
|
text-align: center;
|
margin: 0 10rpx 10rpx 0;
|
background-color: #FFFFFF;
|
border-radius: 8rpx;
|
}
|
|
.num-hover {
|
opacity: 0.7;
|
}
|
|
.num-item:nth-child(10n) {
|
width: 356rpx;
|
}
|
|
.pay-btn {
|
width: 175rpx;
|
flex: 1;
|
background-color: #D45159;
|
border-radius: 8rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-bottom: 10rpx;
|
}
|
.disa-btn{
|
opacity: 0.7;
|
}
|
|
.del-item {
|
width: 175rpx;
|
height: 80rpx;
|
border-radius: 8rpx;
|
margin-bottom: 10rpx;
|
background-color: #FFFFFF;
|
}
|
|
.del-btn {
|
width: 40rpx;
|
height: 40rpx;
|
}
|
</style>
|
