Add one-way task completion and exportable pet identity cards

pets-fe/app.wxss

@@ -3,7 +3,8 @@ page {
   overflow: hidden;
   background: #fff9f3;
   color: #604a40;
-  font-family: ui-rounded, "Hiragino Maru Gothic ProN", "PingFang SC", sans-serif;
+  font-family:
+    ui-rounded, "Hiragino Maru Gothic ProN", "PingFang SC", sans-serif;
   font-size: 28rpx;
   line-height: 1.5;
 }
@@ -112,3 +113,43 @@ button::after {
 .field textarea {
   height: 170rpx;
 }
+
+.completion-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18rpx;
+  margin: 8rpx 0 20rpx;
+  font-size: 23rpx;
+  color: #886c5f;
+}
+.finish-all {
+  margin: 0;
+  padding: 12rpx 22rpx;
+  background: #fff0e2;
+  color: #b95738;
+  font-size: 24rpx;
+  line-height: 1.4;
+  border-radius: 99rpx;
+}
+.all-done {
+  color: #b95738;
+}
+.task-completed .check {
+  animation: completion-pop 0.35s ease-out;
+}
+.task-completed .task-name,
+.task-completed .info strong {
+  color: #9d8779;
+}
+@keyframes completion-pop {
+  0% {
+    transform: scale(0.7);
+  }
+  60% {
+    transform: scale(1.18);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

pets-fe/components/pet-id-card/index.js

@@ -0,0 +1,42 @@
+const { profile, renderCard, saveToAlbum } = require("../../utils/pet-card");
+const { toast } = require("../../utils/api");
+Component({
+  properties: { pet: { type: Object, value: {} } },
+  data: { card: {}, saving: false },
+  observers: {
+    pet(value) {
+      this.setData({ card: profile(value || {}) });
+    },
+  },
+  methods: {
+    edit() {
+      this.triggerEvent("edit", { id: this.data.pet.id });
+    },
+    async generate() {
+      const canvas = await new Promise((resolve, reject) =>
+        this.createSelectorQuery()
+          .select("#card-canvas")
+          .fields({ node: true, size: true })
+          .exec((result) =>
+            result[0] && result[0].node
+              ? resolve(result[0].node)
+              : reject(new Error("卡片还未准备好，请重试")),
+          ),
+      );
+      return renderCard(canvas, this.data.pet);
+    },
+    async save() {
+      if (this.data.saving) return;
+      this.setData({ saving: true });
+      try {
+        const path = await this.generate();
+        if (await saveToAlbum(path))
+          wx.showToast({ title: "身份卡已保存到相册", icon: "success" });
+      } catch (error) {
+        toast(error);
+      } finally {
+        this.setData({ saving: false });
+      }
+    },
+  },
+});

pets-fe/components/pet-id-card/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": { "app-icon": "/components/app-icon/index" }
+}

pets-fe/components/pet-id-card/index.wxml

@@ -0,0 +1,10 @@
+<view class="identity">
+  <view class="id-top"><view class="brand"><image src="/assets/logo-corgi-v2.png" /><view><text class="brand-name">肉垫计划</text><text class="brand-en">PAWPRINT ID</text></view></view><text class="id-title">毛孩身份卡</text></view>
+  <view class="id-body" bindtap="edit" aria-role="button" aria-label="编辑宠物档案">
+    <view class="portrait"><image wx:if="{{card.avatar_url}}" src="{{card.avatar_url}}" mode="aspectFill" /><app-icon wx:else size="80" color="#d18b67" /></view>
+    <view class="details"><text class="pet-name">{{card.name}}</text><text class="breed">{{card.breed||'品种未填写'}} · {{card.genderLabel}}</text><view class="facts"><view><text class="label">生日</text><text class="value">{{card.birthday}}</text></view><view><text class="label">体重</text><text class="value">{{card.weightLabel}}</text></view></view><view class="coat"><text class="label">毛色</text><text class="value">{{card.coat||'未填写'}}</text></view></view>
+  </view>
+  <view class="id-bottom"><view><text class="label">陪伴编号</text><text class="number">{{card.cardNumber}}</text></view><text class="motto">把陪伴，认真记下来</text></view>
+</view>
+<view class="card-actions"><button bindtap="edit">编辑档案</button><button class="save" bindtap="save" loading="{{saving}}" disabled="{{saving}}">{{saving?'正在生成…':'保存身份卡'}}</button></view>
+<canvas type="2d" id="card-canvas" class="export-canvas" />

pets-fe/components/pet-id-card/index.wxss

@@ -0,0 +1,164 @@
+:host {
+  display: block;
+  margin-bottom: 30rpx;
+}
+.identity {
+  position: relative;
+  overflow: hidden;
+  border-radius: 28rpx;
+  border: 1rpx solid #ead8ca;
+  padding: 25rpx;
+  background: linear-gradient(125deg, #fff3e5, #f0e9f8);
+  box-shadow: 0 14rpx 35rpx #79543a0b;
+  color: #604a40;
+}
+.id-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 20rpx;
+  border-bottom: 1rpx solid #dfcdbf;
+}
+.brand {
+  display: flex;
+  gap: 9rpx;
+  align-items: center;
+}
+.brand image {
+  width: 44rpx;
+  height: 44rpx;
+}
+.brand-name,
+.brand-en {
+  display: block;
+}
+.brand-name {
+  font-size: 18rpx;
+  font-weight: 600;
+  color: #795a4b;
+}
+.brand-en {
+  font-size: 11rpx;
+  letter-spacing: 2rpx;
+  color: #a48d7e;
+}
+.id-title {
+  font-size: 23rpx;
+  letter-spacing: 3rpx;
+  font-weight: 600;
+}
+.id-body {
+  display: flex;
+  gap: 24rpx;
+  padding: 24rpx 0;
+}
+.portrait {
+  width: 166rpx;
+  height: 180rpx;
+  flex: none;
+  border: 6rpx solid #fffaf4;
+  border-radius: 18rpx;
+  overflow: hidden;
+  background: #fffaf4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.portrait image {
+  width: 100%;
+  height: 100%;
+}
+.details {
+  flex: 1;
+  min-width: 0;
+}
+.pet-name {
+  display: block;
+  font-size: 34rpx;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.breed {
+  display: block;
+  font-size: 21rpx;
+  color: #886c5f;
+  margin: 2rpx 0 12rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.facts {
+  display: flex;
+  gap: 22rpx;
+}
+.facts > view {
+  flex: 1;
+  min-width: 0;
+}
+.label {
+  display: block;
+  font-size: 17rpx;
+  color: #a48d7e;
+}
+.value {
+  display: block;
+  font-size: 21rpx;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.coat {
+  margin-top: 9rpx;
+}
+.id-bottom {
+  border-top: 1rpx solid #dfcdbf;
+  padding-top: 15rpx;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 10rpx;
+}
+.number {
+  display: block;
+  font-size: 18rpx;
+  letter-spacing: 1rpx;
+  color: #795a4b;
+}
+.motto {
+  font-size: 16rpx;
+  color: #886c5f;
+  max-width: 200rpx;
+  text-align: right;
+}
+.card-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16rpx;
+  margin-top: 12rpx;
+}
+.card-actions button {
+  margin: 0;
+  padding: 9rpx 20rpx;
+  border: 1rpx solid #ead8ca;
+  border-radius: 99rpx;
+  background: #fffaf4;
+  color: #886c5f;
+  font-size: 22rpx;
+  line-height: 1.5;
+}
+.card-actions .save {
+  background: #fff0e2;
+  color: #b95738;
+  border-color: #f1d6c4;
+}
+.export-canvas {
+  position: fixed;
+  left: -2000px;
+  top: 0;
+  width: 600px;
+  height: 380px;
+  pointer-events: none;
+}

pets-fe/pages/home/home.js

@@ -1,4 +1,5 @@
-const { secure, toast } = require("../../utils/api");
+const completion = require("../../utils/task-completion");
+const { secure } = require("../../utils/api");
 const { localDate } = require("../../utils/date");
 const environment = require("../../utils/environment");
 function dateLabel() {
@@ -12,6 +13,9 @@ Page({
     pets: [],
     selected: [],
     tasks: [],
+    taskBusyIds: [],
+    completingAll: false,
+    undoneCount: 0,
     walkCount: 0,
     name: "铲屎官",
     loading: true,
@@ -100,6 +104,7 @@ Page({
         pets,
         selected: chosen.filter((id) => pets.some((p) => p.id === id)),
         tasks: tasks.items,
+        undoneCount: tasks.items.filter((t) => !t.completed).length,
         walkCount: walks.filter((w) => w.started_at.slice(0, 7) === month)
           .length,
         name: me.nickname || "毛孩家长",
@@ -138,17 +143,13 @@ Page({
   goWalks() {
     wx.navigateTo({ url: "/pages/walk-records/walk-records" });
   },
-  async complete(e) {
-    const id = e.currentTarget.dataset.id,
-      task = this.data.tasks.find((t) => t.id === id);
-    try {
-      await secure("/tasks/" + id + "/completion", "PUT", {
-        date: localDate(),
-        completed: !task.completed,
-      });
-      await this.load();
-    } catch (err) {
-      toast(err);
-    }
+  complete(e) {
+    return completion.complete(
+      this,
+      this.data.tasks.find((t) => t.id === e.currentTarget.dataset.id),
+    );
+  },
+  completeAll() {
+    return completion.completeAll(this);
   },
 });

pets-fe/pages/home/home.wxml

@@ -70,23 +70,28 @@
     <text class="section-title">今天要做的事</text>
     <text class="link" bindtap="goTasks">全部任务 ›</text>
   </view>
+  <view wx:if="{{tasks.length}}" class="completion-toolbar">
+    <text>{{undoneCount ? '还有 '+undoneCount+' 项小事' : '这一份日常，已全部照顾好'}}</text>
+    <button wx:if="{{undoneCount}}" class="finish-all" bindtap="completeAll" loading="{{completingAll}}" disabled="{{completingAll || taskBusyIds.length}}">一键完成</button>
+    <text wx:else class="all-done">全部完成</text>
+  </view>
   <view class="card tasks">
     <view
       wx:for="{{tasks}}"
       wx:key="id"
-      class="task"
+      class="task {{item.completed?'task-completed':''}}"
       data-id="{{item.id}}"
       bindtap="complete"
     >
       <view class="check {{item.completed?'done':''}}">
-        {{item.completed?'✓':''}}
+        {{item.completed?'✓':taskBusyIds[0]===item.id?'…':''}}
       </view>
       <view class="task-icon">
         <app-icon kind="{{item.category}}" size="36" />
       </view>
       <view class="task-main">
         <text class="task-name">{{item.title}}</text>
-        <text class="muted">{{item.time_of_day}}</text>
+        <text class="muted">{{item.time_of_day}} · {{item.completed?'已完成':taskBusyIds[0]===item.id?'正在记录…':'点击完成'}}</text>
       </view>
     </view>
     <view wx:if="{{!tasks.length}}" class="empty">

pets-fe/pages/pet-edit/pet-edit.wxss

@@ -48,3 +48,25 @@
   font-size: 24rpx;
   margin-top: 20rpx;
 }
+
+.field input {
+  height: 104rpx;
+  min-height: 104rpx;
+  padding: 0 26rpx;
+  line-height: normal;
+}
+.picker {
+  min-height: 104rpx;
+  padding: 30rpx 26rpx;
+}
+.field radio-group {
+  min-height: 104rpx;
+  padding: 26rpx;
+}
+.field textarea {
+  height: 210rpx;
+  padding: 26rpx;
+}
+.field {
+  margin: 28rpx 0;
+}

pets-fe/pages/pets/pets.js

@@ -16,7 +16,7 @@ Page({
   },
   edit(e) {
     wx.navigateTo({
-      url: "/pages/pet-edit/pet-edit?id=" + e.currentTarget.dataset.id,
+      url: "/pages/pet-edit/pet-edit?id=" + e.detail.id,
     });
   },
 });

pets-fe/pages/pets/pets.json

@@ -1,6 +1,7 @@
 {
   "disableScroll": true,
   "usingComponents": {
-    "tab-bar": "/components/tab-bar/index"
+    "tab-bar": "/components/tab-bar/index",
+    "pet-id-card": "/components/pet-id-card/index"
   }
 }

pets-fe/pages/pets/pets.wxml

@@ -11,31 +11,7 @@
     <text class="section-title">宠物档案 · {{pets.length}}</text>
     <text class="add" bindtap="add">＋ 添加</text>
   </view>
-  <view
-    wx:for="{{pets}}"
-    wx:key="id"
-    class="card pet"
-    data-id="{{item.id}}"
-    bindtap="edit"
-  >
-    <view class="pet-avatar">
-      <image
-        wx:if="{{item.avatar_url}}"
-        src="{{item.avatar_url}}"
-        mode="aspectFill"
-      />
-      <app-icon wx:else size="70" />
-    </view>
-    <view class="pet-info">
-      <strong>{{item.name}}</strong>
-      <text>
-        {{item.breed||'小可爱'}} ·
-        {{item.gender==='male'?'男孩':item.gender==='female'?'女孩':'未知'}}
-      </text>
-      <text>体重 {{item.weight_kg||'—'}} kg</text>
-    </view>
-    <text class="arrow">›</text>
-  </view>
+  <pet-id-card wx:for="{{pets}}" wx:key="id" pet="{{item}}" bind:edit="edit" />
   <view wx:if="{{!pets.length}}" class="empty">给第一只狗狗建个档案吧 </view>
   <button class="primary add-button" bindtap="add">＋ 新建宠物档案</button>
 </view>

pets-fe/pages/pets/pets.wxss

@@ -33,43 +33,6 @@
   font-weight: 600;
   color: #b95738;
 }
-.pet {
-  display: flex;
-  align-items: center;
-  gap: 22rpx;
-}
-.pet-avatar {
-  width: 125rpx;
-  height: 125rpx;
-  flex: none;
-  border-radius: 28rpx;
-  background: #f1d2a3;
-  display: grid;
-  place-items: center;
-  font-size: 63rpx;
-  overflow: hidden;
-}
-.pet-avatar image {
-  width: 100%;
-  height: 100%;
-}
-.pet-info {
-  display: flex;
-  flex-direction: column;
-  gap: 6rpx;
-  flex: 1;
-}
-.pet-info strong {
-  font-size: 32rpx;
-}
-.pet-info text {
-  font-size: 23rpx;
-  color: #886c5f;
-}
-.arrow {
-  font-size: 42rpx;
-  color: #886c5f;
-}
 .add-button {
   margin-top: 25rpx;
 }

pets-fe/pages/tasks/tasks.js

@@ -1,9 +1,13 @@
+const completion = require("../../utils/task-completion");
 const { secure, toast } = require("../../utils/api");
 const { localDate, shiftDate } = require("../../utils/date");
 Page({
   data: {
     pets: [],
     tasks: [],
+    taskBusyIds: [],
+    completingAll: false,
+    undoneCount: 0,
     date: localDate(),
     showForm: false,
     editingId: "",
@@ -33,23 +37,21 @@ Page({
       this.setData({
         pets,
         tasks,
+        undoneCount: tasks.filter((t) => !t.completed).length,
         done: tasks.filter((t) => t.completed).length,
       });
     } catch (e) {
       toast(e);
     }
   },
-  async toggle(e) {
-    const t = this.data.tasks[e.currentTarget.dataset.index];
-    try {
-      await secure("/tasks/" + t.id + "/completion", "PUT", {
-        date: this.data.date,
-        completed: !t.completed,
-      });
-      await this.load();
-    } catch (err) {
-      toast(err);
-    }
+  toggle(e) {
+    return completion.complete(
+      this,
+      this.data.tasks[e.currentTarget.dataset.index],
+    );
+  },
+  completeAll() {
+    return completion.completeAll(this);
   },
   open() {
     if (!this.data.pets.length) {
@@ -83,10 +85,14 @@ Page({
     });
   },
   changeDay(e) {
-    this.setData({ date: shiftDate(this.data.date, Number(e.currentTarget.dataset.days)) });
+    if (this.data.completingAll || this.data.taskBusyIds.length) return;
+    this.setData({
+      date: shiftDate(this.data.date, Number(e.currentTarget.dataset.days)),
+    });
     this.load();
   },
   showToday() {
+    if (this.data.completingAll || this.data.taskBusyIds.length) return;
     this.setData({ date: localDate() });
     this.load();
   },
@@ -113,13 +119,17 @@ Page({
     }
     this.setData({ saving: true });
     try {
-      await secure(this.data.editingId ? "/tasks/" + this.data.editingId : "/tasks", this.data.editingId ? "PUT" : "POST", {
-        pet_id: this.data.pets[this.data.petIndex].id,
-        title: this.data.title.trim(),
-        category: this.data.category,
-        time_of_day: this.data.time_of_day,
-        repeat_rule: this.data.repeat_rule,
-      });
+      await secure(
+        this.data.editingId ? "/tasks/" + this.data.editingId : "/tasks",
+        this.data.editingId ? "PUT" : "POST",
+        {
+          pet_id: this.data.pets[this.data.petIndex].id,
+          title: this.data.title.trim(),
+          category: this.data.category,
+          time_of_day: this.data.time_of_day,
+          repeat_rule: this.data.repeat_rule,
+        },
+      );
       this.setData({ showForm: false, editingId: "" });
       await this.load();
     } catch (e) {

pets-fe/pages/tasks/tasks.wxml

@@ -19,14 +19,19 @@
     <text bindtap="showToday">回到今天</text>
     <text data-days="1" bindtap="changeDay">后一天 ›</text>
   </view>
+  <view wx:if="{{tasks.length}}" class="completion-toolbar">
+    <text>{{undoneCount ? '还有 '+undoneCount+' 项小事' : '这一份日常，已全部照顾好'}}</text>
+    <button wx:if="{{undoneCount}}" class="finish-all" bindtap="completeAll" loading="{{completingAll}}" disabled="{{completingAll || taskBusyIds.length}}">一键完成</button>
+    <text wx:else class="all-done">全部完成</text>
+  </view>
   <view class="card list">
-    <view wx:for="{{tasks}}" wx:key="id" class="task">
+    <view wx:for="{{tasks}}" wx:key="id" class="task {{item.completed?'task-completed':''}}">
       <view
         class="check {{item.completed?'done':''}}"
         data-index="{{index}}"
         bindtap="toggle"
       >
-        {{item.completed?'✓':''}}
+        {{item.completed?'✓':taskBusyIds[0]===item.id?'…':''}}
       </view>
       <view class="icon">
         <app-icon kind="{{item.category}}" size="36" />
@@ -37,7 +42,7 @@
           {{item.petName}} · {{item.time_of_day}} ·
           {{item.repeat_rule==='daily'?'每天':item.repeat_rule==='weekdays'?'工作日':'周末'}}
         </text>
-        <text>点此编辑</text>
+        <text>{{item.completed?'已完成 · 点此编辑任务':taskBusyIds[0]===item.id?'正在记录…':'点击左侧完成 · 点此编辑'}}</text>
       </view>
       <text class="remove" data-index="{{index}}" bindtap="remove">×</text>
     </view>

pets-fe/utils/pet-card.js

@@ -0,0 +1,207 @@
+function profile(pet) {
+  return {
+    ...pet,
+    genderLabel:
+      pet.gender === "male"
+        ? "男孩"
+        : pet.gender === "female"
+          ? "女孩"
+          : "未填写",
+    birthday: pet.birth_date ? pet.birth_date.slice(0, 10) : "未填写",
+    weightLabel: pet.weight_kg ? `${pet.weight_kg} kg` : "未填写",
+    cardNumber:
+      "PET-" + (pet.id || "").replace(/-/g, "").slice(0, 12).toUpperCase(),
+  };
+}
+
+function round(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();
+}
+function text(ctx, value, x, y, size, color, width, bold = false) {
+  ctx.font = `${bold ? "600 " : ""}${size}px sans-serif`;
+  ctx.fillStyle = color;
+  let label = String(value || "未填写");
+  if (width && ctx.measureText(label).width > width) {
+    while (label && ctx.measureText(label + "…").width > width)
+      label = label.slice(0, -1);
+    label += "…";
+  }
+  ctx.fillText(label, x, y);
+}
+function image(canvas, path) {
+  return new Promise((resolve, reject) => {
+    const img = canvas.createImage();
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error("照片加载失败，请重试"));
+    img.src = path;
+  });
+}
+async function renderCard(canvas, pet) {
+  const p = profile(pet);
+  canvas.width = 1200;
+  canvas.height = 760;
+  const ctx = canvas.getContext("2d");
+  ctx.clearRect(0, 0, 1200, 760);
+  const gradient = ctx.createLinearGradient(0, 0, 1200, 760);
+  gradient.addColorStop(0, "#fff3e5");
+  gradient.addColorStop(1, "#f0e9f8");
+  ctx.fillStyle = gradient;
+  round(ctx, 0, 0, 1200, 760, 48);
+  ctx.fill();
+  ctx.save();
+  round(ctx, 0, 0, 1200, 760, 48);
+  ctx.clip();
+  ctx.fillStyle = "#ffffff66";
+  ctx.beginPath();
+  ctx.arc(1080, 140, 180, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(1020, 700, 210, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.restore();
+  ctx.strokeStyle = "#e9d6c7";
+  ctx.lineWidth = 2;
+  round(ctx, 20, 20, 1160, 720, 34);
+  ctx.stroke();
+  const logo = await image(canvas, "/assets/logo-corgi-v2.png");
+  ctx.drawImage(logo, 54, 52, 70, 70);
+  text(ctx, "肉垫计划", 140, 82, 27, "#795a4b", 220, true);
+  text(ctx, "PAWPRINT ID", 140, 113, 18, "#a48d7e", 220);
+  text(ctx, "毛孩身份卡", 842, 103, 38, "#604a40", 300, true);
+  ctx.strokeStyle = "#dfcdbf";
+  ctx.beginPath();
+  ctx.moveTo(54, 155);
+  ctx.lineTo(1146, 155);
+  ctx.stroke();
+  ctx.fillStyle = "#fffaf4";
+  round(ctx, 58, 200, 310, 340, 28);
+  ctx.fill();
+  if (p.avatar_url) {
+    const info = await new Promise((resolve, reject) =>
+      wx.getImageInfo({
+        src: p.avatar_url,
+        success: resolve,
+        fail: () => reject(new Error("照片下载失败，请检查网络后重试")),
+      }),
+    );
+    const photo = await image(canvas, info.path);
+    ctx.save();
+    round(ctx, 70, 212, 286, 316, 20);
+    ctx.clip();
+    // Aspect fill, with a centered crop matching the card's portrait window.
+    const ratio = 286 / 316;
+    const sw = Math.min(photo.width, photo.height * ratio),
+      sh = sw / ratio;
+    ctx.drawImage(
+      photo,
+      (photo.width - sw) / 2,
+      (photo.height - sh) / 2,
+      sw,
+      sh,
+      70,
+      212,
+      286,
+      316,
+    );
+    ctx.restore();
+  } else {
+    ctx.fillStyle = "#d18b67";
+    ctx.beginPath();
+    ctx.ellipse(213, 399, 53, 42, 0, 0, Math.PI * 2);
+    ctx.fill();
+    for (const [x, y, r] of [
+      [145, 335, 20],
+      [188, 309, 22],
+      [235, 309, 22],
+      [278, 335, 20],
+    ]) {
+      ctx.beginPath();
+      ctx.arc(x, y, r, 0, Math.PI * 2);
+      ctx.fill();
+    }
+    text(ctx, "等待一张可爱照片", 114, 491, 23, "#9b7966", 230);
+  }
+  text(ctx, p.name, 410, 250, 58, "#604a40", 700, true);
+  text(
+    ctx,
+    `${p.breed || "品种未填写"}  ·  ${p.genderLabel}`,
+    412,
+    298,
+    28,
+    "#886c5f",
+    700,
+  );
+  const fields = [
+    ["生日", p.birthday, 412, 368],
+    ["体重", p.weightLabel, 805, 368],
+    ["毛色", p.coat || "未填写", 412, 465],
+  ];
+  for (const [label, value, x, y] of fields) {
+    text(ctx, label, x, y, 23, "#a48d7e", 290);
+    text(
+      ctx,
+      value,
+      x,
+      y + 43,
+      31,
+      "#604a40",
+      x === 412 && y === 465 ? 680 : 300,
+      true,
+    );
+  }
+  ctx.strokeStyle = "#dfcdbf";
+  ctx.beginPath();
+  ctx.moveTo(54, 585);
+  ctx.lineTo(1146, 585);
+  ctx.stroke();
+  text(ctx, "陪伴编号", 58, 635, 20, "#a48d7e", 200);
+  text(ctx, p.cardNumber, 58, 676, 29, "#795a4b", 650, true);
+  text(ctx, "每一位家人，都值得被好好照顾", 650, 669, 24, "#886c5f", 490);
+  return new Promise((resolve, reject) =>
+    wx.canvasToTempFilePath({
+      canvas,
+      fileType: "png",
+      success: (res) => resolve(res.tempFilePath),
+      fail: () => reject(new Error("档案图片生成失败，请重试")),
+    }),
+  );
+}
+async function saveToAlbum(filePath) {
+  try {
+    await new Promise((resolve, reject) =>
+      wx.saveImageToPhotosAlbum({ filePath, success: resolve, fail: reject }),
+    );
+  } catch (error) {
+    if (/cancel/.test(error.errMsg || "")) return false;
+    const settings = await new Promise((resolve, reject) =>
+      wx.getSetting({ success: resolve, fail: reject }),
+    );
+    if (settings.authSetting["scope.writePhotosAlbum"] !== false)
+      throw new Error("保存失败，请在真机上重试");
+    const confirm = await wx.showModal({
+      title: "允许保存档案卡",
+      content: "需要相册权限，将这张毛孩身份卡保存到你的手机。",
+      confirmText: "去设置",
+    });
+    if (!confirm.confirm) return false;
+    const enabled = await new Promise((resolve, reject) =>
+      wx.openSetting({ success: resolve, fail: reject }),
+    );
+    if (!enabled.authSetting["scope.writePhotosAlbum"]) return false;
+    await new Promise((resolve, reject) =>
+      wx.saveImageToPhotosAlbum({
+        filePath,
+        success: resolve,
+        fail: () => reject(new Error("保存失败，请重试")),
+      }),
+    );
+  }
+  return true;
+}
+module.exports = { profile, renderCard, saveToAlbum };

pets-fe/utils/task-completion.js

@@ -0,0 +1,73 @@
+const { secure, toast } = require("./api");
+const { localDate } = require("./date");
+
+function apply(page, ids) {
+  const tasks = page.data.tasks.map((task) =>
+    ids.includes(task.id) ? { ...task, completed: true } : task,
+  );
+  page.setData({
+    tasks,
+    done: tasks.filter((t) => t.completed).length,
+    undoneCount: tasks.filter((t) => !t.completed).length,
+  });
+  if (wx.vibrateShort) wx.vibrateShort({ type: "light", fail() {} });
+}
+
+async function complete(page, task) {
+  if (
+    !task ||
+    task.completed ||
+    page.data.completingAll ||
+    page.data.taskBusyIds.length
+  )
+    return;
+  const date = page.data.date || localDate();
+  page.setData({ taskBusyIds: [task.id] });
+  try {
+    await secure("/tasks/" + task.id + "/completion", "PUT", {
+      date,
+      completed: true,
+    });
+    if (page.data.date && page.data.date !== date) return;
+    apply(page, [task.id]);
+    wx.showToast({ title: "照顾好了，记下一份陪伴", icon: "success" });
+  } catch (error) {
+    toast(error);
+  } finally {
+    page.setData({ taskBusyIds: [] });
+  }
+}
+
+async function completeAll(page) {
+  if (page.data.completingAll || page.data.taskBusyIds.length) return;
+  const tasks = page.data.tasks.filter((t) => !t.completed);
+  if (!tasks.length) return;
+  const date = page.data.date || localDate();
+  page.setData({ completingAll: true });
+  try {
+    const confirmation = await wx.showModal({
+      title: "都照顾好了吗？",
+      content: `将 ${date} 的 ${tasks.length} 项待办记为完成，完成后不能撤销。`,
+      confirmText: "全部完成",
+      confirmColor: "#b95738",
+    });
+    if (!confirmation.confirm) return;
+    // The API accepts bounded batches; avoid partial completion of larger lists.
+    if (tasks.length > 200) throw new Error("任务较多，请分项完成后再试");
+    await secure("/tasks/completions", "PUT", {
+      date,
+      task_ids: tasks.map((t) => t.id),
+    });
+    if (page.data.date && page.data.date !== date) return;
+    apply(
+      page,
+      tasks.map((t) => t.id),
+    );
+    wx.showToast({ title: "日常照顾全部完成", icon: "success" });
+  } catch (error) {
+    toast(error);
+  } finally {
+    page.setData({ completingAll: false });
+  }
+}
+module.exports = { complete, completeAll };