lease.vue页面重构

components/custom-nav-bar2/custom-nav-bar2.vue

@@ -0,0 +1,81 @@
+<template>
+  <view class="layout">
+    <view 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>
+      </view>
+    </view>
+    <view :style="{ height: getNavBarHeight() + 'px' }" class="fill"></view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import {
+  getStatusBarHeight,
+  getTitleBarHeight,
+  getNavBarHeight,
+  getLeftIconLeft,
+} from '@/utils/system.js'
+
+defineProps({
+  title: {
+    type: String,
+    default: '壁纸',
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.layout {
+  .navbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 10;
+    background: #ffddca;
+
+    .statusBar {
+    }
+
+    .titleBar {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 30rpx;
+
+      .title {
+        font-size: 36rpx;
+        font-weight: 400;
+        color: #3d3d3d;
+      }
+
+      .search {
+        width: 220rpx;
+        height: 50rpx;
+        margin-left: 10rpx;
+        color: #3d3d3d;
+        font-size: 28rpx;
+        display: flex;
+        align-items: center;
+
+        .icon {
+          margin-left: 5rpx;
+        }
+
+        .text {
+          padding-left: 10rpx;
+        }
+      }
+    }
+  }
+
+  .fill {
+  }
+}
+</style>

pages/lease/lease.vue

@@ -1,11 +1,9 @@
 <template>
   <view class="lease-page">
     <!-- 头部区域 -->
+    <custom-nav-bar2 title="租赁申请"></custom-nav-bar2>
     <view class="header">
       <view class="header-content">
-        <view class="title-section">
-          <text class="page-title">租赁申请</text>
-        </view>
         <view class="product-info">
           <text class="product-name">渝锦汇节能灶燃烧器</text>
           <text class="product-slogan">租来节能,灶就省钱</text>
@@ -165,7 +163,7 @@ export default {
     async getCurrentLocation() {
       try {
         uni.showLoading({
-          title: '获取位置中...'
+          title: '获取位置中...',
         })
 
         const location = await getLocationWithPermission()
@@ -186,7 +184,7 @@ export default {
         company: '当前位置',
         address: `纬度: ${latitude.toFixed(6)}, 经度: ${longitude.toFixed(6)}`,
         latitude: latitude,
-        longitude: longitude
+        longitude: longitude,
       }
 
       // 尝试使用uni-app的地理编码（如果平台支持）
@@ -194,28 +192,29 @@ export default {
       uni.reverseGeocoder({
         location: {
           latitude: latitude,
-          longitude: longitude
+          longitude: longitude,
         },
-        success: (res) => {
+        success: res => {
           console.log('逆地理编码结果:', res)
           if (res.result) {
             this.currentLocation = {
               company: res.result.addressComponent?.city || '当前位置',
-              address: res.result.formatted_addresses?.recommend || res.result.address || '未知地址',
+              address:
+                res.result.formatted_addresses?.recommend || res.result.address || '未知地址',
               latitude: latitude,
-              longitude: longitude
+              longitude: longitude,
             }
           }
         },
-        fail: (err) => {
+        fail: err => {
           console.log('逆地理编码不可用，使用坐标信息')
-        }
+        },
       })
       // #endif
 
       uni.showToast({
         title: '位置获取成功',
-        icon: 'success'
+        icon: 'success',
       })
     },
 
@@ -307,19 +306,6 @@ export default {
     position: relative;
   }
 
-  .title-section {
-    padding-top: 20rpx;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-bottom: 40rpx;
-
-    .page-title {
-      font-size: 36rpx;
-      font-weight: 400;
-    }
-  }
-
   .product-info {
     margin-bottom: 40rpx;
     //border: red solid 2rpx;
@@ -341,8 +327,8 @@ export default {
   .header-graphic {
     position: absolute;
     right: 0;
-    top: 58rpx;
-    //border: red solid 2rpx;
+    top: 0;
+    border: red solid 2rpx;
 
     .fire {
       width: 252rpx;