Blame view

components/MobileCategoryList.vue 11.4 KB
1
2
3
4
5
<template>
  <div
    class="pr-4 tw-h-[48px] tw-leading-[48px] border-b tw-flex tw-justify-between tw-items-center"
  >
    <span class="ml-4 tw-font-bold">{{ categoryStore.selectedCategory }}</span>
6
7
8
    <span
      class="ml-1 text-grey-darken-4 text-body-2"
      @click="drawerVis = !drawerVis"
9
10
11
12
13
14
15
16
17
18
19
20
      >Filter <v-icon> mdi-filter-outline </v-icon></span
    >
  </div>
  <!-- <div class="bg-grey-lighten-4 tw-w-full tw-h-3"></div> -->
  <v-layout>
    <v-navigation-drawer
      @update:model-value="handleDrawerHide"
      v-model="drawerVis"
      location="bottom"
      touchless
      class="!tw-h-[70%] bg-grey-lighten-4 tw-overflow-y-auto tw-overflow-x-hidden"
    >
21
22
23
24
25
      <div
        class="mb-4 pa-2 tw-bg-[#fff]"
        v-for="(item, index) in categoryStore.list"
        :key="index"
      >
26
27
28
29
30
31
32
33
34
35
36
37
        <div class="mb-4 tw-flex tw-items-center">
          <div>
            <v-img
              class="mr-4 tw-float-left"
              width="32"
              :src="
                categoryStore.selectedCategory === item.categoryDisplayName
                  ? CATEGORY_IMG[index].selected
                  : CATEGORY_IMG[index].normal
              "
            ></v-img>
          </div>
38
39
40
          <strong class="tw-m-0 tw-inline">{{
            item.categoryDisplayName
          }}</strong>
41
42
43
44
45
46
47
48
49
50
51
52
53
        </div>
        <div class="tw-flex tw-flex-wrap tw-justify-between">
          <template v-if="index !== 0">
            <div
              cols="6"
              v-for="(k, i) in item.list"
              :class="
                'tw-w-[48%] mb-4 py-3 px-2 tw-rounded-lg tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis' +
                (categoryStore.selectedSubCategory === k.id
                  ? ' bg-blue-darken-1 text-white '
                  : ' bg-grey-lighten-4 ')
              "
              :key="i"
54
              @click="handleCategoryClick(item, k.id, k)"
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
            >
              {{ k.name }}
            </div>
          </template>
          <template v-else>
            <div
              cols="6"
              v-for="(k, i) in item.productFunctions"
              :class="
                (categoryStore.selectedFuncCategory === k.id
                  ? ' bg-blue-darken-1 text-white '
                  : ' bg-grey-lighten-4 ') +
                ' tw-w-[48%] mb-4 py-3 px-2 tw-rounded-lg tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis'
              "
              :key="i"
70
              @click="handleCategoryClick(item, k.id, k)"
71
72
73
74
75
76
77
78
79
80
81
            >
              {{ k.name }}
            </div>
          </template>
        </div>
      </div>
    </v-navigation-drawer>
  </v-layout>
</template>

<script setup lang="ts">
82
83
84
85
86
import { useCategoryStore } from "@/stores/category";
import { useProductListStore } from "@/stores/product_list";
import type { CategoryRootType } from "@/type";
import { computed, ref, watchEffect } from "vue";
import { useRouter, useRoute } from "vue-router";
87
88
89
const router = useRouter();
const route = useRoute();
90
91
92
93
const categoryStore = useCategoryStore();
const productStore = useProductListStore();
const routeQuery = useRouteQuery();
94
95
const drawerVis = ref(false);
96
97

