master

分支 (1)

管理

管理

master

operator-web
/
packageDetail.html

<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="robots" content="noindex, follow"/>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/plugins.min.css">
    <link rel="stylesheet" href="css/vendor.min.css">
    <link rel="stylesheet" href="css/style.min.css">
    <script src="js/jquery/jquery.min.js"></script>
    <style>
        .section-space-top-100{
            padding-top: 30px;
        }
        html{
            height: 100%;
            overflow-y: hidden;
        }
        body{
            height: 100%;
            overflow-y: auto;
        }
    </style>
</head>

<body>
<div class="main-wrapper">
    <main class="main-content">
        <div class="single-product-area section-space-top-100">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="single-product-img">
                            <div class="single-img img-zoom-effect">
                                <img class="img-full"
                                     src="http://store.etllao.com/wp-content/uploads/2020/10/WhatsApp-Image-2021-11-24-at-9.35.14-PM.jpeg"
                                     alt="Product Image">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 pt-9 pt-lg-0">
                        <div class="single-product-content with-sticky">
                            <h2 class="title">腾讯大王卡2.0（网厅）</h2>
                            <div class="price-box pb-1">
                                <span class="new-price text-danger" id="price">￥80.00</span>
                            </div>
                            <div id="detail-info">

                            </div>
                            <div id="guige-box">
                                <div class="selector-wrap pb-6">
                                    <span>周期</span>
                                    <select class="nice-select wide rounded-0 period" id="period">
                                        <option value="default">请选择周期</option>
                                        <option value="three">三年</option>
                                        <option value="long">长期</option>
                                    </select>
                                </div>
                            </div>
                            <p class="mb-6" id="Total-price"></p>
                            <ul class="quantity-with-btn pb-7">
                                <li class="quantity">
                                    <div class="cart-plus-minus">
                                        <input class="cart-plus-minus-box" value="1" type="text">
                                    </div>
                                </li>
                                <li class="add-to-cart">
                                    <a class="btn btn-custom-size lg-size btn-primary btn-secondary-hover rounded-0"
                                       id="add" onclick="puanduan()" >加入购物车</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="product-tab-area section-space-top-100">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <ul class="nav product-tab-nav product-tab-style-2" role="tablist">
                            <li class="nav-item" role="presentation">
                                <a class="active btn btn-custom-size" id="description-tab" data-bs-toggle="tab"
                                   href="#description" role="tab" aria-controls="description" aria-selected="true">
                                    商品信息
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content product-tab-content">
                            <div class="tab-pane fade show active" id="description" role="tabpanel"
                                 aria-labelledby="description-tab">
                                <div class="product-description-body">
                                    <p class="short-desc mb-0">描述:SIM 4G卡</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="product-slider-area section-space-top-95 section-space-bottom-100">
            <div class="container">
                <div class="section-title text-center pb-55">
                    <h2 class="title mb-0">商品推荐</h2>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="swiper-slider-holder swiper-arrow">
                            <div class="swiper-container product-slider border-issue">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <div class="product-item">
                                            <div class="product-img img-zoom-effect">
                                                <a href="single-product.html">
                                                    <img class="img-full"
                                                         src="http://store.etllao.com/wp-content/uploads/2020/10/WhatsApp-Image-2021-11-24-at-9.35.14-PM.jpeg"
                                                         alt="Product Images">
                                                </a>
                                                <div class="product-add-action">
                                                    <ul>
                                                        <li>
                                                            <a href="cart.html">
                                                                <i class="pe-7s-cart"></i>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="compare.html">
                                                                <i class="pe-7s-shuffle"></i>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="wishlist.html">
                                                                <i class="pe-7s-like"></i>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="product-content texx">
                                                <a class="product-name" href="single-product.html">腾讯5G卡</a>
                                                <div class="price-box pb-1">
                                                    <span class="new-price">￥80.00</span>
                                                </div>
                                                <div class="rating-box">
                                                    <ul>
                                                        <li><i class="pe-7s-star"></i></li>
                                                        <li><i class="pe-7s-star"></i></li>
                                                        <li><i class="pe-7s-star"></i></li>
                                                        <li><i class="pe-7s-star"></i></li>
                                                        <li><i class="pe-7s-star"></i></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="product-item">
                                            <div class="product-img img-zoom-effect">
                                                <a href="single-product.html">
                                                    <img class="img-full"
                                                         src="http://store.etllao.com/wp-content/uploads/2020/10/WhatsApp-Image-2021-11-24-at-9.35.14-PM.jpeg"
                                                         alt="Product Images">
                                                </a>
                                                <div class="product-add-action">
                                                    <ul>
                                                        <li>
                                                            <a href="cart.html">
                                                                <i class="pe-7s-cart"></i>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="compare.html">
                                                                <i class="pe-7s-shuffle"></i>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="wishlist.html">
                                                                <i class="pe-7s-like"></i>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="product-content texx">
                                                <a class="product-name" href="single-product.html">企鹅会员卡</a>
                                                <div class="price-box pb-1">
                                                    <span class="new-price">￥80.00</span>
                                                </div>
                                                <div class="rating-box">
                                                    <ul>
                                                        <li><i class="pe-7s-star"></i></li>
                                                        <li><i class="pe-7s-star"></i></li>
                                                        <li><i class="pe-7s-star"></i></li>
                                                        <li><i class="pe-7s-star"></i></li>
                                                        <li><i class="pe-7s-star"></i></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="product-item">
                                            <div class="product-img img-zoom-effect">
                                                <a href="single-product.html">
                                                    <img class="img-full"
                                                         src="http://store.etllao.com/wp-content/uploads/2020/10/WhatsApp-Image-2021-11-24-at-9.35.14-PM.jpeg"
                                                         alt="Product Images">
                                                </a>
                                                <div class="product-add-action">
                                                    <ul>
                                                        <li>
                                                            <a href="cart.html">
                                                                <i class="pe-7s-cart"></i>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="compare.html">
                                                                <i class="pe-7s-shuffle"></i>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="wishlist.html">
                                                                <i class="pe-7s-like"></i>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="product-content texx">
                                                <a class="product-name" href="single-product.html">QQ音乐会员卡</a>
                                                <div class="price-box pb-1">
                                                    <span class="new-price">￥80.00</span>
                                                </div>
                                                <div class="rating-box">
                                                    <ul>
                                                        <li><i class="pe-7s-star"></i></li>
                                                        <li><i class="pe-7s-star"></i></li>
                                                        <li><i class="pe-7s-star"></i></li>
                                                        <li><i class="pe-7s-star"></i></li>
                                                        <li><i class="pe-7s-star"></i></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="product-item">
                                            <div class="product-img img-zoom-effect">
                                                <a href="single-product.html">
                                                    <img class="img-full"
                                                         src="assets/images/product/medium-size/1-12-270x300.jpg"
                                                         alt="Product Images">
                                                </a>
                                                <div class="product-add-action">
                                                    <ul>
                                                        <li>
                                                            <a href="cart.html">
                                                                <i class="pe-7s-cart"></i>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="compare.html">
                                                                <i class="pe-7s-shuffle"></i>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="wishlist.html">
                                                                <i class="pe-7s-like"></i>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="product-content texx">
                                                <a class="product-name" href="single-product.html">流量大王卡</a>
                                                <div class="price-box pb-1">
                                                    <span class="new-price">￥60.00</span>
                                                </div>
                                                <div class="rating-box">
                                                    <ul>
                                                        <li><i class="pe-7s-star"></i></li>
                                                        <li><i class="pe-7s-star"></i></li>
                                                        <li><i class="pe-7s-star"></i></li>
                                                        <li><i class="pe-7s-star"></i></li>
                                                        <li><i class="pe-7s-star"></i></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Add Arrows -->
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <div class="footer-area">
        <div class="footer-bottom py-3" data-bg-color="#1EB9EE" style="background-color: rgb(30, 185, 238);">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="copyright">
                            <span class="copyright-text text-white">Copyright © 2023.LAO Asia Unicom All rights reserved.</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a class="scroll-to-top" href="">
        <i class="fa fa-chevron-up"></i>
    </a>
