条件

src/api/search/index.ts

@@ -64,3 +64,10 @@ export const getBrandDetail = (id: any) => {
     method: 'get'
   });
 };
+
+export const getProductCategoryAttributeList = (id: any) => {
+  return request({
+    url: `/product/indexProduct/getProductCategoryAttributeList/${id}`,
+    method: 'get'
+  });
+};

src/views/search/index.vue

@@ -18,6 +18,10 @@
     <div v-else style="height: 15px"></div>
     <!-- 筛选 -->
     <div class="search-head">
+      <div class="head-bos">
+        <div class="head-title">已选筛选:</div>
+        <div class="head-box"></div>
+      </div>
       <div class="head-bos">
         <div class="head-title">分类:</div>
         <div class="head-box">
@@ -79,6 +83,21 @@
           </div>
         </div>
       </div>
+      <div class="head-bos" v-for="(item1, index1) in attributeData" :key="index1">
+        <div class="head-title">{{ item1.productAttributesName }}:</div>
+        <div class="head-box">
+          <div
+            :class="attributesList[index1] == item2 ? 'hig' : ''"
+            @click="onHead1(index1, item2)"
+            class="classify-list"
+            v-for="(item2, index2) in item1.attributesList"
+            :key="index2"
+          >
+            <!-- :class="index2.id == httpObj.priceRange ? 'hig' : ''" -->
+            {{ item2 }}
+          </div>
+        </div>
+      </div>
     </div>
     <div class="flex-row-between">
       <div class="head-bos">
@@ -160,7 +179,7 @@
 </template>
 
 <script setup lang="ts">
-import { getPcProductPage, getBrandPage, getBrandByCategoryList, getBrandDetail } from '@/api/search/index';
+import { getPcProductPage, getBrandPage, getBrandByCategoryList, getBrandDetail, getProductCategoryAttributeList } from '@/api/search/index';
 import { jdcategoryMainList } from '@/api/home/index-enterprise';
 import { getProductCategoryTree } from '@/api/home/index';
 import { onPath } from '@/utils/siteConfig';
@@ -177,6 +196,7 @@ const checkList = ref<any>([]);
 const classifyList = ref<any>([]);
 const classifyData = ref<any>([]);
 const brandList = ref<any>([]);
+
 const categoryName = ref<any>('');
 const hasMore = ref(true); // 是否还有更多数据
 const way = ref<any>(1);
@@ -190,9 +210,13 @@ const httpObj = ref<any>({
   sortField: '',
   sortOrder: '',
   isCustomize: '',
+  attributesList: '',
   pageSize: 20,
   pageNum: 1
 });
+const attributeData = ref<any>([]);
+const attributesList = ref<any>([]);
+// const
 const priceList = ref<any>([
   { label: '全部', id: '' },
   { label: '1-100', id: 1 },
@@ -222,6 +246,17 @@ const getList = () => {
   } else {
     httpObj.value.isCustomize = '';
   }
+  httpObj.value.attributesList = '';
+  if (attributesList.value.length > 0) {
+    attributesList.value.forEach((item: any, index: any) => {
+      if (item && item != '全部') {
+        httpObj.value.attributesList = httpObj.value.attributesList + attributeData.value[index].productAttributesName + ':' + item + '|';
+      }
+    });
+  }
+  if (httpObj.value.attributesList) {
+    httpObj.value.attributesList = httpObj.value.attributesList.substring(0, httpObj.value.attributesList.length - 1);
+  }
   getPcProductPage(httpObj.value).then((res) => {
     if (res.code == 200) {
       dataList.value = res.rows ? res.rows : [];
@@ -250,6 +285,22 @@ const headerType = computed(() => {
   // 3. 其他情况显示普通 Header
   return 'default';
 });
+
+const onAttributeList = () => {
+  attributesList.value = [];
+  attributeData.value = [];
+  getProductCategoryAttributeList(httpObj.value.bottomCategoryId).then((res) => {
+    if (res.code == 200) {
+      res.data.forEach((item: any) => {
+        item.attributesList = item.attributesList.split(',');
+        item.attributesList.unshift('全部');
+        attributesList.value.push(['全部']);
+      });
+      attributeData.value = res.data;
+    }
+  });
+};
+
 // 获取分类
 const getClassify = async () => {
   if (headerType.value == 'jdHeader') {
@@ -337,6 +388,9 @@ const onClassify = () => {
         });
       }
     });
+    if (headerType.value == 'default' && httpObj.value.bottomCategoryId) {
+      onAttributeList();
+    }
     getList();
     //获取当前分类下得品牌
     getBrand2();
@@ -351,6 +405,17 @@ const onClassify = () => {
 
 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) {
+    onAttributeList();
+  }
+  getList();
+};
+
+const onHead1 = (index1: any, item2: any) => {
+  attributesList.value[index1] = item2;
   getList();
 };