增加助力活动完成显示助力完成及切换按钮图片

src/views/zhongchou/index.vue

@@ -41,14 +41,21 @@
 
                             <!-- 美股剩余时间显示 -->
                             <div class="stock-info" :class="{ 'time-almost-up': isTimeAlmostUp }">
-                                <h3>距{{ marketName }}实时数据</h3>
-                                <h3>还剩{{ numberToChinese(usDisplayTime) }}分钟</h3>
+                                <template v-if="!isCompleted">
+                                    <h3>距{{ marketName }}实时数据</h3>
+                                    <h3>还剩{{ numberToChinese(usDisplayTime) }}分钟</h3>
+                                </template>
+                                <template v-else>
+                                    <h3>{{ marketName }}实时数据</h3>
+                                    <h3> 助力成功！</h3>
+                                </template>
                             </div>
                         </div>
                     </div>
                     <!-- 美股助力按钮和底座 -->
                     <div class="boost-section">
-                        <div class="boost-btn us-boost-btn" :class="{ 'boosted': usBoostStatus }"
+                        <div class="boost-btn us-boost-btn"
+                            :class="{ 'boosted': usBoostStatus && !isCompleted, 'completed': isCompleted }"
                             @click.stop="handleBoostClick('us')"></div>
                         <div class="base-image">
                             <img src="@/assets/img/zhongchou/底座.png" alt="底座" />
@@ -132,7 +139,7 @@
 <script setup>
 import { addRecordAPI, getActivity1API } from '../../api/zhongchouApi'
 import { ref, computed, onMounted, nextTick, watch } from 'vue'
-
+const isCompleted = ref(false) // 标记是否已达到总人数1500
 // 活动时间显示
 const activityPeriod = ref('加载中...')
 // 添加响应式变量存储活动ID和市场ID
@@ -192,20 +199,30 @@ async function fetchActivity() {
                     const totalPeople = 1500 // 总人数1500人
                     const currentCount = item.marketCount || 0 // 当前助力人数
 
-                    // 计算进度百分比 (0-100)
-                    const progressPercent = Math.min((currentCount / totalPeople) * 100, 100)
+                    // 判断是否已达到总人数
+                    if (currentCount >= totalPeople) {
+                        isCompleted.value = true // 设置完成状态
+                        usRemainingTime.value = 0 // 设置剩余时间为0
+                    } else {
+                        isCompleted.value = false
+
+                        // 计算进度百分比 (0-100)
+                        const progressPercent = Math.min((currentCount / totalPeople) * 100, 100)
 
-                    // 根据进度计算剩余时间 (15分钟对应100%进度)
-                    const usedTime = (progressPercent / 100) * 15
-                    const remainingTime = Math.max(0, 15 - usedTime)
+                        // 根据进度计算剩余时间 (15分钟对应100%进度)
+                        const usedTime = (progressPercent / 100) * 15
+                        const remainingTime = Math.max(0, 15 - usedTime)
 
-                    usRemainingTime.value = Math.round(remainingTime)
-                    console.log(`${marketName.value}助力人数: ${currentCount}/${totalPeople}, 进度: ${progressPercent.toFixed(1)}%, 剩余时间: ${remainingTime.toFixed(1)}分钟`)
+                        usRemainingTime.value = Math.round(remainingTime)
+                    }
+
+                    console.log(`${marketName.value}助力人数: ${currentCount}/${totalPeople}, 进度: ${currentCount >= totalPeople ? '100' : progressPercent.toFixed(1)}%, 剩余时间: ${usRemainingTime.value}分钟, 完成状态: ${isCompleted.value}`)
 
                     // 更新进度条高度
                     nextTick(() => {
                         updateProgressDisplay()
                     })
+
                 }
             }
         } else {
@@ -359,11 +376,16 @@ onMounted(() => {
 // }
 
 const handleBoostClick = async (area) => {
+     // 如果已完成（达到1500人），则不执行任何操作
+    if (isCompleted.value) {
+        return;
+    }
     if (area === 'us' && !usBoostStatus.value) {
         try {
             // 检查是否已获取到活动ID和市场ID
             if (!activityId.value || !usMarketId.value) {
                 console.error('活动ID或市场ID未获取，请先获取活动数据')
+                await fetchActivity()
                 return
             }
 
@@ -382,15 +404,15 @@ const handleBoostClick = async (area) => {
                 setTimeout(() => {
                     showBoostSuccess.value = false
                 }, 1000)
-
-                // 重新获取活动数据以更新按钮状态和进度
-                await fetchActivity()
-                console.log(`${marketName.value}已助力状态：`, usBoostStatus.value, '剩余时间：', usRemainingTime.value)
             } else {
                 console.error(`${marketName.value}助力失败：`, response.message)
             }
         } catch (error) {
             console.error(`${marketName.value}助力请求失败：`, error)
+        } finally {
+            // 无论成功失败都重新获取活动数据以更新按钮状态和进度
+            await fetchActivity()
+            console.log(`${marketName.value}已助力状态：`, usBoostStatus.value, '剩余时间：', usRemainingTime.value)
         }
     }
 }
@@ -832,6 +854,23 @@ const hideRules = () => {
     background-image: url('@/assets/img/zhongchou/美股已助力.png');
 }
 
+/* 助力完成状态 - 当达到1500人时使用 */
+.us-boost-btn.completed {
+    background-image: url('@/assets/img/zhongchou/港股已助力.png');
+    cursor: not-allowed;
+    /* 禁用鼠标指针 */
+    pointer-events: none;
+    /* 完全禁用鼠标事件 */
+}
+/* 修改悬浮效果，排除完成状态的按钮 */
+.boost-btn:not(.completed):hover {
+    background-size: 110%;
+}
+
+/* 移除原有的通用悬浮效果 */
+.boost-btn:hover {
+    /* 移除此样式或注释掉 */
+}
 /* 港股助力按钮 */
 /* .hk-boost-btn {
     background-image: url('@/assets/img/zhongchou/助力港股.png');
@@ -1274,17 +1313,21 @@ const hideRules = () => {
 
 .rules-list {
     width: 100%;
-    line-height: 1.6; /* 增加行高 */
+    line-height: 1.6;
+    /* 增加行高 */
     margin-top: 10%;
-    margin-left: 10%; /* 减少左边距 */
-    padding-right: 5%; /* 添加右边距 */
+    margin-left: 10%;
+    /* 减少左边距 */
+    padding-right: 5%;
+    /* 添加右边距 */
 }
 
 .rules-list p {
     margin: 10px 0;
     font-size: 16px;
     color: #fff;
-    font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif; /* 使用更清晰的中文字体 */
+    font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
+    /* 使用更清晰的中文字体 */
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
     line-height: 1.7;
 }