添加tabbar及分类

components/merchant-tabbar/MerchantTabBar.uvue

@@ -0,0 +1,173 @@
+<!--
+  商家端自定义 TabBar 组件
+  - 仅在 merchant Tab 页中使用
+  - 支持微信小程序 custom tabBar 模式
+  - 底部安全区自动适配
+-->
+<template>
+  <view class="merchant-tabbar" :style="{ paddingBottom: safeBottom }">
+    <view
+      v-for="(item, index) in tabs"
+      :key="index"
+      class="tab-item"
+      :class="{ active: currentIndex === index }"
+      @click="switchTab(index)"
+    >
+      <view class="tab-icon-wrap">
+        <text class="tab-icon">{{ item.icon }}</text>
+        <view v-if="item.badge > 0" class="tab-badge">
+          <text class="badge-text">{{ item.badge > 99 ? '99+' : item.badge }}</text>
+        </view>
+      </view>
+      <text class="tab-text">{{ item.text }}</text>
+    </view>
+  </view>
+</template>
+
+<script lang="uts">
+  export default {
+    props: {
+      current: {
+        type: Number,
+        default: 0
+      },
+      badges: {
+        type: Object,
+        default: () => ({})
+      }
+    },
+
+    data() {
+      return {
+        currentIndex: this.current as number,
+        safeBottom: '0px',
+        tabs: [
+          { text: '首页', icon: '🏠', path: '/pages/mall/merchant/index', badge: 0 },
+          { text: '消息', icon: '💬', path: '/pages/mall/merchant/messages', badge: 0 },
+          { text: '订单', icon: '📋', path: '/pages/mall/merchant/orders', badge: 0 },
+          { text: '成长', icon: '🚀', path: '/pages/mall/merchant/growth', badge: 0 },
+          { text: '我的', icon: '👤', path: '/pages/mall/merchant/profile', badge: 0 }
+        ]
+      }
+    },
+
+    watch: {
+      current(val: number) {
+        this.currentIndex = val
+      },
+      badges(val: Record<string, number>) {
+        this.updateBadges(val)
+      }
+    },
+
+    mounted() {
+      this.initSafeArea()
+      this.currentIndex = this.current
+    },
+
+    methods: {
+      initSafeArea() {
+        // #ifdef MP-WEIXIN
+        try {
+          const info = wx.getWindowInfo()
+          const safeAreaBottom = info.screenHeight - info.safeArea.bottom
+          if (safeAreaBottom > 0) {
+            this.safeBottom = safeAreaBottom + 'px'
+          }
+        } catch (e) {}
+        // #endif
+      },
+
+      updateBadges(badgeMap: Record<string, number>) {
+        const keys = ['index', 'messages', 'orders', 'growth', 'profile']
+        for (let i = 0; i < keys.length; i++) {
+          if (badgeMap[keys[i]] != null) {
+            this.tabs[i].badge = badgeMap[keys[i]]
+          }
+        }
+      },
+
+      switchTab(index: number) {
+        if (this.currentIndex === index) return
+        this.currentIndex = index
+        uni.reLaunch({
+          url: this.tabs[index].path
+        })
+      }
+    }
+  }
+</script>
+
+<style>
+  .merchant-tabbar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    background-color: #ffffff;
+    border-top-width: 1rpx;
+    border-top-style: solid;
+    border-top-color: #eeeeee;
+    z-index: 999;
+    padding-top: 16rpx;
+  }
+
+  .tab-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-bottom: 12rpx;
+    position: relative;
+  }
+
+  .tab-icon-wrap {
+    position: relative;
+    margin-bottom: 8rpx;
+  }
+
+  .tab-icon {
+    font-size: 48rpx;
+    line-height: 1;
+    filter: grayscale(100%) opacity(0.45);
+  }
+
+  .tab-item.active .tab-icon {
+    filter: none;
+  }
+
+  .tab-text {
+    font-size: 22rpx;
+    color: #999999;
+  }
+
+  .tab-item.active .tab-text {
+    color: #ff5000;
+    font-weight: bold;
+  }
+
+  .tab-badge {
+    position: absolute;
+    top: -10rpx;
+    right: -20rpx;
+    min-width: 32rpx;
+    height: 32rpx;
+    background-color: #ff3b30;
+    border-radius: 16rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-left: 8rpx;
+    padding-right: 8rpx;
+  }
+
+  .badge-text {
+    font-size: 20rpx;
+    color: #ffffff;
+    font-weight: bold;
+  }
+</style>