popup body area selector

2026-08-20 14:10:44 +08:00
parent aea71aafd5
commit 2bab92edaa
4 changed files with 196 additions and 155 deletions
@@ -50,21 +50,7 @@
 </template>

 <script setup lang="ts">
-interface BodyArea {
-	key: string;
-	label: string;
-	shape: "ellipse" | "rect" | "path";
-	cx?: number;
-	cy?: number;
-	rx?: number;
-	ry?: number;
-	x?: number;
-	y?: number;
-	width?: number;
-	height?: number;
-	radius?: number;
-	path?: string;
-}
+import { bodyAreaLabelMap, bodyAreaList } from "@/utils/bodyArea";

 const props = defineProps<{
 	modelValue: {
@@ -77,129 +63,13 @@ const emit = defineEmits<{
 	(e: "update:modelValue", value: { selectedCodeList: string[] }): void;
 }>();

-const areas: BodyArea[] = [
-	{ key: "head", label: "头部", shape: "ellipse", cx: 120, cy: 62, rx: 31, ry: 35 },
-	{ key: "neck", label: "颈部", shape: "rect", x: 108, y: 96, width: 24, height: 24, radius: 9 },
-	{ key: "left-shoulder", label: "右肩", shape: "ellipse", cx: 86, cy: 135, rx: 25, ry: 19 },
-	{ key: "right-shoulder", label: "左肩", shape: "ellipse", cx: 154, cy: 135, rx: 25, ry: 19 },
-	{
-		key: "left-upper-arm",
-		label: "右上臂",
-		shape: "path",
-		path: "M69 128C59 130 52 136 49 147L31 216C30 224 34 230 41 232C49 234 54 229 56 222L79 157C84 143 81 132 69 128Z"
-	},
-	{
-		key: "right-upper-arm",
-		label: "左上臂",
-		shape: "path",
-		path: "M171 128C181 130 188 136 191 147L209 216C210 224 206 230 199 232C191 234 186 229 184 222L161 157C156 143 159 132 171 128Z"
-	},
-	{
-		key: "left-forearm",
-		label: "右前臂",
-		shape: "path",
-		path: "M31 218C38 217 49 221 56 225L44 298C43 307 38 312 30 311C22 310 18 304 20 295Z"
-	},
-	{
-		key: "right-forearm",
-		label: "左前臂",
-		shape: "path",
-		path: "M209 218C202 217 191 221 184 225L196 298C197 307 202 312 210 311C218 310 222 304 220 295Z"
-	},
-	{
-		key: "left-hand",
-		label: "右手",
-		shape: "path",
-		path: "M20 313C22 306 40 307 44 314L42 337C40 347 34 353 28 350C23 347 19 339 18 330Z"
-	},
-	{
-		key: "right-hand",
-		label: "左手",
-		shape: "path",
-		path: "M220 313C218 306 200 307 196 314L198 337C200 347 206 353 212 350C217 347 221 339 222 330Z"
-	},
-	{
-		key: "left-chest",
-		label: "右胸",
-		shape: "path",
-		path: "M94 116C103 112 111 110 119 110L119 199C107 199 96 197 86 193L83 151Z"
-	},
-	{
-		key: "right-chest",
-		label: "左胸",
-		shape: "path",
-		path: "M121 110C129 110 137 112 146 116L157 151L154 193C144 197 133 199 121 199Z"
-	},
-	{
-		key: "left-abdomen",
-		label: "右腹",
-		shape: "path",
-		path: "M86 197C96 201 107 203 119 203L119 263C108 263 98 261 89 256Z"
-	},
-	{
-		key: "right-abdomen",
-		label: "左腹",
-		shape: "path",
-		path: "M121 203C133 203 144 201 154 197L151 256C142 261 132 263 121 263Z"
-	},
-	{
-		key: "left-waist",
-		label: "右腰",
-		shape: "path",
-		path: "M89 259C98 264 108 266 119 267L119 302C107 302 96 299 86 294Z"
-	},
-	{
-		key: "right-waist",
-		label: "左腰",
-		shape: "path",
-		path: "M121 267C132 266 142 264 151 259L154 294C144 299 133 302 121 302Z"
-	},
-	{
-		key: "left-thigh",
-		label: "右大腿",
-		shape: "path",
-		path: "M86 298C96 302 106 304 117 302L113 368C104 372 91 372 82 368L79 333Z"
-	},
-	{
-		key: "right-thigh",
-		label: "左大腿",
-		shape: "path",
-		path: "M123 302C134 304 144 302 154 298L161 333L158 368C149 372 136 372 127 368Z"
-	},
-	{ key: "left-knee", label: "右膝", shape: "ellipse", cx: 97, cy: 382, rx: 16, ry: 15 },
-	{ key: "right-knee", label: "左膝", shape: "ellipse", cx: 143, cy: 382, rx: 16, ry: 15 },
-	{
-		key: "left-calf",
-		label: "右小腿",
-		shape: "path",
-		path: "M83 397C92 400 102 400 111 397L108 462C100 466 91 466 83 462L80 424Z"
-	},
-	{
-		key: "right-calf",
-		label: "左小腿",
-		shape: "path",
-		path: "M129 397C138 400 148 400 157 397L160 424L157 462C149 466 140 466 132 462Z"
-	},
-	{
-		key: "left-foot",
-		label: "右脚",
-		shape: "path",
-		path: "M83 462C90 465 101 465 108 462L110 480C110 489 103 494 91 494H77C72 493 73 487 78 482Z"
-	},
-	{
-		key: "right-foot",
-		label: "左脚",
-		shape: "path",
-		path: "M132 462C139 465 150 465 157 462L162 482C167 487 168 493 163 494H149C137 494 130 489 130 480Z"
-	}
-];
-
 const selectedText = computed(() => {
-	const selectedLabelList = selectedCodeList.value.map(item => areaLabelMap.value.get(item) || item);
+	const selectedLabelList = selectedCodeList.value.map(item => areaLabelMap.get(item) || item);
 	return selectedLabelList.length ? `已选部位：${selectedLabelList.join("、")}` : "已选部位：未选择";
 });

-const areaLabelMap = computed(() => new Map(areas.map(item => [item.key, item.label])));
+const areas = bodyAreaList;
+const areaLabelMap = bodyAreaLabelMap;
 const selectedCodeList = computed(() => props.modelValue?.selectedCodeList || []);

 function isSelected(code: string): boolean {
@@ -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 {
@@ -0,0 +1,134 @@
+export type BodyArea = {
+	key: string;
+	label: string;
+	shape: "ellipse" | "rect" | "path";
+	cx?: number;
+	cy?: number;
+	rx?: number;
+	ry?: number;
+	x?: number;
+	y?: number;
+	width?: number;
+	height?: number;
+	radius?: number;
+	path?: string;
+};
+
+export const bodyAreaList: BodyArea[] = [
+	{ key: "head", label: "头部", shape: "ellipse", cx: 120, cy: 62, rx: 31, ry: 35 },
+	{ key: "neck", label: "颈部", shape: "rect", x: 108, y: 96, width: 24, height: 24, radius: 9 },
+	{ key: "left-shoulder", label: "右肩", shape: "ellipse", cx: 86, cy: 135, rx: 25, ry: 19 },
+	{ key: "right-shoulder", label: "左肩", shape: "ellipse", cx: 154, cy: 135, rx: 25, ry: 19 },
+	{
+		key: "left-upper-arm",
+		label: "右上臂",
+		shape: "path",
+		path: "M69 128C59 130 52 136 49 147L31 216C30 224 34 230 41 232C49 234 54 229 56 222L79 157C84 143 81 132 69 128Z"
+	},
+	{
+		key: "right-upper-arm",
+		label: "左上臂",
+		shape: "path",
+		path: "M171 128C181 130 188 136 191 147L209 216C210 224 206 230 199 232C191 234 186 229 184 222L161 157C156 143 159 132 171 128Z"
+	},
+	{
+		key: "left-forearm",
+		label: "右前臂",
+		shape: "path",
+		path: "M31 218C38 217 49 221 56 225L44 298C43 307 38 312 30 311C22 310 18 304 20 295Z"
+	},
+	{
+		key: "right-forearm",
+		label: "左前臂",
+		shape: "path",
+		path: "M209 218C202 217 191 221 184 225L196 298C197 307 202 312 210 311C218 310 222 304 220 295Z"
+	},
+	{
+		key: "left-hand",
+		label: "右手",
+		shape: "path",
+		path: "M20 313C22 306 40 307 44 314L42 337C40 347 34 353 28 350C23 347 19 339 18 330Z"
+	},
+	{
+		key: "right-hand",
+		label: "左手",
+		shape: "path",
+		path: "M220 313C218 306 200 307 196 314L198 337C200 347 206 353 212 350C217 347 221 339 222 330Z"
+	},
+	{
+		key: "left-chest",
+		label: "右胸",
+		shape: "path",
+		path: "M94 116C103 112 111 110 119 110L119 199C107 199 96 197 86 193L83 151Z"
+	},
+	{
+		key: "right-chest",
+		label: "左胸",
+		shape: "path",
+		path: "M121 110C129 110 137 112 146 116L157 151L154 193C144 197 133 199 121 199Z"
+	},
+	{
+		key: "left-abdomen",
+		label: "右腹",
+		shape: "path",
+		path: "M86 197C96 201 107 203 119 203L119 263C108 263 98 261 89 256Z"
+	},
+	{
+		key: "right-abdomen",
+		label: "左腹",
+		shape: "path",
+		path: "M121 203C133 203 144 201 154 197L151 256C142 261 132 263 121 263Z"
+	},
+	{
+		key: "left-waist",
+		label: "右腰",
+		shape: "path",
+		path: "M89 259C98 264 108 266 119 267L119 302C107 302 96 299 86 294Z"
+	},
+	{
+		key: "right-waist",
+		label: "左腰",
+		shape: "path",
+		path: "M121 267C132 266 142 264 151 259L154 294C144 299 133 302 121 302Z"
+	},
+	{
+		key: "left-thigh",
+		label: "右大腿",
+		shape: "path",
+		path: "M86 298C96 302 106 304 117 302L113 368C104 372 91 372 82 368L79 333Z"
+	},
+	{
+		key: "right-thigh",
+		label: "左大腿",
+		shape: "path",
+		path: "M123 302C134 304 144 302 154 298L161 333L158 368C149 372 136 372 127 368Z"
+	},
+	{ key: "left-knee", label: "右膝", shape: "ellipse", cx: 97, cy: 382, rx: 16, ry: 15 },
+	{ key: "right-knee", label: "左膝", shape: "ellipse", cx: 143, cy: 382, rx: 16, ry: 15 },
+	{
+		key: "left-calf",
+		label: "右小腿",
+		shape: "path",
+		path: "M83 397C92 400 102 400 111 397L108 462C100 466 91 466 83 462L80 424Z"
+	},
+	{
+		key: "right-calf",
+		label: "左小腿",
+		shape: "path",
+		path: "M129 397C138 400 148 400 157 397L160 424L157 462C149 466 140 466 132 462Z"
+	},
+	{
+		key: "left-foot",
+		label: "右脚",
+		shape: "path",
+		path: "M83 462C90 465 101 465 108 462L110 480C110 489 103 494 91 494H77C72 493 73 487 78 482Z"
+	},
+	{
+		key: "right-foot",
+		label: "左脚",
+		shape: "path",
+		path: "M132 462C139 465 150 465 157 462L162 482C167 487 168 493 163 494H149C137 494 130 489 130 480Z"
+	}
+];
+
+export const bodyAreaLabelMap = new Map(bodyAreaList.map(item => [item.key, item.label]));
@@ -17,20 +17,18 @@ function getCustomerAttachmentURL(customer: Customer | undefined, attachType: st
 	return AttachmentAPI.getReadURL(attachment.id);
 }

-export function createBodyAreaValue(): BodyAreaValue {
-	return {
-		selectedCodeList: []
-	};
-}
-
 export function normalizeBodyAreaValue(value: unknown): BodyAreaValue {
 	if (!value || typeof value !== "object") {
-		return createBodyAreaValue();
+		return {
+			selectedCodeList: []
+		};
 	}

 	const raw = value as Partial<BodyAreaValue>;
 	if (!Array.isArray(raw.selectedCodeList)) {
-		return createBodyAreaValue();
+		return {
+			selectedCodeList: []
+		};
 	}

 	return {