canrd-main / canrud-nuxt-front · Commits

Commit 98a55296c375408badbcae19656a9a3125005b40

Authored by boyang
1 parent 83239a25
build: skipped

fix: 修改导航栏颜色

Inline Side-by-side
Showing 3 changed files with 180 additions and 147 deletions
components/MobileCategoryList.vue
  View file @98a5529
... ... @@ -117,128 +117,130 @@ const CATEGORY_IMG = [
117 117 },
118 118 ];
119 119  
120   -// watchEffect(async () => {
121   -// if (route.query.categories) {
122   -// // 1. 提取 query.category 的内容
123   -// productStore.updateKeyword("");
124   -// const categories = route.query.categories.split(",");
125   -// const mainCategory = categories[0].trim(); // 取第一个值
126   -// const subCategoryName = ref("");
127   -// subCategoryName.value = categories[1]
128   -// ? categories[1].trim()
129   -// : "Not specified"; // 取第二个值（如果存在）
  120 +watchEffect(async () => {
  121 + if (route.query.categories) {
  122 + // 1. 提取 query.category 的内容
  123 + productStore.updateKeyword("");
  124 + const categories = route.query.categories.split(",");
  125 + const mainCategory = categories[0].trim(); // 取第一个值
  126 + const subCategoryName = ref("");
  127 + subCategoryName.value = categories[1]
  128 + ? categories[1].trim()
  129 + : "Not specified"; // 取第二个值（如果存在）
130 130  
131   -// // 2. 更新选中的主分类
132   -// categoryStore.updateCategory(mainCategory);
133   -// routeQuery.updateCategories(mainCategory + "," + subCategoryName.value);
134   -// // 3. 如果有子分类名称，查找其对应的 ID
135   -// if (subCategoryName.value && mainCategory !== "Energy materials") {
136   -// const subCategoryList = computed(() => {
137   -// if (categoryStore.selectedCategory) {
138   -// const tmp = categoryStore.list.filter(
139   -// (item) =>
140   -// item.categoryDisplayName === categoryStore.selectedCategory
141   -// );
142   -// return tmp?.[0]?.list || [];
143   -// }
144   -// return [];
145   -// });
  131 + // 2. 更新选中的主分类
  132 + categoryStore.updateCategory(mainCategory);
  133 + routeQuery.updateCategories(mainCategory + "," + subCategoryName.value);
  134 + // 3. 如果有子分类名称，查找其对应的 ID
  135 + if (subCategoryName.value) {
  136 + // if (subCategoryName.value && mainCategory !== "Energy materials") {
  137 + const subCategoryList = computed(() => {
  138 + if (categoryStore.selectedCategory) {
  139 + const tmp = categoryStore.list.filter(
  140 + (item) =>
  141 + item.categoryDisplayName === categoryStore.selectedCategory
  142 + );
  143 + return tmp?.[0]?.list || [];
  144 + }
  145 + return [];
  146 + });
146 147  
147   -// // 4. 查找对应的子分类 ID
148   -// const foundFuncCategory = subCategoryList.value.find(
149   -// (func) => func.name === subCategoryName.value
150   -// );
  148 + // 4. 查找对应的子分类 ID
  149 + const foundFuncCategory = subCategoryList.value.find(
  150 + (func) => func.name === subCategoryName.value
  151 + );
151 152  
152   -// if (foundFuncCategory) {
153   -// const funcCategoryId = foundFuncCategory.id;
154   -// // 你可以在这里使用找到的 funcCategoryId
155   -// categoryStore.updateSubCategory(funcCategoryId);
156   -// }
157   -// }
158   -// // 5. 判断 query 中是否存在 function，并查找对应的 ID
159   -// if (route.query.function) {
160   -// const functionName = route.query.function.trim();
161   -// routeQuery.updateFunction(functionName);
162   -// const funcCategoryList = computed(() => {
163   -// if (categoryStore.selectedCategory) {
164   -// const tmp = categoryStore.list.filter(
165   -// (item) =>
166   -// item.categoryDisplayName === categoryStore.selectedCategory
167   -// );
168   -// return tmp?.[0]?.productFunctions || [];
169   -// }
170   -// return [];
171   -// });
172   -// const foundFuncCategory = funcCategoryList.value.find(
173   -// (func) => func.name === functionName
174   -// );
  153 + if (foundFuncCategory) {
  154 + const funcCategoryId = foundFuncCategory.id;
  155 + // 你可以在这里使用找到的 funcCategoryId
  156 + categoryStore.updateSubCategory(funcCategoryId);
  157 + }
  158 + }
  159 + // 5. 判断 query 中是否存在 function，并查找对应的 ID
  160 + if (route.query.function) {
  161 + const functionName = route.query.function.trim();
  162 + routeQuery.updateFunction(functionName);
  163 + const funcCategoryList = computed(() => {
  164 + if (categoryStore.selectedCategory) {
  165 + const tmp = categoryStore.list.filter(
  166 + (item) =>
  167 + item.categoryDisplayName === categoryStore.selectedCategory
  168 + );
  169 + return tmp?.[0]?.productFunctions || [];
  170 + }
  171 + return [];
  172 + });
  173 + const foundFuncCategory = funcCategoryList.value.find(
  174 + (func) => func.name === functionName
  175 + );
175 176  
176   -// if (foundFuncCategory) {
177   -// const funcCategoryId = foundFuncCategory.id;
178   -// // 你可以在这里使用找到的 funcCategoryId
179   -// categoryStore.updateFuncCategory(funcCategoryId);
180   -// }
181   -// // // 6. 查找对应的功能分类 ID
182   -// // const foundFuncCategory = funcCategories.find(
183   -// // (func) => func.name === functionName
184   -// // );
  177 + if (foundFuncCategory) {
  178 + const funcCategoryId = foundFuncCategory.id;
  179 + // 你可以在这里使用找到的 funcCategoryId
  180 + categoryStore.updateFuncCategory(funcCategoryId);
  181 + }
  182 + // // 6. 查找对应的功能分类 ID
  183 + // const foundFuncCategory = funcCategories.find(
  184 + // (func) => func.name === functionName
  185 + // );
185 186  
186   -// // if (foundFuncCategory) {
187   -// // const funcCategoryId = foundFuncCategory.id;
188   -// // // 使用找到的 funcCategoryId
189   -// // categoryStore.updateFuncCategory(funcCategoryId);
190   -// // }
191   -// } else if (route.query.categories.includes("Energy materials")) {
192   -// const defaultCategory = categoryStore.list[0];
193   -// const defaultFuncCategory = defaultCategory.productFunctions[1];
194   -// if (defaultFuncCategory) {
195   -// categoryStore.updateFuncCategory(defaultFuncCategory.id);
196   -// }
197   -// }
198   -// } else if (
199   -// Object.keys(route.query).length === 0 &&
200   -// !route.path.includes("/products/detail")
201   -// ) {
202   -// // 检查是否有默认的分类
203   -// const defaultCategory = categoryStore.list[0]; // 假设第一个分类是默认的
  187 + // if (foundFuncCategory) {
  188 + // const funcCategoryId = foundFuncCategory.id;
  189 + // // 使用找到的 funcCategoryId
  190 + // categoryStore.updateFuncCategory(funcCategoryId);
  191 + // }
  192 + } else if (route.query.categories.includes("Energy materials")) {
  193 + //没有function默认为第一个
  194 + const defaultCategory = categoryStore.list[0];
  195 + const defaultFuncCategory = defaultCategory.productFunctions[1];
  196 + if (defaultFuncCategory) {
  197 + categoryStore.updateFuncCategory(defaultFuncCategory.id);
  198 + }
  199 + }
  200 + } else if (
  201 + Object.keys(route.query).length === 0 &&
  202 + !route.path.includes("/products/detail")
  203 + ) {
  204 + // 检查是否有默认的分类
  205 + const defaultCategory = categoryStore.list[0]; // 假设第一个分类是默认的
204 206  
205   -// if (defaultCategory) {
206   -// const defaultCategoryName = defaultCategory.categoryDisplayName;
207   -// const defaultSubCategory = defaultCategory.list[1]; // 假设第一个子分类为默认子分类
208   -// const defaultFuncCategory = defaultCategory.productFunctions[1]; // 假设第一个功能分类为默认功能分类
  207 + if (defaultCategory) {
  208 + const defaultCategoryName = defaultCategory.categoryDisplayName;
  209 + const defaultSubCategory = defaultCategory.list[1]; // 假设第一个子分类为默认子分类
  210 + const defaultFuncCategory = defaultCategory.productFunctions[1]; // 假设第一个功能分类为默认功能分类
209 211  
210   -// // 更新 store 和 URL
211   -// categoryStore.updateCategory(defaultCategoryName);
212   -// productStore.updatePageNo(1);
  212 + // 更新 store 和 URL
  213 + categoryStore.updateCategory(defaultCategoryName);
  214 + productStore.updatePageNo(1);
213 215  
214   -// if (defaultSubCategory) {
215   -// categoryStore.updateSubCategory(defaultSubCategory.id);
  216 + if (defaultSubCategory) {
  217 + categoryStore.updateSubCategory(defaultSubCategory.id);
216 218  
217   -// // 如果有之前的值则使用之前的值，拼接新的子分类名
218   -// const updatedCategory =
219   -// defaultCategoryName + "," + defaultSubCategory.name;
  219 + // 如果有之前的值则使用之前的值，拼接新的子分类名
  220 + const updatedCategory =
  221 + defaultCategoryName + "," + defaultSubCategory.name;
220 222  
221   -// // 拼接设备类型到 URL
222   -// router.push({
223   -// query: {
224   -// categories: defaultCategoryName + "," + defaultSubCategory.name,
225   -// },
226   -// });
227   -// }
  223 + // 拼接设备类型到 URL
  224 + router.push({
  225 + query: {
  226 + categories: defaultCategoryName + "," + defaultSubCategory.name,
  227 + },
  228 + });
  229 + }
228 230  
229   -// if (defaultFuncCategory) {
230   -// categoryStore.updateFuncCategory(defaultFuncCategory.id);
231   -// // 拼接功能类型到 URL
232   -// router.push({
233   -// query: {
234   -// categories: defaultCategoryName + "," + defaultSubCategory.name,
235   -// function: defaultFuncCategory.name,
236   -// },
237   -// });
238   -// }
239   -// }
240   -// }
241   -// });
  231 + if (defaultFuncCategory) {
  232 + categoryStore.updateFuncCategory(defaultFuncCategory.id);
  233 + // 拼接功能类型到 URL
  234 + router.push({
  235 + query: {
  236 + categories: defaultCategoryName + "," + defaultSubCategory.name,
  237 + function: defaultFuncCategory.name,
  238 + },
  239 + });
  240 + }
  241 + }
  242 + }
  243 +});
