caiyunyi/components/ownWaterTabbar.vue

<template>
    <view class="main">
        <div class="content">
            <div class="tabItem" @click="goPages('/pages/ownWater/index')">
                <image class="tabItemIcon" :src="selectIndex === '/pages/ownWater/index'
                    ? '/static/images/shopTabbar/active_classification.png'
                    : '/static/images/shopTabbar/classification.png'
                    " />
                <span class="tabItemText" :style="{
                    color: selectIndex === '/pages/ownWater/index' ? '#1890FF' : '#3A3D48',
                }">自有水分类</span>
            </div>

            <div class="tabItem" @click="goPages('/pages/ownWater/waterShopCar')">
                <span class="shopCarNumber" v-if="shopCount > 0">{{ shopCount }}</span>
                <image class="tabItemIcon" :src="selectIndex === '/pages/ownWater/waterShopCar'
                    ? '/static/images/shopTabbar/active_shopCar.png'
                    : '/static/images/shopTabbar/shopCar.png'
                    " />
                <span class="tabItemText" :style="{
                    color: selectIndex === '/pages/ownWater/waterShopCar' ? '#1890FF' : '#3A3D48',
                }">购物车</span>
            </div>

            <div class="tabItem" @click="goPages('/pages/ownWater/waterOrder')">
                <image class="tabItemIcon" :src="selectIndex === '/pages/ownWater/waterOrder'
                    ? '/static/images/shopTabbar/active_user.png'
                    : '/static/images/shopTabbar/user.png'
                    " />
                <span class="tabItemText" :style="{
                    color: selectIndex === '/pages/ownWater/waterOrder' ? '#1890FF' : '#3A3D48',
                }">自有水订单</span>
            </div>
        </div>
    </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            selectIndex: "/pages/ownWater/index",
            shopCount: 0,
        };
    },
    computed: {
        ...mapGetters({
            user: "user",
        }),
    },
    props: {
        page: {
            type: String,
            default: "",
        },
        shopCarLength: {
            type: Number,
            default: 0,
        }
    },
    watch: {
        page: {
            handler(value) {
                this.selectIndex = value;
            },
            deep: true,
            immediate: true,
        },
        shopCarLength: {
            handler(value) {
                this.shopCount = value;
            },
            deep: true,
            immediate: true,
        },
    },
    onShow() {
        this.syncCartCount();
    },
    methods: {
        syncCartCount() {
            const cart = uni.getStorageSync("waterShopCar") || [];
            this.shopCount = cart.reduce((acc, item) => acc + (item.count || 0), 0);
        },
        goPages(pageIndex) {
            if (this.selectIndex === pageIndex) {
                return;
            }
            uni.redirectTo({
                url: pageIndex,
            });
        },
    },
};
</script>

<style lang="less" scoped>
.main {
    width: 100vw;
    position: fixed;
    bottom: 0rpx;
    background: #ffffff;
    border-top: 1px solid #e8e8ea;
    box-sizing: border-box;
    z-index: 999;

    .content {
        width: 100%;
        height: 50px;
        background: #f7f8f8;
        display: flex;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom);

        .tabItem {
            flex: 1;
            height: 100%;
            box-sizing: border-box;
            padding-top: 10rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;

            .shopCarNumber {
                position: absolute;
                top: 0;
                left: 55%;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 20rpx;
                color: #fdfdfd;
                line-height: 28rpx;
                background: #4BCB7E;
                border-radius: 16rpx;
                padding: 2rpx 10rpx;
            }

            .tabItemIcon {
                width: 48rpx;
                height: 48rpx;
                margin-bottom: 4rpx;
            }

            .tabItemText {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 20rpx;
                color: #3a3d48;
                line-height: 28rpx;
                text-align: justify;
            }
        }
    }
}
</style>