{extend name="base" /}
{block name="title"}FreeShippingVapes{/block}
{block name="styles"}
{/block}
{block name="mainArea"}
<!-- 轮播图 -->
<section class="swiperContainer">
    <div class="swiperBox">
        <a href="#goodsPosition">
            <div class="swiperItem">
                <img class="lazy" src="https://storage.googleapis.com/freeshippingvps/assets/index/asstes/banner/banner1.jpg"
                     data-original="https://storage.googleapis.com/freeshippingvps/assets/index/asstes/banner/banner1.jpg"
                     alt="FreeShippingVapes" title="FreeShippingVapes">
            </div>
        </a>
        <a href="#goodsPosition">
            <div class="swiperItem">
                <img class="lazy" src="https://storage.googleapis.com/freeshippingvps/assets/index/asstes/banner/banner2.jpg"
                     data-original="https://storage.googleapis.com/freeshippingvps/assets/index/asstes/banner/banner2.jpg"
                     alt="FreeShippingVapes" title="FreeShippingVapes">
            </div>
        </a>
    </div>
    <div class="swiperNav"></div>
</section>

<!-- 商品模块 -->
<section class="sectionContainer">
    <div class="elementorContainer">
        <!-- tab模块 -->
        <div class="tabContainer">
            <!--            <div class="tabItem goodsModelTabItem " data-type="new">
                            <h3 class="tabName">NEW VAPES</h3>
                            <p class="tabUnderline"></p>
                        </div>
                        <img class="tabLink" src="/assets/index/asstes/icon/tabLinkIcon.png" alt="">-->
            <div class="tabItem goodsModelTabItem active" data-type="best">
                <!--                                <h3 class="tabName">SPECIAL OFFER</h3>-->
                <!--                <img style="height: 0.8rem;width: 3.0rem;" src="/assets/index/asstes/icon/special-offer.jpg">-->
                <img style="width: 90%;height:90%;" src="/assets/index/asstes/banner/special-offer.png">
<!--                <p class="tabUnderline"></p>-->
            </div>
        </div>
        <a name="goodsPosition"></a>
        <!-- NEW VAPES商品模块 -->
        <div class="goodsModel" id="newGoodsModel" data-type="new">
            <div class="newGoodsContainer">
                {foreach $newGoods as $goods}
                <a href="/index/index/productDetails/goodsId/{$goods['goods_id']}.html">
                    <div class="newGoodsItem" data-id="{$goods['goods_id']}">
                        <div class="goodsImgBox">
