update QuickSignInPage.vue style

2026-08-30 00:54:52 +08:00
parent 4487de9ec2
commit 320dab542a
7 changed files with 350 additions and 245 deletions
@@ -1,42 +1,82 @@
 <template>
 	<div v-can="permissionCodes.eventRecord.create" class="quick-sign-in-page">
-		<button class="registration-event-select" type="button" @click="eventSelectorVisible = true">
-			<span class="required-label">登记事件</span>
-			<strong v-text="selectedEventName" />
-			<t-icon name="chevron-right" />
-		</button>
-		<code-scanner
-			visible
-			:session-key="scannerSessionKey"
-			:status-text="scanStatus"
-			active-text="请将客户二维码移入取景框"
-			@decode="handleDecodedText"
-			@status-change="handleScanStatusChange"
-		/>
+		<space class="content-margin" direction="vertical" v-entrance-transition>
+			<div class="event-panel">
+				<event-selector
+					v-if="!isEventLoading && !eventLoadFailed"
+					:model-value="selectedEventIdList"
+					:event-list="eventList"
+					required-mark
+					@update:model-value="handleEventSelectionChange"
+				/>
+				<div v-else-if="isEventLoading" class="empty-block">正在加载登记事件</div>
+				<div v-else class="event-load-error">
+					<span>登记事件加载失败</span>
+					<t-button size="small" theme="primary" variant="text" @click="loadActions">重试</t-button>
+				</div>
+			</div>
+			<code-scanner
+				visible
+				:session-key="scannerSessionKey"
+				:status-text="scanStatus"
+				active-text="请将客户二维码移入取景框"
+				@decode="handleDecodedText"
+				@status-change="handleScanStatusChange"
+			/>
+		</space>
+		<t-button
+			class="cell-button"
+			theme="primary"
+			:disabled="!canSubmitRegister"
+			:loading="submitting"
+			v-entrance-transition="70"
+			@click="doSubmit"
+		>登记</t-button>
 		<customer-profile-card
 			v-if="matchedCustomer"
+			class="content-margin"
 			:customer="matchedCustomer"
 		/>
-		<div v-if="showNumberValueInput" class="number-value-panel">
-			<div class="number-value-title" v-text="`${selectedEvent?.name || '事件'}数值`" />
-			<t-input
-				v-model.trim="numberValueText"
-				type="number"
-				align="right"
-				borderless
-				:placeholder="numberValuePlaceholder"
-			/>
-		</div>
-		<div v-if="showSourceValueInput" class="source-value-panel">
-			<div class="source-value-title" v-text="sourceValueAction === 'CONSUME' ? '消耗积分' : '发放积分'" />
-			<t-input
-				v-model.trim="pointValueText"
-				type="number"
-				align="right"
-				borderless
-				:placeholder="sourceValuePlaceholder"
-			/>
-		</div>
+		<t-form
+			v-if="selectedNumberEventList.length"
+			class="input-form"
+			label-align="left"
+			label-width="8rem"
+		>
+			<t-form-item
+				v-for="item in selectedNumberEventList"
+				:key="item.id"
+				:label="`${item.name || '未命名事件'}数值`"
+				:required-mark="item.requireValue === true"
+			>
+				<t-input
+					v-model.trim="numberValueTextMap[item.id || '']"
+					type="number"
+					align="right"
+					borderless
+					:placeholder="getNumberValuePlaceholder(item)"
+				/>
+			</t-form-item>
+		</t-form>
+		<t-form
+			v-if="showSourceValueInput"
+			class="input-form"
+			label-align="left"
+			label-width="6rem"
+		>
+			<t-form-item label="积分动作" content-align="right">
+				<span class="form-text" v-text="sourceValueAction === 'CONSUME' ? '消耗积分' : '发放积分'" />
+			</t-form-item>
+			<t-form-item label="积分数量" required-mark>
+				<t-input
+					v-model.trim="pointValueText"
+					type="number"
+					align="right"
+					borderless
+					:placeholder="sourceValuePlaceholder"
+				/>
+			</t-form-item>
+		</t-form>
 		<t-cell-group
 			v-if="recentRecordList.length"
 			title="最近登记记录"
