450 lines
8.6 KiB
Vue
450 lines
8.6 KiB
Vue
<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>
|
||
|