feat(brand): 在品牌区域添加二维码展示功能
- 在 DrinkCard 组件中添加二维码图片显示 - 更新品牌区域样式以支持二维码展示 - 在卡片页面预加载二维码图片资源 - 实现画布中二维码的绘制功能,包括白色圆角背景 - 优化二维码路径规范化处理以确保正确加载 - 更新空状态操作逻辑,区分游客和已登录用户的按钮行为
This commit is contained in:
@@ -92,7 +92,9 @@
|
|||||||
<text class="brand-name">碰盏日记</text>
|
<text class="brand-name">碰盏日记</text>
|
||||||
<text class="brand-slogan">记录每一杯的故事</text>
|
<text class="brand-slogan">记录每一杯的故事</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="brand-qr"></view>
|
<view class="brand-qr">
|
||||||
|
<image class="brand-qr-img" src="/static/qrcode.jpg" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@@ -458,7 +460,13 @@ export default {
|
|||||||
width: 80rpx;
|
width: 80rpx;
|
||||||
height: 80rpx;
|
height: 80rpx;
|
||||||
border-radius: 12rpx;
|
border-radius: 12rpx;
|
||||||
border: 1.5rpx solid rgba(232, 168, 56, 0.2);
|
background: #FFFFFF;
|
||||||
background: rgba(232, 168, 56, 0.04);
|
overflow: hidden;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.brand-qr-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+17
-7
@@ -227,6 +227,9 @@ export default {
|
|||||||
const photos = rec.photos || []
|
const photos = rec.photos || []
|
||||||
const imgs = photos.length > 0 ? await Promise.all(photos.map(p => this.loadImg(p))) : []
|
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 之间
|
// 单图动态高度:按图片真实比例,限制在 200~560 之间
|
||||||
let heroH = 340
|
let heroH = 340
|
||||||
if (photoCount === 1 && imgs[0] && imgs[0].width && imgs[0].height) {
|
if (photoCount === 1 && imgs[0] && imgs[0].width && imgs[0].height) {
|
||||||
@@ -554,15 +557,22 @@ export default {
|
|||||||
ctx.setFillStyle(WHITE_30)
|
ctx.setFillStyle(WHITE_30)
|
||||||
ctx.fillText('记录每一杯的故事', P, y)
|
ctx.fillText('记录每一杯的故事', P, y)
|
||||||
|
|
||||||
// 二维码占位
|
// 二维码(小程序码):右下角,白色圆角底保证扫码识别率
|
||||||
const qrSize = 80
|
const qrSize = 100
|
||||||
const qrX = W - P - qrSize
|
const qrX = W - P - qrSize
|
||||||
const qrY = y - 50
|
const qrY = y - 70
|
||||||
ctx.setStrokeStyle('rgba(232,168,56,0.2)')
|
// 规范化二维码路径:getImageInfo 对代码包本地图片可能返回不带前导斜杠的相对路径(如 static/qrcode.jpg),
|
||||||
ctx.setLineWidth(1.5)
|
// 会被 canvas 相对当前页面解析成 /pages/card/static/qrcode.jpg 而报 500,这里统一补全为代码包绝对路径
|
||||||
this.rr(ctx, qrX, qrY, qrSize, qrSize, 12, 'stroke')
|
let qrPath = (qrImg && qrImg.path) || '/static/qrcode.jpg'
|
||||||
ctx.setFillStyle('rgba(232,168,56,0.04)')
|
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')
|
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 => {
|
return new Promise(resolve => {
|
||||||
ctx.draw(false, () => setTimeout(() => resolve(cardH), 600))
|
ctx.draw(false, () => setTimeout(() => resolve(cardH), 600))
|
||||||
|
|||||||
@@ -66,7 +66,7 @@
|
|||||||
:title="isGuest ? '登录后查看酒友动态' : '还没有动态'"
|
:title="isGuest ? '登录后查看酒友动态' : '还没有动态'"
|
||||||
:desc="isGuest ? '浏览酒友分享、发布你的饮酒记录' : '发布你的第一条饮酒动态吧'"
|
:desc="isGuest ? '浏览酒友分享、发布你的饮酒记录' : '发布你的第一条饮酒动态吧'"
|
||||||
:actionText="isGuest ? '去登录' : '发动态'"
|
:actionText="isGuest ? '去登录' : '发动态'"
|
||||||
@action="isGuest ? goLogin : goPublish"
|
@action="onEmptyAction"
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
@@ -283,6 +283,14 @@ export default {
|
|||||||
goLogin() {
|
goLogin() {
|
||||||
uni.navigateTo({ url: '/pages/login/login' })
|
uni.navigateTo({ url: '/pages/login/login' })
|
||||||
},
|
},
|
||||||
|
// 空态按钮:游客去登录,已登录去发布
|
||||||
|
onEmptyAction() {
|
||||||
|
if (this.isGuest) {
|
||||||
|
this.goLogin()
|
||||||
|
} else {
|
||||||
|
this.goPublish()
|
||||||
|
}
|
||||||
|
},
|
||||||
// === 酒友 ===
|
// === 酒友 ===
|
||||||
async loadFriends() {
|
async loadFriends() {
|
||||||
try {
|
try {
|
||||||
|
|||||||
Reference in New Issue
Block a user