feat: 海报生成功能+推广优化

1. 阅读页:
   - 添加"生成海报"和"分享给好友"按钮
   - 海报包含章节摘要+邀请码+小程序码占位
   - 优化推广提示区域,添加推广中心入口

2. 分销中心:
   - 完善海报生成功能(推广海报)
   - 去掉"更多分享方式",改为"复制朋友圈文案"
   - 添加"分享给好友"小程序卡片按钮

3. 分享链接自动带分销ID
This commit is contained in:
卡若
2026-01-25 19:52:38 +08:00
parent 4dd2f9f4a7
commit a702cd9086
6 changed files with 551 additions and 56 deletions

View File

@@ -29,7 +29,11 @@ Page({
convertedBindings: [],
expiredBindings: [],
currentBindings: [],
totalBindings: 0
totalBindings: 0,
// 海报
showPosterModal: false,
isGeneratingPoster: false
},
onLoad() {
@@ -133,10 +137,152 @@ Page({
})
},
// 生成海报
generatePoster() {
wx.showToast({ title: '海报功能开发中', icon: 'none' })
// 生成推广海报
async generatePoster() {
wx.showLoading({ title: '生成中...' })
this.setData({ showPosterModal: true, isGeneratingPoster: true })
try {
const ctx = wx.createCanvasContext('promoPosterCanvas', this)
const { referralCode, userInfo, earnings, referralCount, distributorShare } = this.data
// 海报尺寸 300x450
const width = 300
const height = 450
// 背景渐变
const grd = ctx.createLinearGradient(0, 0, 0, height)
grd.addColorStop(0, '#0f0c29')
grd.addColorStop(0.5, '#302b63')
grd.addColorStop(1, '#24243e')
ctx.setFillStyle(grd)
ctx.fillRect(0, 0, width, height)
// 顶部装饰
ctx.setFillStyle('#FFD700')
ctx.fillRect(0, 0, width, 5)
// 标题
ctx.setFillStyle('#FFD700')
ctx.setFontSize(20)
ctx.fillText('📚 Soul创业派对', 20, 45)
// 副标题
ctx.setFillStyle('rgba(255,255,255,0.8)')
ctx.setFontSize(12)
ctx.fillText('来自派对房的真实商业故事', 20, 70)
// 书籍介绍区域
ctx.setFillStyle('rgba(255,255,255,0.05)')
ctx.fillRect(15, 90, width - 30, 100)
ctx.setFillStyle('#ffffff')
ctx.setFontSize(14)
ctx.fillText('✨ 62个真实商业案例', 25, 115)
ctx.fillText('💡 私域运营实战经验', 25, 140)
ctx.fillText('🎯 从0到1创业方法论', 25, 165)
// 推广者信息
ctx.setFillStyle('#00CED1')
ctx.setFontSize(13)
ctx.fillText(`推荐人: ${userInfo?.nickname || '创业者'}`, 20, 220)
// 统计数据
ctx.setFillStyle('rgba(255,255,255,0.6)')
ctx.setFontSize(11)
ctx.fillText(`已推荐 ${referralCount} 人 · 累计收益 ¥${parseFloat(earnings || 0).toFixed(0)}`, 20, 245)
// 优惠信息
ctx.setFillStyle('rgba(255,215,0,0.15)')
ctx.fillRect(15, 265, width - 30, 50)
ctx.setFillStyle('#FFD700')
ctx.setFontSize(14)
ctx.fillText('🎁 专属福利', 25, 290)
ctx.setFillStyle('#ffffff')
ctx.setFontSize(12)
ctx.fillText('通过此码购买立享5%优惠', 25, 308)
// 底部区域
ctx.setFillStyle('rgba(0,206,209,0.1)')
ctx.fillRect(0, height - 110, width, 110)
// 邀请码
ctx.setFillStyle('#ffffff')
ctx.setFontSize(12)
ctx.fillText('我的邀请码', 20, height - 85)
ctx.setFillStyle('#00CED1')
ctx.setFontSize(22)
ctx.fillText(referralCode, 20, height - 55)
// 小程序码占位
ctx.setFillStyle('#ffffff')
ctx.beginPath()
ctx.arc(width - 55, height - 55, 40, 0, Math.PI * 2)
ctx.fill()
ctx.setFillStyle('#00CED1')
ctx.setFontSize(9)
ctx.fillText('扫码', width - 62, height - 55)
ctx.fillText('购买', width - 62, height - 42)
// 底部提示
ctx.setFillStyle('rgba(255,255,255,0.5)')
ctx.setFontSize(10)
ctx.fillText(`推广返利 ${distributorShare}%`, 20, height - 20)
ctx.draw(true, () => {
wx.hideLoading()
this.setData({ isGeneratingPoster: false })
})
} catch (e) {
console.error('生成海报失败:', e)
wx.hideLoading()
wx.showToast({ title: '生成失败', icon: 'none' })
this.setData({ showPosterModal: false, isGeneratingPoster: false })
}
},
// 关闭海报弹窗
closePosterModal() {
this.setData({ showPosterModal: false })
},
// 保存海报
savePoster() {
wx.canvasToTempFilePath({
canvasId: 'promoPosterCanvas',
success: (res) => {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: () => {
wx.showToast({ title: '已保存到相册', icon: 'success' })
this.setData({ showPosterModal: false })
},
fail: (err) => {
if (err.errMsg.includes('auth deny')) {
wx.showModal({
title: '提示',
content: '需要相册权限才能保存海报',
confirmText: '去设置',
success: (res) => {
if (res.confirm) {
wx.openSetting()
}
}
})
} else {
wx.showToast({ title: '保存失败', icon: 'none' })
}
}
})
},
fail: () => {
wx.showToast({ title: '生成图片失败', icon: 'none' })
}
}, this)
},
// 阻止冒泡
stopPropagation() {},
// 分享到朋友圈
shareToMoments() {

View File

@@ -172,23 +172,47 @@
<text class="share-arrow">→</text>
</view>
<view class="share-item" bindtap="shareToMoments">
<button class="share-item share-btn-wechat" open-type="share">
<view class="share-icon wechat">💬</view>
<view class="share-info">
<text class="share-title">分享到朋友圈</text>
<text class="share-desc">复制文案发朋友圈</text>
<text class="share-title">分享给好友</text>
<text class="share-desc">直接发送小程序卡片</text>
</view>
<text class="share-arrow">→</text>
</view>
</button>
<view class="share-item" bindtap="copyLink">
<view class="share-icon link">🔗</view>
<view class="share-item" bindtap="shareToMoments">
<view class="share-icon link">📝</view>
<view class="share-info">
<text class="share-title">更多分享方式</text>
<text class="share-desc">使用系统分享功能</text>
<text class="share-title">复制朋友圈文案</text>
<text class="share-desc">一键复制推广文案</text>
</view>
<text class="share-arrow">→</text>
</view>
</view>
</view>
<!-- 海报生成弹窗 -->
<view class="modal-overlay" wx:if="{{showPosterModal}}" bindtap="closePosterModal">
<view class="modal-content poster-modal" catchtap="stopPropagation">
<view class="modal-header">
<text class="modal-title">推广海报</text>
<view class="modal-close" bindtap="closePosterModal">✕</view>
</view>
<!-- 海报预览 -->
<view class="poster-preview">
<canvas canvas-id="promoPosterCanvas" class="poster-canvas" style="width: 300px; height: 450px;"></canvas>
</view>
<view class="poster-actions">
<view class="poster-btn btn-save" bindtap="savePoster">
<text class="btn-icon">💾</text>
<text>保存到相册</text>
</view>
</view>
<text class="poster-tip">保存后可分享到朋友圈或发送给好友</text>
</view>
</view>
</view>

View File

@@ -111,4 +111,22 @@
.share-title { font-size: 28rpx; color: #fff; font-weight: 500; display: block; }
.share-desc { font-size: 22rpx; color: rgba(255,255,255,0.5); margin-top: 4rpx; display: block; }
.share-arrow { font-size: 28rpx; color: rgba(255,255,255,0.3); }
.share-btn { line-height: normal; font-size: inherit; }
.share-btn-wechat { line-height: normal; font-size: inherit; }
/* 弹窗 */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(20rpx); display: flex; align-items: flex-end; justify-content: center; z-index: 1000; }
.modal-content { width: 100%; max-width: 750rpx; background: #1c1c1e; border-radius: 48rpx 48rpx 0 0; padding: 48rpx; padding-bottom: calc(48rpx + env(safe-area-inset-bottom)); animation: slideUp 0.3s ease; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32rpx; }
.modal-title { font-size: 36rpx; font-weight: 600; color: #fff; }
.modal-close { width: 64rpx; height: 64rpx; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: rgba(255,255,255,0.6); }
/* 海报弹窗 */
.poster-modal { padding-bottom: calc(64rpx + env(safe-area-inset-bottom)); }
.poster-preview { display: flex; justify-content: center; margin: 32rpx 0; padding: 24rpx; background: rgba(0,0,0,0.3); border-radius: 24rpx; }
.poster-canvas { border-radius: 16rpx; box-shadow: 0 16rpx 48rpx rgba(0,0,0,0.5); }
.poster-actions { display: flex; gap: 24rpx; margin-bottom: 24rpx; }
.poster-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 12rpx; padding: 28rpx; border-radius: 24rpx; font-size: 30rpx; font-weight: 500; color: #fff; }
.btn-save { background: linear-gradient(135deg, #00CED1 0%, #20B2AA 100%); }
.btn-icon { font-size: 32rpx; }
.poster-tip { font-size: 24rpx; color: rgba(255,255,255,0.4); text-align: center; display: block; }