diff --git a/src/views/ProductSummary.vue b/src/views/ProductSummary.vue index 4a9e57d..bbac9db 100644 --- a/src/views/ProductSummary.vue +++ b/src/views/ProductSummary.vue @@ -40,7 +40,8 @@ indicator-position="outside" style="min-height: 300px;" > - + + @@ -71,6 +72,8 @@ import {Bottom, ShoppingCart} from "@element-plus/icons-vue"; const products = ref([]) const firstProduct = ref([]) +const productDetail = ref([]) +const productDetailsCache = ref({}) // 缓存所有商品详情 const route = useRoute() const productId = ref(null) @@ -105,6 +108,9 @@ const getProducts = async () => { console.log('解析后的商品数据:', products.value) + // 预加载所有商品详情 + await loadAllProductDetails() + } catch (error) { console.error('获取商品失败:', error) console.error('错误详情:', error.response?.data) @@ -127,6 +133,41 @@ const getFirstProduct = async () => { } } +const getProductDetail = async (productId) => { + try { + const response = await api.get(`/products/${productId}`) + + if (response.data && response.data.data && response.data.data.product) { + productDetail.value = response.data.data.product + // 缓存商品详情 + productDetailsCache.value[productId] = response.data.data.product + } else { + console.error('无法解析商品详情数据:', response.data) + ElMessage.error('获取商品详情失败') + } + + return productDetail.value + } catch (error) { + console.error('获取商品详情失败:', error) + console.error('错误详情:', error.response?.data) + ElMessage.error('获取商品详情失败') + throw error + } +} + +// 预加载所有商品详情的函数 +const loadAllProductDetails = async () => { + const uniqueProductIds = [...new Set(products.value.map(p => p.id))] + + for (const id of uniqueProductIds) { + try { + await getProductDetail(id) + } catch (error) { + console.warn(`Failed to load details for product ${id}:`, error) + } + } +} + // 添加生命周期钩子来调用函数 onMounted(() => { productId.value = route.params.id