导航栏引用公共组件

src/components/BackNavbar/index.tsx

@@ -9,6 +9,7 @@ interface BackNavbarProps {
   title?: string;
   showAvatar?: boolean;
   showBackButton?: boolean;
+  backgroundColor?: string;
   onBack?: () => void;
   className?: string;
 }
@@ -17,6 +18,7 @@ const BackNavbar: React.FC<BackNavbarProps> = ({
   title = '消息',
   showAvatar = true,
   showBackButton = false,
+  backgroundColor,
   onBack,
   className = ''
 }) => {
@@ -36,7 +38,8 @@ const BackNavbar: React.FC<BackNavbarProps> = ({
       className={`back-navbar ${className}`}
       style={{
         paddingTop: `${statusBarHeight}px`,
-        height: `${totalHeight}px`
+        height: `${totalHeight}px`,
+        backgroundColor: backgroundColor || "#ffffff"
       }}
     >
       <View 

src/user_pages/downloadBill/index.tsx

@@ -6,7 +6,7 @@ import dayjs from "dayjs";
 import "./index.scss";
 import { DialogCalendarCard } from "@/components/index";
 // import { CalendarUI } from "@/components";
-import { CommonPopup } from "@/components";
+import { CommonPopup, BackNavbar } from "@/components";
 import httpService from "@/services/httpService";
 import img from "@/config/images";
 
@@ -246,7 +246,7 @@ const DownloadBill: React.FC = () => {
   return (
     <View className="download_bill_page">
       {/* 导航栏 */}
-      <View className="custom-navbar">
+      {/* <View className="custom-navbar">
         <View className="detail-navigator">
           <View
             className="detail-navigator-back"
@@ -261,7 +261,16 @@ const DownloadBill: React.FC = () => {
             <Text>{pageTitle}</Text>
           </View>
         </View>
-      </View>
+      </View> */}
+      {/* 顶部导航栏 */}
+      <BackNavbar
+        title={pageTitle}
+        showBackButton={true}
+        showAvatar={false}
+        onBack={() => {
+          Taro.navigateBack();
+        }}
+      />
       <View className="hint_content">
         <Text>最长可导出三个月的账单 </Text>
         <Text className="button_text" onClick={downloadExample}>
@@ -306,9 +315,8 @@ const DownloadBill: React.FC = () => {
               近一周
             </View>
             <View
-              className={`option_button ${
+              className={`option_button ${dateType === "month" ? "active" : ""
-                dateType === "month" ? "active" : ""
+                }`}
-              }`}
               onClick={() => {
                 selectDateRange("month");
               }}
@@ -316,9 +324,8 @@ const DownloadBill: React.FC = () => {
               近一月
             </View>
             <View
-              className={`option_button ${
+              className={`option_button ${dateType === "custom" ? "active" : ""
-                dateType === "custom" ? "active" : ""
+                }`}
-              }`}
               onClick={() => {
                 selectDateRange("custom");
               }}

src/user_pages/downloadBillRecords/index.tsx

@@ -5,7 +5,7 @@ import "./index.scss";
 import httpService from "@/services/httpService";
 import Taro, { useReachBottom } from "@tarojs/taro";
 import img from "@/config/images";
-import { EmptyState } from "@/components";
+import { EmptyState, BackNavbar } from "@/components";
 
 interface BillRecord {
   id: number;
@@ -65,7 +65,7 @@ const DownloadBillRecords: React.FC = () => {
   return (
     <View className="download-bill-records-page">
       {/* 导航栏 */}
-      <View className="custom-navbar">
+      {/* <View className="custom-navbar">
         <View className="detail-navigator">
           <View
             className="detail-navigator-back"
@@ -80,7 +80,16 @@ const DownloadBillRecords: React.FC = () => {
             <Text>{pageTitle}</Text>
           </View>
         </View>
-      </View>
+      </View> */}
+      {/* 顶部导航栏 */}
+      <BackNavbar
+        title={pageTitle}
+        showBackButton={true}
+        showAvatar={false}
+        onBack={() => {
+          Taro.navigateBack();
+        }}
+      />
       <View className="records-container">
         {records.length ? records.map((record) => (
           <View className="record-item" key={record.id}>

src/user_pages/edit/index.tsx

@@ -6,7 +6,7 @@ import "./index.scss";
 import { UserService, PickerOption } from "@/services/userService";
 import { clear_login_state } from "@/services/loginService";
 import { convert_db_gender_to_display } from "@/utils/genderUtils";
-import { EditModal } from "@/components";
+import { EditModal, BackNavbar } from "@/components";
 import img from "@/config/images";
 import CommonDialog from "@/components/CommonDialog";
 import { useUserActions, useUserInfo } from "@/store/userStore";
@@ -350,7 +350,7 @@ const EditProfilePage: React.FC = () => {
   return (
     <View className="edit_profile_page">
       {/* 导航栏 */}
-      <View className="custom-navbar">
+      {/* <View className="custom-navbar">
         <View className="detail-navigator">
           <View
             className="detail-navigator-back"
@@ -364,7 +364,17 @@ const EditProfilePage: React.FC = () => {
             />
           </View>
         </View>
-      </View>
+      </View> */}
+      {/* 顶部导航栏 */}
+      <BackNavbar
+        title=""
+        showBackButton={true}
+        showAvatar={false}
+        backgroundColor="unset"
+        onBack={() => {
+          Taro.navigateBack();
+        }}
+      />
       {/* 主要内容 */}
       <ScrollView className="main_content" scrollY>
         {loading ? (
@@ -593,9 +603,9 @@ const EditProfilePage: React.FC = () => {
                     >
                       {form_data.phone
                         ? form_data.phone.replace(
-                            /(\d{3})(\d{4})(\d{4})/,
+                          /(\d{3})(\d{4})(\d{4})/,
-                            "$1 $2 $3"
+                          "$1 $2 $3"
-                          )
+                        )
                         : "未绑定"}
                     </Button>
                     <Image

src/user_pages/queryTransactions/index.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useRef } from "react";
 import { View, Image, Text } from "@tarojs/components";
 import { Input } from "@nutui/nutui-react-taro";
 import img from "@/config/images";
-import { withAuth } from "@/components";
+import { withAuth, BackNavbar } from "@/components";
 import "./index.scss";
 import httpService from "@/services/httpService";
 import Taro, { useReachBottom } from "@tarojs/taro";
@@ -244,7 +244,7 @@ const QueryTransactions = () => {
     <>
       <View className="listSearchContainer">
         {/* 导航栏 */}
-        <View className="custom-navbar">
+        {/* <View className="custom-navbar">
           <View className="detail-navigator">
             <View
               className="detail-navigator-back"
@@ -259,7 +259,16 @@ const QueryTransactions = () => {
               <Text>{pageTitle}</Text>
             </View>
           </View>
-        </View>
+        </View> */}
+        {/* 顶部导航栏 */}
+        <BackNavbar
+          title={pageTitle}
+          showBackButton={true}
+          showAvatar={false}
+          onBack={() => {
+            Taro.navigateBack();
+          }}
+        />
         {/* 搜索 */}
         <View className="topSearchWrapper">
           <View className="topSearch">

src/user_pages/setTransactionPassword/index.tsx

@@ -6,6 +6,7 @@ import "./index.scss";
 import httpService from "@/services/httpService";
 import { useKeyboardHeight } from "@/store/keyboardStore";
 import img from "@/config/images";
+import { BackNavbar } from "@/components";
 
 interface FormFields {
   new_password: string;
@@ -137,7 +138,7 @@ const SetTransactionPassword: React.FC = () => {
   return (
     <View className="set-transaction-password-page">
       {/* 导航栏 */}
-      <View className="custom-navbar">
+      {/* <View className="custom-navbar">
         <View className="detail-navigator">
           <View
             className="detail-navigator-back"
@@ -152,7 +153,16 @@ const SetTransactionPassword: React.FC = () => {
             <Text>{pageTitle}</Text>
           </View>
         </View>
-      </View>
+      </View> */}
+      {/* 顶部导航栏 */}
+      <BackNavbar
+        title={pageTitle}
+        showBackButton={true}
+        showAvatar={false}
+        onBack={() => {
+          Taro.navigateBack();
+        }}
+      />
       <View className="form-item">
         <Text className="form-label">交易密码</Text>
         <Input

src/user_pages/validPhone/index.tsx

@@ -7,6 +7,7 @@ import httpService from "@/services/httpService";
 import { useUserInfo } from "@/store/userStore";
 import { useKeyboardHeight } from "@/store/keyboardStore";
 import img from "@/config/images";
+import { BackNavbar } from "@/components";
 
 interface FormFields {
   phone?: string;
@@ -109,7 +110,7 @@ const ValidPhone: React.FC = () => {
   return (
     <View className="set-transaction-password-page">
       {/* 导航栏 */}
-      <View className="custom-navbar">
+      {/* <View className="custom-navbar">
         <View className="detail-navigator">
           <View
             className="detail-navigator-back"
@@ -124,7 +125,16 @@ const ValidPhone: React.FC = () => {
             <Text>{pageTitle}</Text>
           </View>
         </View>
-      </View>
+      </View> */}
+      {/* 顶部导航栏 */}
+      <BackNavbar
+        title={pageTitle}
+        showBackButton={true}
+        showAvatar={false}
+        onBack={() => {
+          Taro.navigateBack();
+        }}
+      />
       <View className="form-item">
         <Text className="form-label">手机号</Text>
         <Input defaultValue={formData.phone} type="number" disabled></Input>

src/user_pages/wallet/index.tsx

@@ -4,7 +4,7 @@ import Taro, { useDidShow, useReachBottom } from "@tarojs/taro";
 import "./index.scss";
 import { CommonPopup, EmptyState } from "@/components";
 import httpService from "@/services/httpService";
-import { withAuth } from "@/components";
+import { withAuth, BackNavbar } from "@/components";
 import { PopupPicker } from "@/components/Picker/index";
 import { handleCustomerService } from "@/services/userService";
 import img from "@/config/images";
@@ -460,7 +460,7 @@ const WalletPage: React.FC = () => {
   return (
     <View className="wallet_page">
       {/* 导航栏 */}
-      <View className="custom-navbar">
+      {/* <View className="custom-navbar">
         <View className="detail-navigator">
           <View
             className="detail-navigator-back"
@@ -475,7 +475,16 @@ const WalletPage: React.FC = () => {
             <Text>{pageTitle}</Text>
           </View>
         </View>
-      </View>
+      </View> */}
+      {/* 顶部导航栏 */}
+      <BackNavbar
+        title={pageTitle}
+        showBackButton={true}
+        showAvatar={false}
+        onBack={() => {
+          Taro.navigateBack();
+        }}
+      />
       {/* 钱包主卡片 */}
       <View className="wallet_main_card">
         {/* 头部信息 */}

src/user_pages/withdrawal/index.tsx

@@ -4,7 +4,7 @@ import Taro, { useDidShow } from "@tarojs/taro";
 
 import httpService from "@/services/httpService";
 import "./index.scss";
-import { CommonPopup } from "@/components";
+import { CommonPopup, BackNavbar } from "@/components";
 import { useKeyboardHeight } from "@/store/keyboardStore";
 import img from "@/config/images";
 
@@ -276,7 +276,7 @@ const Withdrawal: React.FC = () => {
   return (
     <View className="withdrawal-page">
       {/* 导航栏 */}
-      <View className="custom-navbar">
+      {/* <View className="custom-navbar">
         <View className="detail-navigator">
           <View
             className="detail-navigator-back"
@@ -296,7 +296,21 @@ const Withdrawal: React.FC = () => {
             <Text>{pageTitle}</Text>
           </View>
         </View>
-      </View>
+      </View> */}
+      {/* 顶部导航栏 */}
+      <BackNavbar
+        title={pageTitle}
+        showBackButton={true}
+        showAvatar={false}
+        onBack={() => {
+          const pages = Taro.getCurrentPages()
+          const prevPage = pages[pages.length - 2]
+          prevPage.setData({
+            updateList: withdrawSuccess
+          })
+          Taro.navigateBack();
+        }}
+      />
       <View className="withdrawal-container">
         <Text className="title-text">提现金额</Text>
         <View className="input-container">