<template>
|
|
<view class="activity-container">
|
<!-- 顶部 Tab 导航 -->
|
<view class="tab-nav">
|
<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{active: currentTab === index}"
|
@click="switchTab(index)">
|
{{tab}}
|
</view>
|
</view>
|
|
<!-- 视频列表 -->
|
<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>
|
|
<!-- 活动信息 -->
|
<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>
|
</view>
|
|
<!-- 操作区域 -->
|
<view class="action-container">
|
<button class="cancel-btn" @click="handleCancelCollection(item)"
|
hover-class="cancel-btn-hover">
|
取消收藏
|
</button>
|
</view>
|
|
</view>
|
</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>
|
|
<!-- 活动信息 -->
|
<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>
|
</view>
|
|
<!-- 操作区域 -->
|
<view class="action-container">
|
<button class="cancel-btn" @click="handleCancelCollection(item)"
|
hover-class="cancel-btn-hover">
|
取消收藏
|
</button>
|
</view>
|
|
</view>
|
</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>
|
</view>
|
</view>
|
<!-- 操作区域 -->
|
<view class="action-container">
|
<button class="cancel-btn" @click="handleCancelCollection(item)"
|
hover-class="cancel-btn-hover">
|
取消收藏
|
</button>
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
</view>
|
|
</template>
|
|
<script>
|
import {
|
getMyActivityList,
|
activityCancel
|
} from '@/api/activity.js'
|
import {
|
getPreviewUrl
|
} from '@/api/common.js'
|
export default {
|
data() {
|
return {
|
currentTab: 0, // 当前选中的tab索引
|
tabs: ['视频', '商品', '活动'],
|
//
|
videoCollects: [], // 收藏视频列表
|
storeCollects: [], // 收藏商品列表
|
activityCollects: [], // 收藏活动列表
|
query: {
|
id: '',
|
status: '',
|
cancel: false,
|
},
|
}
|
},
|
onLoad(){
|
this.currentTab = 0;
|
//TODO 未登录需要id，测试用写死\
|
this.switchTab(this.currentTab);
|
},
|
methods: {
|
handleCancelCollection(id) {
|
|
},
|
getPreviewUrl(params) {
|
// return getPreviewUrl(params);
|
return '';
|
},
|
// 切换tab
|
switchTab(index) {
|
|
if (this.currentTab !== index) {
|
this.currentTab = index
|
// 实际项目中可以在这里添加加载数据的逻辑
|
if (this.currentTab === 0) {
|
//加载视频列表
|
this.getMyCollectionVideoList();
|
} else if (this.currentTab === 1) {
|
//加载商品列表
|
this.getMyCollectionStoreList();
|
} else if (this.currentTab === 2) {
|
//加载活动列表
|
this.getMyCollectActivityList();
|
}
|
|
}
|
|
},
|
getMyCollectionStoreList() {
|
uni.showLoading({
|
title: '加载中'
|
});
|
|
uni.hideLoading();
|
},
|
getMyCollectionVideoList() {
|
uni.showLoading({
|
title: '加载中'
|
});
|
|
uni.hideLoading();
|
},
|
getMyCollectActivityList() {
|
uni.showLoading({
|
title: '加载中'
|
});
|
|
uni.hideLoading();
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.activity-container {
|
padding: 20rpx;
|
background-color: #f5f5f5;
|
min-height: 100vh;
|
}
|
|
/* Tab 导航样式 */
|
.tab-nav {
|
display: flex;
|
background-color: #fff;
|
border-radius: 12rpx;
|
margin-bottom: 20rpx;
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
}
|
|
.tab-item {
|
flex: 1;
|
text-align: center;
|
padding: 24rpx 0;
|
font-size: 28rpx;
|
color: #666;
|
position: relative;
|
|
&.active {
|
color: #007AFF;
|
font-weight: bold;
|
|
&::after {
|
content: '';
|
position: absolute;
|
bottom: 0;
|
left: 50%;
|
transform: translateX(-50%);
|
width: 80rpx;
|
height: 6rpx;
|
background-color: #007AFF;
|
border-radius: 3rpx;
|
}
|
}
|
}
|
|
/* 活动列表样式 */
|
.activity-list {
|
background-color: #fff;
|
border-radius: 12rpx;
|
padding: 20rpx;
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
}
|
|
.activity-item {
|
display: flex;
|
padding: 20rpx 0;
|
border-bottom: 1rpx solid #eee;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
}
|
|
.activity-cover {
|
width: 200rpx;
|
height: 140rpx;
|
border-radius: 8rpx;
|
margin-right: 20rpx;
|
}
|
|
.activity-info {
|
flex: 1;
|
position: relative;
|
}
|
|
.activity-title {
|
font-size: 32rpx;
|
color: #333;
|
font-weight: bold;
|
margin-bottom: 12rpx;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 2;
|
overflow: hidden;
|
}
|
|
.activity-meta {
|
font-size: 24rpx;
|
color: #999;
|
margin-bottom: 16rpx;
|
|
text {
|
display: block;
|
margin-bottom: 8rpx;
|
}
|
}
|
|
.activity-status {
|
position: absolute;
|
right: 0;
|
top: 0;
|
font-size: 24rpx;
|
padding: 4rpx 12rpx;
|
border-radius: 20rpx;
|
|
&.signed {
|
color: #007AFF;
|
background-color: rgba(0, 122, 255, 0.1);
|
}
|
|
&.ended {
|
color: #999;
|
background-color: rgba(153, 153, 153, 0.1);
|
}
|
|
&.canceled {
|
color: #ff3b30;
|
background-color: rgba(255, 59, 48, 0.1);
|
}
|
}
|
|
/* 空状态提示 */
|
.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;
|
}
|
}
|
</style>
|
