front / rider-admin · Files

<template>
  <div>
    <a-card title="资金对账" :bordered="false" class="list-table-card">
      <div class="soft-page-stack">
        <div class="soft-note-card">
          <strong>对账说明</strong>
          <p>本页仅提供商户账单与自营骑手账单查询，不包含第三方运力账单与骑手提现审核。</p>
        </div>

        <div class="fund-tabs">
          <button
            v-for="item in tabs"
            :key="item.key"
            type="button"
            class="fund-tab"
            :class="{ 'is-active': activeTab === item.key }"
            @click="switchTab(item.key)"
          >
            {{ item.label }}
          </button>
        </div>

        <div class="list-toolbar">
          <div class="list-toolbar-left">
            <a-select
              v-if="isAdmin"
              v-model:value="filterCityId"
              placeholder="租户"
              allowClear
              class="list-filter"
              @change="handleFilterChange"
            >
              <a-select-option v-for="item in cityList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
            </a-select>
            <a-date-picker
              v-model:value="startDate"
              value-format="YYYY-MM-DD"
              placeholder="开始日期"
              class="list-filter"
              @change="handleFilterChange"
            />
            <a-date-picker
              v-model:value="endDate"
              value-format="YYYY-MM-DD"
              placeholder="结束日期"
              class="list-filter"
              @change="handleFilterChange"
            />
            <a-input-search
              v-model:value="keyword"
              :placeholder="activeTab === 'merchant' ? '搜索店铺名' : '搜索骑手姓名/手机号'"
              class="list-search"
              @search="handleKeywordSearch"
            />
          </div>
        </div>

        <a-table
          v-if="activeTab === 'merchant'"
          :dataSource="merchantList"
          :columns="merchantColumns"
          :loading="loading"
          rowKey="outStoreId"
          :pagination="pagination"
          @change="handleTableChange"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'cityName'">
              {{ getCityName(record.cityId) }}
            </template>
            <template v-else-if="column.key === 'orderAmount'">
              ¥{{ formatMoney(record.orderAmount) }}
            </template>
            <template v-else-if="column.key === 'deliveryAmount'">
              ¥{{ formatMoney(record.deliveryAmount) }}
            </template>
            <template v-else-if="column.key === 'refundAmount'">
              ¥{{ formatMoney(record.refundAmount) }}
            </template>
            <template v-else-if="column.key === 'merchantReceivableAmount'">
              ¥{{ formatMoney(record.merchantReceivableAmount) }}
            </template>
            <template v-else-if="column.key === 'action'">
              <a @click="openMerchantDetail(record)">查看明细</a>
            </template>
          </template>
        </a-table>

        <a-table
          v-else
          :dataSource="riderList"
          :columns="riderColumns"
          :loading="loading"
          rowKey="riderId"
          :pagination="pagination"
          @change="handleTableChange"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'deliveryAmount'">
              ¥{{ formatMoney(record.deliveryAmount) }}
            </template>
            <template v-else-if="column.key === 'riderIncomeAmount'">
              ¥{{ formatMoney(record.riderIncomeAmount) }}
            </template>
            <template v-else-if="column.key === 'refundAdjustAmount'">
              ¥{{ formatMoney(record.refundAdjustAmount) }}
            </template>
            <template v-else-if="column.key === 'settleableAmount'">
              ¥{{ formatMoney(record.settleableAmount) }}
            </template>
            <template v-else-if="column.key === 'action'">
              <a @click="openRiderDetail(record)">查看明细</a>
            </template>
          </template>
        </a-table>
      </div>
    </a-card>

    <a-modal v-model:open="detailVisible" :title="detailTitle" :footer="null" width="920px">
      <div class="soft-page-stack">
        <div class="soft-note-card">
          <strong>{{ detailTitle }}</strong>
          <p>{{ activeDetailTab === 'merchant' ? '展示商户账单关联订单明细。' : '展示骑手账单关联订单明细。' }}</p>
        </div>

        <a-table
          :dataSource="detailList"
          :columns="detailColumns"
          :loading="detailLoading"
          rowKey="orderId"
          :pagination="detailPagination"
          @change="handleDetailTableChange"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'status'">
              <a-tag :color="statusColor[record.status] || 'default'">{{ statusMap[record.status] || `状态${record.status}` }}</a-tag>
            </template>
            <template v-else-if="column.key === 'payTime'">
              {{ formatTime(record.payTime) }}
            </template>
            <template v-else-if="column.key === 'completeTime'">
              {{ formatTime(record.completeTime) }}
            </template>
            <template v-else-if="column.key === 'orderAmount' || column.key === 'deliveryAmount' || column.key === 'refundAmount' || column.key === 'riderIncomeAmount' || column.key === 'settleableAmount'">
              ¥{{ formatMoney(record[column.key]) }}
            </template>
          </template>
        </a-table>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import type { TablePaginationConfig } from 'ant-design-vue'
import { merchantApi } from '@/api'
import { useRoleCityList } from '@/composables/useRoleCityList'

