payment-platform/frontend/src/views/module_payment/collection/order/index.vue

<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-form :inline="true" :model="query">
        <el-form-item label="订单号">
          <el-input
            v-model="query.keyword"
            placeholder="商户订单号 / 交易号"
            clearable
            style="width: 240px"
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label="场景">
          <el-select v-model="query.payScene" placeholder="全部" clearable style="width: 140px">
            <el-option label="被扫" value="BARCODE" />
            <el-option label="主扫" value="QRCODE" />
            <el-option label="H5" value="H5" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="query.status" placeholder="全部" clearable style="width: 160px">
            <el-option
              v-for="s in STATUS_OPTIONS"
              :key="s.value"
              :label="s.label"
              :value="s.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never" style="margin-top: 12px">
      <el-table v-loading="loading" :data="list" border stripe>
        <el-table-column
          prop="out_trade_no"
          label="商户订单号"
          min-width="200"
          show-overflow-tooltip
        />
        <el-table-column label="场景" width="90">
          <template #default="{ row }">{{ sceneLabel(row.pay_scene) }}</template>
        </el-table-column>
        <el-table-column label="金额(元)" width="110" align="right">
          <template #default="{ row }">{{ fen2yuan(row.total_amount) }}</template>
        </el-table-column>
        <el-table-column label="已退(元)" width="110" align="right">
          <template #default="{ row }">{{ fen2yuan(row.refunded_amount) }}</template>
        </el-table-column>
        <el-table-column label="状态" width="130">
          <template #default="{ row }">
            <el-tag :type="statusTagType(row.status)">{{ statusLabel(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="trade_no"
          label="交易号"
          min-width="200"
          show-overflow-tooltip
        />
        <el-table-column label="回调" width="100">
          <template #default="{ row }">
            <el-tag v-if="row.notify_status === 'SUCCESS'" type="success" size="small">已送达</el-tag>
            <el-tag v-else-if="row.notify_status === 'FAIL'" type="danger" size="small">
              失败({{ row.notify_count }})
            </el-tag>
            <el-tag v-else type="info" size="small">待推送</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created_time" label="创建时间" width="180" />
        <el-table-column label="操作" width="100" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="openDetail(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="query.pageNo"
        v-model:page-size="query.pageSize"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 12px; justify-content: flex-end"
        @change="loadData"
      />
    </el-card>

    <el-drawer v-model="detailVisible" title="订单详情" size="720px">
      <el-descriptions v-if="detail" :column="1" border>
        <el-descriptions-item label="商户订单号">{{ detail.out_trade_no }}</el-descriptions-item>
        <el-descriptions-item label="商户号">{{ detail.mch_no }}</el-descriptions-item>
        <el-descriptions-item label="支付流水号">{{ detail.pay_trace_no }}</el-descriptions-item>
        <el-descriptions-item label="交易号">{{ detail.trade_no || "-" }}</el-descriptions-item>
        <el-descriptions-item label="支付单号">{{ detail.td_trade_no || "-" }}</el-descriptions-item>
        <el-descriptions-item label="金额">
          {{ fen2yuan(detail.total_amount) }} 元 / 实收 {{ fen2yuan(detail.receipt_amount) }} 元
        </el-descriptions-item>
        <!--
          ★ 已退金额**本来就在详情响应里**（`LsyOrderEntity.refundedAmount`），只是此前没人渲染它：
            状态列写着「已全额退款」而详情里一个字都看不到退款，用户 2026-09-29 报的正是这个。
            这一行不需要后端改动 —— 缺的是显示。
        -->
        <el-descriptions-item label="已退金额">
          {{ fen2yuan(detail.refunded_amount) }} 元
        </el-descriptions-item>
        <el-descriptions-item label="支付结果">
          {{ detail.upstream_result_code }} {{ detail.upstream_result_msg }}
        </el-descriptions-item>
        <!--
          上游返回值只按**文本**渲染：不拼 innerHTML、不做模板、也不做成 href ——
          `code_url` 是上游回的任意字符串，`:href` 会把它当 URL 打开（`javascript:` 前缀即等价于执行脚本）。
          要恢复成可点击链接，应先加 http/https 协议白名单。
        -->
        <el-descriptions-item v-if="detail.code_url" label="支付链接">
          <span style="word-break: break-all">{{ detail.code_url }}</span>
        </el-descriptions-item>
        <el-descriptions-item label="备注">{{ detail.description || "-" }}</el-descriptions-item>
      </el-descriptions>

      <!--
        退款单只在**有**的时候出现。空表会让每一笔正常支付都拖一节「没有退款」的空架子，
        而这一节存在的意义恰恰是回答「这笔到底退没退、退了哪几笔」。
      -->
      <template v-if="refunds.length">
        <h4 style="margin-top: 20px">退款单</h4>
        <el-table :data="refunds" border size="small">
          <el-table-column
            prop="out_refund_no"
            label="商户退款单号"
            min-width="150"
            show-overflow-tooltip
          />
          <el-table-column label="金额(元)" width="90" align="right">
            <template #default="{ row }">{{ fen2yuan(row.refund_fee) }}</template>
          </el-table-column>
          <el-table-column label="状态" width="90">
            <template #default="{ row }">
              <el-tag :type="refundTagType(row.status)" size="small">
                {{ refundStatusLabel(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <!--
            上游退款单号可能是空的：它只在**同步应答**里才学到（预插入的那一行还没拿到）。
            空串在这里会看起来像「退款单号丢了」，所以显式渲染成 -。
          -->
          <el-table-column label="退款单号" min-width="160" show-overflow-tooltip>
            <template #default="{ row }">{{ row.refund_no || "-" }}</template>
          </el-table-column>
          <!--
            宽度 180 与同抽屉「回调轨迹」的时间列、以及上方订单列表的「创建时间」一致 ——
            这三处显示的是同一种值，宽度不该各写各的。
            ★ 值的形态是**实测**的，不是估的：HTTP 层实收
              `2026-09-29T11:04:13.007374+08:00`（**微秒** 6 位，共 32 字符）。
              按「毫秒 3 位」估会少算 3 个字符、窄列里静默截断。
              所以这里挂 show-overflow-tooltip：截断至少能悬停看全，不是无声丢字。
            本页**不**引入 dayjs 格式化 —— 同一个抽屉里两节时间长得不一样，比原样显示更难读。
          -->
          <el-table-column label="完成时间" width="180" show-overflow-tooltip>
            <template #default="{ row }">{{ row.finish_time || "-" }}</template>
          </el-table-column>
        </el-table>
      </template>

      <h4 style="margin-top: 20px">回调轨迹</h4>
      <el-table :data="notifyLogs" border size="small">
        <el-table-column prop="created_time" label="时间" width="180" />
        <el-table-column prop="trade_type" label="类型" width="70">
          <template #default="{ row }">{{ tradeTypeLabel(row.trade_type) }}</template>
        </el-table-column>
        <el-table-column prop="verify_status" label="验签" width="80">
          <template #default="{ row }">
            <el-tag :type="row.verify_status === 'SUCCESS' ? 'success' : 'danger'" size="small">
              {{ verifyLabel(row.verify_status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="process_status" label="处理" width="130">
          <template #default="{ row }">
            <el-tag v-if="isProcessAlert(row.process_status)" type="danger" size="small">
              {{ processLabel(row.process_status) }}
            </el-tag>
            <span v-else>{{ processLabel(row.process_status) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="原文" min-width="200">
          <template #default="{ row }">
            <el-popover placement="left" :width="600" trigger="click">
              <template #reference>
                <el-button link type="primary">查看</el-button>
              </template>
              <pre style="max-height: 400px; overflow: auto">{{ row.raw_body }}</pre>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
// ★ 组件名必须与菜单 route_name 逐字相同：keep-alive 的 `include` 匹配的是**组件名**，
//   而 tags-view 推进 `cachedViews` 的是**路由名**（`tags-view.store.ts:31-42`）。
//   不写这一行，`<script setup>` 会按文件名推断成 "index" ⇒ keep_alive 永不生效（且不报错）。
//   ★ 本名取自**活库** sys_menu.route_name（id=269，2026-09-23 只读实测；读数记在
//     `java/src/main/resources/db/lsy-cashier-menu.sql` 头部）。要改就改页面，别改库。
defineOptions({
  name: "CollectionOrder",
  inheritAttrs: false,
});

import { onMounted, reactive, ref } from "vue";
import {
  getLsyOrderPage,
  getLsyOrderDetail,
  getLsyNotifyLogs,
  getLsyOrderRefunds,
} from "@/api/module_payment/collection";

const STATUS_OPTIONS = [
  { label: "已建单", value: "CREATED" },
  { label: "支付中", value: "PAYING" },
  { label: "支付成功", value: "SUCCESS" },
  { label: "支付失败", value: "FAIL" },
  { label: "已撤销", value: "CANCELED" },
  { label: "已关单", value: "CLOSED" },
  { label: "已过期", value: "EXPIRED" },
  { label: "部分退款", value: "PARTIAL_REFUNDED" },
  { label: "已全额退款", value: "REFUNDED" },
];

const SCENE_LABEL: Record<string, string> = {
  BARCODE: "被扫",
  QRCODE: "主扫",
  H5: "H5",
};

/**
 * `pay_lsy_notify_log.process_status` 的取值 → 中文。
 *
 * ★ 这 10 个词是**从 `LsyNotifyService` 全部 `logNotify(...)` 调用点逐个点出来的**，
 *   并与库里的列注释（`db/lsy-notify-process-status-comment.sql` 那句 10 词表）对过，
 *   两边一致。后端加词时这里必须同步 —— 漏一个就会让那一行退回显示英文（靠 `|| v` 兜底），
 *   不报错、只是看不懂。
 */
const PROCESS_LABEL: Record<string, string> = {
  RECEIVED: "已收到",
  APPLIED: "已回写",
  DUPLICATE: "重复回调",
  REJECTED: "验签失败",
  ORDER_NOT_FOUND: "订单不存在",
  REFUND_NOT_FOUND: "退款单不存在",
  UNKNOWN_RESULT_CODE: "未知结果码",
  LATE_PAYMENT_AFTER_TERMINAL: "终态后到账",
  LATE_REFUND_AFTER_TERMINAL: "终态后退款",
  HELD_FOR_RECONCILE: "扣住待对账",
};

const VERIFY_LABEL: Record<string, string> = {
  SUCCESS: "通过",
  FAIL: "失败",
};

/**
 * `LsyRefundStatus` 的四个取值 → 中文。**逐个取自枚举源码**（`CREATED / REFUNDING / SUCCESS / FAIL`，
 * 见 `LsyRefundStatus.java` 的枚举体），措辞与退款列表页 `collection/refund/index.vue` 的下拉一致 ——
 * 同一份状态在两个页面叫两个名字，排查时会对不上。
 */
const REFUND_STATUS_LABEL: Record<string, string> = {
  CREATED: "已建单",
  REFUNDING: "退款中",
  SUCCESS: "退款成功",
  FAIL: "退款失败",
};

/** 查询参数用 camelCase：后端 `@RequestParam` 未写 name，线上名即 `pageNo` / `pageSize` */
const query = reactive({
  pageNo: 1,
  pageSize: 20,
  status: "",
  payScene: "",
  keyword: "",
});
const list = ref<any[]>([]);
const total = ref(0);
const loading = ref(false);
const detailVisible = ref(false);
const detail = ref<any>(null);
const notifyLogs = ref<any[]>([]);
const refunds = ref<any[]>([]);

function sceneLabel(v: string) {
  return SCENE_LABEL[v] || v;
}
function fen2yuan(fen?: number | null) {
  return fen == null ? "-" : (fen / 100).toFixed(2);
}
function statusLabel(v: string) {
  return STATUS_OPTIONS.find((s) => s.value === v)?.label || v;
}
function statusTagType(v: string) {
  if (v === "SUCCESS") return "success";
  if (v === "FAIL") return "danger";
  if (v === "PAYING" || v === "CREATED") return "warning";
  if (v === "REFUNDED" || v === "PARTIAL_REFUNDED") return "info";
  return "info";
}
function tradeTypeLabel(v: string) {
  return ({ "0": "退款", "1": "交易", "2": "云订单关单" } as Record<string, string>)[v] || v || "-";
}
function processLabel(v: string) {
  return PROCESS_LABEL[v] || v || "-";
}
function verifyLabel(v: string) {
  return VERIFY_LABEL[v] || v || "-";
}
function refundStatusLabel(v: string) {
  return REFUND_STATUS_LABEL[v] || v || "-";
}
/** 在途用 warning、失败用 danger —— 与退款列表页同一套配色，避免同一状态两种颜色。 */
function refundTagType(v: string) {
  if (v === "SUCCESS") return "success";
  if (v === "FAIL") return "danger";
  return "warning";
}
/**
 * 「处理」列里**需要人看一眼**的四类，标红。
 *
 * ★ `DUPLICATE` **不在**其中，这是刻意的：良性重复回调是幂等正常工作的证据，
 *   标红会把真正的告警淹掉。后端 `LsyNotifyService` 特意把「良性重复」与
 *   「账实不符」（LATE_*_AFTER_TERMINAL）拆成两个词，就是为了这处能分开看；
 *   在界面上把它们渲染成一模一样的黑字，等于把那处区分又抹掉了。
 */
function isProcessAlert(v: string) {
  return (
    v === "LATE_PAYMENT_AFTER_TERMINAL" ||
    v === "LATE_REFUND_AFTER_TERMINAL" ||
    v === "HELD_FOR_RECONCILE" ||
    v === "UNKNOWN_RESULT_CODE"
  );
}

async function loadData() {
  loading.value = true;
  try {
    const res: any = await getLsyOrderPage(query);
    // res 是 AxiosResponse（request.ts 的响应拦截器 `return response`，**不做解包**）
    // → res.data = {code,msg,data}  → res.data.data = PageResult
    // PageResult 的分页字段名是 `list`（不是 records/items）；`total` 是单词，命名策略不影响它。
    // ★ 实体字段是 snake_case（全局 Jackson SNAKE_CASE）—— 写成 camelCase 会「编译过、构建过、列表恒空」。
    list.value = res.data.data?.list || [];
    total.value = res.data.data?.total || 0;
  } finally {
    loading.value = false;
  }
}

function handleSearch() {
  query.pageNo = 1;
  loadData();
}
function handleReset() {
  query.keyword = "";
  query.status = "";
  query.payScene = "";
  query.pageNo = 1;
  loadData();
}

async function openDetail(row: any) {
  // ★ 先清空、再拉取：抽屉实例是**被复用**的，三条请求里任何一条抛异常，
  //   上一次的内容就会原样留在界面上 —— 而它看起来完全像「这一笔订单的数据」。
  //   （清空放在最前，所以下面三条赋值不再需要各自的兜底 || []。）
  detail.value = null;
  notifyLogs.value = [];
  refunds.value = [];

  const res: any = await getLsyOrderDetail(row.out_trade_no);
  // ★ 两层 data：`request.ts` 的响应拦截器 `return response`，**不做解包**，
  //   所以 res.data 是整个 `{code,msg,data}` 信封，业务数据在 res.data.data。
  //   写成 res.data 会把信封塞给 el-descriptions，字段全部渲染成空 —— 页面不报错，
  //   只是「什么都没显示」，是那种查半天查不出来的假成功。
  detail.value = res.data.data;
  const logs: any = await getLsyNotifyLogs(row.out_trade_no);
  notifyLogs.value = logs.data.data || [];
  const rfs: any = await getLsyOrderRefunds(row.out_trade_no);
  refunds.value = rfs.data.data || [];
  detailVisible.value = true;
}

onMounted(loadData);
</script>