From 7dbe13ff4c1b5784aa285faf6b5248d2de25e9ce Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期五, 10 十月 2025 16:22:45 +0800
Subject: [PATCH] 获取定制模板信息
---
pages/mine/myTracks.vue | 309 ++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 277 insertions(+), 32 deletions(-)
diff --git a/pages/mine/myTracks.vue b/pages/mine/myTracks.vue
index 315e67a..2c955fe 100644
--- a/pages/mine/myTracks.vue
+++ b/pages/mine/myTracks.vue
@@ -2,12 +2,74 @@
<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="goToVideoPlay(item, index)"
+ >
+ <u-swipe-action style="width: 100%;" :show="item.show" :index="index" :key="item.id"
+ @click="deleteVideoView(item.id)" @open="open" :options="options">
+ <view style="display: flex;" @click="goToVideoPlay(item, index)">
+ <video
+ class="video-cover"
+ :src="item.videoUrl"
+ controls="false"
+ :autoplay="false"
+ :loop="false"
+ :show-center-play-btn="false"
+ :show-play-btn="false"
+ :show-fullscreen-btn="false"
+ allow-fullscreen="false"
+ :disableProgressGesture="true"
+ :enablePlayGesture="false"
+ :show-background-playback-button="false"
+ ></video>
+ <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>
+ </view>
+
+ </u-swipe-action>
+ </view>
+ <div @click="deleteVideoView(item.id)" 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">
@@ -37,33 +99,34 @@
</view>
<view class="myTracks-divider"></view>
-
+ <div @click="handleClickDeleteSelected(item.id)" v-if="isEdit" class="submit">
+ 鍒犻櫎鎵�閫�
+ </div>
</view>
- <div @click="handleClickDeleteSelected" v-if="isEdit" class="submit">
- 鍒犻櫎鎵�閫�
- </div>
- </div>
+
+ <view v-if="trackList.length === 0" class="empty-tip">
+ 鏆傛棤鍟嗗搧娴忚璁板綍
+ </view>
+ </view>
</view>
</template>
<script>
- import UNavbar from '@/uview-components/uview-ui/components/u-navbar/u-navbar.vue';
- import UNoticeBar from '@/uview-components/uview-ui/components/u-notice-bar/u-notice-bar.vue';
- import UEmpty from '@/uview-components/uview-ui/components/u-empty/u-empty.vue';
- import USwipeAction from '@/uview-components/uview-ui/components/u-swipe-action/u-swipe-action.vue';
- import UCheckboxGroup from '@/uview-components/uview-ui/components/u-checkbox-group/u-checkbox-group.vue';
- import UCheckbox from '@/uview-components/uview-ui/components/u-checkbox/u-checkbox.vue';
+ import '@/components/uview-components/uview-ui';
import {
myTrackList,
- deleteHistoryListId
+ deleteHistoryListId,
+ myVideoHistory
} from "@/api/members.js";
+import storage from '@/utils/storage';
export default {
- components: {UNavbar,UNoticeBar,UEmpty,USwipeAction,UCheckboxGroup,UCheckbox},
data() {
return {
+ activeTab: 'video', // 褰撳墠婵�娲荤殑tab
+ videoHistory: [], // 瑙嗛娴忚鍒楄〃
isEdit:false,
whetherEmpty: false, //鏄惁鏁版嵁涓虹┖
params: {
@@ -79,7 +142,7 @@
backgroundColor: '#dd524d'
}
}],
- trackList: [], //瓒宠抗鍒楄〃
+ trackList: [], //鍟嗗搧娴忚鍒楄〃
};
},
@@ -100,8 +163,78 @@
this.getList();
},
methods: {
+ // 鍒囨崲tab
+ switchTab(tab) {
+ this.activeTab = tab
+ if(this.activeTab ==="goods"){
+ this.getList()
+ }
+ },
+
+ // 璺宠浆鍒拌棰戣鎯呴〉
+ goToVideoPlay(item, index) {
+ const playInfo = {
+ videoList: this.videoHistory,
+ nomore: true,
+ pageNumber: this.params.pageNumber,
+ playIndex: index
+ }
+ uni.setStorageSync("playInfo", playInfo)
+ uni.navigateTo({
+ url: `/pages/video/video-play?authorId=${storage.getUserInfo().id}&videoFrom=history`
+ })
+ },
+
+ // 鏍煎紡鍖栨挱鏀炬椂闂� (绉� -> 鍒�:绉�)
+ formatPlayTime(seconds) {
+ const secsInt = Math.floor(seconds); // 鍘绘帀灏忔暟閮ㄥ垎
+ const mins = Math.floor(secsInt / 60)
+ const secs = secsInt % 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)
+ },
+ // 鍒犻櫎瑙嗛娴忚璁板綍
+ deleteVideoView(id) {
+ deleteHistoryListId([id], 'video').then((res) => {
+ if (res.data.code == 200) {
+ this.videoHistory = [];
+ this.params.pageNumber = 1
+ this.getList();
+ } else {
+ uni.showToast({
+ title: res.data.message,
+ duration: 2000,
+ icon: "none",
+ });
+ }
+ });
},
// 鍒犻櫎鎵�閫夌殑鏁版嵁
handleClickDeleteSelected(val){
@@ -147,32 +280,53 @@
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 = [
+ ...this.videoHistory,
+ ...res.data.data.filter(
+ (newItem) => !this.videoHistory.some((oldItem) => oldItem.id === newItem.id)
+ ),
+ ];
}
- }
- });
+ })
+ }
+
},
-
-
/**
* 鍒犻櫎瓒宠抗
*/
delTracks(index,ids) {
- deleteHistoryListId(ids || this.trackList[index].goodsId).then((res) => {
+ deleteHistoryListId(ids || this.trackList[index].goodsId, 'goods').then((res) => {
if (res.data.code == 200) {
this.trackList = [];
this.params.pageNumber = 1
@@ -309,4 +463,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;
+ padding-bottom: 10rpx;
+ padding-left: 20rpx;
+ 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