const CATEGORY_IMG = [
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
  {
    normal: "/category/1.png",
    selected: "/category/1.1.png",
    name: "Energy materials",
  },
  {
    normal: "/category/2.png",
    selected: "/category/2.1.png",
    name: "Laboratory consumables",
  },
  {
    normal: "/category/3.png",
    selected: "/category/3.1.png",
    name: "Low-dimensional materials",
  },
  {
    normal: "/category/4.png",
    selected: "/category/4.1.png",
    name: "Equipment",
  },
];
boyang authored
120
watchEffect(async () => {
121
122
123
124
125
126
127
128
129
  if (route.query.categories) {
    // 1. 提取 query.category 的内容
    productStore.updateKeyword("");
    const categories = route.query.categories.split(",");
    const mainCategory = categories[0].trim(); // 取第一个值
    const subCategoryName = ref("");
    subCategoryName.value = categories[1]
      ? categories[1].trim()
      : "Not specified"; // 取第二个值(如果存在)
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
    // 2. 更新选中的主分类
    categoryStore.updateCategory(mainCategory);
    routeQuery.updateCategories(mainCategory + "," + subCategoryName.value);
    if (!route.query.categories.includes("Energy materials")) {
      // 3. 如果有子分类名称,查找其对应的 ID
      if (subCategoryName.value) {
        // if (subCategoryName.value && mainCategory !== "Energy materials") {
        const subCategoryList = computed(() => {
          if (categoryStore.selectedCategory) {
            const tmp = categoryStore.list.filter(
              (item) =>
                item.categoryDisplayName === categoryStore.selectedCategory
            );
            return tmp?.[0]?.list || [];
          }
          return [];
        });
148
149
150
151
152
        // 4. 查找对应的子分类 ID
        const foundFuncCategory = subCategoryList.value.find(
          (func) => func.name === subCategoryName.value
        );
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
        if (foundFuncCategory) {
          const funcCategoryId = foundFuncCategory.id;
          // 你可以在这里使用找到的 funcCategoryId
          categoryStore.updateSubCategory(funcCategoryId);
        }
      }
    } else {
      // 3. 如果有子分类名称,查找其对应的 ID
      if (subCategoryName.value) {
        // if (subCategoryName.value && mainCategory !== "Energy materials") {
        const subCategoryList = computed(() => {
          if (categoryStore.selectedCategory) {
            const tmp = categoryStore.list.filter(
              (item) =>
                item.categoryDisplayName === categoryStore.selectedCategory
            );
            return tmp?.[0]?.list || [];
          }
          return [];
        });
174
175
176
177
178
        // 4. 查找对应的子分类 ID
        const foundFuncCategory = subCategoryList.value.find(
          (func) => func.name === subCategoryName.value
        );
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
        if (foundFuncCategory) {
          const funcCategoryId = foundFuncCategory.id;
          // 你可以在这里使用找到的 funcCategoryId
          categoryStore.updateSubCategory(funcCategoryId);
        }
      }
      // 5. 判断 query 中是否存在 function,并查找对应的 ID
      if (route.query.function) {
        const functionName = route.query.function.trim();
        routeQuery.updateFunction(functionName);
        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
        );
boyang authored
203
        console.log(foundFuncCategory, "functionName");
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232

        if (foundFuncCategory) {
          const funcCategoryId = foundFuncCategory.id;
          if (typeof window !== "undefined") {
            window.selectedFuncCategory = 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 if (route.query.categories.includes("Energy materials")) {
        //没有function默认为第一个
        const defaultCategory = categoryStore.list[0];
        const defaultFuncCategory = defaultCategory.productFunctions[1];
        if (defaultFuncCategory) {
          categoryStore.updateFuncCategory(defaultFuncCategory.id);
        }
      }
    }
  } else if (
boyang authored
233
234
235
236
237
    Object.keys(route.query).length === 0 &&
    !route.path.includes("/products/detail")
  ) {
    // 检查是否有默认的分类
    const defaultCategory = categoryStore.list[0]; // 假设第一个分类是默认的
238
boyang authored
239
240
241
242
    if (defaultCategory) {
      const defaultCategoryName = defaultCategory.categoryDisplayName;
      const defaultSubCategory = defaultCategory.list[1]; // 假设第一个子分类为默认子分类
      const defaultFuncCategory = defaultCategory.productFunctions[1]; // 假设第一个功能分类为默认功能分类
243
boyang authored
244
245
246
      // 更新 store 和 URL
      categoryStore.updateCategory(defaultCategoryName);
      productStore.updatePageNo(1);
247
boyang authored
248
249
      if (defaultSubCategory) {
        categoryStore.updateSubCategory(defaultSubCategory.id);
250
boyang authored
251
252
253
        // 如果有之前的值则使用之前的值,拼接新的子分类名
        const updatedCategory =
          defaultCategoryName + "," + defaultSubCategory.name;
254
boyang authored
255
256
257
258
259
260
261
        // 拼接设备类型到 URL
        router.push({
          query: {
            categories: defaultCategoryName + "," + defaultSubCategory.name,
          },
        });
      }
262
boyang authored
263
264
265
266
267
268
269
270
271
272
273
274
275
      if (defaultFuncCategory) {
        categoryStore.updateFuncCategory(defaultFuncCategory.id);
        // 拼接功能类型到 URL
        router.push({
          query: {
            categories: defaultCategoryName + "," + defaultSubCategory.name,
            function: defaultFuncCategory.name,
          },
        });
      }
    }
  }
});
276
277

const SEO = {
278
279
280
281
282
283
  "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",
284
  Equipment:
285
286
    "Equipment,Not specified,Equipment,Accessories & fixtures,Fuel cell manufacturing and testing equipment",
};
287
288

const handleDrawerHide = () => {
boyang authored
289
  // productStore.updatePageNo(1);
290
291
292
293
294
295
  // router.push({
  //   query: {
  //     categories: categoryStore.selectedCategory,
  //   },
  // });
296
297
298
299
300
  const doc = document as any;
  const head = doc.getElementsByTagName("head");
  const meta = doc.createElement("meta");
  document.title = SEO[categoryStore.selectedCategory as keyof typeof SEO];
301
302
  doc
    .querySelector('meta[name="keywords"]')
303
304
305
306
307
308
    .setAttribute(
      "content",
      SEO[categoryStore.selectedCategory as keyof typeof SEO]
    );
  head[0].appendChild(meta);
};
309
310
311
312
313
314
315
const handleCategoryClick = (
  item: CategoryRootType,
  id: string,
  subItem: any
) => {
  categoryStore.updateCategory(item.categoryDisplayName);
316
317
318
319
320
321
322
323
324
325
  if (item.categoryDisplayName === "Energy materials") {
    categoryStore.updateFuncCategory(id);
    categoryStore.updateSubCategory(item.list[0].id);
    router.push({
      query: {
        categories: categoryStore.selectedCategory + "," + item.list[0].name,
        function: subItem.name,
      },
    });
326
  } else {
327
328
329
330
331
332
    categoryStore.updateSubCategory(id);
    router.push({
      query: {
        categories: categoryStore.selectedCategory + "," + subItem.name,
      },
    });
333
  }
334
};
335
336
337
</script>

<style lang="less" scoped></style>