mini-programs/src/user_pages/downloadBillRecords/index.tsx

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";
import { EmptyState, GeneralNavbar } from "@/components";
import { useGlobalState } from "@/store/global";

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 { statusNavbarHeightInfo } = useGlobalState() || {};
  const { totalHeight = 98 } = statusNavbarHeightInfo || {};
  // 获取当前页面的配置
  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,
      });
    }
  };

  const handlePreviewFile = (fileUrl: string) => {
    wx.downloadFile({
      url: fileUrl,
      success: (res) => {
        if (res.statusCode === 200) {
          // 确保文件路径正确并添加扩展名
          const filePath = res.tempFilePath;
          wx.openDocument({
            filePath: filePath,
            fileType: 'xlsx', // 指定文件类型为xlsx
            showMenu: true, // 显示右上角菜单按钮
            success: (openRes) => {
              console.log('打开文档成功');
            },
            fail: (err) => {
              console.warn('打开文档失败', err);
            }
          });
        } else {
          console.warn('下载失败，状态码:', res.statusCode);
        }
      },
      fail: (err) => {
        console.warn('下载失败', err);
      }
    });
  }
  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> */}
      {/* 顶部导航栏 */}
      <GeneralNavbar
        title={pageTitle}
        showBack={true}
        showAvatar={false}
        onBack={() => {
          Taro.navigateBack();
        }}
      />
      <View
        className="records-container"
        style={{ marginTop: `${totalHeight}px` }}
      >
        {records.length ? 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" onClick={() => handlePreviewFile(record.file_url)}>查看材料</Text>
            </View>
          </View>
        )) : <EmptyState text="暂无数据" />}
      </View>
      <View className="tips">
        出于信息安全考虑，仅保留并展示7天内的账单下载记录
      </View>
    </View>
  );
};

export default DownloadBillRecords;