自定义title

src/user_pages/downloadBillRecords/index.tsx

@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from "react";
-import { View, Text } from "@tarojs/components";
+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;
@@ -22,6 +23,10 @@ interface BillRecord {
 }
 
 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,
@@ -41,42 +46,62 @@ const DownloadBillRecords: React.FC = () => {
 
   const fetchRecords = async () => {
     try {
-      const response = await httpService.post<{ rows: BillRecord[], totalPages: number }>('/wallet/download_history', params);
+      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',
+        title: "获取账单记录失败",
+        icon: "none",
         duration: 2000,
       });
     }
   };
   return (
     <View className="download-bill-records-page">
-      <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 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 className="tips">出于信息安全考虑，仅保留并展示7天内的账单下载记录</View>
     </View>
   );
 };