feat: url链接对应目录

boyang
1 parent 6c04fa04
Showing 1 changed file with 200 additions and 44 deletions
components/CategoryList.vue
@@ -11,7 +11,8 @@
         </div>
         <v-col class="flex pa-0" cols="12" sm="9">
           <span
-            :class="'tw-leading-[50px] tw-inline-flex tw-cursor-pointer px-4 mb-1 mr-1 tw-font-medium rounded hover:tw-text-[#fff] hover:tw-bg-[#1e88e5] ' +
+            :class="
+              'tw-leading-[50px] tw-inline-flex tw-cursor-pointer px-4 mb-1 mr-1 tw-font-medium rounded hover:tw-text-[#fff] hover:tw-bg-[#1e88e5] ' +
               (categoryStore.selectedCategory === item.categoryDisplayName &&
                 'tw-text-[#fff] tw-bg-[#1e88e5]')
             "
@@ -31,12 +32,14 @@
         </div>
         <v-col class="pa-0" cols="12" sm="9">
           <span
-            :class="'px-4 py-1 mb-1 mr-1 tw-font-medium  rounded  tw-inline-flex tw-cursor-pointer hover:tw-text-[#fff] hover:tw-bg-[#1e88e5] ' +
-              (categoryStore.selectedSubCategory === item.id && 'tw-text-[#fff] tw-bg-[#1e88e5]')
+            :class="
+              'px-4 py-1 mb-1 mr-1 tw-font-medium  rounded  tw-inline-flex tw-cursor-pointer hover:tw-text-[#fff] hover:tw-bg-[#1e88e5] ' +
+              (categoryStore.selectedSubCategory === item.id &&
+                'tw-text-[#fff] tw-bg-[#1e88e5]')
             "
             v-for="(item, index) in subCategoryList"
             :key="index"
-            @click="handleSubCategoryClick(item.id)"
+            @click="handleSubCategoryClick(item)"
           >
             {{ item.name }}
           </span>
@@ -53,12 +56,14 @@
         </div>
         <v-col class="pa-0" cols="12" sm="9">
           <span
-            :class="'px-4 py-1 mb-1  mr-1  tw-font-medium rounded tw-inline-flex tw-cursor-pointer hover:tw-text-[#fff] hover:tw-bg-[#1e88e5] ' +
-              (categoryStore.selectedFuncCategory === item.id && 'tw-text-[#fff] tw-bg-[#1e88e5]')
+            :class="
+              'px-4 py-1 mb-1  mr-1  tw-font-medium rounded tw-inline-flex tw-cursor-pointer hover:tw-text-[#fff] hover:tw-bg-[#1e88e5] ' +
+              (categoryStore.selectedFuncCategory === item.id &&
+                'tw-text-[#fff] tw-bg-[#1e88e5]')
             "
             v-for="(item, index) in funcCategoryList"
             :key="index"
-            @click="handleFuncCategoryClick(item.id)"
+            @click="handleFuncCategoryClick(item)"
           >
             {{ item.name }}
           </span>
@@ -69,34 +74,160 @@
 </template>
 <script setup lang="ts">
