Merge branch 'zhangjiahao/feature-20250717125955-众筹' into songtongtong/feature-20250717104937-众筹

src/api/API.js

@@ -1,19 +1,19 @@
-import request from "../utils/request";
-const APIurl = import.meta.env.VITE_APP_API_BASE_URL;
-// 开发环境使用代理，生产环境使用环境变量
-// const APIurl = import.meta.env.DEV ? '/Api' : import.meta.env.VITE_APP_API_BASE_URL;
+// import request from "../utils/request";
+// const APIurl = import.meta.env.VITE_APP_API_BASE_URL;
+// // 开发环境使用代理，生产环境使用环境变量
+// // const APIurl = import.meta.env.DEV ? '/Api' : import.meta.env.VITE_APP_API_BASE_URL;
 
-export function addRecordAPI(data) {
-  return request({
-    url: `Api/api/funding/addRecord`,
-    method: 'post',
-    data: data
-  })
-}
-// 新增：获取活动信息接口
-export function getActivity1API() {
-  return request({
-    url:  `Api/api/funding/getActivity1`,
-    method: 'post'
-  })
-}
+// export function addRecordAPI(data) {
+//   return request({
+//     url: `Api/api/funding/addRecord`,
+//     method: 'post',
+//     data: data
+//   })
+// }
+// // 新增：获取活动信息接口
+// export function getActivity1API() {
+//   return request({
+//     url:  `Api/api/funding/getActivity1`,
+//     method: 'post'
+//   })
+// }

src/views/zhongchou/index.vue

@@ -22,6 +22,8 @@
                 <div class="stock-content">
                     <div class="stock-card us-card">
                         <div class="card-content us-content">
+                            <!-- 周年庆装饰元素 -->
+                            <div class="anniversary-decoration"></div>
                             <div class="progress-section">
                                 <div class="progress-bar">
                                     <div class="progress-fill"></div>
@@ -107,7 +109,7 @@
                 <div class="modal-background">
                     <div class="modal-text">
                         <div class="rules-list">
-                            <p>1. 活动时间为2025年7月26日-2025年8月5日。</p>
+                            <p>1. 活动时间为{{ activityPeriod }}。</p>
                             <p>2. 每人每天每个活动可以参与一次。</p>
                             <p>3. 初始时间为15分钟，每一百人参与助力，即可扣减一分钟！</p>
                             <p>4. 助力成功后，对应股票市场将开放实时数据！</p>
@@ -126,7 +128,9 @@ import { ref, computed, onMounted, nextTick, watch } from 'vue'
 
 // 活动时间显示
 const activityPeriod = ref('加载中...')
