diff --git a/.vercel/project.json b/.vercel/project.json index e5b3cec..61bf4ee 100644 --- a/.vercel/project.json +++ b/.vercel/project.json @@ -1 +1,5 @@ -{"projectName":"trae_8qnxf0if"} \ No newline at end of file +<<<<<<< HEAD +{"projectName":"trae_8qnxf0if"} +======= +{"projectName":"trae_zf0uu3bt"} +>>>>>>> milestone-20250723-众筹 diff --git a/src/api/zhongchouApi.js b/src/api/zhongchouApi.js new file mode 100644 index 0000000..b618c8f --- /dev/null +++ b/src/api/zhongchouApi.js @@ -0,0 +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; + +export function addRecordAPI(data) { + return request({ + url: `Api/api/funding/addRecord`, + method: 'post', + data: data + }) +} +// 新增：获取活动信息接口 +export function getActivity1API() { + return request({ + url: `Api/api/funding/getActivity`, + method: 'post' + }) +} \ No newline at end of file diff --git a/src/assets/img/zhongchou/bg.png b/src/assets/img/zhongchou/bg.png new file mode 100644 index 0000000..3e4f021 Binary files /dev/null and b/src/assets/img/zhongchou/bg.png differ diff --git a/src/assets/img/zhongchou/blueBg.png b/src/assets/img/zhongchou/blueBg.png new file mode 100644 index 0000000..fdebdbc Binary files /dev/null and b/src/assets/img/zhongchou/blueBg.png differ diff --git a/src/assets/img/zhongchou/redBg.png b/src/assets/img/zhongchou/redBg.png new file mode 100644 index 0000000..c72d6d6 Binary files /dev/null and b/src/assets/img/zhongchou/redBg.png differ diff --git a/src/assets/img/zhongchou/rocket.gif b/src/assets/img/zhongchou/rocket.gif new file mode 100644 index 0000000..d684c9c Binary files /dev/null and b/src/assets/img/zhongchou/rocket.gif differ diff --git a/src/assets/img/zhongchou/助力港股.png b/src/assets/img/zhongchou/助力港股.png new file mode 100644 index 0000000..1e35422 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..b7448e7 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..e5394c6 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..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..06a6b9c 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..83b0b06 Binary files /dev/null and b/src/assets/img/zhongchou/底座.png differ diff --git a/src/assets/img/zhongchou/手机bg.png b/src/assets/img/zhongchou/手机bg.png new file mode 100644 index 0000000..1b007fb Binary files /dev/null and b/src/assets/img/zhongchou/手机bg.png differ diff --git a/src/assets/img/zhongchou/手机助力美股享实时数据.png b/src/assets/img/zhongchou/手机助力美股享实时数据.png new file mode 100644 index 0000000..634c0bd 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/assets/img/zhongchou/手机矩形.png b/src/assets/img/zhongchou/手机矩形.png new file mode 100644 index 0000000..5643fce Binary files /dev/null and b/src/assets/img/zhongchou/手机矩形.png differ diff --git a/src/assets/img/zhongchou/手机组2.png b/src/assets/img/zhongchou/手机组2.png new file mode 100644 index 0000000..25bc438 Binary files /dev/null and b/src/assets/img/zhongchou/手机组2.png differ diff --git a/src/assets/img/zhongchou/时间边框.png b/src/assets/img/zhongchou/时间边框.png new file mode 100644 index 0000000..1d76c2c 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..9fa8501 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..21fba5c 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..923dc5f 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..26d9a23 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..fbc4fd2 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..1723813 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..e65b36a 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..591eec2 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..0c31526 Binary files /dev/null and b/src/assets/img/zhongchou/美股已助力.png differ diff --git a/src/router/index.js b/src/router/index.js index 4e4d0d7..5e79637 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -20,7 +20,7 @@ const routes = [ }, { path: '/zhongchou', - name: 'zhongchou', + name: 'zhongchou', component: () => import('../views/zhongchou/index.vue'), }, { diff --git a/src/style.css b/src/style.css index cf72944..e9cfccb 100644 --- a/src/style.css +++ b/src/style.css @@ -3,7 +3,7 @@ body { margin: 0; display: flex; - /* place-items: center; */ + place-items: center; min-width: 320px; min-height: 100vh; } diff --git a/src/utils/request.js b/src/utils/request.js index 1a3e42e..751111e 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -102,28 +102,13 @@ service.interceptors.request.use( } ) -// Response interceptors +// 响应拦截器（简化版） service.interceptors.response.use( - async (response) => { - // await new Promise(resovle => setTimeout(resovle, 3000)); - // if (response.config.loadingInstance) { - // response.config.loadingInstance.close(); - // } - const res = response.data - if (res.code !== 200) { - const errorMsg = res.msg || 'Unkonw error' - // ElMessage.error(errorMsg) - // return Promise.reject(new Error(res.msg || 'Error')) - return response.data - } else { - return response.data - } - }, - (error) => { - const errorMessage = setErrorMsg(error) - ElMessage.error(errorMessage) - return Promise.reject(error) - } + response => response.data, + error => { + ElMessage.error(error.message || '请求错误') + return Promise.reject(error) + } ) -export default service +export default service \ No newline at end of file diff --git a/src/views/zhongchou/index.vue b/src/views/zhongchou/index.vue index e5ca077..dd2b5a9 100644 --- a/src/views/zhongchou/index.vue +++ b/src/views/zhongchou/index.vue @@ -1,15 +1,1265 @@ - +// 活动时间显示 +const activityPeriod = ref('加载中...') +// 添加响应式变量存储活动ID和市场ID +const activityId = ref(null) +const usMarketId = ref(null) +// 格式化日期函数 +const formatDate = (dateString) => { + if (!dateString) return '' + const date = new Date(dateString) + const year = date.getFullYear() + const month = String(date.getMonth() + 1).padStart(2, '0') + const day = String(date.getDate()).padStart(2, '0') + return `${year}/${month}/${day}` +} + +// 在组件中使用 +async function fetchActivity() { + try { + const response = await getActivity1API() + if (response.code === 200) { + console.log('活动数据:', 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) + activityPeriod.value = `${formattedStartTime}~${formattedEndTime}` + } else { + activityPeriod.value = '时间待定' + } + + // 处理市场数据 + 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) + activityPeriod.value = '获取失败' + } + } catch (error) { + console.error('请求错误:', error) + activityPeriod.value = '网络错误' + } +} + + +const numberToChinese = (num) => { + const chineseNumbers = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二', '十三', '十四', '十五'] + return chineseNumbers[num] || num.toString() +} +// 进度条高度动态获取 +const progressBarRef = ref(null) +const progressBarHeight = ref(0) + +// 更新进度条高度的函数 +const updateProgressBarHeight = () => { + if (progressBarRef.value) { + progressBarHeight.value = progressBarRef.value.offsetHeight + } +} + +// 时间刻度标记 - 从小到大排列（0在顶部，15在底部） +const timeMarkers = computed(() => { + return [0, 3, 6, 9, 12, 15] +}) + +// 获取进度条高度百分比 - 配合刻度逻辑 +const getProgressHeight = (remainingMinutes, totalMinutes = 15) => { + // 剩余时间越少，进度条越满（从底部向上填充） + // remainingMinutes = totalMinutes 时，返回 0%（空的，刚开始） + // remainingMinutes = 0 时，返回 100%（满的，时间用完） + const usedMinutes = totalMinutes - remainingMinutes + return Math.max((usedMinutes / totalMinutes) * 100, 0) +} + +// 添加活动规则弹窗状态 +const showRules = ref(false) + +// 原有的组件状态 +const activeArea = ref(null) +const usBoostStatus = ref(false) +// const hkBoostStatus = ref(false) +const showRulesModal = ref(false) + +// 剩余时间数据 - 从接口获取marketTwoCount计算 +const usRemainingTime = ref(15) // 美股剩余分钟，初始值15分钟 +// const hkRemainingTime = ref(6) // 港股剩余分钟 +const usTotalTime = ref(15) // 美股总时间15分钟 +// const hkTotalTime = ref(15) // 港股总时间15分钟 + +// 计算属性：根据剩余时间计算进度条高度 +const usProgressHeight = computed(() => { + return getProgressHeight(usRemainingTime.value, usTotalTime.value) +}) + +// const hkProgressHeight = computed(() => { +// return getProgressHeight(hkRemainingTime.value, hkTotalTime.value) +// }) + +// 计算属性：显示的剩余时间 +const usDisplayTime = computed(() => { + return Math.max(0, usRemainingTime.value) +}) + +// const hkDisplayTime = computed(() => { +// return Math.max(0, hkRemainingTime.value) +// }) + +// 计算已使用时间用于刻度显示 +const usUsedTime = computed(() => { + return usTotalTime.value - usRemainingTime.value +}) + +// const hkUsedTime = computed(() => { +// return hkTotalTime.value - hkRemainingTime.value +// }) + +// 监听剩余时间变化，更新进度条 +watch([usRemainingTime], () => { + nextTick(() => { + updateProgressDisplay() + }) +}) + +// 更新进度条显示 +const updateProgressDisplay = () => { + // 更新美股进度条 + const usFill = document.querySelector('.us-content .progress-fill') + if (usFill) { + usFill.style.height = `${usProgressHeight.value}%` + } + + // 更新港股进度条 + // const hkFill = document.querySelector('.hk-content .progress-fill') + // if (hkFill) { + // hkFill.style.height = `${hkProgressHeight.value}%` + // } +} + +// 组件挂载时初始化 +onMounted(() => { + nextTick(() => { + // 页面加载时自动获取活动数据 + fetchActivity() + updateProgressBarHeight() + updateProgressDisplay() + // 添加窗口大小改变监听 + window.addEventListener('resize', () => { + nextTick(() => { + updateProgressBarHeight() + }) + }) + }) +}) + + +// const handleAreaClick = (area) => { +// if (activeArea.value === area) { +// activeArea.value = null +// } else { +// activeArea.value = area +// } +// } + +const handleBoostClick = async (area) => { + if (area === 'us' && !usBoostStatus.value) { + try { + // 检查是否已获取到活动ID和市场ID + if (!activityId.value || !usMarketId.value) { + console.error('活动ID或市场ID未获取，请先获取活动数据') + return + } + + // 调用助力API，使用动态获取的值 + const response = await addRecordAPI({ + "activityId": activityId.value, + "marketSign": usMarketId.value + }); + + if (response.code === 200) { + console.log('美股助力成功：', response.message) + // 重新获取活动数据以更新按钮状态和进度 + await fetchActivity() + console.log('美股已助力状态：', usBoostStatus.value, '剩余时间：', usRemainingTime.value) + } else { + console.error('美股助力失败：', response.message) + } + } catch (error) { + console.error('美股助力请求失败：', error) + } + } + // ... existing code ... +} + +const showRulesFunc = () => { + showRulesModal.value = true +} + +const hideRules = () => { + showRulesModal.value = false +} + \ No newline at end of file +.close-btn:hover { + transform: scale(1.05); +} + diff --git a/vite.config.js b/vite.config.js index 6763e91..94c13b8 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,5 +1,6 @@ import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' +import path from 'path' // https://vite.dev/config/ // export default defineConfig({