feat: 开发面包屑导航

boyang
1 parent 877cab94
Showing 6 changed files with 236 additions and 24 deletions
components/CategoryList.vue
components/ProductDetail.vue
pages/products/detail/[id]/index.vue
pages/products/index.vue
stores/product_list.ts
stores/route_query.ts
@@ -79,7 +79,9 @@ import { useProductListStore } from &quot;@/stores/product_list&quot;;
 import type { CategoryRootType } from "@/type";
 import { computed } from "vue";
 import { useRouter, useRoute } from "vue-router";
+import { useRouteQuery } from "@/stores/route_query";
+const routeQuery = useRouteQuery();
 const route = useRoute();
 const router = useRouter();
@@ -91,11 +93,13 @@ watchEffect(async () =&gt; {
     productStore.updateKeyword("");
     const categories = route.query.categories.split(",");
     const mainCategory = categories[0].trim(); // 取第一个值
-    const subCategoryName = categories[1] ? categories[1].trim() : null; // 取第二个值（如果存在）
+    const subCategoryName = categories[1]
+      ? categories[1].trim()
+      : "Not specified"; // 取第二个值（如果存在）
     // 2. 更新选中的主分类
     categoryStore.updateCategory(mainCategory);
-
+    routeQuery.updateCategories(mainCategory + "," + subCategoryName);
     // 3. 如果有子分类名称，查找其对应的 ID
     if (subCategoryName) {
       const subCategoryList = computed(() => {
@@ -123,6 +127,7 @@ watchEffect(async () =&gt; {
     // 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(
@@ -152,8 +157,23 @@ watchEffect(async () =&gt; {
       //   // 使用找到的 funcCategoryId
       //   categoryStore.updateFuncCategory(funcCategoryId);
       // }
+    } else if (route.query.categories.includes("Energy materials")) {
+      const defaultCategory = categoryStore.list[0];
+      const defaultFuncCategory = defaultCategory.productFunctions[0];
+      if (defaultFuncCategory) {
+        categoryStore.updateFuncCategory(defaultFuncCategory.id);
+      }
+      router.push({
+        query: {
+          categories: route.query.categories,
+          function: defaultFuncCategory.name,
+        },
+      });
     }
-  } else if (Object.keys(route.query).length === 0) {
+  } else if (
+    Object.keys(route.query).length === 0 &&
+    !route.path.includes("/products/detail")
+  ) {
     // 检查是否有默认的分类
     const defaultCategory = categoryStore.list[0]; // 假设第一个分类是默认的
 <template>
   <v-container>
+    <div>
+      <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,
+            }"
+          >
+            {{ item.title }}
+          </v-breadcrumbs-item>
+
+          <!-- 添加分隔符，排除最后一个 item -->
+          <span v-if="index < items.length - 1" class="breadcrumb-divider"
+            >/</span
+          >
+        </template>
+        <span class="breadcrumb-divider">/</span>
+        <span style="margin-left: 5px">{{ info.name }}</span>
+      </v-breadcrumbs>
+    </div>
     <v-row class="mb-16 ma-0">
-      <v-col cols="12" sm="5">
+      <v-col cols="12" sm="5" class="carousel-container">
         <v-carousel
-          class="tw-float-left"
+          class="tw-float-left tw-sticky tw-top-[16px]"
           height="450"
           v-model="slide"
           hide-delimiter-background
+          style="top: 16px"
         >
           <v-carousel-item
             cover
@@ -18,10 +42,11 @@
           </v-carousel-item>
         </v-carousel>
       </v-col>
-      <v-col cols="12" sm="7">
-        <v-row class="bg-white mb-sm-10 text-h4 font-weight-medium">
+      <v-col cols="12" sm="7" class="table-container">
+        <!-- <v-row class="bg-white mb-sm-10 text-h4 font-weight-medium">
           <v-col>{{ info.name }}</v-col>
-        </v-row>
+        </v-row> -->
+        <h1>{{ info.name }}</h1>
         <div class="tw-flex tw-flex-wrap">
           <div class="tw-w-1/2">
             <span class="tw-leading-[10px] tw-m-[16px]">
@@ -65,10 +90,15 @@
             >
           </div>
         </div>
-        <v-table
+        <!-- <v-table
           density="comfortable"
           class="table1 tw-mt-[32px]"
           v-if="info.ticketTypes?.length"
+        > -->
+        <v-table
+          density="comfortable"
+          class="table1 tw-mt-[32px] tw-overflow-x-auto"
+          v-if="info.ticketTypes?.length"
         >
           <thead>
             <tr class="bg-grey-lighten-3">
@@ -145,7 +175,7 @@
             <v-divider class="tw-mb-[12px]"></v-divider>
             <div v-html="info.physicalproperty"></div>
           </div>
-          <div v-if="info.advantage" class="tw-mb-[24px]">
+          <div v-if="info.storage" class="tw-mb-[24px]">
             <div class="text-h6">Storage</div>
             <v-divider class="tw-mb-[12px]"></v-divider>
             <div v-html="info.storage"></div>
@@ -155,7 +185,7 @@
             <v-divider class="tw-mb-[12px]"></v-divider>
             <div v-html="info.introduction"></div>
           </div>
-          <div v-if="info.advantage" class="tw-mb-[24px]">
+          <div v-if="info.description" class="tw-mb-[24px]">
             <div class="text-h6">Description</div>
             <v-divider class="tw-mb-[12px]"></v-divider>
             <div v-html="info.description"></div>
@@ -185,20 +215,116 @@
 import type { Product, ProductImage } from "~/type";
 import { onMounted, ref } from "vue";
 import { useDialogStore } from "~/stores/dialog";
+import { useRouter, useRoute } from "vue-router";
+import { useRouteQuery } from "@/stores/route_query";
+
+const route = useRoute();
+const router = useRouter();
+const routeQuery = useRouteQuery();
 const dialogStore = useDialogStore();
+const href1 = ref("/products");
+const href2 = ref("/products");
+// 定义单个 item 的接口
+interface BreadcrumbItem {
+  title: string; // 标题
+  disabled: boolean; // 是否禁用
+  href: string; // 链接地址
+}
+
+// 示例数据
+const items = ref<BreadcrumbItem[]>([
+  {
+    title: "Products",
+    disabled: false,
+    href: "/products",
+  },
+  {
+    title: "CATEGORY",
+    disabled: false,
+    href: href1.value,
+  },
+  {
+    title: "DEVICE TYPE",
+    disabled: false,
+    href: href2.value,
+  },
+  {
+    title: "FUNCTION",
+    disabled: false,
+    href: "/products",
+  },
+  // {
+  //   title: "TITLE",
+  //   disabled: false,
+  //   href: "",
+  // },
+]);
 const props = defineProps<{
   info: Product;
 }>();
 const info = props.info;
-
+watchEffect(() => {
+  if (routeQuery.categories) {
+    if (!routeQuery.categories.includes("Energy materials")) {
+      routeQuery.updateFunction("Not specified");
+    }
+    const categories = routeQuery.categories.split(",");
+    const mainCategory = categories[0].trim(); // 取第一个值
+    const subCategoryName = ref(
+      categories[1] ? categories[1].trim() : "Not specified"
+    ); // 取第二个值（如果存在）
+    if (subCategoryName.value == "Accessories & fixtures") {
+      subCategoryName.value = encodeURIComponent("Accessories & fixtures");
+      items.value[2].title = "Accessories & fixtures";
+    } else {
+      items.value[2].title = subCategoryName.value;
+    }
+    items.value[1].title = mainCategory;
+    items.value[1].href = href1.value + "?categories=" + mainCategory;
+    href1.value = href1.value + "?categories=" + mainCategory;
+    // items.value[1].title = subCategoryName.value;
+    href2.value = href1.value + "," + subCategoryName.value;
+    items.value[2].href = href1.value + "," + subCategoryName.value;
+    if (routeQuery?.selectedFunction) {
+      // items.value.push({
+      //   title: routeQuery.selectedFunction,
+      //   disabled: false,
+      //   href: href2.value + "&function=" + routeQuery.selectedFunction,
+      // });
+      items.value[3].title = routeQuery.selectedFunction;
+      items.value[3].href =
+        href2.value + "&function=" + routeQuery.selectedFunction;
+      // routeQuery.updateFunction(null);
+    }
+  } else if (info?.productCrumbsVO?.category1) {
+    items.value[1].title = info.productCrumbsVO.category1;
+    items.value[1].href =
+      href1.value + "?categories=" + info.productCrumbsVO.category1;
+    href1.value = href1.value + "?categories=" + info.productCrumbsVO.category1;
+    if (info?.productCrumbsVO?.category2) {
+      items.value[2].title = info.productCrumbsVO.category2;
+      href2.value = href1.value + "," + info.productCrumbsVO.category2;
+      items.value[2].href = href1.value + "," + info.productCrumbsVO.category2;
+    }
+    if (info?.productCrumbsVO?.function) {
+      // items.value.push({
+      //   title: info.productCrumbsVO.function,
+      //   disabled: false,
+      //   href: href2.value + "&function=" + info.productCrumbsVO.function,
+      // });
+      items.value[3].title = info.productCrumbsVO.function;
+      items.value[3].href =
+        href2.value + "&function=" + info.productCrumbsVO.function;
+    }
+  }
+});
 // onMounted(() => {
 //   dialogStore.updateDialog(true)
 // })
 const tab = ref(0);
 const slide = ref(0);
-const router = useRouter();
 </script>
 <style lang="scss" scoped>
@@ -231,4 +357,42 @@ th {
     border-bottom: 1px solid #dcdcdc !important;
   }
 }
+
+.tw-sticky {
+  position: sticky;
+}
+
+.carousel-container {
+  position: relative;
+}
+
+.table-container {
+  overflow-x: auto; /* 防止表格超出页面宽度 */
+}
+
+.table1 {
+  width: 100%;
+  min-width: 600px; /* 设置表格最小宽度 */
+}
+
+.tr {
+  border-bottom: 1px solid #e0e0e0; /* 表格行样式 */
+}
+
+.headerBorder {
+  border-bottom: 2px solid #ccc; /* 表头边框 */
+}
+
+.text-grey-darken-4 {
+  color: #333; /* 表格文字颜色 */
+}
+.breadcrumb-disabled {
+  color: black;
+  pointer-events: none; /* 禁用点击 */
+  text-decoration: none; /* 移除链接样式 */
+}
+
+.breadcrumb-active {
+  color: gray;
+}
 </style>
@@ -11,7 +11,7 @@ import type { Product, ProductImage } from &quot;~/type&quot;;
 import { useRoute, useRouter } from "vue-router";
 const route = useRoute();
-
+const router = useRouter();
 const info = ref<Partial<Product>>({
   productimageliststore: [],
   productAttributeList: [],
@@ -44,22 +44,17 @@ watchEffect(() =&gt; {
       },
       {
         name: "keywords",
-        content:
-          info.value.name ||
-          "科路得,Equipment,High-precision,Machining center,Design,Manufacturing capabilities,Equipment supply,Production line planning,Construction services,Battery assembly lines,Pouch cell testing lines",
+        content: info.value.name || info.value.metakeywords,
       },
       {
         name: "description",
-        content:
-          info.value.name ||
-          "科路得,助您科研之路势在必得。Equipment Business: With our self-built high-precision machining center, we possess robust design and manufacturing capabilities. We offer comprehensive equipment supply, production line planning, and construction services, including battery assembly lines, pouch cell testing lines, and more. Our aim is to provide complete equipment solutions that cater to the diverse needs of our clients. Expect top-quality equipment and professional services that will help you stand out in a fiercely competitive market!",
+        content: info.value.metadescription || info.value.name,
       },
     ],
   });
 });
 const newData: Product = resData.value.data;
-
 newData.productimageliststore =
   typeof newData.productimageliststore === "string"
     ? JSON.parse(newData.productimageliststore) || []
@@ -86,9 +86,21 @@ const productStore = useProductListStore();
 const categoryStore = useCategoryStore();
 const loading = ref(false);
 const route = useRoute(); // 获取路由信息
+const router = useRouter(); // 获取路由信息
+const title = ref("");
+watchEffect(() => {
+  // 遍历数组
+  if (router.currentRoute.value.query.categories) {
+    title.value = `${router.currentRoute.value.query.categories}`;
+  }
+  if (router.currentRoute.value.query.function) {
+    title.value += `,${router.currentRoute.value.query.function}`;
+  }
+  // document.title = title.value;
+});
 useHead({
-  title: "canrud",
+  title: title.value,
   meta: [
     {
       name: "title",
@@ -109,7 +121,6 @@ useHead({
 });
 const loadProducts = async () => {
-  console.log(productStore, "5656productStore");
   let params: any = {
     pageNo: productStore.pageNo,
     pageSize: 20,
@@ -32,7 +32,7 @@ export const useProductListStore = defineStore(&quot;productList&quot;, () =&gt; {
           imgList: JSON.parse(
             record.productimageliststore as unknown as string
           ).map((item: ProductImage) => ({
-            url: `/api/show/image?fileKey=${item.fileKey}&psize=p512`,
+            url: `/api/show/image?fileKey=${item.fileKey}&psize=p256`,
           })),
         })) || [];
       total.value = data.value?.data?.total || 0;
+import { ref } from "vue";
+import { defineStore } from "pinia";
+
+export const useRouteQuery = defineStore("routeQuery", () => {
+  const categories = ref();
+  const selectedFunction = ref();
+
+  const updateCategories = (value: string) => {
+    categories.value = value;
+  };
+
+  const updateFunction = (value: string | null) => {
+    selectedFunction.value = value;
+  };
+
+  return {
+    categories,
+    selectedFunction,
+    updateCategories,
+    updateFunction,
+  };
+});