order-list.html 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532
  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" id="footer-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 mui-active">
  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. var ali = '<li class="mui-table-view-cell mui-media mui-col-xs-7 mui-text-right">';
  241. var ali2 = '</li>';
  242. var orderDesc = '<button type="button" class="my-order-btn" onclick="order_details(\'' + txt_order.salesOrderid + '\')">订单详情</button>';
  243. if (txt_order.salesStatus == 1) {
  244. if(txt_order.salesAdminRemark > 0) {
  245. SetRemainTime("setName" + index, index, this.salesAdminRemark);
  246. a += '<h6><span class="my-btn-orange" id="testid' + index + '"></span>分钟后,订单失效</h6>';
  247. }
  248. a += '<li class="mui-table-view-cell mui-media mui-col-xs-7 mui-text-right">'
  249. //+ '<button type="button" class="my-order-btn" onclick="cancel_order(\'' + txt_order.salesOrderid + '\',\'' + txt_order.salesStatus + '\')">取消订单</button>'
  250. + '<button type="button" class="my-order-btn" onclick="goOrderPay(\'' + txt_order.salesOrderid + '\')">立即支付</button>';
  251. a += orderDesc;
  252. a += '</li>';
  253. } else if (txt_order.salesStatus == 2) {
  254. a += ali;
  255. a += '<button type="button" class="my-order-btn" onclick="warnSend(\'' + txt_order.salesOrderid + '\',\'' + txt_order.salesStatus + '\')">提醒发货</button>'
  256. a += orderDesc;
  257. a += ali2;
  258. } else if (txt_order.salesStatus == 5) {
  259. a += ali;
  260. a += '<button type="button" class="my-order-btn" onclick="confirm_receipt(\'' + txt_order.salesOrderid + '\',\'' + txt_order.salesStatus + '\')">确认收货</button>'
  261. a += orderDesc;
  262. a += ali2;
  263. }else{
  264. a += ali;
  265. a += orderDesc;
  266. a += ali2;
  267. }
  268. li.innerHTML = a + '</ul>';
  269. table.appendChild(li);
  270. });
  271. } else {
  272. mui.confirm(dt.message + '是否重新加载页面?', '爱贝源-提示', btnArray, function(e) {
  273. if(e.index == 1) {
  274. location.reload(true);
  275. }
  276. });
  277. }
  278. }
  279. },
  280. error: function(xhr, type, errorThrown) {
  281. //异常处理;
  282. //errorfn(xhr);
  283. }
  284. });
  285. }
  286. function search_pullrefresh(str) {
  287. if(str != null && str != '') {
  288. if(!checkParameter(str)) {
  289. mui.alert('您输入的格式有误,请重新输入!');
  290. } else {
  291. pageNumber = 0;
  292. $('.my-scroll-order').empty();
  293. search_str = str;
  294. mui('#pullrefresh_order_list').pullRefresh().refresh(true);
  295. mui('#pullrefresh_order_list').pullRefresh().pullupLoading();
  296. }
  297. } else {
  298. pageNumber = 0;
  299. $('.my-scroll-order').empty();
  300. search_str = str;
  301. mui('#pullrefresh_order_list').pullRefresh().refresh(true);
  302. mui('#pullrefresh_order_list').pullRefresh().pullupLoading();
  303. }
  304. }
  305. /*mui.os.ios ? listener_ipt() : keyup_fn();*/
  306. function keyup_fn() {
  307. $('body').on('keyup', '#order-list-search', function(e) {
  308. var currKey = 0,
  309. e = e || event;
  310. currKey = e.keyCode || e.which || e.charCode;
  311. var keyName = String.fromCharCode(currKey);
  312. if(currKey == "13") {
  313. //传参数并加载数据
  314. var str = $.trim($('#order-list-search').val());
  315. search_pullrefresh(str);
  316. }
  317. });
  318. }
  319. mui.each(document.querySelectorAll('.tab-with-orderlist .mui-control-item'), function(index, el) {
  320. el.addEventListener('tap', function() {
  321. pageNumber = 0;
  322. switch(index) {
  323. case 0:
  324. tabindex = 1;
  325. break;
  326. case 1:
  327. tabindex = 2;
  328. break;
  329. case 2:
  330. tabindex = 3;
  331. break;
  332. default:
  333. tabindex = -1;
  334. break;
  335. }
  336. $('.my-scroll-order').empty();
  337. mui('#pullrefresh_order_list').pullRefresh().refresh(true);
  338. mui('#pullrefresh_order_list').pullRefresh().pullupLoading();
  339. }, false);
  340. });
  341. //提醒发货
  342. function warnSend(salesOrderid,status) {
  343. var dataArgs = {
  344. "orderId": salesOrderid,
  345. "status": status
  346. };
  347. $.ajax(base_path+'/wechat/cart/warn_send', {
  348. data: dataArgs,
  349. dataType: 'json',
  350. type: 'POST',
  351. timeout: 15000,
  352. success: function (dt) {
  353. mui.alert(dt.message);
  354. },
  355. error: function(xhr, type, errorThrown) {
  356. }
  357. });
  358. }
  359. //确认收货
  360. function confirm_receipt(salesOrderid,status) {
  361. var dataArgs = {
  362. "orderId": salesOrderid,
  363. "status": status
  364. };
  365. $.ajax(base_path+'/wechat/cart/confirm_receipt', {
  366. data: dataArgs,
  367. dataType: 'json',
  368. type: 'POST',
  369. timeout: 15000,
  370. success: function (dt) {
  371. mui.alert(dt.message);
  372. },
  373. error: function(xhr, type, errorThrown) {
  374. }
  375. });
  376. }
  377. //取消订单
  378. function cancel_order(salesOrderid,status) {
  379. var dataArgs = {
  380. "orderId": salesOrderid,
  381. "status": status
  382. };
  383. $.ajax(base_path+'/wechat/cart/cancelOrder', {
  384. data: dataArgs,
  385. dataType: 'json',
  386. type: 'POST',
  387. timeout: 15000,
  388. success: function (dt) {
  389. mui.alert(dt.message);
  390. },
  391. error: function(xhr, type, errorThrown) {
  392. }
  393. });
  394. }
  395. //显示物流信息
  396. function show_logistics(salesPostNum,salesPostFirm) {
  397. mui.openWindow({
  398. url: '/iamberry/view/view_logistics.html?billCode=' + salesPostNum + '&billName=' + salesPostFirm
  399. });
  400. }
  401. function order_details(salesOrderid) {
  402. mui.openWindow({
  403. url: 'order-details.html?orderId=' + salesOrderid
  404. });
  405. }
  406. function goOrderPay(salesOrderid) {
  407. var dataArgs = {
  408. "orderId": salesOrderid
  409. };
  410. $.ajax(base_path+'/wechat/cart/orderPay', { // 提交订单,准备支付
  411. data: dataArgs,
  412. dataType: 'json',
  413. type: 'POST',
  414. timeout: 15000,
  415. success: function(dt) {
  416. // layer.closeAll();
  417. if(dt.status) {
  418. var str = dt.data.info;
  419. var obj = JSON.parse("{" + str + "}");
  420. WeixinJSBridge.invoke('getBrandWCPayRequest', obj, function(res) {
  421. if(res.err_msg == 'get_brand_wcpay_request:ok') {
  422. var orderIds = {
  423. "orderId": dt.data.orderId
  424. };
  425. // layer.open({
  426. // type: 2,
  427. // shadeClose: false,
  428. // content: "正在请求加载订单信息..."
  429. // }); // 调用加载弹出层
  430. $.ajax(base_path+'/wechat/order/checkOrderPaySuccess', { // 校验订单状态
  431. data: orderIds,
  432. dataType: 'json',
  433. type: 'post',
  434. timeout: 15000,
  435. success: function(dt) {
  436. if(dt.status) { // 支付成功
  437. window.location.href = "pay-win.html?orderId=" + orderIds.orderId + "&dates=" + new Date().getTime();
  438. } else {
  439. setTimeout(checkOrderStatus(orderIds), 1000);
  440. }
  441. },
  442. error: function(xhr, type, errorThrown) {
  443. isPay = true;
  444. // layer.closeAll();
  445. mui.toast("您的网络异常,请刷新重试!");
  446. return;
  447. }
  448. });
  449. } else {
  450. isPay = true;
  451. //mui.alert("对不起,支付失败!请稍后重试!" + dt.data.orderId + "支付失败!");
  452. //window.location.href = "order-details.html?orderId=" + dt.data.orderId; // 前往订单详情
  453. }
  454. });
  455. } else {
  456. isPay = true;
  457. mui.toast(dt.message);
  458. }
  459. },
  460. error: function(xhr, type, errorThrown) {
  461. isPay = true;
  462. // layer.closeAll();
  463. mui.toast("您的网络异常,请刷新重试!");
  464. return;
  465. }
  466. });
  467. }
  468. function checkParameter(remark) {
  469. if(!/^[\u4e00-\u9fa5_a-zA-Z0-9-]+$/.test(remark)) {
  470. return false;
  471. }
  472. return true;
  473. }
  474. mui('body').on('tap', '#mydate', function() {
  475. var th = this;
  476. var picker = new mui.DtPicker({
  477. type: "date", //设置日历初始视图模式
  478. beginDate: new Date(2016, 7, 1), //设置开始日期
  479. endDate: new Date() //设置结束日期
  480. });
  481. console.log(picker)
  482. picker.show(function(rs) {
  483. pageNumber = 0;
  484. th.value = rs.text;
  485. picker.dispose();
  486. $('.my-scroll-order').empty();
  487. mui('#pullrefresh_order_list').pullRefresh().refresh(true);
  488. mui('#pullrefresh_order_list').pullRefresh().pullupLoading();
  489. });
  490. });
  491. mui("body").on('tap', '.mui-btn[data-id=btn-cancel]', function() {
  492. pageNumber = 0;
  493. document.getElementById('mydate').value = "";
  494. })
  495. mui("body").on('tap', '.my-right', function() {
  496. if($(".search-box").is(":hidden")) {
  497. $('.search-box').show();
  498. $(".tab-with-orderlist").css("margin-top", 105 + "px");
  499. $(".mui-bar-nav~.mui-content").css("padding-top", 156 + "px");
  500. } else {
  501. $('.search-box').hide();
  502. document.getElementById('mydate').value = "";
  503. $(".tab-with-orderlist").css("margin-top", 56 + "px");
  504. $(".mui-bar-nav~.mui-content").css("padding-top", 107 + "px");
  505. }
  506. })
  507. </script>
  508. </body>
  509. </html>