order-list.html 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  6. <meta name="apple-mobile-web-app-capable" content="yes">
  7. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  8. <title>订单列表</title>
  9. <link rel="stylesheet" type="text/css" href="css/mui.min.css" />
  10. <link rel="stylesheet" type="text/css" href="css/iconfont.css" />
  11. <link rel="stylesheet" type="text/css" href="css/main.css" />
  12. <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
  13. <script>
  14. //屏蔽分享
  15. // document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
  16. // WeixinJSBridge.call('hideOptionMenu');
  17. // });
  18. </script>
  19. </head>
  20. <body>
  21. <header class="mui-bar mui-bar-nav">
  22. <div id="pro-menu" class="mui-segmented-control tab-with-orderlist">
  23. <a class="mui-control-item mui-active icon-todelivery" tabindex="0" href="#item1">待支付</a>
  24. <a class="mui-control-item icon-todelivery" href="#item2" tabindex="1">待发货</a>
  25. <a class="mui-control-item icon-todelivery" href="#item3" tabindex="2">待收货</a>
  26. <a class="mui-control-item icon-todelivery" href="#item4" tabindex="3">全部</a>
  27. </div>
  28. </header>
  29. <!--<footer class="mui-bar mui-bar-tab">
  30. <a class="mui-tab-item">
  31. <span class="iconfont icon-shouye"></span>
  32. <span class="mui-tab-label">首页</span>
  33. </a>
  34. <a class="mui-tab-item">
  35. <span class="iconfont icon-gouwuche"></span>
  36. <span class="mui-tab-label">购物车</span>
  37. </a>
  38. <a class="mui-tab-item">
  39. <span class="iconfont icon-dingdan"></span>
  40. <span class="mui-tab-label">订单</span>
  41. </a>
  42. <a class="mui-tab-item">
  43. <span class="iconfont icon-wode"></span>
  44. <span class="mui-tab-label">我的</span>
  45. </a>
  46. </footer>-->
  47. <!-- 上拉加载数据 -->
  48. <div id="pullrefresh_order_list" class="mui-content mui-scroll-wrapper">
  49. <div class="mui-scroll">
  50. <ul class="my-table-view-order my-scroll-order">
  51. </ul>
  52. </div>
  53. </div>
  54. <!-- 加载ing -->
  55. <div class="loading-bg">
  56. <div class="mui-loading">
  57. <div class="mui-spinner">
  58. </div>
  59. &nbsp;&nbsp;加载中...
  60. </div>
  61. </div>
  62. <!-- 加载ing END -->
  63. <script src="js/mui.min.js"></script>
  64. <script src="js/mui.picker.min.js"></script>
  65. <script src="js/jquery-2.1.1.min.js"></script>
  66. <script src="js/jquery.autocompleter.js"></script>
  67. <script src="js/main.js"></script>
  68. <script>
  69. var isPay = true; // 是否在请求支付,false表示正在请求,true可以请求
  70. var tabindex = 1;
  71. /**
  72. * 获取指定的URL参数值
  73. * URL:http://www.baidu.com/index?name=tyler
  74. * 参数:paramName URL参数
  75. * 调用方法:getParam("name")
  76. * 返回值:tyler
  77. */
  78. var search_str = "",
  79. pageNumber = 0,
  80. pagesize = 10;
  81. //初始化mui
  82. mui.init({
  83. pullRefresh: {
  84. container: '#pullrefresh_order_list',
  85. down: {
  86. // callback: pulldownRefresh
  87. },
  88. up: {
  89. contentrefresh: '正在加载...',
  90. callback: pullupRefresh
  91. }
  92. }
  93. });
  94. mui.ready(function() {
  95. tabindex = getParam("salesStatus");
  96. tabindex == null ? tabindex = '1' : tabindex;
  97. $(".tab-with-orderlist .icon-topay").removeClass('mui-active');
  98. switch(tabindex) {
  99. case "2":
  100. $(".tab-with-orderlist .icon-todelivery").addClass('mui-active');
  101. break;
  102. case "5":
  103. $(".tab-with-orderlist .icon-delivery").addClass('mui-active');
  104. break;
  105. case "-1":
  106. $(".tab-with-orderlist .icon-allorder").addClass('mui-active');
  107. break;
  108. default:
  109. $(".tab-with-orderlist .icon-topay").addClass('mui-active');
  110. break;
  111. }
  112. document.querySelector('.loading-bg').style.display = 'none';
  113. mui('#pullrefresh_order_list').pullRefresh().pullupLoading();
  114. });
  115. function SetRemainTime(setName, index, sys_second) {
  116. var setName = setInterval(function() {
  117. if(sys_second > 1) {
  118. sys_second -= 1;
  119. var minute = Math.floor((sys_second / 60));
  120. //var second = Math.floor(sys_second % 60);
  121. //$("#testid"+index).html(second);
  122. $("#testid" + index).html(minute);
  123. //$("#testid" + index).html(minute + "分" + second + "秒");
  124. } else {
  125. $("#timeli" + index).hide();
  126. clearInterval(setName);
  127. }
  128. }, 1000);
  129. }
  130. /**
  131. * 上拉加载具体业务实现
  132. */
  133. function pullupRefresh() {
  134. ++pageNumber;
  135. var Status = ""
  136. var btnArray = ['否', '是'];
  137. tabindex == "-1" ? Status = "" : Status = tabindex;
  138. $.ajax(base_path + '/wechat/cart/selectShopOrder?dates=' + new Date().getTime(), {
  139. data: {
  140. "pageSize": pagesize,
  141. "pageNO": pageNumber,
  142. "salesStatus": Status
  143. },
  144. dataType: 'json',
  145. type: 'post',
  146. xhrFields: {
  147. withCredentials: true
  148. },
  149. crossDomain: true,
  150. timeout: 15000,
  151. success: function(dt) {
  152. if(dt.isRedirect) {
  153. location.href = dt.redirectURL;
  154. } else {
  155. if(dt.status) {
  156. var order_data = [];
  157. order_data = dt.data.orderList;
  158. //参数为true代表没有更多数据了。
  159. mui('#pullrefresh_order_list').pullRefresh().endPullupToRefresh(order_data.length < pagesize);
  160. var table = document.body.querySelector('.my-table-view-order'),
  161. str = "",
  162. str1 = "";
  163. console.log(order_data);
  164. mui(order_data).each(function(index) {
  165. var txt_order = this;
  166. var li = document.createElement('li');
  167. switch(txt_order.salesStatus) {
  168. case "0":
  169. str = '<span>取消订单</span>';
  170. break;
  171. case "1":
  172. str = '<span class="cl-red">待支付</span> <a class="mui-btn my-btn-danger mui-pull-right go_order_details" value=' + this.salesOrderid + '>去支付</a>';
  173. break;
  174. case "2":
  175. str = '<span>待发货</span>';
  176. break;
  177. case "3":
  178. str = '<span>退款申请中</span>';
  179. break;
  180. case "4":
  181. str = '<span>已退款</span>';
  182. break;
  183. case "5":
  184. str = '<span>已发货</span>';
  185. break;
  186. case "6":
  187. str = '<span>申请退货中</span>';
  188. break;
  189. case "7":
  190. str = '<span>退货中</span>';
  191. break;
  192. case "8":
  193. str = '<span>订单关闭</span>';
  194. break;
  195. case "9":
  196. str = '<span>换货中</span>';
  197. break;
  198. case "10":
  199. str = '<span>换货完成</span>';
  200. break;
  201. case "11":
  202. str = '<span>申请换货中</span>';
  203. break;
  204. default:
  205. str = '<span>订单完成</span>';
  206. break;
  207. }
  208. var orderSalesStatus = txt_order.salesStatus;
  209. if(Status == "") {
  210. str1 = '状态:' + str;
  211. }
  212. var a = '<li><ul class="mui-table-view mui-grid-view my-view-no " style="padding-bottom: 0;">';
  213. var color_num = 0; //统计购买产品数量
  214. mui(txt_order.orderItemList).each(function(index) {
  215. var txt_item = this;
  216. color_num += txt_item.itemNum;
  217. a += '<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-text-left">'
  218. + '<a href="#"><img class="mui-media-object" src="' + txt_item.itemProductPic + '"></a>'
  219. + '</li>'
  220. + '<li class="mui-table-view-cell mui-media mui-col-xs-8 mui-text-left">'
  221. + '<a>'
  222. + '<div class="pro-tit">' + txt_item.itemProductName + '</div>'
  223. + '<h6 >颜色:' + txt_item.itemProductColor + '<span class="my-pull-right">数量:' + txt_item.itemNum + '</span></h6>'
  224. + '<p>¥' + accDiv(txt_item.itemProductDiscount,100) + '</p>'
  225. mui(txt_item.salesUserGiftList).each(function(index) {
  226. var txt_gift = this;
  227. if (index == 0) {
  228. a += '<h6>赠品:' + txt_gift.giftName + '&nbsp;&nbsp;&nbsp;&nbsp;数量:' + txt_gift.userGiftCount + '</h6>';
  229. } else {
  230. a += '<h6>&nbsp;&nbsp;&nbsp;&nbsp;' + txt_gift.giftName + '&nbsp;&nbsp;&nbsp;&nbsp;数量:' + txt_gift.userGiftCount + '</h6>';
  231. }
  232. });
  233. });
  234. a += '</a>'
  235. + '</li>'
  236. + '<li class="mui-table-view-cell mui-media mui-col-xs-12 mui-text-right cl-red">'
  237. + '<span class="mui-pull-left">共' + color_num + '件</span>合计:¥' + accDiv(txt_order.salesYetAmount,100) + '&nbsp;&nbsp;'
  238. + '</li>'
  239. + '<li class="mui-table-view-cell mui-media mui-col-xs-5 mui-text-left">'
  240. if (txt_order.salesStatus == 1) {
  241. if(txt_order.salesAdminRemark > 0) {
  242. SetRemainTime("setName" + index, index, this.salesAdminRemark);
  243. a += '<h6><span class="my-btn-orange" id="testid' + index + '"></span>分钟后,订单失效</h6>';
  244. }
  245. a += '<li class="mui-table-view-cell mui-media mui-col-xs-7 mui-text-right">'
  246. //+ '<button type="button" class="my-order-btn" onclick="cancel_order(\'' + txt_order.salesOrderid + '\',\'' + txt_order.salesStatus + '\')">取消订单</button>'
  247. + '<button type="button" class="my-order-btn" onclick="goOrderPay(\'' + txt_order.salesOrderid + '\')">立即支付</button>'
  248. + '<button type="button" class="my-order-btn" onclick="order_details(\'' + txt_order.salesOrderid + '\')">订单详情</button>'
  249. + '</li>'
  250. } else if (txt_order.salesStatus == 2) {
  251. a += '<li class="mui-table-view-cell mui-media mui-col-xs-7 mui-text-right">'
  252. + '<button type="button" class="my-order-btn" onclick="order_details(\'' + txt_order.salesOrderid + '\')">订单详情</button><button type="button" class="my-order-btn" onclick="warnSend(\'' + txt_order.salesOrderid + '\',\'' + txt_order.salesStatus + '\')">提醒发货</button>'
  253. + '</li>'
  254. } else if (txt_order.salesStatus == 5) {
  255. a += '<li class="mui-table-view-cell mui-media mui-col-xs-7 mui-text-right">'
  256. + '<button type="button" class="my-order-btn" onclick="show_logistics(\'' + txt_order.salesPostNum + '\',\'' + txt_order.salesPostFirm + '\');">查看物流</button><button type="button" class="my-order-btn" onclick="confirm_receipt(\'' + txt_order.salesOrderid + '\',\'' + txt_order.salesStatus + '\')">确认收货</button>'
  257. + '</li>'
  258. }
  259. li.innerHTML = a + '</ul>';
  260. table.appendChild(li);
  261. });
  262. } else {
  263. mui.confirm(dt.message + '是否重新加载页面?', '爱贝源-提示', btnArray, function(e) {
  264. if(e.index == 1) {
  265. location.reload(true);
  266. }
  267. });
  268. }
  269. }
  270. },
  271. error: function(xhr, type, errorThrown) {
  272. //异常处理;
  273. //errorfn(xhr);
  274. }
  275. });
  276. }
  277. function search_pullrefresh(str) {
  278. if(str != null && str != '') {
  279. if(!checkParameter(str)) {
  280. mui.alert('您输入的格式有误,请重新输入!');
  281. } else {
  282. pageNumber = 0;
  283. $('.my-scroll-order').empty();
  284. search_str = str;
  285. mui('#pullrefresh_order_list').pullRefresh().refresh(true);
  286. mui('#pullrefresh_order_list').pullRefresh().pullupLoading();
  287. }
  288. } else {
  289. pageNumber = 0;
  290. $('.my-scroll-order').empty();
  291. search_str = str;
  292. mui('#pullrefresh_order_list').pullRefresh().refresh(true);
  293. mui('#pullrefresh_order_list').pullRefresh().pullupLoading();
  294. }
  295. }
  296. /*mui.os.ios ? listener_ipt() : keyup_fn();*/
  297. function keyup_fn() {
  298. $('body').on('keyup', '#order-list-search', function(e) {
  299. var currKey = 0,
  300. e = e || event;
  301. currKey = e.keyCode || e.which || e.charCode;
  302. var keyName = String.fromCharCode(currKey);
  303. if(currKey == "13") {
  304. //传参数并加载数据
  305. var str = $.trim($('#order-list-search').val());
  306. search_pullrefresh(str);
  307. }
  308. });
  309. }
  310. mui.each(document.querySelectorAll('.tab-with-orderlist .mui-control-item'), function(index, el) {
  311. el.addEventListener('tap', function() {
  312. pageNumber = 0;
  313. switch(index) {
  314. case 0:
  315. tabindex = 1;
  316. break;
  317. case 1:
  318. tabindex = 2;
  319. break;
  320. case 2:
  321. tabindex = 5;
  322. break;
  323. default:
  324. tabindex = -1;
  325. break;
  326. }
  327. $('.my-scroll-order').empty();
  328. mui('#pullrefresh_order_list').pullRefresh().refresh(true);
  329. mui('#pullrefresh_order_list').pullRefresh().pullupLoading();
  330. }, false);
  331. });
  332. //提醒发货
  333. function warnSend(salesOrderid,status) {
  334. var dataArgs = {
  335. "orderId": salesOrderid,
  336. "status": status
  337. };
  338. $.ajax(base_path+'/wechat/cart/warn_send', {
  339. data: dataArgs,
  340. dataType: 'json',
  341. type: 'POST',
  342. timeout: 15000,
  343. success: function (dt) {
  344. mui.alert(dt.message);
  345. },
  346. error: function(xhr, type, errorThrown) {
  347. }
  348. });
  349. }
  350. //确认收货
  351. function confirm_receipt(salesOrderid,status) {
  352. var dataArgs = {
  353. "orderId": salesOrderid,
  354. "status": status
  355. };
  356. $.ajax(base_path+'/wechat/cart/confirm_receipt', {
  357. data: dataArgs,
  358. dataType: 'json',
  359. type: 'POST',
  360. timeout: 15000,
  361. success: function (dt) {
  362. mui.alert(dt.message);
  363. },
  364. error: function(xhr, type, errorThrown) {
  365. }
  366. });
  367. }
  368. //取消订单
  369. function cancel_order(salesOrderid,status) {
  370. var dataArgs = {
  371. "orderId": salesOrderid,
  372. "status": status
  373. };
  374. $.ajax(base_path+'/wechat/cart/cancelOrder', {
  375. data: dataArgs,
  376. dataType: 'json',
  377. type: 'POST',
  378. timeout: 15000,
  379. success: function (dt) {
  380. mui.alert(dt.message);
  381. },
  382. error: function(xhr, type, errorThrown) {
  383. }
  384. });
  385. }
  386. //显示物流信息
  387. function show_logistics(salesPostNum,salesPostFirm) {
  388. mui.openWindow({
  389. url: '/iamberry/view/view_logistics.html?billCode=' + salesPostNum + '&billName=' + salesPostFirm
  390. });
  391. }
  392. function order_details(salesOrderid) {
  393. mui.openWindow({
  394. url: 'order-details.html?orderId=' + salesOrderid
  395. });
  396. }
  397. function goOrderPay(salesOrderid) {
  398. var dataArgs = {
  399. "orderId": salesOrderid
  400. };
  401. $.ajax(base_path+'/wechat/cart/orderPay', { // 提交订单,准备支付
  402. data: dataArgs,
  403. dataType: 'json',
  404. type: 'POST',
  405. timeout: 15000,
  406. success: function(dt) {
  407. // layer.closeAll();
  408. if(dt.status) {
  409. var str = dt.data.info;
  410. var obj = JSON.parse("{" + str + "}");
  411. WeixinJSBridge.invoke('getBrandWCPayRequest', obj, function(res) {
  412. if(res.err_msg == 'get_brand_wcpay_request:ok') {
  413. var orderIds = {
  414. "orderId": dt.data.orderId
  415. };
  416. // layer.open({
  417. // type: 2,
  418. // shadeClose: false,
  419. // content: "正在请求加载订单信息..."
  420. // }); // 调用加载弹出层
  421. $.ajax(base_path+'/wechat/order/checkOrderPaySuccess', { // 校验订单状态
  422. data: orderIds,
  423. dataType: 'json',
  424. type: 'post',
  425. timeout: 15000,
  426. success: function(dt) {
  427. if(dt.status) { // 支付成功
  428. window.location.href = "pay-win.html?orderId=" + orderIds.orderId + "&dates=" + new Date().getTime();
  429. } else {
  430. setTimeout(checkOrderStatus(orderIds), 1000);
  431. }
  432. },
  433. error: function(xhr, type, errorThrown) {
  434. isPay = true;
  435. // layer.closeAll();
  436. mui.alert("您的网络异常,请刷新重试!");
  437. return;
  438. }
  439. });
  440. } else {
  441. isPay = true;
  442. mui.alert("对不起,支付失败!请稍后重试!" + dt.data.orderId + "支付失败!");
  443. window.location.href = "order-details.html?orderId=" + dt.data.orderId; // 前往订单详情
  444. }
  445. });
  446. } else {
  447. isPay = true;
  448. mui.alert(dt.message);
  449. }
  450. },
  451. error: function(xhr, type, errorThrown) {
  452. isPay = true;
  453. // layer.closeAll();
  454. mui.alert("您的网络异常,请刷新重试!");
  455. return;
  456. }
  457. });
  458. }
  459. function checkParameter(remark) {
  460. if(!/^[\u4e00-\u9fa5_a-zA-Z0-9-]+$/.test(remark)) {
  461. return false;
  462. }
  463. return true;
  464. }
  465. mui('body').on('tap', '#mydate', function() {
  466. var th = this;
  467. var picker = new mui.DtPicker({
  468. type: "date", //设置日历初始视图模式
  469. beginDate: new Date(2016, 7, 1), //设置开始日期
  470. endDate: new Date() //设置结束日期
  471. });
  472. console.log(picker)
  473. picker.show(function(rs) {
  474. pageNumber = 0;
  475. th.value = rs.text;
  476. picker.dispose();
  477. $('.my-scroll-order').empty();
  478. mui('#pullrefresh_order_list').pullRefresh().refresh(true);
  479. mui('#pullrefresh_order_list').pullRefresh().pullupLoading();
  480. });
  481. });
  482. mui("body").on('tap', '.mui-btn[data-id=btn-cancel]', function() {
  483. pageNumber = 0;
  484. document.getElementById('mydate').value = "";
  485. })
  486. mui("body").on('tap', '.my-right', function() {
  487. if($(".search-box").is(":hidden")) {
  488. $('.search-box').show();
  489. $(".tab-with-orderlist").css("margin-top", 105 + "px");
  490. $(".mui-bar-nav~.mui-content").css("padding-top", 156 + "px");
  491. } else {
  492. $('.search-box').hide();
  493. document.getElementById('mydate').value = "";
  494. $(".tab-with-orderlist").css("margin-top", 56 + "px");
  495. $(".mui-bar-nav~.mui-content").css("padding-top", 107 + "px");
  496. }
  497. })
  498. </script>
  499. </body>
  500. </html>