产品详情页接口相关页面联调

hookehuyr
Commit db3376ddbc24c71a90da0bb25c972ea57deefe7f db3376dd 1 parent 68da18b9
Showing 7 changed files with 23 additions and 26 deletions
src/api/hager.js
src/components/common/hagerHeader.vue
src/components/hagerCarousel.vue
src/components/hagerMenu.vue
src/route.js
src/views/index.vue
src/views/product/detail.vue
--- a/src/api/hager.js
View file @db3376d
+++ b/src/api/hager.js
View file @db3376d
 /*
  * @Date: 2024-09-26 13:36:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-23 13:47:59
+ * @LastEditTime: 2024-10-23 16:23:08
  * @FilePath: /hager/src/api/hager.js
  * @Description: 文件描述
  */
@@ -13,6 +13,7 @@ const Api = {
   NEWS_DETAIL: '/srv/?a=detail&type=news',
   HOME: '/srv/?a=home',
   PRODUCT_CATE: '/srv/?a=cate&type=product',
+  PRODUCT_INFO: '/srv/?a=detail&type=product',
 };
 export const honorAPI = (params) => fn(fetch.get(Api.HONOR, params));
@@ -20,3 +21,4 @@ export const newsAPI = (params) => fn(fetch.get(Api.NEWS, params));
 export const getNewsDetailAPI = (params) => fn(fetch.get(Api.NEWS_DETAIL, params));
 export const getHomeAPI = (params) => fn(fetch.get(Api.HOME, params));
 export const getProductCateAPI = (params) => fn(fetch.get(Api.PRODUCT_CATE, params));
+export const getProductInfoAPI = (params) => fn(fetch.get(Api.PRODUCT_INFO, params));
--- a/src/components/common/hagerHeader.vue
View file @db3376d
+++ b/src/components/common/hagerHeader.vue
View file @db3376d
 <!--
  * @Date: 2024-09-26 13:42:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-23 17:05:50
+ * @LastEditTime: 2024-10-23 17:08:32
  * @FilePath: /hager/src/components/common/hagerHeader.vue
  * @Description: 文件描述
 -->
@@ -222,7 +222,6 @@ export default {
           for (let i = 0; i < product.list?.length; i += maxLength) {
             listChunks.push(product.list.slice(i, i + maxLength));
           }
-          console.warn(listChunks);
           // 第一个块保留原有的 name，后续块 name 设为空
           listChunks.forEach((chunk, index) => {
@@ -242,7 +241,6 @@ export default {
           });
         }
       });
-      console.warn('res', result);
       return result;
     },
--- a/src/components/hagerCarousel.vue
View file @db3376d
+++ b/src/components/hagerCarousel.vue
View file @db3376d
 <!--
  * @Date: 2024-09-27 19:49:03
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-30 10:04:50
+ * @LastEditTime: 2024-10-23 17:25:41
  * @FilePath: /hager/src/components/hagerCarousel.vue
  * @Description: 文件描述
 -->
@@ -30,8 +30,8 @@
       </div>
       <!-- 右边大图区域 -->
-      <div class="main-image" :class="{ 'fade-out': isTransitioning, 'fade-in': !isTransitioning }">
+      <div class="main-image" :class="{ 'fade-out': isTransitioning, 'fade-in': !isTransitioning }" :style="{ backgroundImage: `url(${images[selectedImage]})`}">
-        <img :src="images[selectedImage]" alt="main image">
+        <!-- <img :src="images[selectedImage]" alt="main image"> -->
       </div>
     </div>
   </div>
@@ -163,18 +163,22 @@ export default {
   }
   .main-image {
-    width: 300px;
+    width: 18rem;
-    height: 300px;
+    height: 18rem;
     position: relative;
     transition: opacity 0.5s ease-in-out; /* 大图切换时的淡入淡出效果 */
     opacity: 1;
+    background-position: center;
+    background-size: 80%;
+    background-repeat: no-repeat;
   }
   .main-image img {
-    width: 100%;
+    width: 80%;
-    height: 100%;
+    height: 80%;
     object-fit: cover;
     position: absolute;
+    top: 20%;
   }
   .main-image.fade-out {
--- a/src/components/hagerMenu.vue
View file @db3376d
+++ b/src/components/hagerMenu.vue
View file @db3376d
 <!--
  * @Date: 2024-10-10 10:37:16
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-23 14:28:22
+ * @LastEditTime: 2024-10-23 16:39:02
  * @FilePath: /hager/src/components/hagerMenu.vue
  * @Description: 文件描述
 -->
@@ -27,7 +27,7 @@
           :class="['menu-label', activeMenu === item.id ? 'active' : '']"
         >
           <div>
-            <el-image style="width: auto; height: 1rem" :src="item.cover" fit="fit"></el-image>
+            <el-image style="width: auto; height: 1rem" :src="item.icon" fit="fit"></el-image>
             {{ item.category_name }}
           </div>
           <div>
--- a/src/route.js
View file @db3376d
+++ b/src/route.js
View file @db3376d
 /*
  * @Date: 2024-08-26 10:42:15
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-21 09:59:04
+ * @LastEditTime: 2024-10-23 16:46:46
  * @FilePath: /hager/src/route.js
  * @Description: 文件描述
  */
@@ -15,15 +15,6 @@ export default [{
   },
   children: []
 }, {
-  path: '/product/category',
-  name: '产品类别',
-  component: () => import('@/views/product/category'),
-  meta: {
-    title: '海格电器',
-    tag: 'product'
-  },
-  children: []
-}, {
   path: '/product/index',
   name: '二级目录',
   component: () => import('@/views/product/index'),
--- a/src/views/index.vue
View file @db3376d
+++ b/src/views/index.vue
View file @db3376d
 <!--
  * @Date: 2024-08-27 10:06:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-23 15:58:51
+ * @LastEditTime: 2024-10-23 16:32:21
  * @FilePath: /hager/src/views/index.vue
  * @Description: 首页
 -->
@@ -110,7 +110,7 @@
         <!-- <div v-if="product_list.length <= productSlidesPerView" class="more-box" style="margin-top: 2rem;">
           <hager-more></hager-more>
         </div> -->
-        <div v-if="product_list.length > productSlidesPerView || is_xs" class="hager-product-center-more xs">
+        <div v-if="product_list.length > productSlidesPerView || is_xs || !isEnd" class="hager-product-center-more xs">
           <!-- <hager-more></hager-more> -->
           <div class="xs-control">
             <div>
@@ -306,6 +306,7 @@ export default {
       reach_solution_end: false,
       reach_product_end: false,
       productSlidesPerView: 5,
+      isEnd: true,
     }
   },
   async mounted () {
@@ -314,10 +315,11 @@ export default {
       console.warn(data);
       this.product_list = data.product;
     }
+    this.isEnd = this.$refs.myProductSwiper.$swiper.isEnd; // 是否全部显示出来
     this.$nextTick(() => {
       this.$refs.myProductSwiper.$swiper?.on('breakpoint', (swiper) => {
         // breakpoint时 显示的条数
-        this.productSlidesPerView = swiper.slidesPerView
+        this.productSlidesPerView = swiper.slidesPerView;
       });
     });
   },
--- a/src/views/product/detail.vue
View file @db3376d
+++ b/src/views/product/detail.vue
View file @db3376d