账单

2026-08-14 20:21:50 +08:00
parent 4a5b7003ca
commit 03434feb35
21 changed files with 1513 additions and 629 deletions
@@ -0,0 +1,157 @@
+import { useCallback, useRef, useState } from 'react'
+import Taro, { useDidShow, useReachBottom } from '@tarojs/taro'
+import { View, Text, ScrollView } from '@tarojs/components'
+import { Empty } from '@antmjs/vantui'
+import useAuthStore from '@/stores/auth/useAuthStore'
+import { getBillListApi } from '@/services/bill'
+import type { Bill, BillSummary } from '@/services/bill'
+import './index.less'
+
+const PAGE_SIZE = 10
+
+/** 状态筛选（接口 status 为原始支付状态：0 未支付含审核中 / 1 已支付） */
+const STATUS_FILTERS: Array<{ value: 0 | 1 | undefined; label: string }> = [
+  { value: undefined, label: '全部' },
+  { value: 0, label: '未支付' },
+  { value: 1, label: '已支付' },
+]
+
+/**
+ * 账单列表页
+ * 采购单完成后由后台按门店生成（只读）；头部 summary 为门店口径待支付汇总（含审核中，不受筛选影响）
+ */
+export default function BillListPage() {
+  const token = useAuthStore(s => s.token)
+
+  const [status, setStatus] = useState<0 | 1 | undefined>(undefined)
+  const [bills, setBills] = useState<Bill[]>([])
+  const [summary, setSummary] = useState<BillSummary | null>(null)
+  const [page, setPage] = useState(1)
+  const [loading, setLoading] = useState(false)
+  const [finished, setFinished] = useState(false)
+  const loadingRef = useRef(false)
+
+  const loggedIn = !!token
+
+  /** 拉取账单列表（summary 每次随响应刷新） */
+  const loadList = useCallback(
+    async (pageNum: number, reset: boolean, statusParam?: 0 | 1) => {
+      if (!loggedIn || loadingRef.current) return
+      loadingRef.current = true
+      setLoading(true)
+      try {
+        const res = await getBillListApi({ status: statusParam, page: pageNum, pageSize: PAGE_SIZE })
+        const { data, total, summary: sum } = res.data
+        setBills(prev => (reset ? data : [...prev, ...data]))
+        setSummary(sum)
+        setPage(pageNum)
+        setFinished(pageNum * PAGE_SIZE >= total)
+      } catch {
+        // 错误已由 request 层 toast
+      } finally {
+        loadingRef.current = false
+        setLoading(false)
+      }
+    },
+    [loggedIn],
+  )
+
+  useDidShow(() => {
+    loadList(1, true, status)
+  })
+
+  useReachBottom(() => {
+    if (!finished && !loadingRef.current && loggedIn) {
+      loadList(page + 1, false, status)
+    }
+  })
+
+  /** 切换状态筛选 */
+  const handleStatusTap = useCallback(
+    (value?: 0 | 1) => {
+      setStatus(value)
+      setFinished(false)
+      loadList(1, true, value)
+    },
+    [loadList],
+  )
+
+  const goLogin = useCallback(() => {
+    Taro.navigateTo({ url: '/pages/login/index' })
+  }, [])
+
+  const goDetail = useCallback((id: number) => {
+    Taro.navigateTo({ url: `/pages/bill-detail/index?id=${id}` })
+  }, [])
+
+  return (
+    <View className='bill-page'>
+      {/* ========== 待支付汇总（门店口径，含审核中） ========== */}
+      {loggedIn && summary && summary.unpaid_count > 0 && (
+        <View className='bill-summary'>
+          <View className='bill-summary__info'>
+            <Text className='bill-summary__label'>待支付账单（含审核中）</Text>
+            <Text className='bill-summary__count'>{summary.unpaid_count} 笔</Text>
+          </View>
+          <Text className='bill-summary__amount'>￥{summary.unpaid_amount}</Text>
+        </View>
+      )}
+
+      {/* ========== 状态筛选 ========== */}
+      <ScrollView scrollX className='status-scroll'>
+        {STATUS_FILTERS.map(item => (
+          <View
+            key={item.label}
+            className={`status-chip ${status === item.value ? 'active' : ''}`}
+            onClick={() => handleStatusTap(item.value)}
+          >
+            <Text>{item.label}</Text>
+          </View>
+        ))}
+      </ScrollView>
+
+      {/* ========== 账单列表 ========== */}
+      {!loggedIn ? (
+        <Empty description='登录后查看账单' className='bill-empty'>
+          <View className='bill-empty__btn' onClick={goLogin}>去登录</View>
+        </Empty>
+      ) : bills.length === 0 ? (
+        loading ? (
+          <View className='bill-loading'><Text>加载中...</Text></View>
+        ) : (
+          <Empty description='暂无账单' className='bill-empty' />
+        )
+      ) : (
+        bills.map(bill => (
+          <View key={bill.id} className='bill-item' onClick={() => goDetail(bill.id)}>
+            <View className='bill-item__header'>
+              <Text className='bill-item__no'>{bill.bill_no}</Text>
+              <Text className={`bill-item__status bill-item__status--${bill.pay_state}`}>
+                {bill.pay_state_name}
+              </Text>
+            </View>
+            <View className='bill-item__body'>
+              <View className='bill-item__meta'>
+                <Text className='bill-item__date'>账单日期 {bill.bill_date}</Text>
+                {bill.purchase && (
+                  <Text className='bill-item__purchase'>采购单 {bill.purchase.purchase_no}</Text>
+                )}
+              </View>
+              <Text className='bill-item__amount'>￥{bill.total_amount}</Text>
+            </View>
+            <View className='bill-item__footer'>
+              <Text className='bill-item__settle'>应结算 {bill.settlement_date}</Text>
+              {bill.pay_state === 2 && bill.paid_at && (
+                <Text className='bill-item__paid'>已于 {bill.paid_at} 支付</Text>
+              )}
+            </View>
+          </View>
+        ))
+      )}
+
+      {loggedIn && finished && bills.length > 0 && (
+        <View className='bill-loading'><Text>没有更多了</Text></View>
+      )}
+    </View>
+  )
+}