canrd-main / canrud-nuxt-front · Commits

Commit 4fa43f25d81a1a0dc8969cc556198d6249c3105b

Authored by boyang
1 parent 6c04fa04
build: skipped

feat: url链接对应目录

Inline Side-by-side
Showing 1 changed file with 200 additions and 44 deletions
components/CategoryList.vue
  View file @4fa43f2
... ... @@ -11,7 +11,8 @@
11 11 </div>
12 12 <v-col class="flex pa-0" cols="12" sm="9">
13 13 <span
14   - :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] ' +
  14 + :class="
  15 + '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] ' +
15 16 (categoryStore.selectedCategory === item.categoryDisplayName &&
16 17 'tw-text-[#fff] tw-bg-[#1e88e5]')
17 18 "
... ... @@ -31,12 +32,14 @@
31 32 </div>
32 33 <v-col class="pa-0" cols="12" sm="9">
33 34 <span
34   - :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] ' +
35   - (categoryStore.selectedSubCategory === item.id && 'tw-text-[#fff] tw-bg-[#1e88e5]')
  35 + :class="
  36 + '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] ' +
  37 + (categoryStore.selectedSubCategory === item.id &&
  38 + 'tw-text-[#fff] tw-bg-[#1e88e5]')
36 39 "
37 40 v-for="(item, index) in subCategoryList"
38 41 :key="index"
39   - @click="handleSubCategoryClick(item.id)"
  42 + @click="handleSubCategoryClick(item)"
40 43 >
41 44 {{ item.name }}
42 45 </span>
... ... @@ -53,12 +56,14 @@
53 56 </div>
54 57 <v-col class="pa-0" cols="12" sm="9">
55 58 <span
56   - :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] ' +
57   - (categoryStore.selectedFuncCategory === item.id && 'tw-text-[#fff] tw-bg-[#1e88e5]')
  59 + :class="
  60 + '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] ' +
  61 + (categoryStore.selectedFuncCategory === item.id &&
  62 + 'tw-text-[#fff] tw-bg-[#1e88e5]')
58 63 "
59 64 v-for="(item, index) in funcCategoryList"
60 65 :key="index"
61   - @click="handleFuncCategoryClick(item.id)"
  66 + @click="handleFuncCategoryClick(item)"
62 67 >
63 68 {{ item.name }}
64 69 </span>
... ... @@ -69,34 +74,160 @@
69 74 </template>
70 75  
71 76 <script setup lang="ts">
72   -import { useCategoryStore } from '@/stores/category'
73   -import { useProductListStore } from '@/stores/product_list'
74   -import type { CategoryRootType } from '@/type'
75   -import { computed } from 'vue'
76   -import { useRouter, useRoute } from 'vue-router'
  77 +import { useCategoryStore } from "@/stores/category";
  78 +import { useProductListStore } from "@/stores/product_list";
  79 +import type { CategoryRootType } from "@/type";
  80 +import { computed } from "vue";
  81 +import { useRouter, useRoute } from "vue-router";
  82 +
  83 +const route = useRoute();
  84 +const router = useRouter();
  85 +
  86 +const categoryStore = useCategoryStore();
  87 +const productStore = useProductListStore();
  88 +watchEffect(async () => {
  89 + if (route.query.category) {
  90 + // 1. 提取 query.category 的内容
  91 + const categories = route.query.category.split(",");
  92 + const mainCategory = categories[0].trim(); // 取第一个值
  93 + const subCategoryName = categories[1] ? categories[1].trim() : null; // 取第二个值（如果存在）
  94 +
  95 + // 2. 更新选中的主分类
  96 + categoryStore.updateCategory(mainCategory);
  97 +
  98 + // 3. 如果有子分类名称，查找其对应的 ID
  99 + if (subCategoryName) {
  100 + const subCategoryList = computed(() => {
  101 + if (categoryStore.selectedCategory) {
  102 + const tmp = categoryStore.list.filter(
  103 + (item) =>
  104 + item.categoryDisplayName === categoryStore.selectedCategory
  105 + );
  106 + return tmp?.[0]?.list || [];
  107 + }
  108 + return [];
  109 + });
77 110  
78   -const router = useRouter()
  111 + // 4. 查找对应的子分类 ID
  112 + const foundFuncCategory = subCategoryList.value.find(
  113 + (func) => func.name === subCategoryName
  114 + );
79 115  
80   -const categoryStore = useCategoryStore()
81   -const productStore = useProductListStore()
  116 + if (foundFuncCategory) {
  117 + const funcCategoryId = foundFuncCategory.id;
  118 + // 你可以在这里使用找到的 funcCategoryId
  119 + categoryStore.updateSubCategory(funcCategoryId);
  120 + }
  121 + }
  122 + // 5. 判断 query 中是否存在 function，并查找对应的 ID
  123 + if (route.query.function) {
  124 + const functionName = route.query.function.trim();
  125 + const funcCategoryList = computed(() => {
  126 + if (categoryStore.selectedCategory) {
  127 + const tmp = categoryStore.list.filter(
  128 + (item) =>
  129 + item.categoryDisplayName === categoryStore.selectedCategory
  130 + );
  131 + return tmp?.[0]?.productFunctions || [];
  132 + }
  133 + return [];
  134 + });
  135 + const foundFuncCategory = funcCategoryList.value.find(
  136 + (func) => func.name === functionName
  137 + );
82 138  
  139 + if (foundFuncCategory) {
  140 + const funcCategoryId = foundFuncCategory.id;
  141 + // 你可以在这里使用找到的 funcCategoryId
  142 + categoryStore.updateFuncCategory(funcCategoryId);
  143 + }
  144 + // // 6. 查找对应的功能分类 ID
  145 + // const foundFuncCategory = funcCategories.find(
  146 + // (func) => func.name === functionName
  147 + // );
  148 +
  149 + // if (foundFuncCategory) {
  150 + // const funcCategoryId = foundFuncCategory.id;
  151 + // // 使用找到的 funcCategoryId
  152 + // categoryStore.updateFuncCategory(funcCategoryId);
  153 + // }
  154 + }
  155 + } else {
  156 + }
  157 +});
