You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
3.6 KiB
127 lines
3.6 KiB
<template>
|
|
<div class="payment-table-container">
|
|
<h3 class="table-title">支付记录详情</h3>
|
|
|
|
<div class="filter-container">
|
|
<el-date-picker
|
|
v-model="selectedDate"
|
|
type="date"
|
|
placeholder="选择日期"
|
|
value-format="YYYYMMDD"
|
|
format="YYYY-MM-DD"
|
|
/>
|
|
<el-button type="primary" @click="fetchPaymentList">查询</el-button>
|
|
</div>
|
|
|
|
<el-table :data="paymentList" style="width: 100%" v-loading="loading">
|
|
<el-table-column prop="type" label="交易类型" align="center" width="120" />
|
|
<el-table-column prop="provider" label="支付渠道" align="center" width="120" />
|
|
<el-table-column prop="request_reference" label="请求编号" align="center" width="120" show-overflow-tooltip/>
|
|
<el-table-column prop="merchant_reference" label="商户订单号" align="center" width="120" show-overflow-tooltip/>
|
|
<el-table-column prop="provider_reference" label="渠道参考号" align="center" width="120" show-overflow-tooltip />
|
|
<el-table-column prop="currency" label="货币类型" align="center" width="100" />
|
|
<el-table-column
|
|
prop="order_amount"
|
|
label="订单金额"
|
|
align="center"
|
|
width="120"
|
|
/>
|
|
<el-table-column
|
|
prop="charge"
|
|
label="手续费"
|
|
align="center"
|
|
width="120"
|
|
/>
|
|
<el-table-column
|
|
prop="net_amount"
|
|
label="净收入"
|
|
align="center"
|
|
width="120"
|
|
/>
|
|
<el-table-column prop="status" label="交易状态" align="center" width="120">
|
|
<template #default="scope">
|
|
<el-tag :type="scope.row.status === 'SUCCESS' ? 'success' : 'danger'" size="small">
|
|
{{ scope.row.status }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="created_time" label="创建时间" align="center" width="180" />
|
|
<el-table-column prop="completed_time" label="完成时间" align="center" width="180" />
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import API from '@/util/http'
|
|
import 'element-plus/dist/index.css'
|
|
|
|
const paymentList = ref([])
|
|
const selectedDate = ref('')
|
|
const loading = ref(false)
|
|
|
|
// 金额格式化
|
|
const formatAmount = (row, column) => {
|
|
const value = row[column.prop]
|
|
return `${row.currency} ${Number(value).toFixed(2)}`
|
|
}
|
|
|
|
// 获取支付数据
|
|
const fetchPaymentList = async () => {
|
|
if (!selectedDate.value) {
|
|
ElMessage.warning('请先选择日期')
|
|
return
|
|
}
|
|
|
|
loading.value = true
|
|
try {
|
|
const res = await API({
|
|
url: '/admin/cash/bank/payment',
|
|
data: { time: selectedDate.value },
|
|
})
|
|
|
|
if (res.code === 200) {
|
|
paymentList.value = res.data.paymentDTOList || []
|
|
} else {
|
|
ElMessage.error(res.msg || '加载失败')
|
|
}
|
|
} catch (err) {
|
|
console.error(err)
|
|
ElMessage.error('请求出错，请稍后再试')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
// 默认加载今天数据
|
|
onMounted(() => {
|
|
const today = new Date()
|
|
const y = today.getFullYear()
|
|
const m = String(today.getMonth() + 1).padStart(2, '0')
|
|
const d = String(today.getDate()).padStart(2, '0')
|
|
selectedDate.value = `${y}${m}${d}`
|
|
fetchPaymentList()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.payment-table-container {
|
|
padding: 20px;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.table-title {
|
|
margin-bottom: 16px;
|
|
color: #1989fa;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.filter-container {
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
</style>
|