594d25299dd84c1a24b90f2034d4d2d7.php 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396
  1. <?php /*a:5:{s:79:"D:\phpstudy_pro\WWW\CRMEB\app\admin\view\wechat\wechat_news_category\append.php";i:1595820902;s:61:"D:\phpstudy_pro\WWW\CRMEB\app\admin\view\public\container.php";i:1595820902;s:62:"D:\phpstudy_pro\WWW\CRMEB\app\admin\view\public\frame_head.php";i:1595820902;s:57:"D:\phpstudy_pro\WWW\CRMEB\app\admin\view\public\style.php";i:1595820902;s:64:"D:\phpstudy_pro\WWW\CRMEB\app\admin\view\public\frame_footer.php";i:1595820902;}*/ ?>
  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  4. <head>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <?php if(empty($is_layui) || (($is_layui instanceof \think\Collection || $is_layui instanceof \think\Paginator ) && $is_layui->isEmpty())): ?>
  8. <link href="/system/frame/css/bootstrap.min.css?v=3.4.0" rel="stylesheet">
  9. <?php endif; ?>
  10. <link href="/static/plug/layui/css/layui.css" rel="stylesheet">
  11. <link href="/system/css/layui-admin.css" rel="stylesheet">
  12. <link href="/system/frame/css/font-awesome.min.css?v=4.3.0" rel="stylesheet">
  13. <link href="/system/frame/css/animate.min.css" rel="stylesheet">
  14. <link href="/system/frame/css/style.min.css?v=3.0.0" rel="stylesheet">
  15. <script src="/system/frame/js/jquery.min.js"></script>
  16. <script src="/system/frame/js/bootstrap.min.js"></script>
  17. <script src="/static/plug/layui/layui.all.js"></script>
  18. <script>
  19. $eb = parent._mpApi;
  20. window.controlle="<?php echo strtolower(trim(preg_replace("/[A-Z]/", "_\\0", app('request')->controller()), "_"));?>";
  21. window.module="<?php echo app('http')->getName();?>";
  22. </script>
  23. <title></title>
  24. <link href="/system/plug/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
  25. <link href="/system/module/wechat/news/css/style.css" type="text/css" rel="stylesheet">
  26. <link href="/system/frame/css/plugins/chosen/chosen.css" rel="stylesheet">
  27. <script type="text/javascript" src="/system/plug/umeditor/third-party/jquery.min.js"></script>
  28. <script type="text/javascript" src="/system/plug/umeditor/third-party/template.min.js"></script>
  29. <script type="text/javascript" charset="utf-8" src="/system/plug/umeditor/umeditor.config.js"></script>
  30. <script type="text/javascript" charset="utf-8" src="/system/plug/umeditor/umeditor.min.js"></script>
  31. <script src="/system/plug/validate/jquery.validate.js"></script>
  32. <script src="/system/frame/js/plugins/chosen/chosen.jquery.js"></script>
  33. <script src="/static/plug/vue/dist/vue.min.js"></script>
  34. <style>
  35. .operation-item{float: right;font-size: 14px;cursor: pointer}
  36. .add-news-items{cursor:pointer;text-align: center;font-size: 40px;height: 54px;line-height: 54px;border: 1px solid #ccc;}
  37. .news-item-title{
  38. position: relative;
  39. width: 280px;
  40. height: 80px;
  41. max-width: 270px;
  42. overflow: hidden;
  43. border: 1px solid #ccc;
  44. background-size: cover;
  45. background-position: center center;
  46. }
  47. .other{
  48. width: 100%;
  49. overflow: hidden;
  50. position: relative;
  51. background-size: 100%;
  52. background-position: center center;
  53. border-radius: 5px 5px 0 0;
  54. height: 80px;
  55. padding: 5px 0;
  56. }
  57. .right-text{
  58. float: left;
  59. width: 200px;
  60. height: 100%;
  61. padding: 10px;
  62. overflow: hidden;
  63. text-overflow: ellipsis;
  64. }
  65. .left-image {
  66. width: 50px;
  67. height: 50px;
  68. float: left;
  69. overflow: hidden;
  70. position: relative;
  71. background-size: 100%;
  72. background-position: center center;
  73. }
  74. .active {
  75. border: 1px solid #44b549!important;
  76. }
  77. </style>
  78. <!--<script type="text/javascript" src="/static/plug/basket.js"></script>-->
  79. <script type="text/javascript" src="/static/plug/requirejs/require.js"></script>
  80. <?php /* <script type="text/javascript" src="/static/plug/requirejs/require-basket-load.js"></script> */ ?>
  81. <script>
  82. var hostname = location.hostname;
  83. if(location.port) hostname += ':' + location.port;
  84. requirejs.config({
  85. map: {
  86. '*': {
  87. 'css': '/static/plug/requirejs/require-css.js'
  88. }
  89. },
  90. shim:{
  91. 'iview':{
  92. deps:['css!iviewcss']
  93. },
  94. 'layer':{
  95. deps:['css!layercss']
  96. }
  97. },
  98. baseUrl:'//'+hostname+'/',
  99. paths: {
  100. 'static':'static',
  101. 'system':'system',
  102. 'vue':'static/plug/vue/dist/vue.min',
  103. 'axios':'static/plug/axios.min',
  104. 'iview':'static/plug/iview/dist/iview.min',
  105. 'iviewcss':'static/plug/iview/dist/styles/iview',
  106. 'lodash':'static/plug/lodash',
  107. 'layer':'static/plug/layer/layer',
  108. 'layercss':'static/plug/layer/theme/default/layer',
  109. 'jquery':'static/plug/jquery/jquery.min',
  110. 'moment':'static/plug/moment',
  111. 'sweetalert':'static/plug/sweetalert2/sweetalert2.all.min',
  112. 'formCreate':'/static/plug/form-create/form-create.min',
  113. },
  114. basket: {
  115. excludes:['system/js/index','system/util/mpVueComponent','system/util/mpVuePackage']
  116. // excludes:['system/util/mpFormBuilder','system/js/index','system/util/mpVueComponent','system/util/mpVuePackage']
  117. }
  118. });
  119. </script>
  120. <script type="text/javascript" src="/system/util/mpFrame.js"></script>
  121. </head>
  122. <body class="gray-bg">
  123. <div class="wrapper wrapper-content">
  124. <div id="app">
  125. <div class="row" style="width: 100%">
  126. <div class="col-sm-12" style="margin-left: 20px;min-height: 200px">
  127. <div class="col-sm-2 panel panel-default news-left">
  128. <div class="panel-heading">文章列表</div>
  129. <div class="panel-body news-box type-all" v-for="(item,index) in newList">
  130. <div class="operation-item">
  131. <!-- <span class="glyphicon glyphicon-chevron-up" aria-hidden="true" @click="itemUp(index)"></span>-->
  132. <!-- <span class="glyphicon glyphicon-chevron-down" aria-hidden="true" @click="itemDown(index)"></span>-->
  133. <span class="glyphicon glyphicon-trash" aria-hidden="true" v-if="index" @click="itemDel(index)"></span>
  134. </div>
  135. <div v-if="index == 0">
  136. <div class="news-item transition news-image" :class="action==index ? 'active' :''" style="margin-bottom: 20px" @click="isShow(index)">
  137. <img :src="item.image_input" style="width: 100%;height: 100%;"/>
  138. </div>
  139. <div @click="isShow(index)"><span v-text="item.title"></span></div>
  140. </div>
  141. <div v-else class="news-item-title transition news-image" :class="action==index ? 'active' :''" style="margin-bottom: 20px" @click="isShow(index)">
  142. <div class="news_articel_item other">
  143. <div class="right-text" v-text="item.title"></div>
  144. <img class="left-image" :src="item.image_input"/>
  145. </div>
  146. </div>
  147. </div>
  148. <div class="add-news-items" @click="addItem"><span>+</span></div>
  149. </div>
  150. <div class="col-sm-8 panel panel-default news-right">
  151. <div class="panel-heading">文章内容编辑</div>
  152. <div class="panel-body">
  153. <form class="form-horizontal" id="signupForm">
  154. <div class="layui-form-item">
  155. <label class="layui-form-label">标题</label>
  156. <div class="layui-input-block">
  157. <input type="text" name="title" maxlength="64" size="68" v-model="newListIndex.title" placeholder="请在这里输入标题" class="layui-input">
  158. </div>
  159. </div>
  160. <div class="layui-form-item">
  161. <label class="layui-form-label">作者</label>
  162. <div class="layui-input-block">
  163. <input maxlength="8" size="20" placeholder="请输入作者" name="author" class="layui-input" v-model="newListIndex.author">
  164. </div>
  165. </div>
  166. <div class="layui-form-item">
  167. <label class="layui-form-label">封面</label>
  168. <div class="layui-input-block">
  169. <div style="height:auto">
  170. <p class="help-block" style="border: 1px solid #ddd;padding: 6px 10px;width: 80px;margin-top:10px;color:#000;cursor: pointer;" @click="addImage">选择封面</p>
  171. </div>
  172. </div>
  173. </div>
  174. <div class="form-group">
  175. <div class="col-md-12" style="margin-left: 20px;">
  176. <label style="color:#aaa">正文</label>
  177. <textarea type="text/plain" id="myEditor" style="width:96%;">{{newListIndex.content}}</textarea>
  178. </div>
  179. </div>
  180. <div class="form-group">
  181. <div class="col-md-12" style="margin-left: 20px;">
  182. <label style="color:#aaa">摘要</label>
  183. <textarea class="layui-input" style="width:80%;height:60px;resize:none;line-height:20px;color: #ccc" v-model="newListIndex.synopsis"></textarea>
  184. </div>
  185. </div>
  186. </form>
  187. </div>
  188. </div>
  189. </div>
  190. </div>
  191. <div class="col-sm-8" style="position: fixed;right:44px;bottom: 0;z-index: 999;text-align: right">
  192. <button type="button" class="btn btn-w-m btn-info" style="width: 100%;" @click="submit">提交保存图文</button>
  193. </div>
  194. </div>
  195. <script>
  196. $('#app').parent().removeClass('fadeInUp');
  197. window.$list = <?php echo json_encode($list);?>;
  198. window.$id = "<?php echo htmlentities($id); ?>";
  199. window.$author = "<?php echo htmlentities($author); ?>";
  200. console.log($list);
  201. var _vue = new Vue({
  202. el:'#app',
  203. data:{
  204. indexItem:0,
  205. newList : $list,
  206. action:0,
  207. newListIndex:{
  208. 'id':0,
  209. 'title':'',
  210. 'author':$author,
  211. 'content':'',
  212. 'image_input':'/system/module/wechat/news/images/image.png',
  213. 'synopsis':''
  214. }
  215. },
  216. methods:{
  217. swapNewList:function (arr, index1, index2) {
  218. arr[index1] = arr.splice(index2, 1, arr[index1])[0];
  219. return arr;
  220. },
  221. itemUp:function (indexItem) {
  222. var that = this;
  223. if(indexItem){
  224. that.newList = that.swapNewList(that.newList, indexItem, parseInt(indexItem) - parseInt(1));
  225. if(indexItem == that.indexItem){
  226. if(that.newList.length == 1) that.setNewListIndex(0);
  227. else that.setNewListIndex(parseInt(indexItem) + parseInt(1));
  228. }else{
  229. if(indexItem < that.indexItem){
  230. that.indexItem = parseInt(that.indexItem) + parseInt(1);
  231. that.setNewListIndex(that.indexItem);
  232. }
  233. }
  234. }else return $eb.message('error','已经处于置顶,无法上移');
  235. },
  236. itemDown:function (indexItem) {
  237. var that = this;
  238. var length = parseInt(that.newList.length) - parseInt(1);
  239. if(indexItem != length){
  240. that.newList = that.swapNewList(that.newList, indexItem, parseInt(indexItem) + parseInt(1));
  241. if(indexItem == that.indexItem){
  242. if(that.newList.length == 1) that.setNewListIndex(0);
  243. else that.setNewListIndex(parseInt(indexItem) + parseInt(1));
  244. }else{
  245. if(indexItem < that.indexItem){
  246. that.indexItem = parseInt(that.indexItem) + parseInt(1);
  247. that.setNewListIndex(that.indexItem);
  248. }
  249. }
  250. }else return $eb.message('error','已经处于置底,无法下移');
  251. },
  252. itemDel:function (indexItem) {
  253. var that = this;
  254. if(that.newList.length == 1) return $eb.message('error','不能再删除了');
  255. that.newList.splice(indexItem,1);
  256. if(indexItem == that.indexItem){
  257. if(that.newList.length == 1)
  258. that.setNewListIndex(0);
  259. else
  260. that.setNewListIndex(parseInt(indexItem) + parseInt(1));
  261. }else{
  262. if(indexItem < that.indexItem){
  263. that.indexItem = parseInt(that.indexItem) + parseInt(1);
  264. that.isShow(that.indexItem);
  265. }
  266. }
  267. },
  268. setNewListIndex:function (indexItem) {
  269. var that = this;
  270. that.indexItem = indexItem;
  271. that.newListIndex = that.newList[indexItem];
  272. setContent(that.newListIndex.content);
  273. },
  274. submit:function () {
  275. var that = this;
  276. that.isShow(0);
  277. for (index in that.newList){
  278. if(that.newList[index].title == ''){
  279. return $eb.message('error','请输入第'+(parseInt(index)+1)+'篇文章的标题');
  280. }
  281. if(that.newList[index].author == ''){
  282. return $eb.message('error','请输入第'+(parseInt(index)+1)+'篇文章的作者');
  283. }
  284. if(that.newList[index].synopsis == ''){
  285. return $eb.message('error','请输入第'+(parseInt(index)+1)+'篇文章的摘要');
  286. }
  287. if(that.newList[index].content == ''){
  288. return $eb.message('error','请输入第'+(parseInt(index)+1)+'篇文章的内容');
  289. }
  290. }
  291. $.ajax({
  292. url:"<?php echo Url('append_save'); ?>",
  293. data:{list:that.newList,id:$id},
  294. type:'post',
  295. dataType:'json',
  296. success:function(res){
  297. if(res.code == 200){
  298. var index = parent.layer.getFrameIndex(window.name);
  299. parent.layer.close(index);
  300. return $eb.message('success',res.msg);
  301. }else{
  302. return $eb.message('error',res.msg);
  303. }
  304. }
  305. })
  306. },
  307. addImage:function () {
  308. createFrame('选择图片','<?php echo Url('widget.images/index'); ?>');
  309. },
  310. isShow:function (indexItem) {
  311. var that = this;
  312. this.action=indexItem;
  313. that.newListIndex.content = getContent();
  314. that.newList[that.indexItem] = that.newListIndex;
  315. that.indexItem = indexItem;
  316. for (index in that.newList){
  317. if(index == indexItem) that.newListIndex = that.newList[index]
  318. }
  319. setContent(that.newListIndex.content);
  320. },
  321. addItem:function () {
  322. var arr = {
  323. 'id':0,
  324. 'title':'',
  325. 'author':$author,
  326. 'content':'',
  327. 'image_input':'/system/module//wechat/news/images/image.png',
  328. 'synopsis':''
  329. }
  330. this.newList.push(arr);
  331. }
  332. },
  333. mounted:function () {
  334. console.log(this.newList);
  335. this.newListIndex = this.newList[this.indexItem]
  336. }
  337. })
  338. function changeIMG(index,pic){
  339. _vue._data.newListIndex.image_input = pic;
  340. _vue._data.newList[_vue._data.indexItem].image_input = pic;
  341. };
  342. </script>
  343. <script>
  344. var editor = document.getElementById('myEditor');
  345. editor.style.height = '300px';
  346. //实例化编辑器
  347. var um = UM.getEditor('myEditor',{
  348. // fullscreen:true
  349. });
  350. /**
  351. * 获取编辑器内的内容
  352. * */
  353. function getContent() {
  354. return (UM.getEditor('myEditor').getContent());
  355. }
  356. function hasContent() {
  357. return (UM.getEditor('myEditor').hasContents());
  358. }
  359. function setContent(content) {
  360. return (UM.getEditor('myEditor').setContent(content));
  361. }
  362. function createFrame(title,src,opt){
  363. opt === undefined && (opt = {});
  364. return layer.open({
  365. type: 2,
  366. title:title,
  367. area: [(opt.w || 700)+'px', (opt.h || 650)+'px'],
  368. fixed: false, //不固定
  369. maxmin: true,
  370. moveOut:false,//true 可以拖出窗外 false 只能在窗内拖
  371. anim:5,//出场动画 isOutAnim bool 关闭动画
  372. offset:'auto',//['100px','100px'],//'auto',//初始位置 ['100px','100px'] t[ 上 左]
  373. shade:0,//遮罩
  374. resize:true,//是否允许拉伸
  375. content: src,//内容
  376. move:'.layui-layer-title'
  377. });
  378. }
  379. </script>
  380. </div>
  381. </body>
  382. </html>