JkQRCode.html 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  6. <meta name="renderer" content="webkit" />
  7. <title>二维码管理</title>
  8. <link rel="stylesheet" href="../iconfont/iconfont.css" type="text/css" />
  9. <link rel="stylesheet" href="../cross/css/cross.css" type="text/css" />
  10. <link rel="stylesheet" href="../cross/css/cross.ui.css" type="text/css" />
  11. <link rel="stylesheet" href="../css/health-edu.css" type="text/css" />
  12. <link rel="stylesheet" href="../widget/artDialog/4.1.7/css/artDialog.css" type="text/css" />
  13. <link rel="stylesheet" href="../widget/fileUpload/9.11.2/css/jquery.fileupload.css" type="text/css" />
  14. </head>
  15. <body>
  16. <div class="c-hidden">
  17. <div class="phone-part fr">
  18. <div class="c-t-center mb30">
  19. <a id="preview" href="javascript:;" class="c-btn bgc-ec6941 btn-w60">预览</a>
  20. </div>
  21. <div class="phone">
  22. <div class="phone-wrap">
  23. <div class="phone-header">
  24. <img src="../images/health-edu/top.png" class="width-100" />
  25. <div class="phone-tit">
  26. <a href="javascript:;" class="btn-return"><i class="iconfont icon-xiangzuo c-f12"></i> 返回</a>
  27. <h1>二维码管理</h1>
  28. <a href="#" class="btn-more"><i class="iconfont icon-more"></i></a>
  29. </div>
  30. </div>
  31. <div class="phone-main">
  32. <div class="c-position-r c-t-center height-100">
  33. <div class="position-t width-100 mtb20">
  34. <img id="phoneTopImgUrl" src="" alt="" />
  35. <p class="mt10 c-f14 c-666">文章顶部位置</p>
  36. </div>
  37. <div class="position-b width-100 mtb20 c-hide">
  38. <img id="phoneBottomImgUrl" src="" alt="" />
  39. <p class="mt10 c-f14 c-666">文章尾部位置</p>
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. <div class="main-part p20">
  47. <div class="form-layout form-horizontal form-horizontal-wider c-f14 c-666 mtb20">
  48. <input type="hidden" id="id"/>
  49. <div class="control-group">
  50. <label class="control-label mt25 c-t-right">上传二维码图片:</label>
  51. <div class="control-form">
  52. <span id="showImgUrlDiv">
  53. </span>
  54. <span class="btn-file btn-file-3 fileinput-button" id="uploadFileFlag">
  55. <i class="c-f40 c-bold">+</i>
  56. <input id="uploadImg" class="fileupload-btn" type="file" name="file" multiple="">
  57. </span>
  58. <span class="control-tip">注:为了前端的优质显示效果,建议图片大小控制在100kb以内,像素200x200以内(支持jpg/png/gif)</span>
  59. </div>
  60. </div>
  61. <div class="control-group">
  62. <label class="control-label c-t-right">添加位置:</label>
  63. <div class="control-form" id="position">
  64. <label class="radio checked" data-toggle="radio">
  65. <input type="radio" class="c-hide" name="position" value="1">
  66. <i class="icon-radio"></i>文章顶部
  67. </label>
  68. <label class="radio ml40" data-toggle="radio">
  69. <input type="radio" class="c-hide" name="position" value="2">
  70. <i class="icon-radio"></i>文章尾部
  71. </label>
  72. </div>
  73. </div>
  74. <div class="control-group">
  75. <div class="control-form">
  76. <a href="javascript:save()" class="c-btn c-btn-blue btn-w60"><i class="iconfont">&#xe652;</i>保存</a>
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  81. </div>
  82. <script type="text/javascript" src="../cross/js/jquery/1.8.3/jquery.js"></script>
  83. <script type="text/javascript" src="../cross/js/cross.ui.js"></script>
  84. <script type="text/javascript" src="../widget/placeholder/2.0.7/js/jquery.placeholder.js"></script>
  85. <script type="text/javascript" src="../widget/artDialog/4.1.7/js/artDialog.js"></script>
  86. <script type="text/javascript" src="../widget/fileUpload/9.11.2/js/jquery.fileupload.js"></script>
  87. <script src="../cross/js/jquery/1.8.3/ajaxfileupload.js"></script>
  88. <script type="text/javascript">
  89. $(function() {
  90. $('.phone-main').height($('.phone-wrap').height() - $('.phone-header').height());
  91. //预览
  92. $('#preview').click(function(){
  93. if($.trim($('#position .checked').text()) == '文章顶部'){
  94. $('.position-t').show().siblings().hide();
  95. }else{
  96. $('.position-b').show().siblings().hide();
  97. }
  98. });
  99. //点击上传图片
  100. $('#uploadImg').change(function() {
  101. uploadImage();
  102. });
  103. //初始化查询
  104. query();
  105. });
  106. function query(newImgUrl) {
  107. artLoading = art.dialog({lock: true,content: '<img src="../widget/artDialog/4.1.7/images/loading.gif" class="mr10" />数据加载中,请稍候...', tips:true});
  108. $.post("/JkEdu/articleQRCode/getArticleQRCode", {}, function(result) {
  109. artLoading.close();
  110. var data = eval("(" + result + ")");
  111. if (data.Code = 1) {
  112. var ret = data.Result;
  113. var html = "";
  114. var phoneTopHtml = "";
  115. var phoneBottomHtml = "";
  116. if (ret.length > 0) {
  117. $("#id").val(ret[0].id);
  118. $('#position').radioGroup({operate:'setKey',opreateDataKey:ret[0].position});
  119. if (ret[0].imgurl) {
  120. $("#phoneTopImgUrl").attr('src',ret[0].imgurl);
  121. $("#phoneBottomImgUrl").attr('src',ret[0].imgurl);
  122. html += '<div class="upload-img mr20">';
  123. html += '<img id="codeImgUrl" src="'+ret[0].imgurl+'" alt="" />';
  124. html += '<i class="icon icon-close" id="remove"></i></div>';
  125. $("#showImgUrlDiv").html(html);
  126. $("#uploadFileFlag").hide();
  127. } else {
  128. $("#uploadFileFlag").show();
  129. }
  130. } else {
  131. $('#position').radioGroup({operate:'setKey',opreateDataKey:"1"});
  132. }
  133. //删除图片
  134. $('#remove').click(function(){
  135. removeImageUrl();
  136. })
  137. } else {
  138. ask(data.Message);
  139. }
  140. });
  141. }
  142. //保存
  143. function save() {
  144. var id = $("#id").val();
  145. var position = $('#position').radioGroup({operate:'getKey'});
  146. //获取上传图片src地址
  147. var imgUrl = $("#codeImgUrl").attr('src');
  148. var display =$('#showImgUrlDiv').css('display');
  149. if (display == 'none' || imgUrl == null || imgUrl == "") {
  150. ask("二维码图片不能为空");
  151. return;
  152. }
  153. var param = {};
  154. if (id) {
  155. param.id = id;
  156. }
  157. param.position = position;
  158. param.imgUrl = imgUrl;
  159. artLoading = art.dialog({lock: true,content: '<img src="../widget/artDialog/4.1.7/images/loading.gif" class="mr10" />数据加载中,请稍候...', tips:true});
  160. $.post("/JkEdu/articleQRCode/saveArticleQRCode", param, function(result) {
  161. artLoading.close();
  162. var data = eval("(" + result + ")");
  163. ask(data.Message);
  164. query();
  165. });
  166. }
  167. //上传图片
  168. function uploadImage() {
  169. var val = $("#uploadImg").val();
  170. if (val == null||val == "") {
  171. ask("文件上传有问题,请从新上传!");
  172. return;
  173. }
  174. $.ajaxFileUpload({
  175. url : '/JkEdu/file/upload', //需要链接到服务器地址
  176. secureuri : false,
  177. fileElementId : 'uploadImg', //文件选择框的id属性
  178. dataType : 'json',
  179. success : function(data, status) {
  180. var html = '';
  181. if (data.Code = 10000) {
  182. $("#phoneTopImgUrl").attr('src',data.url.Uri);
  183. $("#phoneBottomImgUrl").attr('src',data.url.Uri);
  184. html += '<div class="upload-img mr20">';
  185. html += '<img id="codeImgUrl" src="'+data.url.Uri+'" alt="" />';
  186. html += '<i class="icon icon-close" id="remove"></i></div>';
  187. $("#showImgUrlDiv").html(html);
  188. $("#showImgUrlDiv").show();
  189. $("#uploadFileFlag").hide();
  190. //删除图片
  191. $('#remove').click(function(){
  192. removeImageUrl();
  193. })
  194. } else {
  195. ask(data.Message);
  196. }
  197. }
  198. });
  199. }
  200. function removeImageUrl() {
  201. $("#showImgUrlDiv").hide();
  202. $("#uploadFileFlag").show();
  203. $('#uploadImg').change(function() {
  204. uploadImage();
  205. });
  206. }
  207. //消息提示
  208. function ask(message){
  209. art.dialog({
  210. lock : true,
  211. artIcon : 'ask',
  212. opacity : 0.4,
  213. width : 250,
  214. title : '提示',
  215. content : message,
  216. ok : function() {
  217. }
  218. });
  219. }
  220. </script>
  221. </body>
  222. </html>