首页商品

pages/index/components/PodCatalog.vue

@@ -18,7 +18,7 @@
     </scroll-view>
 
     <!-- 产品网格 2列 -->
-    <view class="pod-grid">
+    <view class="pod-grid" v-if="products.length > 0">
       <view
         class="pod-card"
         v-for="(item, index) in products"
@@ -31,6 +31,11 @@
         <text class="pod-name">{{ item.name }}</text>
       </view>
     </view>
+    <!-- 空状态 -->
+    <view class="pod-empty" v-else>
+      <text class="empty-icon">📦</text>
+      <text class="empty-text">暂无商品</text>
+    </view>
 
     <!-- 更多产品 - 按钮带箭头 -->
     <view class="more-products" @tap="onMoreTap">
@@ -55,7 +60,7 @@ export default {
   },
   data() {
     return {
-      activeCountry: 'us'
+      activeCountry: ''
     }
   },
   methods: {
@@ -188,4 +193,21 @@ export default {
   width: 24rpx;
   height: 24rpx;
 }
+
+/* 空状态 */
+.pod-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80rpx 0;
+}
+.empty-icon {
+  font-size: 80rpx;
+  margin-bottom: 20rpx;
+}
+.empty-text {
+  font-size: 26rpx;
+  color: #999999;
+}
 </style>

pages/index/index.vue

@@ -8,8 +8,9 @@
 
     <!-- 全球POD货盘 -->
     <PodCatalog
-      :countries="countryTabs"
+      :countries="podCountries"
       :products="podProducts"
+      @countryChange="onPodCountryChange"
       @moreTap="onGoProducts"
       @productTap="onGoDetail"
     />
@@ -33,11 +34,11 @@ import PlatformFeatures from './components/PlatformFeatures.vue'
 import WhyChoose from './components/WhyChoose.vue'
 import CompanyIntro from './components/CompanyIntro.vue'
 
+import { getCountries, getGoods } from '@/api/public.js'
+
 import {
   trustStats,
   stepList,
-  countryTabs,
-  podProducts,
   featureList,
   reasonList,
   companyFeatures
@@ -56,14 +57,56 @@ export default {
     return {
       trustStats,
       stepList,
-      countryTabs,
-      podProducts,
       featureList,
       reasonList,
-      companyFeatures
+      companyFeatures,
+      podCountries: [],
+      podProducts: []
     }
   },
+  async onLoad() {
+    await this.loadPodCountries()
+    await this.loadPodProducts('')
+  },
   methods: {
+    async loadPodCountries() {
+      try {
+        const res = await getCountries()
+        const data = (res.data && res.data.data) || []
+        const countries = [{ id: '', name: '全部' }]
+        data.forEach((c) => {
+          countries.push({ id: c.id, name: c.countryName })
+        })
+        this.podCountries = countries
+      } catch (err) {
+        console.error('[loadPodCountries Error]', err)
+      }
+    },
+
+    async loadPodProducts(countryId) {
+      try {
+        const params = { page: 1, pageSize: 4 }
+        if (countryId) {
+          params.countryId = countryId
+        }
+        const res = await getGoods(params)
+        const data = (res.data && res.data.data) || { items: [] }
+        const items = (data.items || []).slice(0, 4)
+        this.podProducts = items.map((item) => ({
+          id: item.goodId,
+          name: item.goodName,
+          image: item.image
+        }))
+      } catch (err) {
+        console.error('[loadPodProducts Error]', err)
+        this.podProducts = []
+      }
+    },
+
+    async onPodCountryChange(id) {
+      await this.loadPodProducts(id)
+    },
+
     onGoProducts() {
       uni.switchTab({
         url: '/pages/products/products'

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>