商城实现

src/views/Shop.vue

@@ -180,6 +180,7 @@ import {
 } from '@element-plus/icons-vue'
 import api from '@/utils/api'
 import { debounce } from 'lodash-es'
+import { getImageUrl } from '@/config'
 
 const router = useRouter()
 const route = useRoute()
@@ -305,9 +306,22 @@ const getProducts = async (isLoadMore = false) => {
     console.log(data,'response');
     
     if (isLoadMore) {
-      products.value.push(...data.data.products)
+      const newProducts = data.data.products
+      // 处理新加载商品图片路径
+      newProducts.forEach(product => {
+        if (product.image) {
+          product.image = getImageUrl(product.image)
+        }
+      })
+      products.value.push(...newProducts)
     } else {
       products.value = data.data.products
+      // 处理商品图片路径
+      products.value.forEach(product => {
+        if (product.image) {
+          product.image = getImageUrl(product.image)
+        }
+      })
     }
     
     hasMore.value = data.data.hasMore
@@ -345,6 +359,12 @@ const getHotProducts = async () => {
   try {
     const {data} = await api.get('/products/hot')
     hotProducts.value = data.data.products
+    // 处理热销商品图片路径
+    hotProducts.value.forEach(product => {
+      if (product.image) {
+        product.image = getImageUrl(product.image)
+      }
+    })
   } catch (error) {
     console.log(error)
   } finally {
@@ -357,6 +377,12 @@ const getCheapProducts = async () => {
   try {
     const {data} = await api.get('/products/cheap')
     cheapProducts.value = data.data.products
+    // 处理秒杀商品图片路径
+    cheapProducts.value.forEach(product => {
+      if (product.image) {
+        product.image = getImageUrl(product.image)
+      }
+    })
   } catch (error) {
     console.log(error)
   } finally {