tf-business/components/keyboard/keyboard.vue

<template>
    <view class="keyboard">
        <view class="number-board" v-if="isBoard">
            <view class="number-left">
                <view class="left-top">
                    <view v-for="item in leftItems" :key="item" class="left-item"
                        :class="item == '清空' ? 'empty' : ''" @click="singleWord(item)">{{ item }}</view>
                </view>
            </view>
            <view class="number-right">
                <view class="right-top" @click="deleteOneWord">
                    <tui-icon name="deletekey" :size="30" color="#ACACAC"></tui-icon>
                </view>
                <view class="right-bottom" @click="setVerifica" :style="{ backgroundColor: iptValue == '' ? '#FFD2BE' : '' }">验劵</view>
            </view>
        </view>
        <view class="eng-board" v-else>
            <view class="eng-topOne">
                <view class="eng-box" v-for="item in engBoardList.one" :key="item" @click="singleWord(item)">{{ item }}
                </view>
            </view>
            <view class="eng-topTwo">
                <view class="eng-box" v-for="item in engBoardList.two" :key="item" @click="singleWord(item)">{{ item }}
                </view>
            </view>
            <view class="eng-topThree">
                <view class="eng-switch" @click="changeUpper">
                    <template v-if="isUpper">
                        <image class="" src="@/static/image/keyboard/shift-icon2.png" />
                    </template>
                    <template v-else>
                        <image class="" src="@/static/image/keyboard/shift-icon.png" />
                    </template>
                </view>
                <view class="box-list">
                    <view class="eng-box" v-for="item in engBoardList.three" :key="item" @click="singleWord(item)">{{
            item }}</view>
                </view>
                <view class="delete" @click="deleteOneWord">
                    <image class="" src="@/static/image/keyboard/delete.png" />
                </view>
            </view>
            <view class="eng-topFour">
                <view class="eng-number" @click="changeBoard">123</view>
                <view class="eng-coupons" @click="setVerifica" :style="{ backgroundColor: iptValue == '' ? '#FFD2BE' : '' }">验劵</view>
                <view class="eng-empty" @click="deleteAll">清空</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        iptValue: {
            type: String,
            default: ''
        }
    },
    computed: {
        engBoardList() {
            let objBig = {
                one: ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
                two: ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
                three: ['Z', 'X', 'C', 'V', 'B', 'N', 'M']
            }
            let objSmall = {
                one: ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
                two: ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
                three: ['z', 'x', 'c', 'v', 'b', 'n', 'm']
            }
            if (this.isUpper) {
                return objBig
            } else {
                return objSmall
            }
        }
    },
    data() {
        return {
            leftItems: [1, 2, 3, 4, 5, 6, 7, 8, 9, 'ABC', 0, '清空'],
            //  控制数字键盘以及英文键盘切换
            isBoard: true,
            //  控制切换大小写
            isUpper: true
        }
    },
    methods: {
        //  手机震动
        handleTouchEnd() {
            // #ifdef MP-WEIXIN
            wx.vibrateShort({ type: 'light' })
            // #endif
        },
        //  切换大小写
        changeUpper() {
            this.isUpper = !this.isUpper
        },
        //  数字键盘点击事件
        singleWord(val) {
            this.handleTouchEnd()
            if (val == 'ABC') {
                this.changeBoard()
                return
            } else if (val == '清空') {
                this.deleteAll()
                return
            }
            this.$emit('single', val)
        },
        //  删除单个字符
        deleteOneWord() {
            this.handleTouchEnd()
            this.$emit('deleteOne')
        },
        //  删除全部字符
        deleteAll() {
            this.handleTouchEnd()
            this.$emit('deleteAll')
        },
        //  验劵
        setVerifica(){
            this.$emit('setVerifica')
        },

        changeBoard() {
            this.isBoard = !this.isBoard
        }
    }
}
</script>

<style lang="scss" scoped>
.keyboard {
    .number-board {
        @include flex(center);

        .number-left {
            flex: 1;

            .left-top {
                @include flex(null, null, 6rpx);
                flex-wrap: wrap;
            }

            .left-item {
                width: 184rpx;
                height: 148rpx;
                background-color: #FFFFFF;
                color: #666666;
                font-weight: 700;
                font-size: 40rpx;
                @include flex(center);
                transition: all .1s ease;

                &:active {
                    background-color: #cacaca;
                }

                /* &.active {
                    background-image: linear-gradient(to bottom, #007AFF, #0F83FF);
                } */
            }

            .empty {
                color: #ACACAC;
            }
        }

        .number-right {
            width: 184rpx;
            height: 604rpx;
            box-sizing: border-box;
            @include flex(center, column, 6rpx);

            .right-top {
                width: 184rpx;
                height: 148rpx;
                background-color: #FFFFFF;
                @include flex(center);
            }

            .right-bottom {
                flex: 1;
                background-color: $primary-color;
                @include flex(center);
                width: 184rpx;
                color: #FFFFFF;
            }
        }
    }

    .eng-board {
        .eng-topOne {
            @include flex(space-between, null, 12rpx);
        }

        .eng-box {
            width: 64rpx;
            height: 84rpx;
            background-color: #FFFFFF;
            color: #333333;
            font-size: 30rpx;
            @include flex(center);
            border-radius: 16rpx;
            font-weight: 700;
            transition: all .1s ease;

            &:active {
                box-shadow: inset 0 0 10rpx rgba(0, 0, 0, 0.3);
                background-color: #cacaca;
            }
        }

        /* .eng-box {
            width: 64rpx;
            height: 84rpx;
            background-color: #FFFFFF;
            color: #333333;
            font-size: 30rpx;
            @include flex(center);
            border-radius: 16rpx;
            font-weight: 700;
            transition: all .1s ease;
            transform-origin: center;

            &:active {
                background-color: #cacaca;
                transform: scale(0.98);
            }
        } */

        .eng-topTwo {
            margin-top: 20rpx;
            @include flex(center, null, 12rpx);
        }

        .eng-topThree {
            margin-top: 20rpx;
            @include flex(space-between, null, 12rpx);

            .eng-switch {
                width: 84rpx;
                height: 84rpx;
                border-radius: 16rpx;
                background-color: #FFFFFF;
                @include flex(center);

                image {
                    width: 42rpx;
                    height: 34rpx;
                }
            }

            .box-list {
                @include flex(center, null, 12rpx);
            }

            .delete {
                width: 84rpx;
                height: 84rpx;
                border-radius: 16rpx;
                background-color: #FFFFFF;
                @include flex(center);

                image {
                    width: 56rpx;
                    height: 36rpx;
                }
            }
        }

        .eng-topFour {
            margin-top: 20rpx;
            @include flex(space-between);

            .eng-number {
                width: 190rpx;
                height: 84rpx;
                background-color: #FFFFFF;
                font-size: 28rpx;
                font-weight: 600;
                @include flex(center);
                border-radius: 16rpx;
                color: #333333;
            }

            .eng-coupons {
                width: 300rpx;
                height: 84rpx;
                @include flex(center);
                color: #FFFFFF;
                background-color: $primary-color;
                border-radius: 16rpx;
            }

            .eng-empty {
                width: 190rpx;
                height: 84rpx;
                background-color: #FFFFFF;
                font-size: 28rpx;
                font-weight: 600;
                @include flex(center);
                border-radius: 16rpx;
                color: #333333;
            }
        }
    }
}
</style>