txz-agent-pay/src/views/order/payOrder/detail.vue

<template>
	<el-dialog :close-on-click-modal="false" :title="$t('order.payOrder.detail')" draggable v-model="visible" width="900px">
		<el-descriptions :column="2" border v-loading="loading">
			<el-descriptions-item :label="$t('order.payOrder.orderId')">{{ orderData.id }}</el-descriptions-item>
			<el-descriptions-item :label="$t('order.payOrder.appId')">{{ orderData.appId }}</el-descriptions-item>
			<el-descriptions-item :label="$t('order.payOrder.mchOrderNo')" :span="2">{{ orderData.mchOrderNo }}</el-descriptions-item>
			<el-descriptions-item :label="$t('order.payOrder.transactionId')" :span="2">{{ orderData.transactionId || '-' }}</el-descriptions-item>
			<el-descriptions-item :label="$t('order.payOrder.orderStatus')">
				<el-tag v-if="orderData.orderStatus === 'CREATE_ORDER'" type="info">{{ $t('order.payOrder.createOrder') }}</el-tag>
				<el-tag v-else-if="orderData.orderStatus === 'PAY_SUCCESS'" type="success">{{ $t('order.payOrder.paySuccess') }}</el-tag>
				<el-tag v-else-if="orderData.orderStatus === 'PAY_FAIL'" type="danger">{{ $t('order.payOrder.payFail') }}</el-tag>
				<el-tag v-else-if="orderData.orderStatus === 'CANCEL_ORDER'" type="warning">{{ $t('order.payOrder.cancelOrder') }}</el-tag>
				<el-tag v-else-if="orderData.orderStatus === 'PAY_TIMEOUT'" type="info">{{ $t('order.payOrder.payTimeout') }}</el-tag>
				<el-tag v-else>{{ orderData.orderStatus }}</el-tag>
			</el-descriptions-item>
			<el-descriptions-item :label="$t('order.payOrder.currency')">{{ orderData.currency }}</el-descriptions-item>

			<el-descriptions-item :label="$t('order.payOrder.orderAmount')">
				<span style="color: #f56c6c; font-weight: bold; font-size: 16px">¥{{ orderData.amount ? orderData.amount.toFixed(2) : '0.00' }}</span>
			</el-descriptions-item>
			<el-descriptions-item :label="$t('order.payOrder.paidAmount')">
				<span v-if="orderData.noticeAmount" style="color: #67c23a; font-weight: bold; font-size: 16px">¥{{ orderData.noticeAmount.toFixed(2) }}</span>
				<span v-else>-</span>
			</el-descriptions-item>

			<el-descriptions-item :label="$t('order.payOrder.paymentChannelId')">{{ orderData.paymentChannelId }}</el-descriptions-item>
			<el-descriptions-item :label="$t('order.payOrder.paymentChannelName')">{{ orderData.paymentChannelName || '-' }}</el-descriptions-item>

			<el-descriptions-item :label="$t('order.payOrder.merchantId')">{{ orderData.merchantUserId }}</el-descriptions-item>
			<el-descriptions-item :label="$t('order.payOrder.agentId')">{{ orderData.agentUserId }}</el-descriptions-item>

			<el-descriptions-item :label="$t('order.payOrder.merchantFeeType')">
				<el-tag v-if="orderData.mFeeType === 'PERCENTAGE'" type="info">{{ $t('order.payOrder.feeTypePercentage') }}</el-tag>
				<el-tag v-else-if="orderData.mFeeType === 'FIXED'" type="warning">{{ $t('order.payOrder.feeTypeFixed') }}</el-tag>
				<el-tag v-else-if="orderData.mFeeType === 'MIXED'" type="success">{{ $t('order.payOrder.feeTypeMixed') }}</el-tag>
				<span v-else>-</span>
			</el-descriptions-item>
			<el-descriptions-item :label="$t('order.payOrder.merchantFee')">
				{{ orderData.mFee ? `¥${orderData.mFee.toFixed(2)}` : '-' }}
			</el-descriptions-item>

			<el-descriptions-item :label="$t('order.payOrder.merchantFeeRate')">
				{{ orderData.mFeeRate ? `${orderData.mFeeRate}%` : '-' }}
			</el-descriptions-item>
			<el-descriptions-item :label="$t('order.payOrder.merchantFeeFixed')">
				{{ orderData.mFeeEvery ? `¥${orderData.mFeeEvery.toFixed(2)}` : '-' }}
			</el-descriptions-item>

			<el-descriptions-item :label="$t('order.payOrder.agentFeeType')">
				<el-tag v-if="orderData.aFeeType === 'PERCENTAGE'" type="info">{{ $t('order.payOrder.feeTypePercentage') }}</el-tag>
				<el-tag v-else-if="orderData.aFeeType === 'FIXED'" type="warning">{{ $t('order.payOrder.feeTypeFixed') }}</el-tag>
				<el-tag v-else-if="orderData.aFeeType === 'MIXED'" type="success">{{ $t('order.payOrder.feeTypeMixed') }}</el-tag>
				<span v-else>-</span>
			</el-descriptions-item>
			<el-descriptions-item :label="$t('order.payOrder.agentFee')">
				{{ orderData.aFee ? `¥${orderData.aFee.toFixed(2)}` : '-' }}
			</el-descriptions-item>

			<el-descriptions-item :label="$t('order.payOrder.agentFeeRate')">
				{{ orderData.aFeeRate ? `${orderData.aFeeRate}%` : '-' }}
			</el-descriptions-item>
			<el-descriptions-item :label="$t('order.payOrder.agentFeeFixed')">
				{{ orderData.aFeeEvery ? `¥${orderData.aFeeEvery.toFixed(2)}` : '-' }}
			</el-descriptions-item>

			<el-descriptions-item :label="$t('order.payOrder.clientIp')">{{ orderData.clientIp || '-' }}</el-descriptions-item>
			<el-descriptions-item :label="$t('order.payOrder.device')">{{ orderData.device || '-' }}</el-descriptions-item>

			<el-descriptions-item :label="$t('order.payOrder.subject')" :span="2">{{ orderData.subject || '-' }}</el-descriptions-item>
			<el-descriptions-item :label="$t('order.payOrder.body')" :span="2">{{ orderData.body || '-' }}</el-descriptions-item>

			<el-descriptions-item :label="$t('order.payOrder.returnUrl')" :span="2">{{ orderData.returnUrl || '-' }}</el-descriptions-item>
			<el-descriptions-item :label="$t('order.payOrder.notifyUrl')" :span="2">{{ orderData.notifyUrl || '-' }}</el-descriptions-item>

			<el-descriptions-item :label="$t('order.payOrder.extraParams')" :span="2">{{ orderData.extra || '-' }}</el-descriptions-item>

			<el-descriptions-item :label="$t('order.payOrder.reqTime')">{{ orderData.reqTime || '-' }}</el-descriptions-item>
			<el-descriptions-item :label="$t('order.payOrder.payCompleteTime')">{{ orderData.noticeDatetime || '-' }}</el-descriptions-item>

			<el-descriptions-item :label="$t('order.payOrder.createTime')">{{ orderData.createTime }}</el-descriptions-item>
			<el-descriptions-item :label="$t('order.payOrder.updateTime')">{{ orderData.updateTime }}</el-descriptions-item>
		</el-descriptions>

		<template #footer>
			<span class="dialog-footer">
				<el-button @click="visible = false">{{ $t('order.payOrder.close') }}</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" name="PayOrderDetailDialog" setup>
// 定义变量
const visible = ref(false);
const loading = ref(false);
const orderData = reactive<any>({});

// 打开弹窗
const openDialog = (row: any) => {
	visible.value = true;
	Object.assign(orderData, row);
};

// 暴露方法
defineExpose({
	openDialog,
});
</script>