vape_shop/app/index/view/cart/shoppingCart.html

{extend name="base" /}
{block name="title"}Cart{/block}
{block name="styles"}
<link rel="stylesheet" href="/assets/index/css/shoppingCart.css?t=5">
{/block}
{block name="mainArea"}
<section class="pageContainer">
    <h1 class="pageTitle">Shopping Cart</h1>
    <div class="pageDataBox">
        <!-- 商品模块 -->
        <section class="productConatiner">
            <h3 class="productModelTitle">Product</h3>
            <div class="productList">
                {foreach $list as $cart}
                <div class="productItem" data-id="{$cart['id']}" goods-id="{$cart['goods']['goods_id']}"
                     goods-sku-id="{$cart['goods']['skuInfo']['goods_sku_id']}"
                     data-goods-num="{$cart['goods_num']}">
                    <div class="productImgBox">
                        <img class="lazy" src="/assets/index/asstes/icon/transparent.png"
                             data-original="{$cart['goods']['goods_image']}" alt="提示信息seo"
                             title="提示信息seo">
                    </div>
                    <div class="productInfo">
                        <div class="lfBox">
                            <h2 class="productTitle">{$cart['goods']['goods_name']}</h2>
                            <p class="specs">specs</p>
                        </div>
                        <div class="nunberBox">
                            <p class="numberReduce">-</p>
                            <p class="numberInput">{$cart['goods_num']}</p>
                            <p class="numberAdd">+</p>
                        </div>
                        <p class="productPrice">${$cart['goods']['goods_price_min']}</p>
                        <div class="productDelete">
                            <img src="/assets/index/asstes/icon/productDelete.png" alt="">
                        </div>
                    </div>
                </div>
                {/foreach}
            </div>
        </section>
        <!-- 结算模块 -->
        <section class="windContainer">
            <div class="windTBox">
                <p class="lt">CART TOTALS</p>
                <p class="cartTotals"></p>
            </div>
            <div class="linkItem">
                <div class="windInfoBox">
                    <p class="key">Subtotal</p>
                    <p class="val">${$cartMoney}</p>
                </div>
            </div>
            <div class="mbItem">
                <div class="windInfoBox">
                    <p class="key">Free Shipping</p>
                    <p class="val">$0.00</p>
                </div>
                <!--                    <div class="windInfoBox">-->
                <!--                        <p class="key">Free Shipping</p>-->
                <!--                    </div>-->
            </div>
            <div class="mbItem" id="addressInfo">
                <div class="windInfoBox">
                    <div class="key">
                        <p class="keyItem" id="fullNameText">{$fullName}</p>
                        <p class="keyItem" id="contactNumberText">{$phone}</p>
                        <p class="keyItem" id="emailText">{$email}</p>
                        <p class="keyItem" id="addressText">{$full}</p>
                    </div>
                </div>
                <div class="windInfoBox">
                    <p class="key" id="changeAddress">Change address</p> Or
                    <p class="key" id="selectAddress">Select address</p>
                </div>
            </div>

            <!-- 选择地址模块 -->
