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