zhangdehua
/
vape_shop


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name='apple-touch-fullscreen' content='yes'>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta content="fullscreen=yes,preventMove=no" name="ML-Config">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="keywords" content="电子烟,关键字"/>
    <meta name="Description" content="网站描述"/>
    <title>商品详情</title>
    <link rel="stylesheet" href="/assets/index/css/common.css?t=4111">
    <link rel="stylesheet" href="/assets/index/css/productDetails.css?t=11101">
</head>

<body>
<!-- 头部导航栏 -->
<header class="headerContainer" id="headerContainer">
    <!-- 顶部提示 -->
    <div class="warnContainer">
        <h4 class="warnText">WARNING: This product contains nicotine. Nicotine is an addictive chemical.</h4>
    </div>
    <!-- pc端头部 -->
    <div id="computerEndHeader">
        <a href="/index/index/index.html">
            <h1 class="computerLogo">
                <img src="/assets/index/asstes/icon/logo.png" alt="Free Shipping Vapes" title="Free Shipping Vapes">
            </h1>
        </a>
        <div class="headNavContainer">
            <nav class="headNavItem active">
                <h2 class="headNavTitle">NEW VAPES</h2>
                <p class="back"></p>
            </nav>
            <!--            <nav class="headNavItem">
                            <h2 class="headNavTitle">DISPOSABLES</h2>
                            <p class="back"></p>
                        </nav>-->
        </div>
        <div class="headIconContainer">
            <a href="/index/cart/shoppingCart.html">
                <div class="headIconItem shoppingCartIcon">
                    <img src="/assets/index/asstes/icon/shoppingCart.png" alt="shoppingCart" tabindex="shoppingCart">
                </div>
            </a>
            <!-- 收藏 -->
            <!--            <div class="headIconItem collectIcon">-->
            <!--                <img src="/assets/index/asstes/icon/collect.png" alt="collect" tabindex="collect">-->
            <!--            </div>-->
            <!-- 个人中心 -->

            <a href="/index/user/order.html">
                <div class="headIconItem userIcon">
                    <img src="/assets/index/asstes/icon/user.png" alt="user" tabindex="user">
                </div>
            </a>
        </div>
    </div>
    <!-- 移动端头部 -->
    <div id="mobileEndHeader">
        <div class="mobileEndHeaderConten">
            <a href="/index/index/index.html">
                <h1 class="mobileLogo">
                    <img src="/assets/index/asstes/icon/logo.png" alt="Free Shipping Vapes" title="Free Shipping Vapes">
                </h1>
            </a>
            <div class="mobileUserIconList">
                <div class="mobileUserIcon userIcon">
                    <img src="/assets/index/asstes/icon/user.png" alt="user" tabindex="user">
                </div>
            </div>
            <div class="mobileMenu">
                <p id="mobileMenuBot">
                    <span id="mobileMenuLink"></span>
                </p>
            </div>
        </div>
        <!-- 移动端菜单 -->
        <section class="mobileMenuFixed">
            <div class="mobileMenuItem active">
                <a href="/index/index/index.html">
                    <h2 class="menuItemTitle">NEW VAPES</h2>
                </a>
            </div>
            <!--            <div class="mobileMenuItem">
                            <a href="#">
                                <h2 class="menuItemTitle">DISPOSABLES</h2>
                            </a>
                        </div>-->
            <div class="mobileMenuItem">
                <a href="/index/cart/shoppingCart.html">
                    <h2 class="menuItemTitle shoppingCartIcon">Shopping Cart</h2>
                </a>
            </div>
            <!--            <div class="mobileMenuItem">-->
            <!--                <h2 class="menuItemTitle collectIcon">Collect</h2>-->
            <!--            </div>-->
            <div class="mobileMenuItem">
                <a href="/index/user/order.html">
                    <h2 class="menuItemTitle userIcon">Personal</h2>
                </a></div>
        </section>
    </div>
