zdtap-uniapp-main/components/ActivityItem.vue

<template>
	<view class="activity-item flex" v-if="isActivityVisible" @click="handleClick">
		<view class="store-tag" v-if="item.activityType === 1">指定门店</view>
		<view class="left">
			<image :src="item.brandLogo" class="brand-logo"></image>
			<view class="status-content">
				<text v-if="activityState === 'recruiting' && item.remainingDays > 0" class="status-label">招募剩余天数</text>
				<text v-else-if="activityState === 'recruiting' && item.remainingDays <= 0" class="status-label">活动招募已结束</text>
				<text v-else-if="activityState === 'inProgress'" class="status-label">距离达成还剩</text>
				<view class="status-box">
					<template v-if="activityState === 'recruiting' && item.remainingDays > 0">
						<view class="days-left">
							<text class="days-num">{{item.remainingDays}}</text>
							<text class="days-unit">天</text>
						</view>
					</template>
					<template v-else-if="activityState === 'recruiting' && item.remainingDays <= 0">
						<view class="status-text">
							<view class="end-date">{{formatDate(item.endDate)}}</view>
							<view>已结束</view>
						</view>
					</template>
					<template v-else-if="activityState === 'inProgress'">
						<view v-if="item.remainingBeerCount > 0" class="beer-count">
							<text class="count-num">{{item.remainingBeerCount}}</text>
							<text class="count-unit">桶</text>
						</view>
					</template>
					<template v-else-if="activityState === 'completed'">
						<view class="status-text">
							{{!item.barAwardStatus ? '待兑付' : '已完成'}}
						</view>
					</template>
				</view>
			</view>
		</view>
		<view class="right">
			<view class="title">{{ item.breweryName }}</view>
			<view class="sub">时间：首次扫码开始累计 <text class="highlight">{{item.duration}}天内</text></view>
			<view class="sub">目标：{{item.beerScope === 0 ? '品牌全系' : '以下'}}酒款累积扫码 ≥ <text class="highlight">{{ item.activityTarget}}桶</text></view>
			<scroll-view v-if="item.beers" scroll-x="true" class="scroll-img" enhanced show-scrollbar="false">
				<view class="beer-box" v-for="(beer, beerIndex) in item.beers" :key="beerIndex" @click.stop="handleReview(beer)">
					<image v-if="beer.cover" :src="beer.cover" class="cover" mode="aspectFit"></image>
				</view>
			</scroll-view>
			<view class="reward-info">
				<text v-if="item.activityRewardType == 2 || (item.activityRewardType == 1 && item.activityRewardGoods)" class="zeng">赠</text>
				<text v-if="item.activityRewardType == 1 && item.activityRewardGoods" class="reward-text">{{item.activityRewardGoods.goodsName}} {{item.activityRewardGoods.specs}} 奖励数量：{{item.activityRewardCount}}份</text>
				<text v-if="item.activityRewardType == 2" class="reward-text">品牌啤酒币 奖励数量 {{item.activityRewardCount}}枚</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'activity-item',
	props: {
		item: {
			type: Object,
			required: true
		}
	},
	created() {
		console.log('ActivityItem created', this.item)
	},
	mounted() {
		console.log('ActivityItem mounted', this.item)
	},
	computed: {
		// 判断活动是否可显示
		isActivityVisible() {
			// 获取用户所在城市
			const userCity = uni.getStorageSync('userCity');
			// 未登录用户或未设置城市的用户，只显示全国活动
			if (!userCity) {
				return this.item.city === '全国';
			}
			// 已登录用户，显示全国活动和所在城市的活动
			return this.item.city === '全国' || this.item.city === userCity;
		},
		activityState() {
			if (this.item.activityStatus === 1) {
				return 'recruiting';
			} else if (this.item.activityStatus === 2) {
				return 'inProgress';
			} else if (this.item.activityStatus === 3) {
				return 'completed';
			}
			return '';
		}
	},
	methods: {
		handleClick() {
			console.log('ActivityItem clicked', this.item)
			this.$emit('click', this.item)
		},
		handleReview(beer) {
			console.log('ActivityItem review clicked', beer)
			this.$emit('review', beer)
		},
		formatDate(dateString) {
			if (!dateString) return '';
			const date = new Date(dateString);
			const year = date.getFullYear();
			const month = (date.getMonth() + 1).toString().padStart(2, '0');
			const day = date.getDate().toString().padStart(2, '0');
			return `${year}-${month}-${day}`;
		}
	}
}
</script>

