timi/gao-customer-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix SalesOrderDetail.vue style

Browse Source
This commit is contained in:
Timi
2026-09-05 01:38:03 +08:00
parent 25bbdafcc8
commit ca8599450a
7 changed files with 382 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/salesOrder/components/SalesOrderFinancePanel.vue
-54
View File
@@ -1,54 +0,0 @@
<template>
<div class="finance-panel">
<t-cell-group title="资金摘要" theme="card">
<t-cell title="成交金额" :note="formatPackageAmount(props.order.saleAmount)" />
<t-cell title="已生效收款" :note="formatPackageAmount(props.order.paidAmount)" />
<t-cell title="待核销收款" :note="formatPackageAmount(props.order.pendingPaidAmount)" />
<t-cell title="剩余待收款" :note="formatPackageAmount(props.order.unpaidAmount)" />
<t-cell title="有效退款" :note="formatPackageAmount(props.order.refundedAmount)" />
<t-cell title="收款状态" :note="getSalesPaymentStatusText(props.order.paymentStatus)" />
<t-cell v-if="props.order.paymentStatus === 'PAID'" title="全额实收时间" :note="getPaidAtText(props.order.paidAt)" />
<t-cell title="退款状态" :note="getSalesRefundStatusText(props.order.refundStatus)" />
<t-cell v-if="props.canReadFund" title="查看全部资金流水" arrow @click="emit('fund')" />
</t-cell-group>
<t-cell-group title="本单资金操作" theme="card">
<t-cell
v-for="item in props.order.fundRecordList || []"
:key="item.id"
:title="getFundOperationText(item.operationType)"
:note="`${getFundStatusText(item.status)} · ${item.id || ''}`"
arrow
@click="item.id && emit('record', item.id)"
>
<template #note>
<span class="record-note">
<t-tag :content="getFundStatusText(item.status)" variant="light-outline" :theme="getStatusTheme(item.status)" />
<span class="amount" v-text="formatPackageAmount(item.amount)" />
</span>
</template>
</t-cell>
<t-cell v-if="!props.order.fundRecordList?.length" title="暂无资金流水" />
</t-cell-group>
</div>
</template>
<script setup lang="ts">
import type { SalesOrder } from "@/types/SalesOrder";
import { formatPackageAmount } from "@/utils/package";
import { getFundOperationText, getFundStatusText, getSalesPaymentStatusText, getSalesRefundStatusText, getStatusTheme } from "@/utils/salesOrder";
import { Time } from "timi-web";
const props = defineProps<{ order: SalesOrder; canReadFund: boolean }>();
const emit = defineEmits<{ fund: []; record: [id: string] }>();
function getPaidAtText(paidAt?: number | null): string {
return paidAt ? Time.toDateTime(paidAt) : "待后端回填";
}
</script>
<style scoped lang="less">
.finance-panel { display: grid; gap: 1rem;
.record-note { gap: .5rem; display: flex; align-items: center; }
.amount { color: var(--td-brand-color); font-weight: 700; }
}
</style>
src/pages/salesOrder/components/SalesOrderListCell.vue
+4 -2
View File
@@ -81,7 +81,7 @@
</template>
<script setup lang="ts">
import { PassTimeLabel, Time } from "timi-web";
import { PassTimeLabel } from "timi-web";
import type { SalesOrder, SalesPaymentStatus } from "@/types/SalesOrder";
import { getCustomerPhotoURL } from "@/utils/customer";
import { formatPackageAmount, getPackageQuantityText } from "@/utils/package";
@@ -93,6 +93,7 @@ const props = defineProps<{
order: SalesOrder;
canReceive: boolean;
canFulfill: boolean;
canOperateStock: boolean;
}>();
const emit = defineEmits<{
click: [];
@@ -108,7 +109,8 @@ const totalProductQuantity = computed(() => sumProductQuantity("quantity"));
const fulfilledProductQuantity = computed(() => sumProductQuantity("fulfilledQuantity"));
const productSummaryText = computed(() => `共 ${itemList.value.length} 项 · 总数量 ${totalProductQuantity.value} · 已履约 ${fulfilledProductQuantity.value}`);
const showReceiveAction = computed(() => props.canReceive && props.order.status !== "CANCELLED" && props.order.paymentStatus !== "PAID");
const showFulfillAction = computed(() => props.canFulfill && props.order.orderType === "DIRECT_PRODUCT" && props.order.status === "ACTIVE");
const canFulfillByPayment = computed(() => props.order.paymentStatus === "PAID" || (props.order.paymentStatus === "PARTIALLY_PAID" && props.canOperateStock));
const showFulfillAction = computed(() => props.canFulfill && canFulfillByPayment.value && props.order.orderType === "DIRECT_PRODUCT" && props.order.status === "ACTIVE");
const showActions = computed(() => showReceiveAction.value || showFulfillAction.value);
function getPaymentStatusTheme(status?: SalesPaymentStatus): "success" | "warning" | "danger" | "default" {