ctms-client/pages/ctms/tabbar/mid/index.vue

<template>
    <view class="content" :class="active">

    </view>
    <view class="tabbar-box-wrap">
        <view class="tabbar-box">
            <view class="tabbar-box-item" @click="goToPage('order/create/create')">
                <image class="box-image" src="@/static/img/tabbar/more/edit.png" mode="aspectFit"></image>
                <text class="explain">在线下单</text>
            </view>

            <view class="tabbar-box-item" @click="tel()">
                <image class="box-image" src="@/static/img/tabbar/more/qa.png" mode="aspectFit"></image>
                <text class="explain">电话沟通</text>
            </view>

            <!-- #ifdef APP -->
            <!-- <view class="tabbar-box-item" @click="scan">
                <image class="box-image" src="@/static/img/tabbar/more/scan.png" mode="aspectFit"></image>
                <text class="explain">扫码</text>
            </view> -->
            <!-- #endif -->

            <view class="tabbar-box-item" @click="goToPage('orderpre/create/create')">
                <image class="box-image" src="@/static/img/tabbar/more/search.png" mode="aspectFit"></image>
                <text class="explain">询问价格</text>
            </view>
        </view>

    </view>
</template>

<script>
    import config from "@/config/ctms.config.js";
    import hi from '@/common/util.js';
    export default {
        data() {
            return {
                active: false
            };
        },
        onLoad() {},
        onShow() {
            // setTimeout(() => {
            this.active = true;
            // }, 500);
        },
        onHide() {
            this.active = false;
        },
        methods: {
            goToPage(url) {
                if (!url) return;
                url = config.pageDir + url;
                uni.navigateTo({
                    url
                });
            },
            tel() {
                var phone = config.kfPhone;
                // hi.tel(phone);
                uni.makePhoneCall({
                    phoneNumber: phone
                })
            },

            //扫码
            scan() {
                var _that = this;
                uni.scanCode({
                    scanType: ['barCode', 'qrCode'],
                    success(res) {
                        console.log('扫码结果', res);
                        _that.scanRes(res);
                    },
                    fail() {
                        uni.showToast({
                            title: '扫码错误'
                        })
                    }
                })
            },
            //扫码结果处理
            scanRes(res) {
                var _r = res.result;
                //'https://u.wechat.com/ME4no24MU8DO0ark5TS5PEc'   微信个人二维码
                // https://w.url.cn/s/AKB4Eje?cak=GvVLZD6AkOhHn_usbiFQxQ  微信发票二维码
                // https://qr.4pyun.com/discount?token=5381321504173D00AD1866439E6A39D6 瑞都停车场优惠券二维码
                var _path = res.path; //二维码携带的路径
                ///storage/emulated/0/Android/data/cn.hiluker.ctmsclient/apps/__UNI__B63B6BD/doc/uniapp_temp/compressed/1722789622562_mmexport1722789546405.jpg
                if (_r.substring(0, 4) === 'http') {
                    console.log('应该跳转', _r)
                    uni.navigateTo({
                        url: '/pages/common/webview/index?url=' + _r,
                    });
                }
            }
        }
    };
</script>

<style lang="scss" scoped>
    .content {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        /* #ifdef H5 */
        height: calc(100vh - var(--window-bottom) - var(--window-top));
        /* #endif */
        /* #ifndef H5 */
        height: 100vh;
        /* #endif */
        transition: opacity 0.3s;

        background-image: url('@/static/logo.png');
        background-size: 30%;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.5;

        &.active {
            opacity: 1;
        }
    }

    /* 创建一个伪元素来覆盖整个元素，并设置透明度 */
    .content::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        /* 设置白色半透明遮罩 */
        z-index: -1;
    }

    .tabbar-box-wrap {
        position: absolute;
        width: 100%;
        padding: 50upx;
        box-sizing: border-box;
        bottom: 0;
        left: 0;

        .tabbar-box {
            position: relative;
            display: flex;
            width: 100%;
            background: #fff;
            border-radius: 20upx;
            padding: 15upx 20upx;
            box-sizing: border-box;
            z-index: 2;
            box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.1);

            &:after {
                content: '';
                position: absolute;
                bottom: -16upx;
                left: 0;
                right: 0;
                margin: auto;
                width: 50upx;
                height: 50upx;
                transform: rotate(45deg);
                background: #fff;
                z-index: 1;
                box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
                border-radius: 2px;
            }

            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: #ffffff;
                border-radius: 20upx;
                z-index: 2;
            }

            .tabbar-box-item {
                // position: relative;
                width: 100%;
                z-index: 3;
                margin: 10upx;
                color: $uni-color-subtitle;
                text-align: center;
                font-size: $uni-font-size-base;

                .box-image {
                    width: 100%;
                    height: $uni-img-size-lg;
                }
            }
        }
    }
</style>