refactor(页面布局): 优化多个页面的导航栏和样式

移除重复的顶部导航栏代码，改用微信原生API设置标题重构myCar页面布局，使用nut-row和nut-col实现响应式设计调整样式间距和加载状态显示

refactor(页面布局): 优化多个页面的导航栏和样式
移除重复的顶部导航栏代码，改用微信原生API设置标题重构myCar页面布局，使用nut-row和nut-col实现响应式设计调整样式间距和加载状态显示
hookehuyr
Commit 20237374bb4e23f7fe273711607349994a14482d 20237374 1 parent 23e91841
Showing 4 changed files with 73 additions and 67 deletions
src/pages/myCar/index.less
src/pages/myCar/index.vue
src/pages/sell/index.vue
src/pages/setAuthCar/index.vue
--- a/src/pages/myCar/index.less
View file @2023737
+++ b/src/pages/myCar/index.less
View file @2023737
@@ -3,10 +3,28 @@
   background-color: #f5f5f5;
   padding-bottom: 120px;
 }
-
+    .loading-container {
-.car-list {
+        display: flex;
-  padding: 20px;
+        justify-content: center;
-}
+        align-items: center;
+
+        .loading-text {
+            font-size: 28rpx;
+            color: #999;
+        }
+    }
+
+    .no-more-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 32rpx 0;
+
+        text {
+            font-size: 24rpx;
+            color: #ccc;
+        }
+    }
 /* 空状态样式 */
 .empty-state {
@@ -78,10 +96,9 @@
 /* 车辆图片 */
 .car-image-container {
   width: 100%;
-  height: 200px;
+  height: 150px;
   border-radius: 12px;
   overflow: hidden;
-  margin-bottom: 20px;
 }
 .car-image {
@@ -92,14 +109,14 @@
 /* 车辆信息 */
 .car-info {
-  margin-bottom: 20px;
+  padding-left: 12px;
 }
 .car-title {
   font-size: 36px;
   font-weight: bold;
   color: #333;
-  margin-bottom: 12px;
+  margin-bottom: 0.5rem;
 }
 .car-details {
@@ -204,7 +221,7 @@
   }
   .action-buttons {
-    gap: 8px;
+    gap: 15px;
   }
   .status-badge {
@@ -216,4 +233,4 @@
     width: 14px;
     height: 14px;
   }
-}
\ No newline at end of file
+}
--- a/src/pages/myCar/index.vue
View file @2023737
+++ b/src/pages/myCar/index.vue
View file @2023737
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-03 14:06:14
+ * @LastEditTime: 2025-07-03 14:32:00
  * @FilePath: /jgdl/src/pages/myCar/index.vue
  * @Description: 文件描述
 -->
@@ -11,7 +11,6 @@
     <view class="flex-1">
       <!-- 滚动列表 -->
       <scroll-view
-        class="car-list"
         :style="scrollStyle"
         :scroll-y="true"
         @scrolltolower="loadMore"
@@ -27,51 +26,58 @@
         </view>
         <!-- 车辆卡片列表 -->
-        <view v-else class="space-y-4">
+        <view v-else class="space-y-4 ml-4 mr-4 mt-4">
           <view v-for="car in carList" :key="car.id" class="car-card">
             <!-- 状态标识 -->
             <view class="status-badges">
               <view v-if="car.isAuthenticated" class="status-badge verified">
-                <Check class="status-icon" />
                 <text>已认证</text>
               </view>
               <view v-if="car.isOffline" class="status-badge offline">
-                <Close class="status-icon" />
                 <text>已下架</text>
               </view>
             </view>
-            <!-- 车辆图片 -->
+            <!-- 使用 nut-row 和 nut-col 布局 -->
-            <view class="car-image-container">
+            <nut-row :gutter="10">
-              <image :src="car.image" class="car-image" mode="aspectFill" />
+              <!-- 左侧：车辆图片 -->
-            </view>
+              <nut-col :span="8">
-
+                <view class="car-image-container">
-            <!-- 车辆信息 -->
+                  <image :src="car.image" class="car-image" mode="aspectFill" />
-            <view class="car-info">
+                </view>
-              <view class="car-title">{{ car.brand }} {{ car.model }}</view>
+              </nut-col>
-              <view class="car-details">
+
-                <text class="detail-item">{{ car.year }}</text>
+              <!-- 右侧：车辆信息 -->
-                <text class="detail-item">{{ car.condition }}</text>
+              <nut-col :span="16">
-                <text class="detail-item">{{ car.mileage }}公里</text>
+                <view class="car-info">
-              </view>
+                  <view class="car-title">{{ car.brand }} {{ car.model }}</view>
-              <view class="car-description">{{ car.description }}</view>
+                  <view class="car-details">
-              <view class="price-section">
+                    <text class="detail-item">{{ car.year }}</text>
-                <view class="current-price">¥{{ car.price }}</view>
+                    <text class="detail-item">{{ car.condition }}</text>
-                <view class="market-price">市场价 ¥{{ car.marketPrice }}</view>
+                    <text class="detail-item">{{ car.mileage }}公里</text>
-              </view>
+                  </view>
-            </view>
+                  <view class="car-description">{{ car.description }}</view>
+                  <view class="price-section">
+                    <view class="current-price">¥{{ car.price }}</view>
+                    <view class="market-price">市场价 ¥{{ car.marketPrice }}</view>
+                  </view>
+                </view>
+              </nut-col>
+            </nut-row>
             <!-- 操作按钮 -->
