shoppingCart.html 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781
  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/shoppingCart.css?t=5">
  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="headNavContainer">
  35. <nav class="headNavItem active">
  36. <h2 class="headNavTitle">NEW VAPES</h2>
  37. <p class="back"></p>
  38. </nav>
  39. <!-- <nav class="headNavItem">
  40. <h2 class="headNavTitle">DISPOSABLES</h2>
  41. <p class="back"></p>
  42. </nav>-->
  43. </div>
  44. <div class="headIconContainer">
  45. <!-- 购物车 -->
  46. <a href="/index/cart/shoppingCart.html">
  47. <div class="headIconItem shoppingCartIcon">
  48. <img src="/assets/index/asstes/icon/shoppingCart.png" alt="shoppingCart" tabindex="shoppingCart">
  49. </div>
  50. </a>
  51. <!-- 收藏 -->
  52. <!-- <div class="headIconItem collectIcon">-->
  53. <!-- <img src="/assets/index/asstes/icon/collect.png" alt="collect" tabindex="collect">-->
  54. <!-- </div>-->
  55. <!-- 个人中心 -->
  56. <a href="/index/user/order.html">
  57. <div class="headIconItem userIcon">
  58. <img src="/assets/index/asstes/icon/user.png" alt="user" tabindex="user">
  59. </div>
  60. </a>
  61. </div>
  62. </div>
  63. <!-- 移动端头部 -->
  64. <div id="mobileEndHeader">
  65. <div class="mobileEndHeaderConten">
  66. <a href="../index/index.html">
  67. <h1 class="mobileLogo">
  68. <img src="/assets/index/asstes/icon/logo.png" alt="Free Shipping Vapes" title="Free Shipping Vapes">
  69. </h1>
  70. </a>
  71. <div class="mobileUserIconList">
  72. <div class="mobileUserIcon userIcon">
  73. <img src="/assets/index/asstes/icon/user.png" alt="user" tabindex="user">
  74. </div>
  75. </div>
  76. <div class="mobileMenu">
  77. <p id="mobileMenuBot">
  78. <span id="mobileMenuLink"></span>
  79. </p>
  80. </div>
  81. </div>
  82. <!-- 移动端菜单 -->
  83. <section class="mobileMenuFixed">
  84. <div class="mobileMenuItem active">
  85. <a href="/index/index/index.html">
  86. <h2 class="menuItemTitle">NEW VAPES</h2>
  87. </a>
  88. </div>
  89. <!-- <div class="mobileMenuItem">
  90. <a href="#">
  91. <h2 class="menuItemTitle">DISPOSABLES</h2>
  92. </a>
  93. </div>-->
  94. <div class="mobileMenuItem">
  95. <a href="/index/cart/shoppingCart.html">
  96. <h2 class="menuItemTitle shoppingCartIcon">Shopping Cart</h2>
  97. </a>
  98. </div>
  99. <!-- <div class="mobileMenuItem">
  100. <h2 class="menuItemTitle collectIcon">Collect</h2>
  101. </div>-->
  102. <div class="mobileMenuItem">
  103. <a href="/index/user/personal.html">
  104. <h2 class="menuItemTitle userIcon">Personal</h2>
  105. </a></div>
  106. </section>
  107. </div>
  108. </header>
  109. <main id="main">
  110. <section class="pageContainer">
  111. <h1 class="pageTitle">Shopping Cart</h1>
  112. <div class="pageDataBox">
  113. <!-- 商品模块 -->
  114. <section class="productConatiner">
  115. <h3 class="productModelTitle">Product</h3>
  116. <div class="productList">
  117. {foreach $list as $cart}
  118. <div class="productItem" data-id="{$cart['id']}" goods-id="{$cart['goods']['goods_id']}"
  119. goods-sku-id="{$cart['goods']['skuInfo']['goods_sku_id']}"
  120. data-goods-num="{$cart['goods_num']}">
  121. <div class="productImgBox">
  122. <img class="lazy" src="/assets/index/asstes/icon/transparent.png"
  123. data-original="{$cart['goods']['goods_image']}" alt="提示信息seo"
  124. title="提示信息seo">
  125. </div>
  126. <div class="productInfo">
  127. <div class="lfBox">
  128. <h2 class="productTitle">{$cart['goods']['goods_name']}</h2>
  129. <p class="specs">specs</p>
  130. </div>
  131. <div class="nunberBox">
  132. <p class="numberReduce">-</p>
  133. <p class="numberInput">{$cart['goods_num']}</p>
  134. <p class="numberAdd">+</p>
  135. </div>
  136. <p class="productPrice">${$cart['goods']['goods_price_min']}</p>
  137. <div class="productDelete">
  138. <img src="/assets/index/asstes/icon/productDelete.png" alt="">
  139. </div>
  140. </div>
  141. </div>
  142. {/foreach}
  143. </div>
  144. </section>
  145. <!-- 结算模块 -->
  146. <section class="windContainer">
  147. <div class="windTBox">
  148. <p class="lt">CART TOTALS</p>
  149. <p class="cartTotals"></p>
  150. </div>
  151. <div class="linkItem">
  152. <div class="windInfoBox">
  153. <p class="key">Subtotal</p>
  154. <p class="val">${$cartMoney}</p>
  155. </div>
  156. </div>
  157. <div class="mbItem">
  158. <div class="windInfoBox">
  159. <p class="key">Free Shipping</p>
  160. <p class="val">$0.00</p>
  161. </div>
  162. <!-- <div class="windInfoBox">-->
  163. <!-- <p class="key">Free Shipping</p>-->
  164. <!-- </div>-->
  165. </div>
  166. <div class="mbItem" id="addressInfo">
  167. <div class="windInfoBox">
  168. <div class="key">
  169. <p class="keyItem" id="fullNameText">{$fullName}</p>
  170. <p class="keyItem" id="contactNumberText">{$phone}</p>
  171. <p class="keyItem" id="emailText">{$email}</p>
  172. <p class="keyItem" id="addressText">{$full}</p>
  173. </div>
  174. </div>
  175. <div class="windInfoBox">
  176. <p class="key" id="changeAddress">Change address</p>
  177. </div>
  178. </div>
  179. <!-- 填写地址模块 -->
  180. <div id="addressContainer">
  181. <!-- 名字 -->
  182. <div class="addressItem">
  183. <p class="addItmeTitle">First Name:</p>
  184. <input class="addInput" id="userName" type="text" placeholder="First Name">
  185. </div>
  186. <div class="addressItem">
  187. <p class="addItmeTitle">Last Name:</p>
  188. <input class="addInput" id="lastName" type="text" placeholder="Last Name">
  189. </div>
  190. <!-- 手机号码 -->
  191. <div class="addressItem">
  192. <p class="addItmeTitle">Contact Number:</p>
  193. <input class="addInput" id="phoneNumber" type="text" placeholder="Contact Number">
  194. </div>
  195. <!-- 地区 -->
  196. <div class="addressItem">
  197. <p class="addItmeTitle">State:</p>
  198. <select id="areaSelect">
  199. <option value="0" selected>--Choose A state--</option>
  200. {foreach $states50 as $state}
  201. <option value="{$state['id']}">{$state['name']}</option>
  202. {/foreach}
  203. </select>
  204. </div>
  205. <!-- 详情地址 -->
  206. <div class="addressItem">
  207. <p class="addItmeTitle">Address:</p>
  208. <input class="addInput" id="address" type="text" placeholder="Address">
  209. </div>
  210. <!-- 邮箱 -->
  211. <div class="addressItem">
  212. <p class="addItmeTitle">Mailbox:</p>
  213. <input type="text" id="mailbox" class="addInput" placeholder="Mailbox">
  214. </div>
  215. <!-- 邮政编码 -->
  216. <div class="addressItem">
  217. <p class="addItmeTitle">Zip Code:</p>
  218. <input class="addInput" id="postalCode" type="text" placeholder="Zip Code">
  219. </div>
  220. <div id="addressButModel">
  221. <div class="addressButtonBox">
  222. <div id="addCancel">Cancel</div>
  223. <div id="addSave">Save</div>
  224. </div>
  225. </div>
  226. </div>
  227. <!-- <div class="mbItem">
  228. <div class="windInfoBox freeshipping">
  229. <p class="key">Free shipping</p>
  230. </div>
  231. <div class="windInfoBox">
  232. <p class="key">$199.99</p>
  233. </div>
  234. </div>-->
  235. <div class="totalBox">
  236. <p class="totalT">Total</p>
  237. <p class="totalVal">${$cartMoney}</p>
  238. </div>
  239. <div class="mbItem">
  240. <div class="windInfoBox freeshipping">
  241. {if $payByPoints}
  242. <p class="key">You can redeem this order for free through points!</p>
  243. {/if}
  244. </div>
  245. <div class="windInfoBox">
  246. <p class="key">Your Points:{$points}</p>
  247. </div>
  248. </div>
  249. <div class="payPalButton">
  250. <span>PayPal</span>
  251. </div>
  252. <div class="orBox">
  253. <div class="link"></div>
  254. <p class="or">OR</p>
  255. <div class="link"></div>
  256. </div>
  257. <div class="checkoutButton">
  258. <span>Redemption using Points</span>
  259. </div>
  260. </section>
  261. </div>
  262. </section>
  263. </main>
  264. <!-- 底部 -->
  265. <footer class="footerContainer" id="footerContainer">
  266. <section class="sectionContainer">
  267. <div class="elementorContainer">
  268. <div class="footerConter">
  269. <div class="leftText">
  270. <p class="ltK">NEWALETTER</p>
  271. <p class="ltV">Sign up for the Free Shipping Vapes</p>
  272. </div>
  273. <div class="footerInuptBox">
  274. <img class="mailIcon" src="/assets/index/asstes/icon/mailIcon.png" alt="">
  275. <input class="footerInupt" type="text">
  276. <img class="arrowIcon" src="/assets/index/asstes/icon/arrowIcon.png" alt="">
  277. </div>
  278. <div class="footerIconContainer">
  279. <div class="footerIconList">
  280. <a href="#">
  281. <div class="footerIconItem">
  282. <img src="/assets/index/asstes/icon/whatsapp.png" alt="">
  283. </div>
  284. </a>
  285. <a href="#">
  286. <div class="footerIconItem">
  287. <img src="/assets/index/asstes/icon/facebook.png" alt="">
  288. </div>
  289. </a>
  290. <a href="#">
  291. <div class="footerIconItem">
  292. <img src="/assets/index/asstes/icon/instagram.png" alt="">
  293. </div>
  294. </a>
  295. </div>
  296. <div class="footerVlsaImg">
  297. <a href="#">
  298. <div class="footerVlsaItem">
  299. <img src="https://img2.baidu.com/it/u=1367821108,121397947&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=500"
  300. alt="">
  301. </div>
  302. </a>
  303. <a href="#">
  304. <div class="footerVlsaItem">
  305. <img src="https://img2.baidu.com/it/u=1367821108,121397947&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=500"
  306. alt="">
  307. </div>
  308. </a>
  309. <a href="#">
  310. <div class="footerVlsaItem">
  311. <img src="https://img2.baidu.com/it/u=1367821108,121397947&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=500"
  312. alt="">
  313. </div>
  314. </a>
  315. </div>
  316. </div>
  317. </div>
  318. </div>
  319. </section>
  320. <section class="sectionContainer warningContainer">
  321. <div class="elementorContainer">
  322. <div class="warningBox">
  323. <p class="warningText">WARNING: Our products contain nicotine, a poisonous and addictive substance.
  324. Our products are only intended for committed smokers of legal smoking age and not by
  325. non-smokers, children, women who are pregnant or may become pregnant or any person with an
  326. elevated risk of, or preexisting condition of, any medical condition which includes, but is not
  327. limited to, heart disease, diabetes, high blood pressure or asthma. If you experience any side
  328. effects or possible side effects, stop using the product immediately and consult a physician.
  329. Product may be poisonous if orally ingested. Our products are not smoking cessation products and
  330. have not been tested or guaranteed as such. Our products have not been evaluated by the Food and
  331. Drug Administration nor is it intended to treat, prevent or cure any disease or condition. For
  332. their protection, please keep out of reach of children and pets. Read our terms of use page
  333. before purchasing our products.</p>
  334. </div>
  335. </div>
  336. </section>
  337. </footer>
  338. <!-- 年龄提示层 -->
  339. <section class="maskContainer">
  340. <div class="ageReminderBox">
  341. <img class="ageReminderBack"
  342. 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"
  343. alt="">
  344. <div class="ageReminderInfo">
  345. <h3>ARE YOU OF LEAAL SMOKING AGE?</h3>
  346. <div class="ageReminderButBox">
  347. <div class="ageRBut ageReminderNo"><span>NO</span></div>
  348. <div class="ageRBut ageReminderYes"><span>Yes, I am 21+</span></div>
  349. </div>
  350. </div>
  351. </div>
  352. </section>
  353. <!-- 年龄提示层 -->
  354. <section class="maskContainer">
  355. <div class="ageReminderBox">
  356. <img class="ageReminderBack"
  357. 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"
  358. alt="">
  359. <div class="ageReminderInfo">
  360. <h3>ARE YOU OF LEAAL SMOKING AGE?</h3>
  361. <div class="ageReminderButBox">
  362. <div class="ageRBut ageReminderNo"><span>NO</span></div>
  363. <div class="ageRBut ageReminderYes"><span>Yes, I am 21+</span></div>
  364. </div>
  365. </div>
  366. </div>
  367. </section>
  368. <div id="loadingModel">
  369. <div class="loadingBox">
  370. <img src="/assets/index/asstes/icon/loading.gif" alt="Jumping to paypal.">
  371. </div>
  372. </div>
  373. <div id="toastContainer"></div>
  374. </body>
  375. <script src="/assets/index/js/jquery-1.12.0.js"></script>
  376. <script src="/assets/index/js/flexible.js"></script>
  377. <script src="/assets/index/js/public.js?t=11"></script>
  378. <script src="/assets/index/js/swiper.js?t=6"></script>
  379. <script src="/assets/index/js/jquery.lazyload.js"></script>
  380. <script>
  381. $(document).ready(function () {
  382. var addressId = {$addressId};
  383. var payByPoints = "{$payByPoints}";
  384. //console.log(payByPoints, payByPoints)
  385. //默认地址
  386. const defaultAddressInfo = {
  387. userName: "{$name}",
  388. lastName: "{$lastName}",
  389. phoneNumber: "{$phone}",
  390. areaSelect: "{$regionId}",
  391. address: "{$detail}",
  392. mailbox: "{$email}",
  393. postalCode: "{$zipCode}"
  394. }
  395. // 是否已填写过地址
  396. if (addressId) {
  397. var isAddress = true
  398. } else {
  399. var isAddress = false
  400. }
  401. //初始化地址模块标签显示隐藏
  402. function initAddressLabel() {
  403. //是否已填写过地址、显示默认地址,隐藏填写地址表单
  404. if (isAddress) {
  405. $("#addressInfo").show(0)
  406. $("#addressContainer").hide(0)
  407. } else {
  408. $("#addressInfo").hide(0)
  409. $("#addressContainer").show(0)
  410. $("#addressButModel").show(0)
  411. }
  412. }
  413. //初始化表单
  414. function initAddressForm() {
  415. const {userName, lastName, phoneNumber, areaSelect, address, mailbox, postalCode} = defaultAddressInfo || {}
  416. userName && $("#userName").val(userName)
  417. lastName && $("#lastName").val(lastName)
  418. phoneNumber && $("#phoneNumber").val(phoneNumber)
  419. areaSelect && $("#areaSelect").val(areaSelect)
  420. address && $("#address").val(address)
  421. mailbox && $("#mailbox").val(mailbox)
  422. postalCode && $("#postalCode").val(postalCode)
  423. }
  424. initAddressLabel()
  425. initAddressForm()
  426. //更改地址,需显示填写地址表单、取消保存按钮
  427. $("#changeAddress").on(tap, async function () {
  428. $("#addressContainer").show(0)
  429. $("#addressButModel").show(0)
  430. });
  431. //取消更改
  432. $("#addCancel").on(tap, async function () {
  433. $("#addressContainer").hide(0)
  434. });
  435. // 添加地址
  436. function addAddress() {
  437. const userNameEle = $("#userName")
  438. const lastNameEle = $("#lastName")
  439. const phoneNumberEle = $("#phoneNumber")
  440. const areaSelectEle = $("#areaSelect")
  441. const addressEle = $("#address")
  442. const mailboxEle = $("#mailbox")
  443. const postalCodeEle = $("#postalCode")
  444. // 名字
  445. const userName = userNameEle.val()
  446. const lastName = lastNameEle.val()
  447. // 手机号码
  448. const phoneNumber = phoneNumberEle.val()
  449. // 地区
  450. const areaSelect = areaSelectEle.val()
  451. // 详情地址
  452. const address = addressEle.val()
  453. // 邮箱
  454. const mailbox = mailboxEle.val()
  455. // 邮政编码
  456. const postalCode = postalCodeEle.val()
  457. if (!userName || userName === "") {
  458. userNameEle.focus()
  459. return
  460. }
  461. if (!phoneNumber || phoneNumber === "") {
  462. phoneNumberEle.focus()
  463. return
  464. }
  465. if (!areaSelect || areaSelect === "") {
  466. areaSelectEle.focus()
  467. return
  468. }
  469. if (!address || address === "") {
  470. addressEle.focus()
  471. return
  472. }
  473. const params = {
  474. form: {
  475. name: userName,
  476. last_name: lastName,
  477. phone: phoneNumber,
  478. email: mailbox,
  479. region: [{label: '', value: 1}, {label: '', value: 2}, {label: areaSelect, value: areaSelect}],
  480. //mailbox,
  481. detail: address,
  482. zip_code: postalCode
  483. }
  484. }
  485. return new Promise(function (resolve, reject) {
  486. $.ajax({
  487. url: "/index/address/add",
  488. method: 'POST',
  489. data: JSON.stringify(params),
  490. headers: {
  491. 'Content-Type': 'application/json',
  492. 'storeId': '10001',
  493. 'platform': 'H5',
  494. },
  495. dataType: 'json',
  496. success: function (response) {
  497. resolve(response);
  498. },
  499. error: function (xhr, status, error) {
  500. reject(error);
  501. }
  502. });
  503. });
  504. }
  505. //保存更改
  506. $("#addSave").on(tap, async function () {
  507. const {data, status} = await addAddress()
  508. if (status === 200 || status === "200") {
  509. showToast('Success')
  510. setTimeout(function () {
  511. $("#addressInfo").show(0)
  512. addressId = data.address_id
  513. $("#addressText").text(data.full)
  514. $("#fullNameText").text(data.name + " " + data.last_name)
  515. $("#contactNumberText").text(data.phone)
  516. $("#emailText").text(data.email)
  517. $("#addressContainer").hide(0)
  518. }, 2000)
  519. } else {
  520. showToast('Something wrong.Try again later.')
  521. }
  522. });
  523. function showToast(message) {
  524. var toastElement = $('#toastContainer');
  525. toastElement.text(message);
  526. toastElement.stop(true, true).fadeIn(200).delay(2000).fadeOut(200);
  527. }
  528. //支付方法
  529. const orderPayment = (params) => {
  530. return new Promise(function (resolve, reject) {
  531. $.ajax({
  532. url: "/index/checkout/submit?payType=30&mode=cart&address_id=" + addressId,
  533. method: "POST",
  534. data: JSON.stringify(params),
  535. headers: {
  536. "Content-Type": "application/json",
  537. "storeId": "10001",
  538. "platform": "H5",
  539. // "Access-Token": vapesToken
  540. },
  541. dataType: "json",
  542. success: function (response) {
  543. resolve(response);
  544. },
  545. error: function (xhr, status, error) {
  546. reject(error);
  547. }
  548. });
  549. });
  550. }
  551. const orderPaymentPoints = (params) => {
  552. return new Promise(function (resolve, reject) {
  553. $.ajax({
  554. url: "/index/checkout/submit?payType=50&mode=cart&address_id=" + addressId,
  555. method: "POST",
  556. data: JSON.stringify(params),
  557. headers: {
  558. "Content-Type": "application/json",
  559. "storeId": "10001",
  560. "platform": "H5",
  561. // "Access-Token": vapesToken
  562. },
  563. dataType: "json",
  564. success: function (response) {
  565. resolve(response);
  566. },
  567. error: function (xhr, status, error) {
  568. reject(error);
  569. }
  570. });
  571. });
  572. }
  573. /**
  574. * 商品操作方法
  575. * @param _this $(this)
  576. * @param type 类型:add || reduce || delete
  577. * @returns
  578. */
  579. function productOperate(_this, type) {
  580. //商品id
  581. const productId = _this.closest(".productItem").attr("data-id");
  582. const goodsId = _this.closest(".productItem").attr("goods-id");
  583. const goodsSkuId = _this.closest(".productItem").attr("goods-sku-id");
  584. let goodsNum = parseInt(_this.closest(".productItem").attr("data-goods-num"));
  585. //console.log(productId, goodsId, goodsSkuId)
  586. //商品增加
  587. if (type === "add" || type === "reduce") {
  588. if (type === "add") {
  589. goodsNum += 1
  590. } else {
  591. goodsNum -= 1
  592. }
  593. $.ajax({
  594. url: "/index/cart/update?goodsId=" + goodsId + "&goodsSkuId=" + goodsSkuId + "&goodsNum=" + goodsNum,
  595. method: "POST",
  596. headers: {
  597. "Content-Type": "application/json",
  598. "storeId": "10001",
  599. "platform": "H5",
  600. "Accept": "*/*"
  601. // "Access-Token": vapesToken
  602. },
  603. dataType: "json",
  604. success: function (obj) {
  605. if (obj.status === 200 || obj.status === '200') {
  606. showToast("Successful")
  607. window.location.href = '../cart/shoppingCart';
  608. } else if (obj.status === 401 || obj.status === '401') {
  609. window.location.replace('../passport/logIn.html')
  610. } else {
  611. showToast(obj.message)
  612. }
  613. //window.location.replace( '/index/cart/shoppingCart.html')
  614. },
  615. error: function (xhr, status, error) {
  616. showToast("Please enter the quantity of products")
  617. //reject(error);
  618. }
  619. });
  620. return
  621. }
  622. //商品减少
  623. //商品删除
  624. if (type === "delete") {
  625. var params = {"cartIds": [productId]}
  626. console.log("商品删除")
  627. $.ajax({
  628. url: "/index/cart/clear",
  629. method: "POST",
  630. headers: {
  631. "Content-Type": "application/json",
  632. "storeId": "10001",
  633. "platform": "H5",
  634. // "Access-Token": vapesToken
  635. },
  636. data: JSON.stringify(params),
  637. dataType: "json",
  638. success: function (obj) {
  639. if (obj.status === 200 || obj.status === '200') {
  640. //showToast("Successful")
  641. window.location.href = '../cart/shoppingCart';
  642. } else if (obj.status === 401 || obj.status === '401') {
  643. window.location.replace('../passport/logIn.html')
  644. } else {
  645. showToast(obj.message)
  646. }
  647. },
  648. error: function (xhr, status, error) {
  649. reject(error);
  650. }
  651. });
  652. }
  653. }
  654. //支付
  655. $(".payPalButton").on(tap, async function () {
  656. console.log("paypaing")
  657. $("#loadingModel").show(0)
  658. // 支付之前先判断是否有默认地址
  659. if (!addressId) {
  660. showToast('No address')
  661. return
  662. // 先添加地址
  663. // const res = await addAddress()
  664. // addressId = res
  665. }
  666. const params = {
  667. //"cartIds": "10002",
  668. "delivery": 10,
  669. "address_id": addressId
  670. }
  671. const res = await orderPayment(params)
  672. const {status, message, data} = res || {}
  673. if (status === 200 || status === "200") {
  674. window.open(data.payment.approval_link, "_blank");
  675. var interId = setInterval(function () {
  676. fetchOrder(data.orderId, interId);
  677. }, 3000)
  678. } else if (status === 401 || status === "401") {
  679. window.location.replace('../passport/logIn.html')
  680. } else {
  681. showToast(message)
  682. }
  683. });
  684. function fetchOrder(orderId, interId) {
  685. $.get('/index/order/detail?orderId=' + orderId, function (res) {
  686. console.log(res.data.order.pay_status);
  687. if (res.status == 200 && res.data.order.pay_status == 20) {
  688. clearInterval(interId);
  689. $("#loadingModel").hide(0);
  690. window.location.replace('/index/user/orderDetails.html?orderId=' + orderId)
  691. }
  692. })
  693. }
  694. //支付
  695. $(".checkoutButton").on(tap, async function () {
  696. if (payByPoints !== '1'){
  697. showToast('Insufficient points!')
  698. return;
  699. }
  700. console.log("points")
  701. const params = {
  702. "delivery": 10,
  703. "address_id": addressId
  704. }
  705. $("#loadingModel").show(0)
  706. const res = await orderPaymentPoints(params)
  707. const {status, message, data} = res || {}
  708. if (status === 200 || status === "200") {
  709. $("#loadingModel").hide(0)
  710. showToast(message)
  711. setTimeout(function () {
  712. window.location.replace('/index/user/order.html')
  713. }, 3000)
  714. } else if (status === 401 || status === "401") {
  715. showToast('Login first!')
  716. setTimeout(function () {
  717. window.location.replace('../passport/logIn.html')
  718. }, 3000)
  719. //window.location.replace('../passport/logIn.html')
  720. } else {
  721. showToast(message)
  722. }
  723. });
  724. //商品减少
  725. $(".numberReduce").on(tap, function () {
  726. productOperate($(this), "reduce")
  727. })
  728. //商品增加
  729. $(".numberAdd").on(tap, function () {
  730. productOperate($(this), "add")
  731. })
  732. //商品删除
  733. $(".productDelete").on(tap, function () {
  734. productOperate($(this), "delete")
  735. })
  736. //前往购物车
  737. $(".shoppingCartIcon").on(tap, function () {
  738. window.location.href = "./shoppingCart.html"
  739. });
  740. })
  741. </script>
  742. </html>