产品面包屑导航功能新增

hookehuyr
Commit 1234be5b6a54684b4df8cff24a8161dcab95e671 1234be5b 1 parent 5eb806c1
Showing 5 changed files with 60 additions and 20 deletions
src/components/common/hagerHeader.vue
src/views/index.vue
src/views/product/detail.vue
src/views/product/index.vue
src/views/search.vue
--- a/src/components/common/hagerHeader.vue
View file @1234be5
+++ b/src/components/common/hagerHeader.vue
View file @1234be5
 <!--
  * @Date: 2024-09-26 13:42:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-31 13:50:28
+ * @LastEditTime: 2024-11-01 17:26:50
  * @FilePath: /hager/src/components/common/hagerHeader.vue
  * @Description: 文件描述
 -->
@@ -72,7 +72,7 @@
               <div class="product-left-wrapper">
                 <div :class="['product-left-item', p_index === index ? 'active' : '']" v-for="(item, index) in product_menu" :key="index" @click="onClick(item, index)">
                   <div class="icon-text">
-                    <el-image style="width: auto; height: 1.65rem" :src="item.icon" fit="fit"></el-image>
+                    <el-image style="width: auto; height: 1.45rem" :src="item.icon" fit="fit"></el-image>
                     &nbsp;
                     {{ item.category_name }}
                   </div>
@@ -334,6 +334,7 @@ export default {
         path: '/product/detail',
         query: {
           id: item.id,
+          category_id: item.category_id,
           timestamp: Date.now()
         }
       });
@@ -441,6 +442,7 @@ export default {
             color: #F56400;
           }
           .icon-text {
+            font-size: 0.95rem;
             display: flex;
             align-items: center;
           }
