myOrderInfo_win.html 55 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="referrer" content="always" />
  5. <meta charset='utf-8' />
  6. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  7. <meta http-equiv="x-dns-prefetch-control" content="on">
  8. <meta name="description" content="">
  9. <meta name="format-detection" content="telephone=no" />
  10. <!-- <link rel="stylesheet" type="text/css" href="css/vant-ui.css" /> -->
  11. <link rel="stylesheet" type="text/css" href="../css/api.css" />
  12. <link rel="stylesheet" type="text/css" href="../css/aui-win.css" />
  13. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
  14. <link rel="stylesheet" type="text/css" href="css/iconfont.css">
  15. <link rel="stylesheet" type="text/css" href="css/main.css" />
  16. <script src="js/vue.js"></script>
  17. <!-- <script src="js/vant-ui.js"></script> -->
  18. <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
  19. <script src="js/main.js"></script>
  20. <title></title>
  21. </head>
  22. <style>
  23. .nav-bg {
  24. width: 150%;
  25. height: 100%;
  26. position: absolute;
  27. top: 0;
  28. left: -25%;
  29. background: linear-gradient(to right, #12A3F5, #0EB2FA);
  30. }
  31. .nav-back {
  32. position: fixed;
  33. z-index: 500;
  34. top: .9rem;
  35. left: .05rem;
  36. background-color: rgba(0, 0, 0, 0);
  37. border: none;
  38. }
  39. .box-main {
  40. width: 100%;
  41. height: 100%;
  42. position: relative;
  43. }
  44. .top-bg {
  45. width: 150%;
  46. position: absolute;
  47. background: linear-gradient(to right, #12A3F5, #0EB2FA);
  48. left: -25%;
  49. top: 0;
  50. border-bottom-left-radius: 50%;
  51. border-bottom-right-radius: 50%;
  52. }
  53. .top-bg-1 {
  54. height: 3rem;
  55. }
  56. .top-bg-2 {
  57. height: 6rem;
  58. }
  59. .info-box {
  60. width: 100%;
  61. height: 100%;
  62. display: flex;
  63. flex-direction: column;
  64. position: relative;
  65. overflow-y: scroll;
  66. overflow-x: hidden;
  67. }
  68. .status-box {
  69. width: 100%;
  70. display: flex;
  71. flex-direction: column;
  72. align-items: center;
  73. justify-content: center;
  74. margin: 0 .2rem;
  75. margin-top: 1.8rem;
  76. }
  77. .status-title-box {
  78. display: flex;
  79. align-items: center;
  80. justify-content: center;
  81. color: #ffffff;
  82. }
  83. .status-title {
  84. font-size: .4rem;
  85. margin-left: .2rem;
  86. }
  87. .status-icon {
  88. width: .4rem;
  89. height: .4rem;
  90. }
  91. .status-desc-box {
  92. padding: .2rem 0;
  93. margin: 0 .2rem;
  94. color: rgba(255, 255, 255, 0.9);
  95. display: flex;
  96. justify-content: center;
  97. align-items: flex-end;
  98. }
  99. .status-desc-title {
  100. font-size: .32rem;
  101. }
  102. .status-desc-tag {
  103. font-size: .28rem;
  104. }
  105. .status-desc-downTime {
  106. font-size: .25rem;
  107. }
  108. /* 只有在待支付状态下才存在按钮 */
  109. .title-info-btn {
  110. background-color: #ffffff;
  111. width: 2.5rem;
  112. height: .7rem;
  113. border-radius: .35rem;
  114. display: flex;
  115. align-items: center;
  116. justify-content: center;
  117. font-size: .3rem;
  118. color: #12A3F5;
  119. margin: .2rem 0;
  120. }
  121. .bottom-bar {
  122. position: fixed;
  123. width: 100%;
  124. left: 0;
  125. bottom: 0;
  126. background-color: #ffffff;
  127. height: 1.2rem;
  128. display: flex;
  129. padding: .2rem;
  130. flex-direction: row;
  131. justify-content: flex-end;
  132. }
  133. .btn-normal {
  134. height: 0.68rem;
  135. border-radius: 0.34rem;
  136. border: 1px solid #009BFF;
  137. color: #009DFE;
  138. padding: 0 .3rem;
  139. margin-left: .2rem;
  140. }
  141. .btn-highlight {
  142. height: 0.68rem;
  143. border-radius: 0.34rem;
  144. color: #ffffff;
  145. background-image: linear-gradient(to right, #0098FF, #24BBFB);
  146. border: 1px solid #24BBFB;
  147. width: 2rem;
  148. margin-left: .2rem;
  149. }
  150. .btn-driver {
  151. height: 0.68rem;
  152. border-radius: 0.34rem;
  153. padding: 0 .3rem;
  154. border: 1px solid #009BFF;
  155. color: #009DFE;
  156. margin-left: .2rem;
  157. }
  158. .btn-cancel {
  159. height: 0.68rem;
  160. border-radius: 0.34rem;
  161. color: #ffffff;
  162. border: 1px solid #b5b5b5;
  163. color: #888888;
  164. width: 2rem;
  165. margin-left: .2rem;
  166. }
  167. .address-box {
  168. padding: .3rem .3rem;
  169. margin: 0 .2rem;
  170. margin-top: .5rem;
  171. background: #ffffff;
  172. border-radius: .2rem;
  173. display: flex;
  174. flex-direction: row;
  175. justify-content: center;
  176. align-items: center;
  177. }
  178. .address-icon-box {
  179. width: 43px;
  180. height: 44px;
  181. margin-right: .2rem
  182. }
  183. .address-arrow {
  184. width: 6px;
  185. height: 12px;
  186. margin-left: .2rem;
  187. }
  188. .address-info-box {
  189. display: flex;
  190. flex-direction: column;
  191. align-items: flex-start;
  192. flex: 1;
  193. }
  194. .address-info-name-box {
  195. display: flex;
  196. justify-content: center;
  197. }
  198. .address-info-name {
  199. font-size: .3rem;
  200. color: #333333;
  201. }
  202. .address-info-tel {
  203. font-size: .28rem;
  204. color: #555555;
  205. margin-left: .2rem;
  206. }
  207. .address-info-addr {
  208. font-size: .25rem;
  209. color: #444444;
  210. overflow: hidden;
  211. text-overflow: ellipsis;
  212. display: -webkit-box;
  213. -webkit-line-clamp: 1;
  214. -webkit-box-orient: vertical;
  215. }
  216. .goods-box {
  217. padding: .3rem 0;
  218. margin: 0 .2rem;
  219. margin-top: .3rem;
  220. background: #ffffff;
  221. border-radius: .2rem;
  222. display: flex;
  223. flex-direction: column;
  224. }
  225. .goods-title-box {
  226. padding-bottom: .2rem;
  227. border-bottom: 2px solid #f1f1f1;
  228. margin: 0 .3rem;
  229. display: flex;
  230. align-items: center;
  231. }
  232. .goods-title-icon-box {
  233. width: 22px;
  234. height: 18px;
  235. }
  236. .goods-title-text {
  237. font-size: .32rem;
  238. color: #333333;
  239. margin: 0 .2rem;
  240. }
  241. .goods-cont-box {
  242. display: flex;
  243. align-items: center;
  244. margin: 0 .3rem;
  245. padding: .2rem 0;
  246. }
  247. .goods-cont-img-box {
  248. width: 2rem;
  249. height: 2rem;
  250. border-radius: .05rem;
  251. }
  252. .goods-cont-info-box {
  253. flex: 1;
  254. margin-left: .2rem;
  255. display: flex;
  256. flex-direction: column;
  257. align-items: flex-start;
  258. height: 2rem;
  259. justify-content: space-around;
  260. }
  261. .goods-cont-name {
  262. font-size: .3rem;
  263. color: #333333;
  264. }
  265. .goods-cont-size-box {
  266. display: flex;
  267. flex-direction: row;
  268. align-items: center;
  269. }
  270. .goods-cont-pattern {
  271. font-size: .23rem;
  272. color: #999999;
  273. margin-left: .3rem;
  274. }
  275. .goods-cont-size-num {
  276. font-size: .23rem;
  277. color: #999999;
  278. }
  279. .goods-cont-price {
  280. font-size: .35rem;
  281. color: #333333;
  282. display: flex;
  283. align-items: flex-end;
  284. }
  285. .order-pay-box {
  286. padding: .3rem 0;
  287. margin: 0 .2rem;
  288. margin-top: .3rem;
  289. background: #ffffff;
  290. border-radius: .2rem;
  291. display: flex;
  292. flex-direction: column;
  293. }
  294. .order-pay-title-box {
  295. padding-bottom: .2rem;
  296. margin: 0 .3rem;
  297. display: flex;
  298. align-items: center;
  299. }
  300. .order-title-icon-box {
  301. width: 22px;
  302. height: 24px;
  303. }
  304. .order-pay-title-text {
  305. font-size: .32rem;
  306. color: #333333;
  307. margin: 0 .2rem;
  308. }
  309. .order-pay-cont-box {
  310. display: flex;
  311. flex-direction: column;
  312. margin: 0 .3rem;
  313. padding: .2rem 0;
  314. }
  315. .order-cont-info-box {
  316. display: flex;
  317. align-items: center;
  318. padding: .1rem 0;
  319. }
  320. .order-cont-info-tag {
  321. font-size: .3rem;
  322. color: #a9a9a9;
  323. }
  324. .order-cont-info-text {
  325. font-size: .3rem;
  326. color: #333333;
  327. }
  328. .order-cont-info-space {
  329. padding: .3rem 0;
  330. }
  331. .order-cont-info-copy-box {
  332. height: .36rem;
  333. border-radius: .18rem;
  334. background-color: #F4F5F6;
  335. margin: 0 .2rem;
  336. }
  337. .order-cont-info-copy {
  338. margin: 0 .2rem;
  339. font-size: .25rem;
  340. color: #999999;
  341. }
  342. .order-cont-info-btn-box {
  343. margin: 0 .2rem;
  344. padding-top: .2rem;
  345. display: flex;
  346. justify-content: center;
  347. }
  348. .order-cont-info-btn {
  349. height: 0.6rem;
  350. border-radius: 0.3rem;
  351. color: #ffffff;
  352. border: 1px solid #b5b5b5;
  353. color: #888888;
  354. padding: 0 .3rem;
  355. }
  356. .pay-title-icon-box {
  357. width: 25px;
  358. height: 25px;
  359. }
  360. .pay-cont-info-box {
  361. display: flex;
  362. align-items: center;
  363. padding: .1rem 0;
  364. }
  365. .pay-cont-info-tag {
  366. font-size: .3rem;
  367. color: #a9a9a9;
  368. flex: 1;
  369. }
  370. .pay-cont-info-price {
  371. font-size: .32rem;
  372. color: #555555;
  373. }
  374. .pay-cont-info-pay-box {
  375. display: flex;
  376. justify-content: flex-end;
  377. align-items: center;
  378. margin-top: .1rem;
  379. }
  380. .pay-cont-info-pay-tag {
  381. font-size: .3rem;
  382. color: #a9a9a9;
  383. }
  384. .pay-cont-info-pay-price-text {
  385. font-size: .32rem;
  386. color: #F93600;
  387. }
  388. .placeholder-footer {
  389. padding: .75rem 0;
  390. margin: 0 .3rem;
  391. }
  392. .hud-bg {
  393. position: fixed;
  394. width: 100%;
  395. height: 100%;
  396. display: flex;
  397. align-items: center;
  398. justify-content: center;
  399. background-color: rgba(0, 0, 0, 0.6);
  400. top: 0px;
  401. left: 0px;
  402. z-index: 1000;
  403. }
  404. .hud-cont-box {
  405. background-color: #ffffff;
  406. border-radius: .3rem;
  407. padding: .5rem 0;
  408. display: flex;
  409. flex-direction: column;
  410. align-items: center;
  411. width: 84%
  412. }
  413. .driver-title {
  414. font-size: .5rem;
  415. font-weight: bold;
  416. color: #000000;
  417. margin: .2rem 0;
  418. }
  419. .driver-userInfo-box {
  420. display: flex;
  421. flex-direction: row;
  422. align-items: center;
  423. margin: .2rem 0;
  424. }
  425. .driver-userInfo-avatar {
  426. width: 1.6rem;
  427. height: 1.6rem;
  428. border-radius: 50%;
  429. }
  430. .driver-userInfo-name {
  431. font-size: .4rem;
  432. color: #333333;
  433. margin-left: .2rem;
  434. }
  435. .driver-contact-box {
  436. display: flex;
  437. flex-direction: column;
  438. /* align-items: center; */
  439. justify-content: center;
  440. margin: .2rem .2rem;
  441. }
  442. .driver-tel-box {
  443. display: flex;
  444. flex-direction: row;
  445. align-items: center;
  446. padding: .3rem .2rem;
  447. border-bottom: 1px solid #f1f1f1;
  448. }
  449. .driver-tel-text {
  450. font-size: .3rem;
  451. color: #666666;
  452. margin: 0 .2rem;
  453. }
  454. .driver-tel-tag {
  455. font-size: .25rem;
  456. color: #999999;
  457. }
  458. .driver-num-box {
  459. display: flex;
  460. flex-direction: row;
  461. align-items: center;
  462. padding: .3rem .2rem;
  463. border-bottom: 1px solid #f1f1f1;
  464. }
  465. .driver-num-text {
  466. font-size: .3rem;
  467. color: #666666;
  468. margin-left: .2rem;
  469. }
  470. .driver-close {
  471. height: 0.84rem;
  472. border-radius: 0.42rem;
  473. color: #ffffff;
  474. background-image: linear-gradient(#0099FF, #00B9FB);
  475. width: 3rem;
  476. margin: .3rem 0 .2rem 0;
  477. }
  478. .cancel-order-title {
  479. font-size: .35rem;
  480. color: #333333;
  481. margin: .2rem 0;
  482. }
  483. .cancel-order-btn-box {
  484. display: flex;
  485. flex-direction: row;
  486. justify-content: space-between;
  487. margin: .2rem .2rem;
  488. }
  489. .cancel-order-cancel {
  490. height: 0.74rem;
  491. border-radius: 0.37rem;
  492. border: 1px solid #009BFF;
  493. color: #009DFE;
  494. width: 2.5rem;
  495. }
  496. .cancel-order-sure {
  497. height: 0.8rem;
  498. border-radius: 0.4rem;
  499. color: #ffffff;
  500. background-image: linear-gradient(#0099FF, #00B9FB);
  501. border: 1px solid #00B9FB;
  502. width: 2.5rem;
  503. margin-left: .2rem;
  504. }
  505. .pay-hud-bg {
  506. position: fixed;
  507. width: 100%;
  508. height: 100%;
  509. display: flex;
  510. align-items: center;
  511. justify-content: center;
  512. background-color: rgba(0, 0, 0, 0.6);
  513. top: 0px;
  514. left: 0px;
  515. z-index: 900;
  516. }
  517. .hud-pay-cont-box {
  518. display: flex;
  519. flex-direction: column;
  520. justify-content: flex-end;
  521. align-items: center;
  522. width: 100%;
  523. height: 100%;
  524. }
  525. .pay-hud-cancel-btn {
  526. width: 86%;
  527. margin-top: .2rem;
  528. margin-bottom: .4rem;
  529. background-color: #999999;
  530. color: #ffffff;
  531. border: 1px solid rgba(0, 0, 0, 0);
  532. border-radius: .2rem;
  533. height: .84rem;
  534. font-size: .32rem;
  535. }
  536. .pay-hud-pay-btn {
  537. width: 86%;
  538. margin: .2rem 0;
  539. background-image: linear-gradient(to right, #0099FF, #00B9FB);
  540. color: #ffffff;
  541. border: 1px solid rgba(0, 0, 0, 0);
  542. border-radius: .2rem;
  543. height: .84rem;
  544. font-size: .32rem;
  545. }
  546. .pay-hud-cont-box {
  547. width: 86%;
  548. margin: .2rem 0;
  549. background-color: #ffffff;
  550. border-radius: .3rem;
  551. padding: .4rem 0;
  552. display: flex;
  553. flex-direction: column;
  554. align-items: center;
  555. position: relative;
  556. }
  557. .pay-hud-cont-title {
  558. position: relative;
  559. font-size: .35rem;
  560. color: #333333;
  561. margin-top: .2rem;
  562. }
  563. .pay-hud-cont-downtime-box {
  564. position: relative;
  565. margin: .3rem;
  566. padding: .4rem 0;
  567. display: flex;
  568. flex-direction: column;
  569. align-items: center;
  570. border-radius: .15rem;
  571. background-color: #F4F5F6;
  572. width: 90%;
  573. }
  574. .pay-hud-cont-price-box {
  575. display: flex;
  576. align-items: flex-end;
  577. }
  578. .pay-hud-cont-price-tag {
  579. font-size: .3rem;
  580. color: #333333;
  581. }
  582. .pay-hud-cont-price-symbol {
  583. font-size: .28rem;
  584. color: #FB2200;
  585. }
  586. .pay-hud-cont-price-text {
  587. font-size: .35rem;
  588. color: #FB2200;
  589. }
  590. .pay-hud-cont-price-desc {
  591. font-size: .25rem;
  592. color: #888888;
  593. }
  594. .pay-hud-cont-pay-type-tag {
  595. font-size: .28rem;
  596. color: #999999;
  597. width: 90%;
  598. margin: .1rem 0;
  599. }
  600. .pay-hud-cont-pay-type-box {
  601. padding: .2rem 0;
  602. margin: 0 .3rem;
  603. display: flex;
  604. flex-direction: row;
  605. align-items: center;
  606. width: 90%;
  607. }
  608. .pay-hud-cont-pay-type-left {
  609. display: flex;
  610. flex-direction: row;
  611. align-items: center;
  612. flex: 1;
  613. }
  614. .pay-hud-cont-pay-type-text {
  615. margin-left: .2rem;
  616. font-size: .32rem;
  617. color: #333333;
  618. }
  619. </style>
  620. <body>
  621. <div id="app" style="background-color: #f5f5f5" v-cloak>
  622. <!-- 导航栏 -->
  623. <!-- <header class="aui-bar aui-bar-nav" id="aui-header" style="background-color:#ffffff !important;color: #333333">
  624. <div class="nav-bg"></div>
  625. <div>
  626. <a class="aui-btn aui-btn-info aui-pull-left" tapmode onclick="closeWin()"> <span
  627. class="aui-iconfont aui-icon-left" style="color: #ffffff"></span> </a>
  628. </div>
  629. </header> -->
  630. <van-button class="nav-back" @click="closeWin">
  631. <img style="width: 16px; height: 16px;" src="./image/icon_back.png" />
  632. </van-button>
  633. <div class="box-main" v-show="orderInfo">
  634. <div class="info-box">
  635. <div v-if="orderInfo.type === 1 && orderInfo.isOnline === 1" class="top-bg top-bg-2"></div>
  636. <div v-else class="top-bg top-bg-1"></div>
  637. <div class="status-box" style="z-index: 100;">
  638. <div class="status-title-box">
  639. <img class="status-icon" :src="orderInfo.statusImg" />
  640. <div class="status-title">{{orderInfo.statusName}}</div>
  641. </div>
  642. <div class="status-desc-box" v-if="orderInfo.type === 1">
  643. <div class="status-desc-tag" v-show="orderInfo.isOnline === 1">需付款:</div>
  644. <div class="status-desc-title" v-show="orderInfo.isOnline === 1">
  645. ¥{{orderInfo.payInfo.goodsTotalPrice}}</div>
  646. <div class="status-desc-tag" style="margin-left: .4rem" v-show="orderInfo.isOnline === 1">剩余:
  647. </div>
  648. <div class="status-desc-tag" v-show="orderInfo.isOnline !== 1">剩余:</div>
  649. <div class="status-desc-downTime">{{orderInfo.downTime}}</div>
  650. </div>
  651. <div v-else class="status-desc-box">
  652. <div class="status-desc-title">{{orderInfo.statusDesc}}</div>
  653. </div>
  654. <van-button v-show="orderInfo.type === 1 && orderInfo.isOnline === 1" class="title-info-btn"
  655. @click="onPayOrder">去支付</van-button>
  656. </div>
  657. <!-- 地址 -->
  658. <div class="address-box" v-on:click="onAddress" style="z-index: 100;">
  659. <div class="address-icon-box">
  660. <img style="width: 100%; height: 100%" src="./image/icon_dizhi.png" />
  661. </div>
  662. <div class="address-info-box">
  663. <div class="address-info-name-box">
  664. <div class="address-info-name">{{orderInfo.address.name}}</div>
  665. <div class="address-info-tel">{{orderInfo.address.tel}}</div>
  666. </div>
  667. <div class="address-info-addr">{{orderInfo.address.addr}}</div>
  668. </div>
  669. <img class="address-arrow" src="./image/024.png" />
  670. </div>
  671. <!-- 商品信息 -->
  672. <div class="goods-box">
  673. <div class="goods-title-box" v-if="orderInfo.orderType === 1">
  674. <div class="goods-title-icon-box">
  675. <img style="width: 100%; height: 100%" src="./image/factory_logo.png" />
  676. </div>
  677. <div class="goods-title-text">工厂直营</div>
  678. </div>
  679. <div class="goods-title-box" v-else>
  680. <div class="goods-title-icon">
  681. <img style="width: 100%; height: 100%" src="./image/" />
  682. </div>
  683. <div class="goods-title-text">经销商专营店</div>
  684. </div>
  685. <div class="goods-cont-box" v-for="(item, index) in orderInfo.bizOrderInfoDtoList">
  686. <div class="goods-cont-img-box">
  687. <img style="width: 100%; height: 100%" src="./image/cart_goods.png" />
  688. </div>
  689. <div class="goods-cont-info-box">
  690. <div class="goods-cont-name">{{item.maktx}}</div>
  691. <div class="goods-cont-size-box">
  692. <div class="goods-cont-size-num">尺寸:{{item.size}}</div>
  693. <div class="goods-cont-pattern">花纹:{{item.pattern}}</div>
  694. </div>
  695. <div class="goods-cont-size-num">数量:{{item.num}}</div>
  696. <div class="goods-cont-price">
  697. <div style="font-size: .23rem; margin-bottom: 3px;">¥</div>{{item.price}}
  698. </div>
  699. </div>
  700. </div>
  701. </div>
  702. <!-- 订单信息 -->
  703. <div class="order-pay-box">
  704. <div class="order-pay-title-box">
  705. <div class="order-title-icon-box">
  706. <img style="width: 100%; height: 100%" src="./image/icon_dingdanxinxi.png" />
  707. </div>
  708. <div class="order-pay-title-text">订单信息</div>
  709. </div>
  710. <div class="order-pay-cont-box">
  711. <!-- 订单编号 -->
  712. <div class="order-cont-info-box ">
  713. <div class="order-cont-info-tag">订单编号:</div>
  714. <div class="order-cont-info-text">{{orderInfo.orderInfo.orderCode}}</div>
  715. <div class="order-cont-info-copy-box">
  716. <div class="order-cont-info-copy" v-on:click="onCopy(1)">复制</div>
  717. </div>
  718. </div>
  719. <div v-if="orderInfo.type !== 1 && !isOpenOrderInfo">
  720. <div class="order-cont-info-btn-box">
  721. <van-button class="order-cont-info-btn" icon="./image/icon_arrow_down.png"
  722. icon-position="right" size="small" @click="openOrderInfo(true)">展开完整信息
  723. </van-button>
  724. </div>
  725. </div>
  726. <div v-else>
  727. <!-- 下单时间 -->
  728. <div class="order-cont-info-box">
  729. <div class="order-cont-info-tag">下单时间:</div>
  730. <div class="order-cont-info-text">{{orderInfo.orderInfo.createTime}}</div>
  731. </div>
  732. <!-- 间距 -->
  733. <div class="order-cont-info-space"
  734. v-show="orderInfo.type !== 1 || orderInfo.isOnline === 0"></div>
  735. <!-- 付款时间 -->
  736. <div class="order-cont-info-box" v-show="orderInfo.orderInfo.payTime">
  737. <div class="order-cont-info-tag">付款时间:</div>
  738. <div class="order-cont-info-text">{{orderInfo.orderInfo.payTime}}</div>
  739. </div>
  740. <!-- 支付单号 -->
  741. <div class="order-cont-info-box" v-show="orderInfo.orderInfo.payCode">
  742. <div class="order-cont-info-tag">支付单号:</div>
  743. <div class="order-cont-info-text">{{orderInfo.orderInfo.payCode}}</div>
  744. <div class="order-cont-info-copy-box">
  745. <div class="order-cont-info-copy" v-on:click="onCopy(2)">复制</div>
  746. </div>
  747. </div>
  748. <!-- 付款方式 -->
  749. <div class="order-cont-info-box" v-show="orderInfo.orderInfo.payType">
  750. <div class="order-cont-info-tag">付款方式:</div>
  751. <div class="order-cont-info-text">{{orderInfo.orderInfo.payType}}</div>
  752. </div>
  753. <div class="order-cont-info-btn-box" v-show="orderInfo.type !== 1">
  754. <van-button class="order-cont-info-btn" icon="./image/icon_arrow_up.png"
  755. icon-position="right" size="small" @click="openOrderInfo(false)">收起</van-button>
  756. </div>
  757. </div>
  758. </div>
  759. </div>
  760. <!-- 支付信息 -->
  761. <div class="order-pay-box" v-if="orderInfo.isOnline === 1">
  762. <div class="order-pay-title-box">
  763. <div class="pay-title-icon-box">
  764. <img style="width: 100%; height: 100%" src="./image/icon_zhifuxinxi.png" />
  765. </div>
  766. <div class="order-pay-title-text">支付信息</div>
  767. </div>
  768. <div class="order-pay-cont-box">
  769. <div class="pay-cont-info-box">
  770. <div class="pay-cont-info-tag">商品总额</div>
  771. <div class="pay-cont-info-price">¥{{orderInfo.payInfo.goodsTotalPrice}}</div>
  772. </div>
  773. <div class="pay-cont-info-box">
  774. <div class="pay-cont-info-tag">使用奖励</div>
  775. <div class="pay-cont-info-price">-¥{{orderInfo.payInfo.rewardAmount}}</div>
  776. </div>
  777. <div class="pay-cont-info-pay-box">
  778. <div class="pay-cont-info-pay-tag">实付金额:</div>
  779. <div class="pay-cont-info-pay-price-text">¥{{orderInfo.payInfo.payPrice}}</div>
  780. </div>
  781. </div>
  782. </div>
  783. <div class="placeholder-footer"></div>
  784. </div>
  785. </div>
  786. <div class="bottom-bar" v-show="orderInfo">
  787. <van-button v-show="orderInfo.type === 1" class="btn-cancel" size="normal" @click="onCancelOrder">取消订单
  788. </van-button>
  789. <van-button v-show="orderInfo.type === 3" class="btn-normal" size="normal" @click="onCheckDriver">查看司机信息
  790. </van-button>
  791. <van-button v-show="orderInfo.type !== 1" class="btn-highlight" size="normal" @click="onBuyAgain">再次购买
  792. </van-button>
  793. <van-button v-show="orderInfo.type === 1 && orderInfo.isOnline === 1" class="btn-highlight" size="normal"
  794. @click="onPayOrder">去支付</van-button>
  795. </div>
  796. <div class="hud-bg" v-if="isHudBgShow">
  797. <!-- 查看司机信息 -->
  798. <div class="hud-cont-box" v-if="isHudDriverShow">
  799. <div class="driver-title">司机信息</div>
  800. <div class="driver-userInfo-box">
  801. <img class="driver-userInfo-avatar" src="./image/siji_avatar_default.png" />
  802. <div class="driver-userInfo-name">流川枫</div>
  803. </div>
  804. <div class="driver-contact-box">
  805. <div class="driver-tel-box" v-on:click="onDialNumber">
  806. <div
  807. style="width:28px; height: 26px; display: flex; justify-content: center; align-items: center;">
  808. <img style="width: 21px; height: 26px;" src="./image/shouji.png" />
  809. </div>
  810. <div class="driver-tel-text">13000000000</div>
  811. <div class="driver-tel-tag">点击拨打电话</div>
  812. </div>
  813. <div class="driver-num-box">
  814. <div
  815. style="width:28px; height: 26px; display: flex; justify-content: center; align-items: center;">
  816. <img style="width: 28px; height: 23px;" src="./image/chepai.png" />
  817. </div>
  818. <div class="driver-num-text">鲁B12345</div>
  819. </div>
  820. </div>
  821. <van-button class="driver-close" size="normal" @click="onClickCloseDriverHud">关闭</van-button>
  822. </div>
  823. <!-- 取消订单 -->
  824. <div class="hud-cont-box" v-if="isHudCancelOrderShow">
  825. <div class="cancel-order-title">确定要取消订单?</div>
  826. <div class="cancel-order-btn-box">
  827. <van-button class="cancel-order-cancel" @click="onClickCancelAlert(1)" size="normal">取消</van-button>
  828. <van-button class="cancel-order-sure" @click="onClickCancelAlert(2)" size="normal">确定</van-button>
  829. </div>
  830. </div>
  831. <!-- 取消支付 -->
  832. <div class="hud-cont-box" v-if="isHudCancelPayShow">
  833. <div class="cancel-order-title">确定要放弃付款吗?</div>
  834. <div class="cancel-order-btn-box">
  835. <van-button class="cancel-order-cancel" @click="onClickCancelPayAlert(1)" size="normal">放弃
  836. </van-button>
  837. <van-button class="cancel-order-sure" @click="onClickCancelPayAlert(2)" size="normal">继续付款
  838. </van-button>
  839. </div>
  840. </div>
  841. </div>
  842. <div class="pay-hud-bg" v-if="isHudPayBgShow">
  843. <!-- 支付 -->
  844. <div class="hud-pay-cont-box" v-if="isHudPayShow">
  845. <div class="pay-hud-cont-box">
  846. <div style="width: 24px; height: 24px; position: absolute; top: .3rem; left: .3rem;"
  847. v-on:click="onClosePayAlert">
  848. <img style="width: 100%; height: 100%" src="./image/icon_close.png" />
  849. </div>
  850. <div class="pay-hud-cont-title">收款方:工厂自营店</div>
  851. <div class="pay-hud-cont-downtime-box">
  852. <div class="pay-hud-cont-price-box">
  853. <div class="pay-hud-cont-price-tag">金额:</div>
  854. <div class="pay-hud-cont-price-symbol">¥</div>
  855. <div class="pay-hud-cont-price-text">240.00</div>
  856. </div>
  857. <div class="pay-hud-cont-price-desc">请在0小时30分内完成支付</div>
  858. </div>
  859. <div class="pay-hud-cont-pay-type-tag">请选择支付方式</div>
  860. <div class="pay-hud-cont-pay-type-box">
  861. <div class="pay-hud-cont-pay-type-left">
  862. <div style="width: 35px; height: 35px">
  863. <img style="width: 100%; height: 100%" src="./image/icon_pay_alipay.png" />
  864. </div>
  865. <div class="pay-hud-cont-pay-type-text">支付宝</div>
  866. </div>
  867. <van-checkbox v-model="alipayChecked" icon-size="24px" @click="onChoosePayType(1)">
  868. </van-checkbox>
  869. </div>
  870. <div class="pay-hud-cont-pay-type-box">
  871. <div class="pay-hud-cont-pay-type-left">
  872. <div style="width: 35px; height: 32px">
  873. <img style="width: 100%; height: 100%" src="./image/icon_pay_wechat.png" />
  874. </div>
  875. <div class="pay-hud-cont-pay-type-text">微信支付</div>
  876. </div>
  877. <van-checkbox v-model="wechatChecked" icon-size="24px" @click="onChoosePayType(2)">
  878. </van-checkbox>
  879. </div>
  880. <div class="pay-hud-cont-pay-type-box">
  881. <div class="pay-hud-cont-pay-type-left">
  882. <div style="width: 35px; height: 35px">
  883. <img style="width: 100%; height: 100%" src="./image/icon_pay_shanfu.png" />
  884. </div>
  885. <div class="pay-hud-cont-pay-type-text">云闪付</div>
  886. </div>
  887. <van-checkbox v-model="shanfuChecked" icon-size="24px" @click="onChoosePayType(3)">
  888. </van-checkbox>
  889. </div>
  890. </div>
  891. <van-button class="pay-hud-pay-btn" @click="onClickPayCancelPay(1)">支付</van-button>
  892. <van-button class="pay-hud-cancel-btn" @click="onClickPayCancelPay(2)">取消</van-button>
  893. </div>
  894. </div>
  895. </div>
  896. </body>
  897. <link rel="stylesheet" href="./mescroll/mescroll.min.css">
  898. <script type="text/javascript" src="../script/aui-scroll.js"></script>
  899. <script type="text/javascript" src="../script/api.js"></script>
  900. <script type="text/javascript" src="../script/httpRequest.js"></script>
  901. <script type="text/javascript" src="../script/vue_plugins.js"></script>
  902. <script type="text/javascript">
  903. // function closeWin() {
  904. // api.closeWin({});
  905. // }
  906. apiready = function () {
  907. api.parseTapmode();
  908. var header = $api.byId('aui-header');
  909. $api.fixStatusBar(header);
  910. var orderId = api.pageParam.id;
  911. new Vue({
  912. el: "#app",
  913. data: {
  914. // 等待付款、、等待收货、交易成功、已取消
  915. list: [
  916. {
  917. type: 1, // 测试数据 1 待支付;2 待确认;3 待收货;4 已完成;5 已取消
  918. orderType: 1, // 测试数据 订单类型 1 工厂直营;2 经销商专营
  919. isOnline: 1, // 测试数据 是否为线上支付 1 线上;0 线下
  920. downTime: '23小时55分',
  921. statusDesc: '',
  922. statusImg: './image/icon_status_daiqueren.png',
  923. statusName: '等待付款',
  924. address: {
  925. name: '韩梅梅',
  926. tel: '13000000000',
  927. addr: '山东省青岛市市北区汇丰路山海郡 火炬路南区汇丰路山海郡 火炬路南',
  928. },
  929. orderInfo: {
  930. orderCode: '12132343434388888443',
  931. createTime: '2021-02-05 21:38:45',
  932. payTime: null,
  933. payCode: null,
  934. payType: null,
  935. },
  936. payInfo: {
  937. goodsTotalPrice: '963.52',
  938. rewardAmount: '0.00',
  939. payPrice: '963.52'
  940. },
  941. bizOrderInfoDtoList: [{
  942. maktx: '赛轮轮胎 205/60R16S H0808',
  943. spec: '195/65R15',
  944. pattern: 'SH56',
  945. size: '16寸',
  946. num: 2,
  947. price: '240.00',
  948. isBk: true,
  949. }, {
  950. maktx: '赛轮轮胎 205/60R16S H0808',
  951. spec: '195/65R15',
  952. pattern: 'SH56',
  953. size: '16寸',
  954. num: 2,
  955. price: '240.00',
  956. isBk: true,
  957. }],
  958. }, {
  959. type: 1, // 测试数据 1 待支付;2 待确认;3 待收货;4 已完成;5 已取消
  960. orderType: 2, // 测试数据 订单类型 1 工厂直营;2 经销商专营
  961. isOnline: 0, // 测试数据 是否为线上支付 1 线上;0 线下
  962. downTime: '23小时55分',
  963. statusDesc: '',
  964. statusImg: './image/icon_status_daiqueren.png',
  965. statusName: '等待付款',
  966. address: {
  967. name: '韩梅梅',
  968. tel: '13000000000',
  969. addr: '山东省青岛市市北区汇丰路山海郡 火炬路南',
  970. },
  971. orderInfo: {
  972. orderCode: '12132343434388888443',
  973. createTime: '2021-02-05 21:38:45',
  974. payTime: null,
  975. payCode: null,
  976. payType: '线下支付',
  977. },
  978. payInfo: {
  979. goodsTotalPrice: null,
  980. rewardAmount: null,
  981. payPrice: null
  982. },
  983. bizOrderInfoDtoList: [{
  984. maktx: '赛轮轮胎 205/60R16S H0808',
  985. spec: '195/65R15',
  986. pattern: 'SH56',
  987. size: '16寸',
  988. num: 2,
  989. price: '240.00',
  990. isBk: true,
  991. }, {
  992. maktx: '赛轮轮胎 205/60R16S H0808',
  993. spec: '195/65R15',
  994. pattern: 'SH56',
  995. size: '16寸',
  996. num: 2,
  997. price: '240.00',
  998. isBk: true,
  999. }
  1000. ],
  1001. }, {
  1002. type: 1, // 测试数据 1 待支付;2 待确认;3 待收货;4 已完成;5 已取消
  1003. orderType: 2, // 测试数据 订单类型 1 工厂直营;2 经销商专营
  1004. isOnline: 1, // 测试数据 是否为线上支付 1 线上;0 线下
  1005. downTime: '23小时55分',
  1006. statusDesc: '',
  1007. statusImg: './image/icon_status_daiqueren.png',
  1008. statusName: '等待付款',
  1009. address: {
  1010. name: '韩梅梅',
  1011. tel: '13000000000',
  1012. addr: '山东省青岛市市北区汇丰路山海郡 火炬路南',
  1013. },
  1014. orderInfo: {
  1015. orderCode: '12132343434388888443',
  1016. createTime: '2021-02-05 21:38:45',
  1017. payTime: null,
  1018. payCode: null,
  1019. payType: null,
  1020. },
  1021. payInfo: {
  1022. goodsTotalPrice: '963.52',
  1023. rewardAmount: '0.00',
  1024. payPrice: '963.52'
  1025. },
  1026. bizOrderInfoDtoList: [{
  1027. maktx: '赛轮轮胎 205/60R16S H0808',
  1028. spec: '195/65R15',
  1029. pattern: 'SH56',
  1030. size: '16寸',
  1031. num: 2,
  1032. price: '240.00',
  1033. isBk: true,
  1034. }, {
  1035. maktx: '赛轮轮胎 205/60R16S H0808',
  1036. spec: '195/65R15',
  1037. pattern: 'SH56',
  1038. size: '16寸',
  1039. num: 2,
  1040. price: '240.00',
  1041. isBk: true,
  1042. }
  1043. ],
  1044. }, {
  1045. type: 2, // 测试数据 1 待支付;2 待确认;3 待收货;4 已完成;5 已取消
  1046. orderType: 2, // 测试数据 订单类型 1 工厂直营;2 经销商专营
  1047. isOnline: 0, // 测试数据 是否为线上支付 1 线上;0 线下
  1048. downTime: '',
  1049. statusDesc: '此订单待确认',
  1050. statusImg: './image/icon_status_daiqueren.png',
  1051. statusName: '待确认',
  1052. address: {
  1053. name: '韩梅梅',
  1054. tel: '13000000000',
  1055. addr: '山东省青岛市市北区汇丰路山海郡 火炬路南',
  1056. },
  1057. orderInfo: {
  1058. orderCode: '12132343434388888443',
  1059. createTime: '2021-02-05 21:38:45',
  1060. payTime: null,
  1061. payCode: null,
  1062. payType: '线下支付',
  1063. },
  1064. payInfo: {
  1065. goodsTotalPrice: null,
  1066. rewardAmount: null,
  1067. payPrice: null
  1068. },
  1069. bizOrderInfoDtoList: [{
  1070. maktx: '赛轮轮胎 205/60R16S H0808',
  1071. spec: '195/65R15',
  1072. pattern: 'SH56',
  1073. size: '16寸',
  1074. num: 2,
  1075. price: '240.00',
  1076. isBk: true,
  1077. }, {
  1078. maktx: '赛轮轮胎 205/60R16S H0808',
  1079. spec: '195/65R15',
  1080. pattern: 'SH56',
  1081. size: '16寸',
  1082. num: 2,
  1083. price: '240.00',
  1084. isBk: true,
  1085. }
  1086. ],
  1087. }, {
  1088. type: 2, // 测试数据 1 待支付;2 待确认;3 待收货;4 已完成;5 已取消
  1089. orderType: 1, // 测试数据 订单类型 1 工厂直营;2 经销商专营
  1090. isOnline: 1, // 测试数据 是否为线上支付 1 线上;0 线下
  1091. downTime: '',
  1092. statusDesc: '此订单待确认',
  1093. statusImg: './image/icon_status_daiqueren.png',
  1094. statusName: '待确认',
  1095. address: {
  1096. name: '韩梅梅',
  1097. tel: '13000000000',
  1098. addr: '山东省青岛市市北区汇丰路山海郡 火炬路南',
  1099. },
  1100. orderInfo: {
  1101. orderCode: '12132343434388888443',
  1102. createTime: '2021-02-05 21:38:45',
  1103. payTime: '2021-02-05 21:40:45',
  1104. payCode: '12132323243',
  1105. payType: '微信支付',
  1106. },
  1107. payInfo: {
  1108. goodsTotalPrice: '963.52',
  1109. rewardAmount: '0.00',
  1110. payPrice: '963.52'
  1111. },
  1112. bizOrderInfoDtoList: [{
  1113. maktx: '赛轮轮胎 205/60R16S H0808',
  1114. spec: '195/65R15',
  1115. pattern: 'SH56',
  1116. size: '16寸',
  1117. num: 2,
  1118. price: '240.00',
  1119. isBk: true,
  1120. }, {
  1121. maktx: '赛轮轮胎 205/60R16S H0808',
  1122. spec: '195/65R15',
  1123. pattern: 'SH56',
  1124. size: '16寸',
  1125. num: 2,
  1126. price: '240.00',
  1127. isBk: true,
  1128. }
  1129. ],
  1130. }, {
  1131. type: 3, // 测试数据 1 待支付;2 待确认;3 待收货;4 已完成;5 已取消
  1132. orderType: 1, // 测试数据 订单类型 1 工厂直营;2 经销商专营
  1133. isOnline: 1, // 测试数据 是否为线上支付 1 线上;0 线下
  1134. downTime: '',
  1135. statusDesc: '产品入库中',
  1136. statusImg: './image/icon_status_shouhuo.png',
  1137. statusName: '等待收货',
  1138. address: {
  1139. name: '韩梅梅',
  1140. tel: '13000000000',
  1141. addr: '山东省青岛市市北区汇丰路山海郡 火炬路南',
  1142. },
  1143. orderInfo: {
  1144. orderCode: '12132343434388888443',
  1145. createTime: '2021-02-05 21:38:45',
  1146. payTime: '2021-02-05 21:40:45',
  1147. payCode: '12132323243',
  1148. payType: '微信支付',
  1149. },
  1150. payInfo: {
  1151. goodsTotalPrice: '963.52',
  1152. rewardAmount: '0.00',
  1153. payPrice: '963.52'
  1154. },
  1155. bizOrderInfoDtoList: [{
  1156. maktx: '赛轮轮胎 205/60R16S H0808',
  1157. spec: '195/65R15',
  1158. pattern: 'SH56',
  1159. size: '16寸',
  1160. num: 2,
  1161. price: '240.00',
  1162. isBk: true,
  1163. }, {
  1164. maktx: '赛轮轮胎 205/60R16S H0808',
  1165. spec: '195/65R15',
  1166. pattern: 'SH56',
  1167. size: '16寸',
  1168. num: 2,
  1169. price: '240.00',
  1170. isBk: true,
  1171. }
  1172. ],
  1173. }, {
  1174. type: 4, // 测试数据 1 待支付;2 待确认;3 待收货;4 已完成;5 已取消
  1175. orderType: 1, // 测试数据 订单类型 1 工厂直营;2 经销商专营
  1176. isOnline: 1, // 测试数据 是否为线上支付 1 线上;0 线下
  1177. downTime: '',
  1178. statusDesc: '恭喜你完成交易啦~',
  1179. statusImg: './image/icon_status_wancheng.png',
  1180. statusName: '交易成功',
  1181. address: {
  1182. name: '韩梅梅',
  1183. tel: '13000000000',
  1184. addr: '山东省青岛市市北区汇丰路山海郡 火炬路南',
  1185. },
  1186. orderInfo: {
  1187. orderCode: '12132343434388888443',
  1188. createTime: '2021-02-05 21:38:45',
  1189. payTime: '2021-02-05 21:40:45',
  1190. payCode: '12132323243',
  1191. payType: '微信支付',
  1192. },
  1193. payInfo: {
  1194. goodsTotalPrice: '963.52',
  1195. rewardAmount: '0.00',
  1196. payPrice: '963.52'
  1197. },
  1198. bizOrderInfoDtoList: [{
  1199. maktx: '赛轮轮胎 205/60R16S H0808',
  1200. spec: '195/65R15',
  1201. pattern: 'SH56',
  1202. size: '16寸',
  1203. num: 2,
  1204. price: '240.00',
  1205. isBk: true,
  1206. }, {
  1207. maktx: '赛轮轮胎 205/60R16S H0808',
  1208. spec: '195/65R15',
  1209. pattern: 'SH56',
  1210. size: '16寸',
  1211. num: 2,
  1212. price: '240.00',
  1213. isBk: true,
  1214. }
  1215. ],
  1216. }, {
  1217. type: 5, // 测试数据 1 待支付;2 待确认;3 待收货;4 已完成;5 已取消
  1218. orderType: 1, // 测试数据 订单类型 1 工厂直营;2 经销商专营
  1219. isOnline: 1, // 测试数据 是否为线上支付 1 线上;0 线下
  1220. downTime: '',
  1221. statusDesc: '超时未付款~',
  1222. statusImg: './image/icon_status_quxiao.png',
  1223. statusName: '已取消',
  1224. address: {
  1225. name: '韩梅梅',
  1226. tel: '13000000000',
  1227. addr: '山东省青岛市市北区汇丰路山海郡 火炬路南',
  1228. },
  1229. orderInfo: {
  1230. orderCode: '12132343434388888443',
  1231. createTime: '2021-02-05 21:38:45',
  1232. payTime: '2021-02-05 21:40:45',
  1233. payCode: '12132323243',
  1234. payType: '微信支付',
  1235. },
  1236. payInfo: {
  1237. goodsTotalPrice: '963.52',
  1238. rewardAmount: '0.00',
  1239. payPrice: '963.52'
  1240. },
  1241. bizOrderInfoDtoList: [{
  1242. maktx: '赛轮轮胎 205/60R16S H0808',
  1243. spec: '195/65R15',
  1244. pattern: 'SH56',
  1245. size: '16寸',
  1246. num: 2,
  1247. price: '240.00',
  1248. isBk: true,
  1249. }, {
  1250. maktx: '赛轮轮胎 205/60R16S H0808',
  1251. spec: '195/65R15',
  1252. pattern: 'SH56',
  1253. size: '16寸',
  1254. num: 2,
  1255. price: '240.00',
  1256. isBk: true,
  1257. }
  1258. ],
  1259. }
  1260. ], // 订单详情测试数据
  1261. id: orderId,
  1262. userId: '',
  1263. getOrderInfoU: 'getOrderInfoU',
  1264. orderInfo: null,
  1265. isHudBgShow: false,
  1266. isHudDriverShow: false,
  1267. isHudCancelOrderShow: false,
  1268. isOpenOrderInfo: false,
  1269. isHudCancelPayShow: false,
  1270. isHudPayBgShow: false,
  1271. isHudPayShow: false,
  1272. alipayChecked: false,
  1273. wechatChecked: false,
  1274. shanfuChecked: false,
  1275. },
  1276. methods: {
  1277. init: function () {
  1278. this.userId = $api.getStorage('userid');
  1279. var _this = this;
  1280. this.getOrderInfo();
  1281. },
  1282. closeWin: function () {
  1283. api.closeWin({});
  1284. },
  1285. // 获取订单详情
  1286. getOrderInfo: function () {
  1287. var data = {
  1288. "orderId": this.id,
  1289. "url": "json",
  1290. "type": "body"
  1291. }
  1292. _this = this;
  1293. // url = this.getOrderInfoU;
  1294. // this.$post(url, data, function (ret) {
  1295. // if (ret.code == 0 || ret.code == '0') {
  1296. // _this.list = ret.data == null ? {} : ret.data;
  1297. // }
  1298. // });
  1299. this.orderInfo = this.list[this.id];
  1300. console.log(JSON.stringify(this.orderInfo));
  1301. },
  1302. // 打开地址页
  1303. onAddress: function () {
  1304. this.goWin('address', 'address_win.html');
  1305. },
  1306. // 展开订单信息
  1307. openOrderInfo: function (isOpen) {
  1308. this.isOpenOrderInfo = isOpen;
  1309. },
  1310. // 复制订单号支付单号 1 订单号;2 支付单号
  1311. onCopy: function (type) {
  1312. if (type == 1 || type == 2) {
  1313. _this = this;
  1314. let clipboardCont = type == 1 ? this.orderInfo.orderInfo.orderCode : this.orderInfo.orderInfo.payCode;
  1315. var clipBoard = api.require('clipBoard');
  1316. clipBoard.set({
  1317. value: clipboardCont
  1318. }, function (ret, err) {
  1319. if (ret) {
  1320. _this.showToast('已复制到剪切板');
  1321. } else {
  1322. _this.showToast('复制失败');
  1323. }
  1324. });
  1325. }
  1326. },
  1327. // 取消订单
  1328. onCancelOrder: function () {
  1329. _this = this;
  1330. this.isHudCancelOrderShow = true;
  1331. this.isHudBgShow = true;
  1332. },
  1333. // 去支付
  1334. onPayOrder: function () {
  1335. this.isHudPayShow = true;
  1336. this.isHudPayBgShow = true;
  1337. },
  1338. // 再次购买
  1339. onBuyAgain: function () {
  1340. this.goWin("product", "product.html");
  1341. },
  1342. // 查看司机信息
  1343. onCheckDriver: function () {
  1344. this.isHudDriverShow = true;
  1345. this.isHudBgShow = true;
  1346. },
  1347. // 关闭司机信息提示框
  1348. onClickCloseDriverHud: function () {
  1349. this.isHudDriverShow = false;
  1350. this.isHudBgShow = false;
  1351. },
  1352. // 拨打司机电话
  1353. onDialNumber: function () {
  1354. console.log('拨打电话');
  1355. api.call({
  1356. type: 'tel_prompt',
  1357. number: '10086'
  1358. });
  1359. },
  1360. // 点击取消订单alert按钮 1 取消(关闭alert) 2 确定
  1361. onClickCancelAlert: function (index) {
  1362. if (index === 1) { // 取消按钮
  1363. this.isHudCancelOrderShow = false;
  1364. this.isHudBgShow = false;
  1365. }
  1366. if (index === 2) { // 确定按钮
  1367. // TODO 网络请求
  1368. this.isHudCancelOrderShow = false;
  1369. this.isHudBgShow = false;
  1370. }
  1371. },
  1372. // 点击取消支付
  1373. onClickPayCancelPay: function (index) {
  1374. if (index === 1) {
  1375. // 支付
  1376. }
  1377. if (index === 2) {
  1378. // 取消支付
  1379. this.isHudCancelPayShow = true;
  1380. this.isHudBgShow = true;
  1381. }
  1382. },
  1383. // 点击左上角关闭 取消支付
  1384. onClosePayAlert: function () {
  1385. this.isHudCancelPayShow = true;
  1386. this.isHudBgShow = true;
  1387. },
  1388. // 点击支付方式
  1389. onChoosePayType: function (type) {
  1390. // this.alipayChecked = this.wechatChecked = this.shanfuChecked = false;
  1391. // if (type == 1) { // 支付宝
  1392. // this.alipayChecked = true;
  1393. // } else if (type == 2) { // 微信支付
  1394. // this.wechatChecked = true;
  1395. // } else if (type == 3) { // 云闪付
  1396. // this.shanfuChecked = true;
  1397. // }
  1398. },
  1399. // 取消付款确认框
  1400. onClickCancelPayAlert: function (index) {
  1401. // 1: 放弃;2:继续付款
  1402. if (index == 1) {
  1403. this.isHudCancelPayShow = false;
  1404. this.isHudBgShow = false;
  1405. this.isHudPayShow = false;
  1406. this.isHudPayBgShow = false;
  1407. } else if (index == 2) {
  1408. this.isHudCancelPayShow = false;
  1409. this.isHudBgShow = false;
  1410. }
  1411. },
  1412. },
  1413. mounted: function () {
  1414. this.init();
  1415. }
  1416. });
  1417. };
  1418. </script>
  1419. </html>