Browse Source

fix(products): DimensionProducts always shows section with empty state

- Remove v-if from root, section now always renders
- Show 暂无商品 / 登录后查看更多商品 when empty
- Matches DimensionActivities empty state pattern
User 2 months ago
parent
commit
ab909b9e57
1 changed files with 14 additions and 2 deletions
  1. 14 2
      cfc-frontend/components/DimensionProducts.vue

+ 14 - 2
cfc-frontend/components/DimensionProducts.vue

@@ -1,10 +1,13 @@
 <template>
-  <view class="section" v-if="displayProducts && displayProducts.length > 0">
+  <view class="section">
     <view class="section-header">
       <text class="section-title">🛍️ 推荐商品</text>
       <text class="section-more" @click="$emit('moreProducts')">更多 ›</text>
     </view>
-    <view class="product-list">
+    <view v-if="!displayProducts || displayProducts.length === 0" class="empty-state">
+      <text class="empty-tip">{{ isLoggedIn ? '暂无商品' : '登录后查看更多商品' }}</text>
+    </view>
+    <view class="product-list" v-if="displayProducts && displayProducts.length > 0">
       <view class="product-card" v-for="prod in displayProducts" :key="prod.id" @click="$emit('productClick', prod)">
         <image class="product-img" :src="prod.coverImage || '/static/default-product.png'" mode="aspectFill" />
         <text class="product-name line-clamp-2">{{ prod.name }}</text>
@@ -99,4 +102,13 @@ export default {
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
+.empty-state {
+  display: flex;
+  justify-content: center;
+  padding: 40rpx 0;
+}
+.empty-tip {
+  font-size: 24rpx;
+  color: #999;
+}
 </style>