Add one-way task completion and exportable pet identity cards

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;
 }