账单与支付

2026-08-14 23:48:15 +08:00
parent 4138164bd8
commit 3bd26acbb9
32 changed files with 2052 additions and 475 deletions
@@ -0,0 +1,143 @@
+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 { getPaymentListApi, PAY_METHOD_NAMES, PAY_STATUS_NAMES } from '@/services/payment'
+import type { Payment, PayStatus } from '@/services/payment'
+import './index.less'
+
+const PAGE_SIZE = 10
+
+/** 状态筛选（undefined = 全部） */
+const STATUS_FILTERS: Array<{ value: PayStatus | undefined; label: string }> = [
+  { value: undefined, label: '全部' },
+  { value: 0, label: '待审核' },
+  { value: 1, label: '已通过' },
+  { value: 2, label: '已拒绝' },
+]
+
+/**
+ * 支付记录列表页
+ * 门店口径支付记录（合并付款申请），支持状态筛选；点击进支付详情
+ */
+export default function PaymentRecordsPage() {
+  const token = useAuthStore(s => s.token)
+
+  const [status, setStatus] = useState<PayStatus | undefined>(undefined)
+  const [records, setRecords] = useState<Payment[]>([])
+  const [page, setPage] = useState(1)
+  const [loading, setLoading] = useState(false)
+  const [finished, setFinished] = useState(false)
+  const loadingRef = useRef(false)
+
+  const loggedIn = !!token
+
+  /** 拉取支付记录 */
+  const loadList = useCallback(
+    async (pageNum: number, reset: boolean, statusParam?: PayStatus) => {
+      if (!loggedIn || loadingRef.current) return
+      loadingRef.current = true
+      setLoading(true)
+      try {
+        const res = await getPaymentListApi({ status: statusParam, page: pageNum, pageSize: PAGE_SIZE })
+        const { data, total } = res.data
+        setRecords(prev => (reset ? data : [...prev, ...data]))
+        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?: PayStatus) => {
+      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/payment-detail/index?id=${id}` })
+  }, [])
+
+  return (
+    <View className='payment-page'>
+      {/* ========== 状态筛选 ========== */}
+      <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='payment-empty'>
+          <View className='payment-empty__btn' onClick={goLogin}>去登录</View>
+        </Empty>
+      ) : records.length === 0 ? (
+        loading ? (
+          <View className='payment-loading'><Text>加载中...</Text></View>
+        ) : (
+          <Empty description='暂无支付记录' className='payment-empty' />
+        )
+      ) : (
+        records.map(record => (
+          <View key={record.id} className='payment-item' onClick={() => goDetail(record.id)}>
+            <View className='payment-item__header'>
+              <Text className='payment-item__no'>{record.payment_no}</Text>
+              <Text className={`payment-item__status payment-item__status--${record.status}`}>
+                {PAY_STATUS_NAMES[record.status]}
+              </Text>
+            </View>
+            <View className='payment-item__body'>
+              <View className='payment-item__meta'>
+                <Text className='payment-item__method'>{PAY_METHOD_NAMES[record.pay_method]}</Text>
+                <Text className='payment-item__date'>{record.created_at}</Text>
+              </View>
+              <View className='payment-item__side'>
+                <Text className='payment-item__amount'>￥{record.amount}</Text>
+                <Text className='payment-item__bills'>合并 {record.bills_count ?? 0} 张账单</Text>
+              </View>
+            </View>
+            {record.status === 2 && !!record.audit_remark && (
+              <Text className='payment-item__reject'>拒绝原因：{record.audit_remark}</Text>
+            )}
+          </View>
+        ))
+      )}
+
+      {loggedIn && finished && records.length > 0 && (
+        <View className='payment-loading'><Text>没有更多了</Text></View>
+      )}
+    </View>
+  )
+}