导航栏引用公共组件

This commit is contained in:
2025-10-28 22:10:35 +08:00
parent c485c7fd64
commit ce31b6914f
9 changed files with 113 additions and 32 deletions

View File

@@ -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

View File

@@ -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,8 +315,7 @@ const DownloadBill: React.FC = () => {
</View>
<View
className={`option_button ${
dateType === "month" ? "active" : ""
className={`option_button ${dateType === "month" ? "active" : ""
}`}
onClick={() => {
selectDateRange("month");
@@ -316,8 +324,7 @@ const DownloadBill: React.FC = () => {
</View>
<View
className={`option_button ${
dateType === "custom" ? "active" : ""
className={`option_button ${dateType === "custom" ? "active" : ""
}`}
onClick={() => {
selectDateRange("custom");

View File

@@ -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}>

View File

@@ -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 ? (

View File

@@ -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">

View File

@@ -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

View File

@@ -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>

View File

@@ -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">
{/* 头部信息 */}

View File

@@ -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">