feat: 身份卡改上下两张卡(正面/背面) + 手机号硬门槛
- canvas 重画成上下两张：正面(暖黄，头像/名字性别/性别品种毛色年龄/性格 彩色标签/介绍/物ID+一起生活天数)、背面(蓝色照护信息条 + 主人/电话/疫苗/ 备注/发证机构/有效期 + 走失联系框&小程序码) - 生成前查手机号：没有则唤起 getPhoneNumber 组件，验证成功才生成； 拒绝则提示「无法生成」不出卡 - IDCard 增 age/days；ic-canvas 高度改 1480 否则导出被裁 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Blizzard
+169
-110
@@ -4,7 +4,7 @@ const { toastErr } = require('../../utils/ui.js');
|
||||
|
||||
// 卡片画布尺寸（逻辑像素）。真实导出会按 dpr 放大
|
||||
const W = 620;
|
||||
const H = 1000;
|
||||
const H = 1480;
|
||||
|
||||
// 在 canvas 2d 上加载一张图（远程或本地），resolve 出可直接 drawImage 的 image 对象。
|
||||
// 加载失败 resolve(null)——头像或小程序码缺一张不该让整张卡画不出来
|
||||
@@ -25,6 +25,8 @@ Page({
|
||||
cardImg: '',
|
||||
qrReady: false,
|
||||
saving: false,
|
||||
needPhone: false, // 没手机号：门槛，先验证才生成
|
||||
phoneRefused: false, // 用户拒绝了授权
|
||||
},
|
||||
onLoad(q) {
|
||||
store
|
||||
@@ -41,6 +43,11 @@ Page({
|
||||
.then((card) => {
|
||||
if (!card) return;
|
||||
this.setData({ card, qrReady: !!card.qr_ready });
|
||||
// 门槛：没手机号不生成，先引导用微信验证
|
||||
if (!card.phone) {
|
||||
this.setData({ needPhone: true });
|
||||
return;
|
||||
}
|
||||
// 布局要等页面渲染完 canvas 节点才拿得到，放 nextTick
|
||||
wx.nextTick(() => this.draw());
|
||||
})
|
||||
@@ -83,30 +90,50 @@ Page({
|
||||
const pad = 30;
|
||||
const cardW = W - pad * 2;
|
||||
|
||||
// ═══ 正面：资料区（暖粉渐变）═══
|
||||
const s1Y = pad, s1H = 378;
|
||||
const g1 = ctx.createLinearGradient(pad, s1Y, W - pad, s1Y + s1H);
|
||||
g1.addColorStop(0, '#FFF0D6');
|
||||
g1.addColorStop(0.5, '#FFE0EC');
|
||||
g1.addColorStop(1, '#E6EEFF');
|
||||
this.roundRect(ctx, pad, s1Y, cardW, s1H, 28);
|
||||
ctx.fillStyle = g1;
|
||||
const fx = pad, cardW2 = cardW;
|
||||
|
||||
// 顶部标题
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillStyle = '#8A5A18';
|
||||
ctx.font = '700 40px sans-serif';
|
||||
ctx.fillText('🐾 宠物身份卡 🐾', W / 2, 66);
|
||||
|
||||
// ══════════ 正面卡（暖黄）══════════
|
||||
ctx.fillStyle = '#C7A36A';
|
||||
ctx.font = '22px sans-serif';
|
||||
ctx.fillText('· 正面 ·', W / 2, 116);
|
||||
const fY = 140, fH = 700;
|
||||
const gf = ctx.createLinearGradient(fx, fY, fx, fY + fH);
|
||||
gf.addColorStop(0, '#FFF7E0');
|
||||
gf.addColorStop(1, '#FFE7AE');
|
||||
this.roundRect(ctx, fx, fY, cardW2, fH, 30);
|
||||
ctx.fillStyle = gf;
|
||||
ctx.fill();
|
||||
// 爪印水印
|
||||
ctx.save();
|
||||
this.roundRect(ctx, pad, s1Y, cardW, s1H, 28);
|
||||
this.roundRect(ctx, fx, fY, cardW2, fH, 30);
|
||||
ctx.clip();
|
||||
ctx.globalAlpha = 0.06;
|
||||
ctx.globalAlpha = 0.07;
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.font = '130px sans-serif';
|
||||
ctx.fillText('🐾', W - pad - 80, s1Y + 100);
|
||||
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 avX = pad + 34, avY = s1Y + 34, avD = 118;
|
||||
const avD = 150, avX = fx + 36, avY = fY + 90;
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.arc(avX + avD / 2, avY + avD / 2, avD / 2, 0, Math.PI * 2);
|
||||
@@ -118,7 +145,7 @@ Page({
|
||||
ctx.fillStyle = '#FFD9A3';
|
||||
ctx.fillRect(avX, avY, avD, avD);
|
||||
ctx.fillStyle = '#8A5A18';
|
||||
ctx.font = '52px sans-serif';
|
||||
ctx.font = '64px sans-serif';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillText(c.species === '狗狗' ? '🐶' : '🐱', avX + avD / 2, avY + avD / 2);
|
||||
@@ -127,121 +154,150 @@ Page({
|
||||
ctx.textBaseline = 'alphabetic';
|
||||
ctx.beginPath();
|
||||
ctx.arc(avX + avD / 2, avY + avD / 2, avD / 2, 0, Math.PI * 2);
|
||||
ctx.strokeStyle = 'rgba(255,255,255,.9)';
|
||||
ctx.lineWidth = 5;
|
||||
ctx.strokeStyle = '#fff';
|
||||
ctx.lineWidth = 8;
|
||||
ctx.stroke();
|
||||
|
||||
// 名字大字 + 物种·性别（头像右侧）
|
||||
const nameX = avX + avD + 26;
|
||||
// 名字 + 性别（头像右侧）
|
||||
const nx = avX + avD + 28;
|
||||
ctx.textAlign = 'left';
|
||||
ctx.fillStyle = '#2D2925';
|
||||
ctx.font = '700 46px sans-serif';
|
||||
ctx.fillText(c.name || '毛孩子', nameX, avY + 54);
|
||||
ctx.fillStyle = '#9A8F82';
|
||||
ctx.font = '24px sans-serif';
|
||||
ctx.fillText(c.species + (c.gender ? ' · ' + c.gender : ''), nameX, avY + 96);
|
||||
|
||||
// 资料 pair 行（头像下方，全宽两列）
|
||||
const infoX = pad + 40;
|
||||
let y = s1Y + avD + 60;
|
||||
const pair = (l1, v1, l2, v2) => {
|
||||
ctx.font = '700 52px sans-serif';
|
||||
ctx.fillText(c.name || '毛孩子', nx, avY + 44);
|
||||
if (c.gender) {
|
||||
ctx.fillStyle = c.gender === '女孩' ? '#E86A9B' : '#5B9BE8';
|
||||
ctx.font = '30px sans-serif';
|
||||
ctx.fillText(c.gender === '女孩' ? '♀' : '♂', nx + ctx.measureText(c.name || '毛孩子').width + 12, avY + 44);
|
||||
}
|
||||
// 头像右的资料行
|
||||
const kvF = (label, value, yy) => {
|
||||
ctx.textAlign = 'left';
|
||||
ctx.font = '24px sans-serif';
|
||||
ctx.fillStyle = '#9A8F82';
|
||||
ctx.fillText(l1, infoX, y);
|
||||
ctx.fillStyle = '#2D2925';
|
||||
ctx.fillStyle = '#A98C5A';
|
||||
ctx.fillText(label, nx, yy);
|
||||
ctx.fillStyle = '#3D3427';
|
||||
ctx.font = '600 26px sans-serif';
|
||||
ctx.fillText(v1 || '—', infoX + 66, y);
|
||||
if (l2) {
|
||||
const x2 = infoX + 300;
|
||||
ctx.fillStyle = '#9A8F82';
|
||||
ctx.font = '24px sans-serif';
|
||||
ctx.fillText(l2, x2, y);
|
||||
ctx.fillStyle = '#2D2925';
|
||||
ctx.font = '600 26px sans-serif';
|
||||
ctx.fillText(v2 || '—', x2 + 66, y);
|
||||
}
|
||||
y += 44;
|
||||
ctx.fillText(value || '—', nx + 78, yy);
|
||||
};
|
||||
pair('品种', c.breed, '毛色', c.color);
|
||||
pair('出生', c.birthday, '星座', c.zodiac);
|
||||
pair('体重', c.weight, '', '');
|
||||
kvF('性别', c.gender, avY + 92);
|
||||
kvF('品种', c.breed, avY + 130);
|
||||
kvF('毛色', c.color, avY + 168);
|
||||
kvF('年龄', c.age, avY + 206);
|
||||
|
||||
// 性格标签 chips
|
||||
// 性格标签
|
||||
let ty = avY + avD + 34;
|
||||
ctx.textAlign = 'left';
|
||||
ctx.fillStyle = '#8A5A18';
|
||||
ctx.font = '600 24px sans-serif';
|
||||
ctx.fillText('🐾 性格标签', fx + 34, ty);
|
||||
const tags = (c.personality || '').split(',').filter(Boolean);
|
||||
if (tags.length) {
|
||||
let tx = infoX;
|
||||
const ty = y + 8;
|
||||
tags.forEach((t) => {
|
||||
ctx.font = '22px sans-serif';
|
||||
const tw = ctx.measureText(t).width + 28;
|
||||
ctx.fillStyle = 'rgba(245,169,71,.2)';
|
||||
this.roundRect(ctx, tx, ty - 26, tw, 36, 18);
|
||||
ctx.fill();
|
||||
ctx.fillStyle = '#A96500';
|
||||
ctx.textAlign = 'left';
|
||||
ctx.fillText(t, tx + 14, ty);
|
||||
tx += tw + 12;
|
||||
});
|
||||
const tagColors = [['#FFE7A8', '#8A5A18'], ['#D6E9FF', '#2E6DA8'], ['#FFD9DE', '#C24A63']];
|
||||
let tx = fx + 34;
|
||||
ty += 42;
|
||||
tags.forEach((t, i) => {
|
||||
ctx.font = '23px sans-serif';
|
||||
const tw = ctx.measureText(t).width + 32;
|
||||
const col = tagColors[i % tagColors.length];
|
||||
ctx.fillStyle = col[0];
|
||||
this.roundRect(ctx, tx, ty - 28, tw, 40, 20);
|
||||
ctx.fill();
|
||||
ctx.fillStyle = col[1];
|
||||
ctx.textAlign = 'left';
|
||||
ctx.fillText(t, tx + 16, ty);
|
||||
tx += tw + 14;
|
||||
});
|
||||
|
||||
// 介绍 quote
|
||||
if (c.intro) {
|
||||
const qy = ty + 30;
|
||||
ctx.fillStyle = 'rgba(255,255,255,.6)';
|
||||
this.roundRect(ctx, fx + 34, qy, cardW2 - 68, 60, 16);
|
||||
ctx.fill();
|
||||
ctx.fillStyle = '#7A5A2E';
|
||||
ctx.font = '25px sans-serif';
|
||||
ctx.textAlign = 'left';
|
||||
ctx.fillText('“ ' + c.intro + ' ”', fx + 54, qy + 40);
|
||||
}
|
||||
|
||||
// ═══ 照护信息 ═══
|
||||
const s2Y = s1Y + s1H + 14, s2H = 290;
|
||||
this.roundRect(ctx, pad, s2Y, cardW, s2H, 28);
|
||||
// 底部：身份ID + 一起生活天数
|
||||
ctx.textAlign = 'left';
|
||||
ctx.fillStyle = '#9C7A3E';
|
||||
ctx.font = '22px sans-serif';
|
||||
ctx.fillText('物ID ' + (c.id_no || ''), fx + 34, fY + fH - 60);
|
||||
if (c.days > 0) {
|
||||
ctx.fillText('和主人一起生活的第 ' + c.days + ' 天', fx + 34, fY + fH - 26);
|
||||
}
|
||||
|
||||
// ══════════ 背面卡（白 + 蓝）══════════
|
||||
const bY = fY + fH + 46, bH = 620;
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillStyle = '#C7A36A';
|
||||
ctx.font = '22px sans-serif';
|
||||
ctx.fillText('· 背面 ·', W / 2, bY - 16);
|
||||
this.roundRect(ctx, fx, bY, cardW2, bH, 30);
|
||||
ctx.fillStyle = '#FFFFFF';
|
||||
ctx.fill();
|
||||
ctx.textAlign = 'left';
|
||||
ctx.fillStyle = '#B4623F';
|
||||
ctx.font = '700 30px sans-serif';
|
||||
ctx.fillText('照护信息', pad + 40, s2Y + 56);
|
||||
const kv = (label, value, yy) => {
|
||||
ctx.textAlign = 'left';
|
||||
ctx.font = '24px sans-serif';
|
||||
ctx.fillStyle = '#9A8F82';
|
||||
ctx.fillText(label, pad + 40, yy);
|
||||
ctx.font = '600 26px sans-serif';
|
||||
ctx.fillStyle = '#2D2925';
|
||||
ctx.fillText(value || '—', pad + 190, yy);
|
||||
};
|
||||
kv('主人', c.owner, s2Y + 108);
|
||||
kv('联系电话', c.phone || '未验证', s2Y + 152);
|
||||
kv('疫苗情况', c.vaccine_state, s2Y + 196);
|
||||
kv('备注', c.notes || '无', s2Y + 240);
|
||||
|
||||
// ═══ 证件区（蓝紫渐变）+ 小程序码 ═══
|
||||
const s3Y = s2Y + s2H + 14, s3H = H - s3Y - pad;
|
||||
const g3 = ctx.createLinearGradient(pad, s3Y, W - pad, s3Y + s3H);
|
||||
g3.addColorStop(0, '#E8F0FF');
|
||||
g3.addColorStop(1, '#F0E8FF');
|
||||
this.roundRect(ctx, pad, s3Y, cardW, s3H, 28);
|
||||
ctx.fillStyle = g3;
|
||||
// 蓝色标题条
|
||||
const hb = 64;
|
||||
const gb = ctx.createLinearGradient(fx, bY, fx + cardW2, bY);
|
||||
gb.addColorStop(0, '#5AA0E8');
|
||||
gb.addColorStop(1, '#7FB6F0');
|
||||
this.roundRect(ctx, fx + 24, bY + 24, cardW2 - 48, hb, 18);
|
||||
ctx.fillStyle = gb;
|
||||
ctx.fill();
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillStyle = '#fff';
|
||||
ctx.font = '700 28px sans-serif';
|
||||
ctx.fillText('🌿 照护信息', W / 2, bY + 24 + 42);
|
||||
|
||||
// 照护行（emoji 图标 + 标签 + 值）
|
||||
const rowX = fx + 40;
|
||||
const kvB = (icon, label, value, yy) => {
|
||||
ctx.textAlign = 'left';
|
||||
ctx.font = '26px sans-serif';
|
||||
ctx.fillText(icon, rowX, yy);
|
||||
ctx.font = '24px sans-serif';
|
||||
ctx.fillStyle = '#8D8277';
|
||||
ctx.fillText(label, rowX + 44, yy);
|
||||
ctx.font = '600 25px sans-serif';
|
||||
ctx.fillStyle = '#2D2925';
|
||||
ctx.fillText(value || '—', rowX + 170, yy);
|
||||
};
|
||||
let ry = bY + 140;
|
||||
kvB('👤', '主人', c.owner, ry); ry += 46;
|
||||
kvB('📞', '联系电话', c.phone || '未验证', ry); ry += 46;
|
||||
kvB('💉', '疫苗情况', c.vaccine_state, ry); ry += 46;
|
||||
kvB('📝', '备注', c.notes || '无', ry); ry += 46;
|
||||
kvB('🏛', '发证机构', c.org || '肉垫计划', ry); ry += 46;
|
||||
kvB('📅', '有效期', c.validity || '永久有效', ry); ry += 40;
|
||||
|
||||
// 走失联系框 + 小程序码
|
||||
const lostY = ry + 16, lostH = bY + bH - lostY - 30;
|
||||
this.roundRect(ctx, fx + 24, lostY, cardW2 - 48, lostH, 18);
|
||||
ctx.fillStyle = '#EAF3FE';
|
||||
ctx.fill();
|
||||
ctx.textAlign = 'left';
|
||||
ctx.fillStyle = '#7D89A8';
|
||||
ctx.font = '22px sans-serif';
|
||||
ctx.fillText('宠 星 人 地 球 移 民', pad + 40, s3Y + 50);
|
||||
ctx.fillStyle = '#4A5878';
|
||||
ctx.font = '700 48px sans-serif';
|
||||
ctx.fillText('居民身份卡', pad + 40, s3Y + 112);
|
||||
ctx.fillStyle = '#8A93A8';
|
||||
ctx.font = '22px sans-serif';
|
||||
ctx.fillText('身份 ID ' + (c.id_no || ''), pad + 40, s3Y + 156);
|
||||
ctx.fillText('签发机构 ' + (c.org || '肉垫计划'), pad + 40, s3Y + 190);
|
||||
ctx.fillText('有效期限 ' + (c.validity || '永久有效'), pad + 40, s3Y + 224);
|
||||
|
||||
ctx.fillStyle = '#2E6DA8';
|
||||
ctx.font = '600 25px sans-serif';
|
||||
ctx.fillText('🔔 走失时请联系主人', fx + 44, lostY + 44);
|
||||
ctx.fillStyle = '#5B7A9C';
|
||||
ctx.font = '21px sans-serif';
|
||||
ctx.fillText('微信扫一扫，查看' + (c.name || '') + '的身份信息', fx + 44, lostY + 84);
|
||||
ctx.fillText('或联系主人', fx + 44, lostY + 114);
|
||||
// 小程序码
|
||||
const qrD = 118, qrX = W - pad - 36 - qrD, qrY = s3Y + s3H - 36 - qrD;
|
||||
const qrD = 118, qrX = fx + cardW2 - 24 - 20 - qrD, qrY = lostY + (lostH - qrD) / 2;
|
||||
ctx.fillStyle = '#fff';
|
||||
this.roundRect(ctx, qrX, qrY, qrD, qrD, 12);
|
||||
ctx.fill();
|
||||
if (qr) {
|
||||
ctx.drawImage(qr, qrX + 8, qrY + 8, qrD - 16, qrD - 16);
|
||||
} else {
|
||||
ctx.fillStyle = '#B5A99D';
|
||||
ctx.font = '20px sans-serif';
|
||||
ctx.fillStyle = '#9CB4CC';
|
||||
ctx.font = '18px sans-serif';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText('小程序码', qrX + qrD / 2, qrY + qrD / 2 - 4);
|
||||
ctx.fillText('待发布', qrX + qrD / 2, qrY + qrD / 2 + 26);
|
||||
ctx.fillText('小程序码', qrX + qrD / 2, qrY + qrD / 2 - 2);
|
||||
ctx.fillText('待发布', qrX + qrD / 2, qrY + qrD / 2 + 24);
|
||||
}
|
||||
|
||||
wx.canvasToTempFilePath(
|
||||
@@ -269,17 +325,20 @@ Page({
|
||||
// 拿回后重新取卡（此时电话就有了）并重画
|
||||
onGetPhone(e) {
|
||||
const d = e.detail || {};
|
||||
if (!d.code) return; // 用户拒绝授权
|
||||
if (!d.code) {
|
||||
// 用户拒绝授权：不给生成，明确提示
|
||||
this.setData({ phoneRefused: true });
|
||||
return wx.showToast({ title: '没有手机号，无法生成身份卡', icon: 'none' });
|
||||
}
|
||||
wx.showLoading({ title: '验证中…', mask: true });
|
||||
api
|
||||
.bindPhone(d.code)
|
||||
.then(() => api.petIDCard(this.data.petId))
|
||||
.then((card) => {
|
||||
wx.hideLoading();
|
||||
if (card) {
|
||||
this.setData({ card, qrReady: !!card.qr_ready });
|
||||
this.draw();
|
||||
}
|
||||
if (!card) return;
|
||||
this.setData({ card, qrReady: !!card.qr_ready, needPhone: false, phoneRefused: false });
|
||||
wx.nextTick(() => this.draw());
|
||||
wx.showToast({ title: '手机号已验证', icon: 'success' });
|
||||
})
|
||||
.catch((err) => {
|
||||
|
||||
Reference in New Issue
Block a user