feat：评价区改造

pages/supply_chain/supply_chain.vue

@@ -14,7 +14,8 @@
           <image :src="curTab == item.id ? item.iconActive : item.icon" mode="aspectFill" class="tab-img">
           </image>
           <view class="tab-name" :style="{
-            color: curTab == item.id ? '#7A35F6' : '#666',
+            color: curTab == item.id ? getTabColor(item) : '#999',
+            fontWeight: curTab == item.id ? 'bold' : 'normal'
           }">{{ item.name }}</view>
         </view>
       </view>
@@ -23,15 +24,19 @@
       @up="upCallback" :up="upOption" :down="downOption" @init="mescrollInit">
       <view class="setting-view">
         <view class="name-box">
-          <!-- 原来单个 v-for 替换成两列 -->
-          <view class="mescrollUniView">
+          <!-- 传1: 图2单列展示 / 传2: 图1双列瀑布流 -->
+          <view class="single-col" v-if="itemType == 1">
+            <ParityProductItem v-for="(item, i) in dataList" :key="item.id" :obj="item" :type="itemType"
+              :tag-name="curTabName" :tag-color="curTabColor" @ok="onJumpShop" style="margin-top: 24rpx" />
+          </view>
+          <view class="mescrollUniView" v-else>
             <view class="fall-col">
-              <ParityProductItem v-for="(item, i) in leftList" :key="item.id" :obj="item" @ok="onJumpShop"
-                style="margin-top: 24rpx" />
+              <ParityProductItem v-for="(item, i) in leftList" :key="item.id" :obj="item" :type="itemType"
+                :tag-name="curTabName" :tag-color="curTabColor" @ok="onJumpShop" style="margin-top: 24rpx" />
             </view>
             <view class="fall-col">
-              <ParityProductItem v-for="(item, i) in rightList" :key="item.id" :obj="item" @ok="onJumpShop"
-                style="margin-top: 24rpx" />
+              <ParityProductItem v-for="(item, i) in rightList" :key="item.id" :obj="item" :type="itemType"
+                :tag-name="curTabName" :tag-color="curTabColor" @ok="onJumpShop" style="margin-top: 24rpx" />
             </view>
           </view>
         </view>
@@ -58,6 +63,15 @@ export default {
   mixins: [MescrollMixin],
   components: { Header, TopSafe, MyBtn, ParityProductItem, CustomTabBar, MescrollUni },
   computed: {
+    curTabItem() {
+      return this.tabArr.find(item => item.id == this.curTab) || this.tabArr[0] || {};
+    },
+    curTabName() {
+      return this.curTabItem.name || '信任精选';
+    },
+    curTabColor() {
+      return this.getTabColor(this.curTabItem);
+    },
     isApp() {
       // #ifdef APP-PLUS
       return true;
@@ -89,26 +103,31 @@ export default {
   },
   data() {
     return {
+      itemType: 1, // 1: 图2样式, 2: 图1样式
       dataList: [],
       tabArr: [
         {
           id: 7,
-          name: '信任专享',
+          name: '信任精选',
+          color: '#7A35F6',
           icon: 'https://static.tbmall.xin/static/new-home/xinren.png',
           iconActive: 'https://static.tbmall.xin/static/new-home/xinren_active.png',
         }, {
           id: 15,
           name: '全网爆款',
+          color: '#FF2A2A',
           icon: 'https://static.tbmall.xin/static/new-home/baokuan.png',
           iconActive: 'https://static.tbmall.xin/static/new-home/baokuan_active.png',
         }, {
           id: 16,
           name: '低价好物',
+          color: '#FF9800',
           icon: 'https://static.tbmall.xin/static/new-home/cart.png',
           iconActive: 'https://static.tbmall.xin/static/new-home/cart_active.png',
         }, {
           id: 6,
           name: '品牌特卖',
+          color: '#333333',
           icon: 'https://static.tbmall.xin/static/new-home/huiyuan.png',
           iconActive: 'https://static.tbmall.xin/static/new-home/huiyuan_active.png',
         },
@@ -160,12 +179,21 @@ export default {
           this.downCallback();
         }
       } else {
-
-        this.getSearchList()
+        this.getSearchList();
       }
     }
   },
   methods: {
+    getTabColor(item) {
+      if (!item) return '#7A35F6';
+      if (item.color) return item.color;
+      const name = item.name || '';
+      if (name.includes('信任')) return '#7A35F6';
+      if (name.includes('爆款')) return '#FF2A2A';
+      if (name.includes('低价') || name.includes('好物')) return '#FF9800';
+      if (name.includes('品牌') || name.includes('特卖')) return '#333333';
+      return '#7A35F6';
+    },
     /**
      * 查询分类列表
      */
@@ -278,7 +306,7 @@ export default {
 <style lang="scss" scoped>
 .content-two {
   min-height: 100vh;
-  background-color: #fff;
+  background-color: #f5f5f5;
 }
 
 .top-header-container {
@@ -389,6 +417,12 @@ export default {
     flex-direction: column;
     align-items: center;
 
+    .single-col {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
     .mescrollUniView {
       width: calc(100vw - 48rpx);
       display: flex;