筛选

src/views/search/index.vue

@@ -18,10 +18,12 @@
     <div v-else style="height: 15px"></div>
     <!-- 筛选 -->
     <div class="search-head">
-      <div class="head-bos">
+      <div class="head-bos" v-if="selectedFilters.length > 0">
         <div class="head-title">已选筛选:</div>
         <div class="head-box">
-          <el-tag v-for="(item, index) in 10" :key="index" closable @close="tagclose"> 测试 </el-tag>
+          <el-tag v-for="(item, index) in selectedFilters" :key="index" closable @close="removeFilter(item)">
+            {{ item.label }}
+          </el-tag>
         </div>
       </div>
       <div class="head-bos">
@@ -95,7 +97,6 @@
             v-for="(item2, index2) in item1.attributesList"
             :key="index2"
           >
-            <!-- :class="index2.id == httpObj.priceRange ? 'hig' : ''" -->
             {{ item2 }}
           </div>
         </div>
@@ -230,6 +231,98 @@ const sortField1 = ref<any>('');
 const sortField2 = ref<any>('');
 const sortField3 = ref<any>('');
 
+// 计算已选的筛选条件
+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 (category) {
+      filters.push({ type: 'topCategoryId', label: `分类: ${category.label}`, value: httpObj.value.topCategoryId });
+    }
+  }
+  if (httpObj.value.mediumCategoryId && type.value == 2) {
+    const category = classifyList.value.find((item: any) => item.id == httpObj.value.mediumCategoryId);
+    if (category) {
+      filters.push({ type: 'mediumCategoryId', label: `分类: ${category.label}`, value: httpObj.value.mediumCategoryId });
+    }
+  }
+  if (httpObj.value.bottomCategoryId && type.value == 3) {
+    const category = classifyList.value.find((item: any) => item.id == httpObj.value.bottomCategoryId);
+    if (category) {
+      filters.push({ type: 'bottomCategoryId', label: `分类: ${category.label}`, value: httpObj.value.bottomCategoryId });
+    }
+  }
+
+  // 品牌
+  if (httpObj.value.brandId) {
+    const brand = brandList.value.find((item: any) => item.id == httpObj.value.brandId || item.brandId == httpObj.value.brandId);
+    if (brand) {
+      filters.push({ type: 'brandId', label: `品牌: ${brand.brandName || brand.label}`, value: httpObj.value.brandId });
+    }
+  }
+
+  // 价格
+  if (httpObj.value.priceRange) {
+    const price = priceList.value.find((item: any) => item.id == httpObj.value.priceRange);
+    if (price) {
+      filters.push({ type: 'priceRange', label: `价格: ${price.label}`, value: httpObj.value.priceRange });
+    }
+  }
+
+  // 可定制
+  if (checkList.value.includes('isCustomize')) {
+    filters.push({ type: 'isCustomize', label: '可定制', value: 'isCustomize' });
+  }
+
+  // 属性筛选
+  if (attributesList.value.length > 0) {
+    attributesList.value.forEach((item: any, index: number) => {
+      if (item && item != '全部' && attributeData.value[index]) {
+        filters.push({
+          type: `attribute_${index}`,
+          label: `${attributeData.value[index].productAttributesName}: ${item}`,
+          value: { index, value: item }
+        });
+      }
+    });
+  }
+
+  return filters;
+});
+
+// 删除筛选条件
+const removeFilter = (filter: any) => {
+  switch (filter.type) {
+    case 'topCategoryId':
+    case 'mediumCategoryId':
+    case 'bottomCategoryId':
+      httpObj.value[filter.type] = '';
+      onClassify();
+      break;
+    case 'brandId':
+      httpObj.value.brandId = '';
+      getList();
+      break;
+    case 'priceRange':
+      httpObj.value.priceRange = '';
+      getList();
+      break;
+    case 'isCustomize':
+      checkList.value = checkList.value.filter((item: any) => item !== 'isCustomize');
+      getList();
+      break;
+    default:
+      if (filter.type.startsWith('attribute_')) {
+        const index = filter.value.index;
+        attributesList.value[index] = '全部';
+        getList();
+      }
+      break;
+  }
+};
+
 const getList = () => {
   if (sortField1.value) {
     httpObj.value.sortField = '1';
@@ -532,10 +625,6 @@ const initData = () => {
   getClassify();
 };
 
-const tagclose = () => {
-  console.log('触发');
-};
-
 watch(route, () => {
   initData();
 });