edit.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604
  1. {extend name="public/layout" /} {block name="title"}公司实力编辑{/block} {block name="body"}
  2. <script src="/static/js/jquery.min.js"></script>
  3. <style type="text/css">
  4. html,
  5. body {
  6. display: block;
  7. width: 100%;
  8. background-color: #fff;
  9. }
  10. .layui-fluid {
  11. display: block;
  12. border-radius: 5px;
  13. background-color: #ffffff;
  14. padding: 15px 30px;
  15. }
  16. .layui-icon{font-size:18px !important;line-height: 38px;}
  17. .layui-input-inline{line-height: 38px;}
  18. .layui-input-inline input{margin-right: 10px;}
  19. .layui-form-item .layui-input-inline{}
  20. .input-indent-box-small{margin-left:10px;}
  21. .layui-tab {
  22. padding: 15px;
  23. height: 100%;
  24. }
  25. .layui-table-view .layui-table th,
  26. .layui-table-view .layui-table td {
  27. text-align: center;
  28. border-color: #B6CADE;
  29. }
  30. .layui-table thead tr,
  31. .layui-table-header {
  32. background-color: #D8E6F1;
  33. }
  34. .input-indent-box {
  35. display: inline;
  36. width: 80%;
  37. }
  38. .input-indent-box-small {
  39. display: inline;
  40. width: 20%;
  41. }
  42. .adding {
  43. cursor: pointer;
  44. }
  45. .upload-img .area i {
  46. font-size: 50px;
  47. color: #009688;
  48. }
  49. .evi-block {
  50. float: left;
  51. margin-right: 10px;
  52. }
  53. /*///*/
  54. .imageDiv {
  55. display: inline-block;
  56. width: 180px;
  57. height: 125px;
  58. -webkit-box-sizing: border-box;
  59. -moz-box-sizing: border-box;
  60. box-sizing: border-box;
  61. border: 1px dashed darkgray;
  62. background: #f8f8f8;
  63. position: relative;
  64. overflow: hidden;
  65. }
  66. .addImages {
  67. display: inline-block;
  68. width: 180px;
  69. height: 140px;
  70. -webkit-box-sizing: border-box;
  71. -moz-box-sizing: border-box;
  72. box-sizing: border-box;
  73. border: 1px dashed darkgray;
  74. background: #f8f8f8;
  75. position: relative;
  76. overflow: hidden;
  77. }
  78. .text-detail {
  79. margin-top: 40px;
  80. text-align: center;
  81. }
  82. .text-detail>span {
  83. font-size: 40px;
  84. }
  85. .imageDiv div {
  86. width: 100%;
  87. height: 100%;
  88. position: absolute;
  89. top: 0px;
  90. background-color: #e6e6e600;
  91. }
  92. .imageDiv div i {
  93. display: none;
  94. font-size: 31px;
  95. position: absolute;
  96. top: 37%;
  97. left: 40%;
  98. }
  99. .imageDiv div:hover {
  100. background-color: #e6e6e680;
  101. }
  102. .imageDiv div:hover i {
  103. display: block;
  104. cursor: pointer;
  105. }
  106. .rotate180 {
  107. -webkit-transform: rotate(180deg);
  108. transform: rotate(180deg);
  109. }
  110. .layui-edge.rotate180 {
  111. margin-top: -9px;
  112. }
  113. .layui-input-inline.input-longer-inline {
  114. width: 290px;
  115. }
  116. .goback {
  117. float: right;
  118. }
  119. .goback a {
  120. color: #269efb;
  121. }
  122. .goback i {
  123. position: relative !important;
  124. }
  125. .layui-btn-primary {
  126. color: #249EFB;
  127. border: 1px solid #249EFB;
  128. }
  129. .layui-btn-primary:hover {
  130. background-color: #E3F7FF;
  131. color: #249EFB;
  132. }
  133. .layui-card-body {
  134. padding: 10px 0px;
  135. }
  136. .layui-border-btn,.layui-border-btn:hover {
  137. background-color: #fff;
  138. color: #249EFB;
  139. border: 1px solid #249EFB;
  140. }
  141. .layui-upload-drags {
  142. position: relative;
  143. border: 1px dashed #e2e2e2;
  144. background-color: #fff;
  145. text-align: center;
  146. cursor: pointer;
  147. color: #999;
  148. width: 100%;
  149. height: 100%;
  150. }
  151. #symbshowed{margin-top:15px;}
  152. .isimgupload{width:190px;height: 152px;}
  153. .imageDiv{position: absolute;top:0;left:0;width:100%;height: 100%;background: rgba(230,230,230,.5);display: none;}
  154. .imageDiv i{display: block;width:18px;height: 18px;position: absolute;top:0;left:0;bottom:0;right: 0;margin:auto;}
  155. .layui-upload-drag{width:100%;height: 100%;}
  156. </style>
  157. <body>
  158. <div class="layui-fluid">
  159. <div class="layui-card">
  160. <div class="layui-card-body">
  161. <form class="layui-form" enctype="multipart/form-data" lay-filter="evidence-form">
  162. <input name="id" type="hidden" value="{$evidence.id}" />
  163. <div class="layui-form-item">
  164. <label class="layui-form-label"><i style="color:red;">*</i>标题</label>
  165. <div class="layui-input-inline">
  166. <input class="layui-input inputBox" name="title" placeholder="请输入标题" type="text" value="{:$evidence['title']}">
  167. </div>
  168. </div>
  169. <div class="layui-form-item">
  170. <label class="layui-form-label"><i style="color:red;">*</i>分类</label>
  171. <div class="layui-input-inline">
  172. <select name="cate" lay-filter="type" id="label" lay-verify="required" lay-search>
  173. <option value="">请选择分类</option>
  174. {volist name="cates" id="vo"}
  175. <option value="{$vo.id}" {if condition="$vo.id eq $evidence['cate']"} selected {/if}>{$vo.name}</option>
  176. {/volist}
  177. </select>
  178. </div>
  179. <i class="layui-icon layui-icon-add-circle adding" style="font-size: 32px" id="cate-add"></i>
  180. </div>
  181. <div class="layui-form-item">
  182. <label class="layui-form-label">标签</label>
  183. <div class="layui-input-inline">
  184. <select name="label" id="tagEle" lay-filter="type2">
  185. <option value="">请选择标签</option>
  186. {volist name="checked" id="t"}
  187. <option value="{$key}" {if condition="$evidence.label eq $key"}selected{/if}>{$t}</option>
  188. {/volist}
  189. </select>
  190. </div>
  191. <!-- <i class="layui-icon layui-icon-add-circle adding" style="font-size: 32px" id="addLabel"></i> -->
  192. </div>
  193. <!-- //视频 -->
  194. <input id="category_name" type="hidden" value="company_strength" />
  195. <input type="hidden" name="difference" value="{$evidence.difference}" />
  196. {if condition="$evidence.difference eq 1"}
  197. <div class="layui-form-item video">
  198. <div class="layui-form-item">
  199. <label class="layui-form-label">视频封面图</label>
  200. <div class="isimgupload layui-input-inline" style="position:relative;">
  201. <div class="addImages" id="upload-drag">
  202. {if condition="$evidence.cover neq ''"}
  203. <img class="fmimages" src="{$evidence.cover}" style="height: 100%;width:100%;">
  204. {else/}
  205. <div class="layui-upload-drag">
  206. <i class="layui-icon">&#xe681;</i>
  207. <p>上传图片</p>
  208. </div>
  209. {/if}
  210. </div>
  211. </div>
  212. </div>
  213. <div class="layui-form-item">
  214. <label class="layui-form-label"></label>
  215. <div><i style="color:red;margin-right:5px;">*</i>视频封面比例建议按照全屏比例750X1334,或者宽高比例5:3,图片大小不超过1M</div>
  216. </div>
  217. <div class="layui-form-item img">
  218. <label class="layui-form-label">分享封面</label>
  219. <div class="isimgupload layui-input-inline" style="position:relative;">
  220. <div class="addImages" id="cover_share_img">
  221. {if $evidence.cover_share_img}
  222. <img src="{$evidence.cover_share_img}" alt="" style="height: 100%;width:100%;">
  223. {else/}
  224. <div class="layui-upload-drag" style="width: 180px !important;box-sizing: border-box;">
  225. <i class="layui-icon">&#xe681;</i>
  226. <p style="white-space: nowrap;">上传分享封面</p>
  227. </div>
  228. {/if}
  229. </div>
  230. </div>
  231. </div>
  232. <label class="layui-form-label"><span style="color: red;">*</span>视频</label>
  233. <div class="layui-input-inline" style="width: 290px;display: block;" id="container">
  234. <a class="layui-btn btn layui-border-btn" id="selectfiles" href="javascript:void(0);">选择视频</a>
  235. <a class="layui-btn btn layui-border-btn" id="postfiles" href="javascript:void(0);">开始上传</a>
  236. <div id="ossfile"></div>
  237. <div id="symbshowed">
  238. <video src="{$evidence.pics}" width="320" height="240" controls="controls"></video>
  239. </div>
  240. <div class="layui-form-mid layui-word-aux" style="color: red!important;margin-left:10px;">注:选择视频并上传,限制280M内</div>
  241. <!--报错信息返回展示-->
  242. <pre id="console"></pre>
  243. <input type="hidden" value="{$evidence.pics}" id="fileuri">
  244. <!--上传到OSS哪个文件下,在这里定义 -->
  245. <input type="hidden" value="dailyWechatArticle" id="wechat_label_name">
  246. </div>
  247. <div class="layui-form-item" style="clear:both;width:100%;">
  248. <label class="layui-form-label"><i style="color:red;">*</i> 视频格式:</label>
  249. <div class="layui-input-block lh45 mdl20" style="max-width: 300px !important;">
  250. <input type="radio" id="1" class="radio_input" lay-filter="video_type"
  251. name="video_type" value="0" title="全屏" {if $evidence.video_type == 0} checked {/if}>
  252. <input type="radio" id="2" class="radio_input" lay-filter="video_type"
  253. name="video_type" value="1" title="横屏" {if $evidence.video_type == 1} checked {/if}>
  254. </div>
  255. </div>
  256. </div>
  257. <div class="layui-form-item img">
  258. <label class="layui-form-label"></label>
  259. <div><i style="color:red;margin-right: 5px;">*</i>建议上传图片宽高比例5:4,图片大小不超过1M</div>
  260. </div>
  261. <div class="layui-form-item">
  262. <label class="layui-form-label">描述</label>
  263. <div class="layui-input-block">
  264. <textarea name="desc" autocomplete="off"
  265. class="layui-textarea">{$evidence.desc}</textarea>
  266. </div>
  267. </div>
  268. {else/}
  269. <div class="layui-form-item">
  270. <label class="layui-form-label"><span style="color: red;">*</span>封面图</label>
  271. <div class="" style="margin: 15px 15px 0px;padding-left: 100px;box-sizing: border-box;">
  272. <div class="addImages" id="evidence_imgs">
  273. <div class="layui-upload-drags" id="evidence_img">
  274. {if condition="$evidence.cover neq ''"}
  275. <img src="{$evidence.cover}" style="height: 100%;width:100%;">
  276. <input type="hidden" name="ycovers" value="{$evidence.cover}" />
  277. {else/}
  278. <div class="layui-upload-drag">
  279. <i class="layui-icon">&#xe681;</i>
  280. <p>上传图文</p>
  281. </div>
  282. {/if}
  283. </div>
  284. </div>
  285. </div>
  286. </div>
  287. <div class="layui-form-item">
  288. <label class="layui-form-label"></label>
  289. <div><i style="color:red;margin-right: 5px;">*</i>建议上传图片宽高比例5:3,图片大小不超过1M</div>
  290. </div>
  291. <div class="layui-form-item img">
  292. <label class="layui-form-label">分享封面</label>
  293. <div class="" style="margin: 15px 15px 0px;padding-left: 100px;box-sizing: border-box;">
  294. <div class="addImages" id="cover_share_img">
  295. {if $evidence.cover_share_img}
  296. <img src="{$evidence.cover_share_img}" alt="" style="height: 100%;width:100%;">
  297. {else/}
  298. <div class="layui-upload-drag" style="width: 180px !important;box-sizing: border-box;">
  299. <i class="layui-icon">&#xe681;</i>
  300. <p style="white-space: nowrap;">上传分享封面</p>
  301. </div>
  302. {/if}
  303. </div>
  304. </div>
  305. </div>
  306. <div class="layui-form-item img">
  307. <label class="layui-form-label"></label>
  308. <div><i style="color:red;margin-right: 5px;">*</i>建议上传图片宽高比例5:4,图片大小不超过1M</div>
  309. </div>
  310. <div class="layui-form-item">
  311. <label class="layui-form-label">描述</label>
  312. <div class="layui-input-block">
  313. <textarea id="anli_content" name="desc" autocomplete="off"
  314. style="height: 350px;">{$evidence.desc}</textarea>
  315. </div>
  316. </div>
  317. {/if}
  318. <div class="layui-form-item submit-btn">
  319. <input type="hidden" name="id" value="{$evidence.id}">
  320. <input class="layui-btn layui-btn-primary" type="button" lay-submit
  321. lay-filter="layuiadmin-evidence-submit" style="margin-left:110px;" id="layuiadmin-evidence-submit" value="确认提交">
  322. </div>
  323. </form>
  324. </div>
  325. </div>
  326. </div>
  327. </body>
  328. {/block} {block name="js"}
  329. <!-- 配置文件 -->
  330. <script type="text/javascript" src="__STATIC__/ueditor/dist/utf8-php/ueditor.config.js"></script>
  331. <!-- 编辑器源码文件 -->
  332. <script type="text/javascript" src="__STATIC__/ueditor/dist/utf8-php/ueditor.all.js"></script>
  333. <!-- 实例化编辑器 -->
  334. <script type="text/javascript">
  335. var type = "{:$evidence.difference}";
  336. if(type == 2){
  337. var ue = UE.getEditor('anli_content');
  338. }
  339. </script>
  340. <script type="text/javascript" src="__STATIC__/js/plupload/js/plupload.full.min.js"></script>
  341. <script type="text/javascript" src="__STATIC__/js/plupload/ossupload.js"></script>
  342. <script type="text/javascript" src="__STATIC__/js/Sortable.js"></script>
  343. <script>
  344. layui.config({
  345. base: '__LAYUI__/' //静态资源所在路径
  346. ,
  347. urlbase: '/sys'
  348. }).extend({
  349. index: 'lib/index' //主入口模块
  350. }).use(['index', 'form', 'upload', 'layedit'], function () {
  351. var form = layui.form,
  352. upload = layui.upload,
  353. layedit = layui.layedit,
  354. files = [],
  355. $ = layui.jquery;
  356. // layedit.set({
  357. // uploadImage: {
  358. // url: '{:url("companyStrength/imgUpload")}'
  359. // }
  360. // });
  361. // var textarea = layedit.build('anli_content', {
  362. // 'height': 500
  363. // });
  364. //视频封面图
  365. upload.render({
  366. elem: '#upload-drag',
  367. accept: 'image',
  368. exts: 'png|jpg|jpeg',
  369. auto: false,
  370. field: 'cover',
  371. size: 3 * 1024,
  372. choose: function(obj) {
  373. obj.preview(function(index, file, result) {
  374. $('#upload-drag').html('<img class="fmimages" src="' + result + '" style="height: 100%;width:100%;">');
  375. });
  376. }
  377. });
  378. upload.render({
  379. elem: '#cover_share_img',
  380. accept: 'image',
  381. exts: 'png|jpg|jpeg',
  382. auto: false,
  383. field: 'cover_share_img',
  384. size: 3 * 1024,
  385. choose: function(obj) {
  386. obj.preview(function(index, file, result) {
  387. $('#cover_share_img').html('<img class="fmimages" src="' + result + '" style="height: 100%;width:100%;">');
  388. });
  389. }
  390. });
  391. $('.isimgupload').hover(function(){
  392. if($(this).find('#upload-drag').length>0 && $("#upload-drag:has(img.fmimages)").length>0){
  393. $('#upload-drag>.imageDiv').show();
  394. }
  395. if($(this).find('#upload-share-drag').length>0 && $("#upload-share-drag:has(img.fmimages)").length>0){
  396. $('#upload-share-drag>.imageDiv').show();
  397. }
  398. },function(){
  399. $('.imageDiv').hide();
  400. })
  401. $('.imageDiv').on('click', function(e) {
  402. var that = this;
  403. layer.confirm('确定删除该图片么?',{title: ['信息', 'color:#333333;background-color:#D8E6F1;'],}, function(index) {
  404. var imgDiv = $('#upload-drag').find('img');
  405. imgDiv.remove();
  406. $('#cover').val('');
  407. $('#upload-drag').html('<div class="layui-upload-drag"><i class="layui-icon">&#xe681;</i><p>上传图片</p></div>');
  408. layer.close(index);
  409. });
  410. });
  411. //下拉框关联
  412. var typeData = JSON.parse('{$label|raw}');
  413. form.on('select(type)', function (data) {
  414. var typeJson = typeData[data.value];
  415. var typeLabel = $('#tagEle');
  416. typeLabel.empty().append('<option value="">请选择标签</option>');
  417. for (r in typeJson) {
  418. typeLabel.append('<option value=' + r + '>' + typeJson[r] + '</option>');
  419. }
  420. form.render();
  421. })
  422. //添加分类下的标签
  423. $('#addLabel').click(function () {
  424. var checktTypeId = $('#label').val();
  425. if (checktTypeId == '') {
  426. layer.msg('请先选择归属分类', { anim: 6 });
  427. return false;
  428. }
  429. layer.prompt({
  430. title: ['添加标签', 'color:#333333;background-color:#D8E6F1;'],
  431. }, function (value, index, elem) {
  432. var value = $.trim(value);
  433. if (value == '') {
  434. layer.msg('请输入标签名称', { anim: 6 });
  435. return false;
  436. }
  437. if (value.length > 6) {
  438. layer.msg('标签名称超长', { anim: 6 });
  439. return false;
  440. }
  441. $.post('{:url("company_strength/addtype")}', {
  442. value: value, id: checktTypeId
  443. }, function (res) {
  444. if (res.code == 0) {
  445. $('#tagEle').append("<option selected value='" + res.data.id + "'>" + res.data.value + "</option>")
  446. form.render();
  447. layer.msg(res.msg, {
  448. anim: 0
  449. }, function () {
  450. layer.close(index); //再执行关闭
  451. });
  452. } else {
  453. layer.msg(res.msg, {
  454. anim: 6
  455. });
  456. }
  457. });
  458. });
  459. });
  460. //图文封面图
  461. upload.render({
  462. elem: '#evidence_imgs',
  463. accept: 'image',
  464. exts: 'png|jpg|jpeg',
  465. auto: false,
  466. field: 'covers',
  467. size: 3 * 1024,
  468. choose: function(obj) {
  469. obj.preview(function(index, file, result) {
  470. $('#evidence_img').html('<img src="' + result + '" style="height: 100%;width:100%;">');
  471. });
  472. }
  473. });
  474. form.on('submit(layuiadmin-evidence-submit)', function (data) {
  475. var index = parent.layer.getFrameIndex(window.name);
  476. var formData = new FormData(data.form);
  477. if($('#cover').val()){
  478. formData.delete('cover');
  479. formData.append('cover',$('#cover').val());
  480. }
  481. //监听分类,去除图片或视频
  482. var radio = "{$evidence.difference}";
  483. formData.delete('evidence_image');
  484. if(radio == 1) {
  485. var video_url = $('#fileuri').val();
  486. formData.append('video_url',video_url);
  487. if (video_url=='') {
  488. layer.msg('请选择视频', {anim: 6,time: 1000,icon: 5});
  489. return false;
  490. }
  491. } else if(radio == 2) {
  492. //formData.set('desc', layedit.getContent(textarea));
  493. ue.ready(function () {
  494. formData.append('desc', ue.getContent());
  495. });
  496. if (data.field.covers == "" || data.field.covers == null || data.field.covers == undefined) {
  497. if (data.field.ycovers == "" || data.field.ycovers == null || data.field.ycovers == undefined) {
  498. layer.msg('请选择封面图', { anim: 0, time: 1000, icon: 5 });
  499. return false;
  500. }
  501. }
  502. }
  503. formData.append('cate', $('#label').val());
  504. $.ajax({
  505. url: '{:url("companyStrength/editing")}',
  506. type: 'post',
  507. data: formData,
  508. dataType: 'json',
  509. processData: false,
  510. contentType: false,
  511. success: function (res) {
  512. if (res.code === 0) {
  513. layer.msg(res.msg, {
  514. anim: 0,time: 1000,icon: 6,
  515. }, function() {
  516. parent.layui.table.reload('evidence-table');
  517. parent.layer.close(index);
  518. });
  519. } else {
  520. layer.msg(res.msg, {anim: 0,time: 1000,icon: 5});
  521. }
  522. }
  523. });
  524. return false;
  525. });
  526. /////////
  527. $('#cate-add').on('click', function () {
  528. addcate();
  529. });
  530. var addcate = function () {
  531. layer.prompt({
  532. title: ['分类添加', 'color:#333333;background-color:#D8E6F1;'],
  533. }, function(value, index, elem) {
  534. var value = $.trim(value);
  535. if(value == '') {
  536. layer.msg('请输入分类名称', {anim: 6});
  537. return false;
  538. }
  539. if(value.length > 6) {
  540. layer.msg('分类名称超长', {anim: 6});
  541. return false;
  542. }
  543. $.post('{:url("companyStrength/cate_add")}', {
  544. 'name': value
  545. }, function(res) {
  546. if(res.code == 0) {
  547. $('#label').append("<option selected value='"+value+"'>"+value+"</option>")
  548. // $("#select_community").val(res.data.name);
  549. // $("#select_community").attr('data-selectedid',res.data.id);
  550. form.render('select');
  551. layer.msg(res.msg, {
  552. anim: 0
  553. }, function() {
  554. layer.close(index); //再执行关闭
  555. });
  556. } else {
  557. layer.msg(res.msg, {
  558. anim: 6
  559. });
  560. }
  561. });
  562. });
  563. }
  564. });
  565. </script>
  566. {/block}