update

src/pages/goods-detail/index.vue

@@ -1,12 +1,12 @@
 <template>
     <div class="goods-detail" v-if="data" :style="{ paddingBottom: paddingBottom + 'px' }">
-        <swiper class="swiper-container" :options="swiperOption">
-            <swiper-slide>
-                <div style="height: 100vw" class="picture">
-                    <img :src="data.cover_url" alt="" />
+        <van-swipe class="swiper-container" :autoplay="4000" indicator-color="white">
+            <van-swipe-item v-for="(banner, index) in pictures" :key="index">
+                <div class="picture-wrap">
+                    <img :src="banner" alt="" />
                 </div>
-            </swiper-slide>
-        </swiper>
+            </van-swipe-item>
+        </van-swipe>
         <div class="monk-profile">
             <h1 class="position">{{ data.name }}</h1>
             <div class="bar">
@@ -83,7 +83,6 @@
 
 <script>
 import "swiper/css/swiper.css";
-import { swiper, swiperSlide } from "vue-awesome-swiper";
 import { getGoodsDetail, getOrderCompare, hasLogin } from "@/api";
 import SelectSpec from "./components/select-spec.vue";
 import FillInformation from "./components/fill-information.vue";
@@ -92,8 +91,6 @@ import CustomerService from "@/components/customer-service/index.vue";
 
 export default {
     components: {
-        swiper,
-        swiperSlide,
         SelectSpec,
         CustomerService,
         FillInformation,
@@ -117,9 +114,9 @@ export default {
             dreamInfo: null,
             anyPrice: 0, // 随喜金额
             swiperOption: {
-                autoplay: 8000,
+                autoplay: 5000,
                 initialSlide: 1,
-                loop: false,
+                loop: true,
                 pagination: ".swiper-pagination",
                 onSlideChangeEnd: () => {},
             },
@@ -146,6 +143,9 @@ export default {
             }
             return Number(spec.price);
         },
+        pictures() {
+            return [this.data.cover_url, ...this.data.pictures];
+        },
         priceTotal() {
             if (this.is_auto) {
                 return (parseInt(this.priceUnit * 100, 10) * this.quantity * 30) / 100;
@@ -397,10 +397,18 @@ $lightWidth: 1.3rem;
     }
     .swiper-container {
         background: #f5f5f5;
+        height: 10rem;
+        .picture-wrap {
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
         .picture,
         img {
             width: 100%;
             height: 100%;
+            object-fit: cover;
         }
     }
     .monk-profile {