tf-business/pages_module/scanCoupons/index.vue

<template>
    <view class="scanCoupons">
        <capsule :showBorder="true" bgColor="#FFFFFF">
            <template v-slot:top>
                <view class="shop-top">
                    <view class="back-icon" @click="backClick">
                        <tui-icon name="arrowleft" :size="42" color="#000000"></tui-icon>
                    </view>
                    <view class="shop-name">{{ shopInfo.shopName }}</view>
                </view>
            </template>
        </capsule>
        <view class="seat"></view>
        <view class="ipt">
            <view class="ipt-box">
                <template v-if="iptValue == ''">
                    <view class="ipt-empty">请输入劵码</view>
                </template>
                <template v-else>
                    <view class="ipt-code">{{ iptValue }}</view>
                </template>
            </view>
        </view>
        <view class="footer">
            <keyboard :iptValue='iptValue' @single="singleWord" @deleteOne="deleteOne" @deleteAll="this.iptValue = ''">
            </keyboard>
        </view>
    </view>
</template>

<script>
export default {
    created() {
        //  获取本地存储的店铺数据
        this.shopInfo = uni.getStorageSync('shopInfo')
    },
    data() {
        return {
            shopInfo: {},
            iptValue: '',
        }
    },
    methods: {
        backClick() {
            uni.navigateBack()
        },
        //  修改单个验劵码
        singleWord(val) {
            this.iptValue = `${this.iptValue}${val}`
        },
        //  删除单个字符
        deleteOne() {
            this.iptValue = this.iptValue.slice(0, this.iptValue.length - 1)
        },
    },
}
</script>

<style lang="scss" scoped>
.scanCoupons {
    width: 100%;
    height: 100vh;
    background-color: rgb(241, 241, 241);

    .shop-top {
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 999;
        @include flex(center);

        .back-icon {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .shop-name {
            color: #000000;
        }
    }

    .seat {
        width: 100%;
        height: 30rpx;
        background-color: #FFFFFF;
    }

    .ipt {
        margin-top: 50rpx;
        width: 100%;

        .ipt-box {
            width: 686rpx;
            height: 108rpx;
            background-color: #FFFFFF;
            margin: 0 auto;
            box-sizing: border-box;
            padding: 32rpx 0 32rpx 38rpx;
            border-radius: 16rpx;

            .ipt-empty {
                color: #999999;
                font-size: 36rpx;
                position: relative;

                &::after {
                    content: '';
                    width: 6rpx;
                    height: 80%;
                    background-color: #EF530E;
                    position: absolute;
                    left: -14rpx;
                    top: 60%;
                    transform: translateY(-60%);
                }
            }

            .ipt-code {
                width: 100%;
                overflow-x: scroll;
                color: #333333;
                font-size: 36rpx;
            }
        }
    }

    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        /*  底部安全区域 */
        padding-bottom: constant(safe-area-inset-bottom); //兼容 IOS<11.2
        padding-bottom: env(safe-area-inset-bottom); //兼容 IOS>11.2
    }
}
</style>