canrd-main / canrud-nuxt-front · Commits

Commit e9b7eff8cf79d50224fe42376e6bd8e266b5de44

Authored by boyang
1 parent e995709b
build: skipped

fix: 修改产品目录urlcategories

Inline Side-by-side
Showing 3 changed files with 140 additions and 59 deletions
components/CategoryList.vue
  View file @e9b7eff
... ... @@ -86,9 +86,9 @@ const router = useRouter();
86 86 const categoryStore = useCategoryStore();
87 87 const productStore = useProductListStore();
88 88 watchEffect(async () => {
89   - if (route.query.category) {
  89 + if (route.query.categories) {
90 90 // 1. 提取 query.category 的内容
91   - const categories = route.query.category.split(",");
  91 + const categories = route.query.categories.split(",");
92 92 const mainCategory = categories[0].trim(); // 取第一个值
93 93 const subCategoryName = categories[1] ? categories[1].trim() : null; // 取第二个值（如果存在）
94 94  
... ... @@ -152,8 +152,52 @@ watchEffect(async () => {
152 152 // categoryStore.updateFuncCategory(funcCategoryId);
153 153 // }
154 154 }
155   - } else {
156 155 }
  156 + // else {
  157 + // console.log(route.query, "5656mountedquery222");
  158 +
  159 + // // 检查是否有默认的分类
  160 + // const defaultCategory = categoryStore.list[0]; // 假设第一个分类是默认的
  161 + // console.log(categoryStore.list[0], "5656mountedquery333");
  162 +
  163 + // if (defaultCategory) {
  164 + // console.log(defaultCategory, "5656mountedquery444");
  165 +
  166 + // const defaultCategoryName = defaultCategory.categoryDisplayName;
  167 + // const defaultSubCategory = defaultCategory.list[0]; // 假设第一个子分类为默认子分类
  168 + // const defaultFuncCategory = defaultCategory.productFunctions[0]; // 假设第一个功能分类为默认功能分类
  169 +
  170 + // // 更新 store 和 URL
  171 + // categoryStore.updateCategory(defaultCategoryName);
  172 + // productStore.updatePageNo(1);
  173 +
  174 + // if (defaultSubCategory) {
  175 + // categoryStore.updateSubCategory(defaultSubCategory.id);
  176 +
  177 + // // 如果有之前的值则使用之前的值，拼接新的子分类名
  178 + // const updatedCategory =
  179 + // defaultCategoryName + "," + defaultSubCategory.name;
  180 +
  181 + // // 拼接设备类型到 URL
  182 + // router.push({
  183 + // query: {
  184 + // category: defaultCategoryName + "," + defaultSubCategory.name,
  185 + // },
  186 + // });
  187 + // }
  188 +
  189 + // if (defaultFuncCategory) {
  190 + // categoryStore.updateFuncCategory(defaultFuncCategory.id);
  191 + // // 拼接功能类型到 URL
  192 + // router.push({
  193 + // query: {
  194 + // category: defaultCategoryName + "," + defaultSubCategory.name,
  195 + // function: defaultFuncCategory.name,
  196 + // },
  197 + // });
  198 + // }
  199 + // }
  200 + // }
157 201 });
158 202 const seo = {
159 203 "Energy materials":
... ... @@ -167,7 +211,13 @@ const seo = {
167 211 };
168 212  
169 213 onMounted(() => {
  214 + // console.log(route, "5656mountedroute");
  215 + // console.log(route.query, "5656mountedquery");
  216 + // console.log(route.fullPath, "5656mountedfullPath");
170 217 if (Object.keys(route.query).length === 0) {
  218 + // if (route.fullPath === "/products") {
  219 + // console.log(route.query, "5656mountedquery222");
  220 +
171 221 // 检查是否有默认的分类
172 222 const defaultCategory = categoryStore.list[0]; // 假设第一个分类是默认的
173 223 if (defaultCategory) {
... ... @@ -189,7 +239,7 @@ onMounted(() => {
189 239 // 拼接设备类型到 URL
190 240 router.push({
191 241 query: {
192   - category: defaultCategoryName + "," + defaultSubCategory.name,
  242 + categories: defaultCategoryName + "," + defaultSubCategory.name,
193 243 },
194 244 });
195 245 }
... ... @@ -199,7 +249,7 @@ onMounted(() => {
199 249 // 拼接功能类型到 URL
200 250 router.push({
201 251 query: {
202   - category: defaultCategoryName + "," + defaultSubCategory.name,
  252 + categories: defaultCategoryName + "," + defaultSubCategory.name,
203 253 function: defaultFuncCategory.name,
204 254 },
205 255 });
... ... @@ -217,14 +267,14 @@ const handleCategoryClick = (item: CategoryRootType) => {
217 267 if (item.categoryDisplayName === "Energy materials") {
218 268 router.push({
219 269 query: {
220   - category: item.categoryDisplayName + "," + defaultSubCategory.name,
  270 + categories: item.categoryDisplayName + "," + defaultSubCategory.name,
221 271 function: item.productFunctions[0].name,
222 272 },
223 273 });
224 274 } else {
225 275 router.push({
226 276 query: {
227   - category: item.categoryDisplayName + "," + defaultSubCategory.name,
  277 + categories: item.categoryDisplayName + "," + defaultSubCategory.name,
228 278 },
229 279 });
230 280 }
... ... @@ -245,7 +295,7 @@ const handleSubCategoryClick = (value: CategoryRootType) => {
245 295  
246 296 // 获取当前的查询参数
247 297 const currentQuery = router.currentRoute.value.query;
248   - const currentCategory = currentQuery.category || "";
  298 + const currentCategory = currentQuery.categories || "";
249 299  
250 300 // 如果有之前的值则使用之前的值，拼接新的子分类名
251 301 const updatedCategory = currentCategory.split(",")[0] + "," + value.name;
... ... @@ -254,7 +304,7 @@ const handleSubCategoryClick = (value: CategoryRootType) => {
254 304 // router.push({ query: { category: updatedCategory } });
255 305 // 更新路由，保持 function 参数不变
256 306 router.push({
257   - query: { category: updatedCategory, function: currentQuery.function },
  307 + query: { categories: updatedCategory, function: currentQuery.function },
258 308 });
259 309 };
260 310  
... ...
components/Header.vue
  View file @e9b7eff
... ... @@ -5,30 +5,61 @@
5 5 <router-link to="/"><v-img src="/logo.jpg" alt="canrud" /></router-link>
6 6 </v-col>
7 7 <v-col cols="6" md="8" class="px-0">
8   - <v-text-field name="keyword" label="Search keyword" hide-details="auto" variant="solo"
9   - append-inner-icon="mdi-magnify" @click:appendInner="handleClick" @keydown="handleKeyDown" v-model="input">
  8 + <v-text-field
  9 + name="keyword"
  10 + label="Search keyword"
  11 + hide-details="auto"
  12 + variant="solo"
  13 + append-inner-icon="mdi-magnify"
  14 + @click:appendInner="handleClick"
  15 + @keydown="handleKeyDown"
  16 + v-model="input"
  17 + >
10 18 </v-text-field>
11 19 </v-col>
12 20 <v-col cols="4" md="2" class="px-0">
13   - <v-btn variant="text" href="/contact" color="blue-darken-2 mt-4">Concat Us
  21 + <v-btn variant="text" href="/contact" color="blue-darken-2 mt-4"
  22 + >Concat Us
14 23 </v-btn>
15 24 </v-col>
16 25 </v-row>
17 26 </v-container>
18 27 <div class="tabs">
19 28 <div class="tw-max-w-[1200px] tw-mx-auto">
20   - <v-tabs mobile-breakpoint="580" v-model="tab" bg-color="blue-darken-1" slider-color="grey-lighten-3"
21   - tab-slider-size="6px" selected-class="active" :grow="screenWidth > 600 ? false : true">
22   - <v-tab :value="1" to="/"><span @click="handleTabClick" class="text-grey-lighten-3 tw-font-bold">Home</span>
  29 + <v-tabs
  30 + mobile-breakpoint="580"
  31 + v-model="tab"
  32 + bg-color="blue-darken-1"
  33 + slider-color="grey-lighten-3"
  34 + tab-slider-size="6px"
  35 + selected-class="active"
  36 + :grow="screenWidth > 600 ? false : true"
  37 + >
  38 + <v-tab :value="1" to="/"
  39 + ><span
  40 + @click="handleTabClick"
  41 + class="text-grey-lighten-3 tw-font-bold"
  42 + >Home</span
  43 + >
23 44 </v-tab>
24 45 <v-tab :value="2" to="/products">
25   - <span @click="handleTabClick" class="text-grey-lighten-3 tw-font-bold">Products</span>
  46 + <span @click="handleTabClick" class="text-grey-lighten-3 tw-font-bold"
  47 + >Products</span
  48 + >
26 49 </v-tab>
27   - <v-tab :value="3" to="/about"><span @click="handleTabClick"
28   - class="text-grey-lighten-3 tw-font-bold">About</span>
  50 + <v-tab :value="3" to="/about"
  51 + ><span
  52 + @click="handleTabClick"
  53 + class="text-grey-lighten-3 tw-font-bold"
  54 + >About</span
  55 + >
29 56 </v-tab>
30   - <v-tab :value="4" to="/contact"><span @click="handleTabClick"
31   - class="text-grey-lighten-3 tw-font-bold">Contact</span>
  57 + <v-tab :value="4" to="/contact"
  58 + ><span
  59 + @click="handleTabClick"
  60 + class="text-grey-lighten-3 tw-font-bold"
  61 + >Contact</span
  62 + >
32 63 </v-tab>
33 64 <v-tab>
34 65 <span class="text-grey-lighten-3 tw-font-bold">
... ... @@ -42,71 +73,71 @@
42 73 </template>
43 74  
44 75 <script setup lang="ts">
45   -import { ref, watchEffect } from 'vue'
46   -import ContactDialog from '@/components/ContactDialog.vue'
47   -import { useProductListStore } from '@/stores/product_list'
48   -import { useRouter } from 'vue-router'
49   -import { useDialogStore } from '@/stores/dialog'
50   -import { useCategoryStore } from '@/stores/category'
51   -import { useDisplay } from 'vuetify'
  76 +import { ref, watchEffect } from "vue";
  77 +import ContactDialog from "@/components/ContactDialog.vue";
  78 +import { useProductListStore } from "@/stores/product_list";
  79 +import { useRouter } from "vue-router";
  80 +import { useDialogStore } from "@/stores/dialog";
  81 +import { useCategoryStore } from "@/stores/category";
  82 +import { useDisplay } from "vuetify";
52 83  
53   -const { width: screenWidth } = useDisplay()
  84 +const { width: screenWidth } = useDisplay();
54 85  
55   -const productStore = useProductListStore()
56   -const categoryStore = useCategoryStore()
  86 +const productStore = useProductListStore();
  87 +const categoryStore = useCategoryStore();
57 88  
58   -const input = ref()
  89 +const input = ref();
59 90  
60   -const router = useRouter()
  91 +const router = useRouter();
61 92  
62   -const dialog = useDialogStore()
  93 +const dialog = useDialogStore();
63 94  
64 95 const handleKeyDown = (e: any) => {
65 96 if (e.keyCode == 13) {
66   - handleClick()
  97 + handleClick();
67 98 }
68   -}
  99 +};
69 100  
70 101 const handleClick = () => {
71   - categoryStore.updateDisplay(!input.value)
72   - productStore.updateKeyword(input.value)
73   - productStore.updatePageNo(1)
74   - router.push({ path: '/products', query: { keyword: input.value } })
75   -}
  102 + categoryStore.updateDisplay(!input.value);
  103 + productStore.updateKeyword(input.value);
  104 + productStore.updatePageNo(1);
  105 + router.push({ path: "/products", query: { keyword: input.value } });
  106 +};
76 107  
77   -const tab = ref(1)
  108 +const tab = ref(1);
78 109  
79 110 const handleTabClick = () => {
80   - categoryStore.updateDisplay(true)
81   - productStore.updateKeyword('')
82   -}
  111 + categoryStore.updateDisplay(true);
  112 + productStore.updateKeyword("");
  113 +};
83 114  
84 115 watchEffect(() => {
85   - input.value = productStore.keyword
86   -})
  116 + input.value = productStore.keyword;
  117 +});
87 118  
88 119 onMounted(() => {
89 120 // 获取url的参数
90   - const url = window.location.href
91   - const index = url.indexOf('?')
  121 + const url = window.location.href;
  122 + const index = url.indexOf("?");
92 123 if (index !== -1) {
93   - const params = url.slice(index + 1).split('&')
94   - const obj: any = {}
  124 + const params = url.slice(index + 1).split("&");
  125 + const obj: any = {};
95 126 params.forEach((item) => {
96   - const arr = item.split('=')
97   - obj[arr[0]] = arr[1]
98   - })
  127 + const arr = item.split("=");
  128 + obj[arr[0]] = arr[1];
  129 + });
99 130 // 获取dialog的状态
100 131 if (obj.flag) {
101   - dialog.updateDialog(true)
  132 + dialog.updateDialog(true);
102 133 }
103 134  
104 135 if (obj.keyword) {
105   - productStore.updateKeyword(obj.keyword)
106   - categoryStore.updateDisplay(false)
  136 + productStore.updateKeyword(obj.keyword);
  137 + categoryStore.updateDisplay(false);
107 138 }
108 139 }
109   -})
  140 +});
110 141 </script>
111 142  
112 143 <style lang="scss" scoped>
... ...
deploy/prod2.sh
  View file @e9b7eff
1 1 #!/bin/bash
2 2 # 变量定义
3   -LAST_TAG="1.0.12"
4   -TAG="1.0.13"
  3 +LAST_TAG="1.0.13"
  4 +TAG="1.0.14"
5 5 TARGET_PATH="/root/web/canrud-outside-nuxt-front"
6 6 DOCKERFILE_PATH="/root/web/canrud-outside-nuxt-front/canrud-nuxt-front"
7 7 IMAGE_NAME="canrud-outside-front"
... ...