zdtap-uniapp-main/pagesActivity/scanResult.vue

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

				<!-- 商品信息卡片 -->
				<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-details">
								<view class="detail-item">
									<text class="detail-label">生产日期：</text>
									<text class="detail-value">{{ beer.createTime ? beer.createTime.split(' ')[0] : '' }}</text>
								</view>
								<view class="detail-item">
									<text class="detail-label">净含量：</text>
									<text class="detail-value">{{ beer.netContent }}</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>
			<view class="flex-1" style="overflow-y: auto;">
				<!-- 已领取 -->
				<view v-if="info.qrcode.qrcodeStatus == 1 && false" class="lq-state-box">
					<image src="@/static/information.png" class="img"></image>
					<text>该桶产品已于 {{ info.qrcode.verifyTime }} 扫码领取返利</text>
				</view>
				<!-- 转为赠品 -->
				<view v-if="info.qrcode.qrcodeStatus == 3" class="lq-state-box gift-state">
					<image src="@/static/gift.png" class="img"></image>
					<text>该桶产品已转为赠品</text>
				</view>
				<!-- 领取成功 -->
				<view v-if="info.qrcode.qrcodeStatus == 1" class="scs-state-box">
					<image src="/static/tick-circle.svg" class="img"></image>
					<text>领取成功！</text>
				</view>
				
				<!-- 产品信息卡片 -->
				<view v-if="beer && info.qrcode.qrcodeStatus == 0" 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="info.qrcode.qrcodeStatus == 1" 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 && info.qrcode.qrcodeStatus == 0" class="activity-tip">
					<text class="tip-icon">!</text>
					<text class="tip-text">该产品有多个进行中活动重叠，请<text class="highlight">选择要计入的活动</text></text>
				</view>
				
				<!-- 活动列表（领取成功状态） -->
				<template v-if="info.qrcode.qrcodeStatus == 1">
					<!-- 品牌活动 -->
					<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-name">{{ it.activityName }}</view>
								<view class="activity-detail">时间：首次扫码开始计时 <text class="highlight">{{it.duration}}天内</text></view>
								<view class="activity-detail">目标：{{ it.beer_scope === 0 ? '全系列酒款' : '以下酒款' }}累计扫码 ≥ {{ it.activityTarget}}桶</view>
								<scroll-view v-if="it.beers" scroll-x="true" class="beer-scroll">
									<view class="beer-item" v-for="(beer, index) in it.beers" :key="index">
										<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-name">{{ it.activityName }}</view>
								<view class="activity-detail">时间：首次扫码开始计时 <text class="highlight">{{it.duration}}天内</text></view>
								<view class="activity-detail">目标：{{ it.beer_scope === 0 ? '全系列酒款' : '以下酒款' }}累计扫码 ≥ {{ it.activityTarget}}桶</view>
								<scroll-view scroll-x="true" class="beer-scroll">
									<view class="beer-item" v-for="(beer, index) in it.beers" :key="index">
										<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 v-if="info.qrcode.qrcodeStatus == 2" class="warning-tip">
					<image src="@/static/warning-2.png" class="warning-icon"></image>
					<text>所有酒款只可领取一次，请确认后操作</text>
				</view>
				
				<view class="action-buttons">
					<view v-if="info.qrcode.qrcodeStatus != 1 && info.qrcode.qrcodeStatus != 3" 
						class="action-btn cancel-btn" @click="back">
						<image src="/static/undo.svg" class="btn-icon"></image>
						<text>回头再说</text>
					</view>
					<view v-else class="action-btn cancel-btn" @click="toWinelist">
						<image src="@/static/document.png" class="btn-icon"></image>
						<text>生成酒单</text>
					</view>
					
					<view v-if="info.qrcode.qrcodeStatus == 0" class="action-btn primary-btn" @click="handleReceive">
						<image src="/static/send-2.svg" class="btn-icon"></image>
						<text>立即领取</text>
					</view>
					<view v-else-if="info.qrcode.qrcodeStatus == 3" class="action-btn gift-btn" @click="share">
						<image src="/static/send-2.svg" class="btn-icon"></image>
						<text>分享赠品</text>
					</view>
					<view v-else class="action-btn primary-btn" @click="share">
						<image src="/static/send-2.svg" class="btn-icon"></image>
						<text>分享上新</text>
					</view>
				</view>
			</view>
		</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.info = res.data
					this.beer = res.data.beer
					this.activity = res.data.activity || []
					this.platformActivity = res.data.platformActivity || []
					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)
					if (err.code === 500 && err.msg === '请在酒吧附近100米范围内扫码') {
						this.showError = true
						this.errorType = 'location'
					} else if (err.code === 500 && err.msg.includes('已失效')) {
						this.errorType = 'expired'
					} else {
						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 {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 120rpx;

			.status-icon {
				width: 160rpx;
				height: 160rpx;
				margin-bottom: 40rpx;
			}

			.status-title {
				font-size: 36rpx;
				color: #3D3D3D;
				font-weight: 600;
				margin-bottom: 16rpx;
			}

			.status-desc {
				font-size: 28rpx;
				color: #5F5F63;
				font-weight: 400;
				margin-bottom: 12rpx;
				text-align: center;
				
				&:last-of-type {
					margin-bottom: 60rpx;
				}
			}

			.product-card {
				width: 100%;
				background: #FFFFFF;
				border-radius: 24rpx;
				box-shadow: 0px 8rpx 24rpx rgba(0, 0, 0, 0.08);
				padding: 36rpx;
				margin-bottom: 40rpx;
				
				.product-content {
					display: flex;
					
					.product-image {
						margin-right: 28rpx;
						
						.cover {
							width: 200rpx;
							height: 300rpx;
							border-radius: 16rpx;
							box-shadow: 0px 8rpx 16rpx rgba(0, 0, 0, 0.12);
						}
					}
					
					.product-info {
						flex: 1;
						
						.product-name {
							font-size: 40rpx;
							color: #141415;
							font-weight: 600;
							margin-bottom: 16rpx;
						}
						
						.product-brand {
							font-size: 30rpx;
							color: #5F5F63;
							font-weight: 500;
							margin-bottom: 16rpx;
						}
						
						.product-details {
							margin-bottom: 28rpx;
							
							.detail-item {
								display: flex;
								margin-bottom: 12rpx;
								font-size: 28rpx;
								
								.detail-label {
									color: #3D3D3D;
									margin-right: 8rpx;
									font-weight: 500;
								}
								
								.detail-value {
									color: #5F5F63;
									font-weight: 400;
								}
							}
						}
					}
				}
			}

			.error-action {
				width: 100%;
				padding: 0 40rpx;
				margin-top: 40rpx;

				.action-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 96rpx;
					background: #D42E78;
					border-radius: 12rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					font-weight: 500;
					box-shadow: 0px 4rpx 12rpx rgba(0, 0, 0, 0.1);

					.btn-icon {
						width: 40rpx;
						height: 40rpx;
						margin-right: 12rpx;
						filter: brightness(0) invert(1);
					}
				}
			}
		}
		
		/* 状态提示样式 */
		.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;
				}
			}
		}
		
		/* 产品卡片样式 */
		.product-card {
			background: #FFFFFF;
			border-radius: 24rpx;
			box-shadow: 0px 8rpx 24rpx rgba(0, 0, 0, 0.08);
			padding: 36rpx;
			margin-bottom: 40rpx;
			
			.product-content {
				display: flex;
				
				.product-image {
					margin-right: 28rpx;
					
					.cover {
						width: 200rpx;
						height: 300rpx;
						border-radius: 16rpx;
						box-shadow: 0px 8rpx 16rpx rgba(0, 0, 0, 0.12);
					}
				}
				
				.product-info {
					flex: 1;
					
					.product-name {
						font-size: 40rpx;
						color: #141415;
						font-weight: 600;
						margin-bottom: 16rpx;
					}
					
					.product-brand {
						font-size: 30rpx;
						color: #5F5F63;
						font-weight: 600;
						margin-bottom: 16rpx;
					}
					
					.product-details {
						margin-bottom: 28rpx;
						
						.detail-item {
							display: flex;
							margin-bottom: 12rpx;
							font-size: 28rpx;
							
							.detail-label {
								color: #3D3D3D;
								margin-right: 8rpx;
								font-weight: 500;
							}
							
							.detail-value {
								color: #5F5F63;
								font-weight: 400;
							}
						}
					}
					
					.product-rating {
						display: flex;
						align-items: center;
						
						.rating-stars {
							display: flex;
							align-items: center;
							background: #F5F5F5;
							padding: 8rpx 16rpx;
							border-radius: 16rpx;
							margin-right: 16rpx;
							
							.rating-value {
								font-size: 28rpx;
								color: #5F5F63;
								font-weight: 400;
								margin-left: 8rpx;
							}
						}
						
						.rating-count {
							font-size: 28rpx;
							color: #5F5F63;
							font-weight: 400;
						}
					}
				}
			}
		}
		
		/* 福利卡片样式 */
		.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 {
						width: 140rpx;
						height: 140rpx;
						border-radius: 16rpx;
						margin-bottom: 20rpx;
					}
					
					.progress-info {
						text-align: center;
						
						.progress-label {
							font-size: 24rpx;
							color: #9E9E9E;
							font-weight: 400;
							margin-bottom: 8rpx;
						}
						
						.progress-value {
							.completed {
								font-size: 32rpx;
								color: #DE3C4B;
								font-weight: 500;
							}
							
							.remaining {
								font-size: 40rpx;
								color: #DE3C4B;
								font-weight: 500;
							}
						}
					}
				}
				
				.activity-right {
					flex: 1;
					
					.activity-name {
						font-size: 32rpx;
						font-weight: 600;
						color: #0B0E26;
						margin-bottom: 20rpx;
					}
					
					.activity-detail {
						font-size: 26rpx;
						color: #0B0E26;
						font-weight: 400;
						margin-bottom: 16rpx;
						
						.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);
							}
						}
					}
					
					.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;
						}
					}
				}
			}
		}
		
		/* 底部区域样式 */
		.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>