自定义title

2025-10-17 10:11:36 +08:00
parent 54ac130e37
commit ac2c9571e7
22 changed files with 863 additions and 298 deletions
--- a/src/user_pages/downloadBill/index.config.ts
+++ b/src/user_pages/downloadBill/index.config.ts
@@ -1,3 +1,9 @@
 export default definePageConfig({
-  navigationBarTitleText: '下载账单',
-})
+  navigationBarTitleText: "下载账单",
+  navigationBarBackgroundColor: "#ffffff",
+  navigationBarTextStyle: "black",
+  backgroundColor: "#f5f5f5",
+  enablePullDownRefresh: false,
+  disableScroll: false,
+  navigationStyle: "custom",
+});
--- a/src/user_pages/downloadBill/index.scss
+++ b/src/user_pages/downloadBill/index.scss
@@ -7,6 +7,50 @@
  overflow: hidden;
  box-sizing: border-box;

+  .custom-navbar {
+    height: 56px;
+    /* 通常与原生导航栏高度一致 */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    // background-color: #fff;
+    color: #000;
+    padding-top: 44px;
+    /* 适配状态栏 */
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background-color: #f5f5f5;
+  }
+
+  .detail-navigator {
+    height: 30px;
+    width: fit-content;
+    border-radius: 15px;
+    position: absolute;
+    left: 12px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+
+    .detail-navigator-back {
+      height: 32px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-family: PingFang SC;
+      font-weight: 600;
+      font-style: Semibold;
+      font-size: 20px;
+      letter-spacing: 0.38px;
+
+      & > .detail-navigator-back-icon {
+        width: 32px;
+        height: 32px;
+      }
+    }
+  }
+
  .hint_content {
    font-family: PingFang SC;
    font-weight: 400;
@@ -81,7 +125,7 @@
          border-radius: 20px;
          padding: 4px 8px;

-          &+.option_button {
+          & + .option_button {
            margin-left: 12px;
          }

@@ -136,7 +180,7 @@
      line-height: normal;

      &.disabled {
-        color: rgba(255, 255, 255, 0.30);
+        color: rgba(255, 255, 255, 0.3);
      }
    }
  }
@@ -144,7 +188,6 @@

 // 过滤弹窗
 .filter_popup {
-
  .popup_content {
    padding: 16px 20px;
    .form_section {
@@ -166,7 +209,7 @@
          gap: 8px;

          .option_item {
-            background-color: #0000000D;
+            background-color: #0000000d;
            text-align: center;
            padding: 8px;
            border-radius: 4px;
@@ -180,4 +223,4 @@
      }
    }
  }
-}
+}
--- a/src/user_pages/downloadBill/index.tsx
+++ b/src/user_pages/downloadBill/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { View, Text, Button, Input } from "@tarojs/components";
+import { View, Text, Button, Input, Image } from "@tarojs/components";
 import Taro, { useDidShow } from "@tarojs/taro";
 import dayjs from "dayjs";

@@ -8,6 +8,7 @@ import { DialogCalendarCard } from "@/components/index";
 // import { CalendarUI } from "@/components";
 import { CommonPopup } from "@/components";
 import httpService from "@/services/httpService";
+import img from "@/config/images";

 export enum TransactionSubType {
  All = "",
@@ -30,6 +31,10 @@ interface TransactionLoadParams {
  date_range?: string[];
 }
 const DownloadBill: React.FC = () => {
+  // 获取当前页面的配置
+  const currentPage = Taro.getCurrentInstance();
+  const pageConfig = currentPage.page?.config;
+  const pageTitle = pageConfig?.navigationBarTitleText;
  const [dateRange, setDateRange] = useState({ start: "", end: "" });
  const [transactionSubType, setTransactionSubType] =
    useState<TransactionSubType>(TransactionSubType.All);
@@ -179,7 +184,10 @@ const DownloadBill: React.FC = () => {
    try {
      const { transaction_sub_type } = load_transactions_params;
      const date_range = [start, end];
-      const res = await httpService.post("/wallet/download_bill", { transaction_sub_type, date_range });
+      const res = await httpService.post("/wallet/download_bill", {
+        transaction_sub_type,
+        date_range,
+      });
      const { fileUrl, fileName } = res.data;
      // 调用下载文件接口
      wx.downloadFile({
@@ -188,17 +196,17 @@ const DownloadBill: React.FC = () => {
          // 只有200状态码表示下载成功
          if (res.statusCode === 200) {
            // 下载成功后可以使用res.tempFilePath访问临时文件路径
-            console.log('文件下载成功，临时路径为：', res.tempFilePath);
+            console.log("文件下载成功，临时路径为：", res.tempFilePath);
            // 保存文件到本地
            wx.openDocument({
              filePath: res.tempFilePath,
-              showMenu: true // 显示保存菜单
+              showMenu: true, // 显示保存菜单
            });
          }
        },
        fail: function (err) {
-          console.error('文件下载失败：', err);
-        }
+          console.error("文件下载失败：", err);
+        },
      });
    } catch (error) {
      console.error(error);
@@ -206,6 +214,23 @@ const DownloadBill: React.FC = () => {
  };
  return (
    <View className="download_bill_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="hint_content">
        <Text>最长可导出三个月的账单 </Text>
        {/* <Text className="button_text">示例文件</Text> */}
@@ -247,8 +272,9 @@ const DownloadBill: React.FC = () => {
              近一周
            </View>
            <View
-              className={`option_button ${dateType === "month" ? "active" : ""
-                }`}
+              className={`option_button ${
+                dateType === "month" ? "active" : ""
+              }`}
              onClick={() => {
                selectDateRange("month");
              }}
@@ -256,8 +282,9 @@ const DownloadBill: React.FC = () => {
              近一月
            </View>
            <View
-              className={`option_button ${dateType === "custom" ? "active" : ""
-                }`}
+              className={`option_button ${
+                dateType === "custom" ? "active" : ""
+              }`}
              onClick={() => {
                selectDateRange("custom");
              }}
@@ -298,7 +325,10 @@ const DownloadBill: React.FC = () => {
        >
          下载记录
        </Text>
-        <Button className={`download_button ${!dateRange.start ? 'disabled' : ''}`} onClick={handleDownloadBill}>
+        <Button
+          className={`download_button ${!dateRange.start ? "disabled" : ""}`}
+          onClick={handleDownloadBill}
+        >
          下载
        </Button>
      </View>