store-windows/fuintUniapp/components/neoceansoft-keyboard/neoceansoft-keyboard.vue

<template name="neoceansoft-keyboard">

    <view  :style="{'height':popupHeight}" class="numView">

        <view style="display: flex;">


            <view :style="{'width':numWidht}">

                <view style="width: 100%; height: 2rpx;background-color: #efefef;" />
                <view style="display: flex;">
                    <view v-for="(item,index) in num1" :key="index" :style="{'height':numBtnHeight,'width':numBtnWidth+'px'}"
                        class="numLayout">
                        <view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
                        <button plain="true" hover-class="numClickCss"
                            :style="{'height':numBtnHeight,'width':numBtnWidth+'px'}" class="numBtn"
                            @click="btnClick(item)">
                            {{item}}
                        </button>
                        <view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
                    </view>
                </view>


                <view style="width: 100%; height: 2rpx;background-color: #efefef;" />
                <view style="display: flex;">
                    <view v-for="(item,index) in num2" :key="index" :style="{'height':numBtnHeight,'width':numBtnWidth+'px'}"
                        class="numLayout">
                        <view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
                        <button plain="true" hover-class="numClickCss"
                            :style="{'height':numBtnHeight,'width':numBtnWidth+'px'}" class="numBtn"
                            @click="btnClick(item)">
                            {{item}}
                        </button>
                        <view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
                    </view>
                </view>


                <view style="width: 100%; height: 2rpx;background-color: #efefef;" />
                <view style="display: flex;">
                    <view v-for="(item,index) in num3" :key="index" :style="{'height':numBtnHeight,'width':numBtnWidth+'px'}"
                        class="numLayout">
                        <view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
                        <button plain="true" hover-class="numClickCss"
                            :style="{'height':numBtnHeight,'width':numBtnWidth+'px'}" class="numBtn"
                            @click="btnClick(item)">
                            {{item}}
                        </button>
                        <view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
                    </view>
                </view>


                <view style="width: 100%; height: 2rpx;background-color: #efefef;" />
                <view style="display: flex;">
                    <view v-for="(item,index) in num4" :key="index" class="numLayout">
                        <view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
                        <button plain="true" v-if="index==2||(keyboardType == 'password'&&index==1)"
                            :hover-class="keyboardType=='payment'?'':'numClickCss'"
                            :style="{'height':numBtnHeight,'width':numBtnWidth+'px'}" class="numBtn"
                            @click="btnClick(item.type)">
                            <view v-if="keyboardType!='payment'" class="iconfont icon-deletenumber"></view>

                        </button>
                        <button v-else plain="true" hover-class="numClickCss"
                            :style="{'height':numBtnHeight,'width':keyboardType=='password'||(keyboardType=='payment'&&index==0)?((numBtnWidth*2)-1)+'px':(numBtnWidth-1)+'px'}"
                            class="numBtn" @click="btnClick(item.type)">
                            {{item.name}}
                        </button>
                        <view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
                    </view>
                </view>

            </view>
            <view v-if="keyboardType=='payment'"
                :style="{'width':payboardWidth,'height':payboardHeight,'display':'flex'}">
                <view style="width: 2rpx;height: 100%;background-color: #efefef;"></view>
                <view :style="{'display':'flex','width':'100%','height':'100%'}">

                    <view style="width: 100%;height: 100%;">
                        <view style="width: 100%;height: 2rpx;background-color: #efefef;"></view>
                        <button plain="true" hover-class="numClickCss"
                            :style="{'height':numBtnHeight,'width':(numBtnWidth-1)+'px'}" class="numBtn" @click="btnClick(-2)">
                            <view class="iconfont icon-deletenumber"></view>

                        </button>
                        <button plain="true" hover-class="behaviorCommonCss" :style="{'height':behaviorBtnHeight,'width':(numBtnWidth-1),'color':behaviorTextColor,
                            'background':behaviorBgColor}" class="behaviorCss" @click="paymentClick()">
                            {{behaviorName}}

                        </button>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                numBtnWidth: 0,
                numBtnHeight: '',
                behaviorBtnHeight: '',
                popupHeight: '',
                payboardWidth: '',
                payboardHeight: '',
                numWidht: '',
                numOpWidht: '',
                opBtnWidth: '',
                opBtnHeight1: '',
                opBtnHeight2: '',
                nums: [],
                isShowPay: true,
                bl: 0.45,
                num1: [1, 2, 3],
                num2: [4, 5, 6],
                num3: [7, 8, 9],
                num4: [{
                    name: '.',
                    type: '.'
                }, {
                    name: '0',
                    type: 0
                }, {
                    name: '删除',
                    type: -2
                }],


            }
        },
        props: {
            keyboardType: {
                type: String,
                default: "number" // number idcard,payment,password
            },
            behaviorName: {
                type: String,
                default: '付款'
            },
            behaviorTextColor: {
                type: String,
                default: '#ffffff'
            },
            behaviorBgColor: {
                type: String,
                default: '#41ae3c'
            }
        },


        created() {


            var that = this
            uni.getSystemInfo({
                success(res) {
                    console.log("页面信息：" + JSON.stringify(res))
                    var width = 0
                    if (that.keyboardType == 'payment') {
                        width = (res.screenWidth / 4) * 3
                    } else {
                        width = (res.screenWidth / 3) * 3
                    }
                    var height = ''
                    if (that.keyboardType == 'payment') {
                        that.bl = 0.58
                        height = width / 3 * that.bl
                    } else {
                        height = width / 3 * that.bl
                    }

                    that.opBtnWidth = (res.screenWidth / 4) * 1 + 'px'
                    // that.opBtnHeight1 = (height * 4) * (3 / 5) + 'px'
                    // that.opBtnHeight2 = (height * 4) * (2 / 5) + 'px'
                    that.opBtnHeight1 = ((height * 2) + 2.5) + 'px'
                    that.opBtnHeight2 = ((height * 2) + 2) + 'px'
                    that.numWidht = width + 'px'
                    that.payboardWidth = (res.screenWidth - width) + 'px'
                    that.payboardHeight = height * 3
                    that.numBtnWidth = width / 3
                    that.numBtnHeight = height + 'px'
                    that.behaviorBtnHeight = height * 3 + 'px'
                    that.popupHeight = (height * 4) + 'px'

                }
            })
            if (this.keyboardType == 'password') {
                //密码键盘，不存在小数点问题
                this.num4.splice(0, 1)
            } else if (this.keyboardType == 'idcard') {
                this.num4[0].name = 'X'
                this.num4[0].type = 'X'
            } else if (this.keyboardType == 'payment') {
                this.num4.splice(2, 1)
                var bean = this.num4[0]
                this.num4[0] = this.num4[1]
                this.num4[1] = bean

            }

        },
        methods: {
            paymentClick(){
                this.$emit('paymentClick')
            },


            // 数字点击事件回调
            btnClick(item) {
                // this.$emit('click',item)
                this.$emit('keyclick', item)
                this.inputNum(item)
            },
            // 输入处理事件回调
            inputNum(item) {
                switch (item) {
                    case 0:
                    //todo 验证待处理
                        this.putNum('0')
                        break
                    case 1:
                        //todo 验证待处理
                        this.putNum('1')

                        break
                    case 2:
                        //todo 验证待处理
                        this.putNum('2')
                        break
                    case 3:
                        //todo 验证待处理
                        this.putNum('3')
                        break
                    case 4:
                        //todo 验证待处理
                        this.putNum('4')
                        break
                    case 5:
                        //todo 验证待处理
                        this.putNum('5')
                        break
                    case 6:
                        //todo 验证待处理
                        this.putNum('6')
                        break
                    case 7:
                        //todo 验证待处理
                        this.putNum('7')
                        break
                    case 8:
                        //todo 验证待处理
                        this.putNum('8')
                        break
                    case 9:
                        //todo 验证待处理
                        this.putNum('9')
                        break
                    case '.':
                        this.putNum('.')
                        break
                    case 'X':
                        this.putNum('X')
                        break
                    case -2:
                        this.del()
                        break

                }
            },
            putNum(data) {
                this.nums.push(data)
                var result = this.nums.join('')
                this.$emit('result', result)
            },
            del() {
                if (this.nums.length == 0) {
                    return
                }
                this.nums.splice(this.nums.length - 1, 1)
                var result = this.nums.join('')
                this.$emit('result', result)



            },




        }
    }
