zdtap-uniapp-main/components/ActivityItem.vue

<template>
	<view class="activity-item flex" @click="handleClick">
		<view class="left flex flex-col justify-between align-center">
			<image :src="item.brandLogo" style="width: 140rpx;height: 140rpx;border-radius: 6rpx;"></image>
			<text style="color: #606060;font-size: 24rpx;font-weight: bold;white-space: nowrap;">
				<block v-if="activityState === 'recruiting'">活动招募还剩</block>
				<block v-else-if="activityState === 'inProgress'">距离达成还剩</block>
			</text>
			<view class="status-box">
				<block v-if="activityState === 'recruiting'">
					<view class="days-left">
						<text style="font-size: 72rpx; color: #DE3C4B;">{{item.remainingDays}}</text>
						<text style="font-size: 24rpx;color: #606060;">天</text>
					</view>
				</block>
				<block v-else-if="activityState === 'inProgress'">
					<view v-if="item.remainingBeerCount > 0">
						<text style="font-size: 24rpx;color: #0B0E26;">{{item.remainingBeerCount}}</text>
						<text style="font-size: 24rpx;color: #0B0E26;">桶</text>
					</view>
				</block>
				<block v-else-if="activityState === 'completed'">
					<view v-if="!item.barAwardStatus" style="font-size: 24rpx;color: #19367A;font-weight: bold;">待兑付</view>
					<view v-else style="font-size: 24rpx;color: #19367A;font-weight: bold;">已完成</view>
				</block>
			</view>
		</view>
		<view class="right">
			<view class="title">{{ item.breweryName }}</view>
			<view class="sub">时间：首次扫码开始累计 <text style="color:#DE3C4B">{{item.duration}}天内</text></view>
			<view class="sub">目标：全系列酒款累积扫码 ≥ {{ item.activityTarget}}桶</view>
			<scroll-view v-if="item.beers" scroll-x="true" class="scroll-img">
				<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"></image>
				</view>
			</scroll-view>
			<view class="flex align-center">
				<text v-if="item.activityRewardType == 2 || (item.activityRewardType == 1 && item.activityRewardGoods)" class="zeng">赠</text>
				<text v-if="item.activityRewardType == 1 && item.activityRewardGoods" style="color: #0B0E26;font-size: 24rpx;">{{item.activityRewardGoods.goodsName}} * {{item.activityRewardCount}}</text>
				<text v-if="item.activityRewardType == 2" style="color: #0B0E26;font-size: 24rpx;">啤酒币 * {{item.activityRewardCount}}个</text>
				<text v-if="item.barAwardStatus" style="color: #0B0E26;font-size: 24rpx;">（已发放）</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'activity-item',
	props: {
		item: {
			type: Object,
			required: true
		}
	},
	computed: {
		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() {
			this.$emit('click', this.item)
		},
		handleReview(beer) {
			this.$emit('review', beer)
		}
	}
}
</script>

<style lang="scss" scoped>
/* 活动项容器样式 */
.activity-item {
	position: relative;
	width: 702rpx;
	margin-bottom: 48rpx;
	
	// &:last-child {
	// 	margin-bottom: 0;
	// }
	
	.right {
		width: 702rpx;
		min-height: 428rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 24rpx 24rpx 24rpx 200rpx;
		box-sizing: border-box;
		box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);

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

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

		.scroll-img {
			width: 100%;
			display: flex;
			flex-direction: row;
			white-space: nowrap;
			height: 144rpx;
			margin-bottom: 18rpx;
			overflow-x: auto;

			.beer-box {
				width: 100rpx;
				background: #FFFFFF;
				margin-right: 20rpx;
				box-sizing: border-box;
				display: inline-block;

				.cover {
					width: 100rpx;
					height: 144rpx;
					border-radius: 10rpx;
				}
			}
		}

		.zeng {
			font-size: 20rpx;
			font-weight: bold;
			line-height: normal;
			text-align: center;
			color: #0B0E26;
			padding: 8rpx 12rpx;
			border-radius: 10rpx;
			background: #FEE034;
			margin-right: 20rpx;
		}
	}

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

		.brand-logo {
			width: 148rpx;
			height: 148rpx;
			border-radius: 12rpx;
			margin-bottom: 16rpx;
		}

		.brewery-name {
			font-size: 24rpx;
			font-weight: bold;
			color: #0B0E26;
			text-align: center;
			margin-bottom: 8rpx;
		}

		.city {
			font-size: 20rpx;
			color: #9D9D9D;
			text-align: center;
			margin-bottom: 16rpx;
		}

		.status-text {
			font-size: 20rpx;
			color: #0B0E26;
			text-align: center;
			margin-bottom: 8rpx;
		}

		.remaining-days {
			font-size: 40rpx;
			font-weight: bold;
			color: #D42E78;
			text-align: center;
			margin-bottom: 8rpx;
		}

		.days-unit {
			font-size: 20rpx;
			color: #D42E78;
			text-align: center;
		}
	}
}
</style>