!103 Fix that the slideshow module swiper plugin cannot be loaded for the first time

* Fix that the slideshow module swiper plugin cannot be loaded for the first time

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

@@ -3,7 +3,7 @@
  * @link          https://beikeshop.com
  * @Author        pu shuo <pushuo@guangda.work>
  * @Date          2022-09-09 19:16:39
- * @LastEditTime  2023-02-13 09:26:05
+ * @LastEditTime  2023-05-17 13:49:44
  */
 
 export default {
@@ -129,4 +129,35 @@ export default {
     + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft
     + ',toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no');
   },
+
+  // 判断 js 插件是否加载，如果未加载则往页面添加 script 标签
+  loadScript(url, callback) {
+    // 判断页面中是否已经存在指定的 js 插件
+    if (!document.querySelector(`script[src="${url}"]`)) {
+      // 创建一个新的 script 标签
+      const script = document.createElement('script');
+      script.src = url;
+      // 将 script 标签添加到 head 标签中
+      document.head.appendChild(script);
+      // 监听 js 插件加载完成事件
+      script.onload = function () {
+        callback && callback();
+      }
+    } else {
+      callback && callback();
+    }
+  },
+
+  // 判断 css 插件是否加载，如果未加载则往页面添加 link 标签
+  loadStyle(url) {
+    // 判断页面中是否已经存在指定的 css 插件
+    if (!document.querySelector(`link[href="${url}"]`)) {
+      // 创建一个新的 link 标签
+      const link = document.createElement('link');
+      link.href = url;
+      link.rel = 'stylesheet';
+      // 将 link 标签添加到 head 标签中
+      document.head.appendChild(link);
+    }
+  }
 }

themes/default/design/slideshow.blade.php

@@ -1,8 +1,3 @@
-@push('header')
-  <script src="{{ asset('vendor/swiper/swiper-bundle.min.js') }}"></script>
-  <link rel="stylesheet" href="{{ asset('vendor/swiper/swiper-bundle.min.css') }}">
-@endpush
-
 <section class="module-item {{ $design ? 'module-item-design' : ''}}" id="module-{{ $module_id }}">
   @include('design._partial._module_tool')
 
@@ -10,9 +5,10 @@
     <div class="swiper module-swiper-{{ $module_id }} module-slideshow">
       <div class="swiper-wrapper">
         @foreach($content['images'] as $image)
-          <div class="swiper-slide">
+        <div class="swiper-slide">
-            <a href="{{ $image['link']['link'] ?: 'javascript:void(0)' }}" class="d-flex justify-content-center"><img src="{{ $image['image'] }}" class="img-fluid"></a>
+          <a href="{{ $image['link']['link'] ?: 'javascript:void(0)' }}" class="d-flex justify-content-center"><img
-          </div>
+              src="{{ $image['image'] }}" class="img-fluid"></a>
+        </div>
         @endforeach
       </div>
       <div class="swiper-pagination slideshow-pagination-{{ $module_id }}"></div>
@@ -22,26 +18,26 @@
   </div>
 
   <script>
-    new Swiper ('.module-swiper-{{ $module_id }}', {
+    bk.loadStyle('{{ asset('vendor/swiper/swiper-bundle.min.css') }}');
-      loop: '{{ count($content['images']) > 1 ? true : false }}', // 循环模式选项
+    bk.loadScript('{{ asset('vendor/swiper/swiper-bundle.min.js') }}', () => {
-      autoplay: true,
+      new Swiper ('.module-swiper-{{ $module_id }}', {
-      pauseOnMouseEnter: true,
+        loop: '{{ count($content['images']) > 1 ? true : false }}', // 循环模式选项
-      clickable :true,
+        autoplay: true,
+        pauseOnMouseEnter: true,
+        clickable :true,
 
-      // 如果需要分页器
+        // 如果需要分页器
-      pagination: {
+        pagination: {
-        el: '.slideshow-pagination-{{ $module_id }}',
+          el: '.slideshow-pagination-{{ $module_id }}',
-        clickable :true
+          clickable :true
-      },
+        },
 
-      // 如果需要前进后退按钮
+        // 如果需要前进后退按钮
-      navigation: {
+        navigation: {
-        nextEl: '.slideshow-btnnext-{{ $module_id }}',
+          nextEl: '.slideshow-btnnext-{{ $module_id }}',
-        prevEl: '.slideshow-btnprev-{{ $module_id }}',
+          prevEl: '.slideshow-btnprev-{{ $module_id }}',
-      },
+        },
+      })
     })
   </script>
-</section>
+</section>
-
-
-