index.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  6. <link rel="stylesheet" href="./css/index.css">
  7. <script src="./js/babel.min.js"></script>
  8. <script src="./js/vue.js"></script>
  9. <script src="./js/axios.min.js"></script>
  10. <script src="./js/index.js"></script>
  11. <title>大卫博士-退货信息登记</title>
  12. <script type="text/javascript">
  13. document.addEventListener('plusready', function() {
  14. //console.log("所有plus api都应该在此事件发生后调用,否则会出现plus is undefined。")
  15. });
  16. </script>
  17. <style>
  18. * {
  19. margin: 0;
  20. padding: 0;
  21. }
  22. #app {
  23. /* width: 100%; */
  24. padding: 36px 15px 0 15px;
  25. height: 100%;
  26. color: #333;
  27. }
  28. .flex {
  29. display: flex;
  30. align-items: center;
  31. }
  32. img {
  33. width: 24px;
  34. height: 24px;
  35. }
  36. .flex-title {
  37. font-size: 18px;
  38. font-weight: bold;
  39. }
  40. .flex-span {
  41. font-size: 18px;
  42. margin-left: 5px;
  43. }
  44. .flex-danhao {
  45. width: 210px;
  46. height: 45px;
  47. background: #F8F8F8;
  48. border-radius: 6px;
  49. line-height: 45px;
  50. padding: 0 15px;
  51. font-size: 18px;
  52. border: none;
  53. outline: none;
  54. flex: 1;
  55. overflow: hidden;
  56. /* margin-left: 10px; */
  57. }
  58. .submit {
  59. width: 273px;
  60. height: 47px;
  61. background: linear-gradient(93deg, #A080FF 0%, #5D6BFF 100%);
  62. border-radius: 33px;
  63. color: #fff;
  64. font-size: 18px;
  65. text-align: center;
  66. line-height: 47px;
  67. margin: 300px auto 0;
  68. }
  69. input::-webkit-input-placeholder{
  70. font-size: 18px;
  71. color: #BFBFBF;
  72. }
  73. </style>
  74. </head>
  75. <body>
  76. <div id="app">
  77. <div v-loading.fullscreen.lock="loadingFull" />
  78. <div class="flex">
  79. <div class="flex-title">
  80. 类型:
  81. </div>
  82. <div style="margin-left: 18px;" class="flex">
  83. <img :src="type == 0?'img/true.png': 'img/false.png'" @click="type = 0, express_number='', onFocus()">
  84. <span class="flex-span"> 扫码</span>
  85. <img style="margin-left: 30px;" :src="type == 1?'img/true.png': 'img/false.png'" @click="type = 1, express_number=''">
  86. <span class="flex-span"> 输入</span>
  87. </div>
  88. </div>
  89. <div style="margin-top: 26px;" class="flex">
  90. <div class="flex-title">
  91. {{ type == 0?'物流单号': '手机号' }}:
  92. </div>
  93. <input v-if="type === 0" ref="qrcode_text" v-model="express_number" @focus="preventKeyBord" @input="onInput" type="text" class="flex-danhao" :placeholder="type?'输入手机号查询':'物流单号'" />
  94. <input v-else v-model="express_number" type="text" class="flex-danhao" :placeholder="type?'输入手机号查询':'物流单号'" />
  95. </div>
  96. <div class="submit" @click="submit">
  97. 下一步
  98. </div>
  99. </div>
  100. <script type="text/babel">
  101. var app = new Vue({
  102. el: '#app',
  103. data() {
  104. return {
  105. type: 0,
  106. noClick: true,
  107. express_number: '',
  108. loadingFull: false
  109. }
  110. },
  111. mounted() {
  112. this.onFocus()
  113. },
  114. methods: {
  115. preventKeyBord(e) {
  116. e.target.setAttribute("readonly", true);
  117. setTimeout(() => {
  118. e.target.removeAttribute("readonly")
  119. }, 100)
  120. },
  121. onFocus() {
  122. this.$nextTick(() => {
  123. this.$refs.qrcode_text.focus()
  124. })
  125. },
  126. onInput(e) {
  127. let express_number = e.target.value
  128. express_number.replace(this.express_number, '')
  129. },
  130. submit() {
  131. // window.location.href = "./pages/getCode.html?id=" + '1'
  132. // return
  133. this.loadingFull = true
  134. if (this.type === 1 && !this.express_number) {
  135. window.ELEMENT.Message.error('请输入手机号')
  136. this.loadingFull = false
  137. return
  138. }
  139. if (this.type === 0 && !this.express_number) {
  140. this.loadingFull = false
  141. window.ELEMENT.Message.error('请扫描快递单号')
  142. return
  143. }
  144. let _this = this
  145. axios.get('http://api.admin.app.cliu.cc/api/ReturnGood/GetExpress', {
  146. params: {
  147. type: this.type,
  148. express_number: _this.express_number
  149. }
  150. }).then(res => {
  151. this.loadingFull = false
  152. if (res.code === 200) {
  153. window.location.href = "./pages/getCode.html?id=" + res.data.id
  154. } else {
  155. window.ELEMENT.Message.error(res.message || '获取单号信息失败')
  156. }
  157. }).catch((err) => {
  158. this.loadingFull = false
  159. window.ELEMENT.Message.error('获取失败')
  160. })
  161. },
  162. // 防连点
  163. noMultipleClicks(methods) {
  164. let that = this;
  165. if (that.noClick) {
  166. that.noClick= false;
  167. methods();
  168. setTimeout(function () {
  169. that.noClick= true;
  170. }, 1500)
  171. }
  172. }
  173. }
  174. })
  175. </script>
  176. </body>
  177. </html>