feat: useDescription

This commit is contained in:
xingyu4j
2025-06-26 17:31:39 +08:00
parent dcd5f463a6
commit a9a2c3ff67
2 changed files with 131 additions and 92 deletions

View File

@@ -4,16 +4,23 @@ import type { PayOrderApi } from '#/api/pay/order';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { floatToFixed2, formatDateTime } from '@vben/utils';
import { Descriptions, Divider, Tag } from 'ant-design-vue';
import { getOrder } from '#/api/pay/order';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE } from '#/utils';
import { useDescription } from '#/components/description';
import { useDetailSchema } from '../data';
const detailData = ref<PayOrderApi.Order>();
const [Description] = useDescription({
componentProps: {
bordered: false,
column: 2,
class: 'mx-4',
},
schema: useDetailSchema(),
});
const [Modal, modalApi] = useVbenModal({
onOpenChange: async (isOpen) => {
if (!isOpen) {
@@ -41,92 +48,6 @@ const [Modal, modalApi] = useVbenModal({
:show-cancel-button="false"
:show-confirm-button="false"
>
<Descriptions :column="2">
<Descriptions.Item label="商户单号">
{{ detailData?.merchantOrderId }}
</Descriptions.Item>
<Descriptions.Item label="支付单号">
{{ detailData?.no }}
</Descriptions.Item>
<Descriptions.Item label="应用编号">
{{ detailData?.appId }}
</Descriptions.Item>
<Descriptions.Item label="应用名称">
{{ detailData?.appName }}
</Descriptions.Item>
<Descriptions.Item label="支付状态">
<DictTag
size="small"
:type="DICT_TYPE.PAY_ORDER_STATUS"
:value="detailData?.status"
/>
</Descriptions.Item>
<Descriptions.Item label="支付金额">
<Tag color="green" size="small">
{{ floatToFixed2(detailData?.price) }}
</Tag>
</Descriptions.Item>
<Descriptions.Item label="手续费">
<Tag color="orange" size="small">
{{ floatToFixed2(detailData?.channelFeePrice) }}
</Tag>
</Descriptions.Item>
<Descriptions.Item label="手续费比例">
{{ floatToFixed2(detailData?.channelFeeRate) }}%
</Descriptions.Item>
<Descriptions.Item label="支付时间">
{{ formatDateTime(detailData?.successTime) }}
</Descriptions.Item>
<Descriptions.Item label="失效时间">
{{ formatDateTime(detailData?.expireTime) }}
</Descriptions.Item>
<Descriptions.Item label="创建时间">
{{ formatDateTime(detailData?.createTime) }}
</Descriptions.Item>
<Descriptions.Item label="更新时间">
{{ formatDateTime(detailData?.updateTime) }}
</Descriptions.Item>
</Descriptions>
<Divider />
<Descriptions :column="2">
<Descriptions.Item label="商品标题">
{{ detailData?.subject }}
</Descriptions.Item>
<Descriptions.Item label="商品描述">
{{ detailData?.body }}
</Descriptions.Item>
<Descriptions.Item label="支付渠道">
<DictTag
size="small"
:type="DICT_TYPE.PAY_CHANNEL_CODE"
:value="detailData?.channelCode"
/>
</Descriptions.Item>
<Descriptions.Item label="支付 IP">
{{ detailData?.userIp }}
</Descriptions.Item>
<Descriptions.Item label="渠道单号">
<Tag size="small" color="green" v-if="detailData?.channelOrderNo">
{{ detailData?.channelOrderNo }}
</Tag>
</Descriptions.Item>
<Descriptions.Item label="渠道用户">
{{ detailData?.channelUserId }}
</Descriptions.Item>
<Descriptions.Item label="退款金额" :span="2">
<Tag size="small" color="red">
{{ floatToFixed2(detailData?.refundPrice) }}
</Tag>
</Descriptions.Item>
<Descriptions.Item label="通知 URL">
{{ detailData?.notifyUrl }}
</Descriptions.Item>
</Descriptions>
<Divider />
<Descriptions :column="1">
<Descriptions.Item label="支付通道异步回调内容">
{{ detailData?.channelNotifyData }}
</Descriptions.Item>
</Descriptions>
<Description :data="detailData" />
</Modal>
</template>