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>
                            <p class="tasteBox">
                                {foreach $cart['flavors_arr'] as $key=>$flavor}
                                <span>| {$key} × {$flavor}</span>
                                {/foreach}
                            </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" id="selectABox">
                    <p class="key" id="selectAddress">Select address</p>
                </div>
                <!-- 地址列表模块 -->
                <div id="addressListBox">
                    <div id="addressList">

                    </div>
                    <div class="selAddressButtonBox">
                        <div id="selCancel">Cancel</div>
                        <div id="selSave">Confirm</div>
                    </div>
                </div>
                <div class="windInfoBox">
                    <p class="key" id="changeAddress">Add address</p>
                </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">City:</p>
                    <input class="addInput" id="city" type="text" placeholder="City">
                </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>

<!-- 删除地址弹窗 -->
<div id="deleteAddressModal">
    <div class="deleteAddressBox">
        <p class="deteTips">Do you want to delete the address <span id="daleteAddInfo"></span></p>
        <input type="hidden" id="deleteAddInfoId" value="0">
        <div class="deteButtonBox">
            <div id="cancelDelete">Cancel</div>
            <div id="confirmDelete">Confirm</div>
        </div>
    </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)

        var  loadingModelEle= $("#loadingModel")

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

        //初始化地址模块标签显示隐藏
        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,
                city,
                address,
                mailbox,
                postalCode
            } = defaultAddressInfo || {}
            userName && $("#userName").val(userName)
            lastName && $("#lastName").val(lastName)
            phoneNumber && $("#phoneNumber").val(phoneNumber)
            areaSelect && $("#areaSelect").val(areaSelect)
            city && $("#city").val(city)
            address && $("#address").val(address)
            mailbox && $("#mailbox").val(mailbox)
            postalCode && $("#postalCode").val(postalCode)
        }

        initAddressLabel()
        //initAddressForm()

        //更改地址，需显示填写地址表单、取消保存按钮
        $("#changeAddress").on(tap, async function () {
            $("#addressContainer").slideDown(200)
            $("#addressButModel").show(0)
        });

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

        // 添加地址
        function addAddress() {
            const userNameEle = $("#userName")
            const lastNameEle = $("#lastName")
            const phoneNumberEle = $("#phoneNumber")
            const areaSelectEle = $("#areaSelect")
            const cityEle = $("#city")
            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 city = cityEle.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 (!city || city === "") {
                cityEle.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}],
                    city: city,
                    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").slideUp(200)
                }, 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('/index/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('/index/passport/login.html');
                        } else {
                            showToast(obj.message)
                        }
                    },
                    error: function (xhr, status, error) {
                        reject(error);
                    }
                });
            }
        }

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

                // 先添加地址
                // const res = await addAddress()
                // addressId = res
            }
            let left = (window.innerWidth - 600) / 2;
            var importantStuff = window.open('', '_blank',
                    'height=500,width=600,top=300,left=' + left + ',toolbar=no,menubar=no, scrollbars=no,resizable=no,location=no, status=no');
            importantStuff.document.write('Preparing payment...');
            loadingModelEle.show(0)

            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");
