couponCenter_mpapp/src/tabbar/index.vue

<script setup lang="ts">
// i-carbon-code
import type { CustomTabBarItem } from './types'
import { useLoadingStore } from '@/store/loading'
import { customTabbarEnable, needHideNativeTabbar, tabbarCacheEnable } from './config'
import { tabbarList, tabbarStore } from './store'

// #ifdef MP-WEIXIN
// 将自定义节点设置成虚拟的（去掉自定义组件包裹层），更加接近Vue组件的表现，能更好的使用flex属性
defineOptions({
    virtualHost: true,
})

// #endif
const loadingStore = useLoadingStore()

/**
 * 中间的鼓包tabbarItem的点击事件
 */
function handleClickBulge() {
    uni.showToast({
        title: '点击了中间的鼓包tabbarItem',
        icon: 'none',
    })
}

function handleClick(index: number) {
    // 点击原来的不做操作
    if (index === tabbarStore.curIdx) {
        return
    }

    // 显示加载页
    loadingStore.showLoading('切换页面中...')

    if (tabbarList[index].isBulge) {
        handleClickBulge()
        return
    }
    const url = tabbarList[index].pagePath
    tabbarStore.setCurIdx(index)
    if (tabbarCacheEnable) {
        uni.switchTab({
            url,
            complete: () => {
                // 切换完成后隐藏加载页
                loadingStore.hideLoading()
            }
        })
    }
    else {
        uni.navigateTo({
            url,
            complete: () => {
                // 切换完成后隐藏加载页
                loadingStore.hideLoading()
            }
        })
    }
}
// #ifndef MP-WEIXIN || MP-ALIPAY
// 因为有了 custom:true， 微信里面不需要多余的hide操作
onLoad(() => {
    // 解决原生 tabBar 未隐藏导致有2个 tabBar 的问题
    needHideNativeTabbar
        && uni.hideTabBar({
            fail(err) {
                console.log('hideTabBar fail: ', err)
            },
            success(res) {
                // console.log('hideTabBar success: ', res)
            },
        })
})
// #endif

// #ifdef MP-ALIPAY
onMounted(() => {
    // 解决支付宝自定义tabbar 未隐藏导致有2个 tabBar 的问题; 注意支付宝很特别，需要在 onMounted 钩子调用
    customTabbarEnable // 另外，支付宝里面，只要是 customTabbar 都需要隐藏
        && uni.hideTabBar({
            fail(err) {
                console.log('hideTabBar fail: ', err)
            },
            success(res) {
                // console.log('hideTabBar success: ', res)
            },
        })
})
// #endif
const activeColor = 'var(--wot-color-theme, #FF654F )'
const inactiveColor = '#888888'
function getColorByIndex(index: number) {
    return tabbarStore.curIdx === index ? activeColor : inactiveColor
}

function getImageByIndex(index: number, item: CustomTabBarItem) {
    if (!item.iconActive) {
        console.warn('image 模式下，需要配置 iconActive (高亮时的图片），否则无法切换高亮图片')
        return item.icon
    }
    return tabbarStore.curIdx === index ? item.iconActive : item.icon
}
</script>

<template>
    <view v-if="customTabbarEnable" class="h-100rpx pb-safe">
        <view class="border-and-fixed bg-white" @touchmove.stop.prevent>
            <view class="h-100rpx flex items-center pt-1">
                <view v-for="(item, index) in tabbarList" :key="index"
                    class="flex flex-1 flex-col items-center justify-center" :style="{ color: getColorByIndex(index) }"
                    @click="handleClick(index)">
                    <view v-if="item.isBulge" class="relative">
                        <!-- 中间一个鼓包tabbarItem的处理 -->
                        <view class="bulge">
                            <!-- TODO 2/2: 中间鼓包tabbarItem配置：通常是一个图片，或者icon，点击触发业务逻辑 -->
                            <!-- 常见的是：扫描按钮、发布按钮、更多按钮等 -->
                            <image class="mt-6rpx h-200rpx w-200rpx" src="/static/tabbar/scan.png" />
                        </view>
                    </view>
                    <view v-else class="relative px-3 text-center">
                        <template v-if="item.iconType === 'uiLib'">
                            <!-- TODO: 以下内容请根据选择的UI库自行替换 -->
                            <!-- 如：<wd-icon name="home" /> (https://wot-design-uni.cn/component/icon.html) -->
                            <!-- 如：<uv-icon name="home" /> (https://www.uvui.cn/components/icon.html) -->
                            <!-- 如：<sar-icon name="image" /> (https://sard.wzt.zone/sard-uniapp-docs/components/icon)(sar没有home图标^_^) -->
                            <!-- <wd-icon :name="item.icon" size="20" /> -->
                        </template>
                        <template v-if="item.iconType === 'unocss' || item.iconType === 'iconfont'">
                            <view :class="item.icon" class="text-20px" />
                        </template>
                        <template v-if="item.iconType === 'image'">
                            <image :src="getImageByIndex(index, item)" mode="scaleToFill" class="h-41rpx w-42rpx" />
                        </template>
                        <view class="mt-15rpx text-22rpx">
                            {{ item.text }}
                        </view>
                        <!-- 角标显示 -->
                        <view v-if="item.badge">
                            <template v-if="item.badge === 'dot'">
                                <view class="absolute right-0 top-0 h-2 w-2 rounded-full bg-#f56c6c" />
                            </template>
                            <template v-else>
                                <view
                                    class="absolute top-0 box-border h-5 min-w-5 center rounded-full bg-#f56c6c px-1 text-center text-xs text-white -right-3">
                                    {{ item.badge > 99 ? '99+' : item.badge }}
                                </view>
                            </template>
                        </view>
                    </view>
                </view>
            </view>

            <view class="pb-safe" />
        </view>
    </view>
</template>

<style scoped lang="scss">
.border-and-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;

    border-top: 1px solid #eee;
    box-sizing: border-box;
}

// 中间鼓包的样式
.bulge {
    position: absolute;
    top: -20px;
    left: 50%;
    transform-origin: top center;
    transform: translateX(-50%) scale(0.5) translateY(-33%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250rpx;
    height: 250rpx;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: inset 0 0 0 1px #fefefe;

    &:active {
        // opacity: 0.8;
    }
}
</style>