加载效果

pages/car_new/car_new.js

@@ -22,7 +22,18 @@ Page({
       { text: '5-10万', value: '5-10'},
       { text: '10万以上', value: '>10' }
     ],
-    extendFields: [] // 筛选配置
+    extendFields: [], // 筛选配置
+    
+    // 分页相关
+    page: 1,
+    pageSize: 10,
+    hasMore: true,
+    loading: false,
+    loadingMore: false,
+    
+    // 数据状态
+    showNoData: false,
+    firstLoad: true
   },
   onBrandClick(e) {
     const index = e.detail.index;
@@ -41,7 +52,19 @@ Page({
     this.selectComponent('#dropdownItemBrand').toggle(false); // 关闭下拉菜单
   }
   },  
-
+  // 下拉刷新事件
+  onPullDownRefresh() {
+    this.reloadList();
+    wx.stopPullDownRefresh();
+  },
+  
+  // 滑动到底部加载更多
+  onReachBottom() {
+    if (this.data.hasMore && !this.data.loadingMore) {
+      this.loadMoreData();
+    }
+  },
+  
   onSeriesSelect(e) {
     const selectedId = e.detail.id;
     const selectedText = e.detail.text;
@@ -70,25 +93,104 @@ Page({
   },
 
   async reloadList() {
-    // TODO: 根据筛选值重新加载列表
+    // 重新加载列表，重置分页
+    this.setData({
+      page: 1,
+      hasMore: true,
+      loading: true,
+      showNoData: false
+    });
+    
     const data = {
-      sort:this.data.selectedSort,
+      sort: this.data.selectedSort,
-      brand:this.data.selectedSeriesId,
+      brand: this.data.selectedSeriesId,
-      price:this.data.selectedPrice,
+      price: this.data.selectedPrice,
-      attr:this.data.filterParams,
+      attr: this.data.filterParams,
-      type:this.data.type,
+      type: this.data.type,
-    }
+      page: 1,
+      pageSize: this.data.pageSize
+    };
+    
     try {
       const raw = await request({
         url: '/admin/wechat/api/car',
         method: 'POST',
         data: data
       });
-      this.setData({carList:raw.items})
+      
+      const items = raw.items || [];
+      const total = raw.total || 0;
+      
+      this.setData({
+        carList: items,
+        hasMore: items.length >= this.data.pageSize && items.length < total,
+        loading: false,
+        showNoData: items.length === 0 && !this.data.firstLoad,
+        firstLoad: false
+      });
     } catch (err) {
-      console.error('加载品牌失败', err);
+      console.error('加载列表失败', err);
+      this.setData({
+        loading: false,
+        showNoData: this.data.carList.length === 0
+      });
+      
+      wx.showToast({
+        title: '加载失败',
+        icon: 'none'
+      });
     }
   },
+  
+  async loadMoreData() {
+    if (this.data.loadingMore || !this.data.hasMore) return;
+    
+    const nextPage = this.data.page + 1;
+    this.setData({
+      loadingMore: true
+    });
+    
+    const data = {
+      sort: this.data.selectedSort,
+      brand: this.data.selectedSeriesId,
+      price: this.data.selectedPrice,
+      attr: this.data.filterParams,
+      type: this.data.type,
+      page: nextPage,
+      pageSize: this.data.pageSize
+    };
+    
+    try {
+      const raw = await request({
+        url: '/admin/wechat/api/car',
+        method: 'POST',
+        data: data
+      });
+      
+      const items = raw.items || [];
+      const total = raw.total || 0;
+      const currentTotal = this.data.carList.length + items.length;
+      
+      this.setData({
+        carList: [...this.data.carList, ...items],
+        page: nextPage,
+        hasMore: items.length >= this.data.pageSize && currentTotal < total,
+        loadingMore: false
+      });
+      
+    } catch (err) {
+      console.error('加载更多失败', err);
+      this.setData({
+        loadingMore: false
+      });
+      
+      wx.showToast({
+        title: '加载失败',
+        icon: 'none'
+      });
+    }
+  },
+  
   openMap() {
     const { latitude, longitude, address, name } = this.data.company
     wx.openLocation({
@@ -207,4 +309,4 @@ Page({
     this.setData({filterParams:filterParams});
     this.reloadList();
   }
-})
+})

pages/car_new/car_new.json

@@ -7,5 +7,6 @@
     "van-slider": "@vant/weapp/slider/index",
     "van-tag": "@vant/weapp/tag/index",
     "van-button": "@vant/weapp/button/index"
-  }
+  },
+  "enablePullDownRefresh": true
 }

pages/car_new/car_new.wxml

