martial-mini/pages/event-live/event-live.vue

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