From 0fa280c6d02dbf694e36b1f352aea51132ec6dde Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期五, 04 七月 2025 18:16:09 +0800
Subject: [PATCH] 我的浏览记录增加视频播放记录，TODO样式优化、播放历史视频
---
pages/mine/myTracks.vue | 242 ++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 222 insertions(+), 20 deletions(-)
diff --git a/pages/mine/myTracks.vue b/pages/mine/myTracks.vue
index bd72c63..bd4c2f3 100644
--- a/pages/mine/myTracks.vue
+++ b/pages/mine/myTracks.vue
@@ -2,12 +2,58 @@
<view class="myTracks">
<u-navbar title="鎴戠殑瓒宠抗">
<div slot="right">
- <div class="light-color edit" @click="isEdit = !isEdit">{{ !isEdit ? '缂栬緫' : '瀹屾垚'}}</div>
- </div>
+ <div class="light-color edit" @click="isEdit = !isEdit">{{ !isEdit ? '缂栬緫' : '瀹屾垚'}}</div>
+ </div>
</u-navbar>
<u-notice-bar mode="vertical" :list="['鍙冲垝鍒犻櫎娴忚璁板綍']"></u-notice-bar>
- <u-empty text="鏆傛棤鍘嗗彶璁板綍" style="margin-top:200rpx;" mode="history" v-if="whetherEmpty"></u-empty>
- <div v-else>
+ <!-- 椤堕儴閫夐」鍗� -->
+ <view class="tabs">
+ <view
+ class="tab-item"
+ :class="{active: activeTab === 'video'}"
+ @click="switchTab('video')"
+ >
+ 瑙嗛
+ </view>
+ <view
+ class="tab-item"
+ :class="{active: activeTab === 'goods'}"
+ @click="switchTab('goods')"
+ >
+ 鍟嗗搧
+ </view>
+ </view>
+
+ <!-- 瑙嗛娴忚璁板綍鍒楄〃 -->
+ <view v-if="activeTab === 'video'" class="video-list">
+ <view
+ v-for="(item, index) in videoHistory"
+ :key="index"
+ class="video-item"
+ @click="goToVideoDetail(item)"
+ >
+ <u-swipe-action style="width: 100%;" :show="item.show" :index="index" :key="item.id"
+ @click="delTracks" @open="open" :options="options">
+ <image class="video-cover" :src="item.coverUrl" mode="aspectFill"></image>
+ <view class="video-info">
+ <view class="video-title">{{item.title}}</view>
+ <view class="video-author">{{item.authorName}}</view>
+ <view class="video-meta">
+ <text>鎾斁鑷�: {{formatPlayTime(item.playAt)}}</text>
+ <text class="separator">|</text>
+ <text>{{formatDate(item.playTime)}}</text>
+ </view>
+ </view>
+ </u-swipe-action>
+ </view>
+ <div @click="handleClickDeleteSelected" v-if="isEdit" class="submit">
+ 鍒犻櫎鎵�閫�
+ </div>
+ <view v-if="videoHistory.length === 0" class="empty-tip">
+ 鏆傛棤瑙嗛娴忚璁板綍
+ </view>
+ </view>
+ <view v-else-if="activeTab === 'goods'">
<view v-for="(item, index) in trackList" :key="index">
<view class="myTracks-title" @click="navigateToStore(item)">{{item.storeName}}</view>
<view class="myTracks-items">
@@ -42,7 +88,10 @@
<div @click="handleClickDeleteSelected" v-if="isEdit" class="submit">
鍒犻櫎鎵�閫�
</div>
- </div>
+ <view v-if="trackList.length === 0" class="empty-tip">
+ 鏆傛棤鍟嗗搧娴忚璁板綍
+ </view>
+ </view>
</view>
</template>
@@ -52,12 +101,15 @@
import {
myTrackList,
- deleteHistoryListId
+ deleteHistoryListId,
+ myVideoHistory
} from "@/api/members.js";
export default {
data() {
return {
+ activeTab: 'video', // 褰撳墠婵�娲荤殑tab
+ videoHistory: [], // 瑙嗛娴忚鍒楄〃
isEdit:false,
whetherEmpty: false, //鏄惁鏁版嵁涓虹┖
params: {
@@ -73,7 +125,7 @@
backgroundColor: '#dd524d'
}
}],
- trackList: [], //瓒宠抗鍒楄〃
+ trackList: [], //鍟嗗搧娴忚鍒楄〃
};
},
@@ -94,6 +146,49 @@
this.getList();
},
methods: {
+ // 鍒囨崲tab
+ switchTab(tab) {
+ this.activeTab = tab
+ },
+
+ // 璺宠浆鍒拌棰戣鎯呴〉
+ goToVideoDetail(item) {
+ uni.navigateTo({
+ url: `/pages/video-detail/video-detail?id=${item.id}`
+ })
+ },
+
+ // 鏍煎紡鍖栨挱鏀炬椂闂� (绉� -> 鍒�:绉�)
+ formatPlayTime(seconds) {
+ const mins = Math.floor(seconds / 60)
+ const secs = seconds % 60
+ return `${mins}:${secs < 10 ? '0' + secs : secs}`
+ },
+
+ // 鏍煎紡鍖栨棩鏈�
+ formatDate(timestamp) {
+ const now = new Date()
+ const date = new Date(timestamp)
+
+ // 濡傛灉鏄粖澶�
+ if (date.toDateString() === now.toDateString()) {
+ const hours = date.getHours().toString().padStart(2, '0')
+ const minutes = date.getMinutes().toString().padStart(2, '0')
+ return `${hours}:${minutes}`
+ }
+
+ // 濡傛灉鏄槰澶�
+ const yesterday = new Date(now)
+ yesterday.setDate(now.getDate() - 1)
+ if (date.toDateString() === yesterday.toDateString()) {
+ return '鏄ㄥぉ'
+ }
+
+ // 鍏朵粬鎯呭喌鏄剧ず鏃ユ湡
+ const month = date.getMonth() + 1
+ const day = date.getDate()
+ return `${month}鏈�${day}鏃
+ },
checkboxChangeDP(val){
console.log(val)
},
@@ -141,27 +236,43 @@
uni.showLoading({
title: "鍔犺浇涓�",
});
- myTrackList(this.params).then((res) => {
- uni.stopPullDownRefresh();
- uni.hideLoading();
- if (res.statusCode == 200) {
- res.data.result.records.length &&
- res.data.result.records.forEach((item) => {
+ if (this.activeTab === 'goods') {
+ myTrackList(this.params).then((res) => {
+ uni.stopPullDownRefresh();
+ uni.hideLoading();
+ if (res.statusCode == 200) {
+ res.data.result.records.length &&
+ res.data.result.records.forEach((item) => {
+ item.show = false;
+ item.checked = false
+ });
+
+ let data = res.data.result.records;
+ if (data.total == 0) {
+ this.whetherEmpty = true;
+ } else {
+ this.trackList.push(...data);
+ }
+ }
+ });
+ } else if (this.activeTab === 'video') {
+ myVideoHistory(this.params).then(res => {
+ res.data.data.length &&
+ res.data.data.forEach((item) => {
item.show = false;
item.checked = false
});
-
- let data = res.data.result.records;
+
+ let data = res.data.data;
if (data.total == 0) {
this.whetherEmpty = true;
} else {
- this.trackList.push(...data);
+ this.videoHistory.push(...data);
}
- }
- });
+ })
+ }
+
},
-
-
/**
* 鍒犻櫎瓒宠抗
*/
@@ -303,4 +414,95 @@
.edit{
padding-right: 32rpx;
}
+ .container {
+ padding: 20rpx;
+ }
+
+ /* 閫夐」鍗℃牱寮� */
+ .tabs {
+ display: flex;
+ margin-bottom: 20rpx;
+ border-bottom: 1rpx solid #eee;
+ }
+
+ .tab-item {
+ flex: 1;
+ text-align: center;
+ padding: 20rpx 0;
+ font-size: 32rpx;
+ color: #666;
+ }
+
+ .tab-item.active {
+ color: #007AFF;
+ position: relative;
+ }
+
+ .tab-item.active::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 80rpx;
+ height: 4rpx;
+ background-color: #007AFF;
+ }
+
+ /* 瑙嗛鍒楄〃鏍峰紡 */
+ .video-list {
+ padding: 10rpx 0;
+ }
+
+ .video-item {
+ display: flex;
+ margin-bottom: 30rpx;
+ padding-bottom: 30rpx;
+ border-bottom: 1rpx solid #f5f5f5;
+ }
+
+ .video-cover {
+ width: 220rpx;
+ height: 160rpx;
+ border-radius: 8rpx;
+ margin-right: 20rpx;
+ }
+
+ .video-info {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+
+ .video-title {
+ font-size: 30rpx;
+ color: #333;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+ line-height: 1.4;
+ }
+
+ .video-author {
+ font-size: 26rpx;
+ color: #999;
+ }
+
+ .video-meta {
+ font-size: 24rpx;
+ color: #999;
+ }
+
+ .separator {
+ margin: 0 10rpx;
+ }
+
+ .empty-tip {
+ text-align: center;
+ padding: 100rpx 0;
+ color: #999;
+ font-size: 28rpx;
+ }
</style>
--
Gitblit v1.8.0