@@ -153,4 +153,28 @@
       </view>
     </view>
   </view>
+
+   <!-- 加载状态 -->
+   <view class="loading-container" wx:if="{{loading}}">
+    <view class="loading-spinner">
+      <text>加载中...</text>
+    </view>
+  </view>
+  
+  <!-- 无数据状态 -->
+  <view class="no-data-container" wx:if="{{showNoData}}">
+    <!-- <image class="no-data-icon" src="/images/no-data.png"></image> -->
+    <text class="no-data-text">暂无数据</text>
+    <text class="no-data-desc">换个条件试试吧</text>
+  </view>
+  
+  <!-- 加载更多状态 -->
+  <view class="load-more-container" wx:if="{{carList.length > 0}}">
+    <view class="load-more-item" wx:if="{{loadingMore}}">
+      <text>加载更多...</text>
+    </view>
+    <view class="load-more-item-no" wx:elif="{{!hasMore}}">
+      <text>没有更多数据了</text>
+    </view>
+  </view>
 </view>

pages/car_new/car_new.wxss

@@ -376,5 +376,121 @@
   color: #999;
   font-size: 24rpx;
 }
+/* 加载状态 */
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 40rpx;
+  background: white;
+  margin: 20rpx;
+  border-radius: 16rpx;
+}
 
+.loading-spinner {
+  display: flex;
+  align-items: center;
+  color: #666;
+  font-size: 28rpx;
+}
+
+.loading-spinner::before {
+  content: '';
+  width: 32rpx;
+  height: 32rpx;
+  border: 4rpx solid #e0e0e0;
+  border-top: 4rpx solid #007aff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-right: 16rpx;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* 无数据状态 */
+.no-data-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 120rpx 40rpx;
+  background: white;
+  margin: 20rpx;
+  border-radius: 16rpx;
+}
+
+.no-data-icon {
+  width: 200rpx;
+  height: 200rpx;
+  margin-bottom: 40rpx;
+  opacity: 0.6;
+}
+
+.no-data-text {
+  font-size: 32rpx;
+  color: #666;
+  margin-bottom: 16rpx;
+  font-weight: 500;
+}
+
+.no-data-desc {
+  font-size: 28rpx;
+  color: #999;
+  text-align: center;
+  line-height: 1.5;
+}
+
+/* 加载更多状态 */
+.load-more-container {
+  padding: 20rpx;
+}
+
+.load-more-item,.load-more-item-no {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 30rpx;
+  color: #999;
+  font-size: 28rpx;
+  background: white;
+  border-radius: 16rpx;
+}
+
+.load-more-item text {
+  position: relative;
+}
+
+/* 加载更多动画 */
+.load-more-item:first-child text::before {
+  content: '';
+  width: 24rpx;
+  height: 24rpx;
+  border: 3rpx solid #e0e0e0;
+  border-top: 3rpx solid #007aff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-right: 12rpx;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+/* 响应式适配 */
+@media (max-width: 750rpx) {
+  .car-item {
+    margin-bottom: 16rpx;
+    padding: 20rpx;
+  }
+  
+  .no-data-container {
+    padding: 80rpx 20rpx;
+  }
+  
+  .no-data-icon {
+    width: 160rpx;
+    height: 160rpx;
+  }
+}
 

pages/info/info.wxml

@@ -82,16 +82,16 @@
     <!-- 不同车型的操作按钮 -->
     <view class="action-buttons">
       <!-- 新车操作按钮 -->
-      <view wx:if="{{carDetail.car_type == 1}}" class="calculator-btn" bindtap="openCalculator">
+      <!-- <view wx:if="{{carDetail.car_type == 1}}" class="calculator-btn" bindtap="openCalculator">
         <van-icon name="calculator" size="16px" />
         <text>贷款计算</text>
-      </view>
+      </view> -->
       
       <!-- 租车操作按钮 -->
-      <view wx:elif="{{carDetail.car_type == 2}}" class="rent-btn" bindtap="openRentCalculator">
+      <!-- <view wx:elif="{{carDetail.car_type == 2}}" class="rent-btn" bindtap="openRentCalculator">
         <van-icon name="calendar" size="16px" />
         <text>租期计算</text>
-      </view>
+      </view> -->
     </view>
   </view>
 </view>

utils/request.js

@@ -1,4 +1,4 @@
-const BASE_URL = 'http://car.cherrybless.com'; // 👈 换成你的后端地址
+const BASE_URL = 'https://car.cherrybless.com'; // 👈 换成你的后端地址
 
 function request({ url, method = 'GET', data = {}, header = {} }) {
   const token = '';