feat: 平价专区tab切换

pages/supply_chain/supply_chain.vue

@@ -7,7 +7,8 @@
         <text class="text-28 text-fu" style="margin-left: 12rpx">搜索</text>
       </view>
     </view>
-    <view class="tab-view">
+    <!-- 原来的tab切换 -->
+    <!-- <view class="tab-view">
       <view
         class="tab-list"
         @click="onTab(index)"
@@ -23,6 +24,27 @@
         >
         <view class="line" v-if="curTab == index"></view>
       </view>
+    </view> -->
+    <view class="tab-box">
+      <view
+        class="tab-item"
+        v-for="(item, index) in tabArr"
+        :key="index"
+        @click="onTab(index)"
+      >
+        <image
+          :src="curTab == index ? item.img : item.greyImg"
+          mode="aspectFill"
+          class="tab-img"
+        ></image>
+        <view
+          class="tab-name"
+          :style="{
+            color: curTab == index ? '#7A35F6' : '#666',
+          }"
+          >{{ item.name }}</view
+        >
+      </view>
     </view>
     <view class="setting-view">
       <view class="name-box">
@@ -35,7 +57,6 @@
           @init="mescrollInit"
           :fixed="false"
         >
-         
           <!-- 原来单个 v-for 替换成两列 -->
           <view class="mescrollUniView">
             <view class="fall-col">
@@ -86,6 +107,28 @@ export default {
     return {
       dataList: [],
       tabList: [{ name: "推荐" }],
+      tabArr: [
+        {
+          img: "/static/common/xrjx.png",
+          greyImg: "/static/common/xrjx_grey.png",
+          name: "信任精选",
+        },
+        {
+          img: "/static/common/cdjk.png",
+          greyImg: "/static/common/cdjk_grey.png",
+          name: "吃的健康",
+        },
+        {
+          img: "/static/common/qwhb.png",
+          greyImg: "/static/common/qwhb_grey.png",
+          name: "全网爆款",
+        },
+        {
+          img: "/static/common/yxhw.png",
+          greyImg: "/static/common/yxhw_grey.png",
+          name: "严选好物",
+        },
+      ],
       curTab: 0,
       upOption: {
         auto: false,
@@ -189,7 +232,7 @@ export default {
         .filter(Boolean);
       this.rightList = this.dataList
         .map((item, index) => {
-          if (index % 2 != 0)return item;
+          if (index % 2 != 0) return item;
           return null;
         })
         .filter(Boolean);
@@ -240,6 +283,32 @@ export default {
     border-radius: 16rpx;
   }
 }
+.tab-box {
+  width: 100%;
+  height: 160rpx;
+  min-height: 80rpx;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 32rpx;
+  box-sizing: border-box;
+  background-color: #fff;
+  overflow-x: auto;
+  .tab-item {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    align-items: center;
+    .tab-img {
+      width: 56rpx;
+      height: 56rpx;
+    }
+    .tab-name {
+      font-size: 28rpx;
+      margin-top: 24rpx;
+    }
+  }
+}
 .tab-view {
   width: 100%;
   height: 80rpx;