fix bugs
This commit is contained in:
228
src/pages/event-live/event-live.vue
Normal file
228
src/pages/event-live/event-live.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<view class="event-live-page">
|
||||
<!-- 实况列表 -->
|
||||
<view class="live-list">
|
||||
<view class="live-item" v-for="(item, index) in liveList" :key="index">
|
||||
<view class="live-time">{{ item.time }}</view>
|
||||
<view class="live-content">
|
||||
<view class="live-type" :class="item.type">{{ item.typeText }}</view>
|
||||
<view class="live-text">{{ item.content }}</view>
|
||||
<view class="live-images" v-if="item.images && item.images.length > 0">
|
||||
<image
|
||||
class="live-image"
|
||||
v-for="(img, idx) in item.images"
|
||||
:key="idx"
|
||||
:src="img"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 刷新提示 -->
|
||||
<view class="refresh-tip">
|
||||
<text class="tip-icon">🔄</text>
|
||||
<text class="tip-text">下拉刷新获取最新实况</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import infoAPI from '@/api/info.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
eventId: '',
|
||||
liveList: []
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.eventId) {
|
||||
this.eventId = options.eventId
|
||||
this.loadLiveList(options.eventId)
|
||||
}
|
||||
},
|
||||
// 下拉刷新
|
||||
onPullDownRefresh() {
|
||||
this.loadLiveList(this.eventId, true)
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 加载比赛实况列表
|
||||
*/
|
||||
async loadLiveList(eventId, refresh = false) {
|
||||
try {
|
||||
const res = await infoAPI.getLiveUpdateList({ competitionId: eventId })
|
||||
|
||||
let list = []
|
||||
if (res.records) {
|
||||
list = res.records
|
||||
} else if (Array.isArray(res)) {
|
||||
list = res
|
||||
}
|
||||
|
||||
// 数据映射
|
||||
this.liveList = list.map(item => ({
|
||||
time: this.formatTime(item.updateTime || item.time || item.createTime),
|
||||
type: this.getLiveType(item.type || item.updateType),
|
||||
typeText: this.getLiveTypeText(item.type || item.updateType),
|
||||
content: item.content || item.updateContent || '',
|
||||
images: item.images || item.imageList || []
|
||||
}))
|
||||
|
||||
// 停止下拉刷新
|
||||
if (refresh) {
|
||||
uni.stopPullDownRefresh()
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('加载实况列表失败:', err)
|
||||
if (refresh) {
|
||||
uni.stopPullDownRefresh()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取实况类型样式类名
|
||||
*/
|
||||
getLiveType(type) {
|
||||
const typeMap = {
|
||||
1: 'highlight',
|
||||
2: 'score',
|
||||
3: 'news',
|
||||
'highlight': 'highlight',
|
||||
'score': 'score',
|
||||
'news': 'news'
|
||||
}
|
||||
return typeMap[type] || 'news'
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取实况类型文本
|
||||
*/
|
||||
getLiveTypeText(type) {
|
||||
const typeMap = {
|
||||
1: '精彩瞬间',
|
||||
2: '比分',
|
||||
3: '赛况',
|
||||
'highlight': '精彩瞬间',
|
||||
'score': '比分',
|
||||
'news': '赛况'
|
||||
}
|
||||
return typeMap[type] || '赛况'
|
||||
},
|
||||
|
||||
/**
|
||||
* 格式化时间（只取时分）
|
||||
*/
|
||||
formatTime(timeStr) {
|
||||
if (!timeStr) return ''
|
||||
|
||||
// 如果已经是 HH:MM 格式
|
||||
if (/^\d{2}:\d{2}$/.test(timeStr)) {
|
||||
return timeStr
|
||||
}
|
||||
|
||||
const date = new Date(timeStr)
|
||||
const hours = String(date.getHours()).padStart(2, '0')
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||||
|
||||
return `${hours}:${minutes}`
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.event-live-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
padding: 20rpx 30rpx;
|
||||
}
|
||||
|
||||
.live-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30rpx;
|
||||
}
|
||||
|
||||
.live-item {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.live-time {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
flex-shrink: 0;
|
||||
padding-top: 5rpx;
|
||||
}
|
||||
|
||||
.live-content {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
padding: 25rpx;
|
||||
}
|
||||
|
||||
.live-type {
|
||||
display: inline-block;
|
||||
font-size: 22rpx;
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 6rpx;
|
||||
margin-bottom: 12rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.live-type.highlight {
|
||||
background-color: #C93639;
|
||||
}
|
||||
|
||||
.live-type.score {
|
||||
background-color: #FF8C00;
|
||||
}
|
||||
|
||||
.live-type.news {
|
||||
background-color: #4CAF50;
|
||||
}
|
||||
|
||||
.live-text {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.live-images {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10rpx;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
|
||||
.live-image {
|
||||
width: 100%;
|
||||
height: 180rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.refresh-tip {
|
||||
text-align: center;
|
||||
padding: 40rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.tip-icon {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user