</header>
<main id="main">
    <section class="sectionContainer">
        <div class="elementorContainer">
            <!-- 产品模块 -->
            <section class="productContainer">
                <!-- 产品图片 -->
                <div class="productImgContainer">
                    <div class="prViewImgBox">
                        <img class="prViewImg lazy" src="/assets/index/asstes/icon/transparent.png"
                             data-original="{$goods.goods_image}" alt="">
                    </div>
                    <div class="prImgContainer">
                        <div class="prImgList">
                            {foreach $goods.goods_images as $img}
                            <div class="prImgItem">
                                <img class="lazy" src="/assets/index/asstes/icon/transparent.png"
                                     data-original="{$img.preview_url}" alt="">
                            </div>
                            {/foreach}
                        </div>
                        <div class="prevArrow">&lt;</div>
                        <div class="nextArrow">&gt;</div>
                    </div>

                </div>

                <!-- 产品信息 -->
                <div class="productInfoContainer">
                    <div>
                        <h1 class="productTitle">{$goods.goods_name}</h1>
                        <div class="productPrice">
                            <p><span>$</span>{$goods.goods_price_min}</p>
                        </div>
                    </div>
                    <div>
                        <!-- 数量 -->
                        <div class="productNContainer">
                            <div class="productNumberBox">
                                <div class="numberReduce">-</div>
                                <input id="numberInput" value="1" type="text"/>
                                <div class="numberAdd">+</div>
                            </div>
                            <div class="addToCart">
                                <p class="tag">+</p>
                                <p>Add To Cart</p>
                            </div>
                        </div>

                        <div class="safeContainer">
                            <p class="safeTag">Guaranteed Safe Checkout</p>
                            <div class="safeList">
                                <div class="safeItem">
                                    <img src="https://img2.baidu.com/it/u=810087687,2144202516&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1710003600&t=5d86d51c836405ef2225baf3d4aa9349"
                                         alt="">
                                </div>
                                <div class="safeItem">
                                    <img src="https://img2.baidu.com/it/u=810087687,2144202516&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1710003600&t=5d86d51c836405ef2225baf3d4aa9349"
                                         alt="">
                                </div>
                                <div class="safeItem">
                                    <img src="https://img2.baidu.com/it/u=810087687,2144202516&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1710003600&t=5d86d51c836405ef2225baf3d4aa9349"
                                         alt="">
                                </div>
                                <div class="safeItem">
                                    <img src="https://img2.baidu.com/it/u=810087687,2144202516&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1710003600&t=5d86d51c836405ef2225baf3d4aa9349"
                                         alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 文案模块 -->
            <article class="articleContainer">
                <div class="articleTabBox">
                    <div class="articleTabItem active" data-type="description">
                        <p class="tabTag"></p>
                        <h2 class="articleTabTitle">Description</h2>
                    </div>
                    <div class="articleTabItem" data-type="reviews">
                        <p class="tabTag"></p>
                        <h2 class="articleTabTitle">Reviews ({$comment_total})</h2>
                    </div>
                </div>
                <!-- 商品详情容器 -->
                <div class="articleInfo" id="articleInfo">
                    <h2 class="articleTitle">Product description</h2>
                    <div id="richTextContainer"></div>
                </div>
                <!-- 评价内容容器 -->
                <div id="reviewsInfo">
                    <div id="reviews">
                    </div>
                    <div id="loadingIndicator">loading...</div>
                    <div id="reviewsButtonContainer">
                        <div id="reviewsButtonBox">
                            <div id="prevPage">Prev page</div>
                            <div id="nextPage">Next page</div>
                        </div>
                    </div>
                </div>
            </article>

            <!-- 悬浮底部模块 -->
            <section class="fixedAddSection">
                <div class="fixedAddContainer">
                    <div class="elementorContainer">
                        <div class="fixedAddBox">
                            <div class="fPrInfo">
                                <img class="img lazy" src="/assets/index/asstes/icon/transparent.png"
                                     data-original="https://www.buranshao.com/Content/Img/iqos3duo.jpg" alt="">
                                <h3 class="fTitle">NEW VAPES</h3>
                            </div>
                            <div class="fPrNumberContainer">
                                <p class="fPrPrice">${$goods.goods_price_min}</p>
                                <div class="fPrNumberBox">
                                    <div class="fPrNumberReduce">-</div>
                                    <input id="fPrNumberInput" value="1" type="text"/>
                                    <div class="fPrNumberAdd">+</div>
                                </div>
                                <div class="fPrAddToCart">
                                    <p class="tag">+</p>
                                    <p>Add To Cart</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </section>
