<template>
|
<InfiniteLoading scrollViewClassName="common-infinite-scroll-list" v-bind="infiniteLoadingProps">
|
<template #renderItem="{ item }">
|
<OrderCard
|
title="电费充值"
|
:status="orderStatusEnum(item?.payStatus, item?.lifePayOrderStatus)"
|
:order-no="item?.orderNo"
|
>
|
<OrderCardItem
|
label="充值地区:"
|
:value="`${JSON.parse(item?.orderParamDetailJsonStr)?.Province ?? ''} ${
|
JSON.parse(item?.orderParamDetailJsonStr)?.City ?? ''
|
}`"
|
/>
|
<OrderCardItem
|
label="充值户号:"
|
:value="JSON.parse(item?.orderParamDetailJsonStr)?.ElectricAccount"
|
/>
|
<OrderCardItem
|
label="下单时间:"
|
:value="item?.creationTime && dayjs(item?.creationTime).format('YYYY-MM-DD HH:mm:ss')"
|
/>
|
<template v-if="item.payStatus !== BlLifeRecharge.constants.LifePayStatusEnum.已退款">
|
<OrderCardItem
|
label="充值金额:"
|
:value="`￥${toThousand(item?.rechargeAmount)}`"
|
danger
|
/>
|
<OrderCardItem label="优惠金额:" :value="`￥${toThousand(item?.discountAmount)}`" />
|
</template>
|
|
<OrderCardItem label="实付金额:" :value="`￥${toThousand(item?.payAmount)}`" danger />
|
<OrderCardItem
|
label="支付时间:"
|
:value="item?.payTime && dayjs(item?.payTime).format('YYYY-MM-DD HH:mm:ss')"
|
/>
|
|
<OrderCardItem
|
v-if="item.payStatus !== BlLifeRecharge.constants.LifePayStatusEnum.已退款"
|
label="完成时间:"
|
:value="item?.finishTime && dayjs(item?.finishTime).format('YYYY-MM-DD HH:mm:ss')"
|
/>
|
<template v-else>
|
<OrderCardItem label="退款金额:" :value="`￥${toThousand(item?.payAmount)}`" danger />
|
<OrderCardItem
|
label="退款时间:"
|
:value="item?.refundTime && dayjs(item?.refundTime).format('YYYY-MM-DD HH:mm:ss')"
|
>
|
</OrderCardItem>
|
</template>
|
</OrderCard>
|
</template>
|
</InfiniteLoading>
|
</template>
|
|
<script setup lang="ts">
|
import InfiniteLoading from '../../../components/InfiniteLoading/InfiniteLoading.vue';
|
import OrderCard from '../../../components/Card/OrderCard.vue';
|
import OrderCardItem from '../../../components/Card/OrderCardItem.vue';
|
import { useGetUserLifePayOrderPage } from '../../../hooks';
|
import { BlLifeRecharge } from '@life-payment/core-vue';
|
import dayjs from 'dayjs';
|
import { toThousand, orderStatusEnum } from '../../../utils';
|
|
defineOptions({
|
name: 'ElectricOrder',
|
});
|
|
// type Props = {};
|
|
// const props = withDefaults(defineProps<Props>(), {});
|
|
const { infiniteLoadingProps } = useGetUserLifePayOrderPage({
|
lifePayOrderType: BlLifeRecharge.constants.LifePayOrderTypeEnum.电费订单,
|
});
|
</script>
|
