group_lawyer_web/src/views/store/Reconciliation/detail.vue

<template>
  <div class="table-box">
    <el-card style="margin-bottom: 15px">
      <el-row :gutter="10">
        <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
          <div class="form-box borderRight">
            <div class="form-title">
              总交易金额
              <el-tooltip class="box-item" effect="dark" content="总成交金额" placement="top">
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
            </div>
            <div class="form-num">
              {{ formatAmount(form.allOrderAmount) }}
            </div>
          </div>
        </el-col>

        <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
          <div class="form-box borderRight">
            <div class="form-title">
              交易笔数
              <el-tooltip class="box-item" effect="dark" content="成交订单总数" placement="top">
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
            </div>
            <div class="form-num">
              {{ formatAmount2(form.orderTransactionNumber) }}
            </div>
          </div>
        </el-col>

        <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
          <div class="form-box borderRight">
            <div class="form-title">
              核销金额
              <el-tooltip class="box-item" effect="dark" content="已完成核销的金额" placement="top">
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
            </div>
            <div class="form-num">
              {{ formatAmount(form.verificationAmount) }}
            </div>
          </div>
        </el-col>

        <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
          <div class="form-box borderRight">
            <div class="form-title">
              已提现金额
              <el-tooltip class="box-item" effect="dark" content="用户已成功提现的金额" placement="top">
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
            </div>
            <div class="form-num">
              {{ formatAmount(form.totalWithdrawalAmount) }}
            </div>
          </div>
        </el-col>

        <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
          <div class="form-box borderRight">
            <div class="form-title">
              冻结金额
              <el-tooltip class="box-item" effect="dark" content="当前冻结中的金额（未可提现）" placement="top">
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
            </div>
            <div class="form-num">
              {{ formatAmount(form.freezeAmounts) }}
            </div>
          </div>
        </el-col>

        <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
          <div class="form-box">
            <div class="form-title">
              冻结待提现金额
              <el-tooltip class="box-item" effect="dark" content="已申请提现但仍在冻结中的金额" placement="top">
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
            </div>
            <div class="form-num">
              {{ formatAmount(form.unwithdrawnAmountsFrozen) }}
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <ProTable ref="proTable" :columns="columns" :request-api="getTableList" :init-param="initParam" :data-callback="dataCallback">
      <template #buyAmount="scope">
        {{ formatAmount(scope.row.buyAmount) }}
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="useProTable">
import { ref, reactive, onMounted, onActivated } from "vue";
import { useRoute } from "vue-router";
import { Reconciliation } from "@/api/interface";
import { ElMessage } from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { getDetails, getDetailStatis } from "@/api/modules/Reconciliation";
import { QuestionFilled } from "@element-plus/icons-vue";

const route = useRoute();

const form = ref({ allOrderAmount: 0, orderTransactionNumber: 0, userCount: 0, verificationAmount: 0 });

// ProTable 实例
const proTable = ref<ProTableInstance>();
const id = ref((route.query.id as string) || "");
const initParam = reactive({ storeId: id.value });
// 页面加载时触发查询
onMounted(() => {
  proTable.value?.getTableList();
  getStatis();
});

// 从其他页面返回时触发查询
onActivated(() => {
  proTable.value?.getTableList();
  getStatis();
});

// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
  return {
    list: data.records,
    total: data.total
  };
};

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.page = newParams.pageNum;
  newParams.size = newParams.pageSize;
  delete newParams.pageNum;
  delete newParams.pageSize;
  return getDetails(newParams);
};
const status = ref<any[]>([
  { value: 0, label: "待支付" },
  { value: 1, label: "已支付（待使用）" },
  { value: 2, label: "已核销" },
  { value: 3, label: "已过期" },
  { value: 4, label: "已取消" },
  { value: 5, label: "已退款" },
  { value: 6, label: "退款失败" },
  { value: 7, label: "已完成" }
]);
const couponType = ref<any[]>([
  { value: "1", label: "代金券" },
  { value: "2", label: "套餐" }
]);

// 表格配置项
const columns = reactive<ColumnProps<Reconciliation.ResDetailList>[]>([
  { prop: "userId", label: "用户ID", search: { el: "input", tooltip: "用户ID" } },
  { prop: "userName", label: "用户名", search: { el: "input", tooltip: "用户名" } },
  { prop: "orderNo", label: "订单编号", search: { el: "input", tooltip: "订单编号" } },
  { prop: "couponType", label: "订单类型", enum: couponType },
  { prop: "buyAmount", label: "订单金额" },
  { prop: "buyTime", label: "购买时间" },
  { prop: "status", label: "状态", enum: status }
]);

const getStatis = async () => {
  try {
    if (id.value) {
      const res = await getDetailStatis({ storeId: id.value });
      if (res.code == 200) {
        form.value = res.data;
      }
    }
  } catch (error) {
    // ElMessage.error("获取详情失败");
  }
};
// 交易金额格式化
const formatAmount2 = (amount: number | string) => {
  const num = Number(amount);
  if (isNaN(num)) return "0";

  if (Math.abs(num) >= 1000) {
    return `${num / 10000}万笔`;
  } else if (num === 0) {
    return "0";
  } else {
    return `${num}`;
  }
};
// 添加金额格式化函数
const formatAmount = (amount: number | string) => {
  const num = Number(amount);
  if (isNaN(num)) return "0";

  if (Math.abs(num) >= 1000) {
    return `${(num / 10000).toFixed(2)}万元`;
  } else if (num === 0) {
    return "0";
  } else {
    return `${num.toFixed(2)}元`;
  }
};
</script>
<style lang="scss" scoped>
.form-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  .form-title {
    font-size: 14px;
  }
  .form-num {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 500;
  }
}
.borderRight {
  border-right: 1px solid #e6e6e6;
}
</style>