limo-platform/client/src/pages/history/index.vue

<template>
  <view class="history-page">
    <!-- Header -->
    <view class="page-header">
      <text class="header-title">观看历史</text>
      <text class="header-subtitle">共观看 {{ watchHistory.length }} 个视频</text>
    </view>

    <!-- Empty State -->
    <view v-if="watchHistory.length === 0" class="empty-state">
      <view class="empty-container">
        <text class="empty-icon">📺</text>
        <text class="empty-title">暂无观看记录</text>
        <text class="empty-subtitle">去发现精彩的运动视频吧</text>
        <view class="empty-button" @tap="goToHome">
          <text class="button-text">去发现</text>
        </view>
      </view>
    </view>

    <!-- History List -->
    <view v-else class="history-list">
      <view 
        v-for="record in watchHistory" 
        :key="record.id" 
        class="video-card"
        @tap="playVideo(record)"
      >
        <!-- Video Thumbnail -->
        <view class="video-thumbnail">
          <view class="thumbnail-placeholder" :class="record.thumbnailClass">
            <view class="play-overlay">
              <text class="play-icon">▶</text>
            </view>
          </view>
          <view class="video-duration">{{ record.videoDuration }}</view>
        </view>

        <!-- Video Info -->
        <view class="video-info">
          <text class="venue-name">{{ record.venueName }}</text>
          <view class="video-meta">
            <text class="watch-time">{{ record.watchTime }}</text>
            <text class="video-duration-text">{{ record.videoDuration }}</text>
          </view>
        </view>

        <!-- More Options -->
        <view class="video-actions" @tap.stop="showVideoOptions(record)">
          <text class="more-icon">⋯</text>
        </view>
      </view>
    </view>

    <!-- Clear History Button -->
    <view v-if="watchHistory.length > 0" class="clear-section">
      <view class="clear-button" @tap="clearHistory">
        <text class="clear-text">清空观看历史</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import './index.scss'

// 观看历史数据
const watchHistory = ref([
  {
    id: '1',
    venueName: 'RONIN黄金篮球馆',
    videoDuration: '12:45',
    watchTime: '2小时前',
    thumbnailClass: 'ronin-bg',
    venueId: 'ronin'
  },
  {
    id: '2',
    venueName: 'Panda惊怒熊猫运动俱乐部',
    videoDuration: '08:32',
    watchTime: '1天前',
    thumbnailClass: 'panda-bg',
    venueId: 'panda'
  },
  {
    id: '3',
    venueName: '星网网球俱乐部',
    videoDuration: '15:28',
    watchTime: '2天前',
    thumbnailClass: 'tennis-bg',
    venueId: 'tennis'
  },
  {
    id: '4',
    venueName: 'RONIN黄金篮球馆',
    videoDuration: '25:51',
    watchTime: '3天前',
    thumbnailClass: 'ronin-bg',
    venueId: 'ronin'
  },
  {
    id: '5',
    venueName: 'Panda惊怒熊猫运动俱乐部',
    videoDuration: '06:15',
    watchTime: '5天前',
    thumbnailClass: 'panda-bg',
    venueId: 'panda'
  }
])

// 方法
const goToHome = () => {
  Taro.navigateBack()
}

const playVideo = (record: any) => {
  console.log('播放视频:', record.venueName)
  Taro.showToast({
    title: '播放视频中...',
    icon: 'none'
  })
  // TODO: 实际播放视频逻辑
}

const showVideoOptions = (record: any) => {
  Taro.showActionSheet({
    itemList: ['删除观看记录'],
    success: (res) => {
      if (res.tapIndex === 0) {
        // 删除观看记录
        const index = watchHistory.value.findIndex(v => v.id === record.id)
        if (index > -1) {
          watchHistory.value.splice(index, 1)
          Taro.showToast({
            title: '已删除记录',
            icon: 'success'
          })
        }
      }
    }
  })
}

const clearHistory = () => {
  Taro.showModal({
    title: '清空观看历史',
    content: '确定要清空所有视频观看记录吗？此操作不可恢复。',
    success: (res) => {
      if (res.confirm) {
        watchHistory.value = []
        Taro.showToast({
          title: '已清空观看历史',
          icon: 'success'
        })
      }
    }
  })
}

onMounted(() => {
  console.log('观看历史页面已加载')
})
</script>