<!--            <div id="addressChooseContainer">
                <div class="container">
                    <h4>请选择一个选项：</h4>
                    <div class="radio-item">
                        <input type="radio" id="option1" name="options" value="选项1" class="selectOption">
                        <label for="option1">选项1</label>
                        <span class="delete-button" onclick="deleteOption('option1')">Delete</span>
                        <span class="delete-button" onclick="deleteOption('option1')">设置默认地址</span>
                    </div>
                    <div class="radio-item">
                        <input type="radio" id="option2" name="options" value="选项2" class="selectOption">
                        <label for="option2">选项2</label>
                        <span class="delete-button" onclick="deleteOption('option2')">删除</span>
                    </div>
                    <div class="radio-item">
                        <input type="radio" id="option3" name="options" value="选项3" class="selectOption">
                        <label for="option3">选项3</label>
                        <span class="delete-button" onclick="deleteOption('option3')">删除</span>
                    </div>
                    <input type="hidden" id="selectedOption" name="selectedOption" value="">
                </div>
            </div>-->

            <!-- 填写地址模块 -->
            <div id="addressContainer">
                <!-- 名字 -->
                <div class="addressItem">
                    <p class="addItmeTitle">First Name:</p>
                    <input class="addInput" id="userName" type="text" placeholder="First Name">
                </div>
                <div class="addressItem">
                    <p class="addItmeTitle">Last Name:</p>
                    <input class="addInput" id="lastName" type="text" placeholder="Last Name">
                </div>
                <!-- 手机号码 -->
                <div class="addressItem">
                    <p class="addItmeTitle">Contact Number:</p>
                    <input class="addInput" id="phoneNumber" type="text" placeholder="Contact Number">
                </div>
                <!-- 地区 -->
                <div class="addressItem">
                    <p class="addItmeTitle">State:</p>
                    <select id="areaSelect">
                        <option value="0" selected>--Choose A state--</option>
                        {foreach $states50 as $state}
                        <option value="{$state['id']}">{$state['name']}</option>
                        {/foreach}
                    </select>
                </div>
                <!-- 详情地址 -->
                <div class="addressItem">
                    <p class="addItmeTitle">Address:</p>
                    <input class="addInput" id="address" type="text" placeholder="Address">
                </div>
                <!-- 邮箱 -->
                <div class="addressItem">
                    <p class="addItmeTitle">Mailbox:</p>
                    <input type="text" id="mailbox" class="addInput" placeholder="Mailbox">
                </div>
                <!-- 邮政编码 -->
                <div class="addressItem">
                    <p class="addItmeTitle">Zip Code:</p>
                    <input class="addInput" id="postalCode" type="text" placeholder="Zip Code">
                </div>
                <div id="addressButModel">
                    <div class="addressButtonBox">
                        <div id="addCancel">Cancel</div>
                        <div id="addSave">Save</div>
                    </div>
                </div>
            </div>
            <!--                <div class="mbItem">
                                <div class="windInfoBox freeshipping">
                                    <p class="key">Free shipping</p>
                                </div>
                                <div class="windInfoBox">
                                    <p class="key">$199.99</p>
                                </div>
                            </div>-->
            <div class="totalBox">
                <p class="totalT">Total</p>
                <p class="totalVal">${$cartMoney}</p>
            </div>
            <div class="mbItem">
                <div class="windInfoBox freeshipping">
                    {if $payByPoints}
                    <p class="key">You can redeem this order for free using your points! REDEEM NOW.</p>
                    {/if}
                </div>
                <div class="windInfoBox">
                    <p class="key">Your Points:{$points}</p>
                </div>
            </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>Redemption using Points</span>
            </div>
        </section>
    </div>
</section>
{/block}
{block name="components"}
<div id="loadingModel">
    <div class="loadingBox">
        <img src="/assets/index/asstes/icon/loading.gif" alt="Jumping to paypal.">
    </div>
</div>
{/block}

