Merge branch 'feature/地址参数显示修改' into develop

hookehuyr
Commit 406f92607ce2f436274112c17568a0e0b3b46617 406f9260 2 parents 7e38b92b c4bfadef
Showing 15 changed files with 102 additions and 157 deletions
src/components/accordion/AccordionItem.vue
src/components/common/hagerFooter.vue
src/components/common/hagerHeader.vue
src/components/hagerMenu.vue
src/route.js
src/router.js
src/views/index.vue
src/views/news/detail.vue
src/views/news/index.vue
src/views/product/detail.vue
src/views/product/index.vue
src/views/search.vue
src/views/solution/case.vue
src/views/solution/detail.vue
src/views/solution/index.vue
--- a/src/components/accordion/AccordionItem.vue
View file @406f926
+++ b/src/components/accordion/AccordionItem.vue
View file @406f926
@@ -41,11 +41,7 @@ export default {
     toggle(v) {
       if (v?.list) {
         this.$router.push({
-          path: '/product/index',
+          path: `/product/index/${v.id}/${Date.now()}`,
-          query: {
-            id: v.id,
-            timestamp: Date.now()
-          }
         });
       } else {
         if (this.hasChildren) {
@@ -55,11 +51,7 @@ export default {
     },
     goToDetail (v) { // 跳转产品详情
       this.$router.push({
-        path: '/product/detail',
+        path: `/product/detail${v.id}/${Date.now()}`,
-        query: {
-          id: v.id,
-          timestamp: Date.now()
-        }
       });
     }
   }
--- a/src/components/common/hagerFooter.vue
View file @406f926
+++ b/src/components/common/hagerFooter.vue
View file @406f926
 <!--
  * @Date: 2024-09-26 13:42:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-12-04 11:40:52
+ * @LastEditTime: 2024-12-12 14:13:11
  * @FilePath: /hager/src/components/common/hagerFooter.vue
  * @Description: 文件描述
 -->
@@ -193,20 +193,12 @@ export default {
     },
     goToProduct (item) {
       this.$router.push({
-        path: '/product/index',
+        path: `/product/index/${item.id}/${Date.now()}`,
-        query: {
-          id: item.id,
-          timestamp: Date.now()
-        }
       });
     },
     goToSolution (item) {
       this.$router.push({
-        path: '/solution/detail',
+        path: `/solution/detail/${item.id}/${Date.now()}`,
-        query: {
-          id: item.id,
-          timestamp: Date.now()
-        }
       });
     },
     goToCorp (item) {
--- a/src/components/common/hagerHeader.vue
View file @406f926
+++ b/src/components/common/hagerHeader.vue
View file @406f926
 <!--
  * @Date: 2024-09-26 13:42:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-12-12 15:02:26
+ * @LastEditTime: 2024-12-12 17:05:36
  * @FilePath: /hager/src/components/common/hagerHeader.vue
  * @Description: 文件描述
 -->
@@ -64,12 +64,12 @@
               <div :class="[is_active === 'about' ? 'active' : '', 'item']" @click="goTo('/about')">关于海格</div>
               <div :class="[is_active === 'contact' ? 'active' : '', 'item']" @click="goTo('/contact')">联系我们</div>
               <div :class="[is_active === 'index' ? 'active' : '', 'item']" @click="goTo('/')">首页</div> -->
-              <a :class="[is_active === 'solution' ? 'active' : '', 'item']" :href="`${baseUrl}#/solution/index`" @click="goTo('/solution/index')">解决方案</a>
+              <a :class="[is_active === 'solution' ? 'active' : '', 'item']" :href="`${baseUrl}/solution/index`" @click.prevent="goTo('/solution/index')">解决方案</a>
-              <a :class="[is_active === 'news' ? 'active' : '', 'item']" :href="`${baseUrl}#/news`" @click="goTo('/news')">新闻中心</a>
+              <a :class="[is_active === 'news' ? 'active' : '', 'item']" :href="`${baseUrl}/news`" @click.prevent="goTo('/news')">新闻中心</a>
-              <a :class="[is_active === 'recruit' ? 'active' : '', 'item']" :href="`${baseUrl}#/recruit`" @click="goTo('/recruit')">招聘信息</a>
+              <a :class="[is_active === 'recruit' ? 'active' : '', 'item']" :href="`${baseUrl}/recruit`" @click.prevent="goTo('/recruit')">招聘信息</a>
-              <a :class="[is_active === 'about' ? 'active' : '', 'item']" :href="`${baseUrl}#/about`" @click="goTo('/about')">关于海格</a>
+              <a :class="[is_active === 'about' ? 'active' : '', 'item']" :href="`${baseUrl}/about`" @click.prevent="goTo('/about')">关于海格</a>
-              <a :class="[is_active === 'contact' ? 'active' : '', 'item']" :href="`${baseUrl}#/contact`" @click="goTo('/contact')">联系我们</a>
+              <a :class="[is_active === 'contact' ? 'active' : '', 'item']" :href="`${baseUrl}/contact`" @click.prevent="goTo('/contact')">联系我们</a>
-              <a :class="[is_active === 'index' ? 'active' : '', 'item']" :href="`${baseUrl}#/`" @click="goTo('/')">首页</a>
+              <a :class="[is_active === 'index' ? 'active' : '', 'item']" :href="`${baseUrl}/`" @click.prevent="goTo('/')">首页</a>
             </div>
           </el-col>
         </el-row>
@@ -185,7 +185,7 @@ export default {
   },
   watch: {
     // 监听路由参数变化时，更新输入框的值
-    '$route.query.keyword': function(newKeyword) {
+    '$route.params.keyword': function(newKeyword) {
       this.keyword = newKeyword || '';
     },
     '$route' (to, from) {
@@ -210,7 +210,7 @@ export default {
   },
   computed: {
     baseUrl () {
-      return location.origin + location.pathname;
+      return location.origin;
     }
   },
   async mounted () {
@@ -377,23 +377,14 @@ export default {
     },
     goToC (item) { // 跳转产品二级
       this.$router.push({
-        path: '/product/index',
+        path: `/product/index/${item.id}/${Date.now()}`,
-        query: {
-          id: item.id,
-          timestamp: Date.now()
-        }
       });
       this.closeMenu();
     },
     goToP (item) { // 跳转产品详情
       this.$router.push({
-        path: '/product/detail',
+        path: `/product/detail/${item.id}/${item.category_id}/${Date.now()}`,
-        query: {
-          id: item.id,
-          category_id: item.category_id,
-          timestamp: Date.now()
-        }
       });
       this.closeMenu();
     },
@@ -432,18 +423,14 @@ export default {
       }
     },
     updateURL() {
-      const currentKeyword = this.$route.query.keyword;
+      const currentKeyword = this.$route.params.keyword;
       // 如果输入的 keyword 和当前路由的 keyword 相同，不做更新
       if (this.keyword === currentKeyword) return;
       // 使用 Vue Router 动态更新 URL 中的 keyword 参数
       this.$router.replace({
-        path: '/search', // 确保路径不变
+        path: `/search/${this.keyword}`
-        query: {
-          ...this.$route.query, // 保留其他可能存在的 query 参数
-          keyword: this.keyword // 更新 keyword 参数
-        }
       });
     }
   }
--- a/src/components/hagerMenu.vue
View file @406f926
+++ b/src/components/hagerMenu.vue
View file @406f926
 <!--
  * @Date: 2024-10-10 10:37:16
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-12-10 16:12:02
+ * @LastEditTime: 2024-12-12 13:50:39
  * @FilePath: /hager/src/components/hagerMenu.vue
  * @Description: 文件描述
 -->
@@ -143,19 +143,13 @@ export default {
     goToSub(id) {
       this.$emit("close");
       this.$router.push({
-        path: "/product/index",
+        path: `/product/index/${id}`,
-        query: {
-          id: id,
-        },
       });
     },
     goToThird(id) {
       this.$emit("close");
       this.$router.push({
-        path: "/product/detail",
+        path: `/product/detail/${id}`,
-        query: {
-          id: id,
-        },
       });
     },
     //
--- a/src/route.js
View file @406f926
+++ b/src/route.js
View file @406f926
 /*
  * @Date: 2024-08-26 10:42:15
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-12-10 16:01:00
+ * @LastEditTime: 2024-12-12 14:54:14
  * @FilePath: /hager/src/route.js
  * @Description: 文件描述
  */
@@ -15,7 +15,7 @@ export default [{
   },
   children: []
 }, {
-  path: '/product/index',
+  path: '/product/index/:id?/:timestamp?',
   name: '二级目录',
   component: () => import('@/views/product/index'),
   meta: {
@@ -24,8 +24,26 @@ export default [{
   },
   children: []
 }, {
-  path: '/product/detail',
+  path: '/product/detail/:id',
-  name: '详情页',
+  name: '详情页1',
+  component: () => import('@/views/product/detail'),
+  meta: {
+    title: '海格电气',
+    tag: 'product'
+  },
+  children: []
+}, {
+  path: '/product/detail/:id/:timestamp',
+  name: '详情页2',
+  component: () => import('@/views/product/detail'),
+  meta: {
+    title: '海格电气',
+    tag: 'product'
+  },
+  children: []
+}, {
+  path: '/product/detail/:id/:category_id/:timestamp',
+  name: '详情页3',
   component: () => import('@/views/product/detail'),
   meta: {
     title: '海格电气',
@@ -42,8 +60,17 @@ export default [{
   },
   children: []
 }, {
-  path: '/solution/detail',
+  path: '/solution/detail/:id/:timestamp',
-  name: '解决方案详情',
+  name: '解决方案详情1',
+  component: () => import('@/views/solution/detail'),
+  meta: {
+    title: '解决方案 | Hager China',
+    tag: 'solution'
+  },
+  children: []
+}, {
+  path: '/solution/detail/:id/:current_index/:timestamp',
+  name: '解决方案详情2',
   component: () => import('@/views/solution/detail'),
   meta: {
     title: '解决方案 | Hager China',
@@ -51,7 +78,7 @@ export default [{
   },
   children: []
 }, {
-  path: '/solution/case',
+  path: '/solution/case/:id/:current_index?',
   name: '成功案例',
   component: () => import('@/views/solution/case'),
   meta: {
@@ -141,7 +168,7 @@ export default [{
   },
   children: []
 }, {
-  path: '/news/detail',
+  path: '/news/detail/:id',
   name: '新闻详情',
   component: () => import('@/views/news/detail'),
   meta: {
@@ -205,7 +232,7 @@ export default [{
     },
   ]
 }, {
-  path: '/search',
+  path: '/search/:keyword?',
   name: '搜索结果',
   component: () => import('@/views/search'),
   meta: {
--- a/src/router.js
View file @406f926
+++ b/src/router.js
View file @406f926
@@ -12,8 +12,9 @@ import ConfigRouter from './route.js'
 Vue.use(VueRouter)
 const router = new VueRouter({
-  history: false,
+  // history: false,
-  hashbang: true,
+  // hashbang: true,
+  mode: 'history',
   base: '/',
   routes: ConfigRouter,
   scrollBehavior(to, from, savedPosition) {
--- a/src/views/index.vue
View file @406f926
+++ b/src/views/index.vue
View file @406f926
 <!--
  * @Date: 2024-08-27 10:06:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-12-11 15:16:27
+ * @LastEditTime: 2024-12-12 14:14:08
  * @FilePath: /hager/src/views/index.vue
  * @Description: 首页
 -->
@@ -308,10 +308,7 @@ export default {
     },
     goToNew (v) {
       this.$router.push({
-        path: '/news/detail',
+        path: `/news/detail/${v.id}`,
-        query: {
-          id: v.id
-        }
       });
     },
     goToNews () {
@@ -326,21 +323,12 @@ export default {
     },
     goToSolution (v) {
       this.$router.push({
-        path: '/solution/detail',
+        path: `/solution/detail/${v.id}/${Date.now()}`,
-        query: {
-          id: v.id,
-          timestamp: Date.now()
-        }
       });
     },
     goToProduct (v) {
       this.$router.push({
-        path: '/product/index',
+        path: `/product/index/${v.id}/${Date.now()}`,
-        query: {
-          // id: v.first_child_id,
-          id: v.id,
-          timestamp: Date.now()
-        }
       });
     },
     handleScreenWidth(width) {
--- a/src/views/news/detail.vue
View file @406f926
+++ b/src/views/news/detail.vue
View file @406f926
 <!--
  * @Date: 2024-10-18 12:06:09
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-12-04 18:16:02
+ * @LastEditTime: 2024-12-12 12:49:20
  * @FilePath: /hager/src/views/news/detail.vue
  * @Description: 文件描述
 -->
@@ -52,7 +52,7 @@ export default {
     }
   },
   async mounted () {
-    const { code, data } = await getNewsDetailAPI({ id: this.$route.query.id });
+    const { code, data } = await getNewsDetailAPI({ id: this.$route.params.id });
     if (code) {
       this.title = data.post_title;
       this.content = data.product_advantages;
--- a/src/views/news/index.vue
View file @406f926
+++ b/src/views/news/index.vue
View file @406f926
 <!--
  * @Date: 2024-10-18 12:05:44
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-12-03 16:26:23
+ * @LastEditTime: 2024-12-12 12:48:45
  * @FilePath: /hager/src/views/news/index.vue
  * @Description: 文件描述
 -->
@@ -87,10 +87,7 @@ export default {
   methods: {
     goToNew (v) {
       this.$router.push({
-        path: '/news/detail',
+        path: `/news/detail/${v.id}`,
-        query: {
-          id: v.id
-        }
       });
     },
     async getMore () {
--- a/src/views/product/detail.vue
View file @406f926
+++ b/src/views/product/detail.vue
View file @406f926
 <!--
  * @Date: 2024-09-29 14:26:41
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-11-06 15:34:53
+ * @LastEditTime: 2024-12-12 13:54:06
  * @FilePath: /hager/src/views/product/detail.vue
  * @Description: 文件描述
 -->
@@ -186,10 +186,10 @@ export default {
       return sum;
     },
     productPath () {
-      return `/product/index?id=${this.info.parent_id}&timestamp=${Date.now()}`;
+      return `/product/index/${this.info.parent_id}/${Date.now()}`;
     },
     categoryPath () {
-      return `/product/index?id=${this.info.category_id}&timestamp=${Date.now()}`;
+      return `/product/index/${this.info.category_id}/${Date.now()}`;
     },
   },
   async mounted () {
@@ -204,7 +204,7 @@ export default {
   },
   watch: {
     // 监听路由参数变化时，更新输入框的值
-    async '$route.query.id' (val, old) {
+    async '$route.params.id' (val, old) {
       if (old !== val) {
         this.getInfo();
       }
@@ -253,7 +253,7 @@ export default {
         checked_sum: 0,
       }];
       this.info_images = [];
-      const { code, data } = await getProductInfoAPI( { id: this.$route.query.id });
+      const { code, data } = await getProductInfoAPI( { id: this.$route.params.id });
       if (code) {
         this.info = data;
         this.keyword = data.post_keyword;
--- a/src/views/product/index.vue
View file @406f926
+++ b/src/views/product/index.vue
View file @406f926
 <!--
  * @Date: 2024-09-27 16:53:09
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-11-19 16:06:14
+ * @LastEditTime: 2024-12-12 13:55:31
  * @FilePath: /hager/src/views/product/index.vue
  * @Description: 文件描述
 -->
@@ -122,18 +122,18 @@ export default {
   },
   computed: {
     allPath () {
-      return `/product/index?timestamp=${Date.now()}`;
+      return `/product/index/all/${Date.now()}`;
     },
     productPath () {
-      return `/product/index?id=${this.cate_id}&timestamp=${Date.now()}`;
+      return `/product/index/${this.cate_id}/${Date.now()}`;
     },
     is_all_cate () {
-      return this.$route.query.id === undefined;
+      return this.$route.params.id === 'all';
     }
   },
   watch: {
     // 监听路由参数变化时，更新输入框的值
-    '$route.query.id' (val, old) {
+    '$route.params.id' (val, old) {
       if (val) {
         if (old !== val) {
           this.is_search = false;
@@ -144,7 +144,7 @@ export default {
         this.getAllMain();
       }
     },
-    '$route.query.timestamp' (val, old) {
+    '$route.params.timestamp' (val, old) {
       this.is_search = false;
       if (!this.is_all_cate) {
         this.getMain();
@@ -168,11 +168,7 @@ export default {
     },
     goToDetail (v) { // 跳转产品详情
       this.$router.push({
-        path: '/product/detail',
+        path: `/product/detail/${v.id}/${this.$route.params.id}/${Date.now()}`
-        query: {
-          id: v.id,
-          category_id: this.$route.query.id
-        }
       });
     },
     async getAllMain () { // 查询所有产品列表数据
@@ -194,7 +190,7 @@ export default {
       }
     },
     async getMain () {
-      const { code, data } = await getProductCateAPI({cid: this.$route.query.id });
+      const { code, data } = await getProductCateAPI({cid: this.$route.params.id });
       if (code) {
         let info = data[0];
         this.parent_name = info.parent_name;
--- a/src/views/search.vue
View file @406f926
+++ b/src/views/search.vue
View file @406f926
 <!--
  * @Date: 2024-10-20 16:57:48
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-12-04 16:00:08
+ * @LastEditTime: 2024-12-12 14:54:04
  * @FilePath: /hager/src/views/search.vue
  * @Description: 文件描述
 -->
@@ -92,7 +92,7 @@ export default {
   data () {
     return {
       activeName: 'product',
-      keyword: this.$route.query.keyword,
+      keyword: this.$route.params.keyword,
       news_list: [],
       case_list: [],
       count_news: 0,
@@ -110,7 +110,7 @@ export default {
     }
   },
   watch: {
-    '$route.query.keyword': function(newKeyword, oldKeyword) {
+    '$route.params.keyword': function(newKeyword, oldKeyword) {
       this.keyword = newKeyword || '';
       if (newKeyword !== oldKeyword) { // 关键词变化时，重新搜索
         this.activeName = 'product';
@@ -238,44 +238,27 @@ export default {
     },
     goToNews (id) {
       this.$router.push({
-        path: '/news/detail',
+        path: `/news/detail/${id}`,
-        query: {
-          id: id
-        }
       });
     },
     goToDetail (v) { // 跳转产品详情
       this.$router.push({
-        path: '/product/detail',
+        path: `/product/detail/${v.id}/${v.category_id}/${Date.now()}`,
-        query: {
-          id: v.id,
-          category_id: v.category_id,
-          timestamp: Date.now()
-        }
       });
     },
     goToCase (id) {
       this.$router.push({
-        path: '/solution/detail',
+        path: `/solution/detail/${id}/${Date.now()}`,
-        query: {
-          id: id
-        }
       });
     },
     goToSolution (v) { // 跳转产品详情
       this.$router.push({
-        path: '/product/detail',
+        path: `/product/detail/${v.id}`,
-        query: {
-          id: v.id
-        }
       });
     },
     goToSuccess (v) { // 跳转成功案例
       this.$router.push({
-        path: '/solution/case',
+        path: `/solution/case/${v}}`,
-        query: {
-          id: v
-        }
       });
     }
   }
--- a/src/views/solution/case.vue
View file @406f926
+++ b/src/views/solution/case.vue
View file @406f926
 <!--
  * @Date: 2024-10-18 12:06:09
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-12-09 13:41:51
+ * @LastEditTime: 2024-12-12 16:05:29
  * @FilePath: /hager/src/views/solution/case.vue
  * @Description: 文件描述
 -->
@@ -157,7 +157,7 @@ export default {
   },
   computed: {
     casePath () {
-      return `/solution/detail?id=${this.success_info.category_id}&current_index=${this.$route.query.current_index}`;
+      return `/solution/detail/${this.success_info.category_id}/${this.$route.params.current_index}/${Date.now()}`;
     }
   },
   watch: {
@@ -166,7 +166,7 @@ export default {
     }
   },
   async mounted () {
-    const { code, data } = await getSolutionDetailAPI({ id: this.$route.query.id });
+    const { code, data } = await getSolutionDetailAPI({ id: this.$route.params.id });
     if (code) {
       this.success_info = data;
       this.top_banner = this.success_info.file?.top_img ? this.success_info.file?.top_img[0]['value'] : '';
@@ -284,6 +284,7 @@ export default {
       //   // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
       //   cursor: pointer;
       // }
+      overflow: hidden;
       img {
         width: 100%;
         // margin-left: calc((100%) / 2);
--- a/src/views/solution/detail.vue
View file @406f926
+++ b/src/views/solution/detail.vue
View file @406f926
 <!--
  * @Date: 2024-09-29 15:49:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-12-11 17:21:35
+ * @LastEditTime: 2024-12-12 16:07:57
  * @FilePath: /hager/src/views/solution/detail.vue
  * @Description: 文件描述
 -->
@@ -216,7 +216,7 @@ export default {
     this.initialize();
   },
   watch: {
-    '$route.query.id' (old, val) {
+    '$route.params.id' (old, val) {
       if (old !== val) {
         this.initialize();
       }
@@ -224,12 +224,12 @@ export default {
   },
   methods: {
     async initialize () {
-      const { code, data } = await getSolutionCaseAPI({ cid: this.$route.query.id });
+      const { code, data } = await getSolutionCaseAPI({ cid: this.$route.params.id });
       if (code) {
         this.case_info = data;
         this.case_banner = data.file?.banner ? data.file?.banner[0] : 'https://cdn.ipadbiz.cn/hager/banner/banner08.png';
         this.case_list = data.list;
-        this.current_index = this.$route.query.current_index ? +this.$route.query.current_index : 0;
+        this.current_index = this.$route.params.current_index ? +this.$route.params.current_index : 0;
         this.current_id = this.case_list[this.current_index]['id'];
         this.success_data_list = this.case_list[this.current_index].list ?? [];
         this.category_description = this.case_list[this.current_index].category_description ?? '';
@@ -250,19 +250,12 @@ export default {
     },
     goToProduct (v) {
       this.$router.push({
-        path: '/product/detail',
+        path: `/product/detail/${v.id}`,
-        query: {
-          id: v.id
-        }
       });
     },
     goToCase (v) {
       this.$router.push({
-        path: '/solution/case',
+        path: `/solution/case/${v.id}/${this.current_index}`,
-        query: {
-          id: v.id,
-          current_index: this.current_index
-        }
       });
     },
     prevProductBtn () {
@@ -316,11 +309,7 @@ export default {
       })
       // 记录点击的分类ID，用于返回定位到该分类
       this.$router.push({
-        path: '/solution/detail',
+        path: `/solution/detail/${this.$route.params.id}/${this.current_index}/${Date.now()}`,
-        query: {
-          ...this.$route.query,  // 先展开原来的参数
-          current_index: this.current_index
-        }
       });
     }
   }
@@ -492,6 +481,7 @@ export default {
       border-radius: 5px;
       transition: transform 0.3s ease-in-out;
       border: 1px solid rgba(0, 0, 0, 0.1);
+      overflow: hidden;
       &:hover {
         // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
         cursor: pointer;
--- a/src/views/solution/index.vue
View file @406f926
+++ b/src/views/solution/index.vue
View file @406f926
@@ -161,10 +161,7 @@ export default {
     },
     goToSolution (v) {
       this.$router.push({
-        path: '/solution/detail',
+        path: `/solution/detail/${v.id}/${Date.now()}`,
-        query: {
-          id: v.id
-        }
       });
     },
     prevSolutionBtn () {