<template>
|
<div class="app-container">
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px">
|
<el-form-item label="渠道交易号" prop="channelTradeNo">
|
<el-input v-model="queryParams.channelTradeNo" placeholder="请输入渠道交易号" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
|
</el-form-item>
|
<el-form-item label="业务订单号" prop="bizOrderId">
|
<el-input v-model="queryParams.bizOrderId" placeholder="请输入业务订单号" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
|
</el-form-item>
|
<el-form-item label="订单标题" prop="subject">
|
<el-input v-model="queryParams.subject" placeholder="请输入订单标题" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
|
</el-form-item>
|
<el-form-item label="最新交易ID" prop="latestTransactionId">
|
<el-input v-model="queryParams.latestTransactionId" placeholder="请输入最新交易ID" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<el-row :gutter="10" class="mb8">
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
</el-row>
|
|
<el-table v-loading="loading" :data="orderList">
|
<el-table-column label="订单ID" align="center" prop="id" width="160" />
|
<el-table-column label="业务订单号" align="center" prop="bizOrderId" width="180" :show-overflow-tooltip="true" />
|
<el-table-column label="订单标题" align="center" prop="subject" width="200" :show-overflow-tooltip="true" />
|
<el-table-column label="金额(元)" align="center" width="100">
|
<template slot-scope="scope">
|
<span>{{ formatAmount(scope.row.amount) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="支付渠道" align="center" prop="channel" width="100">
|
<template slot-scope="scope">
|
<el-tag :type="channelType(scope.row.channel)">{{ scope.row.channel }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="订单状态" align="center" prop="status" width="100">
|
<template slot-scope="scope">
|
<el-tag :type="statusType(scope.row.status)">{{ scope.row.status }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="渠道交易号" align="center" prop="channelTradeNo" width="180" :show-overflow-tooltip="true" />
|
<el-table-column label="最新交易ID" align="center" prop="latestTransactionId" width="120" />
|
<el-table-column label="描述(含taskId)" align="center" prop="description" width="200" :show-overflow-tooltip="true" />
|
<el-table-column label="创建时间" align="center" prop="createdAt" width="160">
|
<template slot-scope="scope">
|
<span>{{ parseTime(scope.row.createdAt) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="支付时间" align="center" prop="paidAt" width="160">
|
<template slot-scope="scope">
|
<span>{{ scope.row.paidAt ? parseTime(scope.row.paidAt) : '-' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width" fixed="right">
|
<template slot-scope="scope">
|
<el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看明细</el-button>
|
<el-button v-if="extractTaskId(scope.row.description)" size="mini" type="text" icon="el-icon-link" @click="handleViewTask(scope.row)">查看转运单</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 订单详情对话框 -->
|
<el-dialog :title="'订单详情 - ' + form.id" :visible.sync="open" width="700px" append-to-body>
|
<el-descriptions :column="2" border>
|
<el-descriptions-item label="订单ID">{{ form.id }}</el-descriptions-item>
|
<el-descriptions-item label="业务订单号">{{ form.bizOrderId }}</el-descriptions-item>
|
<el-descriptions-item label="订单标题">{{ form.subject }}</el-descriptions-item>
|
<el-descriptions-item label="金额">{{ formatAmount(form.amount) }} 元</el-descriptions-item>
|
<el-descriptions-item label="币种">{{ form.currency }}</el-descriptions-item>
|
<el-descriptions-item label="支付渠道">
|
<el-tag :type="channelType(form.channel)">{{ form.channel }}</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item label="订单状态">
|
<el-tag :type="statusType(form.status)">{{ form.status }}</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item label="渠道交易号">{{ form.channelTradeNo || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="最新交易ID">{{ form.latestTransactionId || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="乐观锁版本">{{ form.version }}</el-descriptions-item>
|
<el-descriptions-item label="创建时间">{{ parseTime(form.createdAt) }}</el-descriptions-item>
|
<el-descriptions-item label="更新时间">{{ parseTime(form.updatedAt) }}</el-descriptions-item>
|
<el-descriptions-item label="支付时间">{{ form.paidAt ? parseTime(form.paidAt) : '-' }}</el-descriptions-item>
|
<el-descriptions-item label="过期时间">{{ parseTime(form.expireAt) }}</el-descriptions-item>
|
<el-descriptions-item label="回调地址" :span="2">{{ form.callbackUrl }}</el-descriptions-item>
|
<el-descriptions-item label="描述" :span="2">{{ form.description }}</el-descriptions-item>
|
</el-descriptions>
|
<div slot="footer" class="dialog-footer">
|
<el-button v-if="extractTaskId(form.description)" type="primary" @click="handleViewTask(form)">查看关联转运单</el-button>
|
<el-button @click="open = false">关 闭</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { listPayOrder, getPayOrder } from "@/api/payment/order";
|
|
export default {
|
name: "PayOrder",
|
data() {
|
return {
|
// 遮罩层
|
loading: false,
|
// 显示搜索条件
|
showSearch: true,
|
// 订单表格数据
|
orderList: [],
|
// 是否显示弹出层
|
open: false,
|
// 表单参数
|
form: {},
|
// 查询参数
|
queryParams: {
|
channelTradeNo: undefined,
|
bizOrderId: undefined,
|
subject: undefined,
|
latestTransactionId: undefined
|
}
|
};
|
},
|
created() {
|
this.getList();
|
},
|
methods: {
|
/** 查询支付订单列表 */
|
getList() {
|
this.loading = true;
|
// 转换 latestTransactionId 为数字
|
const params = { ...this.queryParams };
|
if (params.latestTransactionId) {
|
params.latestTransactionId = Number(params.latestTransactionId);
|
}
|
listPayOrder(params).then(response => {
|
this.orderList = response.data || [];
|
this.loading = false;
|
}).catch(() => {
|
this.loading = false;
|
});
|
},
|
// 取消按钮
|
cancel() {
|
this.open = false;
|
},
|
/** 搜索按钮操作 */
|
handleQuery() {
|
this.getList();
|
},
|
/** 重置按钮操作 */
|
resetQuery() {
|
this.resetForm("queryForm");
|
this.getList();
|
},
|
/** 查看按钮操作 */
|
handleView(row) {
|
this.reset();
|
getPayOrder(row.id).then(response => {
|
this.form = response.data;
|
this.open = true;
|
});
|
},
|
// 表单重置
|
reset() {
|
this.form = {};
|
},
|
// 格式化金额（分转元）
|
formatAmount(amount) {
|
if (amount === undefined || amount === null) return '-';
|
return (amount / 100).toFixed(2);
|
},
|
// 渠道标签类型
|
channelType(channel) {
|
const map = {
|
'WECHAT': 'success',
|
'ALIPAY': 'primary',
|
'ALIPAY_THIRD': 'warning'
|
};
|
return map[channel] || '';
|
},
|
// 状态标签类型
|
statusType(status) {
|
const map = {
|
'CREATED': 'info',
|
'PENDING': 'warning',
|
'PAID': 'success',
|
'CLOSED': 'danger',
|
'EXPIRED': 'danger'
|
};
|
return map[status] || '';
|
},
|
// 从 description 中提取 taskId
|
extractTaskId(description) {
|
if (!description) return null;
|
// 匹配 taskId:1234 格式
|
const match = description.match(/taskId[:：]\s*(\d+)/i);
|
return match ? match[1] : null;
|
},
|
// 查看关联转运单
|
handleViewTask(row) {
|
const taskId = this.extractTaskId(row.description);
|
if (taskId) {
|
// 使用通用任务详情页路由
|
this.$router.push('/task/general-detail/index/' + taskId);
|
} else {
|
this.$message.warning('未找到关联的转运单ID');
|
}
|
}
|
}
|
};
|
</script>
|
