shanxia2.0/miniprogram/pages/bx/mine/list.vue

<script setup>
import { ref } from 'vue'
import { onShow, onReachBottom } from '@dcloudio/uni-app'
import { listMyReimburse, listMyAdvance } from '@/api/bx'
import { bxStatusLabel, formatMoney, dash } from '@/utils/bxLabels'
import { PAGE_PATHS } from '@/config/api'

const tabs = [
  { key: 'all', label: '全部' },
  { key: 'reimburse', label: '报销' },
  { key: 'advance', label: '借款' }
]

const activeTab = ref('all')
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const page = ref(1)
const pageSize = 20

const goBack = () => {
  uni.navigateBack({
    fail: () => uni.switchTab({ url: PAGE_PATHS.workbench })
  })
}

const goDetail = (row) => {
  if (row._biz === 'advance') {
    uni.navigateTo({ url: `${PAGE_PATHS.bxAdvanceDetail}?id=${row.id}` })
  } else {
    uni.navigateTo({ url: `${PAGE_PATHS.bxReimburseDetail}?id=${row.id}` })
  }
}

const mark = (rows, biz) =>
  (rows || []).map((r) => ({
    ...r,
    _biz: biz,
    _title: biz === 'advance' ? `借款 ${r.applyCode || ''}` : `报销 ${r.applyCode || ''}`,
    _sub: biz === 'advance' ? dash(r.reason) : dash(r.expenseName || r.title)
  }))

const loadList = async (reset = false) => {
  if (loading.value) return
  if (reset) {
    page.value = 1
    finished.value = false
    list.value = []
  }
  if (finished.value) return
  loading.value = true
  try {
    const q = { page: page.value, pageSize }
    let rows = []
    if (activeTab.value === 'reimburse') {
      const res = await listMyReimburse(q)
      rows = mark(res.rows, 'reimburse')
      list.value = reset ? rows : list.value.concat(rows)
      if (list.value.length >= (res.total || 0) || rows.length < pageSize) finished.value = true
      else page.value += 1
    } else if (activeTab.value === 'advance') {
      const res = await listMyAdvance(q)
      rows = mark(res.rows, 'advance')
      list.value = reset ? rows : list.value.concat(rows)
      if (list.value.length >= (res.total || 0) || rows.length < pageSize) finished.value = true
      else page.value += 1
    } else {
      const [a, b] = await Promise.all([listMyReimburse(q), listMyAdvance(q)])
      rows = mark(a.rows, 'reimburse').concat(mark(b.rows, 'advance'))
      rows.sort((x, y) => String(y.applyTime || '').localeCompare(String(x.applyTime || '')))
      list.value = reset ? rows : list.value.concat(rows)
      const total = (a.total || 0) + (b.total || 0)
      if (list.value.length >= total || (a.rows.length < pageSize && b.rows.length < pageSize)) {
        finished.value = true
      } else page.value += 1
    }
  } catch (e) {
    uni.showToast({ title: e.message || '加载失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

const switchTab = (key) => {
  if (activeTab.value === key) return
  activeTab.value = key
  loadList(true)
}

onShow(() => loadList(true))
onReachBottom(() => loadList(false))
</script>

<template>
  <view class="mp-page mp-page--sub">
    <view class="mp-header mp-header--bx">
      <text class="mp-subpage-back" @click="goBack">← 工作台</text>
      <text class="mp-header__title" style="margin-top: 16rpx">我的单据</text>
    </view>

    <view class="mp-section" style="padding-bottom: 0">
      <scroll-view scroll-x class="mp-tabs">
        <view
          v-for="t in tabs"
          :key="t.key"
          class="mp-tab"
          :class="{ 'mp-tab--active': activeTab === t.key }"
          @click="switchTab(t.key)"
        >
          {{ t.label }}
        </view>
      </scroll-view>
    </view>

    <view class="mp-section">
      <mp-empty v-if="!list.length && !loading" title="暂无单据" />
      <view v-else class="mp-list">
        <view v-for="row in list" :key="row._biz + '-' + row.id" class="mp-card" @click="goDetail(row)">
          <view class="mp-card__head">
            <view>
              <text class="mp-card__title">{{ row._title }}</text>
              <text class="mp-card__sub">{{ row._sub }}</text>
            </view>
            <text class="mp-tag" :class="'mp-tag--' + bxStatusLabel(row.status).tag">
              {{ bxStatusLabel(row.status).text }}
            </text>
          </view>
          <view class="mp-card__row">
            <text>申请时间</text>
            <text class="mp-card__row-val">{{ dash(row.applyTime) }}</text>
          </view>
          <view class="mp-card__foot">
            <text class="mp-card__amount">{{ formatMoney(row.amount) }}</text>
          </view>
        </view>
      </view>
      <view v-if="loading" class="mp-list-loading">加载中…</view>
      <view v-else-if="finished && list.length" class="mp-list-end">已加载全部</view>
    </view>
  </view>
</template>