-            <view class="action-buttons">
+            <view class="action-buttons mt-4">
-              <nut-button size="small" type="default" @click="editCar(car.id)">编辑</nut-button>
+              <nut-button size="small" type="default" shape="square" @click="editCar(car.id)">编辑</nut-button>
               <nut-button
                 size="small"
+                shape="square"
                 :type="car.isOffline ? 'success' : 'warning'"
                 @click="toggleOffline(car)"
               >
                 {{ car.isOffline ? '上架' : '下架' }}
               </nut-button>
               <nut-button
+                shape="square"
                 v-if="!car.isAuthenticated"
                 size="small"
                 type="primary"
@@ -108,12 +114,9 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue'
-import { Check, Close } from '@nutui/icons-vue-taro'
 import Taro from '@tarojs/taro'
 import './index.less'
-// 添加样式定义
-
 /**
  * 滚动样式 - 考虑header和TabBar的高度
  */
--- a/src/pages/sell/index.vue
View file @2023737
+++ b/src/pages/sell/index.vue
View file @2023737
 <template>
     <view class="sell-page">
-        <!-- 顶部导航 -->
-        <nut-config-provider :theme-vars="themeVars">
-            <nut-sticky top="0">
-                <nut-navbar :title="isEditMode ? '编辑车源' : '发布车源'" left-show @on-click-back="goBack">
-                    <template #left-show>
-                        <RectLeft color="white" />
-                    </template>
-                </nut-navbar>
-            </nut-sticky>
-        </nut-config-provider>
-
         <!-- 表单内容 -->
         <view class="form-container">
             <!-- 车辆照片上传 -->
@@ -793,10 +782,10 @@ const loadCarData = async () => {
     try {
         Taro.showLoading({ title: '加载中...' })
-        
+
         // TODO: 调用真实API获取车辆数据
         // const carData = await getCarById(carId.value)
-        
+
         // 模拟API响应数据
         const mockCarData = {
             school: '上海理工大学',
@@ -821,7 +810,7 @@ const loadCarData = async () => {
                 other: 'https://picsum.photos/300/200?random=4'
             }
         }
-        
+
         // 填充表单数据
         Object.assign(formData, {
             school: mockCarData.school,
@@ -840,10 +829,10 @@ const loadCarData = async () => {
             marketPrice: mockCarData.marketPrice,
             description: mockCarData.description
         })
-        
+
         // 填充图片数据
         Object.assign(uploadedImages, mockCarData.images)
-        
+
         Taro.hideLoading()
     } catch (error) {
         console.error('加载车辆数据失败:', error)
@@ -860,5 +849,9 @@ onMounted(() => {
     if (isEditMode.value) {
         loadCarData()
     }
+    // 动态修改标题
+    wx.setNavigationBarTitle({
+        title: isEditMode.value ? '编辑车源' : '发布车源'
+    });
 })
 </script>
--- a/src/pages/setAuthCar/index.vue
View file @2023737
+++ b/src/pages/setAuthCar/index.vue
View file @2023737
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-03 14:03:37
+ * @LastEditTime: 2025-07-03 14:27:41
  * @FilePath: /jgdl/src/pages/setAuthCar/index.vue
  * @Description: 申请认证
 -->
 <template>
     <view class="auth-car-page">
-        <!-- 顶部导航 -->
-        <nut-config-provider :theme-vars="themeVars">
-            <nut-sticky top="0">
-                <nut-navbar :title="isEditMode ? '编辑认证' : '申请认证'" left-show @on-click-back="goBack">
-                    <template #left-show>
-                        <RectLeft color="white" />
-                    </template>
-                </nut-navbar>
-            </nut-sticky>
-        </nut-config-provider>
-
         <!-- 表单内容 -->
         <view class="form-container">
             <!-- 车辆照片上传 -->
@@ -488,6 +477,10 @@ onMounted(() => {
     if (isEditMode.value) {
         loadAuthData()
     }
+    // 动态修改标题
+    wx.setNavigationBarTitle({
+        title: isEditMode.value ? '编辑认证' : '发布认证'
+    });
 })
 </script>