110 lines
3.1 KiB
TypeScript
110 lines
3.1 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
||
import { View, Text, Image } from "@tarojs/components";
|
||
|
||
import "./index.scss";
|
||
import httpService from "@/services/httpService";
|
||
import Taro, { useReachBottom } from "@tarojs/taro";
|
||
import img from "@/config/images";
|
||
|
||
interface BillRecord {
|
||
id: number;
|
||
file_name: string;
|
||
download_url: string;
|
||
file_size: number;
|
||
create_time: string;
|
||
expire_time: string;
|
||
bill_date_range_start: string;
|
||
bill_date_range_end: string;
|
||
bill_transaction_type: string;
|
||
bill_transaction_sub_type: string;
|
||
date_range_desc: string;
|
||
transaction_type_desc: string;
|
||
transaction_sub_type_desc: string;
|
||
}
|
||
|
||
const DownloadBillRecords: React.FC = () => {
|
||
// 获取当前页面的配置
|
||
const currentPage = Taro.getCurrentInstance();
|
||
const pageConfig = currentPage.page?.config;
|
||
const pageTitle = pageConfig?.navigationBarTitleText;
|
||
const [records, setRecords] = useState<BillRecord[]>([]);
|
||
const [params, setParams] = useState({
|
||
page: 1,
|
||
limit: 20,
|
||
});
|
||
|
||
const [totalPages, setTotalPages] = useState(1);
|
||
|
||
useReachBottom(() => {
|
||
if (params.page < totalPages) {
|
||
setParams({ ...params, page: params.page + 1 });
|
||
}
|
||
});
|
||
useEffect(() => {
|
||
fetchRecords();
|
||
}, [params]);
|
||
|
||
const fetchRecords = async () => {
|
||
try {
|
||
const response = await httpService.post<{
|
||
rows: BillRecord[];
|
||
totalPages: number;
|
||
}>("/wallet/download_history", params);
|
||
setRecords([...records, ...response.data.rows]);
|
||
setTotalPages(response.data.totalPages);
|
||
} catch (error) {
|
||
console.log(error);
|
||
Taro.showToast({
|
||
title: "获取账单记录失败",
|
||
icon: "none",
|
||
duration: 2000,
|
||
});
|
||
}
|
||
};
|
||
return (
|
||
<View className="download-bill-records-page">
|
||
{/* 导航栏 */}
|
||
<View className="custom-navbar">
|
||
<View className="detail-navigator">
|
||
<View
|
||
className="detail-navigator-back"
|
||
onClick={() => {
|
||
Taro.navigateBack();
|
||
}}
|
||
>
|
||
<Image
|
||
className="detail-navigator-back-icon"
|
||
src={img.ICON_NAVIGATOR_BACK}
|
||
/>
|
||
<Text>{pageTitle}</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
<View className="records-container">
|
||
{records.map((record) => (
|
||
<View className="record-item" key={record.id}>
|
||
<View className="title-text">{record.file_name}</View>
|
||
<View className="info-item">
|
||
<Text>申请时间</Text>
|
||
<Text>{record.create_time}</Text>
|
||
</View>
|
||
<View className="info-item">
|
||
<Text>账单范围</Text>
|
||
<Text>{record.date_range_desc}</Text>
|
||
</View>
|
||
<View className="info-item">
|
||
<Text></Text>
|
||
<Text className="btn">查看材料</Text>
|
||
</View>
|
||
</View>
|
||
))}
|
||
</View>
|
||
<View className="tips">
|
||
出于信息安全考虑，仅保留并展示7天内的账单下载记录
|
||
</View>
|
||
</View>
|
||
);
|
||
};
|
||
|
||
export default DownloadBillRecords;
|