const PAGE_SIZE = 20
const tabs = [
  { key: 'merchant', label: '商户账单' },
  { key: 'rider', label: '自营骑手账单' },
] as const

const activeTab = ref<'merchant' | 'rider'>('merchant')
const activeDetailTab = ref<'merchant' | 'rider'>('merchant')
const loading = ref(false)
const detailLoading = ref(false)
const detailVisible = ref(false)
const detailTitle = ref('账单明细')
const merchantList = ref<any[]>([])
const riderList = ref<any[]>([])
const detailList = ref<any[]>([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(PAGE_SIZE)
const detailTotal = ref(0)
const detailPage = ref(1)
const detailPageSize = ref(PAGE_SIZE)
const filterCityId = ref<number | undefined>()
const keyword = ref('')
const startDate = ref('2026-04-01')
const endDate = ref('2026-04-30')
const currentOutStoreId = ref('')
const currentDetailCityId = ref<number | undefined>()
const currentRiderId = ref<number | undefined>()
const { isAdmin, managedCityId, cityList, loadCities, getCityName } = useRoleCityList()

const statusMap: Record<number, string> = {
  2: '已支付',
  3: '已接单',
  4: '服务中',
  6: '已完成',
  7: '退款申请',
  8: '退款成功',
  9: '退款拒绝',
}

const statusColor: Record<number, string> = {
  2: 'blue',
  3: 'cyan',
  4: 'processing',
  6: 'green',
  7: 'orange',
  8: 'green',
  9: 'red',
}

const merchantColumns = computed(() => {
  const base = [
    { title: '店铺ID', dataIndex: 'storeId', width: 100 },
    { title: '店铺名称', dataIndex: 'storeName', ellipsis: true },
    { title: '外部门店编号', dataIndex: 'outStoreId', ellipsis: true },
    { title: '完成订单数', dataIndex: 'orderCount', width: 120 },
    { title: '订单金额合计', key: 'orderAmount', width: 130 },
    { title: '配送费合计', key: 'deliveryAmount', width: 130 },
    { title: '已退款金额', key: 'refundAmount', width: 130 },
    { title: '商户应收参考金额', key: 'merchantReceivableAmount', width: 160 },
    { title: '操作', key: 'action', width: 100 },
  ]
  return isAdmin.value ? [{ title: '租户', key: 'cityName', width: 120 }, ...base] : base
})

const riderColumns = [
  { title: '骑手ID', dataIndex: 'riderId', width: 100 },
  { title: '骑手姓名', dataIndex: 'riderName', width: 120 },
  { title: '手机号', dataIndex: 'mobile', width: 140 },
  { title: '完成订单数', dataIndex: 'orderCount', width: 120 },
  { title: '配送费合计', key: 'deliveryAmount', width: 130 },
  { title: '骑手收入合计', key: 'riderIncomeAmount', width: 140 },
  { title: '退款影响参考金额', key: 'refundAdjustAmount', width: 150 },
  { title: '可结算参考金额', key: 'settleableAmount', width: 150 },
  { title: '操作', key: 'action', width: 100 },
]

const detailColumns = computed(() => {
  if (activeDetailTab.value === 'merchant') {
    return [
      { title: '订单ID', dataIndex: 'orderId', width: 100 },
      { title: '订单号', dataIndex: 'orderNo', ellipsis: true },
      { title: '支付时间', key: 'payTime', width: 170 },
      { title: '完成时间', key: 'completeTime', width: 170 },
      { title: '状态', key: 'status', width: 120 },
      { title: '订单金额', key: 'orderAmount', width: 120 },
      { title: '配送费', key: 'deliveryAmount', width: 120 },
      { title: '退款金额', key: 'refundAmount', width: 120 },
    ]
  }
  return [
    { title: '订单ID', dataIndex: 'orderId', width: 100 },
    { title: '订单号', dataIndex: 'orderNo', ellipsis: true },
    { title: '完成时间', key: 'completeTime', width: 170 },
    { title: '状态', key: 'status', width: 120 },
    { title: '配送费', key: 'deliveryAmount', width: 120 },
    { title: '骑手收入', key: 'riderIncomeAmount', width: 120 },
    { title: '退款影响金额', key: 'refundAmount', width: 130 },
    { title: '可结算参考金额', key: 'settleableAmount', width: 140 },
  ]
})

const pagination = computed<TablePaginationConfig>(() => ({
  current: currentPage.value,
  pageSize: pageSize.value,
  total: total.value,
  showSizeChanger: false,
  showTotal: (count) => `共 ${count} 条`,
}))

const detailPagination = computed<TablePaginationConfig>(() => ({
  current: detailPage.value,
  pageSize: detailPageSize.value,
  total: detailTotal.value,
  showSizeChanger: false,
  showTotal: (count) => `共 ${count} 条`,
}))

function switchTab(tab: 'merchant' | 'rider') {
  if (activeTab.value === tab) {
    return
  }
  detailVisible.value = false
  activeTab.value = tab
  currentPage.value = 1
  loadList()
}

function handleFilterChange() {
  detailVisible.value = false
  currentPage.value = 1
  loadList()
}

function handleKeywordSearch() {
  detailVisible.value = false
  currentPage.value = 1
  loadList()
}

function handleTableChange(page: TablePaginationConfig) {
  const nextPage = page.current ?? 1
  if (nextPage === currentPage.value) {
    return
  }
  currentPage.value = nextPage
  loadList()
}

function handleDetailTableChange(page: TablePaginationConfig) {
  const nextPage = page.current ?? 1
  if (nextPage === detailPage.value) {
    return
  }
  detailPage.value = nextPage
  loadDetail()
}

function getQueryParams() {
  return {
    cityId: isAdmin.value ? filterCityId.value : managedCityId.value,
    keyword: keyword.value || undefined,
    startDate: startDate.value,
    endDate: endDate.value,
    page: currentPage.value,
  }
}

async function loadList() {
  loading.value = true
  try {
    if (activeTab.value === 'merchant') {
      const res: any = await merchantApi.merchantBillList(getQueryParams())
      const data = res?.data ?? {}
      merchantList.value = Array.isArray(data.list) ? data.list : []
      total.value = Number(data.total ?? 0)
      currentPage.value = Number(data.page ?? currentPage.value)
      pageSize.value = Number(data.pageSize ?? PAGE_SIZE)
    } else {
      const res: any = await merchantApi.riderBillList(getQueryParams())
      const data = res?.data ?? {}
      riderList.value = Array.isArray(data.list) ? data.list : []
      total.value = Number(data.total ?? 0)
      currentPage.value = Number(data.page ?? currentPage.value)
      pageSize.value = Number(data.pageSize ?? PAGE_SIZE)
    }
  } finally {
    loading.value = false
  }
}

async function openMerchantDetail(record: any) {
  activeDetailTab.value = 'merchant'
  detailTitle.value = `${record.storeName} 账单明细`
  currentOutStoreId.value = record.outStoreId
  currentDetailCityId.value = record.cityId
  detailPage.value = 1
  detailVisible.value = true
  await loadDetail()
}

async function openRiderDetail(record: any) {
  activeDetailTab.value = 'rider'
  detailTitle.value = `${record.riderName} 账单明细`
  currentDetailCityId.value = isAdmin.value ? filterCityId.value : managedCityId.value
  currentRiderId.value = record.riderId
  detailPage.value = 1
  detailVisible.value = true
  await loadDetail()
}

async function loadDetail() {
  detailLoading.value = true
  try {
    if (activeDetailTab.value === 'merchant') {
      const res: any = await merchantApi.merchantBillDetail({
        cityId: currentDetailCityId.value ?? (isAdmin.value ? filterCityId.value : managedCityId.value),
        outStoreId: currentOutStoreId.value,
        startDate: startDate.value,
        endDate: endDate.value,
        page: detailPage.value,
      })
      const data = res?.data ?? {}
      detailList.value = Array.isArray(data.list) ? data.list : []
      detailTotal.value = Number(data.total ?? 0)
      detailPage.value = Number(data.page ?? detailPage.value)
      detailPageSize.value = Number(data.pageSize ?? PAGE_SIZE)
    } else {
      const res: any = await merchantApi.riderBillDetail({
        cityId: currentDetailCityId.value ?? (isAdmin.value ? filterCityId.value : managedCityId.value),
        riderId: currentRiderId.value,
        startDate: startDate.value,
        endDate: endDate.value,
        page: detailPage.value,
      })
      const data = res?.data ?? {}
      detailList.value = Array.isArray(data.list) ? data.list : []
      detailTotal.value = Number(data.total ?? 0)
      detailPage.value = Number(data.page ?? detailPage.value)
      detailPageSize.value = Number(data.pageSize ?? PAGE_SIZE)
    }
  } finally {
    detailLoading.value = false
  }
}

function formatMoney(value: number | string | null | undefined) {
  const amount = Number(value ?? 0)
  return amount.toFixed(2)
}

function formatTime(value: number | null | undefined) {
  if (!value) {
    return '-'
  }
  return new Date(Number(value) * 1000).toLocaleString('zh-CN', { hour12: false })
}

onMounted(async () => {
  await loadCities()
  if (!isAdmin.value) {
    filterCityId.value = managedCityId.value
  }
  currentDetailCityId.value = isAdmin.value ? filterCityId.value : managedCityId.value
  await loadList()
})
</script>

<style scoped>
.fund-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 4px;
}

.fund-tab {
  border: 1px solid var(--line);
  background: var(--panel-strong);
  color: var(--text-main);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fund-tab:hover {
  border-color: rgba(140, 124, 240, 0.48);
}

.fund-tab.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #8c7cf0 0%, #c995ea 100%);
  box-shadow: 0 12px 24px rgba(140, 124, 240, 0.24);
}
</style>