商品详情界面，为商品照片设置走马灯

components.d.ts

@@ -13,6 +13,8 @@ declare module 'vue' {
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
+    ElCarousel: typeof import('element-plus/es')['ElCarousel']
+    ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDescriptions: typeof import('element-plus/es')['ElDescriptions']

src/views/product/ProductDetail.vue

@@ -23,8 +23,6 @@ const stock = ref(0)
 const category = ref('')
 const price = ref(0)
 
-const photoUrl = ref(0)
-
 const amount = ref(1)
 const totalPrice = ref(price.value)
 const discountPrice = ref(0)
@@ -73,7 +71,6 @@ function getProductDetail() {
     category.value = productVO.value.category
     price.value = productVO.value.price
 
-    photoUrl.value = photoUrlList.value[0]
     totalPrice.value = price.value
   })
 }
@@ -261,7 +258,11 @@ function toBackPage() {
           </el-icon>
         </el-button>
 
-        <el-image class="logo-image" :src="photoUrl"/>
+        <el-carousel trigger="click" arrow="always" indicator-position="outside">
+          <el-carousel-item v-for="item in photoUrlList" :key="item">
+            <el-image class="logo-image" :src="item" />
+          </el-carousel-item>
+        </el-carousel>
 
         <span class="product-title">{{ name }}</span>