yinchuan-community-all/mini-program/garden-wxapp/components/keyboard-package/keyboard-package.vue

<template>
    <uni-popup :custom="true" type="bottom" ref="keyboardPackage">
        <view class="keyboardbox">
            <view class="numkeyboard" v-if="type==='number'">
                <view class="num-area">
                    <view class="row" v-for="(item,index) in numKeybordList" :key="index">
                        <view :class="['item',ite===0?'z':'',(disableDot && ite==='.')?'disabled':'']"
                              v-for="(ite,idx) in item"
                              hover-class="active" :hover-start-time="0" :hover-stay-time="5" :key="idx"
                              @tap="input(ite)">{{ite}}
                        </view>
                    </view>
                </view>
                <view class="btn-area">
                    <view :class="['item','del']" hover-class="active" :hover-start-time="0" :hover-stay-time="5"
                          @tap="deleteVal">
                        删除
                    </view>
                    <view class="confirem item" hover-class="active" :hover-start-time="0" :hover-stay-time="5"
                          @tap="confirm">
                        完成
                    </view>
                </view>
            </view>

            <view class="numkeyboard" v-if="type==='idCard'">
                <view class="num-area">
                    <view class="row" v-for="(item,index) in idCardList" :key="index">
                        <view :class="['item',ite===0?'z':'',(disableDot && ite==='.')?'disabled':'']"
                              v-for="(ite,idx) in item"
                              hover-class="active" :hover-start-time="0" :hover-stay-time="5" :key="idx"
                              @tap="input(ite)">{{ite}}
                        </view>
                    </view>
                </view>
                <view class="btn-area">
                    <view :class="['item','del']" hover-class="active" :hover-start-time="0" :hover-stay-time="5"
                          @tap="deleteVal">
                        删除
                    </view>
                    <view class="confirem item" hover-class="active" :hover-start-time="0" :hover-stay-time="5"
                          @tap="confirm">
                        完成
                    </view>
                </view>
            </view>

            <view class="platenumber" v-if="type==='plateNumber'">
                <view class="header">
                    <view @tap="active=active===1?2:1" hover-class="active" :hover-start-time="0" :hover-stay-time="5">
                        {{active===1?'地区':'车牌号'}}
                    </view>
                    <view hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="confirm">完成</view>
                </view>
                <view class="main">
                    <view class="normal" v-show="active===1">
                        <view class="row" v-for="(item,index) in EngKeyBoardList" :key="index">
                            <view class="item" v-for="(ite,idx) in item" :key="idx" hover-class="active"
                                  :hover-start-time="0" :hover-stay-time="5" @tap="input(ite)">
                                {{ite}}
                            </view>
                            <view class="item img" v-if="index===EngKeyBoardList.length-1" hover-class="active"
                                  :hover-start-time="0" :hover-stay-time="5" @tap="deleteVal">
                                <image src="/static/delete.png" mode=""></image>
                            </view>
                        </view>
                    </view>
                    <view class="area" v-show="active===2">
                        <view class="row" v-for="(item,index) in areaList" :key="index">
                            <view class="item" v-for="(ite,idx) in item" :key="idx" hover-class="active"
                                  :hover-start-time="0" :hover-stay-time="5" @tap="input(ite)">
                                {{ite}}
                            </view>
                            <view class="item img" v-if="index===EngKeyBoardList.length-1" hover-class="active"
                                  :hover-start-time="0" :hover-stay-time="5" @tap="deleteVal">
                                <image src="/static/delete.png" mode=""></image>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="safe-area" v-if="safeAreaInsetBottom"></view>
    </uni-popup>
</template>

