312 lines
6.8 KiB
Vue
312 lines
6.8 KiB
Vue
<template>
|
||
<view class='keyboard' :style="{position: pos}" @click.stop='_handleKeyPress'>
|
||
<view class='key-row'>
|
||
<view class='key-cell cell_b' data-num='1'>1</view>
|
||
<view class='key-cell cell_b' data-num='2'>2</view>
|
||
<view class='key-cell cell_b' data-num='3'>3</view>
|
||
</view>
|
||
<view class='key-row'>
|
||
<view class='key-cell cell_b' data-num='4'>4</view>
|
||
<view class='key-cell cell_b' data-num='5'>5</view>
|
||
<view class='key-cell cell_b' data-num='6'>6</view>
|
||
</view>
|
||
<view class='key-row'>
|
||
<view class='key-cell cell_b' data-num='7'>7</view>
|
||
<view class='key-cell cell_b' data-num='8'>8</view>
|
||
<view class='key-cell cell_b' data-num='9'>9</view>
|
||
</view>
|
||
<view class='key-row'>
|
||
<view class='key-cell cell_b' data-num='.'></view>
|
||
<view class='key-cell cell_b' data-num='0'>0</view>
|
||
<view class='key-cell cell_b' data-num='D' style="background: #F9F9F9;" @touchstart="touchstart"
|
||
@touchend="touchend">
|
||
<image data-num='D' style="width: 47.49rpx; height: 25.59rpx;"
|
||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/user/x.png" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="key-zero-and-point">
|
||
<view class="a cell_b zero" data-num='0'>0</view>
|
||
<view class="a cell_b point" data-num='.'>.</view>
|
||
</view> -->
|
||
<!-- <view class='key-confirm' :style="{'background':btnColor}" data-num='S'>
|
||
<view data-num='S' class="">
|
||
<view data-num='S' class="title">{{title}}</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "keyBoard",
|
||
props: {
|
||
title: {
|
||
default: '确认',
|
||
type: String
|
||
},
|
||
btnColor: {
|
||
default: 'green',
|
||
},
|
||
pos: {
|
||
default: 'fixed',
|
||
type: String
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
money: '',
|
||
Cdel: '',
|
||
Time: ''
|
||
}
|
||
},
|
||
|
||
watch: {
|
||
money(val) {
|
||
this.$emit('update:money', val);
|
||
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
touchstart() {
|
||
this.Time = setInterval(() => {
|
||
if (this.money == '') {
|
||
clearInterval();
|
||
}
|
||
this.money = this.money.substring(0, this.money.length - 1);
|
||
}, 200)
|
||
},
|
||
touchend() {
|
||
clearInterval(this.Time);
|
||
},
|
||
//处理按键
|
||
_handleKeyPress(e) {
|
||
// console.log('点击传e', e.target.dataset.num);
|
||
// #ifdef MP-WEIXIN
|
||
let num = e.target.dataset.num;
|
||
// #endif
|
||
// #ifdef MP-ALIPAY
|
||
let num = e.target.targetDataset.num;
|
||
// #endif
|
||
//不同按键处理逻辑
|
||
// -1 代表无效按键，直接返回
|
||
if (num == -1) return false;
|
||
|
||
switch (String(num)) {
|
||
//小数点
|
||
case '.':
|
||
// uni.showToast({
|
||
// title: '不可以设置.！',
|
||
// icon: 'none'
|
||
// });
|
||
// this._handleDecimalPoint();
|
||
break;
|
||
//删除键
|
||
case 'D':
|
||
this._handleDeleteKey();
|
||
break;
|
||
//清空键
|
||
case 'C':
|
||
this._handleClearKey();
|
||
break;
|
||
//确认键
|
||
case 'S':
|
||
this._handleConfirmKey();
|
||
break;
|
||
default:
|
||
this._handleNumberKey(num);
|
||
break;
|
||
}
|
||
},
|
||
//处理小数点函数
|
||
_handleDecimalPoint() {
|
||
//如果包含小数点，直接返回
|
||
if (this.money.indexOf('.') > -1) return false;
|
||
//如果小数点是第一位，补0
|
||
if (!this.money.length)
|
||
this.money = '0.';
|
||
//如果不是，添加一个小数点
|
||
else
|
||
this.money = this.money + '.';
|
||
},
|
||
//处理删除键
|
||
_handleDeleteKey() {
|
||
let S = this.money;
|
||
//如果没有输入，直接返回
|
||
if (!S.length) return false;
|
||
//否则删除最后一个
|
||
this.money = S.substring(0, S.length - 1);
|
||
},
|
||
|
||
//处理清空键
|
||
_handleClearKey() {
|
||
this.money = '';
|
||
},
|
||
|
||
//处理数字
|
||
_handleNumberKey(num) {
|
||
let S = this.money;
|
||
//如果有小数点且小数点位数不小于2
|
||
// if (S.indexOf('.') > -1 && S.substring(S.indexOf('.') + 1).length < 2)
|
||
this.money = S + num;
|
||
//没有小数点
|
||
// if (!(S.indexOf('.') > -1)) {
|
||
// //如果第一位是0，只能输入小数点
|
||
// if (num == 0 && S.length == 0)
|
||
// this.money = '0';
|
||
// else {
|
||
// if (S.length && Number(S.charAt(0)) === 0) return;
|
||
// this.money = S + num;
|
||
// }
|
||
// }
|
||
console.log(num)
|
||
if (this.money.length == 6) {
|
||
this.$emit('confirmEvent', this.money); //提交参数
|
||
return
|
||
}
|
||
},
|
||
|
||
//提交
|
||
_handleConfirmKey() {
|
||
let S = this.money;
|
||
//未输入
|
||
if (!S.length || S == 0) {
|
||
uni.showToast({
|
||
title: '请输入正确的数值',
|
||
icon: 'none',
|
||
duration: 1000
|
||
});
|
||
return false;
|
||
}
|
||
//将 8. 这种转换成 8.00
|
||
if (S.indexOf('.') > -1 && S.indexOf('.') == (S.length - 1))
|
||
S = Number(S.substring(0, S.length - 1)).toFixed(2);
|
||
//保留两位
|
||
S = Number(S).toFixed(2);
|
||
this.$emit('confirmEvent', S); //提交参数
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.cell_b {
|
||
border-right: 1px solid #DBDBDB;
|
||
border-bottom: 1px solid #DBDBDB;
|
||
}
|
||
|
||
.key-container {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.keyboard {
|
||
flex: 1;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
height: 32vh;
|
||
width: 100%;
|
||
z-index: 999;
|
||
border-top: 1rpx solid #DBDBDB;
|
||
padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
|
||
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
||
background: #FFFFFF;
|
||
}
|
||
|
||
.keyboard .key-row {
|
||
display: flex;
|
||
display: -webkit-flex;
|
||
position: relative;
|
||
height: 8vh;
|
||
line-height: 8vh;
|
||
|
||
|
||
}
|
||
|
||
.keyboard .key-cell {
|
||
flex: 1;
|
||
-webkit-box-flex: 1;
|
||
font-family: Roboto, Roboto;
|
||
font-weight: 400;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.keyboard .key-confirm {
|
||
position: absolute;
|
||
text-align: center;
|
||
height: 30vh;
|
||
width: 25%;
|
||
line-height: 30vh;
|
||
color: #FFFFFF;
|
||
z-index: 5;
|
||
right: 0;
|
||
bottom: 0;
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.keyboard .key-confirm2 {
|
||
position: absolute;
|
||
height: 8vh;
|
||
width: 25%;
|
||
line-height: 8vh;
|
||
z-index: 9999;
|
||
right: 0;
|
||
top: 0;
|
||
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.key-zero-and-point {
|
||
display: flex;
|
||
height: 8vh;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 75%;
|
||
font-size: 60upx;
|
||
|
||
.zero {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 66.66%;
|
||
font-size: 60upx;
|
||
text-align: center;
|
||
height: 100%;
|
||
}
|
||
|
||
.point {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 33.33%;
|
||
font-size: 60upx;
|
||
text-align: center;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.key-cell:active {
|
||
color: white;
|
||
background: black; //黑色
|
||
opacity: 0.1; //这里重要，就是通过这个透明度来设置
|
||
}
|
||
|
||
.a:active,
|
||
.key-confirm2:active {
|
||
color: white;
|
||
background: black; //黑色
|
||
opacity: 0.1; //这里重要，就是通过这个透明度来设置
|
||
}
|
||
</style> |