edit.html 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. {extend name="public/layout" /} {block name="title"}创建直播{/block} {block name="body"}
  2. <link rel="stylesheet" href="__STATIC__/css/csspc.css">
  3. <style type="text/css">
  4. html {
  5. background: #fff;
  6. }
  7. body {
  8. min-width: 320px;
  9. }
  10. @media screen and (max-width: 450px) {
  11. .layui-form-item {
  12. width: 100%;
  13. }
  14. }
  15. .addlistli .layui-form-label{width:130px;}
  16. .addlistli .layui-input-inline{width:60%;}
  17. .addlistli .layui-form-select{width: 100%;}
  18. </style>
  19. <body>
  20. <form class="layui-form">
  21. <div class="layui-form-item mdt20 addlistli">
  22. <label class="layui-form-label"><i style="color:red;">*&nbsp;</i>直播名称 :</label>
  23. <div class="layui-input-inline">
  24. <input type="text" name="name" lay-verify="required" placeholder="请输入直播名称" autocomplete="off" class="layui-input" value="{$data.name}">
  25. </div>
  26. </div>
  27. <div class="layui-form-item mdt20 addlistli">
  28. <label class="layui-form-label"><i style="color:red;">*&nbsp;</i>直播人员 :</label>
  29. <div class="layui-input-inline">
  30. <select class="width100_" name="lecturer_id" id="label" lay-verify="required" lay-filter="type" lay-search>
  31. <option value="">请选择直播人员</option>
  32. {volist name="employee" id="v"}
  33. <option value="{$v.id}" {if condition="$data.lecturer_id eq $v.id"}selected{/if}>{$v.name}</option>
  34. {/volist}
  35. </select>
  36. </div>
  37. </div>
  38. <div class="layui-form-item mdt20 addlistli">
  39. <label class="layui-form-label"><i style="color:red;">*&nbsp;</i>直播时间 :</label>
  40. <div class="layui-input-inline wpsr" style="border:1px solid #e6e6e6;width:60%;">
  41. <input type="text" class="layui-input bor0" name="start_date" id="livedate" placeholder="开始时间 - 结束时间" autocomplete="off" class="layui-input" value="{$data.start_date} 00:00:00 - {$data.end_date} 00:00:00">
  42. <img src="__STATIC__/img/bg-calendar.png" alt="日历" width="14px" height="14px" class="wleft mdt12 mdr02_">
  43. </div>
  44. </div>
  45. <div class="layui-form-item mdt20 addlistli">
  46. <label class="layui-form-label"><i style="color:red;">*&nbsp;</i>直播类型 :</label>
  47. <div class="layui-input-block ">
  48. <input type="radio" name="broadcast_type" lay-filter="cate" value="1" title="威哥直播" {if condition="$data.broadcast_type eq 1"}checked{/if}>
  49. <input type="radio" name="broadcast_type" lay-filter="cate" value="0" title="直播" {if condition="$data.broadcast_type eq 0"}checked{/if}>
  50. </div>
  51. </div>
  52. <div class="layui-form-item mdt20 addlistli">
  53. <label class="layui-form-label"><i style="color:red;">*&nbsp;</i>直播平台 :</label>
  54. <div class="layui-input-block ">
  55. <input type="radio" name="broadcast_platform" lay-filter="cate" value="0" title="boss直播" {if condition="$data.broadcast_platform eq 0"}checked{/if}>
  56. <input type="radio" name="broadcast_platform" lay-filter="cate" value="1" title="其它平台" {if condition="$data.broadcast_platform eq 1"}checked{/if}>
  57. </div>
  58. </div>
  59. <div class="layui-form-item mdt20 addlistli">
  60. <label class="layui-form-label"><i style="color:red;">*&nbsp;</i>直播链接 :</label>
  61. <div class="layui-input-inline">
  62. <input type="text" name="broadcast_url" lay-verify="required" placeholder="请输入直播链接" autocomplete="off" class="layui-input" value="{$data.broadcast_url}">
  63. </div>
  64. </div>
  65. <div class="layui-form-item mdt20 addlistli">
  66. <label class="layui-form-label"><span style="color: red;">*</span>直播封面 :</label>
  67. <div class="layui-input-inline" id="upload-drag0">
  68. {if condition="$data.broadcast_cover"}
  69. <img src="{$data.broadcast_cover}" width="383px" height="114px">
  70. {else /}
  71. <div class="layui-upload-drag">
  72. <i class="layui-icon">&#xe681;</i>
  73. <p>选择封面图片</p>
  74. </div>
  75. {/if}
  76. </div>
  77. <div class="clear"></div>
  78. <div class="mdl130 mdt10">
  79. <i style="color: #FF5722;">* </i>建议上传图片宽高比例5:3,图片大小不超过1M
  80. </div>
  81. </div>
  82. <input type="hidden" value="{$data.id}" name="id">
  83. <div class="layui-form-item mdt80 mdb30 addlistli">
  84. <input type="button" lay-submit class="layui-btn layui-btn-normal width20_ wright mdr10_" lay-filter="live_submit" id="live_submit" value="确认添加">
  85. </div>
  86. </form>
  87. </body>
  88. {/block} {block name="js"}
  89. <script>
  90. layui.config({
  91. base: '__LAYUI__/',
  92. urlbase: '/sys'
  93. }).extend({
  94. index: 'lib/index' //主入口模块
  95. }).use(['index', 'form', 'upload', 'layedit', 'laydate'], function () {
  96. var form = layui.form,
  97. upload = layui.upload,
  98. layedit = layui.layedit,
  99. laydate = layui.laydate,
  100. $ = layui.jquery;
  101. form.render();
  102. laydate.render({
  103. elem: '#livedate'
  104. ,type: 'datetime'
  105. ,range: true
  106. ,trigger: 'click'//呼出事件改成click
  107. });
  108. /* 监听提交 */
  109. form.on('submit(live_submit)', function (obj) {
  110. var index = parent.layer.getFrameIndex(window.name);
  111. var formData = new FormData(obj.form);
  112. var cover = '';
  113. let cover_file = "{$data.broadcast_cover}";
  114. formData.forEach((value, key) => {
  115. if (key == 'broadcast_cover') {
  116. cover = value;
  117. }
  118. })
  119. if (!obj.field.start_date) {
  120. layer.msg('请选择直播时间', {
  121. anim: 6
  122. , time: 2000
  123. });
  124. return false;
  125. }
  126. if (cover.name == '' && !cover_file) {
  127. layer.msg('请选择直播封面', {
  128. anim: 6
  129. , time: 2000
  130. });
  131. return false;
  132. }
  133. if (cover.name == '' && cover_file) {
  134. formData.set('broadcast_cover', cover_file)
  135. }
  136. // 单击之后提交按钮不可选,防止重复提交
  137. $.ajax({
  138. url: '{:url("boss/editActivity")}',
  139. type: 'post',
  140. data: formData,
  141. dataType: 'json',
  142. processData: false,
  143. contentType: false,
  144. success: function (res) {
  145. if (res.code === 0) {
  146. var DISABLED = 'layui-btn-disabled';
  147. var target = '#activity-submit';
  148. $(target).addClass(DISABLED);
  149. $(target).attr('disabled', 'disabled');
  150. layer.msg(res.msg, {
  151. anim: 0
  152. , time: 2000
  153. }, function () {
  154. parent.layui.table.reload('company-activity'); //重载表格
  155. parent.layer.close(index); //再执行关闭
  156. });
  157. } else {
  158. layer.msg(res.msg, {
  159. anim: 6
  160. , time: 2000
  161. });
  162. }
  163. }
  164. });
  165. return false;
  166. });
  167. //拖拽上传
  168. upload.render({
  169. elem: '#upload-drag0',
  170. accept: 'image',
  171. exts: 'jpg|png|bmp|jpeg|JPG|PNG|BMP|JPEG',
  172. auto: false,
  173. field: 'broadcast_cover',
  174. size: 1 * 1024,
  175. choose: function (obj) {
  176. obj.preview(function (index, file, result) {
  177. $('#upload-drag0').html('<img src="' + result + '" style="width:355px !important;height:160px !important;">');
  178. });
  179. }
  180. });
  181. form.on('radio(type)', function (data) {
  182. if (data.value == 1) {
  183. $('#money').addClass('layui-hide');
  184. } else {
  185. $('#money').removeClass('layui-hide');
  186. }
  187. });
  188. });
  189. </script>
  190. {/block}