83 158 const seo = {
84   - 'Energy materials':
85   - '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',
86   - 'Laboratory consumables':
87   - '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',
88   - 'Low-dimensional materials':
89   - ',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',
  159 + "Energy materials":
  160 + "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",
  161 + "Laboratory consumables":
  162 + "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",
  163 + "Low-dimensional materials":
  164 + ",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",
90 165 Equipment:
91   - 'Equipment,Not specified,Equipment,Accessories & fixtures,Fuel cell manufacturing and testing equipment'
92   -}
  166 + "Equipment,Not specified,Equipment,Accessories & fixtures,Fuel cell manufacturing and testing equipment",
  167 +};
  168 +
  169 +onMounted(() => {
  170 + if (Object.keys(route.query).length === 0) {
  171 + // 检查是否有默认的分类
  172 + const defaultCategory = categoryStore.list[0]; // 假设第一个分类是默认的
  173 + if (defaultCategory) {
  174 + const defaultCategoryName = defaultCategory.categoryDisplayName;
  175 + const defaultSubCategory = defaultCategory.list[0]; // 假设第一个子分类为默认子分类
  176 + const defaultFuncCategory = defaultCategory.productFunctions[0]; // 假设第一个功能分类为默认功能分类
  177 +
  178 + // 更新 store 和 URL
  179 + categoryStore.updateCategory(defaultCategoryName);
  180 + productStore.updatePageNo(1);
  181 +
  182 + if (defaultSubCategory) {
  183 + categoryStore.updateSubCategory(defaultSubCategory.id);
  184 +
  185 + // 如果有之前的值则使用之前的值，拼接新的子分类名
  186 + const updatedCategory =
  187 + defaultCategoryName + "," + defaultSubCategory.name;
  188 +
  189 + // 拼接设备类型到 URL
  190 + router.push({
  191 + query: {
  192 + category: defaultCategoryName + "," + defaultSubCategory.name,
  193 + },
  194 + });
  195 + }
  196 +
  197 + if (defaultFuncCategory) {
  198 + categoryStore.updateFuncCategory(defaultFuncCategory.id);
  199 + // 拼接功能类型到 URL
  200 + router.push({
  201 + query: {
  202 + category: defaultCategoryName + "," + defaultSubCategory.name,
  203 + function: defaultFuncCategory.name,
  204 + },
  205 + });
  206 + }
  207 + }
  208 + }
  209 +});