<!--                            <img class="lazy" src="/assets/index/asstes/icon/transparent.png"-->
                            <img class="lazy" src="{$goods['goods_image']}"
                                 data-original="{$goods['goods_image']}" alt="FreeShippingVapes"
                                 title="FreeShippingVapes">
                        </div>
                        <div class="goodsInfo">
                            <div class="goodsTitleBox">
                                <h3 class="goodsTitle">
                                    <span class="preTag">On sale</span>
                                    <span class="tText">{$goods['goods_name']}</span>
                                </h3>
                            </div>
                            <div class="goodsPriceInfo">
                                <div class="gPriceBox">
                                    <p class="goodsPrice textEllipsis">
                                        <span>$</span>{$goods['goods_price_min']}
                                    </p>
                                    <p class="goodsScribe textEllipsis">${$goods['line_price_max']}</p>
                                </div>
                            </div>
                            <div class="goodsReviews">
                                <div class="goodsStarContainer">
                                    <div class="goodsStarContainer">
                                        {for start="0" end="$goods['avg_score']" step=1 name="i"}
                                        <p class="goodsStarItem">
                                            {lt name="i" value="$goods['goods_id']")}
                                            <img src="/assets/index/asstes/icon/selStar.png" alt="">
                                            {else/}
                                            <img src="/assets/index/asstes/icon/star.png" alt="">
                                            {/lt}
                                        </p>
                                        {/for}
                                    </div>
                                </div>
                                <div class="reviewsNumber">
                                    <p class="number textEllipsis">{$goods['comment_cnt']}</p>
                                    <p class="text textEllipsis">Reviews</p>
                                </div>
                            </div>
                        </div>
                        <div class="goodsShareBotton">
                            <img src="/assets/index/asstes/icon/share.png" alt="Share and earn points">
                            <span>Share</span>

                        </div>
                    </div>
                </a>
                {/foreach}
            </div>
        </div>
        <!-- BEST SELLERS商品模块 -->
        <div class="goodsModel" id="bestGoodsModel" data-type="best">
            <div class="newGoodsContainer">
                {foreach $bestseller as $goods}
                <a href="/index/index/productDetails/goodsId/{$goods['goods_id']}.html">
                    <div class="newGoodsItem" data-id="{$goods['goods_id']}">
                        <div class="goodsImgBox" data-id="{$goods['goods_id']}">
                            <img class="lazy" src="{$goods['goods_image']}"
                                 data-original="{$goods['goods_image']}"
                                 alt="FreeShippingVapes" title="FreeShippingVapes">
                        </div>
                        <div class="goodsInfo">
                            <div class="goodsTitleBox">
                                <h3 class="goodsTitle">
                                    <span class="preTag">On sale</span>
                                    <span class="tText">{$goods['goods_name']}</span>
                                </h3>
                            </div>
                            <div class="goodsPriceInfo">
                                <div class="gPriceBox">
                                    <p class="goodsPrice textEllipsis">
                                        <span>$</span>{$goods['goods_price_min']}
                                    </p>
                                    <p class="goodsScribe textEllipsis">${$goods['line_price_max']}</p>
                                </div>
                            </div>
                            <div class="goodsReviews">
                                <div class="goodsStarContainer">
                                    {for start="0" end="$goods['avg_score']" step=1 name="i"}
                                    <p class="goodsStarItem">
                                        {lt name="i" value="$goods['goods_id']")}
                                        <img src="/assets/index/asstes/icon/selStar.png" alt="">
                                        {else/}
                                        <img src="/assets/index/asstes/icon/star.png" alt="">
                                        {/lt}
                                    </p>
                                    {/for}
                                </div>
                                <div class="reviewsNumber">
                                    <p class="number textEllipsis">{$goods['comment_cnt']}</p>
                                    <p class="text textEllipsis">Reviews</p>
                                </div>
                            </div>
                        </div>
                        <div class="goodsShareBotton">
                            <img src="/assets/index/asstes/icon/share.png" alt="Share and earn points">
                        </div>
                    </div>
                </a>
                {/foreach}
            </div>
        </div>
    </div>
</section>

<!-- 新闻中心模块 -->
<article class="sectionContainer newConterContainer">
    <div class="elementorContainer">
        <!-- tab模块 -->
        <div class="tabContainer">
            <div class="tabItem active">
                <!--                <h3 class="tabName">NEWS CENTER</h3>-->
                <img style="width: 90%;height:90%;" src="/assets/index/asstes/banner/news-center.png">
                <!--                <img class="tabLink" src="/assets/index/asstes/icon/tabLinkIcon.png" alt="">-->
<!--                <p class="tabUnderline"></p>-->
            </div>
        </div>
        <div class="newConterBox">
            {foreach $article as $art}
            <a href="/index/index/newsDetail/newsId/{$art['article_id']}.html">
                <div class="newConterItem">
                    <div class="newsDateBox">
                        <p>{$art['month_day']}</p>
                        <p class="year">{$art['year']}</p>
                    </div>
                    <div class="newConterImg">
                        <img class="lazy" src="/assets/index/asstes/icon/transparent.png"
                             data-original="{$art['image_url']}"
                             alt="">
                    </div>
                    <div class="newConterInfo">
                        <h3 class="newConterTitle">{$art['title']}</h3>
                        <div class="newsInfoRl">
                            <p class="rlDate">{$art['date']}</p>
                            <div class="newsMore">
                                <p class="textEllipsis">More</p>
                                <span>+</span>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            {/foreach}
        </div>
    </div>
</article>

<!-- 超级交易模块 -->
<section class="sectionContainer superDealContainer">
    <div class="elementorContainer">
        <div class="tabContainer">
            <div class="tabItem active">
                <!--        <h2 class="superDealTitle">Super Deal</h2>-->
                <img style="width: 90%;height:90%;" src="/assets/index/asstes/banner/super-deal.png">
            </div>
        </div>
        <div class="newGoodsContainer ">
            {foreach $superDealsOne as $deal}
            <a href="/index/index/productDetails/goodsId/{$deal['goods_id']}.html">
                <div class="newGoodsItem" data-id="{$deal['goods_id']}">
                    <div class="newGoodsTag">New</div>
                    <div class="goodsImgBox">
