delivery.blade.php 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  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. <title>填写预约码-入库预约</title>
  8. <style>
  9. html{
  10. height: 100%;
  11. width: 100%;
  12. }
  13. body{
  14. text-align:center;
  15. height: 100%;
  16. width: 100%;
  17. }
  18. .center{
  19. margin:0 auto;
  20. position: fixed;
  21. top: 50%;
  22. left: 50%;
  23. width:50%;
  24. height: 50%;
  25. -webkit-transform: translateX(-50%) translateY(-50%);
  26. }
  27. #msg{
  28. width:266px;
  29. position: fixed;
  30. z-index:999;
  31. top: 49%;
  32. margin-top:-80px;
  33. left:50%;
  34. margin-left:-133px;
  35. background:#fff;
  36. box-shadow:5px 5px 8px #999;
  37. font-size:17px;
  38. color:red;
  39. border:1px solid #f8f8f8;
  40. text-align: center;
  41. line-height: 2rem;
  42. display:inline-block;
  43. padding-bottom:20px;
  44. border-radius:5px;
  45. }
  46. #msg_top {
  47. background: #f8f8f8;
  48. padding: 5px 15px 5px 20px;
  49. text-align: left;
  50. }
  51. #msg_top span{
  52. font-size:22px;
  53. float:right;
  54. cursor:pointer;
  55. }
  56. #msg_cont{
  57. padding:15px 20px 20px;
  58. text-align:left;
  59. }
  60. #msg_clear{
  61. background:#8fc31f;
  62. float:right;
  63. }
  64. .msg_btn{
  65. display:inline-block;
  66. color:#fff;
  67. padding:1px 15px;
  68. border-radius:2px;
  69. margin-right:15px;
  70. cursor:pointer;
  71. }
  72. .label{
  73. font-size: 1.2em;
  74. font-weight: bold;
  75. margin-bottom: 50px;
  76. }
  77. .btn{
  78. width: 50%;
  79. height: 40px;
  80. margin-top: 50px;
  81. color: #fff;
  82. background-color: #28a745;
  83. border-color: #28a745;
  84. border-radius: 5px;
  85. }
  86. .input{
  87. display: block;
  88. width: 100%;
  89. font-weight: 400;
  90. color: #495057;
  91. background-color: #fff;
  92. background-clip: padding-box;
  93. border: 1px solid #1b1e21;
  94. transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  95. height: calc(1.5em + .5rem + 2px);
  96. padding: .25rem .5rem;
  97. font-size: .875rem;
  98. line-height: 1.5;
  99. border-radius: .3rem;
  100. }
  101. </style>
  102. </head>
  103. <body>
  104. <div class="center">
  105. <div>
  106. <div class="label">下方填写您的预约码</div>
  107. <label><input type="text" class="input" id="appointment_number" oninput="if(value.length>10)value=value.slice(0,10)"></label>
  108. </div>
  109. <div>
  110. <button type="button" class="btn" onclick="submit()"> 确 认 </button>
  111. </div>
  112. </div>
  113. </body>
  114. <script type="text/javascript">
  115. //重绘弹窗样式
  116. function alert(e){
  117. let dom = document.createElement('div');
  118. dom.innerHTML = '<div id="msg"><div id="msg_top">提示</div><div id="msg_cont">'+e+
  119. '</div><div class="msg_close msg_btn" id="msg_clear">确定</div></div>';
  120. document.querySelector('body').appendChild(dom);
  121. document.getElementById('msg_clear').addEventListener('click', function() {
  122. document.getElementById("msg").remove();
  123. }, false);
  124. }
  125. function submit() {
  126. let xhr = new XMLHttpRequest();
  127. let url = "{{url('store/deliveryAppointment/delivery')}}";
  128. let number = document.getElementById("appointment_number").value;
  129. if (!number)return;
  130. let data = "number="+number+"&k={{$k}}";
  131. xhr.open("POST",url,true);
  132. xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  133. xhr.onreadystatechange = function() {
  134. if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
  135. let res = JSON.parse(xhr.responseText);
  136. if (res.status === 406)window.location.href = "{{url('store/deliveryAppointment/errMsg')}}";
  137. if (res.status === 417)alert("无效预约码!");
  138. if (res.status === 416)alert("当前时间禁止送货!");
  139. if (res.status === 200)window.location.href = "{{url('store/deliveryAppointment/successMsg?k=')}}"+res.k;
  140. }
  141. };
  142. xhr.send(data);
  143. }
  144. </script>
  145. </html>