edit_article.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
  1. {include file="public/header" /}
  2. <body class="gray-bg">
  3. <div class="layui-fluid layui-col-md12">
  4. <div class="layui-card">
  5. <div class="layui-card-body layui-form">
  6. <div class="layui-row layui-col-space10 layui-form-item ">
  7. <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
  8. <label class="layui-form-label">标题</label>
  9. <div class="layui-input-block">
  10. <input type="text" class="layui-input" name="title" lay-verify="required" placeholder="文章标题">
  11. </div>
  12. </div>
  13. <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
  14. <label class="layui-form-label">所属分类</label>
  15. <div class="layui-input-block">
  16. <select name="cate_id" lay-verify="required" lay-search="">
  17. <option value="">请选择分类</option>
  18. {if !empty($cate)}
  19. {foreach name="cate" item="vo"}
  20. <option value="{$vo.id}">{$vo.name}</option>
  21. {/foreach}
  22. {/if}
  23. </select>
  24. </div>
  25. </div>
  26. <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
  27. <label class="layui-form-label">关键字</label>
  28. <div class="layui-input-block">
  29. <input type="text" class="layui-input " name="keyword" lay-verify="required" placeholder="文章关键字">
  30. </div>
  31. </div>
  32. <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
  33. <label class="layui-form-label">描述</label>
  34. <div class="layui-input-block">
  35. <textarea name="remark" class="layui-textarea" lay-verify="required" placeholder="文章描述"></textarea>
  36. </div>
  37. </div>
  38. <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
  39. <label class="layui-form-label">单图片上传</label>
  40. <input type="hidden" name="lay-img" id="lay-img">
  41. <div class="layui-input-block">
  42. <div id="lay-upload">上传图片</div>
  43. <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
  44. 预览图:
  45. <div class="layui-upload-list" id="lay-list">
  46. <img class="layui-append-img" src="http://p73q8jzf0.bkt.clouddn.com/88b9d56b955bf005f447e54712c00bb2.jpg" onerror="this.src='/static/admin/images/no_img.jpg'">
  47. </div>
  48. </blockquote>
  49. </div>
  50. </div>
  51. <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
  52. <label class="layui-form-label">单图片上传</label>
  53. <input type="hidden" name="lay-img" id="lay-img1">
  54. <div class="layui-input-block">
  55. <div id="lay-upload1">上传图片</div>
  56. <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
  57. 预览图:
  58. <div class="layui-upload-list" id="lay-list1">
  59. </div>
  60. </blockquote>
  61. </div>
  62. </div>
  63. <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
  64. <label class="layui-form-label">音频上传</label>
  65. <input type="hidden" name="lay-music" id="lay-music">
  66. <div class="layui-input-block">
  67. <div id="lay-music-upload">上传音频</div>
  68. <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
  69. 预览音频:
  70. <div class="layui-upload-list" id="lay-music-list">
  71. <div id="layui-audio" style="margin: 0 10px 10px 0;" ></div>
  72. </div>
  73. </blockquote>
  74. </div>
  75. </div>
  76. <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
  77. <label class="layui-form-label">音频上传</label>
  78. <input type="hidden" name="lay-music" id="lay-music1">
  79. <div class="layui-input-block">
  80. <div id="lay-music-upload1">上传音频</div>
  81. <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
  82. 预览音频:
  83. <div class="layui-upload-list" id="lay-music-list1">
  84. </div>
  85. </blockquote>
  86. </div>
  87. </div>
  88. <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
  89. <label class="layui-form-label">上传视频</label>
  90. <div class="layui-input-block">
  91. <button type="button" class="layui-btn" id="lay-upload2">上传视频</button>
  92. <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
  93. 预览视频:
  94. <div class="layui-upload-list" id="lay-video-list">
  95. <div style="display: block;width: 80%;height: auto;" id="video" data-url="http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4" ></div>
  96. <!--<span id="lay-msg" style="display: none;">-->
  97. <!--<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="lay-video">-->
  98. <!--<div class="layui-progress-bar" lay-percent="0%"></div>-->
  99. <!--</div>-->
  100. <!--<p>正在上传... <i class="layui-icon layui-icon-loading-1 layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i></p>-->
  101. <!--</span>-->
  102. </div>
  103. </blockquote>
  104. </div>
  105. </div>
  106. <div class="layui-form-item layui-col-md-offset1 layui-col-md10">
  107. <label class="layui-form-label">多图片上传</label>
  108. <div class="layui-input-block">
  109. <input type="hidden" name="del" id="del" value="">
  110. <input type="hidden" id="hid" value="{$article.photo}">
  111. <input type="hidden" name="photo" id="photo" value="{$article.photo}">
  112. <div id="uploader" class="container">
  113. <div class="queueList">
  114. <div class="placeholder">
  115. <div id="filePicker"></div>
  116. <p>或将照片拖到这里</p>
  117. </div>
  118. </div>
  119. <div class="statusBar" style="display:none;">
  120. <div class="layui-progress layui-progress-big active" lay-showpercent="true">
  121. <div class="layui-progress-bar layui-bg-blue" lay-percent="0%">
  122. </div>
  123. </div>
  124. <div class="info"></div>
  125. <div class="btns">
  126. <div id="goPicker" class="filePicker2"></div>
  127. <div class="uploadBtn">开始上传</div>
  128. </div>
  129. </div>
  130. </div>
  131. </div>
  132. </div>
  133. <div class="layui-form-item layui-col-md-offset1 layui-col-md10">
  134. <label class="layui-form-label">多图片上传</label>
  135. <div class="layui-input-block">
  136. <input type="hidden" name="del" id="del1" value="">
  137. <input type="hidden" id="hid1" value="{$article.photo}">
  138. <input type="hidden" name="photo" id="photo1" value="{$article.photo}">
  139. <div id="uploader1" class="container">
  140. <div class="queueList">
  141. <div class="placeholder">
  142. <div id="filePicker1"></div>
  143. <p>或将照片拖到这里</p>
  144. </div>
  145. </div>
  146. <div class="statusBar" style="display:none;">
  147. <div class="layui-progress layui-progress-big active" lay-showpercent="true">
  148. <div class="layui-progress-bar layui-bg-blue" lay-percent="0%">
  149. </div>
  150. </div>
  151. <div class="info"></div>
  152. <div class="btns">
  153. <div id="goPicker1" class="filePicker2"></div>
  154. <div class="uploadBtn">开始上传</div>
  155. </div>
  156. </div>
  157. </div>
  158. </div>
  159. </div>
  160. <div class="layui-form-item layui-col-md-offset1 layui-col-md10">
  161. <label class="layui-form-label">内容</label>
  162. <div class="layui-input-block" id="LAY_editor">
  163. <p>{$article.content}</p>
  164. </div>
  165. </div>
  166. <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
  167. <label class="layui-form-label">浏览量</label>
  168. <div class="layui-input-block">
  169. <input type="text" class="layui-input " name="views" lay-verify="required" placeholder="文章浏览量">
  170. </div>
  171. </div>
  172. <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
  173. <label class="layui-form-label">作者</label>
  174. <div class="layui-input-block">
  175. <input type="text" class="layui-input " name="views" lay-verify="required" placeholder="文章作者">
  176. </div>
  177. </div>
  178. <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
  179. <label class="layui-form-label">是否推荐</label>
  180. <div class="layui-input-block">
  181. <input type="radio" name="is_tui" value="1" title="是" checked>
  182. <input type="radio" name="is_tui" value="2" title="否" >
  183. </div>
  184. </div>
  185. <div class="layui-form-item layui-col-md-offset1 layui-col-md8">
  186. <div class="layui-input-block">
  187. <button class="layui-btn" lay-submit="" lay-filter="component-form-element">保存
  188. </button>
  189. <button class="layui-btn layui-btn-primary" onclick="wk.layer_close('close')">关闭</button>
  190. </div>
  191. </div>
  192. </div>
  193. </div>
  194. </div>
  195. </div>
  196. {include file="public/footer" /}
  197. <!--<script type="text/javascript" src="__JS__/webupload/webuploader_update.js"></script>-->
  198. <!--<script src="__JS__/we.js"></script>-->
  199. <script>
  200. var n = wk.uploads({num:8,type:'png,jpg,gif',status:'update'})
  201. var l = wk.uploads({num:8,type:'png,jpg,gif',attr:1,status:'update'})
  202. function imgDel(e,obj,hid,del){
  203. wk.update_del(e,obj,hid,del,n);
  204. }
  205. function imgDel1(e,obj,hid,del){
  206. wk.update_del(e,obj,hid,del,l);
  207. }
  208. var editor = wk.wang({elem:'#LAY_editor'});
  209. wk.lay_audio({elem:'#layui-audio',name:'b45030df9212d398a433610736ea8a51.mp3',src:'http://pi7sdygmd.bkt.clouddn.com/c38b5b14db26f742d782a09072a5edf2.mp3'});
  210. wk.uploadImg({size:2,type:'png',url:"{:url('Upload/upload')}"});
  211. wk.uploadImg({size:5,num:1,type:'jpg',url:"{:url('Upload/upload')}"});
  212. wk.uploadMusic({size:10,type:'mp3',url:"{:url('Upload/upload')}"});
  213. wk.uploadMusic({size:10,num:1,type:'mp3',url:"{:url('Upload/upload')}"});
  214. layui.config({
  215. base: '/src/' //静态资源所在路径
  216. }).extend({
  217. ckplayer: 'modules/ckplayer'
  218. }).use(['form','upload','ckplayer'], function() {
  219. var form = layui.form
  220. , upload = layui.upload
  221. , ckplayer = layui.ckplayer
  222. var vUrl = $('#video').data('url'),
  223. videoObject = {
  224. container: '#video',
  225. loop: false,
  226. autoplay: false,
  227. video: [
  228. [vUrl, 'video/mp4']
  229. ]
  230. };
  231. var player = new ckplayer(videoObject);
  232. //普通图片上传
  233. // var uploadInst = upload.render({
  234. // elem: '#lay-upload'
  235. // ,url: '/admin/Upload/upload'
  236. // ,accept: 'images' //上传文件类型images(图片)、file(所有文件)、video(视频)、audio(音频)
  237. // ,acceptMime: '.png,.jpg' //筛选出指定文件类型
  238. // ,exts: 'png|jpg' //允许上传的文件后缀,结合 accept 参数类设定
  239. // ,auto: true //是否选完文件后自动上传
  240. // ,size: 2*1024 //文件最大可允许上传的大小,单位 KB(0即不限制)
  241. // ,field: 'file' //设定文件域的字段名
  242. // ,progress : function(index, value) {
  243. // element.progress('model' + index, value + '%');
  244. // }
  245. // ,before: function(obj){
  246. // //预读本地文件示例,不支持ie8
  247. // obj.preview(function(index, file, result){
  248. // $('#lay-list').attr('src', result); //图片链接(base64)
  249. // });
  250. // }
  251. // ,done: function(res){
  252. // //上传成功
  253. // if(res.code == 300){
  254. // layer.msg('上传成功');
  255. // }
  256. // }
  257. // ,error: function(){
  258. // //重传
  259. // var layMsg = $('#lay-msg');
  260. // layMsg.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs lay-reload">重试</a>');
  261. // layMsg.find('.lay-reload').on('click', function(){
  262. // uploadInst.upload();
  263. // });
  264. // }
  265. // });
  266. form.verify({
  267. username:function(value,item){
  268. if(!/^[\S]{2,10}$/.test(value)){
  269. return '名称必须2到10字符,且不能出现空格';
  270. }
  271. var checkResult = "";
  272. $.ajax({
  273. url:"{:url('User/checkName')}",
  274. type:'post',
  275. data:"username="+value,
  276. async: false,//必须同步
  277. success:function(res){
  278. if(res.code == 100){
  279. checkResult = "该名称已存在";
  280. }
  281. }
  282. })
  283. return checkResult;
  284. },
  285. pass: [/^[\S]{6,12}$/,'密码必须6到12位,且不能出现空格'],
  286. // headCrop:[/^[\S]$/,'头像不能为空'],
  287. // headCrop:function(value,item){
  288. // if(value == ""){
  289. // return '头像不能为空';
  290. // }
  291. // },
  292. realname:[/^[\S]{2,10}$/,'真实姓名必须2到10字符,且不能出现空格']
  293. });
  294. form.on('submit(component-form-element)', function (data) {
  295. $('.layui-btn').addClass('layui-disabled').attr('disabled','disabled');
  296. $.ajax({
  297. url:"{:url('userAdd')}",
  298. type:'post',
  299. dataType:'json',
  300. data:data.field,
  301. success:function(res){
  302. if (res.code == 200) {
  303. layer.msg(res.msg,{icon:1,time:1500,shade:0.1},function(index){
  304. wk.layer_close();
  305. })
  306. } else {
  307. $(".layui-btn").removeClass('layui-disabled').removeAttr('disabled');
  308. wk.error(res.msg);
  309. return false;
  310. }
  311. }
  312. })
  313. });
  314. });
  315. </script>
  316. </body>
  317. </html>