Complete core mini program flows

pets-fe/components/pet-picker/index.js

@@ -2,6 +2,7 @@ Component({
   properties: {
     pets: { type: Array, value: [] },
     selected: { type: Array, value: [] },
+    disabled: { type: Boolean, value: false },
   },
   data: { viewPets: [] },
   observers: {
@@ -16,11 +17,18 @@ Component({
   },
   methods: {
     toggle(e) {
+      if (this.data.disabled) return;
       const id = e.currentTarget.dataset.id;
       const selected = this.data.selected.includes(id)
         ? this.data.selected.filter((x) => x !== id)
         : [...this.data.selected, id];
       this.triggerEvent("change", { selected });
     },
+    selectAll() {
+      if (this.data.disabled) return;
+      const ids = this.data.pets.map((pet) => pet.id);
+      const allSelected = ids.every((id) => this.data.selected.includes(id));
+      this.triggerEvent("change", { selected: allSelected ? [] : ids });
+    },
   },
 });

pets-fe/components/pet-picker/index.wxml

@@ -1,4 +1,7 @@
 <view class="picker">
+  <view wx:if="{{pets.length>1&&!disabled}}" class="chip select-all" bindtap="selectAll">
+    <text>✓</text><text>全选 / 清空</text>
+  </view>
   <view
     wx:for="{{viewPets}}"
     wx:key="id"

pets-fe/components/pet-picker/index.wxss

@@ -29,3 +29,7 @@
   margin-left: 3rpx;
   font-weight: 800;
 }
+.select-all {
+  border-style: dashed;
+  color: #2c8663;
+}