From b87f40d077669eaceced44aadf7e02117f53671e Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期五, 06 六月 2025 15:25:50 +0800
Subject: [PATCH] 优化我的收藏，活动报名，我的活动页面，活动页面页面，新增加载更多
---
pages/mine/myCollect/myCollect.vue | 512 ++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 384 insertions(+), 128 deletions(-)
diff --git a/pages/mine/myCollect/myCollect.vue b/pages/mine/myCollect/myCollect.vue
index 4b0fd27..7251419 100644
--- a/pages/mine/myCollect/myCollect.vue
+++ b/pages/mine/myCollect/myCollect.vue
@@ -10,103 +10,147 @@
</view>
<!-- 瑙嗛鍒楄〃 -->
- <view class="activity-list" >
+ <view class="activity-list">
<view v-if="currentTab === 0">
- <view v-if="signedActivities.length > 0">
- <view v-for="(item, idx) in signedActivities" :key="idx" class="activity-item">
- <!-- 灏侀潰鍖哄煙 -->
- <block v-if="item.coverType === '鍥剧墖' || item.coverType === '瑙嗛'">
- <image :src="getPreviewUrl(item.cover)" mode="aspectFill" class="activity-cover" />
- </block>
- <block v-if="item.coverType === '鏂囧瓧'">
- <view class="activity-cover">{{ item.cover }}</view>
- </block>
+ <scroll-view scroll-y class="activity-list" style="height: 100vh;" @scrolltolower="loadMore"
+ :lower-threshold="100">
+ <view v-if="videoCollects.length > 0">
+ <view v-for="(item, idx) in videoCollects" :key="idx" class="video-item">
+ <!-- 瑙嗛灏侀潰+鎾斁鎸夐挳 -->
+ <view class="video-cover-container">
+ <image :src="item.coverUrl" mode="aspectFill" class="video-cover" />
+ <view class="play-icon">
+ <u-icon name="play-circle-fill" size="60" color="#fff"></u-icon>
+ </view>
+ <view class="video-duration" v-if="item.duration">{{ item.duration }}</view>
+ </view>
- <!-- 娲诲姩淇℃伅 -->
- <view class="activity-info">
- <view class="activity-title">{{ item.activityName }}</view>
- <view class="activity-meta">
- <text class="activity-time">{{ item.startTime }} - {{ item.endTime }}</text>
- <text class="activity-location">{{ item.activityLocation || '鏆傛棤' }}</text>
+ <!-- 瑙嗛淇℃伅 -->
+ <view class="video-info">
+ <view class="video-title">{{ item.authorName || '鏈煡浣滆��' }}</view>
+ <view class="video-meta">
+ <text class="video-weight" v-if="item.weight > 0">
+ <u-icon name="thumb-up-fill" size="24" color="#999"></u-icon>
+ {{ item.weight }}
+ </text>
+ </view>
+ </view>
+
+ <!-- 鎿嶄綔鎸夐挳 -->
+ <view class="video-actions">
+ <button class="cancel-btn" @click.stop="handleCancelCollection(item,'video')">
+ 鍙栨秷鏀惰棌
+ </button>
</view>
</view>
-
- <!-- 鎿嶄綔鍖哄煙 -->
- <view class="action-container">
- <button class="cancel-btn" @click="handleCancelCollection(item)"
- hover-class="cancel-btn-hover">
- 鍙栨秷鏀惰棌
- </button>
- </view>
-
</view>
- </view>
+ <view v-else class="empty-tip">
+ <text>鏆傛棤鏀惰棌瑙嗛</text>
+ </view>
+ <view class="load-more">
+ <u-loadmore v-if="videoCollects.length > 0"
+ :status="loading ? 'loading' : noMore ? 'nomore' : 'loadmore'" :load-text="{
+ loadmore: '涓婃媺鍔犺浇鏇村',
+ loading: '姝ｅ湪鍔犺浇',
+ nomore: '娌℃湁鏇村浜�'
+ }" />
+ </view>
+ </scroll-view>
+
+
+
</view>
<view v-if="currentTab === 1">
- <!-- 宸茬粨鏉熸椿鍔ㄥ垪琛� -->
- <view v-if="endedActivities.length > 0">
- <view v-for="(item, idx) in endedActivities" :key="idx" class="activity-item">
- <!-- 灏侀潰鍖哄煙 -->
- <block v-if="item.coverType === '鍥剧墖' || item.coverType === '瑙嗛'">
- <image :src="getPreviewUrl(item.cover)" mode="aspectFill" class="activity-cover" />
- </block>
- <block v-if="item.coverType === '鏂囧瓧'">
- <view class="activity-cover">{{ item.cover }}</view>
- </block>
+ <scroll-view scroll-y class="activity-list" style="height: 100vh;" @scrolltolower="loadMore"
+ :lower-threshold="100">
+ <view v-if="goodsCollects.length > 0">
+ <view v-for="(item, idx) in goodsCollects" :key="idx" class="activity-item">
+ <!-- 灏侀潰鍖哄煙 -->
+ <block>
+ <image :src="item.original" mode="aspectFill" class="activity-cover" />
+ </block>
- <!-- 娲诲姩淇℃伅 -->
- <view class="activity-info">
- <view class="activity-title">{{ item.activityName }}</view>
- <view class="activity-meta">
- <text class="activity-time">{{ item.startTime }} - {{ item.endTime }}</text>
- <text class="activity-location">{{ item.activityLocation || '鏆傛棤' }}</text>
+ <!-- 娲诲姩淇℃伅 -->
+ <view class="activity-info">
+ <view class="activity-title">{{ item.goodsName }}</view>
+ <view class="activity-meta">
+ <text class="activity-time">浠锋牸:{{ item.price }}鍏�</text>
+ <text class="activity-location">{{ item.storeName || '鏆傛棤' }}</text>
+ </view>
</view>
- </view>
- <!-- 鎿嶄綔鍖哄煙 -->
- <view class="action-container">
- <button class="cancel-btn" @click="handleCancelCollection(item)"
- hover-class="cancel-btn-hover">
- 鍙栨秷鏀惰棌
- </button>
- </view>
+ <!-- 鎿嶄綔鍖哄煙 -->
+ <view class="action-container">
+ <button class="cancel-btn" @click="handleCancelCollection(item,'goods')"
+ hover-class="cancel-btn-hover">
+ 鍙栨秷鏀惰棌
+ </button>
+ </view>
+ </view>
</view>
- </view>
+ <view v-else class="empty-tip">
+
+ <text>鏆傛棤鏀惰棌鍟嗗搧</text>
+ </view>
+ <view class="load-more">
+ <u-loadmore v-if="goodsCollects.length > 0"
+ :status="loading ? 'loading' : noMore ? 'nomore' : 'loadmore'" :load-text="{
+ loadmore: '涓婃媺鍔犺浇鏇村',
+ loading: '姝ｅ湪鍔犺浇',
+ nomore: '娌℃湁鏇村浜�'
+ }" />
+ </view>
+ </scroll-view>
</view>
<view v-if="currentTab === 2">
- <!-- 宸插彇娑堟椿鍔ㄥ垪琛� -->
- <view v-if="canceledActivities.length > 0">
- <view v-for="(item, idx) in endedActivities" :key="idx" class="activity-item">
- <!-- 灏侀潰鍖哄煙 -->
- <block v-if="item.coverType === '鍥剧墖' || item.coverType === '瑙嗛'">
- <image :src="getPreviewUrl(item.cover)" mode="aspectFill" class="activity-cover" />
- </block>
- <block v-if="item.coverType === '鏂囧瓧'">
- <view class="activity-cover">{{ item.cover }}</view>
- </block>
- <!-- 娲诲姩淇℃伅 -->
- <view class="activity-info">
- <view class="activity-title">{{ item.activityName }}</view>
- <view class="activity-meta">
- <text class="activity-time">{{ item.startTime }} - {{ item.endTime }}</text>
- <text class="activity-location">{{ item.activityLocation || '鏆傛棤' }}</text>
+ <scroll-view scroll-y class="activity-list" style="height: 80vh;" @scrolltolower="loadMore"
+ :lower-threshold="100">
+ <view v-if="activityCollects.length > 0">
+ <view v-for="(item, idx) in activityCollects" :key="idx" class="activity-item">
+ <!-- 灏侀潰鍖哄煙 -->
+ <block v-if="item.coverType === '鍥剧墖' || item.coverType === '瑙嗛'">
+ <image :src="item.cover" mode="aspectFill" class="activity-cover" />
+ </block>
+ <block v-if="item.coverType === '鏂囧瓧'">
+ <view class="activity-cover text-cover">{{ item.cover }}</view>
+ </block>
+ <!-- 娲诲姩淇℃伅 -->
+ <view class="activity-info">
+ <view class="activity-title">{{ item.activityName }}</view>
+ <view class="activity-meta">
+ <text class="activity-time">{{ item.startTime }}</text>
+ <text class="activity-time"> {{ item.endTime }}</text>
+ <text class="activity-location">{{ item.activityLocation || '鏆傛棤' }}</text>
+ </view>
</view>
+ <!-- 鎿嶄綔鍖哄煙 -->
+ <view class="action-container">
+ <button class="cancel-btn" @click="handleCancelCollection(item,'activity')"
+ hover-class="cancel-btn-hover">
+ 鍙栨秷鏀惰棌
+ </button>
+ </view>
+
</view>
- <!-- 鎿嶄綔鍖哄煙 -->
- <view class="action-container">
- <button class="cancel-btn" @click="handleCancelCollection(item)"
- hover-class="cancel-btn-hover">
- 鍙栨秷鏀惰棌
- </button>
- </view>
-
+
+
</view>
-
-
- </view>
+ <view v-else class="empty-tip">
+ <text>鏆傛棤鏀惰棌娲诲姩</text>
+ </view>
+ <view class="load-more">
+ <u-loadmore v-if="activityCollects.length > 0"
+ :status="loading ? 'loading' : noMore ? 'nomore' : 'loadmore'" :load-text="{
+ loadmore: '涓婃媺鍔犺浇鏇村',
+ loading: '姝ｅ湪鍔犺浇',
+ nomore: '娌℃湁鏇村浜�'
+ }" />
+ </view>
+ <view style="height: 150rpx"></view>
+ </scroll-view>
</view>
@@ -120,88 +164,300 @@
</template>
<script>
+ import ULoadmore from '@/uview-components/uview-ui/components/u-loadmore/u-loadmore.vue'
+ import UImage from '@/uview-components/uview-ui/components/u-image/u-image.vue';
import {
- getMyActivityList,
- activityCancel
- } from '@/api/activity.js'
- import {
- getPreviewUrl
+ getFilePreviewUrl
} from '@/api/common.js'
+ import {
+ changeCollect,
+ getMyCollectList
+ } from '@/api/collect.js'
+ import {
+ ifError
+ } from 'assert'
export default {
+ components: {
+ UImage,
+ ULoadmore
+ },
data() {
return {
+ total: 0,
+ loading: false,
+ noMore: {
+ video: false,
+ goods: false,
+ activity: false
+ },
currentTab: 0, // 褰撳墠閫変腑鐨則ab绱㈠紩
tabs: ['瑙嗛', '鍟嗗搧', '娲诲姩'],
- //
+ //
videoCollects: [], // 鏀惰棌瑙嗛鍒楄〃
- storeCollects: [], // 鏀惰棌鍟嗗搧鍒楄〃
+ goodsCollects: [], // 鏀惰棌鍟嗗搧鍒楄〃
activityCollects: [], // 鏀惰棌娲诲姩鍒楄〃
- query: {
- id: '',
- status: '',
- cancel: false,
+ collectForm: {
+ collectType: '',
+ refId: '',
},
+ query: {
+ type: 'video',
+ pageNumber: 1,
+ pageSize: 5,
+ }
}
},
- onLoad(){
+ onLoad() {
this.currentTab = 0;
//TODO 鏈櫥褰曢渶瑕乮d锛屾祴璇曠敤鍐欐\
- this.switchTab(this.currentTab);
+ this.getintit()
},
methods: {
- handleCancelCollection(id) {
+ /**
+ * 涓嬫媺鍒锋柊鏃�
+ */
+ onPullDownRefresh() {
+ this.currentTab = 0;
+ this.query.pageNumber = 1; // 閲嶇疆椤电爜
+ this.noMore = false;
+ this.videoCollects = [];
+ this.goodsCollects = []; // 鏀惰棌鍟嗗搧鍒楄〃
+ this.activityCollects = []; // 鏀惰棌娲诲姩鍒楄〃// 娓呯┖鏁版嵁
+ this.getintit();
},
- getPreviewUrl(params) {
- // return getPreviewUrl(params);
- return '';
+ loadMore() {
+ this.loading = true;
+ this.query.pageNumber += 1;
+ // 寤惰繜鎵ц璁︰I鏈夊弽搴旀椂闂�
+ setTimeout(() => {
+ this.query.pageNumber += 1;
+ this.getintit();
+ }, 300);
+ },
+ handleCancelCollection(item, type) {
+ console.log(item)
+ this.collectForm.collectType = type;
+ this.collectForm.refId = item.id;
+ changeCollect(this.collectForm).then(res => {
+ if (res.statusCode === 200) {
+ uni.showToast({
+ title: res.data.msg, // 鎻愮ず鏂囧瓧
+ icon: 'none', // 鍥炬爣绫诲瀷锛坰uccess/loading/none锛�
+ mask: true // 鏄惁鏄剧ず閫忔槑钂欏眰锛堥槻姝㈣Е鎽哥┛閫忥級
+ });
+ this.getintit();
+ }
+
+ })
+ },
+ getUrl(params) {
+ getFilePreviewUrl(params).then(res => {
+ return res.data.data
+ })
},
// 鍒囨崲tab
switchTab(index) {
-
if (this.currentTab !== index) {
this.currentTab = index
+ //鍒囨崲鏃堕〉鐮佸綊0
+ this.query.pageNumber = 0;
+ // 娓呯┖鏁版嵁
+ this.videoCollects = [];
+ this.goodsCollects = [];
+ this.activityCollects = [];
// 瀹為檯椤圭洰涓彲浠ュ湪杩欓噷娣诲姞鍔犺浇鏁版嵁鐨勯�昏緫
- if (this.currentTab === 0) {
- //鍔犺浇瑙嗛鍒楄〃
- this.getMyCollectionVideoList();
- } else if (this.currentTab === 1) {
- //鍔犺浇鍟嗗搧鍒楄〃
- this.getMyCollectionStoreList();
- } else if (this.currentTab === 2) {
- //鍔犺浇娲诲姩鍒楄〃
- this.getMyCollectActivityList();
- }
+ this.getintit()
+ }
+ },
+ async getintit() {
+ uni.showLoading({
+ title: '鍔犺浇涓�'
+ });
+ if (this.currentTab === 0) {
+ this.query.type = 'video';
+ getMyCollectList(this.query).then(res => {
+ uni.hideLoading();
+ this.loading = false;
+ if (res.statusCode === 200) {
+ const newData = res.data.data
+ this.total = res.data.total || 0;
+ // 杩藉姞鎴栨浛鎹㈡暟鎹�
+ this.videoCollects = this.query.pageNumber === 1 ?
+ newData :
+ [...this.videoCollects, ...newData];
+ // 鍒ゆ柇鏄惁杩樻湁鏇村鏁版嵁
+ this.noMore = newData.length < this.query.pageSize ||
+ this.videoCollects.length >= this.total;
+
+ }
+ })
+ } else if (this.currentTab === 1) {
+ this.query.type = 'goods';
+ getMyCollectList(this.query).then(res => {
+ uni.hideLoading();
+ this.loading = false;
+ if (res.statusCode === 200) {
+ const newData = res.data.data
+ this.total = res.data.total || 0;
+
+ this.goodsCollects = this.query.pageNumber === 1 ?
+ newData :
+ [...this.goodsCollects, ...newData];
+ // 鍒ゆ柇鏄惁杩樻湁鏇村鏁版嵁
+ this.noMore = newData.length < this.query.pageSize ||
+ this.goodsCollects.length >= this.total;
+ }
+ })
+ } else if (this.currentTab === 2) {
+ this.query.type = 'activity';
+ getMyCollectList(this.query).then(res => {
+ uni.hideLoading();
+ this.loading = false;
+ if (res.statusCode === 200) {
+ const newData = res.data.data
+ this.total = res.data.total || 0;
+
+ this.activityCollects = this.query.pageNumber === 1 ?
+ newData :
+ [...this.activityCollects, ...newData];
+ this.noMore = newData.length < this.query.pageSize ||
+ this.activityCollects.length >= this.total;
+ }
+ })
}
- },
- getMyCollectionStoreList() {
- uni.showLoading({
- title: '鍔犺浇涓�'
- });
-
- uni.hideLoading();
- },
- getMyCollectionVideoList() {
- uni.showLoading({
- title: '鍔犺浇涓�'
- });
-
- uni.hideLoading();
- },
- getMyCollectActivityList() {
- uni.showLoading({
- title: '鍔犺浇涓�'
- });
-
- uni.hideLoading();
- },
+ }
}
}
</script>
<style lang="scss">
+ .text-cover {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
+ color: #fff;
+ font-size: 28rpx;
+ padding: 16rpx;
+ line-height: 1.4;
+ }
+
+ /* 瑙嗛鍒楄〃涓撶敤鏍峰紡 */
+ .video-item {
+ display: flex;
+ padding: 24rpx 0;
+ border-bottom: 1rpx solid #f5f5f5;
+ align-items: center;
+
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+
+ .video-cover-container {
+ position: relative;
+ width: 240rpx;
+ height: 160rpx;
+ border-radius: 12rpx;
+ overflow: hidden;
+ margin-right: 24rpx;
+ flex-shrink: 0;
+
+ .video-cover {
+ width: 100%;
+ height: 100%;
+ }
+
+ .play-icon {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ opacity: 0.9;
+ }
+
+ .video-duration {
+ position: absolute;
+ right: 8rpx;
+ bottom: 8rpx;
+ background: rgba(0, 0, 0, 0.6);
+ color: #fff;
+ font-size: 20rpx;
+ padding: 4rpx 12rpx;
+ border-radius: 20rpx;
+ }
+ }
+
+ .video-info {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ height: 160rpx;
+
+ .video-title {
+ font-size: 30rpx;
+ color: #333;
+ font-weight: bold;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+ }
+
+ .video-meta {
+ display: flex;
+ justify-content: space-between;
+ font-size: 24rpx;
+ color: #999;
+
+
+
+ .video-weight {
+ display: flex;
+ align-items: center;
+ }
+ }
+ }
+
+ .video-actions {
+ margin-left: 20rpx;
+ flex-shrink: 0;
+
+ .cancel-btn {
+ background: #f5f5f5;
+ color: #666;
+ border: none;
+ font-size: 24rpx;
+ padding: 8rpx 20rpx;
+ border-radius: 20rpx;
+
+ &:active {
+ background: #eee;
+ }
+ }
+ }
+
+ .empty-tip {
+ text-align: center;
+ padding: 100rpx 0;
+
+ image {
+ width: 300rpx;
+ margin-bottom: 30rpx;
+ opacity: 0.6;
+ }
+
+ text {
+ display: block;
+ font-size: 28rpx;
+ color: #999;
+ }
+ }
+
.activity-container {
padding: 20rpx;
background-color: #f5f5f5;
--
Gitblit v1.8.0