@@ -63,29 +103,7 @@
 				</template>
 			</t-cell>
 		</t-cell-group>
-		<t-button
-			class="submit"
-			theme="primary"
-			:disabled="!canSubmitRegister"
-			:loading="submitting"
-			@click="doSubmit"
-		>登记</t-button>
 	</div>
-	<t-popup v-model="eventSelectorVisible" placement="bottom">
-		<div class="registration-event-panel">
-			<div class="title">登记事件</div>
-			<t-cell-group v-if="eventList.length" theme="card">
-				<t-cell
-					v-for="item in eventList"
-					:key="item.id"
-					:title="item.name"
-					:note="item.id === selectedEventId ? '当前使用' : ''"
-					@click="selectEvent(item.id)"
-				/>
-			</t-cell-group>
-			<div v-else class="empty-block">暂无可用登记事件</div>
-		</div>
-	</t-popup>
 </template>

 <script setup lang="ts">
@@ -106,6 +124,8 @@ import { getEventRecordPhotoURL } from "@/utils/eventRecord";
 import { Storage, Time } from "timi-web";
 import { useUserStore } from "timi-web-api";
 import { loadSourceValueConfig, type SourceValueConfig } from "@/utils/point";
+import EventSelector from "@/components/EventSelector.vue";
+import { Space } from "timi-tdesign-mobile";

 defineOptions({
 	name: "QuickSignInPage"
@@ -118,33 +138,74 @@ const settingStore = useSettingStore();
 // ---------- 登记事件 ----------

 const EventItemStorageKey = "quick-scan-event-id";
-const eventSelectorVisible = ref(false);
-const selectedEventId = ref("");
+const selectedEventIdList = ref<string[]>([]);
 const eventList = ref<EventItem[]>([]);
-const selectedEvent = computed(() => eventList.value.find(item => item.id === selectedEventId.value));
-const selectedEventName = computed(() => eventList.value.find(item => item.id === selectedEventId.value)?.name || "请选择登记事件");
+const isEventLoading = ref(false);
+const eventLoadFailed = ref(false);
+const selectedEventList = computed(() => selectedEventIdList.value
+	.map(eventId => eventList.value.find(item => normalizeEventId(item) === eventId))
+	.filter((item): item is EventItem => !!item));
+const selectedNumberEventList = computed(() => selectedEventList.value.filter(item => item.valueType === "NUMBER"));
+let sourceValueRequestNo = 0;
+
+function normalizeEventId(item?: EventItem): string {
+	if (!item || item.id === undefined || item.id === null) {
+		return "";
+	}
+	return String(item.id);
+}

 async function loadActions(): Promise<void> {
-	eventList.value = await EventAPI.listValid();
-	const storedEventId = Storage.getString(EventItemStorageKey);
-	const storedAction = eventList.value.find(item => item.id === storedEventId);
-	selectedEventId.value = storedAction?.id || eventList.value[0]?.id || "";
-	if (selectedEventId.value) {
-		Storage.setString(EventItemStorageKey, selectedEventId);
+	if (isEventLoading.value) {
+		return;
+	}
+	isEventLoading.value = true;
+	eventLoadFailed.value = false;
+	try {
+		eventList.value = await EventAPI.listValid();
+		selectedEventIdList.value = buildInitialSelectedEventIdList();
+		syncStoredEventId();
+	} catch (error) {
+		console.warn("登记事件加载失败", error);
+		eventLoadFailed.value = true;
+		eventList.value = [];
+		selectedEventIdList.value = [];
+		sourceValueConfig.value = undefined;
+		Message.error("登记事件加载失败");
+	} finally {
+		isEventLoading.value = false;
 	}
 	await loadSourceValueRule();
 }

-async function selectEvent(eventId?: string): Promise<void> {
-	if (!eventId) {
-		return;
+function buildInitialSelectedEventIdList(): string[] {
+	const selectedIdList = normalizeSelectedEventIdList(selectedEventIdList.value);
+	if (selectedIdList.length) {
+		return selectedIdList;
 	}
-	selectedEventId.value = eventId;
-	numberValueText.value = "";
-	Storage.setString(EventItemStorageKey, selectedEventId);
-	eventSelectorVisible.value = false;
+
+	const storedEventId = Storage.getString(EventItemStorageKey);
+	const storedAction = eventList.value.find(item => normalizeEventId(item) === storedEventId);
+	const defaultEventId = normalizeEventId(storedAction || eventList.value[0]);
+	return defaultEventId ? [defaultEventId] : [];
+}
+
+function normalizeSelectedEventIdList(eventIdList: string[]): string[] {
+	const validEventIdSet = new Set(eventList.value.map(normalizeEventId).filter(Boolean));
+	return [...new Set(eventIdList.map(String))].filter(eventId => validEventIdSet.has(eventId));
+}
+
+async function handleEventSelectionChange(eventIdList: string[]): Promise<void> {
+	selectedEventIdList.value = normalizeSelectedEventIdList(eventIdList);
+	syncStoredEventId();
 	await loadSourceValueRule();
-	Message.success("登记事件已切换");
+}
+
+function syncStoredEventId(): void {
+	const firstEventId = selectedEventIdList.value[0];
+	if (firstEventId) {
+		Storage.setString(EventItemStorageKey, firstEventId);
+	}
 }

 onMounted(loadActions);
@@ -207,12 +268,10 @@ async function toRecordDetail(id: string): Promise<void> {

 const submitting = ref(false);
 const pointValueText = ref("");
-const numberValueText = ref("");
+const numberValueTextMap = reactive<Record<string, string>>({});
 const sourceValueConfig = ref<SourceValueConfig>();
 const sourceValueAction = ref<PointAction>("EARN");
-const canSubmitRegister = computed(() => !!matchedCustomer.value && !!selectedEventId.value);
-const showNumberValueInput = computed(() => selectedEvent.value?.valueType === "NUMBER");
-const numberValuePlaceholder = computed(() => selectedEvent.value ? getEventNumberValuePlaceholder(selectedEvent.value) : "请输入事件数值");
+const canSubmitRegister = computed(() => !!matchedCustomer.value && !!selectedEventIdList.value.length);
 const showSourceValueInput = computed(() => (
 	userStore.hasPermissions(permissionCodes.point.sourceValue)
 	&& !!sourceValueConfig.value
@@ -223,14 +282,22 @@ const sourceValuePlaceholder = computed(() => {
 });

 async function loadSourceValueRule(): Promise<void> {
-	if (!selectedEventId.value || !userStore.hasPermissions(permissionCodes.point.sourceValue)) {
+	const requestNo = ++sourceValueRequestNo;
+	if (!selectedEventIdList.value.length || !userStore.hasPermissions(permissionCodes.point.sourceValue)) {
 		sourceValueConfig.value = undefined;
 		return;
 	}
 	try {
-		sourceValueConfig.value = await loadSourceValueConfig([selectedEventId.value]);
+		const config = await loadSourceValueConfig(selectedEventIdList.value);
+		if (requestNo !== sourceValueRequestNo) {
+			return;
+		}
+		sourceValueConfig.value = config;
 		sourceValueAction.value = sourceValueConfig.value?.action || "EARN";
 	} catch {
+		if (requestNo !== sourceValueRequestNo) {
+			return;
+		}
 		sourceValueConfig.value = undefined;
 	}
 }
@@ -240,8 +307,44 @@ function resolveSourceValue(): number | undefined {
 	return Number.isSafeInteger(value) && 0 < value ? sourceValueAction.value === "CONSUME" ? -value : value : undefined;
 }

-function resolveNumberValue(): number | undefined {
-	return selectedEvent.value ? resolveEventNumberValue(selectedEvent.value, numberValueText.value) : undefined;
+function getNumberValuePlaceholder(event: EventItem): string {
+	return getEventNumberValuePlaceholder(event);
+}
+
+function resolveNumberValue(eventId: string): number | undefined {
+	const valueText = numberValueTextMap[eventId] || "";
+	if (!valueText.trim()) {
+		return undefined;
+	}
+	const event = eventList.value.find(item => normalizeEventId(item) === eventId);
+	return event ? resolveEventNumberValue(event, valueText) : undefined;
+}
+
+function validateNumberValueList(): boolean {
+	for (const eventId of selectedEventIdList.value) {
+		const event = eventList.value.find(item => item.id === eventId);
+		if (!event) {
+			continue;
+		}
+		const valueText = numberValueTextMap[eventId] || "";
+		if (event.valueType !== "NUMBER") {
+			if (valueText.trim()) {
+				Message.warning(`${event.name || "当前事件"}不能提交数值`);
+				return false;
+			}
+			continue;
+		}
+		const numberValue = resolveNumberValue(eventId);
+		if (valueText.trim() && numberValue === undefined) {
+			Message.warning(`${event.name || "当前事件"}数值格式不正确，请检查单位和小数位`);
+			return false;
+		}
+		if (event.requireValue && numberValue === undefined) {
+			Message.warning(`请填写${event.name || "当前事件"}数值`);
+			return false;
+		}
+	}
+	return true;
 }

 async function doSubmit(): Promise<void> {
@@ -249,16 +352,14 @@ async function doSubmit(): Promise<void> {
 	if (!customer) {
 		return;
 	}
+	if (!selectedEventIdList.value.length) {
+		Message.warning("请至少选择一个登记事件");
+		return;
+	}
+	if (!validateNumberValueList()) {
+		return;
+	}
 	const pointValue = resolveSourceValue();
-	const numberValue = resolveNumberValue();
-	if (showNumberValueInput.value && numberValueText.value.trim() && numberValue === undefined) {
-		Message.warning("事件数值格式不正确，请检查单位和小数位");
-		return;
-	}
-	if (selectedEvent.value?.requireValue && numberValue === undefined) {
-		Message.warning("请填写事件数值");
-		return;
-	}
 	const range = sourceValueConfig.value?.range;
 	if (showSourceValueInput.value && (!pointValue || !range || Math.abs(pointValue) < range[0] || range[1] < Math.abs(pointValue))) {
 		Message.warning(`积分数量必须是 ${range?.[0] || 1}-${range?.[1] || 0} 的正整数`);
@@ -266,18 +367,22 @@ async function doSubmit(): Promise<void> {
 	}
 	submitting.value = true;
 	try {
-		await EventRecordAPI.create({
-			customerId: customer.id,
-			eventId: selectedEventId.value,
-			pointValue: showSourceValueInput.value ? pointValue : undefined,
-			numberValue,
-			remark: "客户快速扫码登记"
-		});
+		for (const eventId of selectedEventIdList.value) {
+			await EventRecordAPI.create({
+				eventId,
+				customerId: customer.id,
+				pointValue: showSourceValueInput.value ? pointValue : undefined,
+				numberValue: resolveNumberValue(eventId),
+				remark: "客户快速扫码登记"
+			});
+		}
 		scanStatus.value = `登记成功：${customer.name || customer.code || scanCode.value}。`;
 		scanCode.value = "";
 		matchedCustomer.value = undefined;
 		pointValueText.value = "";
-		numberValueText.value = "";
+		for (const eventId of Object.keys(numberValueTextMap)) {
+			delete numberValueTextMap[eventId];
+		}
 		recentRecordList.value = [];
 		latestDecodedText = "";
 		scannerSessionKey.value += 1;
@@ -286,74 +391,54 @@ async function doSubmit(): Promise<void> {
 		submitting.value = false;
 	}
 }
+
 </script>

 <style scoped lang="less">
 .quick-sign-in-page {
 	gap: 1rem;
-	padding: calc(var(--app-nav-height) + 1rem) 1rem 6rem 1rem;
+	padding: calc(var(--app-nav-height) + 1rem) 0 1rem 0;
 	display: flex;
 	flex-direction: column;

-	.panel,
-	.bottom-bar {
-		left: 1rem;
-		right: 1rem;
-	}
-
-	.panel {
-		padding: 1rem;
-		background: rgba(255, 255, 255, .94);
-		border-radius: 1.4rem;
-		box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .08);
-	}
-
-	.registration-event-select {
-		gap: .5rem;
-		border: 0;
-		padding: .875rem 1rem;
-		display: grid;
-		min-width: 0;
-		text-align: left;
-		background: rgba(255, 255, 255, .94);
-		box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .08);
-		align-items: center;
-		border-radius: .875rem;
-		grid-template-columns: auto minmax(0, 1fr) auto;
-
-		span {
-			color: #52607a;
-			font-size: .8125rem;
-		}
-
-		strong {
-			color: #0f172a;
-			overflow: hidden;
-			font-size: 1rem;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-		}
-	}
-
-	.number-value-panel,
-	.source-value-panel {
+	.event-panel {
 		padding: .75rem 1rem;
 		background: rgba(255, 255, 255, .94);
 		box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .08);
 		border-radius: .875rem;
+	}

-		.number-value-title,
-		.source-value-title {
-			font-weight: 700;
-		}
+	.input-form {
+		padding: .5rem 0;
+		background: rgba(255, 255, 255, .94);
+		box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .08);
+		border-radius: .875rem;

-		.t-input {
-			margin-top: .5rem;
-			border: 1px solid var(--td-component-border);
-			border-radius: .75rem;
+		.form-text {
+			color: #0f172a;
+			display: block;
+			text-align: right;
 		}
 	}

+	.empty-block,
+	.event-load-error {
+		color: #52607a;
+		min-height: 4rem;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.empty-block {
+		display: flex;
+	}
+
+	.event-load-error {
+		gap: .5rem;
+		display: grid;
+		text-align: center;
+	}
+
 	.code-box {
 		padding: .875rem;
 		background: #f7faff;
@@ -384,13 +469,6 @@ async function doSubmit(): Promise<void> {
 		}
 	}

-	.submit {
-		left: 1rem;
-		right: 1rem;
-		bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
-		position: fixed;
-	}
-
 	.record-photo {
 		width: 3.5rem;
 		height: 3.5rem;
@@ -398,54 +476,18 @@ async function doSubmit(): Promise<void> {
 	}
 }

-.registration-event-panel {
-	gap: .875rem;
-	padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0)) 0;
-	display: flex;
-	background: #f5f5f8;
-	border-radius: 1rem 1rem 0 0;
-	flex-direction: column;
-
-	.title {
-		margin: 0;
-		color: #0f172a;
-		font-size: 1rem;
-		text-align: center;
-		font-weight: 700;
-	}
-
-	.empty-block {
-		color: #52607a;
-		padding: 1rem;
-		text-align: center;
-	}
-}
-
 :global(html.theme-dark) {
 	.quick-sign-in-page {
 		.panel,
-		.bottom-bar {
+		.bottom-bar,
+		.event-panel,
+		.input-form {
 			background: rgba(15, 23, 42, .88);
 			box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
 		}

-		.registration-event-select {
-			background: rgba(15, 23, 42, .88);
-			box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
-
-			span {
-				color: #94a3b8;
-			}
-
-			strong {
-				color: #e2e8f0;
-			}
-		}
-
-		.number-value-panel,
-		.source-value-panel {
-			background: rgba(15, 23, 42, .88);
-			box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
+		.input-form .form-text {
+			color: #e2e8f0;
 		}

 		.code-box {
@@ -457,17 +499,5 @@ async function doSubmit(): Promise<void> {
 			color: #94a3b8;
 		}
 	}
-
-	.registration-event-panel {
-		background: #10161f;
-
-		.title {
-			color: #e2e8f0;
-		}
-
-		.empty-block {
-			color: #94a3b8;
-		}
-	}
 }
 </style>