Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
ae47c7b5 1 parent 3432d8ef

feat(ui): 添加空状态组件并优化列表显示条件 

为多个页面添加空状态提示组件，当列表数据为空时显示友好提示
使用v-show控制列表容器显示，仅在数据存在时渲染
Inline Side-by-side
Showing 10 changed files with 160 additions and 7 deletions
<template>
<view class="px-4 mt-4">
<view v-show="featuredScooters.length" class="px-4 mt-4">
<view class="flex justify-between items-center mb-2">
<text class="text-lg font-medium">精品推荐</text>
<view class="text-sm text-gray-500 flex items-center" @tap="onMoreRecommendClick">
......
<template>
<view class="latest-scooters">
<view v-show="latestScooters.length" class="latest-scooters">
<!-- 最新上架 -->
<view class="px-4 py-3">
<view class="flex items-center justify-between mb-3">
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-11 10:11:35
* @LastEditTime: 2025-07-16 10:22:06
* @FilePath: /jgdl/src/pages/authCar/index.vue
* @Description: 认证车源
-->
......@@ -28,7 +28,7 @@
</view>
<!-- 认证车源列表 -->
<view class="px-4 mt-6">
<view v-show="authCars.length" class="px-4 mt-6">
<view class="flex justify-between items-center mb-4">
<text class="text-lg font-medium">认证车源</text>
</view>
......
......@@ -85,6 +85,38 @@
font-size: 24rpx;
}
/* 空状态样式 */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 120rpx 40rpx;
min-height: 400rpx;
}
.empty-state .empty-icon {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 32rpx;
opacity: 0.7;
}
.empty-state .text-base {
font-size: 32rpx;
color: #6b7280;
font-weight: 500;
margin-bottom: 16rpx;
}
.empty-state .text-sm {
font-size: 28rpx;
color: #9ca3af;
line-height: 1.5;
text-align: center;
}
/* NutUI 组件样式覆盖 */
:deep(.nut-menu) {
background-color: #ffffff;
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-11 10:45:41
* @LastEditTime: 2025-07-16 10:18:58
* @FilePath: /jgdl/src/pages/goodCarList/index.vue
* @Description: 特价好车页面
-->
......@@ -46,7 +46,17 @@
:lower-threshold="50"
:enable-flex="false"
>
<view class="space-y-4">
<!-- 空状态 -->
<view v-if="goodCars.length === 0 && !loading" class="empty-state text-center py-20">
<view class="empty-icon mb-4">
<Search2 size="60" color="#9ca3af" />
</view>
<text class="text-base font-medium text-gray-600 block mb-2">暂无特价好车</text>
<text class="text-sm text-gray-400 block">试试调整筛选条件或稍后再来看看</text>
</view>
<!-- 车辆列表 -->
<view v-else class="space-y-4">
<view v-for="car in goodCars" :key="car.id"
class="bg-white rounded-lg shadow-sm overflow-hidden mb-3"
@tap="() => onCarClick(car)"
......
......@@ -69,6 +69,13 @@
</nut-row>
</view>
<!-- 空状态提示 -->
<view v-if="filteredConversations.length === 0 && !loading" class="empty-state py-8 text-center">
<Message size="48" color="#9ca3af" class="mb-4" />
<text class="text-gray-500 text-base block mb-2">暂无消息</text>
<text class="text-gray-400 text-sm">当前筛选条件下没有找到相关消息</text>
</view>
<!-- Loading indicator -->
<view v-if="loading" class="loading-container">
<text class="loading-text">加载中...</text>
......@@ -619,6 +626,36 @@ onMounted(() => {
}
/* 空状态样式 */
.empty-state {
padding: 80rpx 0 100rpx 0;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.mb-4 {
margin-bottom: 32rpx;
}
.mb-2 {
margin-bottom: 16rpx;
}
.text-base {
font-size: 32rpx;
color: #6b7280;
font-weight: 500;
}
.text-sm {
font-size: 26rpx;
color: #9ca3af;
line-height: 1.5;
}
}
/* 状态筛选标签 */
.status-tabs {
background: white;
......
......@@ -112,6 +112,36 @@
}
}
/* 空状态样式 */
.empty-state {
padding: 80rpx 0 100rpx 0;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.mb-4 {
margin-bottom: 32rpx;
}
.mb-2 {
margin-bottom: 16rpx;
}
.text-base {
font-size: 32rpx;
color: #6b7280;
font-weight: 500;
}
.text-sm {
font-size: 26rpx;
color: #9ca3af;
line-height: 1.5;
}
}
/* 无更多数据样式 */
.no-more-container {
padding: 32rpx 0 100rpx 0; /* 增加底部间距避免被TabBar遮挡 */
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-11 10:10:56
* @LastEditTime: 2025-07-16 10:27:40
* @FilePath: /jgdl/src/pages/newCarList/index.vue
* @Description: 最新上架页面
-->
......@@ -86,6 +86,13 @@
</view>
</view>
<!-- 空状态提示 -->
<view v-if="newCars.length === 0 && !loading" class="empty-state py-8 text-center">
<Search2 size="48" color="#9ca3af" class="mb-4" />
<text class="text-gray-500 text-base block mb-2">暂无最新上架车辆</text>
<text class="text-gray-400 text-sm">试试调整筛选条件或稍后再来看看</text>
</view>
<!-- Loading indicator -->
<view v-if="loading" class="loading-container py-4 text-center">
<text class="loading-text text-gray-500">加载中...</text>
......
......@@ -78,6 +78,36 @@
}
}
// 空状态样式
.empty-state {
padding: 80rpx 0 100rpx 0;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.mb-4 {
margin-bottom: 32rpx;
}
.mb-2 {
margin-bottom: 16rpx;
}
.text-base {
font-size: 32rpx;
color: #6b7280;
font-weight: 500;
}
.text-sm {
font-size: 26rpx;
color: #9ca3af;
line-height: 1.5;
}
}
// 加载状态样式
.load-more-container {
padding: 40rpx 0;
......
......@@ -67,6 +67,13 @@
</view>
</view>
<!-- 空状态提示 -->
<view v-if="scooters.length === 0 && !loading" class="empty-state py-8 text-center">
<Search2 size="48" color="#9ca3af" class="mb-4" />
<text class="text-gray-500 text-base block mb-2">暂无相关车辆</text>
<text class="text-gray-400 text-sm">试试调整筛选条件或稍后再来看看</text>
</view>
<!-- 加载更多按钮 -->
<view class="load-more-container">
<view v-if="loading" class="loading-container">
......