master

分支 (1)

管理

管理

master

operator-web
/
product-detail-ztapp.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <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">
    <style>
        html{
            height: 100%;
            overflow-y: hidden;
        }
        body{
            height: 100%;
            overflow-y: auto;
        }
        .anniu{
            background-color: #9a9a9a;color: blue;padding: 10px 15px;margin-top: 20px;border-radius: 10px;cursor: pointer;
        }
        .appImg{
            width: 100px;height: 100px;border-radius: 10px;margin: auto;
        }
    </style>
</head>
<body>

<div class="container" style="margin-top: 20px;margin-bottom: 50px;">
    <h2 style="margin: 20px 0;">掌上营业厅APP</h2>
    <div>
        <div>
            <img id="appImg" src="img/banner.jpg" style="width: 80%;height: 260px;">
        </div>
        <div style="display: flex;margin-top: 10px;width: 80%;">
            <div style="width: 40%;">
                <h5>什么是掌上营业厅APP?</h5>
                <span style="font-size: 13px;color: #BBBBBB;" id="intro">
                    ETL掌上营业厅是ETL有限公司旗下产品，ETL客户可自行操作其中所含的系列功能。 APP支持四种语言(老挝语,英语，中文和越南语)。此APP提供的功能包括基本信息查询(余额，欠费，积分和流量包) ，面向预付费和后付费客户的充值卡充值，预付费客户余额转账，购买流量包，购买ETL WiFi热点包，查询或订购增值业务，后付费客户邮箱账单，查询或支付ADSL网络费用，线上选号，还可以查询当前的促销活动，漫游资费，长途电话资费等。
                </span>
            </div>
            <div id="app" style="width: 60%;display: flex;justify-content: space-around;font-size: 13px;">
<!--                <div>-->
<!--                    <div style="display: flex;">-->
<!--                        <img src="img/banner.jpg" class="appImg">-->
<!--                    </div>-->
<!--                    <div class="anniu">-->
<!--                        下载手机营业厅APP（安卓端）-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div>-->
<!--                    <div style="display: flex;">-->
<!--                        <img src="img/banner.jpg" class="appImg">-->
<!--                    </div>-->
<!--                    <div class="anniu">-->
<!--                        下载手机营业厅APP（IOS端）-->
<!--                    </div>-->
<!--                </div>-->
            </div>
        </div>
        <div style="margin-top: 20px;width: 80%;display: flex;">
            <div style="width: 60%;display: flex;justify-content: space-around;">
                <img src="img/banner.jpg" id="image1" style="width: 30%;height: 260px;">
                <img src="img/banner.jpg" id="image2" style="width: 30%;height: 260px;">
                <img src="img/banner.jpg" id="image3" style="width: 30%;height: 260px;">
            </div>
            <div style="width: 40%;">
                <h5>如何使用?</h5>
                <span style="font-size: 13px;color: #BBBBBB;" id="useMethod">
                    卡充值，预付费客户余额转账，购买流量包，购买ETL WiFi热点包，查询或订购增值业务
                </span>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery/jquery.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 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);
        ztappDataInit();
    }

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

    var ztappData = {};
    function ztappDataInit(){
        if (defaultLang == "zh") {
            $('#intro').html(ztappData.operatorApp.introZh);
            $('#useMethod').html(ztappData.operatorApp.useMethodZh);
        } else if (defaultLang == "la") {
            $('#intro').html(ztappData.operatorApp.introLao);
            $('#useMethod').html(ztappData.operatorApp.useMethodLao);
        } else if (defaultLang == "en") {
            $('#intro').html(ztappData.operatorApp.introEn);
            $('#useMethod').html(ztappData.operatorApp.useMethodEn);
        }
        let s = "";
        if (ztappData.android != ""){
            s = s + "<div>\n" +
                "                    <div style=\"display: flex;\">\n" +
                "                        <img src=\""+ztappData.android.picture+"\" class=\"appImg\">\n" +
                "                    </div>\n" +
                "                    <div onclick='download(1)' class=\"anniu\">\n" +
                "                        下载手机营业厅APP（安卓端）\n" +
                "                    </div>\n" +
                "                </div>";
        }
        if (ztappData.ios != ""){
            s = s + "<div>\n" +
                "                    <div style=\"display: flex;\">\n" +
                "                        <img src=\""+ztappData.ios.picture+"\" class=\"appImg\">\n" +
                "                    </div>\n" +
                "                    <div onclick='download(2)' class=\"anniu\">\n" +
                "                        下载手机营业厅APP（IOS端）\n" +
                "                    </div>\n" +
                "                </div>";
        }
        $("#app").html(s);
    }

    //下载APP
    function download(index){
        if (index == 1){
            let url = HOST+"webapi/product/download?id="+ztappData.android.id;
            window.open(url);
        }else if (index == 2){
            let url = HOST+"webapi/product/download?id="+ztappData.ios.id;
            window.open(url);
        }
    }

    $(function (){
        search();
    })
    function search() {
        $.ajax({
            url: HOST+"webapi/product/getOperatorApp",
            type: "GET",
            success: function (res) {
                $("#appImg").attr("src",res.data.operatorApp.picture);
                $("#image1").attr("src",res.data.operatorApp.image1);
                $("#image2").attr("src",res.data.operatorApp.image2);
                $("#image3").attr("src",res.data.operatorApp.image3);
                ztappData = res.data;
                ztappDataInit();
            }
        })
    }

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