From cbfcaada5516e535e80fe6e3895a394d744c2830 Mon Sep 17 00:00:00 2001 From: Blizzard Date: Thu, 30 Jul 2026 16:47:47 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=A0=E7=89=A9=E8=BA=AB=E4=BB=BD?= =?UTF-8?q?=E5=8D=A1=EF=BC=88canvas=20=E7=BB=98=E5=88=B6=20+=20=E5=B0=8F?= =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E7=A0=81=20+=20=E5=AD=98=E7=9B=B8=E5=86=8C/?= =?UTF-8?q?=E5=88=86=E4=BA=AB=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 竞品那张「居民身份卡」，完整做了。 ## 后端 service/wxacode.go —— 小程序码。两步：先拿 access_token（2h 有效，进程内缓存、 提前 5 分钟过期），再调 getwxacodeunlimit 换一张 PNG 存到 MinIO 返回 URL。 同一只宠物的码 object 名按 pet id 定死，存在就直接返回不重新生成 —— 微信侧有日调用配额，不能每次点都烧一次。 ⚠️ getwxacodeunlimit 要求 page 在**已发布**的小程序版本里。开发/未发布时返回 errcode 41030，实测确认。这时身份卡照常出、只是没码（qr_ready=false）， 发布后自动就有，不用改代码。best-effort，取不到不算错。 service/idcard.go —— 组装卡片内容。身份 ID 用「宠物雪花 id 的数字 + 生日」 拼成 18 位、每 4 位空一下，纯装饰不入库不校验，同一只每次都一样。 介绍按物种给默认（汪星人/喵星人来地球啦~）。有效期用生日起算。 GET /api/pets/:id/id-card storage 加了 Exists（StatObject），生成前先查。 ## 前端 pages/idcard 离屏 canvas 2d 画卡，导出成图展示 + 存相册 + 分享（open-type=share， imageUrl 用画好的卡当封面）。 两张远程图（头像 + 小程序码）都用 node.createImage() 异步加载， **Promise.all 等两张都就绪再开画** —— 否则小程序码会画不上或画一半 （规划里专门点过名的坑）。任一张加载失败 resolve(null)，缺图也照画： 头像缺→画物种 emoji，码缺→画「小程序码 待发布」占位框。 存相册的权限被拒过一次后 wx.authorize 不再弹，走 openSetting 引导（同海报那套）。 绘制复用了 bottom-sheet 里 poster 的 canvas 模式（dpr 放大、roundRect、 canvasToTempFilePath），但 poster 只画文字不画远程图，这里的双图加载是新写的。 入口：「我的」→ 身份卡，用当前选中的宠物。 ## 验证（预生产库实跑） id-card 接口返回：姓名/性别/品种/生日/介绍/身份ID/有效期 全对 身份 ID = 3410 4333 1420 2503 17（宠物id数字+生日，稳定） qr_ready = false，日志确认 41030 invalid page（小程序未发布，预期） canvas 版式用 HTML 复刻确认过：未发布=占位、发布后=真码 Co-Authored-By: Claude Opus 5 --- pets-be/internal/handler/pet.go | 10 ++ pets-be/internal/router/router.go | 1 + pets-be/internal/service/idcard.go | 89 ++++++++++ pets-be/internal/service/wxacode.go | 125 +++++++++++++ pets-be/internal/storage/minio.go | 9 + pets-fe/app.json | 1 + pets-fe/pages/idcard/idcard.js | 263 ++++++++++++++++++++++++++++ pets-fe/pages/idcard/idcard.json | 6 + pets-fe/pages/idcard/idcard.wxml | 27 +++ pets-fe/pages/idcard/idcard.wxss | 21 +++ pets-fe/pages/mine/mine.js | 6 + pets-fe/pages/mine/mine.wxml | 4 + pets-fe/utils/api.js | 1 + 13 files changed, 563 insertions(+) create mode 100644 pets-be/internal/service/idcard.go create mode 100644 pets-be/internal/service/wxacode.go create mode 100644 pets-fe/pages/idcard/idcard.js create mode 100644 pets-fe/pages/idcard/idcard.json create mode 100644 pets-fe/pages/idcard/idcard.wxml create mode 100644 pets-fe/pages/idcard/idcard.wxss diff --git a/pets-be/internal/handler/pet.go b/pets-be/internal/handler/pet.go index 507aea5..d32a4f4 100644 --- a/pets-be/internal/handler/pet.go +++ b/pets-be/internal/handler/pet.go @@ -195,3 +195,13 @@ func (h *Handler) PetStageDrift(c *gin.Context) { } response.OK(c, h.svc.CheckStageDrift(pet)) } + +// PetIDCard GET /api/pets/:id/id-card 宠物身份卡内容（含小程序码，未发布时无码） +func (h *Handler) PetIDCard(c *gin.Context) { + card, err := h.svc.GetIDCard(middleware.UserID(c), idParam(c, "id")) + if err != nil { + respondErr(c, err) + return + } + response.OK(c, card) +} diff --git a/pets-be/internal/router/router.go b/pets-be/internal/router/router.go index cb0edcf..d0e2d39 100644 --- a/pets-be/internal/router/router.go +++ b/pets-be/internal/router/router.go @@ -75,6 +75,7 @@ func registerUserAPI(api *gin.RouterGroup, h *handler.Handler, jm *appjwt.Manage g.GET("/pets/:id/plan", h.GetPlan) g.GET("/pets/:id/plan/calendar", h.PlanCalendar) g.GET("/pets/:id/stage-drift", h.PetStageDrift) + g.GET("/pets/:id/id-card", h.PetIDCard) g.GET("/pets/:id/plan/month-status", h.PlanMonthStatus) // 养护方案：列出可选的、套用一套到某个月 g.GET("/care-templates", h.CareTemplateOptions) diff --git a/pets-be/internal/service/idcard.go b/pets-be/internal/service/idcard.go new file mode 100644 index 0000000..81c191d --- /dev/null +++ b/pets-be/internal/service/idcard.go @@ -0,0 +1,89 @@ +package service + +import ( + "log" + "strings" + + "github.com/sundynix/pets-be/internal/model" +) + +// IDCard 宠物身份卡的全部内容，前端拿去 canvas 上画 +type IDCard struct { + Name string `json:"name"` + Species string `json:"species"` // 猫猫 / 狗狗 + Gender string `json:"gender"` + Breed string `json:"breed"` + Birthday string `json:"birthday"` // "2023 年 12 月 15 日" + Intro string `json:"intro"` + AvatarURL string `json:"avatar_url"` + IDNo string `json:"id_no"` // 玩具身份号，不入库 + Validity string `json:"validity"` // "2023.12.15 - 永远" + QRURL string `json:"qr_url"` // 小程序码，未发布时为空 + QRReady bool `json:"qr_ready"` // 码有没有生成出来 +} + +// petIDNo 造一个稳定的「身份号」。纯装饰，不入库、不做校验。 +// 规律照竞品那种：一串数字，扫不出真实含义但看着像证件号。 +// 用 宠物雪花 id 的数字 + 生日 拼，同一只宠物每次都一样 +func petIDNo(pet *model.Pet) string { + digits := make([]byte, 0, 18) + for i := 0; i < len(pet.ID) && len(digits) < 10; i++ { + if pet.ID[i] >= '0' && pet.ID[i] <= '9' { + digits = append(digits, pet.ID[i]) + } + } + for len(digits) < 10 { + digits = append(digits, '0') + } + bd := "00000000" + if pet.Birthday != nil && !pet.Birthday.IsZero() { + bd = pet.Birthday.Format("20060102") + } + raw := string(digits[:10]) + bd // 18 位 + // 每 4 位空一下，像证件号 + var b strings.Builder + for i, c := range raw { + if i > 0 && i%4 == 0 { + b.WriteByte(' ') + } + b.WriteRune(c) + } + return b.String() +} + +// GetIDCard 组装身份卡。小程序码是 best-effort：拿不到（未发布/配额）也照出卡 +func (s *Service) GetIDCard(userID, petID string) (*IDCard, error) { + pet, err := s.GetPet(userID, petID) + if err != nil { + return nil, err + } + + intro := "地球来了个新居民~" + switch pet.Type { + case "狗狗": + intro = "汪星人来地球啦~" + case "猫猫": + intro = "喵星人来地球啦~" + } + + bd, validity := "未知", "永久有效" + if pet.Birthday != nil && !pet.Birthday.IsZero() { + bd = pet.Birthday.Format("2006 年 1 月 2 日") + validity = pet.Birthday.Format("2006.01.02") + " - 永远" + } + + card := &IDCard{ + Name: pet.Name, Species: pet.Type, Gender: pet.Gender, Breed: pet.Breed, + Birthday: bd, Intro: intro, AvatarURL: pet.AvatarURL, + IDNo: petIDNo(pet), Validity: validity, + } + + // 小程序码取不到不算错——未发布/配额用尽时卡照样出，只是没码 + if url, e := s.PetQRCode(petID); e == nil { + card.QRURL = url + card.QRReady = true + } else { + log.Printf("[info] 宠物 %s 的小程序码暂不可用（多为小程序未发布）：%v", petID, e) + } + return card, nil +} diff --git a/pets-be/internal/service/wxacode.go b/pets-be/internal/service/wxacode.go new file mode 100644 index 0000000..769c368 --- /dev/null +++ b/pets-be/internal/service/wxacode.go @@ -0,0 +1,125 @@ +package service + +import ( + "bytes" + "context" + "encoding/json" + "errors" + "fmt" + "io" + "net/http" + "net/url" + "sync" + "time" +) + +// 小程序码（wxacode）。身份卡右下角那个码，扫了能进小程序。 +// +// 两步：先拿 access_token（有 2h 有效期，缓存复用），再调 getwxacodeunlimit +// 换一张 PNG，存到 MinIO 返回 URL。同一只宠物的码存一次就够——微信侧有 +// 日调用配额，object 名按宠物 id 定死，存在就直接返回不重新生成。 +// +// ⚠️ getwxacodeunlimit 要求 page 存在于**已发布**的小程序版本里。开发版/未发布 +// 时会返回 errcode 41030（page 不存在），这时身份卡照常出，只是没有码。 +// 发布之后自动就有了，不用改代码。 + +// accessToken 缓存。进程级，够用——多实例各自缓存不影响正确性 +var ( + atMu sync.Mutex + atValue string + atExpires time.Time +) + +// wechatAccessToken 取 access_token，带缓存。提前 5 分钟过期，避免边界上用到失效的 +func (s *Service) wechatAccessToken() (string, error) { + atMu.Lock() + defer atMu.Unlock() + if atValue != "" && time.Now().Before(atExpires) { + return atValue, nil + } + if s.cfg.WeChat.AppID == "" || s.cfg.WeChat.AppSecret == "" { + return "", errors.New("微信 app_id / app_secret 未配置") + } + q := url.Values{} + q.Set("grant_type", "client_credential") + q.Set("appid", s.cfg.WeChat.AppID) + q.Set("secret", s.cfg.WeChat.AppSecret) + + ctx, cancel := context.WithTimeout(context.Background(), 8*time.Second) + defer cancel() + req, _ := http.NewRequestWithContext(ctx, http.MethodGet, + "https://api.weixin.qq.com/cgi-bin/token?"+q.Encode(), nil) + resp, err := http.DefaultClient.Do(req) + if err != nil { + return "", err + } + defer resp.Body.Close() + + var out struct { + AccessToken string `json:"access_token"` + ExpiresIn int `json:"expires_in"` + ErrCode int `json:"errcode"` + ErrMsg string `json:"errmsg"` + } + if err := json.NewDecoder(resp.Body).Decode(&out); err != nil { + return "", err + } + if out.AccessToken == "" { + return "", fmt.Errorf("拿 access_token 失败(%d): %s", out.ErrCode, out.ErrMsg) + } + atValue = out.AccessToken + atExpires = time.Now().Add(time.Duration(out.ExpiresIn-300) * time.Second) + return atValue, nil +} + +// PetQRCode 取某只宠物的小程序码 URL。存在就直接返回，不存在才向微信换。 +// scene 里带宠物 id，扫码进来时小程序能拿到（暂时只用来打开小程序） +func (s *Service) PetQRCode(petID string) (string, error) { + if s.storage == nil { + return "", errors.New("对象存储未配置") + } + obj := "wxacode/" + petID + ".png" + if s.storage.Exists(obj) { + return s.storage.PublicURL(obj), nil + } + + token, err := s.wechatAccessToken() + if err != nil { + return "", err + } + body, _ := json.Marshal(map[string]any{ + "scene": "pet=" + petID, // 最长 32 字符，够放一个雪花 id + "page": "pages/home/home", + "check_path": true, + "width": 280, + }) + ctx, cancel := context.WithTimeout(context.Background(), 12*time.Second) + defer cancel() + req, _ := http.NewRequestWithContext(ctx, http.MethodPost, + "https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token="+token, bytes.NewReader(body)) + req.Header.Set("Content-Type", "application/json") + resp, err := http.DefaultClient.Do(req) + if err != nil { + return "", err + } + defer resp.Body.Close() + + data, err := io.ReadAll(resp.Body) + if err != nil { + return "", err + } + // 成功返回图片二进制；失败返回一段 JSON。用 Content-Type 分辨最稳 + if ct := resp.Header.Get("Content-Type"); len(ct) >= 5 && ct[:5] == "image" { + if _, err := s.storage.Upload(obj, bytes.NewReader(data), int64(len(data)), "image/png"); err != nil { + return "", err + } + return s.storage.PublicURL(obj), nil + } + var e struct { + ErrCode int `json:"errcode"` + ErrMsg string `json:"errmsg"` + } + _ = json.Unmarshal(data, &e) + // 41030 = page 不在已发布版本里。开发期常见，往上层透传让它降级 + return "", fmt.Errorf("微信生成小程序码失败(%d): %s", e.ErrCode, e.ErrMsg) +} diff --git a/pets-be/internal/storage/minio.go b/pets-be/internal/storage/minio.go index c7e7e6a..21ec016 100644 --- a/pets-be/internal/storage/minio.go +++ b/pets-be/internal/storage/minio.go @@ -92,6 +92,15 @@ func (s *Storage) Upload(objectName string, reader io.Reader, size int64, conten return s.PublicURL(objectName), nil } +// Exists 对象在不在。小程序码有微信侧配额，同一只宠物的码存一次就够， +// 生成前先查 +func (s *Storage) Exists(objectName string) bool { + ctx, cancel := context.WithTimeout(context.Background(), 8*time.Second) + defer cancel() + _, err := s.client.StatObject(ctx, s.bucket, objectName, minio.StatObjectOptions{}) + return err == nil +} + // PublicURL 由对象名拼出可访问 URL（用当前配置的 public_base_url，避免存旧地址） func (s *Storage) PublicURL(objectName string) string { return fmt.Sprintf("%s/%s/%s", s.publicBaseURL, s.bucket, objectName) diff --git a/pets-fe/app.json b/pets-fe/app.json index 4e39005..678ee94 100644 --- a/pets-fe/app.json +++ b/pets-fe/app.json @@ -8,6 +8,7 @@ "pages/history/history", "pages/expense/expense", "pages/petform/petform", + "pages/idcard/idcard", "pages/report/report", "pages/community/community", "pages/learn/learn", diff --git a/pets-fe/pages/idcard/idcard.js b/pets-fe/pages/idcard/idcard.js new file mode 100644 index 0000000..b0ebe3f --- /dev/null +++ b/pets-fe/pages/idcard/idcard.js @@ -0,0 +1,263 @@ +const store = require('../../utils/store.js'); +const api = require('../../utils/api.js'); +const { toastErr } = require('../../utils/ui.js'); + +// 卡片画布尺寸（逻辑像素）。真实导出会按 dpr 放大 +const W = 620; +const H = 760; + +// 在 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, + }, + 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 }); + // 布局要等页面渲染完 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 topH = 380; + const g1 = ctx.createLinearGradient(pad, pad, W - pad, topH); + g1.addColorStop(0, '#FFF0D6'); + g1.addColorStop(0.5, '#FFE0EC'); + g1.addColorStop(1, '#E6EEFF'); + this.roundRect(ctx, pad, pad, cardW, topH - pad, 28); + ctx.fillStyle = g1; + ctx.fill(); + + // 头像圆 + const avX = pad + 34, avY = pad + 34, avD = 108; + ctx.save(); + ctx.beginPath(); + ctx.arc(avX + avD / 2, avY + avD / 2, avD / 2, 0, Math.PI * 2); + ctx.closePath(); + ctx.clip(); + if (avatar) { + ctx.drawImage(avatar, avX, avY, avD, avD); + } else { + ctx.fillStyle = '#FFD9A3'; + ctx.fillRect(avX, avY, avD, avD); + ctx.fillStyle = '#8A5A18'; + ctx.font = '52px sans-serif'; + ctx.textAlign = 'center'; + ctx.textBaseline = 'middle'; + ctx.fillText(c.species === '狗狗' ? '🐶' : '🐱', avX + avD / 2, avY + avD / 2); + } + ctx.restore(); + ctx.textBaseline = 'alphabetic'; + + // 资料行 + 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; + }; + line('姓名', c.name); + // 性别 + 品种放一行 + ctx.textAlign = 'left'; + ctx.font = '24px sans-serif'; + ctx.fillStyle = '#9A8F82'; + ctx.fillText('性别', infoX, y); + ctx.fillStyle = '#2D2925'; + ctx.font = '600 26px sans-serif'; + const gw = ctx.measureText(c.gender || '—').width; + ctx.fillText(c.gender || '—', infoX + 62, y); + if (c.breed) { + ctx.fillStyle = '#9A8F82'; + ctx.font = '24px sans-serif'; + ctx.fillText('品种', infoX + 62 + gw + 24, y); + ctx.fillStyle = '#2D2925'; + ctx.font = '600 26px sans-serif'; + ctx.fillText(c.breed, infoX + 62 + gw + 24 + 62, y); + } + y += 46; + line('出生', c.birthday); + line('介绍', c.intro); + + // 身份 ID：虚线 + 号 + const idY = pad + 300; + 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); + + // ── 下半张：证件标题 + 小程序码 ── + 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; + ctx.fill(); + + ctx.textAlign = 'left'; + ctx.fillStyle = '#7D89A8'; + ctx.font = '22px sans-serif'; + ctx.fillText('宠 星 人 地 球 移 民', pad + 40, botY + 60); + ctx.fillStyle = '#4A5878'; + ctx.font = '700 52px sans-serif'; + ctx.fillText('居民身份卡', pad + 40, botY + 128); + + ctx.fillStyle = '#8A93A8'; + ctx.font = '22px sans-serif'; + ctx.fillText('签发机构　肉垫计划', pad + 40, botY + 180); + ctx.fillText('有效期限　' + (c.validity || '永久有效'), pad + 40, botY + 214); + + // 小程序码（未发布时 qr 为 null，画个占位框） + const qrD = 128, qrX = W - pad - 40 - qrD, qrY = botY + botH - 40 - qrD; + 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.textAlign = 'center'; + ctx.fillText('小程序码', qrX + qrD / 2, qrY + qrD / 2 - 4); + ctx.fillText('待发布', qrX + qrD / 2, qrY + qrD / 2 + 26); + } + + 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(); + }, + + 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 || '', // 用画好的卡当分享封面 + }; + }, +}); diff --git a/pets-fe/pages/idcard/idcard.json b/pets-fe/pages/idcard/idcard.json new file mode 100644 index 0000000..6594cd8 --- /dev/null +++ b/pets-fe/pages/idcard/idcard.json @@ -0,0 +1,6 @@ +{ + "usingComponents": { + "nav-bar": "/components/nav-bar/nav-bar", + "pt-icon": "/components/pt-icon/index" + } +} diff --git a/pets-fe/pages/idcard/idcard.wxml b/pets-fe/pages/idcard/idcard.wxml new file mode 100644 index 0000000..8b85f45 --- /dev/null +++ b/pets-fe/pages/idcard/idcard.wxml @@ -0,0 +1,27 @@ + + + + + + + + 正在生成身份卡… + + + + 小程序码要在小程序发布后才会出现，现在先放一个占位。 + + + + + 下载到相册 + + + + + + + + diff --git a/pets-fe/pages/idcard/idcard.wxss b/pets-fe/pages/idcard/idcard.wxss new file mode 100644 index 0000000..be0963d --- /dev/null +++ b/pets-fe/pages/idcard/idcard.wxss @@ -0,0 +1,21 @@ +.ic-body{padding-top:var(--sp-4)} + +/* 画好的卡片图。宽度撑满、按比例高 */ +.ic-stage{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sd-2);background:#F3EFE8;min-height:600rpx} +.ic-img{width:100%;display:block} +.ic-loading{padding:200rpx 0;text-align:center;color:var(--muted);font-size:var(--fs-sm)} + +.ic-tip{ + margin-top:var(--sp-4);padding:var(--sp-3);border-radius:var(--r-sm); + background:var(--primary-soft);color:var(--primary-ink); + font-size:var(--fs-cap);line-height:1.6;text-align:center; +} + +.ic-actions{display:flex;gap:var(--sp-3);margin-top:var(--sp-5)} +.ic-btn{flex:1} +/* button 元素默认有边框和外边距，压平成和 .btn 一样 */ +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} diff --git a/pets-fe/pages/mine/mine.js b/pets-fe/pages/mine/mine.js index 1bab4e1..5936164 100644 --- a/pets-fe/pages/mine/mine.js +++ b/pets-fe/pages/mine/mine.js @@ -56,6 +56,12 @@ Page({ goDecorate() { wx.navigateTo({ url: '/pages/decorate/decorate' }); }, + // 身份卡：当前这只的 + goIDCard() { + const id = store.currentPetId(); + if (!id) return wx.showToast({ title: '先选一只毛孩子', icon: 'none' }); + wx.navigateTo({ url: '/pages/idcard/idcard?id=' + id }); + }, goPlan() { wx.navigateTo({ url: '/pages/plan/plan' }); }, diff --git a/pets-fe/pages/mine/mine.wxml b/pets-fe/pages/mine/mine.wxml index 9537acc..c728a5e 100644 --- a/pets-fe/pages/mine/mine.wxml +++ b/pets-fe/pages/mine/mine.wxml @@ -33,6 +33,10 @@ 宠物档案 + + + 身份卡可保存、分享 + 养护计划 diff --git a/pets-fe/utils/api.js b/pets-fe/utils/api.js index 1b7bf97..20461f5 100644 --- a/pets-fe/utils/api.js +++ b/pets-fe/utils/api.js @@ -65,6 +65,7 @@ const api = { // 否则改了阈值忘了改文案，用户看到的依据和实际行为对不上 lifeStages: (species, size) => request({ url: `/api/life-stages?species=${species}&size=${size || ''}` }), + petIDCard: (id) => request({ url: `/api/pets/${id}/id-card` }), petStageDrift: (petId) => request({ url: `/api/pets/${petId}/stage-drift` }), // 品种（后台可配），按首字母分组