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

boyang
1 parent 1e2b5f32
Showing 5 changed files with 219 additions and 165 deletions
components/MobileCategoryList.vue
components/MobileProductDetail.vue
components/ProductDetail.vue
pages/products/index.vue
stores/category.ts
@@ -118,87 +118,118 @@ const CATEGORY_IMG = [
 ];
 watchEffect(async () => {
-  // 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"; // 取第二个值（如果存在）
+  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 [];
-  //     });
+    // 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 [];
+        });
-  //     // 4. 查找对应的子分类 ID
-  //     const foundFuncCategory = subCategoryList.value.find(
-  //       (func) => func.name === subCategoryName.value
-  //     );
+        // 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.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 [];
+        });
-  //     if (foundFuncCategory) {
-  //       const funcCategoryId = foundFuncCategory.id;
-  //       // 你可以在这里使用找到的 funcCategoryId
-  //       categoryStore.updateFuncCategory(funcCategoryId);
-  //     }
-  //     // // 6. 查找对应的功能分类 ID
-  //     // const foundFuncCategory = funcCategories.find(
-  //     //   (func) => func.name === functionName
-  //     // );
+        // 4. 查找对应的子分类 ID
+        const foundFuncCategory = subCategoryList.value.find(
+          (func) => func.name === subCategoryName.value
+        );
-  //     // 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 (
+        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
+        );
+        console.log(foundFuncCategory, "5656functionName");
+
+        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 (
     Object.keys(route.query).length === 0 &&
     !route.path.includes("/products/detail")
   ) {
@@ -312,86 +312,6 @@ const href2 = ref(&quot;/products&quot;);
 const routeQuery = useRouteQuery();
 const productStore = useProductListStore();
 const currentUrl = ref("https://www.canrud.com/products");
-// const ticketDiv = ref<HTMLDivElement | null>(null); // 引用 ticketDiv
-// const bottomButton = ref<HTMLDivElement | null>(null); // 引用按钮元素
-// let isMonitoring = false; // 是否正在监控 ticketDiv
-// let isMonitoringBtn = false; // 是否正在监控 ticketDiv
-// const showBottomButton = ref(false); // 按钮是否显示
-// const isFixed = ref(false); // 按钮是否固定
-
-// const handleScroll = () => {
-//   // 检查 ticketDiv 的可见性
-//   if (ticketDiv.value) {
-//     const rect = ticketDiv.value.getBoundingClientRect();
-//     if (rect.top <= window.innerHeight && rect.bottom >= 0) {
-//       if (!isMonitoring) {
-//         console.log("5656进入监控区域，显示按钮");
-//         isMonitoring = true;
-//         showBottomButton.value = true; // 显示按钮
-//         isFixed.value = true;
-//       }
-//     } else {
-//       if (isMonitoring) {
-//         console.log("5656离开监控区域，隐藏按钮");
-//         isMonitoring = false;
-//         // showBottomButton.value = false; // 隐藏按钮
-//       }
-//     }
-//   }
-
-// // 检查按钮位置，决定是否固定
-// if (bottomButton.value) {
-//   const buttonRect = bottomButton.value.getBoundingClientRect();
-//   if (buttonRect.bottom <= window.innerHeight) {
-//     console.log(window.innerHeight, "5656离开监控区域，显示按钮1");
-//     isFixed.value = false; // 按钮不固定
-//   } else {
-//     console.log(window.innerHeight, "5656进入监控区域，隐藏按钮1");
-//     isFixed.value = true; // 按钮固定在底部
-//   }
-// }
-// };
-
-// const handleScrollBtn = () => {
-//   // 检查 ticketDiv 的可见性
-//   if (bottomButton.value) {
-//     const rect = bottomButton.value.getBoundingClientRect();
-//     if (rect.top <= window.innerHeight && rect.bottom >= 0) {
-//       if (!isMonitoringBtn) {
-//         console.log("5656进入监控区域，显示按钮1");
-//         isMonitoringBtn = true;
-//       }
-//     } else {
-//       if (isMonitoringBtn) {
-//         console.log("5656离开监控区域，隐藏按钮1");
-//         isMonitoringBtn = false;
-//         // showBottomButton.value = false; // 隐藏按钮
-//       }
-//     }
-//   }
-
-//   // // 检查按钮位置，决定是否固定
-//   // if (bottomButton.value) {
-//   //   const buttonRect = bottomButton.value.getBoundingClientRect();
-//   //   if (buttonRect.bottom <= window.innerHeight) {
-//   //     console.log(window.innerHeight, "5656离开监控区域，显示按钮1");
-//   //     isFixed.value = false; // 按钮不固定
-//   //   } else {
-//   //     console.log(window.innerHeight, "5656进入监控区域，隐藏按钮1");
-//   //     isFixed.value = true; // 按钮固定在底部
-//   //   }
-//   // }
-// };
-
-// onMounted(() => {
-//   window.addEventListener("scroll", handleScroll);
-//   window.addEventListener("scroll", handleScrollBtn);
-// });
-
-// onUnmounted(() => {
-//   window.removeEventListener("scroll", handleScroll);
-//   window.removeEventListener("scroll", handleScrollBtn);
-// });
 interface BreadcrumbItem {
   title: string; // 标题
@@ -592,11 +592,6 @@ const navigateToUrl = (url) =&gt; {
 const toggleRow = () => {
   currentIndex.value = currentIndex.value === 0 ? 1 : 0;
 };
-// onMounted(() => {
-//   recommendImages.value.forEach((imageArray, index) => {
-//     console.log(`5656Image Object ${index + 1}:`, imageArray[0]);
-//   });
-// });
 const tab = ref(0);
 const slide = ref(0);
@@ -89,6 +89,7 @@ const route = useRoute(); // 获取路由信息
 const router = useRouter(); // 获取路由信息
 const title = ref("");
 const keywordTitle = ref("");
+const isOrNotMobile = isMobile();
 watchEffect(() => {
   // 遍历数组
   if (router.currentRoute.value.query.categories) {
@@ -121,7 +122,7 @@ useHead({
     },
   ],
 });
-
+const firstIndex = ref(0);
 const loadProducts = async () => {
   let params: any = {
     pageNo: productStore.pageNo,
@@ -136,31 +137,139 @@ const loadProducts = async () =&gt; {
     loading.value = false;
     return;
   }
+  const categories = ref();
+  const mainCategory = ref();
+  if (router.currentRoute.value.query.categories) {
+    categories.value = router.currentRoute.value.query.categories.split(",");
+    mainCategory.value = categories.value[0].trim(); // 取第一个值
+  }
   params.productCategoryId = categoryStore.selectedSubCategory;
   // productCategoryId: '78b86c6e917841cf9a292234f2805e24',
-
   if (categoryStore.selectedFuncCategory) {
     params.productFunctionId = categoryStore.selectedFuncCategory;
+    if (firstIndex.value == 1) {
+      // categoryStore.selectedFuncCategory = selectedFuncCategoryBak.value;
+      params.productFunctionId = selectedFuncCategoryBak.value;
+      firstIndex.value += 1;
+      if (
+        params.productFunctionId == "" &&
+        selectedFuncCategoryBak.value == ""
+      ) {
+        params.productFunctionId = categoryStore.selectedFuncCategory;
+      }
+      console.log(
+        params.productFunctionId,
+        selectedFuncCategoryBak.value,
+        categoryStore.selectedFuncCategory
+      );
+    }
+    // const savedSubCategory = localStorage.getItem("selectedFuncCategory2");
+    // console.log(savedSubCategory, "5656savedSubCategory");
+    // localStorage.setItem("selectedFuncCategory3", "2");
+  } else if (mainCategory.value == "Energy materials") {
+    params.productCategoryId = categoryStore.selectedSubCategory;
   }
+  console.log(
+    // params,
+    // productStore?.params,
+    // categoryStore.selectedSubCategory,
+    // categoryStore.selectedFuncCategory,
+    window.selectedSubCategory,
+    window.selectedFuncCategory
+  );
   if (
     categoryStore.selectedSubCategory &&
     !isEqual(productStore.params, params)
   ) {
+    // console.log(route, "5656route");
     productStore.updateParams(params);
+    const categories = ref("Laboratory consumables,Others");
+    const mainCategory = categories.value[0].trim(); // 取第一个值
+    // console.log(categoryStore.selectedSubCategory, "5656mobi");
     await productStore.getList(params);
   }
+  // if (
+  //   categoryStore.selectedFuncCategory &&
+  //   !isEqual(productStore.params, params)
+  // ) {
+  //   console.log(
+  //     categoryStore.selectedFuncCategory,
+  //     "5656categoryStore.selectedFuncCategoryss"
+  //   );
+  //   productStore.updateParams(params);
+  //   await productStore.getList(params);
+  // }
+  if (firstIndex.value === 0 && categoryStore.selectedFuncCategory) {
+    // console.log(route, "5656route");
+    productStore.updateParams(params);
+    // const categories = ref("Laboratory consumables,Others");
+    // const mainCategory = categories.value[0].trim(); // 取第一个值
+    // console.log(categoryStore.selectedFuncCategory, "5656mobi");
+    await productStore.getList(params);
+    firstIndex.value = 1;
+  }
   loading.value = false;
 };
-
+const isWindowAssigned = ref(false);
+const selectedSubCategoryBak = ref();
+const selectedFuncCategoryBak = ref();
 watchEffect(async () => {
   if (route.query.keyword !== undefined) {
     productStore.keyword = route.query.keyword;
   }
+  // console.log(categoryStore.selectedSubCategory, "5656index-categoryStore");
+  if (typeof window !== "undefined" && !isWindowAssigned.value) {
+    window.selectedSubCategory = categoryStore.selectedSubCategory;
+    window.selectedFuncCategory = categoryStore.selectedFuncCategory;
+    selectedSubCategoryBak.value = categoryStore.selectedSubCategory;
+    selectedFuncCategoryBak.value = categoryStore.selectedFuncCategory;
+    isWindowAssigned.value = true;
+  }
   loadProducts();
+  // console.log(categoryStore.selectedSubCategory, "5656index-categoryStore");
 });
+// onMounted(() => {
+//   // window.selectedSubCategory = categoryStore.selectedSubCategory;
+//   // window.selectedFuncCategory = categoryStore.selectedFuncCategory;
+//   if (route.query.function) {
+//     const functionName = route.query.function.trim();
+//     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
+//     );
+//     console.log(foundFuncCategory, "5656functionName");
+
+//     if (foundFuncCategory) {
+//       const funcCategoryId = foundFuncCategory.id;
+//       if (typeof localStorage !== "undefined") {
+//         localStorage.setItem("selectedFuncCategory2", funcCategoryId);
+//         localStorage.setItem("selectedFuncCategory3", "1");
+//       }
+//       // 你可以在这里使用找到的 funcCategoryId
+//     }
+//     // // 6. 查找对应的功能分类 ID
+//     // const foundFuncCategory = funcCategories.find(
+//     //   (func) => func.name === functionName
+//     // );
+
+//     // if (foundFuncCategory) {
+//     //   const funcCategoryId = foundFuncCategory.id;
+//     //   // 使用找到的 funcCategoryId
+//     //   categoryStore.updateFuncCategory(funcCategoryId);
+//     // }
+//   }
+// });
 const length = computed(() =>
   productStore.total ? Math.ceil(productStore.total / productStore.pageSize) : 0
@@ -50,7 +50,6 @@ export const useCategoryStore = defineStore(&quot;category&quot;, () =&gt; {
   const updateDisplay = (visible: boolean) => {
     categoryVisible.value = visible;
   };
-
   return {
     list,
     selectedCategory,