<template>
	<view class="page">
		<!-- 错误状态页面 -->
		<template v-if="showError || info.qrcode.qrcodeStatus == 2">
			<view class="error-page">
				<!-- 位置错误 -->
				<template v-if="errorType === 'location'">
					<image src="/static/information.svg" class="status-icon"></image>
					<view class="status-title">您现在未在您门店定位的范围</view>
					<view class="status-desc">请在门店范围100米内重新扫码</view>
				</template>
				
				<!-- 已失效 -->
				<template v-if="errorType === 'expired' || info.qrcode.qrcodeStatus == 2">
					<image src="/static/information.svg" class="status-icon"></image>
					<view class="status-title">{{ info.qrcode.statusDesc || '二维码已失效' }}</view>
					<view class="status-desc">{{ info.qrcode.statusMessage || '该二维码已超出可用范围' }}</view>
				</template>

				<!-- 识别产品 -->
				<view class="product-section">
					<view class="section-header">
						<image src="/static/scan.svg" class="section-icon"></image>
						<text>识别产品</text>
					</view>
					
					<!-- 商品信息卡片 -->
					<view v-if="beer" class="product-card">
						<view class="product-content">
							<view class="product-image">
								<image :src="beer.cover" class="cover"></image>
							</view>	
							<view class="product-info">
								<view class="product-name">{{ beer.beerName }}</view>
								<view class="product-brand">{{ beer.brandName }}</view>
								<view class="product-rating">
									<text class="rating-value">{{ beer.beerOverallRating || '4.9' }}</text>
									<text class="rating-count">{{ beer.beerReviewsCount || '20' }} reviews</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 返回按钮 -->
				<view class="error-action">
					<view class="action-btn" @click="back">
						<image src="/static/undo.svg" class="btn-icon"></image>
						<text>返回</text>
					</view>
				</view>
			</view>
		</template>

		<!-- 正常状态页面 -->
		<template v-else>
			<!-- 待领取状态 -->
			<template v-if="info.qrcode.qrcodeStatus == 0">
				<view class="flex-1" style="overflow-y: auto;">
					<!-- 扫码成功提示 -->
					<view class="scs-state-box">
						<image src="/static/tick-circle.svg" class="img"></image>
						<text>扫码成功！</text>
					</view>
					
					<!-- 产品信息卡片 -->
					<view v-if="beer" class="product-card">
						<view class="section-title">
							<text>商品详细</text>
						</view>
						<view class="product-content">
							<view class="product-image">
								<image :src="beer.cover" class="cover"></image>
							</view>	
							<view class="product-info">
								<view class="product-name">{{ beer.beerName }}</view>
								<view class="product-brand">{{ beer.brandName }}</view>
								<view class="product-details">
									<view class="detail-item">
										<text class="detail-label">生产日期：</text>
										<text class="detail-value">{{ beer.launchDate }}</text>
									</view>
									<view class="detail-item">
										<text class="detail-label">净含量：</text>
										<text class="detail-value">{{ beer.netContent }}</text>
									</view>
								</view>
								<view class="product-rating">
									<view class="rating-stars">
										<text class="cuIcon-favorfill" style="color: #FFBC11;"></text>
										<text class="rating-value">{{ beer.beerOverallRating }}</text>
									</view>
									<text class="rating-count">{{beer.beerReviewsCount}} 条评论</text>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 品牌福利卡片 -->
					<view v-if="beer && beer.scanCoinCount" class="benefit-card">
						<view class="section-title">
							<text>品牌福利</text>
						</view>
						<view class="benefit-content">
							<view class="benefit-title">{{ beer.scanCoinCount}}枚 {{beer.brandName}} 啤酒币待领取</view>
							<text class="benefit-subtitle">品牌啤酒币可用于兑换好礼</text>
						</view>
					</view>
					
					<!-- 活动选择提示 -->
					<view v-if="activitySum > 1" class="activity-tip">
						<text class="tip-icon">!</text>
						<text class="tip-text">该产品有多个进行中活动重叠，请<text class="highlight">选择要计入的活动</text></text>
					</view>
					
					<!-- 待领取状态活动列表 -->
					<template>
						<!-- 品牌活动 -->
						<view v-for="(it, index) in activity" :key="index" 
							class="activity-card"
							:class="{'activity-card-active': activityId === it.id}"
							@click="selectPPF(it)">
							<view class="activity-content">
								<view class="activity-left">
									<view v-if="it.brandLogo" class="brand-logo-container">
										<image :src="it.brandLogo" class="brand-logo"></image>
									</view>
									<view v-else class="brand-logo-placeholder">
										<text class="placeholder-text">品牌图标</text>
									</view>
									<view class="progress-info">
										<text class="progress-label">距离达成差</text>
										<view class="progress-value">
											<text v-if="it.remainingBeerCount <= 0" class="completed">已达标</text>
											<text v-else class="remaining">{{ it.remainingBeerCount}}桶</text>
										</view>
									</view>
								</view>
								<view class="activity-right">
									<view class="activity-header">
										<view class="activity-name">{{ it.breweryName }}</view>
										<view class="activity-tag" v-if="it.activityType == 1">指定门店</view>
										<view class="activity-tag" v-if="it.activityType == 2">招募活动</view>
									</view>
									<view class="activity-details">
										<view class="detail-row">
											<text class="detail-label">活动时间：</text>
											<text class="detail-value">首次扫码开始计时 <text class="highlight">{{it.duration}}天内</text></text>
										</view>
										<view class="detail-row">
											<text class="detail-label">活动目标：</text>
											<text class="detail-value">{{ it.beer_scope === 0 ? '全系列酒款' : '指定酒款' }}累计扫码≥{{ it.activityTarget}}桶</text>
										</view>
									</view>
									<scroll-view v-if="it.beers" scroll-x="true" class="beer-scroll">
										<view class="beer-item" v-for="(beer, beerIndex) in it.beers" :key="beerIndex">
											<image v-if="beer.cover" :src="beer.cover" class="beer-cover"></image>
										</view>
									</scroll-view>
									<view v-else class="beer-scroll-placeholder">
										<text class="placeholder-text">暂无酒款信息</text>
									</view>
									<view class="reward-info">
										<text class="reward-label">赠</text>
										<text v-if="it.activityRewardType == 1 && it.activityRewardGoods" class="reward-value">
											{{it.activityRewardGoods.goodsName}} * {{it.activityRewardCount}}
										</text>
										<text v-else-if="it.activityRewardType == 2" class="reward-value">
											啤酒币 * {{it.activityRewardCount}}个
										</text>
										<text v-else class="reward-value error-text">奖励内容获取失败</text>
									</view>
								</view>
							</view>
						</view>

						<!-- 平台活动 -->
						<view v-for="(it, index) in platformActivity" :key="index"
							class="activity-card"
							:class="{'activity-card-active': platformActivityId === it.id}"
							@click="selectPlatform(it)">
							<view class="activity-content">
								<view class="activity-left">
									<view v-if="it.brandLogo" class="brand-logo-container">
										<image :src="it.brandLogo" class="brand-logo"></image>
									</view>
									<view v-else class="brand-logo-placeholder">
										<text class="placeholder-text">品牌图标</text>
									</view>
									<view class="progress-info">
										<text class="progress-label">距离达成还剩</text>
										<view class="progress-value">
											<text v-if="it.remainingBeerCount <= 0" class="completed">已达标</text>
											<text v-else class="remaining">{{ it.remainingBeerCount}}桶</text>
										</view>
									</view>
								</view>
								<view class="activity-right">
									<view class="activity-header">
										<view class="activity-name">{{ it.breweryName }}</view>
										<view class="activity-tag" v-if="it.activityRewardType == 1">实物奖励</view>
										<view class="activity-tag" v-if="it.activityRewardType == 2">啤酒币</view>
									</view>
									<view class="activity-details">
										<view class="detail-row">
											<text class="detail-label">活动时间：</text>
											<text class="detail-value">首次扫码开始计时 <text class="highlight">{{it.duration}}天内</text></text>
										</view>
										<view class="detail-row">
											<text class="detail-label">活动目标：</text>
											<text class="detail-value">{{ it.beer_scope === 0 ? '全系列酒款' : '以下酒款' }}累计扫码 ≥ {{ it.activityTarget}}桶</text>
										</view>
									</view>
									<scroll-view scroll-x="true" class="beer-scroll">
										<view class="beer-item" v-for="(beer, beerIndex) in it.beers" :key="beerIndex">
											<image v-if="beer.cover" :src="beer.cover" class="beer-cover"></image>
										</view>
									</scroll-view>
									<view v-else class="beer-scroll-placeholder">
										<text class="placeholder-text">暂无酒款信息</text>
									</view>
									<view class="reward-info">
										<text class="reward-label">奖励</text>
										<text v-if="it.activityRewardType == 1 && it.activityRewardGoods" class="reward-value">
											{{it.activityRewardGoods.goodsName}} * {{it.activityRewardCount}}
										</text>
										<text v-else-if="it.activityRewardType == 2" class="reward-value">
											啤酒币 * {{it.activityRewardCount}}个
										</text>
										<text v-else class="reward-value error-text">奖励内容获取失败</text>
									</view>
								</view>
							</view>
						</view>
					</template>
				</view>
				
				<!-- 待领取状态底部操作区 -->
				<view class="footer">
					<view class="action-buttons">
						<view class="action-btn cancel-btn" @click="back">
							<image src="/static/undo.svg" class="btn-icon"></image>
							<text>回头再说</text>
						</view>
						<view class="action-btn primary-btn" @click="handleReceive">
							<image src="/static/send-2.svg" class="btn-icon"></image>
							<text>立即领取</text>
						</view>
					</view>
				</view>
			</template>

			<!-- 领取成功状态 -->
			<template v-if="info.qrcode.qrcodeStatus == 1">
				<view class="flex-1" style="overflow-y: auto;">
					<!-- 领取成功提示 -->
					<view class="lq-state-box">
						<image src="/static/information.svg" class="img"></image>
						<text>该桶产品已于 {{ info.qrcode.verifyTime }} 扫码领取返利</text>
					</view>
					
					<!-- 领取成功状态提示 -->
					<view class="scs-state-box">
						<image src="/static/tick-circle.svg" class="img"></image>
						<text>领取成功！</text>
					</view>
					
					<!-- 产品信息卡片 -->
					<view v-if="beer" class="product-card">
						<view class="section-title">
							<text>商品详细</text>
						</view>
						<view class="product-content">
							<view class="product-image">
								<image :src="beer.cover" class="cover"></image>
							</view>	
							<view class="product-info">
								<view class="product-name">{{ beer.beerName }}</view>
								<view class="product-brand">{{ beer.brandName }}</view>
								<view class="product-details">
									<view class="detail-item">
										<text class="detail-label">生产日期：</text>
										<text class="detail-value">{{ beer.launchDate }}</text>
									</view>
									<view class="detail-item">
										<text class="detail-label">净含量：</text>
										<text class="detail-value">{{ beer.netContent }}</text>
									</view>
								</view>
								<view class="product-rating">
									<view class="rating-stars">
										<text class="cuIcon-favorfill" style="color: #FFBC11;"></text>
										<text class="rating-value">{{ beer.beerOverallRating }}</text>
									</view>
									<text class="rating-count">{{beer.beerReviewsCount}} 条评论</text>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 品牌福利卡片 -->
					<view class="benefit-card">
						<view class="section-title">
							<text>品牌福利已领取</text>
						</view>
						<view class="benefit-content">
							<view class="benefit-title">{{ beer.scanCoinCount}}枚（{{beer.brandName}}）品牌啤酒币已到账</view>
							<text class="benefit-subtitle">品牌啤酒币可用于兑换好礼</text>
						</view>
					</view>
					
					<!-- 已选择的活动列表 -->
					<template>
						<!-- 已选择的品牌活动 -->
						<view v-for="(it, index) in activity.filter(item => item.id === activityId)" :key="index" 
							class="activity-card">
							<view class="activity-content">
								<view class="activity-left">
									<image :src="it.brandLogo" class="brand-logo"></image>
									<view class="progress-info">
										<text class="progress-label">距离达成还剩</text>
										<view class="progress-value">
											<text v-if="it.remainingBeerCount <= 0" class="completed">已达标</text>
											<text v-else class="remaining">{{ it.remainingBeerCount}}桶</text>
										</view>
									</view>
								</view>
								<view class="activity-right">
									<view class="activity-header">
										<view class="activity-name">{{ it.breweryName }}</view>
										<view class="activity-tag" v-if="it.activityRewardType == 1">实物奖励</view>
										<view class="activity-tag" v-if="it.activityRewardType == 2">啤酒币</view>
									</view>
									<view class="activity-details">
										<view class="detail-row">
											<text class="detail-label">活动时间：</text>
											<text class="detail-value">首次扫码开始计时 <text class="highlight">{{it.duration}}天内</text></text>
										</view>
										<view class="detail-row">
											<text class="detail-label">活动目标：</text>
											<text class="detail-value">{{ it.beer_scope === 0 ? '全系列酒款' : '以下酒款' }}累计扫码 ≥ {{ it.activityTarget}}桶</text>
										</view>
									</view>
									<scroll-view v-if="it.beers" scroll-x="true" class="beer-scroll">
										<view class="beer-item" v-for="(beer, beerIndex) in it.beers" :key="beerIndex">
											<image v-if="beer.cover" :src="beer.cover" class="beer-cover"></image>
										</view>
									</scroll-view>
									<view class="reward-info">
										<text class="reward-label">奖励</text>
										<text v-if="it.activityRewardType == 1 && it.activityRewardGoods" class="reward-value">
											{{it.activityRewardGoods.goodsName}} * {{it.activityRewardCount}}
										</text>
										<text v-if="it.activityRewardType == 2" class="reward-value">
											啤酒币 * {{it.activityRewardCount}}个
										</text>
									</view>
								</view>
							</view>
						</view>

						<!-- 已选择的平台活动 -->
						<view v-for="(it, index) in platformActivity.filter(item => item.id === platformActivityId)" :key="index"
							class="activity-card">
							<view class="activity-content">
								<view class="activity-left">
									<image :src="it.brandLogo" class="brand-logo"></image>
									<view class="progress-info">
										<text class="progress-label">距离达成还剩</text>
										<view class="progress-value">
											<text v-if="it.remainingBeerCount <= 0" class="completed">已达标</text>
											<text v-else class="remaining">{{ it.remainingBeerCount}}桶</text>
										</view>
									</view>
								</view>
								<view class="activity-right">
									<view class="activity-header">
										<view class="activity-name">{{ it.breweryName }}</view>
										<view class="activity-tag" v-if="it.activityRewardType == 1">实物奖励</view>
										<view class="activity-tag" v-if="it.activityRewardType == 2">啤酒币</view>
									</view>
									<view class="activity-details">
										<view class="detail-row">
											<text class="detail-label">活动时间：</text>
											<text class="detail-value">首次扫码开始计时 <text class="highlight">{{it.duration}}天内</text></text>
										</view>
										<view class="detail-row">
											<text class="detail-label">活动目标：</text>
											<text class="detail-value">{{ it.beer_scope === 0 ? '全系列酒款' : '以下酒款' }}累计扫码 ≥ {{ it.activityTarget}}桶</text>
										</view>
									</view>
									<scroll-view scroll-x="true" class="beer-scroll">
										<view class="beer-item" v-for="(beer, beerIndex) in it.beers" :key="beerIndex">
											<image v-if="beer.cover" :src="beer.cover" class="beer-cover"></image>
										</view>
									</scroll-view>
									<view class="reward-info">
										<text class="reward-label">奖励</text>
										<text v-if="it.activityRewardType == 1 && it.activityRewardGoods" class="reward-value">
											{{it.activityRewardGoods.goodsName}} * {{it.activityRewardCount}}
										</text>
										<text v-if="it.activityRewardType == 2" class="reward-value">
											啤酒币 * {{it.activityRewardCount}}个
										</text>
									</view>
								</view>
							</view>
						</view>
					</template>
				</view>
				
				<!-- 领取成功状态底部操作区 -->
				<view class="footer">
					<view class="action-buttons">
						<view class="action-btn cancel-btn" @click="toWinelist">
							<image src="@/static/document.png" class="btn-icon"></image>
							<text>生成酒单</text>
						</view>
						<view class="action-btn primary-btn" @click="share">
							<image src="/static/send-2.svg" class="btn-icon"></image>
							<text>分享上新</text>
						</view>
					</view>
				</view>
			</template>

			<!-- 转为赠品状态 -->
			<template v-if="info.qrcode.qrcodeStatus == 3">
				<view class="flex-1" style="overflow-y: auto;">
					<!-- 赠品状态提示 -->
					<view class="lq-state-box gift-state">
						<image src="/static/gift.png" class="img"></image>
						<text>该桶产品已转为赠品</text>
					</view>
					
					<!-- 产品信息卡片 -->
					<view v-if="beer" class="product-card">
						<view class="section-title">
							<text>商品详细</text>
						</view>
						<view class="product-content">
							<view class="product-image">
								<image :src="beer.cover" class="cover"></image>
							</view>	
							<view class="product-info">
								<view class="product-name">{{ beer.beerName }}</view>
								<view class="product-brand">{{ beer.brandName }}</view>
								<view class="product-details">
									<view class="detail-item">
										<text class="detail-label">生产日期：</text>
										<text class="detail-value">{{ beer.launchDate }}</text>
									</view>
									<view class="detail-item">
										<text class="detail-label">净含量：</text>
										<text class="detail-value">{{ beer.netContent }}</text>
									</view>
								</view>
								<view class="product-rating">
									<view class="rating-stars">
										<text class="cuIcon-favorfill" style="color: #FFBC11;"></text>
										<text class="rating-value">{{ beer.beerOverallRating }}</text>
									</view>
									<text class="rating-count">{{beer.beerReviewsCount}} 条评论</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 赠品状态底部操作区 -->
				<view class="footer">
					<view class="action-buttons">
						<view class="action-btn cancel-btn" @click="toWinelist">
							<image src="@/static/document.png" class="btn-icon"></image>
							<text>生成酒单</text>
						</view>
						<view class="action-btn gift-btn" @click="share">
							<image src="/static/send-2.svg" class="btn-icon"></image>
							<text>分享赠品</text>
						</view>
					</view>
				</view>
			</template>
		</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-已失效
			};
		},
		onLoad({
			result,
			latitude,
			longitude
		}) {
			this.result = result
			this.latitude = latitude
			this.longitude = longitude
			// 查询二维码信息
			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'
						})
					}
				})
			},
			// 立即领取
			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
				}
				consumeCode(data).then(res => {
					console.log(res)
					uni.showToast({
						title: '领取成功',
						icon: 'success'
					})
					this.getQrcodeInfoFun(this.result)
				}).catch(err => {
					console.error('领取失败:', err)
					if (err.code === 500 && err.msg === '请在酒吧附近100米范围内扫码') {
						this.showError = true
					} else {
						uni.showToast({
							title: err.msg || '领取失败',
							icon: 'none'
						})
					}
				})
			},
			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
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100vh;
		background-color: #F5F7FA;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0rpx 26rpx 60rpx;
		
		.error-page {
			padding: 120rpx 32rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.status-icon {
				width: 160rpx;
				height: 160rpx;
				margin-bottom: 32rpx;
			}
			
			.status-title {
				font-size: 36rpx;
				color: #333333;
				font-weight: 600;
				margin-bottom: 16rpx;
				text-align: center;
			}
			
			.status-desc {
				font-size: 28rpx;
				color: #666666;
				margin-bottom: 8rpx;
				text-align: center;
			}
		}
		
		.product-section {
			margin-top: 48rpx;
			padding: 0 32rpx;
			
			.section-header {
				display: flex;
				align-items: center;
				gap: 12rpx;
				margin-bottom: 24rpx;
				
				.section-icon {
					width: 40rpx;
					height: 40rpx;
				}
				
				text {
					font-size: 32rpx;
					color: #333333;
					font-weight: 500;
				}
			}
		}
		
		.product-card {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 24rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
			margin-bottom: 32rpx;
			
			.product-content {
				display: flex;
				gap: 24rpx;
				
				.product-image {
					width: 160rpx;
					height: 240rpx;
					border-radius: 12rpx;
					overflow: hidden;
					flex-shrink: 0;
					
					.cover {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
				
				.product-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					
					.product-name {
						font-size: 32rpx;
						color: #333333;
						font-weight: 600;
						margin-bottom: 12rpx;
					}
					
					.product-brand {
						font-size: 28rpx;
						color: #666666;
						margin-bottom: 16rpx;
					}
					
					.product-details {
						margin-bottom: 16rpx;
						
						.detail-item {
							display: flex;
							align-items: center;
							margin-bottom: 8rpx;
							
							.detail-label {
								font-size: 26rpx;
								color: #999999;
								margin-right: 8rpx;
							}
							
							.detail-value {
								font-size: 26rpx;
								color: #333333;
							}
						}
					}
					
					.product-rating {
						display: flex;
						align-items: center;
						gap: 12rpx;
						
						.rating-stars {
							display: flex;
							align-items: center;
							gap: 8rpx;
							
							.rating-value {
								font-size: 26rpx;
								color: #333333;
								font-weight: 500;
							}
						}
						
						.rating-count {
							font-size: 24rpx;
							color: #999999;
						}
					}
				}
			}
		}
		
		.lq-state-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 92rpx;
			padding-top: 116rpx;

			.img {
				width: 160rpx;
				height: 160rpx;
				margin-bottom: 26rpx;
			}
			
			text {
				font-size: 32rpx;
				color: #5F5F63;
				font-weight: 400;
			}
		}

		.scs-state-box {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 40rpx;
			padding-top: 40rpx;
			font-size: 36rpx;
			color: #1E2019;
			font-weight: 600;

			.img {
				width: 160rpx;
				height: 160rpx;
				margin-right: 48rpx;
			}
		}
		
		/* 卡片通用样式 */
		.section-title {
			margin-bottom: 28rpx;
			
			text {
				font-size: 36rpx;
				color: #0B0E26;
				font-weight: 600;
				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;
				}
			}
		}
		
		/* 福利卡片样式 */
		.benefit-card {
			background: #FFFFFF;
			border-radius: 24rpx;
			box-shadow: 0px 8rpx 24rpx rgba(0, 0, 0, 0.08);
			padding: 36rpx;
			margin-bottom: 40rpx;
			
			.benefit-content {
				.benefit-title {
					font-size: 32rpx;
					font-weight: 600;
					color: #3D3D3D;
					margin-bottom: 12rpx;
				}
				
				.benefit-subtitle {
					font-size: 24rpx;
					color: rgba(151, 151, 151, 0.75);
					font-weight: 400;
				}
			}
		}
		
		/* 活动提示样式 */
		.activity-tip {
			display: flex;
			align-items: center;
			background: rgba(254, 224, 52, 0.2);
			border-radius: 16rpx;
			padding: 20rpx 28rpx;
			margin-bottom: 32rpx;
			box-shadow: 0px 4rpx 12rpx rgba(0, 0, 0, 0.05);
			
			.tip-icon {
				width: 40rpx;
				height: 40rpx;
				background: #FEE034;
				color: #0B0E26;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				margin-right: 16rpx;
			}
			
			.tip-text {
				font-size: 24rpx;
				color: #5E5F60;
				font-weight: 400;
				
				.highlight {
					color: #DE3C4B;
					font-weight: 500;
				}
			}
		}
		
		/* 活动卡片样式 */
		.activity-card {
			background: #FFFFFF;
			border-radius: 24rpx;
			box-shadow: 0px 8rpx 24rpx rgba(0, 0, 0, 0.08);
			padding: 28rpx;
			margin-bottom: 32rpx;
			border: 2rpx solid transparent;
			transition: all 0.3s;
			
			&.activity-card-active {
				border-color: #FEE034;
				background: rgba(254, 224, 52, 0.05);
				box-shadow: 0px 12rpx 32rpx rgba(0, 0, 0, 0.12);
			}
			
			.activity-content {
				display: flex;
				
				.activity-left {
					width: 180rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 20rpx;
					background: #F9F9F9;
					border-radius: 16rpx;
					margin-right: 28rpx;
					box-shadow: 0px 4rpx 12rpx rgba(0, 0, 0, 0.05);
					
					.brand-logo-container {
						width: 140rpx;
						height: 140rpx;
						border-radius: 16rpx;
						margin-bottom: 20rpx;
						overflow: hidden;
						
						.brand-logo {
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}
					
					.brand-logo-placeholder {
						width: 140rpx;
						height: 140rpx;
						border-radius: 16rpx;
						margin-bottom: 20rpx;
						background: #EEEEEE;
						display: flex;
						align-items: center;
						justify-content: center;
						border: 2rpx dashed #CCCCCC;
						
						.placeholder-text {
							font-size: 24rpx;
							color: #999999;
						}
					}
					
					.progress-info {
						display: flex;
						flex-direction: column;
						align-items: center;
						text-align: center;
						
						.progress-label {
							margin-top: 12rpx;
							font-size: 24rpx;
							color: #9E9E9E;
							font-weight: 400;
							margin-bottom: 32rpx;
						}
						
						.progress-value {
							.completed {
								font-size: 32rpx;
								color: #DE3C4B;
								font-weight: 600;
							}
							
							.remaining {
								font-size: 40rpx;
								color: #DE3C4B;
								font-weight: 600;
							}
						}
					}
				}
				
				.activity-right {
					flex: 1;
					
					.activity-header {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 20rpx;
						
						.activity-name {
							font-size: 32rpx;
							font-weight: 600;
							color: #0B0E26;
						}
						
						.activity-tag {
							font-size: 24rpx;
							color: #FFFFFF;
							background: #DE3C4B;
							padding: 4rpx 12rpx;
							border-radius: 8rpx;
						}
					}
					
					.activity-details {
						margin-bottom: 20rpx;
						
						.detail-row {
							display: flex;
							align-items: center;
							margin-bottom: 12rpx;
							
							.detail-label {
								font-size: 26rpx;
								color: #999999;
								margin-right: 8rpx;
								flex-shrink: 0;
							}
							
							.detail-value {
								font-size: 26rpx;
								color: #333333;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								
								.highlight {
									color: #DE3C4B;
									font-weight: 500;
								}
							}
						}
					}
					
					.beer-scroll {
						width: 100%;
						white-space: nowrap;
						margin-bottom: 20rpx;
						
						.beer-item {
							display: inline-block;
							margin-right: 16rpx;
							
							.beer-cover {
								width: 100rpx;
								height: 144rpx;
								border-radius: 8rpx;
								box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.1);
							}
						}
					}
					
					.beer-scroll-placeholder {
						width: 100%;
						height: 144rpx;
						background: #F5F5F5;
						border-radius: 8rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 20rpx;
						
						.placeholder-text {
							font-size: 24rpx;
							color: #999999;
						}
					}
					
					.reward-info {
						display: flex;
						align-items: center;
						
						.reward-label {
							background: #FEE034;
							color: #0B0E26;
							font-size: 24rpx;
							font-weight: 500;
							padding: 6rpx 12rpx;
							border-radius: 8rpx;
							margin-right: 12rpx;
						}
						
						.reward-value {
							font-size: 26rpx;
							color: #0B0E26;
							font-weight: 400;
						}
					}
					
					.error-text {
						color: #DE3C4B;
						font-style: italic;
					}
				}
			}
		}
		
		/* 底部区域样式 */
		.footer {
			margin-top: 40rpx;
			
			.warning-tip {
				display: flex;
				align-items: center;
				background: rgba(233, 233, 233, 0.38);
				border-radius: 16rpx;
				padding: 20rpx 28rpx;
				margin-bottom: 32rpx;
				box-shadow: 0px 4rpx 12rpx rgba(0, 0, 0, 0.05);
				
				.warning-icon {
					width: 30rpx;
					height: 30rpx;
					margin-right: 12rpx;
				}
				
				text {
					font-size: 24rpx;
					color: #5E5F60;
					font-weight: 400;
				}
			}
			
			.action-buttons {
				display: flex;
				justify-content: space-between;
				gap: 24rpx;
				padding: 0 12rpx;
				
				.action-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: calc(50% - 12rpx);
					height: 96rpx;
					border-radius: 12rpx;
					font-size: 28rpx;
					font-weight: 500;
					box-shadow: 0px 4rpx 12rpx rgba(0, 0, 0, 0.1);
					
					.btn-icon {
						width: 40rpx;
						height: 40rpx;
						margin-right: 12rpx;
					}
					
					&.cancel-btn {
						background-color: #D42E78;
						color: #FFFFFF;
						font-weight: 500;
						
						.btn-icon {
							filter: brightness(0) invert(1);
						}
					}
					
					&.primary-btn {
						background-color: #19367A;
						color: #FFFFFF;
						font-weight: 600;
						
						.btn-icon {
							filter: brightness(0) invert(1);
						}
					}
					
					&.gift-btn {
						background-color: #DE3C4B;
						color: #FFFFFF;
						font-weight: 500;
						
						.btn-icon {
							filter: brightness(0) invert(1);
						}
					}
				}
			}
		}
		
		/* 赠品状态样式 */
		.gift-state {
			.img {
				width: 160rpx;
				height: 160rpx;
				margin-bottom: 26rpx;
			}
			text {
				color: #DE3C4B;
				font-size: 32rpx;
				font-weight: 500;
			}
		}
	}
</style>