修改易购页面的页面样式和点击选中逻辑

packages/shop/index/index.css

@@ -106,7 +106,7 @@ page {
     white-space: nowrap;
 }
 
-.slide_item_active{
+.slide_item_active text{
     color: #ff5f3c;
 }
 
@@ -315,11 +315,14 @@ page {
 }
 
 .CateList_Box {
+    width: 71.5%;
     display: flex;
     overflow: hidden;
-    position: relative;
+    /* position: relative; */
-    z-index: 9;
+    position: fixed;
+    z-index: 999;
     padding: 20rpx 10rpx;
+    background-color: #ffffff;
 }
 
 .CateList {
@@ -337,7 +340,7 @@ page {
     height: 40rpx;
     background: #F6F7FB;
     border-radius: 10rpx 10rpx 10rpx 10rpx;
-    padding: 5rpx 30rpx;
+    padding: 5rpx 20rpx;
     font-size: 26rpx;
     color: #222222;
     display: flex;
@@ -364,6 +367,10 @@ page {
     margin-left: 10rpx;
 }
 
+.CateIte{
+    margin-top: 80rpx;
+}
+
 .CateInfo {
     margin: 0 10rpx;
     padding: 10rpx 10rpx;
@@ -435,13 +442,14 @@ page {
     padding: 20rpx 12rpx;
     padding-right: 0;
     position: absolute;
+    top: 85rpx;
     z-index: 9;
     width: 100%;
 }
 
 .activeCateList .CateList_Item {
     margin-bottom: 16rpx;
-    margin-right: 28rpx;
+    margin-right: 20rpx;
 }
 
 .activeCateList .CateList_Item:nth-child(4n) {

packages/shop/index/index.vue

@@ -16,7 +16,7 @@
       <view class="slide">
         <view class="slide_con">
           <view v-for="(item, index) in CateList" :key="index" class="slide_conBox" @click="changeCate(item.id)">
-            <view class="slide_item">
+            <view class="slide_item" :class="item.id === currentCategoryId ? 'slide_item_active' : ''">
               <image :src="picUrl + item.category_pic" mode="aspectFill"></image>
               <text>{{ item.category_name }}</text>
             </view>
@@ -47,7 +47,7 @@
       <view class="slide">
         <view class="slide_con">
           <view v-for="(item, index) in CateList" :key="index" class="slide_conBox" @click="changeCate(item.id)">
-            <view class="slide_item">
+            <view class="slide_item" :class="item.id === currentCategoryId ? 'slide_item_active' : ''">
               <image :src="picUrl + item.category_pic" mode="aspectFill"></image>
               <text>{{ item.category_name }}</text>
             </view>
@@ -97,7 +97,10 @@
         <!-- 右下阴影 -->
         <view class="boxshadow2" v-if="cateListShow"></view>
 
-        <view class="CateInfo" v-for="item in tagList" :key="item.id">
+        <view class="CateIte">
+          <view class="CateInfo"
+            v-for="item in (selectedTagId === 'all' ? tagList.slice(1) : [tagList.find(t => t.id === selectedTagId) || {}])"
+            :key="item.id">
             <view class="CateInfo_tit">
               {{ item.tag_name }}
             </view>
@@ -203,6 +206,7 @@
           </view>
         </view>
       </view>
+    </view>
 
     <!-- <nav-footer :current="3" /> -->
 
@@ -275,8 +279,11 @@ export default {
       rightTopActive: 0,
       currentLeftCateId: null,
       topShow: false,
+      currentCategoryId: null,
 
       GGshow: false,
+      originalTagList: [], // 存储原始的tagList数据
+      selectedTagId: null, // 当前选中的标签ID
       CateList: [], //分类列表
       currentFirstId: "",
       leftCateList: [], //底部左侧分类
@@ -321,6 +328,8 @@ export default {
     },
 
     changeCate(id) {
+      // 更新当前选中的顶级分类ID
+      this.currentCategoryId = id;
       // 根据id查找对应的分类
       const category = this.CateList.find((item) => item.id === id);
       if (category) {
@@ -344,6 +353,8 @@ export default {
     //选择右下角分类
     checkItem(index) {
       this.rightTopActive = index;
+      // 获取选中的标签ID
+      this.selectedTagId = this.tagList[index].id;
     },
     //右下角点击更多
     topOpen() {
@@ -374,6 +385,8 @@ export default {
         console.log(res);
         this.CateList = res.commodity_category_list;
         this.firstId = res.commodity_category_list[0].id;
+        // 设置默认选中第一个分类
+        this.currentCategoryId = this.firstId;
         this.leftCateList =
           res.commodity_category_list[0].level_two_category || [];
         if (this.leftCateList.length > 0) {
@@ -390,6 +403,7 @@ export default {
     getGoodsList() {
       if (!this.secondId) {
         this.tagList = [];
+        this.originalTagList = [];
         return;
       }
       request(apiArr.getGoodsList, "POST", {
@@ -410,7 +424,13 @@ export default {
             item.isShow = false;
           });
         });
-        this.tagList = res.commodity_list;
+        // 保存原始数据
+        this.originalTagList = res.commodity_list;
+        // 添加"全部"选项并设置为默认选中
+        this.tagList = [{ id: 'all', tag_name: '全部' }, ...res.commodity_list];
+        // 默认选中"全部"选项
+        this.rightTopActive = 0;
+        this.selectedTagId = 'all';
       });
     },