新增优惠券的选择与使用

src/views/ProductSummary.vue

@@ -50,10 +50,13 @@
         <button class="button" @click="$router.push(`/product/${firstProduct.id}`)">立即购买</button>
       </div>
     </div>
+
+
+    
     <div v-for="product in products.filter(p => p.id !== firstProduct.id)" :key="product.id" class="product-card">
       <!-- 轮播图部分 -->
       <div class="product-image">
-        <div v-if="!detailsLoaded" class="carousel-skeleton">
+        <div v-if="!product.images || product.images.length === 0" class="carousel-skeleton">
           <div class="skeleton-image"></div>
           <div class="skeleton-indicators">
             <div class="skeleton-dot"></div>
@@ -65,9 +68,9 @@
           v-else
           :interval="4000"
           indicator-position="outside"
-          style="min-height: 300px;"
+          height="300px"
         >
-          <el-carousel-item v-for="(image, index) in (productDetailsCache[product.id]?.images || [])" :key="index">
+          <el-carousel-item v-for="(image, index) in product.images" :key="index">
             <img :src="getImageUrl(image)" :alt="product.name" class="carousel-image" />
           </el-carousel-item>
         </el-carousel>
@@ -109,7 +112,6 @@ import { getImageUrl } from '@/config'
 
 const products = ref([])
 const firstProduct = ref([])
-const productDetail = ref([])
 const productDetailsCache = ref({}) // 缓存所有商品详情
 const loading = ref(true) // 添加加载状态
 const detailsLoaded = ref(false) // 商品详情是否加载完成
@@ -150,7 +152,7 @@ const getProducts = async () => {
     console.log('解析后的商品数据:', products.value)
     
     // 预加载所有商品详情
-    await loadAllProductDetails()
+    // await loadAllProductDetails()
     
   } catch (error) {
     console.error('获取商品失败:', error)
@@ -210,38 +212,40 @@ const getFirstProduct = async () => {
 // }
 
 // 预加载所有商品详情的函数
-const loadAllProductDetails = async () => {
-  const uniqueProductIds = [...new Set(products.value.map(p => p.id))]
+// const loadAllProductDetails = async () => {
+//   const uniqueProductIds = [...new Set(products.value.map(p => p.id))]
   
-  // 并行加载所有商品详情，避免逐个加载时的多次渲染
-  const loadPromises = uniqueProductIds.map(async (id) => {
-    try {
-      const response = await api.get(`/products/${id}`)
-      if (response.data && response.data.data && response.data.data.product) {
-        return { id, product: response.data.data.product }
-      }
-    } catch (error) {
-      console.warn(`Failed to load details for product ${id}:`, error)
-      return null
-    }
-  })
+//   // 并行加载所有商品详情，避免逐个加载时的多次渲染
+//   const loadPromises = uniqueProductIds.map(async (id) => {
+//     try {
+//       const response = await api.get(`/products/${id}`)
+//       if (response.data && response.data.data && response.data.data.product) {
+//         return { id, product: response.data.data.product }
+//       }
+//     } catch (error) {
+//       console.warn(`Failed to load details for product ${id}:`, error)
+//       return null
+//     }
+//   })
   
-  // 等待所有请求完成
-  const results = await Promise.all(loadPromises)
+//   // 等待所有请求完成
+//   const results = await Promise.all(loadPromises)
   
-  // 一次性更新缓存，避免多次触发响应式更新
-  const newCache = { ...productDetailsCache.value }
-  results.forEach(result => {
-    if (result) {
-      // 不需要预处理图片路径，在模板中使用getImageUrl处理
-      newCache[result.id] = result.product
-    }
-  })
+//   // 一次性更新缓存，避免多次触发响应式更新
+//   const newCache = { ...productDetailsCache.value }
+//   results.forEach(result => {
+//     if (result) {
+//       // 不需要预处理图片路径，在模板中使用getImageUrl处理
+//       newCache[result.id] = result.product
+//     }
+//   })
+
+//   console.log('123:', newCache,results)
   
-  // 一次性更新缓存和加载状态
-  productDetailsCache.value = newCache
-  detailsLoaded.value = true
-}
+//   // 一次性更新缓存和加载状态
+//   productDetailsCache.value = newCache
+//   detailsLoaded.value = true
+// }
 
 // 添加生命周期钩子来调用函数
 onMounted(async () => {