自定义title

src/user_pages/billDetail/index.config.ts

@@ -1,3 +1,9 @@
 export default definePageConfig({
-  navigationBarTitleText: '明细详情',
-})
+  navigationBarTitleText: "明细详情",
+  navigationBarBackgroundColor: "#ffffff",
+  navigationBarTextStyle: "black",
+  backgroundColor: "#f5f5f5",
+  enablePullDownRefresh: false,
+  disableScroll: false,
+  navigationStyle: "custom",
+});

src/user_pages/billDetail/index.scss

@@ -4,6 +4,49 @@
   padding: 5px;
   box-sizing: border-box;
   overflow: hidden;
+  .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;
+      }
+    }
+  }
   .title-text-box {
     height: 118px;
     display: flex;

src/user_pages/billDetail/index.tsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useState } from "react";
-import { View, Text } from "@tarojs/components";
-import { useRouter } from '@tarojs/taro';
-import dayjs from 'dayjs';
-import Taro from '@tarojs/taro';
+import { View, Text, Image } from "@tarojs/components";
+import { useRouter } from "@tarojs/taro";
+import dayjs from "dayjs";
+import Taro from "@tarojs/taro";
 
 import httpService from "@/services/httpService";
 import { TransactionType, TransactionSubType } from "@/user_pages/wallet/index";
 import "./index.scss";
+import img from "@/config/images";
 
 enum FreezeActions {
   Unfreeze = "unfreeze",
@@ -31,20 +32,26 @@ interface BillDetail {
 }
 
 const BillDetail: React.FC = () => {
+  // 获取当前页面的配置
+  const currentPage = Taro.getCurrentInstance();
+  const pageConfig = currentPage.page?.config;
+  const pageTitle = pageConfig?.navigationBarTitleText;
   const router = useRouter();
   const { id } = router.params;
   const [billDetail, setBillDetail] = useState<BillDetail>({});
 
   const getBillDetail = async () => {
     try {
-      const res = await httpService.post<BillDetail>("/wallet/transaction_detail", { transaction_id: id })
+      const res = await httpService.post<BillDetail>(
+        "/wallet/transaction_detail",
+        { transaction_id: id }
+      );
       if (res.code === 0) {
         setBillDetail(res.data);
       }
     } catch (error) {
       console.log(error);
     }
-
   };
 
   const copyText = (text: string | undefined) => {
@@ -55,10 +62,10 @@ const BillDetail: React.FC = () => {
       data: text,
       success: () => {
         Taro.showToast({
-          title: '复制成功',
-          icon: 'none'
+          title: "复制成功",
+          icon: "none",
         });
-      }
+      },
     });
   };
 
@@ -67,17 +74,37 @@ const BillDetail: React.FC = () => {
   }, [id]);
   return (
     <View className="bill-detail-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="title-text-box">
         <View className="title-text">现金交易 (元)</View>
         <View className="amount-text">
-          <Text>{billDetail.transaction_type === 'expense' ? '-' : '+'}</Text>
+          <Text>{billDetail.transaction_type === "expense" ? "-" : "+"}</Text>
           <Text>{billDetail.amount_yuan}</Text>
         </View>
       </View>
       <View className="detail-wrapper">
         <View className="detail-item">
           <Text>交易时间</Text>
-          <Text>{billDetail.create_time && dayjs(billDetail.create_time).format('YYYY-MM-DD HH:mm:ss')}</Text>
+          <Text>
+            {billDetail.create_time &&
+              dayjs(billDetail.create_time).format("YYYY-MM-DD HH:mm:ss")}
+          </Text>
         </View>
         <View className="detail-item">
           <Text>活动标题</Text>
@@ -91,7 +118,9 @@ const BillDetail: React.FC = () => {
           <Text>商户单号</Text>
           <View className="with-btn-box">
             <Text>{billDetail.order_no}</Text>
-            <Text className="btn" onClick={() => copyText(billDetail.order_no)}>复制</Text>
+            <Text className="btn" onClick={() => copyText(billDetail.order_no)}>
+              复制
+            </Text>
           </View>
         </View>
       </View>