fix photo scroller style for event detail

This commit is contained in:
Timi
2026-08-24 18:19:23 +08:00
parent 454f59d7f6
commit 8c3711a363
3 changed files with 38 additions and 21 deletions
+32 -20
View File
@@ -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.earnedPointValue !== undefined && record.earnedPointValue !== null" title="本次积分变化" :note="getPointValueText(record.earnedPointValue)" />
<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, 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
v-entrance-transition="140"
v-if="record"
class="photo-panel"
:model-value="recordPhotoList"
:photo-items="recordPhotoItemList"
:show-viewer-actions="canUpdateRecord"
:show-add="false"
:show-remove="false"
:submit="submitPhotoItems"
title="登记照片"
/>
<div v-if="record" class="photo-wrapper" v-entrance-transition="140">
<photo-scroller
:model-value="recordPhotoList"
:photo-items="recordPhotoItemList"
:show-viewer-actions="canUpdateRecord"
:show-add="false"
:show-remove="false"
: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) {
+4 -1
View File
@@ -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
}
});
}
+2
View File
@@ -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;