better customer photo selector
This commit is contained in:
Timi
@@ -2,16 +2,25 @@
|
||||
<div class="photo-section">
|
||||
<div class="t-form__label" v-text="title" />
|
||||
<div class="photo-shell" :class="{ 'without-add': !showAdd }">
|
||||
<div class="photo-row">
|
||||
<div v-if="!displayPhotoList.length" class="photo-empty" v-text="emptyText" />
|
||||
<div class="items">
|
||||
<div v-if="!displayPhotoList.length" class="empty" v-text="emptyText" />
|
||||
<div
|
||||
v-for="(item, index) in displayPhotoList"
|
||||
:key="`${item}-${index}`"
|
||||
class="photo-item"
|
||||
:key="`${item.url}-${item.attachType}-${index}`"
|
||||
class="item"
|
||||
>
|
||||
<t-button variant="text" class="photo-preview-trigger" @click="openPhotoViewer(index)">
|
||||
<t-image :src="item" alt="登记照片" fit="cover" class="photo-image" />
|
||||
<t-button variant="text" class="preview-trigger" @click="openPhotoViewer(index)">
|
||||
<t-image
|
||||
class="image"
|
||||
:src="item.url"
|
||||
:alt="getAttachTypeText(item.attachType)"
|
||||
fit="cover"
|
||||
/>
|
||||
</t-button>
|
||||
<div
|
||||
class="type-label white glass-black clip-text"
|
||||
v-text="getAttachTypeText(item.attachType)"
|
||||
/>
|
||||
<t-button
|
||||
v-if="showRemove && modelValue.length"
|
||||
theme="danger"
|
||||
@@ -24,17 +33,53 @@
|
||||
</t-button>
|
||||
</div>
|
||||
</div>
|
||||
<t-button
|
||||
v-if="showAdd"
|
||||
theme="primary"
|
||||
variant="dashed"
|
||||
class="add"
|
||||
:loading="loading"
|
||||
:disabled="loading"
|
||||
@click="$emit('add')"
|
||||
>
|
||||
<span v-text="addText" />
|
||||
</t-button>
|
||||
<div v-if="showAdd" class="add-trigger">
|
||||
<t-button
|
||||
v-if="addActionList.length === 1"
|
||||
theme="primary"
|
||||
variant="dashed"
|
||||
class="add"
|
||||
:loading="loading"
|
||||
:disabled="loading"
|
||||
@click="handleAddAction(addActionList[0])"
|
||||
>
|
||||
<span v-text="addActionList[0].text" />
|
||||
</t-button>
|
||||
<t-popover
|
||||
v-else
|
||||
v-model:visible="addPopoverVisible"
|
||||
placement="left"
|
||||
theme="light"
|
||||
>
|
||||
<t-button
|
||||
class="add"
|
||||
theme="primary"
|
||||
variant="dashed"
|
||||
:loading="loading"
|
||||
:disabled="loading"
|
||||
>
|
||||
<span v-text="addText" />
|
||||
</t-button>
|
||||
<template #content>
|
||||
<div class="add-actions">
|
||||
<t-button
|
||||
v-for="(action, index) in addActionList"
|
||||
:key="`${action.emit}-${index}`"
|
||||
variant="text"
|
||||
:theme="action.theme"
|
||||
class="add-action"
|
||||
:disabled="loading"
|
||||
@click="handleAddAction(action)"
|
||||
>
|
||||
<template #icon v-if="action.icon">
|
||||
<t-icon :name="action.icon" />
|
||||
</template>
|
||||
<span v-text="action.text" />
|
||||
</t-button>
|
||||
</div>
|
||||
</template>
|
||||
</t-popover>
|
||||
</div>
|
||||
</div>
|
||||
<t-image-viewer
|
||||
v-model:visible="photoViewerVisible"
|
||||
@@ -45,18 +90,41 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ButtonProps } from "tdesign-mobile-vue";
|
||||
|
||||
interface Props {
|
||||
addActions?: readonly AddAction[];
|
||||
addText?: string;
|
||||
emptyText?: string;
|
||||
fallbackImage?: string;
|
||||
loading?: boolean;
|
||||
modelValue: string[];
|
||||
photoItems?: readonly PhotoItem[];
|
||||
showAdd?: boolean;
|
||||
showRemove?: boolean;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
type AddAction = {
|
||||
icon?: string;
|
||||
emit: string;
|
||||
text: string;
|
||||
theme?: ButtonProps["theme"];
|
||||
};
|
||||
|
||||
type PhotoItem = {
|
||||
attachType?: string;
|
||||
url: string;
|
||||
};
|
||||
|
||||
const ATTACH_TYPE_TEXT_MAP: Record<string, string> = {
|
||||
PHOTO: "照片",
|
||||
POINT_CARD: "积分卡",
|
||||
OTHER: "其他文件"
|
||||
};
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
addActions: () => [],
|
||||
title: "照片列表",
|
||||
addText: "拍照",
|
||||
emptyText: "暂无照片",
|
||||
@@ -65,21 +133,44 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
showRemove: true
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
add: [];
|
||||
"update:modelValue": [value: string[]];
|
||||
}>();
|
||||
type Emits = {
|
||||
(event: string): void;
|
||||
(event: "update:modelValue", value: string[]): void;
|
||||
};
|
||||
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const photoViewerVisible = ref(false);
|
||||
const photoViewerImages = ref<string[]>([]);
|
||||
const displayPhotoList = computed(() => {
|
||||
const addPopoverVisible = ref(false);
|
||||
const addActionList = computed<readonly AddAction[]>(() => props.addActions.length ? props.addActions : [{
|
||||
emit: "add",
|
||||
text: props.addText,
|
||||
theme: "default"
|
||||
}]);
|
||||
const displayPhotoList = computed<PhotoItem[]>(() => {
|
||||
if (props.photoItems?.length) {
|
||||
return [...props.photoItems];
|
||||
}
|
||||
if (props.modelValue.length) {
|
||||
return props.modelValue;
|
||||
return props.modelValue.map(url => ({ url, attachType: "PHOTO" }));
|
||||
}
|
||||
|
||||
return props.fallbackImage ? [props.fallbackImage] : [];
|
||||
return props.fallbackImage ? [{ url: props.fallbackImage, attachType: "PHOTO" }] : [];
|
||||
});
|
||||
|
||||
function getAttachTypeText(attachType?: string): string {
|
||||
return ATTACH_TYPE_TEXT_MAP[attachType || "PHOTO"] || "其他文件";
|
||||
}
|
||||
|
||||
function handleAddAction(action?: AddAction): void {
|
||||
if (!action) {
|
||||
return;
|
||||
}
|
||||
addPopoverVisible.value = false;
|
||||
emit(action.emit);
|
||||
}
|
||||
|
||||
function removePhoto(index: number): void {
|
||||
if (index < 0 || props.modelValue.length <= index) {
|
||||
return;
|
||||
@@ -90,15 +181,17 @@ function removePhoto(index: number): void {
|
||||
}
|
||||
|
||||
function openPhotoViewer(index: number): void {
|
||||
photoViewerImages.value = [...displayPhotoList.value.slice(index), ...displayPhotoList.value.slice(0, index)];
|
||||
const photoList = [...displayPhotoList.value.slice(index), ...displayPhotoList.value.slice(0, index)];
|
||||
photoViewerImages.value = photoList.map(item => item.url);
|
||||
photoViewerVisible.value = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.photo-section {
|
||||
display: grid;
|
||||
gap: .375rem;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
|
||||
.photo-shell {
|
||||
display: grid;
|
||||
@@ -109,78 +202,113 @@ function openPhotoViewer(index: number): void {
|
||||
&.without-add {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.photo-row {
|
||||
gap: .75rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.add {
|
||||
--td-button-border-radius: .875rem;
|
||||
|
||||
flex: 0 0 5.5rem;
|
||||
width: 5.5rem;
|
||||
height: 5.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.photo-item {
|
||||
width: 5.5rem;
|
||||
height: 5.5rem;
|
||||
flex: 0 0 5.5rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.photo-preview-trigger {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.photo-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.remove {
|
||||
top: .375rem;
|
||||
right: .375rem;
|
||||
position: absolute;
|
||||
|
||||
:deep(.t-button__content) {
|
||||
.items {
|
||||
gap: .75rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: thin;
|
||||
|
||||
.empty {
|
||||
width: 100%;
|
||||
color: #52607a;
|
||||
display: flex;
|
||||
padding: 1rem 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f8fbff;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 5.5rem;
|
||||
height: 5.5rem;
|
||||
flex: 0 0 5.5rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 1rem;
|
||||
|
||||
.preview-trigger {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
|
||||
.image {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.type-label {
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
padding: .125rem .5rem;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
font-size: .875rem;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
border-radius: 0 0 1rem 1rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.remove {
|
||||
top: .375rem;
|
||||
right: .375rem;
|
||||
position: absolute;
|
||||
|
||||
:deep(.t-button__content) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.photo-empty {
|
||||
width: 100%;
|
||||
color: #52607a;
|
||||
display: flex;
|
||||
padding: 1rem 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f8fbff;
|
||||
border-radius: 1rem;
|
||||
.add-trigger {
|
||||
--td-popover-padding: 0 .5rem;
|
||||
width: 5.5rem;
|
||||
height: 5.5rem;
|
||||
|
||||
:deep(.t-popover__content) {
|
||||
border-radius: .875rem;
|
||||
}
|
||||
|
||||
.add {
|
||||
--td-button-border-radius: .875rem;
|
||||
|
||||
width: 5.5rem;
|
||||
height: 5.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.add-actions {
|
||||
gap: .25rem;
|
||||
display: grid;
|
||||
padding: .5rem 0;
|
||||
|
||||
.add-action {
|
||||
--td-button-medium-height: 32px;
|
||||
--td-button-medium-padding-horizontal: 10px;
|
||||
|
||||
gap: .5rem;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
font-weight: unset;
|
||||
justify-content: start;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -30,6 +30,7 @@
|
||||
<template #title>
|
||||
<photo-scroller
|
||||
:model-value="photoList"
|
||||
:photo-items="photoItemList"
|
||||
:show-add="false"
|
||||
:show-remove="false"
|
||||
title="照片列表"
|
||||
@@ -227,6 +228,12 @@ const ageText = computed(() => customer.value?.age === undefined || customer.val
|
||||
const photoList = computed(() => (customer.value?.attachmentList || [])
|
||||
.filter(item => !!item.id)
|
||||
.map(item => AttachmentAPI.getReadURL(item.id || "")));
|
||||
const photoItemList = computed(() => (customer.value?.attachmentList || [])
|
||||
.filter(item => !!item.id)
|
||||
.map(item => ({
|
||||
attachType: item.attachType || "PHOTO",
|
||||
url: AttachmentAPI.getReadURL(item.id || "")
|
||||
})));
|
||||
const selectedAreas = computed<BodyAreaValue>({
|
||||
get() {
|
||||
return normalizeBodyAreaValue(customer.value?.conditioningPart);
|
||||
|
||||
@@ -52,25 +52,15 @@
|
||||
borderless
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label="照片">
|
||||
<photo-field
|
||||
v-model="photoURL"
|
||||
alt-text="客户照片"
|
||||
<t-form-item label-width="0">
|
||||
<photo-scroller
|
||||
v-model="photoList"
|
||||
:photo-items="photoItemList"
|
||||
:add-actions="photoAddActions"
|
||||
:loading="isPhotoUploading"
|
||||
:preview="false"
|
||||
@add="openPhotoPicker('photo')"
|
||||
@clear="handlePhotoClear"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label="积分卡">
|
||||
<photo-field
|
||||
v-model="pointCardURL"
|
||||
add-text="拍积分卡"
|
||||
alt-text="积分卡"
|
||||
:loading="isPointCardUploading"
|
||||
:preview="false"
|
||||
@add="openPhotoPicker('pointCard')"
|
||||
@clear="handlePointCardClear"
|
||||
@add-photo="openPhotoPicker('PHOTO')"
|
||||
@add-point-card="openPhotoPicker('POINT_CARD')"
|
||||
@add-other="openPhotoPicker('OTHER')"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label="性别">
|
||||
@@ -185,11 +175,11 @@ import CustomerAPI from "@/api/CustomerAPI";
|
||||
import BodyAreaSelector from "@/components/BodyAreaSelector.vue";
|
||||
import CodeScanner from "@/components/CodeScanner.vue";
|
||||
import CustomerSelector from "@/components/CustomerSelector.vue";
|
||||
import PhotoField from "@/components/PhotoField.vue";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
||||
import { useSettingStore } from "@/store/settingStore";
|
||||
import type { BodyAreaValue, Customer } from "@/types/Customer";
|
||||
import { createBodyAreaValue, getCustomerPhotoURL, getCustomerPointCardURL, normalizeBodyAreaValue } from "@/utils/customer";
|
||||
import type { BodyAreaValue, Customer, CustomerAttachmentType, EditableCustomerPhoto } from "@/types/Customer";
|
||||
import { createBodyAreaValue, normalizeBodyAreaValue } from "@/utils/customer";
|
||||
import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
|
||||
import { compressUploadImage } from "@/utils/imageCompression";
|
||||
|
||||
@@ -287,22 +277,43 @@ async function handleIntroducerChange(id: string): Promise<void> {
|
||||
// ---------- 表单 ----------
|
||||
|
||||
const photoInputRef = ref<HTMLInputElement>();
|
||||
type PhotoPickerTarget = "photo" | "pointCard";
|
||||
const photoPickerTarget = ref<PhotoPickerTarget>("photo");
|
||||
const photoTempFileId = ref("");
|
||||
const photoAddActions = [
|
||||
{
|
||||
icon: "user-avatar",
|
||||
text: "拍照片",
|
||||
emit: "add-photo",
|
||||
theme: "primary"
|
||||
},
|
||||
{
|
||||
icon: "cardmembership",
|
||||
text: "拍积分卡",
|
||||
emit: "add-point-card",
|
||||
theme: "primary"
|
||||
},
|
||||
{
|
||||
icon: "file-attachment",
|
||||
text: "其他文件",
|
||||
emit: "add-other",
|
||||
theme: "default"
|
||||
}
|
||||
] as const;
|
||||
const photoPickerTarget = ref<CustomerAttachmentType>("PHOTO");
|
||||
const isPhotoUploading = ref(false);
|
||||
const photoURL = ref();
|
||||
const pointCardTempFileId = ref("");
|
||||
const isPointCardUploading = ref(false);
|
||||
const pointCardURL = ref("");
|
||||
const originalAttachmentList = ref<Attachment[]>([]);
|
||||
const photoChanged = ref(false);
|
||||
const pointCardChanged = ref(false);
|
||||
const photoItemList = ref<EditableCustomerPhoto[]>([]);
|
||||
const photoList = computed<string[]>({
|
||||
get() {
|
||||
return photoItemList.value.map(item => item.url);
|
||||
},
|
||||
set(value) {
|
||||
const urlSet = new Set(value);
|
||||
photoItemList.value = photoItemList.value.filter(item => urlSet.has(item.url));
|
||||
}
|
||||
});
|
||||
const selectedAreas = ref<BodyAreaValue>(createBodyAreaValue());
|
||||
const formData = reactive<Customer>({
|
||||
});
|
||||
|
||||
function openPhotoPicker(target: PhotoPickerTarget): void {
|
||||
function openPhotoPicker(target: CustomerAttachmentType): void {
|
||||
photoPickerTarget.value = target;
|
||||
photoInputRef.value?.click();
|
||||
}
|
||||
@@ -369,13 +380,13 @@ async function loadDetail() {
|
||||
const customer = await CustomerAPI.detail(id);
|
||||
Object.assign(formData, customer);
|
||||
formData.storeId = customer.storeId || formData.storeId;
|
||||
photoURL.value = getCustomerPhotoURL(customer);
|
||||
pointCardURL.value = getCustomerPointCardURL(customer);
|
||||
originalAttachmentList.value = [...(customer.attachmentList || [])];
|
||||
photoTempFileId.value = "";
|
||||
pointCardTempFileId.value = "";
|
||||
photoChanged.value = false;
|
||||
pointCardChanged.value = false;
|
||||
photoItemList.value = (customer.attachmentList || [])
|
||||
.filter(item => !!item.id)
|
||||
.map(item => ({
|
||||
attachment: item,
|
||||
attachType: normalizeAttachmentType(item.attachType),
|
||||
url: AttachmentAPI.getReadURL(item.id || "")
|
||||
}));
|
||||
selectedAreas.value = normalizeBodyAreaValue(customer.conditioningPart);
|
||||
introducerCustomerId.value = customer.introducerCustomerId || customer.introducerCustomer?.id || "";
|
||||
} catch (err) {
|
||||
@@ -409,50 +420,37 @@ watch(() => formData.birthdate, (value) => {
|
||||
|
||||
// ---------- 照片 ----------
|
||||
|
||||
function normalizeAttachmentType(attachType?: string): CustomerAttachmentType {
|
||||
if (attachType === "POINT_CARD" || attachType === "OTHER") {
|
||||
return attachType;
|
||||
}
|
||||
|
||||
return "PHOTO";
|
||||
}
|
||||
|
||||
async function handlePhotoSelected(event: Event): Promise<void> {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
const isPointCard = photoPickerTarget.value === "pointCard";
|
||||
if (isPointCard) {
|
||||
isPointCardUploading.value = true;
|
||||
} else {
|
||||
isPhotoUploading.value = true;
|
||||
}
|
||||
isPhotoUploading.value = true;
|
||||
try {
|
||||
const compressedFile = await compressUploadImage(file);
|
||||
const [tempFile] = await AttachmentAPI.upload(compressedFile);
|
||||
if (isPointCard) {
|
||||
pointCardTempFileId.value = tempFile.id;
|
||||
pointCardURL.value = AttachmentAPI.getTempReadURL(tempFile.id);
|
||||
pointCardChanged.value = true;
|
||||
} else {
|
||||
photoTempFileId.value = tempFile.id;
|
||||
photoURL.value = AttachmentAPI.getTempReadURL(tempFile.id);
|
||||
photoChanged.value = true;
|
||||
if (tempFile?.id) {
|
||||
photoItemList.value.push({
|
||||
attachType: photoPickerTarget.value,
|
||||
tempFileId: tempFile.id,
|
||||
url: AttachmentAPI.getTempReadURL(tempFile.id)
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
if (isPointCard) {
|
||||
isPointCardUploading.value = false;
|
||||
} else {
|
||||
isPhotoUploading.value = false;
|
||||
}
|
||||
isPhotoUploading.value = false;
|
||||
input.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
function handlePhotoClear(): void {
|
||||
photoTempFileId.value = "";
|
||||
photoChanged.value = true;
|
||||
}
|
||||
|
||||
function handlePointCardClear(): void {
|
||||
pointCardTempFileId.value = "";
|
||||
pointCardChanged.value = true;
|
||||
}
|
||||
|
||||
// ---------- 保存 ----------
|
||||
|
||||
const isSubmitting = ref(false);
|
||||
@@ -493,19 +491,18 @@ async function doSubmit(): Promise<void> {
|
||||
}
|
||||
|
||||
function buildAttachmentList(): Attachment[] {
|
||||
let attachmentList = [...originalAttachmentList.value];
|
||||
if (photoChanged.value) {
|
||||
attachmentList = replaceAttachment(attachmentList, "PHOTO", photoTempFileId.value);
|
||||
}
|
||||
if (pointCardChanged.value) {
|
||||
attachmentList = replaceAttachment(attachmentList, "POINT_CARD", pointCardTempFileId.value);
|
||||
}
|
||||
return attachmentList;
|
||||
}
|
||||
|
||||
function replaceAttachment(attachmentList: Attachment[], attachType: "PHOTO" | "POINT_CARD", tempFileId: string): Attachment[] {
|
||||
const preservedList = attachmentList.filter(item => item.attachType !== attachType);
|
||||
return tempFileId ? [...preservedList, { attachType, tempFileId }] : preservedList;
|
||||
return photoItemList.value.flatMap(item => {
|
||||
if (item.attachment) {
|
||||
return [item.attachment];
|
||||
}
|
||||
if (item.tempFileId) {
|
||||
return [{
|
||||
attachType: item.attachType,
|
||||
tempFileId: item.tempFileId
|
||||
}];
|
||||
}
|
||||
return [];
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -48,14 +48,16 @@
|
||||
</template>
|
||||
</t-input>
|
||||
</t-form-item>
|
||||
<t-form-item label="客户照片">
|
||||
<photo-field
|
||||
v-model="customerPhoto"
|
||||
alt-text="客户照片"
|
||||
<t-form-item label-width="0">
|
||||
<photo-scroller
|
||||
title="客户照片列表"
|
||||
v-model="customerPhotoList"
|
||||
:photo-items="customerPhotoItemList"
|
||||
:add-actions="customerPhotoAddActions"
|
||||
:loading="customerPhotoUploading"
|
||||
:preview="false"
|
||||
@add="openCustomerPhotoPicker"
|
||||
@clear="customerPhotoTempFileId = ''"
|
||||
@add-photo="openCustomerPhotoPicker('PHOTO')"
|
||||
@add-point-card="openCustomerPhotoPicker('POINT_CARD')"
|
||||
@add-other="openCustomerPhotoPicker('OTHER')"
|
||||
/>
|
||||
</t-form-item>
|
||||
<t-form-item label-width="0">
|
||||
@@ -134,20 +136,18 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { AttachmentAPI, Toolkit, useUserStore } from "timi-web";
|
||||
import { AttachmentAPI, Toolkit, useUserStore, type Attachment } from "timi-web";
|
||||
import type { TdInputProps } from "tdesign-mobile-vue";
|
||||
import { Toast } from "tdesign-mobile-vue";
|
||||
import CustomerAPI from "@/api/CustomerAPI";
|
||||
import EventAPI from "@/api/EventAPI";
|
||||
import CodeScanner from "@/components/CodeScanner.vue";
|
||||
import CustomerSelector from "@/components/CustomerSelector.vue";
|
||||
import PhotoField from "@/components/PhotoField.vue";
|
||||
import PhotoScroller from "@/components/PhotoScroller.vue";
|
||||
import { useSettingStore } from "@/store/settingStore";
|
||||
import type { Customer } from "@/types/Customer";
|
||||
import type { EventItem } from "@/types/EventItem";
|
||||
import type { PointAction } from "@/types/Point";
|
||||
import { getCustomerPhotoURL } from "@/utils/customer";
|
||||
import { getEventNumberValuePlaceholder, resolveEventNumberValue } from "@/utils/eventValue";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
import { loadSourceValueConfig, type SourceValueConfig } from "@/utils/point";
|
||||
@@ -254,6 +254,14 @@ type QuickPhoto = {
|
||||
url: string;
|
||||
};
|
||||
|
||||
type CustomerAttachmentType = "PHOTO" | "POINT_CARD" | "OTHER";
|
||||
type QuickCustomerPhoto = {
|
||||
attachment?: Attachment;
|
||||
attachType: CustomerAttachmentType;
|
||||
tempFileId?: string;
|
||||
url: string;
|
||||
};
|
||||
|
||||
// ---------- 扫码 ----------
|
||||
const scanCode = ref("");
|
||||
const currentCode = ref("");
|
||||
@@ -474,18 +482,61 @@ function getCustomerName(customer?: Customer): string {
|
||||
}
|
||||
|
||||
// ---------- 客户照片 ----------
|
||||
const customerPhoto = ref("");
|
||||
const customerPhotoTempFileId = ref("");
|
||||
const customerPhotoAddActions = [
|
||||
{
|
||||
icon: "user-avatar",
|
||||
text: "拍照片",
|
||||
emit: "add-photo",
|
||||
theme: "primary"
|
||||
},
|
||||
{
|
||||
icon: "cardmembership",
|
||||
text: "拍积分卡",
|
||||
emit: "add-point-card",
|
||||
theme: "primary"
|
||||
},
|
||||
{
|
||||
icon: "file-attachment",
|
||||
text: "其他文件",
|
||||
emit: "add-other",
|
||||
theme: "default"
|
||||
}
|
||||
] as const;
|
||||
const customerPhotoItemList = ref<QuickCustomerPhoto[]>([]);
|
||||
const customerPhotoInputRef = ref<HTMLInputElement>();
|
||||
const customerPhotoUploading = ref(false);
|
||||
const customerPhotoPickerTarget = ref<CustomerAttachmentType>("PHOTO");
|
||||
const customerPhotoList = computed<string[]>({
|
||||
get() {
|
||||
return customerPhotoItemList.value.map(item => item.url);
|
||||
},
|
||||
set(value) {
|
||||
const urlSet = new Set(value);
|
||||
customerPhotoItemList.value = customerPhotoItemList.value.filter(item => urlSet.has(item.url));
|
||||
}
|
||||
});
|
||||
|
||||
function openCustomerPhotoPicker(): void {
|
||||
function openCustomerPhotoPicker(target: CustomerAttachmentType): void {
|
||||
customerPhotoPickerTarget.value = target;
|
||||
customerPhotoInputRef.value?.click();
|
||||
}
|
||||
|
||||
function syncCustomerPhoto(customer?: Customer): void {
|
||||
customerPhotoTempFileId.value = "";
|
||||
customerPhoto.value = getCustomerPhotoURL(customer);
|
||||
customerPhotoItemList.value = (customer?.attachmentList || [])
|
||||
.filter(item => !!item.id)
|
||||
.map(item => ({
|
||||
attachment: item,
|
||||
attachType: normalizeCustomerAttachmentType(item.attachType),
|
||||
url: AttachmentAPI.getReadURL(item.id || "")
|
||||
}));
|
||||
}
|
||||
|
||||
function normalizeCustomerAttachmentType(attachType?: string): CustomerAttachmentType {
|
||||
if (attachType === "POINT_CARD" || attachType === "OTHER") {
|
||||
return attachType;
|
||||
}
|
||||
|
||||
return "PHOTO";
|
||||
}
|
||||
|
||||
async function handleCustomerPhotoSelected(event: Event): Promise<void> {
|
||||
@@ -502,8 +553,11 @@ async function handleCustomerPhotoSelected(event: Event): Promise<void> {
|
||||
showToast("客户照片上传失败", "warning");
|
||||
return;
|
||||
}
|
||||
customerPhotoTempFileId.value = tempFile.id;
|
||||
customerPhoto.value = AttachmentAPI.getTempReadURL(tempFile.id);
|
||||
customerPhotoItemList.value.push({
|
||||
attachType: customerPhotoPickerTarget.value,
|
||||
tempFileId: tempFile.id,
|
||||
url: AttachmentAPI.getTempReadURL(tempFile.id)
|
||||
});
|
||||
} finally {
|
||||
customerPhotoUploading.value = false;
|
||||
input.value = "";
|
||||
@@ -579,11 +633,9 @@ async function saveRecord(): Promise<void> {
|
||||
}))
|
||||
};
|
||||
// 客户照片
|
||||
if (customerPhotoTempFileId.value) {
|
||||
customer.attachmentList = [{
|
||||
tempFileId: customerPhotoTempFileId.value,
|
||||
attachType: "PHOTO"
|
||||
}];
|
||||
const customerAttachmentList = buildCustomerAttachmentList();
|
||||
if (customerAttachmentList.length) {
|
||||
customer.attachmentList = customerAttachmentList;
|
||||
}
|
||||
// 记录照片
|
||||
if (Toolkit.isNotEmpty(customer.eventRecordList)) {
|
||||
@@ -618,9 +670,8 @@ function resetFormAfterSubmit(): void {
|
||||
selectedCustomerId.value = "";
|
||||
currentCustomer.value = undefined;
|
||||
boundCodeCustomer.value = undefined;
|
||||
customerPhoto.value = "";
|
||||
customerPhotoTempFileId.value = "";
|
||||
recordPhotoItemList.value = [];
|
||||
customerPhotoItemList.value = [];
|
||||
recordPhotoItemList.value = [];
|
||||
pointValueText.value = "";
|
||||
for (const eventId of Object.keys(numberValueTextMap)) {
|
||||
delete numberValueTextMap[eventId];
|
||||
@@ -628,6 +679,21 @@ function resetFormAfterSubmit(): void {
|
||||
refreshInputTips();
|
||||
}
|
||||
|
||||
function buildCustomerAttachmentList(): Attachment[] {
|
||||
return customerPhotoItemList.value.flatMap(item => {
|
||||
if (item.attachment) {
|
||||
return [item.attachment];
|
||||
}
|
||||
if (item.tempFileId) {
|
||||
return [{
|
||||
attachType: item.attachType,
|
||||
tempFileId: item.tempFileId
|
||||
}];
|
||||
}
|
||||
return [];
|
||||
});
|
||||
}
|
||||
|
||||
function validateForm(): string {
|
||||
const customerCode = (currentCode.value || scanCode.value).trim();
|
||||
if (!customerCode) {
|
||||
|
||||
@@ -32,9 +32,13 @@ export type Customer = {
|
||||
attachmentList?: Attachment[];
|
||||
} & Model;
|
||||
|
||||
export type CustomerSearchReq = {
|
||||
keyword?: string;
|
||||
introducerCustomerId?: string;
|
||||
export type CustomerAttachmentType = "PHOTO" | "POINT_CARD" | "OTHER";
|
||||
|
||||
export type EditableCustomerPhoto = {
|
||||
attachment?: Attachment;
|
||||
attachType: CustomerAttachmentType;
|
||||
tempFileId?: string;
|
||||
url: string;
|
||||
};
|
||||
|
||||
export type CustomerTrendStatReq = {
|
||||
|
||||
Reference in New Issue
Block a user