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;"></image>
			<text>活动状态</text>
			<view v-if="item.audit_status == 0" style="color: #9E9E9E;font-size: 24rpx;">待审核</view>
			<view v-if="item.audit_status == 2" style="color: #DE3C4B;font-size: 24rpx;">未通过</view>
			<view v-if="item.audit_status == 1">
				<block v-if="item.activity_status == 1">
					<view class="margin-bottom-xs" style="color: #9E9E9E;font-size: 24rpx;">招募进行中</view>
					<view>
						<text style="font-size: 72rpx; color: #DE3C4B;">{{item.remainingDays}}</text>天
					</view>
				</block>
				<block v-else>
					<view style="color: #9E9E9E;font-size: 24rpx;">活动已结束</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>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'activity-item',
	props: {
		item: {
			type: Object,
			required: true
		}
	},
	methods: {
		handleClick() {
			this.$emit('click', this.item)
		},
		handleReview(beer) {
			this.$emit('review', beer)
		}
	}
}
</script>

<style lang="scss" scoped>
.activity-item {
	border-radius: 20rpx;
	background: #FDFDFD;
	box-sizing: border-box;
	border: 1px solid #F2F2F2;
	width: 702rpx;
	margin-bottom: 32rpx;
	
	.left {
		padding: 24rpx 20rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		border: 1px solid #EFEDE9;
		width: 180rpx;
		margin-top: -10rpx;
		margin-bottom: -10rpx;
	}

	.right {
		padding: 20rpx;
		flex: 1;
		
		.title {
			font-family: Source Han Sans;
			font-size: 28rpx;
			font-weight: bold;
			line-height: 30rpx;
			color: #0B0E26;
			margin-bottom: 20rpx;
		}

		.sub {
			font-family: Source Han Sans;
			font-size: 24rpx;
			font-weight: 500;
			line-height: 30rpx;
			color: #0B0E26;
			margin-bottom: 16rpx;
		}

		.scroll-img {
			width: 500rpx;
			display: flex;
			flex-direction: row;
			white-space: nowrap;
			height: 144rpx;
			margin-bottom: 20rpx;

			.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-family: Source Han Sans;
			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;
		}
	}
}
</style>