</script>

<style scoped>
    @font-face {
        font-family: 'iconfont';

        src: url('https://at.alicdn.com/t/font_2180051_21huv31g6dq.woff2?t=1625469481487') format('woff2'),
            url('https://at.alicdn.com/t/font_2180051_21huv31g6dq.woff?t=1625469481487') format('woff'),
            url('https://at.alicdn.com/t/font_2180051_21huv31g6dq.ttf?t=1625469481487') format('truetype');

    }


    .iconfont {
        font-family: "iconfont" !important;
        font-size: 14px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .icon-deletenumber:before {
        content: "\e666";
    }




    .numView {
        position: fixed;
        bottom: 0rpx;
        width: 100%;
    }

    .numBtn {
        display: flex;
        align-items: center;
        justify-content: center;
        justify-items: center;
        border-radius: 20rpx;
        border: 0rpx solid #ffffff;


    }

    .behaviorCss {
        display: flex;
        align-items: center;
        justify-content: center;
        justify-items: center;
        border-radius: 0rpx;
        border: 0rpx solid #E0E0E0;
        color: #ffffff;
        font-weight: 500;
        font-size: 30rpx;

    }

    .behaviorCommonCss {
        background-color: #efefef !important;
        transform: translate(1rpx, 1rpx);

    }

    .numLayout {
        display: flex;
    }

    .numLayout2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

    }

    .boderSy {
        width: 2rpx;
        background-color: #efefef;
    }

    .opBtn1 {
        background-color: #f29100;
        display: flex;
        align-items: center;
        justify-content: center;
        justify-items: center;
        align-content: center;
        color: #FFFFFF;
        font-weight: 400;
        font-size: 30rpx;
        text-align: center;


    }

    .numClickCss {
        background-color: #efefef;
        color: #FFFFFF;
    }


    .opBtn1x {
        background-color: #ffd28b;
        display: flex;
        color: #9fa0a0;
        align-items: center;
        justify-content: center;
        justify-items: center;
        align-content: center;
        font-weight: 400;
        font-size: 30rpx;
        text-align: center;

    }


    .opBtn2 {
        background-color: #0090ff;
        display: flex;
        align-items: center;
        justify-content: center;
        justify-items: center;
        align-content: center;
        color: #FFFFFF;
        font-weight: 400;
        font-size: 30rpx;
        text-align: center;

    }

    .opBtn2x {
        background-color: #7fcff4;
        display: flex;
        align-items: center;
        justify-content: center;
        justify-items: center;
        align-content: center;
        font-weight: 400;
        font-size: 30rpx;
        text-align: center;
        color: #9fa0a0;

    }

    .customStyle {
        color: 'red'
    }
</style>