-
+// 添加响应式变量存储活动ID和市场ID
+const activityId = ref(null)
+const usMarketId = ref(null)
 // 格式化日期函数
 const formatDate = (dateString) => {
     if (!dateString) return ''
@@ -143,8 +147,13 @@ async function fetchActivity() {
         const response = await getActivity1API()
         if (response.code === 200) {
             console.log('活动数据:', response.data)
+
             // 处理返回的数据
-            const { startTime, endTime, marketTwoStatus, marketTwoCount } = response.data
+            const { activityId: id, data, startTime, endTime, totalcount } = response.data
+
+            // 存储活动ID
+            activityId.value = id
+
             if (startTime && endTime) {
                 const formattedStartTime = formatDate(startTime)
                 const formattedEndTime = formatDate(endTime)
@@ -153,27 +162,46 @@ async function fetchActivity() {
                 activityPeriod.value = '时间待定'
             }
 
-            // 根据marketTwoStatus设置助力状态
-            if (marketTwoStatus === '已助力') {
-                usBoostStatus.value = true
-            } else {
-                usBoostStatus.value = false
-            }
-
-            // 根据marketTwoCount计算进度和剩余时间
-            if (marketTwoCount !== undefined) {
-                const totalPeople = 1500 // 总人数1500人
-                const currentCount = marketTwoCount || 0 // 当前助力人数
-
-                // 计算进度百分比 (0-100)
-                const progressPercent = Math.min((currentCount / totalPeople) * 100, 100)
-
-                // 根据进度计算剩余时间 (15分钟对应100%进度)
-                const usedTime = (progressPercent / 100) * 15
-                const remainingTime = Math.max(0, 15 - usedTime)
-
-                usRemainingTime.value = Math.round(remainingTime)
-                console.log(`助力人数: ${currentCount}/${totalPeople}, 进度: ${progressPercent.toFixed(1)}%, 剩余时间: ${remainingTime.toFixed(1)}分钟`)
+            // 处理市场数据
+            if (data && data.length > 0) {
+                // 遍历数据数组
+                data.forEach(item => {
+                    if (item.market === "美股" && item.marketId === 8) {
+                        // 存储美股市场ID
+                        usMarketId.value = item.marketId
+
+                        // 根据marketStatus设置助力状态
+                        if (item.marketStatus === '已助力') {
+                            usBoostStatus.value = true
+                        } else {
+                            usBoostStatus.value = false
+                        }
+
+                        // 根据marketCount计算进度和剩余时间
+                        if (item.marketCount !== undefined) {
+                            const totalPeople = 1500 // 总人数1500人
+                            const currentCount = item.marketCount || 0 // 当前助力人数
+
+                            // 计算进度百分比 (0-100)
+                            const progressPercent = Math.min((currentCount / totalPeople) * 100, 100)
+
+                            // 根据进度计算剩余时间 (15分钟对应100%进度)
+                            const usedTime = (progressPercent / 100) * 15
+                            const remainingTime = Math.max(0, 15 - usedTime)
+
+                            usRemainingTime.value = Math.round(remainingTime)
+                            console.log(`美股助力人数: ${currentCount}/${totalPeople}, 进度: ${progressPercent.toFixed(1)}%, 剩余时间: ${remainingTime.toFixed(1)}分钟`)
+
+                            // 更新进度条高度
+                            nextTick(() => {
+                                updateProgressDisplay()
+                            })
+                        }
+                    }
+
+                    // 如果需要处理港股数据，可以添加类似的逻辑
+                    // if (item.market === "港股" && item.marketId === 5) { ... }
+                })
             }
         } else {
             console.error('获取活动失败:', response.message)
@@ -184,6 +212,8 @@ async function fetchActivity() {
         activityPeriod.value = '网络错误'
     }
 }
+
+
 const numberToChinese = (num) => {
     const chineseNumbers = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二', '十三', '十四', '十五']
     return chineseNumbers[num] || num.toString()
@@ -288,7 +318,7 @@ onMounted(() => {
         // 添加窗口大小改变监听
         window.addEventListener('resize', () => {
             nextTick(() => {
-                updateProgressBarHeight()
+              updateProgressBarHeight()
             })
         })
     })
@@ -306,17 +336,23 @@ onMounted(() => {
 const handleBoostClick = async (area) => {
     if (area === 'us' && !usBoostStatus.value) {
         try {
-            // 调用助力API
+            // 检查是否已获取到活动ID和市场ID
+            if (!activityId.value || !usMarketId.value) {
+                console.error('活动ID或市场ID未获取，请先获取活动数据')
+                return
+            }
+
+            // 调用助力API，使用动态获取的值
             const response = await addRecordAPI({
-                "activityId": 40,
-                "marketSign": 8
+                "activityId": activityId.value,
+                "marketSign": usMarketId.value
             });
 
             if (response.code === 200) {
                 console.log('美股助力成功：', response.message)
                 // 重新获取活动数据以更新按钮状态和进度
                 await fetchActivity()
-                console.log('美股已助力，剩余时间：', usRemainingTime.value)
+                console.log('美股已助力状态：', usBoostStatus.value, '剩余时间：', usRemainingTime.value)
             } else {
                 console.error('美股助力失败：', response.message)
             }
@@ -324,27 +360,7 @@ const handleBoostClick = async (area) => {
             console.error('美股助力请求失败：', error)
         }
     }
-    // else if (area === 'hk' && !hkBoostStatus.value) {
-    //     try {
-    //         // 调用助力API
-    //         const response = await addRecordAPI({
-    //             "activityId": 1,
-    //             "marketSign": 5
-    //         });
-
-    //         if (response.code === 200) {
-    //             hkBoostStatus.value = true
-    //             // 助力后减少1分钟时间
-    //             simulateTimeDecrease('hk')
-    //             console.log('港股助力成功：', response.message)
-    //             console.log('港股已助力，剩余时间：', hkRemainingTime.value)
-    //         } else {
-    //             console.error('港股助力失败：', response.message)
-    //         }
-    //     } catch (error) {
-    //         console.error('港股助力请求失败：', error)
-    //     }
-    // }
+    // ... existing code ...
 }
 
 const showRulesFunc = () => {
@@ -570,7 +586,7 @@ const hideRules = () => {
     position: absolute;
     z-index: 10;
     /* 位置调整到美股卡片右边，确保不覆盖 */
-    top: 50%;
+    top: 35%;
     /* 垂直居中 */
     left: calc(50% + 25vw);
     /* 美股卡片右边位置，增加间距 */
@@ -594,6 +610,30 @@ const hideRules = () => {
 /* 美股卡片背景 */
 .us-card {
     background-image: url('@/assets/img/zhongchou/美股.png');
+    position: relative;
+    /* 确保子元素可以相对于它进行绝对定位 */
+}
+
+/* 周年庆装饰元素 */
+.anniversary-decoration {
+    position: absolute;
+    right: -150px;
+    bottom: -90px;
+    width: 30vw;
+    /* 调整宽度 */
+    height: 30vh;
+    /* 调整高度 */
+    background-image: url('@/assets/img/zhongchou/周年庆装饰.png');
+    /* 图片名称中有空格 */
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    z-index: 100;
+    /* 确保浮现于最上层 */
+    animation: float 3s ease-in-out infinite;
+    /* 添加浮动动画 */
+    pointer-events: none;
+    /* 确保不会影响鼠标事件 */
 }
 
 /* 港股卡片背景 */
@@ -968,6 +1008,19 @@ const hideRules = () => {
 } */
 
 @media (max-width: 768px) {
+
+    /* 平板端周年庆装饰元素 */
+    .anniversary-decoration {
+        width: 40vw;
+        /* 调整手机版宽度 */
+        height: 40vh;
+        /* 调整手机版高度 */
+        right: -20px;
+        bottom: -100px;
+        background-image: url('@/assets/img/zhongchou/手机周年庆装饰.png');
+        /* 需要准备此图片资源 */
+    }
+
     .main-title img {
         max-height: 60px;
     }
@@ -1103,6 +1156,18 @@ const hideRules = () => {
         background-image: url('@/assets/img/zhongchou/手机组2.png');
     }
 
+    /* 手机端周年庆装饰元素 */
+    .anniversary-decoration {
+        width: 60vw;
+        /* 调整手机版宽度 */
+        height: 60vh;
+        /* 调整手机版高度 */
+        right: 5px;
+        bottom: -210px;
+        background-image: url('@/assets/img/zhongchou/手机周年庆装饰.png');
+        /* 需要准备此图片资源 */
+    }
+
     .activity-period {
         display: none;