<script>
    import uniPopup from "@/components/uni-popup/uni-popup.vue"

    export default {
        components: {
            uniPopup
        },
        props: {
            type: {
                type: String,
                default: 'number'
            },
            safeAreaInsetBottom: { //是否设置安全区
                type: Boolean,
                default: false
            },
            disableDot: { //数字键盘是否禁止点击.仅type为number生效
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                numKeybordList: [
                    [1, 2, 3],
                    [4, 5, 6],
                    [7, 8, 9],
                    [0, '.']
                ],
                idCardList: [
                    [1, 2, 3],
                    [4, 5, 6],
                    [7, 8, 9],
                    [0, 'X']
                ],
                areaList: [
                    ['京', '沪', '粤', '津', '冀', '豫', '云', '辽', '黑', '湘'],
                    ['皖', '鲁', '苏', '浙', '赣', '鄂', '桂', '甘', '晋', '陕'],
                    ['蒙', '吉', '闽', '贵', '渝', '川', '青', '琼', '宁'],
                    ['藏', '新', '使', '港', '澳', '学']
                ],
                EngKeyBoardList: [
                    [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
                    ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
                    ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
                    ['Z', 'X', 'C', 'V', 'B', 'N', 'M']
                ],
                active: 2
            };
        },
        methods: {
            open() {
                this.$refs.keyboardPackage.open();
            },
            confirm() {
                this.close();
                this.$emit('onConfirm');
            },
            deleteVal() {
                this.$emit('onDelete');
            },
            input(val) {
                if (val === '.' && this.disableDot) return;
                this.$emit('onInput', val);
                if (this.active === 2) {
                    this.active = 1;
                }
            },
            close() {
                this.$refs.keyboardPackage.close();
            }
        }
    }
</script>

<style lang="scss" scoped>
    .keyboardbox {
        background-color: #FFFFFF;

        .numkeyboard {
            height: 432 rpx;
            display: flex;
            background-color: #ebedf0;

            .btn-area {
                width: 180 rpx;
                height: 100%;
                display: flex;
                flex-direction: column;

                .item {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-grow: 1;
                }

                .del {
                    background-color: #ebedf0;
                    color: #333;

                    &.active {
                        background-color: #f1f3f5;
                    }
                }

                .confirem {
                    background-color: $base-color;
                    color: #FFFFFF;

                    &.active {
                        background-color: #0570db;
                    }
                }
            }

            .num-area {
                flex-grow: 1;
                display: flex;
                flex-wrap: wrap;

                .row {
                    width: 100%;
                    height: 25%;
                    display: flex;
                    margin-top: 1px;

                    .item {
                        flex-grow: 1;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background-color: #FFFFFF;
                        border-right: 1px solid #ebedf0;
                        width: 33.33%;

                        &.active {
                            background-color: #ebedf0;
                        }

                        &.z {
                            flex-grow: 2;
                            width: 66.66%;
                        }

                        &.disabled {
                            background: #FFFFFF;
                            color: #B9B9B9;
                        }
                    }
                }

            }
        }
    }

    .safe-area {
        padding-bottom: 0 rpx;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .platenumber {
        background-color: #f5f5f5;

        .header {
            height: 76 rpx;
            background-color: #FFFFFF;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 28 rpx;
            border-top: 1px solid #f5f5f5;

            & > view {
                padding: 0 45 rpx;
                color: $base-color;
                height: 100%;
                display: flex;
                align-items: center;

                &.active {
                    background-color: #ebedf0;
                }
            }
        }

        .main {
            height: 435 rpx;

            .row {
                margin: 13 rpx 0;
                display: flex;
                justify-content: center;
                align-items: center;

                .item {
                    width: 56 rpx;
                    height: 94 rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-color: #FFFFFF;
                    border-radius: 6 rpx;
                    margin: 0 7 rpx;
                    font-size: 24 rpx;

                    &.active {
                        background-color: #ebedf0;
                    }

                    &.img {
                        background-color: #c2cacc;
                        width: 94 rpx;

                        &.active {
                            background-color: #ddd;
                        }

                        & > image {
                            width: 49 rpx;
                            height: 48 rpx;
                        }
                    }
                }
            }

        }
    }
</style>