wuliuList_body.html 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6. <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7. <title>AUI快速完成布局</title>
  8. <link rel="stylesheet" type="text/css" href="../../css/api.css" />
  9. <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
  10. <link rel="stylesheet" type="text/css" href="../../css/html.css" />
  11. <style type="text/css">
  12. .text-white {
  13. color: #ffffff !important;
  14. }
  15. .aui-grid [class*=aui-col-] {
  16. padding: 0.75rem 0;
  17. }
  18. .aui-order-number {
  19. padding: 0.75rem;
  20. }
  21. .aui-card-list-user-avatar {
  22. width: 4rem;
  23. height: 3rem;
  24. }
  25. .aui-card-list-user-name {
  26. overflow: hidden;
  27. text-overflow: ellipsis;
  28. -webkit-box-orient: vertical;
  29. -webkit-line-clamp: 3;
  30. }
  31. .aui-card-list-user-info {
  32. text-align: right;
  33. color: #f00;
  34. margin-top: 10px;
  35. }
  36. .aui-top {
  37. padding: 7px 2px;
  38. border-bottom: 1px solid #ddd;
  39. width: 96%;
  40. margin-left: 2%;
  41. }
  42. .aui-state {
  43. float: right;
  44. }
  45. .aui-top .aui-state {
  46. color: #f00;
  47. }
  48. .aui-top .aui-state, .aui-top .aui-time {
  49. font-size: 0.6rem;
  50. }
  51. #user-info {
  52. position: fixed;
  53. top: 0;
  54. left: 0;
  55. width: 100%;
  56. height: 100%;
  57. z-index: 2;
  58. }
  59. .top {
  60. padding-bottom: 1rem;
  61. }
  62. .aui-bottom {
  63. border-top: 1px solid #ddd;
  64. border-bottom: 0px solid #fff;
  65. text-align: right;
  66. }
  67. .aui-float-right {
  68. float: right;
  69. margin-top: 10px;
  70. }
  71. .aui-card-list-user-name {
  72. width: 96%;
  73. }
  74. #tab {
  75. position: fixed;
  76. top: 0;
  77. left: 0;
  78. width: 100%;
  79. z-index: 2;
  80. }
  81. .aui-state-success {
  82. color: #8ec31f !important;
  83. }
  84. .aui-card-list {
  85. margin-bottom: 0px;
  86. }
  87. [v-cloak] {
  88. display: none
  89. }
  90. </style>
  91. </head>
  92. <body>
  93. <div id="app" v-cloak>
  94. <section class="aui-content top">
  95. <div class="aui-card-list aui-border-t aui-border-b zmq-width-90 zmq-margin-top-10 zmq-radius-10" v-for="(item,index) in orderList" v-on:click="lookOrderInfo(item.id,item)">
  96. <div class="aui-top">
  97. <span class="aui-time zmq-text-msg" style="padding-left : 1rem;"><img class="zmq-orderCode-img" style="position: absolute;margin-left: -1rem" src="../../image/drawable-xhdpi/car.png" />车辆信息:{{item.customer_address}}</span>
  98. <!--<span class="aui-state zmq-btn-border zmq-text-msg zmq-padding-status" class="">{{stateArr[(item.status+1)].name}}</span>-->
  99. <!--<span class="aui-state zmq-btn-border-success zmq-text-success zmq-padding-status" v-show="item.title == '2'">{{stateArr[item.title]}}</span>
  100. <span class="aui-state zmq-btn-border-danger zmq-text-danger zmq-padding-status" v-show="item.title == '3'" class="" style="color: #999">{{stateArr[item.title]}}</span>-->
  101. </div>
  102. <div class="aui-card-list-header aui-card-list-user">
  103. <i class="aui-iconfont aui-icon-right aui-font-size-12 aui-float-right zmq-position-absolute"></i>
  104. <div class="aui-card-list-user-name zmq-flex">
  105. <div class="aui-font-size-14">
  106. {{item.number_plate}}
  107. </div>
  108. <!--<div class="aui-font-size-14 zmq-text-msg">
  109. 已接 10 条 退回 2 条
  110. </div>-->
  111. </div>
  112. <div class="aui-card-list-user-name zmq-flex">
  113. <div class="aui-font-size-14 zmq-text-explain">
  114. 司机信息:{{item.driver_name}}-{{item.contact_information}}
  115. </div>
  116. <!--<div class="aui-font-size-14">
  117. 共 <span class="zmq-text-msg">{{item.amount}}</span> 件商品
  118. </div>-->
  119. </div>
  120. </div>
  121. </div>
  122. </section>
  123. <img v-show="hasData == false" src="../../image/nodata.png" class="zmq-img-nodata"/>
  124. <div v-show="upLock == false" class="zmq-text-explain zmq-margin-top-10 zmq-textAlign-center zmq-margin-bottom-10 zmq-block-text">
  125. 已无更多数据
  126. </div>
  127. </div>
  128. </body>
  129. <!--<script type="text/javascript" src="../../script/aui-tab.js" ></script>-->
  130. <script type="text/javascript" src="../../script/api.js"></script>
  131. <script type="text/javascript" src="../../script/aui-scroll.js"></script>
  132. <script type="text/javascript" src="../../script/vue.js"></script>
  133. <script type="text/javascript" src="../../script/httpRequest.js"></script>
  134. <script type="text/javascript" src="../../script/vue_plugins.js"></script>
  135. <script type="text/javascript">
  136. var vm = "";
  137. apiready = function() {
  138. var type = api.pageParam.type;
  139. vm = new Vue({
  140. el : '#app',
  141. data : {
  142. type : type,
  143. // 获取订单列表
  144. getOrderListUrl : 'getOrderListUrl',
  145. // agentId 写死的经销商id
  146. agentId : '',
  147. // 订单列表
  148. orderList : [],
  149. allList : [], // 展示的全部的列表
  150. // 分页展示
  151. stateArr : [{
  152. name : "全部订单",
  153. id : '',
  154. }, {
  155. name : "待接单",
  156. id : 0
  157. }, {
  158. name : "已接单",
  159. id : 1
  160. }, {
  161. name : "已驳回",
  162. id : 2
  163. }],
  164. // 是否有数据
  165. hasData : true,
  166. // 顶部导航栏点击且换
  167. chooseIndex : 0,
  168. // 分页展示
  169. upLock : true,
  170. current : 1,
  171. total : 1,
  172. // 订单状态
  173. orderStatus : '',
  174. // 获取物流列表
  175. getWuLiuUrl : 'getWuLiuUrl',
  176. },
  177. filters : {
  178. statusToStr : function(status) {
  179. var str = "";
  180. switch (status) {
  181. case '0':
  182. str = "待经销商接单";
  183. break;
  184. case '1':
  185. str = "经销商已接单";
  186. break;
  187. default :
  188. break;
  189. }
  190. return str
  191. }
  192. },
  193. methods : {
  194. lookOrderInfo : function(id, item) {
  195. var param = {
  196. orderid : id,
  197. item : JSON.stringify(item)
  198. }
  199. this.goWin("wuliu_win", "./wuliu_win.html", param);
  200. },
  201. init : function() {
  202. this.agentId = $api.getStorage('agentid');
  203. this.getOrderList();
  204. var _this = this;
  205. // 下拉刷新
  206. this.configHeaderRefush(function() {
  207. _this.downData = 'down';
  208. _this.current = 1;
  209. _this.getOrderList();
  210. });
  211. // 上拉分页展示
  212. this.configBottomRefush(function(status) {
  213. _this.downData = 'up';
  214. _this.current = _this.current + 1;
  215. _this.getOrderList();
  216. })
  217. },
  218. // 获取订单列表
  219. getOrderList : function() {
  220. var data = {
  221. agentId : this.agentId,
  222. current : this.current,
  223. }, url = this.getWuLiuUrl, _this = this;
  224. this.$post(url, data, function(ret) {
  225. if (ret.code == 0) {
  226. if(_this.downData == 'up'){
  227. // 上啦了
  228. _this.orderList = _this.orderList.concat(ret.data.list);
  229. _this.allList = _this.allList.concat(ret.data.list);
  230. }else{
  231. // 下拉了
  232. _this.allList = ret.data.list;
  233. _this.orderList = ret.data.list;
  234. }
  235. if (_this.allList.length == 0) {
  236. _this.hasData = false;
  237. }
  238. }
  239. })
  240. },
  241. // 顶部导航栏切换展示
  242. chooseStatus : function(index) {
  243. this.chooseIndex = index;
  244. var newList = new Array();
  245. this.downData = 'down'
  246. this.orderStatus = this.stateArr[index].id;
  247. // if (index == 0) {
  248. this.getOrderList();
  249. // } else {
  250. // this.allList.map(function(i, d) {
  251. // if (i.status == (index - 1)) {
  252. // newList.push(i);
  253. // }
  254. // })
  255. // this.orderList = newList;
  256. // }
  257. }
  258. },
  259. mounted : function() {
  260. this.init();
  261. }
  262. })
  263. }
  264. function chooseIndex(index) {
  265. vm.chooseStatus(index);
  266. }
  267. // var tab = new auiTab({
  268. // element : document.getElementById("tab"),
  269. // }, function(ret) {
  270. // console.log(ret)
  271. // });
  272. </script>
  273. </html>