feat(brand): 在品牌区域添加二维码展示功能

- 在 DrinkCard 组件中添加二维码图片显示
- 更新品牌区域样式以支持二维码展示
- 在卡片页面预加载二维码图片资源
- 实现画布中二维码的绘制功能,包括白色圆角背景
- 优化二维码路径规范化处理以确保正确加载
- 更新空状态操作逻辑,区分游客和已登录用户的按钮行为
This commit is contained in:
cg
2026-09-22 23:23:24 +08:00
parent dd3c670021
commit c9413ff5fa
3 changed files with 37 additions and 11 deletions
+17 -7
View File
@@ -227,6 +227,9 @@ export default {
const photos = rec.photos || []
const imgs = photos.length > 0 ? await Promise.all(photos.map(p => this.loadImg(p))) : []
// 预加载二维码(本地代码包图片);qrImg.path 供右下角绘制使用(绘制处会规范化为绝对路径)
const qrImg = await this.loadImg('/static/qrcode.jpg')
// 单图动态高度:按图片真实比例,限制在 200~560 之间
let heroH = 340
if (photoCount === 1 && imgs[0] && imgs[0].width && imgs[0].height) {
@@ -554,15 +557,22 @@ export default {
ctx.setFillStyle(WHITE_30)
ctx.fillText('记录每一杯的故事', P, y)
// 二维码占位
const qrSize = 80
// 二维码(小程序码):右下角,白色圆角底保证扫码识别率
const qrSize = 100
const qrX = W - P - qrSize
const qrY = y - 50
ctx.setStrokeStyle('rgba(232,168,56,0.2)')
ctx.setLineWidth(1.5)
this.rr(ctx, qrX, qrY, qrSize, qrSize, 12, 'stroke')
ctx.setFillStyle('rgba(232,168,56,0.04)')
const qrY = y - 70
// 规范化二维码路径:getImageInfo 对代码包本地图片可能返回不带前导斜杠的相对路径(如 static/qrcode.jpg),
// 会被 canvas 相对当前页面解析成 /pages/card/static/qrcode.jpg 而报 500,这里统一补全为代码包绝对路径
let qrPath = (qrImg && qrImg.path) || '/static/qrcode.jpg'
if (qrPath.charAt(0) !== '/' && !/^[a-z]+:\/\//i.test(qrPath)) {
qrPath = '/' + qrPath.replace(/^\.?\/+/, '')
}
// 白色圆角底(不使用 clip:小程序真机 clip+drawImage 存在图片不渲染的兼容问题)
ctx.setFillStyle('#FFFFFF')
this.rr(ctx, qrX, qrY, qrSize, qrSize, 12, 'fill')
// 图片内缩直接绘制,四周留白边,既避免圆角裁切又提升扫码识别率
const qrPad = 8
try { ctx.drawImage(qrPath, qrX + qrPad, qrY + qrPad, qrSize - qrPad * 2, qrSize - qrPad * 2) } catch (e) {}
return new Promise(resolve => {
ctx.draw(false, () => setTimeout(() => resolve(cardH), 600))
+9 -1
View File
@@ -66,7 +66,7 @@
:title="isGuest ? '登录后查看酒友动态' : '还没有动态'"
:desc="isGuest ? '浏览酒友分享、发布你的饮酒记录' : '发布你的第一条饮酒动态吧'"
:actionText="isGuest ? '去登录' : '发动态'"
@action="isGuest ? goLogin : goPublish"
@action="onEmptyAction"
/>
</view>
</scroll-view>
@@ -283,6 +283,14 @@ export default {
goLogin() {
uni.navigateTo({ url: '/pages/login/login' })
},
// 空态按钮:游客去登录,已登录去发布
onEmptyAction() {
if (this.isGuest) {
this.goLogin()
} else {
this.goPublish()
}
},
// === 酒友 ===
async loadFriends() {
try {