From 06604a3d192cfd950f45f3794bce987e4259bd9a Mon Sep 17 00:00:00 2001
From: pushuo <pushuo@guangda.work>
Date: Fri, 23 Dec 2022 11:06:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=89=8B=E6=9C=BA=E7=AB=AF?=
 =?UTF-8?q?=EF=BC=8Csku=20=E5=9B=BE=E7=89=87=E5=88=87=E6=8D=A2=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=20->=20https://gitee.com/beikeshop/beikeshop/issues/I?=
 =?UTF-8?q?66R0Z=3Ffrom=3Dproject-issue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../beike/shop/default/css/page-product.scss  |  2 +-
 themes/default/product.blade.php              | 29 ++++++++++++-------
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/resources/beike/shop/default/css/page-product.scss b/resources/beike/shop/default/css/page-product.scss
index a8f661d8..4f0cad4b 100644
--- a/resources/beike/shop/default/css/page-product.scss
+++ b/resources/beike/shop/default/css/page-product.scss
@@ -39,7 +39,7 @@ body.page-product {
       }
     }
 
-    #swiper-2 {
+    #swiper-mobile {
       .swiper-pagination {
         --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
         --swiper-navigation-color: #ff6600;/* 单独设置按钮颜色 */
diff --git a/themes/default/product.blade.php b/themes/default/product.blade.php
index ed6c60cd..99ae1b53 100644
--- a/themes/default/product.blade.php
+++ b/themes/default/product.blade.php
@@ -37,7 +37,7 @@
               <img :src="images.length ? images[0].preview : '{{ asset('image/placeholder.png') }}'" class="img-fluid">
             </div>
           @else
-            <div class="swiper" id="swiper-2">
+            <div class="swiper" id="swiper-mobile">
               <div class="swiper-wrapper">
                 <div class="swiper-slide" v-for="image, index in images">
                   <img :src="image.preview" class="img-fluid">
@@ -146,6 +146,8 @@
 
 @push('add-scripts')
   <script>
+    let swiperMobile = null;
+
     let app = new Vue({
       el: '#product-app',
 
@@ -223,6 +225,10 @@
           const spuImages = @json($product['images'] ?? []);
           this.images = [...sku.images, ...spuImages]
           this.product = sku;
+          if (swiperMobile) {
+            swiperMobile.slideTo(0, 0, false)
+          }
+
           this.$nextTick(() => {
             $('#zoom img').attr('src', $('#swiper a').attr('data-image'));
             $('#zoom').trigger('zoom.destroy');
@@ -271,6 +277,7 @@
       $('#zoom img').attr('src', $(this).attr('data-image'));
       $('#zoom').zoom({url: $(this).attr('data-zoom-image')});
     });
+
     var swiper = new Swiper("#swiper", {
       direction: "vertical",
       slidesPerView: 1,
@@ -302,15 +309,17 @@
       observeParents: true
     });
 
-    var swiper2 = new Swiper("#swiper-2", {
-      slidesPerView: 1,
-      pagination: {
-        el: ".swiper-pagination",
-        clickable: true,
-      },
-      observer: true,
-      observeParents: true
-    });
+    @if (is_mobile())
+      swiperMobile = new Swiper("#swiper-mobile", {
+        slidesPerView: 1,
+        pagination: {
+          el: ".swiper-pagination",
+          clickable: true,
+        },
+        observer: true,
+        observeParents: true
+      });
+    @endif
 
     $(document).ready(function () {
       $('#zoom').trigger('zoom.destroy');