|
|
@@ -15,7 +15,8 @@
|
|
|
<meta name="keywords" content="电子烟,关键字" />
|
|
|
<meta name="Description" content="网站描述" />
|
|
|
<title>购物车</title>
|
|
|
- <link rel="stylesheet" href="/assets/api/css/common.css?t=108">
|
|
|
+ <link rel="stylesheet" href="/assets/api/css/common.css?t=18">
|
|
|
+ <link rel="stylesheet" href="/assets/api/css/shoppingCart.css?t=5">
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
@@ -79,17 +80,13 @@
|
|
|
</div>
|
|
|
<!-- 移动端菜单 -->
|
|
|
<section class="mobileMenuFixed">
|
|
|
- <div class="mobileMenuItem active">
|
|
|
- <a href="#">
|
|
|
- <h2 class="menuItemTitle">NEW VAPES</h2>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
<div class="mobileMenuItem">
|
|
|
- <a href="#">
|
|
|
- <h2 class="menuItemTitle">DISPOSABLES</h2>
|
|
|
- </a>
|
|
|
+ <h2 class="menuItemTitle">NEW VAPES</h2>
|
|
|
</div>
|
|
|
<div class="mobileMenuItem">
|
|
|
+ <h2 class="menuItemTitle">DISPOSABLES</h2>
|
|
|
+ </div>
|
|
|
+ <div class="mobileMenuItem active">
|
|
|
<h2 class="menuItemTitle shoppingCartIcon">Shopping Cart</h2>
|
|
|
</div>
|
|
|
<div class="mobileMenuItem">
|
|
|
@@ -102,11 +99,110 @@
|
|
|
</div>
|
|
|
</header>
|
|
|
<main id="main">
|
|
|
- <button id="orderPaymentBut" style="width: 100px; height: 100px;">支付</button>
|
|
|
+ <section class="pageContainer">
|
|
|
+ <h1 class="pageTitle">Shopping Cart</h1>
|
|
|
+ <div class="pageDataBox">
|
|
|
+ <!-- 商品模块 -->
|
|
|
+ <section class="productConatiner">
|
|
|
+ <h3 class="productModelTitle">Product</h3>
|
|
|
+ <div class="productList">
|
|
|
+ <div class="productItem" data-id="购物车商品id1">
|
|
|
+ <div class="productImgBox">
|
|
|
+ <img class="lazy" src="/assets/api/asstes/icon/transparent.png"
|
|
|
+ data-original="https://www.buranshao.com/Content/Img/iqos3duo.jpg" alt="提示信息seo"
|
|
|
+ title="提示信息seo">
|
|
|
+ </div>
|
|
|
+ <div class="productInfo">
|
|
|
+ <div class="lfBox">
|
|
|
+ <h2 class="productTitle">AAAA VAPES</h2>
|
|
|
+ <p class="specs">specs</p>
|
|
|
+ </div>
|
|
|
+ <div class="nunberBox">
|
|
|
+ <p class="numberReduce">-</p>
|
|
|
+ <p class="numberInput">1</p>
|
|
|
+ <p class="numberAdd">+</p>
|
|
|
+ </div>
|
|
|
+ <p class="productPrice">$99.99</p>
|
|
|
+ <div class="productDelete">
|
|
|
+ <img src="/assets/api/asstes/icon/productDelete.png" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="productItem" data-id="购物车商品id2">
|
|
|
+ <div class="productImgBox">
|
|
|
+ <img class="lazy" src="/assets/api/asstes/icon/transparent.png"
|
|
|
+ data-original="https://www.buranshao.com/Content/Img/iqos3duo.jpg" alt="提示信息seo"
|
|
|
+ title="提示信息seo">
|
|
|
+ </div>
|
|
|
+ <div class="productInfo">
|
|
|
+ <div class="lfBox">
|
|
|
+ <h2 class="productTitle">AAAA VAPES</h2>
|
|
|
+ <p class="specs">specs</p>
|
|
|
+ </div>
|
|
|
+ <div class="nunberBox">
|
|
|
+ <p class="numberReduce">-</p>
|
|
|
+ <p class="numberInput">1</p>
|
|
|
+ <p class="numberAdd">+</p>
|
|
|
+ </div>
|
|
|
+ <p class="productPrice">$99.99</p>
|
|
|
+ <div class="productDelete">
|
|
|
+ <img src="/assets/api/asstes/icon/productDelete.png" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <!-- 结算模块 -->
|
|
|
+ <section class="windContainer">
|
|
|
+ <div class="windTBox">
|
|
|
+ <p class="lt">Add a coupon</p>
|
|
|
+ <p class="cartTotals">CART TOTALS</p>
|
|
|
+ </div>
|
|
|
+ <div class="linkItem">
|
|
|
+ <div class="windInfoBox">
|
|
|
+ <p class="key">Subtotal</p>
|
|
|
+ <p class="val">$99.99</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mbItem">
|
|
|
+ <div class="windInfoBox">
|
|
|
+ <p class="key">Shipping</p>
|
|
|
+ <p class="val">$99.99</p>
|
|
|
+ </div>
|
|
|
+ <div class="windInfoBox">
|
|
|
+ <p class="key">Free shipping</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mbItem">
|
|
|
+ <div class="windInfoBox">
|
|
|
+ <p class="key">Shipping to California, United States (us)</p>
|
|
|
+ </div>
|
|
|
+ <div class="windInfoBox">
|
|
|
+ <p class="key changeAddress">Change address</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="totalBox">
|
|
|
+ <p class="totalT">Total</p>
|
|
|
+ <p class="totalVal">$99.99</p>
|
|
|
+ </div>
|
|
|
+ <div class="payPalButton">
|
|
|
+ <span>PayPal</span>
|
|
|
+ </div>
|
|
|
+ <div class="orBox">
|
|
|
+ <div class="link"></div>
|
|
|
+ <p class="or">OR</p>
|
|
|
+ <div class="link"></div>
|
|
|
+ </div>
|
|
|
+ <div class="checkoutButton">
|
|
|
+ <span>Proceed to Checkout</span>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
</main>
|
|
|
|
|
|
<!-- 底部 -->
|
|
|
- <footer class="footerContainer">
|
|
|
+ <footer class="footerContainer" id="footerContainer">
|
|
|
<section class="sectionContainer">
|
|
|
<div class="elementorContainer">
|
|
|
<div class="footerConter">
|
|
|
@@ -181,10 +277,13 @@
|
|
|
</body>
|
|
|
<script src="/assets/api/js/jquery-1.12.0.js"></script>
|
|
|
<script src="/assets/api/js/flexible.js"></script>
|
|
|
+<script src="/assets/api/js/public.js?t=11"></script>
|
|
|
<script src="/assets/api/js/swiper.js?t=6"></script>
|
|
|
<script src="/assets/api/js/jquery.lazyload.js"></script>
|
|
|
<script>
|
|
|
$(document).ready(function () {
|
|
|
+
|
|
|
+ //支付方法
|
|
|
const orderPayment = (params) => {
|
|
|
console.log(params)
|
|
|
const vapesToken = localStorage.getItem("vapes_token");
|
|
|
@@ -214,7 +313,36 @@
|
|
|
}
|
|
|
|
|
|
|
|
|
- $("#orderPaymentBut").on(tap, async function () {
|
|
|
+ /**
|
|
|
+ * 商品操作方法
|
|
|
+ * @param _this $(this)
|
|
|
+ * @param type 类型：add || reduce || delete
|
|
|
+ * @returns
|
|
|
+ */
|
|
|
+ function productOperate(_this, type) {
|
|
|
+ //商品id
|
|
|
+ const productId = _this.closest('.productItem').attr('data-id');
|
|
|
+ console.log(productId)
|
|
|
+ //商品增加
|
|
|
+ if (type === "add") {
|
|
|
+ console.log("商品增加")
|
|
|
+ return
|
|
|
+ }
|
|
|
+ //商品减少
|
|
|
+ if (type === "reduce") {
|
|
|
+ console.log("商品减少")
|
|
|
+ return
|
|
|
+ }
|
|
|
+ //商品删除
|
|
|
+ if (type === "delete") {
|
|
|
+ console.log("商品删除")
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //支付
|
|
|
+ $(".payPalButton").on(tap, async function () {
|
|
|
+ console.log('paypaing')
|
|
|
const params = {
|
|
|
"cartIds": "10002",
|
|
|
"delivery": 10,
|
|
|
@@ -224,11 +352,27 @@
|
|
|
const res = await orderPayment(params)
|
|
|
console.log(res)
|
|
|
const { status, data } = res || {}
|
|
|
- if (status === 200) {
|
|
|
+ if (status === 200 || status === '200') {
|
|
|
window.open(data.payment.approval_link, '_blank');
|
|
|
}
|
|
|
});
|
|
|
|
|
|
+
|
|
|
+ //商品减少
|
|
|
+ $(".numberReduce").on(tap, function () {
|
|
|
+ productOperate($(this), "reduce")
|
|
|
+ })
|
|
|
+
|
|
|
+ //商品增加
|
|
|
+ $(".numberAdd").on(tap, function () {
|
|
|
+ productOperate($(this), "add")
|
|
|
+ })
|
|
|
+
|
|
|
+ //商品删除
|
|
|
+ $(".productDelete").on(tap, function () {
|
|
|
+ productOperate($(this), "delete")
|
|
|
+ })
|
|
|
+
|
|
|
})
|
|
|
</script>
|
|
|
|
