fix: 优化分享布局+海报去邀请码

1. 阅读页分享按钮改为一行三个(分享/海报/文案)
2. 海报去掉邀请码区域,简化底部
3. 复制文案改为朋友圈风格
This commit is contained in:
卡若
2026-01-25 20:41:38 +08:00
parent 8a13505381
commit 138495c90b
4 changed files with 45 additions and 69 deletions

View File

@@ -285,13 +285,17 @@ Page({
}) })
}, },
// 复制分享文案 // 复制分享文案(朋友圈风格)
copyShareText() { copyShareText() {
const { section } = this.data const { section } = this.data
const userInfo = app.globalData.userInfo
const referralCode = userInfo?.referralCode || ''
const shareText = `📚《Soul创业派对》推荐阅读\n\n${section?.title || '精彩内容'}\n\n来自派对房的真实商业故事62个创业案例干货满满\n\n🎁 通过我的推荐购买立享5%优惠\n👉 邀请码:${referralCode || 'SOUL'}\n\n#创业派对 #私域运营 #商业案例` const shareText = `🔥 刚看完这篇《${section?.title || 'Soul创业派对'}》,太上头了!
62个真实商业案例每个都是从0到1的实战经验。私域运营、资源整合、商业变现干货满满。
推荐给正在创业或想创业的朋友,搜"Soul创业派对"小程序就能看!
#创业派对 #私域运营 #商业案例`
wx.setClipboardData({ wx.setClipboardData({
data: shareText, data: shareText,

View File

@@ -82,25 +82,18 @@
<!-- 分享操作区 --> <!-- 分享操作区 -->
<view class="action-section"> <view class="action-section">
<view class="action-header"> <view class="action-row-inline">
<text class="action-title">分享这篇内容</text> <button class="action-btn-inline btn-share-inline" open-type="share">
</view> <text class="action-icon-small">💬</text>
<view class="action-row"> <text class="action-text-small">分享</text>
<button class="action-btn-full btn-share-full" open-type="share">
<text class="action-icon">💬</text>
<text class="action-text">分享给好友</text>
</button> </button>
</view> <view class="action-btn-inline btn-poster-inline" bindtap="generatePoster">
<view class="action-row"> <text class="action-icon-small">🖼️</text>
<view class="action-btn-full btn-poster-full" bindtap="generatePoster"> <text class="action-text-small">海报</text>
<text class="action-icon">🖼️</text>
<text class="action-text">生成海报</text>
</view> </view>
</view> <view class="action-btn-inline btn-copy-inline" bindtap="copyShareText">
<view class="action-row"> <text class="action-icon-small">📝</text>
<view class="action-btn-full btn-copy-full" bindtap="copyShareText"> <text class="action-text-small">文案</text>
<text class="action-icon">📝</text>
<text class="action-text">复制文案</text>
</view> </view>
</view> </view>
</view> </view>

View File

@@ -398,69 +398,53 @@
/* ===== 分享操作区 ===== */ /* ===== 分享操作区 ===== */
.action-section { .action-section {
margin-top: 64rpx; margin-top: 48rpx;
padding: 32rpx;
background: rgba(255, 255, 255, 0.03);
border-radius: 24rpx;
border: 2rpx solid rgba(255, 255, 255, 0.05);
} }
.action-header { .action-row-inline {
margin-bottom: 24rpx; display: flex;
gap: 16rpx;
} }
.action-title { .action-btn-inline {
font-size: 28rpx; flex: 1;
color: rgba(255, 255, 255, 0.6);
}
.action-row {
margin-bottom: 16rpx;
}
.action-row:last-child {
margin-bottom: 0;
}
.action-btn-full {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 12rpx; gap: 8rpx;
width: 100%; padding: 24rpx 16rpx;
padding: 28rpx 24rpx; border-radius: 16rpx;
border-radius: 20rpx;
border: none; border: none;
background: transparent; background: transparent;
line-height: normal; line-height: normal;
box-sizing: border-box; box-sizing: border-box;
} }
.action-btn-full::after { .action-btn-inline::after {
border: none; border: none;
} }
.btn-share-full { .btn-share-inline {
background: rgba(7, 193, 96, 0.15); background: rgba(7, 193, 96, 0.15);
border: 2rpx solid rgba(7, 193, 96, 0.3); border: 2rpx solid rgba(7, 193, 96, 0.3);
} }
.btn-poster-full { .btn-poster-inline {
background: rgba(255, 215, 0, 0.15); background: rgba(255, 215, 0, 0.15);
border: 2rpx solid rgba(255, 215, 0, 0.3); border: 2rpx solid rgba(255, 215, 0, 0.3);
} }
.btn-copy-full { .btn-copy-inline {
background: rgba(0, 206, 209, 0.15); background: rgba(0, 206, 209, 0.15);
border: 2rpx solid rgba(0, 206, 209, 0.3); border: 2rpx solid rgba(0, 206, 209, 0.3);
} }
.action-icon { .action-icon-small {
font-size: 36rpx; font-size: 28rpx;
} }
.action-text { .action-text-small {
font-size: 28rpx; font-size: 24rpx;
color: #ffffff; color: #ffffff;
font-weight: 500; font-weight: 500;
} }

View File

@@ -204,30 +204,25 @@ Page({
// 底部区域 // 底部区域
ctx.setFillStyle('rgba(0,206,209,0.1)') ctx.setFillStyle('rgba(0,206,209,0.1)')
ctx.fillRect(0, height - 110, width, 110) ctx.fillRect(0, height - 80, width, 80)
// 邀请码
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.setFillStyle('#ffffff')
ctx.beginPath() ctx.beginPath()
ctx.arc(width - 55, height - 55, 40, 0, Math.PI * 2) ctx.arc(width - 55, height - 40, 30, 0, Math.PI * 2)
ctx.fill() ctx.fill()
ctx.setFillStyle('#00CED1') ctx.setFillStyle('#00CED1')
ctx.setFontSize(9) ctx.setFontSize(9)
ctx.fillText('扫码', width - 62, height - 55) ctx.fillText('扫码', width - 62, height - 42)
ctx.fillText('购买', width - 62, height - 42) ctx.fillText('购买', width - 62, height - 30)
// 底部提示 // 底部提示
ctx.setFillStyle('rgba(255,255,255,0.5)') ctx.setFillStyle('#ffffff')
ctx.setFontSize(10) ctx.setFontSize(13)
ctx.fillText(`推广返利 ${distributorShare}%`, 20, height - 20) ctx.fillText('长按识别 立即购买', 20, height - 45)
ctx.setFillStyle('rgba(255,255,255,0.6)')
ctx.setFontSize(11)
ctx.fillText(`推广返利 ${distributorShare}%`, 20, height - 22)
ctx.draw(true, () => { ctx.draw(true, () => {
wx.hideLoading() wx.hideLoading()