zdtap-uniapp-main/pagesActivity/scanResult.vue

<template>
	<view class="scan-result">
		<!-- 已失效状态 -->
		<template v-if="errorType === 'expired' || info.qrcode.qrcodeStatus == 2">
			<view class="scan-result__header">
				<image src="/static/information.svg" class="scan-result__icon"></image>
				<text class="scan-result__title">该二维码无法领取品牌返利</text>
				<text class="scan-result__desc">失效原因：{{ info.qrcode.remark}}</text>
			</view>

			<view class="scan-result__content">
				<view class="scan-result__section">
					<text class="scan-result__section-title">商品详细</text>
					<view class="product-card" v-if="beer">
						<view class="product-card__image">
							<image :src="beer.cover" mode="aspectFill"></image>
						</view>
						<view class="product-card__info">
							<text class="product-card__name">{{ beer.beerName }}</text>
							<text class="product-card__brand">{{ beer.brandName }}</text>
							<view class="product-card__detail">
								<text class="product-card__label">生产日期：</text>
								<text class="product-card__value">{{ beer.launchDate }}</text>
							</view>
							<view class="product-card__detail">
								<text class="product-card__label">净含量：</text>
								<text class="product-card__value">{{ beer.netContent }}</text>
							</view>
							<view class="product-card__rating">
								<view class="rating-stars">
									<text class="cuIcon-favorfill"></text>
									<text class="rating-value">{{ beer.beerOverallRating }}</text>
								</view>
								<text class="rating-count">{{ beer.beerReviewsCount }} 条评论</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="scan-result__footer">
				<button class="scan-result__btn scan-result__btn--back" @click="back">
					<image src="/static/undo.svg"></image>
					<text>返回</text>
				</button>
				<button class="scan-result__btn scan-result__btn--share" @click="share">
					<image src="/static/send-2.svg"></image>
					<text>分享上新</text>
				</button>
			</view>
		</template>

		<!-- 领取成功状态 - 刚刚领取成功 -->
		<template v-if="info.qrcode.qrcodeStatus == 1 && isJustReceived">
			<view class="scan-result__header scan-result__header--success">
				<image src="/static/tick-circle.svg" class="scan-result__icon"></image>
				<text class="scan-result__title">领取成功！</text>
			</view>

			<view class="scan-result__content">
				<view class="scan-result__section">
					<text class="scan-result__section-title">商品详细</text>
					<view class="product-card" v-if="beer">
						<view class="product-card__image">
							<image :src="beer.cover" mode="aspectFill"></image>
						</view>
						<view class="product-card__info">
							<text class="product-card__name">{{ beer.beerName }}</text>
							<text class="product-card__brand">{{ beer.brandName }}</text>
							<view class="product-card__detail">
								<text class="product-card__label">生产日期：</text>
								<text class="product-card__value">{{ beer.launchDate }}</text>
							</view>
							<view class="product-card__detail">
								<text class="product-card__label">净含量：</text>
								<text class="product-card__value">{{ beer.netContent }}</text>
							</view>
							<view class="product-card__rating">
								<view class="rating-stars">
									<text class="cuIcon-favorfill"></text>
									<text class="rating-value">{{ beer.beerOverallRating }}</text>
								</view>
								<text class="rating-count">{{ beer.beerReviewsCount }} 条评论</text>
							</view>
						</view>
					</view>
				</view>

				<view class="scan-result__section">
					<text class="scan-result__section-title">品牌福利</text>
					<view class="benefit-card">
						<view class="benefit-card__title">{{ beer.scanCoinCount}}枚（{{beer.brandName}}）品牌啤酒币已到账</view>
						<text class="benefit-card__subtitle">品牌啤酒币可用于兑换好礼</text>
					</view>
				</view>
			</view>

			<view class="scan-result__footer">
				<button class="scan-result__btn scan-result__btn--back" @click="toWinelist">
					<image src="@/static/document.png"></image>
					<text>生成酒单</text>
				</button>
				<button class="scan-result__btn scan-result__btn--share" @click="share">
					<image src="/static/send-2.svg"></image>
					<text>分享上新</text>
				</button>
			</view>
		</template>

		<!-- 再次扫码已领取的商品 -->
		<template v-if="info.qrcode.qrcodeStatus == 1 && !isJustReceived">
			<view class="scan-result__header">
				<image src="/static/information.svg" class="scan-result__icon"></image>
				<text class="scan-result__title">该桶产品已于 {{ info.qrcode.verifyTime }} 扫码领取成功</text>
			</view>

			<view class="scan-result__content">
				<view class="scan-result__section">
					<text class="scan-result__section-title">商品详细</text>
					<view class="product-card" v-if="beer">
						<view class="product-card__image">
							<image :src="beer.cover" mode="aspectFill"></image>
						</view>
						<view class="product-card__info">
							<text class="product-card__name">{{ beer.beerName }}</text>
							<text class="product-card__brand">{{ beer.brandName }}</text>
							<view class="product-card__detail">
								<text class="product-card__label">生产日期：</text>
								<text class="product-card__value">{{ beer.launchDate }}</text>
							</view>
							<view class="product-card__detail">
								<text class="product-card__label">净含量：</text>
								<text class="product-card__value">{{ beer.netContent }}</text>
							</view>
							<view class="product-card__rating">
								<view class="rating-stars">
									<text class="cuIcon-favorfill"></text>
									<text class="rating-value">{{ beer.beerOverallRating }}</text>
								</view>
								<text class="rating-count">{{ beer.beerReviewsCount }} 条评论</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="scan-result__footer">
				<button class="scan-result__btn scan-result__btn--back" @click="toWinelist">
					<image src="@/static/document.png"></image>
					<text>生成酒单</text>
				</button>
				<button class="scan-result__btn scan-result__btn--share" @click="share">
					<image src="/static/send-2.svg"></image>
					<text>分享上新</text>
				</button>
			</view>
		</template>

		<!-- 待领取状态 -->
		<template v-if="info.qrcode.qrcodeStatus == 0">
			<view class="scan-result__content">
				<view class="scan-result__section">
					<text class="scan-result__section-title">商品详细</text>
					<view class="product-card" v-if="beer">
						<view class="product-card__image">
							<image :src="beer.cover" mode="aspectFill"></image>
						</view>
						<view class="product-card__info">
							<text class="product-card__name">{{ beer.beerName }}</text>
							<text class="product-card__brand">{{ beer.brandName }}</text>
							<view class="product-card__detail">
								<text class="product-card__label">生产日期：</text>
								<text class="product-card__value">{{ beer.launchDate }}</text>
							</view>
							<view class="product-card__detail">
								<text class="product-card__label">净含量：</text>
								<text class="product-card__value">{{ beer.netContent }}</text>
							</view>
							<view class="product-card__rating">
								<view class="rating-stars">
									<text class="cuIcon-favorfill"></text>
									<text class="rating-value">{{ beer.beerOverallRating }}</text>
								</view>
								<text class="rating-count">{{ beer.beerReviewsCount }} 条评论</text>
							</view>
						</view>
					</view>
				</view>

				<view class="scan-result__section">
					<text class="scan-result__section-title">品牌福利</text>
					<view class="benefit-card">
						<view class="benefit-card__title">可获得 {{ beer.scanCoinCount }}枚{{beer.brandName}}品牌啤酒币</view>
						<text class="benefit-card__subtitle">品牌啤酒币可用于兑换好礼</text>
					</view>
				</view>

				<view class="activity-notice" v-if="activitySum > 1">
					<image src="/static/warning.svg" mode="aspectFit"></image>
					<text>该产品有多个进行中活动重叠，请选择要计入的活动</text>
				</view>

				<view class="scan-result__section" v-if="activity && activity.length > 0">
					<text class="scan-result__section-title">品牌活动</text>
					<view class="activity-list">
						<view 
							class="activity-item" 
							v-for="(item, index) in activity" 
							:key="index"
							:class="{'activity-item--selected': activityId === item.id}"
							@click="selectPPF(item)"
						>
							<!-- <view class="activity-item__header">
								<text class="activity-item__title">{{ item.breweryName }}</text>
							</view> -->
							<view class="activity-item__tag-container">
								<text class="activity-item__tag activity-item__tag--store" v-if="item.activityType === 1">指定门店</text>
								<text class="activity-item__tag activity-item__tag--new" v-if="item.activityType === 2">招募活动</text>
							</view>
							<view class="activity-item__content">
								<view class="activity-item__progress">
									<text>距离累计目标达成还剩</text>
									<text class="activity-item__remaining-count">{{item.remainingBeerCount}}桶</text>
								</view>
								<view class="activity-item__time">
									<text>时间：首次扫码开始累计</text>
									<text class="activity-item__duration">{{item.duration}}天内</text>
								</view>
								<view class="activity-item__deadline" v-if="item.remainingDays">
									<text>活动截止还剩</text>
									<text class="activity-item__remaining-days">{{item.remainingDays}}天</text>
								</view>
								<view class="activity-item__target">
									<text>目标：{{item.beerScope === 0 ? '品牌全系' : '以下'}}酒款累积扫码 ≥ </text>
									<text class="activity-item__count">{{ item.activityTarget}}桶</text>
								</view>
								<scroll-view v-if="item.beers && item.beers.length > 0" 
									scroll-x="true" 
									class="activity-item__beers" 
									enhanced 
									show-scrollbar="false"
								>
									<view 
										class="activity-item__beer" 
										v-for="(beer, beerIndex) in item.beers" 
										:key="beerIndex"
									>
										<image v-if="beer.cover" :src="beer.cover" mode="aspectFit"></image>
									</view>
								</scroll-view>
								<view class="activity-item__reward">
									<text class="activity-item__reward-tag">赠</text>
									<view class="activity-item__reward-content" v-if="item.activityRewardType == 1 && item.activityRewardGoods">
										<image 
											v-if="item.activityRewardGoods.cover" 
											:src="item.activityRewardGoods.cover" 
											class="activity-item__reward-image"
											mode="aspectFit"
										></image>
										<view class="activity-item__reward-info">
											<text class="activity-item__reward-name">{{item.activityRewardGoods.goodsName}}</text>
											<text class="activity-item__reward-specs">规格：{{item.activityRewardGoods.specs}}</text>
											<text class="activity-item__reward-count">数量：{{item.activityRewardCount}}份</text>
										</view>
									</view>
									<view class="activity-item__reward-content" v-if="item.activityRewardType == 2">
										<image 
											src="/static/coin.png" 
											class="activity-item__reward-image"
											mode="aspectFit"
										></image>
										<view class="activity-item__reward-info">
											<text class="activity-item__reward-name">品牌啤酒币</text>
											<text class="activity-item__reward-count">数量：{{item.activityRewardCount}}枚</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="scan-result__section" v-if="platformActivity && platformActivity.length > 0">
					<text class="scan-result__section-title">平台活动</text>
					<view class="activity-list">
						<view 
							class="activity-item" 
							v-for="(item, index) in platformActivity" 
							:key="index"
							:class="{'activity-item--selected': platformActivityId === item.id}"
							@click="selectPlatform(item)"
						>
							<view class="activity-item__header">
								<text class="activity-item__title">{{ item.activityName }}</text>
							</view>
							<view class="activity-item__tag-container">
								<text class="activity-item__tag activity-item__tag--store" v-if="item.activityType === 1">指定门店</text>
								<text class="activity-item__tag activity-item__tag--new" v-if="item.activityType === 2">招募活动</text>
							</view>
							<view class="activity-item__content">
								<view class="activity-item__progress">
									<text>距离达成还剩</text>
									<text class="activity-item__remaining-count">{{item.remainingBeerCount}}桶</text>
								</view>
								<view class="activity-item__time">
									<text>时间：首次扫码开始累计</text>
									<text class="activity-item__duration">{{item.duration}}天内</text>
								</view>
								<view class="activity-item__deadline" v-if="item.remainingDays">
									<text>活动截止还剩</text>
									<text class="activity-item__remaining-days">{{item.remainingDays}}天</text>
								</view>
								<view class="activity-item__target">
									<text>目标：{{item.beerScope === 0 ? '品牌全系' : '以下'}}酒款累积扫码 ≥ </text>
									<text class="activity-item__count">{{ item.activityTarget}}桶</text>
								</view>
								<view class="activity-item__reward">
									<text class="activity-item__reward-tag">赠</text>
									<view class="activity-item__reward-content" v-if="item.activityRewardType == 1 && item.activityRewardGoods">
										<image 
											v-if="item.activityRewardGoods.cover" 
											:src="item.activityRewardGoods.cover" 
											class="activity-item__reward-image"
											mode="aspectFit"
										></image>
										<view class="activity-item__reward-info">
											<text class="activity-item__reward-name">{{item.activityRewardGoods.goodsName}}</text>
											<text class="activity-item__reward-specs">规格：{{item.activityRewardGoods.specs}}</text>
											<text class="activity-item__reward-count">数量：{{item.activityRewardCount}}份</text>
										</view>
									</view>
									<view class="activity-item__reward-content" v-if="item.activityRewardType == 2">
										<image 
											src="/static/coin.png" 
											class="activity-item__reward-image"
											mode="aspectFit"
										></image>
										<view class="activity-item__reward-info">
											<text class="activity-item__reward-name">品牌啤酒币</text>
											<text class="activity-item__reward-count">数量：{{item.activityRewardCount}}枚</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="scan-result__footer">
				<button class="scan-result__btn scan-result__btn--back" @click="back">
					<image src="/static/undo.svg"></image>
					<text>回头再说</text>
				</button>
				<button class="scan-result__btn scan-result__btn--share" @click="showConfirmPopup">
					<image src="/static/send-2.svg"></image>
					<text>立即领取</text>
				</button>
			</view>

			<!-- 确认弹窗 -->
			<uni-popup ref="confirmPopup" type="dialog">
				<uni-popup-dialog
					type="info"
					title="领取确认"
					content="每款酒品仅可领取一次，领取后将获得相应的品牌福利，是否确认领取？"
					:before-close="true"
					@confirm="confirmReceive"
					@close="closePopup"
				></uni-popup-dialog>
			</uni-popup>
		</template>
	</view>
