解决方案接口联调，和其他页面调整

hookehuyr
Commit 870a1247de19602d08dac104ccafc721c494e134 870a1247 1 parent 08eff21b
Showing 5 changed files with 53 additions and 133 deletions
components.d.ts
src/api/hager.js
src/views/index.vue
src/views/solution/detail.vue
src/views/solution/index.vue
--- a/components.d.ts
View file @870a124
+++ b/components.d.ts
View file @870a124
@@ -22,7 +22,6 @@ declare module 'vue' {
     ElRow: typeof import('element-ui/lib/row')['default']
     ElTabPane: typeof import('element-ui/lib/tab-pane')['default']
     ElTabs: typeof import('element-ui/lib/tabs')['default']
-    ElTooltip: typeof import('element-ui/lib/tooltip')['default']
     HagerBox: typeof import('./src/components/common/hagerBox.vue')['default']
     HagerCarousel: typeof import('./src/components/hagerCarousel.vue')['default']
     HagerFooter: typeof import('./src/components/common/hagerFooter.vue')['default']
--- a/src/api/hager.js
View file @870a124
+++ b/src/api/hager.js
View file @870a124
 /*
  * @Date: 2024-09-26 13:36:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-24 09:34:46
+ * @LastEditTime: 2024-10-24 10:26:13
  * @FilePath: /hager/src/api/hager.js
  * @Description: 文件描述
  */
@@ -15,6 +15,7 @@ const Api = {
   PRODUCT_CATE: '/srv/?a=cate&type=product',
   PRODUCT_INFO: '/srv/?a=detail&type=product',
   PRODUCT_SEARCH: '/srv/?a=cate&type=product_search',
+  SOLUTION: '/srv/?a=cate&type=solution',
 };
 export const honorAPI = (params) => fn(fetch.get(Api.HONOR, params));
@@ -30,3 +31,5 @@ export const getProductCateAPI = (params) => fn(fetch.get(Api.PRODUCT_CATE, para
 export const getProductInfoAPI = (params) => fn(fetch.get(Api.PRODUCT_INFO, params));
 export const getProductSearchAPI = (params) => fn(fetch.get(Api.PRODUCT_SEARCH, params));
+
+export const getSolutionListAPI = (params) => fn(fetch.get(Api.SOLUTION, params));
--- a/src/views/index.vue
View file @870a124
+++ b/src/views/index.vue
View file @870a124
 <!--
  * @Date: 2024-08-27 10:06:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-23 16:32:21
+ * @LastEditTime: 2024-10-24 10:52:43
  * @FilePath: /hager/src/views/index.vue
  * @Description: 首页
 -->
@@ -60,9 +60,9 @@
             <div
               @click="goToSolution(x)"
               :class="['solution-item', x.id === 'other' ? 'other' : '']"
-              :style="{ backgroundImage: 'url('+x.src+')' }"
+              :style="{ backgroundImage: 'url('+x.cover+')' }"
               >
-              <p>{{ x.title }}</p>
+              <p>{{ x.category_name }}</p>
             </div>
           </el-col>
         </el-row>
@@ -70,8 +70,8 @@
       <div v-else>
         <swiper ref="mySolutionSwiper" class="swiper" :options="swiperOption" @slideChange="onSolutionSlideChange">
           <swiper-slide v-for="(item, index) in solution_list" :key="index">
-            <div @click="goToSolution(item)" class="solution-item xs" :style="{ backgroundImage: 'url('+item.src+')' }">
+            <div @click="goToSolution(item)" class="solution-item xs" :style="{ backgroundImage: 'url('+item.cover+')' }">
-              <p @click="goToSolution(item)">{{ item.title }}</p>
+              <p @click="goToSolution(item)">{{ item.category_name }}</p>
             </div>
           </swiper-slide>
         </swiper>
@@ -118,7 +118,7 @@
               <i :class="['el-icon-arrow-right', reach_product_end ? 'disabled' : '']" @click="nextProductBtn()"></i>
             </div>
           </div>
-        </div>
+        </div>{{ product_list.length > productSlidesPerView }}/{{ is_xs }}/{{ !isEnd }}
       </div>
     </hager-box>
     <hager-box v-if="!is_xs" class="box-2n">
@@ -126,22 +126,22 @@
       <div class="news-container">
         <el-row :gutter="0" v-for="(item, index) in news_list" :key="index">
           <el-col :span="12" style="background-color: #FFF; height: 25rem;">
-            <img class="news-item-img" v-if="index % 2 === 0" :src="item.src">
+            <img class="news-item-img" v-if="index % 2 === 0" :src="item.cover">
             <div v-else class="news-item">
-              <div class="news-item-title">{{ item.title }}</div>
+              <div class="news-item-title">{{ item.post_title }}</div>
-              <p class="news-item-sub"  v-clamp="2">{{ item.sub }}</p>
+              <p class="news-item-sub"  v-clamp="2">{{ item.post_title_en }}</p>
-              <p class="news-item-content" v-clamp="3">{{ item.content }}</p>
+              <p class="news-item-content" v-clamp="3">{{ item.post_excerpt }}</p>
               <div @click="goToNew(item)" class="news-item-more" style="margin-top: 3rem;">MORE</div>
             </div>
           </el-col>
           <el-col :span="12" style="background-color: #FFF; height: 25rem;">
             <div v-if="index % 2 === 0" class="news-item">
-              <div class="news-item-title">{{ item.title }}</div>
+              <div class="news-item-title">{{ item.post_title }}</div>
-              <p class="news-item-sub" v-clamp="2">{{ item.sub }}</p>
+              <p class="news-item-sub" v-clamp="2">{{ item.post_title_en }}</p>
-              <p class="news-item-content" v-clamp="3">{{ item.content }}</p>
+              <p class="news-item-content" v-clamp="3">{{ item.post_excerpt }}</p>
               <div @click="goToNew(item)" class="news-item-more" style="margin-top: 3rem;">MORE</div>
             </div>
-            <img class="news-item-img" v-else :src="item.src">
+            <img class="news-item-img" v-else :src="item.cover">
           </el-col>
         </el-row>
       </div>
@@ -154,11 +154,11 @@
       <div class="news-container xs">
         <el-row :gutter="0" v-for="(item, index) in news_list" :key="index">
           <el-col :span="24">
-            <img class="news-item-img xs" :src="item.src" alt="News Image 1">
+            <img class="news-item-img xs" :src="item.cover" alt="News Image 1">
             <div class="news-item xs">
-              <div class="news-item-title">{{ item.title }}</div>
+              <div class="news-item-title">{{ item.post_title }}</div>
-              <p class="news-item-sub" v-clamp="2">{{ item.sub }}</p>
+              <p class="news-item-sub" v-clamp="2">{{ item.post_title_en }}</p>
-              <p class="news-item-content" v-clamp="3">{{ item.content }}</p>
+              <p class="news-item-content" v-clamp="3">{{ item.post_excerpt }}</p>
               <div class="news-item-more" @click="goToNew(item)">MORE</div>
             </div>
           </el-col>
@@ -205,69 +205,10 @@ export default {
           src: 'https://cdn.ipadbiz.cn/hager/banner/banner01@2x.png',
         },
       ],
-      news_list: [{
+      news_list: [],
-        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-        title: '获奖+1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀',
-        content: '11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整',
-        sub: 'o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid astgy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast'
-      }, {
-        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-        title: '获奖+1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀',
-        content: '11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整',
-        sub: 'o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast'
-      }, {
-        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-        title: '获奖+1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀国际标1！海格电气荣获2023酒店文旅优秀',
-        content: '11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整11月28-29日，2023汤点文旅住宿节在苏州国际会议酒店隆重开幕，作为酒店整',
-        sub: 'o Ehe gy aha oid asto Ehe gy aha oid asto Ehe gy aha oid ast'
-      }],
       screen_width: 0,
-      solution_list: [{
+      solution_list: [],
-        id: '1',
+      product_list: [],
-        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
-        title: '1住宅解决方案'
-      }, {
-        id: '1',
-        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
-        title: '2住宅解决方案'
-      }, {
-        id: '1',
-        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
-        title: '3住宅解决方案'
-      }, {
-        id: '1',
-        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
-        title: '4住宅解决方案'
-      }, {
-        id: '1',
-        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
-        title: '3住宅解决方案'
-      }, {
-        id: '1',
-        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
-        title: '4住宅解决方案'
-      }],
-      product_list: [{
-        id: '1',
-        src: 'https://cdn.ipadbiz.cn/hager/img/pp01@2x.png',
-        title: '配电产品'
-      }, {
-        id: '1',
-        src: 'https://cdn.ipadbiz.cn/hager/img/pp01@2x.png',
-        title: '成套产品'
-      }, {
-        id: '1',
-        src: 'https://cdn.ipadbiz.cn/hager/img/pp01@2x.png',
-        title: '开关面板'
-      }, {
-        id: '1',
-        src: 'https://cdn.ipadbiz.cn/hager/img/pp01@2x.png',
-        title: '智能控制'
-      }, {
-        id: '1',
-        src: 'https://cdn.ipadbiz.cn/hager/img/pp01@2x.png',
-        title: '能源管理'
-      }],
       swiperOption: {
         slidesPerView: 2,
         spaceBetween: 20,
@@ -306,7 +247,7 @@ export default {
       reach_solution_end: false,
       reach_product_end: false,
       productSlidesPerView: 5,
-      isEnd: true,
+      isEnd: false,
     }
   },
   async mounted () {
@@ -314,9 +255,12 @@ export default {
     if (code) {
       console.warn(data);
       this.product_list = data.product;
+      // this.banner_list = data.banner;
+      this.solution_list = data.solution;
+      this.news_list = data.news;
     }
-    this.isEnd = this.$refs.myProductSwiper.$swiper.isEnd; // 是否全部显示出来
     this.$nextTick(() => {
+      this.isEnd = this.$refs.myProductSwiper.$swiper.isEnd; // 是否全部显示出来
       this.$refs.myProductSwiper.$swiper?.on('breakpoint', (swiper) => {
         // breakpoint时 显示的条数
         this.productSlidesPerView = swiper.slidesPerView;
@@ -346,7 +290,7 @@ export default {
       }
       // 在最后一组添加 {src:'', title:'other'}
-      result[result.length - 1].push({ id: 'other', src: '', title: 'Other解决方案' });
+      // result[result.length - 1].push({ id: 'other', cover: '', category_name: 'Other解决方案' });
       return result;
     },
--- a/src/views/solution/detail.vue
View file @870a124
+++ b/src/views/solution/detail.vue
View file @870a124
 <!--
  * @Date: 2024-09-29 15:49:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-21 14:43:11
+ * @LastEditTime: 2024-10-24 10:32:43
  * @FilePath: /hager/src/views/solution/detail.vue
  * @Description: 文件描述
 -->
@@ -10,12 +10,12 @@
     <hager-box class="top-img" :style="{ height: top_img_height, backgroundImage: 'url(https://cdn.ipadbiz.cn/hager/banner/banner03@2x.png)' }">
       <div v-if="!is_xs" class="banner-text-wrapper top-center">
         <div class="text">
-          <p class="title">学校解决方案</p>
+          <p class="title" style="margin-bottom: 0;">学校解决方案</p>
           <p class="sub">Campus Solution</p>
         </div>
-        <div class="text-sub">
+        <!-- <div class="text-sub">
           海格用丰富的行业知识和应用经验，为多个行业提供先进的数字化解决方案。
-        </div>
+        </div> -->
       </div>
     </hager-box>
     <hager-box v-if="!is_xs" class="box-n">
@@ -29,7 +29,7 @@
         </el-col>
         <el-col :span="12" class="brief-introduction">
           <div class="intro-box">
-            <hager-h1 title="学校解决方案" sub="Electronic solutions"></hager-h1>
+            <!-- <hager-h1 title="学校解决方案" sub="Electronic solutions"></hager-h1> -->
             <p style="margin: 2rem 0;">淨於电气开乐驾能民电峰决方案，提供安全。可靠。摄作友好。易于堆护的电力划！ 1h14. n53 X0(009121 3098. 228 41324849 56MeD 换至备用电源，保障救学和生活的连续性。</p>
             <i class="el-icon-right"></i>
           </div>
@@ -308,7 +308,7 @@ export default {
     position: relative;
     .top-center {
       position: absolute;
-      transform: translateY(100%); /* 垂直与水平居中 */
+      transform: translateY(150%); /* 垂直与水平居中 */
     }
   }
   .carousel-img {
@@ -324,6 +324,7 @@ export default {
     }
     .intro-box {
       padding: 3rem;
+      padding-top: 0;
       &.xs {
         padding: 2rem;
       }
--- a/src/views/solution/index.vue
View file @870a124
+++ b/src/views/solution/index.vue
View file @870a124
@@ -26,11 +26,11 @@
       <div v-if="!is_xs" class="hager-industry-solutions">
         <el-row :gutter="15" v-for="(item, index) in splitListIntoChunks(solution_list)" :key="index">
           <el-col :span="6" v-for="(x, idx) in item" :key="idx">
-            <div @click="goToSolution(item)" class="card">
+            <div @click="goToSolution(x)" class="card">
-              <img :src="x.src" class="card-image">
+              <img :src="x.cover" class="card-image">
               <div class="card-content">
                 <div class="card-title">
-                  <span>{{ x.title }}</span>
+                  <span>{{ x.category_name }}</span>
                   <i class="el-icon-right" style="color: #00ABE5;"></i>
                 </div>
                 <p class="card-sub">{{ x.sub }}</p>
@@ -43,10 +43,10 @@
         <swiper ref="mySolutionSwiper" class="swiper" :options="swiperOption" @slideChange="onSlideChange()">
           <swiper-slide v-for="(item, index) in solution_list" :key="index">
             <div @click="goToSolution(item)" class="card" style="margin-bottom: 1rem;">
-              <img :src="item.src" alt="学校图片" class="card-image">
+              <img :src="item.cover" alt="学校图片" class="card-image">
               <div class="card-content">
                 <div class="card-title">
-                  <span>{{ item.title }}</span>
+                  <span>{{ item.category_name }}</span>
                   <i class="el-icon-right"></i>
                 </div>
                 <p class="card-sub">{{ item.sub }}</p>
@@ -61,9 +61,9 @@
           </div>
         </div>
       </div>
-      <div class="more-box" style="margin-top: 2rem;">
+      <!-- <div class="more-box" style="margin-top: 2rem;">
         <hager-more></hager-more>
-      </div>
+      </div> -->
     </hager-box>
     <hager-service></hager-service>
   </div>
@@ -75,45 +75,14 @@ import hagerBox from '@/components/common/hagerBox';
 import hagerH1 from '@/components/common/hagerH1.vue';
 import hagerMore from '@/components/hagerMore.vue';
 import hagerService from '@/components/common/hagerService.vue';
+import { getSolutionListAPI } from "@/api/hager.js";
 export default {
   components: { hagerBox, hagerH1, hagerMore, hagerService },
   mixins: [mixin.init],
   data () {
     return {
-      solution_list: [{
+      solution_list: [],
-        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
-        title: '1住宅解决方案',
-        sub: 'Residential Solution Case'
-      }, {
-        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
-        title: '2住宅解决方案',
-        sub: 'Residential Solution Case'
-      }, {
-        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
-        title: '3住宅解决方案',
-        sub: 'Residential Solution Case'
-      }, {
-        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
-        title: '4住宅解决方案',
-        sub: 'Residential Solution Case'
-      }, {
-        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
-        title: '1住宅解决方案',
-        sub: 'Residential Solution Case'
-      }, {
-        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
-        title: '2住宅解决方案',
-        sub: 'Residential Solution Case'
-      }, {
-        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
-        title: '3住宅解决方案',
-        sub: 'Residential Solution Case'
-      }, {
-        src: 'https://cdn.ipadbiz.cn/hager/img/WX20241021-110827@2x.png',
-        title: '4住宅解决方案',
-        sub: 'Residential Solution Case'
-      }],
       swiperOption: {
         slidesPerView: 2,
         spaceBetween: 50,
@@ -147,8 +116,11 @@ export default {
       reach_end: false,
     }
   },
-  mounted () {
+  async mounted () {
-
+    const { code, data } = await getSolutionListAPI();
+    if (code) {
+      this.solution_list = data;
+    }
   },
   methods: {
     splitListIntoChunks (list) {
@@ -164,6 +136,7 @@ export default {
       return result;
     },
     goToSolution (v) {
+      console.warn(v);
       this.$router.push({
         path: '/solution/detail',
         query: {