From 586875f8c50260aad9c58a68aee88ff1638089c0 Mon Sep 17 00:00:00 2001 From: Blizzard Date: Fri, 31 Jul 2026 17:48:39 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=BA=AB=E4=BB=BD=E5=8D=A1=E6=94=B9?= =?UTF-8?q?=E4=B8=8A=E4=B8=8B=E4=B8=A4=E5=BC=A0=E5=8D=A1(=E6=AD=A3?= =?UTF-8?q?=E9=9D=A2/=E8=83=8C=E9=9D=A2)=20+=20=E6=89=8B=E6=9C=BA=E5=8F=B7?= =?UTF-8?q?=E7=A1=AC=E9=97=A8=E6=A7=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - canvas 重画成上下两张：正面(暖黄，头像/名字性别/性别品种毛色年龄/性格 彩色标签/介绍/物ID+一起生活天数)、背面(蓝色照护信息条 + 主人/电话/疫苗/ 备注/发证机构/有效期 + 走失联系框&小程序码) - 生成前查手机号：没有则唤起 getPhoneNumber 组件，验证成功才生成； 拒绝则提示「无法生成」不出卡 - IDCard 增 age/days；ic-canvas 高度改 1480 否则导出被裁 Co-Authored-By: Claude Opus 5 --- pets-be/internal/service/idcard.go | 11 +- pets-fe/pages/idcard/idcard.js | 279 +++++++++++++++++------------ pets-fe/pages/idcard/idcard.wxml | 51 +++--- pets-fe/pages/idcard/idcard.wxss | 19 +- 4 files changed, 221 insertions(+), 139 deletions(-) diff --git a/pets-be/internal/service/idcard.go b/pets-be/internal/service/idcard.go index 26b0a2f..b026f01 100644 --- a/pets-be/internal/service/idcard.go +++ b/pets-be/internal/service/idcard.go @@ -3,6 +3,7 @@ package service import ( "log" "strings" + "time" "github.com/sundynix/pets-be/internal/model" ) @@ -14,6 +15,8 @@ type IDCard struct { Gender string `json:"gender"` Breed string `json:"breed"` Birthday string `json:"birthday"` // "2023 年 12 月 15 日" + Age string `json:"age"` // 年龄，如 "2岁7个月" + Days int `json:"days"` // 一起生活的天数（按到家日） Zodiac string `json:"zodiac"` // 星座，按生日算 Weight string `json:"weight"` // 体重，如 "13.5kg" Intro string `json:"intro"` @@ -145,9 +148,15 @@ func (s *Service) GetIDCard(userID, petID string) (*IDCard, error) { allergy = "无" } + // 一起生活的天数：按到家日算，没填就 0 + days := 0 + if pet.ArrivedAt != nil && !pet.ArrivedAt.IsZero() { + days = int(time.Since(*pet.ArrivedAt).Hours()/24) + 1 + } + card := &IDCard{ Name: pet.Name, Species: pet.Type, Gender: pet.Gender, Breed: pet.Breed, - Birthday: bd, Zodiac: zodiac, Weight: pet.Weight, Intro: intro, + Birthday: bd, Age: pet.Age, Days: days, Zodiac: zodiac, Weight: pet.Weight, Intro: intro, Color: pet.Color, Personality: pet.Personality, AvatarURL: pet.AvatarURL, IDNo: petIDNo(pet), Validity: validity, Owner: owner, Phone: maskPhone(user.Phone), Allergy: allergy, Notes: pet.Notes, diff --git a/pets-fe/pages/idcard/idcard.js b/pets-fe/pages/idcard/idcard.js index 151af77..6eff9ac 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 = 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) => { diff --git a/pets-fe/pages/idcard/idcard.wxml b/pets-fe/pages/idcard/idcard.wxml index 7cab28d..384f591 100644 --- a/pets-fe/pages/idcard/idcard.wxml +++ b/pets-fe/pages/idcard/idcard.wxml @@ -2,32 +2,35 @@ + + + + 生成身份卡需要手机号 + 身份卡背面的「联系电话」用于走失时联系你，验证后才能生成 + + 没有手机号，无法生成身份卡 + + - - - 正在生成身份卡… - - - - - 背面「联系电话」还没验证，走失时联系不到你 - - - - - 小程序码要在小程序发布后才会出现，现在先放一个占位。 - - - - - 下载到相册 + + + + 正在生成身份卡… - - + + + 小程序码要在小程序发布后才会出现，现在先放一个占位。 + + + + + 下载到相册 + + + + diff --git a/pets-fe/pages/idcard/idcard.wxss b/pets-fe/pages/idcard/idcard.wxss index d93322c..93976ed 100644 --- a/pets-fe/pages/idcard/idcard.wxss +++ b/pets-fe/pages/idcard/idcard.wxss @@ -18,8 +18,19 @@ button.ic-btn{padding:0;line-height:normal} button.ic-btn::after{border:none} /* 离屏 canvas：挪出可视区，只用来生成图 */ -.ic-canvas{position:fixed;left:-9999rpx;top:0;width:620px;height:760px} +.ic-canvas{position:fixed;left:-9999rpx;top:0;width:620px;height:1480px} -/* 手机号验证提示 */ -.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)} +/* 手机号门槛卡 */ +.ic-gate{ + background:#fff;border-radius:var(--r-lg);box-shadow:var(--sd-1); + padding:var(--sp-6) var(--sp-5);margin-top:var(--sp-5);text-align:center; +} +.ic-gate-ic{ + width:140rpx;height:140rpx;margin:0 auto var(--sp-4);border-radius:50%; + background:var(--primary-soft);color:var(--primary); + display:flex;align-items:center;justify-content:center; +} +.ic-gate-t{font-size:var(--fs-lg);font-weight:var(--fw-b);color:var(--text)} +.ic-gate-p{font-size:var(--fs-sm);color:var(--muted);line-height:1.6;margin:var(--sp-2) 0 var(--sp-5)} +.ic-gate-refuse{color:var(--red-ink);font-weight:var(--fw-b);font-size:var(--fs-md)} +.ic-gate-btn{margin-top:var(--sp-2)}