setPage_article.html.svn-base 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909
  1. <{include file="./admin/header.html"}>
  2. <{include file="./admin/left.html"}>
  3. <{include file="./admin/nav.html"}>
  4. <{include file="get_kindeditor.html"}>
  5. <script type="text/javascript" src="<{$web_cfg.cdn}>/public/static/js/jquery-1.7.2.min.js"></script>
  6. <link rel="stylesheet" type="text/css" href="<{$web_cfg.cdn}>/public/static/css/??swiper.min.css,swiper.animate.min.css" />
  7. <script src="<{$web_cfg.cdn}>/public/static/js/??swiper.jquery.min.js,swiper.animate.min.js"></script>
  8. <style>
  9. .set-nav {
  10. margin: 0 auto;
  11. }
  12. .set-nav-hr {
  13. background-color: #ddd;
  14. height: 1px;
  15. position: relative;
  16. }
  17. .form-group label {
  18. font-weight: 600;
  19. }
  20. .checkbox-inline, .radio-inline {
  21. font-weight: 400!important;
  22. }
  23. .rowlabel {
  24. font-weight: 300!important;
  25. }
  26. .music_play_hide {
  27. display:none;
  28. }
  29. .create_page_box {
  30. display:none;
  31. position: relative;
  32. }
  33. .create_page_box .panel-heading {
  34. background-color: #fff;
  35. }
  36. .topic_page, .template_page, .edit_page {
  37. width: 320px;
  38. height: 570px;
  39. background-color: #fff;
  40. box-shadow: 0 0 4px #d2d2d2;
  41. position: relative;
  42. margin: 20px auto 0px auto;
  43. }
  44. .topic_page_mask {
  45. }
  46. .template_page {
  47. margin-bottom: 20px;
  48. overflow: hidden;
  49. }
  50. .num_page {
  51. color: #777;
  52. font-size: 20px;
  53. font-weight: bold;
  54. left: 10px;
  55. position: absolute;
  56. top: 10px;
  57. }
  58. .ks-layer {
  59. float: left;
  60. width: 36px;
  61. height: 50px;
  62. border: 1px solid #777;
  63. margin-bottom: 7px;
  64. margin-right: 11px;
  65. position: relative;
  66. cursor: pointer;
  67. }
  68. .ks-layer>div {
  69. background-color: #ccc;
  70. border: 1px solid #777;
  71. display: inline-block;
  72. padding: 10px;
  73. position: absolute;
  74. }
  75. .ks-layer-center>div {
  76. left: 50%;
  77. margin-left: -10px;
  78. margin-top: -10px;
  79. padding-left: 10px;
  80. padding-right: 10px;
  81. top: 50%;
  82. }
  83. .ks-layer-leftup>div {
  84. left: -1px;
  85. top: -1px;
  86. }
  87. .ks-layer-leftdown>div {
  88. bottom: -1px;
  89. left: -1px;
  90. }
  91. .ks-layer-rightup>div {
  92. right: -1px;
  93. top: -1px;
  94. }
  95. .ks-layer-down>div {
  96. bottom: 6%;
  97. left: 50%;
  98. margin-left: -10px;
  99. padding-left: 10px;
  100. padding-right: 10px;
  101. }
  102. .ks-layer-up>div {
  103. left: 50%;
  104. margin-left: -10px;
  105. margin-top: -1px;
  106. padding-left: 10px;
  107. padding-right: 10px;
  108. }
  109. .ks-layer-top>div {
  110. left: 50%;
  111. margin-left: -21px;
  112. padding-left: 20px;
  113. padding-right: 20px;
  114. top: 3px;
  115. }
  116. .ks-layer-bottom>div {
  117. left: 50%;
  118. margin-left: -21px;
  119. padding-left: 20px;
  120. padding-right: 20px;
  121. bottom: 3px;
  122. }
  123. .ks-layer-rightdown>div {
  124. bottom: -1px;
  125. right: -1px;
  126. }
  127. .ks-layer-box label {
  128. display: inline;
  129. margin: 0;
  130. padding: 0;
  131. }
  132. .ks-layer-radio label {
  133. font-size: 9px;
  134. width: 44px;
  135. }
  136. .ks-move-rest {
  137. border: 1px solid #777;
  138. height: 50px;
  139. margin-bottom: 18px;
  140. position: relative;
  141. top: 7px;
  142. width: 50px;
  143. }
  144. .ks-move-rest .black {
  145. background-color: #ccc;
  146. height: 100%;
  147. width: 100%;
  148. }
  149. .ks-move-left {
  150. border: 1px solid #777;
  151. height: 30px;
  152. left: -16px;
  153. margin-bottom: 28px;
  154. margin-top: 10px;
  155. position: relative;
  156. width: 65px;
  157. }
  158. .ks-move-left div {
  159. float: left;
  160. line-height: 28px;
  161. text-align: center;
  162. width: 31px;
  163. }
  164. .ks-move-left .black{
  165. background-color: #ccc;
  166. height: 28px;
  167. width: 32px;
  168. }
  169. .ks-move-top {
  170. border: 1px solid #777;
  171. height: 65px;
  172. width: 30px;
  173. margin-bottom: 5px;
  174. }
  175. .ks-move-top .black {
  176. background-color: #ccc;
  177. height: 32px;
  178. width: 28px;
  179. }
  180. .ks-move-top div {
  181. float: left;
  182. height: 31px;
  183. padding-top: 7px;
  184. text-align: center;
  185. width: 28px;
  186. }
  187. .topic_page a {
  188. color: #666;
  189. display: block;
  190. font-size: 80px;
  191. line-height: 480px;
  192. text-align: center;
  193. text-decoration: none;
  194. }
  195. .topic_page a:hover {
  196. color: #999;
  197. }
  198. #create_page {
  199. position: relative;
  200. top: -35px;
  201. }
  202. .times {
  203. color: #333;
  204. display: block;
  205. font-size: 16px;
  206. position: absolute;
  207. right: 10px;
  208. top: 6px;
  209. z-index: 1;
  210. }
  211. .edit {
  212. background-color: #fff;
  213. color: #777;
  214. font-size: 70px;
  215. height: 100%;
  216. opacity: 0.61;
  217. text-align: center;
  218. width: 100%;
  219. z-index: 10000;
  220. cursor: pointer;
  221. }
  222. .edit i {
  223. line-height: 480px;
  224. }
  225. .topic_button {
  226. z-index: 0;
  227. }
  228. .background_image {
  229. display: block;
  230. overflow: hidden;
  231. width: 100%;
  232. z-index: 0;
  233. position: absolute;
  234. }
  235. .ks-screen{width:220px;height:392px;background-color:#eee;float:left;margin-right:20px;position:relative;overflow:hidden;margin-bottom:20px;}
  236. .swiper-container {width:100%; height:100%; position:absolute;}
  237. .upper_image {position: absolute;}
  238. .button_image {position: absolute;}
  239. #set_screen {background-color: #fff;}
  240. .mask {background-color: #fff;height: 100%;opacity: 0.5;position: absolute;width: 100%;display:none;cursor: move;}
  241. .op {position: absolute;right: 5px;top: 5px;display:none;}
  242. .op div {border:1px solid #666;margin-bottom:5px;color:#666;cursor:pointer;font-family:arial;padding:0 5px;background-color:#fff;}
  243. .op div:hover {color:#000;}
  244. #qrcode {background-color: #fff;box-shadow: 0 0 30px #d2d2d2;color: red;left: 40%; padding: 5px;position: fixed;text-align: center;top: 10%;}
  245. #qrcode img {width: 250px;}
  246. #qrcode .closed {cursor: pointer;font-size: 14px; padding: 0 7px;position: absolute;right: 0;top: 0;}
  247. .ks-dd-dragging {position: relative;}
  248. .radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline {margin-left: 0px;}
  249. .image-layer {background-color: #F1F1F1;padding: 10px;position: relative;margin-bottom:5px;box-shadow:0 0 2px #d2d2d2;}
  250. .image-layer a{display: block;position: absolute;right: 5px;top: 10px;}
  251. .image-layer-set {margin-top: 10px; display:none;}
  252. .js_add_layer {bottom: -20px;position: absolute;}
  253. .create_page_button {text-align:center;color:#999;cursor:pointer;}
  254. .create_page_button:hover {color:#000;}
  255. .create_page_button i {font-size: 30px;position: relative;top: 40%;}
  256. .ks-input-page {background-color:#ccc;}
  257. .ks-topic-bg-image {background-position: 0 0;}
  258. </style>
  259. <div id="activity_container">
  260. <div class="activity_center">
  261. <{include file="./admin/activity/common_nav.html"}>
  262. <form id="activity_form">
  263. <input name="events_id" type="hidden" value="<{$events_Data.events.id}>">
  264. <div id="screens" class="panel panel-default">
  265. <div class="panel-body">
  266. <{foreach from=$pageData item=item key=key}>
  267. <{if !$item.input_page}>
  268. <div class="ks-screen ks-screen-p">
  269. <{if $item.bgimage_url}>
  270. <img class="background_image" style="" src="<{$item.bgimage_url}>" >
  271. <{/if}>
  272. <{foreach from=$item.layers item=layer}>
  273. <{if $layer.url}>
  274. <{if $layer.link}>
  275. <a href="<{$item.button_link}>">
  276. <{/if}>
  277. <img class="upper_image" style=
  278. "
  279. width:<{$layer.width}>px;
  280. height:<{$layer.height}>px;
  281. <{$layer.style}>
  282. "
  283. src="<{$layer.url}>"
  284. >
  285. <{if $layer.link}>
  286. </a>
  287. <{/if}>
  288. <{/if}>
  289. <{if $layer.video_url}>
  290. <div class="layer_anim" style="width:<{$layer.video_width}>px;height:<{$layer.video_height}>px;<{$layer.style}>;background-color:#ccc;color:#fff;font-size:20px;text-align:center;line-height:<{$layer.video_height}>px;" >视频</div>
  291. <{/if}>
  292. <{/foreach}>
  293. <input name="p[]" type="hidden" value='<{$item.json}>' />
  294. <div class="mask"></div>
  295. <div class="op">
  296. <div class="modify">修改</div>
  297. <div class="delete">删除</div>
  298. </div>
  299. </div>
  300. <{else}>
  301. <div class="ks-screen ks-screen-p ks-input-page">
  302. <div style="position:absolute;top:45%;text-align:center;width:100%;color:#999;">表单页</div>
  303. <input name="p[]" type="hidden" value='<{$item.json}>' />
  304. <div class="mask"></div>
  305. <div class="op">
  306. <div class="delete">删除</div>
  307. </div>
  308. </div>
  309. <{/if}>
  310. <{/foreach}>
  311. <div id="ks_create_screen" class="ks-screen create_page_button create_topic_page_button">
  312. <i class="fa fa-plus"></i>
  313. </div>
  314. </div>
  315. <div class="clear"></div>
  316. </div>
  317. <a id="save_submit" href="javascript:;" class="button button-3d button-primary button-rounded"><i class="fa fa-refresh fa-spin" style="display:none;"></i> 保存</a>
  318. </form>
  319. <div class="clear"></div>
  320. <div class="create_page_box panel panel-default" style="margin-top: 40px;">
  321. <div class="panel-body">
  322. <div class="num_page">N1</div>
  323. <a href="javascript:;" class="times create_page_closed"> x </a>
  324. <div class="row">
  325. <div class="col-md-6" style="position: sticky; top: 50px;">
  326. <!-- 可视化页面 -->
  327. <div class="template_page"></div>
  328. </div>
  329. <!-- 表单 begin -->
  330. <div class="col-md-6">
  331. <div class="block_15"></div>
  332. <div class="create_page_input_box"></div>
  333. <a href="javascript:;" class="js_add_layer">增加一个图层 +</a>
  334. </div>
  335. <!-- 表单 end -->
  336. </div>
  337. <p></p>
  338. <div style="text-align:center;margin-top:40px;">
  339. <a href="javascript:;" class="create_page_submit button button-primary button-rounded">保存</a>
  340. <a href="javascript:;" class="create_page_closed button button-rounded">取消</a>
  341. </div>
  342. </div>
  343. </div>
  344. </div>
  345. <script>
  346. var tmpPG, tmpPageData = {'layers': {}}, modify_ks_screen;
  347. KISSY.use('node, io, vogue/topic-page-2, json, event, dom, dd, dd/plugin/scroll, dd/plugin/proxy, xtemplate', function (S, Node, IO, TopicPage, JSON, Event, DOM, DD, Scroll, Proxy, XTemplate) {
  348. var $ = S.all;
  349. var K = KindEditor;
  350. tmpPG = new TopicPage('.template_page');
  351. //创建专题页面
  352. $(".create_topic_page_button").on('click', function () {
  353. create_page_box_show();
  354. var numberPage = $("#screens .ks-screen-p").length;
  355. $(".num_page").text('N' + ++numberPage);
  356. var id = genid();
  357. var data = {'id': id};
  358. var render = getBackgroundInputTpl(data);
  359. $(".create_page_input_box").append(render);
  360. bind_upload(id);
  361. });
  362. //创建表单页面
  363. /*
  364. $(".create_input_page_button").on('click', function () {
  365. if ($(".ks-input-page").length > 0) {
  366. alert('只能创建一个表单页面');
  367. return;
  368. }
  369. var data = '{"input_page":1}';
  370. $('<div class="ks-screen ks-screen-p ks-input-page">\
  371. <div style="position:absolute;top:45%;text-align:center;width:100%;color:#999;">表单页</div>\
  372. <input name="p[]" type="hidden" value=\''+data+'\' />\
  373. <div class="mask"></div>\
  374. <div class="op">\
  375. <div class="delete">删除</div>\
  376. </div>\
  377. </div>\
  378. ').insertBefore($("#ks_create_screen"));
  379. });
  380. */
  381. //增加图层
  382. $(".js_add_layer").on('click', function () {
  383. var id = genid();
  384. var key = $(".create_page_input_box .image-layer").length - 1;
  385. var data = {'id': id, 'key': key};
  386. var render = getLayerInputTpl(data);
  387. $(".create_page_input_box").append(render);
  388. bind_upload(id, key);
  389. });
  390. //关闭创建页面
  391. $(".create_page_closed").on('click', function () {
  392. create_page_box_hide();
  393. });
  394. //显示修改、删除按钮
  395. Event.delegate(document,'mouseenter','.ks-screen-p', function (e) {
  396. $(".mask", $(e.currentTarget)).show();
  397. $(".op", $(e.currentTarget)).show();
  398. });
  399. //隐藏修改、删除按钮
  400. Event.delegate(document,'mouseleave','.ks-screen-p', function (e) {
  401. $(".mask", $(e.currentTarget)).hide();
  402. $(".op", $(e.currentTarget)).hide();
  403. });
  404. //修改页面
  405. Event.delegate(document,'click','.op .modify', function (e) {
  406. var ks_screen_p = $(e.currentTarget).parent().parent();
  407. var numberPage = DOM.index("#screens .ks-screen", ks_screen_p);
  408. $(".num_page").text('N' + ++numberPage);
  409. var data = JSON.parse($('input', ks_screen_p).val());
  410. data.modify_screen = ks_screen_p;
  411. create_page_box_show();
  412. tmpPageData = data;
  413. tmpPG.setData(tmpPageData).render();
  414. //渲染背景表单
  415. var id = genid();
  416. var render = getBackgroundInputTpl({'id': id, 'bgimage_url': tmpPageData.bgimage_url, 'bgimage_isShow': tmpPageData.bgimage_isShow});
  417. $(".create_page_input_box").append(render);
  418. bind_upload(id);
  419. //渲染图层表单
  420. for (var key in tmpPageData.layers) {
  421. var id = genid();
  422. var key = $(".create_page_input_box .image-layer").length - 1;
  423. var data = tmpPageData.layers[key];
  424. data.id = id;
  425. data.key = key;
  426. var render = getLayerInputTpl(data);
  427. $(".create_page_input_box").append(render);
  428. bind_upload(id, key);
  429. }
  430. });
  431. //删除页面
  432. Event.delegate(document,'click','.op .delete', function (e) {
  433. var ks_screen_p = $(e.currentTarget).parent().parent();
  434. ks_screen_p.remove();
  435. });
  436. // 展开图层选项卡
  437. Event.delegate(document,'click','.switch_btn', function (e) {
  438. $(e.currentTarget).parent(2).all('.image-layer-set').toggle();
  439. });
  440. //不显示背景图片
  441. Event.delegate(document,'click','.bgimage_checkbox', function (e) {
  442. var self = $(e.currentTarget);
  443. if (S.isUndefined(self.attr('checked'))) {
  444. tmpPageData.bgimage_isShow = false;
  445. tmpPG.setData(tmpPageData).render();
  446. } else {
  447. tmpPageData.bgimage_isShow = true;
  448. tmpPG.setData(tmpPageData).render();
  449. }
  450. });
  451. //不显示图层
  452. Event.delegate(document,'click','.layer_checkbox', function (e) {
  453. var self = $(e.currentTarget);
  454. var key = $(e.currentTarget).attr('data-key');
  455. if (S.isUndefined(self.attr('checked'))) {
  456. if (S.isUndefined(tmpPageData.layers[key])) {
  457. tmpPageData.layers[key] = {};
  458. }
  459. tmpPageData.layers[key].isShow = false;
  460. tmpPG.setData(tmpPageData).render();
  461. } else {
  462. tmpPageData.layers[key].isShow = true;
  463. tmpPG.setData(tmpPageData).render();
  464. }
  465. });
  466. //布局
  467. Event.delegate(document,'click','.position', function (e) {
  468. var self = $(e.currentTarget);
  469. var key = $(e.currentTarget).attr('data-key');
  470. if (S.isUndefined(tmpPageData.layers[key])) {
  471. tmpPageData.layers[key] = {};
  472. }
  473. tmpPageData.layers[key].position = self.val();
  474. tmpPG.setData(tmpPageData).render();
  475. });
  476. //视频
  477. Event.delegate(document,'focusout','.video_url,.video_width,.video_height', function (e) {
  478. var self = $(e.currentTarget);
  479. var key = $(e.currentTarget).attr('data-key');
  480. if (S.isUndefined(tmpPageData.layers[key])) {
  481. tmpPageData.layers[key] = {};
  482. }
  483. var parent = self.parent(2);
  484. var image_layer = self.parent('.image-layer');
  485. var video_url = parent.all('.video_url').val();
  486. if (!video_url) {
  487. delete tmpPageData.layers[key].video_url;
  488. delete tmpPageData.layers[key].video_width;
  489. delete tmpPageData.layers[key].video_height;
  490. tmpPG.setData(tmpPageData).render();
  491. // 标识下图片图层
  492. image_layer.all('img').show();
  493. image_layer.all('.ke-inline-block').show();
  494. image_layer.all('small').show();
  495. image_layer.all('.span-video').remove();
  496. return ;
  497. }
  498. //清空图片信息
  499. delete tmpPageData.layers[key].url;
  500. delete tmpPageData.layers[key].width;
  501. delete tmpPageData.layers[key].height;
  502. //添加视频信息
  503. tmpPageData.layers[key].video_url = video_url;
  504. tmpPageData.layers[key].video_width = parent.all('.video_width').val();
  505. tmpPageData.layers[key].video_height = parent.all('.video_height').val();
  506. //标识下视频图层
  507. if (image_layer.all('.span-video').length <= 0) {
  508. image_layer.all('img').hide().attr('src', '');
  509. image_layer.all('.ke-inline-block').hide();
  510. image_layer.all('small').hide();
  511. $('<span class="span-video">视频</span>').insertBefore(image_layer.all('img'));
  512. }
  513. tmpPG.setData(tmpPageData).render();
  514. });
  515. //动作
  516. Event.delegate(document,'click','.action', function (e) {
  517. var self = $(e.currentTarget);
  518. var key = $(e.currentTarget).attr('data-key');
  519. if (S.isUndefined(tmpPageData.layers[key])) {
  520. tmpPageData.layers[key] = {};
  521. }
  522. tmpPageData.layers[key].action = self.val();
  523. tmpPG.setData(tmpPageData).render();
  524. });
  525. //链接
  526. Event.delegate(document,'focusout','.link', function (e) {
  527. var self = $(e.currentTarget);
  528. var key = $(e.currentTarget).attr('data-key');
  529. if (S.isUndefined(tmpPageData.layers[key])) {
  530. tmpPageData.layers[key] = {};
  531. }
  532. tmpPageData.layers[key].link = self.val();
  533. tmpPG.setData(tmpPageData).render();
  534. });
  535. //使用表单
  536. Event.delegate(document,'click','.input_btn', function (e) {
  537. var self = $(e.currentTarget);
  538. var key = $(e.currentTarget).attr('data-key');
  539. if (S.isUndefined(tmpPageData.layers[key])) {
  540. tmpPageData.layers[key] = {};
  541. }
  542. if (self.attr('checked')) {
  543. tmpPageData.layers[key].input_btn = 'yes';
  544. } else {
  545. tmpPageData.layers[key].input_btn = 0;
  546. }
  547. tmpPG.setData(tmpPageData).render();
  548. });
  549. /** 提交单页面 **/
  550. $(".create_page_submit").on('click', function () {
  551. var data = tmpPG.getData();
  552. if (S.isEmptyObject(data)) {
  553. alert('请先设置页面内容!');
  554. return false;
  555. }
  556. //修改的页面
  557. var modify_screen = {};
  558. if (!S.isUndefined(data.modify_screen) && !S.isEmptyObject(data.modify_screen)) {
  559. modify_screen = data.modify_screen;
  560. delete data.modify_screen;
  561. }
  562. new IO({
  563. type: "post"
  564. , url: VG.conf.root_domain + '/?c=Admin_Activity_SetPage&a=GetPreviewPage'
  565. , data: {'pageData': JSON.stringify(data)}
  566. , success: function (data) {
  567. if (data.ok) { //ok
  568. var preview_page_html = data.msg;
  569. if (!S.isEmptyObject(modify_screen)) { //修改
  570. modify_screen.replaceWith(preview_page_html);
  571. } else { //创建
  572. $(preview_page_html).insertBefore($("#ks_create_screen"));
  573. }
  574. closed_create_page();
  575. } else {
  576. alert('操作失败,原因:'+data.msg);
  577. }
  578. return false;
  579. }
  580. , error: function (NULL, textStatus) {
  581. alert("请求服务器失败,原因:"+textStatus);
  582. }
  583. , dataType: "json"
  584. });
  585. });
  586. /** 保存 **/
  587. var save_submit_status = false;
  588. function save_submit_active() {
  589. save_submit_status = true;
  590. $("#save_submit").addClass('active').all('i').show();
  591. }
  592. function save_submit_default() {
  593. save_submit_status = false;
  594. $("#save_submit").removeClass('active').all('i').hide();
  595. }
  596. $("#save_submit").on('click', function () {
  597. if (save_submit_status) {
  598. return false;
  599. }
  600. save_submit_active();
  601. var pageData = IO.serialize("#activity_form");
  602. new IO({
  603. type: "post"
  604. , url: VG.conf.root_domain + '/?c=Admin_Activity_SetPage&a=ReqUpCutScreen'
  605. , data: pageData
  606. , success: function (data) {
  607. if (data.ok) { //ok
  608. alert('保存成功');
  609. window.location.reload();
  610. } else {
  611. alert('操作失败,原因:'+data.msg);
  612. save_submit_default();
  613. }
  614. return false;
  615. }
  616. , error: function (NULL, textStatus) {
  617. alert("请求服务器失败,原因:"+textStatus);
  618. save_submit_default();
  619. }
  620. , dataType: "json"
  621. });
  622. });
  623. function closed_create_page() {
  624. create_page_box_hide();
  625. }
  626. // 显示创建页面
  627. function create_page_box_show() {
  628. $('.create_page_box').show().attr('data-status', 'show');
  629. $(".create_page_input_box").empty();
  630. tmpPageData = {'layers': {}};
  631. tmpPG.setData(tmpPageData).render();
  632. $(window).animate({
  633. scrollTop:$(".create_page_box").offset().top
  634. }, 0.3, "easeOut");
  635. }
  636. // 隐藏创建页面
  637. function create_page_box_hide() {
  638. $(".create_page_box").hide().attr('data-status', 'hide');
  639. $(".create_page_input_box").empty();
  640. tmpPageData = {'layers': {}};
  641. tmpPG.setData(tmpPageData).render();
  642. }
  643. // 获取背景表单模板 !!!data中必须要有的字段 id
  644. function getBackgroundInputTpl(data) {
  645. var tpl = $("#background_input_tpl").val();
  646. var render = new XTemplate(tpl).render(data);
  647. return render;
  648. }
  649. // 获取图层表单模板 !!!data中必须要有的字段 id、key
  650. function getLayerInputTpl(data) {
  651. var tpl = $("#layer_input_tpl").val();
  652. var render = new XTemplate(tpl).render(data);
  653. return render;
  654. }
  655. // 生成唯一串
  656. function genid() {
  657. return Math.floor(2147483648 * Math.random()).toString(36);
  658. }
  659. /**
  660. * 绑定上传按钮
  661. * @param string id 选择器唯一标示
  662. * @param int key 图片的key(第几个图层)
  663. */
  664. function bind_upload(id, key) {
  665. var image_checkbox_selector = '.image_'+id+'_checkbox',
  666. image_imgtag_selector = '.image_'+id+'_imgtag',
  667. upload_btn_selector = '.image_'+id+'_upload';
  668. var uploadbutton = K.uploadbutton({
  669. button : K(upload_btn_selector)[0],
  670. fieldName : 'imgFile',
  671. url : VG.conf.root_domain + '/?c=kindeditor&a=updateJson&dir=image&size=1',
  672. afterUpload : function(data) {
  673. if (data.error === 0) {
  674. $(image_imgtag_selector).attr('src', data.url);
  675. $(image_checkbox_selector).attr('checked', true);
  676. if ($(image_checkbox_selector).attr('data-type') == 'bgimage') {
  677. tmpPageData.bgimage_url = data.url;
  678. } else {
  679. if (S.isUndefined(tmpPageData.layers[key])) {
  680. tmpPageData.layers[key] = {};
  681. }
  682. tmpPageData.layers[key].url = data.url;
  683. tmpPageData.layers[key].width = data.width;
  684. tmpPageData.layers[key].height = data.height;
  685. }
  686. tmpPG.setData(tmpPageData).render();
  687. } else {
  688. alert(data.message);
  689. }
  690. },
  691. afterError : function(str) {
  692. alert('自定义错误信息: ' + str);
  693. }
  694. });
  695. uploadbutton.fileBox.change(function(e) {
  696. uploadbutton.submit();
  697. });
  698. }
  699. /*拖拽产品*/
  700. var DraggableDelegate = DD.DraggableDelegate, //拖拽
  701. DroppableDelegate = DD.DroppableDelegate; //放置
  702. //拖拽节点
  703. var dragDelegate = new DraggableDelegate({
  704. container:"#screens .panel-body",
  705. move: true,
  706. selector:'.ks-screen-p',
  707. plugins: [
  708. new Proxy({
  709. moveOnEnd: false,
  710. destroyOnEnd: true
  711. }),
  712. new Scroll()
  713. ]
  714. });
  715. //放置节点
  716. var dropDelegate = new DroppableDelegate({
  717. container:"#screens .panel-body",
  718. selector:'.ks-screen-p'
  719. });
  720. //在droppable实例上移动时触发
  721. dragDelegate.on("dragover", function (ev) {
  722. var drag = ev.drag;
  723. var drop = ev.drop;
  724. var dragNode = drag.get("dragNode"),
  725. dropNode = drop.get("node");
  726. //横轴中线位置
  727. var middleDropX = (dropNode.offset().left * 2 + dropNode.width()) / 2;
  728. //当前鼠标位置
  729. if (ev.pageX > middleDropX) {
  730. var next = dropNode.next();
  731. if (next && next[0] == dragNode[0]) {
  732. } else {
  733. dragNode.insertAfter(dropNode);
  734. }
  735. } else {
  736. var prev = dropNode.prev();
  737. if (prev && prev[0] == dragNode[0]) {
  738. } else {
  739. dragNode.insertBefore(dropNode);
  740. }
  741. }
  742. });
  743. });
  744. </script>
  745. <!-- 背景表单模板 -->
  746. <textarea id="background_input_tpl" style="display:none;">
  747. <div class="image-layer">
  748. <div class="form-group" style="margin-bottom:0px;">
  749. <input class="image_{{id}}_checkbox bgimage_checkbox" type="checkbox" data-type="bgimage" {{#if isShow!==false}}checked{{/if}} >
  750. <img class="image_{{id}}_imgtag" src="{{bgimage_url}}" style="width:30px;height:20px;background-color:#ccc;">
  751. <input class="image_{{id}}_upload" type="button" value="选择背景图片" />
  752. <small class="text-danger">JPG、PNG,640*1140,小于100k</small>
  753. </div>
  754. </div>
  755. </textarea>
  756. <!-- 图层表单模板 -->
  757. <textarea id="layer_input_tpl" style="display:none;">
  758. <div class="image-layer">
  759. <div class="form-group" style="margin-bottom:0px;">
  760. <input class="image_{{id}}_checkbox layer_checkbox" type="checkbox" data-type="layer" data-key="{{key}}" {{#if isShow!==false}}checked{{/if}} >
  761. {{#if video_url}}
  762. <span class="span-video">视频</span>
  763. {{/if}}
  764. <img class="image_{{id}}_imgtag" src="{{url}}" style="width:30px;height:20px;background-color:#ccc;{{#if video_url}}display:none;{{/if}}">
  765. <input class="image_{{id}}_upload" type="button" value="选择图片" />
  766. <small class="text-danger" {{#if video_url}}style="display:none;"{{/if}}>仅支持PNG透明图片,小于30k</small>
  767. <a class="switch_btn" href="javascript:;">设置</a>
  768. </div>
  769. <div class="image-layer-set">
  770. <div class="form-group"><label class="control-label rowlabel">或填写视频地址:</label>
  771. <div class="form-inline">
  772. <div class="form-group">
  773. <input class="video_url form-control" type="text" style="width:200px;" data-key="{{key}}" value="{{video_url}}" placeholder="填写视频flash地址">
  774. </div>
  775. <div class="form-group">
  776. <input class="video_width form-control" type="text" style="width:57px;" data-key="{{key}}" value="{{#if video_width}}{{video_width}}{{else}}300{{/if}}" placeholder="宽(px)">
  777. </div>
  778. <div class="form-group">
  779. <input class="video_height form-control" type="text" style="width:57px;" data-key="{{key}}" value="{{#if video_height}}{{video_height}}{{else}}250{{/if}}" placeholder="高(px)">
  780. </div>
  781. </div>
  782. </div>
  783. <div class="form-group">
  784. <label class="control-label rowlabel">布局:</label>
  785. <div class="ks-layer-box">
  786. <label for="layer_center_{{id}}"><div class="ks-layer ks-layer-center"><div></div></div></label>
  787. <label for="layer_up_{{id}}"><div class="ks-layer ks-layer-up"><div></div></div></label>
  788. <label for="layer_down_{{id}}"><div class="ks-layer ks-layer-down"><div></div></div></label>
  789. <label for="layer_leftup_{{id}}"><div class="ks-layer ks-layer-leftup"><div></div></div></label>
  790. <label for="layer_leftdown_{{id}}"><div class="ks-layer ks-layer-leftdown"><div></div></div></label>
  791. <label for="layer_rightup_{{id}}"><div class="ks-layer ks-layer-rightup"><div></div></div></label>
  792. <label for="layer_rightbottom_{{id}}"><div class="ks-layer ks-layer-rightdown"><div></div></div></label>
  793. </div>
  794. <div class="ks-layer-radio clear">
  795. <label class="radio-inline">
  796. <input class="position" name="position_{{key}}" type="radio" id="layer_center_{{id}}" value="center" data-key="{{key}}" {{#if position==='center'}}checked{{/if}} > 居中
  797. </label>
  798. <label class="radio-inline">
  799. <input class="position" name="position_{{key}}" type="radio" id="layer_up_{{id}}" value="up" data-key="{{key}}" {{#if position==='up'}}checked{{/if}} > 居上
  800. </label>
  801. <label class="radio-inline">
  802. <input class="position" name="position_{{key}}" type="radio" id="layer_down_{{id}}" value="down" data-key="{{key}}" {{#if position==='down'}}checked{{/if}} > 居下
  803. </label>
  804. <label class="radio-inline">
  805. <input class="position" name="position_{{key}}" type="radio" id="layer_leftup_{{id}}" value="leftup" data-key="{{key}}" {{#if position==='leftup'}}checked{{/if}} > 左上
  806. </label>
  807. <label class="radio-inline">
  808. <input class="position" name="position_{{key}}" type="radio" id="layer_leftdown_{{id}}" value="leftdown" data-key="{{key}}" {{#if position==='leftdown'}}checked{{/if}} > 左下
  809. </label>
  810. <label class="radio-inline">
  811. <input class="position" name="position_{{key}}" type="radio" id="layer_rightup_{{id}}" value="rightup" data-key="{{key}}" {{#if position==='rightup'}}checked{{/if}} > 右上
  812. </label>
  813. <label class="radio-inline">
  814. <input class="position" name="position_{{key}}" type="radio" id="layer_rightbottom_{{id}}" value="rightdown" data-key="{{key}}" {{#if position==='rightdown'}}checked{{/if}} > 右下
  815. </label>
  816. </div>
  817. </div>
  818. <div class="form-group">
  819. <label class="control-label rowlabel">动作:</label>
  820. <div class="ks-action-radio clear" style="font-size:9px;">
  821. <label class="radio-inline">
  822. <div>•</div>
  823. <input name="action_{{key}}" class="action" type="radio" value="rest" data-key="{{key}}" {{#if action==='rest'}}checked{{/if}} > 静止
  824. </label>
  825. <label class="radio-inline">
  826. <div>←</div>
  827. <input name="action_{{key}}" class="action" type="radio" value="left" data-key="{{key}}" {{#if action==='left'}}checked{{/if}} > 水平移动
  828. </label>
  829. <label class="radio-inline">
  830. <div>↑</div>
  831. <input name="action_{{key}}" class="action" type="radio" value="up" data-key="{{key}}" {{#if action==='up'}}checked{{/if}} > 纵向移动
  832. </label>
  833. </div>
  834. </div>
  835. <div class="form-group">
  836. <div class="row">
  837. <div class="col-md-6">
  838. <label class="control-label rowlabel">使用图片链接:</label>
  839. <input class="link form-control" type="text" style="width:300px;" data-key="{{key}}" value="{{link}}">
  840. </div>
  841. </div>
  842. </div>
  843. <div class="form-group">
  844. <div class="checkbox">
  845. <label class="control-label rowlabel">使用表单浮层(使用互动设置中的表单)<input class="input_btn" type="checkbox" data-key="{{key}}" value="yes" {{#if input_btn==='yes'}}checked{{/if}}></label>
  846. </div>
  847. </div>
  848. </div>
  849. </div>
  850. </textarea>
  851. <{include file="./admin/activity/common_right.html"}>
  852. <div style="clear:both;"></div>
  853. </div>
  854. <{include file="./admin/bottom.html"}>