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

xiangpei

2025-07-04 0fa280c6d02dbf694e36b1f352aea51132ec6dde

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

 App.vue

@@ -255,9 +255,9 @@
  @font-face {
    font-family: 'iconfont';  /* Project id 4921691 */
    src: 
         url('//at.alicdn.com/t/c/font_4921691_ccl65pzzuti.woff2?t=1751539600730') format('woff2'),
         url('//at.alicdn.com/t/c/font_4921691_ccl65pzzuti.woff?t=1751539600730') format('woff'),
         url('//at.alicdn.com/t/c/font_4921691_ccl65pzzuti.ttf?t=1751539600730') format('truetype');
         url('//at.alicdn.com/t/c/font_4921691_pgrsygpr4.woff2?t=1751620237240') format('woff2'),
         url('//at.alicdn.com/t/c/font_4921691_pgrsygpr4.woff?t=1751620237240') format('woff'),
         url('//at.alicdn.com/t/c/font_4921691_pgrsygpr4.ttf?t=1751620237240') format('truetype');
  }
    .iconfont {
          /* font-family需要和自定义的相同 */

 api/members.js

@@ -387,7 +387,7 @@
}

/**
 * 我的足迹列表
 * 我的足迹列表-商品
 * @param pageNumber  pageSize
 *
 */
@@ -401,6 +401,20 @@
}

/**
 * 我的足迹列表-视频
 * @param pageNumber  pageSize
 *
 */
export function myVideoHistory(params) {
  return http.request({
    url: `/lmk/video/history`,
    method: Method.GET,
    needToken: true,
    params,
  });
}

/**
 * 根据id删除会员足迹
 * @param id
 */

 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>

 pages/tabbar/user/my.vue

@@ -97,6 +97,12 @@
          </view>
          <view>我的活动</view>
        </view>
        <view class="order-item" @click="navigateTo('/pages/mine/myTracks')">
          <view>
            <text class="iconfont">&#xe738;</text>
          </view>
          <view>浏览记录</view>
        </view>
      </view>
    </div>
    

 pages/tabbar/user/utils/tool.vue

@@ -10,10 +10,10 @@
                        <view>地址管理</view>
                    </view>

                    <view class="interact-item" @click="navigateTo('/pages/mine/myTracks')">
<!--                     <view class="interact-item" @click="navigateTo('/pages/mine/myTracks')">
                        <image src="/static/mine/logistics.png" mode=""></image>
                        <view>我的足迹</view>
                    </view>
                    </view> -->

                    <view class="interact-item" @click="navigateTo('/pages/order/evaluate/myEvaluate')">
                        <image src="/static/mine/feedback.png" mode=""></image>