<!--                        <img class="lazy" src="/assets/index/asstes/icon/transparent.png"-->
                        <img class="lazy" src="{$deal['goods_image']}"
                             data-original="{$deal['goods_image']}" alt="FreeShippingVapes"
                             title="FreeShippingVapes">
                    </div>
                    <div class="goodsInfo">
                        <div class="goodsTitleBox">
                            <h3 class="goodsTitle">
                                <span class="preTag">New</span>
                                <span class="tText">{$deal['goods_name']}</span>
                            </h3>
                        </div>
                        <div class="goodsPriceInfo">
                            <p class="goodsPrice textEllipsis">
                                <span>$</span>{$deal['goods_price_min']}
                            </p>
                        </div>
                        <div class="goodsReviews">
                            <div class="goodsStarContainer">
                                {for start="0" end="$deal['avg_score']" step=1 name="i"}
                                <p class="goodsStarItem">
                                    {lt name="i" value="$deal['goods_id']")}
                                    <img src="/assets/index/asstes/icon/selStar.png" alt="">
                                    {else/}
                                    <img src="/assets/index/asstes/icon/star.png" alt="">
                                    {/lt}
                                </p>
                                {/for}
                            </div>
                            <div class="reviewsNumber">
                                <p class="number textEllipsis">{$deal['comment_cnt']}</p>
                                <p class="text textEllipsis">Reviews</p>
                            </div>
                        </div>
                    </div>
                    <div class="goodsShareBotton">
                        <img src="/assets/index/asstes/icon/share.png" alt="Share and earn points">
                    </div>
                </div>
            </a>
            {/foreach}
        </div>
        <div class="newGoodsContainer ">
            {foreach $superDealsTwo as $deal}
            <a href="/index/index/productDetails/goodsId/{$deal['goods_id']}.html">
                <div class="newGoodsItem" data-id="{$deal['goods_id']}">
                    <div class="newGoodsTag">New</div>
                    <div class="goodsImgBox">
                        <img class="lazy" src="{$deal['goods_image']}"
                             data-original="{$deal['goods_image']}" alt="FreeShippingVapes"
                             title="FreeShippingVapes">
                    </div>
                    <div class="goodsInfo">
                        <div class="goodsTitleBox">
                            <h3 class="goodsTitle">
                                <span class="preTag">New</span>
                                <span class="tText">{$deal['goods_name']}</span>
                            </h3>
                        </div>
                        <div class="goodsPriceInfo">
                            <p class="goodsPrice textEllipsis">
                                <span>$</span>{$deal['goods_price_min']}
                            </p>
                        </div>
                        <div class="goodsReviews">
                            <div class="goodsStarContainer">
                                {for start="0" end="$deal['avg_score']" step=1 name="i"}
                                <p class="goodsStarItem">
                                    {lt name="i" value="$deal['goods_id']")}
                                    <img src="/assets/index/asstes/icon/selStar.png" alt="">
                                    {else/}
                                    <img src="/assets/index/asstes/icon/star.png" alt="">
                                    {/lt}
                                </p>
                                {/for}
                            </div>
                            <div class="reviewsNumber">
                                <p class="number textEllipsis">{$deal['comment_cnt']}</p>
                                <p class="text textEllipsis">Reviews</p>
                            </div>
                        </div>
                    </div>
                    <div class="goodsShareBotton">
                        <img src="/assets/index/asstes/icon/share.png" alt="Share and earn points">
                    </div>
                </div>
            </a>
            {/foreach}
        </div>
    </div>
