qrcode.blade.php 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. <!DOCTYPE html>
  2. <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <link rel="icon" href="{{asset('icon/faviconc.ico')}}" type="image/x-icon"/>
  7. <link href="{{ mix('css/app.css') }}" rel="stylesheet">
  8. <!-- CSRF Token -->
  9. <meta name="csrf-token" content="{{ csrf_token() }}">
  10. <title>二维码-入库预约</title>
  11. <style>
  12. html{
  13. background: white;
  14. height: 100%;
  15. width: 100%;
  16. }
  17. </style>
  18. </head>
  19. <body class="h-100">
  20. <div class="container-fluid w-100 h-100" id="container">
  21. <div class="h-25"></div>
  22. <div class="w-50 h-50 m-auto">
  23. <div id="code" class="ml-5"></div>
  24. </div>
  25. </div>
  26. </body>
  27. <script src="{{ mix('js/app.js') }}"></script>
  28. <script src="{{ mix('js/utilities/qrcode.js') }}"></script>
  29. <script type="text/javascript">
  30. new Vue({
  31. el:"#container",
  32. data:{
  33. list:[],
  34. key:"",
  35. baseUrl:"{{url('store/deliveryAppointment/delivery?k=')}}",
  36. QrCode : null,
  37. },
  38. mounted(){
  39. this._getKey();
  40. },
  41. methods:{
  42. //获取密匙
  43. _getKey(){
  44. let url = "{{url('store/deliveryAppointment/getKey')}}";
  45. window.tempTip.postBasicRequest(url,{},res=>{
  46. this.key = res;
  47. this._createQrCode(this.baseUrl+this.base64());
  48. });
  49. },
  50. //生成二维码
  51. _createQrCode(text){
  52. let dom = document.getElementById("code");
  53. let hei = dom.parentElement.offsetHeight;
  54. new QRCode(dom,{
  55. text: text,
  56. width: hei*1.4,
  57. height: hei,
  58. colorDark : "#000000",
  59. colorLight : "#ffffff",
  60. }
  61. );
  62. },
  63. //获取当前时间距离明天0点的时间差 毫秒
  64. _getDiffDate(){
  65. let now = new Date();
  66. let dateTime = now.getTime();
  67. let yy = now.getFullYear();
  68. let mm = now.getMonth() + 1;
  69. let dd = now.getDate();
  70. let clock = yy + "-";
  71. if(mm < 10) clock += "0";
  72. clock += mm + "-";
  73. if(dd < 10) clock += "0";
  74. clock += dd+" 00:00:00";
  75. let timestamp = new Date(clock).getTime()+(24*60*60*1000);
  76. return timestamp-dateTime;
  77. },
  78. //加密
  79. base64(){
  80. let _keyStr= "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
  81. let output = "";
  82. let chr1, chr2, chr3, enc1, enc2, enc3, enc4;
  83. let i = 0;
  84. let str = Math.floor(new Date().getTime()/1000).toString();
  85. str = str.slice(str.length-8);
  86. let input = this._utf8_encode(this.key+str);
  87. while (i < input.length) {
  88. chr1 = input.charCodeAt(i++);
  89. chr2 = input.charCodeAt(i++);
  90. chr3 = input.charCodeAt(i++);
  91. enc1 = chr1 >> 2;
  92. enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
  93. enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
  94. enc4 = chr3 & 63;
  95. if (isNaN(chr2)) {
  96. enc3 = enc4 = 64;
  97. } else if (isNaN(chr3)) {
  98. enc4 = 64;
  99. }
  100. output = output +
  101. _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
  102. _keyStr.charAt(enc3) + _keyStr.charAt(enc4);
  103. }
  104. return output;
  105. },
  106. _utf8_encode (string) {
  107. string = string.replace(/\r\n/g,"\n");
  108. let utftext = "";
  109. for (let n = 0; n < string.length; n++) {
  110. let c = string.charCodeAt(n);
  111. if (c < 128) {
  112. utftext += String.fromCharCode(c);
  113. } else if((c > 127) && (c < 2048)) {
  114. utftext += String.fromCharCode((c >> 6) | 192);
  115. utftext += String.fromCharCode((c & 63) | 128);
  116. } else {
  117. utftext += String.fromCharCode((c >> 12) | 224);
  118. utftext += String.fromCharCode(((c >> 6) & 63) | 128);
  119. utftext += String.fromCharCode((c & 63) | 128);
  120. }
  121. }
  122. return utftext;
  123. }
  124. },
  125. });
  126. </script>
  127. </html>