tf-business/pages_module/scanCode/index.vue

<template>
    <view class="scanCode">
        <capsule :showBorder="true">
            <template v-slot:top>
                <view class="shop-top">
                    <view class="back-icon" @click="backClick">
                        <tui-icon name="arrowleft" :size="42" color="#FFFFFF"></tui-icon>
                    </view>
                    <view class="shop-name">{{ shopInfo.shopName }}</view>
                </view>
            </template>
        </capsule>
        <view class="scanning">
            <view class="scan-box">
                <view class="border-box"></view>
                <view class="border-box2"></view>
                <view class="border-box3"></view>
                <view class="border-box4"></view>
                <camera class="scan-camera" @scancode="onScancode" mode="scanCode" device-position="back" flash="auto">
                    <cover-view class="scan-animation" :animation="animation"></cover-view>
                </camera>
            </view>
            <view class="scab-txt">将二维码/条码放到取景框中，即可自动扫描</view>
        </view>
        <view class="btn-list">
            <view class="btn" @click="goCoupons">
                <image src="@/static/image/code/keyboard.png" />
                <text>输码验劵</text>
            </view>
            <view class="btn" @click="openAlbum">
                <image src="@/static/image/code/photo.png" />
                <text>打开相册</text>
            </view>
        </view>
        <modal :showModal="modal" :promptList="promptList" @closeModal="closeModal" :showBtn="false"></modal>
    </view>
</template>

<script>
var animation = uni.createAnimation({
    timingFunction: "linear",
    delay: 0
});
export default {
    created() {
        //  获取本地存储的店铺数据
        this.shopInfo = uni.getStorageSync('shopInfo');
        this.getOrderIdFromUrl('https://test.tuanfengkeji.cn/TFShop_Uni_H5/#/pages/jump/jump?orderId=4979&type=verification&code=4979~JFHXQSZD4F')
    },
    onShow() {
        this.lineAnimation()
    },
    data() {
        return {
            //  扫描线动画
            animation: {},
            shopInfo: {},
            // 控制框显示
            modal: false,
            //  弹框显示的内容
            promptList: [],
        }
    },
    methods: {
        lineAnimation() {
            this.animation = animation;
            let that = this;
            let scode = true;
            this.timer = setInterval(
                function () {
                    if (scode) {
                        animation.translateY(260).step({
                            duration: 1500,
                        });
                        scode = !scode;
                    } else {
                        animation.translateY(-10).step({
                            duration: 1500,
                        });
                        scode = !scode;
                    }
                    that.animation = animation.export();
                }.bind(this),
                1500
            );
        },
        //  关闭弹框
        //  关闭弹框
        closeModal() {
            this.modal = false
        },
        // 相机初始化完成回调函数
        onCameraInitDone() {
            // setInterval(() => {
            // 	this.$refs.camera.scanCode();
            // }, 1000);
        },
        /**扫码成功*/
        onScancode(e) {
            // uni.showModal({
            //     title: '提示',
            //     content: e,
            // });
            console.log(e.detail.result);
            this.getOrderIdFromUrl(e.detail.result)
        },
        //  获取订单
        getOrderIdFromUrl(url) {
            try {
                let march = url.match(/orderId=(\d+)/)
                //  传递值过去
                uni.navigateTo({
                    url: '/pages_module/orderVerifica/index?orderId=' + march[1]
                })
            } catch (error) {
                this.modal = true
                this.promptList = ['此二维码/条码无效', '请扫描正常的二维码/条码']
            }
        },
        //  打开相册
        openAlbum() {
            uni.chooseImage({
                count: 1, // 最多可以选择的图片张数
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album'], // 选择图片的来源，相册
                success: function (res) {
                    // console.log(res,res.tempFiles[0].path);
                    uni.scanCode({
                        path: res.tempFiles[0].path,
                        success: function (res) {
                            console.log('二维码内容为：' + res.result)
                        },
                        fail: function (res) {
                            console.log('识别二维码失败')
                        }
                    })
                }
            })
        },
        // 去到输入验劵
        goCoupons() {
            uni.navigateTo({
                url: '/pages_module/scanCoupons/index'
            })
        },
        backClick() {
            uni.navigateBack()
        }
    },
}
</script>

<style lang="scss" scoped>
%btn {
    width: 55rpx;
    height: 13rpx;
    background-color: #fff;
    position: relative;
}

%btnAfter {
    content: '';
    position: absolute;
    width: 13rpx;
    height: 55rpx;
    background-color: #fff;
}

.scanCode {
    width: 100vw;
    height: 100vh;
    background: url("https://jufeng-shop-1317254189.cos.ap-guangzhou.myqcloud.com/1717469011005-bg.png") center;
    background-size: 100% 100%;
    position: relative;

    .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: #FFFFFF;
        }
    }

    .scanning {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        @include flex(center, column, 30rpx);

        .scan-box {
            width: 452rpx;
            height: 452rpx;
            position: relative;

            .border-box {
                @extend %btn;
                position: absolute;
                left: -5rpx;
                top: -5rpx;

                &::after {
                    @extend %btnAfter;
                    left: -2rpx;
                    top: 0;
                }
            }

            .border-box2 {
                @extend %btn;
                position: absolute;
                right: -5rpx;
                top: -5rpx;

                &::after {
                    @extend %btnAfter;
                    right: -2rpx;
                    top: 0;
                }
            }

            .border-box3 {
                @extend %btn;
                position: absolute;
                right: -5rpx;
                bottom: -5rpx;

                &::after {
                    @extend %btnAfter;
                    right: -2rpx;
                    bottom: 0;
                }
            }

            .border-box4 {
                @extend %btn;
                position: absolute;
                left: -5rpx;
                bottom: -5rpx;

                &::after {
                    @extend %btnAfter;
                    left: -2rpx;
                    bottom: 0;
                }
            }

            .scan-camera {
                width: 100%;
                height: 100%;
            }

            .scan-animation {
                position: absolute;
                top: 5%;
                left: 0;
                width: 100%;
                height: 3rpx;
                background-color: $primary-color;
                border-radius: 50%;
            }
        }

        .scab-txt {
            font-size: 28rpx;
            color: #FFFFFF;
        }
    }

    .btn-list {
        position: absolute;
        left: 50%;
        bottom: 104rpx;
        transform: translateX(-50%);
        @include flex(center, null, 60rpx);

        .btn {
            width: 276rpx;
            height: 108rpx;
            background: rgba(255, 255, 255, 0.4);
            @include flex(center, null, 22rpx);
            border-radius: 24rpx;

            image {
                width: 44rpx;
                height: 36rpx;
                display: block;
            }

            text {
                font-size: 36rpx;
                color: #E6E4E5;
            }
        }
    }

}
</style>