联调荣誉展示列表

hookehuyr
Commit 0f1f9f4938170f192bfaafb2b6fac708e61566fa 0f1f9f49 1 parent db9b654c
Showing 4 changed files with 72 additions and 46 deletions
.env
src/api/hager.js
src/utils/axios.js
src/views/about/honors.vue
--- a/.env
View file @0f1f9f4
+++ b/.env
View file @0f1f9f4
@@ -2,7 +2,7 @@
 VITE_PORT = 8106
 # 反向代理服务器地址
-VITE_PROXY_TARGET = https://oa-dev.onwall.cn
+VITE_PROXY_TARGET = http://www.hager-electric.com/
 # VITE_PROXY_TARGET = https://oa.onwall.cn
 # API请求前缀
--- a/src/api/hager.js
View file @0f1f9f4
+++ b/src/api/hager.js
View file @0f1f9f4
+/*
+ * @Date: 2024-09-26 13:36:06
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-10-23 10:13:25
+ * @FilePath: /hager/src/api/hager.js
+ * @Description: 文件描述
+ */
 import { fn, fetch } from '@/api/fn';
 const Api = {
-  MAP: '/srv/?a=map',
+  HONOR: '/srv/?a=cate&type=honor',
 };
-export const mapAPI = (params) => fn(fetch.get(Api.MAP, params));
+export const honorAPI = (params) => fn(fetch.get(Api.HONOR, params));
--- a/src/utils/axios.js
View file @0f1f9f4
+++ b/src/utils/axios.js
View file @0f1f9f4
@@ -2,8 +2,8 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-28 10:17:40
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-03 16:01:59
+ * @LastEditTime: 2024-10-23 10:11:14
- * @FilePath: /vue2_vite_web/src/utils/axios.js
+ * @FilePath: /hager/src/utils/axios.js
  * @Description:
  */
 import axios from 'axios';
