<template>
	<view class="welcome-gift-page">
		<!-- 内容区域 -->
		<scroll-view class="content-scroll" scroll-y>
			<!-- 新人福利大礼包卡片 -->
			<view class="gift-banner">
				<view class="gift-icon">
					<image :src="giftIcon" mode="aspectFit"></image>
				</view>
				<view class="gift-title">新人福利大礼包</view>
				<view class="gift-subtitle">
					<text>添加营养专家企业微信</text>
				</view>
				<view class="gift-value">
					<text class="value-text">免费领取价值</text>
					<text class="value-amount">¥399</text>
					<text class="value-text">的营养礼包</text>
				</view>
				<view class="gift-badge">
					<text class="badge-icon">✨</text>
					<text class="badge-text">限时免费，先到先得</text>
				</view>
			</view>

			<!-- 礼包内容 -->
			<view class="section">
				<view class="section-title">礼包内容</view>
				<view class="gift-items">
					<view 
						class="gift-item" 
						v-for="(item, index) in giftItems" 
						:key="index"
					>
						<view class="item-icon" :style="{ background: item.iconBg }">
							<text>{{ item.icon }}</text>
						</view>
						<view class="item-info">
							<text class="item-title">{{ item.title }}</text>
							<text class="item-desc">{{ item.desc }}</text>
						</view>
						<view class="item-check">
							<text class="check-icon">✓</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 领取方式 -->
			<view class="section">
				<view class="section-title">领取方式</view>
				<view class="claim-card">
					<!-- 步骤1 -->
					<view class="claim-step">
						<view class="step-number">1</view>
						<view class="step-content">
							<text class="step-text">长按识别下方二维码</text>
							<view class="qr-code-box">
								<view class="qr-code">
									<image :src="qrCodeImage" mode="aspectFit"></image>
								</view>
							</view>
							<text class="qr-label">营养专家企业微信</text>
						</view>
					</view>

					<!-- 步骤2 -->
					<view class="claim-step">
						<view class="step-number">2</view>
						<text class="step-text">添加营养专家好友，备注"领取福利"</text>
					</view>

					<!-- 步骤3 -->
					<view class="claim-step">
						<view class="step-number">3</view>
						<text class="step-text">专家将在 24 小时内发送福利大礼包</text>
					</view>
				</view>
			</view>

			<!-- 立即添加按钮 -->
			<view class="add-btn" @click="handleAddWeChat">
				<text class="btn-icon">🎁</text>
				<text class="btn-text">立即添加，领取福利</text>
			</view>

			<!-- 免责声明 -->
			<view class="disclaimer">
				<text class="disclaimer-icon">💡</text>
				<text class="disclaimer-text">本活动最终解释权归慢生活智能营养专家所有</text>
				<text class="disclaimer-text">仅限前 100 名用户免费领取，先到先得</text>
			</view>

			<!-- 底部安全距离 -->
			<view class="safe-bottom"></view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			giftIcon: 'https://www.figma.com/api/mcp/asset/b31b3ad1-05c7-43b4-9541-caff8bab7a95',
			qrCodeImage: 'https://www.figma.com/api/mcp/asset/6d8ecd40-13c8-40c7-bfcd-e6797db0b8ae',
			giftItems: [
				{
					icon: '📚',
					iconBg: '#fff5f0',
					title: '透析患者饮食指南',
					desc: '专业营养师编写，涵盖日常饮食要点'
				},
				{
					icon: '📊',
					iconBg: '#fff5f0',
					title: '营养成分速查表',
					desc: '常见食物营养数据一目了然'
				},
				{
					icon: '🥗',
					iconBg: '#fff5f0',
					title: '7天健康食谱',
					desc: '营养均衡，适合透析患者'
				},
				{
					icon: '💡',
					iconBg: '#fff5f0',
					title: '营养师1对1咨询',
					desc: '专业解答您的营养疑问'
				}
			]
		}
	},
	onLoad() {
		// 页面加载
	},
	methods: {
		handleAddWeChat() {
			// 这里可以调用微信API打开企业微信或显示二维码
			uni.showToast({
				title: '请长按识别二维码添加',
				icon: 'none',
				duration: 2000
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.welcome-gift-page {
	min-height: 100vh;
	background: #f4f5f7;
	display: flex;
	flex-direction: column;
}

/* 内容滚动区域 */
.content-scroll {
	flex: 1;
	margin-top: 4rpx;
	padding: 32rpx 0;
}

/* 新人福利大礼包卡片 */
.gift-banner {
	background: linear-gradient(135deg, #ff6b35 0%, #ff8c5a 100%);
	border-radius: 24rpx;
	margin: 0 32rpx 32rpx;
	padding: 34rpx 34rpx 28rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 16rpx 48rpx rgba(255, 107, 53, 0.3);
}

.gift-icon {
	width: 160rpx;
	height: 160rpx;
	background: rgba(255, 255, 255, 0.25);
	border-radius: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 32rpx;
	box-shadow: 0 20rpx 30rpx -6rpx rgba(0, 0, 0, 0.1), 0 8rpx 12rpx -4rpx rgba(0, 0, 0, 0.1);

	image {
		width: 80rpx;
		height: 80rpx;
	}
}

.gift-title {
	font-size: 48rpx;
	color: #ffffff;
	font-weight: 500;
	margin-bottom: 24rpx;
	text-align: center;
}

.gift-subtitle {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.95);
	margin-bottom: 16rpx;
	text-align: center;
}

.gift-value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 8rpx;
	margin-bottom: 32rpx;

	.value-text {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.95);
	}

	.value-amount {
		font-size: 36rpx;
		color: #ffffff;
		font-weight: 500;
	}
}

.gift-badge {
	background: rgba(255, 255, 255, 0.25);
	border-radius: 50rpx;
	padding: 16rpx 40rpx;
	display: flex;
	align-items: center;
	gap: 12rpx;
	box-shadow: 0 8rpx 12rpx rgba(0, 0, 0, 0.1);

	.badge-icon {
		font-size: 32rpx;
	}

	.badge-text {
		font-size: 28rpx;
		color: #ffffff;
	}
}

/* 通用区块样式 */
.section {
	margin: 0 32rpx 32rpx;
}

.section-title {
	font-size: 28rpx;
	color: #2e3e5c;
	font-weight: 500;
	margin-bottom: 24rpx;
}

/* 礼包内容列表 */
.gift-items {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.gift-item {
	background: #ffffff;
	border: 1rpx solid #d0dbea;
	border-radius: 24rpx;
	padding: 32rpx;
	display: flex;
	align-items: center;
	gap: 24rpx;
}

.item-icon {
	width: 96rpx;
	height: 96rpx;
	border-radius: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 48rpx;
	flex-shrink: 0;
}

.item-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.item-title {
	font-size: 28rpx;
	color: #2e3e5c;
	font-weight: 500;
}

.item-desc {
	font-size: 24rpx;
	color: #9fa5c0;
}

.item-check {
	width: 48rpx;
	height: 48rpx;
	background: #4caf50;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;

	.check-icon {
		font-size: 32rpx;
		color: #ffffff;
		font-weight: bold;
	}
}

/* 领取方式卡片 */
.claim-card {
	background: #ffffff;
	border: 1rpx solid #d0dbea;
	border-radius: 24rpx;
	padding: 32rpx;
	display: flex;
	flex-direction: column;
	gap: 32rpx;
}

.claim-step {
	display: flex;
	gap: 24rpx;
	align-items: flex-start;
}

.step-number {
	width: 56rpx;
	height: 56rpx;
	background: #ff6b35;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	color: #ffffff;
	font-weight: 500;
	flex-shrink: 0;
}

.step-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.step-text {
	font-size: 28rpx;
	color: #3e5481;
	line-height: 1.6;
}

.qr-code-box {
	background: #ffffff;
	border: 1rpx solid #d0dbea;
	border-radius: 24rpx;
	padding: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.qr-code {
	width: 480rpx;
	height: 480rpx;
	background: #f4f5f7;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;

	image {
		width: 100%;
		height: 100%;
	}
}

.qr-label {
	font-size: 24rpx;
	color: #9fa5c0;
	text-align: center;
}

/* 立即添加按钮 */
.add-btn {
	width: calc(100% - 64rpx);
	height: 96rpx;
	background: #ff6b35;
	border-radius: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16rpx;
	margin: 0 32rpx 32rpx;
	box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1), 0 2rpx 4rpx rgba(0, 0, 0, 0.1);

	.btn-icon {
		font-size: 32rpx;
	}

	.btn-text {
		font-size: 28rpx;
		color: #ffffff;
		font-weight: 500;
	}
}

/* 免责声明 */
.disclaimer {
	background: #fff5f0;
	border: 1rpx solid #d0dbea;
	border-radius: 24rpx;
	margin: 0 32rpx 32rpx;
	padding: 32rpx;
	display: flex;
	flex-direction: column;
	gap: 16rpx;
	align-items: center;

	.disclaimer-icon {
		font-size: 32rpx;
	}

	.disclaimer-text {
		font-size: 24rpx;
		color: #3e5481;
		text-align: center;
		line-height: 1.6;
	}
}

/* 底部安全距离 */
.safe-bottom {
	height: 40rpx;
}
</style>

