首页商品

pages/products/components/ProductGrid.vue

@@ -14,7 +14,7 @@
 
     <!-- 商品网格滚动区 -->
     <scroll-view scroll-y class="product-scroll">
-      <view class="product-grid">
+      <view class="product-grid" v-if="list.length > 0">
         <view
           class="product-card"
           v-for="(item, index) in list"
@@ -45,6 +45,11 @@
           </view>
         </view>
       </view>
+      <!-- 空状态 -->
+      <view class="product-empty" v-else>
+        <text class="empty-icon">📦</text>
+        <text class="empty-text">没有找到相关商品</text>
+      </view>
 
       <!-- 分页 -->
       <view class="pagination" v-if="total > 0">
@@ -259,4 +264,21 @@ export default {
   font-size: 24rpx;
   color: #999999;
 }
+
+/* 空状态 */
+.product-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 120rpx 0;
+}
+.empty-icon {
+  font-size: 96rpx;
+  margin-bottom: 24rpx;
+}
+.empty-text {
+  font-size: 26rpx;
+  color: #999999;
+}
 </style>