Feature/0723/zr #9
@@ -99,14 +99,8 @@ export interface ApiResult<T> {
|
||||
|
||||
/** 退款记录 */
|
||||
export interface InnerRefundInfo {
|
||||
/** 已退金额;0.00格式 */
|
||||
refundedAmount: string;
|
||||
/** 总退款次数（接口实际返回 string） */
|
||||
totalRefundCount: string;
|
||||
/** 退款金额;0.00格式 */
|
||||
refundAmount: string;
|
||||
/** 是否全部退款;0=否，1=是（接口实际返回 string） */
|
||||
isFullRefund: string;
|
||||
/** 退款方式 */
|
||||
refundMethod: string;
|
||||
/** 退款申请时间 */
|
||||
@@ -115,6 +109,10 @@ export interface InnerRefundInfo {
|
||||
refundOutTradeNo: string;
|
||||
/** 退款完成时间 */
|
||||
refundTime: string;
|
||||
/** 退款状态;1=退款中，2=退款成功，3=退款失败 */
|
||||
refundStatus: string;
|
||||
/** 退款选手名称合集文字 */
|
||||
refundSignupNames: string;
|
||||
}
|
||||
|
||||
/** 订单详情 */
|
||||
|
||||
@@ -79,11 +79,6 @@
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.tableWrap {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.paginationRow {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
@@ -160,12 +155,6 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.partialMark {
|
||||
margin-left: 4px;
|
||||
color: #fa8c16;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.refundEmpty {
|
||||
padding: 32px 0;
|
||||
text-align: center;
|
||||
@@ -176,10 +165,8 @@
|
||||
border: 1px dashed #e0e0e0;
|
||||
}
|
||||
|
||||
.refundPagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 12px;
|
||||
.refundPlayers {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.modalFooter {
|
||||
|
||||
@@ -44,7 +44,13 @@ const PLAYER_COLUMNS = [
|
||||
customRender: ({ text }: { text: string }) => formatGender(text),
|
||||
},
|
||||
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 130 },
|
||||
{ title: '证件号', dataIndex: 'idCard', key: 'idCard', width: 180 },
|
||||
{
|
||||
title: '证件号',
|
||||
dataIndex: 'idCard',
|
||||
key: 'idCard',
|
||||
width: 180,
|
||||
customRender: ({ text }: { text: string }) => text || '--',
|
||||
},
|
||||
{
|
||||
title: '证件图片',
|
||||
key: 'idCardImg',
|
||||
@@ -108,8 +114,9 @@ const PLAYER_COLUMNS = [
|
||||
];
|
||||
|
||||
const REFUND_STATUS_MAP: Record<string, { label: string; tone: StatusTagTone }> = {
|
||||
success: { label: '退款成功', tone: 'success' },
|
||||
failed: { label: '退款失败', tone: 'danger' },
|
||||
'1': { label: '退款中', tone: 'orange' },
|
||||
'2': { label: '退款成功', tone: 'success' },
|
||||
'3': { label: '退款失败', tone: 'danger' },
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
@@ -129,8 +136,6 @@ export default defineComponent({
|
||||
const [playersLoading, setPlayersLoading] = useState(true);
|
||||
const [playerPage, setPlayerPage] = useState(1);
|
||||
const [playerTotal, setPlayerTotal] = useState(0);
|
||||
const [refundPage, setRefundPage] = useState(1);
|
||||
const [refundPageSize] = useState(2);
|
||||
const playerPageSize = 5;
|
||||
|
||||
/** 获取选手列表（分页） */
|
||||
@@ -158,25 +163,21 @@ export default defineComponent({
|
||||
const hasRefundFailed = computed(() => {
|
||||
const records = refundRecords.value;
|
||||
if (!records || !records.length) return false;
|
||||
return records.some((r) => {
|
||||
if (!r) return false;
|
||||
const hasRefundAmount = parseFloat(r.refundAmount || '0') > 0;
|
||||
const hasRefundTime = r.refundTime && r.refundTime !== '--';
|
||||
return hasRefundAmount && !hasRefundTime;
|
||||
});
|
||||
return records.some((r) => r?.refundStatus === '3');
|
||||
});
|
||||
|
||||
const pagedRefunds = computed(() => {
|
||||
const start = (refundPage.value - 1) * refundPageSize.value;
|
||||
return refundRecords.value.slice(start, start + refundPageSize.value);
|
||||
});
|
||||
const refundSuccessList = computed(() =>
|
||||
refundRecords.value.filter((r) => r.refundStatus === '2'),
|
||||
);
|
||||
|
||||
const totalRefunded = computed(() => {
|
||||
const records = refundRecords.value;
|
||||
if (!records.length) return 0;
|
||||
return records.reduce((sum, r) => sum + parseFloat(r.refundAmount || '0'), 0);
|
||||
const list = refundSuccessList.value;
|
||||
if (!list.length) return 0;
|
||||
return list.reduce((sum, r) => sum + parseFloat(r.refundAmount || '0'), 0);
|
||||
});
|
||||
|
||||
const refundSuccessCount = computed(() => refundSuccessList.value.length);
|
||||
|
||||
const fetchData = async () => {
|
||||
const params = { orderNo: props.orderNo, uniqueId: props.uniqueId };
|
||||
const [detailRes] = await Promise.all([getOrderDetail(params), fetchPlayers(1)]);
|
||||
@@ -194,10 +195,6 @@ export default defineComponent({
|
||||
fetchPlayers(page);
|
||||
};
|
||||
|
||||
const handleRefundPageChange = (page: number) => {
|
||||
setRefundPage(page);
|
||||
};
|
||||
|
||||
return () => (
|
||||
<Modal
|
||||
visible={props.visible}
|
||||
@@ -260,7 +257,7 @@ export default defineComponent({
|
||||
|
||||
<div class={styles.section}>
|
||||
<div class={styles.sectionTitle}>选手信息</div>
|
||||
<div class={styles.tableWrap}>
|
||||
<div>
|
||||
<Table
|
||||
columns={PLAYER_COLUMNS}
|
||||
dataSource={players.value}
|
||||
@@ -268,7 +265,7 @@ export default defineComponent({
|
||||
size="small"
|
||||
bordered
|
||||
pagination={false}
|
||||
scroll={{ x: 'max-content' }}
|
||||
scroll={{ x: 'max-content', y: 200 }}
|
||||
/>
|
||||
</div>
|
||||
<div class={styles.paginationRow}>
|
||||
@@ -291,28 +288,18 @@ export default defineComponent({
|
||||
<>
|
||||
<div class={styles.refundSummary}>
|
||||
<span>已退金额：{totalRefunded.value.toFixed(2)}元</span>
|
||||
<span>退款次数：{refundRecords.value.length}次</span>
|
||||
<span>退款次数：{refundSuccessCount.value}次</span>
|
||||
</div>
|
||||
<div class={styles.refundList}>
|
||||
{pagedRefunds.value.map((r, idx) => {
|
||||
const realIdx = (refundPage.value - 1) * refundPageSize.value + idx + 1;
|
||||
const isSuccess = parseFloat(r.refundTime || '') > 0 || !!r.refundTime;
|
||||
const statusInfo = {
|
||||
label: isSuccess
|
||||
? '退款成功'
|
||||
: r.isFullRefund === '1'
|
||||
? '退款待处理'
|
||||
: '退款中',
|
||||
tone: (isSuccess
|
||||
? 'success'
|
||||
: r.isFullRefund === '1'
|
||||
? 'warning'
|
||||
: 'orange') as StatusTagTone,
|
||||
{refundRecords.value.map((r, idx) => {
|
||||
const statusInfo = REFUND_STATUS_MAP[r.refundStatus] || {
|
||||
label: '未知',
|
||||
tone: 'default' as StatusTagTone,
|
||||
};
|
||||
return (
|
||||
<div key={r.refundOutTradeNo || idx} class={styles.refundCard}>
|
||||
<div class={styles.refundCardHeader}>
|
||||
<span class={styles.refundIndex}>第{realIdx}次退款</span>
|
||||
<span class={styles.refundIndex}>第{idx + 1}次退款</span>
|
||||
<StatusTag label={statusInfo.label} tone={statusInfo.tone} />
|
||||
</div>
|
||||
<div class={styles.refundCardBody}>
|
||||
@@ -321,37 +308,23 @@ export default defineComponent({
|
||||
退款金额：
|
||||
<span class={styles.refundAmount}>
|
||||
¥{formatMoney(r.refundAmount)}
|
||||
{r.isFullRefund === '1' && (
|
||||
<span class={styles.partialMark}>（全部退款）</span>
|
||||
)}
|
||||
{r.isFullRefund === '0' && (
|
||||
<span class={styles.partialMark}>（部分退款）</span>
|
||||
)}
|
||||
</span>
|
||||
<span
|
||||
class={styles.refundPlayers}
|
||||
>{`（${r.refundSignupNames}）`}</span>
|
||||
</div>
|
||||
<div>申请时间：{r.refundApplyTime}</div>
|
||||
<div>完款时间：{r.refundTime || '--'}</div>
|
||||
<div>完成时间：{r.refundTime || '--'}</div>
|
||||
</div>
|
||||
<div class={styles.refundCol}>
|
||||
<div>退款方式：{r.refundMethod}</div>
|
||||
<div>第三方退款单号：{r.refundOutTradeNo || '--'}</div>
|
||||
<div>已退金额：¥{formatMoney(r.refundedAmount)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div class={styles.refundPagination}>
|
||||
<Pagination
|
||||
current={refundPage.value}
|
||||
pageSize={refundPageSize.value}
|
||||
total={refundRecords.value.length}
|
||||
showSizeChanger={false}
|
||||
size="small"
|
||||
onChange={handleRefundPageChange}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div class={styles.refundEmpty}>暂无退款记录</div>
|
||||
|
||||
Reference in New Issue
Block a user