feat:产品缩图公共函数

app/Libraries/CommonHelper.php

@@ -10,20 +10,45 @@ class CommonHelper
      * $images 格式：['image.jpg','image2.jpg']
      * 返回显示的HTML显示图片
      */
-    public static function displayImage($images,$boxSize=100,$imgSize=350)
+    public static function displayImage($images,$boxSize=60,$imgSize=1024)
     {
         if (empty($images) || empty($images[0])) {
             $html = "";
         } else {
-            //默认用等比例缩放
-            $process = "?x-oss-process=image/resize,h_{$imgSize},m_lfit";
-            $html = '<div style="display: flex; flex-wrap: wrap; gap: 5px;">';
-            foreach ($images as $image) {
-                $html .= "<div style='width: {$boxSize}px; height: {$boxSize}px; padding: 3px; border: 1px solid #ddd; border-radius: 3px; background-color: #f9f9f9; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center;'>
-                    <img  data-action='preview-img'   src='" . self::ossUrl($image).$process . "' style='max-width: 100%; max-height: 100%; object-fit: contain;'>
-                  </div>";
+
+
+            // 默认显示 100x100 的图片
+            $thumbnailImages = array_map(function ($imageUrl) use ($boxSize) {
+                $imageUrl= CommonHelper::ossUrl($imageUrl);
+
+                return $imageUrl . "?x-oss-process=image/resize,m_lfit,h_{$boxSize}";
+            }, $images);
+
+            // 生成点击查看大图的链接
+            $largeImages = array_map(function ($imageUrl) use ($imgSize) {
+                $imageUrl= CommonHelper::ossUrl($imageUrl);
+                return $imageUrl . "?x-oss-process=image/resize,m_lfit,w_{$imgSize},h_{$imgSize}";
+            }, $images);
+
+            // 显示缩略图，并添加点击查看大图的功能
+            $html = '';
+            foreach ($thumbnailImages as $index => $thumbnailUrl) {
+                $largeUrl = $largeImages[$index];
+                $html .= "<a href='$largeUrl' target='_blank'><img src='$thumbnailUrl' style='height:{$boxSize}px; margin-right:5px;'></a>";
             }
-            $html .= '</div>';
+
+            return $html;
+
+//
+//            //默认用等比例缩放
+//            $process = "?x-oss-process=image/resize,h_{$imgSize},m_lfit";
+//            $html = '<div style="display: flex; flex-wrap: wrap; gap: 5px;">';
+//            foreach ($images as $image) {
+//                $html .= "<div style='width: {$boxSize}px; height: {$boxSize}px; padding: 3px; border: 1px solid #ddd; border-radius: 3px; background-color: #f9f9f9; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center;'>
+//                    <img  data-action='preview-img'   src='" . self::ossUrl($image).$process . "' style='max-width: 100%; max-height: 100%; object-fit: contain;'>
+//                  </div>";
+//            }
+//            $html .= '</div>';
         }
         return $html;
     }