fix: 修改导航栏颜色

boyang
1 parent 83239a25
Showing 3 changed files with 180 additions and 147 deletions
components/MobileCategoryList.vue
components/MobileProductDetail.vue
components/ProductDetail.vue
@@ -117,128 +117,130 @@ 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"; // 取第二个值（如果存在）
+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"; // 取第二个值（如果存在）
-//     // 2. 更新选中的主分类
-//     categoryStore.updateCategory(mainCategory);
-//     routeQuery.updateCategories(mainCategory + "," + subCategoryName.value);
-//     // 3. 如果有子分类名称，查找其对应的 ID
-//     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);
+    // 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);
+      }
+    }
+    // 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);
+      }
+      // // 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")) {
-//       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")
-//   ) {
-//     // 检查是否有默认的分类
-//     const defaultCategory = categoryStore.list[0]; // 假设第一个分类是默认的
+      // 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")
+  ) {
+    // 检查是否有默认的分类
+    const defaultCategory = categoryStore.list[0]; // 假设第一个分类是默认的
-//     if (defaultCategory) {
-//       const defaultCategoryName = defaultCategory.categoryDisplayName;
-//       const defaultSubCategory = defaultCategory.list[1]; // 假设第一个子分类为默认子分类
-//       const defaultFuncCategory = defaultCategory.productFunctions[1]; // 假设第一个功能分类为默认功能分类
+    if (defaultCategory) {
+      const defaultCategoryName = defaultCategory.categoryDisplayName;
+      const defaultSubCategory = defaultCategory.list[1]; // 假设第一个子分类为默认子分类
+      const defaultFuncCategory = defaultCategory.productFunctions[1]; // 假设第一个功能分类为默认功能分类
-//       // 更新 store 和 URL
-//       categoryStore.updateCategory(defaultCategoryName);
-//       productStore.updatePageNo(1);
+      // 更新 store 和 URL
+      categoryStore.updateCategory(defaultCategoryName);
+      productStore.updatePageNo(1);
-//       if (defaultSubCategory) {
-//         categoryStore.updateSubCategory(defaultSubCategory.id);
+      if (defaultSubCategory) {
+        categoryStore.updateSubCategory(defaultSubCategory.id);
-//         // 如果有之前的值则使用之前的值，拼接新的子分类名
-//         const updatedCategory =
-//           defaultCategoryName + "," + defaultSubCategory.name;
+        // 如果有之前的值则使用之前的值，拼接新的子分类名
+        const updatedCategory =
+          defaultCategoryName + "," + defaultSubCategory.name;
-//         // 拼接设备类型到 URL
-//         router.push({
-//           query: {
-//             categories: defaultCategoryName + "," + defaultSubCategory.name,
-//           },
-//         });
-//       }
+        // 拼接设备类型到 URL
+        router.push({
+          query: {
+            categories: defaultCategoryName + "," + defaultSubCategory.name,
+          },
+        });
+      }
-//       if (defaultFuncCategory) {
-//         categoryStore.updateFuncCategory(defaultFuncCategory.id);
-//         // 拼接功能类型到 URL
-//         router.push({
-//           query: {
-//             categories: defaultCategoryName + "," + defaultSubCategory.name,
-//             function: defaultFuncCategory.name,
-//           },
-//         });
-//       }
-//     }
-//   }
-// });
+      if (defaultFuncCategory) {
+        categoryStore.updateFuncCategory(defaultFuncCategory.id);
+        // 拼接功能类型到 URL
+        router.push({
+          query: {
+            categories: defaultCategoryName + "," + defaultSubCategory.name,
+            function: defaultFuncCategory.name,
+          },
+        });
+      }
+    }
+  }
+});
 const SEO = {
   "Energy materials":
@@ -252,7 +254,7 @@ const SEO = {
 };
 const handleDrawerHide = () => {
-  productStore.updatePageNo(1);
+  // productStore.updatePageNo(1);
   // router.push({
   //   query: {
 <template>
   <div>
-    <v-breadcrumbs
+    <!-- <v-breadcrumbs
       divider="/"
       dense
       style="
@@ -29,7 +29,34 @@
         <span
           v-if="index < items.length - 1"
           class="breadcrumb-divider"
-          style="margin: 0 4px; font-size: 14px"
+          style="margin: 0 4px; font-size: 14px; color: gray"
+          >/</span
+        >
+      </template>
+    </v-breadcrumbs> -->
+    <v-breadcrumbs
+      divider="/"
+      dense
+      style="
+        padding-top: 8px;
+        font-size: 14px;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+      "
+    >
+      <template v-for="(item, index) in items" :key="index">
+        <v-breadcrumbs-item
+          :disabled="item.disabled"
+          :href="item.href"
+          style="color: #1e88e5"
+        >
+          {{ item.title }}
+        </v-breadcrumbs-item>
+        <span
+          v-if="index < items.length - 1"
+          class="breadcrumb-divider"
+          style="margin: 0 4px; font-size: 14px; color: gray"
           >/</span
         >
       </template>
@@ -78,6 +105,7 @@
       </v-col>
     </v-row>
     <div
+      ref="ticketDiv"
       v-if="info.ticketTypes?.length"
       class="py-0 mx-4 rounded-lg tw-flex tw-flex-wrap tw-justify-around"
     >
@@ -164,7 +192,7 @@
       > -->
       <v-btn
         style="margin-top: 12px"
-        color="blue-darken-1"
+        color="blue-darken-1 tw-sticky"
         @click="router.push('/contact')"
       >
         Quotation Inquiry
@@ -347,7 +375,7 @@ const items = ref&lt;BreadcrumbItem[]&gt;([
   {
     title: "Products",
     disabled: false,
-    href: "https://www.canrud.com/products",
+    href: "http://localhost:3000/products",
   },
   {
     title: "CATEGORY",
@@ -364,21 +392,16 @@ const items = ref&lt;BreadcrumbItem[]&gt;([
     disabled: false,
     href: "/products",
   },
-  {
-    title: "TITLE",
-    disabled: false,
-    href: "/products",
-  },
 ]);
 watchEffect(() => {
   console.log(info, "5656info");
   if (info?.productCrumbsVO?.category1 && productStore.keyword) {
     items.value[1].title = info.productCrumbsVO.category1;
     items.value[1].href =
-      "https://www.canrud.com/products?categories=" +
+      "http://localhost:3000/products?categories=" +
       info.productCrumbsVO.category1;
     href1.value =
-      "https://www.canrud.com/products?categories=" +
+      "http://localhost:3000/products?categories=" +
       info.productCrumbsVO.category1;
     if (info?.productCrumbsVO?.category2) {
       items.value[2].title = info.productCrumbsVO.category2;
@@ -395,8 +418,6 @@ watchEffect(() =&gt; {
       items.value[3].href =
         href2.value + "&function=" + info.productCrumbsVO.function;
     }
-    items.value[4].title = info.name;
-    items.value[4].href = "https://www.canrud.com/products/detail/" + info.id;
   } else if (routeQuery.categories) {
     if (!routeQuery.categories.includes("Energy materials")) {
       routeQuery.updateFunction("Not specified");
@@ -414,8 +435,8 @@ watchEffect(() =&gt; {
     }
     items.value[1].title = mainCategory;
     items.value[1].href =
-      "https://www.canrud.com/products?categories=" + mainCategory;
-    href1.value = "https://www.canrud.com/products?categories=" + mainCategory;
+      "http://localhost:3000/products?categories=" + mainCategory;
+    href1.value = "http://localhost:3000/products?categories=" + mainCategory;
     // items.value[1].title = subCategoryName.value;
     href2.value = href1.value + "," + subCategoryName.value;
     items.value[2].href = href1.value + "," + subCategoryName.value;
@@ -430,15 +451,13 @@ watchEffect(() =&gt; {
         href2.value + "&function=" + routeQuery.selectedFunction;
       // routeQuery.updateFunction(null);
     }
-    items.value[4].title = info.name;
-    items.value[4].href = "https://www.canrud.com/products/detail/" + info.id;
   } else if (info?.productCrumbsVO?.category1) {
     items.value[1].title = info.productCrumbsVO.category1;
     items.value[1].href =
-      "https://www.canrud.com/products?categories=" +
+      "http://localhost:3000/products?categories=" +
       info.productCrumbsVO.category1;
     href1.value =
-      "https://www.canrud.com/products?categories=" +
+      "http://localhost:3000/products?categories=" +
       info.productCrumbsVO.category1;
     if (info?.productCrumbsVO?.category2) {
       items.value[2].title = info.productCrumbsVO.category2;
@@ -455,8 +474,6 @@ watchEffect(() =&gt; {
       items.value[3].href =
         href2.value + "&function=" + info.productCrumbsVO.function;
     }
-    items.value[4].title = info.name;
-    items.value[4].href = "https://www.canrud.com/products/detail/" + info.id;
   }
   // recommendList.value = resData.value.data.records;
@@ -497,6 +514,10 @@ watchEffect(() =&gt; {
   background-color: #fff;
 }
+.tw-sticky {
+  position: sticky;
+}
+
 // .button-container {
 //   margin-top: 6px;
 //   display: flex;
 <template>
   <v-container>
     <div>
-      <v-breadcrumbs divider="/" style="padding-top: 0">
+      <!-- <v-breadcrumbs divider="/" style="padding-top: 0">
         <template v-for="(item, index) in items" :key="index">
           <v-breadcrumbs-item
             :disabled="item.disabled"
@@ -19,11 +19,32 @@
           >
             {{ item.title }}
           </v-breadcrumbs-item>
-          <!-- 添加分隔符，排除最后一个 item -->
           <span v-if="index < items.length - 1" class="breadcrumb-divider"
             >/</span
           >
         </template>
+      </v-breadcrumbs> -->
+      <v-breadcrumbs divider="/" style="padding-top: 0">
+        <template v-for="(item, index) in items" :key="index">
+          <v-breadcrumbs-item
+            :disabled="item.disabled"
+            :href="item.href"
+            :class="{
+              'breadcrumb-disabled': item.disabled,
+              'breadcrumb-active': !item.disabled,
+            }"
+            style="font-size: 14px"
+          >
+            {{ item.title }}
+          </v-breadcrumbs-item>
+          <!-- 添加分隔符，排除最后一个 item -->
+          <span
+            v-if="index < items.length - 1"
+            class="breadcrumb-divider"
+            style="color: gray"
+            >/</span
+          >
+        </template>
       </v-breadcrumbs>
     </div>
     <v-row class="mb-16 ma-0">
@@ -382,11 +403,6 @@ const items = ref&lt;BreadcrumbItem[]&gt;([
     disabled: false,
     href: "/products",
   },
-  {
-    title: "TITLE",
-    disabled: false,
-    href: "/products",
-  },
 ]);
 const props = defineProps<{
@@ -432,8 +448,6 @@ watchEffect(() =&gt; {
       items.value[3].href =
         href2.value + "&function=" + info.productCrumbsVO.function;
     }
-    items.value[4].title = info.name;
-    items.value[4].href = "https://www.canrud.com/products/detail/" + info.id;
   } else if (routeQuery.categories) {
     if (!routeQuery.categories.includes("Energy materials")) {
       routeQuery.updateFunction("Not specified");
@@ -467,8 +481,6 @@ watchEffect(() =&gt; {
         href2.value + "&function=" + routeQuery.selectedFunction;
       // routeQuery.updateFunction(null);
     }
-    items.value[4].title = info.name;
-    items.value[4].href = "https://www.canrud.com/products/detail/" + info.id;
   } else if (info?.productCrumbsVO?.category1) {
     items.value[1].title = info.productCrumbsVO.category1;
     items.value[1].href =
@@ -492,8 +504,6 @@ watchEffect(() =&gt; {
       items.value[3].href =
         href2.value + "&function=" + info.productCrumbsVO.function;
     }
-    items.value[4].title = info.name;
-    items.value[4].href = "https://www.canrud.com/products/detail/" + info.id;
   }
   recommendList.value = resData.value.data.records;
@@ -609,7 +619,7 @@ th {
 }
 .breadcrumb-active {
-  color: gray;
+  color: #1e88e5;
 }
 #image-container {