vape_shop/app/index/view/index/productDetails.html

{extend name="base" /}
{block name="title"}GoodsDetail{/block}
{block name="styles"}
<link rel="stylesheet" href="/assets/index/css/productDetails.css?t=11101">
{/block}
{block name="mainArea"}
<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="tasteContainer">
                        <div class="tasteItem" data-id="0">Choose {$goods.selling_point} Flavors Here:<span id="totalNum">0</span></div>
                        <div class="tasteItem" data-id="1">
                            <div class="tasteNumberBox">
                                <div class="tasteReduce">-</div>
                                <input class="tasteInput" id="STRAWBERRY-MANGO-NUM" value="0" disabled type="text">
                                <div class="tasteAdd">+</div>
                            </div>
                            <img class="tasteImg lazy" src="/assets/index/asstes/flavors/STRAWBERRY-MANGO.jpg"
                                 data-original="/assets/index/asstes/flavors/STRAWBERRY-MANGO.jpg" alt="">
                            <p class="tasteTitle">STRAWBERRY MANGO</p>
                        </div>
                        <div class="tasteItem" data-id="2">
                            <div class="tasteNumberBox">
                                <div class="tasteReduce">-</div>
                                <input class="tasteInput" id="BLUE-RAZZ-ICE-NUM" value="0" disabled type="text">
                                <div class="tasteAdd">+</div>
                            </div>
                            <img class="tasteImg lazy" src="/assets/index/asstes/flavors/BLUE-RAZZ-ICE.jpg"
                                 data-original="/assets/index/asstes/flavors/BLUE-RAZZ-ICE.jpg" alt="BLUE RAZZ ICE">
                            <p class="tasteTitle">BLUE RAZZ ICE</p>
                        </div>
                        <div class="tasteItem" data-id="3">
                            <div class="tasteNumberBox">
                                <div class="tasteReduce">-</div>
                                <input class="tasteInput" id="WATERMELON-NUM" value="0" disabled type="text">
                                <div class="tasteAdd">+</div>
                            </div>
                            <img class="tasteImg lazy" src="/assets/index/asstes/flavors/WATERMELON.jpg"
                                 data-original="/assets/index/asstes/flavors/WATERMELON.jpg" alt="WATERMELON">
                            <p class="tasteTitle">WATERMELON</p>
                        </div>
                        <div class="tasteItem" data-id="4">
                            <div class="tasteNumberBox">
                                <div class="tasteReduce">-</div>
                                <input class="tasteInput" id="GRAPE-NUM" value="0" disabled type="text">
                                <div class="tasteAdd">+</div>
                            </div>
                            <img class="tasteImg lazy" src="/assets/index/asstes/flavors/GRAPE.jpg"
                                 data-original="/assets/index/asstes/flavors/GRAPE.jpg" alt="">
                            <p class="tasteTitle">GRAPE</p>
                        </div>
                        <div class="tasteItem" data-id="5">
                            <div class="tasteNumberBox">
                                <div class="tasteReduce">-</div>
                                <input class="tasteInput" id="KIWI-PASSION-FRUIT-GUAVA-NUM" value="0" disabled type="text">
                                <div class="tasteAdd">+</div>
                            </div>
                            <img class="tasteImg lazy" src="/assets/index/asstes/flavors/KIWI-PASSIONFRUIT-GUAVA.jpg"
                                 data-original="/assets/index/asstes/flavors/KIWI-PASSIONFRUIT-GUAVA.jpg" alt="">
                            <p class="tasteTitle">KIWI-PASSION-FRUIT-GUAVA</p>
                        </div>
                        <div class="tasteItem" data-id="6">
                            <div class="tasteNumberBox">
                                <div class="tasteReduce">-</div>
                                <input class="tasteInput" id="JUICY-PEACH-NUM" value="0" disabled type="text">
                                <div class="tasteAdd">+</div>
                            </div>
                            <img class="tasteImg lazy" src="/assets/index/asstes/flavors/JUICY-PEACH.jpg"
                                 data-original="/assets/index/asstes/flavors/JUICY-PEACH.jpg" alt="">
                            <p class="tasteTitle">JUICY-PEACH</p>
                        </div>
                        <div class="tasteItem" data-id="7">
                            <div class="tasteNumberBox">
                                <div class="tasteReduce">-</div>
                                <input class="tasteInput" id="BLUEBERRY-ICE-NUM" value="0" disabled type="text">
                                <div class="tasteAdd">+</div>
                            </div>
                            <img class="tasteImg lazy" src="/assets/index/asstes/flavors/BLUEBERRY-ICE.jpg"
                                 data-original="/assets/index/asstes/flavors/BLUEBERRY-ICE.jpg" alt="">
                            <p class="tasteTitle">BLUEBERRY-ICE</p>
                        </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="/assets/index/asstes/logo/mastercard.svg"
                                     alt="">
                            </div>
                            <div class="safeItem">
                                <img src="/assets/index/asstes/logo/amex.svg"
                                     alt="">
                            </div>
                            <div class="safeItem">
                                <img src="/assets/index/asstes/logo/paypal.svg"
                                     alt="">
                            </div>
                            <div class="safeItem">
                                <img src="/assets/index/asstes/logo/visa.svg"
                                     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">{$goods.goods_name}</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>
{/block}
{block name="scriptSrc"}
<script>
    $(document).ready(function () {
        //触屏事件 || 点击事件
        const tap = "ontouchstart" in window ? "touchstart" : "click";

        var goodsId = {$goods.goods_id};
        var goodsSkuId = {$goods['skuList'][0]['goods_sku_id']};
        var key = "{$key}";
        const VAPES_SHARE_KEY = "vapes_share_key"
        if (key != "") {
            localStorage.setItem(VAPES_SHARE_KEY, key);
        }
        //
        var needFlavorCnt = {$goods.selling_point};
        needFlavorCnt = parseInt(needFlavorCnt)

        var flavors = {
            'STRAWBERRY-MANGO': 0,
            'BLUE-RAZZ-ICE': 0,
            'WATERMELON': 0,
            'GRAPE': 0,
            'KIWI-PASSION-FRUIT-GUAVA': 0,
            'JUICY-PEACH': 0,
            'BLUEBERRY-ICE': 0
        };
        flavors["STRAWBERRY-MANGO"] = 2;

        console.log(needFlavorCnt);
        console.log(key);

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

        /**
         * 添加购物车
         * @param number 数量
         * @param flavors 口味
         * @returns
         */
        function addCart(number, flavors) {
            if (!number || number <= 0) {
                showToast("Please enter the quantity of products")
                return
            }
            const localKey = localStorage.getItem(VAPES_SHARE_KEY);


            var dp = {
                goodsId: goodsId,
                goodsSkuId: goodsSkuId,
                goodsNum: number,
                flavors: flavors,
                key: localKey
            }
            $.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('/index/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 () {
        $('#numberInput, #fPrNumberInput,.tasteInput').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();
            // 新增开始
            var totalValue = 0;

            var STRAWBERRY_MANGO_Num = parseInt($('#STRAWBERRY-MANGO-NUM').val());
            flavors["STRAWBERRY-MANGO"] = STRAWBERRY_MANGO_Num
            totalValue += STRAWBERRY_MANGO_Num;

            var BLUE_RAZZ_ICE_Num = parseInt($('#BLUE-RAZZ-ICE-NUM').val());
            totalValue += BLUE_RAZZ_ICE_Num;
            flavors["BLUE-RAZZ-ICE"] = BLUE_RAZZ_ICE_Num

            var WATERMELON_Num = parseInt($('#WATERMELON-NUM').val());
            totalValue += WATERMELON_Num;
            flavors["WATERMELON"] = WATERMELON_Num

            var KIWI_PASSION_Num = parseInt($('#KIWI-PASSION-FRUIT-GUAVA-NUM').val());
            totalValue += KIWI_PASSION_Num;
            flavors["KIWI-PASSION-FRUIT-GUAVA"] = KIWI_PASSION_Num

            var JUICY_PEACH_Num = parseInt($('#JUICY-PEACH-NUM').val());
            totalValue += JUICY_PEACH_Num;
            flavors["JUICY-PEACH"] = JUICY_PEACH_Num

            var GRAPE_Num = parseInt($('#GRAPE-NUM').val());
            totalValue += GRAPE_Num;
            flavors["GRAPE"] = GRAPE_Num

            var BLUEBERRY_ICE_Num = parseInt($('#BLUEBERRY-ICE-NUM').val());
            totalValue += BLUEBERRY_ICE_Num;
            flavors["BLUEBERRY-ICE"] = BLUEBERRY_ICE_Num

            /*            $(".tasteItem").each(function () {
                            var id = $(this).data("id");
                            var value = parseInt($(this).find(".tasteInput").val()) || 0;
                            totalValue += value;
                            console.log("ID:", id, "Value:", value);
                        });*/
            console.log("Total Value:", totalValue);
            console.log("flavors Value:", flavors);

            if (totalValue !== needFlavorCnt  || totalValue != needFlavorCnt){
                showToast('You should choose '+ needFlavorCnt +' flavor first for one pack')
                return
            }
            // 新增结束
            addCart(number, flavors)
        });

        //悬浮模块的添加按钮
        $(".fPrAddToCart").on(tap, function () {
            const number = $('#fPrNumberInput').val();
            // 新增开始
            var totalValue = 0;

            var STRAWBERRY_MANGO_Num = parseInt($('#STRAWBERRY-MANGO-NUM').val());
            flavors["STRAWBERRY-MANGO"] = STRAWBERRY_MANGO_Num
            totalValue += STRAWBERRY_MANGO_Num;

            var BLUE_RAZZ_ICE_Num = parseInt($('#BLUE-RAZZ-ICE-NUM').val());
            totalValue += BLUE_RAZZ_ICE_Num;
            flavors["BLUE-RAZZ-ICE"] = BLUE_RAZZ_ICE_Num

            var WATERMELON_Num = parseInt($('#WATERMELON-NUM').val());
            totalValue += WATERMELON_Num;
            flavors["WATERMELON"] = WATERMELON_Num

            var KIWI_PASSION_Num = parseInt($('#KIWI-PASSION-FRUIT-GUAVA-NUM').val());
            totalValue += KIWI_PASSION_Num;
            flavors["KIWI-PASSION-FRUIT-GUAVA"] = KIWI_PASSION_Num

            var JUICY_PEACH_Num = parseInt($('#JUICY-PEACH-NUM').val());
            totalValue += JUICY_PEACH_Num;
            flavors["JUICY-PEACH"] = JUICY_PEACH_Num

            var GRAPE_Num = parseInt($('#GRAPE-NUM').val());
            totalValue += GRAPE_Num;
            flavors["GRAPE"] = GRAPE_Num

            var BLUEBERRY_ICE_Num = parseInt($('#BLUEBERRY-ICE-NUM').val());
            totalValue += BLUEBERRY_ICE_Num;
            flavors["BLUEBERRY-ICE"] = BLUEBERRY_ICE_Num

            console.log("Total Value:", totalValue);
            console.log("flavors Value:", flavors);

            if (totalValue !== needFlavorCnt  || totalValue != needFlavorCnt){
                showToast('You should choose '+ needFlavorCnt +' flavor first for one pack')
                return
            }

            addCart(number, flavors)
        });
        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;
                }
            });
        }
        // 新增开始
        var totalNumEle = $('#totalNum')

        //口味数量减少
        $(".tasteReduce").on(tap, function () {
            var inputElement = $(this).siblings('.tasteInput');
            var currentValue = parseInt(inputElement.val()) || 0;
            if (currentValue >= 1) {
                inputElement.val(currentValue - 1);
                var oldTotalNum = parseInt(totalNumEle.html())
                totalNumEle.html(oldTotalNum - 1)
            }

        });

        //口味数量增加
        $(".tasteAdd").on(tap, function () {
            var oldTotalNum = parseInt(totalNumEle.html())
            if (oldTotalNum >= needFlavorCnt){
                showToast('You have chosen enough flavors')
                return
            }

            var inputElement = $(this).siblings('.tasteInput');
            var currentValue = parseInt(inputElement.val()) || 0;
            inputElement.val(currentValue + 1);
            totalNumEle.html(oldTotalNum + 1)
        });
        // 新增结束
    });
</script>

{/block}