From c9413ff5fa608bc114498f196ed5724a03292122 Mon Sep 17 00:00:00 2001
From: cheng <545895878@qq.com>
Date: Tue, 22 Sep 2026 23:23:24 +0800
Subject: [PATCH] =?UTF-8?q?feat(brand):=20=E5=9C=A8=E5=93=81=E7=89=8C?=
=?UTF-8?q?=E5=8C=BA=E5=9F=9F=E6=B7=BB=E5=8A=A0=E4=BA=8C=E7=BB=B4=E7=A0=81?=
=?UTF-8?q?=E5=B1=95=E7=A4=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 在 DrinkCard 组件中添加二维码图片显示
- 更新品牌区域样式以支持二维码展示
- 在卡片页面预加载二维码图片资源
- 实现画布中二维码的绘制功能，包括白色圆角背景
- 优化二维码路径规范化处理以确保正确加载
- 更新空状态操作逻辑，区分游客和已登录用户的按钮行为
---
components/DrinkCard.vue | 14 +++++++++++---
pages/card/card.vue | 24 +++++++++++++++++-------
pages/circle/circle.vue | 10 +++++++++-
3 files changed, 37 insertions(+), 11 deletions(-)
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 {