feat: 多选

components/MultiSelectLayer.vue

 <template>
   <Layer
     :modelValue="modelValue"
-    :title="title"
-    :showCancel="true"
-    :showConfirm="true"
+    :customHeader="true"
+    :showCancel="false"
+    :showConfirm="false"
     @update:modelValue="$emit('update:modelValue', $event)"
     @confirm="onConfirm"
     @cancel="onCancel"
   >
     <template>
+      <view class="multi-select-title">{{ title }}</view>
       <view class="multi-select-list">
         <view
           v-for="opt in options"
@@ -21,18 +22,22 @@
           <image
             v-if="selectedSet.has(opt)"
             class="check-icon"
-            src="/static/check.png"
+            :src="$baseUrl + 'person/icon_gou.png'"
           />
         </view>
       </view>
+      <view class="multi-select-btn" @click="onConfirm"> 保存 </view>
     </template>
   </Layer>
 </template>
 
 <script setup>
-import { ref, watch, computed } from "vue";
+import { ref, watch, computed, getCurrentInstance } from "vue";
 import Layer from "./Layer.vue";
 
+const { proxy } = getCurrentInstance();
+const $baseUrl = proxy.$baseUrl;
+
 const props = defineProps({
   modelValue: Boolean,
   title: String,
@@ -40,7 +45,12 @@ const props = defineProps({
   modelSelected: { type: Array, default: () => [] },
   max: Number,
 });
-const emit = defineEmits(["update:modelValue", "update:selected", "confirm", "cancel"]);
+const emit = defineEmits([
+  "update:modelValue",
+  "update:selected",
+  "confirm",
+  "cancel",
+]);
 
 const selected = ref([...props.modelSelected]);
 watch(
@@ -72,32 +82,50 @@ function onCancel() {
 </script>
 
 <style lang="less" scoped>
+.multi-select-btn {
+  width: 686rpx;
+  height: 94rpx;
+  background: #d3a358;
+  color: #fff;
+  border-radius: 46rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+  margin-top: 24rpx;
+  font-size: 32rpx;
+}
+.multi-select-title {
+  font-size: 32rpx;
+  color: #222;
+  font-weight: bold;
+  margin-bottom: 24rpx;
+}
 .multi-select-list {
   display: flex;
   flex-wrap: wrap;
-  gap: 24rpx 20rpx;
+  gap: 15rpx 20rpx;
 }
 .multi-select-tag {
   display: flex;
   align-items: center;
-  padding: 0 32rpx;
+  padding: 0 24rpx;
   height: 56rpx;
-  background: #fff;
+  background: #ffffff;
   border-radius: 28rpx;
-  color: #222;
-  font-size: 28rpx;
-  margin-bottom: 24rpx;
+  color: #1d1e25;
+  font-size: 24rpx;
   position: relative;
-  border: 1rpx solid #eee;
   .check-icon {
-    width: 28rpx;
-    height: 28rpx;
-    margin-left: 8rpx;
+    width: 19rpx;
+    height: 19rpx;
+    position: absolute;
+    right: 2rpx;
+    top: 3rpx;
+    display: block;
   }
   &.selected {
-    background: #e9d3b1;
-    color: #b88a3a;
-    border: 1rpx solid #b88a3a;
+    background: #efe7da;
   }
 }
 </style> 
\ No newline at end of file

components/PickerCustom.vue

@@ -21,7 +21,7 @@
         <picker-view
           class="picker-layer-view"
           mask-style="background: rgb(246, 248, 250); z-index: 0;"
-          indicator-style="border-radius: 10px; height: 50px;background:#ffffff; z-index:0"
+          indicator-style="border-radius: 10px; height: 50px; background:#ffffff; z-index:0"
           :value="pickerValue"
           @change="onChange"
         >
@@ -55,9 +55,9 @@
             </picker-view-column>
           </template>
           <template v-else>
-            <picker-view-column v-for="(col, colIdx) in columns" :key="colIdx">
+            <picker-view-column>
               <view
-                v-for="(item, idx) in col"
+                v-for="(item, idx) in columns[0]"
                 :key="idx"
                 class="picker-layer-item"
               >
@@ -309,6 +309,7 @@ function onChange(e) {
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  position: relative;
 }
 .picker-layer-header {
   display: flex;
@@ -350,6 +351,7 @@ function onChange(e) {
 .picker-layer-view {
   flex: 1;
   width: 100%;
+  height: 100%;
 }
 .picker-layer-item {
   height: 100rpx;

views/My.vue

@@ -69,7 +69,7 @@
           <BabySwitcher
             v-if="showBabySwitcher"
             :show="showBabySwitcher"
-            :babyList="babyInfo.allBabyBaseInfo"
+            :babyList="babyInfo.allBabyBaseInfo || []"
             :addIcon="$baseUrl + 'my/baby_add_btn.png'"
             @close="showBabySwitcher = false"
             @select="onSelectBaby"