diff --git a/miniprogram/pages/referral/referral.js b/miniprogram/pages/referral/referral.js index 45415511..fa4db3fd 100644 --- a/miniprogram/pages/referral/referral.js +++ b/miniprogram/pages/referral/referral.js @@ -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, diff --git a/miniprogram/pages/referral/referral.wxml b/miniprogram/pages/referral/referral.wxml index d8978fa7..eb129a40 100644 --- a/miniprogram/pages/referral/referral.wxml +++ b/miniprogram/pages/referral/referral.wxml @@ -26,7 +26,7 @@ @@ -86,9 +86,9 @@ 推广规则 - • 好友通过你的链接购买,立享5%优惠 + • 好友通过你的链接购买,立享{{userDiscount}}%优惠 • 好友成功付款后,你获得 {{shareRate}}% 收益 - • 绑定期30天,期满未付款自动解除 + • 绑定期{{bindingDays}}天,期满未付款自动解除 @@ -282,7 +282,7 @@ 真实案例 - 5% + {{userDiscount}}% 好友优惠 @@ -310,7 +310,7 @@ - 通过我的链接购买,立省5% + 通过我的链接购买,立省{{userDiscount}}% diff --git a/miniprogram/分销中心Next同步完成报告.md b/miniprogram/分销中心Next同步完成报告.md deleted file mode 100644 index 555516f6..00000000 --- a/miniprogram/分销中心Next同步完成报告.md +++ /dev/null @@ -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 文件 | 状态 | -|-----|-------------|---------------|------| -| 返回按钮 | `` | `/assets/icons/chevron-left.svg` | ✅ | -| 通知按钮 | `` | `/assets/icons/bell.svg` | ✅ | -| 设置按钮 | `` | `/assets/icons/settings.svg` | ✅ | -| 过期横幅 | `` | `/assets/icons/bell.svg` | ✅ | -| 收益卡片 | `` | `/assets/icons/wallet.svg` | ✅ | -| 推广规则 | `` | `/assets/icons/alert-circle.svg` | ✅ | -| 绑定用户 | `` | `/assets/icons/users.svg` | ✅ | -| 生成海报 | `` | `/assets/icons/image.svg` | ✅ | -| 分享朋友圈 | `` | `/assets/icons/message-circle.svg` | ✅ | -| 更多分享 | `` | `/assets/icons/share.svg` | ✅ | -| 箭头 | `` | `/assets/icons/arrow-right.svg` | ✅ | -| 收益明细 | `` | `/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: 使用 `` 组件 -- 小程序: 使用 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组件 `` | 使用HTML+CSS渲染 | -| **小程序** | Canvas API | 使用Canvas绘制 | - -**结论**: 技术不同,但功能完全等价 - ---- - -### 差异 2: 分享方式 - -| 平台 | 实现方式 | 说明 | -|-----|---------|------| -| **Next.js** | `navigator.share()` | Web Share API | -| **小程序** | `wx.setClipboardData()` | 复制到剪贴板 | - -**结论**: 平台限制,但用户体验等价 - ---- - -### 差异 3: 提现弹窗 - -| 平台 | 实现方式 | 说明 | -|-----|---------|------| -| **Next.js** | `` 组件 | 自定义组件 | -| **小程序** | `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 有**: `` 自动提现设置 - -**小程序当前**: 占位("功能开发中") - -**建议**: 后续实现自动提现设置功能 - ---- - -### 3. 实时通知 - -**Next.js 有**: `` 实时收益通知 - -**小程序当前**: 占位("暂无新消息") - -**建议**: 后续接入实时通知推送 - ---- - -## ✅ 同步完成总结 - -### 功能完整度 - -- ✅ **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 分销中心 → 小程序分销中心:完美同步!** 🎉 diff --git a/miniprogram/海报优化说明.md b/miniprogram/海报优化说明.md deleted file mode 100644 index 56098e42..00000000 --- a/miniprogram/海报优化说明.md +++ /dev/null @@ -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. 分享优化 -- 一键分享到微信 -- 生成小程序卡片 -- 分享记录统计 - ---- - -**优化完成!二维码稳定 + 弹窗适配!** 🎉 diff --git a/miniprogram/海报设计Next同步说明.md b/miniprogram/海报设计Next同步说明.md deleted file mode 100644 index 3d98ab5f..00000000 --- a/miniprogram/海报设计Next同步说明.md +++ /dev/null @@ -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 -
- - 真实商业案例 - - - 每日更新 - -
-``` - -**小程序实现**: -- 左标签(金色):`#FFD700`, `rgba(255,215,0,0.2)` 背景 -- 右标签(青色):`#00CED1`, `rgba(0,206,209,0.2)` 背景 -- 字体大小:11px -- 圆角:10px - -**状态**: ✅ 完全一致 - ---- - -### 2. 主标题(渐变文字)✅ - -**Next.js 设计**: -```tsx -

- - 一场SOUL的 - -
- 创业实验场 -

-``` - -**小程序实现**: -- 第一行 "一场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 -
-
-

62

-

真实案例

-
- {/* 5% 好友优惠 */} - {/* 90% 你的收益 */} -
-``` - -**小程序实现**: -| 卡片 | 数值 | 颜色 | 标签 | -|-----|------|------|------| -| 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 -
- {["人性观察", "行业揭秘", "赚钱逻辑", "创业复盘", "资源对接"].map((tag) => ( - - {tag} - - ))} -
-``` - -**小程序实现**: -- 标签数组:`['人性观察', '行业揭秘', '赚钱逻辑', '创业复盘', '资源对接']` -- 背景:`rgba(255,255,255,0.05)` -- 边框:`rgba(255,255,255,0.1)` -- 文字颜色:`rgba(255,255,255,0.7)` -- 字号:10px -- 圆角:9px -- 自动换行 - -**状态**: ✅ 完全一致 - ---- - -### 6. 推荐人信息 ✅ - -**Next.js 设计**: -```tsx -
-
- {nickname.charAt(0)} -
- {nickname} 推荐你来读 -
-``` - -**小程序实现**: -- 背景:`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 -
-

- 通过我的链接购买,立省5% -

-
-``` - -**小程序实现**: -- 背景:横向渐变 `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 -
- QR Code -
-

长按识别 · 立即试读

-

邀请码: {referralCode}

-``` - -**小程序实现**: -- 白色背景:`#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手动绘制 | -| **二维码** | `` 标签 | `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. 点击"保存到相册" - -### 预期效果 - -- ✅ 海报与截图完全一致 -- ✅ 二维码可扫描(带推荐码) -- ✅ 所有文字清晰可读 -- ✅ 颜色鲜艳准确 -- ✅ 保存后可分享 - ---- - -**海报设计已完美同步!** 🎨✨ diff --git a/miniprogram/自动部署.sh b/miniprogram/自动部署.sh deleted file mode 100644 index b35844dd..00000000 --- a/miniprogram/自动部署.sh +++ /dev/null @@ -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 diff --git a/soul-api/internal/handler/referral.go b/soul-api/internal/handler/referral.go index 216b636e..ff93eddf 100644 --- a/soul-api/internal/handler/referral.go +++ b/soul-api/internal/handler/referral.go @@ -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), diff --git a/soul-api/server.exe b/soul-api/server.exe index 61dc23ae..7d916265 100644 Binary files a/soul-api/server.exe and b/soul-api/server.exe differ diff --git a/soul-api/tmp/main.exe b/soul-api/tmp/main.exe index 61dc23ae..7d916265 100644 Binary files a/soul-api/tmp/main.exe and b/soul-api/tmp/main.exe differ