Blizzard
747e7c9d3a
getPhoneNumber 需企业认证 + 手机号验证权限，个人/未认证小程序唤不起。 门槛卡加「手动填写手机号」入口：填 11 位号 → updateProfile 存库 → 重取卡生成。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
413 lines
14 KiB
JavaScript
413 lines
14 KiB
JavaScript
const store = require('../../utils/store.js');
|
|
const api = require('../../utils/api.js');
|
|
const { toastErr } = require('../../utils/ui.js');
|
|
|
|
// 卡片画布尺寸（逻辑像素）。真实导出会按 dpr 放大
|
|
const W = 620;
|
|
const H = 1480;
|
|
|
|
// 在 canvas 2d 上加载一张图（远程或本地），resolve 出可直接 drawImage 的 image 对象。
|
|
// 加载失败 resolve(null)——头像或小程序码缺一张不该让整张卡画不出来
|
|
function loadImage(canvas, src) {
|
|
return new Promise((resolve) => {
|
|
if (!src) return resolve(null);
|
|
const img = canvas.createImage();
|
|
img.onload = () => resolve(img);
|
|
img.onerror = () => resolve(null);
|
|
img.src = src;
|
|
});
|
|
}
|
|
|
|
Page({
|
|
data: {
|
|
petId: '',
|
|
card: null,
|
|
cardImg: '',
|
|
qrReady: false,
|
|
saving: false,
|
|
needPhone: false, // 没手机号：门槛，先验证才生成
|
|
phoneRefused: false, // 用户拒绝了授权
|
|
manualMode: false, // 手动填手机号（getPhoneNumber 唤不起时的兜底）
|
|
manualPhone: '',
|
|
},
|
|
onLoad(q) {
|
|
store
|
|
.ready()
|
|
.then(() => {
|
|
const id = (q && q.id) || store.currentPetId();
|
|
if (!id) {
|
|
wx.showToast({ title: '先选一只毛孩子', icon: 'none' });
|
|
return;
|
|
}
|
|
this.setData({ petId: id });
|
|
return api.petIDCard(id);
|
|
})
|
|
.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());
|
|
})
|
|
.catch((e) => toastErr(e));
|
|
},
|
|
|
|
draw() {
|
|
wx.createSelectorQuery()
|
|
.select('#idCanvas')
|
|
.fields({ node: true, size: true })
|
|
.exec((res) => {
|
|
const node = res && res[0] && res[0].node;
|
|
if (!node) return;
|
|
let dpr = 2;
|
|
try {
|
|
dpr = (wx.getWindowInfo ? wx.getWindowInfo() : wx.getSystemInfoSync()).pixelRatio || 2;
|
|
} catch (e) {
|
|
dpr = 2;
|
|
}
|
|
node.width = W * dpr;
|
|
node.height = H * dpr;
|
|
const ctx = node.getContext('2d');
|
|
ctx.scale(dpr, dpr);
|
|
|
|
const c = this.data.card || {};
|
|
// 两张远程图都就绪再开画，否则小程序码会画不上或画一半（plan 里点过名的坑）
|
|
Promise.all([loadImage(node, c.avatar_url), loadImage(node, c.qr_url)]).then(([avatar, qr]) => {
|
|
this.paint(ctx, node, c, avatar, qr);
|
|
});
|
|
});
|
|
},
|
|
|
|
paint(ctx, node, c, avatar, qr) {
|
|
ctx.clearRect(0, 0, W, H);
|
|
|
|
// 外层留白背景
|
|
ctx.fillStyle = '#F3EFE8';
|
|
ctx.fillRect(0, 0, W, H);
|
|
|
|
const pad = 30;
|
|
const cardW = W - pad * 2;
|
|
|
|
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, 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;
|
|
ctx.save();
|
|
ctx.beginPath();
|
|
ctx.arc(avX + avD / 2, avY + avD / 2, avD / 2, 0, Math.PI * 2);
|
|
ctx.clip();
|
|
if (avatar) {
|
|
const iw = avatar.width || avD, ih = avatar.height || avD, side = Math.min(iw, ih);
|
|
ctx.drawImage(avatar, (iw - side) / 2, (ih - side) / 2, side, side, avX, avY, avD, avD);
|
|
} else {
|
|
ctx.fillStyle = '#FFD9A3';
|
|
ctx.fillRect(avX, avY, avD, avD);
|
|
ctx.fillStyle = '#8A5A18';
|
|
ctx.font = '64px sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'middle';
|
|
ctx.fillText(c.species === '狗狗' ? '🐶' : '🐱', avX + avD / 2, avY + avD / 2);
|
|
}
|
|
ctx.restore();
|
|
ctx.textBaseline = 'alphabetic';
|
|
ctx.beginPath();
|
|
ctx.arc(avX + avD / 2, avY + avD / 2, avD / 2, 0, Math.PI * 2);
|
|
ctx.strokeStyle = '#fff';
|
|
ctx.lineWidth = 8;
|
|
ctx.stroke();
|
|
|
|
// 名字 + 性别（头像右侧）
|
|
const nx = avX + avD + 28;
|
|
ctx.textAlign = 'left';
|
|
ctx.fillStyle = '#2D2925';
|
|
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 = '#A98C5A';
|
|
ctx.fillText(label, nx, yy);
|
|
ctx.fillStyle = '#3D3427';
|
|
ctx.font = '600 26px sans-serif';
|
|
ctx.fillText(value || '—', nx + 78, yy);
|
|
};
|
|
kvF('性别', c.gender, avY + 92);
|
|
kvF('品种', c.breed, avY + 130);
|
|
kvF('毛色', c.color, avY + 168);
|
|
kvF('年龄', c.age, avY + 206);
|
|
|
|
// 性格标签
|
|
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);
|
|
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);
|
|
}
|
|
|
|
// 底部：身份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();
|
|
|
|
// 蓝色标题条
|
|
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 = '#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 = 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 = '#9CB4CC';
|
|
ctx.font = '18px sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText('小程序码', qrX + qrD / 2, qrY + qrD / 2 - 2);
|
|
ctx.fillText('待发布', qrX + qrD / 2, qrY + qrD / 2 + 24);
|
|
}
|
|
|
|
wx.canvasToTempFilePath(
|
|
{
|
|
canvas: node,
|
|
fileType: 'png',
|
|
success: (r) => this.setData({ cardImg: r.tempFilePath }),
|
|
fail: () => wx.showToast({ title: '生成失败，稍后再试', icon: 'none' }),
|
|
},
|
|
this,
|
|
);
|
|
},
|
|
|
|
roundRect(ctx, x, y, w, h, r) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(x + r, y);
|
|
ctx.arcTo(x + w, y, x + w, y + h, r);
|
|
ctx.arcTo(x + w, y + h, x, y + h, r);
|
|
ctx.arcTo(x, y + h, x, y, r);
|
|
ctx.arcTo(x, y, x + w, y, r);
|
|
ctx.closePath();
|
|
},
|
|
|
|
// 微信取手机号：新版 getPhoneNumber 返回动态 code，后端换成真实手机号存库，
|
|
// 拿回后重新取卡（此时电话就有了）并重画
|
|
onGetPhone(e) {
|
|
const d = e.detail || {};
|
|
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) return;
|
|
this.setData({ card, qrReady: !!card.qr_ready, needPhone: false, phoneRefused: false });
|
|
wx.nextTick(() => this.draw());
|
|
wx.showToast({ title: '手机号已验证', icon: 'success' });
|
|
})
|
|
.catch((err) => {
|
|
wx.hideLoading();
|
|
toastErr(err, '验证失败');
|
|
});
|
|
},
|
|
|
|
// 手动填手机号兜底（getPhoneNumber 需企业认证，唤不起时用这个）
|
|
showManual() {
|
|
this.setData({ manualMode: true });
|
|
},
|
|
onManualPhone(e) {
|
|
this.setData({ manualPhone: e.detail.value });
|
|
},
|
|
submitManual() {
|
|
const p = (this.data.manualPhone || '').trim();
|
|
if (!/^1\d{10}$/.test(p)) return wx.showToast({ title: '手机号格式不对', icon: 'none' });
|
|
wx.showLoading({ title: '保存中…', mask: true });
|
|
api
|
|
.updateProfile({ phone: p })
|
|
.then(() => api.petIDCard(this.data.petId))
|
|
.then((card) => {
|
|
wx.hideLoading();
|
|
if (!card) return;
|
|
this.setData({ card, qrReady: !!card.qr_ready, needPhone: false, manualMode: false });
|
|
wx.nextTick(() => this.draw());
|
|
})
|
|
.catch((err) => {
|
|
wx.hideLoading();
|
|
toastErr(err, '保存失败');
|
|
});
|
|
},
|
|
|
|
onSave() {
|
|
if (!this.data.cardImg) return wx.showToast({ title: '还在生成，稍等一下', icon: 'none' });
|
|
if (this.data.saving) return;
|
|
this.setData({ saving: true });
|
|
wx.saveImageToPhotosAlbum({
|
|
filePath: this.data.cardImg,
|
|
success: () => wx.showToast({ title: '已保存到相册', icon: 'success' }),
|
|
fail: (err) => {
|
|
const msg = (err && err.errMsg) || '';
|
|
if (msg.indexOf('cancel') >= 0) return;
|
|
// 拒过一次后 authorize 不再弹，必须引导去设置页
|
|
if (msg.indexOf('auth deny') >= 0 || msg.indexOf('authorize') >= 0) {
|
|
wx.showModal({
|
|
title: '需要相册权限',
|
|
content: '保存身份卡需要允许访问相册，去设置里打开一下？',
|
|
confirmText: '去设置',
|
|
success: (r) => r.confirm && wx.openSetting({}),
|
|
});
|
|
return;
|
|
}
|
|
wx.showToast({ title: '保存失败', icon: 'none' });
|
|
},
|
|
complete: () => this.setData({ saving: false }),
|
|
});
|
|
},
|
|
|
|
onShareAppMessage() {
|
|
const c = this.data.card || {};
|
|
return {
|
|
title: `${c.name || '我家毛孩子'} 的居民身份卡`,
|
|
path: '/pages/idcard/idcard?id=' + this.data.petId,
|
|
imageUrl: this.data.cardImg || '', // 用画好的卡当分享封面
|
|
};
|
|
},
|
|
});
|