gold-vue/src/views/bankPaymentPage.vue

<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>