<style lang="scss" scoped>
/* 活动项容器样式 */
.activity-item {
	position: relative;
	width: 702rpx;
	margin-bottom: 48rpx;
	transition: transform 0.2s ease;
	
	&:active {
		transform: scale(0.98);
	}
	
	.store-tag {
		position: absolute;
		top: 24rpx;
		right: 24rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		background-color: #D42E78;
		padding: 6rpx 16rpx;
		border-radius: 8rpx;
		z-index: 2;
		box-shadow: 0 2rpx 6rpx rgba(212, 46, 120, 0.3);
	}
	
	.right {
		width: 702rpx;
		min-height: 428rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 24rpx 32rpx 24rpx 200rpx;	
		box-sizing: border-box;
		box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.08);
		position: relative;
		z-index: 1;
		border: 1px solid #EFEDE9;

		.title {
			font-size: 36rpx;
			font-weight: bold;
			line-height: 48rpx;
			color: #0B0E26;
			margin-bottom: 16rpx;
		}

		.sub {
			font-size: 28rpx;
			font-weight: 500;
			line-height: 44rpx;
			color: #0B0E26;
			margin-bottom: 16rpx;
			
			.highlight {
				color: #D42E78;
				font-weight: bold;
			}
		}

		.scroll-img {
			width: 100%;
			display: flex;
			flex-direction: row;
			white-space: nowrap;
			height: 200rpx;
			margin-bottom: 16rpx;
			overflow-x: auto;
			padding: 4rpx 0;

			.beer-box {
				width: 120rpx;
				height: 170rpx;
				background: #FFFFFF;
				margin-right: 8rpx;
				box-sizing: border-box;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				transition: transform 0.2s;
				border-radius: 12rpx;
				overflow: hidden;
				position: relative;

				&:active {
					transform: scale(0.95);
				}

				.cover {
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
					object-fit: contain;
				}
			}
		}

		.reward-info {
			display: flex;
			align-items: center;
			margin-top: 8rpx;
		}

		.zeng {
			font-size: 22rpx;
			font-weight: bold;
			line-height: normal;
			text-align: center;
			color: #0B0E26;
			padding: 8rpx 16rpx;
			border-radius: 10rpx;
			background: #FEE034;
			margin-right: 20rpx;
			box-shadow: 0 2rpx 4rpx rgba(254, 224, 52, 0.3);
		}
		
		.reward-text {
			color: #0B0E26;
			font-size: 26rpx;
			line-height: 36rpx;
		}
	}

	.left {
		position: absolute;
		left: 0;
		top: -12rpx;
		height: calc(100% + 24rpx);
		width: 180rpx;
		padding: 40rpx 24rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		border: 1px solid #EFEDE9;
		z-index: 3;
		box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		align-items: center;

		.brand-logo {
			width: 132rpx;
			height: 132rpx;
			border-radius: 6rpx;
			margin-bottom: 40rpx;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		}

		.status-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.status-label {
				color: #606060;
				font-size: 24rpx;
				font-weight: bold;
				white-space: nowrap;
				margin-bottom: 46rpx;
			}

			.status-box {
				text-align: center;
				
				.days-left {
					display: flex;
					align-items: baseline;
					justify-content: center;
					
					.days-num {
						font-size: 72rpx;
						color: #D42E78;
						font-weight: bold;
						line-height: 1;
					}
					
					.days-unit {
						font-size: 24rpx;
						color: #606060;
						margin-left: 4rpx;
					}
				}
				
				.beer-count {
					display: flex;
					align-items: baseline;
					justify-content: center;
					
					.count-num {
						font-size: 48rpx;
						color: #19367A;
						font-weight: bold;
						line-height: 1;
					}
					
					.count-unit {
						font-size: 24rpx;
						color: #606060;
						margin-left: 4rpx;
					}
				}
				
				.status-text {
					font-size: 28rpx;
					color: #19367A;
					font-weight: bold;
					
					.end-date {
						font-size: 20rpx;
						color: #606060;
						font-weight: normal;
						margin-bottom: 24rpx;
					}
				}
			}
		}
	}
}
</style>