165 lines
No EOL
4.2 KiB
Vue
165 lines
No EOL
4.2 KiB
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> |