478 lines
9.8 KiB
Vue
478 lines
9.8 KiB
Vue
<template>
|
||
<view class="invite-rewards-page">
|
||
<!-- 内容区域 -->
|
||
<scroll-view class="content-scroll" scroll-y>
|
||
<!-- 主奖励卡片 -->
|
||
<view class="main-reward-card">
|
||
<!-- 橙色渐变头部 -->
|
||
<view class="reward-header">
|
||
<view class="header-content">
|
||
<view class="header-title">邀请好友，双方有礼</view>
|
||
<view class="header-subtitle">每邀请1位好友首次注册</view>
|
||
</view>
|
||
<!-- 奖励展示 -->
|
||
<view class="rewards-display">
|
||
<!-- 我的奖励 -->
|
||
<view class="reward-box">
|
||
<view class="reward-icon-wrapper">
|
||
<image class="reward-icon" :src="iconMyReward" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="reward-value">50积分</view>
|
||
<view class="reward-label">我的奖励</view>
|
||
</view>
|
||
<!-- 好友福利 -->
|
||
<view class="reward-box">
|
||
<view class="reward-icon-wrapper">
|
||
<image class="reward-icon" :src="iconFriendReward" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="reward-value">99元</view>
|
||
<view class="reward-label">好友福利</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 操作按钮区域 -->
|
||
<view class="action-buttons">
|
||
<view class="invite-btn" @click="handleInvite">
|
||
<image class="btn-icon" :src="iconShare" mode="aspectFit"></image>
|
||
<text class="btn-text">立即邀请好友</text>
|
||
</view>
|
||
<view class="poster-btn" @click="handleGeneratePoster">
|
||
<text class="poster-text">生成邀请海报</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 邀请福利说明 -->
|
||
<view class="benefits-card">
|
||
<view class="card-title">邀请福利</view>
|
||
<view class="benefits-list">
|
||
<view class="benefit-item">
|
||
<text class="check-icon">✓</text>
|
||
<text class="benefit-text">邀请好友注册，双方都能获得奖励</text>
|
||
</view>
|
||
<view class="benefit-item">
|
||
<text class="check-icon">✓</text>
|
||
<text class="benefit-text">积分可兑换专业营养咨询服务</text>
|
||
</view>
|
||
<view class="benefit-item">
|
||
<text class="check-icon">✓</text>
|
||
<text class="benefit-text">邀请越多，奖励越丰富</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 邀请统计 -->
|
||
<view class="stats-card">
|
||
<view class="card-title">邀请统计</view>
|
||
<view class="stats-display">
|
||
<view class="stat-box">
|
||
<view class="stat-value">{{ stats.points }}</view>
|
||
<view class="stat-label">已获得积分</view>
|
||
</view>
|
||
<view class="stat-box">
|
||
<view class="stat-value">{{ stats.friends }}</view>
|
||
<view class="stat-label">已邀请好友</view>
|
||
</view>
|
||
</view>
|
||
<view class="no-record" v-if="stats.friends === 0">
|
||
<text>暂无邀请记录</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 如何邀请 -->
|
||
<view class="how-to-card">
|
||
<view class="card-title">如何邀请</view>
|
||
<view class="steps-display">
|
||
<view class="step-item">
|
||
<view class="step-icon-wrapper">
|
||
<image class="step-icon" :src="iconShare" mode="aspectFit"></image>
|
||
</view>
|
||
<text class="step-text">分享给好友</text>
|
||
</view>
|
||
<view class="step-arrow">
|
||
<image class="arrow-icon" :src="iconArrow" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="step-item">
|
||
<view class="step-icon-wrapper">
|
||
<image class="step-icon" :src="iconRegister" mode="aspectFit"></image>
|
||
</view>
|
||
<text class="step-text">好友完成注册</text>
|
||
</view>
|
||
<view class="step-arrow">
|
||
<image class="arrow-icon" :src="iconArrow" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="step-item">
|
||
<view class="step-icon-wrapper">
|
||
<image class="step-icon" :src="iconGift" mode="aspectFit"></image>
|
||
</view>
|
||
<text class="step-text">获得奖励</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部安全距离 -->
|
||
<view class="safe-bottom"></view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getUserPoints } from '@/api/tool.js';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
iconMyReward: 'https://www.figma.com/api/mcp/asset/d5ae7fb4-56a7-4bd0-94fa-971ad4384b13',
|
||
iconFriendReward: 'https://www.figma.com/api/mcp/asset/89930d2a-e987-4af5-99cb-2cb1a641bad8',
|
||
iconShare: 'https://www.figma.com/api/mcp/asset/fe80c44a-3977-4cc3-9cc5-e29301820cca',
|
||
iconRegister: 'https://www.figma.com/api/mcp/asset/7df7d3d4-78da-46a2-a499-257d30f169e9',
|
||
iconGift: 'https://www.figma.com/api/mcp/asset/128a1ad0-4cde-4ccd-a78e-31d8f9054e87',
|
||
iconArrow: 'https://www.figma.com/api/mcp/asset/6d69c739-78c8-4091-81f6-c551bd11dce4',
|
||
loading: false,
|
||
stats: {
|
||
points: 0,
|
||
friends: 0
|
||
}
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.loadInviteStats()
|
||
},
|
||
onShareAppMessage() {
|
||
return {
|
||
title: '邀请你加入慢生活营养专家，一起管理饮食健康！',
|
||
path: '/pages/tool_main/index',
|
||
imageUrl: this.iconMyReward
|
||
}
|
||
},
|
||
onShareTimeline() {
|
||
return {
|
||
title: '慢生活营养专家 - 专业饮食健康管理',
|
||
query: 'from=invite'
|
||
}
|
||
},
|
||
methods: {
|
||
async loadInviteStats() {
|
||
this.loading = true
|
||
try {
|
||
const res = await getUserPoints()
|
||
const data = res.data || res
|
||
if (data) {
|
||
this.stats = {
|
||
points: data.invitePoints || data.totalPoints || data.points || 0,
|
||
friends: data.inviteCount || data.friendCount || data.friends || 0
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('加载邀请统计失败:', error)
|
||
// 保持默认值 0
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
handleInvite() {
|
||
uni.showShareMenu({
|
||
withShareTicket: true,
|
||
menus: ['shareAppMessage', 'shareTimeline']
|
||
})
|
||
},
|
||
handleGeneratePoster() {
|
||
uni.showToast({
|
||
title: '正在生成海报...',
|
||
icon: 'loading',
|
||
duration: 2000
|
||
})
|
||
// 使用 canvas 绘制邀请海报
|
||
setTimeout(() => {
|
||
uni.showToast({
|
||
title: '海报生成功能开发中',
|
||
icon: 'none'
|
||
})
|
||
}, 2000)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.invite-rewards-page {
|
||
min-height: 100vh;
|
||
background: #f4f5f7;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 内容滚动区域 */
|
||
.content-scroll {
|
||
flex: 1;
|
||
padding: 32rpx 0;
|
||
}
|
||
|
||
/* 主奖励卡片 */
|
||
.main-reward-card {
|
||
background: #ffffff;
|
||
border: 1rpx solid #d0dbea;
|
||
border-radius: 24rpx;
|
||
margin: 0 32rpx 32rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.reward-header {
|
||
background: linear-gradient(180deg, #ff6b35 0%, #ff8c5a 100%);
|
||
padding: 48rpx 48rpx 32rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 32rpx;
|
||
}
|
||
|
||
.header-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.header-title {
|
||
font-size: 40rpx;
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
}
|
||
|
||
.header-subtitle {
|
||
font-size: 28rpx;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
text-align: center;
|
||
}
|
||
|
||
.rewards-display {
|
||
display: flex;
|
||
gap: 24rpx;
|
||
justify-content: center;
|
||
}
|
||
|
||
.reward-box {
|
||
background: #ffffff;
|
||
border-radius: 24rpx;
|
||
padding: 32rpx 32rpx 24rpx;
|
||
width: 280rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.reward-icon-wrapper {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
background: #fff5f0;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.reward-icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.reward-value {
|
||
font-size: 48rpx;
|
||
color: #ff6b35;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
}
|
||
|
||
.reward-label {
|
||
font-size: 24rpx;
|
||
color: #9fa5c0;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 操作按钮区域 */
|
||
.action-buttons {
|
||
padding: 32rpx 32rpx 24rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.invite-btn {
|
||
background: #ff6b35;
|
||
border-radius: 50rpx;
|
||
height: 96rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 16rpx;
|
||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1), 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||
|
||
.btn-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.btn-text {
|
||
font-size: 28rpx;
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.poster-btn {
|
||
height: 72rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.poster-text {
|
||
font-size: 28rpx;
|
||
color: #ff6b35;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
/* 通用卡片样式 */
|
||
.benefits-card,
|
||
.stats-card,
|
||
.how-to-card {
|
||
background: #ffffff;
|
||
border: 1rpx solid #d0dbea;
|
||
border-radius: 24rpx;
|
||
margin: 0 32rpx 32rpx;
|
||
padding: 32rpx;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 28rpx;
|
||
color: #2e3e5c;
|
||
font-weight: 500;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
/* 邀请福利列表 */
|
||
.benefits-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.benefit-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.check-icon {
|
||
font-size: 28rpx;
|
||
color: #ff6b35;
|
||
font-weight: bold;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.benefit-text {
|
||
font-size: 28rpx;
|
||
color: #3e5481;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 邀请统计 */
|
||
.stats-display {
|
||
display: flex;
|
||
gap: 24rpx;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.stat-box {
|
||
flex: 1;
|
||
background: #f4f5f7;
|
||
border-radius: 24rpx;
|
||
padding: 32rpx 32rpx 24rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 48rpx;
|
||
color: #2e3e5c;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 24rpx;
|
||
color: #9fa5c0;
|
||
text-align: center;
|
||
}
|
||
|
||
.no-record {
|
||
padding-top: 32rpx;
|
||
border-top: 1rpx solid #d0dbea;
|
||
text-align: center;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
color: #9fa5c0;
|
||
}
|
||
}
|
||
|
||
/* 如何邀请步骤 */
|
||
.steps-display {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.step-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.step-icon-wrapper {
|
||
width: 112rpx;
|
||
height: 112rpx;
|
||
background: #fff5f0;
|
||
border-radius: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.step-icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.step-text {
|
||
font-size: 24rpx;
|
||
color: #3e5481;
|
||
text-align: center;
|
||
}
|
||
|
||
.step-arrow {
|
||
width: 72rpx;
|
||
height: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.arrow-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
/* 底部安全距离 */
|
||
.safe-bottom {
|
||
height: 40rpx;
|
||
}
|
||
</style>
|
||
|