orderDetails.html 34 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  8. <meta name='apple-touch-fullscreen' content='yes'>
  9. <meta name="apple-mobile-web-app-capable" content="yes"/>
  10. <meta content="fullscreen=yes,preventMove=no" name="ML-Config">
  11. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  12. <meta name="renderer" content="webkit">
  13. <meta name="apple-mobile-web-app-capable" content="yes"/>
  14. <meta name="keywords" content="电子烟,关键字"/>
  15. <meta name="Description" content="网站描述"/>
  16. <title>订单详情</title>
  17. <link rel="stylesheet" href="/assets/index/css/common.css?t=18">
  18. <link rel="stylesheet" href="/assets/index/css/orderDetails.css?t=12">
  19. </head>
  20. <body>
  21. <!-- 头部导航栏 -->
  22. <header class="headerContainer" id="headerContainer">
  23. <!-- 顶部提示 -->
  24. <div class="warnContainer">
  25. <h4 class="warnText">WARNING: This product contains nicotine. Nicotine is an addictive chemical.</h4>
  26. </div>
  27. <!-- pc端头部 -->
  28. <div id="computerEndHeader">
  29. <a href="/index/index/index.html">
  30. <h1 class="computerLogo">
  31. <img src="/assets/index/asstes/icon/logo.png" alt="Free Shipping Vapes" title="Free Shipping Vapes">
  32. </h1>
  33. </a>
  34. <div class="headIconContainer">
  35. <!-- 购物车 -->
  36. <a href="/index/cart/shoppingCart.html">
  37. <div class="headIconItem shoppingCartIcon">
  38. <img src="/assets/index/asstes/icon/shoppingCart.png" alt="shoppingCart" tabindex="shoppingCart">
  39. </div>
  40. </a>
  41. <!-- 收藏 -->
  42. <!-- <div class="headIconItem collectIcon">-->
  43. <!-- <img src="/assets/index/asstes/icon/collect.png" alt="collect" tabindex="collect">-->
  44. <!-- </div>-->
  45. <!-- 个人中心 -->
  46. <a href="/index/user/order.html">
  47. <div class="headIconItem userIcon">
  48. <img src="/assets/index/asstes/icon/user.png" alt="user" tabindex="user">
  49. </div>
  50. </a>
  51. </div>
  52. </div>
  53. <!-- 移动端头部 -->
  54. <div id="mobileEndHeader">
  55. <div class="mobileEndHeaderConten">
  56. <a href="/index/index/index.html">
  57. <h1 class="mobileLogo">
  58. <img src="/assets/index/asstes/icon/logo.png" alt="Free Shipping Vapes" title="Free Shipping Vapes">
  59. </h1>
  60. </a>
  61. <div class="mobileUserIconList">
  62. <div class="mobileUserIcon userIcon">
  63. <img src="/assets/index/asstes/icon/user.png" alt="user" tabindex="user">
  64. </div>
  65. </div>
  66. <div class="mobileMenu">
  67. <p id="mobileMenuBot">
  68. <span id="mobileMenuLink"></span>
  69. </p>
  70. </div>
  71. </div>
  72. <!-- 移动端菜单 -->
  73. <section class="mobileMenuFixed">
  74. <div class="mobileMenuItem">
  75. <a href="/index/cart/shoppingCart.html">
  76. <h2 class="menuItemTitle">NEW VAPES</h2>
  77. </a>
  78. </div>
  79. <!-- <div class="mobileMenuItem">
  80. <h2 class="menuItemTitle">DISPOSABLES</h2>
  81. </div>-->
  82. <div class="mobileMenuItem">
  83. <a href="/index/cart/shoppingCart.html">
  84. <h2 class="menuItemTitle shoppingCartIcon">Shopping Cart</h2>
  85. </a>
  86. </div>
  87. <!-- <div class="mobileMenuItem">-->
  88. <!-- <h2 class="menuItemTitle collectIcon">Collect</h2>-->
  89. <!-- </div>-->
  90. <div class="mobileMenuItem active">
  91. <a href="/index/user/order.html">
  92. <h2 class="menuItemTitle userIcon">Personal</h2>
  93. </a>
  94. </div>
  95. </section>
  96. </div>
  97. </header>
  98. <main id="main">
  99. <section class="pageContainer">
  100. <div class="pageMain">
  101. <!-- 页面菜单 -->
  102. <div class="navContainer" id="userNavContainer">
  103. <a href="/index/index/index.html">
  104. <nav class="navItem">
  105. <div class="navItemFlex">
  106. <img src="/assets/index/asstes/icon/hm.png" alt="">
  107. <h2 class="navTitle">Home</h2>
  108. </div>
  109. </nav>
  110. </a>
  111. <nav class="navItem">
  112. <div class="navItemFlex">
  113. <img src="/assets/index/asstes/icon/order.png" alt="">
  114. <h2 class="navTitle">My orders</h2>
  115. </div>
  116. <div class="sunNavBox">
  117. <a href="#">
  118. <nav class="sunNavItem orderNavItem" id="unpaid" data-type="payment">
  119. <h3 class="sunNavTitle">Unpaid</h3>
  120. </nav>
  121. </a>
  122. <a href="#">
  123. <nav class="sunNavItem orderNavItem" id="treat" data-type="treat">
  124. <h3 class="sunNavTitle">To be shipped</h3>
  125. </nav>
  126. </a>
  127. <a href="#">
  128. <nav class="sunNavItem orderNavItem" data-type="shipped">
  129. <h3 class="sunNavTitle">Shipped</h3>
  130. </nav>
  131. </a>
  132. <a href="#">
  133. <nav class="sunNavItem orderNavItem" data-type="take">
  134. <h3 class="sunNavTitle">Received</h3>
  135. </nav>
  136. </a>
  137. </div>
  138. </nav>
  139. <a href="/index/user/myScores.html">
  140. <nav class="navItem">
  141. <div class="navItemFlex">
  142. <img src="/assets/index/asstes/icon/jf.png" alt="">
  143. <h2 class="navTitle">My points</h2>
  144. </div>
  145. </nav>
  146. </a>
  147. </div>
  148. <!-- 页面内容 -->
  149. <div class="pageConten">
  150. <div class="odTitleBox">
  151. <img src="/assets/index/asstes/icon/fjt.png" alt="">
  152. <h4 class="odTitle">Order Information</h4>
  153. </div>
  154. <!-- <div class="odMenuBox">
  155. <div class="odMenuItem">
  156. <img src="/assets/index/asstes/icon/dy.png" alt="">
  157. <p>打印订单</p>
  158. </div>
  159. <div class="odMenuItem">
  160. <img src="/assets/index/asstes/icon/th.png" alt="">
  161. <p>退货退款</p>
  162. </div>
  163. </div>-->
  164. <div class="orderInfoBox">
  165. <!-- 左边内容 -->
  166. <div class="leftInfoBox">
  167. <!-- 订单名字 -->
  168. <div class="orderNameBox eleBox">
  169. <div class="orNameFlex">
  170. <h5 class="orName">#Order Information</h5>
  171. <p class="orTime">Created At:{$order['create_time']}</p>
  172. </div>
  173. <div class="orStList">
  174. <div class="orStItem paid">
  175. <span></span>
  176. <p>Paid</p>
  177. </div>
  178. <div class="orStItem shipped">
  179. <span></span>
  180. <p>To be shipped</p>
  181. </div>
  182. </div>
  183. </div>
  184. <!-- 订单商品 -->
  185. <div class="orderGoodsBox eleBox">
  186. <div class="ogTeFlex">
  187. <p class="ogTitle">Listing</p>
  188. <div class="ogMarkButton">Pay With PayPal</div>
  189. </div>
  190. <p class="ogTips">
  191. Your goods will be shipped in 2 3days
  192. </p>
  193. {foreach $order['goods'] as $goods}
  194. <div class="ogGoodsInfo" data-id="{$goods['goods_id']}"
  195. order-goods-id="{$goods['order_goods_id']}">
  196. <div class="ogImgBox">
  197. <img src="{$goods['goods_image']}"
  198. alt="">
  199. </div>
  200. <div class="ogTitleBox">
  201. <p class="ogTitle">{$goods['goods_name']}</p>
  202. <p class="ogSpecs"></p>
  203. </div>
  204. <p class="ogPr">${$goods['goods_price']}x{$goods['total_num']}</p>
  205. <p class="ogToPr">${$goods['total_price']}</p>
  206. <!-- 评价 -->
  207. {eq name="order['receipt_status']" value="20"}
  208. <div class="evaluate">Evaluate</div>
  209. {/eq}
  210. </div>
  211. {/foreach}
  212. </div>
  213. <!-- 支付状态 -->
  214. <div class="paymentInfoBox eleBox">
  215. <div class="opTeFlex">
  216. <p class="opTitle">Bill</p>
  217. <!-- <div class="opMarkButton">标记为已付款</div>-->
  218. </div>
  219. <div class="opInfoBox">
  220. <div class="opInfoItem">
  221. <p class="opIKey">Express</p>
  222. <p class="opIValue">$0.00</p>
  223. </div>
  224. <div class="opInfoItem">
  225. <p class="opIKey">Tax</p>
  226. <p class="opIValue">$0.00</p>
  227. </div>
  228. <div class="opInfoItem">
  229. <p class="opIKey">Total</p>
  230. <p class="opIValue">${$order['total_price']}</p>
  231. </div>
  232. <div class="opInfoItem">
  233. <p class="opIKey">Paid</p>
  234. <p class="opIValue">${$order['pay_price']}</p>
  235. </div>
  236. </div>
  237. </div>
  238. <!-- 物流信息 -->
  239. <div class="logisticsBox eleBox">
  240. <div class="logsTeFlex">
  241. <p class="logsTitle">物流信息</p>
  242. <div class="openButton">
  243. <img src="/assets/index/asstes/icon/slt.png" alt="">
  244. </div>
  245. </div>
  246. <div class="logsInfo openBox">
  247. <div class="logList">
  248. <div class="logsLink"></div>
  249. <!-- 物流天数据 -->
  250. <div class="logItem">
  251. <p class="logTime">2024.03.11</p>
  252. <!-- 物流当天信息 -->
  253. <div class="logSunItem">
  254. <p class="dic"></p>
  255. <p class="logSunText">
  256. <span class="sunTime">2024-03-11 12:24</span>
  257. <span class="sunStTe">订单已完成</span>
  258. <span class="sunStTips">自动完成订单,交易关闭</span>
  259. </p>
  260. </div>
  261. <div class="logSunItem">
  262. <p class="dic"></p>
  263. <p class="logSunText">
  264. <span class="sunTime">2024-03-11 12:24</span>
  265. <span class="sunStTe">订单已完成</span>
  266. <span class="sunStTips">自动完成订单,交易关闭</span>
  267. </p>
  268. </div>
  269. </div>
  270. <div class="logItem">
  271. <p class="logTime">2024.03.11</p>
  272. <!-- 物流当天信息 -->
  273. <div class="logSunItem">
  274. <p class="dic"></p>
  275. <p class="logSunText">
  276. <span class="sunTime">2024-03-11 12:24</span>
  277. <span class="sunStTe">订单已完成</span>
  278. <span class="sunStTips">自动完成订单,交易关闭</span>
  279. </p>
  280. </div>
  281. <div class="logSunItem">
  282. <p class="dic"></p>
  283. <p class="logSunText">
  284. <span class="sunTime">2024-03-11 12:24</span>
  285. <span class="sunStTe">订单已完成</span>
  286. <span class="sunStTips">自动完成订单,交易关闭</span>
  287. </p>
  288. </div>
  289. </div>
  290. </div>
  291. </div>
  292. </div>
  293. </div>
  294. <!-- 右边内容 -->
  295. <div class="rightInfoBox">
  296. <!-- 客户信息 -->
  297. <div class="customInfo eleBox">
  298. <div class="cusTeFlex">
  299. <p class="cusTeTitle">客户信息</p>
  300. <div class="openButton">
  301. <img src="/assets/index/asstes/icon/slt.png" alt="">
  302. </div>
  303. </div>
  304. <div class="cusInfoBox openBox">
  305. <div class="cusItem">
  306. <p class="cusKey">Name</p>
  307. <p class="cusValue">{$order['address']['name']} {$order['address']['last_name']}</p>
  308. </div>
  309. <!-- <div class="cusItem">
  310. <p class="cusKey">电子邮件地址</p>
  311. <p class="cusValue">124345213@163.com</p>
  312. </div>-->
  313. <div class="cusItem">
  314. <p class="cusKey">Phone Number</p>
  315. <p class="cusValue">{$order['address']['phone']}</p>
  316. </div>
  317. </div>
  318. </div>
  319. <!-- 送货地址 -->
  320. <div class="addressBox eleBox">
  321. <div class="addTeFlex">
  322. <p class="addTeTitle">送货地址</p>
  323. <div class="openButton">
  324. <img src="/assets/index/asstes/icon/slt.png" alt="">
  325. </div>
  326. </div>
  327. <div class="addressInfo openBox">
  328. <div class="addInfoItem">
  329. <p class="aiKey">First Name</p>
  330. <p class="aiValue">{$orderAddress['name']}</p>
  331. </div>
  332. <div class="addInfoItem">
  333. <p class="aiKey">Last Name</p>
  334. <p class="aiValue">{$orderAddress['last_name']}</p>
  335. </div>
  336. <!-- <div class="addInfoItem">-->
  337. <!-- <p class="aiKey">公司</p>-->
  338. <!-- <p class="aiValue">亚马逊</p>-->
  339. <!-- </div>-->
  340. <div class="addInfoItem">
  341. <p class="aiKey">Phone Number</p>
  342. <p class="aiValue">{$orderAddress['phone']}</p>
  343. </div>
  344. <div class="addInfoItem">
  345. <p class="aiKey">Street</p>
  346. <p class="aiValue">{$orderAddress['detail']}</p>
  347. </div>
  348. <!-- <div class="addInfoItem">-->
  349. <!-- <p class="aiKey">公寓,别至</p>-->
  350. <!-- <p class="aiValue">XXXXXXXXXX</p>-->
  351. <!-- </div>-->
  352. <div class="addInfoItem">
  353. <p class="aiKey">State</p>
  354. <p class="aiValue">{$orderAddress['region']['region']}</p>
  355. </div>
  356. <div class="addInfoItem">
  357. <p class="aiKey">Country</p>
  358. <p class="aiValue">US</p>
  359. </div>
  360. <!-- <div class="addInfoItem">-->
  361. <!-- <p class="aiKey">区域</p>-->
  362. <!-- <p class="aiValue">XXXXXXXXXX</p>-->
  363. <!-- </div>-->
  364. <div class="addInfoItem">
  365. <p class="aiKey">Zip Code</p>
  366. <p class="aiValue">{$orderAddress['zip_code']}</p>
  367. </div>
  368. </div>
  369. </div>
  370. </div>
  371. </div>
  372. </div>
  373. </div>
  374. </section>
  375. </main>
  376. <!-- 底部 -->
  377. <footer class="footerContainer" id="footerContainer">
  378. <section class="sectionContainer">
  379. <div class="elementorContainer">
  380. <div class="footerConter">
  381. <div class="leftText">
  382. <p class="ltK">NEWALETTER</p>
  383. <p class="ltV">Sign up for the Free Shipping Vapes</p>
  384. </div>
  385. <div class="footerInuptBox">
  386. <img class="mailIcon" src="/assets/index/asstes/icon/mailIcon.png" alt="">
  387. <input class="footerInupt" type="text">
  388. <img class="arrowIcon" src="/assets/index/asstes/icon/arrowIcon.png" alt="">
  389. </div>
  390. <div class="footerIconContainer">
  391. <div class="footerIconList">
  392. <a href="#">
  393. <div class="footerIconItem">
  394. <img src="/assets/index/asstes/icon/whatsapp.png" alt="">
  395. </div>
  396. </a>
  397. <a href="#">
  398. <div class="footerIconItem">
  399. <img src="/assets/index/asstes/icon/facebook.png" alt="">
  400. </div>
  401. </a>
  402. <a href="#">
  403. <div class="footerIconItem">
  404. <img src="/assets/index/asstes/icon/instagram.png" alt="">
  405. </div>
  406. </a>
  407. </div>
  408. <div class="footerVlsaImg">
  409. <a href="#">
  410. <div class="footerVlsaItem">
  411. <img src="https://img2.baidu.com/it/u=1367821108,121397947&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=500"
  412. alt="">
  413. </div>
  414. </a>
  415. <a href="#">
  416. <div class="footerVlsaItem">
  417. <img src="https://img2.baidu.com/it/u=1367821108,121397947&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=500"
  418. alt="">
  419. </div>
  420. </a>
  421. <a href="#">
  422. <div class="footerVlsaItem">
  423. <img src="https://img2.baidu.com/it/u=1367821108,121397947&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=500"
  424. alt="">
  425. </div>
  426. </a>
  427. </div>
  428. </div>
  429. </div>
  430. </div>
  431. </section>
  432. <section class="sectionContainer warningContainer">
  433. <div class="elementorContainer">
  434. <div class="warningBox">
  435. <p class="warningText">WARNING: Our products contain nicotine, a poisonous and addictive substance.
  436. Our products are only intended for committed smokers of legal smoking age and not by
  437. non-smokers, children, women who are pregnant or may become pregnant or any person with an
  438. elevated risk of, or preexisting condition of, any medical condition which includes, but is not
  439. limited to, heart disease, diabetes, high blood pressure or asthma. If you experience any side
  440. effects or possible side effects, stop using the product immediately and consult a physician.
  441. Product may be poisonous if orally ingested. Our products are not smoking cessation products and
  442. have not been tested or guaranteed as such. Our products have not been evaluated by the Food and
  443. Drug Administration nor is it intended to treat, prevent or cure any disease or condition. For
  444. their protection, please keep out of reach of children and pets. Read our terms of use page
  445. before purchasing our products.</p>
  446. </div>
  447. </div>
  448. </section>
  449. </footer>
  450. <!-- 年龄提示层 -->
  451. <section class="maskContainer">
  452. <div class="ageReminderBox">
  453. <img class="ageReminderBack"
  454. src="https://img1.baidu.com/it/u=3449617615,1431463931&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1709485200&t=489bafcac7c5bebed91cf50c14356269"
  455. alt="">
  456. <div class="ageReminderInfo">
  457. <h3>ARE YOU OF LEAAL SMOKIND AGE?</h3>
  458. <div class="ageReminderButBox">
  459. <div class="ageRBut ageReminderNo"><span>NO</span></div>
  460. <div class="ageRBut ageReminderYes"><span>Yes, I am 21+</span></div>
  461. </div>
  462. </div>
  463. </div>
  464. </section>
  465. <div id="loadingModel">
  466. <div class="loadingBox">
  467. <img src="/assets/index/asstes/icon/loading.gif" alt="Jumping to paypal.">
  468. </div>
  469. </div>
  470. <div id="toastContainer"></div>
  471. <!-- 评价弹窗 -->
  472. <div id="evaluateModal">
  473. <div class="evaluateBox">
  474. <div class="evaluateItem">
  475. <p class="evaluateTitle">Score:</p>
  476. <div class="starContainer">
  477. <div class="starItem">
  478. <img class="star" src="/assets/index/asstes/icon/star.png" alt="">
  479. <img class="selStar" src="/assets/index/asstes/icon/selStar.png" alt="">
  480. </div>
  481. <div class="starItem">
  482. <img class="star" src="/assets/index/asstes/icon/star.png" alt="">
  483. <img class="selStar" src="/assets/index/asstes/icon/selStar.png" alt="">
  484. </div>
  485. <div class="starItem">
  486. <img class="star" src="/assets/index/asstes/icon/star.png" alt="">
  487. <img class="selStar" src="/assets/index/asstes/icon/selStar.png" alt="">
  488. </div>
  489. <div class="starItem">
  490. <img class="star" src="/assets/index/asstes/icon/star.png" alt="">
  491. <img class="selStar" src="/assets/index/asstes/icon/selStar.png" alt="">
  492. </div>
  493. <div class="starItem">
  494. <img class="star" src="/assets/index/asstes/icon/star.png" alt="">
  495. <img class="selStar" src="/assets/index/asstes/icon/selStar.png" alt="">
  496. </div>
  497. </div>
  498. </div>
  499. <div class="evaluateItem">
  500. <div class="textareaBox">
  501. <textarea id="evaluateTextarea" placeholder="评价一下吧"></textarea>
  502. </div>
  503. </div>
  504. <div class="evaluateBotBox">
  505. <div id="evaluateBot">submit</div>
  506. </div>
  507. </div>
  508. <div id="closeEvaluateModal"></div>
  509. </div>
  510. </body>
  511. <script src="/assets/index/js/jquery-1.12.0.js"></script>
  512. <script src="/assets/index/js/flexible.js"></script>
  513. <script src="/assets/index/js/public.js?t=11"></script>
  514. <script src="/assets/index/js/swiper.js?t=6"></script>
  515. <script src="/assets/index/js/jquery.lazyload.js"></script>
  516. <script>
  517. $(document).ready(function () {
  518. var orderId = "{$order['order_id']}";
  519. console.log('orderId::', orderId)
  520. var payStatus = "{$order['pay_status']}";
  521. console.log('payStatus::', payStatus)
  522. $('#ogMarkButton').hide(0)
  523. if (payStatus === "10") {
  524. $('#ogMarkButton').show(0)
  525. }
  526. //触屏事件 || 点击事件
  527. const tap = "ontouchstart" in window ? "touchstart" : "click";
  528. //返回
  529. $(".odTitleBox").on(tap, function () {
  530. if (window.history.length > 1) {
  531. // 返回上一页
  532. window.history.back();
  533. } else {
  534. //跳转首页
  535. window.location.replace('/index/index/index.html');
  536. }
  537. });
  538. $(".openButton").on(tap, function () {
  539. const parentEle = $(this).closest('.eleBox')
  540. console.log(parentEle)
  541. const openBoxEle = parentEle.find(".openBox")
  542. console.log(openBoxEle)
  543. openBoxEle.stop().slideToggle(80);
  544. });
  545. //初始化菜单选中状态
  546. function initNavState() {
  547. const url = window.location.href;
  548. const searchParams = new URLSearchParams(new URL(url).search);
  549. const orderType = searchParams.get("orderType");
  550. //订单中心菜单列表
  551. const orderNavItemList = $(".orderNavItem")
  552. //是否存在匹配项
  553. let exist = false
  554. if (orderNavItemList) {
  555. orderNavItemList.each(function (index, element) {
  556. const type = $(this).attr('data-type');
  557. if (type === orderType) {
  558. $(this).addClass("active")
  559. exist = true
  560. }
  561. })
  562. }
  563. //如果未匹配中默认选中待发货
  564. if (!exist) {
  565. $('#treat').addClass("active")
  566. }
  567. }
  568. //支付方法
  569. const orderPayment = (params) => {
  570. return new Promise(function (resolve, reject) {
  571. $.ajax({
  572. url: "/index/order/pay?payType=30&orderId=" + orderId,
  573. method: "POST",
  574. data: JSON.stringify(params),
  575. headers: {
  576. "Content-Type": "application/json",
  577. "storeId": "10001",
  578. "platform": "H5",
  579. // "Access-Token": vapesToken
  580. },
  581. dataType: "json",
  582. success: function (response) {
  583. resolve(response);
  584. },
  585. error: function (xhr, status, error) {
  586. reject(error);
  587. }
  588. });
  589. });
  590. }
  591. //支付按钮点击
  592. $(".ogMarkButton").on(tap, async function () {
  593. console.log("paypaing")
  594. $("#loadingModel").show(0)
  595. const params = {}
  596. const res = await orderPayment(params)
  597. const {status, message, data} = res || {}
  598. if (status === 200 || status === "200") {
  599. window.open(data.payment.approval_link, "_blank");
  600. var interId = setInterval(function () {
  601. fetchOrder(interId);
  602. }, 3000)
  603. } else if (status === 401 || status === "401") {
  604. window.location.replace('../passport/logIn.html')
  605. } else {
  606. showToast(message)
  607. }
  608. });
  609. function fetchOrder(interId) {
  610. $.get('/index/order/detail?orderId=' + orderId, function (res) {
  611. console.log(res.data.order.pay_status);
  612. if (res.status == 200 && res.data.order.pay_status == 20) {
  613. clearInterval(interId);
  614. $("#loadingModel").hide(0);
  615. window.location.replace('/index/user/orderDetails.html?orderId=' + orderId)
  616. }
  617. })
  618. }
  619. $(".orderNavItem").on(tap, function () {
  620. const type = $(this).attr('data-type');
  621. window.location.replace(`/index/user/order.html?orderType=${type}`)
  622. });
  623. initNavState()
  624. //商品id(评价记录)
  625. let goodsId
  626. let orderGoodsId
  627. //商品评分
  628. let score = 0
  629. //商品评价点击
  630. $(".evaluate").on(tap, function (event) {
  631. event.preventDefault();
  632. const parentEle = $(this).closest('.ogGoodsInfo')
  633. goodsId = parentEle.attr("data-id")
  634. orderGoodsId = parentEle.attr("order-goods-id")
  635. $('#evaluateTextarea').val("")
  636. $(".starItem").removeClass('active');
  637. $("#evaluateModal").show(0)
  638. });
  639. $(".starItem").on(tap, function (event) {
  640. event.preventDefault();
  641. const _this = $(this)
  642. score = _this.index() + 1;
  643. _this.addClass('active');
  644. _this.prevAll().addClass('active');
  645. _this.nextAll().removeClass('active');
  646. });
  647. //输入框聚焦
  648. $('#evaluateTextarea').focus(function () {
  649. $(this).addClass('active');
  650. });
  651. //输入框失焦
  652. $('#evaluateTextarea').blur(function () {
  653. $(this).removeClass('active');
  654. });
  655. //关闭评价
  656. $('#closeEvaluateModal').on(tap, function () {
  657. $("#evaluateModal").hide(0)
  658. });
  659. //提交评价
  660. $('#evaluateBot').on(tap, function () {
  661. const evaluateTextareaEle = $('#evaluateTextarea')
  662. const textareaValue = evaluateTextareaEle.val()
  663. if (!textareaValue || textareaValue == "") {
  664. evaluateTextareaEle.focus()
  665. return
  666. }
  667. console.log("评价内容", textareaValue)
  668. console.log("商品id", goodsId)
  669. console.log("商品orderGoodsId", orderGoodsId)
  670. console.log("score", score)
  671. var dp = {
  672. orderId: orderId,
  673. form: [{
  674. order_goods_id: orderGoodsId,
  675. goods_id: goodsId,
  676. score: score * 10,
  677. content: textareaValue,
  678. }]
  679. }
  680. $.ajax({
  681. url: "/index/comment/submit",
  682. headers: {platform: 'H5'},
  683. dataType: 'json',
  684. data: JSON.stringify(dp),
  685. type: "POST",
  686. contentType: 'application/json',
  687. success: function (obj) {
  688. //注册成功后进入
  689. if (obj.status === 200 || obj.status === '200') {
  690. showToast("Successful")
  691. $("#evaluateModal").hide(0)
  692. goodsId = null
  693. } else if (obj.status === 401 || obj.status === '401') {
  694. window.location.replace('../passport/logIn.html')
  695. } else {
  696. showToast('Something wrong,please try again later')
  697. }
  698. }
  699. })
  700. });
  701. /**
  702. * 吐司提示
  703. * @param message 消息
  704. * @returns
  705. */
  706. function showToast(message) {
  707. var toastElement = $('#toastContainer');
  708. toastElement.text(message);
  709. toastElement.stop(true, true).fadeIn(200).delay(2000).fadeOut(200);
  710. }
  711. })
  712. </script>
  713. </html>