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

fix: 修复赛事规程下载文件无后缀问题

Browse Source 
- event-rules页面H5环境使用a标签download属性指定文件名
- 修复api.config.js生产环境API地址配置
- 优化多个页面的附件展示

🤖 Generated with Claude Code

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
DevOps
2025-12-26 15:45:30 +08:00
parent 9c063a9779
commit 541c770f27
6 changed files with 606 additions and 495 deletions
Download Patch File Download Diff File Expand all files Collapse all files

573
src/pages/event-schedule/event-schedule.vue
View File

@@ -1,7 +1,29 @@
<template>
<view class="event-schedule-page">
<!-- 附件下载区 -->
<view class="attachments-section" v-if="attachments.length > 0">
<view class="section-title">
<text class="title-icon">📎</text>
<text class="title-text">日程附件</text>
</view>
<view class="attachments-list">
<view class="attachment-item" v-for="(file, index) in attachments" :key="index" @click="downloadFile(file)">
<view class="file-info">
<text class="file-icon">{{ getFileIcon(file.fileType) }}</text>
<view class="file-details">
<text class="file-name">{{ file.fileName }}</text>
<text class="file-size">{{ file.fileSize }}</text>
</view>
</view>
<view class="download-btn">
<text class="download-icon">⬇</text>
</view>
</view>
</view>
</view>
<!-- 日期选择器 -->
<view class="date-tabs">
<view class="date-tabs" v-if="dates.length > 0">
<view
class="date-tab"
v-for="(date, index) in dates"
@@ -15,7 +37,7 @@
</view>
<!-- 日程时间线 -->
<view class="schedule-timeline">
<view class="schedule-timeline" v-if="currentSchedule.length > 0">
<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>
@@ -29,11 +51,18 @@
</view>
</view>
</view>
<!-- 空状态 -->
<view class="empty-state" v-if="attachments.length === 0 && dates.length === 0">
<text class="empty-icon">📅</text>
<text class="empty-text">暂无日程安排</text>
</view>
</view>
</template>
<script>
import infoAPI from '@/api/info.js'
import competitionAPI from '@/api/competition.js'
export default {
data() {
@@ -41,7 +70,8 @@ export default {
eventId: '',
currentDate: 0,
dates: [],
schedules: {}
schedules: {},
attachments: []
};
},
computed: {
@@ -52,6 +82,7 @@ export default {
onLoad(options) {
if (options.eventId) {
this.eventId = options.eventId
this.loadAttachments(options.eventId)
this.loadScheduleDates(options.eventId)
}
},
@@ -63,6 +94,132 @@ export default {
}
},
methods: {
/**
* 加载附件列表
*/
async loadAttachments(eventId) {
try {
const res = await competitionAPI.getAttachments({
competitionId: eventId,
type: 'schedule'
})
let list = []
if (res && Array.isArray(res)) {
list = res
} else if (res && res.records) {
list = res.records
} else if (res && res.data && Array.isArray(res.data)) {
list = res.data
}
if (list.length > 0) {
this.attachments = list.map(file => ({
id: file.id,
fileName: file.fileName || file.name,
fileUrl: file.fileUrl || file.url,
fileSize: this.formatFileSize(file.fileSize || file.size),
fileType: file.fileType || this.getFileType(file.fileName || file.name)
}))
}
} catch (err) {
console.error('加载附件失败:', err)
}
},
/**
* 下载文件
*/
downloadFile(file) {
const fileExt = file.fileType || this.getFileType(file.fileName) || 'pdf'
// #ifdef H5
const link = document.createElement('a')
link.href = file.fileUrl
link.download = file.fileName
link.target = '_blank'
link.style.display = 'none'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
uni.showToast({
title: '开始下载',
icon: 'success'
})
return
// #endif
// #ifndef H5
uni.showLoading({ title: '准备下载' })
uni.downloadFile({
url: file.fileUrl,
success: (res) => {
if (res.statusCode === 200) {
uni.openDocument({
filePath: res.tempFilePath,
fileType: fileExt,
success: () => {
uni.hideLoading()
uni.showToast({ title: '打开成功', icon: 'success' })
},
fail: (err) => {
uni.hideLoading()
console.error('打开文件失败:', err)
uni.showToast({ title: '打开失败', icon: 'none' })
}
})
}
},
fail: (err) => {
uni.hideLoading()
console.error('下载失败:', err)
uni.showToast({ title: '下载失败', icon: 'none' })
}
})
// #endif
},
/**
* 获取文件类型
*/
getFileType(fileName) {
if (!fileName) return 'pdf'
const ext = fileName.split('.').pop().toLowerCase()
return ext
},
/**
* 获取文件图标
*/
getFileIcon(fileType) {
const iconMap = {
'pdf': '📕',
'doc': '📘',
'docx': '📘',
'xls': '📗',
'xlsx': '📗',
'ppt': '📙',
'pptx': '📙',
'txt': '📄',
'zip': '📦',
'rar': '📦'
}
return iconMap[fileType] || '📄'
},
/**
* 格式化文件大小
*/
formatFileSize(bytes) {
if (!bytes || bytes === 0) return '0 B'
if (typeof bytes === 'string') return bytes
const k = 1024
const sizes = ['B', 'KB', 'MB', 'GB']
const i = Math.floor(Math.log(bytes) / Math.log(k))
return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i]
},
/**
* 加载日程日期列表
*/
@@ -77,9 +234,8 @@ export default {
list = res
}
// 如果后端没有数据，使用模拟数据
if (list.length === 0) {
list = this.getMockScheduleData()
return
}
// 提取唯一日期
@@ -93,7 +249,7 @@ export default {
// 格式化日期选项卡并排序
this.dates = Array.from(dateSet)
.sort((a, b) => new Date(a) - new Date(b)) // 按日期升序排序
.sort((a, b) => new Date(a) - new Date(b))
.map(date => {
const d = new Date(date)
const month = d.getMonth() + 1
@@ -119,7 +275,7 @@ export default {
this.schedules[dateIndex].push({
time: this.formatTime(item.scheduleTime || item.schedule_time || item.time),
timeRaw: 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 || ''
})
@@ -141,59 +297,6 @@ export default {
}
} 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)
})
})
}
},
@@ -226,7 +329,6 @@ export default {
return timeA.localeCompare(timeB)
})
// 触发视图更新
this.$forceUpdate()
}
} catch (err) {
@@ -240,17 +342,14 @@ export default {
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')
@@ -258,235 +357,7 @@ export default {
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
}
]
}
}
};
@@ -498,6 +369,104 @@ export default {
background-color: #f5f5f5;
}
// 区块标题
.section-title {
display: flex;
align-items: center;
gap: 10rpx;
margin-bottom: 20rpx;
padding: 0 10rpx;
}
.title-icon {
font-size: 32rpx;
}
.title-text {
font-size: 30rpx;
font-weight: bold;
color: #333333;
}
// 附件下载区
.attachments-section {
padding: 20rpx 30rpx;
margin-bottom: 10rpx;
}
.attachments-list {
display: flex;
flex-direction: column;
gap: 15rpx;
}
.attachment-item {
background-color: #fff;
border-radius: 16rpx;
padding: 25rpx 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
transition: all 0.3s;
&:active {
background-color: #f8f8f8;
transform: scale(0.98);
}
}
.file-info {
display: flex;
align-items: center;
gap: 20rpx;
flex: 1;
min-width: 0;
}
.file-icon {
font-size: 48rpx;
flex-shrink: 0;
}
.file-details {
display: flex;
flex-direction: column;
gap: 8rpx;
flex: 1;
min-width: 0;
}
.file-name {
font-size: 28rpx;
color: #333333;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-size {
font-size: 24rpx;
color: #999999;
}
.download-btn {
width: 60rpx;
height: 60rpx;
background-color: #C93639;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.download-icon {
font-size: 32rpx;
color: #fff;
}
.date-tabs {
background-color: #fff;
display: flex;
@@ -594,4 +563,24 @@ export default {
.location-icon {
font-size: 22rpx;
}
// 空状态
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 200rpx 0;
gap: 20rpx;
}
.empty-icon {
font-size: 120rpx;
opacity: 0.3;
}
.empty-text {
font-size: 28rpx;
color: #999999;
}
</style>