master

分支 (1)

管理

管理

master

operator-web
/
product-detail-swk.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="icon" href="img/favicon.ico">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/vendor.min.css">
    <link rel="stylesheet" href="css/plugins.min.css">
    <link rel="stylesheet" href="css/style.min.css">
    <script src="js/jquery/jquery.min.js"></script>
    <style>
        /* 图片 */
        .page {
            width: 100%;
            height: 100%;
            display: none;
        }
        .page img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .active {
            display: block;
        }
        /* 控制图片翻页的按钮的样式 */
        .pic-btn {
            display: inline-block;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            background-color: #006FB7;
            text-align: center;
            line-height: 50px;
            border: none;
            color: white;
            font-size: 40px;
            z-index: 100;
            opacity: .8;
        }
        .pic-btn:hover {
            opacity: 1;
        }
        .picbox-btn {
            visibility: hidden;
            width: 554px;
            position: absolute;
            top: 188.75px;
            display: flex;
            justify-content: space-between;
        }
        /* 鼠标移上后显示翻页 */
        #pic_box:hover + .picbox-btn, .picbox-btn:hover {
            visibility: visible;
        }
        .pwdetable-box {
            margin-top: 40px;
            padding: 0px 30px;
        }
        .pwde-table {
            width: 100%;
            text-align: center;
            border: solid 1px black;
        }
        .pwde-tr {
            background-color: #006fb7;
        }
        .pwde-table tr, td, th {
            height: 50px;
            border: solid 1px black;
        }
        html{
            height: 100%;
            overflow-y: hidden;
        }
        body{
            height: 100%;
            overflow-y: auto;
        }
        .aaa{
            padding:0 15px;height:35px;line-height:32px;font-size:14px;text-transform:uppercase
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-lg-6">
            <div class="single-product-img position-relative h-100">
                <div class="swiper-container single-product-slider" id="pic_box">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <a class="single-img gallery-popup page" id="pic_bac01">
                                <img class="img-full" src="" style="width: 540px;height: 380px;" id="pic_bac02">
                            </a>
                            <a class="single-img gallery-popup page" id="pic_bac11">
                                <img class="img-full" src="" style="width: 540px;height: 380px;" id="pic_bac12">
                            </a>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
                <div class="picbox-btn">
                    <button id="prev-btn" class="pic-btn"> <</button>
                    <button id="next-btn" class="pic-btn"> ></button>
                </div>
                <div class="col-12 order-lg-2 order-1 pt-10 pt-lg-0">
                    <div class="swiper-container single-product-thumbs">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="product-thumb-with-content row">
                <div class="col-12 order-lg-1 order-2 pt-10 pt-lg-0">
                    <div class="single-product-content">
                        <h2 class="title">上网卡4.5G</h2>
                        <p class="short-desc mb-6" id="detail">此商品的详情介绍</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="margin-top: 50px;">
        <table class="pwde-table">
            <thead>
                <tr class="pwde-tr" style="color: white;">
                    <th width="20%">套餐</th>
                    <th width="20%">订购方式</th>
                    <th width="20%">价格（基普）</th>
                    <th width="20%">流量/有效期</th>
                    <th width="20%">天</th>
                </tr>
            </thead>
            <tbody id="test"></tbody>
        </table>
    </div>
</div>
<div class="product-tab-area section-space-top-100" style="padding-bottom: 50px;">
    <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 aaa" id="description-tab" data-bs-toggle="tab"
                           href="#description" role="tab" aria-controls="description" aria-selected="true">
                            产品
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="btn aaa" id="reviews-tab" data-bs-toggle="tab" href="#reviews" role="tab"
                           aria-controls="reviews" aria-selected="false">
                            如何注册SIM卡
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="btn aaa" id="article-tab" data-bs-toggle="tab" href="#article" role="tab"
                           aria-controls="article" aria-selected="false">
                            如何查询余额和充值
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="btn aaa" id="xiujian-tab" data-bs-toggle="tab" href="#xiujian" role="tab"
                           aria-controls="xiujian" aria-selected="false">
                            号码条款
                        </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" id="product">文本占位1</p>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="reviews" role="tabpanel" aria-labelledby="reviews-tab">
                        <div class="product-review-body">
                            <p class="short-desc mb-0" id="regist">文本占位2</p>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="article" role="tabpanel" aria-labelledby="article-tab">
                        <div class="product-review-body">
                            <p class="short-desc mb-0" id="queryAndRecharge">文本占位3</p>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="xiujian" role="tabpanel" aria-labelledby="xiujian-tab">
                        <div class="product-review-body">
                            <p class="short-desc mb-0" id="term">文本占位4</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/vendor.min.js"></script>
<script src="js/plugins.min.js"></script>
<script src="js/main.min.js"></script>
<script src="layui/layui.js"></script>
<script src="js/token.js"></script>
<script src="js/config.js"></script>
<script src="js/jquery.i18n.min.js"></script>
<script src="js/multi_lang_config.js"></script>
<script>

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

    var carousel = layui.carousel;
    //建造实例
    carousel.render({
        elem: '#test1'
        , width: '100%' //设置容器宽度
        , arrow: 'always' //始终显示箭头
        // ,anim: 'updown' //切换动画方式
    });
    $("#test1").css("height", '350px');

    var moduleName = "subMain";
    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);
        swkDataInit();
    }

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

    var swkData = {};

    function swkDataInit() {
        if (defaultLang == "zh") {
            $('#detail').html(swkData.detailZh);
            $('#product').html(swkData.productZh);
            $('#regist').html(swkData.registZh);
            $('#expenses').html(swkData.expensesZh);
            $('#queryAndRecharge').html(swkData.queryAndRechargeZh);
            $('#term').html(swkData.termZh);
        } else if (defaultLang == "la") {
            $('#detail').html(swkData.detailLao);
            $('#product').html(swkData.productLao);
            $('#regist').html(swkData.registLao);
            $('#expenses').html(swkData.expensesLao);
            $('#queryAndRecharge').html(swkData.queryAndRechargeLao);
            $('#term').html(swkData.termLao);
        } else if (defaultLang == "en") {
            $('#detail').html(swkData.detailEn);
            $('#product').html(swkData.productEn);
            $('#regist').html(swkData.registEn);
            $('#expenses').html(swkData.expensesEn);
            $('#queryAndRecharge').html(swkData.queryAndRechargeEn);
            $('#term').html(swkData.termEn);
        }
    }

    //页面数据查询返回
    function search() {
        $.ajax({
            url: HOST+"webapi/fufei/getFufeiByType?type=3",
            type: "GET",
            success: function (res) {
                $("#pic_bac01").attr("href", res.data.activePicture);
                $("#pic_bac02").attr("src", res.data.activePicture);
                $("#pic_bac11").attr("href", res.data.picture);
                $("#pic_bac12").attr("src", res.data.picture);
                swkData = res.data;
                swkDataInit();
            }
        })
        $.ajax({
            url: HOST + "webapi/combo/getComboByPage?type=2",
            type: "GET",
            success: function (res) {
                var trRow = res.data;
                var str1 = "";
                for (var i = 0; i < trRow.length; i++) {
                    str1 += "<tr>" + "<td>" + trRow[i].comboName + "</td>" +
                        "<td>" + trRow[i].orderMethod + "</td>" +
                        "<td>" + trRow[i].price + "</td>" +
                        "<td>" + trRow[i].value + "</td>" +
                        "<td>" + trRow[i].day + "</td>" +
                        "</tr>";
                }
                test.innerHTML = str1;
            }
        })
    }

    $(function () {
        search();
        //翻页效果的实现
        const pages = document.querySelectorAll('.page');
        let currentPage = 0;

        function showPage(pageIndex) {
            pages.forEach((page, index) => {
                if (index === pageIndex) {
                    page.classList.add('active');
                } else {
                    page.classList.remove('active');
                }
            });
        }

        $('#prev-btn').on('click', function () {
            if (currentPage > 0) {
                currentPage--;
                showPage(currentPage);
            }
        })
        $('#next-btn').on('click', function () {
            if (currentPage < pages.length - 1) {
                currentPage++;
                showPage(currentPage);
            }
        })
        //显示图片
        showPage(currentPage);
    })

</script>
</body>
</html>