order-list.html 23 KB

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