update EventRecordEdit.vue style

This commit is contained in:
Timi
2026-09-01 16:27:53 +08:00
parent bfea58f714
commit 9c5306d8e4
30 changed files with 583 additions and 621 deletions
+1 -1
View File
@@ -84,7 +84,7 @@ html.theme-dark body {
gap: 1rem; gap: 1rem;
} }
.load-state { .center-tips {
color: var(--tui-gray); color: var(--tui-gray);
padding: .75rem; padding: .75rem;
text-align: center; text-align: center;
+1 -1
View File
@@ -261,7 +261,7 @@ onUnmounted(() => {
background: rgba(15, 23, 42, .96); background: rgba(15, 23, 42, .96);
} }
.load-state { .center-tips {
color: #94a3b8; color: #94a3b8;
} }
} }
+41 -4
View File
@@ -2,16 +2,19 @@
<div class="event-selector"> <div class="event-selector">
<p v-if="props.label" class="t-form__label" :class="{required: props.requiredMark}" v-text="props.label" /> <p v-if="props.label" class="t-form__label" :class="{required: props.requiredMark}" v-text="props.label" />
<div v-if="props.eventList.length" class="group" role="group"> <div v-if="props.eventList.length" class="group" role="group">
<button <div
v-for="(item, index) in props.eventList" v-for="(item, index) in props.eventList"
:key="item.id || item.name" :key="item.id || item.name"
class="item-wrapper"
v-entrance-transition="index * 30"
>
<button
type="button" type="button"
class="item bg-white" class="item bg-white"
:class="{selected: isSelected(item)}" :class="{selected: isSelected(item), 'package-event': item.bizType === 'PACKAGE_PURCHASE'}"
:title="item.name" :title="item.name"
:disabled="props.disabled || !normalizeEventId(item)" :disabled="props.disabled || !normalizeEventId(item)"
:aria-pressed="isSelected(item)" :aria-pressed="isSelected(item)"
v-entrance-transition="index * 30"
@click="toggleEvent(item)" @click="toggleEvent(item)"
> >
<span <span
@@ -22,6 +25,12 @@
<span class="clip-text" v-text="item.name" /> <span class="clip-text" v-text="item.name" />
<span v-if="isSelected(item)" class="mark" aria-hidden="true" /> <span v-if="isSelected(item)" class="mark" aria-hidden="true" />
</button> </button>
<span
v-if="item.bizType === 'PACKAGE_PURCHASE'"
class="package-badge white clip-text"
v-text="item.packageConfig?.name || '未配置套餐'"
/>
</div>
</div> </div>
<div v-else class="empty-block">暂无可用登记事件</div> <div v-else class="empty-block">暂无可用登记事件</div>
</div> </div>
@@ -35,12 +44,16 @@ interface Props {
label?: string; label?: string;
requiredMark?: boolean; requiredMark?: boolean;
disabled?: boolean; disabled?: boolean;
selectionMode?: SelectionMode;
} }
type SelectionMode = "single" | "multiple";
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
label: "登记事件", label: "登记事件",
requiredMark: false, requiredMark: false,
disabled: false disabled: false,
selectionMode: "multiple"
}); });
const modelValue = defineModel<string[]>({ required: true }); const modelValue = defineModel<string[]>({ required: true });
@@ -63,6 +76,10 @@ function toggleEvent(item: EventItem): void {
if (props.disabled || !eventId) { if (props.disabled || !eventId) {
return; return;
} }
if (props.selectionMode === "single") {
modelValue.value = [eventId];
return;
}
if (modelValue.value.includes(eventId)) { if (modelValue.value.includes(eventId)) {
modelValue.value = modelValue.value.filter(id => id !== eventId); modelValue.value = modelValue.value.filter(id => id !== eventId);
return; return;
@@ -94,6 +111,26 @@ function toggleEvent(item: EventItem): void {
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
.item-wrapper {
width: 100%;
min-width: 0;
position: relative;
.package-badge {
top: -.375rem;
right: -.375rem;
z-index: 1;
padding: .125rem .375rem;
position: absolute;
max-width: 50%;
font-size: .6875rem;
line-height: 1.25;
background: var(--td-error-color);
border-radius: .35rem;
pointer-events: none;
}
}
.item { .item {
gap: .5rem; gap: .5rem;
width: 100%; width: 100%;
+3 -3
View File
@@ -66,8 +66,8 @@
</template> </template>
</t-swipe-cell> </t-swipe-cell>
</t-cell-group> </t-cell-group>
<div v-if="!pageResult.list.length" class="load-state" v-text="isLoading ? '正在加载客户' : '暂无客户数据'" /> <div v-if="!pageResult.list.length" class="center-tips" v-text="isLoading ? '正在加载客户' : '暂无客户数据'" />
<div v-if="pageResult.list.length" class="load-state" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" /> <div v-if="pageResult.list.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
</t-pull-down-refresh> </t-pull-down-refresh>
<tag-selector <tag-selector
v-model="selectedTagIdList" v-model="selectedTagIdList"
@@ -370,7 +370,7 @@ async function doExport(): Promise<void> {
.items { .items {
.load-state, .center-tips,
.item, .item,
.empty-block { .empty-block {
color: #e2e8f0; color: #e2e8f0;
+1 -1
View File
@@ -69,7 +69,7 @@
</t-swipe-cell> </t-swipe-cell>
</t-cell-group> </t-cell-group>
<div v-if="!visibleEventList.length" class="empty-block" v-text="emptyText" /> <div v-if="!visibleEventList.length" class="empty-block" v-text="emptyText" />
<div v-if="visibleEventList.length" class="load-state" v-text="isNoMore ? '已经到底了' : '上拉加载更多'" /> <div v-if="visibleEventList.length" class="center-tips" v-text="isNoMore ? '已经到底了' : '上拉加载更多'" />
</t-pull-down-refresh> </t-pull-down-refresh>
</div> </div>
<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" /> <nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
+80 -119
View File
@@ -50,17 +50,19 @@
class="event-selector" class="event-selector"
:event-list="eventList" :event-list="eventList"
:disabled="isEditMode" :disabled="isEditMode"
:selection-mode="isPackagePurchaseSelected ? 'single' : 'multiple'"
required-mark required-mark
@update:model-value="handleEventSelectionChange" @update:model-value="handleEventSelectionChange"
/> />
<event-option-selector <event-option-selector
v-if="!isPackagePurchaseSelected"
class="option-selector" class="option-selector"
v-model="selectedOptionSelectionMap" v-model="selectedOptionSelectionMap"
:event-list="eventList" :event-list="eventList"
:selected-event-id-list="selectedEventIdList" :selected-event-id-list="selectedEventIdList"
:disabled="isSaving" :disabled="isSaving"
/> />
<div v-if="!isEditMode && selectedNumberEventList.length" class="event-value-list"> <div v-if="!isEditMode && !isPackagePurchaseSelected && selectedNumberEventList.length" class="event-value-list">
<t-form-item <t-form-item
v-for="item in selectedNumberEventList" v-for="item in selectedNumberEventList"
:key="item.id" :key="item.id"
@@ -77,6 +79,13 @@
/> />
</t-form-item> </t-form-item>
</div> </div>
<package-purchase-form
v-if="isPackagePurchaseSelected"
v-model:item-list="packagePurchaseItemList"
v-model:sale-amount="saleAmountText"
:can-price-override="canPriceOverride"
:package-config="selectedPackageConfig"
/>
<t-form-item v-if="showSourceValueInput" label="积分动作"> <t-form-item v-if="showSourceValueInput" label="积分动作">
<span class="picker-text" v-text="getPointActionText(sourceValueAction)" /> <span class="picker-text" v-text="getPointActionText(sourceValueAction)" />
</t-form-item> </t-form-item>
@@ -111,7 +120,7 @@
<t-form-item v-else label="登记时间" content-align="right"> <t-form-item v-else label="登记时间" content-align="right">
<span class="readonly-time" v-text="registeredAtText || '此刻'" /> <span class="readonly-time" v-text="registeredAtText || '此刻'" />
</t-form-item> </t-form-item>
<t-form-item label="登记备注"> <t-form-item :label="isPackagePurchaseSelected ? '购买备注' : '登记备注'">
<t-textarea <t-textarea
v-model.trim="note" v-model.trim="note"
class="textarea" class="textarea"
@@ -157,7 +166,7 @@
v-if="!isEditMode" v-if="!isEditMode"
v-model="selectedCustomerIdList" v-model="selectedCustomerIdList"
v-model:visible="selectorVisible" v-model:visible="selectorVisible"
:selection-mode="isEditMode ? 'single' : 'multiple'" :selection-mode="isEditMode || isPackagePurchaseSelected ? 'single' : 'multiple'"
@change="handleCustomerChange" @change="handleCustomerChange"
/> />
<t-popup v-model="selectedCustomerListVisible" placement="bottom"> <t-popup v-model="selectedCustomerListVisible" placement="bottom">
@@ -201,7 +210,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { Time } from "timi-web"; import { Time } from "timi-web";
import { AttachmentAPI, type Attachment, useUserStore } from "timi-web-api"; import { useUserStore } from "timi-web-api";
import { Message } from "@/utils/message"; import { Message } from "@/utils/message";
import CustomerAPI from "@/api/CustomerAPI"; import CustomerAPI from "@/api/CustomerAPI";
import EventAPI from "@/api/EventAPI"; import EventAPI from "@/api/EventAPI";
@@ -213,20 +222,21 @@ import CustomerSelector from "@/components/CustomerSelector.vue";
import EventOptionSelector from "@/components/EventOptionSelector.vue"; import EventOptionSelector from "@/components/EventOptionSelector.vue";
import PhotoScroller from "@/components/PhotoScroller.vue"; import PhotoScroller from "@/components/PhotoScroller.vue";
import EventSelector from "@/components/EventSelector.vue"; import EventSelector from "@/components/EventSelector.vue";
import PackagePurchaseForm from "@/pages/event/component/PackagePurchaseForm.vue";
import { useEventRecordPhoto } from "@/pages/event/component/useEventRecordPhoto";
import { usePackagePurchaseRecord } from "@/pages/event/component/usePackagePurchaseRecord";
import { useNavBarStore } from "@/store/navBarStore"; import { useNavBarStore } from "@/store/navBarStore";
import { useSettingStore } from "@/store/settingStore"; import { useSettingStore } from "@/store/settingStore";
import type { Customer } from "@/types/Customer"; import type { Customer } from "@/types/Customer";
import type { EventItem, EventOptionSelectionMap } from "@/types/EventItem"; import type { EventItem, EventOptionSelectionMap } from "@/types/EventItem";
import type { EventRecord } from "@/types/EventRecord"; import type { EventRecord } from "@/types/EventRecord";
import type { PointAction } from "@/types/Point"; import type { PointAction } from "@/types/Point";
import { getAttachmentReadURL } from "@/utils/attachment";
import { isPackagePurchaseEvent } from "@/utils/event"; import { isPackagePurchaseEvent } from "@/utils/event";
import { buildEventOptionSelectionMap, resolveSelectedOptionGroupList, validateEventOptionSelection } from "@/utils/eventOption"; import { buildEventOptionSelectionMap, resolveSelectedOptionGroupList, validateEventOptionSelection } from "@/utils/eventOption";
import { getEventRecordPhotoURL, hasPhotoAttachment } from "@/utils/eventRecord"; import { getEventRecordPhotoURL, hasPhotoAttachment } from "@/utils/eventRecord";
import { getEventNumberValuePlaceholder, resolveEventNumberValue } from "@/utils/eventValue"; import { getEventNumberValuePlaceholder, resolveEventNumberValue } from "@/utils/eventValue";
import { permissionCodes } from "@/utils/permission"; import { permissionCodes } from "@/utils/permission";
import { loadSourceValueConfig, type SourceValueConfig } from "@/utils/point"; import { loadSourceValueConfig, type SourceValueConfig } from "@/utils/point";
import { compressUploadImageList } from "@/utils/imageCompression";
defineOptions({ defineOptions({
name: "EventRecordEdit" name: "EventRecordEdit"
@@ -238,14 +248,6 @@ const settingStore = useSettingStore();
const userStore = useUserStore(); const userStore = useUserStore();
const navBarStore = useNavBarStore(); const navBarStore = useNavBarStore();
type EditablePhoto = {
attachment?: Partial<Attachment>;
attachType?: string;
previewUrl?: string;
tempFileId?: string;
url: string;
};
// ---------- 路由权限 ---------- // ---------- 路由权限 ----------
const routeId = computed(() => String(route.params.id || "")); const routeId = computed(() => String(route.params.id || ""));
@@ -329,10 +331,10 @@ async function loadSelectedCustomer(): Promise<void> {
} }
if (customer.id) { if (customer.id) {
selectedCustomerIdList.value = isEditMode.value selectedCustomerIdList.value = isEditMode.value || isPackagePurchaseSelected.value
? [customer.id] ? [customer.id]
: [...new Set([...selectedCustomerIdList.value, customer.id])]; : [...new Set([...selectedCustomerIdList.value, customer.id])];
selectedCustomerList.value = isEditMode.value selectedCustomerList.value = isEditMode.value || isPackagePurchaseSelected.value
? [customer] ? [customer]
: [...selectedCustomerList.value.filter(item => item.id !== customer.id), customer]; : [...selectedCustomerList.value.filter(item => item.id !== customer.id), customer];
} }
@@ -436,27 +438,6 @@ const eventNameMap = computed(() => {
return map; return map;
}); });
async function handleEventSelectionChange(eventIdList: string[]): Promise<void> {
const packageEvent = eventIdList
.map(eventId => eventList.value.find(item => item.id === eventId))
.find(item => isPackagePurchaseEvent(item));
if (!isEditMode.value && packageEvent?.id) {
if (!userStore.hasPermissions(permissionCodes.customerPackage.create)) {
Message.warning("当前账号没有套餐购买权限");
return;
}
await router.push({
name: "CustomerPackagePurchase",
query: {
eventId: packageEvent.id,
...(selectedCustomer.value?.id ? { customerId: selectedCustomer.value.id } : {})
}
});
return;
}
selectedEventIdList.value = eventIdList;
}
function appendRecordEvent(record: EventRecord): void { function appendRecordEvent(record: EventRecord): void {
if (!record.event?.id || eventList.value.some(item => item.id === record.event?.id)) { if (!record.event?.id || eventList.value.some(item => item.id === record.event?.id)) {
return; return;
@@ -519,6 +500,7 @@ let sourceValueLoadToken = 0;
const showSourceValueInput = computed(() => ( const showSourceValueInput = computed(() => (
!isEditMode.value !isEditMode.value
&& !isPackagePurchaseSelected.value
&& userStore.hasPermissions(permissionCodes.point.sourceValue) && userStore.hasPermissions(permissionCodes.point.sourceValue)
&& !!sourceValueConfig.value && !!sourceValueConfig.value
)); ));
@@ -531,7 +513,7 @@ async function loadSourceValueRule(): Promise<void> {
const token = sourceValueLoadToken + 1; const token = sourceValueLoadToken + 1;
sourceValueLoadToken = token; sourceValueLoadToken = token;
sourceValueConfig.value = undefined; sourceValueConfig.value = undefined;
if (isEditMode.value || !userStore.hasPermissions(permissionCodes.point.sourceValue) || !selectedEventIdList.value.length) { if (isEditMode.value || isPackagePurchaseSelected.value || !userStore.hasPermissions(permissionCodes.point.sourceValue) || !selectedEventIdList.value.length) {
return; return;
} }
@@ -557,48 +539,17 @@ function getPointActionText(action: PointAction): string {
// ---------- 照片 ---------- // ---------- 照片 ----------
const recordPhotoInputRef = ref<HTMLInputElement>(); const {
const photoItemList = ref<EditablePhoto[]>([]); recordPhotoInputRef,
const isPhotoUploading = ref(false); photoItemList,
isPhotoUploading,
const photoList = computed<string[]>({ photoList,
get() { capturePhoto,
return photoItemList.value.map(item => item.url); handleRecordPhotoSelected,
}, setExistingPhotoList,
set(value) { buildTempFileIdList,
const urlSet = new Set(value); buildPhotoAttachmentList
photoItemList.value = photoItemList.value.filter(item => urlSet.has(item.url)); } = useEventRecordPhoto();
}
});
function capturePhoto(): void {
recordPhotoInputRef.value?.click();
}
async function handleRecordPhotoSelected(event: Event): Promise<void> {
const input = event.target as HTMLInputElement;
const fileList = Array.from(input.files || []);
if (!fileList.length) {
return;
}
isPhotoUploading.value = true;
try {
const compressedFileList = await compressUploadImageList(fileList);
const tempFileList = await AttachmentAPI.upload(compressedFileList);
for (const item of tempFileList) {
if (!item.id) {
continue;
}
photoItemList.value.push({
tempFileId: item.id,
url: AttachmentAPI.getTempReadURL(item.id)
});
}
} finally {
isPhotoUploading.value = false;
input.value = "";
}
}
// ---------- 登记时间 ---------- // ---------- 登记时间 ----------
@@ -640,6 +591,28 @@ function parseDateTime(value: string): Date {
// ---------- 提交 ---------- // ---------- 提交 ----------
const note = ref(""); const note = ref("");
const {
selectedPackageEvent,
isPackagePurchaseSelected,
selectedPackageConfig,
canPriceOverride,
saleAmountText,
packagePurchaseItemList,
handleEventSelectionChange,
applySelectedPackageEvent,
resetPackagePurchaseForm,
submitPackagePurchase,
validatePackagePurchaseForm
} = usePackagePurchaseRecord({
eventList,
selectedEventIdList,
selectedCustomerIdList,
selectedCustomerList,
note,
hasPermission: permissionCode => userStore.hasPermissions(permissionCode),
buildRegisteredAt,
buildTempFileIdList
});
const isSaving = ref(false); const isSaving = ref(false);
const editingRecord = ref<EventRecord>(); const editingRecord = ref<EventRecord>();
@@ -662,6 +635,22 @@ async function submitRecord(): Promise<void> {
return; return;
} }
const success = isPackagePurchaseSelected.value
? await submitPackagePurchase()
: await submitEventRecords();
if (!success) {
return;
}
resetCreateForm();
await loadRecentRecordList();
await settingStore.playRegisterSuccessSound();
Message.success(isPackagePurchaseSelected.value ? "套餐购买已提交" : "登记已提交");
await router.replace("/customers");
} finally {
isSaving.value = false;
}
}
async function submitEventRecords(): Promise<boolean> {
const customerIdList = selectedCustomerList.value.map(customer => customer.id).filter((item): item is string => !!item); const customerIdList = selectedCustomerList.value.map(customer => customer.id).filter((item): item is string => !!item);
// 后端批量接口仍按选择顺序逐条处理,并为重复临时附件生成副本。 // 后端批量接口仍按选择顺序逐条处理,并为重复临时附件生成副本。
await EventRecordAPI.createBatch(selectedEventIdList.value.map(eventId => ({ await EventRecordAPI.createBatch(selectedEventIdList.value.map(eventId => ({
@@ -677,6 +666,10 @@ async function submitRecord(): Promise<void> {
attachType: "PHOTO" attachType: "PHOTO"
})) }))
}))); })));
return true;
}
function resetCreateForm(): void {
selectedCustomerList.value = []; selectedCustomerList.value = [];
selectedCustomerIdList.value = []; selectedCustomerIdList.value = [];
note.value = ""; note.value = "";
@@ -688,12 +681,10 @@ async function submitRecord(): Promise<void> {
for (const eventId of Object.keys(selectedOptionSelectionMap)) { for (const eventId of Object.keys(selectedOptionSelectionMap)) {
delete selectedOptionSelectionMap[eventId]; delete selectedOptionSelectionMap[eventId];
} }
await loadRecentRecordList(); if (selectedPackageEvent.value) {
await settingStore.playRegisterSuccessSound(); applySelectedPackageEvent(selectedPackageEvent.value);
Message.success("登记已提交"); } else {
await router.replace("/customers"); resetPackagePurchaseForm();
} finally {
isSaving.value = false;
} }
} }
@@ -706,9 +697,8 @@ function validateForm(): boolean {
Message.warning("请至少选择一个登记事件"); Message.warning("请至少选择一个登记事件");
return false; return false;
} }
if (selectedEventIdList.value.some(eventId => isPackagePurchaseEvent(eventList.value.find(item => item.id === eventId)))) { if (isPackagePurchaseSelected.value) {
Message.warning("套餐购买事件必须通过客户套餐购买页面登记"); return validatePackagePurchaseForm() && validateRequiredPhotoList();
return false;
} }
for (const eventId of selectedEventIdList.value) { for (const eventId of selectedEventIdList.value) {
const event = eventList.value.find(item => item.id === eventId); const event = eventList.value.find(item => item.id === eventId);
@@ -738,7 +728,6 @@ function validateForm(): boolean {
return true; return true;
} }
function validateRequiredPhotoList(): boolean { function validateRequiredPhotoList(): boolean {
const event = selectedRequiredPhotoEventList.value[0]; const event = selectedRequiredPhotoEventList.value[0];
if (event && !hasPhotoAttachment(photoItemList.value)) { if (event && !hasPhotoAttachment(photoItemList.value)) {
@@ -766,27 +755,6 @@ async function updateRecord(): Promise<void> {
Message.success("记录已保存"); Message.success("记录已保存");
await router.replace(`/management/registration-event-records/${editingRecord.value.id}`); await router.replace(`/management/registration-event-records/${editingRecord.value.id}`);
} }
function buildTempFileIdList(): string[] {
return photoItemList.value.map(item => item.tempFileId).filter((item): item is string => !!item);
}
function buildPhotoAttachmentList(): Array<Partial<Attachment>> {
return photoItemList.value.map((item) => {
if (item.attachment) {
return {
...item.attachment,
attachType: item.attachType || item.attachment.attachType || "PHOTO"
};
}
return {
tempFileId: item.tempFileId,
attachType: item.attachType || "PHOTO"
};
});
}
// ---------- 页面数据 ---------- // ---------- 页面数据 ----------
async function loadPageData(): Promise<void> { async function loadPageData(): Promise<void> {
@@ -822,14 +790,7 @@ async function loadRecordForEdit(): Promise<void> {
registeredAtText.value = record.registeredAt ? Time.formatDateTime(new Date(record.registeredAt)) : ""; registeredAtText.value = record.registeredAt ? Time.formatDateTime(new Date(record.registeredAt)) : "";
note.value = record.remark || ""; note.value = record.remark || "";
pointValueText.value = ""; pointValueText.value = "";
photoItemList.value = (record.attachmentList || []) setExistingPhotoList(record.attachmentList);
.filter(item => item.attachType === "PHOTO" || !item.attachType)
.filter(item => !!item.id)
.map(item => ({
attachment: item,
previewUrl: getAttachmentReadURL(item.id || ""),
url: getAttachmentReadURL(item.id || "", 90)
}));
await loadRecentRecordList(); await loadRecentRecordList();
} }
+3 -3
View File
@@ -85,8 +85,8 @@
@updated="reloadRecords" @updated="reloadRecords"
/> />
</t-cell-group> </t-cell-group>
<div v-else class="load-state" v-text="isLoading ? '正在加载登记事件记录' : '暂无登记事件记录'" /> <div v-else class="center-tips" v-text="isLoading ? '正在加载登记事件记录' : '暂无登记事件记录'" />
<div v-if="pageResult.list.length" class="load-state" v-text="loadStateText" /> <div v-if="pageResult.list.length" class="center-tips" v-text="loadStateText" />
</div> </div>
</t-pull-down-refresh> </t-pull-down-refresh>
</div> </div>
@@ -802,7 +802,7 @@ onUnmounted(() => {
} }
.empty-block, .empty-block,
.load-state, .center-tips,
.summary { .summary {
color: #94a3b8; color: #94a3b8;
} }
+2 -2
View File
@@ -98,8 +98,8 @@
</template> </template>
</customer-cell> </customer-cell>
</t-cell-group> </t-cell-group>
<div v-else class="load-state" v-text="emptyStateText" /> <div v-else class="center-tips" v-text="emptyStateText" />
<div v-if="pageResult.list.length" class="load-state" v-text="loadStateText" /> <div v-if="pageResult.list.length" class="center-tips" v-text="loadStateText" />
</t-pull-down-refresh> </t-pull-down-refresh>
</div> </div>
<t-popup v-model="startVisible" placement="bottom"> <t-popup v-model="startVisible" placement="bottom">
@@ -140,7 +140,7 @@
</t-collapse-panel> </t-collapse-panel>
</vue-draggable-next> </vue-draggable-next>
</t-collapse> </t-collapse>
<div v-else class="load-state">暂未配置登记选项,点击上方按钮新增。</div> <div v-else class="center-tips">暂未配置登记选项,点击上方按钮新增。</div>
</div> </div>
</bottom-popup> </bottom-popup>
</template> </template>
@@ -0,0 +1,137 @@
<template>
<section class="package-purchase-form">
<div v-if="props.packageConfig" class="config-summary">
<div class="header">
<div class="text-bold" v-text="props.packageConfig.name || '未命名套餐'" />
<div class="price">
<span class="label gray">标准价:</span>
<span class="value red text-bold" v-text="formatPackageAmount(props.packageConfig.standardAmount)" />
</div>
</div>
<div class="description" v-text="props.packageConfig.description" />
</div>
<div v-else class="center-tips" v-text="'当前购买事件未返回绑定套餐,无法完成购买。'" />
<t-form-item label="成交价(元)" label-width="6rem" required-mark>
<t-input
v-model.trim="saleAmount"
type="number"
align="right"
borderless
:readonly="!props.canPriceOverride"
placeholder="请输入成交价"
/>
</t-form-item>
<t-form-item label-width="0">
<div class="items">
<div class="title">
<strong>购买权益明细</strong>
<span v-if="!props.canPriceOverride">当前账号无定制权限,明细不可修改</span>
</div>
<t-form-item
v-for="(item, index) in itemList"
:key="`${index}-${item.productName}-${item.unit}`"
class="item"
:label="item.productName"
>
<t-input
:model-value="item.totalQuantity"
type="number"
:readonly="!props.canPriceOverride"
placeholder="总权益数量"
borderless
align="right"
@update:model-value="updateItemQuantity(index, $event)"
>
<template #suffix-icon>
<span class="unit" v-text="item.unit" />
</template>
</t-input>
</t-form-item>
<div v-if="!itemList.length" class="center-tips" v-text="'当前套餐暂无权益明细'" />
</div>
</t-form-item>
</section>
</template>
<script setup lang="ts">
import type { GaoPackageConfig, PackagePurchaseItem } from "@/types/Package";
import { formatPackageAmount } from "@/utils/package";
defineOptions({ name: "PackagePurchaseForm" });
interface Props {
packageConfig?: GaoPackageConfig;
canPriceOverride: boolean;
}
const props = defineProps<Props>();
const saleAmount = defineModel<string>("saleAmount", { required: true });
const itemList = defineModel<PackagePurchaseItem[]>("itemList", { required: true });
function updateItemQuantity(index: number, value: string | number): void {
itemList.value = itemList.value.map((item, itemIndex) => itemIndex === index ? {
...item,
totalQuantity: String(value)
} : item);
}
</script>
<style scoped lang="less">
.package-purchase-form {
gap: .75rem;
display: grid;
margin-top: 1rem;
.config-summary {
gap: .25rem;
margin: 0 1rem;
padding: .5rem .75rem;
display: flex;
background: var(--td-error-color-1);
border-radius: .75rem;
flex-direction: column;
.header {
display: flex;
justify-content: space-between;
.price {
display: flex;
align-items: baseline;
.label {
font-size: .75rem;
}
.value {
font-size: 1.75rem;
line-height: 1;
}
}
}
}
.items {
gap: .5rem;
display: grid;
.title {
font-size: .8125rem;
margin-bottom: .5rem;
}
.item {
border-radius: 1rem;
box-shadow: .25rem .25rem 1rem rgba(0, 0, 0, .08);
&::after {
display: none;
}
.unit {
font-size: 1rem;
}
}
}
}
</style>
@@ -0,0 +1,92 @@
import { computed, ref } from "vue";
import { AttachmentAPI, type Attachment } from "timi-web-api";
import type { PhotoItem } from "@/types/Photo";
import { getAttachmentReadURL } from "@/utils/attachment";
import { compressUploadImageList } from "@/utils/imageCompression";
export function useEventRecordPhoto() {
const recordPhotoInputRef = ref<HTMLInputElement>();
const photoItemList = ref<PhotoItem[]>([]);
const isPhotoUploading = ref(false);
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));
}
});
function capturePhoto(): void {
recordPhotoInputRef.value?.click();
}
async function handleRecordPhotoSelected(event: Event): Promise<void> {
const input = event.target as HTMLInputElement;
const fileList = Array.from(input.files || []);
if (!fileList.length) {
return;
}
isPhotoUploading.value = true;
try {
const compressedFileList = await compressUploadImageList(fileList);
const tempFileList = await AttachmentAPI.upload(compressedFileList);
for (const item of tempFileList) {
if (!item.id) {
continue;
}
photoItemList.value.push({
tempFileId: item.id,
url: AttachmentAPI.getTempReadURL(item.id)
});
}
} finally {
isPhotoUploading.value = false;
input.value = "";
}
}
function setExistingPhotoList(attachmentList?: Attachment[]): void {
photoItemList.value = (attachmentList || [])
.filter(item => item.attachType === "PHOTO" || !item.attachType)
.filter(item => !!item.id)
.map(item => ({
attachment: item,
previewUrl: getAttachmentReadURL(item.id || ""),
url: getAttachmentReadURL(item.id || "", 90)
}));
}
function buildTempFileIdList(): string[] {
return photoItemList.value.map(item => item.tempFileId).filter((item): item is string => !!item);
}
function buildPhotoAttachmentList(): Array<Partial<Attachment>> {
return photoItemList.value.map((item) => {
if (item.attachment) {
return {
...item.attachment,
attachType: item.attachType || item.attachment.attachType || "PHOTO"
};
}
return {
tempFileId: item.tempFileId,
attachType: item.attachType || "PHOTO"
};
});
}
return {
recordPhotoInputRef,
photoItemList,
isPhotoUploading,
photoList,
capturePhoto,
handleRecordPhotoSelected,
setExistingPhotoList,
buildTempFileIdList,
buildPhotoAttachmentList
};
}
@@ -0,0 +1,165 @@
import { computed, ref, type Ref } from "vue";
import PackageAPI from "@/api/PackageAPI";
import type { Customer } from "@/types/Customer";
import type { EventItem } from "@/types/EventItem";
import type { PackagePurchaseItem } from "@/types/Package";
import { isPackagePurchaseEvent } from "@/utils/event";
import { createPackageRequestNo, formatPackageAmountInput, normalizePackageQuantity, parsePackageAmount } from "@/utils/package";
import { permissionCodes } from "@/utils/permission";
import { Message } from "@/utils/message";
interface UsePackagePurchaseRecordOptions {
eventList: Ref<EventItem[]>;
selectedEventIdList: Ref<string[]>;
selectedCustomerIdList: Ref<string[]>;
selectedCustomerList: Ref<Customer[]>;
note: Ref<string>;
hasPermission: (permissionCode: string) => boolean;
buildRegisteredAt: () => number;
buildTempFileIdList: () => string[];
}
export function usePackagePurchaseRecord(options: UsePackagePurchaseRecordOptions) {
const selectedPackageEvent = computed(() => options.selectedEventIdList.value
.map(eventId => options.eventList.value.find(item => item.id === eventId))
.find((item): item is EventItem => !!item && isPackagePurchaseEvent(item)));
const isPackagePurchaseSelected = computed(() => !!selectedPackageEvent.value);
const selectedPackageConfig = computed(() => selectedPackageEvent.value?.packageConfig);
const isSelectedPackageConfigSaleable = computed(() => {
const config = selectedPackageConfig.value;
if (!config || config.status !== "ACTIVE") {
return false;
}
const now = Date.now();
return (config.beginAt === undefined || config.beginAt === null || config.beginAt <= now)
&& (config.endAt === undefined || config.endAt === null || now <= config.endAt);
});
const canPriceOverride = computed(() => options.hasPermission(permissionCodes.customerPackage.priceOverride));
const saleAmountText = ref("");
const packagePurchaseItemList = ref<PackagePurchaseItem[]>([]);
function handleEventSelectionChange(eventIdList: string[]): void {
const packageEvent = eventIdList
.map(eventId => options.eventList.value.find(item => item.id === eventId))
.find(item => isPackagePurchaseEvent(item));
if (packageEvent?.id) {
if (!options.hasPermission(permissionCodes.customerPackage.create)) {
Message.warning("当前账号没有套餐购买权限");
return;
}
options.selectedEventIdList.value = [packageEvent.id];
keepSingleCustomer();
applySelectedPackageEvent(packageEvent);
return;
}
options.selectedEventIdList.value = eventIdList;
resetPackagePurchaseForm();
}
function applySelectedPackageEvent(event: EventItem): void {
const config = event.packageConfig;
if (!config) {
resetPackagePurchaseForm();
return;
}
saleAmountText.value = formatPackageAmountInput(config.standardAmount);
packagePurchaseItemList.value = (config.itemList || []).map((item, index) => ({
productName: item.productName,
unit: item.unit,
totalQuantity: normalizePackageQuantity(item.defaultQuantity) || "",
sort: item.sort ?? index,
remark: item.remark ?? null
}));
}
function resetPackagePurchaseForm(): void {
saleAmountText.value = "";
packagePurchaseItemList.value = [];
}
async function submitPackagePurchase(): Promise<boolean> {
const eventId = selectedPackageEvent.value?.id;
const customerId = options.selectedCustomerList.value[0]?.id;
const saleAmount = parsePackageAmount(saleAmountText.value);
if (!eventId || !customerId || saleAmount === undefined) {
return false;
}
await PackageAPI.purchase({
requestNo: createPackageRequestNo(),
eventId,
customerId,
saleAmount,
purchasedAt: options.buildRegisteredAt(),
itemList: packagePurchaseItemList.value.map((item, index) => ({
productName: item.productName.trim(),
unit: item.unit.trim(),
totalQuantity: normalizePackageQuantity(item.totalQuantity)!,
sort: item.sort ?? index,
remark: item.remark ?? null
})),
attachmentList: options.buildTempFileIdList().map(tempFileId => ({
tempFileId,
attachType: "PHOTO"
})),
remark: options.note.value.trim() || null
});
return true;
}
function validatePackagePurchaseForm(): boolean {
if (!options.hasPermission(permissionCodes.customerPackage.create)) {
Message.warning("当前账号没有套餐购买权限");
return false;
}
if (options.selectedCustomerList.value.length < 1 || 1 < options.selectedCustomerList.value.length || !options.selectedCustomerList.value[0]?.id) {
Message.warning("套餐购买只能选择一个客户");
return false;
}
if (!selectedPackageConfig.value) {
Message.warning("当前购买事件未绑定有效套餐配置");
return false;
}
if (!isSelectedPackageConfigSaleable.value) {
Message.warning("事件绑定的套餐当前不可购买,请检查套餐状态和有效期");
return false;
}
if (parsePackageAmount(saleAmountText.value) === undefined) {
Message.warning("成交价必须是合法的元金额,最多两位小数");
return false;
}
if (!packagePurchaseItemList.value.length) {
Message.warning("购买权益至少需要一项");
return false;
}
for (const item of packagePurchaseItemList.value) {
const quantity = normalizePackageQuantity(item.totalQuantity);
if (!item.productName.trim() || !item.unit.trim() || !quantity || quantity === "0") {
Message.warning("产品名称、单位和正数量不能为空");
return false;
}
}
return true;
}
function keepSingleCustomer(): void {
const customer = options.selectedCustomerList.value[0];
options.selectedCustomerList.value = customer ? [customer] : [];
options.selectedCustomerIdList.value = customer?.id ? [customer.id] : [];
}
return {
selectedPackageEvent,
isPackagePurchaseSelected,
selectedPackageConfig,
canPriceOverride,
saleAmountText,
packagePurchaseItemList,
handleEventSelectionChange,
applySelectedPackageEvent,
resetPackagePurchaseForm,
submitPackagePurchase,
validatePackagePurchaseForm
};
}
+1 -1
View File
@@ -53,7 +53,7 @@
</t-swipe-cell> </t-swipe-cell>
</t-cell-group> </t-cell-group>
<t-empty v-else-if="!isLoading" description="暂无已发送通知" /> <t-empty v-else-if="!isLoading" description="暂无已发送通知" />
<div class="load-state" v-text="loadStateText" /> <div class="center-tips" v-text="loadStateText" />
</t-pull-down-refresh> </t-pull-down-refresh>
</div> </div>
</template> </template>
+1 -1
View File
@@ -60,7 +60,7 @@
v-else-if="!isLoading" v-else-if="!isLoading"
description="暂无站内通知" description="暂无站内通知"
/> />
<div class="load-state" v-text="loadStateText" /> <div class="center-tips" v-text="loadStateText" />
</t-pull-down-refresh> </t-pull-down-refresh>
</div> </div>
</template> </template>
@@ -6,7 +6,7 @@
</t-cell-group> </t-cell-group>
<section v-if="customerPackage" class="items" v-entrance-transition="70"> <section v-if="customerPackage" class="items" v-entrance-transition="70">
<div class="section-title"><strong>本次发放权益</strong><span>只能提交不超过可发数量的产品</span></div> <div class="section-title"><strong>本次发放权益</strong><span>只能提交不超过可发数量的产品</span></div>
<div v-for="item in customerPackage.itemList || []" :key="item.id" class="item-card"> <div v-for="item in customerPackage.itemList || []" :key="item.id" class="item">
<div class="item-title"><strong v-text="`${item.productNameSnapshot}(${item.unitSnapshot})`" /><span v-text="`可发 ${getPackageQuantityText(item.availableQuantity)}`" /></div> <div class="item-title"><strong v-text="`${item.productNameSnapshot}(${item.unitSnapshot})`" /><span v-text="`可发 ${getPackageQuantityText(item.availableQuantity)}`" /></div>
<t-input v-model.trim="quantityMap[item.id || '']" type="number" borderless placeholder="本次发放数量,不填表示不发放" /> <t-input v-model.trim="quantityMap[item.id || '']" type="number" borderless placeholder="本次发放数量,不填表示不发放" />
</div> </div>
@@ -202,7 +202,7 @@ onUnmounted(() => navBarStore.clearRight());
margin-left: .5rem; margin-left: .5rem;
} }
.item-card { .item {
gap: .5rem; gap: .5rem;
padding: .75rem; padding: .75rem;
margin-bottom: .75rem; margin-bottom: .75rem;
+1 -19
View File
@@ -31,21 +31,17 @@
</t-cell> </t-cell>
</t-cell-group> </t-cell-group>
<div v-else class="empty" v-text="loading ? '正在加载客户套餐' : '暂无客户套餐'" /> <div v-else class="empty" v-text="loading ? '正在加载客户套餐' : '暂无客户套餐'" />
<div class="load-state" v-text="loadStateText" /> <div class="center-tips" v-text="loadStateText" />
</t-pull-down-refresh> </t-pull-down-refresh>
</div> </div>
<nav-bar-action-menu v-if="canCreate" :actions="actionList" />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { type DropdownValue } from "tdesign-mobile-vue"; import { type DropdownValue } from "tdesign-mobile-vue";
import { Time } from "timi-web"; import { Time } from "timi-web";
import { useUserStore } from "timi-web-api";
import PackageAPI from "@/api/PackageAPI"; import PackageAPI from "@/api/PackageAPI";
import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
import { useNavBarStore } from "@/store/navBarStore"; import { useNavBarStore } from "@/store/navBarStore";
import type { CustomerPackageStatus, GaoCustomerPackage, PaymentStatus } from "@/types/Package"; import type { CustomerPackageStatus, GaoCustomerPackage, PaymentStatus } from "@/types/Package";
import type { NavBarAction } from "@/types/NavBarAction";
import { getErrorMessage } from "@/utils/error"; import { getErrorMessage } from "@/utils/error";
import { formatPackageAmount, getCustomerPackageStatusText, getPaymentStatusText } from "@/utils/package"; import { formatPackageAmount, getCustomerPackageStatusText, getPaymentStatusText } from "@/utils/package";
import { Message } from "@/utils/message"; import { Message } from "@/utils/message";
@@ -55,15 +51,6 @@ defineOptions({ name: "CustomerPackageList" });
const router = useRouter(); const router = useRouter();
const navBarStore = useNavBarStore(); const navBarStore = useNavBarStore();
const userStore = useUserStore();
const canCreate = computed(() => userStore.hasPermissions(permissionCodes.customerPackage.create));
const actionList = computed<NavBarAction[]>(() => canCreate.value ? [{
key: "purchase",
text: "购买套餐",
icon: "add",
theme: "primary",
action: toPurchase
}] : []);
const keyword = ref(""); const keyword = ref("");
const status = ref("ALL"); const status = ref("ALL");
const paymentStatus = ref("ALL"); const paymentStatus = ref("ALL");
@@ -137,10 +124,6 @@ async function selectPaymentStatus(value: DropdownValue): Promise<void> {
await reload(); await reload();
} }
async function toPurchase(): Promise<void> {
await router.push("/management/customer-packages/purchase");
}
async function toDetail(item: GaoCustomerPackage): Promise<void> { async function toDetail(item: GaoCustomerPackage): Promise<void> {
if (item.id) { if (item.id) {
await router.push(`/management/customer-packages/${item.id}`); await router.push(`/management/customer-packages/${item.id}`);
@@ -153,7 +136,6 @@ function getStatusTheme(statusValue?: CustomerPackageStatus): "success" | "warni
onMounted(async () => { onMounted(async () => {
navBarStore.clearRight(); navBarStore.clearRight();
navBarStore.setCustomRightVisible(canCreate.value);
try { try {
await reload(); await reload();
} catch (error) { } catch (error) {
@@ -1,405 +0,0 @@
<template>
<div v-can="permissionCodes.customerPackage.create" class="customer-package-purchase">
<t-form class="form" label-align="left" label-width="6rem" v-entrance-transition>
<t-form-item v-if="isGlobalManager" label="所属门店" arrow @click="openStorePicker">
<span class="picker-text" v-text="selectedStoreName" />
</t-form-item>
<t-form-item label="客户" required-mark arrow @click="customerSelectorVisible = true">
<span class="picker-text" v-text="selectedCustomer?.name || selectedCustomer?.code || '请选择客户'" />
</t-form-item>
<customer-profile-card v-if="selectedCustomer" class="customer-profile" :customer="selectedCustomer" />
<t-form-item label="购买事件" required-mark arrow @click="openEventPicker">
<span class="picker-text" v-text="selectedEvent?.name || '请选择 PACKAGE_PURCHASE 事件'" />
</t-form-item>
<div v-if="selectedConfig" class="config-summary">
<strong v-text="selectedConfig.name || '未命名套餐'" />
<span v-text="`标准价:${formatPackageAmount(selectedConfig.standardAmount)}|${getPackageConfigStatusText(selectedConfig.status)}`" />
</div>
<div v-if="!eventList.length" class="option-tip">
<div v-if="!eventList.length">当前门店没有可用的 PACKAGE_PURCHASE 购买事件,请先新增并启用购买事件。</div>
</div>
<div v-if="selectedEvent && !selectedConfig" class="option-tip">当前购买事件未返回绑定套餐,无法购买,请联系管理员检查事件配置。</div>
<div v-if="selectedConfig && !isSelectedConfigSaleable" class="option-tip">事件绑定的套餐当前不可购买,请检查套餐状态和有效期。</div>
<t-form-item label="成交价(元)" required-mark>
<t-input v-model.trim="saleAmountText" type="number" align="right" borderless :readonly="!canPriceOverride" placeholder="请输入成交价" />
</t-form-item>
<t-form-item label="购买时间" arrow @click="openPurchaseTime">
<span class="picker-text" v-text="purchasedAtText || '使用当前时间'" />
</t-form-item>
<t-form-item label="备注">
<t-textarea v-model.trim="remark" borderless autosize maxlength="500" placeholder="购买备注" />
</t-form-item>
</t-form>
<section class="items" v-entrance-transition="70">
<div class="section-title"><strong>购买权益明细</strong><span v-if="!canPriceOverride">当前账号无定制权限,明细不可修改</span></div>
<div v-for="(item, index) in purchaseItems" :key="item.clientKey" class="item-card">
<strong v-text="`权益 ${index + 1}`" />
<t-input v-model.trim="item.productName" borderless readonly placeholder="产品名称" />
<t-input v-model.trim="item.unit" borderless readonly placeholder="单位" />
<t-input v-model.trim="item.totalQuantity" type="number" borderless :readonly="!canPriceOverride" placeholder="总权益数量" />
<span v-if="item.remark" class="item-remark" v-text="`备注:${item.remark}`" />
</div>
<div v-if="!purchaseItems.length" class="empty" v-text="'选择购买事件后加载绑定套餐权益明细'" />
</section>
<package-photo-field v-model="photoItems" :required="selectedEvent?.requirePhoto === true" title="购买照片" />
<customer-selector v-model="selectedCustomerId" v-model:visible="customerSelectorVisible" :store-id="formStoreId" @change="handleCustomerChange" />
<t-popup v-model="storePickerVisible" placement="bottom">
<t-picker v-model="storeDraft" :columns="storePickerColumns" title="选择门店" @cancel="storePickerVisible = false" @confirm="confirmStore" />
</t-popup>
<t-popup v-model="eventPickerVisible" placement="bottom">
<t-picker v-model="eventDraft" :columns="eventPickerColumns" title="选择购买事件" @cancel="eventPickerVisible = false" @confirm="confirmEvent" />
</t-popup>
<t-popup v-model="purchasePickerVisible" placement="bottom">
<t-date-time-picker v-model="purchaseDraft" format="YYYY-MM-DD HH:mm" :mode="['date', 'minute']" title="购买时间" @cancel="purchasePickerVisible = false" @confirm="confirmPurchaseTime" />
</t-popup>
</div>
</template>
<script setup lang="ts">
import { Time } from "timi-web";
import { useUserStore } from "timi-web-api";
import CustomerAPI from "@/api/CustomerAPI";
import EventAPI from "@/api/EventAPI";
import PackageAPI from "@/api/PackageAPI";
import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
import CustomerSelector from "@/components/CustomerSelector.vue";
import PackagePhotoField from "@/components/PackagePhotoField.vue";
import { useCurrentStoreStore } from "@/store/currentStoreStore";
import { useNavBarStore } from "@/store/navBarStore";
import type { Customer } from "@/types/Customer";
import type { EventItem } from "@/types/EventItem";
import type { GaoPackageConfig, PackageAttachment, PackagePurchaseItem } from "@/types/Package";
import type { PhotoItem } from "@/types/Photo";
import { createPackageRequestNo, formatPackageAmount, formatPackageAmountInput, getPackageConfigStatusText, normalizePackageQuantity, parsePackageAmount } from "@/utils/package";
import { getErrorMessage } from "@/utils/error";
import { Message } from "@/utils/message";
import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
type PickerValue = string | number;
type PurchaseFormItem = PackagePurchaseItem & { clientKey: string };
defineOptions({ name: "CustomerPackagePurchase" });
const router = useRouter();
const route = useRoute();
const userStore = useUserStore();
const navBarStore = useNavBarStore();
const currentStoreStore = useCurrentStoreStore();
const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
const canPriceOverride = computed(() => userStore.hasPermissions(permissionCodes.customerPackage.priceOverride));
const formStoreId = ref("");
const selectedCustomerId = ref("");
const selectedCustomer = ref<Customer>();
const selectedEventId = ref("");
const eventList = ref<EventItem[]>([]);
const purchaseItems = ref<PurchaseFormItem[]>([]);
const selectedEvent = computed(() => eventList.value.find(item => item.id === selectedEventId.value));
const selectedConfig = computed<GaoPackageConfig | undefined>(() => selectedEvent.value?.packageConfig);
const isSelectedConfigSaleable = computed(() => {
const config = selectedConfig.value;
if (!config || config.status !== "ACTIVE") {
return false;
}
const now = Date.now();
const beginAt = config.beginAt;
const endAt = config.endAt;
return (beginAt === undefined || beginAt === null || beginAt <= now)
&& (endAt === undefined || endAt === null || now <= endAt);
});
const saleAmountText = ref("");
const purchasedAtText = ref("");
const purchaseDraft = ref("");
const remark = ref("");
const photoItems = ref<PhotoItem[]>([]);
const isSaving = ref(false);
const customerSelectorVisible = ref(false);
const storePickerVisible = ref(false);
const eventPickerVisible = ref(false);
const purchasePickerVisible = ref(false);
const storeDraft = ref<PickerValue[]>([]);
const eventDraft = ref<PickerValue[]>([]);
const storePickerColumns = computed(() => [[...currentStoreStore.storeList].map(item => ({ label: item.name || item.code || item.id || "未知门店", value: item.id || "" }))]);
const eventPickerColumns = computed(() => [[...eventList.value].map(item => ({ label: item.name || "未命名事件", value: item.id || "" }))]);
const selectedStoreName = computed(() => currentStoreStore.storeList.find(item => item.id === formStoreId.value)?.name || formStoreId.value || "请选择门店");
async function loadOptions(): Promise<void> {
eventList.value = formStoreId.value
? (await EventAPI.listValid(formStoreId.value)).filter(item => item.bizType === "PACKAGE_PURCHASE" && !!item.packageConfigId)
: [];
if (!eventList.value.some(item => item.id === selectedEventId.value)) {
selectedEventId.value = "";
resetPurchaseConfig();
}
}
async function handleCustomerChange(id: string): Promise<void> {
selectedCustomerId.value = id;
selectedCustomer.value = id ? await CustomerAPI.detail(id) : undefined;
}
function openStorePicker(): void {
storeDraft.value = [formStoreId.value];
storePickerVisible.value = true;
}
function openEventPicker(): void {
if (!eventList.value.length) {
Message.warning("当前门店没有 PACKAGE_PURCHASE 类型购买事件,请先启用购买事件");
return;
}
eventDraft.value = [selectedEventId.value];
eventPickerVisible.value = true;
}
async function confirmStore(value: Array<string | number>): Promise<void> {
const storeId = String(value[0] || "");
if (storeId && storeId !== formStoreId.value) {
formStoreId.value = storeId;
selectedCustomerId.value = "";
selectedCustomer.value = undefined;
await loadOptions();
}
storePickerVisible.value = false;
}
function resetPurchaseConfig(): void {
saleAmountText.value = "";
purchaseItems.value = [];
}
function applySelectedEvent(): void {
const config = selectedConfig.value;
if (!config) {
resetPurchaseConfig();
return;
}
saleAmountText.value = formatPackageAmountInput(config.standardAmount);
purchaseItems.value = (config.itemList || []).map((item, index) => ({
clientKey: window.crypto.randomUUID(),
productName: item.productName,
unit: item.unit,
totalQuantity: normalizePackageQuantity(item.defaultQuantity) || "",
sort: item.sort ?? index,
remark: item.remark ?? null
}));
}
function confirmEvent(value: Array<string | number>): void {
selectedEventId.value = String(value[0] || "");
applySelectedEvent();
eventPickerVisible.value = false;
}
function openPurchaseTime(): void {
purchaseDraft.value = purchasedAtText.value || Time.formatDateTime(new Date());
purchasePickerVisible.value = true;
}
function confirmPurchaseTime(value: string | number): void {
purchasedAtText.value = String(value);
purchasePickerVisible.value = false;
}
function resolveTimestamp(value: string): number | undefined {
if (!value) {
return undefined;
}
const timestamp = new Date(value.replace(" ", "T")).getTime();
return Number.isFinite(timestamp) ? timestamp : undefined;
}
function validateForm(): boolean {
if (!selectedCustomerId.value) {
Message.warning("请选择客户");
return false;
}
if (!selectedEventId.value || !selectedEvent.value) {
Message.warning("请选择 PACKAGE_PURCHASE 类型购买事件");
return false;
}
if (!selectedConfig.value) {
Message.warning("当前购买事件未绑定有效套餐配置");
return false;
}
if (!isSelectedConfigSaleable.value) {
Message.warning("事件绑定的套餐当前不可购买,请检查套餐状态和有效期");
return false;
}
if (parsePackageAmount(saleAmountText.value) === undefined) {
Message.warning("成交价必须是合法的元金额,最多两位小数");
return false;
}
if (!purchaseItems.value.length) {
Message.warning("购买权益至少需要一项");
return false;
}
for (const item of purchaseItems.value) {
if (!item.productName.trim() || !item.unit.trim() || !normalizePackageQuantity(item.totalQuantity) || normalizePackageQuantity(item.totalQuantity) === "0") {
Message.warning("产品名称、单位和正数量不能为空");
return false;
}
}
if (selectedEvent.value.requirePhoto && !photoItems.value.some(item => item.tempFileId)) {
Message.warning("当前购买事件要求上传照片");
return false;
}
return true;
}
function buildAttachments(): PackageAttachment[] {
return photoItems.value.flatMap(item => item.tempFileId ? [{ tempFileId: item.tempFileId, attachType: "PHOTO", name: item.attachment?.name }] : []);
}
async function save(): Promise<void> {
if (isSaving.value || !validateForm()) {
return;
}
isSaving.value = true;
try {
const result = await PackageAPI.purchase({
requestNo: createPackageRequestNo(),
eventId: selectedEventId.value,
customerId: selectedCustomerId.value,
saleAmount: parsePackageAmount(saleAmountText.value)!,
purchasedAt: resolveTimestamp(purchasedAtText.value),
itemList: purchaseItems.value.map((item, index) => ({
productName: item.productName.trim(),
unit: item.unit.trim(),
totalQuantity: normalizePackageQuantity(item.totalQuantity)!,
sort: item.sort ?? index,
remark: item.remark ?? null
})),
attachmentList: buildAttachments(),
remark: remark.value.trim() || null
});
Message.success("套餐购买已提交");
if (result.id) {
await router.replace(`/management/customer-packages/${result.id}`);
return;
}
await router.replace("/management/customer-packages");
} catch (error) {
Message.error(getErrorMessage(error, "套餐购买失败,请刷新后重试"));
} finally {
isSaving.value = false;
}
}
async function loadData(): Promise<void> {
if (isGlobalManager.value) {
await currentStoreStore.loadStoreList();
} else {
await currentStoreStore.loadLoginStore();
}
formStoreId.value = currentStoreStore.currentStoreId;
if (!formStoreId.value) {
const store = await currentStoreStore.loadLoginStore();
formStoreId.value = store?.id || "";
}
await loadOptions();
const queryEventId = String(route.query.eventId || "");
if (queryEventId && eventList.value.some(item => item.id === queryEventId)) {
selectedEventId.value = queryEventId;
applySelectedEvent();
}
const queryCustomerId = String(route.query.customerId || "");
if (queryCustomerId) {
await handleCustomerChange(queryCustomerId);
}
}
onMounted(async () => {
if (userStore.hasPermissions(permissionCodes.customerPackage.create)) {
navBarStore.setRightText("提交购买", "var(--td-brand-color)", save);
}
try {
await loadData();
} catch (error) {
Message.error(getErrorMessage(error, "购买页面数据加载失败"));
}
});
onUnmounted(() => navBarStore.clearRight());
</script>
<style scoped lang="less">
.customer-package-purchase {
gap: 1rem;
padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
display: flex;
flex-direction: column;
.form {
border-radius: .75rem;
}
.picker-text {
width: 100%;
text-align: right;
}
.customer-profile {
margin: 0 1rem;
}
.items,
.package-photo-field {
padding: 0 1rem;
}
.section-title {
color: var(--td-text-color-secondary);
margin-bottom: .5rem;
font-size: .8125rem;
}
.section-title span {
margin-left: .5rem;
}
.item-card {
gap: .5rem;
padding: .75rem;
margin-bottom: .75rem;
display: grid;
background: var(--td-bg-color-container);
box-shadow: var(--td-shadow-1);
border-radius: .75rem;
}
.config-summary {
gap: .25rem;
padding: .75rem 1rem;
display: flex;
color: var(--td-text-color-secondary);
font-size: .8125rem;
flex-direction: column;
background: var(--td-bg-color-secondarycontainer);
strong {
color: var(--td-text-color-primary);
font-size: .9375rem;
}
}
.item-remark {
color: var(--td-text-color-secondary);
font-size: .8125rem;
}
.empty {
color: var(--td-text-color-secondary);
padding: 1rem;
text-align: center;
}
.option-tip {
padding: .75rem 1rem;
color: var(--td-text-color-secondary);
font-size: .8125rem;
line-height: 1.5;
background: var(--td-bg-color-secondarycontainer);
}
}
</style>
+1 -1
View File
@@ -26,7 +26,7 @@
</t-cell> </t-cell>
</t-cell-group> </t-cell-group>
<div v-else class="empty" v-text="loading ? '正在加载资金流水' : '暂无资金流水'" /> <div v-else class="empty" v-text="loading ? '正在加载资金流水' : '暂无资金流水'" />
<div class="load-state" v-text="loadStateText" /> <div class="center-tips" v-text="loadStateText" />
</t-pull-down-refresh> </t-pull-down-refresh>
</div> </div>
</template> </template>
+2 -2
View File
@@ -25,7 +25,7 @@
</t-form> </t-form>
<section class="items" v-entrance-transition="70"> <section class="items" v-entrance-transition="70">
<div class="section-title"><strong>产品权益</strong><span>至少一项,数量最多三位小数</span></div> <div class="section-title"><strong>产品权益</strong><span>至少一项,数量最多三位小数</span></div>
<div v-for="(item, index) in form.itemList" :key="item.clientKey" class="item-card"> <div v-for="(item, index) in form.itemList" :key="item.clientKey" class="item">
<div class="item-head"><span v-text="`权益 ${index + 1}`" /><t-button theme="danger" variant="text" size="small" @click="removeItem(index)">删除</t-button></div> <div class="item-head"><span v-text="`权益 ${index + 1}`" /><t-button theme="danger" variant="text" size="small" @click="removeItem(index)">删除</t-button></div>
<t-input v-model="item.productName" borderless placeholder="产品名称" /> <t-input v-model="item.productName" borderless placeholder="产品名称" />
<t-input v-model.trim="item.unit" borderless placeholder="单位,例如 盒、次" /> <t-input v-model.trim="item.unit" borderless placeholder="单位,例如 盒、次" />
@@ -337,7 +337,7 @@ onUnmounted(() => navBarStore.clearRight());
font-size: .8125rem; font-size: .8125rem;
} }
.item-card { .item {
gap: .5rem; gap: .5rem;
padding: .75rem; padding: .75rem;
margin-bottom: .75rem; margin-bottom: .75rem;
+1 -1
View File
@@ -38,7 +38,7 @@
</t-swipe-cell> </t-swipe-cell>
</t-cell-group> </t-cell-group>
<div v-else class="empty" v-text="loading ? '正在加载套餐配置' : '暂无套餐配置'" /> <div v-else class="empty" v-text="loading ? '正在加载套餐配置' : '暂无套餐配置'" />
<div class="load-state" v-text="loadStateText" /> <div class="center-tips" v-text="loadStateText" />
</t-pull-down-refresh> </t-pull-down-refresh>
</div> </div>
<nav-bar-action-menu v-if="canCreate" :actions="actionList" /> <nav-bar-action-menu v-if="canCreate" :actions="actionList" />
+1 -1
View File
@@ -22,7 +22,7 @@
</t-cell> </t-cell>
</t-cell-group> </t-cell-group>
<div v-else class="empty" v-text="loading ? '正在加载发放记录' : '暂无发放记录'" /> <div v-else class="empty" v-text="loading ? '正在加载发放记录' : '暂无发放记录'" />
<div class="load-state" v-text="loadStateText" /> <div class="center-tips" v-text="loadStateText" />
</t-pull-down-refresh> </t-pull-down-refresh>
</div> </div>
</template> </template>
+3 -3
View File
@@ -35,7 +35,7 @@
</template> </template>
</customer-cell> </customer-cell>
</t-cell-group> </t-cell-group>
<div class="load-state" v-text="loadStateText" /> <div class="center-tips" v-text="loadStateText" />
</t-pull-down-refresh> </t-pull-down-refresh>
</div> </div>
</template> </template>
@@ -249,7 +249,7 @@ onMounted(async () => {
} }
} }
.load-state { .center-tips {
color: #52607a; color: #52607a;
padding: 1rem; padding: 1rem;
font-size: .8125rem; font-size: .8125rem;
@@ -261,7 +261,7 @@ onMounted(async () => {
.point-account-list { .point-account-list {
.description, .description,
.zero, .zero,
.load-state { .center-tips {
color: #94a3b8; color: #94a3b8;
} }
+1 -1
View File
@@ -113,7 +113,7 @@
</template> </template>
</t-cell> </t-cell>
</t-cell-group> </t-cell-group>
<div class="load-state" v-text="loadStateText" /> <div class="center-tips" v-text="loadStateText" />
</t-pull-down-refresh> </t-pull-down-refresh>
<section v-if="customer" class="actions"> <section v-if="customer" class="actions">
+1 -1
View File
@@ -51,7 +51,7 @@
</template> </template>
</t-cell> </t-cell>
</t-cell-group> </t-cell-group>
<div class="load-state" v-text="loadStateText" /> <div class="center-tips" v-text="loadStateText" />
</t-pull-down-refresh> </t-pull-down-refresh>
</div> </div>
<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" /> <nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
+2 -2
View File
@@ -40,7 +40,7 @@
</template> </template>
</t-swipe-cell> </t-swipe-cell>
</t-cell-group> </t-cell-group>
<div class="load-state" v-text="loadStateText" /> <div class="center-tips" v-text="loadStateText" />
</t-pull-down-refresh> </t-pull-down-refresh>
</div> </div>
<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" /> <nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
@@ -462,7 +462,7 @@ onUnmounted(() => navBarStore.clearRight());
} }
} }
.load-state { .center-tips {
padding: 1rem; padding: 1rem;
color: var(--td-text-color-placeholder); color: var(--td-text-color-placeholder);
font-size: .8125rem; font-size: .8125rem;
+2 -2
View File
@@ -44,8 +44,8 @@
</template> </template>
</t-swipe-cell> </t-swipe-cell>
</t-cell-group> </t-cell-group>
<div v-if="!pageResult.list.length" class="load-state" v-text="isLoading ? '正在加载门店' : '暂无门店'" /> <div v-if="!pageResult.list.length" class="center-tips" v-text="isLoading ? '正在加载门店' : '暂无门店'" />
<div v-if="pageResult.list.length" class="load-state" v-text="isNoMore ? '已加载全部门店' : '上拉加载更多'" /> <div v-if="pageResult.list.length" class="center-tips" v-text="isNoMore ? '已加载全部门店' : '上拉加载更多'" />
</t-pull-down-refresh> </t-pull-down-refresh>
</div> </div>
<store-remove-dialog <store-remove-dialog
+2 -8
View File
@@ -35,7 +35,7 @@
</div> </div>
</div> </div>
<div v-if="!tagList.length" class="empty" v-text="emptyText" /> <div v-if="!tagList.length" class="empty" v-text="emptyText" />
<div v-if="tagList.length" class="load-state" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" /> <div v-if="tagList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
</t-pull-down-refresh> </t-pull-down-refresh>
</div> </div>
<t-dialog <t-dialog
@@ -337,12 +337,6 @@ onUnmounted(() => {
text-align: center; text-align: center;
} }
.load-state {
color: #52607a;
padding: .75rem 1rem 1rem;
text-align: center;
}
} }
.edit-dialog { .edit-dialog {
@@ -360,7 +354,7 @@ onUnmounted(() => {
.tag-list { .tag-list {
.empty, .empty,
.load-state { .center-tips {
color: #94a3b8; color: #94a3b8;
} }
} }
+2 -2
View File
@@ -42,8 +42,8 @@
</template> </template>
</t-cell> </t-cell>
</t-cell-group> </t-cell-group>
<div v-if="!pageResult.list.length" class="load-state" v-text="isLoading ? '正在加载用户' : '暂无用户'" /> <div v-if="!pageResult.list.length" class="center-tips" v-text="isLoading ? '正在加载用户' : '暂无用户'" />
<div v-if="pageResult.list.length" class="load-state" v-text="isNoMore ? '已经到底了' : '上拉加载更多'" /> <div v-if="pageResult.list.length" class="center-tips" v-text="isNoMore ? '已经到底了' : '上拉加载更多'" />
</t-pull-down-refresh> </t-pull-down-refresh>
</div> </div>
<nav-bar-action-menu <nav-bar-action-menu
+1 -2
View File
@@ -3,7 +3,6 @@ import PackageConfigList from "@/pages/package/PackageConfigList.vue";
import PackageConfigEdit from "@/pages/package/PackageConfigEdit.vue"; import PackageConfigEdit from "@/pages/package/PackageConfigEdit.vue";
import PackageConfigDetail from "@/pages/package/PackageConfigDetail.vue"; import PackageConfigDetail from "@/pages/package/PackageConfigDetail.vue";
import CustomerPackageList from "@/pages/package/CustomerPackageList.vue"; import CustomerPackageList from "@/pages/package/CustomerPackageList.vue";
import CustomerPackagePurchase from "@/pages/package/CustomerPackagePurchase.vue";
import CustomerPackageDetail from "@/pages/package/CustomerPackageDetail.vue"; import CustomerPackageDetail from "@/pages/package/CustomerPackageDetail.vue";
import CustomerPackageCancel from "@/pages/package/CustomerPackageCancel.vue"; import CustomerPackageCancel from "@/pages/package/CustomerPackageCancel.vue";
import CustomerPackagePayment from "@/pages/package/CustomerPackagePayment.vue"; import CustomerPackagePayment from "@/pages/package/CustomerPackagePayment.vue";
@@ -34,7 +33,7 @@ const packageRoutes: RouteRecordRaw[] = [
{ path: "/management/package-configs/:id", name: "PackageConfigDetail", component: PackageConfigDetail, meta: pageMeta("套餐配置详情", 4, "#FFF") }, { path: "/management/package-configs/:id", name: "PackageConfigDetail", component: PackageConfigDetail, meta: pageMeta("套餐配置详情", 4, "#FFF") },
{ path: "/management/package-configs/:id/edit", name: "PackageConfigEdit", component: PackageConfigEdit, meta: pageMeta("编辑套餐配置", 5) }, { path: "/management/package-configs/:id/edit", name: "PackageConfigEdit", component: PackageConfigEdit, meta: pageMeta("编辑套餐配置", 5) },
{ path: "/management/customer-packages", name: "CustomerPackageList", component: CustomerPackageList, meta: pageMeta("客户套餐") }, { path: "/management/customer-packages", name: "CustomerPackageList", component: CustomerPackageList, meta: pageMeta("客户套餐") },
{ path: "/management/customer-packages/purchase", name: "CustomerPackagePurchase", component: CustomerPackagePurchase, meta: pageMeta("购买套餐", 4) }, { path: "/management/customer-packages/purchase", redirect: "/management/registration-event-records/create" },
{ path: "/management/customer-packages/:id", name: "CustomerPackageDetail", component: CustomerPackageDetail, meta: pageMeta("客户套餐详情", 4, "#FFF") }, { path: "/management/customer-packages/:id", name: "CustomerPackageDetail", component: CustomerPackageDetail, meta: pageMeta("客户套餐详情", 4, "#FFF") },
{ path: "/management/customer-packages/:id/cancel", name: "CustomerPackageCancel", component: CustomerPackageCancel, meta: pageMeta("取消客户套餐", 5) }, { path: "/management/customer-packages/:id/cancel", name: "CustomerPackageCancel", component: CustomerPackageCancel, meta: pageMeta("取消客户套餐", 5) },
{ path: "/management/customer-packages/:id/payment", name: "CustomerPackagePayment", component: CustomerPackagePayment, meta: pageMeta("登记收款", 5) }, { path: "/management/customer-packages/:id/payment", name: "CustomerPackagePayment", component: CustomerPackagePayment, meta: pageMeta("登记收款", 5) },
+1 -1
View File
@@ -24,7 +24,7 @@ export function formatPackageAmount(cents?: number | null): string {
const absolute = Math.abs(Math.trunc(cents)); const absolute = Math.abs(Math.trunc(cents));
const yuan = Math.floor(absolute / 100); const yuan = Math.floor(absolute / 100);
const fen = String(absolute % 100).padStart(2, "0"); const fen = String(absolute % 100).padStart(2, "0");
return `${negative ? "-" : ""}${yuan}.${fen} 元`; return `${negative ? "-" : ""}${yuan}.${fen}`;
} }
/** 将分转换为金额输入框文本。 */ /** 将分转换为金额输入框文本。 */