CommonHelper.php 7.1 KB

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