qrcodeconfig.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <?php $shoname_name = D('Home/Front')->get_config_by_name('shoname'); ?>
  6. <title><?php echo $shoname; ?></title>
  7. <link rel="shortcut icon" href="" />
  8. <meta name="renderer" content="webkit">
  9. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  10. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  11. <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
  12. <!-- 让IE8/9支持媒体查询,从而兼容栅格 -->
  13. <!--[if lt IE 9]>
  14. <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  15. <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  16. <![endif]-->
  17. <link href="./resource/css/bootstrap.min.css?v=201903260001" rel="stylesheet">
  18. <link href="./resource/css/common.css?v=201903260001" rel="stylesheet">
  19. <script type="text/javascript">
  20. window.sysinfo = {
  21. <?php if (!empty($_W['uniacid']) ){ ?>'uniacid': '{$_W['uniacid']}',<?php } ?>
  22. <?php if( !empty($_W['acid']) ){ ?>'acid': '{$_W['acid']}',<?php } ?>
  23. <?php if (!empty($_W['openid']) ) { ?>'openid': '{$_W['openid']}',<?php } ?>
  24. <?php if( !empty($_W['uid']) ) { ?>'uid': '{$_W['uid']}',<?php } ?>
  25. 'isfounder': <?php if (!empty($_W['isfounder']) ) { ?>1<?php }else{ ?>0<?php } ?>,
  26. 'siteroot': '{$_W['siteroot']}',
  27. 'siteurl': '{$_W['siteurl']}',
  28. 'attachurl': '{$_W['attachurl']}',
  29. 'attachurl_local': '{$_W['attachurl_local']}',
  30. 'attachurl_remote': '{$_W['attachurl_remote']}',
  31. 'module' : {'url' : '<?php if( defined('MODULE_URL') ) { ?>{MODULE_URL}<?php } ?>', 'name' : '<?php if (defined('IN_MODULE') ) { ?>{IN_MODULE}<?php } ?>'},
  32. 'cookie' : {'pre': ''},
  33. 'account' : {:json_encode($_W['account'])},
  34. };
  35. </script>
  36. <script type="text/javascript" src="./resource/js/lib/jquery-1.11.1.min.js"></script>
  37. <script type="text/javascript" src="./resource/js/lib/bootstrap.min.js"></script>
  38. <script type="text/javascript" src="./resource/js/app/util.js?v=201903260001"></script>
  39. <script type="text/javascript" src="./resource/js/app/common.min.js?v=201903260001"></script>
  40. <script type="text/javascript" src="./resource/js/require.js?v=201903260001"></script>
  41. <script type="text/javascript" src="./resource/js/lib/jquery.nice-select.js?v=201903260001"></script>
  42. <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
  43. <link href="/static/css/snailfish.css" rel="stylesheet">
  44. <style>
  45. .daterangepicker select.ampmselect, .daterangepicker select.hourselect, .daterangepicker select.minuteselect {
  46. width: auto!important;
  47. }
  48. .img-40{width:40px;height:40px;}
  49. </style>
  50. <script type="text/javascript" charset="utf-8" src="/static/Formbuild/Public/js/jquery-1.7.2.min.js?2024"></script>
  51. <script type="text/javascript" charset="utf-8" src="/static/js/Tdrag.min.js"></script>
  52. <script type="text/javascript" src="/static/Formbuild/Public/js/formbuild/bootstrap/js/bootstrap.min.js?2024"></script>
  53. <style>
  54. #app-inner {
  55. background: #fff;
  56. margin: 10px 10px 0 10px;
  57. padding: 15px;
  58. min-width: 750px;
  59. min-height: 500px;
  60. box-shadow: 0 0 1px 0 rgba(0,0,0,0.2);
  61. }
  62. .margin-b-10 {
  63. margin-bottom: 10px;
  64. }
  65. .btn-danger {
  66. background-color: #ff595f;
  67. border: 1px solid #ff595f;
  68. color: #FFF;
  69. }
  70. .app-preview {
  71. float: left;
  72. width: 344px;
  73. border: 1px solid #ddd;
  74. border-radius: 10px;
  75. background: #fff;
  76. padding: 10px;
  77. overflow: hidden;
  78. margin-bottom: 40px;
  79. }
  80. .app-preview .app-header {
  81. height: 44px;
  82. background: #fff;
  83. position: relative;
  84. }
  85. .app-preview .app-header:before {
  86. content: "";
  87. position: absolute;
  88. top: 15px;
  89. left: 112px;
  90. height: 8px;
  91. width: 8px;
  92. background: #ddd;
  93. border-radius: 8px;
  94. }
  95. .app-preview .app-header:after {
  96. content: "";
  97. position: absolute;
  98. top: 15px;
  99. left: 128px;
  100. height: 8px;
  101. width: 50px;
  102. background: #ddd;
  103. border-radius: 8px;
  104. }
  105. .app-preview .app-footer {
  106. height: 24px;
  107. width: 60px;
  108. margin: 15px auto 5px;
  109. border: 1px solid #ddd;
  110. border-radius: 5px;
  111. }
  112. .app-preview .title {
  113. height: 61px;
  114. background: url({php echo SNAILFISH_LOCAL}static/images/titlebar.png) 0 0 no-repeat;
  115. background-size: 100% auto;
  116. padding: 0 50px;
  117. font-size: 15px;
  118. color: #fff;
  119. text-align: center;
  120. line-height: 78px;
  121. cursor: default;
  122. overflow: hidden;
  123. display: block;
  124. white-space: nowrap;
  125. text-overflow: ellipsis;
  126. }
  127. .app-preview .main {
  128. position: relative;
  129. overflow: hidden;
  130. min-height: 504px;
  131. border: 1px solid #ddd;
  132. border-top: 0;
  133. margin:0px;
  134. }
  135. .postera .drag {
  136. position: absolute;
  137. width: 80px;
  138. height: 80px;
  139. border: 1px solid #000;
  140. }
  141. .postera .drag.drag-background {
  142. width: 100%;
  143. height: 100%;
  144. border: none;
  145. }
  146. .postera .drag img {
  147. position: absolute;
  148. z-index: 0;
  149. width: 100%;
  150. height: 100%;
  151. }
  152. .app-action {
  153. width: 946px;
  154. background: #fdfdfd;
  155. left: 245px;
  156. border: 1px solid #ddd;
  157. border-radius: 3px;
  158. position: fixed;
  159. bottom: 0;
  160. box-shadow: 0 0 8px rgba(0,0,0,0.1);
  161. z-index: 99999;
  162. }
  163. .app-action .parts {
  164. padding: 10px 10px 5px;
  165. border-bottom: 1px dotted #ddd;
  166. }
  167. .app-action .action {
  168. padding: 10px;
  169. text-align: right;
  170. position: relative;
  171. font-size: 12px;
  172. }
  173. .app-action .parts {
  174. padding: 10px 10px 5px;
  175. border-bottom: 1px dotted #ddd;
  176. }
  177. .app-action .parts nav {
  178. width: 92px;
  179. padding: 5px 0;
  180. margin: 0 5px 5px 0;
  181. text-align: center;
  182. color: inherit;
  183. }
  184. .btn {
  185. border-radius: 3px;
  186. }
  187. .app-form-right{float:left;margin-left:10px;width:620px;min-height:300px;}
  188. .app-editor {
  189. float: left;
  190. width: 600px;
  191. background: #fdfdfd;
  192. padding: 15px 10px;
  193. margin-left: 18px;
  194. border: 1px solid #ddd;
  195. border-radius: 5px;
  196. margin-top: 55px;
  197. margin-bottom: 100px;
  198. }
  199. .app-editor .editor-arrow {
  200. height: 0;
  201. position: relative;
  202. }
  203. .app-editor .editor-arrow:before {
  204. position: absolute;
  205. font-family: simsun;
  206. content: "";
  207. top: 8px;
  208. left: -21px;
  209. display: block;
  210. width: 9px;
  211. height: 18px;
  212. font-size: 24px;
  213. color: #fdfdfd;
  214. z-index: 111;
  215. }
  216. .app-editor .editor-arrow:after {
  217. position: absolute;
  218. font-family: simsun;
  219. content: "";
  220. top: 8px;
  221. left: -22px;
  222. color: #ddd;
  223. z-index: 11;
  224. display: block;
  225. width: 9px;
  226. height: 18px;
  227. font-size: 24px;
  228. }
  229. .avatar{ width:66px;height:66px; line-height:66px;text-align:center;color:#fff; background-color:#02a9f3;border-radius:100%; }
  230. .qrcodes {width:90px;height:90px; text-align:center;line-height:90px; background-color:#009688;color:#fff;}
  231. .username{width:100px;height:22.5px;line-height:22.5px;background-color:red;color:#fff;}
  232. .message-box{position:fixed; margin:auto; height:32px; line-height:32px; top:-32px; width:100%; text-align:center; z-index:111111111; transition-duration: 300ms; -webkit-transition-duration: 300ms; opacity:0;}
  233. .message-box.in{top:0; opacity: 1;}
  234. .message-box .msg{display:inline-block; white-space:nowrap; height:32px; line-height:32px; color:#fff; font-size:14px; min-width: 350px;}
  235. .message-box .msg-success{background:#1ab394}
  236. .message-box .msg-error{background:#ed5565}
  237. .message-box .msg-info{background:#eaa000}
  238. </style>
  239. </head>
  240. <body layadmin-themealias="default">
  241. <div class="clearfix" style="margin-top:10px;">
  242. <div class="app-preview">
  243. <div class="app-header"></div>
  244. <div class="app-body">
  245. <div class="title" id="page">海报名称</div>
  246. <div class="main postera" id="app-preview">
  247. <div class="drag drag-background selected">
  248. <?php if(!empty($data['distribution_img_src'])){ ?>
  249. <img src="<?php echo tomedia($data['distribution_img_src']); ?>" alt="">
  250. <?php }else{ ?>
  251. <img src="http://w7.shiziyu888.com/attachment/images/5/2018/09/JoRkrtjXQTwvJTQwPssokqPsgivKv4.jpg" alt="">
  252. <?php } ?>
  253. </div>
  254. <div class="avatar" <?php if( !empty($data['distribution_avatar_left']) || !empty($data['distribution_avatar_top']) ){ ?> style="position:absolute;left:{$data['distribution_avatar_left']}px;top:{$data['distribution_avatar_top']}px;" <?php } ?>>头像</div>
  255. <div class="qrcodes" <?php if(!empty($data['distribution_qrcodes_left']) || !empty($data['distribution_qrcodes_top']) ){ ?> style="position:absolute;left:{$data['distribution_qrcodes_left']}px;top:{$data['distribution_qrcodes_top']}px;" <?php } ?>>二维码</div>
  256. <div class="username" <?php if(!empty($data['distribution_username_left']) || !empty($data['distribution_username_top']) ){ ?> style="position:absolute;left:{$data['distribution_username_left']}px;top:{$data['distribution_username_top']}px;" <?php } ?>>会员昵称</div>
  257. </div>
  258. </div>
  259. <div class="app-footer">
  260. </div>
  261. </div>
  262. <div class="app-form-right">
  263. <div class="app-editor form-horizontal" id="app-editor">
  264. <div class="editor-arrow"></div>
  265. <div class="inner">
  266. <div class="form-group">
  267. <div class="col-sm-3 control-label">海报背景</div>
  268. <div class="col-sm-9" id="bg_img">
  269. {:tpl_form_field_image2('distribu_member_image', $data['distribution_img_src'])}
  270. <span class="help-block">背景图片尺寸:640*1008</span>
  271. </div>
  272. </div>
  273. <div class="form-group" >
  274. <label class="col-sm-3 control-label">头像圆角填充颜色</label>
  275. <div class="col-sm-9 col-xs-12">
  276. <input type="text" name="commiss_avatar_rgb" class="form-control minicolors_avatar_rgb" value="{$data['commiss_avatar_rgb']}" />
  277. <span class='help-block'>不设置则默认黄色<b style="color:red"></b></span>
  278. </div>
  279. </div>
  280. <div class="form-group" >
  281. <label class="col-sm-3 control-label">昵称颜色</label>
  282. <div class="col-sm-9 col-xs-12">
  283. <input type="text" name="commiss_nickname_rgb" class="form-control minicolors_nickname_rgb" value="{$data['commiss_nickname_rgb']}" />
  284. <span class='help-block'>不设置则默认粉色<b style="color:red"></b></span>
  285. </div>
  286. </div>
  287. <div class="form-group">
  288. <div class="col-sm-3 control-label">
  289. &nbsp;
  290. <button class="layui-btn layui-btn-sm" id="save_btn" style="margin-left:270px;" type="submit"> 确认保存</button>
  291. </div>
  292. <div class="col-sm-9" style="display:none;">
  293. <button class="layui-btn layui-btn-sm" style="margin-left:270px;" type="submit"> 确认保存</button>
  294. </div>
  295. </div>
  296. </div>
  297. </div>
  298. </div>
  299. </div>
  300. <div class="margin-b-10"></div>
  301. <div class="app-action" style="display:none;">
  302. <div class="parts" id="parts">
  303. <nav class="btn btn-link">
  304. <i class="fa fa-cog"></i>页面设置
  305. </nav>
  306. <nav class="btn btn-link" data-id="avatar"><i class="fa fa-plus"></i> 商户logo</nav>
  307. </div>
  308. <div class="action">
  309. <nav class="btn btn-default btn-sm pull-left" id="gotop">返回顶部</nav>
  310. <nav class="btn btn-primary btn-sm btn-save">保存并设置</nav>
  311. </div>
  312. </div>
  313. <div class="message-box">
  314. <div class="msg msg-success">保存成功</div>
  315. </div>
  316. <link rel="stylesheet" href="/static/css/jquery.minicolors.css">
  317. <script src="/static/js/jquery.minicolors.js"></script>
  318. <script>
  319. $(function(){
  320. $('input.minicolors_avatar_rgb').minicolors({
  321. control: $(this).attr('data-control') || 'hue',
  322. defaultValue: $(this).attr('data-defaultValue') || '',
  323. inline: $(this).attr('data-inline') === 'true',
  324. letterCase: $(this).attr('data-letterCase') || 'lowercase',
  325. opacity: $(this).attr('data-opacity'),
  326. position: $(this).attr('data-position') || 'bottom left',
  327. change: function(hex, opacity) {
  328. if (!hex)
  329. return;
  330. if (opacity)
  331. hex += ', ' + opacity;
  332. try {
  333. console.log(hex);
  334. } catch (e) {
  335. }
  336. },
  337. theme: 'bootstrap'
  338. });
  339. $('input.minicolors_nickname_rgb').minicolors({
  340. control: $(this).attr('data-control') || 'hue',
  341. defaultValue: $(this).attr('data-defaultValue') || '',
  342. inline: $(this).attr('data-inline') === 'true',
  343. letterCase: $(this).attr('data-letterCase') || 'lowercase',
  344. opacity: $(this).attr('data-opacity'),
  345. position: $(this).attr('data-position') || 'bottom left',
  346. change: function(hex, opacity) {
  347. if (!hex)
  348. return;
  349. if (opacity)
  350. hex += ', ' + opacity;
  351. try {
  352. console.log(hex);
  353. } catch (e) {
  354. }
  355. },
  356. theme: 'bootstrap'
  357. });
  358. })
  359. $(function(){
  360. $("#bg_img img").load(function(){
  361. var s_src = $(this).attr('src');
  362. if( s_src.indexOf('nopic.jpg') == -1)
  363. {
  364. $('.drag-background img').attr('src', s_src);
  365. }
  366. });
  367. $(".avatar").Tdrag({
  368. scope:"#app-preview"
  369. });
  370. $(".qrcodes").Tdrag({
  371. scope:"#app-preview"
  372. });
  373. $(".username").Tdrag({
  374. scope:"#app-preview"
  375. });
  376. $('#clear_haibao').click(function(){
  377. $.ajax({
  378. url:"{:U('distribution/clear_haibao')}",
  379. type:'post',
  380. dataType:'json',
  381. success:function(ret){
  382. alert('操作成功');
  383. var backurl = "{:U('distribution/qrcodeconfig',array('ok'=>'1'))}";
  384. location.href = backurl;
  385. }
  386. })
  387. })
  388. $('#save_btn').click(function(){
  389. var post_obj ={};
  390. post_obj.avatar_left = $('.avatar').position().left;
  391. post_obj.avatar_top = $('.avatar').position().top;
  392. post_obj.qrcodes_left = $('.qrcodes').position().left;
  393. post_obj.qrcodes_top = $('.qrcodes').position().top;
  394. post_obj.username_left = $('.username').position().left;
  395. post_obj.username_top = $('.username').position().top;
  396. var img_src = $('input[name=distribu_member_image]').val();
  397. var commiss_avatar_rgb = $('input[name=commiss_avatar_rgb]').val();
  398. var commiss_nickname_rgb = $('input[name=commiss_nickname_rgb]').val();
  399. post_obj.img_src = img_src;
  400. post_obj.commiss_avatar_rgb = commiss_avatar_rgb;
  401. post_obj.commiss_nickname_rgb = commiss_nickname_rgb;
  402. $.ajax({
  403. url:"{:U('distribution/qrcodeconfig')}",
  404. type:'post',
  405. dataType:'json',
  406. data:post_obj,
  407. success:function(ret){
  408. if( ret.status = 1 )
  409. {
  410. show_succ_tip();
  411. return false;
  412. }
  413. }
  414. })
  415. })
  416. //var left = $('.avatar').position().left;
  417. //var top = $('.avatar').position().top;
  418. })
  419. function show_succ_tip()
  420. {
  421. $('.message-box').addClass('in');
  422. setTimeout("$('.message-box').removeClass('in');", 1500 )
  423. setTimeout("location.href=location.href;", 1800 )
  424. }
  425. </script>
  426. </body>
  427. </html>