</main>
<!-- 底部 -->
<footer class="footerContainer">
    <section class="sectionContainer">
        <div class="elementorContainer">
            <div class="footerConter">
                <div class="leftText">
                    <p class="ltK">NEWALETTER</p>
                    <p class="ltV">Sign up for the Free Shipping Vapes</p>
                </div>
                <div class="footerInuptBox">
                    <img class="mailIcon" src="/assets/index/asstes/icon/mailIcon.png" alt="">
                    <input class="footerInupt" type="text">
                    <img class="arrowIcon" src="/assets/index/asstes/icon/arrowIcon.png" alt="">
                </div>
                <div class="footerIconContainer">
                    <div class="footerIconList">
                        <a href="#">
                            <div class="footerIconItem">
                                <img src="https://i1.branchcn.com/social_media/Wechat.png" alt="">
                            </div>
                        </a>
                        <a href="#">
                            <div class="footerIconItem">
                                <img src="https://i1.branchcn.com/social_media/Wechat.png" alt="">
                            </div>
                        </a>
                        <a href="#">
                            <div class="footerIconItem">
                                <img src="https://i1.branchcn.com/social_media/Wechat.png" alt="">
                            </div>
                        </a>
                    </div>
                    <div class="footerVlsaImg">
                        <a href="#">
                            <div class="footerVlsaItem">
                                <img src="https://img2.baidu.com/it/u=1367821108,121397947&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=500"
                                     alt="">
                            </div>
                        </a>
                        <a href="#">
                            <div class="footerVlsaItem">
                                <img src="https://img2.baidu.com/it/u=1367821108,121397947&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=500"
                                     alt="">
                            </div>
                        </a>
                        <a href="#">
                            <div class="footerVlsaItem">
                                <img src="https://img2.baidu.com/it/u=1367821108,121397947&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=500"
                                     alt="">
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="sectionContainer warningContainer">
        <div class="elementorContainer">
            <div class="warningBox">
                <p class="warningText">WARNING: Our products contain nicotine, a poisonous and addictive substance.
                    Our products are only intended for committed smokers of legal smoking age and not by
                    non-smokers, children, women who are pregnant or may become pregnant or any person with an
                    elevated risk of, or preexisting condition of, any medical condition which includes, but is not
                    limited to, heart disease, diabetes, high blood pressure or asthma. If you experience any side
                    effects or possible side effects, stop using the product immediately and consult a physician.
                    Product may be poisonous if orally ingested. Our products are not smoking cessation products and
                    have not been tested or guaranteed as such. Our products have not been evaluated by the Food and
                    Drug Administration nor is it intended to treat, prevent or cure any disease or condition. For
                    their protection, please keep out of reach of children and pets. Read our terms of use page
                    before purchasing our products.</p>
            </div>
        </div>
    </section>
</footer>
<!-- 年龄提示层 -->
<section class="maskContainer">
    <div class="ageReminderBox">
        <img class="ageReminderBack" src="/assets/index/asstes/ageReminderBack.jpg" alt="">
        <div class="ageReminderInfo">
            <h3>ARE YOU OF LEAAL SMOKIND AGE?</h3>
            <div class="ageReminderButBox">
                <div class="ageRBut ageReminderNo"><span>NO</span></div>
                <div class="ageRBut ageReminderYes"><span>Yes, I am 21+</span></div>
            </div>
        </div>
    </div>
