Jelajahi Sumber

修复产品中心bug

gcz 1 Minggu lalu
induk
melakukan
4da1d8c3f4
1 mengubah file dengan 41 tambahan dan 39 penghapusan
  1. 41 39
      src/pages/products/Index.vue

+ 41 - 39
src/pages/products/Index.vue

@@ -57,7 +57,7 @@
     </section>
 
     <!-- 产品优势 section -->
-    <section class="advantages-section" ref="advantagesSection">
+    <section v-if="advantages.length > 0" class="advantages-section" ref="advantagesSection">
       <div class="container">
         <h2 class="section-title animate-fade-up" :class="{ 'animate-visible': isAdvantagesVisible }">产品优势</h2>
         <img src="@assets/products-select.png" alt="" class="title-indicator animate-scale-in"
@@ -88,11 +88,6 @@ import { getProjectClassifyList, getProjectList } from '@/api/modules/home'
 import productsBg01 from '@/assets/products-bg01.png'
 import productsBg02 from '@/assets/products-bg02.png'
 import productsYoushi01 from '@/assets/products-youshi-01.png'
-import productsYoushi02 from '@/assets/products-youshi-02.png'
-import productsYoushi03 from '@/assets/products-youshi-03.png'
-import productsYoushi04 from '@/assets/products-youshi-04.png'
-import productsYoushi05 from '@/assets/products-youshi-05.png'
-import productsYoushi06 from '@/assets/products-youshi-06.png'
 
 export default {
   name: 'ProductsPage',
@@ -121,39 +116,8 @@ export default {
     // 产品列表数据
     const productList = ref([])
 
-    // 产品优势数据
-    const advantages = ref([
-      {
-        title: '成本节约',
-        description: '通过优化碳排放和碳资产配置,企业 可以在碳交易市场上卖出多余的碳排 放配额,实现成本节约。此外,提高 能效和采用清洁能源也有助于降低能 源成本。',
-        image: productsYoushi01
-      },
-      {
-        title: '市场竞争力提升',
-        description: '积极管理碳资产的企业能够改善其 在绿色市场中的形象,吸引越来越 多注重可持续性的消费者和投资者, 从而提升市场竞争力。',
-        image: productsYoushi02
-      },
-      {
-        title: '详细合规与风险管理',
-        description: '碳资产管理帮助企业准确监测和 报告碳排放,确保企业遵守相关 的环境法规和标准,降低因违反 碳排放规定而产生的法律和财务 风险。',
-        image: productsYoushi03
-      },
-      {
-        title: '技术创新与生产力提升',
-        description: '碳资产管理促使企业投资于低碳技术和 能源效率改进,这些投资不仅有助于减 少碳排放,还能提高整体生产力和操作 效率。',
-        image: productsYoushi04
-      },
-      {
-        title: '长远战略规划',
-        description: '碳资产管理有助于企业制定长期的碳 减排目标和策略,帮助企业在应对气 候变化的全球趋势中占据有利位置。 推动企业的可持续发展。',
-        image: productsYoushi05
-      },
-      {
-        title: '数据驱动决策支持',
-        description: '碳资产管理平台提供的数据分析和报告功能, 能够帮助企业管理层做出更加明智的决策优 化资源分配,提高决策的数据驱动性。助力 企业制定长期的碳减排目标和策略。',
-        image: productsYoushi06
-      }
-    ])
+    // 产品优势数据 - 从API获取
+    const advantages = ref([])
 
     // 切换平台
     const switchPlatform = async (index) => {
@@ -242,6 +206,24 @@ export default {
 
         if (data && data.rows) {
           productList.value = data.rows
+
+          // 更新产品优势数据
+          if (data.rows.length > 0 && data.rows[0].projectMeritList) {
+            advantages.value = data.rows[0].projectMeritList.map(merit => ({
+              title: merit.title,
+              description: merit.content,
+              image: merit.backImage ? imgHost + merit.backImage : productsYoushi01
+            }))
+
+            // 数据加载完成后,重新设置优势区域的观察器
+            nextTick(() => {
+              setupAdvantagesObserver()
+            })
+          } else {
+            // 如果没有优势数据,清空数组
+            advantages.value = []
+          }
+
           // 更新当前选中平台的信息
           if (platforms.value[activePlatform.value] && data.rows.length > 0) {
             // 更新subtitle为第一条数据的projectProfile
@@ -297,6 +279,26 @@ export default {
       })
     }
 
+    // 单独设置优势区域观察器
+    const setupAdvantagesObserver = () => {
+      const observerOptions = {
+        threshold: 0.2,
+        rootMargin: '0px 0px -50px 0px'
+      }
+
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting && entry.target.classList.contains('advantages-section')) {
+            isAdvantagesVisible.value = true
+          }
+        })
+      }, observerOptions)
+
+      if (advantagesSection.value) {
+        observer.observe(advantagesSection.value)
+      }
+    }
+
     onMounted(() => {
       handleGetProjectClassifyList1() // 获取产品分类列表
       startAutoPlay()