From 58b6099c20f0f37e1e87fa623637b9f8fc00e102 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Fri, 5 Jul 2024 14:40:13 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=BC=E8=88=AA=E5=9B=BE=E6=A0=87=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.js                    |   1 +
 src/components/occuQrcode/index.vue |  61 ++++++++--------
 src/layouts/header/index.vue        | 108 +++++++++++++++++++++++++---
 src/setting.js                      |   2 +-
 src/styles/common.scss              |  36 ++++++++++
 5 files changed, 167 insertions(+), 41 deletions(-)

diff --git a/src/api/index.js b/src/api/index.js
index 8addee7..8ac4e33 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -25,6 +25,7 @@ export default {
   columnDisplayFloatingBar: `/iasf/SysFloatingColumnSchemeService/SysFloatingColumnScheme/columnDisplayFloatingBar`,
   showTheFooterAccordingToTheColumn: `/iasf/SysFooterSetupService/SysFooterSetup/showTheFooterAccordingToTheColumn`,
   findLogo: `/iasf/LogoService/Logo/findById`,
+  navList: `/iasf/SysNavigationIconService/SysNavigationIcon/list`,
 
   listMarketing: `/nakadai/nakadai/mall/marketing/promotion/pagingQueryList`,
   courseProduct: `/iasf/productDetails/courseProduct`,
diff --git a/src/components/occuQrcode/index.vue b/src/components/occuQrcode/index.vue
index 6cea0da..a4d13d7 100644
--- a/src/components/occuQrcode/index.vue
+++ b/src/components/occuQrcode/index.vue
@@ -1,16 +1,8 @@
 <template>
-  <el-dialog title=""
-             :visible.sync="diaVisible"
-             center
-             :width="$store.getters.getModelType ? '500px' : '100%'"
-             append-to-body
-             :top="qrcodeTop"
-             lock-scroll
-             custom-class="qrcode-dia">
+  <el-dialog title="" :visible.sync="diaVisible" center :width="$store.getters.getModelType ? '500px' : '100%'"
+    append-to-body :top="qrcodeTop" lock-scroll custom-class="qrcode-dia">
     <div class="pic-wrap">
-      <img class="pic"
-           src="@/assets/images/occupationlab.png"
-           alt="">
+      <img class="pic" src="@/assets/images/occupationlab.png" alt="">
     </div>
   </el-dialog>
 </template>
@@ -46,30 +38,35 @@ export default {
 </script>
 <style lang="scss" scoped>
 /deep/.qrcode-dia {
+  background-color: transparent;
+
+  .el-dialog__header,
+  .el-dialog__body {
+    padding: 0;
     background-color: transparent;
-    .el-dialog__header,
-    .el-dialog__body {
-        padding: 0;
-        background-color: transparent;
-        overflow: hidden;
-    }
-    .el-dialog__headerbtn .el-dialog__close {
-        color: #fff;
-    }
-    .pic-wrap {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-    .pic {
-        width: 100%;
-    }
+    overflow: hidden;
+  }
+
+  .el-dialog__headerbtn .el-dialog__close {
+    color: #fff;
+  }
+
+  .pic-wrap {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .pic {
+    width: 100%;
+  }
 }
+
 @media (max-width: 1200px) {
-    /deep/.qrcode-dia {
-        .pic {
-            width: 95%;
-        }
+  /deep/.qrcode-dia {
+    .pic {
+      width: 95%;
     }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/layouts/header/index.vue b/src/layouts/header/index.vue
index a4e2630..7383053 100644
--- a/src/layouts/header/index.vue
+++ b/src/layouts/header/index.vue
@@ -10,11 +10,22 @@
     <template v-if="$store.getters.getModelType">
       <navbar v-if="navShow" ref="nav" :isHome.sync="isHome" :isEstate.sync="isEstate" :isIasf.sync="isIasf"
         @showMoreBtns="updateBtnsType"></navbar>
+      <!-- 导航最右侧工具栏 -->
       <div class="tools">
-        <div class="login" @click="toLogin">
-          <img src="@/assets/images/user.png" alt="">
-          <span>注册登录</span>
+        <div v-for="(item, i) in tools" :key="i" class="item" @click="toolClick(item)">
+          <img v-if="item.icon" :src="item.icon" alt="" class="icon">
+          <span v-if="item.buttonText" class="text">{{ item.buttonText }}</span>
         </div>
+        <!-- 如果图标超过5个，则显示省略号 -->
+        <el-popover v-if="tools.length > 5" placement="bottom" width="297" trigger="click" popper-class="tool-more">
+          <ul class="more-wrap">
+            <li v-for="(item, i) in tools" :key="i" class="item" @click="toolClick(item)">
+              <img v-if="item.icon" :src="item.icon" alt="" class="icon">
+              <p v-if="item.buttonText" class="text">{{ item.buttonText }}</p>
+            </li>
+          </ul>
+          <i slot="reference" class="el-icon-more cursor-pointer" style="color: #535353"></i>
+        </el-popover>
       </div>
     </template>
     <!-- 手机端 -->
@@ -26,14 +37,18 @@
       </div>
     </div>
 
-    <occuQrcode :visible.sync="qrcodeVisible" />
+    <el-dialog title="" :visible.sync="toolVisible" center :width="$store.getters.getModelType ? '500px' : '100%'"
+      append-to-body :top="qrcodeTop" lock-scroll custom-class="qrcode-dia">
+      <div class="pic-wrap">
+        <img class="pic" :src="toolPic" alt="">
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
 import Util from '@/libs/util'
 import { mapMutations } from 'vuex'
 import navbar from '../navbar'
-import occuQrcode from '@/components/occuQrcode'
 export default {
   data () {
     return {
@@ -53,11 +68,14 @@ export default {
         logoUrl: '',
       },
       timer: null,
+      qrcodeTop: '100px',
+      tools: [],
+      toolVisible: false,
+      toolPic: '',
     };
   },
   components: {
     navbar,
-    occuQrcode
   },
   computed: {
     isSfel () {
@@ -83,7 +101,12 @@ export default {
   },
   mounted () {
     this.getLogo()
+    this.getTool()
     this.setKeyword('')
+
+    const height = (window.innerHeight - (this.$store.getters.getModelType ? 758 : 600)) / 2
+    this.qrcodeTop = (height > 0 ? height : 0) + 'px'
+
     window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
     document.body.addEventListener('click', e => {
       e.stopPropagation()
@@ -101,6 +124,13 @@ export default {
         this.logoForm = res.data
       }
     },
+    // 获取导航图标
+    async getTool () {
+      const res = await this.$post(`${this.api.navList}?siteId=${this.site}&isDisable=0`)
+      if (res.data) {
+        this.tools = res.data
+      }
+    },
     toIndex () {
       this.$refs.nav.jump()
     },
@@ -152,6 +182,17 @@ export default {
       location.href = this.$router.resolve(`/column?siteId=${id}`).href
       location.reload()
     },
+    // 图标点击
+    toolClick (item) {
+      // 链接
+      if (item.buttonContent === '0') {
+        item.newTab ? window.open(item.linkAddress) : (location.href = item.linkAddress)
+      } else {
+        // 弹框
+        this.toolPic = item.imagePath
+        this.toolVisible = true
+      }
+    },
     // 注册登录
     toLogin () {
       if (this.GTA) {
@@ -223,16 +264,29 @@ $height: 90px;
   }
 
   .tools {
-    .login {
+    display: flex;
+    align-items: center;
+
+    .item {
       display: inline-flex;
       align-items: center;
+      margin-right: 15px;
       cursor: pointer;
 
+      &:last-child {
+        margin-right: 0;
+      }
+
       &:hover {
         opacity: 0.9;
       }
 
-      span {
+      .icon {
+        max-width: 30px;
+        max-height: 30px;
+      }
+
+      .text {
         margin-left: 5px;
         color: #666;
         font-size: 14px;
@@ -240,6 +294,8 @@ $height: 90px;
     }
   }
 
+
+
   .search {
     margin-right: 43px;
   }
@@ -315,6 +371,40 @@ $height: 90px;
   overflow-y: scroll;
 }
 
+/deep/.qrcode-dia {
+  background-color: transparent;
+  box-shadow: none;
+
+  .el-dialog__header,
+  .el-dialog__body {
+    padding: 0;
+    background-color: transparent;
+    overflow: hidden;
+  }
+
+  .el-dialog__headerbtn .el-dialog__close {
+    color: #fff;
+  }
+
+  .pic-wrap {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .pic {
+    max-width: 100%;
+  }
+}
+
+@media (max-width: 1200px) {
+  /deep/.qrcode-dia {
+    .pic {
+      width: 95%;
+    }
+  }
+}
+
 @media (max-width: 1660px) {
   .header {
     .logo {
@@ -349,3 +439,5 @@ $height: 90px;
   }
 }
 </style>
+<style lang="scss">
+/style>
diff --git a/src/setting.js b/src/setting.js
index 69db3e3..5a93343 100644
--- a/src/setting.js
+++ b/src/setting.js
@@ -7,7 +7,7 @@ const isGta = url.includes('139.159.254.212'); // 国泰安
 let host = `${location.origin}/`
 if (isDev) {
   host = 'http://192.168.31.217:10000/'
-  host = 'https://huorantech.com'
+  // host = 'https://huorantech.com'
 }
 
 const Setting = {
diff --git a/src/styles/common.scss b/src/styles/common.scss
index e14e097..c6b72af 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -233,4 +233,40 @@
       font-size: 18px;
       color: rgba(0, 0, 0, 0.25);
   }
+}
+.tool-more {
+  .more-wrap {
+    display: flex;
+    flex-wrap: wrap;
+
+    .item {
+      display: inline-flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 80px;
+      height: 80px;
+      margin: 5px;
+      border: 1px solid #d9d9d9;
+      border-radius: 8px;
+      cursor: pointer;
+    }
+    &:hover {
+      opacity: 0.9;
+      .text {
+        color: #1583ff;
+      }
+    }
+
+    .icon {
+      max-width: 30px;
+      max-height: 30px;
+    }
+
+    .text {
+      margin-top: 5px;
+      color: #666;
+      font-size: 14px;
+    }
+  }
 }
\ No newline at end of file