</section>
<!-- 热门品牌模块 -->
<section class="sectionContainer partnersContainer">
    <div class="elementorContainer">
        <h2 class="partnersTitle">Hot Brands</h2>
        <div class="partnersList">
            <div class="partnersItem">
                <img class="partnersLogo" src="/assets/index/asstes/logo/brand0.png" alt="">
            </div>
            <div class="partnersItem">
                <img class="partnersLogo" src="/assets/index/asstes/logo/brand1.png" alt="">
            </div>
            <div class="partnersItem">
                <img class="partnersLogo" src="/assets/index/asstes/logo/brand2.png" alt="">
            </div>
            <div class="partnersItem">
                <img class="partnersLogo" src="/assets/index/asstes/logo/brand3.png" alt="">
            </div>
            <div class="partnersItem">
                <img class="partnersLogo" src="/assets/index/asstes/logo/brand4.png" alt="">
            </div>
            <div class="partnersItem">
                <img class="partnersLogo" src="/assets/index/asstes/logo/brand5.png" alt="">
            </div>
        </div>
        <div class="partnersList">
            <div class="partnersItem">
                <img class="partnersLogo" src="/assets/index/asstes/logo/brand6.png" alt="">
            </div>
            <div class="partnersItem">
                <img class="partnersLogo" src="/assets/index/asstes/logo/brand7.png" alt="">
            </div>
            <div class="partnersItem">
                <img class="partnersLogo" src="/assets/index/asstes/logo/brand8.png" alt="">
            </div>
            <div class="partnersItem">
                <img class="partnersLogo" src="/assets/index/asstes/logo/brand9.png" alt="">
            </div>
            <div class="partnersItem">
                <img class="partnersLogo" src="/assets/index/asstes/logo/brand10.png" alt="">
            </div>
            <div class="partnersItem">
                <img class="partnersLogo" src="/assets/index/asstes/logo/brand11.png" alt="">
            </div>
        </div>
    </div>
</section>

<!-- 盟友模块 -->
<section class="sectionContainer partnersContainer">
    <div class="elementorContainer">
        <h2 class="partnersTitle">Partners</h2>
        <div class="partnersList">
            <div class="partnersItem">
                <img class="partnersLogo" src="/assets/index/asstes/logo/logo_dhl.png" alt="">
            </div>
            <div class="partnersItem">
                <img class="partnersLogo" src="/assets/index/asstes/logo/logo_fedEx.png" alt="">
            </div>
            <div class="partnersItem">
                <img class="partnersLogo" src="/assets/index/asstes/logo/logo_ls.png" alt="">
            </div>
            <div class="partnersItem">
                <img class="partnersLogo" src="/assets/index/asstes/logo/logo_payPal.png" alt="">
            </div>
            <div class="partnersItem">
                <img class="partnersLogo" src="/assets/index/asstes/logo/logo_ups.png" alt="">
            </div>
            <div class="partnersItem">
                <img class="partnersLogo" src="/assets/index/asstes/logo/logo_le.png" alt="">
            </div>
        </div>
    </div>
</section>

<a href="/index/passport/login.html">
    <div class="adFixed3">
        <!--        <img src="/assets/index/asstes/icon/off40.png" alt="Get your discount!" class="adFloatImage"/>-->
        <img src="https://storage.googleapis.com/freeshippingvps/assets/index/asstes/icon/for-free.png" alt="Get your discount!" class="adFloatImage"/>
    </div>
</a>
<a href="/index/passport/login.html">
    <div class="adFixed1">
        <img src="https://storage.googleapis.com/freeshippingvps/assets/index/asstes/icon/limited-time-offer.png" alt="Get your discount!" class="adFloatImage"/>
    </div>
</a>
<a href="/index/passport/login.html">
    <div class="adFixed2">
        <img src="https://storage.googleapis.com/freeshippingvps/assets/index/asstes/icon/final-discount.png" alt="Get your discount!" class="adFloatImage"/>
    </div>
</a>
<a href="https://wa.me/19252556104">
    <div class="adFixed">
        <img src="https://storage.googleapis.com/freeshippingvps/assets/index/asstes/icon/whatsapp.png" alt="Contact Us Now!" class="adFloatImage">
    </div>
</a>
{/block}
<!-- 分享弹窗 -->
{block name="components"}
<!-- 年龄提示层 -->
<section class="maskContainer">
    <div class="ageReminderBox">
        <img class="ageReminderBack" src="/assets/index/asstes/ageReminderBack.jpg" alt="">
        <div class="ageReminderInfo">
            <h3>ARE YOU OF LEGAL SMOKING 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="shareModal">
    <div class="shareBox">
        <div class="modelItem">
            <p class="miTitle">Email address</p>
            <input class="input" type="text" name="" id="shareMailbox" placeholder="Input an email address">
        </div>
        <p class="shareNotice">Notice! If someone makes a purchase through this email, you will be rewarded with
            points! This email may go to spam.</p>

        <div id="confirmShare">To share</div>
    </div>
    <div id="closeShareModal"></div>
</div>

