yijianbao_user_uniapp/pages_store/components/ActivityBanner.vue

<template>
	<view class="activity-banner" v-if="list && list.length > 0">
		<swiper class="activity-swiper" :style="{height: swiperHeight}" circular autoplay interval="5000" duration="500">
			<swiper-item v-for="(item, index) in list" :key="item.activityId">
				<view class="activity-card type-reduction" >
					<view class="card-left">
						<view class="type-badge">{{ item.tierTypeLabel }}</view>
						<view class="activity-title">{{ item.title }}</view>
						<view class="rule-summary">{{ item.ruleSummary }}</view>
						<view class="scope-info">
							<u-icon name="tags" size="12" color="inherit"></u-icon>
							<text class="scope-text">{{ item.scopeSummary }}</text>
						</view>
					</view>
					<view class="card-right">
						<view class="stack-info">{{ item.stackableText }}</view>
						<view class="limit-info">{{ item.limitPerUserText }}</view>
						<view class="end-time">至{{ formatDate(item.endTime) }}</view>
					</view>
					<!-- 装饰背景 -->
					<view class="decoration-circle"></view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				swiperHeight: '160rpx'
			}
		},
		watch: {
			list: {
				handler(val) {
					if (val && val.length > 0) {
						this.updateHeight();
					}
				},
				immediate: true
			}
		},
		methods: {
			updateHeight() {
				this.$nextTick(() => {
					setTimeout(() => {
						const query = uni.createSelectorQuery().in(this);
						query.selectAll('.activity-card').boundingClientRect(data => {
							if (data && data.length > 0) {
								// 取所有卡片中的最大高度
								let maxHeight = 0;
								data.forEach(item => {
									if (item.height > maxHeight) maxHeight = item.height;
								});
								if (maxHeight > 0) {
									this.swiperHeight = maxHeight + 'px';
									this.$emit('heightChange');
								}
							}
						}).exec();
					}, 200);
				});
			},
			formatDate(dateStr) {
				if (!dateStr) return '';
				// 简单的日期格式化，只保留月日
				const date = new Date(dateStr.replace(/-/g, '/'));
				if (isNaN(date.getTime())) return dateStr;
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				return `${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.activity-banner {
		padding: 20rpx 32rpx;
		background: #fff;
	}

	.activity-swiper {
		min-height: 160rpx;
	}

	.activity-card {
		min-height: 160rpx;
		height: auto;
		border-radius: 16rpx;
		padding: 20rpx 24rpx;
		display: flex;
		justify-content: space-between;
		position: relative;
		overflow: hidden;
		color: #fff;
		
		&.type-reduction {
			background: linear-gradient(135deg, #FF7E5F 0%, #FF5C03 100%);
		}
		
		&.type-discount {
			background: linear-gradient(135deg, #66b2ef 0%, #2583EB 100%);
		}

		.card-left {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			z-index: 1;
			overflow: hidden;
			
			.type-badge {
				display: inline-block;
				align-self: flex-start;
				font-size: 18rpx;
				padding: 2rpx 12rpx;
				background: rgba(255, 255, 255, 0.2);
				border: 1rpx solid rgba(255, 255, 255, 0.4);
				border-radius: 20rpx;
				margin-bottom: 8rpx;
			}
			
			.activity-title {
				font-size: 28rpx;
				font-weight: bold;
				line-height: 1.2;
				margin-bottom: 4rpx;
			}
			
			.rule-summary {
				font-size: 24rpx;
				font-weight: 500;
				margin-bottom: 8rpx;
			}
			
			.scope-info {
				display: flex;
				align-items: center;
				font-size: 20rpx;
				opacity: 0.9;
				
				.scope-text {
					margin-left: 6rpx;
				}
			}
		}

		.card-right {
			width: 200rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-end;
			text-align: right;
			z-index: 1;
			border-left: 1rpx dashed rgba(255, 255, 255, 0.4);
			padding-left: 16rpx;
			
			.stack-info, .limit-info {
				font-size: 20rpx;
				margin-bottom: 4rpx;
			}
			
			.end-time {
				font-size: 18rpx;
				opacity: 0.8;
				margin-top: 8rpx;
			}
		}

		.decoration-circle {
			position: absolute;
			right: -40rpx;
			bottom: -40rpx;
			width: 120rpx;
			height: 120rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 50%;
			z-index: 0;
		}
	}
</style>