lease_order_details.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>订单详情</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9. <link rel="stylesheet" href="//css.iamberry.com/wateroPF/css/mui.min.css">
  10. <link rel="stylesheet" href="//css.iamberry.com/wateroPF/css/iconfont.css" />
  11. <link rel="stylesheet" href="//css.iamberry.com/wateroPF/css/icons-extra.css"/>
  12. <link rel="stylesheet" href="//css.iamberry.com/wateroPF/css/style.css" />
  13. <style type="text/css">
  14. .return{position: fixed;
  15. right: 30px;
  16. bottom: 80px;
  17. background: rgba(0,0,0,.2);
  18. padding: 12px;
  19. border-radius: 50%;
  20. text-align: center;
  21. opacity: .9;color: #333;display: none;}
  22. .my-btn-hand{display:block;width: 100%;height: 55px;background-color: #c5c5c5;color: #fff;border: 0;border-radius: 0;}
  23. .my-btn-hand.active{background-color: #1cc9f4;}
  24. .cl-blue{color: #1cc9f4;}
  25. .iconfont{font-size: 20px;}
  26. .mui-content-madded{background: #fff;padding: 10px 10px 40px 10px;}
  27. .lease-ul{font-size: 12px;color: #999;}
  28. .lease-left{display: inline-block;width: 25%;}
  29. .ul_radio{width: 73%;display: inline-block;}
  30. .ul_radio li{width:100%;height: 55px;margin: 0 1%;border-radius: 5px; display: inline-block;position: relative;font-family:"iconfont" !important;font-style:normal;-webkit-font-smoothing: antialiased;}
  31. .radio-cell .active:after{position: absolute;right: 0;bottom: 0;content: "\e66f";color: #f1436c;line-height: 1;font-size: 20px;}
  32. .lease-r-center{position: absolute;left: 70px;top: 20px;}
  33. .lease-select-box{padding: 12px 0;position: relative;}
  34. .lease-select{position: absolute;left: 0;top: 10px;}
  35. .order-noline{font-size: 13px;color: #666;padding: 5px 0;background: #f8f8f8;}
  36. .order-noline>li{margin:7px 0;}
  37. .order-noline .mui-media{padding-left: 10px;padding-right: 10px;}
  38. .order-noline li:after{}
  39. .wh-60{width: 50px;margin-right:25px;}
  40. .btn-give,.btn-activation{padding: 3px 10px; border: 0;font-size: 14px;margin-right: 10px;color: #1cc9f4;width: 90px;background-color: transparent;}
  41. .btn-give:before,.btn-activation:before,.btn-tui:before,.btn-shouhou:before{font-size: 16px;}
  42. .btn-tui{padding: 3px 10px;border:0;font-size: 14px;color: #1CC9F4;}
  43. .btn-shouhou{padding: 3px 10px;border: 0;font-size: 14px;color: #1CC9F4;}
  44. .lease-order-list li:before,.lease-order-list li:after{display: none;}
  45. .lease-order-list>.mui-table-view-cell{margin:10px;background:#f8f8f8;padding: 10px;border-radius: 5px;}
  46. .lease-order-list:after,.lease-order-list:before,.order-noline:after{display: none;}
  47. .lease-titie{padding: 12px;font-size: 12px;color: #999;background: #fff;}
  48. .ui{padding:0 0 8px 0;}
  49. .line{width: 100%;height: 10px;position: relative;}
  50. .line:after{content: '';position: absolute;left: 0;top: 50%;height: 1px;background: #c8c7cc;width: 100%;-webkit-transform: scaleY(.5);transform: scaleY(.5);}
  51. .sp-details{border-bottom: 1px solid rgba(0,0,0,.1); margin-bottom: 0px !important;}
  52. .mui-backdrop {
  53. position: fixed;
  54. z-index: 998;
  55. top: 0;
  56. right: 0;
  57. bottom: 0;
  58. left: 0;
  59. background:url(//s.iamberry.com/wateroPF/images/shop/share.png) top center no-repeat rgba(0, 0, 0, .8);
  60. background-size: 80%;
  61. }
  62. .mui-backdrop:after{content:'点键右上角分享,将水机送给好友吧。';position: absolute;left:0;top:0;width:100%; text-align: center;color:#fff;padding-top:50%;font-size:18px;}
  63. </style>
  64. <script>
  65. // 屏蔽分享
  66. window.hiddenAllWechatMenu = true;
  67. </script>
  68. </head>
  69. <body>
  70. <div class="loading-bg">
  71. <div class="mui-loading">
  72. <div class="mui-spinner">
  73. </div>
  74. &nbsp;&nbsp;加载中...
  75. </div>
  76. </div>
  77. <div class="mui-content">
  78. <!--下拉刷新容器-->
  79. <div id="pullrefresh_lease_orderlist" class="mui-content mui-scroll-wrapper">
  80. <div class="mui-scroll">
  81. <!--数据列表-->
  82. <div class="lease-titie" id="countOrderNum">
  83. 您共有0个订单
  84. </div>
  85. <ul class="mui-table-view lease-order-list" style="margin-top: -10px;">
  86. </ul>
  87. <!--<ul class="mui-table-view mui-grid-view my-tab-view-pull">
  88. </ul> -->
  89. </div>
  90. </div>
  91. <!--<ul class="mui-table-view lease-order-list">
  92. <li class="mui-table-view-cell">
  93. <span class="iconfont icon-lease3 cl-blue"></span>&nbsp;订单编号:15646231654321
  94. <ul class="mui-table-view order-noline">
  95. <li>订单状态:已发货<span class="mui-pull-right">已支付金额:<span class="cl-red">¥1000.00</span></span></li>
  96. <li>下单时间: 2017年2月01日 10:00:12</li>
  97. <li>收货人信息:何小刚 1599999999</li>
  98. <li>广东省-深圳市-福田区-莲花街道深南大道特区报业大厦12B 深圳爱贝源科技有限公司</li>
  99. <li>物流信息:顺丰快递 89411145413314<span class="cl-blue mui-pull-right">物流查询</span></li>
  100. <li class="mui-table-view-cell mui-media">
  101. <a href="javascript:;">
  102. <img class="mui-pull-left wh-60" src="images/cp-3.jpg">
  103. <div class="mui-media-body">
  104. 美国watero高端净水专家
  105. <div>
  106. 服务费:¥700.00设备押金:¥300.00
  107. </div>
  108. <div>
  109. <button type="button" class="mui-btn iconfont icon-lease8 btn-give"> 送人</button><button type="button" class="mui-btn iconfont icon-erweima mui-pull-right btn-activation"> 激活</button>
  110. </div>
  111. </div>
  112. </a>
  113. </li>
  114. <li style="padding-top: 10px;">
  115. <button type="button" class="mui-btn iconfont icon-lease5 btn-tui"> 退押金</button><button type="button" class="mui-btn iconfont icon-lease6 mui-pull-right btn-shouhou"> 申请售后</button>
  116. </li>
  117. </ul>
  118. </li>
  119. <li class="mui-table-view-cell">
  120. <span class="iconfont icon-lease3 cl-blue"></span>&nbsp;订单编号:15646231654321
  121. <ul class="mui-table-view order-noline">
  122. <li>订单状态:已发货<span class="mui-pull-right">已支付金额:<span class="cl-red">¥1000.00</span></span></li>
  123. <li>下单时间: 2017年2月01日 10:00:12</li>
  124. <li>收货人信息:何小刚 1599999999</li>
  125. <li>广东省-深圳市-福田区-莲花街道深南大道特区报业大厦12B 深圳爱贝源科技有限公司</li>
  126. <li>物流信息:顺丰快递 89411145413314<span class="cl-blue mui-pull-right">物流查询</span></li>
  127. <li class="mui-table-view-cell mui-media">
  128. <a href="javascript:;">
  129. <img class="mui-pull-left wh-60" src="images/cp-3.jpg">
  130. <div class="mui-media-body">
  131. 美国watero高端净水专家
  132. <div>
  133. 服务费:¥700.00设备押金:¥300.00
  134. </div>
  135. <div>
  136. <button type="button" class="mui-btn iconfont icon-lease8 btn-give"> 送人</button><button type="button" class="mui-btn iconfont icon-erweima mui-pull-right btn-activation"> 激活</button>
  137. </div>
  138. </div>
  139. </a>
  140. </li>
  141. <li style="padding-top: 10px;">
  142. <button type="button" class="mui-btn iconfont icon-lease5 btn-tui"> 退押金</button><button type="button" class="mui-btn iconfont icon-lease6 mui-pull-right btn-shouhou"> 申请售后</button>
  143. </li>
  144. </ul>
  145. </li>
  146. </ul>-->
  147. </div>
  148. <div class="return">
  149. <span onClick="gotoTop();return false;" class="mui-icon-extra mui-icon-extra-top"></span>
  150. </div>
  151. <script src="//s.iamberry.com/wateroPF/js/mui.min.js"></script>
  152. <script src="//s.iamberry.com/wateroPF/js/jquery-2.1.1.min.js"></script>
  153. <script src="//s.iamberry.com/wateroPF/js/shop/main.js"></script>
  154. <script src="//s.iamberry.com/wateroPF/js/shop/wechat-utils-1.0.js"></script>
  155. <script>
  156. mui.init({
  157. pullRefresh: {
  158. container: '#pullrefresh_lease_orderlist',
  159. down: {
  160. //callback: pulldownRefresh
  161. },
  162. up: {
  163. contentrefresh: '正在加载...',
  164. callback: pullupRefresh
  165. }
  166. }
  167. });
  168. var count = 0;
  169. var proType=1;
  170. var pageNumber = 0,pagesize = 2;
  171. var rentStatus = -1;
  172. var userNickName = '';
  173. /**
  174. * 上拉加载具体业务实现
  175. */
  176. function pullupRefresh() {
  177. ++pageNumber;
  178. mui.ajax(base_path + '/rent_order/list?dates=' + new Date().getTime(), {
  179. data: {
  180. "pageSize": pagesize,
  181. "pageNO": pageNumber,
  182. "rentStatus":rentStatus
  183. },
  184. dataType: 'json',
  185. type: 'post',
  186. timeout: 15000,
  187. success: function(dt) {
  188. //console.log(dt);
  189. if(dt.isRedirect) {
  190. location.href = dt.redirectURL;
  191. }else{
  192. if(dt.status) {
  193. var order_data = dt.data.list;
  194. var countOrderNum = dt.data.countOrder;
  195. $("#countOrderNum").text("您共有" + countOrderNum + "个订单");
  196. mui('#pullrefresh_lease_orderlist').pullRefresh().endPullupToRefresh(order_data.length < pagesize);//参数为true代表没有更多数据了。
  197. var table = document.body.querySelector('.lease-order-list');
  198. //var cells = document.body.querySelectorAll('.lease-order-list>li');
  199. mui(order_data).each(function(index) {
  200. if(userNickName == ''){
  201. userNickName = decodeURI(this.rentUserNickName);
  202. }
  203. var li = document.createElement('li');
  204. li.className = 'mui-table-view-cell';
  205. var productItem = '',presentItem = '';
  206. var rentYears = this.typeName;
  207. var orderStatus = this.rentStatus;
  208. var rentOrderId = this.rentOrderId;
  209. mui(this.orderItemList).each(function(n) {
  210. if(this.itemProductType == 1){
  211. var activateButton = '';
  212. var presentButton = '';
  213. if(orderStatus == 5 && this.itemCodeState == 1){
  214. activateButton = '<button type="button" class="mui-btn iconfont icon-erweima mui-pull-right btn-activation toActivate" id="actIvateBtn_' + rentOrderId + '"> 激活</button>'
  215. presentButton = '<button type="button" class="mui-btn iconfont icon-lease8 btn-give" onclick="presentOther('+ this.itemId +')" style="text-align: left;padding: 3px 10px 3px 0;"> 送人</button>'
  216. }
  217. productItem = '<li class="mui-table-view-cell mui-media">'
  218. + '<a class="sp-details">'
  219. + '<img class="mui-pull-left wh-60" src="//s.iamberry.com/wateroPF/images/cp-1.jpg">'
  220. + '<div class="mui-media-body">' + this.itemProductName
  221. + activateButton
  222. + '<div style="height:30px;">租期:<span>' + rentYears + '</span>'
  223. + '</div>'
  224. + '<div>'
  225. + '<button type="button" class="mui-btn iconfont icon-lease6 mui-pull-right btn-activation afterSale" id="'+rentOrderId+'" name="'+this.itemId+'" postStatus="'+orderStatus+'"> 售后</button>'
  226. + presentButton
  227. + '</div>'
  228. + '</div>'
  229. + '</a>'
  230. + '</li>';
  231. }else if(this.itemProductType == 5){
  232. presentItem = '<li>精美礼品:' + this.itemProductName + '</li>';
  233. }
  234. });
  235. var postInfo = '';
  236. if(typeof(this.rentPostFirm) != 'undefined' && this.rentPostFirm != ''
  237. && typeof(this.rentPostNum) != 'undefined' && this.rentPostNum != ''){
  238. postInfo = '<li>物流信息:' + getPostFirm(this.rentPostFirm) + ' ' + this.rentPostNum
  239. + '<span class="cl-blue mui-pull-right show_post_info" postNum="' + this.rentPostNum + '">'
  240. + '物流查询</span>'
  241. +'</li>'
  242. }
  243. li.innerHTML = '<div class="ui">'
  244. + '<span class="iconfont icon-lease3 cl-blue"></span>'
  245. + '&nbsp;订单编号:' + this.rentOrderId
  246. + '</div>'
  247. + '<ul class="mui-table-view order-noline">'
  248. + '<li>订单状态:' + getOrderStatus(this.rentStatus) + '<span class="mui-pull-right">订单合计:<span class="cl-red">¥' + accDiv(this.rentAmount,100) + '</span>元</span></li>'
  249. + '<li>抵扣金额:<span class="cl-red">¥' + accDiv(this.rentServiceMoney,100) + '</span>元<span class="mui-pull-right">支付金额:<span class="cl-red">¥' + accDiv(this.rentPayMoney,100) + '</span>元</span></li>'
  250. + '<li>订单时间: ' + this.rentCreateDate + '</li>'
  251. + '<div class="line"></div><li>收货信息:</li>'
  252. + '<li>' + this.rentAddressName + ' ' + this.rentAddressTel + '</li>'
  253. + '<li>' + this.rentAddressInfo + '</li>'
  254. + postInfo
  255. + productItem
  256. + presentItem
  257. + '</ul>';
  258. table.appendChild(li);
  259. //激活
  260. $(".toActivate").each(function() {
  261. $('#actIvateBtn_' + rentOrderId).on("click", function() {
  262. wx.scanQRCode({
  263. needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
  264. scanType: ["qrCode"], // 可以指定扫二维码还是一维码,默认二者都有
  265. success: function (res) {
  266. //console.log("result--->" + result);
  267. }
  268. });
  269. });
  270. });
  271. })
  272. } else {
  273. mui.alert("暂未查询到租用订单!请稍后重试!");
  274. mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
  275. }
  276. }
  277. },
  278. error: function(xhr, type, errorThrown) {
  279. console.log(xhr)
  280. mui.alert("查询租用订单出错!请稍后重试!");
  281. mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
  282. }
  283. })
  284. }
  285. mui.ready(function() {
  286. //console.log("页面加载完毕");
  287. rentStatus = getParam("rentStatus") == null ? '' : getParam("rentStatus");
  288. mui('#pullrefresh_lease_orderlist').pullRefresh().pullupLoading();
  289. document.querySelector('.loading-bg').style.display = 'none';
  290. });
  291. $(window).on("scroll", function() {
  292. if ($(window).scrollTop() > 120) {
  293. $(".return").show();
  294. } else {
  295. $(".return").hide();
  296. }
  297. });
  298. $(".ul_radio li").each(function() {
  299. $(this).on("click", function() {
  300. $(this).addClass("active");
  301. $(this).siblings().removeClass("active");
  302. });
  303. });
  304. function presentOther(itemId){
  305. mui.ajax(base_path + '/machine/present_other?dates=' + new Date().getTime(), {
  306. data: {
  307. "orderItemId":itemId
  308. },
  309. dataType: 'json',
  310. type: 'post',
  311. timeout: 15000,
  312. success: function(dt) {
  313. //console.log(dt);
  314. if(dt.status) {
  315. mask.show();//显示遮罩
  316. var url = encodeURI('https://' + window.location.host+'/wateroPF/view/rent/lease_for_my_equipment.html?shareId=' + dt.data);
  317. var desc = userNickName + "送给你一台净水机,为你送上一份饮水健康。";
  318. window.repleFlag = false;
  319. window.hiddenAllWechatMenu = false; //window.wxFriend window.repleWxData
  320. window.wxFriend = {
  321. "appId": "",
  322. "imgUrl": 'https://s.iamberry.com/wateroPF/images/shop/share-lease.png',
  323. "link": url,
  324. "desc": desc,
  325. "title": "给你送净水机了,快来领取吧!",
  326. "netError": "您的网络异常,请刷新重试!如多次刷新无效,请向我们反应 ~",
  327. "shareTimeSuccess": "分享成功",
  328. "shareTimeCancel": "已取消分享",
  329. "shareAppSuccess": "分享成功!",
  330. "shareAppCancel": "已取消分享"
  331. };
  332. getConfig();
  333. } else {
  334. mui.alert(dt.message);
  335. //mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
  336. }
  337. },
  338. error: function(xhr, type, errorThrown) {
  339. mui.alert("操作有误!该机器不可分享!");
  340. console.log(xhr)
  341. }
  342. })
  343. }
  344. //售后
  345. mui('body').on('tap', '.afterSale', function() {
  346. /* mui.alert("请在公众号聊天窗口发送您的问题!");*/
  347. var th=this;
  348. mui.openWindow({
  349. url: '/wateroPF/view/order_service.html?orderId='+th.getAttribute("id")+'&itemId='+th.getAttribute("name")+'&postStatus='+th.getAttribute("postStatus")
  350. });
  351. });
  352. var mask = mui.createMask();//callback为用户点击蒙版时自动执行的回调;
  353. //mask.close();//关闭遮罩
  354. function getOrderStatus(status){
  355. switch (status){
  356. case 0:
  357. return '取消订单';
  358. case 1:
  359. return '待支付';
  360. case 2:
  361. return '待发货';
  362. case 3:
  363. return '退款申请中';
  364. case 4:
  365. return '已退款';
  366. case 5:
  367. return '已发货';
  368. case 6:
  369. return '申请退货中';
  370. case 7:
  371. return '退货中';
  372. case 8:
  373. return '退货成功';
  374. case 9:
  375. return '换货中';
  376. case 10:
  377. return '换货完成';
  378. case 11:
  379. return '申请换货中';
  380. default:
  381. break;
  382. }
  383. }
  384. function getPostFirm(firmCode){
  385. switch(firmCode){
  386. case 'sto':
  387. return '申通快递';
  388. break;
  389. case 'yto':
  390. return '圆通快递';
  391. break;
  392. case 'sf':
  393. return '顺丰快递';
  394. break;
  395. case 'ems':
  396. return '邮政EMS';
  397. break;
  398. case 'zto':
  399. return '中通快递';
  400. break;
  401. case 'zjs':
  402. return '宅急送';
  403. break;
  404. case 'yunda':
  405. return '韵达快递';
  406. break;
  407. case 'cces':
  408. return 'cces快递';
  409. break;
  410. case 'pick':
  411. return '上门提货';
  412. break;
  413. case 'htky':
  414. return '汇通快递';
  415. break;
  416. case 'ttkdex':
  417. return '天天快递';
  418. break;
  419. case 'stars':
  420. return '星晨急便';
  421. break;
  422. case 'jd':
  423. return '京东快递';
  424. break;
  425. case 'dbkd':
  426. return '德邦快递';
  427. break;
  428. case '01':
  429. return '其他';
  430. break;
  431. case '02':
  432. return '上门送货';
  433. break;
  434. }
  435. }
  436. </script>
  437. </body>
  438. </html>