orderDetail.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  6. <meta name="format-detection" content="email=no" />
  7. <meta name="format-detection" content="telephone=no" />
  8. <title>订单详情</title>
  9. <link rel="stylesheet" href="../../css/reset.css">
  10. <style>
  11. html{font-size:10px}
  12. html,body{
  13. height: 100%;
  14. }
  15. .flex-wrap{
  16. display: -webkit-box;
  17. display: -webkit-flex;
  18. display: flex;
  19. }
  20. .flex-con{
  21. -webkit-box-flex: 1;
  22. -webkit-flex: 1;
  23. flex: 1;
  24. }
  25. body{
  26. display: -webkit-box;
  27. display: -webkit-flex;
  28. display: flex;
  29. -webkit-box-orient: vertical;
  30. -webkit-flex-flow: column;
  31. flex-flow: column;
  32. }
  33. header{
  34. width: 100%;
  35. height: 4rem;
  36. line-height: 4rem;
  37. background-color: #252736;
  38. position: fixed;
  39. top: 0;
  40. left: 0;
  41. z-index: 999;
  42. }
  43. header h2{
  44. width: 100%;
  45. height: 100%;
  46. font-size: 1.8rem;
  47. color: #fff;
  48. font-weight: lighter;
  49. text-align: center;
  50. position: relative;
  51. }
  52. header i{
  53. display: inline-block;
  54. width: 4.3rem;
  55. height: 4.3rem;
  56. background: url("../../img/index/backBtn.png") no-repeat 30%/60%;
  57. position: absolute;
  58. left: 0;
  59. bottom: 0;
  60. }
  61. header a{
  62. display: inline-block;
  63. font-size: 1.2rem;
  64. color: #fff;
  65. position: absolute;
  66. right: 1.2rem;
  67. top: 0;
  68. }
  69. header span{
  70. display: inline-block;
  71. font-size: 1.2rem;
  72. color: #fff;
  73. position: absolute;
  74. right: 1.2rem;
  75. top: 0;
  76. }
  77. main{
  78. background-color: #f7f7f7;
  79. padding-top: 4rem;
  80. position: relative;
  81. }
  82. .banner{
  83. width: 100%;
  84. height: 7rem;
  85. line-height: 7rem;
  86. background: url("../../img/order/banner.png") round;
  87. }
  88. .banner div:nth-of-type(1){
  89. font-size: 1.5rem;
  90. color: #fff;
  91. margin-left: 3.4rem;
  92. }
  93. .banner div:nth-of-type(2){
  94. width: 7rem;
  95. height: 5rem;
  96. margin: 1rem 3.4rem 0 0;
  97. }
  98. .banner div:nth-of-type(2).OPay{
  99. background: url("../../img/order/pay.png") round;
  100. }
  101. .banner div:nth-of-type(2).ONo-pay{
  102. background: url("../../img/order/no-pay.png") round;
  103. }
  104. .banner div:nth-of-type(2).OSend{
  105. background: url("../../img/order/send.png") round;
  106. }
  107. .banner div:nth-of-type(2).OEnd{
  108. background: url("../../img/order/end.png") round;
  109. }
  110. .banner div:nth-of-type(2).OCancel{
  111. width: 5rem;
  112. height: 5rem;
  113. background: url("../../img/order/cancel.png") round;
  114. }
  115. div.hid{
  116. display: none;
  117. }
  118. .gzOrder{
  119. background-color: #fff;
  120. margin-bottom: .1rem;
  121. }
  122. .gzOrder>p{
  123. font-size: 1.1rem;
  124. line-height: 2.5rem;
  125. border-bottom: 1px solid #efefef;
  126. padding-left: .6rem;
  127. }
  128. .gzOrder>div{
  129. height: 5rem;
  130. padding:.6rem;
  131. }
  132. .orderI{
  133. width: 3.3rem;
  134. height: 100%;
  135. background: url("../../img/order/loca.png") no-repeat 50%/50%;
  136. }
  137. .userDiv{
  138. font-size: 1rem;
  139. color: #212121;
  140. margin-left: .2rem;
  141. }
  142. .Name{
  143. margin-bottom: .4rem;
  144. }
  145. .orderShop li{
  146. color: #212121;
  147. background-color: #fff;
  148. }
  149. .statusBox{
  150. background-color: #fff;
  151. padding: .6rem;
  152. }
  153. .orderList{
  154. background-color: #fff;
  155. }
  156. .orderDiv{
  157. font-size: 1rem;
  158. color: #8e8e8e;
  159. }
  160. .orderNum{
  161. font-size: 1.1rem;
  162. color: #b0b0b0;
  163. }
  164. .status{
  165. color: #ff5001;
  166. font-size: 1.2rem;
  167. }
  168. .commDiv{
  169. padding: .6rem;
  170. }
  171. .commImg{
  172. width: 7rem;
  173. height: 6rem;
  174. }
  175. .commImg>img{
  176. display: block;
  177. width: 100%;
  178. height: 100%;
  179. }
  180. .commFig{
  181. font-size: 1.1rem;
  182. padding-left: .6rem;
  183. }
  184. .commNum{
  185. font-size: .9rem;
  186. color: #8e8e8e;
  187. text-align: right;
  188. margin-top: .3rem;
  189. }
  190. .totalP{
  191. background-color: #fff;
  192. }
  193. .describe{
  194. text-align: right;
  195. font-size: .8rem;
  196. padding: .3rem .6rem;
  197. }
  198. .describe span{
  199. font-size: 1rem;
  200. }
  201. .btnBox{
  202. font-size: 1rem;
  203. background-color: #fff;
  204. border-top: 1px solid #efefef;
  205. padding:.6rem .6rem 2rem 0;
  206. }
  207. .btnBox div{
  208. width: 6rem;
  209. height: 2.2rem;
  210. line-height: 2.2rem;
  211. text-align: center;
  212. border: 1px solid #a0a0a0;
  213. border-radius: 1.1rem;
  214. margin-left: .4rem;
  215. float: right;
  216. }
  217. .btnBox div.active{
  218. color: #ff5001;
  219. border: 1px solid #ff5001;
  220. }
  221. .payType{
  222. padding: 0 .6rem;
  223. margin-top: 1px;
  224. background-color: #fff;
  225. }
  226. .payType>p:nth-of-type(1){
  227. font-size: 1.1rem;
  228. line-height: 2.5rem;
  229. border-bottom: 1px solid #efefef;
  230. padding-left: .6rem;
  231. }
  232. .payType>p:nth-of-type(2){
  233. font-size: 1.1rem;
  234. line-height: 2.5rem;
  235. color: #8e8e8e;
  236. border-bottom: 1px solid #efefef;
  237. padding-left: .6rem;
  238. }
  239. .payUl li{
  240. height: 6rem;
  241. padding: .6rem;
  242. }
  243. .payUl li.active .zfI{
  244. background: url("../../img/order/zfActive.png") no-repeat 50%/50%;
  245. }
  246. .zfI{
  247. width: 3.2rem;
  248. height: 100%;
  249. background: url("../../img/shopPage/select.png") no-repeat 50%/50%;
  250. }
  251. .zfTypeI{
  252. width: 4rem;
  253. height: 4rem;
  254. background: url("../../img/order/ZFB.png") round;
  255. margin: .4rem 1rem .4rem 0;
  256. }
  257. .zfName{
  258. line-height: 4.8rem;
  259. font-size: 1.1rem;
  260. color: #8e8e8e;
  261. }
  262. .cancelDiv{
  263. position: fixed;
  264. left: 0;
  265. right: 0;
  266. top: 0;
  267. bottom: 0;
  268. background-color: rgba(0,0,0,0.5);
  269. z-index: 99;
  270. display: none;
  271. }
  272. .cancelBox{
  273. width: 70%;
  274. height: 14rem;
  275. background-color: #fff;
  276. border-radius: .6rem;
  277. position: absolute;
  278. top: calc(50% - 7rem);
  279. left: 15%;
  280. }
  281. .cancelBox>p{
  282. line-height: 9.4rem;
  283. color: #8e8e8e;
  284. text-align: center;
  285. font-size: 1.5rem;
  286. border-bottom: 1px solid #efefef;
  287. }
  288. .cancelBox>div>div{
  289. width: 50%;
  290. height: 4.6rem;
  291. line-height: 4.6rem;
  292. text-align: center;
  293. font-size: 1.4rem;
  294. }
  295. .suBtn{
  296. color: #00a651;
  297. border-left: 1px solid #efefef;
  298. }
  299. .waitDiv{
  300. width: 1rem;
  301. height: 1rem;
  302. background: url("../../img/order/waiting.gif") round;
  303. position: absolute;
  304. left: calc(50% - .5rem);
  305. top: calc(50% - .5rem);
  306. }
  307. .mainPB{
  308. width: 100%;
  309. height: 5rem;
  310. }
  311. .cancelDiv{
  312. position: fixed;
  313. left: 0;
  314. right: 0;
  315. top: 0;
  316. bottom: 0;
  317. background-color: rgba(0,0,0,0.5);
  318. z-index: 99;
  319. display: none;
  320. }
  321. .cancelBox{
  322. width: 70%;
  323. height: 14rem;
  324. background-color: #fff;
  325. border-radius: .6rem;
  326. position: absolute;
  327. top: calc(50% - 7rem);
  328. left: 15%;
  329. }
  330. .cancelBox>p{
  331. line-height: 9.4rem;
  332. color: #8e8e8e;
  333. text-align: center;
  334. font-size: 1.5rem;
  335. border-bottom: 1px solid #efefef;
  336. }
  337. .cancelBox>div>div{
  338. width: 50%;
  339. height: 4.6rem;
  340. line-height: 4.6rem;
  341. text-align: center;
  342. font-size: 1.4rem;
  343. }
  344. .suBtn{
  345. color: #00a651;
  346. border-left: 1px solid #efefef;
  347. }
  348. .remindDiv{
  349. height: 3rem;
  350. line-height: 3rem;
  351. text-align: center;
  352. font-size: 1.2rem;
  353. color: #fff;
  354. padding: 0 1rem;
  355. border-radius: 2rem;
  356. background-color: rgba(0,0,0,0.7);
  357. position: fixed;
  358. bottom: 20%;
  359. left: 50%;
  360. -webkit-transform: translateX(-50%);
  361. transform: translateX(-50%);
  362. opacity: 0;
  363. -webkit-transition: .5s;
  364. transition: .5s;
  365. z-index: -99;
  366. }
  367. @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
  368. @media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
  369. @media screen and (min-width:415px) and (max-width:639px){html{font-size:13px}}
  370. @media screen and (min-width:640px) and (max-width:719px){html{font-size:18px}}
  371. @media screen and (min-width:720px) and (max-width:749px){html{font-size:19px}}
  372. @media screen and (min-width:750px) and (max-width:799px){html{font-size:20px}}
  373. @media screen and (min-width:800px){html{font-size:25px}}
  374. </style>
  375. </head>
  376. <body>
  377. <header>
  378. <h2><i id="backBtn" onclick="toBack()"></i>订单详情</h2>
  379. </header>
  380. <main class="flex-con">
  381. <div class="orderConDiv hid">
  382. <div class="banner clearFix">
  383. <div class="left">{{type}}</div>
  384. <div class="right {{cls}}"></div>
  385. </div>
  386. <div class="gzOrder">
  387. <p>跟踪订单</p>
  388. <div class="clearFix flex-wrap">
  389. <div class="left orderI"></div>
  390. <div class="left userDiv flex-con">
  391. <p class="Name clearFix">收货人:{{name}}<span class="phone right">{{phone}}</span></p>
  392. <p class="locaDiv">收货地址:{{location}}</p>
  393. </div>
  394. </div>
  395. </div>
  396. <div class="statusBox clearFix">
  397. <div class="orderDiv left">订单编号:<span class="orderNum">{{orderNum}}</span></div>
  398. <div class="status right">{{orderStatus}}</div>
  399. </div>
  400. <div class="orderList">
  401. <ul class="orderShop hid">
  402. <li>
  403. <div class="commDiv flex-wrap">
  404. <div class="commImg">{{img}}</div>
  405. <div class="commFig flex-con clearFix">
  406. <div class="left commName">{{commName}}</div>
  407. <div class="right commPN">
  408. <p class="commPrice">{{commPrice}}</p>
  409. <p class="commNum">x{{commNum}}</p>
  410. </div>
  411. </div>
  412. </div>
  413. </li>
  414. </ul>
  415. </div>
  416. <div class="totalP">
  417. <p class="describe">共{{totalNum}}件商品 合计:¥<span>{{commPrice}}</span>(含运费{{freight}})</p>
  418. </div>
  419. <div class="payType">
  420. <p class="clearFix">支付方式<span class="right">支付宝支付</span></p>
  421. <p>变更支付方式</p>
  422. <ul class="payUl">
  423. <li class="flex-wrap active">
  424. <div class="zfI"></div>
  425. <div class="zfCon flex-con clearFix">
  426. <div class="zfTypeI left"></div>
  427. <div class="zfName left">手机支付宝支付</div>
  428. </div>
  429. </li>
  430. </ul>
  431. </div>
  432. <div class="btnBox clearFix"></div>
  433. </div>
  434. <div class="mainPB"></div>
  435. <div class="waitDiv"></div>
  436. <div class="cancelDiv">
  437. <div class="cancelBox">
  438. <p></p>
  439. <div class="clearFix">
  440. <div class="left clBtn">忽略</div>
  441. <div class="right suBtn">确定</div>
  442. </div>
  443. </div>
  444. </div>
  445. <div class="remindDiv"></div>
  446. </main>
  447. <script src="../../js/publicData.js"></script>
  448. <script src="../../dep/jquery-3.1.0.min.js"></script>
  449. <script>
  450. $(function () {
  451. var orderNum=location.search.slice(1),
  452. divModelHead=$(".banner").html(),
  453. divModelUser=$(".gzOrder").html(),
  454. divModelOrder=$(".statusBox").html(),
  455. divModelTotal=$(".totalP").html(),
  456. divModelList=$(".orderList ul").html(),
  457. divModelPay='<div class="payType">'+$(".payType").html()+'</div>',
  458. imgModel='<img src="{{img}}" alt="">',
  459. oRemindTime,
  460. str="",
  461. username=sessionStorage.getItem("setname");
  462. var cancelBox=document.getElementsByClassName("cancelBox")[0];
  463. if(is_weixn()){
  464. $(".mainPB").css("display","none")
  465. }
  466. $.post(pageUrl+"/Api/Index/orderDetail",{orderid:orderNum.split("=")[1],vipid:username},function (data) {
  467. if(data.status=="999"){
  468. window.location.href="../login.html";
  469. }
  470. var data=data.data.cache,orderStatus="",totalnum=0;
  471. var strDiv="<div class='btnBox clearFix'>",
  472. newHead="<div class='banner clearFix'>",
  473. newUser="<div class='gzOrder'>",
  474. newList="<div class='orderList'><ul class='orderShop'>",
  475. newTotal="<div class='totalP'>",
  476. newOrder="<div class='statusBox clearFix'>";
  477. switch ((data.status-0)){
  478. case 1:
  479. newHead+=divModelHead.replace("{{type}}","等待买家付款").replace("{{cls}}","ONo-pay");
  480. strDiv+='<div class="cancelOrder">取消订单</div><div class="active payOrder">付款</div>';
  481. orderStatus="未付款";
  482. break;
  483. case 2:
  484. newHead+=divModelHead.replace("{{type}}","等待卖家发货").replace("{{cls}}","OPay");
  485. strDiv+='<div onclick="toBack()">好的</div>';
  486. orderStatus="已付款";
  487. break;
  488. case 3:
  489. newHead+=divModelHead.replace("{{type}}","卖家已发货").replace("{{cls}}","OSend");
  490. strDiv+='<div class="sureEnd active">确认收货</div><div class="lookExpress">查看物流</div>';
  491. orderStatus="待收货";
  492. break;
  493. case 5:
  494. newHead+=divModelHead.replace("{{type}}","交易成功").replace("{{cls}}","OEnd");
  495. strDiv+='<div onclick="toBack()">好的</div>';
  496. orderStatus="已收货";
  497. break;
  498. case 0:
  499. newHead+=divModelHead.replace("{{type}}","订单已取消").replace("{{cls}}","OCancel");
  500. strDiv+='<div onclick="toBack()"">好的</div>';
  501. orderStatus="已取消";
  502. break;
  503. }
  504. newOrder+=divModelOrder.replace("{{orderNum}}",data['oid']).replace("{{orderStatus}}",orderStatus);
  505. newUser+=divModelUser.replace("{{name}}",data['vipname']).replace("{{phone}}",data['vipmobile'])
  506. .replace("{{location}}",data['vipaddress']);
  507. for(var n in data.items){
  508. newList+=divModelList.replace("{{img}}",imgModel.replace("{{img}}",pageImg+"/.."+data.items[n]["imgurl"])).replace("{{commName}}",data.items[n]["name"])
  509. .replace("{{commPrice}}","¥"+(data.items[n]["price"]-0).toFixed(2)).replace("{{commNum}}",data.items[n]["item_num"]);
  510. totalnum+=data.items[n]["item_num"]-0;
  511. }
  512. newTotal+=divModelTotal.replace("{{totalNum}}",totalnum).replace("{{commPrice}}",(data['totalprice']-0).toFixed(2))
  513. .replace("{{freight}}",(data['yf']-0).toFixed(2));
  514. newList+="</ul></div>";
  515. newHead+="</div>";
  516. newUser+="</div>";
  517. newOrder+="</div>";
  518. newTotal+="</div>";
  519. strDiv+="</div>";
  520. if((data.status-0)==1){
  521. str=newHead+newUser+newOrder+newList+newTotal+divModelPay+strDiv;
  522. }else {
  523. str=newHead+newUser+newOrder+newList+newTotal+strDiv;
  524. }
  525. totalnum=0;
  526. $(".waitDiv").css("display","none");
  527. $(".orderConDiv").html(str).removeClass("hid");
  528. /*查看物流*/
  529. $(".lookExpress").click(function () {
  530. location.href="./orderExpress.html?order="+data['oid'];
  531. })
  532. /*取消订单按钮*/
  533. $(".cancelOrder").click(function () {
  534. $(".cancelDiv").css("display","block").find("p").text("你确定取消订单吗?");
  535. var _that=$(this);
  536. $(".clBtn").click(function () {
  537. $(".cancelDiv").css("display","none");
  538. })
  539. $(".suBtn").click(function (e) {
  540. e.stopPropagation();
  541. var orderNum=_that.parent().parent().find(".orderNum").text();
  542. /*取消当前订单*/
  543. $.post(pageUrl+"/Api/Index/orderTuihuoSave",{orderid:orderNum},function (data) {
  544. $(".cancelDiv").css("display","none");
  545. if(data.status==200){
  546. location.reload();
  547. }
  548. })
  549. })
  550. })
  551. /*收货按钮*/
  552. $(".sureEnd").click(function () {
  553. $(".cancelDiv").css("display","block").find("p").text("你确认收货吗?");
  554. var _that=$(this);
  555. $(".clBtn").click(function () {
  556. $(".cancelDiv").css("display","none");
  557. })
  558. $(".suBtn").click(function (e) {
  559. e.stopPropagation();
  560. var orderNum=_that.parent().parent().find(".orderNum").text();
  561. /*发送当前订单*/
  562. $(".cancelDiv").css("display","none");
  563. $.post(pageUrl+"/Api/Index/orderOK",{orderid:data['oid']},function (data) {
  564. remindMes(data.message)
  565. if(data.status==200){
  566. setTimeout(function () {
  567. location.reload();
  568. },200)
  569. }
  570. })
  571. })
  572. })
  573. /*付款按钮*/
  574. $(".payOrder").click(function () {
  575. $.get(pageUrl+"/Api/Index/pay1",{orderid:data.oid},function (data) {
  576. window.location.href=pageImg+data.url;
  577. })
  578. })
  579. })
  580. function remindMes(val) {
  581. if(oRemindTime) clearTimeout(oRemindTime);
  582. $(".remindDiv").text(val).css({"opacity":"1","z-index":99});
  583. oRemindTime=setTimeout(function () {
  584. $(".remindDiv").css({"opacity":"0","z-index":-99})
  585. oRemindTime=undefined;
  586. },2000)
  587. }
  588. })
  589. function is_weixn(){
  590. var ua = navigator.userAgent;
  591. if(/(MicroMessenger)/i.test(ua)) {
  592. return true;
  593. } else {
  594. return false;
  595. }
  596. }
  597. function toBack() {
  598. window.history.back();
  599. }
  600. </script>
  601. </body>
  602. </html>