xiangqinxiangmu/LiangZhiYUMao/pages/matchmaker-workbench/activities.vue

<template>
	<view class="activities-page">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-left" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<view class="navbar-title">活动中心</view>
			<view class="navbar-right">
				<view class="points-display">
					<text class="points-label">积分</text>
					<text class="points-value">{{ currentPoints }}</text>
				</view>
			</view>
		</view>

		<!-- 顶部公告 -->
		<view class="announcement-bar">
			<text class="announcement-icon">📢</text>
			<text class="announcement-content">红娘活动报名开始啦！用积分兑换活动名额，积分兑好礼！</text>
		</view>

		<!-- 活动分类标签 - 横向滚动 -->
		<scroll-view scroll-x class="category-scroll" show-scrollbar="false">
			<view class="category-list">
				<view 
					v-for="(tab, index) in tabs" 
					:key="index"
					class="category-item" 
					:class="{ active: activeTab === tab.type }"
					@click="switchTab(tab.type)"
				>
					{{ tab.name }}
				</view>
			</view>
		</scroll-view>

		<!-- 活动列表 -->
		<view class="activity-grid">
			<view class="activity-card" v-for="(item, index) in activityList" :key="index" @click="goToDetail(item)">
				<image :src="item.coverImage || item.cover_image" class="activity-image" mode="aspectFill"></image>
				<view class="activity-info">
					<view class="activity-name">{{ item.name }}</view>
					<view class="activity-meta">
						<text class="activity-location">📍 {{ item.location }}</text>
					</view>
					<view class="activity-footer">
						<view class="activity-points">
							<text class="points-symbol">💎</text>
							<text class="points-value">{{ item.points }}</text>
						</view>
						<text class="activity-participants">{{ item.participants || 0 }}人参加</text>
					</view>
					<view class="activity-btn" 
						:class="{ 'btn-disabled': hasExchanged(item.id) }"
						@click.stop="handleActivityAction(item)">
						{{ hasExchanged(item.id) ? '已报名' : '积分兑换' }}
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-if="activityList.length === 0 && !loading">
			<image src="https://img.icons8.com/color/96/000000/calendar--v1.png" class="empty-icon"></image>
			<text class="empty-text">暂无活动</text>
			<text class="empty-subtext">敬请期待更多精彩活动</text>
		</view>

		<!-- 加载更多 -->
		<view class="load-more" v-if="hasMore && activityList.length > 0">
			<text class="load-text">{{ loading ? '加载中...' : '上拉加载更多' }}</text>
		</view>
		<view class="no-more" v-else-if="activityList.length > 0">
			<text class="no-more-text">没有更多了</text>
		</view>
	</view>
</template>

<script>
import api from '../../utils/api.js'

export default {
	data() {
		return {
			activityList: [],
			pageNum: 1,
			pageSize: 10,
			hasMore: true,
			loading: false,
			currentPoints: 0,
			makerId: null,
			exchangedActivities: [],
			tabs: [
				{ name: '全部活动', type: 'all' },
				{ name: '推荐活动', type: 'premium' }
			],
			activeTab: 'all'
		}
	},

	onLoad() {
		this.initData()
	},

	onReachBottom() {
		if (this.hasMore && !this.loading) {
			this.pageNum++
			this.loadActivityList()
		}
	},

	methods: {
		// 初始化数据
		async initData() {
			const userInfo = uni.getStorageSync('userInfo')
			// 兼容多种字段名
			this.makerId = userInfo && (userInfo.matchmakerId || userInfo.makerId || userInfo.matchmaker_id)
			
			// 如果没有makerId，尝试通过userId获取
			if (!this.makerId && userInfo && userInfo.userId) {
				try {
					const res = await api.matchmaker.getByUserId(userInfo.userId)
					let matchmaker = res
					if (res && res.data) {
						matchmaker = res.data
					}
					if (matchmaker) {
						this.makerId = matchmaker.matchmakerId || matchmaker.matchmaker_id
					}
				} catch (e) {
					
				}
			}
			
			if (!this.makerId) {
				uni.showToast({
					title: '请先登录红娘账号',
					icon: 'none'
				})
				return
			}
			
			await this.loadMakerInfo()
			await this.loadExchangedActivities()
			await this.loadActivityList()
		},

		// 加载红娘信息（包括积分）
		async loadMakerInfo() {
			try {
				const res = await api.matchmaker.getDetail(this.makerId)
				// 兼容不同的返回格式
				const makerInfo = res && res.data ? res.data : res
				if (makerInfo) {
					this.currentPoints = makerInfo.points || makerInfo.point || 0
				
				}
			} catch (error) {
			
				this.currentPoints = 0
			}
		},

		// 加载已兑换的活动列表
		async loadExchangedActivities() {
			try {
				const list = await api.matchmakerActivity.getPurchasedList(this.makerId)
				if (list && list.length > 0) {
					this.exchangedActivities = list.map(item => item.activity_id || item.activityId)
				}
			} catch (error) {
				
				this.exchangedActivities = []
			}
		},

		// 加载活动列表
		async loadActivityList() {
			if (this.loading) return
			this.loading = true

			try {
				const params = {
					categoryType: this.activeTab
				}
				const data = await api.matchmakerActivity.getList(params)

				if (data && data.length > 0) {
					this.activityList = [...this.activityList, ...data]
					this.hasMore = data.length >= this.pageSize
				} else {
					this.hasMore = false
				}
			} catch (error) {
				
				this.hasMore = false
			} finally {
				this.loading = false
			}
		},

		// 切换分类标签
		switchTab(type) {
			if (this.activeTab === type) return
			this.activeTab = type
			this.pageNum = 1
			this.activityList = []
			this.loadActivityList()
		},

		// 检查是否已兑换
		hasExchanged(activityId) {
			return this.exchangedActivities.includes(activityId)
		},

		// 处理活动操作（兑换或查看详情）
		async handleActivityAction(item) {
			if (this.hasExchanged(item.id)) {
				// 已兑换，跳转到详情页
				uni.navigateTo({
					url: `/pages/matchmaker-workbench/activity-detail?id=${item.id}`
				})
			} else {
				// 未兑换，显示兑换确认
				uni.showModal({
					title: '确认兑换',
					content: `是否用 ${item.points} 积分兑换"${item.name}"活动？`,
					confirmText: '确认',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							this.exchangeActivity(item)
						}
					}
				})
			}
		},

		// 兑换活动
		async exchangeActivity(item) {
			const pointsNeeded = item.points || 0
			
			if (this.currentPoints < pointsNeeded) {
				uni.showToast({
					title: '积分不足',
					icon: 'none'
				})
				return
			}

			try {
			
				const result = await api.matchmakerActivity.exchange({
					makerId: this.makerId,
					activityId: item.id,
					points: pointsNeeded
				})
				
				
				// API请求成功（request函数已处理code=200的情况，能走到这里说明已成功）
				uni.showToast({
					title: '兑换成功',
					icon: 'success'
				})
				this.currentPoints -= pointsNeeded
				this.exchangedActivities.push(item.id)
				
				// 跳转到详情页
				setTimeout(() => {
					uni.navigateTo({
						url: `/pages/matchmaker-workbench/activity-detail?id=${item.id}`
					})
				}, 500)
			} catch (error) {
				
				uni.showToast({
					title: error.message || '兑换失败',
					icon: 'none'
				})
			}
		},

		// 跳转到活动详情
		goToDetail(item) {
			uni.navigateTo({
				url: `/pages/matchmaker-workbench/activity-detail?id=${item.id}`
			})
		},

		// 返回
		goBack() {
			uni.navigateBack()
		}
	}
}
</script>

