orderList_body.html 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
  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">
  94. <section class="aui-content top" v-cloak>
  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)">
  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/orderCode.png" />订单号:{{item.orderNum}}</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.amount}} 条
  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-msg">
  114. {{item.shopName}}
  115. </div>
  116. <!--<div class="aui-font-size-14 zmq-text-msg">
  117. 已接 10 条 退回 2 条
  118. </div>-->
  119. </div>
  120. <div class="aui-card-list-user-name zmq-flex">
  121. <div class="aui-font-size-14 zmq-text-explain">
  122. 下单时间:{{item.createTime}}
  123. </div>
  124. <div class="aui-font-size-14">
  125. 共 <span class="zmq-text-msg">{{item.amount}}</span> 件商品
  126. </div>
  127. </div>
  128. </div>
  129. </div>
  130. </section>
  131. <img v-show="hasData == false" src="../../image/nodata.png" class="zmq-img-nodata" />
  132. <div v-show="upLock == false" class="zmq-text-explain zmq-margin-top-10 zmq-textAlign-center zmq-margin-bottom-10 zmq-block-text">
  133. 已无更多数据
  134. </div>
  135. </div>
  136. </body>
  137. <!--<script type="text/javascript" src="../../script/aui-tab.js" ></script>-->
  138. <script type="text/javascript" src="../../script/api.js"></script>
  139. <script type="text/javascript" src="../../script/aui-scroll.js"></script>
  140. <script type="text/javascript" src="../../script/vue.js"></script>
  141. <script type="text/javascript" src="../../script/httpRequest.js"></script>
  142. <script type="text/javascript" src="../../script/vue_plugins.js"></script>
  143. <script type="text/javascript">
  144. var vm = "";
  145. apiready = function() {
  146. var type = api.pageParam.type;
  147. vm = new Vue({
  148. el : '#app',
  149. data : {
  150. type : type,
  151. // 获取订单列表
  152. getOrderListUrl : 'getOrderListUrl',
  153. // agentId 写死的经销商id
  154. agentId : '',
  155. // 订单列表
  156. orderList : [],
  157. allList : [], // 展示的全部的列表
  158. // 分页展示
  159. stateArr : [{
  160. name : "全部订单",
  161. id : '',
  162. }, {
  163. name : "待接单",
  164. id : 0
  165. }, {
  166. name : "已接单",
  167. id : 1
  168. }, {
  169. name : "已驳回",
  170. id : 2
  171. }],
  172. // 是否有数据
  173. hasData : false,
  174. // 顶部导航栏点击且换
  175. chooseIndex : 0,
  176. // 分页展示
  177. upLock : true,
  178. current : 1,
  179. total : 1,
  180. // 订单状态
  181. orderStatus : '',
  182. },
  183. filters : {
  184. statusToStr : function(status) {
  185. var str = "";
  186. switch (status) {
  187. case '0':
  188. str = "待经销商接单";
  189. break;
  190. case '1':
  191. str = "经销商已接单";
  192. break;
  193. default :
  194. break;
  195. }
  196. return str
  197. }
  198. },
  199. methods : {
  200. lookOrderInfo : function(id) {
  201. var param = {
  202. orderid : id
  203. }
  204. this.goWin("orderInfo_win", "./orderInfo_win.html", param);
  205. },
  206. init : function() {
  207. this.agentId = $api.getStorage('kunnr');
  208. this.getOrderList();
  209. var _this = this;
  210. // 下拉刷新
  211. this.configHeaderRefush(function() {
  212. _this.downData = 'down';
  213. _this.current = 1;
  214. _this.getOrderList();
  215. });
  216. // 上拉分页展示
  217. this.configBottomRefush(function(status) {
  218. if (_this.hasData == true) {
  219. // 开启上拉加载
  220. if (_this.total > _this.current) {
  221. _this.downData = 'up';
  222. _this.current = _this.current + 1;
  223. _this.getOrderList();
  224. } else {
  225. // 上啦没有数据了
  226. _this.upLock = false;
  227. }
  228. }
  229. })
  230. },
  231. // 获取订单列表
  232. getOrderList : function() {
  233. var data = {
  234. agentCode : this.agentId,
  235. current : this.current,
  236. status : this.orderStatus,
  237. },_this = this;
  238. this.$post(this.getOrderListUrl, data, function(ret) {
  239. if (ret.code == 0) {
  240. _this.total = ret.page.pages;
  241. if (_this.downData == 'up') {
  242. _this.orderList = _this.orderList.concat(ret.page.records);
  243. _this.allList = _this.allList.concat(ret.page.records);
  244. } else {
  245. _this.orderList = ret.page.records;
  246. _this.allList = ret.page.records;
  247. if (_this.allList.length > 0) {
  248. _this.hasData = true;
  249. }else{
  250. _this.hasData = false;
  251. }
  252. }
  253. }
  254. })
  255. },
  256. // 顶部导航栏切换展示
  257. chooseStatus : function(index) {
  258. this.chooseIndex = index;
  259. var newList = new Array();
  260. this.downData = 'down'
  261. this.orderStatus = this.stateArr[index].id;
  262. // if (index == 0) {
  263. this.getOrderList();
  264. // } else {
  265. // this.allList.map(function(i, d) {
  266. // if (i.status == (index - 1)) {
  267. // newList.push(i);
  268. // }
  269. // })
  270. // this.orderList = newList;
  271. // }
  272. }
  273. },
  274. mounted : function() {
  275. this.init();
  276. }
  277. })
  278. }
  279. function chooseIndex(index){
  280. vm.chooseStatus(index);
  281. }
  282. // var tab = new auiTab({
  283. // element : document.getElementById("tab"),
  284. // }, function(ret) {
  285. // console.log(ret)
  286. // });
  287. </script>
  288. </html>