style(fe): 身份卡再精简 — 去掉 logo/徽章/图标 emoji 和多余招呼语
- 正面去掉「宠星人」logo、「宠物身份卡」盾牌徽章、爪印水印,头像上移 - 照护卡标题去掉 🌿,各行去掉 👤📞📝🏛📅 图标只留文字 - 走失框去掉「🔔 走失时请联系主人」标题和「或联系主人」,只留扫码说明 - 去掉页面底部「小程序码发布后出现」占位提示 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -98,7 +98,7 @@ Page({
|
|||||||
|
|
||||||
// ══════════ 正面卡(暖黄)══════════
|
// ══════════ 正面卡(暖黄)══════════
|
||||||
// 高度按内容算,避免留一大块空白
|
// 高度按内容算,避免留一大块空白
|
||||||
let fH = 420;
|
let fH = 372;
|
||||||
if (tags.length) fH += 90;
|
if (tags.length) fH += 90;
|
||||||
if (c.intro) fH += 90;
|
if (c.intro) fH += 90;
|
||||||
const fY = pad;
|
const fY = pad;
|
||||||
@@ -108,31 +108,9 @@ Page({
|
|||||||
this.roundRect(ctx, fx, fY, cardW2, fH, 30);
|
this.roundRect(ctx, fx, fY, cardW2, fH, 30);
|
||||||
ctx.fillStyle = gf;
|
ctx.fillStyle = gf;
|
||||||
ctx.fill();
|
ctx.fill();
|
||||||
// 爪印水印
|
|
||||||
ctx.save();
|
|
||||||
this.roundRect(ctx, fx, fY, cardW2, fH, 30);
|
|
||||||
ctx.clip();
|
|
||||||
ctx.globalAlpha = 0.07;
|
|
||||||
ctx.textAlign = 'center';
|
|
||||||
ctx.textBaseline = 'middle';
|
|
||||||
ctx.font = '150px sans-serif';
|
|
||||||
ctx.fillText('🐾', fx + cardW2 - 90, fY + fH - 80);
|
|
||||||
ctx.restore();
|
|
||||||
ctx.globalAlpha = 1;
|
|
||||||
ctx.textBaseline = 'alphabetic';
|
|
||||||
|
|
||||||
// 卡头:左 logo,右 徽章
|
|
||||||
ctx.textAlign = 'left';
|
|
||||||
ctx.fillStyle = '#8A5A18';
|
|
||||||
ctx.font = '600 26px sans-serif';
|
|
||||||
ctx.fillText('🐱 宠星人', fx + 32, fY + 52);
|
|
||||||
ctx.textAlign = 'right';
|
|
||||||
ctx.fillStyle = '#B07A1E';
|
|
||||||
ctx.font = '600 22px sans-serif';
|
|
||||||
ctx.fillText('🛡 宠物身份卡', fx + cardW2 - 32, fY + 50);
|
|
||||||
|
|
||||||
// 头像圆 + 白边
|
// 头像圆 + 白边
|
||||||
const avD = 150, avX = fx + 36, avY = fY + 90;
|
const avD = 150, avX = fx + 36, avY = fY + 52;
|
||||||
ctx.save();
|
ctx.save();
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.arc(avX + avD / 2, avY + avD / 2, avD / 2, 0, Math.PI * 2);
|
ctx.arc(avX + avD / 2, avY + avD / 2, avD / 2, 0, Math.PI * 2);
|
||||||
@@ -184,7 +162,7 @@ Page({
|
|||||||
kvF('年龄', c.age, avY + 206);
|
kvF('年龄', c.age, avY + 206);
|
||||||
|
|
||||||
// 性格标签(没有就不画,避免留空行)
|
// 性格标签(没有就不画,避免留空行)
|
||||||
let ty = fY + 320;
|
let ty = fY + 298;
|
||||||
if (tags.length) {
|
if (tags.length) {
|
||||||
ctx.textAlign = 'left';
|
ctx.textAlign = 'left';
|
||||||
ctx.fillStyle = '#8A5A18';
|
ctx.fillStyle = '#8A5A18';
|
||||||
@@ -245,27 +223,25 @@ Page({
|
|||||||
ctx.textAlign = 'center';
|
ctx.textAlign = 'center';
|
||||||
ctx.fillStyle = '#fff';
|
ctx.fillStyle = '#fff';
|
||||||
ctx.font = '700 28px sans-serif';
|
ctx.font = '700 28px sans-serif';
|
||||||
ctx.fillText('🌿 照护信息', W / 2, bY + 24 + 42);
|
ctx.fillText('照护信息', W / 2, bY + 24 + 42);
|
||||||
|
|
||||||
// 照护行(emoji 图标 + 标签 + 值)
|
// 照护行(标签 + 值,不放图标)
|
||||||
const rowX = fx + 40;
|
const rowX = fx + 44;
|
||||||
const kvB = (icon, label, value, yy) => {
|
const kvB = (label, value, yy) => {
|
||||||
ctx.textAlign = 'left';
|
ctx.textAlign = 'left';
|
||||||
ctx.font = '26px sans-serif';
|
|
||||||
ctx.fillText(icon, rowX, yy);
|
|
||||||
ctx.font = '24px sans-serif';
|
ctx.font = '24px sans-serif';
|
||||||
ctx.fillStyle = '#8D8277';
|
ctx.fillStyle = '#8D8277';
|
||||||
ctx.fillText(label, rowX + 44, yy);
|
ctx.fillText(label, rowX, yy);
|
||||||
ctx.font = '600 25px sans-serif';
|
ctx.font = '600 25px sans-serif';
|
||||||
ctx.fillStyle = '#2D2925';
|
ctx.fillStyle = '#2D2925';
|
||||||
ctx.fillText(value || '—', rowX + 170, yy);
|
ctx.fillText(value || '—', rowX + 150, yy);
|
||||||
};
|
};
|
||||||
let ry = bY + 140;
|
let ry = bY + 140;
|
||||||
kvB('👤', '主人', c.owner, ry); ry += 48;
|
kvB('主人', c.owner, ry); ry += 48;
|
||||||
kvB('📞', '联系电话', c.phone || '未验证', ry); ry += 48;
|
kvB('联系电话', c.phone || '未验证', ry); ry += 48;
|
||||||
kvB('📝', '备注', c.notes || '无', ry); ry += 48;
|
kvB('备注', c.notes || '无', ry); ry += 48;
|
||||||
kvB('🏛', '发证机构', c.org || '肉垫计划', ry); ry += 48;
|
kvB('发证机构', c.org || '肉垫计划', ry); ry += 48;
|
||||||
kvB('📅', '有效期', c.validity || '永久有效', ry); ry += 42;
|
kvB('有效期', c.validity || '永久有效', ry); ry += 42;
|
||||||
|
|
||||||
// 走失联系框 + 小程序码
|
// 走失联系框 + 小程序码
|
||||||
const lostY = ry + 16, lostH = bY + bH - lostY - 30;
|
const lostY = ry + 16, lostH = bY + bH - lostY - 30;
|
||||||
@@ -273,13 +249,9 @@ Page({
|
|||||||
ctx.fillStyle = '#EAF3FE';
|
ctx.fillStyle = '#EAF3FE';
|
||||||
ctx.fill();
|
ctx.fill();
|
||||||
ctx.textAlign = 'left';
|
ctx.textAlign = 'left';
|
||||||
ctx.fillStyle = '#2E6DA8';
|
|
||||||
ctx.font = '600 25px sans-serif';
|
|
||||||
ctx.fillText('🔔 走失时请联系主人', fx + 44, lostY + 44);
|
|
||||||
ctx.fillStyle = '#5B7A9C';
|
ctx.fillStyle = '#5B7A9C';
|
||||||
ctx.font = '21px sans-serif';
|
ctx.font = '22px sans-serif';
|
||||||
ctx.fillText('微信扫一扫,查看' + (c.name || '') + '的身份信息', fx + 44, lostY + 84);
|
ctx.fillText('微信扫一扫,查看' + (c.name || '') + '的身份信息', fx + 44, lostY + lostH / 2 + 8);
|
||||||
ctx.fillText('或联系主人', fx + 44, lostY + 114);
|
|
||||||
// 小程序码
|
// 小程序码
|
||||||
const qrD = 118, qrX = fx + cardW2 - 24 - 20 - qrD, qrY = lostY + (lostH - qrD) / 2;
|
const qrD = 118, qrX = fx + cardW2 - 24 - 20 - qrD, qrY = lostY + (lostH - qrD) / 2;
|
||||||
ctx.fillStyle = '#fff';
|
ctx.fillStyle = '#fff';
|
||||||
|
|||||||
@@ -27,10 +27,6 @@
|
|||||||
<view wx:else class="ic-loading">正在生成身份卡…</view>
|
<view wx:else class="ic-loading">正在生成身份卡…</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view wx:if="{{!qrReady}}" class="ic-tip">
|
|
||||||
小程序码要在小程序发布后才会出现,现在先放一个占位。
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="ic-actions">
|
<view class="ic-actions">
|
||||||
<view class="btn btn-soft ic-btn" bindtap="onSave">
|
<view class="btn btn-soft ic-btn" bindtap="onSave">
|
||||||
<pt-icon name="photo" size="{{32}}"></pt-icon>下载到相册
|
<pt-icon name="photo" size="{{32}}"></pt-icon>下载到相册
|
||||||
|
|||||||
Reference in New Issue
Block a user