修改bug

src/layout/components/search.vue

@@ -153,7 +153,7 @@ getSearchTitle(1).then((res) => {
         .el-input {
           height: 30px;
           width: 100%;
-          font-size: 16px;
+          font-size: 14px;
 
           :deep(.el-input__wrapper) {
             border: none;
@@ -203,7 +203,10 @@ getSearchTitle(1).then((res) => {
       }
 
       div {
-        margin-left: 10px;
+        margin-left: 20px;
+        &:first-child {
+          margin-left: 0px;
+        }
         &:hover {
           color: #e7000b;
         }

src/views/home/index-dataDiy.vue

@@ -67,7 +67,7 @@
     <!-- 👑 殿堂级右侧悬浮挂条 -->
     <div class="right-toolbar">
       <!-- 采购单 (悬停时呈现为纯大红背景 58x58，图2完美复刻) -->
-      <div class="toolbar-item selection-item">
+      <div class="toolbar-item selection-item" @click="onPath('/cart')">
         <!-- 购物车微型数字红圈角标 -->
         <div class="cart-badge">{{ cartCount }}</div>
         <div class="toolbar-icon-wrapper">

src/views/home/pccomponents/pages/head.vue

@@ -423,7 +423,7 @@ const warpCss = computed(() => {
           .el-input {
             height: 30px;
             width: 100%;
-            font-size: 16px;
+            font-size: 14px;
 
             :deep(.el-input__wrapper) {
               border: none;
@@ -468,10 +468,14 @@ const warpCss = computed(() => {
         margin-top: 4px;
 
         div {
-          margin-left: 10px;
+          margin-left: 20px;
           cursor: pointer;
           &:first-child {
             color: #e7000b;
+            margin-left: 0px;
+          }
+          &:hover {
+            color: #e7000b;
           }
         }
       }

src/views/search/index.vue

@@ -30,13 +30,12 @@
         <div class="head-title">分类:</div>
         <div class="head-box">
           <div
-            @click="onHead(item, type == 1 ? 'topCategoryId' : type == 2 ? 'mediumCategoryId' : 'bottomCategoryId')"
+            @click="onHead(item, type == 1 ? 'mediumCategoryId' : 'bottomCategoryId')"
             class="classify-list"
             v-for="(item, index) in classifyList"
             :key="index"
             :class="{
-              hig:
-                type == 1 ? item.id == httpObj.topCategoryId : type == 2 ? item.id == httpObj.mediumCategoryId : item.id == httpObj.bottomCategoryId
+              hig: type == 1 ? item.id == httpObj.mediumCategoryId : item.id == httpObj.bottomCategoryId
             }"
           >
             {{ item.label }}
@@ -201,7 +200,7 @@ const station = stationStore();
 const userStore = useUserStore();
 const route = useRoute();
 const type = ref<any>(1);
-const cType = ref<any>(1);
+const cType = ref<any>(0);
 const dataList = ref<any>([]);
 const checkList = ref<any>([]);
 const classifyList = ref<any>([]);
@@ -210,30 +209,6 @@ const brandList = ref<any>([]);
 const isBrandExpanded = ref(false); // 品牌列表是否展开
 const itemsPerRow = ref(6); // 每行显示的品牌数量（根据实际样式调整）
 const brandBoxRef = ref<HTMLElement | null>(null); // 品牌容器引用
-
-// 计算每行可以显示多少个品牌
-const calculateItemsPerRow = () => {
-  if (brandBoxRef.value) {
-    const containerWidth = brandBoxRef.value.clientWidth;
-    // 每个品牌项大约占用的宽度（包括gap）
-    const itemWidth = 80; // 估算值，可根据实际样式调整
-    itemsPerRow.value = Math.floor(containerWidth / itemWidth);
-  }
-};
-
-// 计算应该显示的品牌列表（收起状态下只显示前2排）
-const displayBrandList = computed(() => {
-  if (isBrandExpanded.value) {
-    return brandList.value;
-  }
-  return brandList.value.slice(0, itemsPerRow.value * 2);
-});
-
-// 切换品牌列表展开/收起
-const toggleBrandExpand = () => {
-  isBrandExpanded.value = !isBrandExpanded.value;
-};
-
 const categoryName = ref<any>('');
 const hasMore = ref(true); // 是否还有更多数据
 const way = ref<any>(1);
@@ -265,21 +240,295 @@ const sortField1 = ref<any>('');
 const sortField2 = ref<any>('');
 const sortField3 = ref<any>('');
 
+// 监听窗口大小变化，重新计算每行显示数量
+onMounted(() => {
+  initData();
+  // 等待DOM渲染完成后计算
+  nextTick(() => {
+    calculateItemsPerRow();
+  });
+  // 监听窗口resize事件
+  window.addEventListener('resize', calculateItemsPerRow);
+});
+
+// 组件卸载时移除事件监听
+onUnmounted(() => {
+  window.removeEventListener('resize', calculateItemsPerRow);
+});
+
+watch(route, () => {
+  initData();
+});
+
+// 核心修复：统一初始化函数
+const initData = () => {
+  httpObj.value.searchKeyword = '';
+  httpObj.value.topCategoryId = '';
+  httpObj.value.mediumCategoryId = '';
+  httpObj.value.bottomCategoryId = '';
+  httpObj.value.brandId = '';
+  httpObj.value.pageNum = 1;
+  type.value = route.query.type || 1;
+  cType.value = route.query.cType ? route.query.cType : 0;
+  if (route.query.input) {
+    httpObj.value.searchKeyword = route.query.input;
+  }
+  if (type.value == 1 && route.query.topCategoryId) {
+    httpObj.value.topCategoryId = route.query.topCategoryId;
+  }
+  if (type.value == 2 && route.query.mediumCategoryId) {
+    httpObj.value.mediumCategoryId = route.query.mediumCategoryId;
+  }
+  if (type.value == 3 && route.query.bottomCategoryId) {
+    httpObj.value.bottomCategoryId = route.query.bottomCategoryId;
+  }
+  if (route.query.brandId) {
+    httpObj.value.brandId = Number(route.query.brandId);
+    getBrandInfo();
+  } else {
+    getBrand();
+  }
+  getClassify();
+};
+
+// 查询品牌
+const getBrand = () => {
+  httpObj.value.brandId = '';
+  getBrandByCategoryList({
+    name: categoryName.value ? categoryName.value : '',
+    categoryId: httpObj.value.bottomCategoryId
+      ? httpObj.value.bottomCategoryId
+      : httpObj.value.mediumCategoryId
+        ? httpObj.value.mediumCategoryId
+        : httpObj.value.topCategoryId
+          ? httpObj.value.topCategoryId
+          : '',
+    pageSize: 100,
+    pageNum: 1
+  }).then((res) => {
+    if (res.code == 200) {
+      if (type.value != 1) {
+        res.rows.unshift({
+          brandName: '全部',
+          id: ''
+        });
+      }
+      brandList.value = res.rows;
+      // 品牌列表更新后重新计算每行显示数量
+      nextTick(() => {
+        calculateItemsPerRow();
+      });
+    }
+  });
+};
+
+//筛选品牌
+const remoteMethod = (res: any) => {
+  if (res) {
+    categoryName.value = res;
+  } else {
+    categoryName.value = '';
+  }
+  getBrand();
+};
+
+// 通过id查询品牌
+const getBrandInfo = () => {
+  getBrandDetail(httpObj.value.brandId).then((res) => {
+    if (res.code == 200) {
+      brandList.value = [
+        {
+          brandName: res.data.brandName,
+          id: res.data.id
+        }
+      ];
+      // 品牌列表更新后重新计算每行显示数量
+      nextTick(() => {
+        calculateItemsPerRow();
+      });
+    }
+  });
+};
+
+// 获取分类
+const getClassify = async () => {
+  if (route.query.cType) {
+    getProductCategoryTree({ platform: cType.value }).then((res) => {
+      if (res.code == 200) {
+        classifyData.value = res.data;
+        onClassify();
+      }
+    });
+  } else {
+    if (headerType.value == 'jdHeader') {
+      try {
+        const datas1 = await getProductCategoryTree({});
+        const datas2 = await jdcategoryMainList({ status: 1 });
+        datas1.data.forEach((item1: any) => {
+          datas2.rows.forEach((item2: any) => {
+            item2.label = item2.name;
+            item2.id = item2.syncCategoryId;
+            if (item2.syncCategoryId == item1.id) {
+              item2.children = item1.children ? item1.children : [];
+            }
+          });
+        });
+        classifyData.value = datas2.rows;
+        onClassify();
+      } catch (error) {}
+    } else if (headerType.value == 'dataHeader') {
+      categoryMainList({ status: 1 }).then((res) => {
+        if (res.code == 200) {
+          res.rows.forEach((item1: any) => {
+            item1.label = item1.name;
+            item1.id = item1.syncCategoryId;
+            item1.subMenus.forEach((item2: any) => {
+              item2.label = item2.name;
+              item2.id = item2.syncCategoryId;
+              item2.children.forEach((item3: any) => {
+                item3.label = item3.name;
+                item3.id = item3.syncCategoryId;
+              });
+            });
+            item1.children = item1.subMenus;
+          });
+          classifyData.value = res.rows;
+          onClassify();
+        }
+      });
+    } else {
+      getProductCategoryTree({ platform: cType.value }).then((res) => {
+        if (res.code == 200) {
+          classifyData.value = res.data;
+          onClassify();
+        }
+      });
+    }
+  }
+};
+
+const onClassify = () => {
+  const list = [...classifyData.value];
+  if (type.value == 1 && httpObj.value.topCategoryId) {
+    list.forEach((item1: any) => {
+      if (item1.id == httpObj.value.topCategoryId) {
+        if (item1.children && item1.children.length > 0) {
+          if (item1.children[0].label != '全部') {
+            item1.children.unshift({
+              label: '全部',
+              id: ''
+            });
+          }
+          classifyList.value = item1.children;
+        } else {
+          classifyList.value = [
+            {
+              label: '全部',
+              id: ''
+            }
+          ];
+        }
+      }
+    });
+  } else if (type.value == 2 && httpObj.value.mediumCategoryId) {
+    list.forEach((item1: any) => {
+      if (item1.children && item1.children.length > 0) {
+        item1.children.forEach((item2: any) => {
+          if (item2.id == httpObj.value.mediumCategoryId) {
+            httpObj.value.topCategoryId = item1.id;
+            if (item2.children && item2.children.length > 0) {
+              if (item2.children[0].label != '全部') {
+                item2.children.unshift({
+                  label: '全部',
+                  id: ''
+                });
+              }
+              classifyList.value = item2.children;
+            } else {
+              classifyList.value = [
+                {
+                  label: '全部',
+                  id: ''
+                }
+              ];
+            }
+          }
+        });
+      }
+    });
+  } else if (type.value == 3 && httpObj.value.bottomCategoryId) {
+    list.forEach((item1: any) => {
+      if (item1.children && item1.children.length > 0) {
+        item1.children.forEach((item2: any) => {
+          if (item2.children && item2.children.length > 0) {
+            item2.children.unshift({
+              label: '全部',
+              id: ''
+            });
+            item2.children.forEach((item3: any) => {
+              if (item3.id == httpObj.value.bottomCategoryId) {
+                httpObj.value.topCategoryId = item1.id;
+                httpObj.value.mediumCategoryId = item2.id;
+                classifyList.value = item2.children;
+              }
+            });
+          }
+        });
+      }
+    });
+    if ((headerType.value == 'default' && httpObj.value.bottomCategoryId) || (route.query.cType && httpObj.value.bottomCategoryId)) {
+      onAttributeList();
+    }
+  } else {
+    classifyList.value = list;
+    if (classifyList.value[0].label != '全部') {
+      classifyList.value.unshift({
+        label: '全部',
+        id: ''
+      });
+    }
+  }
+  getList();
+};
+
+// 计算每行可以显示多少个品牌
+const calculateItemsPerRow = () => {
+  if (brandBoxRef.value) {
+    const containerWidth = brandBoxRef.value.clientWidth;
+    // 每个品牌项大约占用的宽度（包括gap）
+    const itemWidth = 80; // 估算值，可根据实际样式调整
+    itemsPerRow.value = Math.floor(containerWidth / itemWidth);
+  }
+};
+
+// 计算应该显示的品牌列表（收起状态下只显示前2排）
+const displayBrandList = computed(() => {
+  if (isBrandExpanded.value) {
+    return brandList.value;
+  }
+  return brandList.value.slice(0, itemsPerRow.value * 2);
+});
+
+// 切换品牌列表展开/收起
+const toggleBrandExpand = () => {
+  isBrandExpanded.value = !isBrandExpanded.value;
+};
+
 // 计算已选的筛选条件
 const selectedFilters = computed(() => {
   const filters: Array<{ type: string; label: string; value: any }> = [];
 
   // 分类
-  if (httpObj.value.topCategoryId && type.value == 1) {
-    const category = classifyList.value.find((item: any) => item.id == httpObj.value.topCategoryId);
+  if (httpObj.value.mediumCategoryId && type.value == 1) {
+    const category = classifyList.value.find((item: any) => item.id == httpObj.value.mediumCategoryId);
     if (category) {
-      filters.push({ type: 'topCategoryId', label: `分类: ${category.label}`, value: httpObj.value.topCategoryId });
+      filters.push({ type: 'mediumCategoryId', label: `分类: ${category.label}`, value: httpObj.value.mediumCategoryId });
     }
   }
-  if (httpObj.value.mediumCategoryId && type.value == 2) {
-    const category = classifyList.value.find((item: any) => item.id == httpObj.value.mediumCategoryId);
+  if (httpObj.value.bottomCategoryId && type.value == 2) {
+    const category = classifyList.value.find((item: any) => item.id == httpObj.value.bottomCategoryId);
     if (category) {
-      filters.push({ type: 'mediumCategoryId', label: `分类: ${category.label}`, value: httpObj.value.mediumCategoryId });
+      filters.push({ type: 'bottomCategoryId', label: `分类: ${category.label}`, value: httpObj.value.bottomCategoryId });
     }
   }
   if (httpObj.value.bottomCategoryId && type.value == 3) {
@@ -430,114 +679,10 @@ const onAttributeList = () => {
   });
 };
 
-// 获取分类
-const getClassify = async () => {
-  if (headerType.value == 'jdHeader') {
-    try {
-      const datas1 = await getProductCategoryTree({});
-      const datas2 = await jdcategoryMainList({ status: 1 });
-      datas1.data.forEach((item1: any) => {
-        datas2.rows.forEach((item2: any) => {
-          item2.label = item2.name;
-          item2.id = item2.syncCategoryId;
-          if (item2.syncCategoryId == item1.id) {
-            item2.children = item1.children ? item1.children : [];
-          }
-        });
-      });
-      classifyData.value = datas2.rows;
-      onClassify();
-    } catch (error) {}
-  } else if (headerType.value == 'dataHeader') {
-    categoryMainList({ status: 1 }).then((res) => {
-      if (res.code == 200) {
-        res.rows.forEach((item1: any) => {
-          item1.label = item1.name;
-          item1.id = item1.syncCategoryId;
-          item1.subMenus.forEach((item2: any) => {
-            item2.label = item2.name;
-            item2.id = item2.syncCategoryId;
-            item2.children.forEach((item3: any) => {
-              item3.label = item3.name;
-              item3.id = item3.syncCategoryId;
-            });
-          });
-          item1.children = item1.subMenus;
-        });
-        classifyData.value = res.rows;
-        onClassify();
-      }
-    });
-  } else {
-    getProductCategoryTree({ platform: cType.value }).then((res) => {
-      if (res.code == 200) {
-        classifyData.value = res.data;
-        onClassify();
-      }
-    });
-  }
-};
-
-const onClassify = () => {
-  if (type.value == 2 && httpObj.value.mediumCategoryId) {
-    classifyData.value.forEach((item1: any) => {
-      if (item1.children && item1.children.length > 0) {
-        item1.children.unshift({
-          label: '全部',
-          id: ''
-        });
-        item1.children.forEach((item2: any) => {
-          if (item2.id == httpObj.value.mediumCategoryId) {
-            httpObj.value.topCategoryId = item1.id;
-            classifyList.value = item1.children;
-          }
-        });
-      }
-    });
-    getList();
-    //获取当前分类下得品牌
-    getBrand2();
-  } else if (type.value == 3 && httpObj.value.bottomCategoryId) {
-    classifyData.value.forEach((item1: any) => {
-      if (item1.children && item1.children.length > 0) {
-        item1.children.forEach((item2: any) => {
-          if (item2.children && item2.children.length > 0) {
-            item2.children.unshift({
-              label: '全部',
-              id: ''
-            });
-            item2.children.forEach((item3: any) => {
-              if (item3.id == httpObj.value.bottomCategoryId) {
-                httpObj.value.topCategoryId = item1.id;
-                httpObj.value.mediumCategoryId = item2.id;
-                classifyList.value = item2.children;
-              }
-            });
-          }
-        });
-      }
-    });
-    if (headerType.value == 'default' && httpObj.value.bottomCategoryId) {
-      onAttributeList();
-    }
-    getList();
-    //获取当前分类下得品牌
-    getBrand2();
-  } else {
-    classifyData.value.unshift({
-      label: '全部',
-      id: ''
-    });
-    classifyList.value = classifyData.value;
-  }
-};
-
 const onHead = (item: any, type: string) => {
   httpObj.value[type] = item.id;
-  if (httpObj.value.mediumCategoryId || httpObj.value.bottomCategoryId) {
-    getBrand2();
-  }
-  if (headerType.value == 'default' && httpObj.value.bottomCategoryId) {
+  getBrand();
+  if ((headerType.value == 'default' && httpObj.value.bottomCategoryId) || (route.query.cType && httpObj.value.bottomCategoryId)) {
     onAttributeList();
   }
   getList();
@@ -548,72 +693,6 @@ const onHead1 = (index1: any, item2: any) => {
   getList();
 };
 
-//查询品牌
-const getBrand1 = () => {
-  getBrandPage({
-    categoryName: categoryName.value,
-    categoryId: httpObj.value.topCategoryId,
-    pageSize: 100,
-    pageNum: 1
-  }).then((res) => {
-    if (res.code == 200) {
-      brandList.value = res.rows;
-      // 品牌列表更新后重新计算每行显示数量
-      nextTick(() => {
-        calculateItemsPerRow();
-      });
-    }
-  });
-};
-
-//查询分类下得品牌
-const getBrand2 = () => {
-  getBrandByCategoryList({
-    categoryId: httpObj.value.topCategoryId,
-    pageSize: 100,
-    pageNum: 1
-  }).then((res) => {
-    if (res.code == 200) {
-      res.rows.unshift({
-        brandName: '全部',
-        id: ''
-      });
-      brandList.value = res.rows;
-      // 品牌列表更新后重新计算每行显示数量
-      nextTick(() => {
-        calculateItemsPerRow();
-      });
-    }
-  });
-};
-
-const getBrandInfo = () => {
-  getBrandDetail(httpObj.value.brandId).then((res) => {
-    if (res.code == 200) {
-      brandList.value = [
-        {
-          brandName: res.data.brandName,
-          id: res.data.id
-        }
-      ];
-      // 品牌列表更新后重新计算每行显示数量
-      nextTick(() => {
-        calculateItemsPerRow();
-      });
-    }
-  });
-};
-
-//筛选品牌
-const remoteMethod = (res: any) => {
-  if (res) {
-    categoryName.value = res;
-  } else {
-    categoryName.value = '';
-  }
-  getBrand1();
-};
-
 // 筛选条件
 const onSort = (type: number) => {
   if (type == 1) {
@@ -639,58 +718,6 @@ const onSort = (type: number) => {
   }
   getList();
 };
-
-// 核心修复：统一初始化函数
-const initData = () => {
-  httpObj.value.searchKeyword = '';
-  httpObj.value.topCategoryId = '';
-  httpObj.value.brandId = '';
-  httpObj.value.pageNum = 1;
-  type.value = route.query.type;
-  cType.value = route.query.cType ? route.query.cType : 0;
-  if (route.query.input) {
-    httpObj.value.searchKeyword = route.query.input;
-  }
-  if (type.value == 1) {
-    if (route.query.brandId) {
-      httpObj.value.brandId = Number(route.query.brandId);
-      getBrandInfo();
-    } else {
-      getBrand1();
-    }
-    if (route.query.topCategoryId) {
-      httpObj.value.topCategoryId = route.query.topCategoryId;
-    }
-    getList();
-  }
-  if (type.value == 2 && route.query.mediumCategoryId) {
-    httpObj.value.mediumCategoryId = route.query.mediumCategoryId;
-  }
-  if (type.value == 3 && route.query.bottomCategoryId) {
-    httpObj.value.bottomCategoryId = route.query.bottomCategoryId;
-  }
-  getClassify();
-};
-
-watch(route, () => {
-  initData();
-});
-
-// 监听窗口大小变化，重新计算每行显示数量
-onMounted(() => {
-  initData();
-  // 等待DOM渲染完成后计算
-  nextTick(() => {
-    calculateItemsPerRow();
-  });
-  // 监听窗口resize事件
-  window.addEventListener('resize', calculateItemsPerRow);
-});
-
-// 组件卸载时移除事件监听
-onUnmounted(() => {
-  window.removeEventListener('resize', calculateItemsPerRow);
-});
 </script>
 
 <style lang="scss" scoped>
@@ -699,6 +726,7 @@ onUnmounted(() => {
   min-width: 1200px;
   width: 100%;
   margin: 0px auto 0 auto;
+
   // 筛选
   .search-head {
     width: 100%;
@@ -708,12 +736,15 @@ onUnmounted(() => {
     font-size: 14px;
     color: #101828;
   }
+
   .head-bos {
     display: flex;
+
     .head-title {
       width: 70px;
       padding-top: 15px;
     }
+
     .head-box {
       display: flex;
       flex-wrap: wrap;
@@ -722,15 +753,19 @@ onUnmounted(() => {
       gap: 10px 15px;
       border-bottom: 1px solid #e5e7eb;
       padding: 15px 0;
+
       .classify-list {
         cursor: pointer;
+
         &:hover {
           color: var(--el-color-primary);
         }
+
         &.hig {
           color: var(--el-color-primary);
         }
       }
+
       .expand-toggle {
         cursor: pointer;
         color: var(--el-color-primary);
@@ -738,11 +773,13 @@ onUnmounted(() => {
         align-items: center;
         font-size: 14px;
         user-select: none;
+
         &:hover {
           opacity: 0.8;
         }
       }
     }
+
     .head-sort {
       margin: 15px 15px 0 0;
       width: 108px;
@@ -752,17 +789,21 @@ onUnmounted(() => {
       cursor: pointer;
       font-size: 14px;
       background-color: #ffffff;
+
       &.hig {
         border: 1px solid var(--el-color-primary);
       }
+
       .sort-box {
         margin-left: 10px;
         position: relative;
         height: 32px;
+
         .icon1 {
           position: absolute;
           top: 6px;
         }
+
         .icon2 {
           position: absolute;
           bottom: 6px;
@@ -770,6 +811,7 @@ onUnmounted(() => {
       }
     }
   }
+
   // 商品
   .expert-bos {
     width: 100%;
@@ -777,6 +819,7 @@ onUnmounted(() => {
     flex-wrap: wrap;
     margin-top: 12px;
     gap: 20px 12px;
+
     .expert-list {
       flex: 0 0 calc((100% - 48px) / 5);
       width: 0;
@@ -789,30 +832,36 @@ onUnmounted(() => {
       transition:
         transform 0.2s ease,
         box-shadow 0.2s ease;
+
       &:hover {
         transform: translateY(-2px);
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
         .itemName {
           color: #e7000b !important;
         }
       }
+
       .data-img {
         width: 100%;
         aspect-ratio: 1;
         // height: 190px;
       }
+
       .itemName {
         font-weight: 400;
         font-size: 14px;
         color: #101828;
         margin: 10px 0 5px 0;
       }
+
       .price {
         .memberPrice {
           color: var(--el-color-primary);
           font-size: 16px;
           color: #e7000b;
         }
+
         .marketPrice {
           font-size: 12px;
           color: #99a1af;
@@ -837,17 +886,21 @@ onUnmounted(() => {
     width: 100%;
     height: 44px;
     padding-left: 20px;
+
     .breadcrumb-bos {
       width: 100%;
       font-size: 14px;
       color: #101828;
+
       .nav-list {
         height: 44px;
         display: flex;
         align-items: center;
       }
+
       .home {
         cursor: pointer;
+
         &:hover {
           color: var(--el-color-primary);
         }