93 210  
94 211 const handleCategoryClick = (item: CategoryRootType) => {
95   - categoryStore.updateCategory(item.categoryDisplayName)
96   - categoryStore.updateSubCategory(item.list[0].id)
97   - productStore.updatePageNo(1)
  212 + categoryStore.updateCategory(item.categoryDisplayName);
  213 + categoryStore.updateSubCategory(item.list[0].id);
  214 + productStore.updatePageNo(1);
  215 + const defaultSubCategory = item.list[0]; // 假设第一个子分类为默认子分类
98 216  
99   - router.push({ query: { category: item.categoryDisplayName } })
  217 + if (item.categoryDisplayName === "Energy materials") {
  218 + router.push({
  219 + query: {
  220 + category: item.categoryDisplayName + "," + defaultSubCategory.name,
  221 + function: item.productFunctions[0].name,
  222 + },
  223 + });
  224 + } else {
  225 + router.push({
  226 + query: {
  227 + category: item.categoryDisplayName + "," + defaultSubCategory.name,
  228 + },
  229 + });
  230 + }
100 231  
101 232 // const doc = document as any
102 233 // const head = doc.getElementsByTagName('head')
... ... @@ -106,35 +237,60 @@ const handleCategoryClick = (item: CategoryRootType) =&gt; {
106 237 // .querySelector('meta[name="keywords"]')
107 238 // .setAttribute('content', seo[item.categoryDisplayName as keyof typeof seo])
108 239 // head[0].appendChild(meta)
109   -}
  240 +};
  241 +
  242 +const handleSubCategoryClick = (value: CategoryRootType) => {
  243 + categoryStore.updateSubCategory(value.id);
  244 + productStore.updatePageNo(1);
  245 +
  246 + // 获取当前的查询参数
  247 + const currentQuery = router.currentRoute.value.query;
  248 + const currentCategory = currentQuery.category || "";
  249 +
  250 + // 如果有之前的值则使用之前的值，拼接新的子分类名
  251 + const updatedCategory = currentCategory.split(",")[0] + "," + value.name;
  252 +
  253 + // 更新路由，保持 handleCategoryClick 的值不变
  254 + // router.push({ query: { category: updatedCategory } });
  255 + // 更新路由，保持 function 参数不变
  256 + router.push({
  257 + query: { category: updatedCategory, function: currentQuery.function },
  258 + });
  259 +};
  260 +
  261 +const handleFuncCategoryClick = (value: CategoryRootType) => {
  262 + categoryStore.updateFuncCategory(value.id);
  263 + productStore.updatePageNo(1);
  264 + // 获取当前的查询参数
  265 + const currentQuery = router.currentRoute.value.query;
110 266  
111   -const handleSubCategoryClick = (value: string) => {
112   - categoryStore.updateSubCategory(value)
113   - productStore.updatePageNo(1)
114   -}
  267 + // 将 value.name 作为新的查询参数加入到现有的 query 中
  268 + const updatedQuery = {
  269 + ...currentQuery, // 保持当前的查询参数
  270 + function: value.name, // 将 value.name 添加为新的查询参数 funcCategory
  271 + };
115 272  
116   -const handleFuncCategoryClick = (value: string) => {
117   - categoryStore.updateFuncCategory(value)
118   - productStore.updatePageNo(1)
119   -}
  273 + // 更新路由
  274 + router.push({ query: updatedQuery });
  275 +};
120 276  
121 277 const subCategoryList = computed(() => {
122 278 if (categoryStore.selectedCategory) {
123 279 const tmp = categoryStore.list.filter(
124 280 (item) => item.categoryDisplayName === categoryStore.selectedCategory
125   - )
126   - return tmp?.[0]?.list || []
  281 + );
  282 + return tmp?.[0]?.list || [];
127 283 }
128   - return []
129   -})
  284 + return [];
  285 +});
130 286  
131 287 const funcCategoryList = computed(() => {
132 288 if (categoryStore.selectedCategory) {
133 289 const tmp = categoryStore.list.filter(
134 290 (item) => item.categoryDisplayName === categoryStore.selectedCategory
135   - )
136   - return tmp?.[0]?.productFunctions || []
  291 + );
  292 + return tmp?.[0]?.productFunctions || [];
137 293 }
138   - return []
139   -})
  294 + return [];
  295 +});
140 296 </script>
... ...