CommonHelper.php 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  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)
  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. $videoUrl = CommonHelper::ossUrl($src);
  90. $thumbnailUrl = CommonHelper::ossUrl($cover) ."?x-oss-process=image/resize,m_pad,h_{$boxSize},w_{$boxSize},color_ffffff";;
  91. $html .= '<div class="video-container"><a href="#" class="playVideo" videoUrl="'.$videoUrl.'")"><img src="'.$thumbnailUrl.'" alt="Video Thumbnail"><div class="play-button"></div></a></div>';
  92. }
  93. $html .= '<div class="video-popup" id="videoPopup"><span class="close-btn">&times;</span> <iframe src="" frameborder="0" allowfullscreen></iframe></div>';
  94. }
  95. //视频播放CSS
  96. Admin::style("
  97. .video-container {
  98. position: relative;
  99. display: inline-block;
  100. }
  101. .video-container img {
  102. height: 200px;
  103. margin-right: 5px;
  104. border: 1px solid #ececf1;
  105. }
  106. .play-button {
  107. position: absolute;
  108. top: 50%;
  109. left: 50%;
  110. transform: translate(-50%, -50%);
  111. width: 50px;
  112. height: 50px;
  113. background-color: rgba(0, 0, 0, 0.7);
  114. border-radius: 50%;
  115. cursor: pointer;
  116. }
  117. .play-button::after {
  118. content: '▶';
  119. font-size: 30px;
  120. color: white;
  121. position: absolute;
  122. top: 50%;
  123. left: 50%;
  124. transform: translate(-50%, -50%);
  125. }
  126. .video-popup {
  127. display: none;
  128. position: fixed;
  129. top: 50%;
  130. left: 50%;
  131. transform: translate(-50%, -50%);
  132. background-color: white;
  133. padding: 25px;
  134. box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  135. z-index: 1000;
  136. }
  137. .video-popup iframe {
  138. width: 800px;
  139. height: 450px;
  140. }
  141. .close-btn {
  142. position: absolute;
  143. top: 0px;
  144. right: 5px;
  145. font-size: 24px;
  146. color: #000;
  147. cursor: pointer;
  148. }
  149. .close-btn:hover {
  150. color: #f00;
  151. }
  152. ");
  153. Admin::script("
  154. $('.playVideo').on('click', function(e) {
  155. e.preventDefault(); // 阻止默认跳转行为
  156. var videoUrl = $(this).attr('videoUrl'); // 获取 videoUrl 属性
  157. $('#videoPopup').css('display', 'block');
  158. $('#videoPopup iframe').attr('src', videoUrl); // 设置 iframe 的 src
  159. });
  160. // 点击关闭按钮关闭视频
  161. $('.close-btn').on('click', function() {
  162. $('#videoPopup').css('display', 'none');
  163. $('#videoPopup iframe').attr('src', ''); // 停止播放视频
  164. });
  165. ");
  166. return $html; // 当没有数组数据时
  167. }
  168. /*
  169. * 替换新增与编辑的url,在后边加上指定的参数 (适用于弹出框的新增与编辑)
  170. * $addButton = '.tree-quick-create';
  171. * $editButton = '.tree-quick-edit';
  172. * $paramsUrl = 'location=0';
  173. */
  174. public static function replaceAddEditerUrl($addButton,$editButton,$paramsUrl) {
  175. Admin::script(
  176. <<<JS
  177. var button = $('{$addButton}');
  178. var currentUrl = button.attr('data-url');
  179. if (currentUrl.indexOf('?') === -1) {
  180. button.attr('data-url', currentUrl + '?{$paramsUrl}');
  181. } else {
  182. button.attr('data-url', currentUrl + '&{$paramsUrl}');
  183. }
  184. $('{$editButton}').each(function() {
  185. var currentUrl = $(this).attr('data-url');
  186. if (currentUrl.indexOf('?') === -1) {
  187. $(this).attr('data-url', currentUrl + '?{$paramsUrl}');
  188. } else {
  189. // 如果已经有查询参数,添加 &id=123
  190. $(this).attr('data-url', currentUrl + '&{$paramsUrl}');
  191. }
  192. });
  193. JS
  194. );
  195. }
  196. public static function seoReplace($titleName = 'title',$modelName = 'pages')
  197. {
  198. if ($titleName) {
  199. Admin::script(
  200. <<<JS
  201. $('input[name="{$titleName}"]').on('input', function() {
  202. // 将 title 的值赋给 seo_title
  203. $('input[name="seo_title"]').val($(this).val());
  204. });
  205. JS
  206. );
  207. }
  208. //ajax 生成slug
  209. if ($modelName) {
  210. Admin::script(
  211. <<<JS
  212. $('input[name="{$titleName}"]').on('blur', function() {
  213. //通过ajax请求修改slug
  214. title = $(this).val();
  215. $.ajax({
  216. url: '/dist/api/generate-slug',
  217. type: 'GET',
  218. data: {
  219. model:'{$modelName}',
  220. title: title,
  221. },
  222. success: function(response) {
  223. $('input[name="slug"]').val(response.slug);
  224. }
  225. });
  226. });
  227. JS
  228. );
  229. }
  230. }
  231. }