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
1 <template> 1 <template>
2 - <view class="px-4 mt-4"> 2 + <view v-show="featuredScooters.length" class="px-4 mt-4">
3 <view class="flex justify-between items-center mb-2"> 3 <view class="flex justify-between items-center mb-2">
4 <text class="text-lg font-medium">精品推荐</text> 4 <text class="text-lg font-medium">精品推荐</text>
5 <view class="text-sm text-gray-500 flex items-center" @tap="onMoreRecommendClick"> 5 <view class="text-sm text-gray-500 flex items-center" @tap="onMoreRecommendClick">
......
1 <template> 1 <template>
2 - <view class="latest-scooters"> 2 + <view v-show="latestScooters.length" class="latest-scooters">
3 <!-- 最新上架 --> 3 <!-- 最新上架 -->
4 <view class="px-4 py-3"> 4 <view class="px-4 py-3">
5 <view class="flex items-center justify-between mb-3"> 5 <view class="flex items-center justify-between mb-3">
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-11 10:11:35 4 + * @LastEditTime: 2025-07-16 10:22:06
5 * @FilePath: /jgdl/src/pages/authCar/index.vue 5 * @FilePath: /jgdl/src/pages/authCar/index.vue
6 * @Description: 认证车源 6 * @Description: 认证车源
7 --> 7 -->
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
28 </view> 28 </view>
29 29
30 <!-- 认证车源列表 --> 30 <!-- 认证车源列表 -->
31 - <view class="px-4 mt-6"> 31 + <view v-show="authCars.length" class="px-4 mt-6">
32 <view class="flex justify-between items-center mb-4"> 32 <view class="flex justify-between items-center mb-4">
33 <text class="text-lg font-medium">认证车源</text> 33 <text class="text-lg font-medium">认证车源</text>
34 </view> 34 </view>
......
...@@ -85,6 +85,38 @@ ...@@ -85,6 +85,38 @@
85 font-size: 24rpx; 85 font-size: 24rpx;
86 } 86 }
87 87
88 +/* 空状态样式 */
89 +.empty-state {
90 + display: flex;
91 + flex-direction: column;
92 + align-items: center;
93 + justify-content: center;
94 + padding: 120rpx 40rpx;
95 + min-height: 400rpx;
96 +}
97 +
98 +.empty-state .empty-icon {
99 + display: flex;
100 + justify-content: center;
101 + align-items: center;
102 + margin-bottom: 32rpx;
103 + opacity: 0.7;
104 +}
105 +
106 +.empty-state .text-base {
107 + font-size: 32rpx;
108 + color: #6b7280;
109 + font-weight: 500;
110 + margin-bottom: 16rpx;
111 +}
112 +
113 +.empty-state .text-sm {
114 + font-size: 28rpx;
115 + color: #9ca3af;
116 + line-height: 1.5;
117 + text-align: center;
118 +}
119 +
88 /* NutUI 组件样式覆盖 */ 120 /* NutUI 组件样式覆盖 */
89 :deep(.nut-menu) { 121 :deep(.nut-menu) {
90 background-color: #ffffff; 122 background-color: #ffffff;
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-11 10:45:41 4 + * @LastEditTime: 2025-07-16 10:18:58
5 * @FilePath: /jgdl/src/pages/goodCarList/index.vue 5 * @FilePath: /jgdl/src/pages/goodCarList/index.vue
6 * @Description: 特价好车页面 6 * @Description: 特价好车页面
7 --> 7 -->
...@@ -46,7 +46,17 @@ ...@@ -46,7 +46,17 @@
46 :lower-threshold="50" 46 :lower-threshold="50"
47 :enable-flex="false" 47 :enable-flex="false"
48 > 48 >
49 - <view class="space-y-4"> 49 + <!-- 空状态 -->
50 + <view v-if="goodCars.length === 0 && !loading" class="empty-state text-center py-20">
51 + <view class="empty-icon mb-4">
52 + <Search2 size="60" color="#9ca3af" />
53 + </view>
54 + <text class="text-base font-medium text-gray-600 block mb-2">暂无特价好车</text>
55 + <text class="text-sm text-gray-400 block">试试调整筛选条件或稍后再来看看</text>
56 + </view>
57 +
58 + <!-- 车辆列表 -->
59 + <view v-else class="space-y-4">
50 <view v-for="car in goodCars" :key="car.id" 60 <view v-for="car in goodCars" :key="car.id"
51 class="bg-white rounded-lg shadow-sm overflow-hidden mb-3" 61 class="bg-white rounded-lg shadow-sm overflow-hidden mb-3"
52 @tap="() => onCarClick(car)" 62 @tap="() => onCarClick(car)"
......
...@@ -69,6 +69,13 @@ ...@@ -69,6 +69,13 @@
69 </nut-row> 69 </nut-row>
70 </view> 70 </view>
71 71
72 + <!-- 空状态提示 -->
73 + <view v-if="filteredConversations.length === 0 && !loading" class="empty-state py-8 text-center">
74 + <Message size="48" color="#9ca3af" class="mb-4" />
75 + <text class="text-gray-500 text-base block mb-2">暂无消息</text>
76 + <text class="text-gray-400 text-sm">当前筛选条件下没有找到相关消息</text>
77 + </view>
78 +
72 <!-- Loading indicator --> 79 <!-- Loading indicator -->
73 <view v-if="loading" class="loading-container"> 80 <view v-if="loading" class="loading-container">
74 <text class="loading-text">加载中...</text> 81 <text class="loading-text">加载中...</text>
...@@ -619,6 +626,36 @@ onMounted(() => { ...@@ -619,6 +626,36 @@ onMounted(() => {
619 626
620 } 627 }
621 628
629 +/* 空状态样式 */
630 +.empty-state {
631 + padding: 80rpx 0 100rpx 0;
632 + text-align: center;
633 + display: flex;
634 + flex-direction: column;
635 + align-items: center;
636 + justify-content: center;
637 +
638 + .mb-4 {
639 + margin-bottom: 32rpx;
640 + }
641 +
642 + .mb-2 {
643 + margin-bottom: 16rpx;
644 + }
645 +
646 + .text-base {
647 + font-size: 32rpx;
648 + color: #6b7280;
649 + font-weight: 500;
650 + }
651 +
652 + .text-sm {
653 + font-size: 26rpx;
654 + color: #9ca3af;
655 + line-height: 1.5;
656 + }
657 +}
658 +
622 /* 状态筛选标签 */ 659 /* 状态筛选标签 */
623 .status-tabs { 660 .status-tabs {
624 background: white; 661 background: white;
......
...@@ -112,6 +112,36 @@ ...@@ -112,6 +112,36 @@
112 } 112 }
113 } 113 }
114 114
115 +/* 空状态样式 */
116 +.empty-state {
117 + padding: 80rpx 0 100rpx 0;
118 + text-align: center;
119 + display: flex;
120 + flex-direction: column;
121 + align-items: center;
122 + justify-content: center;
123 +
124 + .mb-4 {
125 + margin-bottom: 32rpx;
126 + }
127 +
128 + .mb-2 {
129 + margin-bottom: 16rpx;
130 + }
131 +
132 + .text-base {
133 + font-size: 32rpx;
134 + color: #6b7280;
135 + font-weight: 500;
136 + }
137 +
138 + .text-sm {
139 + font-size: 26rpx;
140 + color: #9ca3af;
141 + line-height: 1.5;
142 + }
143 +}
144 +
115 /* 无更多数据样式 */ 145 /* 无更多数据样式 */
116 .no-more-container { 146 .no-more-container {
117 padding: 32rpx 0 100rpx 0; /* 增加底部间距避免被TabBar遮挡 */ 147 padding: 32rpx 0 100rpx 0; /* 增加底部间距避免被TabBar遮挡 */
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-11 10:10:56 4 + * @LastEditTime: 2025-07-16 10:27:40
5 * @FilePath: /jgdl/src/pages/newCarList/index.vue 5 * @FilePath: /jgdl/src/pages/newCarList/index.vue
6 * @Description: 最新上架页面 6 * @Description: 最新上架页面
7 --> 7 -->
...@@ -86,6 +86,13 @@ ...@@ -86,6 +86,13 @@
86 </view> 86 </view>
87 </view> 87 </view>
88 88
89 + <!-- 空状态提示 -->
90 + <view v-if="newCars.length === 0 && !loading" class="empty-state py-8 text-center">
91 + <Search2 size="48" color="#9ca3af" class="mb-4" />
92 + <text class="text-gray-500 text-base block mb-2">暂无最新上架车辆</text>
93 + <text class="text-gray-400 text-sm">试试调整筛选条件或稍后再来看看</text>
94 + </view>
95 +
89 <!-- Loading indicator --> 96 <!-- Loading indicator -->
90 <view v-if="loading" class="loading-container py-4 text-center"> 97 <view v-if="loading" class="loading-container py-4 text-center">
91 <text class="loading-text text-gray-500">加载中...</text> 98 <text class="loading-text text-gray-500">加载中...</text>
......
...@@ -78,6 +78,36 @@ ...@@ -78,6 +78,36 @@
78 } 78 }
79 } 79 }
80 80
81 + // 空状态样式
82 + .empty-state {
83 + padding: 80rpx 0 100rpx 0;
84 + text-align: center;
85 + display: flex;
86 + flex-direction: column;
87 + align-items: center;
88 + justify-content: center;
89 +
90 + .mb-4 {
91 + margin-bottom: 32rpx;
92 + }
93 +
94 + .mb-2 {
95 + margin-bottom: 16rpx;
96 + }
97 +
98 + .text-base {
99 + font-size: 32rpx;
100 + color: #6b7280;
101 + font-weight: 500;
102 + }
103 +
104 + .text-sm {
105 + font-size: 26rpx;
106 + color: #9ca3af;
107 + line-height: 1.5;
108 + }
109 + }
110 +
81 // 加载状态样式 111 // 加载状态样式
82 .load-more-container { 112 .load-more-container {
83 padding: 40rpx 0; 113 padding: 40rpx 0;
......
...@@ -67,6 +67,13 @@ ...@@ -67,6 +67,13 @@
67 </view> 67 </view>
68 </view> 68 </view>
69 69
70 + <!-- 空状态提示 -->
71 + <view v-if="scooters.length === 0 && !loading" class="empty-state py-8 text-center">
72 + <Search2 size="48" color="#9ca3af" class="mb-4" />
73 + <text class="text-gray-500 text-base block mb-2">暂无相关车辆</text>
74 + <text class="text-gray-400 text-sm">试试调整筛选条件或稍后再来看看</text>
75 + </view>
76 +
70 <!-- 加载更多按钮 --> 77 <!-- 加载更多按钮 -->
71 <view class="load-more-container"> 78 <view class="load-more-container">
72 <view v-if="loading" class="loading-container"> 79 <view v-if="loading" class="loading-container">
......