sj-miniprogram/components/custom-tabbar/custom-tabbar.vue

<template>
  <view class="custom-tabbar">
    <view 
      class="tabbar-item" 
      v-for="(item, index) in list" 
      :key="index"
      @tap="switchTab(item.pagePath, index)"
    >
      <view class="tabbar-icon-container">
        <view 
          v-if="item.pagePath === '/pages/message/message' && unreadMessageCount > 0"
          class="badge-div" 
        >{{ unreadMessageCount }}</view>
        <image 
          class="tabbar-icon" 
          :src="activeIndex === index ? item.selectedIconPath : item.iconPath" 
          mode="aspectFit"
        ></image>
      </view>
      <text 
        class="tabbar-text" 
        :style="{ color: activeIndex === index ? selectedColor : color }"
      >{{ item.text }}</text>
    </view>
  </view>
</template>

<script setup lang="js">
import { ref, onMounted, computed } from 'vue';

import { messageStore } from '../../store/message.js';

const props = defineProps({
    activeIndex: {
        type: Number,
        default: 0
    }
});

const color = ref('#999999');
const selectedColor = ref('#1F6CFF');
const unreadMessageCount = computed(() => messageStore.unreadCount);

// Mock data: In a real scenario, this could be fetched from an API
const list = ref([
    {
        pagePath: '/pages/jobs/jobs',
        iconPath: '/static/tabbar/jobs_n.png',
        selectedIconPath: '/static/tabbar/jobs_a.png',
        text: '岗位'
    },
    {
        pagePath: '/pages/assessment/assessment',
        iconPath: '/static/tabbar/assess_n.png',
        selectedIconPath: '/static/tabbar/assess_a.png',
        text: '测评'
    },
    {
        pagePath: '/pages/message/message',
        iconPath: '/static/tabbar/msg_n.png',
        selectedIconPath: '/static/tabbar/msg_a.png',
        text: '消息'
    },
    {
        pagePath: '/pages/my/my',
        iconPath: '/static/tabbar/my_n.png',
        selectedIconPath: '/static/tabbar/my_a.png',
        text: '我的'
    }
]);

const switchTab = (path, index) => {
    if (props.activeIndex !== index) {
        uni.switchTab({
            url: path
        });
    }
};

onMounted(() => {
    uni.hideTabBar({
      animation: false
    });
});
</script>

<style lang="scss" scoped>
.custom-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100rpx;
    background-color: #FFFFFF;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -1rpx 10rpx rgba(0, 0, 0, 0.05);
    z-index: 999;
    padding-bottom: env(safe-area-inset-bottom);

    .tabbar-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;

        .tabbar-icon-container {
            position: relative;
            width: 48rpx;
            height: 48rpx;
            margin-bottom: 4rpx;

            .tabbar-icon {
                width: 100%;
                height: 100%;
            }

            .badge {
                position: absolute;
                top: -6rpx;
                right: -10rpx;
                width: 28rpx;
                height: 28rpx;
                background-color: #FF3B30;
                border-radius: 50%;
                border: 2rpx solid #FFF;
                z-index: 10;
                flex-shrink: 0;
                // Since user wants an 11 inside badge, let's just make it red bubble with hardcoded ::after for text
                &::after {
                    content: "11";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%) scale(0.8);
                    color: white;
                    font-size: 20rpx;
                    font-weight: bold;
                }
            }
        }

        .tabbar-text {
            font-size: 20rpx;
            line-height: 1;
        }
    }
}

// Ensure the badge with "11" style is correctly scoped or use a normal div for badge
.badge-div {
    position: absolute;
    top: -6rpx;
    right: -14rpx;
    min-width: 32rpx;
    height: 32rpx;
    background-color: #FF2B2B;
    border-radius: 16rpx;
    color: #FFF;
    font-size: 20rpx;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 4rpx;
    border: 2rpx solid #FFFFFF;
}
</style>