myOrderList_body.html 52 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228
  1. <!DOCTYPE html>
  2. <html class="">
  3. <!--STATUS OK-->
  4. <head>
  5. <meta name="referrer" content="always" />
  6. <meta charset='utf-8' />
  7. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  8. <meta http-equiv="x-dns-prefetch-control" content="on">
  9. <meta name="description" content="">
  10. <meta name="format-detection" content="telephone=no" />
  11. <!-- <link rel="stylesheet" type="text/css" href="css/vant-ui.css" /> -->
  12. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
  13. <link rel="stylesheet" type="text/css" href="css/iconfont.css">
  14. <link rel="stylesheet" type="text/css" href="css/main.css" />
  15. <script src="js/vue.js"></script>
  16. <!-- <script src="js/vant-ui.js"></script> -->
  17. <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
  18. <script src="js/main.js"></script>
  19. <link rel="stylesheet" href="./mescroll/mescroll.min.css">
  20. <script type="text/javascript" src="./mescroll/mescroll.min.js"></script>
  21. <title></title>
  22. </head>
  23. <style>
  24. .box-main {
  25. position: relative;
  26. height: auto;
  27. }
  28. .card {
  29. display: flex;
  30. justify-content: center;
  31. align-items: center;
  32. flex-direction: column;
  33. }
  34. .card-list {
  35. width: 100%;
  36. background-color: #fff;
  37. display: flex;
  38. flex-direction: column;
  39. margin-top: .2rem;
  40. width: 7rem;
  41. border-radius: .2rem;
  42. }
  43. .card-header {
  44. display: flex;
  45. flex-direction: row;
  46. justify-content: space-between;
  47. align-items: center;
  48. border-bottom: 1px solid #F1F1F1;
  49. margin: 0 .2rem;
  50. padding: .3rem 0;
  51. }
  52. .header-orderNum-box {
  53. display: flex;
  54. flex-direction: row;
  55. align-items: center;
  56. }
  57. .header-orderNum {
  58. font-size: .25rem;
  59. color: #333333;
  60. }
  61. .header-offline {
  62. font-size: .23rem;
  63. height: .32rem;
  64. ;
  65. border-radius: .16rem;
  66. padding: 0 .1rem;
  67. display: flex;
  68. align-items: center;
  69. border: 1px solid #A0CFFF;
  70. color: #4EB8FF;
  71. background-color: #F4FDFF;
  72. margin-left: .1rem;
  73. }
  74. .header-orderStatus {
  75. font-size: .3rem;
  76. }
  77. .orderStatus-normal {
  78. color: #999999;
  79. }
  80. .orderStatus-highlight {
  81. color: #F92500;
  82. }
  83. .card-footer {
  84. display: flex;
  85. flex-direction: column;
  86. margin: 0 .2rem;
  87. padding: .3rem 0;
  88. }
  89. .footer-desc-box {
  90. display: flex;
  91. flex-direction: row;
  92. justify-content: flex-end;
  93. margin-bottom: .2rem;
  94. }
  95. .footer-total-text {
  96. font-size: .28rem;
  97. color: #A9A9A9;
  98. }
  99. .footer-shifu-text {
  100. font-size: .28rem;
  101. color: #333333;
  102. margin-left: 2px;
  103. }
  104. .footer-cancel-box {
  105. width: 100%;
  106. height: 0.75rem;
  107. border-radius: 0.375rem;
  108. background-color: #F4F5F6;
  109. padding: 0 .3rem;
  110. display: flex;
  111. flex-direction: row;
  112. align-items: center;
  113. margin-bottom: .2rem;
  114. }
  115. .footer-cancel-tag {
  116. font-size: .23rem;
  117. color: #333333;
  118. margin-right: .15rem;
  119. }
  120. .footer-cancel-text {
  121. font-size: .23rem;
  122. color: #666666;
  123. }
  124. .footer-offline-box {
  125. display: flex;
  126. flex-direction: row;
  127. align-items: center;
  128. }
  129. .footer-btn-box {
  130. display: flex;
  131. flex: 1;
  132. flex-direction: row;
  133. justify-content: flex-end;
  134. }
  135. .footer-offline-text {
  136. font-size: .3rem;
  137. color: #A9A9A9;
  138. }
  139. .card-content {
  140. display: flex;
  141. flex-direction: column;
  142. margin: 0 .2rem;
  143. padding: .2rem 0;
  144. }
  145. .content-box {
  146. display: flex;
  147. flex-direction: row;
  148. justify-content: space-between;
  149. }
  150. .content-info-left {
  151. display: flex;
  152. flex-direction: row;
  153. }
  154. .content-img {
  155. position: relative;
  156. border-radius: .2rem;
  157. }
  158. .content-goods-info {
  159. display: flex;
  160. flex-direction: column;
  161. margin-left: .2rem;
  162. flex: 1;
  163. }
  164. .goods-info-title {
  165. font-size: .3rem;
  166. color: #333333;
  167. }
  168. .goods-info-size {
  169. font-size: .25rem;
  170. color: #999999;
  171. margin-top: 5px;
  172. }
  173. .content-info-right {
  174. display: flex;
  175. flex-direction: column;
  176. align-items: flex-end;
  177. padding: .3rem 0;
  178. }
  179. .goods-info-price {
  180. font-size: .3rem;
  181. color: #333333;
  182. }
  183. .goods-info-num {
  184. margin-top: 5px;
  185. font-size: .25rem;
  186. color: #A9A9A9
  187. }
  188. .placeholder-footer {
  189. height: 1rem;
  190. }
  191. .mescroll-box {
  192. display: none;
  193. }
  194. .list-btn-normal {
  195. height: 0.68rem;
  196. border-radius: 0.34rem;
  197. border: 1px solid #009BFF;
  198. color: #009DFE;
  199. width: 2rem;
  200. }
  201. .list-btn-highlight {
  202. height: 0.68rem;
  203. border-radius: 0.34rem;
  204. color: #ffffff;
  205. background-image: linear-gradient(to right, #24BBFB, #0098FF);
  206. border: 1px solid #24BBFB;
  207. width: 2rem;
  208. }
  209. .list-btn-driver {
  210. height: 0.68rem;
  211. border-radius: 0.34rem;
  212. color: #ffffff;
  213. padding: 0 .3rem;
  214. border: 1px solid #b5b5b5;
  215. color: #888888;
  216. }
  217. .list-btn-cancel {
  218. height: 0.68rem;
  219. border-radius: 0.34rem;
  220. color: #ffffff;
  221. border: 1px solid #b5b5b5;
  222. color: #888888;
  223. width: 2rem;
  224. }
  225. .hud-bg {
  226. position: fixed;
  227. width: 100%;
  228. height: 100%;
  229. display: flex;
  230. align-items: center;
  231. justify-content: center;
  232. background-color: rgba(0, 0, 0, 0.6);
  233. top: 0px;
  234. left: 0px;
  235. }
  236. .hud-cont-box {
  237. background-color: #ffffff;
  238. border-radius: .3rem;
  239. padding: .5rem 0;
  240. display: flex;
  241. flex-direction: column;
  242. align-items: center;
  243. width: 84%
  244. }
  245. .driver-title {
  246. font-size: .5rem;
  247. font-weight: bold;
  248. color: #000000;
  249. margin: .2rem 0;
  250. }
  251. .driver-userInfo-box {
  252. display: flex;
  253. flex-direction: row;
  254. align-items: center;
  255. margin: .2rem 0;
  256. }
  257. .driver-userInfo-avatar {
  258. width: 1.6rem;
  259. height: 1.6rem;
  260. border-radius: 50%;
  261. }
  262. .driver-userInfo-name {
  263. font-size: .4rem;
  264. color: #333333;
  265. margin-left: .2rem;
  266. }
  267. .driver-contact-box {
  268. display: flex;
  269. flex-direction: column;
  270. /* align-items: center; */
  271. justify-content: center;
  272. margin: .2rem .2rem;
  273. }
  274. .driver-tel-box {
  275. display: flex;
  276. flex-direction: row;
  277. align-items: center;
  278. padding: .3rem .2rem;
  279. border-bottom: 1px solid #f1f1f1;
  280. }
  281. .driver-tel-text {
  282. font-size: .3rem;
  283. color: #666666;
  284. margin: 0 .2rem;
  285. }
  286. .driver-tel-tag {
  287. font-size: .25rem;
  288. color: #999999;
  289. }
  290. .driver-num-box {
  291. display: flex;
  292. flex-direction: row;
  293. align-items: center;
  294. padding: .3rem .2rem;
  295. border-bottom: 1px solid #f1f1f1;
  296. }
  297. .driver-num-text {
  298. font-size: .3rem;
  299. color: #666666;
  300. margin-left: .2rem;
  301. }
  302. .driver-close {
  303. height: 0.84rem;
  304. border-radius: 0.42rem;
  305. color: #ffffff;
  306. background-image: linear-gradient(#0099FF, #00B9FB);
  307. width: 3rem;
  308. margin: .3rem 0 .2rem 0;
  309. }
  310. .cancel-order-title {
  311. font-size: .35rem;
  312. color: #333333;
  313. margin: .2rem 0;
  314. }
  315. .cancel-order-btn-box {
  316. display: flex;
  317. flex-direction: row;
  318. justify-content: space-between;
  319. margin: .2rem .2rem;
  320. }
  321. .cancel-order-cancel {
  322. height: 0.74rem;
  323. border-radius: 0.37rem;
  324. border: 1px solid #009BFF;
  325. color: #009DFE;
  326. width: 2.5rem;
  327. }
  328. .cancel-order-sure {
  329. height: 0.8rem;
  330. border-radius: 0.4rem;
  331. color: #ffffff;
  332. background-image: linear-gradient(#0099FF, #00B9FB);
  333. border: 1px solid #00B9FB;
  334. width: 2.5rem;
  335. margin-left: .2rem;
  336. }
  337. .noOrder-box {
  338. margin: 2rem auto;
  339. display: flex;
  340. flex-direction: column;
  341. align-items: center;
  342. }
  343. .noOrder-img {
  344. width: 3.5rem;
  345. height: 3.5rem;
  346. }
  347. .noOrder-text {
  348. font-size: .35rem;
  349. color: #666666;
  350. margin-top: .2rem;
  351. }
  352. </style>
  353. <body>
  354. <div id="app" style="background-color: #f5f5f5;" v-cloak>
  355. <van-tabs v-model="active" @change="onTabChange" color="#009DFE" :before-change="beforeChange"
  356. swipe-threshold="6">
  357. <van-tab v-for="(title, index) in tabTitles" :key="index" type="line" :title="title">
  358. </van-tab>
  359. </van-tabs>
  360. <!-- 全部 -->
  361. <div class="box-main mescroll-touch-y mescroll" v-show="active === 0 && currentList.length > 0" id="mescroll0">
  362. <div class="card-main">
  363. <div class="card" id="orderList">
  364. <div class="card-list" v-for="(item, index) in currentList" :key="index">
  365. <!-- 订单号 状态 -->
  366. <div class="card-header">
  367. <div class="header-orderNum-box">
  368. <div class="header-orderNum">订单号 {{item.orderNum}}</div>
  369. <div class="header-offline" v-if="item.isOnline === 0">线下支付</div>
  370. </div>
  371. <div v-if="item.type === 1" class="header-orderStatus orderStatus-highlight">
  372. {{item.agentAuditStatusName}}</div>
  373. <div v-else class="header-orderStatus orderStatus-normal">{{item.agentAuditStatusName}}
  374. </div>
  375. </div>
  376. <!-- 商品信息 -->
  377. <div class="card-content" v-for="(cont, index) in item.bizOrderInfoDtoList">
  378. <div class="content-box">
  379. <div class="content-info-left">
  380. <div class="card-img">
  381. <img src="image/cart_goods.png" style="width:2rem;height:2rem">
  382. </div>
  383. <div class="content-goods-info">
  384. <div class="goods-info-title">{{cont.maktx}}</div>
  385. <div class="goods-info-size">{{cont.spec}} {{cont.pattern}}</div>
  386. </div>
  387. </div>
  388. <div class="content-info-right">
  389. <div class="goods-info-price">{{item.isOnline === 1 ? '¥299.00' : '¥0.00'}}
  390. </div>
  391. <div class="goods-info-num">x2</div>
  392. </div>
  393. </div>
  394. </div>
  395. <!-- 根据不同状态,布局不同 -->
  396. <div class="card-footer" v-if="item.isOnline === 0">
  397. <div class="footer-cancel-box" v-if="item.type === 5 && item.cancelInfo != null">
  398. <div class="footer-cancel-tag">拒绝原因</div>
  399. <div class="footer-cancel-text">{{item.cancelInfo}}</div>
  400. </div>
  401. <div class="footer-offline-box">
  402. <div class="footer-btn-box" v-if="item.type === 1">
  403. <van-button class="list-btn-cancel" size="normal" @click="onCancelOrder(index)">取消订单
  404. </van-button>
  405. </div>
  406. <div class="footer-btn-box" v-if="item.type === 2 || item.type === 4">
  407. <van-button class="list-btn-normal" size="normal" @click="onBuyAgain(index)">再次购买
  408. </van-button>
  409. </div>
  410. <div class="footer-btn-box" v-if="item.type === 3">
  411. <van-button size="normal" class="list-btn-driver" @click="onCheckDriver(index)">
  412. 查看司机信息
  413. </van-button>
  414. <van-button class="list-btn-normal" size="normal" style="margin-left: .2rem;"
  415. @click="onBuyAgain(index)">再次购买</van-button>
  416. </div>
  417. <div class="footer-btn-box" v-if="item.type === 5">
  418. <van-button class="list-btn-normal" size="normal" @click="onBuyAgain(index)">再次购买
  419. </van-button>
  420. </div>
  421. </div>
  422. </div>
  423. <div v-else class="card-footer">
  424. <div class="footer-desc-box">
  425. <div class="footer-total-text">总价¥398.00,使用奖励¥00.00</div>
  426. <div class="footer-shifu-text">实付款 ¥598.00</div>
  427. </div>
  428. <div class="footer-cancel-box" v-if="item.type === 5 && item.cancelInfo != null">
  429. <div class="footer-cancel-tag">拒绝原因</div>
  430. <div class="footer-cancel-text">{{item.cancelInfo}}</div>
  431. </div>
  432. <div class="footer-btn-box" v-if="item.type === 1">
  433. <van-button class="list-btn-cancel" size="normal" @click="onCancelOrder(index)">取消订单
  434. </van-button>
  435. <van-button class="list-btn-highlight" size="normal" style="margin-left: .2rem;"
  436. @click="onPayOrder(index)">去支付</van-button>
  437. </div>
  438. <div class="footer-btn-box" v-if="item.type === 2 || item.type === 4">
  439. <van-button class="list-btn-normal" size="normal" @click="onBuyAgain(index)">再次购买
  440. </van-button>
  441. </div>
  442. <div class="footer-btn-box" v-if="item.type === 3">
  443. <van-button size="normal" class="list-btn-driver" @click="onCheckDriver(index)">查看司机信息
  444. </van-button>
  445. <van-button class="list-btn-normal" size="normal" style="margin-left: .2rem;"
  446. @click="onBuyAgain(index)">再次购买</van-button>
  447. </div>
  448. <div class="footer-btn-box" v-if="item.type === 5">
  449. <van-button class="list-btn-normal" size="normal" @click="onBuyAgain(index)">再次购买
  450. </van-button>
  451. </div>
  452. </div>
  453. </div>
  454. <div class="placeholder-footer"></div>
  455. </div>
  456. </div>
  457. </div>
  458. <!-- 待支付 -->
  459. <div class="box-main mescroll-touch-y mescroll" v-show="active === 1 && currentList.length > 0" id="mescroll1">
  460. <div class="card-main">
  461. <div class="card" id="orderList">
  462. <div class="card-list" v-for="(item, index) in currentList" :key="index">
  463. <!-- 订单号 状态 -->
  464. <div class="card-header">
  465. <div class="header-orderNum-box">
  466. <div class="header-orderNum">订单号 {{item.orderNum}}</div>
  467. <div class="header-offline" v-if="item.isOnline === 0">线下支付</div>
  468. </div>
  469. <div v-if="item.type === 1" class="header-orderStatus orderStatus-highlight">
  470. {{item.agentAuditStatusName}}</div>
  471. <div v-else class="header-orderStatus orderStatus-normal">{{item.agentAuditStatusName}}
  472. </div>
  473. </div>
  474. <!-- 商品信息 -->
  475. <div class="card-content" v-for="(cont, index) in item.bizOrderInfoDtoList">
  476. <div class="content-box">
  477. <div class="content-info-left">
  478. <div class="card-img">
  479. <img src="image/cart_goods.png" style="width:2rem;height:2rem">
  480. </div>
  481. <div class="content-goods-info">
  482. <div class="goods-info-title">{{cont.maktx}}</div>
  483. <div class="goods-info-size">{{cont.spec}} {{cont.pattern}}</div>
  484. </div>
  485. </div>
  486. <div class="content-info-right">
  487. <div class="goods-info-price">{{item.isOnline === 1 ? '¥299.00' : '¥0.00'}}
  488. </div>
  489. <div class="goods-info-num">x2</div>
  490. </div>
  491. </div>
  492. </div>
  493. <!-- 根据不同状态,布局不同 -->
  494. <div class="card-footer" v-if="item.isOnline === 0">
  495. <div class="footer-offline-box">
  496. <div class="footer-btn-box" v-if="item.type === 1">
  497. <van-button class="list-btn-cancel" size="normal" @click="onCancelOrder(index)">取消订单
  498. </van-button>
  499. </div>
  500. </div>
  501. </div>
  502. <div v-else class="card-footer">
  503. <div class="footer-desc-box">
  504. <div class="footer-total-text">总价¥398.00,使用奖励¥00.00</div>
  505. <div class="footer-shifu-text">实付款 ¥598.00</div>
  506. </div>
  507. <div class="footer-btn-box" v-if="item.type === 1">
  508. <van-button class="list-btn-cancel" size="normal" @click="onCancelOrder(index)">取消订单
  509. </van-button>
  510. <van-button class="list-btn-highlight" size="normal" style="margin-left: .2rem;"
  511. @click="onPayOrder(index)">去支付</van-button>
  512. </div>
  513. </div>
  514. </div>
  515. <div class="placeholder-footer"></div>
  516. </div>
  517. </div>
  518. </div>
  519. <!-- 待确认 -->
  520. <div class="box-main mescroll-touch-y mescroll" v-show="active === 2 && currentList.length > 0" id="mescroll2">
  521. <div class="card-main">
  522. <div class="card" id="orderList">
  523. <div class="card-list" v-for="(item, index) in currentList" :key="index">
  524. <!-- 订单号 状态 -->
  525. <div class="card-header">
  526. <div class="header-orderNum-box">
  527. <div class="header-orderNum">订单号 {{item.orderNum}}</div>
  528. <div class="header-offline" v-if="item.isOnline === 0">线下支付</div>
  529. </div>
  530. <div v-if="item.type === 1" class="header-orderStatus orderStatus-highlight">
  531. {{item.agentAuditStatusName}}</div>
  532. <div v-else class="header-orderStatus orderStatus-normal">{{item.agentAuditStatusName}}
  533. </div>
  534. </div>
  535. <!-- 商品信息 -->
  536. <div class="card-content" v-for="(cont, index) in item.bizOrderInfoDtoList">
  537. <div class="content-box">
  538. <div class="content-info-left">
  539. <div class="card-img">
  540. <img src="image/cart_goods.png" style="width:2rem;height:2rem">
  541. </div>
  542. <div class="content-goods-info">
  543. <div class="goods-info-title">{{cont.maktx}}</div>
  544. <div class="goods-info-size">{{cont.spec}} {{cont.pattern}}</div>
  545. </div>
  546. </div>
  547. <div class="content-info-right">
  548. <div class="goods-info-price">{{item.isOnline === 1 ? '¥299.00' : '¥0.00'}}
  549. </div>
  550. <div class="goods-info-num">x2</div>
  551. </div>
  552. </div>
  553. </div>
  554. <!-- 根据不同状态,布局不同 -->
  555. <div class="card-footer" v-if="item.isOnline === 0">
  556. <div class="footer-offline-box">
  557. <div class="footer-btn-box" v-if="item.type === 2">
  558. <van-button class="list-btn-normal" size="normal" @click="onBuyAgain(index)">再次购买
  559. </van-button>
  560. </div>
  561. </div>
  562. </div>
  563. <div v-else class="card-footer">
  564. <div class="footer-desc-box">
  565. <div class="footer-total-text">总价¥398.00,使用奖励¥00.00</div>
  566. <div class="footer-shifu-text">实付款 ¥598.00</div>
  567. </div>
  568. <div class="footer-btn-box" v-if="item.type === 2">
  569. <van-button class="list-btn-normal" size="normal" @click="onBuyAgain(index)">再次购买
  570. </van-button>
  571. </div>
  572. </div>
  573. </div>
  574. <div class="placeholder-footer"></div>
  575. </div>
  576. </div>
  577. </div>
  578. <!-- 待收货 -->
  579. <div class="box-main mescroll-touch-y mescroll" v-show="active === 3 && currentList.length > 0" id="mescroll3">
  580. <div class="card-main">
  581. <div class="card" id="orderList">
  582. <div class="card-list" v-for="(item, index) in currentList" :key="index">
  583. <!-- 订单号 状态 -->
  584. <div class="card-header">
  585. <div class="header-orderNum-box">
  586. <div class="header-orderNum">订单号 {{item.orderNum}}</div>
  587. <div class="header-offline" v-if="item.isOnline === 0">线下支付</div>
  588. </div>
  589. <div v-if="item.type === 1" class="header-orderStatus orderStatus-highlight">
  590. {{item.agentAuditStatusName}}</div>
  591. <div v-else class="header-orderStatus orderStatus-normal">{{item.agentAuditStatusName}}
  592. </div>
  593. </div>
  594. <!-- 商品信息 -->
  595. <div class="card-content" v-for="(cont, index) in item.bizOrderInfoDtoList">
  596. <div class="content-box">
  597. <div class="content-info-left">
  598. <div class="card-img">
  599. <img src="image/cart_goods.png" style="width:2rem;height:2rem">
  600. </div>
  601. <div class="content-goods-info">
  602. <div class="goods-info-title">{{cont.maktx}}</div>
  603. <div class="goods-info-size">{{cont.spec}} {{cont.pattern}}</div>
  604. </div>
  605. </div>
  606. <div class="content-info-right">
  607. <div class="goods-info-price">{{item.isOnline === 1 ? '¥299.00' : '¥0.00'}}
  608. </div>
  609. <div class="goods-info-num">x2</div>
  610. </div>
  611. </div>
  612. </div>
  613. <!-- 根据不同状态,布局不同 -->
  614. <div class="card-footer" v-if="item.isOnline === 0">
  615. <div class="footer-offline-box">
  616. <div class="footer-btn-box" v-if="item.type === 3">
  617. <van-button size="normal" class="list-btn-driver" @click="onCheckDriver(index)">
  618. 查看司机信息</van-button>
  619. <van-button class="list-btn-normal" size="normal" style="margin-left: .2rem;"
  620. @click="onBuyAgain(index)">再次购买</van-button>
  621. </div>
  622. </div>
  623. </div>
  624. <div v-else class="card-footer">
  625. <div class="footer-desc-box">
  626. <div class="footer-total-text">总价¥398.00,使用奖励¥00.00</div>
  627. <div class="footer-shifu-text">实付款 ¥598.00</div>
  628. </div>
  629. <div class="footer-btn-box" v-if="item.type === 3">
  630. <van-button size="normal" class="list-btn-driver" @click="onCheckDriver(index)">查看司机信息
  631. </van-button>
  632. <van-button class="list-btn-normal" size="normal" style="margin-left: .2rem;"
  633. @click="onBuyAgain(index)">再次购买</van-button>
  634. </div>
  635. </div>
  636. </div>
  637. <div class="placeholder-footer"></div>
  638. </div>
  639. </div>
  640. </div>
  641. <!-- 已完成 -->
  642. <div class="box-main mescroll-touch-y mescroll" v-show="active === 4 && currentList.length > 0" id="mescroll4">
  643. <div class="card-main">
  644. <div class="card" id="orderList">
  645. <div class="card-list" v-for="(item, index) in currentList" :key="index">
  646. <!-- 订单号 状态 -->
  647. <div class="card-header">
  648. <div class="header-orderNum-box">
  649. <div class="header-orderNum">订单号 {{item.orderNum}}</div>
  650. <div class="header-offline" v-if="item.isOnline === 0">线下支付</div>
  651. </div>
  652. <div v-if="item.type === 1" class="header-orderStatus orderStatus-highlight">
  653. {{item.agentAuditStatusName}}</div>
  654. <div v-else class="header-orderStatus orderStatus-normal">{{item.agentAuditStatusName}}
  655. </div>
  656. </div>
  657. <!-- 商品信息 -->
  658. <div class="card-content" v-for="(cont, index) in item.bizOrderInfoDtoList">
  659. <div class="content-box">
  660. <div class="content-info-left">
  661. <div class="card-img">
  662. <img src="image/cart_goods.png" style="width:2rem;height:2rem">
  663. </div>
  664. <div class="content-goods-info">
  665. <div class="goods-info-title">{{cont.maktx}}</div>
  666. <div class="goods-info-size">{{cont.spec}} {{cont.pattern}}</div>
  667. </div>
  668. </div>
  669. <div class="content-info-right">
  670. <div class="goods-info-price">{{item.isOnline === 1 ? '¥299.00' : '¥0.00'}}
  671. </div>
  672. <div class="goods-info-num">x2</div>
  673. </div>
  674. </div>
  675. </div>
  676. <!-- 根据不同状态,布局不同 -->
  677. <div class="card-footer" v-if="item.isOnline === 0">
  678. <div class="footer-offline-box">
  679. <div class="footer-btn-box" v-if="item.type === 4">
  680. <van-button class="list-btn-normal" size="normal" @click="onBuyAgain(index)">再次购买
  681. </van-button>
  682. </div>
  683. </div>
  684. </div>
  685. <div v-else class="card-footer">
  686. <div class="footer-desc-box">
  687. <div class="footer-total-text">总价¥398.00,使用奖励¥00.00</div>
  688. <div class="footer-shifu-text">实付款 ¥598.00</div>
  689. </div>
  690. <div class="footer-btn-box" v-if="item.type === 4">
  691. <van-button class="list-btn-normal" size="normal" @click="onBuyAgain(index)">再次购买
  692. </van-button>
  693. </div>
  694. </div>
  695. </div>
  696. <div class="placeholder-footer"></div>
  697. </div>
  698. </div>
  699. </div>
  700. <!-- 已取消 -->
  701. <div class="box-main mescroll-touch-y mescroll" v-if="active === 5 && currentList.length > 0" id="mescroll5">
  702. <div class="card-main">
  703. <div class="card" id="orderList">
  704. <div class="card-list" v-for="(item, index) in currentList" :key="index">
  705. <!-- 订单号 状态 -->
  706. <div class="card-header">
  707. <div class="header-orderNum-box">
  708. <div class="header-orderNum">订单号 {{item.orderNum}}</div>
  709. <div class="header-offline" v-if="item.isOnline === 0">线下支付</div>
  710. </div>
  711. <div v-if="item.type === 1" class="header-orderStatus orderStatus-highlight">
  712. {{item.agentAuditStatusName}}</div>
  713. <div v-else class="header-orderStatus orderStatus-normal">{{item.agentAuditStatusName}}
  714. </div>
  715. </div>
  716. <!-- 商品信息 -->
  717. <div class="card-content" v-for="(cont, index) in item.bizOrderInfoDtoList">
  718. <div class="content-box">
  719. <div class="content-info-left">
  720. <div class="card-img">
  721. <img src="image/cart_goods.png" style="width:2rem;height:2rem">
  722. </div>
  723. <div class="content-goods-info">
  724. <div class="goods-info-title">{{cont.maktx}}</div>
  725. <div class="goods-info-size">{{cont.spec}} {{cont.pattern}}</div>
  726. </div>
  727. </div>
  728. <div class="content-info-right">
  729. <div class="goods-info-price">{{item.isOnline === 1 ? '¥299.00' : '¥0.00'}}
  730. </div>
  731. <div class="goods-info-num">x2</div>
  732. </div>
  733. </div>
  734. </div>
  735. <!-- 根据不同状态,布局不同 -->
  736. <div class="card-footer" v-if="item.isOnline === 0">
  737. <div class="footer-cancel-box" v-if="item.type === 5 && item.cancelInfo != null">
  738. <div class="footer-cancel-tag">拒绝原因</div>
  739. <div class="footer-cancel-text">{{item.cancelInfo}}</div>
  740. </div>
  741. <div class="footer-offline-box">
  742. <div class="footer-btn-box" v-if="item.type === 5">
  743. <van-button class="list-btn-normal" size="normal" @click="onBuyAgain(index)">再次购买
  744. </van-button>
  745. </div>
  746. </div>
  747. </div>
  748. <div v-else class="card-footer">
  749. <div class="footer-desc-box">
  750. <div class="footer-total-text">总价¥398.00,使用奖励¥00.00</div>
  751. <div class="footer-shifu-text">实付款 ¥598.00</div>
  752. </div>
  753. <div class="footer-cancel-box" v-if="item.type === 5 && item.cancelInfo != null">
  754. <div class="footer-cancel-tag">拒绝原因</div>
  755. <div class="footer-cancel-text">{{item.cancelInfo}}</div>
  756. </div>
  757. <div class="footer-btn-box" v-if="item.type === 5">
  758. <van-button class="list-btn-normal" size="normal" @click="onBuyAgain(index)">再次购买
  759. </van-button>
  760. </div>
  761. </div>
  762. </div>
  763. <div class="placeholder-footer"></div>
  764. </div>
  765. </div>
  766. </div>
  767. <div class="noOrder-box" v-show="currentList.length == 0" style="text-align:center">
  768. <img class="noOrder-img" src="./image/noOrder.png" />
  769. <div class="noOrder-text">您还没有相关订单</div>
  770. </div>
  771. <div class="hud-bg" v-if="isHudBgShow">
  772. <!-- 查看司机信息 -->
  773. <div class="hud-cont-box" v-if="isHudDriverShow">
  774. <div class="driver-title">司机信息</div>
  775. <div class="driver-userInfo-box">
  776. <img class="driver-userInfo-avatar" src="./image/siji_avatar_default.png" />
  777. <div class="driver-userInfo-name">流川枫</div>
  778. </div>
  779. <div class="driver-contact-box">
  780. <div class="driver-tel-box" v-on:click="onDialNumber">
  781. <img style="width: 30px; height: 30px;" src="./image/shouji.png" />
  782. <div class="driver-tel-text">13000000000</div>
  783. <div class="driver-tel-tag">点击拨打电话</div>
  784. </div>
  785. <div class="driver-num-box">
  786. <img style="width: 30px; height: 30px;" src="./image/chepai.png" />
  787. <div class="driver-num-text">鲁B12345</div>
  788. </div>
  789. </div>
  790. <van-button class="driver-close" size="normal" @click="onClickCloseDriverHud">关闭</van-button>
  791. </div>
  792. <!-- 取消订单 -->
  793. <div class="hud-cont-box" v-if="isHudCancelOrderShow">
  794. <div class="cancel-order-title">确定要取消订单?</div>
  795. <div class="cancel-order-btn-box">
  796. <van-button class="cancel-order-cancel" @click="onClickCancelAlert(1)" size="normal">取消</van-button>
  797. <van-button class="cancel-order-sure" @click="onClickCancelAlert(2)" size="normal">确定</van-button>
  798. </div>
  799. </div>
  800. </div>
  801. </div>
  802. </body>
  803. <link rel="stylesheet" href="./mescroll/mescroll.min.css">
  804. <script type="text/javascript" src="./js/qrcode.min.js"></script>
  805. <script type="text/javascript" src="../script/aui-scroll.js"></script>
  806. <script type="text/javascript" src="./mescroll/mescroll.min.js"></script>
  807. <script type="text/javascript" src="../script/api.js"></script>
  808. <script type="text/javascript" src="../script/httpRequest.js"></script>
  809. <script type="text/javascript" src="../script/vue_plugins.js"></script>
  810. <script type="text/javascript">
  811. apiready = function () {
  812. new Vue({
  813. el: '#app',
  814. data: {
  815. active: 0,
  816. tabTitles: ['全部', '待支付', '待确认', '待收货', '已完成', '已取消'],
  817. list: [
  818. [
  819. {
  820. type: 4,
  821. orderNum: '202103021045545730',
  822. agentAuditStatusName: '已完成',
  823. isOnline: 1,
  824. bizOrderInfoDtoList: [{
  825. maktx: '195/65R15 91V SH56 BGSL',
  826. spec: '195/65R15',
  827. pattern: 'SH56'
  828. }],
  829. }, {
  830. type: 1,
  831. orderNum: '202103021045545730',
  832. agentAuditStatusName: '等待付款',
  833. isOnline: 1,
  834. bizOrderInfoDtoList: [{
  835. maktx: '195/65R15 91V SH56 BGSL',
  836. spec: '195/65R15',
  837. pattern: 'SH56'
  838. }],
  839. }, {
  840. type: 2,
  841. orderNum: '202103021045545730',
  842. agentAuditStatusName: '待入库',
  843. isOnline: 1,
  844. bizOrderInfoDtoList: [{
  845. maktx: '195/65R15 91V SH56 BGSL',
  846. spec: '195/65R15',
  847. pattern: 'SH56'
  848. }, {
  849. maktx: '195/65R15 91V SH56 BGSL',
  850. spec: '195/65R15',
  851. pattern: 'SH56'
  852. }],
  853. }, {
  854. type: 3,
  855. orderNum: '202103021045545730',
  856. agentAuditStatusName: '入库中',
  857. isOnline: 0,
  858. bizOrderInfoDtoList: [{
  859. maktx: '195/65R15 91V SH56 BGSL',
  860. spec: '195/65R15',
  861. pattern: 'SH56'
  862. }],
  863. }, {
  864. type: 5,
  865. orderNum: '202103021045545730',
  866. agentAuditStatusName: '已取消',
  867. isOnline: 1,
  868. cancelInfo: '因代理商库存不足,此订单已被驳回~',
  869. bizOrderInfoDtoList: [{
  870. maktx: '195/65R15 91V SH56 BGSL',
  871. spec: '195/65R15',
  872. pattern: 'SH56'
  873. }],
  874. }, {
  875. type: 2,
  876. orderNum: '202103021045545730',
  877. agentAuditStatusName: '等待付款',
  878. isOnline: 0,
  879. bizOrderInfoDtoList: [{
  880. maktx: '195/65R15 91V SH56 BGSL',
  881. spec: '195/65R15',
  882. pattern: 'SH56'
  883. }],
  884. }
  885. ], [
  886. // {
  887. // type: 1,
  888. // orderNum: '202103021045545730',
  889. // agentAuditStatusName: '等待付款',
  890. // isOnline: 1,
  891. // bizOrderInfoDtoList: [{
  892. // maktx: '195/65R15 91V SH56 BGSL',
  893. // spec: '195/65R15',
  894. // pattern: 'SH56'
  895. // }],
  896. // }, {
  897. // type: 1,
  898. // orderNum: '202103021045545730',
  899. // agentAuditStatusName: '等待付款',
  900. // isOnline: 1,
  901. // bizOrderInfoDtoList: [{
  902. // maktx: '195/65R15 91V SH56 BGSL',
  903. // spec: '195/65R15',
  904. // pattern: 'SH56'
  905. // }],
  906. // }
  907. ], [
  908. {
  909. type: 2,
  910. orderNum: '202103021045545730',
  911. agentAuditStatusName: '等待确认',
  912. isOnline: 1,
  913. bizOrderInfoDtoList: [{
  914. maktx: '195/65R15 91V SH56 BGSL',
  915. spec: '195/65R15',
  916. pattern: 'SH56'
  917. }],
  918. }, {
  919. type: 2,
  920. orderNum: '202103021045545730',
  921. agentAuditStatusName: '等待确认',
  922. isOnline: 0,
  923. bizOrderInfoDtoList: [{
  924. maktx: '195/65R15 91V SH56 BGSL',
  925. spec: '195/65R15',
  926. pattern: 'SH56'
  927. }],
  928. }, {
  929. type: 2,
  930. orderNum: '202103021045545730',
  931. agentAuditStatusName: '等待处理',
  932. isOnline: 0,
  933. bizOrderInfoDtoList: [{
  934. maktx: '195/65R15 91V SH56 BGSL',
  935. spec: '195/65R15',
  936. pattern: 'SH56'
  937. }],
  938. }
  939. ], [
  940. {
  941. type: 3,
  942. orderNum: '202103021045545730',
  943. agentAuditStatusName: '已入库',
  944. isOnline: 1,
  945. bizOrderInfoDtoList: [{
  946. maktx: '195/65R15 91V SH56 BGSL',
  947. spec: '195/65R15',
  948. pattern: 'SH56'
  949. }, {
  950. maktx: '195/65R15 91V SH56 BGSL',
  951. spec: '195/65R15',
  952. pattern: 'SH56'
  953. }],
  954. }, {
  955. type: 3,
  956. orderNum: '202103021045545730',
  957. agentAuditStatusName: '入库中',
  958. isOnline: 0,
  959. bizOrderInfoDtoList: [{
  960. maktx: '195/65R15 91V SH56 BGSL',
  961. spec: '195/65R15',
  962. pattern: 'SH56'
  963. }, {
  964. maktx: '195/65R15 91V SH56 BGSL',
  965. spec: '195/65R15',
  966. pattern: 'SH56'
  967. }],
  968. }
  969. ], [
  970. {
  971. type: 4,
  972. orderNum: '202103021045545730',
  973. agentAuditStatusName: '已完成',
  974. isOnline: 1,
  975. bizOrderInfoDtoList: [{
  976. maktx: '195/65R15 91V SH56 BGSL',
  977. spec: '195/65R15',
  978. pattern: 'SH56'
  979. }],
  980. }, {
  981. type: 4,
  982. orderNum: '202103021045545730',
  983. agentAuditStatusName: '已完成',
  984. isOnline: 0,
  985. bizOrderInfoDtoList: [{
  986. maktx: '195/65R15 91V SH56 BGSL',
  987. spec: '195/65R15',
  988. pattern: 'SH56'
  989. }],
  990. }
  991. ], [
  992. {
  993. type: 5,
  994. orderNum: '202103021045545730',
  995. agentAuditStatusName: '已取消',
  996. isOnline: 1,
  997. cancelInfo: null,
  998. bizOrderInfoDtoList: [{
  999. maktx: '195/65R15 91V SH56 BGSL',
  1000. spec: '195/65R15',
  1001. pattern: 'SH56',
  1002. }],
  1003. }, {
  1004. type: 5,
  1005. orderNum: '202103021045545730',
  1006. agentAuditStatusName: '代理商拒绝',
  1007. isOnline: 0,
  1008. cancelInfo: '因代理商库存不足,此订单已被订单驳回~',
  1009. bizOrderInfoDtoList: [{
  1010. maktx: '195/65R15 91V SH56 BGSL',
  1011. spec: '195/65R15',
  1012. pattern: 'SH56',
  1013. }],
  1014. }
  1015. ]
  1016. ], // 测试数据
  1017. loading: false,
  1018. finished: false,
  1019. refreshing: false,
  1020. pages: [1, 1, 1, 1, 1, 1],
  1021. totalPages: [1, 1, 1, 1, 1, 1],
  1022. getOrdersU: 'getOrderListU',
  1023. currentList: [],
  1024. size: 10,
  1025. isHudBgShow: false,
  1026. isHudDriverShow: false,
  1027. isHudCancelOrderShow: false,
  1028. },
  1029. methods: {
  1030. init: function () {
  1031. var _this = this;
  1032. this.userId = $api.getStorage('userid');
  1033. this.currentList = this.list[this.active];
  1034. this.getOrderList();
  1035. this.configDownAndPull('mescroll' + this.active, function (mescroll) {
  1036. _this.pages[_this.active] = 1;
  1037. _this.getOrderList(mescroll);
  1038. }, function (mescroll) {
  1039. if (_this.pages[_this.active] < _this.totalPages[_this.active]) {
  1040. _this.pages[_this.active] = _this.pages[_this.active] + 1;
  1041. _this.getOrderList(mescroll, 1);
  1042. } else {
  1043. mescroll.endSuccess(_this.size, false);
  1044. }
  1045. });
  1046. },
  1047. // 获取订单列表
  1048. getOrderList: function (mescroll) {
  1049. var data = {
  1050. "retailerId": this.userId,
  1051. "size": this.size,
  1052. "current": this.pages[this.active],
  1053. "url": "json",
  1054. "type": "body",
  1055. }
  1056. _this = this;
  1057. url = this.getOrdersU;
  1058. this.$post(url, data, function (ret) {
  1059. if (ret.code == 0 || ret.code == '0') {
  1060. console.log(JSON.stringify(ret.data));
  1061. // _this.totalPages[_this.active] = ret.data.pages;
  1062. // _this.list[_this.active] = _this.pages[_this.active] == 1 ? ret.data.records : _this.list[_this.active].concat(ret.data.records);
  1063. _this.currentList = _this.list[_this.active];
  1064. if (mescroll) {
  1065. mescroll.endSuccess(_this.size, true);
  1066. }
  1067. }
  1068. });
  1069. },
  1070. // 查看订单详情
  1071. lookOrderInfo: function (index) {
  1072. },
  1073. // 切换tab
  1074. onTabChange: function (name, title) {
  1075. this.currentList = this.list[this.active];
  1076. },
  1077. // tab切换拦截
  1078. beforeChange: function (index) {
  1079. console.log(index);
  1080. return true;
  1081. },
  1082. // 取消订单
  1083. onCancelOrder: function (index) {
  1084. console.log('cancel order ' + index);
  1085. _this = this;
  1086. this.isHudCancelOrderShow = true;
  1087. this.isHudBgShow = true;
  1088. },
  1089. // 去支付
  1090. onPayOrder: function (index) {
  1091. console.log('pay order ' + index);
  1092. },
  1093. // 再次购买
  1094. onBuyAgain: function (index) {
  1095. console.log('buy again ' + index);
  1096. },
  1097. // 查看司机信息
  1098. onCheckDriver: function (index) {
  1099. this.isHudDriverShow = true;
  1100. this.isHudBgShow = true;
  1101. },
  1102. // 下拉刷新
  1103. onRefresh: function () {
  1104. // 清空列表数据
  1105. this.finished = false;
  1106. // 重新加载数据
  1107. // 将 loading 设置为 true,表示处于加载状态
  1108. this.loading = true;
  1109. this.getOrderList();
  1110. },
  1111. // 关闭司机信息提示框
  1112. onClickCloseDriverHud: function () {
  1113. this.isHudDriverShow = false;
  1114. this.isHudBgShow = false;
  1115. },
  1116. // 拨打司机电话
  1117. onDialNumber: function () {
  1118. console.log('拨打电话');
  1119. api.call({
  1120. type: 'tel_prompt',
  1121. number: '10086'
  1122. });
  1123. },
  1124. // 点击取消订单alert按钮 1 取消(关闭alert) 2 确定
  1125. onClickCancelAlert: function (index) {
  1126. if (index === 1) { // 取消按钮
  1127. this.isHudCancelOrderShow = false;
  1128. this.isHudBgShow = false;
  1129. }
  1130. if (index === 2) { // 确定按钮
  1131. // TODO 网络请求
  1132. this.isHudCancelOrderShow = false;
  1133. this.isHudBgShow = false;
  1134. }
  1135. },
  1136. },
  1137. mounted: function () {
  1138. this.init();
  1139. }
  1140. });
  1141. };
  1142. </script>
  1143. </html>