sundynix/sundynix-pets
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(fe): 修社区图片撑破网格；发帖限 3 张；上传偶发失败自动重试 #5

Merged
Blizzard merged 33 commits from feat/dev into main 2026-07-31 10:43:15 +00:00
Conversation 0 Commits 33 Files Changed 42
+124 -111
5 changed files with 124 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 15adfb76ac - Show all commits
pets-fe/pages/idcard/idcard.js
+111 -108
View File
@@ -4,7 +4,7 @@ const { toastErr } = require('../../utils/ui.js');
// 卡片画布尺寸（逻辑像素）。真实导出会按 dpr 放大 // 卡片画布尺寸（逻辑像素）。真实导出会按 dpr 放大
const W = 620; const W = 620;
const H = 812; const H = 1000;
// 在 canvas 2d 上加载一张图（远程或本地），resolve 出可直接 drawImage 的 image 对象。 // 在 canvas 2d 上加载一张图（远程或本地），resolve 出可直接 drawImage 的 image 对象。
// 加载失败 resolve(null)——头像或小程序码缺一张不该让整张卡画不出来 // 加载失败 resolve(null)——头像或小程序码缺一张不该让整张卡画不出来
@@ -83,46 +83,37 @@ Page({
const pad = 30; const pad = 30;
const cardW = W - pad * 2; const cardW = W - pad * 2;
// ── 上半张：资料区（蓝紫渐变）── // ═══ 正面：资料区（暖粉渐变）═══
const topH = 430; const s1Y = pad, s1H = 378;
const g1 = ctx.createLinearGradient(pad, pad, W - pad, topH); const g1 = ctx.createLinearGradient(pad, s1Y, W - pad, s1Y + s1H);
g1.addColorStop(0, '#FFF0D6'); g1.addColorStop(0, '#FFF0D6');
g1.addColorStop(0.5, '#FFE0EC'); g1.addColorStop(0.5, '#FFE0EC');
g1.addColorStop(1, '#E6EEFF'); 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.fillStyle = g1;
ctx.fill(); ctx.fill();
// 爪印水印
// 肉垫水印：卡内几枚淡淡的爪印，裁剪在圆角卡里
ctx.save(); ctx.save();
this.roundRect(ctx, pad, pad, cardW, topH - pad, 28); this.roundRect(ctx, pad, s1Y, cardW, s1H, 28);
ctx.clip(); ctx.clip();
ctx.globalAlpha = 0.06; ctx.globalAlpha = 0.06;
ctx.font = '120px sans-serif';
ctx.textAlign = 'center'; ctx.textAlign = 'center';
ctx.textBaseline = 'middle'; ctx.textBaseline = 'middle';
ctx.fillText('🐾', W - pad - 70, pad + 90); ctx.font = '130px sans-serif';
ctx.font = '80px sans-serif'; ctx.fillText('🐾', W - pad - 80, s1Y + 100);
ctx.fillText('🐾', W - pad - 150, topH - 70);
ctx.restore(); ctx.restore();
ctx.globalAlpha = 1; ctx.globalAlpha = 1;
ctx.textBaseline = 'alphabetic'; ctx.textBaseline = 'alphabetic';
// 头像圆（描一圈白边更像证件照） // 头像圆 + 白边
const avX = pad + 34, avY = pad + 34, avD = 120; const avX = pad + 34, avY = s1Y + 34, avD = 118;
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);
ctx.closePath();
ctx.clip(); ctx.clip();
if (avatar) { if (avatar) {
// 居中裁剪成正方形再画：竖图/横图都不会被压变形（cover 效果） const iw = avatar.width || avD, ih = avatar.height || avD, side = Math.min(iw, ih);
const iw = avatar.width || avD; ctx.drawImage(avatar, (iw - side) / 2, (ih - side) / 2, side, side, avX, avY, avD, 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);
} else { } else {
ctx.fillStyle = '#FFD9A3'; ctx.fillStyle = '#FFD9A3';
ctx.fillRect(avX, avY, avD, avD); ctx.fillRect(avX, avY, avD, avD);
@@ -134,27 +125,25 @@ Page({
} }
ctx.restore(); ctx.restore();
ctx.textBaseline = 'alphabetic'; ctx.textBaseline = 'alphabetic';
// 头像白边圈
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);
ctx.strokeStyle = 'rgba(255,255,255,.9)'; ctx.strokeStyle = 'rgba(255,255,255,.9)';
ctx.lineWidth = 5; ctx.lineWidth = 5;
ctx.stroke(); ctx.stroke();
// 资料行 // 名字大字 + 物种·性别（头像右侧）
const infoX = avX + avD + 28; const nameX = avX + avD + 26;
let y = pad + 52; ctx.textAlign = 'left';
const line = (label, value) => { ctx.fillStyle = '#2D2925';
ctx.textAlign = 'left'; ctx.font = '700 46px sans-serif';
ctx.font = '24px sans-serif'; ctx.fillText(c.name || '毛孩子', nameX, avY + 54);
ctx.fillStyle = '#9A8F82'; ctx.fillStyle = '#9A8F82';
ctx.fillText(label, infoX, y); ctx.font = '24px sans-serif';
ctx.fillStyle = '#2D2925'; ctx.fillText(c.species + (c.gender ? ' · ' + c.gender : ''), nameX, avY + 96);
ctx.font = '600 26px sans-serif';
ctx.fillText(value || '—', infoX + ctx.measureText(label).width + 14, y); // 资料 pair 行（头像下方，全宽两列）
y += 46; const infoX = pad + 40;
}; let y = s1Y + avD + 60;
// 一行放两组「标签 值」，X 起点给定
const pair = (l1, v1, l2, v2) => { const pair = (l1, v1, l2, v2) => {
ctx.textAlign = 'left'; ctx.textAlign = 'left';
ctx.font = '24px sans-serif'; ctx.font = '24px sans-serif';
@@ -162,95 +151,86 @@ Page({
ctx.fillText(l1, infoX, y); ctx.fillText(l1, infoX, y);
ctx.fillStyle = '#2D2925'; ctx.fillStyle = '#2D2925';
ctx.font = '600 26px sans-serif'; ctx.font = '600 26px sans-serif';
const w1 = ctx.measureText(v1 || '—').width; ctx.fillText(v1 || '—', infoX + 66, y);
ctx.fillText(v1 || '—', infoX + 62, y); if (l2) {
if (l2 && v2) { const x2 = infoX + 300;
const x2 = infoX + 62 + w1 + 26;
ctx.fillStyle = '#9A8F82'; ctx.fillStyle = '#9A8F82';
ctx.font = '24px sans-serif'; ctx.font = '24px sans-serif';
ctx.fillText(l2, x2, y); ctx.fillText(l2, x2, y);
ctx.fillStyle = '#2D2925'; ctx.fillStyle = '#2D2925';
ctx.font = '600 26px sans-serif'; 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.breed, '毛色', c.color);
pair('性别', c.gender, '品种', c.breed); pair('出生', c.birthday, '星座', c.zodiac);
line('出生', c.birthday); pair('体重', c.weight, '', '');
pair('星座', c.zodiac, '体重', c.weight);
line('介绍', c.intro);
// 身份 ID：虚线 + 号 // 性格标签 chips
const idY = pad + 344; const tags = (c.personality || '').split(',').filter(Boolean);
ctx.strokeStyle = 'rgba(122,74,8,.22)'; if (tags.length) {
ctx.lineWidth = 1; let tx = infoX;
ctx.setLineDash([6, 6]); const ty = y + 8;
ctx.beginPath(); tags.forEach((t) => {
ctx.moveTo(pad + 34, idY); ctx.font = '22px sans-serif';
ctx.lineTo(W - pad - 34, idY); const tw = ctx.measureText(t).width + 28;
ctx.stroke(); ctx.fillStyle = 'rgba(245,169,71,.2)';
ctx.setLineDash([]); this.roundRect(ctx, tx, ty - 26, tw, 36, 18);
ctx.textAlign = 'left'; ctx.fill();
ctx.font = '22px sans-serif'; ctx.fillStyle = '#A96500';
ctx.fillStyle = '#9A8F82'; ctx.textAlign = 'left';
ctx.fillText('身份 ID', pad + 34, idY + 34); ctx.fillText(t, tx + 14, ty);
ctx.font = '600 26px sans-serif'; tx += tw + 12;
ctx.fillStyle = '#2D2925'; });
ctx.fillText(c.id_no || '', pad + 34 + 90, idY + 34); }
// ── 下半张：证件标题 + 小程序码 ── // ═══ 照护信息 ═══
const botY = topH + 12; const s2Y = s1Y + s1H + 14, s2H = 290;
const botH = H - botY - pad; this.roundRect(ctx, pad, s2Y, cardW, s2H, 28);
const g2 = ctx.createLinearGradient(pad, botY, W - pad, botY + botH); ctx.fillStyle = '#FFFFFF';
g2.addColorStop(0, '#E8F0FF');
g2.addColorStop(1, '#F0E8FF');
this.roundRect(ctx, pad, botY, cardW, botH, 28);
ctx.fillStyle = g2;
ctx.fill(); 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.textAlign = 'left';
ctx.fillStyle = '#7D89A8'; ctx.fillStyle = '#7D89A8';
ctx.font = '22px sans-serif'; ctx.font = '22px sans-serif';
ctx.fillText('宠 星 人 地 球 移 民', pad + 40, botY + 60); ctx.fillText('宠 星 人 地 球 移 民', pad + 40, s3Y + 50);
ctx.fillStyle = '#4A5878'; ctx.fillStyle = '#4A5878';
ctx.font = '700 52px sans-serif'; ctx.font = '700 48px sans-serif';
ctx.fillText('居民身份卡', pad + 40, botY + 128); ctx.fillText('居民身份卡', pad + 40, s3Y + 112);
ctx.fillStyle = '#8A93A8'; ctx.fillStyle = '#8A93A8';
ctx.font = '22px sans-serif'; ctx.font = '22px sans-serif';
ctx.fillText('签发机构　肉垫计划', pad + 40, botY + 180); ctx.fillText('身份 ID　' + (c.id_no || ''), pad + 40, s3Y + 156);
ctx.fillText('有效期限　' + (c.validity || '永久有效'), pad + 40, botY + 214); ctx.fillText('签发机构　' + (c.org || '肉垫计划'), pad + 40, s3Y + 190);
ctx.fillText('有效期限　' + (c.validity || '永久有效'), pad + 40, s3Y + 224);
// 官方认证印章（装饰）：淡棕红、旋一点角度，像盖上去的 // 小程序码
ctx.save(); const qrD = 118, qrX = W - pad - 36 - qrD, qrY = s3Y + s3H - 36 - qrD;
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;
ctx.fillStyle = '#fff'; ctx.fillStyle = '#fff';
this.roundRect(ctx, qrX, qrY, qrD, qrD, 12); this.roundRect(ctx, qrX, qrY, qrD, qrD, 12);
ctx.fill(); ctx.fill();
@@ -285,6 +265,29 @@ Page({
ctx.closePath(); 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() { onSave() {
if (!this.data.cardImg) return wx.showToast({ title: '还在生成，稍等一下', icon: 'none' }); if (!this.data.cardImg) return wx.showToast({ title: '还在生成，稍等一下', icon: 'none' });
if (this.data.saving) return; if (this.data.saving) return;
pets-fe/pages/idcard/idcard.wxml
+8
View File
@@ -8,6 +8,14 @@
<view wx:else class="ic-loading">正在生成身份卡…</view> <view wx:else class="ic-loading">正在生成身份卡…</view>
</view> </view>
<!-- 手机号没验证时，引导用微信一键验证，用于背面「联系电话」和走失联系 -->
<view wx:if="{{card && !card.phone}}" class="ic-tip ic-phone-tip">
<text>背面「联系电话」还没验证，走失时联系不到你</text>
<button class="btn btn-soft ic-phone-btn" open-type="getPhoneNumber" bindgetphonenumber="onGetPhone">
<pt-icon name="user" size="{{28}}"></pt-icon>用微信验证手机号
</button>
</view>
<view wx:if="{{!qrReady}}" class="ic-tip"> <view wx:if="{{!qrReady}}" class="ic-tip">
小程序码要在小程序发布后才会出现，现在先放一个占位。 小程序码要在小程序发布后才会出现，现在先放一个占位。
</view> </view>
pets-fe/pages/idcard/idcard.wxss
+4
View File
@@ -19,3 +19,7 @@ button.ic-btn::after{border:none}
/* 离屏 canvas：挪出可视区，只用来生成图 */ /* 离屏 canvas：挪出可视区，只用来生成图 */
.ic-canvas{position:fixed;left:-9999rpx;top:0;width:620px;height:760px} .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)}
pets-fe/pages/petform/petform.wxml
-3
View File
@@ -78,9 +78,6 @@
<view wx:for="{{personaTags}}" wx:key="*this" class="option {{personaSel[item] ? 'selected' : ''}}" <view wx:for="{{personaTags}}" wx:key="*this" class="option {{personaSel[item] ? 'selected' : ''}}"
data-v="{{item}}" bindtap="togglePersona">{{item}}</view> data-v="{{item}}" bindtap="togglePersona">{{item}}</view>
</view></view> </view></view>
<view class="field"><label>过敏情况</label>
<input class="input" placeholder="没有就填「无」" placeholder-class="placeholder"
value="{{form.allergy}}" maxlength="32" bindinput="onAllergy"/></view>
<view class="field"><label>备注（身份卡背面显示）</label> <view class="field"><label>备注（身份卡背面显示）</label>
<textarea class="textarea" placeholder="如：肠胃敏感，请勿喂陌生食物" placeholder-class="placeholder" <textarea class="textarea" placeholder="如：肠胃敏感，请勿喂陌生食物" placeholder-class="placeholder"
value="{{form.notes}}" maxlength="80" bindinput="onNotes"></textarea></view> value="{{form.notes}}" maxlength="80" bindinput="onNotes"></textarea></view>
pets-fe/utils/api.js
+1
View File
@@ -42,6 +42,7 @@ const api = {
// 用户 // 用户
getProfile: () => request({ url: '/api/user/profile' }), 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 }), updateProfile: (body) => request({ url: '/api/user/profile', method: 'PUT', data: body }),
// 用户 // 用户