@@ -13,7 +13,7 @@ import { strExist } from '@/utils/tools'
 // import { parseQueryString } from '@/utils/tools'
 axios.defaults.params = {
-  f: 'tools',
+  m: 'srv',
 };
 /**
--- a/src/views/about/honors.vue
View file @0f1f9f4
+++ b/src/views/about/honors.vue
View file @0f1f9f4
 <!--
  * @Date: 2024-10-17 11:13:44
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-22 13:45:54
+ * @LastEditTime: 2024-10-23 10:43:05
  * @FilePath: /hager/src/views/about/honors.vue
- * @Description: 文件描述
+ * @Description: 关于海格-荣誉展示
 -->
 <template>
   <div class="hager-about-honors-page">
@@ -18,40 +18,37 @@
     <div :class="['top-img', is_xs ? 'xs' : '']"></div>
     <hager-box v-if="!is_xs">
       <div class="select-btn-box">
-        <div @click="onClickBtn(0)" :class="['btn', active_idx === 0 ? 'active' : 'normal']">行业荣誉</div>
+        <div
-        <div @click="onClickBtn(1)":class="['btn', active_idx === 1 ? 'active' : 'normal']">美学设计</div>
+          v-for="(item, index) in button_list" :key="index"
-        <div @click="onClickBtn(2)":class="['btn', active_idx === 2 ? 'active' : 'normal']">卓越发展</div>
+          :class="['btn', active_idx === index ? 'active' : 'normal']"
+          @click="onClickBtn(index)">
+          {{ item.category_name }}
+        </div>
       </div>
     </hager-box>
     <div v-else class="select-btn-box" style="padding: 1rem;">
       <el-row :gutter="10">
-        <el-col :span="8">
+        <el-col :span="8" v-for="(item, index) in button_list" :key="index">
-          <div @click="onClickBtn(0)" :class="['btn xs', active_idx === 0 ? 'active' : 'normal']">行业荣誉</div>
+          <div @click="onClickBtn(index)" :class="['btn xs', active_idx === index ? 'active' : 'normal']">{{ item.category_name }}</div>
-        </el-col>
-        <el-col :span="8">
-          <div @click="onClickBtn(1)" :class="['btn xs', active_idx === 1 ? 'active' : 'normal']">美学设计</div>
-        </el-col>
-        <el-col :span="8">
-          <div @click="onClickBtn(2)" :class="['btn xs', active_idx === 2 ? 'active' : 'normal']">卓越发展</div>
         </el-col>
       </el-row>
     </div>
-    <hager-box v-if="!is_xs" v-for="(item, index) in years_list" :key="index">
+    <hager-box v-if="!is_xs" v-for="(item, index) in honors_cate_list" :key="index">
-      <p class="list-title">{{ item.year }}年</p>
+      <p class="list-title">{{ item.category_name }}</p>
       <div class="list-wrapper">
         <div class="card" v-for="(x, idx) in item.list" :key="idx">
           <div class="card-image-box">
-            <div class="card-image" :style="{ backgroundImage: `url(${x.img})` }"></div>
+            <div class="card-image" :style="{ backgroundImage: `url(${x.cover})` }"></div>
           </div>
           <div class="card-content">
-            <h3>{{ x.title }}</h3>
+            <h3>{{ x.post_title }}</h3>
-            <p>{{ x.content }}</p>
+            <p v-html="x.post_content"></p>
           </div>
         </div>
       </div>
     </hager-box>
-    <div v-if="is_xs" v-for="(item, index) in years_list" :key="index" style="padding: 1rem;">
+    <div v-if="is_xs" v-for="(item, index) in honors_cate_list" :key="index" style="padding: 1rem;">
-      <p class="list-title">{{ item.year }}年</p>
+      <p class="list-title">{{ item.category_name }}</p>
       <swiper class="swiper"
         :ref="'mySwiper' + item.id"
         :options="swiperOption"
@@ -61,11 +58,11 @@
           <div class="list-wrapper-mini">
             <div class="card">
               <div class="card-image-box">
-                <div class="card-image" :style="{ backgroundImage: `url(${x.img})` }"></div>
+                <div class="card-image xs" :style="{ backgroundImage: `url(${x.cover})` }"></div>
               </div>
-              <div class="card-content">
+              <div class="card-content xs">
-                <h3>{{ x.title }}</h3>
+                <h3>{{ x.post_title }}</h3>
-                <p>{{ x.content }}</p>
+                <p v-html="x.post_content"></p>
               </div>
             </div>
           </div>
@@ -73,14 +70,14 @@
       </swiper>
       <div v-if="item.list.length > item.slidesPerView || is_xs" class="xs-control">
         <div>
-          <i :class="['el-icon-arrow-left', item.activeIndex === 0 ? 'disabled' : '']" @click="prevBtn(item)"></i>
+          <i :class="['el-icon-arrow-left', item.activeIndex === 0 ? 'disabled' : '']" @click="prevBtn(item)"></i>&nbsp;
           <i :class="['el-icon-arrow-right', item.reach_end ? 'disabled' : '']" @click="nextBtn(item)"></i>
         </div>
       </div>
     </div>
-    <hager-box>
+    <!-- <hager-box>
       <hager-load-more></hager-load-more>
-    </hager-box>
+    </hager-box> -->
   </div>
 </template>
@@ -88,6 +85,7 @@
 import mixin from 'common/mixin';
 import hagerBox from '@/components/common/hagerBox';
 import hagerLoadMore from '@/components/hagerLoadMore.vue';
+import { honorAPI } from "@/api/hager.js";
 export default {
   components: { hagerBox, hagerLoadMore },
@@ -95,7 +93,9 @@ export default {
   data () {
     return {
       active_idx: 0,
-      years_list: [{
+      button_list: [],
+      all_honors_list: [],
+      honors_cate_list: [{
         id: '1',
         year: '2022',
         list: [{
@@ -169,22 +169,35 @@ export default {
       },
     }
   },
-  mounted () {
+  async mounted () {
-    this.years_list.forEach((item) => {
+    const { code, data } = await honorAPI();
-      this.$nextTick(() => {
+    if (code) {
-        const swiperRef = this.$refs[`mySwiper${item.id}`];
+      this.all_honors_list = data; // 所有荣誉集合
-        if (swiperRef && swiperRef[0].$swiper) {
+      // 荣誉分类列表
-          swiperRef[0].$swiper.on('breakpoint', (swiper) => {
+      this.button_list = data.map(item => {
-            // breakpoint时 显示的条数
+        return {
-            item.slidesPerView = swiper.slidesPerView;
+          id: item.id,
-          });
+          category_name: item.category_name
         }
       });
-    });
+      this.honors_cate_list = this.all_honors_list[0]['children']; // 默认第一个
+      this.honors_cate_list.forEach((item) => {
+        this.$nextTick(() => {
+          const swiperRef = this.$refs[`mySwiper${item.id}`];
+          if (swiperRef && swiperRef[0].$swiper) {
+            swiperRef[0].$swiper.on('breakpoint', (swiper) => {
+              // breakpoint时 显示的条数
+              item.slidesPerView = swiper.slidesPerView;
+            });
+          }
+        });
+      });
+    }
   },
   methods: {
     onClickBtn (idx) {
       this.active_idx = idx;
+      this.honors_cate_list = this.all_honors_list[idx]['children'];
     },
     prevBtn (item) {
       this.$nextTick(() => {
@@ -272,13 +285,13 @@ export default {
     .list-wrapper {
       margin-bottom: 1rem;
       .card-image-box {
-        padding: 1rem;
+        padding: 0.5rem;
         background-color: #E3F1F7;
       }
       .card-image {
         width: 100%;
         height: 17rem;
-        background-size: cover;
+        background-size: contain;
         background-position: center;
         background-repeat: no-repeat;
       }
@@ -348,12 +361,18 @@ export default {
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
+        &.xs {
+          height: 15rem;
+        }
       }
       .card-content {
         background-color: #F7F7F7;
         padding: 2rem 1.5rem;
         height: 12rem;
         overflow: scroll;
+        &.xs {
+          height: 7rem;
+        }
         h3 {
           color: @secondary-color;
           font-size: 1rem;