sundynix-pets/pets-fe/pages/idcard/idcard.js

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 || '', // 用画好的卡当分享封面
    };
  },
});