|
@@ -10,6 +10,11 @@
|
|
|
<button class="copy-btn" @click="copyCode" :disabled="!inviteCode">复制</button>
|
|
<button class="copy-btn" @click="copyCode" :disabled="!inviteCode">复制</button>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
|
|
+ <view class="invite-row share-text-row" v-if="shareText">
|
|
|
|
|
+ <text class="invite-label">分享文案</text>
|
|
|
|
|
+ <text class="share-text-preview" @click="copyShareText">点击复制带邀请码的分享文案 ›</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
<button class="save-btn" @click="savePoster" :loading="saving" :disabled="saving || !inviteCode">保存海报图片</button>
|
|
<button class="save-btn" @click="savePoster" :loading="saving" :disabled="saving || !inviteCode">保存海报图片</button>
|
|
|
|
|
|
|
|
<view class="stats-link" @click="goStats">
|
|
<view class="stats-link" @click="goStats">
|
|
@@ -27,6 +32,7 @@ export default {
|
|
|
return {
|
|
return {
|
|
|
inviteCode: '',
|
|
inviteCode: '',
|
|
|
posterUrl: '',
|
|
posterUrl: '',
|
|
|
|
|
+ shareText: '',
|
|
|
saving: false
|
|
saving: false
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
@@ -44,13 +50,14 @@ export default {
|
|
|
var data = resp.data || {}
|
|
var data = resp.data || {}
|
|
|
self.inviteCode = data.inviteCode || ''
|
|
self.inviteCode = data.inviteCode || ''
|
|
|
self.posterUrl = data.posterUrl || ''
|
|
self.posterUrl = data.posterUrl || ''
|
|
|
|
|
+ self.shareText = data.shareText || ''
|
|
|
if (self.inviteCode) {
|
|
if (self.inviteCode) {
|
|
|
// 重新绘制带邀请码的海报
|
|
// 重新绘制带邀请码的海报
|
|
|
setTimeout(function() {
|
|
setTimeout(function() {
|
|
|
self.drawPoster()
|
|
self.drawPoster()
|
|
|
}, 300)
|
|
}, 300)
|
|
|
}
|
|
}
|
|
|
- }).catch(function() {})
|
|
|
|
|
|
|
+ }).catch(function () {})
|
|
|
},
|
|
},
|
|
|
drawPoster() {
|
|
drawPoster() {
|
|
|
var self = this
|
|
var self = this
|
|
@@ -86,9 +93,19 @@ export default {
|
|
|
ctx.setFillStyle('#EA580C')
|
|
ctx.setFillStyle('#EA580C')
|
|
|
ctx.setFontSize(14)
|
|
ctx.setFontSize(14)
|
|
|
ctx.fillText('报名时填写邀请码,一起享受专属权益', width / 2, 320)
|
|
ctx.fillText('报名时填写邀请码,一起享受专属权益', width / 2, 320)
|
|
|
|
|
+ // 二维码占位区(生产环境接入 getwxacodeunlimit 后绘制小程序码)
|
|
|
|
|
+ ctx.setFillStyle('#FFFFFF')
|
|
|
|
|
+ this.roundRect(ctx, width / 2 - 45, 340, 90, 90, 8)
|
|
|
|
|
+ ctx.setStrokeStyle('#E2E8F0')
|
|
|
|
|
+ ctx.setLineWidth(1)
|
|
|
|
|
+ this.roundRect(ctx, width / 2 - 45, 340, 90, 90, 8)
|
|
|
|
|
+ ctx.stroke()
|
|
|
|
|
+ ctx.setFillStyle('#CBD5E1')
|
|
|
|
|
+ ctx.setFontSize(11)
|
|
|
|
|
+ ctx.fillText('小程序码', width / 2, 390)
|
|
|
ctx.setFillStyle('#94A3B8')
|
|
ctx.setFillStyle('#94A3B8')
|
|
|
ctx.setFontSize(12)
|
|
ctx.setFontSize(12)
|
|
|
- ctx.fillText('爱伴·AI之旅训练营', width / 2, 400)
|
|
|
|
|
|
|
+ ctx.fillText('爱伴·AI之旅训练营', width / 2, 420)
|
|
|
ctx.draw(false)
|
|
ctx.draw(false)
|
|
|
},
|
|
},
|
|
|
roundRect(ctx, x, y, w, h, r) {
|
|
roundRect(ctx, x, y, w, h, r) {
|
|
@@ -114,6 +131,18 @@ export default {
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
},
|
|
},
|
|
|
|
|
+ copyShareText() {
|
|
|
|
|
+ if (!this.shareText) {
|
|
|
|
|
+ uni.showToast({ title: '分享文案暂未生成', icon: 'none' })
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ uni.setClipboardData({
|
|
|
|
|
+ data: this.shareText,
|
|
|
|
|
+ success: function() {
|
|
|
|
|
+ uni.showToast({ title: '分享文案已复制', icon: 'success' })
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
savePoster() {
|
|
savePoster() {
|
|
|
var self = this
|
|
var self = this
|
|
|
if (this.saving) return
|
|
if (this.saving) return
|
|
@@ -165,6 +194,9 @@ export default {
|
|
|
.poster-card { background: #FFF; border-radius: 16rpx; padding: 24rpx; margin-bottom: 24rpx; display: flex; justify-content: center; }
|
|
.poster-card { background: #FFF; border-radius: 16rpx; padding: 24rpx; margin-bottom: 24rpx; display: flex; justify-content: center; }
|
|
|
.poster-canvas { width: 300px; height: 450px; border-radius: 12rpx; }
|
|
.poster-canvas { width: 300px; height: 450px; border-radius: 12rpx; }
|
|
|
.invite-row { background: #FFF; border-radius: 16rpx; padding: 32rpx; margin-bottom: 24rpx; display: flex; align-items: center; }
|
|
.invite-row { background: #FFF; border-radius: 16rpx; padding: 32rpx; margin-bottom: 24rpx; display: flex; align-items: center; }
|
|
|
|
|
+.share-text-row { padding: 20rpx 32rpx; }
|
|
|
|
|
+.share-text-preview { flex: 1; font-size: 24rpx; color: #F97316; margin-left: 24rpx; line-height: 1.5; }
|
|
|
|
|
+.share-text-preview:active { opacity: 0.7; }
|
|
|
.invite-label { font-size: 28rpx; color: #1E293B; font-weight: 600; flex-shrink: 0; }
|
|
.invite-label { font-size: 28rpx; color: #1E293B; font-weight: 600; flex-shrink: 0; }
|
|
|
.invite-code { flex: 1; font-size: 32rpx; color: #F97316; font-weight: 700; font-family: monospace; margin-left: 24rpx; letter-spacing: 4rpx; }
|
|
.invite-code { flex: 1; font-size: 32rpx; color: #F97316; font-weight: 700; font-family: monospace; margin-left: 24rpx; letter-spacing: 4rpx; }
|
|
|
.copy-btn { flex-shrink: 0; height: 60rpx; line-height: 60rpx; padding: 0 32rpx; background: #F97316; color: #FFF; font-size: 26rpx; border-radius: 30rpx; border: none; }
|
|
.copy-btn { flex-shrink: 0; height: 60rpx; line-height: 60rpx; padding: 0 32rpx; background: #F97316; color: #FFF; font-size: 26rpx; border-radius: 30rpx; border: none; }
|