cashierdesktop/src/views/home/components/keyboard.vue

<template>
       
        <div class="orderbox_right_inputkeyboard">
            <div class='keyboard' @click.stop='_handleKeyPress'>
                <div class='key-row'>
                    <el-button type="primary" plain class='key-cell cell_b' data-num='1'>1</el-button>
                    <el-button type="primary" plain class='key-cell cell_b' data-num='2'>2</el-button>
                    <el-button type="primary" plain class='key-cell cell_b' data-num='3'>3</el-button>
                </div>
                <div class='key-row'>
                    <el-button type="primary" plain class='key-cell cell_b' data-num='4'>4</el-button>
                    <el-button type="primary" plain class='key-cell cell_b' data-num='5'>5</el-button>
                    <el-button type="primary" plain class='key-cell cell_b' data-num='6'>6</el-button>
                </div>
                <div class='key-row'>
                    <el-button type="primary" plain class='key-cell cell_b' data-num='7'>7</el-button>
                    <el-button type="primary" plain class='key-cell cell_b' data-num='8'>8</el-button>
                    <el-button type="primary" plain class='key-cell cell_b' data-num='9'>9</el-button>
                </div>
                <div class='key-row'>
                    <el-button type="primary" plain class='key-cell cell_b' data-num='.'>.</el-button>
                    <el-button type="primary" plain class='key-cell cell_b' data-num='0'>0</el-button>
                    <el-button type="primary" plain class='key-cell cell_b' data-num='D'>c</el-button>
                </div>
            </div>
        </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { useRoute } from "vue-router"
import { ElMessage } from 'element-plus'
import lodash_ from 'lodash'

const moneys = reactive({
    money: ''
})
const emit = defineEmits(["consumeFees"])
watch(() => moneys.money, (newval, oldval) => {
    console.log(newval)
	emit('consumeFees', newval)
});

const _handleKeyPress = (e) => {
    console.log('点击传e', e.target.dataset.num);
    let num = e.target.dataset.num;
    //不同按键处理逻辑
    // -1 代表无效按键，直接返回
    if (num == -1) return false;
    switch (String(num)) {
        //小数点
        case '.':
            _handleDecimalPoint();
            break;
        //删除键
        case 'D':
            _handleDeleteKey();
            break;
        default:
            _handleNumberKey(num);
            break;
    }
}

//处理数字
const _handleNumberKey = (num) => {
    if (num == undefined) {
        return
    }
    if (moneys.money.length == 10) {
        return
    }
    console.log(num, 247)
    let S = moneys.money;
    //如果有小数点且小数点位数不小于2
    if (S.indexOf('.') > -1 && S.substring(S.indexOf('.') + 1).length < 2)
        moneys.money = S + num;
    //没有小数点
    if (!(S.indexOf('.') > -1)) {
        //如果第一位是0，只能输入小数点
        if (num == 0 && S.length == 0)
            moneys.money = '0.';
        else {
            if (S.length && Number(S.charAt(0)) === 0) return;
            moneys.money = S + num;
        }
    }
}
//处理小数点函数
const _handleDecimalPoint = () => {
    //如果包含小数点，直接返回
    if (moneys.money.indexOf('.') > -1) return false;
    //如果小数点是第一位，补0
    if (!moneys.money.length) {
        moneys.money = '0.';
    } else {
        //如果不是，添加一个小数点
        moneys.money = moneys.money + '.';
    }
}
//处理删除键
const _handleDeleteKey = () => {
    let S = moneys.money;
    //如果没有输入，直接返回
    if (!S.length) return false;
    //否则删除最后一个
    moneys.money = S.substring(0, S.length - 1);
}
</script>

<style scoped lang="scss">
    .orderbox_right_top {
        color: #fff;
        width: 100%;
        background: #8b008b;
        padding: 10px;
        border-radius: 10px;

        .orderbox_right_topdiv:nth-child(1) {
            margin-top: 0px;
        }

        .orderbox_right_topdiv {
            display: flex;
            margin-top: 10px;
            justify-content: space-between;
        }

        .orderbox_right_top_item {
            position: relative;
            background: #fff;
            padding: 6px 10px;
            display: flex;
            margin-top: 10px;
            border-radius: 10px;
            justify-content: space-between;
            align-items: center;

            .orderbox_right_top_item_one {
                display: flex;
                align-items: center;

                .orderbox_right_top_item_onespan {
                    color: black;
                    margin-left: 10px;
                    font-size: 16px;
                }
            }

            .orderbox_right_top_item_tow {
                color: black;
                margin-left: 10px;
                font-size: 14px;
                font-weight: bold;
            }
        }
    }

    .orderbox_right_input {
        width: 100%;
        margin-top: 10px;
    }

    .orderbox_right_inputkeyboard {
        margin-top: 20px;

        .keyboard {
            width: 100%;
            background: #FFFFFF;

            .key-row {
                display: flex;
                display: -webkit-flex;
                position: relative;
                height: 8vh;
                line-height: 8vh;
            }
        }

        .keyboard .key-cell {
            flex: 1;
            -webkit-box-flex: 1;
            font-size: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .orderbox_right_button {
        position: absolute;
        width: 90%;
        left: 50%;
        bottom: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transform: translateX(-50%) !important;
    }
</style>