fix: 修改产品目录urlcategories

boyang
1 parent e995709b
Showing 3 changed files with 140 additions and 59 deletions
components/CategoryList.vue
components/Header.vue
deploy/prod2.sh
@@ -86,9 +86,9 @@ const router = useRouter();
 const categoryStore = useCategoryStore();
 const productStore = useProductListStore();
 watchEffect(async () => {
-  if (route.query.category) {
+  if (route.query.categories) {
     // 1. 提取 query.category 的内容
-    const categories = route.query.category.split(",");
+    const categories = route.query.categories.split(",");
     const mainCategory = categories[0].trim(); // 取第一个值
     const subCategoryName = categories[1] ? categories[1].trim() : null; // 取第二个值（如果存在）
@@ -152,8 +152,52 @@ watchEffect(async () =&gt; {
       //   categoryStore.updateFuncCategory(funcCategoryId);
       // }
     }
-  } else {
   }
+  // else {
+  //   console.log(route.query, "5656mountedquery222");
+
+  //   // 检查是否有默认的分类
+  //   const defaultCategory = categoryStore.list[0]; // 假设第一个分类是默认的
+  //   console.log(categoryStore.list[0], "5656mountedquery333");
+
+  //   if (defaultCategory) {
+  //     console.log(defaultCategory, "5656mountedquery444");
+
+  //     const defaultCategoryName = defaultCategory.categoryDisplayName;
+  //     const defaultSubCategory = defaultCategory.list[0]; // 假设第一个子分类为默认子分类
+  //     const defaultFuncCategory = defaultCategory.productFunctions[0]; // 假设第一个功能分类为默认功能分类
+
+  //     // 更新 store 和 URL
+  //     categoryStore.updateCategory(defaultCategoryName);
+  //     productStore.updatePageNo(1);
+
+  //     if (defaultSubCategory) {
+  //       categoryStore.updateSubCategory(defaultSubCategory.id);
+
+  //       // 如果有之前的值则使用之前的值，拼接新的子分类名
+  //       const updatedCategory =
+  //         defaultCategoryName + "," + defaultSubCategory.name;
+
+  //       // 拼接设备类型到 URL
+  //       router.push({
+  //         query: {
+  //           category: defaultCategoryName + "," + defaultSubCategory.name,
+  //         },
+  //       });
+  //     }
+
+  //     if (defaultFuncCategory) {
+  //       categoryStore.updateFuncCategory(defaultFuncCategory.id);
+  //       // 拼接功能类型到 URL
+  //       router.push({
+  //         query: {
+  //           category: defaultCategoryName + "," + defaultSubCategory.name,
+  //           function: defaultFuncCategory.name,
+  //         },
+  //       });
+  //     }
+  //   }
+  // }
 });
 const seo = {
   "Energy materials":
@@ -167,7 +211,13 @@ const seo = {
 };
 onMounted(() => {
+  // console.log(route, "5656mountedroute");
+  // console.log(route.query, "5656mountedquery");
+  // console.log(route.fullPath, "5656mountedfullPath");
   if (Object.keys(route.query).length === 0) {
+    // if (route.fullPath === "/products") {
+    // console.log(route.query, "5656mountedquery222");
+
     // 检查是否有默认的分类
     const defaultCategory = categoryStore.list[0]; // 假设第一个分类是默认的
     if (defaultCategory) {
@@ -189,7 +239,7 @@ onMounted(() =&gt; {
         // 拼接设备类型到 URL
         router.push({
           query: {
-            category: defaultCategoryName + "," + defaultSubCategory.name,
+            categories: defaultCategoryName + "," + defaultSubCategory.name,
           },
         });
       }
@@ -199,7 +249,7 @@ onMounted(() =&gt; {
         // 拼接功能类型到 URL
         router.push({
           query: {
-            category: defaultCategoryName + "," + defaultSubCategory.name,
+            categories: defaultCategoryName + "," + defaultSubCategory.name,
             function: defaultFuncCategory.name,
           },
         });
@@ -217,14 +267,14 @@ const handleCategoryClick = (item: CategoryRootType) =&gt; {
   if (item.categoryDisplayName === "Energy materials") {
     router.push({
       query: {
-        category: item.categoryDisplayName + "," + defaultSubCategory.name,
+        categories: item.categoryDisplayName + "," + defaultSubCategory.name,
         function: item.productFunctions[0].name,
       },
     });
   } else {
     router.push({
       query: {
-        category: item.categoryDisplayName + "," + defaultSubCategory.name,
+        categories: item.categoryDisplayName + "," + defaultSubCategory.name,
       },
     });
   }
@@ -245,7 +295,7 @@ const handleSubCategoryClick = (value: CategoryRootType) =&gt; {
   // 获取当前的查询参数
   const currentQuery = router.currentRoute.value.query;
-  const currentCategory = currentQuery.category || "";
+  const currentCategory = currentQuery.categories || "";
   // 如果有之前的值则使用之前的值，拼接新的子分类名
   const updatedCategory = currentCategory.split(",")[0] + "," + value.name;
@@ -254,7 +304,7 @@ const handleSubCategoryClick = (value: CategoryRootType) =&gt; {
   // router.push({ query: { category: updatedCategory } });
   // 更新路由，保持 function 参数不变
   router.push({
-    query: { category: updatedCategory, function: currentQuery.function },
+    query: { categories: updatedCategory, function: currentQuery.function },
   });
 };
@@ -5,30 +5,61 @@
         <router-link to="/"><v-img src="/logo.jpg" alt="canrud" /></router-link>
       </v-col>
       <v-col cols="6" md="8" class="px-0">
-        <v-text-field name="keyword" label="Search keyword" hide-details="auto" variant="solo"
-          append-inner-icon="mdi-magnify" @click:appendInner="handleClick" @keydown="handleKeyDown" v-model="input">
+        <v-text-field
+          name="keyword"
+          label="Search keyword"
+          hide-details="auto"
+          variant="solo"
+          append-inner-icon="mdi-magnify"
+          @click:appendInner="handleClick"
+          @keydown="handleKeyDown"
+          v-model="input"
+        >
         </v-text-field>
       </v-col>
       <v-col cols="4" md="2" class="px-0">
-        <v-btn variant="text" href="/contact" color="blue-darken-2 mt-4">Concat Us
+        <v-btn variant="text" href="/contact" color="blue-darken-2 mt-4"
+          >Concat Us
         </v-btn>
       </v-col>
     </v-row>
   </v-container>
   <div class="tabs">
     <div class="tw-max-w-[1200px] tw-mx-auto">
-      <v-tabs mobile-breakpoint="580" v-model="tab" bg-color="blue-darken-1" slider-color="grey-lighten-3"
-        tab-slider-size="6px" selected-class="active" :grow="screenWidth > 600 ? false : true">
-        <v-tab :value="1" to="/"><span @click="handleTabClick" class="text-grey-lighten-3 tw-font-bold">Home</span>
+      <v-tabs
+        mobile-breakpoint="580"
+        v-model="tab"
+        bg-color="blue-darken-1"
+        slider-color="grey-lighten-3"
+        tab-slider-size="6px"
+        selected-class="active"
+        :grow="screenWidth > 600 ? false : true"
+      >
+        <v-tab :value="1" to="/"
+          ><span
+            @click="handleTabClick"
+            class="text-grey-lighten-3 tw-font-bold"
+            >Home</span
+          >
         </v-tab>
         <v-tab :value="2" to="/products">
-          <span @click="handleTabClick" class="text-grey-lighten-3 tw-font-bold">Products</span>
+          <span @click="handleTabClick" class="text-grey-lighten-3 tw-font-bold"
+            >Products</span
+          >
         </v-tab>
-        <v-tab :value="3" to="/about"><span @click="handleTabClick"
-            class="text-grey-lighten-3 tw-font-bold">About</span>
+        <v-tab :value="3" to="/about"
+          ><span
+            @click="handleTabClick"
+            class="text-grey-lighten-3 tw-font-bold"
+            >About</span
+          >
         </v-tab>
-        <v-tab :value="4" to="/contact"><span @click="handleTabClick"
-            class="text-grey-lighten-3 tw-font-bold">Contact</span>
+        <v-tab :value="4" to="/contact"
+          ><span
+            @click="handleTabClick"
+            class="text-grey-lighten-3 tw-font-bold"
+            >Contact</span
+          >
         </v-tab>
         <v-tab>
           <span class="text-grey-lighten-3 tw-font-bold">
@@ -42,71 +73,71 @@
 </template>
 <script setup lang="ts">
-import { ref, watchEffect } from 'vue'
-import ContactDialog from '@/components/ContactDialog.vue'
-import { useProductListStore } from '@/stores/product_list'
-import { useRouter } from 'vue-router'
-import { useDialogStore } from '@/stores/dialog'
-import { useCategoryStore } from '@/stores/category'
-import { useDisplay } from 'vuetify'
+import { ref, watchEffect } from "vue";
+import ContactDialog from "@/components/ContactDialog.vue";
+import { useProductListStore } from "@/stores/product_list";
+import { useRouter } from "vue-router";
+import { useDialogStore } from "@/stores/dialog";
+import { useCategoryStore } from "@/stores/category";
+import { useDisplay } from "vuetify";
-const { width: screenWidth } = useDisplay()
+const { width: screenWidth } = useDisplay();
-const productStore = useProductListStore()
-const categoryStore = useCategoryStore()
+const productStore = useProductListStore();
+const categoryStore = useCategoryStore();
-const input = ref()
+const input = ref();
-const router = useRouter()
+const router = useRouter();
-const dialog = useDialogStore()
+const dialog = useDialogStore();
 const handleKeyDown = (e: any) => {
   if (e.keyCode == 13) {
-    handleClick()
+    handleClick();
   }
-}
+};
 const handleClick = () => {
-  categoryStore.updateDisplay(!input.value)
-  productStore.updateKeyword(input.value)
-  productStore.updatePageNo(1)
-  router.push({ path: '/products', query: { keyword: input.value } })
-}
+  categoryStore.updateDisplay(!input.value);
+  productStore.updateKeyword(input.value);
+  productStore.updatePageNo(1);
+  router.push({ path: "/products", query: { keyword: input.value } });
+};
-const tab = ref(1)
+const tab = ref(1);
 const handleTabClick = () => {
-  categoryStore.updateDisplay(true)
-  productStore.updateKeyword('')
-}
+  categoryStore.updateDisplay(true);
+  productStore.updateKeyword("");
+};
 watchEffect(() => {
-  input.value = productStore.keyword
-})
+  input.value = productStore.keyword;
+});
 onMounted(() => {
   // 获取url的参数
-  const url = window.location.href
-  const index = url.indexOf('?')
+  const url = window.location.href;
+  const index = url.indexOf("?");
   if (index !== -1) {
-    const params = url.slice(index + 1).split('&')
-    const obj: any = {}
+    const params = url.slice(index + 1).split("&");
+    const obj: any = {};
     params.forEach((item) => {
-      const arr = item.split('=')
-      obj[arr[0]] = arr[1]
-    })
+      const arr = item.split("=");
+      obj[arr[0]] = arr[1];
+    });
     // 获取dialog的状态
     if (obj.flag) {
-      dialog.updateDialog(true)
+      dialog.updateDialog(true);
     }
     if (obj.keyword) {
-      productStore.updateKeyword(obj.keyword)
-      categoryStore.updateDisplay(false)
+      productStore.updateKeyword(obj.keyword);
+      categoryStore.updateDisplay(false);
     }
   }
-})
+});
 </script>
 <style lang="scss" scoped>
 #!/bin/bash
 # 变量定义
-LAST_TAG="1.0.12"
-TAG="1.0.13"
+LAST_TAG="1.0.13"
+TAG="1.0.14"
 TARGET_PATH="/root/web/canrud-outside-nuxt-front"
 DOCKERFILE_PATH="/root/web/canrud-outside-nuxt-front/canrud-nuxt-front"
 IMAGE_NAME="canrud-outside-front"