|
|
@ -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 |
|
|
@ -168,15 +175,15 @@ async function fetchActivity() { |
|
|
|
} else { |
|
|
|
activityPeriod.value = '时间待定' |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 处理市场数据 |
|
|
|
if (data && data.length > 1) { // 确保至少有两个元素 |
|
|
|
// 使用数组中的第二个元素(索引为1) |
|
|
|
const item = data[0] // 使用第二个数据 |
|
|
|
|
|
|
|
|
|
|
|
// 存储市场ID |
|
|
|
usMarketId.value = item.marketId |
|
|
|
|
|
|
|
|
|
|
|
// 存储市场名称 |
|
|
|
marketName.value = item.market |
|
|
|
|
|
|
@ -192,25 +199,33 @@ 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 |
|
|
|
|
|
|
|
// 根据进度计算剩余时间 (15分钟对应100%进度) |
|
|
|
const usedTime = (progressPercent / 100) * 15 |
|
|
|
const remainingTime = Math.max(0, 15 - usedTime) |
|
|
|
// 计算剩余时间 - 初始15分钟,每满100人减少1分钟 |
|
|
|
const initialTime = 15 // 初始时间15分钟 |
|
|
|
const hundredsCount = Math.floor(currentCount / 100) // 计算满100的次数 |
|
|
|
const remainingTime = Math.max(0, initialTime - hundredsCount) // 每满100人减少1分钟 |
|
|
|
|
|
|
|
usRemainingTime.value = remainingTime |
|
|
|
} |
|
|
|
|
|
|
|
usRemainingTime.value = Math.round(remainingTime) |
|
|
|
console.log(`${marketName.value}助力人数: ${currentCount}/${totalPeople}, 进度: ${progressPercent.toFixed(1)}%, 剩余时间: ${remainingTime.toFixed(1)}分钟`) |
|
|
|
// console.log(`${marketName.value}助力人数: ${currentCount}/${totalPeople}, 进度: ${currentCount >= totalPeople ? '100' : progressPercent.toFixed(1)}%, 剩余时间: ${usRemainingTime.value}分钟, 完成状态: ${isCompleted.value}`) |
|
|
|
|
|
|
|
// 更新进度条高度 |
|
|
|
nextTick(() => { |
|
|
|
updateProgressDisplay() |
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} else { |
|
|
|
console.error('获取活动失败:', response.message) |
|
|
|
activityPeriod.value = '获取失败' |
|
|
|
activityPeriod.value = response.message |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.error('请求错误:', error) |
|
|
@ -259,7 +274,7 @@ const showRulesModal = ref(false) |
|
|
|
// 添加助力成功提示状态 |
|
|
|
const showBoostSuccess = ref(false) |
|
|
|
// 剩余时间数据 - 从接口获取marketTwoCount计算 |
|
|
|
const marketName = ref('美股') // 默认值为美股,将由API返回的数据更新 |
|
|
|
const marketName = ref() // 默认值为美股,将由API返回的数据更新 |
|
|
|
const usRemainingTime = ref(15) // 美股剩余分钟,初始值15分钟 |
|
|
|
// const hkRemainingTime = ref(6) // 港股剩余分钟 |
|
|
|
const usTotalTime = ref(15) // 美股总时间15分钟 |
|
|
@ -359,11 +374,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 +402,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 +852,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 +1311,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; |
|
|
|
} |
|
|
|