598 lines
15 KiB
Vue
598 lines
15 KiB
Vue
<template>
|
||
<view class="event-schedule-page">
|
||
<!-- 日期选择器 -->
|
||
<view class="date-tabs">
|
||
<view
|
||
class="date-tab"
|
||
v-for="(date, index) in dates"
|
||
:key="index"
|
||
:class="{ active: currentDate === index }"
|
||
@click="currentDate = index"
|
||
>
|
||
<view class="date-day">{{ date.day }}</view>
|
||
<view class="date-text">{{ date.text }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 日程时间线 -->
|
||
<view class="schedule-timeline">
|
||
<view class="timeline-item" v-for="(item, index) in currentSchedule" :key="index">
|
||
<view class="time-dot"></view>
|
||
<view class="time-line" v-if="index < currentSchedule.length - 1"></view>
|
||
<view class="schedule-card">
|
||
<view class="schedule-time">{{ item.time }}</view>
|
||
<view class="schedule-title">{{ item.title }}</view>
|
||
<view class="schedule-location" v-if="item.location">
|
||
<text class="location-icon">📍</text>
|
||
<text>{{ item.location }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import infoAPI from '@/api/info.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
eventId: '',
|
||
currentDate: 0,
|
||
dates: [],
|
||
schedules: {}
|
||
};
|
||
},
|
||
computed: {
|
||
currentSchedule() {
|
||
return this.schedules[this.currentDate] || [];
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if (options.eventId) {
|
||
this.eventId = options.eventId
|
||
this.loadScheduleDates(options.eventId)
|
||
}
|
||
},
|
||
watch: {
|
||
currentDate(newVal) {
|
||
if (this.dates[newVal] && this.dates[newVal].date) {
|
||
this.loadScheduleByDate(this.eventId, this.dates[newVal].date)
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
/**
|
||
* 加载日程日期列表
|
||
*/
|
||
async loadScheduleDates(eventId) {
|
||
try {
|
||
const res = await infoAPI.getActivityScheduleList({ competitionId: eventId })
|
||
|
||
let list = []
|
||
if (res.records) {
|
||
list = res.records
|
||
} else if (Array.isArray(res)) {
|
||
list = res
|
||
}
|
||
|
||
// 如果后端没有数据，使用模拟数据
|
||
if (list.length === 0) {
|
||
list = this.getMockScheduleData()
|
||
}
|
||
|
||
// 提取唯一日期
|
||
const dateSet = new Set()
|
||
list.forEach(item => {
|
||
const date = item.scheduleDate || item.schedule_date || item.date
|
||
if (date) {
|
||
dateSet.add(date)
|
||
}
|
||
})
|
||
|
||
// 格式化日期选项卡并排序
|
||
this.dates = Array.from(dateSet)
|
||
.sort((a, b) => new Date(a) - new Date(b)) // 按日期升序排序
|
||
.map(date => {
|
||
const d = new Date(date)
|
||
const month = d.getMonth() + 1
|
||
const day = d.getDate()
|
||
const weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][d.getDay()]
|
||
|
||
return {
|
||
date: date,
|
||
day: `${month}月${day}日`,
|
||
text: weekDay
|
||
}
|
||
})
|
||
|
||
// 按日期分组日程
|
||
list.forEach(item => {
|
||
const date = item.scheduleDate || item.schedule_date || item.date
|
||
const dateIndex = this.dates.findIndex(d => d.date === date)
|
||
|
||
if (dateIndex >= 0) {
|
||
if (!this.schedules[dateIndex]) {
|
||
this.schedules[dateIndex] = []
|
||
}
|
||
|
||
this.schedules[dateIndex].push({
|
||
time: this.formatTime(item.scheduleTime || item.schedule_time || item.time),
|
||
timeRaw: item.scheduleTime || item.schedule_time || item.time, // 保存原始时间用于排序
|
||
title: item.eventName || item.event_name || item.title || item.activityName || item.scheduleName,
|
||
location: item.venue || item.location || ''
|
||
})
|
||
}
|
||
})
|
||
|
||
// 对每个日期内的日程按时间排序
|
||
Object.keys(this.schedules).forEach(dateIndex => {
|
||
this.schedules[dateIndex].sort((a, b) => {
|
||
const timeA = a.timeRaw || a.time
|
||
const timeB = b.timeRaw || b.time
|
||
return timeA.localeCompare(timeB)
|
||
})
|
||
})
|
||
|
||
// 加载第一天的日程
|
||
if (this.dates.length > 0 && this.dates[0].date) {
|
||
this.loadScheduleByDate(eventId, this.dates[0].date)
|
||
}
|
||
} catch (err) {
|
||
console.error('加载日程日期失败:', err)
|
||
// 加载失败时使用模拟数据
|
||
const list = this.getMockScheduleData()
|
||
|
||
// 提取唯一日期
|
||
const dateSet = new Set()
|
||
list.forEach(item => {
|
||
if (item.scheduleDate) {
|
||
dateSet.add(item.scheduleDate)
|
||
}
|
||
})
|
||
|
||
// 格式化日期选项卡并排序
|
||
this.dates = Array.from(dateSet)
|
||
.sort((a, b) => new Date(a) - new Date(b)) // 按日期升序排序
|
||
.map(date => {
|
||
const d = new Date(date)
|
||
const month = d.getMonth() + 1
|
||
const day = d.getDate()
|
||
const weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][d.getDay()]
|
||
|
||
return {
|
||
date: date,
|
||
day: `${month}月${day}日`,
|
||
text: weekDay
|
||
}
|
||
})
|
||
|
||
// 按日期分组日程
|
||
list.forEach(item => {
|
||
const dateIndex = this.dates.findIndex(d => d.date === item.scheduleDate)
|
||
|
||
if (dateIndex >= 0) {
|
||
if (!this.schedules[dateIndex]) {
|
||
this.schedules[dateIndex] = []
|
||
}
|
||
|
||
this.schedules[dateIndex].push({
|
||
time: this.formatTime(item.scheduleTime),
|
||
timeRaw: item.scheduleTime, // 保存原始时间用于排序
|
||
title: item.eventName,
|
||
location: item.venue || ''
|
||
})
|
||
}
|
||
})
|
||
|
||
// 对每个日期内的日程按时间排序
|
||
Object.keys(this.schedules).forEach(dateIndex => {
|
||
this.schedules[dateIndex].sort((a, b) => {
|
||
const timeA = a.timeRaw || a.time
|
||
const timeB = b.timeRaw || b.time
|
||
return timeA.localeCompare(timeB)
|
||
})
|
||
})
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 加载指定日期的日程
|
||
*/
|
||
async loadScheduleByDate(eventId, date) {
|
||
try {
|
||
const res = await infoAPI.getScheduleList({ competitionId: eventId, date: date })
|
||
|
||
let list = []
|
||
if (res.records) {
|
||
list = res.records
|
||
} else if (Array.isArray(res)) {
|
||
list = res
|
||
}
|
||
|
||
const dateIndex = this.dates.findIndex(d => d.date === date)
|
||
if (dateIndex >= 0) {
|
||
this.schedules[dateIndex] = list
|
||
.map(item => ({
|
||
time: this.formatTime(item.scheduleTime || item.schedule_time || item.time),
|
||
timeRaw: item.scheduleTime || item.schedule_time || item.time,
|
||
title: item.eventName || item.event_name || item.title || item.activityName || item.scheduleName,
|
||
location: item.venue || item.location || ''
|
||
}))
|
||
.sort((a, b) => {
|
||
const timeA = a.timeRaw || a.time
|
||
const timeB = b.timeRaw || b.time
|
||
return timeA.localeCompare(timeB)
|
||
})
|
||
|
||
// 触发视图更新
|
||
this.$forceUpdate()
|
||
}
|
||
} catch (err) {
|
||
console.error('加载日程详情失败:', err)
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 格式化时间（只取时分）
|
||
*/
|
||
formatTime(timeStr) {
|
||
if (!timeStr) return ''
|
||
|
||
// 如果已经是 HH:MM 格式
|
||
if (/^\d{2}:\d{2}$/.test(timeStr)) {
|
||
return timeStr
|
||
}
|
||
|
||
// 如果是 HH:MM:SS 格式，直接截取前5位
|
||
if (/^\d{2}:\d{2}:\d{2}$/.test(timeStr)) {
|
||
return timeStr.substring(0, 5)
|
||
}
|
||
|
||
// 尝试解析完整的日期时间字符串
|
||
const date = new Date(timeStr)
|
||
if (!isNaN(date.getTime())) {
|
||
const hours = String(date.getHours()).padStart(2, '0')
|
||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||
return `${hours}:${minutes}`
|
||
}
|
||
|
||
// 如果无法解析，返回原字符串
|
||
return timeStr
|
||
},
|
||
|
||
/**
|
||
* 获取模拟日程数据
|
||
*/
|
||
getMockScheduleData() {
|
||
return [
|
||
// 第一天：2025-12-25 (报到日)
|
||
{
|
||
id: 2001,
|
||
competitionId: 200,
|
||
scheduleDate: '2025-12-25',
|
||
scheduleTime: '08:00',
|
||
eventName: '运动员报到',
|
||
venue: '赛事组委会接待处',
|
||
status: 1
|
||
},
|
||
{
|
||
id: 2002,
|
||
competitionId: 200,
|
||
scheduleDate: '2025-12-25',
|
||
scheduleTime: '09:00',
|
||
eventName: '领取参赛证件及装备',
|
||
venue: '赛事组委会接待处',
|
||
status: 1
|
||
},
|
||
{
|
||
id: 2003,
|
||
competitionId: 200,
|
||
scheduleDate: '2025-12-25',
|
||
scheduleTime: '10:00',
|
||
eventName: '赛前技术会议',
|
||
venue: '会议室A',
|
||
status: 1
|
||
},
|
||
{
|
||
id: 2004,
|
||
competitionId: 200,
|
||
scheduleDate: '2025-12-25',
|
||
scheduleTime: '14:00',
|
||
eventName: '场地开放训练',
|
||
venue: '主赛场',
|
||
status: 1
|
||
},
|
||
{
|
||
id: 2005,
|
||
competitionId: 200,
|
||
scheduleDate: '2025-12-25',
|
||
scheduleTime: '16:00',
|
||
eventName: '裁判员培训会',
|
||
venue: '会议室B',
|
||
status: 1
|
||
},
|
||
{
|
||
id: 2006,
|
||
competitionId: 200,
|
||
scheduleDate: '2025-12-25',
|
||
scheduleTime: '18:00',
|
||
eventName: '开幕式彩排',
|
||
venue: '主赛场',
|
||
status: 1
|
||
},
|
||
// 第二天：2025-12-26 (正式比赛第一天)
|
||
{
|
||
id: 2007,
|
||
competitionId: 200,
|
||
scheduleDate: '2025-12-26',
|
||
scheduleTime: '07:30',
|
||
eventName: '运动员检录',
|
||
venue: '检录处',
|
||
status: 1
|
||
},
|
||
{
|
||
id: 2008,
|
||
competitionId: 200,
|
||
scheduleDate: '2025-12-26',
|
||
scheduleTime: '08:30',
|
||
eventName: '开幕式',
|
||
venue: '主赛场',
|
||
status: 1
|
||
},
|
||
{
|
||
id: 2009,
|
||
competitionId: 200,
|
||
scheduleDate: '2025-12-26',
|
||
scheduleTime: '09:00',
|
||
eventName: '男子长拳预赛',
|
||
venue: '主赛场',
|
||
status: 1
|
||
},
|
||
{
|
||
id: 2010,
|
||
competitionId: 200,
|
||
scheduleDate: '2025-12-26',
|
||
scheduleTime: '10:30',
|
||
eventName: '女子长拳预赛',
|
||
venue: '主赛场',
|
||
status: 1
|
||
},
|
||
{
|
||
id: 2011,
|
||
competitionId: 200,
|
||
scheduleDate: '2025-12-26',
|
||
scheduleTime: '12:00',
|
||
eventName: '午休',
|
||
venue: '',
|
||
status: 1
|
||
},
|
||
{
|
||
id: 2012,
|
||
competitionId: 200,
|
||
scheduleDate: '2025-12-26',
|
||
scheduleTime: '14:00',
|
||
eventName: '男子太极拳预赛',
|
||
venue: '主赛场',
|
||
status: 1
|
||
},
|
||
{
|
||
id: 2013,
|
||
competitionId: 200,
|
||
scheduleDate: '2025-12-26',
|
||
scheduleTime: '15:30',
|
||
eventName: '女子太极拳预赛',
|
||
venue: '主赛场',
|
||
status: 1
|
||
},
|
||
{
|
||
id: 2014,
|
||
competitionId: 200,
|
||
scheduleDate: '2025-12-26',
|
||
scheduleTime: '17:00',
|
||
eventName: '当日赛事总结会',
|
||
venue: '会议室A',
|
||
status: 1
|
||
},
|
||
// 第三天：2025-12-27 (正式比赛第二天 - 决赛日)
|
||
{
|
||
id: 2015,
|
||
competitionId: 200,
|
||
scheduleDate: '2025-12-27',
|
||
scheduleTime: '07:30',
|
||
eventName: '运动员检录',
|
||
venue: '检录处',
|
||
status: 1
|
||
},
|
||
{
|
||
id: 2016,
|
||
competitionId: 200,
|
||
scheduleDate: '2025-12-27',
|
||
scheduleTime: '08:30',
|
||
eventName: '男子长拳半决赛',
|
||
venue: '主赛场',
|
||
status: 1
|
||
},
|
||
{
|
||
id: 2017,
|
||
competitionId: 200,
|
||
scheduleDate: '2025-12-27',
|
||
scheduleTime: '10:00',
|
||
eventName: '女子长拳半决赛',
|
||
venue: '主赛场',
|
||
status: 1
|
||
},
|
||
{
|
||
id: 2018,
|
||
competitionId: 200,
|
||
scheduleDate: '2025-12-27',
|
||
scheduleTime: '12:00',
|
||
eventName: '午休',
|
||
venue: '',
|
||
status: 1
|
||
},
|
||
{
|
||
id: 2019,
|
||
competitionId: 200,
|
||
scheduleDate: '2025-12-27',
|
||
scheduleTime: '14:00',
|
||
eventName: '男子长拳决赛',
|
||
venue: '主赛场',
|
||
status: 1
|
||
},
|
||
{
|
||
id: 2020,
|
||
competitionId: 200,
|
||
scheduleDate: '2025-12-27',
|
||
scheduleTime: '15:00',
|
||
eventName: '女子长拳决赛',
|
||
venue: '主赛场',
|
||
status: 1
|
||
},
|
||
{
|
||
id: 2021,
|
||
competitionId: 200,
|
||
scheduleDate: '2025-12-27',
|
||
scheduleTime: '16:00',
|
||
eventName: '男子太极拳决赛',
|
||
venue: '主赛场',
|
||
status: 1
|
||
},
|
||
{
|
||
id: 2022,
|
||
competitionId: 200,
|
||
scheduleDate: '2025-12-27',
|
||
scheduleTime: '17:00',
|
||
eventName: '女子太极拳决赛',
|
||
venue: '主赛场',
|
||
status: 1
|
||
},
|
||
{
|
||
id: 2023,
|
||
competitionId: 200,
|
||
scheduleDate: '2025-12-27',
|
||
scheduleTime: '18:00',
|
||
eventName: '颁奖典礼',
|
||
venue: '主赛场',
|
||
status: 1
|
||
},
|
||
{
|
||
id: 2024,
|
||
competitionId: 200,
|
||
scheduleDate: '2025-12-27',
|
||
scheduleTime: '19:00',
|
||
eventName: '闭幕式',
|
||
venue: '主赛场',
|
||
status: 1
|
||
}
|
||
]
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.event-schedule-page {
|
||
min-height: 100vh;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.date-tabs {
|
||
background-color: #fff;
|
||
display: flex;
|
||
padding: 20rpx 30rpx;
|
||
gap: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.date-tab {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 20rpx;
|
||
border-radius: 12rpx;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.date-tab.active {
|
||
background-color: #C93639;
|
||
color: #fff;
|
||
}
|
||
|
||
.date-day {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
margin-bottom: 5rpx;
|
||
}
|
||
|
||
.date-text {
|
||
font-size: 24rpx;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.schedule-timeline {
|
||
padding: 20rpx 30rpx;
|
||
}
|
||
|
||
.timeline-item {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
position: relative;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.time-dot {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
background-color: #C93639;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
margin-top: 10rpx;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.time-line {
|
||
position: absolute;
|
||
left: 11rpx;
|
||
top: 34rpx;
|
||
bottom: -40rpx;
|
||
width: 2rpx;
|
||
background-color: #E0E0E0;
|
||
z-index: 1;
|
||
}
|
||
|
||
.schedule-card {
|
||
flex: 1;
|
||
background-color: #fff;
|
||
border-radius: 12rpx;
|
||
padding: 25rpx;
|
||
}
|
||
|
||
.schedule-time {
|
||
font-size: 26rpx;
|
||
color: #C93639;
|
||
font-weight: bold;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.schedule-title {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.schedule-location {
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5rpx;
|
||
}
|
||
|
||
.location-icon {
|
||
font-size: 22rpx;
|
||
}
|
||
</style>
|