我的浏览记录增加视频播放记录，TODO样式优化、播放历史视频

xiangpei

2025-07-04 0fa280c6d02dbf694e36b1f352aea51132ec6dde

 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>