加载效果
This commit is contained in:
parent
6b7fb86023
commit
0734a5c818
|
|
@ -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,6 +52,18 @@ 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;
|
||||
|
|
@ -70,25 +93,104 @@ Page({
|
|||
},
|
||||
|
||||
async reloadList() {
|
||||
// TODO: 根据筛选值重新加载列表
|
||||
// 重新加载列表，重置分页
|
||||
this.setData({
|
||||
page: 1,
|
||||
hasMore: true,
|
||||
loading: true,
|
||||
showNoData: false
|
||||
});
|
||||
|
||||
const data = {
|
||||
sort: this.data.selectedSort,
|
||||
brand: this.data.selectedSeriesId,
|
||||
price: this.data.selectedPrice,
|
||||
attr: this.data.filterParams,
|
||||
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({
|
||||
|
|
|
|||
|
|
@ -7,5 +7,6 @@
|
|||
"van-slider": "@vant/weapp/slider/index",
|
||||
"van-tag": "@vant/weapp/tag/index",
|
||||
"van-button": "@vant/weapp/button/index"
|
||||
}
|
||||
},
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 = '';
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user