/*
                let left = (window.innerWidth - 600) / 2;
                window.open(data.payment.approval_link, "PayPal",
                    'height=300,width=600,top=300,left=' + left + ',toolbar=no,menubar=no, scrollbars=no,resizable=no,location=no, status=no');
*/
                importantStuff.location.href = data.payment.approval_link;

                // let uri = data.payment.approval_link;
                // let id = "paypal"
                // createSuperLabel(uri, id)

                var interId = setInterval(function () {
                    fetchOrder(data.orderId, interId);
                }, 3000)
            } else if (status === 401 || status === "401") {
                window.location.replace('/index/passport/login.html');
            } else {
                showToast(message)
                loadingModelEle.hide(0)
            }
        });

        // 创建超链接，不会被拦截
        function createSuperLabel(url, id)
        {

            let a = document.createElement("a");
            a.setAttribute("href", url);
            a.setAttribute("target", "_blank");
            a.setAttribute("id", id);
            // 防止反复添加
            if (!document.getElementById(id)) {
                document.body.appendChild(a);
            }
            a.click();
        }

        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
            }
            loadingModelEle.show(0)
            const res = await orderPaymentPoints(params)
            const {status, message, data} = res || {}
            if (status === 200 || status === "200") {
                loadingModelEle.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('/index/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"
        });

        //当前选中的地址id
        let currentAddressId = 0
        //删除地址记录id
        let deleteAddressId

        //展开选择地址
        $("#selectAddress").on(tap, function () {
            $("#addressListBox").slideDown(200)
        })
        //收起地址
        $("#selCancel").on(tap, function () {
            $("#addressListBox").slideUp(200)
        })

        //收起地址
        $("#selSave").on(tap, function () {
            addressId = currentAddressId.address_id
            $("#addressText").text(currentAddressId.detail + "," + currentAddressId.city + "," + currentAddressId.region.region + "(" + currentAddressId.zip_code + ")" + ",US")
            $("#fullNameText").text(currentAddressId.name + " " + currentAddressId.last_name)
            $("#contactNumberText").text(currentAddressId.phone)
            $("#emailText").text(currentAddressId.email)

            $("#addressListBox").slideUp(200)
        })

        //获取地址列表
        function getAddressList() {
            let data = [];
            $.get('/index/address/list', function (res) {
                console.log(res.data.list);
                data = res.data.list;
                if (data && data.length > 0) {
                    $("#selectABox").show(0)
                    const addressListEle = $('#addressList');
                    addressListEle.html("");
                    data.forEach(function (item) {
                        const isActive = item === currentAddressId;
                        const activeClass = isActive ? "active" : "";

                        const addressItem = $(`
                    <div class="addressItem ${activeClass}" data-id="${item.address_id}">
                        <div class="iconBox">
                        <img class="noSel" src="/assets/index/asstes/icon/noSel.png" alt="">
                        <img class="sel" src="/assets/index/asstes/icon/sel.png" alt="">
                        </div>
                        <p class="itAddInfo">
                        ${item.name} ${item.last_name},To:${item.detail}, ${item.city},${item.region.region} (US)
                        </p>
                        <div class="addressDelete">
                        <p>Delete</p>
                        </div>
                    </div>
                    `);

                        // 添加点击事件处理程序到 addressItem
                        addressItem.on("click", function () {
                            // 更新 currentAddressId
                            currentAddressId = item;
                            $(this).addClass("active").siblings().removeClass("active")
                        });

                        // 添加点击事件处理程序到 addressDelete
                        const addressDelete = addressItem.find(".addressDelete");
                        addressDelete.on("click", function (event) {
                            event.stopPropagation();
                            deleteAddressId = item
                            $("#deleteAddressModal").show(0)
                            //显示删除信息
                            $("#daleteAddInfo").text(item.address_id)
                            $("#deleteAddInfoId").val(item.address_id)

                        });
                        addressListEle.append(addressItem);
                    });
                } else {
                    $("#selectABox").hide(0)
                }
            })

        }

        //确认删除地址
        $("#confirmDelete").on(tap, function () {
            const deleteAddressId = $("#deleteAddInfoId").val()
            $.get('/index/address/remove?addressId=' + deleteAddressId, function (res) {
                if (res.status === 200 || res.status === "200") {
                    showToast('Success')
                    getAddressList()
                } else {
                    showToast('Something wrong')
                }
                $("#deleteAddressModal").hide(0)
            })

        })

        //取消删除地址
        $("#cancelDelete").on(tap, function () {
            deleteAddressId = null
            $("#deleteAddressModal").hide(0)
        })


        getAddressList()
    })
</script>

{/block}