説明なし

seeFloorQRcode.html 5.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>需维修请微信扫码</title>
  6. <style media="all">
  7. .codeBox {
  8. margin: 0 auto!important;
  9. -webkit-print-color-adjust: exact;
  10. color: #000;
  11. }
  12. div.wrapper-content {
  13. padding: 0px;
  14. }
  15. @media print {
  16. .codeBox {
  17. -webkit-print-color-adjust: exact;
  18. page-break-after: avoid;
  19. }
  20. }
  21. .logo_img,
  22. .promptMsg {
  23. display: none;
  24. }
  25. .qr_print {
  26. position: absolute;
  27. right: 10%;
  28. top: 0;
  29. }
  30. </style>
  31. </head>
  32. <body class="gray-bg">
  33. <div class="wrapper-content animated fadeInRight">
  34. <input type="hidden" id="qrCode" />
  35. <!--startprint-->
  36. <div class="codeBox" style="margin: 0 auto; width: 380px; height: 410px; text-align: center;">
  37. <!-- <p style="font-size: 24px; font-family:微软雅黑; color: #000;margin-top: 26px;margin-bottom: 5px;letter-spacing: 6px;">需维修请微信扫码</p> -->
  38. <p style="font-size: 24px; font-family:微软雅黑; color: #000;margin-top: 26px;margin-bottom: 5px;letter-spacing: 15px;margin-left:28px">请使用APP扫码</p>
  39. <p style="font-size: 12px; font-family:微软雅黑; color: #000;margin-top: 2px;margin-bottom: 10px;letter-spacing: 0px;">(首次扫码时请先下载APP后再进行扫码)</p>
  40. <div id="codeHtml" style="z-index: 9999999;position: relative;">
  41. <div id="code"></div>
  42. </div>
  43. <p style="font-size: 18px; font-weight: bold; font-family: 微软雅黑; padding: 0; margin: 16px auto 0 auto; width: 230px; text-align: justify; height: 22px; line-height: 22px;">
  44. <span id="proName"></span><i style="display: inline-block; width: 100%"></i>
  45. </p>
  46. <p style="font-size: 16px; color: #333333; font-family: 微软雅黑; text-align: center; width: 230px; padding: 0; margin: 5px auto 0 auto;">技术支持</p>
  47. <!-- <img src='../../img/floor_logo.png' class="logo_img" style="width: 230px;height: 44px;margin-top: 16px;margin-bottom: 0px;"> -->
  48. <p class="promptMsg" style="margin-top: 10px;font-size: 18px;font-family: 微软雅黑">
  49. <span class="line" style="display: inline-block;width: 230px;border-bottom: 2px solid #000;padding: 0 1px;text-align: center;margin-bottom: -4px;"></span>
  50. </p>
  51. </div>
  52. <!--endprint-->
  53. <p class="qr_print"><button class="btns" id="print" onclick="stamp()">打印二维码</button></p>
  54. </div>
  55. <link rel="stylesheet" href="../../css/init.css" />
  56. <link rel="stylesheet" href="../../css/Table/table1.css" />
  57. <script src="../../Script/Common/huayi.load.js"></script>
  58. <script src="../../Script/Common/huayi.config.js"></script>
  59. <script src="../js/qrcode.min.js"></script>
  60. <script>
  61. var ids = helper.request.queryString("ids");
  62. var floorName = helper.request.queryString("floorName"); //楼层名称
  63. var remark = helper.request.queryString("remark"); //备注
  64. var projectname = helper.request.queryString("proname"); //项目名称
  65. $('#proName').text(decodeURIComponent(projectname));
  66. var qrUrl = "http://wechat.nuodajituan.com/index.html?menucode=KSBX&id=" + ids + "&type=1"; //楼层
  67. $('.promptMsg .line').html(decodeURIComponent(floorName) + '&nbsp;&nbsp;&nbsp;&nbsp;' + decodeURIComponent(remark));
  68. $('#qrCode').val(qrUrl);
  69. $(document).ready(function() {
  70. makeCode();
  71. })
  72. $("#codeHtml").html('<div id="code"></div>');
  73. var qrcode = new QRCode(document.getElementById("code"), {
  74. render: 'canva',
  75. width: 230, //宽度
  76. height: 230, //高度
  77. text: toUtf8(name) //任意内容 :中文存在乱码,需要转换编码
  78. })
  79. function toUtf8(str) {
  80. var out, i, len, c;
  81. out = "";
  82. len = str.length;
  83. for(i = 0; i < len; i++) {
  84. c = str.charCodeAt(i);
  85. if((c >= 0x0001) && (c <= 0x007F)) {
  86. out += str.charAt(i);
  87. } else if(c > 0x07FF) {
  88. out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
  89. out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
  90. out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
  91. } else {
  92. out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
  93. out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
  94. }
  95. }
  96. return out;
  97. }
  98. function makeCode() {
  99. var elText = document.getElementById("qrCode");
  100. if(!elText.value) {
  101. elText.focus();
  102. return;
  103. }
  104. qrcode.makeCode(elText.value);
  105. var canvas = $('#code canvas');
  106. var img = canvas[0].toDataURL("image/png");
  107. $('#code').html("<img src='" + img + "'>");
  108. $('.logo_img').show();
  109. $('.promptMsg').show();
  110. }
  111. function stamp() {
  112. var bdhtml = window.document.body.innerHTML;
  113. var sprnstr = "<!--startprint-->";
  114. var eprnstr = "<!--endprint-->";
  115. var prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);
  116. prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
  117. var newWindow = window.open("打印二维码", "_self");
  118. newWindow.document.write(prnhtml);
  119. // newWindow.document.close();
  120. // setTimeout(function(){
  121. newWindow.print();
  122. newWindow.close();
  123. // newWindow.document.body.innerHTML=bdhtml;
  124. // }, 10);
  125. var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  126. parent.layer.close(index); //再执行关闭
  127. }
  128. </script>
  129. </body>
  130. </html>