37 lines
1.7 KiB
Vue
37 lines
1.7 KiB
Vue
<!-- 功能描述：展示配送订单创建时的只读金额预估。版本：v1.0.0。 -->
|
||
<template>
|
||
<a-alert v-if="preview.ready" class="amount-preview" type="info" show-icon>
|
||
<div class="amount-grid">
|
||
<span>气瓶金额<strong>{{ formatOrderMoney(preview.productAmount) }}</strong></span>
|
||
<span>默认配送费<strong>{{ formatOrderMoney(preview.deliveryFee) }}</strong></span>
|
||
<span>优惠金额<strong>- {{ formatOrderMoney(preview.discountAmount) }}</strong></span>
|
||
<span class="payable">预计应付<strong>{{ formatOrderMoney(preview.payableAmount) }}</strong></span>
|
||
</div>
|
||
<div class="amount-note">金额仅供预览，保存时由服务端按合同价格重新计算。</div>
|
||
</a-alert>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed } from 'vue';
|
||
import { formatOrderMoney, orderAmountPreview } from '@/api/order-creation';
|
||
import type { ResourceRow } from '@/api/resource-record-form';
|
||
|
||
const props = defineProps<{
|
||
form: Record<string, any>;
|
||
relationOptions: Record<string, ResourceRow[]>;
|
||
}>();
|
||
const preview = computed(() =>
|
||
orderAmountPreview(props.form, props.relationOptions),
|
||
);
|
||
</script>
|
||
|
||
<style scoped>
|
||
.amount-preview { margin: 4px 0 20px; }
|
||
.amount-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
|
||
.amount-grid span { display: grid; gap: 4px; color: var(--color-text-3); }
|
||
.amount-grid strong { color: var(--color-text-1); font-size: 16px; }
|
||
.amount-grid .payable strong { color: rgb(var(--primary-6)); font-size: 18px; }
|
||
.amount-note { margin-top: 10px; color: var(--color-text-3); font-size: 12px; }
|
||
@media (max-width: 900px) { .amount-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||
</style>
|