fix photo scroller style for event detail

src/pages/event/EventRecordDetail.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-can="permissionCodes.eventRecord.read" class="registration-record-detail">
+	<div v-can="permissionCodes.eventRecord.read" class="event-record-detail">
 		<customer-profile-card
 			v-entrance-transition
 			v-if="record?.customer"
@@ -10,25 +10,24 @@
 		<t-cell-group v-entrance-transition="70" v-if="record" title="登记信息" theme="card">
 			<t-cell title="登记事件" :note="record.event?.name || '未知事件'" />
 			<t-cell v-if="record.numberValue !== undefined && record.numberValue !== null" title="事件数值" :note="getNumberValueText(record)" />
-			<t-cell v-if="record.pointValue !== undefined && record.pointValue !== null" title="提交积分值" :note="getPointValueText(record.pointValue)" />
+			<t-cell v-if="record.pointValue !== undefined && record.pointValue !== null" title="提交积分值" :note="getPointValueText(record.pointValue, pointLedgerChangeType)" />
-			<t-cell v-if="record.earnedPointValue !== undefined && record.earnedPointValue !== null" title="本次积分变化" :note="getPointValueText(record.earnedPointValue)" />
+			<t-cell v-if="record.earnedPointValue !== undefined && record.earnedPointValue !== null" title="本次积分变化" :note="getPointValueText(record.earnedPointValue, pointLedgerChangeType)" />
 			<t-cell title="登记时间" :note="record.registeredAt ? Time.toPassedDateTime(record.registeredAt) : '-'" />
 			<t-cell title="登记人" :note="Text.display(record.operator?.nick || record.operator?.name)" />
 			<t-cell title="客户编码" :note="Text.display(record.customer?.code)" />
 			<t-cell title="备注" :note="Text.display(record.remark)" />
 		</t-cell-group>
-		<photo-scroller
+		<div v-if="record" class="photo-wrapper" v-entrance-transition="140">
-			v-entrance-transition="140"
+			<photo-scroller
-			v-if="record"
+				:model-value="recordPhotoList"
-			class="photo-panel"
+				:photo-items="recordPhotoItemList"
-			:model-value="recordPhotoList"
+				:show-viewer-actions="canUpdateRecord"
-			:photo-items="recordPhotoItemList"
+				:show-add="false"
-			:show-viewer-actions="canUpdateRecord"
+				:show-remove="false"
-			:show-add="false"
+				:submit="submitPhotoItems"
-			:show-remove="false"
+				title="登记照片"
-			:submit="submitPhotoItems"
+			/>
-			title="登记照片"
+		</div>
-		/>
 		<t-empty v-else :description="isLoading ? '正在加载登记事件记录' : '登记事件记录不存在'" />
 	</div>
 </template>
@@ -41,6 +40,7 @@ import PhotoScroller from "@/components/PhotoScroller.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { EventRecord } from "@/types/EventRecord";
 import type { PhotoItem } from "@/types/Photo";
+import type { PointLedgerChangeType } from "@/types/Point";
 import { getAttachmentReadURL } from "@/utils/attachment";
 import { formatEventNumberValue } from "@/utils/eventValue";
 import { permissionCodes } from "@/utils/permission";
@@ -110,11 +110,24 @@ function getNumberValueText(value: EventRecord): string {
 	return formatEventNumberValue(value.event, value.numberValue);
 }
 
-function getPointValueText(value?: number | null): string {
+const pointLedgerChangeType = computed(() => record.value?.changeType || parsePointLedgerChangeType(route.query.changeType));
+
+function getPointValueText(value?: number | null, changeType?: PointLedgerChangeType): string {
 	if (value === undefined || value === null) {
 		return "-";
 	}
-	return `${0 < value ? "获得" : "消耗"} ${Math.abs(value)} 分`;
+	if (changeType === "CONSUME") {
+		return `消耗 ${Math.abs(value)} 分`;
+	}
+	if (changeType) {
+		return `获得 ${Math.abs(value)} 分`;
+	}
+	return `${value} 分`;
+}
+
+function parsePointLedgerChangeType(value: unknown): PointLedgerChangeType | undefined {
+	const text = Array.isArray(value) ? String(value[0] || "") : String(value || "");
+	return ["EARN", "CONSUME", "REVOKE", "ADJUST"].includes(text) ? text as PointLedgerChangeType : undefined;
 }
 
 // ---------- 页面数据 ----------
@@ -173,7 +186,7 @@ onUnmounted(() => {
 </script>
 
 <style scoped lang="less">
-.registration-record-detail {
+.event-record-detail {
 	gap: 1rem;
 	min-height: 100vh;
 	padding: calc(var(--app-nav-height) + 1rem) 0 1rem 0;
@@ -184,7 +197,7 @@ onUnmounted(() => {
 		margin: 0 1rem;
 	}
 
-	.photo-panel {
+	.photo-wrapper {
 		width: calc(100% - 2rem);
 		margin: 0 1rem;
 		padding: 1rem;
@@ -192,7 +205,6 @@ onUnmounted(() => {
 		box-shadow: var(--td-shadow-1);
 		border-radius: 1.4rem;
 	}
-
 }
 
 :global(html.theme-dark) {

src/pages/point/PointLedgerDetail.vue

@@ -369,7 +369,10 @@ async function toEventRecordDetail(): Promise<void> {
 	await router.push({
 		name: "EventRecordDetail",
 		params: { id: eventRecord.value.id },
-		query: { transitionDepth: String(Number(route.meta.depth ?? 0) + 1) }
+		query: {
+			transitionDepth: String(Number(route.meta.depth ?? 0) + 1),
+			changeType: ledger.value?.changeType
+		}
 	});
 }
 

src/types/EventRecord.ts

@@ -1,12 +1,14 @@
 import type { Attachment, BasePage, Model, PageResult, User } from "timi-web";
 import type { Customer } from "@/types/Customer";
 import type { EventItem } from "@/types/EventItem";
+import type { PointLedgerChangeType } from "@/types/Point";
 
 export type EventRecord = {
 	storeId?: string;
 	customerId?: string;
 	customerIdList?: string[];
 	eventId?: string;
+	changeType?: PointLedgerChangeType;
 	pointValue?: number | null;
 	numberValue?: number | null;
 	earnedPointValue?: number | null;