df0273de36
按 PRD 简化版落地，零后端改动： checkin.vue： - 任务「内容分享」→ switchTab 到社区 /pages/tool_main/community - 积分兑换列表 handleExchange → 一律 switchTab 到商城首页 /pages/index/index welcome-gift.vue： - 福利大礼包卡片可点击 → 跳商品详情页 /pages/goods/goods_details/index?id= · welfareProductId 从 storage 读，运营在 admin 配置后缓存 · 缺省退化到商城首页 - 去除「步骤1 长按识别二维码」整段及对应 qrCode 资源 - 「立即添加」按钮改用 button open-type='contact' 唤起小程序客服 - H5/APP 兜底走 chatUrl web_page；无配置弹 toast Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
473 lines
9.8 KiB
Vue
473 lines
9.8 KiB
Vue
<template>
|
||
<view class="welcome-gift-page">
|
||
<!-- 内容区域 -->
|
||
<scroll-view class="content-scroll" scroll-y>
|
||
<!-- 新人福利大礼包卡片：点击跳商城福利商品详情（test-0415 P2-1） -->
|
||
<view class="gift-banner" @click="goWelfareProduct">
|
||
<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>
|
||
|
||
<!-- 领取方式（test-0415 P2-1：去除长按识别二维码，改为客服按钮直接联系） -->
|
||
<view class="section">
|
||
<view class="section-title">领取方式</view>
|
||
<view class="claim-card">
|
||
<!-- 步骤1：联系客服 -->
|
||
<view class="claim-step">
|
||
<view class="step-number">1</view>
|
||
<text class="step-text">点击下方按钮联系营养专家客服，备注「领取福利」</text>
|
||
</view>
|
||
<!-- 步骤2：等待发放 -->
|
||
<view class="claim-step">
|
||
<view class="step-number">2</view>
|
||
<text class="step-text">专家将在 24 小时内发送福利大礼包</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 立即添加按钮：使用 button + open-type='contact' 唤起小程序客服（test-0415 P2-1） -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<button class="add-btn add-btn-mp" open-type="contact" hover-class="none">
|
||
<text class="btn-icon">🎁</text>
|
||
<text class="btn-text">立即联系客服，领取福利</text>
|
||
</button>
|
||
<!-- #endif -->
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<view class="add-btn" @click="handleAddWeChat">
|
||
<text class="btn-icon">🎁</text>
|
||
<text class="btn-text">立即联系客服，领取福利</text>
|
||
</view>
|
||
<!-- #endif -->
|
||
|
||
|
||
<!-- 免责声明 -->
|
||
<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',
|
||
// 福利大礼包对应的商城商品 ID（test-0415 P2-1）
|
||
// 由运营在 admin 后台配置一个商品作为福利包入口；前端先用 SettingMer 读取，缺省走商城首页
|
||
welfareProductId: '',
|
||
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() {
|
||
// 读取福利商品 ID（运营可在缓存或全局配置中写入；先简单从 storage 读，无值则点击时跳商城首页）
|
||
try {
|
||
const id = uni.getStorageSync('welfareProductId')
|
||
if (id) this.welfareProductId = String(id)
|
||
} catch (e) { /* ignore */ }
|
||
},
|
||
methods: {
|
||
// 跳到福利商品详情；无配置时退化到商城首页（test-0415 P2-1）
|
||
goWelfareProduct() {
|
||
if (this.welfareProductId) {
|
||
uni.navigateTo({
|
||
url: '/pages/goods/goods_details/index?id=' + this.welfareProductId
|
||
})
|
||
} else {
|
||
uni.switchTab({ url: '/pages/index/index' })
|
||
}
|
||
},
|
||
handleAddWeChat() {
|
||
// H5 / APP 兜底：尝试打开 chatUrl 或拨打热线（小程序走 button open-type='contact'）
|
||
const chatUrl = uni.getStorageSync('chatUrl')
|
||
if (chatUrl) {
|
||
const arr = String(chatUrl).split('?')
|
||
uni.navigateTo({
|
||
url: `/pages/users/web_page/index?webUel=${arr[0]}&title=客服&${arr[1] || ''}`
|
||
})
|
||
} else {
|
||
uni.showToast({ title: '客服暂未配置，请稍后再试', icon: 'none' })
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
}
|
||
/* 小程序 button 元素样式重置（test-0415 P2-1：客服按钮使用 native button） */
|
||
.add-btn-mp {
|
||
border: none;
|
||
line-height: 96rpx;
|
||
padding: 0;
|
||
}
|
||
.add-btn-mp::after {
|
||
border: none;
|
||
}
|
||
|
||
/* 免责声明 */
|
||
.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>
|
||
|