242 244  
243 245 const SEO = {
244 246 "Energy materials":
... ... @@ -252,7 +254,7 @@ const SEO = {
252 254 };
253 255  
254 256 const handleDrawerHide = () => {
255   - productStore.updatePageNo(1);
  257 + // productStore.updatePageNo(1);
256 258  
257 259 // router.push({
258 260 // query: {
... ...
components/MobileProductDetail.vue
  View file @98a5529
1 1 <template>
2 2 <div>
3   - <v-breadcrumbs
  3 + <!-- <v-breadcrumbs
4 4 divider="/"
5 5 dense
6 6 style="
... ... @@ -29,7 +29,34 @@
29 29 <span
30 30 v-if="index < items.length - 1"
31 31 class="breadcrumb-divider"
32   - style="margin: 0 4px; font-size: 14px"
  32 + style="margin: 0 4px; font-size: 14px; color: gray"
  33 + >/</span
  34 + >
  35 + </template>
  36 + </v-breadcrumbs> -->
  37 + <v-breadcrumbs
  38 + divider="/"
  39 + dense
  40 + style="
  41 + padding-top: 8px;
  42 + font-size: 14px;
  43 + display: flex;
  44 + flex-wrap: wrap;
  45 + align-items: center;
  46 + "
  47 + >
  48 + <template v-for="(item, index) in items" :key="index">
  49 + <v-breadcrumbs-item
  50 + :disabled="item.disabled"
  51 + :href="item.href"
  52 + style="color: #1e88e5"
  53 + >
  54 + {{ item.title }}
  55 + </v-breadcrumbs-item>
  56 + <span
  57 + v-if="index < items.length - 1"
  58 + class="breadcrumb-divider"
  59 + style="margin: 0 4px; font-size: 14px; color: gray"
33 60 >/</span
34 61 >
35 62 </template>
... ... @@ -78,6 +105,7 @@
78 105 </v-col>
79 106 </v-row>
80 107 <div
  108 + ref="ticketDiv"
81 109 v-if="info.ticketTypes?.length"
82 110 class="py-0 mx-4 rounded-lg tw-flex tw-flex-wrap tw-justify-around"
83 111 >
... ... @@ -164,7 +192,7 @@
164 192 > -->
165 193 <v-btn
166 194 style="margin-top: 12px"
167   - color="blue-darken-1"
  195 + color="blue-darken-1 tw-sticky"
168 196 @click="router.push('/contact')"
169 197 >
170 198 Quotation Inquiry
... ... @@ -347,7 +375,7 @@ const items = ref&lt;BreadcrumbItem[]&gt;([
347 375 {
348 376 title: "Products",
349 377 disabled: false,
350   - href: "https://www.canrud.com/products",
  378 + href: "http://localhost:3000/products",
351 379 },
352 380 {
353 381 title: "CATEGORY",
... ... @@ -364,21 +392,16 @@ const items = ref&lt;BreadcrumbItem[]&gt;([
364 392 disabled: false,
365 393 href: "/products",
366 394 },
367   - {
368   - title: "TITLE",
369   - disabled: false,
370   - href: "/products",
371   - },
372 395 ]);
373 396 watchEffect(() => {
374 397 console.log(info, "5656info");
375 398 if (info?.productCrumbsVO?.category1 && productStore.keyword) {
376 399 items.value[1].title = info.productCrumbsVO.category1;
377 400 items.value[1].href =
378   - "https://www.canrud.com/products?categories=" +
  401 + "http://localhost:3000/products?categories=" +
379 402 info.productCrumbsVO.category1;
380 403 href1.value =
381   - "https://www.canrud.com/products?categories=" +
  404 + "http://localhost:3000/products?categories=" +
382 405 info.productCrumbsVO.category1;
383 406 if (info?.productCrumbsVO?.category2) {
384 407 items.value[2].title = info.productCrumbsVO.category2;
... ... @@ -395,8 +418,6 @@ watchEffect(() =&gt; {
395 418 items.value[3].href =
396 419 href2.value + "&function=" + info.productCrumbsVO.function;
397 420 }
398   - items.value[4].title = info.name;
399   - items.value[4].href = "https://www.canrud.com/products/detail/" + info.id;
400 421 } else if (routeQuery.categories) {
401 422 if (!routeQuery.categories.includes("Energy materials")) {
402 423 routeQuery.updateFunction("Not specified");
... ... @@ -414,8 +435,8 @@ watchEffect(() =&gt; {
414 435 }
415 436 items.value[1].title = mainCategory;
416 437 items.value[1].href =
417   - "https://www.canrud.com/products?categories=" + mainCategory;
418   - href1.value = "https://www.canrud.com/products?categories=" + mainCategory;
  438 + "http://localhost:3000/products?categories=" + mainCategory;
  439 + href1.value = "http://localhost:3000/products?categories=" + mainCategory;
419 440 // items.value[1].title = subCategoryName.value;
420 441 href2.value = href1.value + "," + subCategoryName.value;
421 442 items.value[2].href = href1.value + "," + subCategoryName.value;
... ... @@ -430,15 +451,13 @@ watchEffect(() =&gt; {
430 451 href2.value + "&function=" + routeQuery.selectedFunction;
431 452 // routeQuery.updateFunction(null);
432 453 }
433   - items.value[4].title = info.name;
434   - items.value[4].href = "https://www.canrud.com/products/detail/" + info.id;
435 454 } else if (info?.productCrumbsVO?.category1) {
436 455 items.value[1].title = info.productCrumbsVO.category1;
437 456 items.value[1].href =
438   - "https://www.canrud.com/products?categories=" +
  457 + "http://localhost:3000/products?categories=" +
439 458 info.productCrumbsVO.category1;
440 459 href1.value =
441   - "https://www.canrud.com/products?categories=" +
  460 + "http://localhost:3000/products?categories=" +
442 461 info.productCrumbsVO.category1;
443 462 if (info?.productCrumbsVO?.category2) {
444 463 items.value[2].title = info.productCrumbsVO.category2;
... ... @@ -455,8 +474,6 @@ watchEffect(() =&gt; {
455 474 items.value[3].href =
456 475 href2.value + "&function=" + info.productCrumbsVO.function;
457 476 }
458   - items.value[4].title = info.name;
459   - items.value[4].href = "https://www.canrud.com/products/detail/" + info.id;
460 477 }
461 478 // recommendList.value = resData.value.data.records;
462 479  
... ... @@ -497,6 +514,10 @@ watchEffect(() =&gt; {
497 514 background-color: #fff;
498 515 }
499 516  
  517 +.tw-sticky {
  518 + position: sticky;
  519 +}
  520 +
500 521 // .button-container {
501 522 // margin-top: 6px;
502 523 // display: flex;
... ...
components/ProductDetail.vue
  View file @98a5529
1 1 <template>
2 2 <v-container>
3 3 <div>
4   - <v-breadcrumbs divider="/" style="padding-top: 0">
  4 + <!-- <v-breadcrumbs divider="/" style="padding-top: 0">
5 5 <template v-for="(item, index) in items" :key="index">
6 6 <v-breadcrumbs-item
7 7 :disabled="item.disabled"
... ... @@ -19,11 +19,32 @@
19 19 >
20 20 {{ item.title }}
21 21 </v-breadcrumbs-item>
22   - <!-- 添加分隔符，排除最后一个 item -->
23 22 <span v-if="index < items.length - 1" class="breadcrumb-divider"
24 23 >/</span
25 24 >
26 25 </template>
  26 + </v-breadcrumbs> -->
  27 + <v-breadcrumbs divider="/" style="padding-top: 0">
  28 + <template v-for="(item, index) in items" :key="index">
  29 + <v-breadcrumbs-item
  30 + :disabled="item.disabled"
  31 + :href="item.href"
  32 + :class="{
  33 + 'breadcrumb-disabled': item.disabled,
  34 + 'breadcrumb-active': !item.disabled,
  35 + }"
  36 + style="font-size: 14px"
  37 + >
  38 + {{ item.title }}
  39 + </v-breadcrumbs-item>
  40 + <!-- 添加分隔符，排除最后一个 item -->
  41 + <span
  42 + v-if="index < items.length - 1"
  43 + class="breadcrumb-divider"
  44 + style="color: gray"
  45 + >/</span
  46 + >
  47 + </template>
27 48 </v-breadcrumbs>
28 49 </div>
29 50 <v-row class="mb-16 ma-0">
... ... @@ -382,11 +403,6 @@ const items = ref&lt;BreadcrumbItem[]&gt;([
382 403 disabled: false,
383 404 href: "/products",
384 405 },
385   - {
386   - title: "TITLE",
387   - disabled: false,
388   - href: "/products",
389   - },
390 406 ]);
391 407  
392 408 const props = defineProps<{
... ... @@ -432,8 +448,6 @@ watchEffect(() =&gt; {
432 448 items.value[3].href =
433 449 href2.value + "&function=" + info.productCrumbsVO.function;
434 450 }
435   - items.value[4].title = info.name;
436   - items.value[4].href = "https://www.canrud.com/products/detail/" + info.id;
437 451 } else if (routeQuery.categories) {
438 452 if (!routeQuery.categories.includes("Energy materials")) {
439 453 routeQuery.updateFunction("Not specified");
... ... @@ -467,8 +481,6 @@ watchEffect(() =&gt; {
467 481 href2.value + "&function=" + routeQuery.selectedFunction;
468 482 // routeQuery.updateFunction(null);
469 483 }
470   - items.value[4].title = info.name;
471   - items.value[4].href = "https://www.canrud.com/products/detail/" + info.id;
472 484 } else if (info?.productCrumbsVO?.category1) {
473 485 items.value[1].title = info.productCrumbsVO.category1;
474 486 items.value[1].href =
... ... @@ -492,8 +504,6 @@ watchEffect(() =&gt; {
492 504 items.value[3].href =
493 505 href2.value + "&function=" + info.productCrumbsVO.function;
494 506 }
495   - items.value[4].title = info.name;
496   - items.value[4].href = "https://www.canrud.com/products/detail/" + info.id;
497 507 }
498 508 recommendList.value = resData.value.data.records;
499 509  
... ... @@ -609,7 +619,7 @@ th {
609 619 }
610 620  
611 621 .breadcrumb-active {
612   - color: gray;
  622 + color: #1e88e5;
613 623 }
614 624  
615 625 #image-container {
... ...