下载账单、优化账单查询
This commit is contained in:
@@ -2,41 +2,71 @@ import React, { useState, useEffect } from "react";
|
||||
import { View, Text } from "@tarojs/components";
|
||||
|
||||
import "./index.scss";
|
||||
import httpService from "@/services/httpService";
|
||||
import Taro from "@tarojs/taro";
|
||||
|
||||
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 [records, setRecords] = useState<BillRecord[]>([]);
|
||||
const [params, setParams] = useState({
|
||||
page: 1,
|
||||
limit: 20,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
fetchRecords();
|
||||
}, []);
|
||||
|
||||
const fetchRecords = async () => {
|
||||
try {
|
||||
const response = await httpService.post<{ rows: BillRecord[] }>('/wallet/download_history', params);
|
||||
setRecords(response.data.rows);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
Taro.showToast({
|
||||
title: '获取账单记录失败',
|
||||
icon: 'none',
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
};
|
||||
return (
|
||||
<View className="download-bill-records-page">
|
||||
<View className="records-container">
|
||||
<View className="record-item">
|
||||
<View className="title-text">账单流水文件</View>
|
||||
<View className="info-item">
|
||||
<Text>申请时间</Text>
|
||||
<Text>2025年9月12日 19:03:06</Text>
|
||||
</View>
|
||||
<View className="info-item">
|
||||
<Text>账单范围</Text>
|
||||
<Text>2025年9月12日 19:03:06 至 2025年9月12日 19:03:06</Text>
|
||||
</View>
|
||||
<View className="info-item">
|
||||
<Text></Text>
|
||||
<Text className="btn">查看材料</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View className="record-item">
|
||||
<View className="title-text">账单流水文件</View>
|
||||
<View className="info-item">
|
||||
<Text>申请时间</Text>
|
||||
<Text>2025年9月12日 19:03:06</Text>
|
||||
</View>
|
||||
<View className="info-item">
|
||||
<Text>账单范围</Text>
|
||||
<Text>2025年9月12日 19:03:06 至 2025年9月12日 19:03:06</Text>
|
||||
</View>
|
||||
<View className="info-item">
|
||||
<Text></Text>
|
||||
<Text className="btn">查看材料</Text>
|
||||
</View>
|
||||
</View>
|
||||
{
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user