From 15adfb76aca9e3ff760313860d37da574128995b Mon Sep 17 00:00:00 2001 From: Blizzard Date: Fri, 31 Jul 2026 17:28:26 +0800 Subject: [PATCH] =?UTF-8?q?feat(fe):=20=E8=BA=AB=E4=BB=BD=E5=8D=A1?= =?UTF-8?q?=E9=87=8D=E7=BB=98=E6=88=90=E6=AD=A3=E9=9D=A2+=E7=85=A7?= =?UTF-8?q?=E6=8A=A4=E4=BF=A1=E6=81=AF+=E8=AF=81=E4=BB=B6=E4=B8=89?= =?UTF-8?q?=E6=AE=B5=E5=BC=8F=20+=20=E6=89=8B=E6=9C=BA=E5=8F=B7=E9=AA=8C?= =?UTF-8?q?=E8=AF=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 正面：头像/名字/物种性别 + 品种·毛色 / 出生·星座 / 体重 + 性格标签chips - 照护信息：主人 / 联系电话 / 疫苗情况 / 备注（去掉驱虫、过敏） - 证件区：居民身份卡 + 身份ID / 发证机构 / 有效期 + 小程序码 - 未验证手机号时页面出现「用微信验证手机号」(getPhoneNumber)， 拿到 code 换手机号后重取卡重画；表单去掉过敏输入 Co-Authored-By: Claude Opus 5 --- pets-fe/pages/idcard/idcard.js | 219 +++++++++++++++-------------- pets-fe/pages/idcard/idcard.wxml | 8 ++ pets-fe/pages/idcard/idcard.wxss | 4 + pets-fe/pages/petform/petform.wxml | 3 - pets-fe/utils/api.js | 1 + 5 files changed, 124 insertions(+), 111 deletions(-) diff --git a/pets-fe/pages/idcard/idcard.js b/pets-fe/pages/idcard/idcard.js index 7958780..151af77 100644 --- a/pets-fe/pages/idcard/idcard.js +++ b/pets-fe/pages/idcard/idcard.js @@ -4,7 +4,7 @@ const { toastErr } = require('../../utils/ui.js'); // 卡片画布尺寸（逻辑像素）。真实导出会按 dpr 放大 const W = 620; -const H = 812; +const H = 1000; // 在 canvas 2d 上加载一张图（远程或本地），resolve 出可直接 drawImage 的 image 对象。 // 加载失败 resolve(null)——头像或小程序码缺一张不该让整张卡画不出来 @@ -83,46 +83,37 @@ Page({ const pad = 30; const cardW = W - pad * 2; - // ── 上半张：资料区（蓝紫渐变）── - const topH = 430; - const g1 = ctx.createLinearGradient(pad, pad, W - pad, topH); + // ═══ 正面：资料区（暖粉渐变）═══ + 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, pad, cardW, topH - pad, 28); + this.roundRect(ctx, pad, s1Y, cardW, s1H, 28); ctx.fillStyle = g1; ctx.fill(); - - // 肉垫水印：卡内几枚淡淡的爪印，裁剪在圆角卡里 + // 爪印水印 ctx.save(); - this.roundRect(ctx, pad, pad, cardW, topH - pad, 28); + this.roundRect(ctx, pad, s1Y, cardW, s1H, 28); ctx.clip(); ctx.globalAlpha = 0.06; - ctx.font = '120px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; - ctx.fillText('🐾', W - pad - 70, pad + 90); - ctx.font = '80px sans-serif'; - ctx.fillText('🐾', W - pad - 150, topH - 70); + ctx.font = '130px sans-serif'; + ctx.fillText('🐾', W - pad - 80, s1Y + 100); ctx.restore(); ctx.globalAlpha = 1; ctx.textBaseline = 'alphabetic'; - // 头像圆（描一圈白边更像证件照） - const avX = pad + 34, avY = pad + 34, avD = 120; + // 头像圆 + 白边 + const avX = pad + 34, avY = s1Y + 34, avD = 118; ctx.save(); ctx.beginPath(); ctx.arc(avX + avD / 2, avY + avD / 2, avD / 2, 0, Math.PI * 2); - ctx.closePath(); ctx.clip(); if (avatar) { - // 居中裁剪成正方形再画：竖图/横图都不会被压变形（cover 效果） - const iw = avatar.width || avD; - const ih = avatar.height || avD; - const side = Math.min(iw, ih); - const sx = (iw - side) / 2; - const sy = (ih - side) / 2; - ctx.drawImage(avatar, sx, sy, side, side, avX, avY, avD, avD); + 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); @@ -134,27 +125,25 @@ Page({ } ctx.restore(); 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.stroke(); - // 资料行 - const infoX = avX + avD + 28; - let y = pad + 52; - const line = (label, value) => { - ctx.textAlign = 'left'; - ctx.font = '24px sans-serif'; - ctx.fillStyle = '#9A8F82'; - ctx.fillText(label, infoX, y); - ctx.fillStyle = '#2D2925'; - ctx.font = '600 26px sans-serif'; - ctx.fillText(value || '—', infoX + ctx.measureText(label).width + 14, y); - y += 46; - }; - // 一行放两组「标签 值」，X 起点给定 + // 名字大字 + 物种·性别（头像右侧） + const nameX = avX + avD + 26; + 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.textAlign = 'left'; ctx.font = '24px sans-serif'; @@ -162,95 +151,86 @@ Page({ ctx.fillText(l1, infoX, y); ctx.fillStyle = '#2D2925'; ctx.font = '600 26px sans-serif'; - const w1 = ctx.measureText(v1 || '—').width; - ctx.fillText(v1 || '—', infoX + 62, y); - if (l2 && v2) { - const x2 = infoX + 62 + w1 + 26; + 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 + 62, y); + ctx.fillText(v2 || '—', x2 + 66, y); } - y += 46; + y += 44; }; - line('姓名', c.name); - pair('性别', c.gender, '品种', c.breed); - line('出生', c.birthday); - pair('星座', c.zodiac, '体重', c.weight); - line('介绍', c.intro); + pair('品种', c.breed, '毛色', c.color); + pair('出生', c.birthday, '星座', c.zodiac); + pair('体重', c.weight, '', ''); - // 身份 ID：虚线 + 号 - const idY = pad + 344; - ctx.strokeStyle = 'rgba(122,74,8,.22)'; - ctx.lineWidth = 1; - ctx.setLineDash([6, 6]); - ctx.beginPath(); - ctx.moveTo(pad + 34, idY); - ctx.lineTo(W - pad - 34, idY); - ctx.stroke(); - ctx.setLineDash([]); - ctx.textAlign = 'left'; - ctx.font = '22px sans-serif'; - ctx.fillStyle = '#9A8F82'; - ctx.fillText('身份 ID', pad + 34, idY + 34); - ctx.font = '600 26px sans-serif'; - ctx.fillStyle = '#2D2925'; - ctx.fillText(c.id_no || '', pad + 34 + 90, idY + 34); + // 性格标签 chips + 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 botY = topH + 12; - const botH = H - botY - pad; - const g2 = ctx.createLinearGradient(pad, botY, W - pad, botY + botH); - g2.addColorStop(0, '#E8F0FF'); - g2.addColorStop(1, '#F0E8FF'); - this.roundRect(ctx, pad, botY, cardW, botH, 28); - ctx.fillStyle = g2; + // ═══ 照护信息 ═══ + const s2Y = s1Y + s1H + 14, s2H = 290; + this.roundRect(ctx, pad, s2Y, cardW, s2H, 28); + 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; + ctx.fill(); ctx.textAlign = 'left'; ctx.fillStyle = '#7D89A8'; ctx.font = '22px sans-serif'; - ctx.fillText('宠 星 人 地 球 移 民', pad + 40, botY + 60); + ctx.fillText('宠 星 人 地 球 移 民', pad + 40, s3Y + 50); ctx.fillStyle = '#4A5878'; - ctx.font = '700 52px sans-serif'; - ctx.fillText('居民身份卡', pad + 40, botY + 128); - + ctx.font = '700 48px sans-serif'; + ctx.fillText('居民身份卡', pad + 40, s3Y + 112); ctx.fillStyle = '#8A93A8'; ctx.font = '22px sans-serif'; - ctx.fillText('签发机构　肉垫计划', pad + 40, botY + 180); - ctx.fillText('有效期限　' + (c.validity || '永久有效'), pad + 40, botY + 214); + 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.save(); - ctx.translate(W - pad - 120, botY + 100); - ctx.rotate((-14 * Math.PI) / 180); - ctx.globalAlpha = 0.5; - ctx.strokeStyle = '#B4623F'; - ctx.fillStyle = '#B4623F'; - ctx.textAlign = 'center'; - ctx.textBaseline = 'middle'; - ctx.lineWidth = 4; - ctx.beginPath(); - ctx.arc(0, 0, 60, 0, Math.PI * 2); - ctx.stroke(); - ctx.lineWidth = 1.5; - ctx.beginPath(); - ctx.arc(0, 0, 50, 0, Math.PI * 2); - ctx.stroke(); - ctx.font = '32px sans-serif'; - ctx.fillText('★', 0, -16); - ctx.font = '700 22px sans-serif'; - ctx.fillText('肉垫计划', 0, 16); - ctx.font = '12px sans-serif'; - ctx.fillText('官方认证', 0, 38); - ctx.restore(); - ctx.globalAlpha = 1; - ctx.textBaseline = 'alphabetic'; - - // 小程序码（未发布时 qr 为 null，画个占位框） - const qrD = 128, qrX = W - pad - 40 - qrD, qrY = botY + botH - 40 - qrD; + // 小程序码 + const qrD = 118, qrX = W - pad - 36 - qrD, qrY = s3Y + s3H - 36 - qrD; ctx.fillStyle = '#fff'; this.roundRect(ctx, qrX, qrY, qrD, qrD, 12); ctx.fill(); @@ -285,6 +265,29 @@ Page({ ctx.closePath(); }, + // 微信取手机号：新版 getPhoneNumber 返回动态 code，后端换成真实手机号存库， + // 拿回后重新取卡（此时电话就有了）并重画 + onGetPhone(e) { + const d = e.detail || {}; + if (!d.code) return; // 用户拒绝授权 + 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(); + } + wx.showToast({ title: '手机号已验证', icon: 'success' }); + }) + .catch((err) => { + wx.hideLoading(); + toastErr(err, '验证失败'); + }); + }, + onSave() { if (!this.data.cardImg) return wx.showToast({ title: '还在生成，稍等一下', icon: 'none' }); if (this.data.saving) return; diff --git a/pets-fe/pages/idcard/idcard.wxml b/pets-fe/pages/idcard/idcard.wxml index 8b85f45..7cab28d 100644 --- a/pets-fe/pages/idcard/idcard.wxml +++ b/pets-fe/pages/idcard/idcard.wxml @@ -8,6 +8,14 @@ 正在生成身份卡… + + + 背面「联系电话」还没验证，走失时联系不到你 + + + 小程序码要在小程序发布后才会出现，现在先放一个占位。 diff --git a/pets-fe/pages/idcard/idcard.wxss b/pets-fe/pages/idcard/idcard.wxss index be0963d..d93322c 100644 --- a/pets-fe/pages/idcard/idcard.wxss +++ b/pets-fe/pages/idcard/idcard.wxss @@ -19,3 +19,7 @@ button.ic-btn::after{border:none} /* 离屏 canvas：挪出可视区，只用来生成图 */ .ic-canvas{position:fixed;left:-9999rpx;top:0;width:620px;height:760px} + +/* 手机号验证提示 */ +.ic-phone-tip{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);color:var(--red-ink)} +.ic-phone-btn{width:auto;padding:0 var(--sp-6)} diff --git a/pets-fe/pages/petform/petform.wxml b/pets-fe/pages/petform/petform.wxml index 77cfc5a..8b3d69c 100644 --- a/pets-fe/pages/petform/petform.wxml +++ b/pets-fe/pages/petform/petform.wxml @@ -78,9 +78,6 @@ {{item}} - - diff --git a/pets-fe/utils/api.js b/pets-fe/utils/api.js index 20461f5..4a90407 100644 --- a/pets-fe/utils/api.js +++ b/pets-fe/utils/api.js @@ -42,6 +42,7 @@ const api = { // 用户 getProfile: () => request({ url: '/api/user/profile' }), + bindPhone: (code) => request({ url: '/api/user/phone', method: 'POST', data: { code } }), updateProfile: (body) => request({ url: '/api/user/profile', method: 'PUT', data: body }), // 用户