popup body area selector

src/pages/customer/CustomerEdit.vue

@@ -119,10 +119,9 @@
 					placeholder="病症"
 				/>
 			</t-form-item>
-			<div class="conditioning-part">
-				<span class="gray">调理部位</span>
-				<body-area-selector v-model="selectedAreas" />
-			</div>
+			<t-form-item label="调理部位" arrow @click="openBodyAreaPicker">
+				<div class="picker-text" v-text="selectedAreaText" />
+			</t-form-item>
 			<t-form-item label="备注">
 				<t-textarea
 					class="textarea"
@@ -166,10 +165,19 @@
 			@confirm="confirmStorePicker"
 		/>
 	</t-popup>
+	<bottom-popup
+		v-model="bodyAreaPickerVisible"
+		title="选择调理部位"
+		height="38rem"
+		@left-button-click="cancelBodyAreaPicker"
+		@right-button-click="confirmBodyAreaPicker"
+	>
+		<body-area-selector v-model="bodyAreaDraft" />
+	</bottom-popup>
 </template>
 
 <script setup lang="ts">
-import { AttachmentAPI, useUserStore, type Attachment } from "timi-web";
+import { type Attachment, AttachmentAPI, useUserStore } from "timi-web";
 import { Toast } from "tdesign-mobile-vue";
 import CustomerAPI from "@/api/CustomerAPI";
 import BodyAreaSelector from "@/components/BodyAreaSelector.vue";
@@ -179,7 +187,8 @@ import PhotoScroller from "@/components/PhotoScroller.vue";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import { useSettingStore } from "@/store/settingStore";
 import type { BodyAreaValue, Customer, CustomerAttachmentType, EditableCustomerPhoto } from "@/types/Customer";
-import { createBodyAreaValue, normalizeBodyAreaValue } from "@/utils/customer";
+import { bodyAreaLabelMap } from "@/utils/bodyArea";
+import { normalizeBodyAreaValue } from "@/utils/customer";
 import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
 import { compressUploadImage } from "@/utils/imageCompression";
 
@@ -309,10 +318,39 @@ const photoList = computed<string[]>({
 		photoItemList.value = photoItemList.value.filter(item => urlSet.has(item.url));
 	}
 });
-const selectedAreas = ref<BodyAreaValue>(createBodyAreaValue());
+const selectedAreas = ref<BodyAreaValue>({
+	selectedCodeList: []
+});
+const bodyAreaPickerVisible = ref(false);
+const bodyAreaDraft = ref<BodyAreaValue>({
+	selectedCodeList: []
+});
 const formData = reactive<Customer>({
 });
 
+const selectedAreaText = computed(() => {
+	const selectedLabelList = selectedAreas.value.selectedCodeList.map(item => bodyAreaLabelMap.get(item) || item);
+	return selectedLabelList.length ? `${selectedLabelList.join("、")}` : "选择调理部位";
+});
+
+function openBodyAreaPicker(): void {
+	bodyAreaDraft.value = {
+		selectedCodeList: [...selectedAreas.value.selectedCodeList]
+	};
+	bodyAreaPickerVisible.value = true;
+}
+
+function cancelBodyAreaPicker(): void {
+	bodyAreaPickerVisible.value = false;
+}
+
+function confirmBodyAreaPicker(): void {
+	selectedAreas.value = {
+		selectedCodeList: [...bodyAreaDraft.value.selectedCodeList]
+	};
+	bodyAreaPickerVisible.value = false;
+}
+
 function openPhotoPicker(target: CustomerAttachmentType): void {
 	photoPickerTarget.value = target;
 	photoInputRef.value?.click();
@@ -524,6 +562,13 @@ function buildAttachmentList(): Attachment[] {
 			width: 100%;
 		}
 
+		.picker-text {
+			min-width: 0;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+
 		.referrer {
 			gap: .75rem;
 			display: flex;
@@ -540,12 +585,6 @@ function buildAttachmentList(): Attachment[] {
 			display: flex;
 		}
 
-		.conditioning-part {
-			gap: .5rem;
-			padding: 1rem;
-			display: flex;
-			flex-direction: column;
-		}
 	}
 
 	.file-input {