canrd-main / canrud-nuxt-front · Commits

Commit 826a5bf6d80547b1167c3a86b142d9e95a418d7e

Authored by boyang
1 parent 1e2b5f32
build: skipped

fix: 解决手机端url匹配问题

Inline Side-by-side
Showing 5 changed files with 219 additions and 165 deletions
components/MobileCategoryList.vue
  View file @826a5bf
... ... @@ -118,87 +118,118 @@ const CATEGORY_IMG = [
118 118 ];
119 119  
120 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"; // 取第二个值（如果存在）
  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) {
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   - // });
  131 + // 2. 更新选中的主分类
  132 + categoryStore.updateCategory(mainCategory);
  133 + routeQuery.updateCategories(mainCategory + "," + subCategoryName.value);
  134 + if (!route.query.categories.includes("Energy materials")) {
  135 + // 3. 如果有子分类名称，查找其对应的 ID
  136 + if (subCategoryName.value) {
  137 + // if (subCategoryName.value && mainCategory !== "Energy materials") {
  138 + const subCategoryList = computed(() => {
  139 + if (categoryStore.selectedCategory) {
  140 + const tmp = categoryStore.list.filter(
  141 + (item) =>
  142 + item.categoryDisplayName === categoryStore.selectedCategory
  143 + );
  144 + return tmp?.[0]?.list || [];
  145 + }
  146 + return [];
  147 + });
147 148  
148   - // // 4. 查找对应的子分类 ID
149   - // const foundFuncCategory = subCategoryList.value.find(
150   - // (func) => func.name === subCategoryName.value
151   - // );
  149 + // 4. 查找对应的子分类 ID
  150 + const foundFuncCategory = subCategoryList.value.find(
  151 + (func) => func.name === subCategoryName.value
  152 + );
152 153  
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   - // );
  154 + if (foundFuncCategory) {
  155 + const funcCategoryId = foundFuncCategory.id;
  156 + // 你可以在这里使用找到的 funcCategoryId
  157 + categoryStore.updateSubCategory(funcCategoryId);
  158 + }
  159 + }
  160 + } else {
  161 + // 3. 如果有子分类名称，查找其对应的 ID
  162 + if (subCategoryName.value) {
  163 + // if (subCategoryName.value && mainCategory !== "Energy materials") {
  164 + const subCategoryList = computed(() => {
  165 + if (categoryStore.selectedCategory) {
  166 + const tmp = categoryStore.list.filter(
  167 + (item) =>
  168 + item.categoryDisplayName === categoryStore.selectedCategory
  169 + );
  170 + return tmp?.[0]?.list || [];
  171 + }
  172 + return [];
  173 + });
176 174  
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   - // // );
  175 + // 4. 查找对应的子分类 ID
  176 + const foundFuncCategory = subCategoryList.value.find(
  177 + (func) => func.name === subCategoryName.value
  178 + );
186 179  
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
201   - if (
  180 + if (foundFuncCategory) {
  181 + const funcCategoryId = foundFuncCategory.id;
  182 + // 你可以在这里使用找到的 funcCategoryId
  183 + categoryStore.updateSubCategory(funcCategoryId);
  184 + }
  185 + }
  186 + // 5. 判断 query 中是否存在 function，并查找对应的 ID
  187 + if (route.query.function) {
  188 + const functionName = route.query.function.trim();
  189 + routeQuery.updateFunction(functionName);
  190 + const funcCategoryList = computed(() => {
  191 + if (categoryStore.selectedCategory) {
  192 + const tmp = categoryStore.list.filter(
  193 + (item) =>
  194 + item.categoryDisplayName === categoryStore.selectedCategory
  195 + );
  196 + return tmp?.[0]?.productFunctions || [];
  197 + }
  198 + return [];
  199 + });
  200 + const foundFuncCategory = funcCategoryList.value.find(
  201 + (func) => func.name === functionName
  202 + );
  203 + console.log(foundFuncCategory, "5656functionName");
  204 +
  205 + if (foundFuncCategory) {
  206 + const funcCategoryId = foundFuncCategory.id;
  207 + if (typeof window !== "undefined") {
  208 + window.selectedFuncCategory = foundFuncCategory.id;
  209 + }
  210 + // 你可以在这里使用找到的 funcCategoryId
  211 + categoryStore.updateFuncCategory(funcCategoryId);
  212 + }
  213 + // // 6. 查找对应的功能分类 ID
  214 + // const foundFuncCategory = funcCategories.find(
  215 + // (func) => func.name === functionName
  216 + // );
  217 +
  218 + // if (foundFuncCategory) {
  219 + // const funcCategoryId = foundFuncCategory.id;
  220 + // // 使用找到的 funcCategoryId
  221 + // categoryStore.updateFuncCategory(funcCategoryId);
  222 + // }
  223 + } else if (route.query.categories.includes("Energy materials")) {
  224 + //没有function默认为第一个
  225 + const defaultCategory = categoryStore.list[0];
  226 + const defaultFuncCategory = defaultCategory.productFunctions[1];
  227 + if (defaultFuncCategory) {
  228 + categoryStore.updateFuncCategory(defaultFuncCategory.id);
  229 + }
  230 + }
  231 + }
  232 + } else if (
202 233 Object.keys(route.query).length === 0 &&
203 234 !route.path.includes("/products/detail")
204 235 ) {
... ...
components/MobileProductDetail.vue
  View file @826a5bf
... ... @@ -312,86 +312,6 @@ const href2 = ref("/products");
312 312 const routeQuery = useRouteQuery();
313 313 const productStore = useProductListStore();
314 314 const currentUrl = ref("https://www.canrud.com/products");
315   -// const ticketDiv = ref<HTMLDivElement | null>(null); // 引用 ticketDiv
316   -// const bottomButton = ref<HTMLDivElement | null>(null); // 引用按钮元素
317   -// let isMonitoring = false; // 是否正在监控 ticketDiv
318   -// let isMonitoringBtn = false; // 是否正在监控 ticketDiv
319   -// const showBottomButton = ref(false); // 按钮是否显示
320   -// const isFixed = ref(false); // 按钮是否固定
321   -
322   -// const handleScroll = () => {
323   -// // 检查 ticketDiv 的可见性
324   -// if (ticketDiv.value) {
325   -// const rect = ticketDiv.value.getBoundingClientRect();
326   -// if (rect.top <= window.innerHeight && rect.bottom >= 0) {
327   -// if (!isMonitoring) {
328   -// console.log("5656进入监控区域，显示按钮");
329   -// isMonitoring = true;
330   -// showBottomButton.value = true; // 显示按钮
331   -// isFixed.value = true;
332   -// }
333   -// } else {
334   -// if (isMonitoring) {
335   -// console.log("5656离开监控区域，隐藏按钮");
336   -// isMonitoring = false;
337   -// // showBottomButton.value = false; // 隐藏按钮
338   -// }
339   -// }
340   -// }
341   -
342   -// // 检查按钮位置，决定是否固定
343   -// if (bottomButton.value) {
344   -// const buttonRect = bottomButton.value.getBoundingClientRect();
345   -// if (buttonRect.bottom <= window.innerHeight) {
346   -// console.log(window.innerHeight, "5656离开监控区域，显示按钮1");
347   -// isFixed.value = false; // 按钮不固定
348   -// } else {
349   -// console.log(window.innerHeight, "5656进入监控区域，隐藏按钮1");
350   -// isFixed.value = true; // 按钮固定在底部
351   -// }
352   -// }
353   -// };
354   -
355   -// const handleScrollBtn = () => {
356   -// // 检查 ticketDiv 的可见性
357   -// if (bottomButton.value) {
358   -// const rect = bottomButton.value.getBoundingClientRect();
359   -// if (rect.top <= window.innerHeight && rect.bottom >= 0) {
360   -// if (!isMonitoringBtn) {
361   -// console.log("5656进入监控区域，显示按钮1");
362   -// isMonitoringBtn = true;
363   -// }
364   -// } else {
365   -// if (isMonitoringBtn) {
366   -// console.log("5656离开监控区域，隐藏按钮1");
367   -// isMonitoringBtn = false;
368   -// // showBottomButton.value = false; // 隐藏按钮
369   -// }
370   -// }
371   -// }
372   -
373   -// // // 检查按钮位置，决定是否固定
374   -// // if (bottomButton.value) {
375   -// // const buttonRect = bottomButton.value.getBoundingClientRect();
376   -// // if (buttonRect.bottom <= window.innerHeight) {
377   -// // console.log(window.innerHeight, "5656离开监控区域，显示按钮1");
378   -// // isFixed.value = false; // 按钮不固定
379   -// // } else {
380   -// // console.log(window.innerHeight, "5656进入监控区域，隐藏按钮1");
381   -// // isFixed.value = true; // 按钮固定在底部
382   -// // }
383   -// // }
384   -// };
385   -
386   -// onMounted(() => {
387   -// window.addEventListener("scroll", handleScroll);
388   -// window.addEventListener("scroll", handleScrollBtn);
389   -// });
390   -
391   -// onUnmounted(() => {
392   -// window.removeEventListener("scroll", handleScroll);
393   -// window.removeEventListener("scroll", handleScrollBtn);
394   -// });
395 315  
396 316 interface BreadcrumbItem {
397 317 title: string; // 标题
... ...
components/ProductDetail.vue
  View file @826a5bf
... ... @@ -592,11 +592,6 @@ const navigateToUrl = (url) =&gt; {
592 592 const toggleRow = () => {
593 593 currentIndex.value = currentIndex.value === 0 ? 1 : 0;
594 594 };
595   -// onMounted(() => {
596   -// recommendImages.value.forEach((imageArray, index) => {
597   -// console.log(`5656Image Object ${index + 1}:`, imageArray[0]);
598   -// });
599   -// });
600 595  
601 596 const tab = ref(0);
602 597 const slide = ref(0);
... ...
pages/products/index.vue
  View file @826a5bf
... ... @@ -89,6 +89,7 @@ const route = useRoute(); // 获取路由信息
89 89 const router = useRouter(); // 获取路由信息
90 90 const title = ref("");
91 91 const keywordTitle = ref("");
  92 +const isOrNotMobile = isMobile();
92 93 watchEffect(() => {
93 94 // 遍历数组
94 95 if (router.currentRoute.value.query.categories) {
... ... @@ -121,7 +122,7 @@ useHead({
121 122 },
122 123 ],
123 124 });
124   -
  125 +const firstIndex = ref(0);
125 126 const loadProducts = async () => {
126 127 let params: any = {
127 128 pageNo: productStore.pageNo,
... ... @@ -136,31 +137,139 @@ const loadProducts = async () =&gt; {
136 137 loading.value = false;
137 138 return;
138 139 }
  140 + const categories = ref();
  141 + const mainCategory = ref();
  142 + if (router.currentRoute.value.query.categories) {
  143 + categories.value = router.currentRoute.value.query.categories.split(",");
  144 + mainCategory.value = categories.value[0].trim(); // 取第一个值
  145 + }
139 146  
140 147 params.productCategoryId = categoryStore.selectedSubCategory;
141 148 // productCategoryId: '78b86c6e917841cf9a292234f2805e24',
142   -
143 149 if (categoryStore.selectedFuncCategory) {
144 150 params.productFunctionId = categoryStore.selectedFuncCategory;
  151 + if (firstIndex.value == 1) {
  152 + // categoryStore.selectedFuncCategory = selectedFuncCategoryBak.value;
  153 + params.productFunctionId = selectedFuncCategoryBak.value;
  154 + firstIndex.value += 1;
  155 + if (
  156 + params.productFunctionId == "" &&
  157 + selectedFuncCategoryBak.value == ""
  158 + ) {
  159 + params.productFunctionId = categoryStore.selectedFuncCategory;
  160 + }
  161 + console.log(
  162 + params.productFunctionId,
  163 + selectedFuncCategoryBak.value,
  164 + categoryStore.selectedFuncCategory
  165 + );
  166 + }
  167 + // const savedSubCategory = localStorage.getItem("selectedFuncCategory2");
  168 + // console.log(savedSubCategory, "5656savedSubCategory");
  169 + // localStorage.setItem("selectedFuncCategory3", "2");
  170 + } else if (mainCategory.value == "Energy materials") {
  171 + params.productCategoryId = categoryStore.selectedSubCategory;
145 172 }
146 173  
  174 + console.log(
  175 + // params,
  176 + // productStore?.params,
  177 + // categoryStore.selectedSubCategory,
  178 + // categoryStore.selectedFuncCategory,
  179 + window.selectedSubCategory,
  180 + window.selectedFuncCategory
  181 + );
147 182 if (
148 183 categoryStore.selectedSubCategory &&
149 184 !isEqual(productStore.params, params)
150 185 ) {
  186 + // console.log(route, "5656route");
151 187 productStore.updateParams(params);
  188 + const categories = ref("Laboratory consumables,Others");
  189 + const mainCategory = categories.value[0].trim(); // 取第一个值
  190 + // console.log(categoryStore.selectedSubCategory, "5656mobi");
152 191  
153 192 await productStore.getList(params);
154 193 }
  194 + // if (
  195 + // categoryStore.selectedFuncCategory &&
  196 + // !isEqual(productStore.params, params)
  197 + // ) {
  198 + // console.log(
  199 + // categoryStore.selectedFuncCategory,
  200 + // "5656categoryStore.selectedFuncCategoryss"
  201 + // );
  202 + // productStore.updateParams(params);
  203 + // await productStore.getList(params);
  204 + // }
  205 + if (firstIndex.value === 0 && categoryStore.selectedFuncCategory) {
  206 + // console.log(route, "5656route");
  207 + productStore.updateParams(params);
  208 + // const categories = ref("Laboratory consumables,Others");
  209 + // const mainCategory = categories.value[0].trim(); // 取第一个值
  210 + // console.log(categoryStore.selectedFuncCategory, "5656mobi");
  211 + await productStore.getList(params);
  212 + firstIndex.value = 1;
  213 + }
155 214 loading.value = false;
156 215 };
157   -
  216 +const isWindowAssigned = ref(false);
  217 +const selectedSubCategoryBak = ref();
  218 +const selectedFuncCategoryBak = ref();
158 219 watchEffect(async () => {
159 220 if (route.query.keyword !== undefined) {
160 221 productStore.keyword = route.query.keyword;
161 222 }
  223 + // console.log(categoryStore.selectedSubCategory, "5656index-categoryStore");
  224 + if (typeof window !== "undefined" && !isWindowAssigned.value) {
  225 + window.selectedSubCategory = categoryStore.selectedSubCategory;
  226 + window.selectedFuncCategory = categoryStore.selectedFuncCategory;
  227 + selectedSubCategoryBak.value = categoryStore.selectedSubCategory;
  228 + selectedFuncCategoryBak.value = categoryStore.selectedFuncCategory;
  229 + isWindowAssigned.value = true;
  230 + }
162 231 loadProducts();
  232 + // console.log(categoryStore.selectedSubCategory, "5656index-categoryStore");
163 233 });
  234 +// onMounted(() => {
  235 +// // window.selectedSubCategory = categoryStore.selectedSubCategory;
  236 +// // window.selectedFuncCategory = categoryStore.selectedFuncCategory;
  237 +// if (route.query.function) {
  238 +// const functionName = route.query.function.trim();
  239 +// const funcCategoryList = computed(() => {
  240 +// if (categoryStore.selectedCategory) {
  241 +// const tmp = categoryStore.list.filter(
  242 +// (item) => item.categoryDisplayName === categoryStore.selectedCategory
  243 +// );
  244 +// return tmp?.[0]?.productFunctions || [];
  245 +// }
  246 +// return [];
  247 +// });
  248 +// const foundFuncCategory = funcCategoryList.value.find(
  249 +// (func) => func.name === functionName
  250 +// );
  251 +// console.log(foundFuncCategory, "5656functionName");
  252 +
  253 +// if (foundFuncCategory) {
  254 +// const funcCategoryId = foundFuncCategory.id;
  255 +// if (typeof localStorage !== "undefined") {
  256 +// localStorage.setItem("selectedFuncCategory2", funcCategoryId);
  257 +// localStorage.setItem("selectedFuncCategory3", "1");
  258 +// }
  259 +// // 你可以在这里使用找到的 funcCategoryId
  260 +// }
  261 +// // // 6. 查找对应的功能分类 ID
  262 +// // const foundFuncCategory = funcCategories.find(
  263 +// // (func) => func.name === functionName
  264 +// // );
  265 +
  266 +// // if (foundFuncCategory) {
  267 +// // const funcCategoryId = foundFuncCategory.id;
  268 +// // // 使用找到的 funcCategoryId
  269 +// // categoryStore.updateFuncCategory(funcCategoryId);
  270 +// // }
  271 +// }
  272 +// });
164 273  
165 274 const length = computed(() =>
166 275 productStore.total ? Math.ceil(productStore.total / productStore.pageSize) : 0
... ...
stores/category.ts
  View file @826a5bf
... ... @@ -50,7 +50,6 @@ export const useCategoryStore = defineStore(&quot;category&quot;, () =&gt; {
50 50 const updateDisplay = (visible: boolean) => {
51 51 categoryVisible.value = visible;
52 52 };
53   -
54 53 return {
55 54 list,
56 55 selectedCategory,
... ...