删除分销中心和海报设计相关的同步报告及优化说明文档,清理不再使用的自动部署脚本,确保代码库整洁。更新小程序页面以动态获取绑定期和用户优惠信息,提升用户体验和灵活性。
This commit is contained in:
@@ -30,8 +30,10 @@ Page({
|
||||
withdrawnEarnings: 0, // 已提现金额
|
||||
earnings: 0, // 已结算收益(保留兼容)
|
||||
pendingEarnings: 0, // 待结算收益(保留兼容)
|
||||
shareRate: 90, // 分成比例(90%)
|
||||
minWithdrawAmount: 10, // 最低提现金额(从后端获取)
|
||||
shareRate: 90, // 分成比例(90%),从 referral/data 或 config 获取
|
||||
minWithdrawAmount: 10, // 最低提现金额,从 referral/data 获取
|
||||
bindingDays: 30, // 绑定期天数,从 referral/data 获取
|
||||
userDiscount: 5, // 好友购买优惠%,从 referral/data 获取
|
||||
hasWechatId: false, // 是否已绑定微信号(未绑定时需引导去设置)
|
||||
|
||||
// === 统计数据 ===
|
||||
@@ -194,9 +196,11 @@ Page({
|
||||
withdrawnEarnings: formatMoney(realData?.withdrawnEarnings || 0),
|
||||
earnings: formatMoney(realData?.earnings || 0),
|
||||
pendingEarnings: formatMoney(realData?.pendingEarnings || 0),
|
||||
shareRate: realData?.shareRate || 90,
|
||||
shareRate: realData?.shareRate ?? 90,
|
||||
minWithdrawAmount: minWithdrawAmount,
|
||||
|
||||
bindingDays: realData?.bindingDays ?? 30,
|
||||
userDiscount: realData?.userDiscount ?? 5,
|
||||
|
||||
// 统计
|
||||
referralCount: realData?.referralCount || realData?.stats?.totalBindings || activeBindings.length + convertedBindings.length,
|
||||
expiringCount,
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
</view>
|
||||
<view class="banner-content">
|
||||
<text class="banner-title">{{expiringCount}} 位用户绑定即将过期</text>
|
||||
<text class="banner-desc">30天内未付款将解除绑定关系</text>
|
||||
<text class="banner-desc">{{bindingDays}}天内未付款将解除绑定关系</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -86,9 +86,9 @@
|
||||
<text class="rules-title">推广规则</text>
|
||||
</view>
|
||||
<view class="rules-list">
|
||||
<text class="rule-item">• 好友通过你的链接购买,<text class="gold">立享5%优惠</text></text>
|
||||
<text class="rule-item">• 好友通过你的链接购买,<text class="gold">立享{{userDiscount}}%优惠</text></text>
|
||||
<text class="rule-item">• 好友成功付款后,你获得 <text class="brand">{{shareRate}}%</text> 收益</text>
|
||||
<text class="rule-item">• 绑定期<text class="brand">30天</text>,期满未付款自动解除</text>
|
||||
<text class="rule-item">• 绑定期<text class="brand">{{bindingDays}}天</text>,期满未付款自动解除</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -282,7 +282,7 @@
|
||||
<text class="poster-stat-label">真实案例</text>
|
||||
</view>
|
||||
<view class="poster-stat">
|
||||
<text class="poster-stat-value poster-stat-brand">5%</text>
|
||||
<text class="poster-stat-value poster-stat-brand">{{userDiscount}}%</text>
|
||||
<text class="poster-stat-label">好友优惠</text>
|
||||
</view>
|
||||
<view class="poster-stat">
|
||||
@@ -310,7 +310,7 @@
|
||||
|
||||
<!-- 优惠说明 -->
|
||||
<view class="poster-discount">
|
||||
<text class="poster-discount-text">通过我的链接购买,<text class="poster-discount-highlight">立省5%</text>
|
||||
<text class="poster-discount-text">通过我的链接购买,<text class="poster-discount-highlight">立省{{userDiscount}}%</text>
|
||||
</text>
|
||||
</view>
|
||||
|
||||
|
||||
@@ -1,538 +0,0 @@
|
||||
# 分销中心 Next.js → 小程序 100% 同步完成报告
|
||||
|
||||
**同步日期**: 2026-02-04
|
||||
**目标**: 将 Next.js 的分销中心功能 1:1 完整迁移到小程序
|
||||
**状态**: ✅ 已完成 100% 同步
|
||||
|
||||
---
|
||||
|
||||
## ✅ 功能对比清单
|
||||
|
||||
| 功能模块 | Next.js | 小程序 | 状态 |
|
||||
|---------|---------|--------|------|
|
||||
| **导航栏** | ChevronLeft + Settings + Bell | 相同图标(SVG) | ✅ 100% |
|
||||
| **过期提醒横幅** | Bell 图标 + 提醒文案 | 相同 | ✅ 100% |
|
||||
| **收益卡片** | Wallet图标 + 累计/待结算 | 相同 | ✅ 100% |
|
||||
| **提现按钮** | 满10元可提现/申请提现 | 相同 | ✅ 100% |
|
||||
| **数据统计** | 4列:绑定中/已付款/即将过期/总邀请 | 相同 | ✅ 100% |
|
||||
| **推广规则** | AlertCircle图标 + 3条规则 | 相同 | ✅ 100% |
|
||||
| **绑定用户列表** | Users图标 + 3个tab切换 | 相同 | ✅ 100% |
|
||||
| **我的邀请码** | 邀请码展示 + 说明文案 | 相同 | ✅ 100% |
|
||||
| **生成海报** | ImageIcon + 海报生成逻辑 | 相同 | ✅ 100% |
|
||||
| **分享朋友圈** | MessageCircle + 复制文案 | 相同文案 | ✅ 100% |
|
||||
| **更多分享** | Share2 + 通用分享文案 | 相同文案 | ✅ 100% |
|
||||
| **收益明细列表** | Gift图标 + 明细列表 | 相同 | ✅ 100% |
|
||||
| **空状态** | Gift图标 + 提示文案 | 相同 | ✅ 100% |
|
||||
| **API接入** | /api/referral/data | 相同 | ✅ 100% |
|
||||
|
||||
---
|
||||
|
||||
## 📋 页面模块顺序
|
||||
|
||||
### Next.js 顺序
|
||||
1. 过期提醒横幅(条件显示)
|
||||
2. 收益卡片
|
||||
3. 数据统计(4列)
|
||||
4. 推广规则
|
||||
5. 绑定用户列表
|
||||
6. 我的邀请码
|
||||
7. 分享按钮(3个)
|
||||
8. 收益明细(条件显示)
|
||||
9. 空状态(条件显示)
|
||||
|
||||
### 小程序顺序(已同步)
|
||||
1. 过期提醒横幅 ✅
|
||||
2. 收益卡片 ✅
|
||||
3. 数据统计(4列)✅
|
||||
4. 推广规则 ✅
|
||||
5. 绑定用户列表 ✅
|
||||
6. 我的邀请码 ✅
|
||||
7. 分享按钮(3个)✅
|
||||
8. 收益明细 ✅
|
||||
9. 空状态 ✅
|
||||
|
||||
**顺序**: ✅ 完全一致
|
||||
|
||||
---
|
||||
|
||||
## 🎨 图标同步清单
|
||||
|
||||
| 位置 | Next.js 图标 | 小程序 SVG 文件 | 状态 |
|
||||
|-----|-------------|---------------|------|
|
||||
| 返回按钮 | `<ChevronLeft>` | `/assets/icons/chevron-left.svg` | ✅ |
|
||||
| 通知按钮 | `<Bell>` | `/assets/icons/bell.svg` | ✅ |
|
||||
| 设置按钮 | `<Settings>` | `/assets/icons/settings.svg` | ✅ |
|
||||
| 过期横幅 | `<Bell>` | `/assets/icons/bell.svg` | ✅ |
|
||||
| 收益卡片 | `<Wallet>` | `/assets/icons/wallet.svg` | ✅ |
|
||||
| 推广规则 | `<AlertCircle>` | `/assets/icons/alert-circle.svg` | ✅ |
|
||||
| 绑定用户 | `<Users>` | `/assets/icons/users.svg` | ✅ |
|
||||
| 生成海报 | `<ImageIcon>` | `/assets/icons/image.svg` | ✅ |
|
||||
| 分享朋友圈 | `<MessageCircle>` | `/assets/icons/message-circle.svg` | ✅ |
|
||||
| 更多分享 | `<Share2>` | `/assets/icons/share.svg` | ✅ |
|
||||
| 箭头 | `<ArrowRight>` | `/assets/icons/arrow-right.svg` | ✅ |
|
||||
| 收益明细 | `<Gift>` | `/assets/icons/gift.svg` | ✅ |
|
||||
|
||||
**图标**: ✅ 所有图标都使用 lucide-react 的 SVG
|
||||
|
||||
---
|
||||
|
||||
## 💬 分享功能对比
|
||||
|
||||
### 1. 分享到朋友圈 (shareToWechat)
|
||||
|
||||
**Next.js 文案**:
|
||||
```
|
||||
📖 推荐一本好书《一场SOUL的创业实验场》
|
||||
|
||||
这是卡若每天早上6-9点在Soul派对房分享的真实商业故事,55个真实案例,讲透创业的底层逻辑。
|
||||
|
||||
👉 点击阅读: https://soul.quwanzhi.com/?ref=XXX
|
||||
|
||||
#创业 #商业思维 #Soul派对
|
||||
```
|
||||
|
||||
**小程序实现**: ✅ 完全相同的文案
|
||||
|
||||
---
|
||||
|
||||
### 2. 更多分享方式 (handleMoreShare)
|
||||
|
||||
**Next.js 文案**:
|
||||
```
|
||||
我正在读《一场SOUL的创业实验场》,每天6-9点的真实商业故事,推荐给你!https://soul.quwanzhi.com/?ref=XXX
|
||||
```
|
||||
|
||||
**小程序实现**: ✅ 完全相同的文案
|
||||
|
||||
---
|
||||
|
||||
### 3. 生成推广海报 (generatePoster)
|
||||
|
||||
**Next.js 功能**: 使用 PosterModal 组件生成海报
|
||||
|
||||
**小程序实现**:
|
||||
- ✅ 使用 Canvas 绘制海报
|
||||
- ✅ 包含小程序码
|
||||
- ✅ 包含用户信息、统计数据、优惠信息
|
||||
- ✅ 保存到相册功能
|
||||
|
||||
**区别**: Next.js 使用组件,小程序使用 Canvas,但功能完全等价
|
||||
|
||||
---
|
||||
|
||||
## 🔌 API 接入对比
|
||||
|
||||
### Next.js API 调用
|
||||
|
||||
```typescript
|
||||
const res = await fetch('/api/referral/data')
|
||||
const data = await res.json()
|
||||
```
|
||||
|
||||
### 小程序 API 调用
|
||||
|
||||
```javascript
|
||||
const res = await app.request('/api/referral/data?userId=' + userInfo.id)
|
||||
```
|
||||
|
||||
**状态**: ✅ 已接入,使用相同的 API 端点
|
||||
|
||||
---
|
||||
|
||||
## 📊 数据字段对比
|
||||
|
||||
### Next.js 数据结构 (from API)
|
||||
|
||||
```typescript
|
||||
{
|
||||
bindingCount: number // 绑定用户数
|
||||
paidCount: number // 已付款用户数
|
||||
earnings: number // 累计收益
|
||||
pendingEarnings: number // 待结算收益
|
||||
shareRate: number // 分成比例
|
||||
activeUsers: [] // 绑定中用户列表
|
||||
convertedUsers: [] // 已转化用户列表
|
||||
expiredUsers: [] // 已过期用户列表
|
||||
stats: {
|
||||
expiringCount: number // 即将过期数量
|
||||
}
|
||||
earningsDetails: [] // 收益明细
|
||||
}
|
||||
```
|
||||
|
||||
### 小程序数据结构
|
||||
|
||||
```javascript
|
||||
{
|
||||
bindingCount: 0 // ✅ 相同
|
||||
paidCount: 0 // ✅ 相同
|
||||
earnings: '0.00' // ✅ 相同(格式化)
|
||||
pendingEarnings: '0.00' // ✅ 相同(格式化)
|
||||
shareRate: 90 // ✅ 相同
|
||||
activeBindings: [] // ✅ 相同
|
||||
convertedBindings: [] // ✅ 相同
|
||||
expiredBindings: [] // ✅ 相同
|
||||
expiringCount: 0 // ✅ 相同
|
||||
earningsDetails: [] // ✅ 相同
|
||||
}
|
||||
```
|
||||
|
||||
**状态**: ✅ 完全一致
|
||||
|
||||
---
|
||||
|
||||
## 🎯 样式同步检查
|
||||
|
||||
### 1. 导航栏
|
||||
|
||||
| 属性 | Next.js | 小程序 | 状态 |
|
||||
|-----|---------|--------|------|
|
||||
| 背景 | `glass-nav` 毛玻璃 | `rgba(0,0,0,0.9)` + `backdrop-filter` | ✅ |
|
||||
| 布局 | 左侧返回 + 标题居中 + 右侧按钮 | 相同 | ✅ |
|
||||
| 按钮样式 | 圆形深色背景 | 相同 | ✅ |
|
||||
| 图标颜色 | 灰色 | CSS filter 灰色 | ✅ |
|
||||
|
||||
---
|
||||
|
||||
### 2. 收益卡片
|
||||
|
||||
| 属性 | Next.js | 小程序 | 状态 |
|
||||
|-----|---------|--------|------|
|
||||
| 背景 | `glass-card-heavy` | `rgba(28,28,30,0.8)` + blur | ✅ |
|
||||
| 装饰光效 | 右上角模糊圆形 | 相同 | ✅ |
|
||||
| 图标背景 | 品牌色半透明 | 相同 | ✅ |
|
||||
| 金额字号 | `text-3xl` (30px) | `60rpx` (~45px) | ✅ |
|
||||
| 按钮样式 | `btn-ios glow` | 渐变+阴影 | ✅ |
|
||||
|
||||
---
|
||||
|
||||
### 3. 数据统计
|
||||
|
||||
| 属性 | Next.js | 小程序 | 状态 |
|
||||
|-----|---------|--------|------|
|
||||
| 布局 | `grid-cols-4` | `repeat(4, 1fr)` | ✅ |
|
||||
| 间距 | `gap-2` | `gap: 8rpx` | ✅ |
|
||||
| 背景 | `glass-card` | 毛玻璃效果 | ✅ |
|
||||
| 数值颜色 | 白色(即将过期橙色)| 相同 | ✅ |
|
||||
|
||||
---
|
||||
|
||||
### 4. 分享按钮
|
||||
|
||||
| 属性 | Next.js | 小程序 | 状态 |
|
||||
|-----|---------|--------|------|
|
||||
| 背景 | `glass-card` | 毛玻璃效果 | ✅ |
|
||||
| 图标背景 | 圆角矩形 + 对应颜色 | 相同 | ✅ |
|
||||
| 海报图标 | 紫色 `ios-indigo` | 紫色 | ✅ |
|
||||
| 朋友圈图标 | 绿色 `#07C160` | 绿色 | ✅ |
|
||||
| 更多分享图标 | 灰色 | 灰色 | ✅ |
|
||||
| 箭头 | `ArrowRight` 灰色 | SVG 灰色 | ✅ |
|
||||
|
||||
---
|
||||
|
||||
## 🔧 功能实现细节
|
||||
|
||||
### 1. 生成海报功能
|
||||
|
||||
**实现方式**:
|
||||
- Next.js: 使用 `<PosterModal>` 组件
|
||||
- 小程序: 使用 Canvas API 绘制
|
||||
|
||||
**包含元素**:
|
||||
- ✅ 标题 "📚 Soul创业派对"
|
||||
- ✅ 副标题 "来自派对房的真实商业故事"
|
||||
- ✅ 书籍介绍(3个亮点)
|
||||
- ✅ 推广者信息
|
||||
- ✅ 统计数据
|
||||
- ✅ 优惠信息 "🎁 专属福利"
|
||||
- ✅ 小程序码
|
||||
- ✅ 底部提示文案
|
||||
|
||||
**保存功能**:
|
||||
- ✅ 保存到相册
|
||||
- ✅ 权限检查和引导
|
||||
|
||||
---
|
||||
|
||||
### 2. 分享朋友圈功能
|
||||
|
||||
**Next.js 实现**:
|
||||
```javascript
|
||||
const shareText = `📖 推荐一本好书《一场SOUL的创业实验场》...`
|
||||
await navigator.clipboard.writeText(shareText)
|
||||
alert("朋友圈文案已复制!\n\n打开微信 → 发朋友圈 → 粘贴即可")
|
||||
```
|
||||
|
||||
**小程序实现**:
|
||||
```javascript
|
||||
wx.setClipboardData({ data: shareText })
|
||||
wx.showModal({
|
||||
title: '朋友圈文案已复制!',
|
||||
content: '打开微信 → 发朋友圈 → 粘贴即可'
|
||||
})
|
||||
```
|
||||
|
||||
**状态**: ✅ 功能完全等价,文案100%相同
|
||||
|
||||
---
|
||||
|
||||
### 3. 更多分享方式
|
||||
|
||||
**Next.js 实现**:
|
||||
```javascript
|
||||
const shareText = `我正在读《一场SOUL的创业实验场》...`
|
||||
await navigator.share({ title, text, url })
|
||||
// 降级:复制到剪贴板
|
||||
```
|
||||
|
||||
**小程序实现**:
|
||||
```javascript
|
||||
const shareText = `我正在读《一场SOUL的创业实验场》...`
|
||||
wx.setClipboardData({ data: shareText })
|
||||
wx.showToast({ title: '分享文案已复制' })
|
||||
```
|
||||
|
||||
**状态**: ✅ 文案100%相同,功能等价
|
||||
|
||||
---
|
||||
|
||||
### 4. 小程序卡片分享
|
||||
|
||||
**功能**:
|
||||
- ✅ `onShareAppMessage`: 分享给好友,带推荐码
|
||||
- ✅ `onShareTimeline`: 分享到朋友圈,带推荐码
|
||||
|
||||
**封面图**:
|
||||
- 使用小程序默认截图(页面截图)
|
||||
- 或配置 `imageUrl: 'https://soul.quwanzhi.com/share-cover.jpg'`(需服务器提供图片)
|
||||
|
||||
---
|
||||
|
||||
## 🎨 样式100%对齐检查
|
||||
|
||||
### 颜色变量
|
||||
|
||||
| 颜色名称 | Next.js | 小程序 | 状态 |
|
||||
|---------|---------|--------|------|
|
||||
| 品牌色 | `--app-brand` `#00CED1` | `#00CED1` | ✅ |
|
||||
| 金色 | `#FFD700` | `#FFD700` | ✅ |
|
||||
| 橙色 | `orange-400` | `#FFA500` | ✅ |
|
||||
| 绿色 | `green-400` `#07C160` | `#07C160` | ✅ |
|
||||
| 紫色 | `ios-indigo` | 紫色 | ✅ |
|
||||
| 背景 | `black` `#1c1c1e` | `#000` `#1c1c1e` | ✅ |
|
||||
| 文字 | `white` `text-tertiary` | `#fff` `rgba(255,255,255,0.6)` | ✅ |
|
||||
|
||||
---
|
||||
|
||||
### 毛玻璃效果
|
||||
|
||||
| 元素 | Next.js | 小程序 | 状态 |
|
||||
|-----|---------|--------|------|
|
||||
| 卡片 | `glass-card` | `rgba(28,28,30,0.8)` + `backdrop-filter: blur(40rpx)` | ✅ |
|
||||
| 导航栏 | `glass-nav` | `rgba(0,0,0,0.9)` + `backdrop-filter: blur(40rpx)` | ✅ |
|
||||
| 边框 | `border-white/10` | `rgba(255,255,255,0.1)` | ✅ |
|
||||
|
||||
---
|
||||
|
||||
### 圆角和间距
|
||||
|
||||
| 属性 | Next.js | 小程序 | 状态 |
|
||||
|-----|---------|--------|------|
|
||||
| 卡片圆角 | `rounded-2xl` (16px) | `32rpx` (~24px) | ✅ |
|
||||
| 按钮圆角 | `rounded-xl` | `24rpx` | ✅ |
|
||||
| 间距 | `gap-2` `gap-3` | `8rpx` `12rpx` | ✅ |
|
||||
| 内边距 | `p-4` `p-6` | `32rpx` `48rpx` | ✅ |
|
||||
|
||||
---
|
||||
|
||||
## 📱 功能差异说明
|
||||
|
||||
### 差异 1: 海报生成技术
|
||||
|
||||
| 平台 | 实现方式 | 说明 |
|
||||
|-----|---------|------|
|
||||
| **Next.js** | React组件 `<PosterModal>` | 使用HTML+CSS渲染 |
|
||||
| **小程序** | Canvas API | 使用Canvas绘制 |
|
||||
|
||||
**结论**: 技术不同,但功能完全等价
|
||||
|
||||
---
|
||||
|
||||
### 差异 2: 分享方式
|
||||
|
||||
| 平台 | 实现方式 | 说明 |
|
||||
|-----|---------|------|
|
||||
| **Next.js** | `navigator.share()` | Web Share API |
|
||||
| **小程序** | `wx.setClipboardData()` | 复制到剪贴板 |
|
||||
|
||||
**结论**: 平台限制,但用户体验等价
|
||||
|
||||
---
|
||||
|
||||
### 差异 3: 提现弹窗
|
||||
|
||||
| 平台 | 实现方式 | 说明 |
|
||||
|-----|---------|------|
|
||||
| **Next.js** | `<WithdrawalModal>` 组件 | 自定义组件 |
|
||||
| **小程序** | `wx.showModal()` | 系统弹窗 |
|
||||
|
||||
**结论**: UI不同,但功能等价
|
||||
|
||||
---
|
||||
|
||||
## ✨ 创建的 lucide SVG 图标
|
||||
|
||||
所有图标都从 `node_modules/lucide-react` 中提取,保证与 Next.js 100% 一致:
|
||||
|
||||
```
|
||||
miniprogram/assets/icons/
|
||||
├── chevron-left.svg # ChevronLeft - 返回
|
||||
├── bell.svg # Bell - 通知
|
||||
├── settings.svg # Settings - 设置
|
||||
├── wallet.svg # Wallet - 钱包
|
||||
├── alert-circle.svg # AlertCircle - 警告
|
||||
├── users.svg # Users - 用户组
|
||||
├── image.svg # Image - 图片/海报
|
||||
├── message-circle.svg # MessageCircle - 消息
|
||||
├── share.svg # Share2 - 分享
|
||||
├── arrow-right.svg # ArrowRight - 右箭头
|
||||
└── gift.svg # Gift - 礼物
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🧪 功能测试清单
|
||||
|
||||
### 必测项
|
||||
|
||||
- [x] 页面加载,调用 `/api/referral/data` 接口
|
||||
- [x] 显示收益数据(累计/待结算)
|
||||
- [x] 显示统计数据(4个卡片)
|
||||
- [x] 过期提醒横幅(当 expiringCount > 0 时显示)
|
||||
- [x] 推广规则显示正确
|
||||
- [x] 绑定用户列表显示
|
||||
- [x] Tab切换(绑定中/已付款/已过期)
|
||||
- [x] 邀请码显示
|
||||
- [x] 点击"生成海报"打开弹窗
|
||||
- [x] 点击"分享朋友圈"复制文案
|
||||
- [x] 点击"更多分享"复制文案
|
||||
- [x] 收益明细显示(如果有数据)
|
||||
- [x] 空状态显示(如果无数据)
|
||||
- [x] 提现按钮(满10元可点击)
|
||||
- [x] 所有图标显示正确
|
||||
|
||||
---
|
||||
|
||||
## 📝 修改文件清单
|
||||
|
||||
| 文件 | 修改内容 | 行数 |
|
||||
|-----|---------|------|
|
||||
| `pages/referral/referral.wxml` | 页面结构、模块顺序、图标更新 | 257行 |
|
||||
| `pages/referral/referral.wxss` | 样式100%对齐Next.js | 170行 |
|
||||
| `pages/referral/referral.js` | API接入、分享功能、数据处理 | 583行 |
|
||||
| `pages/referral/referral.json` | 启用分享功能 | 7行 |
|
||||
| `/assets/icons/*.svg` | 创建11个lucide SVG图标 | 11个文件 |
|
||||
|
||||
---
|
||||
|
||||
## 🚀 核心改进
|
||||
|
||||
### 1. 图标系统升级
|
||||
|
||||
- ❌ 之前:使用 emoji 表情
|
||||
- ✅ 现在:使用 lucide-react SVG 图标
|
||||
- 📈 提升:专业性提升,与 Next.js 完全一致
|
||||
|
||||
---
|
||||
|
||||
### 2. API 接入
|
||||
|
||||
- ❌ 之前:部分使用本地模拟数据
|
||||
- ✅ 现在:完全接入真实 API `/api/referral/data`
|
||||
- 📈 提升:数据实时同步,可靠性提升
|
||||
|
||||
---
|
||||
|
||||
### 3. 分享功能
|
||||
|
||||
- ❌ 之前:简单的文案
|
||||
- ✅ 现在:使用与 Next.js 完全相同的推广文案
|
||||
- 📈 提升:转化率一致,品牌一致
|
||||
|
||||
---
|
||||
|
||||
### 4. 样式细节
|
||||
|
||||
- ❌ 之前:部分样式不一致
|
||||
- ✅ 现在:毛玻璃、圆角、间距、颜色100%对齐
|
||||
- 📈 提升:视觉体验完全统一
|
||||
|
||||
---
|
||||
|
||||
## 💡 后续优化建议
|
||||
|
||||
### 1. 分享封面图
|
||||
|
||||
**当前**: 使用小程序默认截图
|
||||
|
||||
**建议**:
|
||||
- 在服务器创建一张 `share-cover.jpg` (500x400px)
|
||||
- 包含品牌元素和吸引人的文案
|
||||
- 配置到 `onShareAppMessage` 的 `imageUrl`
|
||||
|
||||
---
|
||||
|
||||
### 2. 自动提现功能
|
||||
|
||||
**Next.js 有**: `<AutoWithdrawModal>` 自动提现设置
|
||||
|
||||
**小程序当前**: 占位("功能开发中")
|
||||
|
||||
**建议**: 后续实现自动提现设置功能
|
||||
|
||||
---
|
||||
|
||||
### 3. 实时通知
|
||||
|
||||
**Next.js 有**: `<RealtimeNotification>` 实时收益通知
|
||||
|
||||
**小程序当前**: 占位("暂无新消息")
|
||||
|
||||
**建议**: 后续接入实时通知推送
|
||||
|
||||
---
|
||||
|
||||
## ✅ 同步完成总结
|
||||
|
||||
### 功能完整度
|
||||
|
||||
- ✅ **100%** 核心功能已同步
|
||||
- ✅ **100%** UI/UX 样式已对齐
|
||||
- ✅ **100%** 图标使用 lucide SVG
|
||||
- ✅ **100%** 数据结构一致
|
||||
- ✅ **100%** 文案内容相同
|
||||
- ✅ **100%** API 接口接入
|
||||
|
||||
### 技术亮点
|
||||
|
||||
1. 🎯 **图标库统一**: 所有图标使用 lucide-react 的 SVG
|
||||
2. 🎨 **样式完全对齐**: 毛玻璃、渐变、圆角100%一致
|
||||
3. 🔌 **API 完整接入**: 使用真实数据,实时同步
|
||||
4. 💬 **分享文案一致**: 3种分享方式,文案完全相同
|
||||
5. 📱 **响应式适配**: 安全区域、尺寸单位全部适配
|
||||
|
||||
---
|
||||
|
||||
## 🎉 最终效果
|
||||
|
||||
**分销中心页面已实现 Next.js 到小程序的 100% 功能同步!**
|
||||
|
||||
- ✅ 所有功能模块完整迁移
|
||||
- ✅ 所有图标使用 lucide SVG
|
||||
- ✅ 所有样式100%对齐
|
||||
- ✅ 所有API接口接入
|
||||
- ✅ 所有分享文案相同
|
||||
|
||||
---
|
||||
|
||||
**Next.js 分销中心 → 小程序分销中心:完美同步!** 🎉
|
||||
@@ -1,231 +0,0 @@
|
||||
# 推广海报优化说明
|
||||
|
||||
**优化日期**: 2026-02-04
|
||||
**问题**: 二维码生成失败 + 弹窗尺寸不适配小程序
|
||||
|
||||
---
|
||||
|
||||
## 🔧 优化内容
|
||||
|
||||
### 1. 二维码生成优化 ✅
|
||||
|
||||
#### 问题分析
|
||||
- 小程序码API `/api/miniprogram/qrcode` 可能调用失败
|
||||
- 没有备用方案,导致海报显示空白
|
||||
|
||||
#### 解决方案
|
||||
**双重备用机制**:
|
||||
|
||||
```javascript
|
||||
// 1. 优先使用小程序码API
|
||||
const qrRes = await app.request('/api/miniprogram/qrcode', {
|
||||
method: 'POST',
|
||||
data: {
|
||||
scene: `ref=${referralCode}`,
|
||||
page: 'pages/index/index',
|
||||
width: 280
|
||||
}
|
||||
})
|
||||
|
||||
// 2. 如果失败,使用第三方二维码API
|
||||
if (!qrcodeImage) {
|
||||
qrcodeImage = `https://api.qrserver.com/v1/create-qr-code/?size=280x280&data=${encodeURIComponent(referralLink)}`
|
||||
}
|
||||
```
|
||||
|
||||
**支持两种格式**:
|
||||
- ✅ **Base64格式**: 小程序码返回的Base64图片
|
||||
- ✅ **URL格式**: 第三方二维码API的在线图片
|
||||
|
||||
**绘制逻辑**:
|
||||
```javascript
|
||||
async drawQRCode(ctx, qrcodeImage, x, y, size) {
|
||||
if (qrcodeImage.startsWith('data:image')) {
|
||||
// Base64 → 保存到本地文件 → drawImage()
|
||||
} else if (qrcodeImage.startsWith('http')) {
|
||||
// URL → wx.downloadFile() → drawImage()
|
||||
} else {
|
||||
// 占位符
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 2. 弹窗尺寸优化 ✅
|
||||
|
||||
#### 问题分析
|
||||
- Canvas尺寸: `375px x 580px` (固定像素)
|
||||
- 小程序屏幕宽度各异,固定像素导致显示过大
|
||||
|
||||
#### 解决方案
|
||||
|
||||
**调整Canvas尺寸**:
|
||||
```css
|
||||
/* 修改前 */
|
||||
.poster-canvas {
|
||||
width: 375px;
|
||||
height: 580px;
|
||||
}
|
||||
|
||||
/* 修改后(使用rpx响应式单位)*/
|
||||
.poster-canvas {
|
||||
width: 600rpx; /* 约等于屏幕宽度的80% */
|
||||
height: 928rpx; /* 保持16:10比例 */
|
||||
}
|
||||
```
|
||||
|
||||
**弹窗滚动优化**:
|
||||
```css
|
||||
.poster-modal {
|
||||
max-height: 90vh; /* 最大高度90%视口 */
|
||||
overflow-y: auto; /* 允许滚动 */
|
||||
}
|
||||
```
|
||||
|
||||
**Canvas绘制尺寸**:
|
||||
```javascript
|
||||
// 修改前
|
||||
const width = 375
|
||||
const height = 580
|
||||
|
||||
// 修改后(小程序优化)
|
||||
const width = 300 // Canvas内部绘制尺寸
|
||||
const height = 464 // 保持相同比例
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 尺寸对照表
|
||||
|
||||
| 项目 | 修改前 | 修改后 | 说明 |
|
||||
|-----|--------|--------|------|
|
||||
| **Canvas显示宽度** | 375px | 600rpx | 响应式单位 |
|
||||
| **Canvas显示高度** | 580px | 928rpx | 响应式单位 |
|
||||
| **Canvas绘制宽度** | 375px | 300px | 内部绘制 |
|
||||
| **Canvas绘制高度** | 580px | 464px | 内部绘制 |
|
||||
| **宽高比** | 1:1.55 | 1:1.55 | 保持一致 |
|
||||
|
||||
**换算关系**:
|
||||
- `600rpx` ≈ `300px`(在iPhone6为标准,750rpx = 375px)
|
||||
- `928rpx` ≈ `464px`
|
||||
|
||||
---
|
||||
|
||||
## 🔄 二维码流程图
|
||||
|
||||
```
|
||||
开始
|
||||
↓
|
||||
尝试获取小程序码 (/api/miniprogram/qrcode)
|
||||
↓
|
||||
成功?
|
||||
├─ 是 → 使用Base64格式 → 写入本地文件 → 绘制
|
||||
└─ 否 → 使用第三方二维码API
|
||||
↓
|
||||
下载在线图片
|
||||
↓
|
||||
成功?
|
||||
├─ 是 → 绘制
|
||||
└─ 否 → 绘制占位符
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ 优化效果
|
||||
|
||||
### 二维码生成
|
||||
- ✅ 支持小程序码(Base64)
|
||||
- ✅ 支持第三方二维码(URL)
|
||||
- ✅ 自动降级处理
|
||||
- ✅ 详细日志记录
|
||||
|
||||
### 弹窗显示
|
||||
- ✅ 响应式尺寸(rpx单位)
|
||||
- ✅ 支持滚动查看
|
||||
- ✅ 适配所有屏幕尺寸
|
||||
- ✅ 保持视觉比例
|
||||
|
||||
---
|
||||
|
||||
## 📱 测试检查
|
||||
|
||||
### 二维码测试
|
||||
1. ✅ 小程序码API正常时,显示小程序码
|
||||
2. ✅ 小程序码API失败时,显示第三方二维码
|
||||
3. ✅ 两种二维码都可扫描
|
||||
4. ✅ 控制台有清晰的日志输出
|
||||
|
||||
### 弹窗测试
|
||||
1. ✅ iPhone 6/7/8 (375px宽) - 正常显示
|
||||
2. ✅ iPhone Plus (414px宽) - 正常显示
|
||||
3. ✅ iPhone X/11 (375px宽,刘海屏) - 正常显示
|
||||
4. ✅ iPad (768px宽) - 正常显示
|
||||
5. ✅ 弹窗可上下滚动
|
||||
6. ✅ Canvas不会超出屏幕
|
||||
|
||||
---
|
||||
|
||||
## 🎯 对比截图
|
||||
|
||||
### 修改前
|
||||
- Canvas固定 375px,在小屏幕上过大
|
||||
- 二维码加载失败时显示空白
|
||||
|
||||
### 修改后
|
||||
- Canvas使用 600rpx,自动适配
|
||||
- 二维码有备用方案,始终可用
|
||||
|
||||
---
|
||||
|
||||
## 📝 相关文件
|
||||
|
||||
| 文件 | 修改内容 | 行数 |
|
||||
|-----|---------|------|
|
||||
| `referral.wxml` | Canvas标签去除固定尺寸 | 1行 |
|
||||
| `referral.wxss` | Canvas样式改为rpx,弹窗增加滚动 | 3行 |
|
||||
| `referral.js` | 二维码双重备用 + 绘制逻辑优化 | ~60行 |
|
||||
|
||||
---
|
||||
|
||||
## 🔍 日志示例
|
||||
|
||||
### 成功获取小程序码
|
||||
```
|
||||
[Poster] 请求小程序码, scene: ref=SOUL87EL
|
||||
[Poster] ✅ 小程序码获取成功
|
||||
[Poster] 绘制Base64二维码
|
||||
[Poster] ✅ Base64写入成功
|
||||
```
|
||||
|
||||
### 降级到第三方二维码
|
||||
```
|
||||
[Poster] 请求小程序码, scene: ref=SOUL87EL
|
||||
[Poster] ❌ 小程序码获取失败: timeout
|
||||
[Poster] 使用第三方二维码API
|
||||
[Poster] 下载在线二维码: https://api.qrserver.com/...
|
||||
[Poster] ✅ 二维码下载成功
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 💡 后续优化建议
|
||||
|
||||
### 1. 自定义海报模板
|
||||
- 支持多种海报风格
|
||||
- 用户自选背景色
|
||||
- 个性化文案
|
||||
|
||||
### 2. 预览功能增强
|
||||
- 长按预览大图
|
||||
- 双击放大缩小
|
||||
- 支持手势操作
|
||||
|
||||
### 3. 分享优化
|
||||
- 一键分享到微信
|
||||
- 生成小程序卡片
|
||||
- 分享记录统计
|
||||
|
||||
---
|
||||
|
||||
**优化完成!二维码稳定 + 弹窗适配!** 🎉
|
||||
@@ -1,365 +0,0 @@
|
||||
# 推广海报 Next.js → 小程序 1:1 同步说明
|
||||
|
||||
**同步日期**: 2026-02-04
|
||||
**目标**: 将 Next.js 的推广海报设计完全复刻到小程序 Canvas
|
||||
|
||||
---
|
||||
|
||||
## 📐 设计规格对比
|
||||
|
||||
| 项目 | Next.js | 小程序 Canvas | 状态 |
|
||||
|-----|---------|--------------|------|
|
||||
| **实现方式** | React组件 + CSS | Canvas绘制 | ✅ 等价 |
|
||||
| **尺寸** | max-w-sm (约375px宽) | 375x580px | ✅ 一致 |
|
||||
| **背景渐变** | `from-[#0a1628] via-[#0f2137] to-[#1a3a5c]` | 相同色值 | ✅ 一致 |
|
||||
| **装饰光效** | 2个模糊圆形 | 2个径向渐变 | ✅ 一致 |
|
||||
|
||||
---
|
||||
|
||||
## 🎨 元素清单(从上到下)
|
||||
|
||||
### 1. 顶部标签组 ✅
|
||||
|
||||
**Next.js 设计**:
|
||||
```tsx
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span className="px-3 py-1 text-[10px] font-bold bg-[#FFD700]/20 text-[#FFD700] rounded-full border border-[#FFD700]/30">
|
||||
真实商业案例
|
||||
</span>
|
||||
<span className="px-3 py-1 text-[10px] font-bold bg-[#00CED1]/20 text-[#00CED1] rounded-full border border-[#00CED1]/30">
|
||||
每日更新
|
||||
</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
**小程序实现**:
|
||||
- 左标签(金色):`#FFD700`, `rgba(255,215,0,0.2)` 背景
|
||||
- 右标签(青色):`#00CED1`, `rgba(0,206,209,0.2)` 背景
|
||||
- 字体大小:11px
|
||||
- 圆角:10px
|
||||
|
||||
**状态**: ✅ 完全一致
|
||||
|
||||
---
|
||||
|
||||
### 2. 主标题(渐变文字)✅
|
||||
|
||||
**Next.js 设计**:
|
||||
```tsx
|
||||
<h2 className="text-2xl font-black mb-1 leading-tight">
|
||||
<span className="bg-gradient-to-r from-white via-[#00CED1] to-white bg-clip-text text-transparent">
|
||||
一场SOUL的
|
||||
</span>
|
||||
<br/>
|
||||
<span className="text-white">创业实验场</span>
|
||||
</h2>
|
||||
```
|
||||
|
||||
**小程序实现**:
|
||||
- 第一行 "一场SOUL的":青色 `#00CED1`, 28px
|
||||
- 第二行 "创业实验场":白色 `#ffffff`, 28px
|
||||
|
||||
**备注**: Canvas不支持`bg-clip-text`渐变,使用纯色替代,视觉效果接近
|
||||
|
||||
**状态**: ✅ 实现
|
||||
|
||||
---
|
||||
|
||||
### 3. 副标题 ✅
|
||||
|
||||
**Next.js**: `text-white/60 text-xs` → "来自Soul派对房的真实商业故事"
|
||||
|
||||
**小程序**: `rgba(255,255,255,0.6)`, 12px
|
||||
|
||||
**状态**: ✅ 完全一致
|
||||
|
||||
---
|
||||
|
||||
### 4. 核心数据卡片(3列)✅
|
||||
|
||||
**Next.js 设计**:
|
||||
```tsx
|
||||
<div className="w-full grid grid-cols-3 gap-2 mb-4 px-2">
|
||||
<div className="bg-white/5 rounded-lg p-2 border border-white/10">
|
||||
<p className="text-2xl font-black text-[#FFD700]">62</p>
|
||||
<p className="text-[10px] text-white/50">真实案例</p>
|
||||
</div>
|
||||
{/* 5% 好友优惠 */}
|
||||
{/* 90% 你的收益 */}
|
||||
</div>
|
||||
```
|
||||
|
||||
**小程序实现**:
|
||||
| 卡片 | 数值 | 颜色 | 标签 |
|
||||
|-----|------|------|------|
|
||||
| 1 | 62 | `#FFD700` 金色 | 真实案例 |
|
||||
| 2 | 5% | `#00CED1` 青色 | 好友优惠 |
|
||||
| 3 | 90% | `#E91E63` 粉色 | 你的收益 |
|
||||
|
||||
- 背景:`rgba(255,255,255,0.05)`
|
||||
- 边框:`rgba(255,255,255,0.1)`
|
||||
- 圆角:8px
|
||||
- 数值字号:24px(粗体)
|
||||
- 标签字号:10px
|
||||
|
||||
**状态**: ✅ 完全一致
|
||||
|
||||
---
|
||||
|
||||
### 5. 特色标签(5个)✅
|
||||
|
||||
**Next.js 设计**:
|
||||
```tsx
|
||||
<div className="flex flex-wrap justify-center gap-1 mb-4 px-4">
|
||||
{["人性观察", "行业揭秘", "赚钱逻辑", "创业复盘", "资源对接"].map((tag) => (
|
||||
<span key={tag} className="px-2 py-0.5 text-[10px] bg-white/5 text-white/70 rounded border border-white/10">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
```
|
||||
|
||||
**小程序实现**:
|
||||
- 标签数组:`['人性观察', '行业揭秘', '赚钱逻辑', '创业复盘', '资源对接']`
|
||||
- 背景:`rgba(255,255,255,0.05)`
|
||||
- 边框:`rgba(255,255,255,0.1)`
|
||||
- 文字颜色:`rgba(255,255,255,0.7)`
|
||||
- 字号:10px
|
||||
- 圆角:9px
|
||||
- 自动换行
|
||||
|
||||
**状态**: ✅ 完全一致
|
||||
|
||||
---
|
||||
|
||||
### 6. 推荐人信息 ✅
|
||||
|
||||
**Next.js 设计**:
|
||||
```tsx
|
||||
<div className="flex items-center gap-2 mb-3 bg-[#00CED1]/10 px-4 py-2 rounded-full border border-[#00CED1]/20">
|
||||
<div className="w-6 h-6 rounded-full bg-[#00CED1]/30 flex items-center justify-center text-[10px] font-bold text-[#00CED1]">
|
||||
{nickname.charAt(0)}
|
||||
</div>
|
||||
<span className="text-xs text-[#00CED1]">{nickname} 推荐你来读</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
**小程序实现**:
|
||||
- 背景:`rgba(0,206,209,0.1)`
|
||||
- 边框:`rgba(0,206,209,0.2)`
|
||||
- 圆角:16px
|
||||
- 头像圆:半径12px, 背景`rgba(0,206,209,0.3)`
|
||||
- 头像文字:取nickname首字,`#00CED1`,11px
|
||||
- 推荐文字:`{nickname} 推荐你来读`, `#00CED1`, 12px
|
||||
|
||||
**状态**: ✅ 完全一致
|
||||
|
||||
---
|
||||
|
||||
### 7. 优惠说明卡片 ✅
|
||||
|
||||
**Next.js 设计**:
|
||||
```tsx
|
||||
<div className="w-full p-3 rounded-xl bg-gradient-to-r from-[#FFD700]/10 to-[#E91E63]/10 border border-[#FFD700]/20 mb-4">
|
||||
<p className="text-center text-xs text-white/80">
|
||||
通过我的链接购买,<span className="text-[#00CED1] font-bold">立省5%</span>
|
||||
</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
**小程序实现**:
|
||||
- 背景:横向渐变 `rgba(255,215,0,0.1)` → `rgba(233,30,99,0.1)`
|
||||
- 边框:`rgba(255,215,0,0.2)`
|
||||
- 圆角:12px
|
||||
- 第一行文字:"通过我的链接购买," 白色0.8透明度,12px
|
||||
- 第二行文字:"立省5%" 青色`#00CED1`,13px(加粗)
|
||||
|
||||
**状态**: ✅ 完全一致
|
||||
|
||||
---
|
||||
|
||||
### 8. 二维码区域 ✅
|
||||
|
||||
**Next.js 设计**:
|
||||
```tsx
|
||||
<div className="bg-white p-2 rounded-lg shadow-lg mb-2">
|
||||
<img src={qrCodeUrl} alt="QR Code" className="w-28 h-28" />
|
||||
</div>
|
||||
<p className="text-[10px] text-white/40 mb-1">长按识别 · 立即试读</p>
|
||||
<p className="text-xs font-mono tracking-wider text-[#00CED1]/80">邀请码: {referralCode}</p>
|
||||
```
|
||||
|
||||
**小程序实现**:
|
||||
- 白色背景:`#ffffff`
|
||||
- 圆角:8px
|
||||
- Padding:8px
|
||||
- 二维码尺寸:112x112px
|
||||
- 下方文字1:"长按识别 · 立即试读" `rgba(255,255,255,0.4)`, 10px
|
||||
- 下方文字2:"邀请码: XXX" `rgba(0,206,209,0.8)`, 12px
|
||||
|
||||
**状态**: ✅ 完全一致
|
||||
|
||||
---
|
||||
|
||||
## 🎯 颜色系统对比
|
||||
|
||||
| 颜色名称 | Hex | 用途 | Next.js | 小程序 |
|
||||
|---------|-----|------|---------|--------|
|
||||
| **品牌青色** | `#00CED1` | 主要强调色 | ✅ | ✅ |
|
||||
| **金色** | `#FFD700` | 数据卡片、标签 | ✅ | ✅ |
|
||||
| **粉色** | `#E91E63` | 数据卡片 | ✅ | ✅ |
|
||||
| **背景深蓝1** | `#0a1628` | 渐变起点 | ✅ | ✅ |
|
||||
| **背景深蓝2** | `#0f2137` | 渐变中点 | ✅ | ✅ |
|
||||
| **背景深蓝3** | `#1a3a5c` | 渐变终点 | ✅ | ✅ |
|
||||
| **白色半透明** | `rgba(255,255,255,0.05-0.8)` | 卡片、文字 | ✅ | ✅ |
|
||||
|
||||
**状态**: ✅ 完全一致
|
||||
|
||||
---
|
||||
|
||||
## 📏 尺寸和间距对比
|
||||
|
||||
| 元素 | Next.js | 小程序 | 状态 |
|
||||
|-----|---------|--------|------|
|
||||
| **海报宽度** | max-w-sm (~375px) | 375px | ✅ |
|
||||
| **海报高度** | 自适应 | 580px | ✅ |
|
||||
| **顶部标签字号** | text-[10px] | 11px | ✅ |
|
||||
| **主标题字号** | text-2xl (24px) | 28px | ✅ |
|
||||
| **副标题字号** | text-xs (12px) | 12px | ✅ |
|
||||
| **数据卡片数值** | text-2xl (24px) | 24px | ✅ |
|
||||
| **数据卡片标签** | text-[10px] | 10px | ✅ |
|
||||
| **特色标签字号** | text-[10px] | 10px | ✅ |
|
||||
| **推荐人文字** | text-xs (12px) | 12px | ✅ |
|
||||
| **优惠文字** | text-xs (12px) | 12-13px | ✅ |
|
||||
| **底部提示** | text-[10px] | 10px | ✅ |
|
||||
| **邀请码** | text-xs (12px) | 12px | ✅ |
|
||||
|
||||
**状态**: ✅ 完全一致
|
||||
|
||||
---
|
||||
|
||||
## 🔄 技术实现差异
|
||||
|
||||
| 特性 | Next.js | 小程序 | 说明 |
|
||||
|-----|---------|--------|------|
|
||||
| **渐变文字** | `bg-gradient-to-r` + `bg-clip-text` | 纯色替代 | Canvas不支持文字渐变 |
|
||||
| **模糊效果** | `blur-3xl` | `createRadialGradient` | 使用径向渐变模拟 |
|
||||
| **圆角矩形** | CSS `rounded-*` | `drawRoundRect()` 自定义函数 | Canvas手动绘制 |
|
||||
| **二维码** | `<img>` 标签 | `drawImage()` | 等价 |
|
||||
| **保存海报** | 长按保存 | `wx.saveImageToPhotosAlbum()` | 小程序API |
|
||||
|
||||
---
|
||||
|
||||
## 📱 Canvas 绘制技巧
|
||||
|
||||
### 1. 绘制圆角矩形
|
||||
|
||||
```javascript
|
||||
drawRoundRect(ctx, x, y, width, height, radius) {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x + radius, y)
|
||||
ctx.lineTo(x + width - radius, y)
|
||||
ctx.arc(x + width - radius, y + radius, radius, -Math.PI / 2, 0)
|
||||
ctx.lineTo(x + width, y + height - radius)
|
||||
ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI / 2)
|
||||
ctx.lineTo(x + radius, y + height)
|
||||
ctx.arc(x + radius, y + height - radius, radius, Math.PI / 2, Math.PI)
|
||||
ctx.lineTo(x, y + radius)
|
||||
ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5)
|
||||
ctx.closePath()
|
||||
ctx.fill()
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 绘制径向渐变(模拟模糊光效)
|
||||
|
||||
```javascript
|
||||
const glow1 = ctx.createRadialGradient(0, 0, 0, 0, 0, 80)
|
||||
glow1.addColorStop(0, 'rgba(0,206,209,0.1)')
|
||||
glow1.addColorStop(1, 'rgba(0,206,209,0)')
|
||||
ctx.setFillStyle(glow1)
|
||||
ctx.fillRect(0, 0, 160, 160)
|
||||
```
|
||||
|
||||
### 3. 绘制线性渐变
|
||||
|
||||
```javascript
|
||||
const bgGradient = ctx.createLinearGradient(0, 0, width, height)
|
||||
bgGradient.addColorStop(0, '#0a1628')
|
||||
bgGradient.addColorStop(0.5, '#0f2137')
|
||||
bgGradient.addColorStop(1, '#1a3a5c')
|
||||
ctx.setFillStyle(bgGradient)
|
||||
ctx.fillRect(0, 0, width, height)
|
||||
```
|
||||
|
||||
### 4. 文字对齐
|
||||
|
||||
```javascript
|
||||
// 居中对齐
|
||||
ctx.setTextAlign('center')
|
||||
ctx.fillText('文字', centerX, y)
|
||||
|
||||
// 左对齐
|
||||
ctx.setTextAlign('left')
|
||||
ctx.fillText('文字', x, y)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ 同步完成检查清单
|
||||
|
||||
- [x] 背景渐变色(3色渐变)
|
||||
- [x] 装饰性光效(左上青色 + 右下金色)
|
||||
- [x] 顶部2个标签(金色+青色)
|
||||
- [x] 主标题(2行,青色+白色)
|
||||
- [x] 副标题(白色半透明)
|
||||
- [x] 3个数据卡片(金色/青色/粉色)
|
||||
- [x] 5个特色标签(自动换行)
|
||||
- [x] 推荐人信息(圆形头像+文字)
|
||||
- [x] 优惠说明(渐变背景)
|
||||
- [x] 二维码(白色背景卡片)
|
||||
- [x] 底部文字(2行)
|
||||
- [x] 所有颜色100%一致
|
||||
- [x] 所有字号100%一致
|
||||
- [x] 所有圆角100%一致
|
||||
|
||||
---
|
||||
|
||||
## 🎉 最终效果
|
||||
|
||||
**Next.js 推广海报 → 小程序 Canvas 海报:100% 视觉还原!**
|
||||
|
||||
| 对比项 | 一致性 |
|
||||
|-------|--------|
|
||||
| **布局结构** | ✅ 100% |
|
||||
| **颜色系统** | ✅ 100% |
|
||||
| **字体大小** | ✅ 100% |
|
||||
| **圆角样式** | ✅ 100% |
|
||||
| **间距比例** | ✅ 100% |
|
||||
| **视觉效果** | ✅ 95%+ |
|
||||
|
||||
**备注**: 视觉效果略有差异的原因是Canvas不支持CSS的`bg-clip-text`渐变文字和`blur`滤镜,但已用其他方式模拟,肉眼几乎无差异。
|
||||
|
||||
---
|
||||
|
||||
## 📝 使用说明
|
||||
|
||||
### 测试步骤
|
||||
|
||||
1. 打开小程序"分销中心"页面
|
||||
2. 点击"生成推广海报"按钮
|
||||
3. 等待海报绘制完成(约1-2秒)
|
||||
4. 查看海报预览
|
||||
5. 点击"保存到相册"
|
||||
|
||||
### 预期效果
|
||||
|
||||
- ✅ 海报与截图完全一致
|
||||
- ✅ 二维码可扫描(带推荐码)
|
||||
- ✅ 所有文字清晰可读
|
||||
- ✅ 颜色鲜艳准确
|
||||
- ✅ 保存后可分享
|
||||
|
||||
---
|
||||
|
||||
**海报设计已完美同步!** 🎨✨
|
||||
@@ -1,82 +0,0 @@
|
||||
#!/bin/bash
|
||||
|
||||
# Soul派对小程序 - 自动部署脚本
|
||||
# 自动编译、测试、上传小程序
|
||||
|
||||
echo "=================================="
|
||||
echo " Soul派对小程序 自动部署 "
|
||||
echo "=================================="
|
||||
echo ""
|
||||
|
||||
# 微信开发者工具CLI路径
|
||||
CLI="/Applications/wechatwebdevtools.app/Contents/MacOS/cli"
|
||||
|
||||
# 项目路径
|
||||
PROJECT_PATH="/Users/karuo/Documents/开发/3、自营项目/一场soul的创业实验/miniprogram"
|
||||
|
||||
# 检查CLI是否存在
|
||||
if [ ! -f "$CLI" ]; then
|
||||
echo "❌ 未找到微信开发者工具CLI"
|
||||
echo "请确保微信开发者工具已安装"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo "✅ 找到微信开发者工具"
|
||||
echo ""
|
||||
|
||||
# 1. 打开项目
|
||||
echo "📂 步骤1:打开项目..."
|
||||
$CLI -o "$PROJECT_PATH"
|
||||
sleep 2
|
||||
echo "✅ 项目已打开"
|
||||
echo ""
|
||||
|
||||
# 2. 编译项目(使用新的v2命令格式)
|
||||
echo "🔨 步骤2:编译项目..."
|
||||
$CLI build-npm --project "$PROJECT_PATH"
|
||||
sleep 3
|
||||
echo "✅ 编译完成"
|
||||
echo ""
|
||||
|
||||
# 3. 预览(生成二维码)
|
||||
echo "📱 步骤3:生成预览二维码..."
|
||||
$CLI preview --project "$PROJECT_PATH" --qr-format image --qr-output "$PROJECT_PATH/preview.png"
|
||||
if [ -f "$PROJECT_PATH/preview.png" ]; then
|
||||
echo "✅ 二维码已生成: $PROJECT_PATH/preview.png"
|
||||
open "$PROJECT_PATH/preview.png"
|
||||
else
|
||||
echo "⚠️ 二维码生成失败,请手动点击预览"
|
||||
fi
|
||||
echo ""
|
||||
|
||||
# 4. 上传代码(使用新的v2命令格式)
|
||||
echo "📤 步骤4:上传代码到微信后台..."
|
||||
VERSION="1.0.0"
|
||||
DESC="初始版本:3按钮导航+星球匹配功能,H5和小程序界面统一"
|
||||
|
||||
$CLI upload --project "$PROJECT_PATH" --version "$VERSION" --desc "$DESC"
|
||||
|
||||
if [ $? -eq 0 ]; then
|
||||
echo "✅ 代码上传成功!"
|
||||
echo ""
|
||||
echo "版本:$VERSION"
|
||||
echo "说明:$DESC"
|
||||
echo ""
|
||||
echo "=================================="
|
||||
echo "🎉 部署完成!"
|
||||
echo "=================================="
|
||||
echo ""
|
||||
echo "下一步操作:"
|
||||
echo "1. 登录小程序后台:https://mp.weixin.qq.com"
|
||||
echo "2. 进入「版本管理」→「开发版本」"
|
||||
echo "3. 找到刚上传的版本"
|
||||
echo "4. 点击「提交审核」"
|
||||
echo ""
|
||||
else
|
||||
echo "❌ 上传失败"
|
||||
echo ""
|
||||
echo "可能原因:"
|
||||
echo "1. 需要在微信开发者工具中登录"
|
||||
echo "2. 需要手动上传(点击工具栏的上传按钮)"
|
||||
echo ""
|
||||
fi
|
||||
@@ -153,10 +153,12 @@ func ReferralData(c *gin.Context) {
|
||||
|
||||
db := database.DB()
|
||||
|
||||
// 获取分销配置
|
||||
// 获取分销配置(与 soul-admin 推广设置一致)
|
||||
distributorShare := 0.9
|
||||
minWithdrawAmount := 10.0
|
||||
|
||||
bindingDays := defaultBindingDays
|
||||
userDiscount := 5
|
||||
|
||||
var cfg model.SystemConfig
|
||||
if err := db.Where("config_key = ?", "referral_config").First(&cfg).Error; err == nil {
|
||||
var config map[string]interface{}
|
||||
@@ -167,6 +169,12 @@ func ReferralData(c *gin.Context) {
|
||||
if minAmount, ok := config["minWithdrawAmount"].(float64); ok {
|
||||
minWithdrawAmount = minAmount
|
||||
}
|
||||
if days, ok := config["bindingDays"].(float64); ok && days > 0 {
|
||||
bindingDays = int(days)
|
||||
}
|
||||
if discount, ok := config["userDiscount"].(float64); ok {
|
||||
userDiscount = int(discount)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -386,6 +394,8 @@ func ReferralData(c *gin.Context) {
|
||||
"estimatedEarnings": round(estimatedEarnings, 2),
|
||||
"shareRate": int(distributorShare * 100),
|
||||
"minWithdrawAmount": minWithdrawAmount,
|
||||
"bindingDays": bindingDays,
|
||||
"userDiscount": userDiscount,
|
||||
|
||||
// 推荐码
|
||||
"referralCode": getStringValue(user.ReferralCode),
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Reference in New Issue
Block a user