</div>
<script src="layui/layui.js"></script>
<script src="js/config.js"></script>
<script src="js/token.js"></script>
<script src="js/getcart.js"></script>
<script src="js/vendor.min.js"></script>
<script src="js/plugins.min.js"></script>
<script src="js/jquery.i18n.min.js"></script>
<script src="js/multi_lang_config.js"></script>

</body>
<script>

    var layer = layui.layer;
    var form = layui.form;

    var moduleName = "shop";
    var defaultLang = layui.data('langTab').langType;
    initLangConfig({
        defaultLang:defaultLang,
        filePath: "js/i18n/"+moduleName+"/",
        module:moduleName,
        base:"js/"
    })
    var i18np = null;
    function changeLang(lang) {
        defaultLang = lang;
        reloadI18n({
            defaultLang:lang,
            filePath: "js/i18n/"+moduleName+"/",
            module:moduleName,
        })
        i18np.loadProperties(moduleName);
    }

    layui.config({base: 'js/'})
        // 继承treetable.js插件
        .extend({i18np: 'i18n'}).use([ 'i18np','jquery'], function () {
        i18np = layui.i18np;
        i18np.loadProperties(moduleName);
    });

    // 添加到购物车
    var price = 0;
    function puanduan() {
        var gid = GetQueryString("gid");
        $.ajax({
            url:HOST+"webapi/cart/addgood",
            headers:{"token":localStorage.getItem("token")},
            type:"post",
            data:{"gid":gid,"num":$(".cart-plus-minus-box").val(),"guiges":'',"money":price,"username":localStorage.getItem("laoName"),"userId":localStorage.getItem("userId")},
            success:function (res) {
                if(res.code==200){
                    localStorage.setItem("userId",res.data);
                    getCarts();
                    $(".offcanvas-minicart_wrapper").addClass("open")
                }
            }
        });
    }
    // 查询商品详情
    var gid = GetQueryString("gid");
    $.ajax({
        url: HOST + "webapi/goods/getGoodsById",
        data:{gid:gid},
        headers:{lang:"en"},
        success: function (res) {
            if(res.code==200){
                $(".single-product-area .img-full").attr("src",res.data.picture);
                $(".single-product-content .title").html(res.data.nameEn);
                $("#price").html(res.data.price+"₭");
                $("#detail-info").html(res.data.detailZh);
                price = res.data.price;
                $(".short-desc").html(res.data.detailZh);
                var guige = JSON.parse(res.data.guigeZh);
               if(guige!=null){
                   let s='';
                   for (let i = 0; i < guige.names.length; i++) {
                       s+=`<div class="selector-wrap pb-6">
                                    <span>${guige.names[i]}</span>
                                    <select class="nice-select wide rounded-0 period" id="${guige.names[i]}" onclick="puanduan()">
                                        <option value="default">请选择周期</option>
                                        <option value="three">三年</option>
                                        <option value="long">长期</option>
                                    </select>
                       </div>`;
                   }
               }else{
                   $("#guige-box").hide();
               }
            }
        }
    })
</script>

</html>