order-list.html 23 KB

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