自定义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 { View, Text, Image } from "@tarojs/components";
-import { useRouter } from '@tarojs/taro';
+import { useRouter } from "@tarojs/taro";
-import dayjs from 'dayjs';
+import dayjs from "dayjs";
-import Taro from '@tarojs/taro';
+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: '复制成功',
+          title: "复制成功",
-          icon: 'none'
+          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>

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",
+});

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;

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,7 +272,8 @@ const DownloadBill: React.FC = () => {
               近一周
             </View>
             <View
-              className={`option_button ${dateType === "month" ? "active" : ""
+              className={`option_button ${
+                dateType === "month" ? "active" : ""
               }`}
               onClick={() => {
                 selectDateRange("month");
@@ -256,7 +282,8 @@ 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>

src/user_pages/downloadBillRecords/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/downloadBillRecords/index.scss

@@ -1,12 +1,11 @@
 .download-bill-records-page {
-    color: #3C3C4399;
+  color: #3c3c4399;
   font-family: PingFang SC;
   font-weight: 400;
   font-style: Regular;
   font-size: 16px;
   line-height: 24px;
   letter-spacing: 0px;
-    padding: 20px;
   height: 100vh;
   overflow-y: auto;
 
@@ -16,30 +15,71 @@
     height: 0;
     color: transparent;
   }
+  .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;
+      }
+    }
+  }
 
   .records-container {
-        padding-bottom: 50px;
+    padding: 0 20px 50px 20px;
 
     .record-item {
       padding: 16px 0;
 
-            &+.record-item {
+      & + .record-item {
-                border-top: 1px solid #0000000D;
+        border-top: 1px solid #0000000d;
       }
 
       .title-text {
         font-size: 16px;
         color: #000;
         margin-bottom: 8px;
-
       }
 
       .info-item {
         display: flex;
         gap: 20px;
 
-                &+.info-item {
+        & + .info-item {
           margin-top: 8px;
         }
 
@@ -53,15 +93,13 @@
             color: #000;
 
             &.btn {
-                            color: #007AFF;
+              color: #007aff;
               flex: unset;
               width: fit-content;
             }
           }
         }
-
       }
-
     }
   }
 
@@ -72,7 +110,7 @@
     bottom: 0;
     left: 0;
     width: 100vw;
-        background-color: #FFFFFF;
+    background-color: #ffffff;
     padding: 20px 0;
   }
 }

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,23 +46,42 @@ 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: '获取账单记录失败',
+        title: "获取账单记录失败",
-        icon: 'none',
+        icon: "none",
         duration: 2000,
       });
     }
   };
   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>
       <View className="records-container">
-        {
+        {records.map((record) => (
-          records.map((record) => (
           <View className="record-item" key={record.id}>
             <View className="title-text">{record.file_name}</View>
             <View className="info-item">
@@ -73,10 +97,11 @@ const DownloadBillRecords: React.FC = () => {
               <Text className="btn">查看材料</Text>
             </View>
           </View>
-          ))
+        ))}
-        }
+      </View>
+      <View className="tips">
+        出于信息安全考虑，仅保留并展示7天内的账单下载记录
       </View>
-      <View className="tips">出于信息安全考虑，仅保留并展示7天内的账单下载记录</View>
     </View>
   );
 };

src/user_pages/edit/index.config.ts

@@ -1,9 +1,9 @@
 export default definePageConfig({
-  navigationBarTitleText: '编辑资料',
+  navigationBarTitleText: "编辑资料",
-  navigationBarBackgroundColor: '#ffffff',
+  navigationBarBackgroundColor: "#ffffff",
-  navigationBarTextStyle: 'black',
+  navigationBarTextStyle: "black",
-  backgroundColor: '#f5f5f5',
+  backgroundColor: "#f5f5f5",
   enablePullDownRefresh: false,
   disableScroll: false,
-  navigationStyle: 'custom',
+  navigationStyle: "custom",
-})
+});

src/user_pages/queryTransactions/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/queryTransactions/index.scss

@@ -1,5 +1,4 @@
 .listSearchContainer {
-  padding: 0 15px;
   height: 100vh;
   box-sizing: border-box;
 
@@ -10,6 +9,50 @@
     color: transparent;
   }
 
+  .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;
+      }
+    }
+  }
+
   .icon16 {
     width: 16px;
     height: 16px;
@@ -19,8 +62,7 @@
     position: sticky;
     top: -1px;
     background-color: #fff;
-    width: calc(100vw - 28px);
+    padding: 5px 15px;
-    padding: 5px 0;
     box-sizing: border-box;
   }
 
@@ -43,7 +85,7 @@
   }
 
   .historySearch {
-    // padding-top: 50px;
+    padding: 0 15px;
   }
 
   .searchRight {
@@ -142,7 +184,7 @@
   }
 
   .transaction_list {
-    padding: 0 0 80px;
+    padding: 0 15px 80px;
     // overflow-y: auto;
 
     // &::-webkit-scrollbar {

src/user_pages/queryTransactions/index.tsx

@@ -29,6 +29,10 @@ interface TransactionLoadParams {
 }
 
 const QueryTransactions = () => {
+  // 获取当前页面的配置
+  const currentPage = Taro.getCurrentInstance();
+  const pageConfig = currentPage.page?.config;
+  const pageTitle = pageConfig?.navigationBarTitleText;
   const isInitialMount = useRef(true);
   const [loading_transactions, set_loading_transactions] = useState(false);
   const [transactions, setTransactions] = useState<Transaction[]>([]);
@@ -238,6 +242,23 @@ const QueryTransactions = () => {
   return (
     <>
       <View className="listSearchContainer">
+        {/* 导航栏 */}
+        <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="topSearchWrapper">
           <View className="topSearch">

src/user_pages/setTransactionPassword/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/setTransactionPassword/index.scss

@@ -1,16 +1,60 @@
 .set-transaction-password-page {
   height: 100vh;
   background-color: #f5f5f5;
-    padding: 20px;
   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;
+      }
+    }
+  }
 
   .form-item {
+    padding: 20px;
+    box-sizing: border-box;
     height: 50px;
     display: flex;
     gap: 10px;
     align-items: center;
-        border-bottom: 1px solid #0000000D;
+    border-bottom: 1px solid #0000000d;
     font-size: 14px;
 
     .form-label {
@@ -27,7 +71,8 @@
     line-height: 18px;
     letter-spacing: 0px;
     vertical-align: middle;
-        color: #3C3C4366;
+    color: #3c3c4366;
+    padding: 0 20px;
   }
 
   .btn {
@@ -48,6 +93,9 @@
     line-height: normal;
     border-radius: 8px;
     margin-right: 0;
+    &.disabled {
+      color: rgba(255, 255, 255, 0.3);
+    }
   }
 
   .bottom-btn {
@@ -55,9 +103,9 @@
     bottom: 40px;
     height: 54px;
     width: calc(100vw - 40px);
-        margin: 0 auto;
     border-radius: 16px;
     font-size: 16px;
     font-weight: 600;
+    transform: translateX(20px);
   }
 }

src/user_pages/setTransactionPassword/index.tsx

@@ -1,40 +1,50 @@
 import React, { useState, useEffect } from "react";
 import Taro, { useRouter } from "@tarojs/taro";
-import { View, Text, Input, Button } from "@tarojs/components";
+import { View, Text, Input, Button, Image } from "@tarojs/components";
 
 import "./index.scss";
 import httpService from "@/services/httpService";
-import { useKeyboardHeight } from '@/store/keyboardStore'
+import { useKeyboardHeight } from "@/store/keyboardStore";
+import img from "@/config/images";
 
 interface FormFields {
-  old_password?: string;
   new_password: string;
   confirm_password: string;
   sms_code?: string;
 }
 
 const SetTransactionPassword: React.FC = () => {
+  // 获取当前页面的配置
+  const currentPage = Taro.getCurrentInstance();
+  const pageConfig = currentPage.page?.config;
+  const pageTitle = pageConfig?.navigationBarTitleText;
   // 使用全局键盘状态
-  const { keyboardHeight, isKeyboardVisible, addListener, initializeKeyboardListener } = useKeyboardHeight()
+  const {
+    keyboardHeight,
+    isKeyboardVisible,
+    addListener,
+    initializeKeyboardListener,
+  } = useKeyboardHeight();
   const [smsCodeSended, setSmsCodeSended] = useState(false);
-  const [smsCodeText, setSmsCodeText] = useState('获取验证码');
+  const [smsCodeText, setSmsCodeText] = useState("获取验证码");
+  const [valid, setValid] = useState(false);
   // 使用全局键盘状态监听
   useEffect(() => {
     // 初始化全局键盘监听器
-    initializeKeyboardListener()
+    initializeKeyboardListener();
 
     // 添加本地监听器
     const removeListener = addListener((height, visible) => {
-      console.log('AiImportPopup 收到键盘变化:', height, visible)
+      console.log("AiImportPopup 收到键盘变化:", height, visible);
-    })
+    });
 
     return () => {
-      removeListener()
+      removeListener();
-    }
+    };
-  }, [initializeKeyboardListener, addListener])
+  }, [initializeKeyboardListener, addListener]);
   const [handleType, setHandleType] = useState("set");
   const router = useRouter();
-  const { type, phone, sms_code } = router.params;
+  const { type } = router.params;
 
   useEffect(() => {
     if (type) {
@@ -43,12 +53,22 @@ const SetTransactionPassword: React.FC = () => {
   }, [type]);
 
   const [formData, setFormData] = useState<FormFields>({
-    old_password: "",
     new_password: "",
     confirm_password: "",
     sms_code: "",
   });
 
+  useEffect(() => {
+    const { new_password, confirm_password, sms_code } = formData;
+    if (handleType === "set") {
+      setValid(
+        !sms_code && new_password.length === 6 && confirm_password.length === 6
+      );
+    } else {
+      setValid(new_password.length === 6 && confirm_password.length === 6);
+    }
+  }, [formData]);
+
   const handleInput = (e: any, field: string) => {
     setFormData({ ...formData, [field]: e.detail.value });
   };
@@ -71,8 +91,8 @@ const SetTransactionPassword: React.FC = () => {
         icon: "success",
       });
       Taro.redirectTo({
-        url: "/user_pages/wallet/index"
+        url: "/user_pages/wallet/index",
-      })
+      });
     } catch (error) {
       Taro.showToast({
         title: "设置交易密码失败",
@@ -98,7 +118,7 @@ const SetTransactionPassword: React.FC = () => {
           time--;
           setSmsCodeText(`${time}秒后重发`);
         } else {
-          setSmsCodeText('获取验证码');
+          setSmsCodeText("获取验证码");
           setSmsCodeSended(false);
           clearInterval(timer);
         }
@@ -115,14 +135,23 @@ const SetTransactionPassword: React.FC = () => {
 
   return (
     <View className="set-transaction-password-page">
-      {
+      {/* 导航栏 */}
-        // handleType === "reset" && (
+      <View className="custom-navbar">
-        //     <View className="form-item">
+        <View className="detail-navigator">
-        //         <Text className="form-label">旧密码</Text>
+          <View
-        //         <Input placeholder="请输入旧密码" password type="number" maxlength={6} onInput={(e) => { handleInput(e, "old_password") }}></Input>
+            className="detail-navigator-back"
-        //     </View>
+            onClick={() => {
-        // )
+              Taro.navigateBack();
-      }
+            }}
+          >
+            <Image
+              className="detail-navigator-back-icon"
+              src={img.ICON_NAVIGATOR_BACK}
+            />
+            <Text>{pageTitle}</Text>
+          </View>
+        </View>
+      </View>
       <View className="form-item">
         <Text className="form-label">交易密码</Text>
         <Input
@@ -157,11 +186,23 @@ const SetTransactionPassword: React.FC = () => {
               handleInput(e, "sms_code");
             }}
           ></Input>
-          <Button className={`btn ${smsCodeSended ? 'disabled' : ''}`} disabled={smsCodeSended} onClick={getSMSCode}>{smsCodeText}</Button>
+          <Button
+            className={`btn ${smsCodeSended ? "disabled" : ""}`}
+            disabled={smsCodeSended}
+            onClick={getSMSCode}
+          >
+            {smsCodeText}
+          </Button>
         </View>
       )}
       <Text className="tips">* 密码由6位数字组成</Text>
-      <Button className="btn bottom-btn" onClick={handleConfirm} style={{ bottom: isKeyboardVisible ? `${keyboardHeight + 20}px` : undefined }}>
+      <Button
+        className={`btn bottom-btn ${!valid ? "disabled" : ""}`}
+        onClick={handleConfirm}
+        style={{
+          bottom: isKeyboardVisible ? `${keyboardHeight + 20}px` : undefined,
+        }}
+      >
         完成
       </Button>
     </View>

src/user_pages/validPhone/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/validPhone/index.scss

@@ -1,16 +1,60 @@
 .set-transaction-password-page {
   background-color: #f5f5f5;
-    padding: 20px;
   box-sizing: border-box;
   height: 100vh;
   overflow-y: 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;
+      }
+    }
+  }
 
   .form-item {
+    padding: 20px;
+    box-sizing: border-box;
     height: 50px;
     display: flex;
     gap: 10px;
     align-items: center;
-        border-bottom: 1px solid #0000000D;
+    border-bottom: 1px solid #0000000d;
     font-size: 14px;
 
     .form-label {
@@ -39,7 +83,7 @@
     margin-right: 0;
 
     &.disabled {
-            color: rgba(255, 255, 255, 0.30);
+      color: rgba(255, 255, 255, 0.3);
     }
   }
 
@@ -48,9 +92,9 @@
     bottom: 40px;
     height: 54px;
     width: calc(100vw - 40px);
-        margin: 0 auto;
     border-radius: 16px;
     font-size: 16px;
     font-weight: 600;
+    transform: translateX(20px);
   }
 }

src/user_pages/validPhone/index.tsx

@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from "react";
-import Taro from '@tarojs/taro';
+import Taro from "@tarojs/taro";
-import { View, Text, Input, Button } from "@tarojs/components";
+import { View, Text, Input, Button, Image } from "@tarojs/components";
 
 import "./index.scss";
 import httpService from "@/services/httpService";
 import { useUserInfo } from "@/store/userStore";
-import { useKeyboardHeight } from '@/store/keyboardStore'
+import { useKeyboardHeight } from "@/store/keyboardStore";
+import img from "@/config/images";
 
 interface FormFields {
   phone?: string;
@@ -13,24 +14,33 @@ interface FormFields {
 }
 
 const ValidPhone: React.FC = () => {
+  // 获取当前页面的配置
+  const currentPage = Taro.getCurrentInstance();
+  const pageConfig = currentPage.page?.config;
+  const pageTitle = pageConfig?.navigationBarTitleText;
   // 使用全局键盘状态
-  const { keyboardHeight, isKeyboardVisible, addListener, initializeKeyboardListener } = useKeyboardHeight()
+  const {
+    keyboardHeight,
+    isKeyboardVisible,
+    addListener,
+    initializeKeyboardListener,
+  } = useKeyboardHeight();
   const [smsCodeSended, setSmsCodeSended] = useState(false);
-  const [smsCodeText, setSmsCodeText] = useState('获取验证码');
+  const [smsCodeText, setSmsCodeText] = useState("获取验证码");
   // 使用全局键盘状态监听
   useEffect(() => {
     // 初始化全局键盘监听器
-    initializeKeyboardListener()
+    initializeKeyboardListener();
 
     // 添加本地监听器
     const removeListener = addListener((height, visible) => {
-      console.log('AiImportPopup 收到键盘变化:', height, visible)
+      console.log("AiImportPopup 收到键盘变化:", height, visible);
-    })
+    });
 
     return () => {
-      removeListener()
+      removeListener();
-    }
+    };
-  }, [initializeKeyboardListener, addListener])
+  }, [initializeKeyboardListener, addListener]);
   const userInfo = useUserInfo();
   const [formData, setFormData] = useState<FormFields>({
     phone: userInfo.phone || "",
@@ -44,14 +54,20 @@ const ValidPhone: React.FC = () => {
   const handleConfirm = async () => {
     const isValid = await validSMSCode();
     if (isValid) {
-      Taro.navigateTo({ url: `/user_pages/setTransactionPassword/index?type=reset&phone=${formData.phone}&sms_code=${formData.sms_code}` });
+      Taro.navigateTo({
+        url: `/user_pages/setTransactionPassword/index?type=reset&phone=${formData.phone}&sms_code=${formData.sms_code}`,
+      });
     }
   };
 
   const validSMSCode = async () => {
     const { phone, sms_code } = formData;
     try {
-      const res = await httpService.post("/wallet/verify_sms_code", { phone, sms_code, type: "reset_password" });
+      const res = await httpService.post("/wallet/verify_sms_code", {
+        phone,
+        sms_code,
+        type: "reset_password",
+      });
       const { verified } = res.data;
       if (verified) {
         return true;
@@ -78,7 +94,7 @@ const ValidPhone: React.FC = () => {
           time--;
           setSmsCodeText(`${time}秒后重发`);
         } else {
-          setSmsCodeText('获取验证码');
+          setSmsCodeText("获取验证码");
           setSmsCodeSended(false);
           clearInterval(timer);
         }
@@ -92,16 +108,56 @@ const ValidPhone: React.FC = () => {
 
   return (
     <View className="set-transaction-password-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="form-item">
         <Text className="form-label">手机号</Text>
         <Input defaultValue={formData.phone} type="number" disabled></Input>
       </View>
       <View className="form-item">
         <Text className="form-label">验证码</Text>
-        <Input placeholder="请输入验证码" type="number" onInput={(e) => { handleInput(e, "sms_code") }}></Input>
+        <Input
-        <Button className={`btn ${smsCodeSended ? 'disabled' : ''}`} disabled={smsCodeSended} onClick={getSMSCode}>{smsCodeText}</Button>
+          placeholder="请输入验证码"
+          type="number"
+          onInput={(e) => {
+            handleInput(e, "sms_code");
+          }}
+        ></Input>
+        <Button
+          className={`btn ${smsCodeSended ? "disabled" : ""}`}
+          disabled={smsCodeSended}
+          onClick={getSMSCode}
+        >
+          {smsCodeText}
+        </Button>
       </View>
-      <Button className={`btn bottom-btn ${formData.sms_code === "" ? 'disabled' : ''}`} disabled={formData.sms_code === ""} onClick={handleConfirm} style={{ bottom: isKeyboardVisible ? `${keyboardHeight + 20}px` : undefined }}>提交</Button>
+      <Button
+        className={`btn bottom-btn ${
+          formData.sms_code === "" ? "disabled" : ""
+        }`}
+        disabled={formData.sms_code === ""}
+        onClick={handleConfirm}
+        style={{
+          bottom: isKeyboardVisible ? `${keyboardHeight + 20}px` : undefined,
+        }}
+      >
+        提交
+      </Button>
     </View>
   );
 };

src/user_pages/wallet/index.config.ts

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

src/user_pages/wallet/index.scss

@@ -10,6 +10,49 @@
     width: 0;
     height: 0;
   }
+  .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;
+      }
+    }
+  }
 
   .wallet_main_card {
     background: #000;
@@ -33,7 +76,7 @@
       .modify_password {
         font-size: 12px;
         font-weight: 400;
-        color: #007AFF;
+        color: #007aff;
         line-height: 1.5;
       }
     }
@@ -51,7 +94,7 @@
           gap: 8px;
 
           .currency_symbol {
-            font-family: 'DingTalk JinBuTi', sans-serif;
+            font-family: "DingTalk JinBuTi", sans-serif;
             font-size: 32px;
             font-weight: 400;
             line-height: 0.8;
@@ -62,14 +105,14 @@
             align-items: flex-end;
 
             .main_amount {
-              font-family: 'DingTalk JinBuTi', sans-serif;
+              font-family: "DingTalk JinBuTi", sans-serif;
               font-size: 32px;
               font-weight: 400;
               line-height: 0.75;
             }
 
             .decimal_amount {
-              font-family: 'DingTalk JinBuTi', sans-serif;
+              font-family: "DingTalk JinBuTi", sans-serif;
               font-size: 32px;
               font-weight: 400;
               line-height: 0.8;
@@ -111,7 +154,7 @@
 
     .function_item {
       background: white;
-      border: 0.5px solid #EBEBEB;
+      border: 0.5px solid #ebebeb;
       border-radius: 20px;
       padding: 4px 8px;
       display: flex;
@@ -150,7 +193,7 @@
 
   .transaction_history {
     background: white;
-    border: 0.5px solid #EBEBEB;
+    border: 0.5px solid #ebebeb;
     border-radius: 20px;
     box-shadow: 0px 0px 36px 0px rgba(0, 0, 0, 0.1);
     margin: 0 5px;
@@ -181,7 +224,7 @@
 
         &::before,
         &::after {
-          content: '';
+          content: "";
           display: block;
           width: 2px;
           height: 8px;
@@ -206,7 +249,6 @@
     }
 
     .transaction_list {
-
       .loading_state,
       .empty_state {
         padding: 40px 20px;
@@ -364,7 +406,6 @@
 
 // 过滤弹窗
 .filter_popup {
-
   .popup_content {
     padding: 16px 20px;
     .form_section {
@@ -386,7 +427,7 @@
           gap: 8px;
 
           .option_item {
-            background-color: #0000000D;
+            background-color: #0000000d;
             text-align: center;
             padding: 8px;
             border-radius: 4px;

src/user_pages/wallet/index.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from "react";
 import { View, Text, Input, Button, Image } from "@tarojs/components";
-import Taro, { useDidShow } from "@tarojs/taro";
+import Taro, { useDidShow, useReachBottom } from "@tarojs/taro";
 import "./index.scss";
 import { CommonPopup } from "@/components";
 import httpService from "@/services/httpService";
 import { withAuth } from "@/components";
 import { PopupPicker } from "@/components/Picker/index";
 import { handleCustomerService } from "@/services/userService";
-import { useReachBottom } from "@tarojs/taro";
+import img from "@/config/images";
 
 // 交易记录类型
 interface Transaction {
@@ -97,6 +97,11 @@ const transaction_type_options: Option<TransactionSubType>[] = [
 ];
 
 const WalletPage: React.FC = () => {
+  // 获取当前页面的配置
+  const currentPage = Taro.getCurrentInstance();
+  const pageConfig = currentPage.page?.config;
+  const pageTitle = pageConfig?.navigationBarTitleText;
+
   useReachBottom(() => {
     if (load_transactions_params.page >= totalPages) return;
     // 加载更多方法
@@ -157,7 +162,7 @@ const WalletPage: React.FC = () => {
   });
 
   const modify_load_transactions_params = () => {
-    set_transactions([])
+    set_transactions([]);
     const { type, transaction_sub_type } = filterParams;
     set_load_transactions_params((prev) => {
       return {
@@ -431,6 +436,23 @@ const WalletPage: React.FC = () => {
 
   return (
     <View className="wallet_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="wallet_main_card">
         {/* 头部信息 */}