martial/martial-mini
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix bugs

Browse Source
This commit is contained in:
宅房
2025-12-13 09:18:08 +08:00
parent 7807f4b3e4
commit 0042a0220f
79 changed files with 30697 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

597
src/pages/event-schedule/event-schedule.vue Normal file
View File

@@ -0,0 +1,597 @@
<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>