Refactor: 新增资金对账功能，扩展商户与骑手账单查询接口，完善路由配置，更新UI展示和交互逻辑。

shaofan
1 parent 22489d64
Showing 3 changed files with 467 additions and 0 deletions
src/api/index.ts
src/router/index.ts
src/views/merchant/FundReconciliation.vue
@@ -114,6 +114,10 @@ export const merchantApi = {
     request.post('/api/admin/merchant/store/updateFeeConfig', null,
       { params: { storeId, freeShipping, upToSend } }),
   delStore: (storeId: number) => request.delete('/api/admin/merchant/store/del', { params: { storeId } }),
+  merchantBillList: (params: any) => request.get('/api/admin/merchant/fund/merchant-bills', { params }),
+  merchantBillDetail: (params: any) => request.get('/api/admin/merchant/fund/merchant-bill-detail', { params }),
+  riderBillList: (params: any) => request.get('/api/admin/merchant/fund/rider-bills', { params }),
+  riderBillDetail: (params: any) => request.get('/api/admin/merchant/fund/rider-bill-detail', { params }),
 }
  
 // 骑手管理
@@ -46,6 +46,12 @@ const router = createRouter({
           meta: { title: '店铺管理' },
         },
         {
+          path: 'merchant/fund',
+          name: 'MerchantFund',
+          component: () => import('@/views/merchant/FundReconciliation.vue'),
+          meta: { title: '资金对账' },
+        },
+        {
           path: 'rider',
           name: 'Rider',
           component: () => import('@/views/rider/RiderList.vue'),
+<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>