lilishop-ui/manager/src/views/order/flow/paymentLog.vue

<template>
  <div class="search">
    <t-card style="margin-bottom: 12px">
      <t-form :data="searchForm" layout="inline" :labelWidth="70" class="search-form" @submit="handleSearch">
        <t-form-item label="订单号" name="sn">
          <t-input v-model="searchForm.sn" placeholder="订单/交易号" clearable style="width: 240px" />
        </t-form-item>
        <t-form-item label="支付方式" name="paymentMethod">
          <t-select v-model="searchForm.paymentMethod" placeholder="请选择" clearable style="width: 240px">
            <t-option value="" label="全部" />
            <t-option value="WECHAT" label="微信" />
            <t-option value="ALIPAY" label="支付宝" />
            <t-option value="WALLET" label="余额" />
            <t-option value="BANK_TRANSFER" label="银行转账" />
          </t-select>
        </t-form-item>
        <t-form-item>
          <t-button theme="primary" class="search-btn" @click="handleSearch">搜索</t-button>
          <t-button variant="outline" style="margin-left: 8px" @click="handleReset">重置</t-button>
        </t-form-item>
      </t-form>
    </t-card>
    <t-card>
      <div class="order-tab">
        <t-tabs v-model="activeStatus" @change="onStatusTabChange">
          <t-tab-panel label="全部" value="ALL" />
          <t-tab-panel label="未付款" value="UNPAID" />
          <t-tab-panel label="已付款" value="PAID" />
        </t-tabs>
      </div>
      <t-table :loading="loading" :columns="columns" :data="data" ref="table" class="mt_10" rowKey="id">
        <template #paymentMethodTag="{ row }">
          <t-tag v-if="row.paymentMethod === 'WECHAT'" theme="success" size="small" variant="light">微信</t-tag>
          <t-tag v-else-if="row.paymentMethod === 'ALIPAY'" theme="primary" size="small" variant="light">支付宝</t-tag>
          <t-tag v-else-if="row.paymentMethod === 'WALLET'" theme="warning" size="small" variant="light">余额支付</t-tag>
          <t-tag v-else-if="row.paymentMethod === 'BANK_TRANSFER'" theme="warning" size="small" variant="light">银行转账</t-tag>
          <t-tag v-else size="small" variant="light">暂未付款</t-tag>
        </template>
        <template #payStatusTag="{ row }">
          <t-tag v-if="row.payStatus === 'PAID'" theme="success" size="small" variant="light">已付款</t-tag>
          <t-tag v-else theme="danger" size="small" variant="light">未付款</t-tag>
        </template>
      </t-table>
      <div class="mt_10" style="display: flex; justify-content: flex-end">
        <t-pagination :current="searchForm.pageNumber" :total="Number(total)" :pageSize="searchForm.pageSize" :pageSizeOptions="[20, 50, 100]" size="small" :showJumper="true" @change="onPaginationChange" />
      </div>
    </t-card>
  </div>
</template>

<script>
import * as API_Order from "@/api/order";

export default {
  name: "paymentLog",
  data() {
    return {
      loading: true, // 表单加载状态
      activeStatus: 'ALL',
      searchForm: {
        // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 20, // 页面大小
        sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
        sn: "",
        payStatus: "",
        startDate: "", //订单创建时间
        endDate: "", //订单结束时间
        paymentMethod: "",
      },
      columns: [
        { title: "订单/交易编号", colKey: "sn", minWidth: 180, tooltip: true },
        { title: "店铺名称", colKey: "storeName", minWidth: 100, tooltip: true },
        { title: "支付方式", colKey: "paymentMethodTag", width: 120, align: "center" },
        { title: "第三方流水", colKey: "receivableNo", minWidth: 130, cell: (h, p) => h("div", [h("span", {}, p.row.receivableNo || "暂无流水号")]) },
        { title: "客户端", colKey: "clientTypeText", width: 130, cell: (h, p) => {
          let text = "";
          if (p.row.clientType === "WECHAT_MP" || p.row.clientType === "小程序") text = "小程序";
          else if (p.row.clientType === "APP") text = "APP";
          else if (p.row.clientType === "PC") text = "PC网页";
          else if (p.row.clientType === "H5" || p.row.clientType === "wap") text = "移动端";
          return h("span", {}, text);
        } },
        { title: "支付时间", colKey: "paymentTime", width: 200, cell: (h, p) => h("span", {}, p.row.paymentTime || "暂无支付时间") },
        { title: "订单金额", colKey: "flowPrice", minWidth: 80, fixed: "right", cell: (h, p) => h("priceColorScheme", { props: { value: p.row.flowPrice, color: this.$mainColor } }) },
        { title: "支付状态", colKey: "payStatusTag", width: 95, fixed: "right" },
      ],
      data: [], // 表单数据
      total: 0, // 表单数据总数
    };
  },
  methods: {
    // 初始化数据
    init() {
      this.getDataList();
    },
    // 改变页码
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getDataList();
    },
    // 改变页数
    changePageSize(v) {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = v;
      this.getDataList();
    },
    onPaginationChange(info) {
      if (info && typeof info.pageSize !== "undefined" && info.pageSize !== this.searchForm.pageSize) {
        this.changePageSize(info.pageSize);
      }
      if (info && typeof info.current !== "undefined") {
        this.changePage(info.current);
      }
    },
    // 搜索
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 20;
      this.getDataList();
    },
    handleReset() {
      this.searchForm = {
        pageNumber: 1,
        pageSize: 20,
        sort: "createTime",
        order: "desc",
        sn: "",
        payStatus: "",
        startDate: "",
        endDate: "",
        paymentMethod: "",
      };
      this.activeStatus = 'ALL';
      this.getDataList();
    },
    onStatusTabChange(v){
      this.activeStatus = v;
      this.searchForm.payStatus = v === 'ALL' ? '' : v;
      this.searchForm.pageNumber = 1;
      this.getDataList();
    },
    // 获取列表
    getDataList() {
      this.loading = true;
      API_Order.paymentLog(this.searchForm)
        .then((res) => {
          this.loading = false;
          if (res.success) {
            this.data = res.result.records;
            this.total = res.result.total;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
  mounted() {
    this.init();
  },
};
</script>