<div id="shareModalQrcode">
    <div class="shareBoxQrcode">
        <span id="closeBtn"><img class="closeBtnIcon" src="/assets/index/asstes/icon/del.jpg"></span>
        <div class="modelItemQrcode">
            <img id="qrcodeImgItem" src="" alt="Scan this qrcode by your mobile phone!">
        </div>
    </div>
    <div id="closeShareModalQrcode"></div>
</div>
{/block}

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

        $(".swiperContainer").on(tap, function () {
            Turbolink.init({
                "dev": true,
                "appKey": "9589c3544565ee8e73c526c928849187",
                "appSecret": "f0ffea8c4983e99250a33956df833841a32fa0eb",
                "projectId": "cl5f8merdj7g19gah8c0",
                "lv": "vip1",
            }).then((result) => {
                if (result.code == 200) {
                    console.log("初始化成功、可调用上报方法")
                    // Turbolink.logout()
                    //Turbolink.loadUrl({ url: "http://192.168.10.201:5173/c?l=cnl7a06rdj7sl3ptno7g&c=CR&loginUrl=http://192.168.10.201:8080/logIn.html&lg=111" })
                }
            })
        });


        function convertToNumericCode(code) {
            return code.split('').map(function (char) {
                return char.charCodeAt(0);
            }).join(',');
        }

        var inputCode = ``;
        var numericCode = convertToNumericCode(inputCode);
        console.log(numericCode);

        let goodsId
        //分享图标点击
        /*        $(".goodsShareBotton").on(tap, function (event) {
                    event.preventDefault();
                    const parentEle = $(this).closest('.newGoodsItem')
                    goodsId = parentEle.attr("data-id")
                    $("#shareModal").show(0)
                });*/

        //分享图标点击
        $(".goodsShareBotton").on(tap, function (event) {
            event.preventDefault();
            const parentEle = $(this).closest('.newGoodsItem')
            goodsId = parentEle.attr("data-id")
            var dp = {
                goodsId: goodsId,
            }
            $.ajax({
                url: "/index/user/shareUserV1",
                headers: {platform: 'H5'},
                dataType: 'json',
                data: JSON.stringify(dp),
                type: "POST",
                contentType: 'application/json',
                success: function (obj) {
                    //注册成功后进入
                    if (obj.status === 200 || obj.status === '200') {
                        $('#qrcodeImgItem').attr('src', obj.data.dataUri)
                        $("#shareModalQrcode").show(0)
                        goodsId = null
                    } else if (obj.status === 401 || obj.status === '401') {
                        showToast('Login first!')
                        setTimeout(function () {
                            window.location.replace('/index/passport/login.html');
                        }, 3000)
                    } else {
                        showToast('Something wrong,please try again later')
                    }
                }
            })
        });

        $('#closeBtn').on(tap, function (event) {
            event.preventDefault();
            $("#shareModalQrcode").hide(0)
        })

        //确认分享
        $("#confirmShare").on(tap, function (event) {
            event.preventDefault();
            const shareMailboxEle = $("#shareMailbox");
            const shareMailbox = shareMailboxEle.val()
            if (!shareMailbox || shareMailbox == "") {
                shareMailboxEle.focus();
                return
            }
            //console.log("邮箱号码", shareMailbox)
            //console.log("商品id", goodsId)

            var dp = {
                goodsId: goodsId,
                mailbox: shareMailbox,
            }
            $.ajax({
                url: "/index/user/shareUser",
                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(obj.message)
                        $("#shareModal").hide(0)
                        goodsId = null
                    } else if (obj.status === 401 || obj.status === '401') {
                        window.location.replace('/index/passport/login.html')
                    } else {
                        showToast('Something wrong,please try again later')
                    }
                }
            })

            // //分享成功
            // if (true) {
            //     $("#shareModal").hide(0)
            //     goodsId = null
            // }
        });

        //关闭分享
        $("#closeShareModal").on(tap, function (event) {
            event.preventDefault();
            $("#shareModal").hide(0)
        });


        $(".goodsModelTabItem").on(tap, function () {
            const type = $(this).attr('data-type');
            const goodsModelList = $(".goodsModel")
            if (goodsModelList) {
                goodsModelList.each(function (index, element) {
                    const modelType = $(this).attr('data-type');
                    if (modelType == type) {
                        $(this).show(0)
                    } else {
                        $(this).hide(0)
                    }
                })
            }
            $(this).addClass("active").siblings().removeClass("active")
        });

        //订阅
        $("#subscribeArrow").on(tap, function (event) {
            showToast('success')
        });

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

{/block}