商城实现

src/views/ProductSummary.vue

@@ -87,6 +87,8 @@ import { useRoute, useRouter } from 'vue-router'
 import {ElMessage} from "element-plus";
 import {Bottom, ShoppingCart} from "@element-plus/icons-vue";
 
+import { getImageUrl } from '@/config'
+
 const products = ref([])
 const firstProduct = ref([])
 const productDetail = ref([])
@@ -125,6 +127,13 @@ const getProducts = async () => {
       console.error('无法解析的商品数据格式:', data)
     }
     
+    // 处理商品图片路径
+    products.value.forEach(product => {
+      if (product.image) {
+        product.image = getImageUrl(product.image)
+      }
+    })
+    
     console.log('解析后的商品数据:', products.value)
     
     // 预加载所有商品详情
@@ -146,6 +155,14 @@ const getFirstProduct = async () => {
     console.log(productRes,'productRes');
 
     firstProduct.value = productRes.data.data.product
+    
+    // 处理第一个商品的图片路径
+    if (firstProduct.value.image) {
+      firstProduct.value.image = getImageUrl(firstProduct.value.image)
+    }
+    if (firstProduct.value.images && Array.isArray(firstProduct.value.images)) {
+      firstProduct.value.images = firstProduct.value.images.map(img => getImageUrl(img))
+    }
   } catch (error) {
     ElMessage.error('获取商品详情失败')
     console.log(error)
@@ -160,8 +177,17 @@ const getProductDetail = async (productId) => {
     
     if (response.data && response.data.data && response.data.data.product) {
       productDetail.value = response.data.data.product
+      
+      // 处理商品详情的图片路径
+      if (productDetail.value.image) {
+        productDetail.value.image = getImageUrl(productDetail.value.image)
+      }
+      if (productDetail.value.images && Array.isArray(productDetail.value.images)) {
+        productDetail.value.images = productDetail.value.images.map(img => getImageUrl(img))
+      }
+      
       // 缓存商品详情
-      productDetailsCache.value[productId] = response.data.data.product
+      productDetailsCache.value[productId] = productDetail.value
     } else {
       console.error('无法解析商品详情数据:', response.data)
       ElMessage.error('获取商品详情失败')
@@ -200,6 +226,13 @@ const loadAllProductDetails = async () => {
   const newCache = { ...productDetailsCache.value }
   results.forEach(result => {
     if (result) {
+      // 处理缓存商品的图片路径
+      if (result.product.image) {
+        result.product.image = getImageUrl(result.product.image)
+      }
+      if (result.product.images && Array.isArray(result.product.images)) {
+        result.product.images = result.product.images.map(img => getImageUrl(img))
+      }
       newCache[result.id] = result.product
     }
   })