优化商品筛选和相关商品等ui

resources/beike/shop/default/css/bootstrap/bootstrap.scss

@@ -100,13 +100,6 @@ $form-feedback-icon-valid-color: inherit;
   border-radius: 0;
 }
 
-// .btn.btn-dark {
-//   &:hover {
-//     background-color: #fff;
-//     color: #212529;
-//   }
-// }
-
 .card {
   // box-shadow: rgba(0, 0, 0, .1) 0px 1px 4px 0px;
   // border: none;

resources/beike/shop/default/css/page-product.scss

@@ -259,4 +259,13 @@ body.page-product {
       }
     }
   }
+
+  .relations-wrap {
+    .swiper-pagination {
+      .swiper-pagination-bullet {
+        height: 3px;
+        border-radius: 0;
+      }
+    }
+  }
 }

resources/beike/shop/default/js/common.js

@@ -41,6 +41,7 @@ export default {
     const btnHtml = $btn.html();
     const loadHtml = '<span class="spinner-border spinner-border-sm"></span>';
     $btn.html(loadHtml).prop('disabled', true);
+    $(document).find('.tooltip').remove();
 
     $http.post('/carts', {sku_id, quantity, buy_now: isBuyNow}, {hload: !!event}).then((res) => {
       this.getCarts();
@@ -61,6 +62,7 @@ export default {
     const btnHtml = $btn.html();
     const isWishlist = $btn.attr('data-in-wishlist') * 1;
     const loadHtml = '<span class="spinner-border spinner-border-sm"></span>';
+    $(document).find('.tooltip').remove();
 
     if (isWishlist) {
       $btn.html(loadHtml).prop('disabled', true);

themes/default/category.blade.php

@@ -30,18 +30,17 @@
           </ul>
         </div>
 
-        @include('shared.filter_bar_block')
-
         @if (count($products_format))
-        <div class="row {{ request('style_list') == 'list' ? 'product-list-wrap' : ''}}">
+          @include('shared.filter_bar_block')
-          @foreach ($products_format as $product)
+          <div class="row {{ request('style_list') == 'list' ? 'product-list-wrap' : ''}}">
-            <div class="{{ !request('style_list') || request('style_list') == 'grid' ? 'col-6 col-md-4' : 'col-12'}}">
+            @foreach ($products_format as $product)
-              @include('shared.product')
+              <div class="{{ !request('style_list') || request('style_list') == 'grid' ? 'col-6 col-md-4' : 'col-12'}}">
-            </div>
+                @include('shared.product')
-          @endforeach
+              </div>
-        </div>
+            @endforeach
-        @else
+          </div>
-        <x-shop-no-data />
+          @else
+          <x-shop-no-data />
         @endif
       </div>
     </div>

themes/default/design/slideshow.blade.php

@@ -15,9 +15,9 @@
           </div>
         @endforeach
       </div>
-      <div class="swiper-pagination"></div>
+      <div class="swiper-pagination slideshow-pagination-{{ $module_id }}"></div>
-      <div class="swiper-button-prev"></div>
+      <div class="swiper-button-prev slideshow-btnprev-{{ $module_id }}"></div>
-      <div class="swiper-button-next"></div>
+      <div class="swiper-button-next slideshow-btnnext-{{ $module_id }}"></div>
     </div>
   </div>
 
@@ -30,13 +30,14 @@
 
       // 如果需要分页器
       pagination: {
-        el: '.swiper-pagination',
+        el: '.slideshow-pagination-{{ $module_id }}',
+        clickable :true
       },
 
       // 如果需要前进后退按钮
       navigation: {
-        nextEl: '.swiper-button-next',
+        nextEl: '.slideshow-btnnext-{{ $module_id }}',
-        prevEl: '.swiper-button-prev',
+        prevEl: '.slideshow-btnprev-{{ $module_id }}',
       },
     })
   </script>

themes/default/product.blade.php

@@ -44,7 +44,7 @@
                   <img :src="image.preview" class="img-fluid">
                 </div>
               </div>
-              <div class="swiper-pagination"></div>
+              <div class="swiper-pagination mobile-pagination"></div>
             </div>
           @endif
         </div>
@@ -181,6 +181,7 @@
               @endforeach
             </div>
           </div>
+          <div class="swiper-pagination relations-pagination"></div>
           <div class="swiper-button-prev relations-swiper-prev"></div>
           <div class="swiper-button-next relations-swiper-next"></div>
         </div>
@@ -350,6 +351,7 @@
     });
 
     var relationsSwiper = new Swiper ('.relations-swiper', {
+      watchSlidesProgress: true,
       breakpoints:{
         320: {
           slidesPerView: 2,
@@ -366,14 +368,19 @@
         nextEl: '.relations-swiper-next',
         prevEl: '.relations-swiper-prev',
       },
+
+      // 如果需要分页器
+      pagination: {
+        el: '.relations-pagination',
+        clickable: true,
+      },
     })
 
     @if (is_mobile())
       swiperMobile = new Swiper("#swiper-mobile", {
         slidesPerView: 1,
         pagination: {
-          el: ".swiper-pagination",
+          el: ".mobile-pagination",
-          clickable: true,
         },
         observer: true,
         observeParents: true