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() {
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({
data: shareText,

View File

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

View File

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

View File

@@ -204,30 +204,25 @@ Page({
// 底部区域
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.fillRect(0, height - 80, width, 80)
// 小程序码占位
ctx.setFillStyle('#ffffff')
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.setFillStyle('#00CED1')
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.setFontSize(10)
ctx.fillText(`推广返利 ${distributorShare}%`, 20, height - 20)
ctx.setFillStyle('#ffffff')
ctx.setFontSize(13)
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, () => {
wx.hideLoading()