通用自定义导航栏封装，2/4页面使用

components/custom-nav-bar/custom-nav-bar.vue

@@ -1,16 +1,26 @@
 <template>
   <view class="layout">
-    <view class="navbar">
+    <view :style="{ background: backgroundColor }" class="navbar">
       <view :style="{ height: getStatusBarHeight() + 'px' }" class="statusBar"></view>
       <view
         :style="{ height: getTitleBarHeight() + 'px', marginLeft: getLeftIconLeft() + 'px' }"
         class="titleBar"
       >
-        <view class="title">{{ title }}</view>
+        <!-- 返回按钮 -->
-        <!--        <navigator class="search" url="/pages/search/search">-->
+        <view v-if="showBack" class="back-button" @click="goBack">
-        <!--          <uni-icons class="icon" color="#888" size="18" type="search"></uni-icons>-->
+          <image :src="commonEnum.BACK" class="left-icon"></image>
-        <!--          <text class="text">></text>-->
+        </view>
-        <!--        </navigator>-->
+
+        <!-- 标题 -->
+        <view :style="{ color: titleColor, textAlign: titleAlign }" class="title"
+          >{{ title }}
+        </view>
+
+        <!-- 右侧搜索按钮 -->
+        <view v-if="showSearch" class="search" @click="handleSearch">
+          <uni-icons :color="iconColor" class="icon" size="18" type="search"></uni-icons>
+          <text :style="{ color: iconColor }" class="text">></text>
+        </view>
       </view>
     </view>
 
@@ -26,13 +36,79 @@ import {
   getNavBarHeight,
   getLeftIconLeft,
 } from '@/utils/system.js'
+import commonEnum from '../../enum/commonEnum'
+import { navigateBack } from '../../utils/router'
+import UniIcons from '../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
 
-defineProps({
+// 定义组件属性
+const props = defineProps({
+  // 标题
   title: {
     type: String,
-    default: '壁纸',
+    default: '标题',
+  },
+  // 背景颜色
+  backgroundColor: {
+    type: String,
+    default: '#ffddca',
+  },
+  // 标题颜色
+  titleColor: {
+    type: String,
+    default: '#3d3d3d',
+  },
+  // 图标颜色
+  iconColor: {
+    type: String,
+    default: '#888',
+  },
+  // 是否显示返回按钮
+  showBack: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否显示搜索按钮
+  showSearch: {
+    type: Boolean,
+    default: false,
+  },
+  // 标题对齐方式
+  titleAlign: {
+    type: String,
+    default: 'center', // 'left', 'center', 'right'
+  },
+  // 返回按钮点击事件
+  onBack: {
+    type: Function,
+    default: null,
+  },
+  // 搜索按钮点击事件
+  onSearch: {
+    type: Function,
+    default: null,
   },
 })
+
+// 定义事件
+const emit = defineEmits(['back', 'search'])
+
+// 返回按钮点击处理
+function goBack() {
+  if (props.onBack) {
+    props.onBack()
+  } else {
+    navigateBack(1)
+  }
+  emit('back')
+}
+
+// 搜索按钮点击处理
+function handleSearch() {
+  if (props.onSearch) {
+    props.onSearch()
+  }
+  emit('search')
+}
 </script>
 
 <style lang="scss" scoped>
@@ -43,43 +119,79 @@ defineProps({
     left: 0;
     width: 100%;
     z-index: 10;
-    background: #ffddca;
 
     .statusBar {
+      // 状态栏高度
     }
 
     .titleBar {
       display: flex;
       align-items: center;
       padding: 0 30rpx;
+      position: relative;
 
       .title {
-        font-size: 32rpx;
+        font-size: 36rpx;
-        font-weight: 500;
+        font-weight: 400;
-        color: #3d3d3d;
+        flex: 1;
+        text-align: center;
+
+        // 根据对齐方式调整样式
+        &.title-left {
+          text-align: left;
+          margin-left: 80rpx; // 为返回按钮留出空间
+        }
+
+        &.title-center {
+          text-align: center;
+        }
+
+        &.title-right {
+          text-align: right;
+          margin-right: 80rpx; // 为搜索按钮留出空间
+        }
+      }
+
+      .back-button {
+        position: absolute;
+        left: 0;
+        width: 80rpx;
+        height: 50rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 1;
+
+        .left-icon {
+          width: 18rpx;
+          height: 32rpx;
+        }
       }
 
       .search {
-        width: 220rpx;
+        position: absolute;
+        right: 0;
+        width: 80rpx;
         height: 50rpx;
-        margin-left: 10rpx;
-        color: #3d3d3d;
-        font-size: 28rpx;
         display: flex;
         align-items: center;
+        justify-content: center;
+        z-index: 1;
 
         .icon {
-          margin-left: 5rpx;
+          margin-right: 5rpx;
         }
 
         .text {
-          padding-left: 10rpx;
+          padding-left: 5rpx;
+          font-size: 24rpx;
         }
       }
     }
   }
 
   .fill {
+    // 占位高度
   }
 }
 </style>

pages/index/index.vue

@@ -2,7 +2,7 @@
   <view class="home-container">
     <!-- 头部信息 -->
 
-    <custom-nav-bar title="福鼎创特物联科技有限公司"></custom-nav-bar>
+    <custom-nav-bar title="福鼎创特物联科技有限公司" title-align="left"></custom-nav-bar>
 
     <!-- 公告栏 -->
     <announcement-bar

pages/lease/lease.vue

@@ -1,7 +1,8 @@
 <template>
   <view class="lease-page">
     <!-- 头部区域 -->
-    <custom-nav-bar2 color="#FFDECB" title="租赁申请"></custom-nav-bar2>
+
+    <custom-nav-bar background-color="#FFDECB" title="租赁申请" title-align="center" />
     <view class="header">
       <image
         :src="commonEnum.FIRE_BACKGROUND_FULL"
@@ -420,7 +421,7 @@ export default {
 .lease-page {
   position: relative;
   background: #f3f5f6;
-  border: #120d0d solid 2rpx;
+  //border: #120d0d solid 2rpx;
 }
 
 // 头部区域