payment-platform/frontend/src/views/module_payment/account/components/TransferDetail.vue

<template>
  <el-drawer
    :model-value="modelValue"
    title="转账记录详情"
    direction="rtl"
    size="500px"
    @close="handleClose"
  >
    <div v-loading="loading" class="transfer-detail">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="商家订单号">
          {{ detailData.out_biz_no || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="支付宝转账单号">
          {{ detailData.order_no || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="企业ID">
          {{ detailData.enterprise_id || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="资金账户">
          {{ detailData.account_book_id || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="转账金额">
          <span class="amount">¥{{ detailData.amount || '0.00' }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="转账标题">
          {{ detailData.order_title || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusType(detailData.status)">
            {{ getStatusLabel(detailData.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ detailData.created_time || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="更新时间">
          {{ detailData.updated_time || '-' }}
        </el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="left">收款方信息</el-divider>

      <el-descriptions :column="1" border>
        <el-descriptions-item label="收款方类型">
          {{ getPayeeTypeLabel(detailData.payee_info?.identity_type) }}
        </el-descriptions-item>
        <el-descriptions-item label="收款方姓名">
          {{ detailData.payee_info?.name || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="收款方账号">
          {{ detailData.payee_info?.identity || '-' }}
        </el-descriptions-item>
        <template v-if="detailData.payee_info?.bankcard_ext_info">
          <el-descriptions-item label="账户类型">
            {{ detailData.payee_info.bankcard_ext_info.account_type === '1' ? '对公' : '对私' }}
          </el-descriptions-item>
          <el-descriptions-item label="银行名称">
            {{ detailData.payee_info.bankcard_ext_info.inst_name || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="开户省份">
            {{ detailData.payee_info.bankcard_ext_info.inst_province || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="开户城市">
            {{ detailData.payee_info.bankcard_ext_info.inst_city || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="支行名称">
            {{ detailData.payee_info.bankcard_ext_info.inst_branch_name || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="联行号">
            {{ detailData.payee_info.bankcard_ext_info.bank_code || '-' }}
          </el-descriptions-item>
        </template>
      </el-descriptions>
    </div>

    <template #footer>
      <div class="drawer-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="handleRefresh">刷新</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import AccountAPI from "@/api/module_payment/account";
import { ref, watch } from "vue";

const props = defineProps<{
  modelValue: boolean;
  outBizNo: string;
}>();

const emit = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
  (e: "refresh"): void;
}>();

const loading = ref(false);
const detailData = ref<any>({});

watch(
  () => [props.modelValue, props.outBizNo],
  async ([val, outBizNo]) => {
    if (val && outBizNo) {
      await fetchDetail();
    }
  },
  { immediate: true }
);

async function fetchDetail() {
  if (!props.outBizNo) return;

  loading.value = true;
  try {
    const res = await AccountAPI.transferDetail(props.outBizNo);
    console.log(res);
    detailData.value = res.data.data || {};
  } catch (error) {
    console.error("获取转账详情失败:", error);
  } finally {
    loading.value = false;
  }
}

function getStatusType(status: string) {
  const map: Record<string, any> = {
    DEALING: "warning",
    SUCCESS: "success",
    FAIL: "danger",
    REFUND: "warning",
  };
  return map[status] || "info";
}

function getStatusLabel(status: string) {
  const map: Record<string, string> = {
    DEALING: "处理中",
    SUCCESS: "成功",
    FAIL: "失败",
    REFUND: "退票",
  };
  return map[status] || status;
}

function getPayeeTypeLabel(type: string) {
  const map: Record<string, string> = {
    ALIPAY_ACCOUNT: "支付宝账户",
    BANK_CARD: "银行卡",
    BOOK: "资金专户",
  };
  return map[type] || type;
}

function handleClose() {
  emit("update:modelValue", false);
}

function handleRefresh() {
  fetchDetail();
  emit("refresh");
}
</script>

<style lang="scss" scoped>
.transfer-detail {
  padding: 16px;

  .amount {
    font-size: 18px;
    font-weight: 600;
    color: #67c23a;
  }
}

.drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>