<style lang="scss" scoped>
	.activities-page {
		min-height: 100vh;
		background-color: #FFF9F9;
		padding-top: 90rpx;
	}

	/* 自定义导航栏 */
	.custom-navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		background: linear-gradient(135deg, #FCE4EC 0%, #F8BBD0 100%);
		z-index: 999;

		.navbar-left,
		.navbar-right {
			width: 80rpx;
		}

		.back-icon {
			font-size: 40rpx;
			color: #333333;
			font-weight: bold;
		}

		.navbar-title {
			flex: 1;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}

		.points-display {
			display: flex;
			align-items: center;
			gap: 8rpx;
			background-color: rgba(255, 255, 255, 0.8);
			padding: 8rpx 16rpx;
			border-radius: 20rpx;

			.points-label {
				font-size: 24rpx;
				color: #666666;
			}

			.points-value {
				font-size: 28rpx;
				color: #FF6B8A;
				font-weight: bold;
			}
		}
	}

	/* 公告栏 */
	.announcement-bar {
		display: flex;
		align-items: center;
		gap: 12rpx;
		padding: 16rpx 20rpx;
		background-color: #FFF3E0;
		margin: 10rpx 0;

		.announcement-icon {
			font-size: 28rpx;
			flex-shrink: 0;
		}

		.announcement-content {
			font-size: 24rpx;
			color: #E65100;
			flex: 1;
		}
	}

	/* 分类标签 - 横向滚动 */
	.category-scroll {
		white-space: nowrap;
		padding: 0 20rpx;
		margin: 10rpx 0;
	}

	.category-list {
		display: flex;
		gap: 12rpx;
	}

	.category-item {
		display: inline-block;
		padding: 12rpx 24rpx;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		font-size: 26rpx;
		color: #666666;
		border: 2rpx solid #EEEEEE;
		transition: all 0.3s ease;

		&.active {
			background-color: #9C27B0;
			color: #FFFFFF;
			border-color: #9C27B0;
		}
	}

	/* 活动列表 - 两列布局 */
	.activity-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
		padding: 20rpx;

		.activity-card {
			position: relative;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			overflow: hidden;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);

			.activity-image {
				width: 100%;
				height: 240rpx;
				background-color: #F5F5F5;
			}

			.activity-info {
				padding: 20rpx;

				.activity-name {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 10rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}

				.activity-meta {
					margin-bottom: 15rpx;

					.activity-location {
						font-size: 24rpx;
						color: #666666;
					}
				}

				.activity-footer {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 15rpx;

					.activity-points {
						display: flex;
						align-items: center;

						.points-symbol {
							font-size: 24rpx;
							margin-right: 5rpx;
						}

						.points-value {
							font-size: 26rpx;
							color: #FF6B8A;
							font-weight: bold;
						}
					}

					.activity-participants {
						font-size: 22rpx;
						color: #999999;
					}
				}

				.activity-btn {
					width: 100%;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #9C27B0;
					color: #FFFFFF;
					border-radius: 30rpx;
					font-size: 26rpx;
					transition: all 0.3s ease;

					&:active {
						background-color: #7B1FA2;
					}

					&.btn-disabled {
						background-color: #CCCCCC;
						color: #999999;
					}
				}
			}
		}
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;

		.empty-icon {
			width: 120rpx;
			height: 120rpx;
			opacity: 0.5;
			margin-bottom: 20rpx;
		}

		.empty-text {
			font-size: 32rpx;
			color: #666666;
			margin-bottom: 10rpx;
		}

		.empty-subtext {
			font-size: 26rpx;
			color: #999999;
		}
	}

	/* 加载更多 */
	.load-more,
	.no-more {
		padding: 30rpx 0;
		text-align: center;

		.load-text,
		.no-more-text {
			font-size: 24rpx;
			color: #999999;
		}
	}
</style>