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="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>
{/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']};

        //富文本处理
        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>

{/block}