fix photo scroller style for event detail
This commit is contained in:
@@ -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,17 +10,15 @@
|
||||
<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>
|
||||
<div v-if="record" class="photo-wrapper" v-entrance-transition="140">
|
||||
<photo-scroller
|
||||
v-entrance-transition="140"
|
||||
v-if="record"
|
||||
class="photo-panel"
|
||||
:model-value="recordPhotoList"
|
||||
:photo-items="recordPhotoItemList"
|
||||
:show-viewer-actions="canUpdateRecord"
|
||||
@@ -29,6 +27,7 @@
|
||||
: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) {
|
||||
|
||||
@@ -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
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user