Blame view

components/MobileCategoryList.vue 10.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",
  },
];
柏杨 authored
120
watchEffect(async () => {
柏杨 authored
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
  // 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"; // 取第二个值(如果存在)
  //
  //   // 2. 更新选中的主分类
  //   categoryStore.updateCategory(mainCategory);
  //   routeQuery.updateCategories(mainCategory + "," + subCategoryName.value);
  //   // 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 [];
  //     });
  //
  //     // 4. 查找对应的子分类 ID
  //     const foundFuncCategory = subCategoryList.value.find(
  //       (func) => func.name === subCategoryName.value
  //     );
  //
  //     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
  //     );
  //
  //     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 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 (
柏杨 authored
202
203
204
205
206
    Object.keys(route.query).length === 0 &&
    !route.path.includes("/products/detail")
  ) {
    // 检查是否有默认的分类
    const defaultCategory = categoryStore.list[0]; // 假设第一个分类是默认的
207
柏杨 authored
208
209
210
211
    if (defaultCategory) {
      const defaultCategoryName = defaultCategory.categoryDisplayName;
      const defaultSubCategory = defaultCategory.list[1]; // 假设第一个子分类为默认子分类
      const defaultFuncCategory = defaultCategory.productFunctions[1]; // 假设第一个功能分类为默认功能分类
212
柏杨 authored
213
214
215
      // 更新 store 和 URL
      categoryStore.updateCategory(defaultCategoryName);
      productStore.updatePageNo(1);
216
柏杨 authored
217
218
      if (defaultSubCategory) {
        categoryStore.updateSubCategory(defaultSubCategory.id);
219
柏杨 authored
220
221
222
        // 如果有之前的值则使用之前的值,拼接新的子分类名
        const updatedCategory =
          defaultCategoryName + "," + defaultSubCategory.name;
223
柏杨 authored
224
225
226
227
228
229
230
        // 拼接设备类型到 URL
        router.push({
          query: {
            categories: defaultCategoryName + "," + defaultSubCategory.name,
          },
        });
      }
231
柏杨 authored
232
233
234
235
236
237
238
239
240
241
242
243
244
      if (defaultFuncCategory) {
        categoryStore.updateFuncCategory(defaultFuncCategory.id);
        // 拼接功能类型到 URL
        router.push({
          query: {
            categories: defaultCategoryName + "," + defaultSubCategory.name,
            function: defaultFuncCategory.name,
          },
        });
      }
    }
  }
});
245
246

const SEO = {
247
248
249
250
251
252
  "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",
253
  Equipment:
254
255
    "Equipment,Not specified,Equipment,Accessories & fixtures,Fuel cell manufacturing and testing equipment",
};
256
257

const handleDrawerHide = () => {
柏杨 authored
258
  // productStore.updatePageNo(1);
259
260
261
262
263
264
  // router.push({
  //   query: {
  //     categories: categoryStore.selectedCategory,
  //   },
  // });
265
266
267
268
269
  const doc = document as any;
  const head = doc.getElementsByTagName("head");
  const meta = doc.createElement("meta");
  document.title = SEO[categoryStore.selectedCategory as keyof typeof SEO];
270
271
  doc
    .querySelector('meta[name="keywords"]')
272
273
274
275
276
277
    .setAttribute(
      "content",
      SEO[categoryStore.selectedCategory as keyof typeof SEO]
    );
  head[0].appendChild(meta);
};
278
279
280
281
282
283
284
const handleCategoryClick = (
  item: CategoryRootType,
  id: string,
  subItem: any
) => {
  categoryStore.updateCategory(item.categoryDisplayName);
285
286
287
288
289
290
291
292
293
294
  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,
      },
    });
295
  } else {
296
297
298
299
300
301
    categoryStore.updateSubCategory(id);
    router.push({
      query: {
        categories: categoryStore.selectedCategory + "," + subItem.name,
      },
    });
302
  }
303
};
304
305
306
</script>

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