产品导入修改

app/Distributor/Controllers/ImportProductController.php

@@ -261,12 +261,12 @@ JS
             if ($show->model()->en_detail && $show->model()->en_detail != '[]') {
                 $show->field('en_detail')->as(function ($images) {
                     $images = json_decode($images);
-                    $html = '<div style="text-align: center">';
+                    $html = '';
                     foreach ($images as $key => $image) {
                         $url = CommonHelper::albumUrl($image);
-                        $html .= '<img src="' . $url . '" style="max-width:90%;margin-bottom:10px">';
+                        $html .= '<img src="' . $url . '" style="width:300px;margin-bottom:10px">';
                     }
-                    $html .= '</div>';
+                    $html .= '';
                     return $html;
                 })->unescape();
             }
@@ -277,7 +277,7 @@ JS
                     $html = '<div style="text-align: center">';
                     foreach ($images as $key => $image) {
                         $url = CommonHelper::albumUrl($image);
-                        $html .= '<img src="' . $url . '" style="max-width:90%;margin-bottom:10px">';
+                        $html .= '<img src="' . $url . '" style="width:300px;margin-bottom:10px">';
                     }
                     $html .= '</div>';
                     return $html;

app/Libraries/CommonHelper.php

@@ -442,9 +442,9 @@ border-bottom: 1px solid #e1e8ea;
     border-radius: 8px;
 }
 
-.download-wrapper:hover img {
-    transform: scale(1.04);
-}
+/*.download-wrapper:hover img {*/
+/*    transform: scale(1.04);*/
+/*}*/
 
 
    /* 新增全屏样式 */
@@ -487,50 +487,65 @@ Admin::script(
         const fullscreenImage = $('.fullscreen-image');
 
    function initDownloadButtons() {
-    $('.box-body').find("img").each(function() {
-        // 新增判断：如果父元素是<a>或已有download-wrapper则跳过
-        if ($(this).parent().hasClass('download-wrapper') || $(this).parent().is('a')) return;
-        if ($(this).hasClass('fullscreen-image') || $(this).hasClass('video-thumbnail')) {
-            return;
-        }
-        const fileName = this.src.split('/').pop().split('?')[0];
-
-        $(this).wrap('<div class="download-wrapper"></div>')
-            .after(`<div class="download-hover">
-                                 <button class="download-btn" title="下载">
-                                   <i class="feather icon-download"></i>
-                                 </button>
-                                 <button class="download-btn zoom-btn" title="放大">
-                                   <i class="feather icon-zoom-in"></i>
-                                 </button>
-                               </div>`);
-
-        const \$btn = $(this).parent().find('.download-btn').first();
-        \$btn.click(function() {
-            const btn = $(this);
-            btn.addClass('disabled');
-
-            downloadImage(
-                btn.closest('.download-wrapper').find('img')[0].src,
-                fileName
-            ).finally(() => btn.removeClass('disabled'));
-        });
+        $('.box-body').find("img").each(function() {
+            // 新增判断：如果父元素是<a>或已有download-wrapper则跳过
+            if ($(this).parent().hasClass('download-wrapper') || $(this).parent().is('a')) return;
+            if ($(this).hasClass('fullscreen-image') || $(this).hasClass('video-thumbnail')) {
+                return;
+            }
+            const fileName = this.src.split('/').pop().split('?')[0];
+
+            $(this).wrap('<div class="download-wrapper"></div>')
+                .after(`<div class="download-hover">
+                                     <button class="download-btn" title="下载">
+                                       <i class="feather icon-download"></i>
+                                     </button>
+                                     <button class="download-btn zoom-btn" title="放大">
+                                       <i class="feather icon-zoom-in"></i>
+                                     </button>
+                                   </div>`);
+
+            const \$btn = $(this).parent().find('.download-btn').first();
+            \$btn.click(function() {
+                const btn = $(this);
+                btn.addClass('disabled');
+
+                downloadImage(
+                    btn.closest('.download-wrapper').find('img')[0].src,
+                    fileName
+                ).finally(() => btn.removeClass('disabled'));
+            });
 
-                        // 全屏放大功能
-                $(this).next().find('.zoom-btn').click(function() {
-                    let imgSrc = $(this).closest('.download-wrapper').find('img').attr('src');
-                    imgSrc = imgSrc.replace(/\?.*$/, '');
-                    fullscreenImage.attr('src', imgSrc);
-                    fullscreenOverlay.fadeIn(200);
-                });
+            var checkImageLoaded = function(img, callback) {
+                const timer = setInterval(() => {
+                    if (img.complete || img.naturalWidth > 0) {
+                        clearInterval(timer);
+                        callback();
+                    }
+                }, 50);
+            }
 
-    });
-}
+            // 全屏放大功能
+                    $(this).next().find('.zoom-btn').click(function() {
+                        Dcat.loading();
+                        let imgSrc = $(this).closest('.download-wrapper').find('img').attr('src');
+                        imgSrc = imgSrc.replace(/\?.*$/, '');
+                        fullscreenImage.attr('src', imgSrc);
+                        fullscreenOverlay.fadeIn(200);
+                        checkImageLoaded(fullscreenImage[0], () => {
+                            Dcat.loading(false);
+                        });
+                    });
+        });
+    }
 
         // 关闭全屏
         fullscreenOverlay.click(function(e) {
-            if (e.target === this) $(this).fadeOut(200);
-            fullscreenImage.attr('src', '');
+            if (e.target === this) {
+                Dcat.loading(false);
+                $(this).fadeOut(200);
+                fullscreenImage.attr('src', '');
+            }
         });
 
 function downloadImage(url, filename) {
@@ -543,7 +558,6 @@ function downloadImage(url, filename) {
             })
             .then(blob => {
                 const blobUrl = URL.createObjectURL(blob);
-                console.log(blobUrl);
                 const link = document.createElement('a');
                 link.href = blobUrl;
                 link.download = filename || 'image.jpg';