feat(approve): implement custom tab component with dynamic badge support

- Create a custom tab layout with flexbox for better responsiveness
- Add active state styling for tabs to enhance user interaction
- Introduce a badge component to display counts on tabs
- Update tab data structure to include base names and counts for dynamic updates
- Adjust tab click handling to reflect the current active tab visually

assets/css/approve/index.scss

@@ -11,6 +11,52 @@
   .tabs-wrap {
     background: #ffffff;
     margin-bottom: 20rpx;
+    position: relative;
+
+    .custom-tabs {
+      display: flex;
+      width: 100%;
+    }
+
+    .tab-item {
+      flex: 1;
+      padding: 24rpx 20rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      cursor: pointer;
+      transition: all 0.25s ease;
+      min-height: 80rpx;
+
+      .tab-text {
+        font-size: 28rpx;
+        font-weight: 400;
+        color: #909399;
+        transition: all 0.25s ease;
+        line-height: 1.2;
+      }
+
+      &.active {
+        .tab-text {
+          color: #3b82f6;
+          font-weight: 600;
+          font-size: 32rpx;
+        }
+      }
+    }
+
+    .tab-line {
+      position: absolute;
+      bottom: 0;
+      left: 25%;
+      width: 20%;
+      height: 4rpx;
+      background: #3b82f6;
+      border-radius: 2rpx;
+      transition: all 0.3s ease;
+      transform-origin: center;
+    }
   }
 
   .filter-bar {

pages/approve/index.vue

@@ -5,7 +5,13 @@
         </view>
 
         <view class="tabs-wrap">
-            <u-tabs :list="tabList" :current="currentTab" @click="onTabChange" :scrollable="false" lineColor="#3b82f6" lineWidth="50" lineHeight="4" :activeStyle="{ color: '#3b82f6', fontWeight: '600', fontSize: '32rpx' }" :inactiveStyle="{ color: '#909399', fontSize: '28rpx', fontWeight: '400' }" itemStyle="padding: 24rpx 40rpx"></u-tabs>
+            <view class="custom-tabs row">
+                <view v-for="(tab, index) in tabList" :key="index" class="tab-item row verCenter rowCenter" :class="{ active: currentTab === index }" @click="onTabChange({ index })">
+                    <text class="tab-text">{{ tab.baseName || tab.name }}</text>
+                    <u-badge v-if="tab.count > 0" :value="tab.count" bgColor="#ff4757" color="#ffffff" :show="true" :max="99" :absolute="false" style="margin-left: 6rpx; font-size: 20rpx;"></u-badge>
+                </view>
+            </view>
+            <view class="tab-line" :style="{ left: currentTab === 0 ? '25%' : '75%', transform: 'translateX(-50%)' }"></view>
         </view>
 
         <view class="list-wrap">
@@ -73,8 +79,8 @@
                 order_sn: '',
                 currentTab: 0,
                 tabList: [
-                    { name: '待处理' },
-                    { name: '已处理' }
+                    { name: '待处理', baseName: '待处理', count: 0 },
+                    { name: '已处理', baseName: '已处理', count: 0 }
                 ],
                 pendingList: [],
                 doneList: [],
@@ -146,7 +152,12 @@
                         if (this.currentTab === 0) {
                             this.pendingList = page === 1 ? list : [...this.pendingList, ...list];
                             this.pendingTotal = total;
-                            this.$set(this.tabList, 0, { name: total ? `待处理(${total})` : '待处理' });
+                            // 更新tab中的数字badge
+                            this.$set(this.tabList, 0, {
+                                name: '待处理',
+                                baseName: '待处理',
+                                count: total
+                            });
                         } else {
                             this.doneList = page === 1 ? list : [...this.doneList, ...list];
                             this.doneTotal = total;