popup body area selector
This commit is contained in:
Timi
@@ -50,21 +50,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
interface BodyArea {
|
import { bodyAreaLabelMap, bodyAreaList } from "@/utils/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;
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
modelValue: {
|
modelValue: {
|
||||||
@@ -77,129 +63,13 @@ const emit = defineEmits<{
|
|||||||
(e: "update:modelValue", value: { selectedCodeList: string[] }): void;
|
(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 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("、")}` : "已选部位：未选择";
|
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 || []);
|
const selectedCodeList = computed(() => props.modelValue?.selectedCodeList || []);
|
||||||
|
|
||||||
function isSelected(code: string): boolean {
|
function isSelected(code: string): boolean {
|
||||||
|
|||||||
@@ -119,10 +119,9 @@
|
|||||||
placeholder="病症"
|
placeholder="病症"
|
||||||
/>
|
/>
|
||||||
</t-form-item>
|
</t-form-item>
|
||||||
<div class="conditioning-part">
|
<t-form-item label="调理部位" arrow @click="openBodyAreaPicker">
|
||||||
<span class="gray">调理部位</span>
|
<div class="picker-text" v-text="selectedAreaText" />
|
||||||
<body-area-selector v-model="selectedAreas" />
|
</t-form-item>
|
||||||
</div>
|
|
||||||
<t-form-item label="备注">
|
<t-form-item label="备注">
|
||||||
<t-textarea
|
<t-textarea
|
||||||
class="textarea"
|
class="textarea"
|
||||||
@@ -166,10 +165,19 @@
|
|||||||
@confirm="confirmStorePicker"
|
@confirm="confirmStorePicker"
|
||||||
/>
|
/>
|
||||||
</t-popup>
|
</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>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<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 { Toast } from "tdesign-mobile-vue";
|
||||||
import CustomerAPI from "@/api/CustomerAPI";
|
import CustomerAPI from "@/api/CustomerAPI";
|
||||||
import BodyAreaSelector from "@/components/BodyAreaSelector.vue";
|
import BodyAreaSelector from "@/components/BodyAreaSelector.vue";
|
||||||
@@ -179,7 +187,8 @@ import PhotoScroller from "@/components/PhotoScroller.vue";
|
|||||||
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
||||||
import { useSettingStore } from "@/store/settingStore";
|
import { useSettingStore } from "@/store/settingStore";
|
||||||
import type { BodyAreaValue, Customer, CustomerAttachmentType, EditableCustomerPhoto } from "@/types/Customer";
|
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 { gaoRoleCodes, permissionCodes } from "@/utils/permission";
|
||||||
import { compressUploadImage } from "@/utils/imageCompression";
|
import { compressUploadImage } from "@/utils/imageCompression";
|
||||||
|
|
||||||
@@ -309,10 +318,39 @@ const photoList = computed<string[]>({
|
|||||||
photoItemList.value = photoItemList.value.filter(item => urlSet.has(item.url));
|
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 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 {
|
function openPhotoPicker(target: CustomerAttachmentType): void {
|
||||||
photoPickerTarget.value = target;
|
photoPickerTarget.value = target;
|
||||||
photoInputRef.value?.click();
|
photoInputRef.value?.click();
|
||||||
@@ -524,6 +562,13 @@ function buildAttachmentList(): Attachment[] {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.picker-text {
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
.referrer {
|
.referrer {
|
||||||
gap: .75rem;
|
gap: .75rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -540,12 +585,6 @@ function buildAttachmentList(): Attachment[] {
|
|||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.conditioning-part {
|
|
||||||
gap: .5rem;
|
|
||||||
padding: 1rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-input {
|
.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);
|
return AttachmentAPI.getReadURL(attachment.id);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function createBodyAreaValue(): BodyAreaValue {
|
export function normalizeBodyAreaValue(value: unknown): BodyAreaValue {
|
||||||
|
if (!value || typeof value !== "object") {
|
||||||
return {
|
return {
|
||||||
selectedCodeList: []
|
selectedCodeList: []
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export function normalizeBodyAreaValue(value: unknown): BodyAreaValue {
|
|
||||||
if (!value || typeof value !== "object") {
|
|
||||||
return createBodyAreaValue();
|
|
||||||
}
|
|
||||||
|
|
||||||
const raw = value as Partial<BodyAreaValue>;
|
const raw = value as Partial<BodyAreaValue>;
|
||||||
if (!Array.isArray(raw.selectedCodeList)) {
|
if (!Array.isArray(raw.selectedCodeList)) {
|
||||||
return createBodyAreaValue();
|
return {
|
||||||
|
selectedCodeList: []
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|||||||
Reference in New Issue
Block a user