reply_add.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351
  1. {include file="common/header"/}
  2. <style>
  3. .img-box {
  4. position: relative;
  5. overflow: hidden;
  6. width: 230px;
  7. height: 150px;
  8. vertical-align: middle;
  9. text-align: center;
  10. cursor: pointer;
  11. border: 1px #efefed solid;
  12. color: #76838f;
  13. }
  14. .img-box img{
  15. max-width:100% ;
  16. }
  17. .layui-col-md3 {
  18. padding:0 10px;
  19. text-align: center
  20. }
  21. .media-body {
  22. padding: 10px 5px;
  23. border: 1px solid rgb(231, 231, 235);
  24. }
  25. .media-btn {
  26. margin-top: 10px;
  27. text-align: center
  28. }
  29. .media-desc img{
  30. width: 100%;
  31. height: 180px;
  32. }
  33. .mdedia-lists-box {
  34. border-bottom: 1px solid rgb(231, 231, 235);
  35. display: inline-block;
  36. padding: 5px 0 5px 0px;
  37. height: 48px;
  38. width: 100%;
  39. }
  40. .media-img-box img{
  41. width: 100%;
  42. height: 48px;
  43. }
  44. .media-content{
  45. position: relative;
  46. height: 180px;
  47. }
  48. .media-content img{
  49. width: 100%;
  50. height: 180px;
  51. }
  52. .media-desc {
  53. position: absolute;
  54. background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
  55. color: #ffffff;
  56. width: 100%;
  57. bottom: 0;
  58. height: 45px;
  59. text-align: left;
  60. }
  61. </style>
  62. <div class="LM-container">
  63. <div class="LM-main">
  64. <fieldset class="layui-elem-field layui-field-title">
  65. <legend>回复{$title}</legend>
  66. </fieldset>
  67. <form class="layui-form layui-form-pane" lay-filter="form">
  68. <div class="layui-form-item">
  69. <label class="layui-form-label">关键词</label>
  70. <div class="layui-input-inline">
  71. <input type="text" name="keyword" lay-verify="required" placeholder="{:lang('pleaseEnter')}{:lang('keyword')}" class="layui-input">
  72. </div>
  73. </div>
  74. <input type="hidden" name="msg_type" value="text">
  75. <input type="hidden" name="type" value="">
  76. <input type="hidden" name="id" value="">
  77. <input type="hidden" name="material_id" value="">
  78. <div class="layui-form-item">
  79. <label class="layui-form-label">{:lang('status')}</label>
  80. <div class="layui-input-block">
  81. <input type="radio" name="status" lay-filter="required" checked value="1" title="启用">
  82. <input type="radio" name="status" lay-filter="required" value="0" title="禁用">
  83. </div>
  84. </div>
  85. <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  86. <ul class="layui-tab-title">
  87. <li class="layui-this">内容</li>
  88. <li>图片</li>
  89. <li>图文</li>
  90. <li>视频</li>
  91. <li>音频</li>
  92. </ul>
  93. <div class="layui-tab-content" style="padding: 15px;">
  94. <div class="layui-tab-item layui-show text">
  95. <div class="layui-form-item layui-form-text">
  96. <label class="layui-form-label">回复内容</label>
  97. <div class="layui-input-block">
  98. <textarea placeholder="请输入内容" class="layui-textarea" name="data"></textarea>
  99. </div>
  100. </div>
  101. </div>
  102. <div class="layui-tab-item image">
  103. <div class="img-box" id="image">
  104. <img src="/static/admin/images/add-img.png" alt="" style="height:auto;padding-top:40px"> <div class="bottomBar">点击选择</div>
  105. </div>
  106. <div class="layui-row" style="display: none">
  107. {volist name="materialGroup['image']" id="vo"}
  108. <div class="layui-col-md3">
  109. <div class="media-body">
  110. <div class="media-time">
  111. 发布时间:2019-08-12 : 10:38
  112. </div>
  113. <span style="display: block;">
  114. <div class="media-content">
  115. <div class="media-desc"><p class="media-desc-sp"></p></div>
  116. <img class="media-img" width="100%" height="180" src="{$vo.media_url}">
  117. </div>
  118. </span>
  119. <div>
  120. <ul>
  121. </ul>
  122. </div>
  123. <div class="media-item-type2">
  124. <div class="layui-btn-group media-btn">
  125. <a href="javascript:;" onclick="materialSelect(this,'{$vo.id}','image')"
  126. class="layui-btn layui-btn-primary layui-btn-sm">
  127. <i class="layui-icon"></i>选择
  128. </a>
  129. </div>
  130. </div>
  131. </div>
  132. </div>
  133. {/volist}
  134. </div>
  135. </div>
  136. <div class="layui-tab-item news">
  137. <div class="img-box" id="news">
  138. <img src="/static/admin/images/add-img.png" alt="" style="height:auto;padding-top:40px"> <div class="bottomBar">点击选择</div>
  139. </div>
  140. <div class="layui-row" style="display: none">
  141. {volist name="materialGroup['news']" id="vo"}
  142. <div class="layui-col-md3">
  143. <div class="media-body">
  144. <div class="media-time">
  145. 发布时间 {$vo.create_time|date="Y-m-d H:i:s"}
  146. </div>
  147. <span style="display: block;">
  148. <div class="media-content">
  149. <div class="media-desc">
  150. <p class="media-desc-sp">{if isset($vo['item_info'][0]['title'])}{$vo['item_info'][0]['title']}{/if}</p>
  151. </div>
  152. <img class="media-img" src="{if isset($vo['item_info'][0]['cover'])}{$vo['item_info'][0]['cover']}{/if}">
  153. </div>
  154. </span>
  155. <!-- //多图文&ndash;&gt;-->
  156. {if count($vo['item_info'])>1}
  157. <div>
  158. <ul>
  159. {volist name="vo.item_info" id="v" offset='1' }
  160. <li>
  161. <div class="mdedia-lists-box">
  162. <div class="media-title-box layui-col-md9 fl">
  163. {$v.title}
  164. </div>
  165. <div class="media-img-box layui-col-md3 fr">
  166. <img class="media-lists-img" src="{$v.cover}">
  167. </div>
  168. </div>
  169. </li>
  170. {/volist}
  171. </ul>
  172. </div>
  173. {/if}
  174. <div class="media-item-type2">
  175. <div class="layui-btn-group media-btn">
  176. <a href="javascript:;" onclick="materialSelect(this,'{$vo.id}','news')"
  177. class="layui-btn layui-btn-primary layui-btn-sm">
  178. <i class="layui-icon"></i>选择
  179. </a>
  180. </div>
  181. </div>
  182. </div>
  183. </div>
  184. {/volist}
  185. </div>
  186. </div>
  187. <div class="layui-tab-item video">
  188. <div class="img-box" id="video">
  189. <img src="/static/admin/images/add-img.png" alt="" style="height:auto;padding-top:40px"> <div class="bottomBar">点击选择</div>
  190. </div>
  191. <div class="layui-row" style="display: none">
  192. {volist name="materialGroup['video']" id="vo"}
  193. <div class="layui-col-md3">
  194. <div class="media-body">
  195. <div class="media-time">
  196. 发布时间 {$vo.create_time|date="Y-m-d H:i:s"}
  197. </div>
  198. <span style="display: block;">
  199. <div class="media-content">
  200. <div class="media-desc">
  201. <p class="media-desc-sp"></p>
  202. </div>
  203. <div style="font-size: 50px;height: 180px;line-height:180px;text-align: center">
  204. <i class="fa fa-play-circle-o"></i>
  205. </div>
  206. </div>
  207. </span>
  208. <!-- //多图文&ndash;&gt;-->
  209. <div class="media-item-type2">
  210. <div class="layui-btn-group media-btn">
  211. <a href="javascript:;" onclick="materialSelect(this,'{$vo.id}','video')"
  212. class="layui-btn layui-btn-primary layui-btn-sm">
  213. <i class="layui-icon"></i>选择
  214. </a>
  215. </div>
  216. </div>
  217. </div>
  218. </div>
  219. {/volist}
  220. </div>
  221. </div>
  222. <div class="layui-tab-item voice">
  223. <div class="img-box" id="voice">
  224. <img src="/static/admin/images/add-img.png" alt="" style="height:auto;padding-top:40px"> <div class="bottomBar">点击选择</div>
  225. </div>
  226. <div class="layui-row" style="display: none">
  227. {volist name="materialGroup['voice']" id="vo"}
  228. <div class="layui-col-md3">
  229. <div class="media-body">
  230. <div class="media-time">
  231. 发布时间 {$vo.create_time|date="Y-m-d H:i:s"}
  232. </div>
  233. <span style="display: block;">
  234. <div class="media-content">
  235. <div class="media-desc">
  236. <p class="media-desc-sp"></p>
  237. </div>
  238. <audio class="media-img" src="{$vo.media_url}"></audio>
  239. </div>
  240. </span>
  241. <!-- //多图文&ndash;&gt;-->
  242. <div class="media-item-type2">
  243. <div class="layui-btn-group media-btn">
  244. <a href="javascript:;" onclick="materialSelect(this,'{$vo.id}','video')"
  245. class="layui-btn layui-btn-primary layui-btn-sm">
  246. <i class="layui-icon"></i>选择
  247. </a>
  248. </div>
  249. </div>
  250. </div>
  251. </div>
  252. {/volist}
  253. </div>
  254. </div>
  255. </div>
  256. </div>
  257. <div class="layui-form-item">
  258. <div class="layui-input-inline">
  259. <input type="hidden" name="id" >
  260. <button type="button" class="layui-btn" lay-submit="" lay-filter="submit">{:lang('submit')}</button>
  261. <a href="{:url('reply')}" class="layui-btn layui-btn-primary">{:lang('back')}</a>
  262. </div>
  263. </div>
  264. </form>
  265. </div>
  266. </div>
  267. <script type="text/html" id="action">
  268. <a href="{:url('replyEdit')}?id={{d.id}}" class="layui-btn layui-btn-xs" lay-event="edit">{:lang('edit')}</a>
  269. <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">{:lang('del')}</a>
  270. </script>
  271. <script type="text/html" id="create_time">
  272. {{layui.util.toDateString(d.create_time*1000, 'yyyy-MM-dd HH:mm:ss')}}
  273. </script>
  274. <script type="text/html" id="update_time">
  275. {{layui.util.toDateString(d.update_time*1000, 'yyyy-MM-dd HH:mm:ss')}}
  276. </script>
  277. {include file="common/footer"/}
  278. <script>
  279. var $='';
  280. var layer;
  281. var index='';
  282. layui.use(['form', 'table','element','layer'], function () {
  283. var form = layui.form,
  284. layer = layui.layer,
  285. table = layui.table,
  286. element = layui.element;
  287. $ = layui.jquery;
  288. var info = {:json_encode($info)};
  289. form.val('form',info)
  290. form.on('submit(submit)', function(data){
  291. loading =layer.load(1, {shade: [0.1,'#fff']});
  292. $.post('{:url("")}',data.field,function(res){
  293. layer.close(loading);
  294. if(res.code>0){
  295. layer.msg(res.msg,{time:1000,icon:1});
  296. }else{
  297. layer.msg(res.msg,{time:1000,icon:2});
  298. }
  299. });
  300. });
  301. $('.img-box').click(function (e) {
  302. index = layer.open({
  303. type: 1,
  304. content: $(this).next('.layui-row'),
  305. area: ['800px', '600px'],
  306. anim: 2,
  307. maxmin: true,
  308. });
  309. })
  310. });
  311. function materialSelect(obj,id,type) {
  312. var src = $(obj).parents('.layui-tab-item').find('.media-img').attr('src');
  313. console.log(src);
  314. $("input[name='material_id']").val(id)
  315. $("input[name='msg_type']").val(type)
  316. $(obj).parents('.layui-tab-item').find('.img-box').find('img').attr('src',src);
  317. layer.close(index);
  318. }
  319. </script>