Initial commit: MSH System\n\n- msh_single_uniapp: Vue 2 + UniApp 前端（微信小程序/H5/App/支付宝小程序）\n- msh_crmeb_22: Spring Boot 2.2 后端（C端API/管理端/业务逻辑）\n- models-integration: AI服务集成（Coze/KieAI/腾讯ASR）\n- docs: 产品文档与设计稿
This commit is contained in:
449
msh_single_uniapp/pages/tool/welcome-gift.vue
Normal file
449
msh_single_uniapp/pages/tool/welcome-gift.vue
Normal file
@@ -0,0 +1,449 @@
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user