{block name="scriptSrc"}
<script>
    $(document).ready(function () {
        //触屏事件 || 点击事件
        const tap = "ontouchstart" in window ? "touchstart" : "click";

        var addressId = {$addressId};
        var payByPoints = "{$payByPoints}";
        //console.log(payByPoints, payByPoints)

        //默认地址
        const defaultAddressInfo = {
            userName: "{$name}",
            lastName: "{$lastName}",
            phoneNumber: "{$phone}",
            areaSelect: "{$regionId}",
            address: "{$detail}",
            mailbox: "{$email}",
            postalCode: "{$zipCode}"
        }
        // 是否已填写过地址
        if (addressId) {
            var isAddress = true
        } else {
            var isAddress = false
        }

        //初始化地址模块标签显示隐藏
        function initAddressLabel() {
            //是否已填写过地址、显示默认地址，隐藏填写地址表单
            if (isAddress) {
                $("#addressInfo").show(0)
                $("#addressContainer").hide(0)
            } else {
                $("#addressInfo").hide(0)
                $("#addressContainer").show(0)
                $("#addressButModel").show(0)
            }
        }

        //初始化表单
        function initAddressForm() {
            const {userName, lastName, phoneNumber, areaSelect, address, mailbox, postalCode} = defaultAddressInfo || {}
            userName && $("#userName").val(userName)
            lastName && $("#lastName").val(lastName)
            phoneNumber && $("#phoneNumber").val(phoneNumber)
            areaSelect && $("#areaSelect").val(areaSelect)
            address && $("#address").val(address)
            mailbox && $("#mailbox").val(mailbox)
            postalCode && $("#postalCode").val(postalCode)
        }

        initAddressLabel()
        initAddressForm()

        //更改地址，需显示填写地址表单、取消保存按钮
        $("#changeAddress").on(tap, async function () {
            //获取地址列表
/*            $.ajax({
                url: "/index/address/list",
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'storeId': '10001',
                    'platform': 'H5',
                },
                dataType: 'json',
                success: function (obj) {
                    if (obj.status === 200 || obj.status === '200') {
                        console.log(obj.data)
                        return false;
                        showToast("Successful")
                        window.location.href = '../cart/shoppingCart';
                    } else if (obj.status === 401 || obj.status === '401') {
                        window.location.replace('../passport/logIn.html')
                    } else {
                        showToast(obj.message)
                    }
                },
                error: function (xhr, status, error) {
                    reject(error);
                }
            });*/

            $("#addressContainer").show(0)
            $("#addressButModel").show(0)
        });

        //取消更改
        $("#addCancel").on(tap, async function () {
            $("#addressContainer").hide(0)
        });

        // 添加地址
        function addAddress() {
            const userNameEle = $("#userName")
            const lastNameEle = $("#lastName")
            const phoneNumberEle = $("#phoneNumber")
            const areaSelectEle = $("#areaSelect")
            const addressEle = $("#address")
            const mailboxEle = $("#mailbox")
            const postalCodeEle = $("#postalCode")

            // 名字
            const userName = userNameEle.val()
            const lastName = lastNameEle.val()
            // 手机号码
            const phoneNumber = phoneNumberEle.val()
            // 地区
            const areaSelect = areaSelectEle.val()
            // 详情地址
            const address = addressEle.val()
            // 邮箱
            const mailbox = mailboxEle.val()
            // 邮政编码
            const postalCode = postalCodeEle.val()

            if (!userName || userName === "") {
                userNameEle.focus()
                return
            }
            if (!phoneNumber || phoneNumber === "") {
                phoneNumberEle.focus()
                return
            }
            if (!areaSelect || areaSelect === "") {
                areaSelectEle.focus()
                return
            }
            if (!address || address === "") {
                addressEle.focus()
                return
            }
            const params = {
                form: {
                    name: userName,
                    last_name: lastName,
                    phone: phoneNumber,
                    email: mailbox,
                    region: [{label: '', value: 1}, {label: '', value: 2}, {label: areaSelect, value: areaSelect}],
                    //mailbox,
                    detail: address,
                    zip_code: postalCode
                }
            }

            return new Promise(function (resolve, reject) {
                $.ajax({
                    url: "/index/address/add",
                    method: 'POST',
                    data: JSON.stringify(params),
                    headers: {
                        'Content-Type': 'application/json',
                        'storeId': '10001',
                        'platform': 'H5',
                    },
                    dataType: 'json',
                    success: function (response) {
                        resolve(response);
                    },
                    error: function (xhr, status, error) {
                        reject(error);
                    }
                });
            });
        }

        //保存更改
        $("#addSave").on(tap, async function () {
            const {data, status} = await addAddress()
            if (status === 200 || status === "200") {
                showToast('Success')
                setTimeout(function () {
                    $("#addressInfo").show(0)
                    addressId = data.address_id
                    $("#addressText").text(data.full)
                    $("#fullNameText").text(data.name + " " + data.last_name)
                    $("#contactNumberText").text(data.phone)
                    $("#emailText").text(data.email)
                    $("#addressContainer").hide(0)
                }, 2000)

            } else {
                showToast('Something wrong.Try again later.')
            }
        });

        function showToast(message) {
            var toastElement = $('#toastContainer');
            toastElement.text(message);
            toastElement.stop(true, true).fadeIn(200).delay(2000).fadeOut(200);
        }

        //支付方法
        const orderPayment = (params) => {
            return new Promise(function (resolve, reject) {
                $.ajax({
                    url: "/index/checkout/submit?payType=30&mode=cart&address_id=" + addressId,
                    method: "POST",
                    data: JSON.stringify(params),
                    headers: {
                        "Content-Type": "application/json",
                        "storeId": "10001",
                        "platform": "H5",
                        // "Access-Token": vapesToken
                    },
                    dataType: "json",
                    success: function (response) {
                        resolve(response);
                    },
                    error: function (xhr, status, error) {
                        reject(error);
                    }
                });
            });
        }

        const orderPaymentPoints = (params) => {
            return new Promise(function (resolve, reject) {
                $.ajax({
                    url: "/index/checkout/submit?payType=50&mode=cart&address_id=" + addressId,
                    method: "POST",
                    data: JSON.stringify(params),
                    headers: {
                        "Content-Type": "application/json",
                        "storeId": "10001",
                        "platform": "H5",
                        // "Access-Token": vapesToken
                    },
                    dataType: "json",
                    success: function (response) {
                        resolve(response);
                    },
                    error: function (xhr, status, error) {
                        reject(error);
                    }
                });
            });
        }

        /**
         * 商品操作方法
         * @param _this $(this)
         * @param type 类型：add || reduce || delete
         * @returns
         */
        function productOperate(_this, type) {
            //商品id
            const productId = _this.closest(".productItem").attr("data-id");
            const goodsId = _this.closest(".productItem").attr("goods-id");
            const goodsSkuId = _this.closest(".productItem").attr("goods-sku-id");
            let goodsNum = parseInt(_this.closest(".productItem").attr("data-goods-num"));
            //console.log(productId, goodsId, goodsSkuId)
            //商品增加
            if (type === "add" || type === "reduce") {
                if (type === "add") {
                    goodsNum += 1
                } else {
                    goodsNum -= 1
                }
                $.ajax({
                    url: "/index/cart/update?goodsId=" + goodsId + "&goodsSkuId=" + goodsSkuId + "&goodsNum=" + goodsNum,
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "storeId": "10001",
                        "platform": "H5",
                        "Accept": "*/*"
                        // "Access-Token": vapesToken
                    },
                    dataType: "json",
                    success: function (obj) {
                        if (obj.status === 200 || obj.status === '200') {
                            showToast("Successful")
                            window.location.href = '../cart/shoppingCart';
                        } else if (obj.status === 401 || obj.status === '401') {
                            window.location.replace('../passport/logIn.html')
                        } else {
                            showToast(obj.message)
                        }
                        //window.location.replace( '/index/cart/shoppingCart.html')
                    },
                    error: function (xhr, status, error) {
                        showToast("Please enter the quantity of products")

                        //reject(error);
                    }
                });

                return
            }
            //商品减少

            //商品删除
            if (type === "delete") {
                var params = {"cartIds": [productId]}
                console.log("商品删除")
                $.ajax({
                    url: "/index/cart/clear",
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "storeId": "10001",
                        "platform": "H5",
                        // "Access-Token": vapesToken
                    },
                    data: JSON.stringify(params),
                    dataType: "json",
                    success: function (obj) {
                        if (obj.status === 200 || obj.status === '200') {
                            //showToast("Successful")
                            window.location.href = '../cart/shoppingCart';
                        } else if (obj.status === 401 || obj.status === '401') {
                            window.location.replace('../passport/logIn.html')
                        } else {
                            showToast(obj.message)
                        }
                    },
                    error: function (xhr, status, error) {
                        reject(error);
                    }
                });
            }
        }

        //支付
        $(".payPalButton").on(tap, async function () {
            console.log("paypaing")
            $("#loadingModel").show(0)
            // 支付之前先判断是否有默认地址
            if (!addressId) {
                showToast('No address')
                return

                // 先添加地址
                // const res = await addAddress()
                // addressId = res
            }


            const params = {
                //"cartIds": "10002",
                "delivery": 10,
                "address_id": addressId
            }
            const res = await orderPayment(params)
            const {status, message, data} = res || {}
            if (status === 200 || status === "200") {
                window.open(data.payment.approval_link, "_blank");
                var interId = setInterval(function () {
                    fetchOrder(data.orderId, interId);
                }, 3000)
            } else if (status === 401 || status === "401") {
                window.location.replace('../passport/logIn.html')
            } else {
                showToast(message)
            }
        });

        function fetchOrder(orderId, interId) {
            $.get('/index/order/detail?orderId=' + orderId, function (res) {
                console.log(res.data.order.pay_status);
                if (res.status == 200 && res.data.order.pay_status == 20) {
                    clearInterval(interId);
                    $("#loadingModel").hide(0);
                    window.location.replace('/index/user/orderDetails.html?orderId=' + orderId)
                }
            })
        }


        //支付
        $(".checkoutButton").on(tap, async function () {
            if (payByPoints !== '1') {
                showToast('Insufficient points!')
                return;
            }

            console.log("points")
            const params = {
                "delivery": 10,
                "address_id": addressId
            }
            $("#loadingModel").show(0)
            const res = await orderPaymentPoints(params)
            const {status, message, data} = res || {}
            if (status === 200 || status === "200") {
                $("#loadingModel").hide(0)
                showToast(message)
                setTimeout(function () {
                    window.location.replace('/index/user/order.html')
                }, 3000)
            } else if (status === 401 || status === "401") {
                showToast('Login first!')
                setTimeout(function () {
                    window.location.replace('../passport/logIn.html')
                }, 3000)
                //window.location.replace('../passport/logIn.html')
            } else {
                showToast(message)
            }
        });


        //商品减少
        $(".numberReduce").on(tap, function () {
            productOperate($(this), "reduce")
        })

        //商品增加
        $(".numberAdd").on(tap, function () {
            productOperate($(this), "add")
        })

        //商品删除
        $(".productDelete").on(tap, function () {
            productOperate($(this), "delete")
        })

        //前往购物车
        $(".shoppingCartIcon").on(tap, function () {
            window.location.href = "./shoppingCart.html"
        });

/*        $(".selectOption").on(tap, function () {
            console.log('so!!!')
            var selectedOptionInput = document.getElementById('selectedOption');
            selectedOptionInput.value = optionValue;

            // 如果你希望在选择后执行其他操作，可以在这里添加代码
            // 例如提交表单、显示消息等
        })

        function deleteOption(optionId) {
            var optionElement = document.getElementById(optionId);
            optionElement.parentNode.remove();

            // 如果需要在删除选项后执行其他操作，可以在这里添加代码
        }*/
    })
</script>

{/block}