-import { useCategoryStore } from '@/stores/category'
-import { useProductListStore } from '@/stores/product_list'
-import type { CategoryRootType } from '@/type'
-import { computed } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
+import { useCategoryStore } from "@/stores/category";
+import { useProductListStore } from "@/stores/product_list";
+import type { CategoryRootType } from "@/type";
+import { computed } from "vue";
+import { useRouter, useRoute } from "vue-router";
+
+const route = useRoute();
+const router = useRouter();
+
+const categoryStore = useCategoryStore();
+const productStore = useProductListStore();
+watchEffect(async () => {
+  if (route.query.category) {
+    // 1. 提取 query.category 的内容
+    const categories = route.query.category.split(",");
+    const mainCategory = categories[0].trim(); // 取第一个值
+    const subCategoryName = categories[1] ? categories[1].trim() : null; // 取第二个值（如果存在）
+
+    // 2. 更新选中的主分类
+    categoryStore.updateCategory(mainCategory);
+
+    // 3. 如果有子分类名称，查找其对应的 ID
+    if (subCategoryName) {
+      const subCategoryList = computed(() => {
+        if (categoryStore.selectedCategory) {
+          const tmp = categoryStore.list.filter(
+            (item) =>
+              item.categoryDisplayName === categoryStore.selectedCategory
+          );
+          return tmp?.[0]?.list || [];
+        }
+        return [];
+      });
-const router = useRouter()
+      // 4. 查找对应的子分类 ID
+      const foundFuncCategory = subCategoryList.value.find(
+        (func) => func.name === subCategoryName
+      );
-const categoryStore = useCategoryStore()
-const productStore = useProductListStore()
+      if (foundFuncCategory) {
+        const funcCategoryId = foundFuncCategory.id;
+        // 你可以在这里使用找到的 funcCategoryId
+        categoryStore.updateSubCategory(funcCategoryId);
+      }
+    }
+    // 5. 判断 query 中是否存在 function，并查找对应的 ID
+    if (route.query.function) {
+      const functionName = route.query.function.trim();
+      const funcCategoryList = computed(() => {
+        if (categoryStore.selectedCategory) {
+          const tmp = categoryStore.list.filter(
+            (item) =>
+              item.categoryDisplayName === categoryStore.selectedCategory
+          );
+          return tmp?.[0]?.productFunctions || [];
+        }
+        return [];
+      });
+      const foundFuncCategory = funcCategoryList.value.find(
+        (func) => func.name === functionName
+      );
+      if (foundFuncCategory) {
+        const funcCategoryId = foundFuncCategory.id;
+        // 你可以在这里使用找到的 funcCategoryId
+        categoryStore.updateFuncCategory(funcCategoryId);
+      }
+      // // 6. 查找对应的功能分类 ID
+      // const foundFuncCategory = funcCategories.find(
+      //   (func) => func.name === functionName
+      // );
+
+      // if (foundFuncCategory) {
+      //   const funcCategoryId = foundFuncCategory.id;
+      //   // 使用找到的 funcCategoryId
+      //   categoryStore.updateFuncCategory(funcCategoryId);
+      // }
+    }
+  } else {
+  }
+});
 const seo = {
-  'Energy materials':
-    'Energy materials,Not specified,Battery accessories,Lithium-ion batteries,Capacitors,Sodium-ion batteries,Lithium-sulfur batteries,Potassium/magnesium/aluminum/zinc batteries,Air/fuel/solar,Analytical electrodes,Complete battery accessories',
-  'Laboratory consumables':
-    'Laboratory consumables,Not specified,Glass materials,Plastic materials,Metal materials,Ceramic materials,Paper film materials,Chemical materials,Tetrafluoro materials,Safety protection,Office supplies,Tools,Others',
-  'Low-dimensional materials':
-    ',Low-dimensional materialsNot specified,Zero-dimensional carbon materials,One-dimensional carbon materials,Two-dimensional carbon materials,Three-dimensional carbon materials,Inorganic nanomaterials,Organic nanomaterials,Metal nanomaterials,Others',
+  "Energy materials":
+    "Energy materials,Not specified,Battery accessories,Lithium-ion batteries,Capacitors,Sodium-ion batteries,Lithium-sulfur batteries,Potassium/magnesium/aluminum/zinc batteries,Air/fuel/solar,Analytical electrodes,Complete battery accessories",
+  "Laboratory consumables":
+    "Laboratory consumables,Not specified,Glass materials,Plastic materials,Metal materials,Ceramic materials,Paper film materials,Chemical materials,Tetrafluoro materials,Safety protection,Office supplies,Tools,Others",
+  "Low-dimensional materials":
+    ",Low-dimensional materialsNot specified,Zero-dimensional carbon materials,One-dimensional carbon materials,Two-dimensional carbon materials,Three-dimensional carbon materials,Inorganic nanomaterials,Organic nanomaterials,Metal nanomaterials,Others",
   Equipment:
-    'Equipment,Not specified,Equipment,Accessories & fixtures,Fuel cell manufacturing and testing equipment'
-}
+    "Equipment,Not specified,Equipment,Accessories & fixtures,Fuel cell manufacturing and testing equipment",
+};
+
+onMounted(() => {
+  if (Object.keys(route.query).length === 0) {
+    // 检查是否有默认的分类
+    const defaultCategory = categoryStore.list[0]; // 假设第一个分类是默认的
+    if (defaultCategory) {
+      const defaultCategoryName = defaultCategory.categoryDisplayName;
+      const defaultSubCategory = defaultCategory.list[0]; // 假设第一个子分类为默认子分类
+      const defaultFuncCategory = defaultCategory.productFunctions[0]; // 假设第一个功能分类为默认功能分类
+
+      // 更新 store 和 URL
+      categoryStore.updateCategory(defaultCategoryName);
+      productStore.updatePageNo(1);
+
+      if (defaultSubCategory) {
+        categoryStore.updateSubCategory(defaultSubCategory.id);
+
+        // 如果有之前的值则使用之前的值，拼接新的子分类名
+        const updatedCategory =
+          defaultCategoryName + "," + defaultSubCategory.name;
+
+        // 拼接设备类型到 URL
+        router.push({
+          query: {
+            category: defaultCategoryName + "," + defaultSubCategory.name,
+          },
+        });
+      }
+
+      if (defaultFuncCategory) {
+        categoryStore.updateFuncCategory(defaultFuncCategory.id);
+        // 拼接功能类型到 URL
+        router.push({
+          query: {
+            category: defaultCategoryName + "," + defaultSubCategory.name,
+            function: defaultFuncCategory.name,
+          },
+        });
+      }
+    }
+  }
+});
 const handleCategoryClick = (item: CategoryRootType) => {
-  categoryStore.updateCategory(item.categoryDisplayName)
-  categoryStore.updateSubCategory(item.list[0].id)
-  productStore.updatePageNo(1)
+  categoryStore.updateCategory(item.categoryDisplayName);
+  categoryStore.updateSubCategory(item.list[0].id);
+  productStore.updatePageNo(1);
+  const defaultSubCategory = item.list[0]; // 假设第一个子分类为默认子分类
-  router.push({ query: { category: item.categoryDisplayName } })
+  if (item.categoryDisplayName === "Energy materials") {
+    router.push({
+      query: {
+        category: item.categoryDisplayName + "," + defaultSubCategory.name,
+        function: item.productFunctions[0].name,
+      },
+    });
+  } else {
+    router.push({
+      query: {
+        category: item.categoryDisplayName + "," + defaultSubCategory.name,
+      },
+    });
+  }
   // const doc = document as any
   // const head = doc.getElementsByTagName('head')
@@ -106,35 +237,60 @@ const handleCategoryClick = (item: CategoryRootType) =&gt; {
   //   .querySelector('meta[name="keywords"]')
   //   .setAttribute('content', seo[item.categoryDisplayName as keyof typeof seo])
   // head[0].appendChild(meta)
-}
+};
+
+const handleSubCategoryClick = (value: CategoryRootType) => {
+  categoryStore.updateSubCategory(value.id);
+  productStore.updatePageNo(1);
+
+  // 获取当前的查询参数
+  const currentQuery = router.currentRoute.value.query;
+  const currentCategory = currentQuery.category || "";
+
+  // 如果有之前的值则使用之前的值，拼接新的子分类名
+  const updatedCategory = currentCategory.split(",")[0] + "," + value.name;
+
+  // 更新路由，保持 handleCategoryClick 的值不变
+  // router.push({ query: { category: updatedCategory } });
+  // 更新路由，保持 function 参数不变
+  router.push({
+    query: { category: updatedCategory, function: currentQuery.function },
+  });
+};
+
+const handleFuncCategoryClick = (value: CategoryRootType) => {
+  categoryStore.updateFuncCategory(value.id);
+  productStore.updatePageNo(1);
+  // 获取当前的查询参数
+  const currentQuery = router.currentRoute.value.query;
-const handleSubCategoryClick = (value: string) => {
-  categoryStore.updateSubCategory(value)
-  productStore.updatePageNo(1)
-}
+  // 将 value.name 作为新的查询参数加入到现有的 query 中
+  const updatedQuery = {
+    ...currentQuery, // 保持当前的查询参数
+    function: value.name, // 将 value.name 添加为新的查询参数 funcCategory
+  };
-const handleFuncCategoryClick = (value: string) => {
-  categoryStore.updateFuncCategory(value)
-  productStore.updatePageNo(1)
-}
+  // 更新路由
+  router.push({ query: updatedQuery });
+};
 const subCategoryList = computed(() => {
   if (categoryStore.selectedCategory) {
     const tmp = categoryStore.list.filter(
       (item) => item.categoryDisplayName === categoryStore.selectedCategory
-    )
-    return tmp?.[0]?.list || []
+    );
+    return tmp?.[0]?.list || [];
   }
-  return []
-})
+  return [];
+});
 const funcCategoryList = computed(() => {
   if (categoryStore.selectedCategory) {
     const tmp = categoryStore.list.filter(
       (item) => item.categoryDisplayName === categoryStore.selectedCategory
-    )
-    return tmp?.[0]?.productFunctions || []
+    );
+    return tmp?.[0]?.productFunctions || [];
   }
-  return []
-})
+  return [];
+});
 </script>