gcz 1 săptămână în urmă
părinte
comite
25651a6d89
3 a modificat fișierele cu 70 adăugiri și 19 ștergeri
  1. 7 7
      src/api/modules/home.js
  2. 61 10
      src/components/layout/Footer.vue
  3. 2 2
      src/pages/home/Index.vue

+ 7 - 7
src/api/modules/home.js

@@ -1,13 +1,13 @@
 import request from '@/utils/request'
 
 // 获取首页数据
-export const getHomeData = (params) => {
-  return request({
-    url: '/website/companyInfo',
-    method: 'get',
-    params
-  })
-}
+// export const getHomeData = (params) => {
+//   return request({
+//     url: '/website/companyInfo',
+//     method: 'get',
+//     params
+//   })
+// }
 
 // 产品/案例信息
 // 分类列表

+ 61 - 10
src/components/layout/Footer.vue

@@ -9,14 +9,15 @@
             <h3 class="section-title">联系我们</h3>
             <div class="contact-item phone">
               <img src="@assets/footer-phone.png" alt="电话" class="contact-icon">
-              <span class="contact-text">400-624-0069</span>
+              <span class="contact-text">{{ companyInfo.mobile || '400-624-0069' }}</span>
             </div>
             <div class="contact-item addr">
               <img src="@assets/footer-addr.png" alt="地址" class="contact-icon">
-              <span class="contact-text">贵州省贵阳市观山湖区金融城MAX-A座</span>
+              <span class="contact-text">{{ companyInfo.address || '贵州省贵阳市观山湖区金融城MAX-A座' }}</span>
             </div>
             <div class="qrcode-section">
-              <img src="@assets/footer-qrcode.png" alt="微信公众号" class="qrcode">
+              <img :src="imgHost+companyInfo.wechatQrcode || '@assets/footer-qrcode.png'" alt="微信公众号" class="qrcode"
+                @error="handleImageError">
               <p class="qrcode-text">微信公众号入口</p>
             </div>
           </div>
@@ -70,8 +71,47 @@
 </template>
 
 <script>
+import { ref, onMounted } from 'vue'
+import { getCompanyInfo } from '@/api/modules/home'
+
 export default {
-  name: 'Footer'
+  name: 'Footer',
+  setup() {
+    // 环境变量
+    const imgHost = import.meta.env.VITE_APP_IMG_HOST
+    const companyInfo = ref({})
+    const loading = ref(false)
+
+    const fetchCompanyInfo = async () => {
+      try {
+        loading.value = true
+        const response = await getCompanyInfo()
+        if (response.data) {
+          companyInfo.value = response.data
+        }
+      } catch (error) {
+        console.error('获取公司信息失败:', error)
+      } finally {
+        loading.value = false
+      }
+    }
+
+    const handleImageError = (event) => {
+      // 如果微信二维码图片加载失败,使用默认图片
+      event.target.src = require('@assets/footer-qrcode.png')
+    }
+
+    onMounted(() => {
+      fetchCompanyInfo()
+    })
+
+    return {
+      imgHost,
+      companyInfo,
+      loading,
+      handleImageError
+    }
+  }
 }
 </script>
 
@@ -110,8 +150,10 @@ export default {
     color: white;
     padding-bottom: 15px;
     display: inline-block;
-    position: relative;;
-    &::after{
+    position: relative;
+    ;
+
+    &::after {
       content: '';
       width: 64px;
       height: 4px;
@@ -125,7 +167,7 @@ export default {
   .contact-item {
     font-size: 18px;
     display: flex;
-    align-items: flex-start;
+    align-items: baseline;
     margin-bottom: $spacing-base;
 
     .contact-icon {
@@ -138,9 +180,17 @@ export default {
 
     .contact-text {
       color: rgba(255, 255, 255, 0.9);
+      line-height: 1.5;
+    }
+
+    &.phone {
+      font-size: 32px;
+      margin-bottom: 24px;
+    }
+
+    &.addr {
+      margin-bottom: 32px;
     }
-    &.phone{font-size: 32px;margin-bottom: 24px;}
-    &.addr{margin-bottom: 32px;}
   }
 
   .qrcode-section {
@@ -273,10 +323,11 @@ export default {
 
 // 超小屏幕适配
 @media (max-width: 480px) {
-  .footer{
+  .footer {
     background-position: 0px -35px;
     background-color: #07122A;
   }
+
   .container {
     padding: 0 $spacing-base;
   }

+ 2 - 2
src/pages/home/Index.vue

@@ -166,7 +166,7 @@
 import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 import DefaultLayout from '@/layouts/DefaultLayout.vue'
-import { getHomeData, getProjectClassifyList, getProjectList, getCompanyCertList, getPartners } from '@/api/modules/home'
+import { getCompanyInfo, getProjectClassifyList, getProjectList, getCompanyCertList, getPartners } from '@/api/modules/home'
 import { animateNumber, createNumberAnimationObserver } from '@/utils/numberAnimation'
 // 导入图片资源
 import indexAboutBg from '@/assets/index-about-img.png'
@@ -371,7 +371,7 @@ export default {
     // API调用方法
     const loadHomeData = async () => {
       try {
-        const result = await getHomeData()
+        const result = await getCompanyInfo()
         const data = result.data
         console.log('首页数据:', data)