</section>
<!-- 吐司提示 -->
<div id="toastContainer"></div>
</body>
<script src="/assets/index/js/jquery-1.12.0.js"></script>
<script src="/assets/index/js/flexible.js"></script>
<script src="/assets/index/js/public.js?t=11"></script>
<script src="/assets/index/js/productDetails.js?t=11"></script>
<script src="/assets/index/js/jquery.lazyload.js"></script>
<script>
    $(document).ready(function () {
        //触屏事件 || 点击事件
        const tap = "ontouchstart" in window ? "touchstart" : "click";

        var goodsId = {$goods.goods_id};
        var goodsSkuId = {$goods['skuList'][0]['goods_sku_id']};

        //富文本处理
        function initRichText() {
            $("#richTextContainer").html(`{$goods.content | raw}`)
        }

        /**
         * 添加购物车
         * @param number 数量
         * @returns
         */
        function addCart(number) {
            if (!number || number <= 0) {
                showToast("Please enter the quantity of products")
                return
            }
            var dp = {
                goodsId: goodsId,
                goodsSkuId: goodsSkuId,
                goodsNum: number
            }
            $.ajax({
                url: "/index/cart/add",
                headers: {platform: 'H5'},
                dataType: 'json',
                data: JSON.stringify(dp),
                type: "POST",
                contentType: 'application/json',
                success: function (obj) {
                    //注册成功后进入
                    if (obj.status === 200 || obj.status === '200') {
                        showToast("Successful")
                        window.location.href = '/index/cart/shoppingCart.html';
                        return
                    } else if (obj.status === 401 || obj.status === '401') {
                        window.location.replace('../passport/logIn.html')
                    } else {
                        showToast(obj.message)
                    }
                }
            })
        }

        /**
         * 吐司提示
         * @param message 消息
         * @returns
         */
        function showToast(message) {
            var toastElement = $('#toastContainer');
            toastElement.text(message);
            toastElement.stop(true, true).fadeIn(200).delay(2000).fadeOut(200);
        }

        //商品数量减少
        $('.numberReduce, .fPrNumberReduce').click(function () {
            var container = $(this).closest('.productNumberBox, .fPrNumberBox');
            var inputElement = container.find('#numberInput, #fPrNumberInput');
            var currentValue = parseInt(inputElement.val());
            if (currentValue > 1) {
                inputElement.val(currentValue - 1);
                var totalMoney = {$goods.goods_price_min} * (currentValue - 1)
                $('.fPrPrice').html('$' + totalMoney.toFixed(2))
            }

        });

        //商品数量增加
        $('.numberAdd, .fPrNumberAdd').click(function () {
            var container = $(this).closest('.productNumberBox, .fPrNumberBox');
            var inputElement = container.find('#numberInput, #fPrNumberInput');
            var currentValue = parseInt(inputElement.val());
            inputElement.val(currentValue + 1);
            var totalMoney = {$goods.goods_price_min} * (currentValue + 1)
            console.log(totalMoney)
            $('.fPrPrice').html('$' + totalMoney.toFixed(2))
        });

        // 输入框禁止为空小于等于0
        $('#numberInput, #fPrNumberInput').change(function () {
            var inputElement = $(this);
            var currentValue = parseInt(inputElement.val());
            if (currentValue < 1 || isNaN(currentValue)) {
                inputElement.val(1);
            }
        });


        //上面的添加按钮
        $(".addToCart").on(tap, function () {
            const number = $('#numberInput').val();
            addCart(number)
        });

        //悬浮模块的添加按钮
        $(".fPrAddToCart").on(tap, function () {
            const number = $('#fPrNumberInput').val();
            addCart(number)
        });
        initRichText()

        //页码
        let page = 1;
        //总页数
        let totalPage = {$comment_total}
        //页数
        let itemsPerPage = 10;
        //加载中
        let isLoading = false;

        //详情 & 评论切换
        $(".articleTabItem").on(tap, function () {
            const type = $(this).attr("data-type")
            $(this).addClass("active").siblings().removeClass("active")
            // 评论
            if (type === "reviews") {
                $("#reviewsInfo").show(0)
                $("#articleInfo").hide(0)
                getReviews()
                page = 1
            } else {
                // 详情
                $("#articleInfo").show(0)
                $("#reviewsInfo").hide(0)
            }
        });


        //上一页
        $("#prevPage").on(tap, function () {
            if (page > 1) {
                page--
            } else {
                page = 1
            }
            getReviews()
        });

        //下一页
        $("#nextPage").on(tap, function () {
            if (page >= totalPage) {
                page = totalPage
            } else {
                page++
            }
            getReviews()
        });

        // 获取评价列表
        function getReviews() {
            if (isLoading) {
                return;
            }
            isLoading = true;
            // 显示加载指示器
            $('#loadingIndicator').show();
            //调试后记得去除这段代码
            $.ajax({
                url: '/index/comment/listPage?goodsId=' + goodsId,
                type: 'GET',
                data: {
                    page: page,
                    per_page: itemsPerPage
                },
                success: function (response) {
                    console.log(response.data)
                    const data = response.data.list.data
                    // 在页面中添加数据
                    const container = $('#reviews');

                    //var html = container.html();
                    var html = '';
                    //container.html("")
                    $.each(data, function (index, item) {
                        const rating = item.score / 10;
                        let starHtml = "";
                        for (let i = 0; i < 5; i++) {
                            if (i < rating) {
                                starHtml += '<img src="/assets/index/asstes/icon/selStar.png" alt="">';
                            } else {
                                starHtml += '<img src="/assets/index/asstes/icon/star.png" alt="">';
                            }
                        }

                        html += `
                        <div class="reviewItem">
                        <div class="userInfo">
                            <div class="userImg">
                            <img src="https://himg.bdimg.com/sys/portrait/item/tb.1.772a23f6.WIunUru1_286k2Q9BG9SJg" alt="">
                            </div>
                            <p class="userName">${item.user.nick_name}</p>
                        </div>
                        <div class="reInfo">
                            <div class="starBox">${starHtml}
                            </div>
                            <h3 class="reviewValues">${item.content}</h3>
                        </div>
                        </div>`;
                    });

                    container.html(html);


                    //数据长度大于0显示上下页按钮
                    //$('#reviewsButtonContainer').show();
                    console.log(response.data.list.last_page, page, response.data.list.last_page > page)
                    if (response.data.list.last_page > page) {
                        $("#nextPage").show()
                    } else {
                        $("#nextPage").hide()
                    }

                    if (page > 1) {
                        $("#prevPage").show()
                    } else {
                        $("#prevPage").hide()
                    }

                    // 隐藏加载指示器
                    $('#loadingIndicator').hide();
                    isLoading = false;
                },
                error: function () {
                    // 处理错误情况
                    console.log('请求数据失败');
                    // 隐藏加载指示器
                    $('#loadingIndicator').hide();
                    isLoading = false;
                }
            });
        }
    });
</script>

</html>