优化结构

2026-08-20 20:39:09 +08:00
parent b88c220e20
commit 01b5c2f78a
73 changed files with 3171 additions and 794 deletions
@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <div class="kra-search-box">
+      <el-form :inline="true" :model="searchInfo">
+        <el-form-item label="渠道"><el-input v-model="searchInfo.provider" placeholder="alipay / wechat-v3" clearable /></el-form-item>
+        <el-form-item label="商户订单号"><el-input v-model="searchInfo.tradeNo" clearable /></el-form-item>
+        <el-form-item label="业务类型"><el-input v-model="searchInfo.businessType" clearable /></el-form-item>
+        <el-form-item label="支付状态">
+          <el-select v-model="searchInfo.paymentStatus" clearable placeholder="全部">
+            <el-option label="待支付" value="pending" /><el-option label="已支付" value="paid" />
+            <el-option label="失败" value="failed" /><el-option label="已退款" value="refunded" />
+          </el-select>
+        </el-form-item>
+        <el-form-item><el-button type="primary" icon="search" @click="reload">查询</el-button><el-button icon="refresh" @click="reset">重置</el-button></el-form-item>
+      </el-form>
+    </div>
+    <div class="kra-table-box">
+      <el-table :data="rows" row-key="ID" stripe>
+        <el-table-column prop="tradeNo" label="商户订单号" min-width="190" show-overflow-tooltip />
+        <el-table-column prop="provider" label="渠道" width="120" />
+        <el-table-column prop="subject" label="商品/标题" min-width="180" show-overflow-tooltip />
+        <el-table-column label="金额" width="130"><template #default="scope">{{ scope.row.amount }} {{ scope.row.currency }}</template></el-table-column>
+        <el-table-column label="支付状态" width="110"><template #default="scope"><el-tag :type="statusType(scope.row.paymentStatus)">{{ statusText(scope.row.paymentStatus) }}</el-tag></template></el-table-column>
+        <el-table-column label="发货" width="110"><template #default="scope"><el-tag :type="scope.row.fulfillmentStatus === 'succeeded' ? 'success' : 'info'">{{ scope.row.fulfillmentStatus }}</el-tag></template></el-table-column>
+        <el-table-column label="退款" width="110"><template #default="scope">{{ scope.row.refundStatus }}</template></el-table-column>
+        <el-table-column prop="businessId" label="业务 ID" min-width="150" show-overflow-tooltip />
+        <el-table-column label="创建时间" width="180"><template #default="scope">{{ formatDate(scope.row.createdAt) }}</template></el-table-column>
+      </el-table>
+      <div class="kra-pagination"><el-pagination :current-page="page" :page-size="pageSize" :page-sizes="[10, 30, 50, 100]" :total="total" layout="total, sizes, prev, pager, next, jumper" @current-change="changePage" @size-change="changeSize" /></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { getPaymentOrders } from '@/api/payment'
+import { formatDate } from '@/utils/format'
+
+const page = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+const rows = ref([])
+const searchInfo = ref({})
+const statusText = (status) => ({ initialized: '初始化', pending: '待支付', paid: '已支付', failed: '失败', closed: '已关闭', partially_refunded: '部分退款', refunded: '已退款' }[status] || status || '-')
+const statusType = (status) => ({ paid: 'success', refunded: 'success', failed: 'danger', closed: 'info' }[status] || 'warning')
+const load = async () => {
+  const res = await getPaymentOrders({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
+  if (res.code === 0) { rows.value = res.data.list || []; total.value = res.data.total || 0; page.value = res.data.page || page.value; pageSize.value = res.data.pageSize || pageSize.value }
+}
+const reload = () => { page.value = 1; load() }
+const reset = () => { searchInfo.value = {}; reload() }
+const changePage = (value) => { page.value = value; load() }
+const changeSize = (value) => { pageSize.value = value; page.value = 1; load() }
+load()
+</script>