CommonHelper.php 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. <?php
  2. // app/Libraries/CommonHelper.php
  3. namespace App\Libraries;
  4. use Dcat\Admin\Admin;
  5. class CommonHelper
  6. {
  7. /*
  8. * $images 格式:['image.jpg','image2.jpg']
  9. * $ossSource 1:本地 2:相册
  10. * 返回显示的HTML显示图片
  11. */
  12. public static function displayImage($images,$boxSize=60,$imgSize=1024,$ossSource=1)
  13. {
  14. if (empty($images) || empty($images[0])) {
  15. $html = "";
  16. } else {
  17. // 默认显示 100x100 的图片
  18. $thumbnailImages = array_map(function ($imageUrl) use ($boxSize,$ossSource) {
  19. if ($ossSource == 1) {
  20. $imageUrl= CommonHelper::ossUrl($imageUrl);
  21. } else {
  22. $imageUrl= CommonHelper::albumUrl($imageUrl);
  23. }
  24. $extension = pathinfo($imageUrl, PATHINFO_EXTENSION);
  25. if ($extension == 'svg') {
  26. return $imageUrl;
  27. } else {
  28. return $imageUrl . "?x-oss-process=image/resize,m_pad,h_{$boxSize},w_{$boxSize},color_ffffff";
  29. }
  30. }, $images);
  31. // 生成点击查看大图的链接
  32. $largeImages = array_map(function ($imageUrl) use ($imgSize,$ossSource) {
  33. if ($ossSource == 1) {
  34. $imageUrl= CommonHelper::ossUrl($imageUrl);
  35. } else {
  36. $imageUrl= CommonHelper::albumUrl($imageUrl);
  37. }
  38. $extension = pathinfo($imageUrl, PATHINFO_EXTENSION);
  39. if ($extension == 'svg') {
  40. return $imageUrl;
  41. } else {
  42. return $imageUrl . "?x-oss-process=image/resize,m_lfit,w_{$imgSize},h_{$imgSize}";
  43. }
  44. }, $images);
  45. // 显示缩略图,并添加点击查看大图的功能
  46. $html = '';
  47. foreach ($thumbnailImages as $index => $thumbnailUrl) {
  48. $largeUrl = $largeImages[$index];
  49. $html .= "<a href='$largeUrl' target='_blank'><img src='$thumbnailUrl' style='height:{$boxSize}px; margin-right:5px; border: 1px solid #ececf1;'></a>";
  50. }
  51. return $html;
  52. }
  53. return $html;
  54. }
  55. /*
  56. * 返回oss的url
  57. */
  58. public static function ossUrl($imageUrl)
  59. {
  60. if (strpos($imageUrl, 'http:') === 0 || strpos($imageUrl, 'https:') === 0) {
  61. return $imageUrl;
  62. }
  63. if (env('OSS_DOMAIN')) {
  64. return "http://".env('OSS_DOMAIN').'/'.$imageUrl;
  65. }
  66. return "http://".env('OSS_BUCKET').'.'.env('OSS_ENDPOINT').'/'.$imageUrl;
  67. }
  68. /*
  69. * 图库图片URL
  70. */
  71. public static function albumUrl($imageUrl)
  72. {
  73. if (strpos($imageUrl, 'http:') === 0 || strpos($imageUrl, 'https:') === 0) {
  74. return $imageUrl;
  75. }
  76. return env('ALBUM_OSS_URL').'/'.$imageUrl;
  77. }
  78. /*
  79. * 显示视频
  80. */
  81. public static function displayVideo($items,$videoCover,$videoSrc,$boxSize=150,$ossSource=1)
  82. {
  83. $html = '';
  84. if (is_array($items)) {
  85. foreach ($items as $item) {
  86. $item = (array) $item;
  87. $cover = $item[$videoCover];
  88. $src = $item[$videoSrc];
  89. if ($ossSource == 1) {
  90. $videoUrl = CommonHelper::ossUrl($src);
  91. } else {
  92. $videoUrl = CommonHelper::albumUrl($src);
  93. }
  94. $thumbnailUrl = CommonHelper::ossUrl($cover) ."?x-oss-process=image/resize,m_pad,h_{$boxSize},w_{$boxSize},color_ffffff";;
  95. $html .= '<div class="video-container"><a href="#" class="playVideo" videoUrl="'.$videoUrl.'")"><img src="'.$thumbnailUrl.'" alt="Video Thumbnail"><div class="play-button"></div></a></div>';
  96. }
  97. $html .= '<div class="video-popup" id="videoPopup"><span class="close-btn">&times;</span> <iframe src="" frameborder="0" allowfullscreen></iframe></div>';
  98. }
  99. //视频播放CSS
  100. Admin::style("
  101. .video-container {
  102. position: relative;
  103. display: inline-block;
  104. }
  105. .video-container img {
  106. height: 200px;
  107. margin-right: 5px;
  108. border: 1px solid #ececf1;
  109. }
  110. .play-button {
  111. position: absolute;
  112. top: 50%;
  113. left: 50%;
  114. transform: translate(-50%, -50%);
  115. width: 50px;
  116. height: 50px;
  117. background-color: rgba(0, 0, 0, 0.7);
  118. border-radius: 50%;
  119. cursor: pointer;
  120. }
  121. .play-button::after {
  122. content: '▶';
  123. font-size: 30px;
  124. color: white;
  125. position: absolute;
  126. top: 50%;
  127. left: 50%;
  128. transform: translate(-50%, -50%);
  129. }
  130. .video-popup {
  131. display: none;
  132. position: fixed;
  133. top: 50%;
  134. left: 50%;
  135. transform: translate(-50%, -50%);
  136. background-color: white;
  137. padding: 25px;
  138. box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  139. z-index: 1000;
  140. }
  141. .video-popup iframe {
  142. width: 800px;
  143. height: 450px;
  144. }
  145. .close-btn {
  146. position: absolute;
  147. top: 0px;
  148. right: 5px;
  149. font-size: 24px;
  150. color: #000;
  151. cursor: pointer;
  152. }
  153. .close-btn:hover {
  154. color: #f00;
  155. }
  156. ");
  157. Admin::script("
  158. $('.playVideo').on('click', function(e) {
  159. e.preventDefault(); // 阻止默认跳转行为
  160. var videoUrl = $(this).attr('videoUrl'); // 获取 videoUrl 属性
  161. $('#videoPopup').css('display', 'block');
  162. $('#videoPopup iframe').attr('src', videoUrl); // 设置 iframe 的 src
  163. });
  164. // 点击关闭按钮关闭视频
  165. $('.close-btn').on('click', function() {
  166. $('#videoPopup').css('display', 'none');
  167. $('#videoPopup iframe').attr('src', ''); // 停止播放视频
  168. });
  169. ");
  170. return $html; // 当没有数组数据时
  171. }
  172. /*
  173. * 替换新增与编辑的url,在后边加上指定的参数 (适用于弹出框的新增与编辑)
  174. * $addButton = '.tree-quick-create';
  175. * $editButton = '.tree-quick-edit';
  176. * $paramsUrl = 'location=0';
  177. */
  178. public static function replaceAddEditerUrl($addButton,$editButton,$paramsUrl) {
  179. Admin::script(
  180. <<<JS
  181. var button = $('{$addButton}');
  182. var currentUrl = button.attr('data-url');
  183. if (currentUrl.indexOf('?') === -1) {
  184. button.attr('data-url', currentUrl + '?{$paramsUrl}');
  185. } else {
  186. button.attr('data-url', currentUrl + '&{$paramsUrl}');
  187. }
  188. $('{$editButton}').each(function() {
  189. var currentUrl = $(this).attr('data-url');
  190. if (currentUrl.indexOf('?') === -1) {
  191. $(this).attr('data-url', currentUrl + '?{$paramsUrl}');
  192. } else {
  193. // 如果已经有查询参数,添加 &id=123
  194. $(this).attr('data-url', currentUrl + '&{$paramsUrl}');
  195. }
  196. });
  197. JS
  198. );
  199. }
  200. public static function seoReplace($titleName = 'title',$modelName = 'pages')
  201. {
  202. if ($titleName) {
  203. Admin::script(
  204. <<<JS
  205. $('input[name="{$titleName}"]').on('input', function() {
  206. // 将 title 的值赋给 seo_title
  207. $('input[name="seo_title"]').val($(this).val());
  208. });
  209. JS
  210. );
  211. }
  212. //ajax 生成slug
  213. if ($modelName) {
  214. Admin::script(
  215. <<<JS
  216. $('input[name="{$titleName}"]').on('blur', function() {
  217. //通过ajax请求修改slug
  218. title = $(this).val();
  219. $.ajax({
  220. url: '/dist/api/generate-slug',
  221. type: 'GET',
  222. data: {
  223. model:'{$modelName}',
  224. title: title,
  225. },
  226. success: function(response) {
  227. $('input[name="slug"]').val(response.slug);
  228. }
  229. });
  230. });
  231. JS
  232. );
  233. }
  234. }
  235. }