diff --git a/components/DrinkCard.vue b/components/DrinkCard.vue index c8ae236..7853afb 100644 --- a/components/DrinkCard.vue +++ b/components/DrinkCard.vue @@ -92,7 +92,9 @@ 碰盏日记 记录每一杯的故事 - + + + @@ -458,7 +460,13 @@ export default { width: 80rpx; height: 80rpx; border-radius: 12rpx; - border: 1.5rpx solid rgba(232, 168, 56, 0.2); - background: rgba(232, 168, 56, 0.04); + background: #FFFFFF; + overflow: hidden; + flex-shrink: 0; +} +.brand-qr-img { + width: 100%; + height: 100%; + display: block; } diff --git a/pages/card/card.vue b/pages/card/card.vue index 679b24f..abc8c22 100644 --- a/pages/card/card.vue +++ b/pages/card/card.vue @@ -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)) diff --git a/pages/circle/circle.vue b/pages/circle/circle.vue index deb7a30..d5aa886 100644 --- a/pages/circle/circle.vue +++ b/pages/circle/circle.vue @@ -66,7 +66,7 @@ :title="isGuest ? '登录后查看酒友动态' : '还没有动态'" :desc="isGuest ? '浏览酒友分享、发布你的饮酒记录' : '发布你的第一条饮酒动态吧'" :actionText="isGuest ? '去登录' : '发动态'" - @action="isGuest ? goLogin : goPublish" + @action="onEmptyAction" /> @@ -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 {