@@ -486,6 +488,7 @@ export default {
             flex-basis: calc(33.33%);
             margin-bottom: 10px;
             .header-text {
+              font-size: 0.95rem;
               margin-bottom: 0.25rem;
               color: @text-color;
               &:hover {
@@ -494,6 +497,7 @@ export default {
               }
             }
             .item-text {
+              font-size: 0.95rem;
               line-height: 1.75;
               color: @secondary-text-color;
               &:hover {
--- a/src/views/index.vue
View file @1234be5
+++ b/src/views/index.vue
View file @1234be5
 <!--
  * @Date: 2024-08-27 10:06:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-30 11:28:24
+ * @LastEditTime: 2024-11-01 17:31:10
  * @FilePath: /hager/src/views/index.vue
  * @Description: 首页
 -->
@@ -329,7 +329,8 @@ export default {
       this.$router.push({
         path: '/product/index',
         query: {
-          id: v.first_child_id,
+          // id: v.first_child_id,
+          id: v.id,
           timestamp: Date.now()
         }
       });
--- a/src/views/product/detail.vue
View file @1234be5
+++ b/src/views/product/detail.vue
View file @1234be5
 <!--
  * @Date: 2024-09-29 14:26:41
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-11-01 08:36:00
+ * @LastEditTime: 2024-11-01 17:50:42
  * @FilePath: /hager/src/views/product/detail.vue
  * @Description: 文件描述
 -->
@@ -11,8 +11,9 @@
       <div style="margin-top: 1.5rem;">
         <el-breadcrumb separator="/">
           <el-breadcrumb-item v-if="!is_xs">所有产品</el-breadcrumb-item>
-          <el-breadcrumb-item>{{ info.parent_name }}</el-breadcrumb-item>
+          <el-breadcrumb-item :to="{ path: productPath }">{{ info.parent_name }}</el-breadcrumb-item>
-          <el-breadcrumb-item>{{ info.category_name }}</el-breadcrumb-item>
+          <!-- <el-breadcrumb-item>{{ info.parent_name }}</el-breadcrumb-item> -->
+          <el-breadcrumb-item :to="{ path: categoryPath }">{{ info.category_name }}</el-breadcrumb-item>
           <el-breadcrumb-item>{{ info.product_name }}</el-breadcrumb-item>
         </el-breadcrumb>
       </div>
@@ -44,7 +45,12 @@
       <div :class="['product-advantage', is_xs ? 'xs' : '']">
         <div :class="['item', is_xs ? 'xs' : '']" v-for="(item, index) in product_advantages" :key="index">
           <el-row :gutter="0" v-for="(x, idx) in item" :key="idx">
-            <el-col :span="24">{{ x }}</el-col>
+            <el-col :span="24" v-if="x">
+              <!-- <div class="item-content">
+                <span class="item-icon">·</span>{{ x }}
+              </div> -->
+              <div class="item-content" v-html="x"></div>
+            </el-col>
           </el-row>
         </div>
       </div>
@@ -167,6 +173,12 @@ export default {
       });
       return sum;
     },
+    productPath () {
+      return `/product/index?id=${this.info.parent_id}&timestamp=${Date.now()}`;
+    },
+    categoryPath () {
+      return `/product/index?id=${this.$route.query.category_id}&timestamp=${Date.now()}`;
+    },
   },
   async mounted () {
     this.getInfo();
@@ -199,7 +211,7 @@ export default {
       }, {
         id: 3,
         type: 'shuomingshu',
-        name: '产品说明书',
+        name: '产品手册',
         show: false,
         list: [],
         checked_sum: 0,
@@ -375,8 +387,7 @@ export default {
   }
   .product-detail-info {
     .product-title {
-      font-size: 2rem;
+      font-size: 1.5rem;
-      font-weight: bold;
       color: @secondary-color;
     }
     .product-sub {
@@ -404,11 +415,20 @@ export default {
       padding-top: 1rem;
       background-color: #f0f0f0;
       border-top: 4px solid @primary-color;
-      line-height: 2;
+      line-height: 1.25;
       &.xs {
         padding-bottom: 1rem;
         width: 100%;
       }
+      .item-content {
+        display: flex;
+        align-items: center;
+        line-height: 2;
+        .item-icon {
+          color: @primary-color;
+          font-size: 2rem;
+        }
+      }
     }
     &.xs {
       display: block;
@@ -572,5 +592,10 @@ export default {
       }
     }
   }
+
+  :deep(.el-breadcrumb__inner a:hover, .el-breadcrumb__inner.is-link:hover) {
+      color: @primary-color;
+      cursor: pointer;
+  }
 }
 </style>
--- a/src/views/product/index.vue
View file @1234be5
+++ b/src/views/product/index.vue
View file @1234be5
 <!--
  * @Date: 2024-09-27 16:53:09
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-29 14:58:08
+ * @LastEditTime: 2024-11-01 17:43:50
  * @FilePath: /hager/src/views/product/index.vue
  * @Description: 文件描述
 -->
@@ -11,7 +11,7 @@
       <div v-if="!is_search" style="margin-top: 1.5rem;">
         <el-breadcrumb separator="/">
           <el-breadcrumb-item>所有产品</el-breadcrumb-item>
-          <el-breadcrumb-item>{{ parent_name }}</el-breadcrumb-item>
+          <el-breadcrumb-item v-if="parent_name" :to="{ path: productPath }">{{ parent_name }}</el-breadcrumb-item>
           <el-breadcrumb-item>{{ category_name }}</el-breadcrumb-item>
         </el-breadcrumb>
       </div>
@@ -68,6 +68,7 @@ export default {
       search_keyword: '',
       keyword: '',
       activeNames: [],
+      cate_id: '',
       parent_name: '',
       category_name: '',
       category_name_en: '',
@@ -80,6 +81,11 @@ export default {
   async mounted () {
     this.getMain();
   },
+  computed: {
+    productPath () {
+      return `/product/index?id=${this.cate_id}&timestamp=${Date.now()}`;
+    },
+  },
   watch: {
     // 监听路由参数变化时，更新输入框的值
     '$route.query.id' (val, old) {
@@ -100,7 +106,8 @@ export default {
       this.$router.push({
         path: '/product/detail',
         query: {
-          id: v.id
+          id: v.id,
+          category_id: this.$route.query.id
         }
       });
     },
@@ -114,14 +121,15 @@ export default {
         this.product_list = info.list;
         this.search_keyword = '';
         // 获取当前类别的内容
-        this.getCurrentCate(info.category_parent);
+        this.cate_id = info.category_parent ? info.category_parent : info.id; // 同一个值，在不同层级下名字不一样
+        this.getCurrentCate(this.cate_id);
       }
     },
-    async getCurrentCate (category_parent) {
+    async getCurrentCate (cate_id) {
       const { code, data } = await getProductCateAPI();
       if (code) {
         data.forEach((item) => {
-          if (item.id === category_parent) {
+          if (item.id === cate_id) {
             this.cate_list = item.children;
           }
         })
--- a/src/views/search.vue
View file @1234be5
+++ b/src/views/search.vue
View file @1234be5
 <!--
  * @Date: 2024-10-20 16:57:48
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-28 16:10:58
+ * @LastEditTime: 2024-11-01 13:51:06
  * @FilePath: /hager/src/views/search.vue
  * @Description: 文件描述
 -->
@@ -248,7 +248,9 @@ export default {
       this.$router.push({
         path: '/product/detail',
         query: {
-          id: v.id
+          id: v.id,
+          category_id: v.category_id,
+          timestamp: Date.now()
         }
       });
     },