</template>

<script>
	import {
		consumeCode,
		getQrcodeInfo
	} from '@/api/bar.js'
	import BeerCard from '@/components/BeerCard.vue'
	
	export default {
		components: {
			BeerCard
		},
		data() {
			return {
				showError: false,
				info: {
					qrcode: {
						qrcodeStatus: null, // 0: 待领取, 1: 领取成功, 2: 已失效, 3: 转为赠品
					},
				},
				activity: [], // 活动列表
				platformActivity: [], // 平台活动
				activityList: [],
				activitySum: 0, // 活动数量
				beer: null,
				result: null, // 扫码结果 code
				activityId: null, // 活动id
				platformActivityId: null, // 平台活动id
				latitude: null,
				longitude: null,
				errorType: null, // 错误类型: location-位置错误, expired-已失效
				isJustReceived: false, // 是否刚刚领取成功
			};
		},
		onLoad({
			result,
			latitude,
			longitude
		}) {
			this.result = result
			this.latitude = latitude
			this.longitude = longitude
			this.isJustReceived = false // 重置领取状态
			// 查询二维码信息
			this.getQrcodeInfoFun(result)
		},
		methods: {
			// 查询二维码信息
			getQrcodeInfoFun(code) {
				getQrcodeInfo({
					code,
					latitude: this.latitude,
					longitude: this.longitude
				}).then(res => {
					console.log(res.data)
					this.showError = false // 重置错误状态
					this.errorType = null // 重置错误类型
					this.info = res.data
					this.beer = res.data.beer
					this.activity = res.data.activity || []
					this.platformActivity = res.data.platformActivity || []
					this.activitySum = 0 // 重置活动数量
					if (this.activity && this.activity.length > 0) {
						this.activitySum += this.activity.length
						this.activityId = this.activity[0].id
					}
					if (this.platformActivity && this.platformActivity.length > 0) {
						this.activitySum += this.platformActivity.length
						this.platformActivityId = this.platformActivity[0].id
					}
				}).catch(err => {
					console.error('获取二维码信息失败:', err)
					this.showError = true
					if (err.code === 500 && err.msg === '请在酒吧附近100米范围内扫码') {
						this.errorType = 'location'
					} else if (err.code === 500 && err.msg.includes('已失效')) {
						this.errorType = 'expired'
					} else {
						this.errorType = 'expired'
						uni.showToast({
							title: err.msg || '获取信息失败',
							icon: 'none'
						})
					}
				})
			},
			// 显示确认弹窗
			showConfirmPopup() {
				this.$refs.confirmPopup.open();
			},
			
			// 关闭弹窗
			closePopup() {
				this.$refs.confirmPopup.close();
			},
			
			// 确认领取
			confirmReceive() {
				this.handleReceive();
				this.closePopup();
			},
			// 立即领取
			handleReceive() {
				const data = {
					code: this.result,
					latitude: this.latitude,
					longitude: this.longitude
				}
				if (this.activityId) {
					data.activityId = this.activityId
				}
				if (this.platformActivityId) {
					data.platformActivityId = this.platformActivityId
				}
				
				// 显示加载提示
				uni.showLoading({
					title: '领取中...',
					mask: true
				})
				
				consumeCode(data).then(res => {
					console.log('领取响应:', res)
					// 验证响应数据
					if (res.code === 200 && res.data) {
						uni.hideLoading()
						uni.showToast({
							title: '领取成功',
							icon: 'success'
						})
						// 设置刚刚领取成功状态
						this.isJustReceived = true
						// 延迟刷新数据，确保后端数据已更新
						setTimeout(() => {
							this.getQrcodeInfoFun(this.result)
						}, 1000)
					} else {
						throw new Error('领取失败：响应数据异常')
					}
				}).catch(err => {
					console.error('领取失败:', err)
					uni.hideLoading()
					
					if (err.code === 500 && err.msg === '请在酒吧附近100米范围内扫码') {
						this.showError = true
						this.errorType = 'location'
					} else if (err.code === 500 && err.msg.includes('reward_sn')) {
						uni.showToast({
							title: '系统维护中，请稍后再试',
							icon: 'none',
							duration: 2000
						})
					} else if (err.code === 500 && err.msg.includes('已领取')) {
						uni.showToast({
							title: '该酒品已领取过，请勿重复领取',
							icon: 'none',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: err.msg || '领取失败，请重试',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			back() {
				if (this.info.qrcode.qrcodeStatus == 1) {
					// 领取成功时返回首页
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else {
					// 其他情况正常返回上一页
					uni.navigateBack()
				}
			},
			// 选择品牌方活动
			selectPPF(item) {
				this.activityId = item.id
			},
			// 选择平台活动
			selectPlatform(item) {
				this.platformActivityId = item.id
			},
			// 生成酒单
			toWinelist() {
				uni.navigateTo({
					url: '/pagesActivity/winelist?beerId=' + this.beer.id
				})
			},
			share() {
				uni.downloadFile({
					url: this.beer.cover,
					success: (res) => {
						console.log(res)
						// #ifdef MP-WEIXIN
						uni.showShareImageMenu({
							provider: 'weixin',
							path: res.tempFilePath,
							shareType: 0,
							success: (res) => {
								console.log(res)
							},
							fail: (err) => {
								console.log(err)
							}
						})
						// #endif
					}
				})
			},
			formatTime(timestamp) {
				const date = new Date(timestamp);
				return date.toLocaleString();
			}
		}
	}
</script>

<style lang="scss" scoped>
.scan-result {
	min-height: 100vh;
	background: #F5F7FA;
	padding: 32rpx 26rpx 160rpx;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	position: relative;

	&__header {
		text-align: center;
		margin-bottom: 40rpx;
		padding-top: 40rpx;

		&--success {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 20rpx;
		}
	}

	&__icon {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 24rpx;
	}

	&__title {
		display: block;
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 16rpx;
	}

	&__desc {
		display: block;
		font-size: 28rpx;
		color: #666;
	}

	&__content {
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	&__section {
		background: #FFF;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
	}

	&__section-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 24rpx;
		display: block;
		position: relative;
		padding-left: 24rpx;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 6rpx;
			height: 32rpx;
			background: linear-gradient(180deg, #D42E78 0%, #19367A 100%);
			border-radius: 3rpx;
		}
	}

	&__footer {
		margin-top: auto;
		display: flex;
		justify-content: space-between;
		gap: 24rpx;
		padding: 24rpx 32rpx env(safe-area-inset-bottom);
		background: #fff;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
		z-index: 99;
	}

	&__btn {
		flex: 1;
		height: 88rpx;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		border: none;
		padding: 0;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 8rpx;
		}

		&--back {
			background: #F7F8FA;
			color: #4E63E0;
		}

		&--share {
			background: #19367A;
			color: #FFF;
		}

		&:active {
			transform: scale(0.98);
			opacity: 0.9;
		}
	}
}

.product-card {
	display: flex;
	gap: 24rpx;

	&__image {
		width: 200rpx;
		height: 280rpx;
		border-radius: 12rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	&__info {
		flex: 1;
	}

	&__name {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 8rpx;
		display: block;
	}

	&__brand {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 16rpx;
		display: block;
	}

	&__detail {
		display: flex;
		margin-bottom: 8rpx;
	}

	&__label {
		font-size: 26rpx;
		color: #999;
	}

	&__value {
		font-size: 26rpx;
		color: #333;
	}

	&__rating {
		display: flex;
		align-items: center;
		margin-top: 16rpx;

		.rating-stars {
			display: flex;
			align-items: center;
			margin-right: 16rpx;

			.cuIcon-favorfill {
				color: #FFBC11;
				margin-right: 4rpx;
			}

			.rating-value {
				font-size: 28rpx;
				color: #333;
			}
		}

		.rating-count {
			font-size: 24rpx;
			color: #999;
		}
	}
}

.benefit-card {
	background: #FFF;
	padding: 24rpx;
	border-radius: 16rpx;

	&__title {
		font-size: 32rpx;
		font-weight: 600;
		color: #3D3D3D;
		margin-bottom: 12rpx;
		display: block;
	}

	&__subtitle {
		font-size: 24rpx;
		color: rgba(151, 151, 151, 0.75);
		font-weight: 400;
	}
}

.activity-notice {
	display: flex;
	align-items: center;
	background: #FFF9E6;
	padding: 20rpx 24rpx;
	border-radius: 12rpx;
	margin-bottom: 24rpx;

	image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 12rpx;
	}

	text {
		font-size: 26rpx;
		color: #FF9900;
	}
}

.activity-list {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.activity-item {
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 32rpx;
	border: 1px solid #EFEDE9;
	box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.08);
	transition: all 0.3s;
	position: relative;

	&--selected {
		border-color: #19367A;
		background: rgba(25, 54, 122, 0.05);
	}

	&__header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	&__title {
		font-size: 36rpx;
		font-weight: bold;
		color: #0B0E26;
	}

	&__tag-container {
		position: absolute;
		top: 32rpx;
		left: 32rpx;
		display: flex;
		gap: 8rpx;
		z-index: 1;
	}

	&__tag {
		font-size: 20rpx;
		color: #FFFFFF;
		padding: 6rpx 16rpx;
		border-radius: 8rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.3);

		&--store {
			background-color: #D42E78;
		}

		&--new {
			background-color: #19367A;
		}

		&--limited {
			background-color: #FF6B35;
		}
	}

	&__content {
		padding-top: 48rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	&__progress {
		font-size: 28rpx;
		font-weight: 500;
		color: #0B0E26;
		line-height: 44rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	&__time, &__target {
		font-size: 28rpx;
		font-weight: 500;
		color: #0B0E26;
		line-height: 44rpx;
	}

	&__duration, &__count {
		color: #D42E78;
		font-weight: bold;
	}

	&__beers {
		width: 100%;
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		height: 200rpx;
		margin: 4rpx 0 24rpx;
		overflow-x: auto;
	}

	&__beer {
		width: 120rpx;
		height: 170rpx;
		background: #FFFFFF;
		margin-right: 8rpx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 12rpx;
		overflow: hidden;

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

	&__deadline {
		font-size: 28rpx;
		font-weight: 500;
		color: #0B0E26;
		line-height: 44rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	&__remaining-days {
		color: #FF6B35;
		font-weight: bold;
	}

	&__remaining-count {
		color: #19367A;
		font-weight: bold;
		font-size: 32rpx;
	}

	&__reward {
		background: #F7F8FA;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-top: 20rpx;
	}

	&__reward-content {
		display: flex;
		align-items: center;
		gap: 20rpx;
		margin-top: 16rpx;
	}

	&__reward-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 12rpx;
		background: #FFFFFF;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	&__reward-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	&__reward-name {
		font-size: 28rpx;
		font-weight: 500;
		color: #0B0E26;
	}

	&__reward-specs {
		font-size: 24rpx;
		color: #666666;
	}

	&__reward-count {
		font-size: 24rpx;
		color: #D42E78;
		font-weight: 500;
	}
}
</style>