diff --git a/src/api/API.js b/src/api/API.js index 42e6bc5..d9632d6 100644 --- a/src/api/API.js +++ b/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' - }) -} \ No newline at end of file +// 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' +// }) +// } \ No newline at end of file diff --git a/src/assets/img/zhongchou/周年庆装饰.png b/src/assets/img/zhongchou/周年庆装饰.png new file mode 100644 index 0000000..3badd3b Binary files /dev/null and b/src/assets/img/zhongchou/周年庆装饰.png differ diff --git a/src/assets/img/zhongchou/手机周年庆装饰.png b/src/assets/img/zhongchou/手机周年庆装饰.png new file mode 100644 index 0000000..b84010c Binary files /dev/null and b/src/assets/img/zhongchou/手机周年庆装饰.png differ diff --git a/src/views/zhongchou/index.vue b/src/views/zhongchou/index.vue index 8992c18..311fa33 100644 --- a/src/views/zhongchou/index.vue +++ b/src/views/zhongchou/index.vue @@ -22,6 +22,8 @@
+ +
@@ -107,7 +109,7 @@
-

1. 活动时间为2025年7月26日-2025年8月5日。

+

1. 活动时间为{{ activityPeriod }}。

2. 每人每天每个活动可以参与一次。

3. 初始时间为15分钟，每一百人参与助力，即可扣减一分钟！

4. 助力成功后，对应股票市场将开放实时数据！

@@ -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;