144 lines
4.9 KiB
TypeScript
144 lines
4.9 KiB
TypeScript
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, getPayStatusName, PAY_METHOD_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}`}>
|
|
{getPayStatusName(record)}
|
|
</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.pay_type !== 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>
|
|
)
|
|
}
|