Merge branch 'wwz' of gitee.com:shaanxi-super-shopkeeper_1/cashierdesktop into gyq
This commit is contained in:
282
src/components/cwx-keyboard/cwx-keyboard.vue
Normal file
282
src/components/cwx-keyboard/cwx-keyboard.vue
Normal file
@@ -0,0 +1,282 @@
|
||||
<template>
|
||||
<div class='keyboard' @click.stop='_handleKeyPress'>
|
||||
<div class='key-row'>
|
||||
<div class='key-cell cell_b' data-num='7'>7</div>
|
||||
<div class='key-cell cell_b' data-num='8'>8</div>
|
||||
<div class='key-cell cell_b' data-num='9'>9</div>
|
||||
<div class='key-cell cell_b' data-num='-1'></div>
|
||||
</div>
|
||||
<div class='key-row'>
|
||||
<div class='key-cell cell_b' data-num='4'>4</div>
|
||||
<div class='key-cell cell_b' data-num='5'>5</div>
|
||||
<div class='key-cell cell_b' data-num='6'>6</div>
|
||||
<div class='key-cell cell_b' data-num='-1'></div>
|
||||
</div>
|
||||
<div class='key-row'>
|
||||
<div class='key-cell cell_b' data-num='1'>1</div>
|
||||
<div class='key-cell cell_b' data-num='2'>2</div>
|
||||
<div class='key-cell cell_b' data-num='3'>3</div>
|
||||
<div class='key-cell cell_b' data-num='-1'></div>
|
||||
</div>
|
||||
<div class="key-zero-and-point">
|
||||
<div class="a cell_b zero" data-num='0'>0</div>
|
||||
<div class="a cell_b point" data-num='.'>.</div>
|
||||
</div>
|
||||
|
||||
<div @touchstart="touchstart" @touchend="touchend" data-num='D' class="key-confirm2">
|
||||
<text data-num='D'>C</text>
|
||||
</div>
|
||||
|
||||
<div class='key-confirm' :style="{ 'background': btnColor }" data-num='S'>
|
||||
<div data-num='S' class="">
|
||||
<div data-num='S' class="title">{{ title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, reactive } from 'vue'
|
||||
import { dayjs } from 'element-plus'
|
||||
const props = defineProps({
|
||||
title: {
|
||||
default: '确认',
|
||||
type: String
|
||||
},
|
||||
btnColor: {
|
||||
default: 'green',
|
||||
}
|
||||
})
|
||||
const emit = defineEmits(["consumeFee", "confirmEvent"])
|
||||
const this_money = reactive({
|
||||
money: '',
|
||||
Cdel: '',
|
||||
Time: ''
|
||||
})
|
||||
|
||||
watch(() => this_money.money, (newval, oldval) => {
|
||||
emit('consumeFee', newval)
|
||||
|
||||
});
|
||||
const touchstart = () => {
|
||||
this_money.Time = setInterval(() => {
|
||||
console.log(this_money.money);
|
||||
if (this_money.money == '') {
|
||||
clearInterval();
|
||||
}
|
||||
this_money.money = this_money.money.substring(0, this_money.money.length - 1);
|
||||
}, 200)
|
||||
}
|
||||
const touchend = () => {
|
||||
clearInterval(this_money.Time);
|
||||
}
|
||||
//处理按键
|
||||
const _handleKeyPress = (e) => {
|
||||
let num = e.target.dataset.num;
|
||||
//不同按键处理逻辑
|
||||
// -1 代表无效按键，直接返回
|
||||
if (num == -1) return false;
|
||||
switch (String(num)) {
|
||||
//小数点
|
||||
case '.':
|
||||
_handleDecimalPoint();
|
||||
break;
|
||||
//删除键
|
||||
case 'D':
|
||||
_handleDeleteKey();
|
||||
break;
|
||||
//清空键
|
||||
case 'C':
|
||||
_handleClearKey();
|
||||
break;
|
||||
//确认键
|
||||
case 'S':
|
||||
_handleConfirmKey();
|
||||
break;
|
||||
default:
|
||||
_handleNumberKey(num);
|
||||
break;
|
||||
}
|
||||
}
|
||||
//处理小数点函数
|
||||
const _handleDecimalPoint = () => {
|
||||
//如果包含小数点，直接返回
|
||||
if (this_money.money.indexOf('.') > -1) return false;
|
||||
//如果小数点是第一位，补0
|
||||
if (!this_money.money.length)
|
||||
this_money.money = '0.';
|
||||
//如果不是，添加一个小数点
|
||||
else
|
||||
this_money.money = this_money.money + '.';
|
||||
}
|
||||
//处理删除键
|
||||
const _handleDeleteKey = () => {
|
||||
let S = this_money.money;
|
||||
//如果没有输入，直接返回
|
||||
if (!S.length) return false;
|
||||
//否则删除最后一个
|
||||
this_money.money = S.substring(0, S.length - 1);
|
||||
}
|
||||
|
||||
//处理清空键
|
||||
const _handleClearKey = () => {
|
||||
this_money.money = '';
|
||||
}
|
||||
|
||||
//处理数字
|
||||
const _handleNumberKey = (num) => {
|
||||
if (this_money.money.length == 10) {
|
||||
return
|
||||
}
|
||||
let S = this_money.money;
|
||||
//如果有小数点且小数点位数不小于2
|
||||
if (S.indexOf('.') > -1 && S.substring(S.indexOf('.') + 1).length < 2)
|
||||
this_money.money = S + num;
|
||||
//没有小数点
|
||||
if (!(S.indexOf('.') > -1)) {
|
||||
//如果第一位是0，只能输入小数点
|
||||
if (num == 0 && S.length == 0)
|
||||
this_money.money = '0.';
|
||||
else {
|
||||
if (S.length && Number(S.charAt(0)) === 0) return;
|
||||
this_money.money = S + num;
|
||||
}
|
||||
}
|
||||
}
|
||||
//提交
|
||||
const _handleConfirmKey = () => {
|
||||
let S = this_money.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);
|
||||
emit('confirmEvent', S); //提交参数
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cell_b {
|
||||
border-right: 1px solid #d5d5d6;
|
||||
border-bottom: 1px solid #d5d5d6;
|
||||
}
|
||||
|
||||
.key-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.keyboard {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 40vh;
|
||||
width: 100%;
|
||||
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.keyboard .key-row {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
position: relative;
|
||||
height: 10vh;
|
||||
line-height: 10vh;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.keyboard .key-cell {
|
||||
flex: 1;
|
||||
-webkit-box-flex: 1;
|
||||
font-size: 60upx;
|
||||
|
||||
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: 10vh;
|
||||
width: 25%;
|
||||
line-height: 10vh;
|
||||
z-index: 9999;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.key-zero-and-point {
|
||||
display: flex;
|
||||
height: 10vh;
|
||||
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>
|
||||
Reference in New Issue
Block a user