dayuan
/
manyi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="author" content=""/>
    <meta name="description" content=""/>
    <meta name="keywords" content="扫码支付，线上投币，运营数据，物联网"/>
    <meta name="format-detection" content="telphone=no,email=no"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>品牌形象设置</title>
    <link rel="stylesheet" href="https://cdn.washpayer.com/components/lib/mui.min.css"/>
    <link rel="stylesheet" href="../components/custom/css/common.css"/>
    <link rel="stylesheet" href="/app/css/xyf.common.min.css"/>
    <style>

        .strong {
            padding: 2px 5px;
            font-size: 12px;
            color: #fff;
            background: red;
            border-radius: 3px;
        }

        .phone-change-show{
            display: none;
        }
    </style>
</head>
<body>
<div class="input-group-vertical">
    <h5 class="mui-content-padded c-black">品牌名称 <span class="strong">限20个字</span></h5>
    <div class="input-row input-clear">
        <input type="text" maxlength="20" placeholder="品牌名称" id="productName">
    </div>

    <h5 class="mui-content-padded c-black">品牌Logo <span class="strong">10MB以内</span></h5>
    <div class="input-row input-clear  padding-10">
        <div class="mui-col-xs-4 padding-5">
            <div class="upload-pic">
                <i class="delpic mui-hidden" key="productLogo">x</i>
                <i class="iconfont icon-add-more"></i>
                <input id="brandPic" type="file" draggable="false" accept="image/*">
                <img class="mui-hidden" src="">
            </div>
        </div>
    </div>

    <h5 class="mui-content-padded c-black">公众号二维码 <span class="strong">10MB以内</span></h5>
    <div class="input-row input-clear  padding-10">
        <div class="mui-col-xs-4 padding-5">
            <div class="upload-pic">
                <i class="delpic mui-hidden" key="gzhServiceQrcodeUrl">x</i>
                <i class="iconfont icon-add-more"></i>
                <input id="gzhQrcodePic" type="file" draggable="false" accept="image/*">
                <img class="mui-hidden" src="">
            </div>
        </div>
    </div>

    <div id="titleInfo" class="mui-hidden">
        <h5 class="mui-content-padded c-black">二维码上标题</h5>
        <div class="input-row input-clear">
            <textarea placeholder="上标题" id="title"></textarea>
        </div>

        <h5 class="mui-content-padded c-black">二维码下标题</h5>
        <div class="input-row input-clear">
            <textarea placeholder="下标题" id="desc"></textarea>
        </div>
    </div>

    <h5 class="mui-content-padded c-black">客服名称 <span class="strong">限20个字</span></h5>
    <div class="input-row input-clear">
        <input type="text" maxlength="20" placeholder="客服名称" id="serviceName">
    </div>

    <div class="phone-change-show">
        <h5 class="mui-content-padded c-black">人机交互验证</h5>
        <div class="input-row" id="captcha" style="min-height: 46px">
        </div>
    </div>

    <h5 class="mui-content-padded c-black">客服电话</h5>
    <div class="input-row input-clear">
        <input type="tel" maxlength="11" placeholder="电话" id="servicePhone">
    </div>
    <div class="input-row code input-clear phone-change-show">
        <input id="code" type="tel" maxlength="4" placeholder="验证码">
        <button id="sendBtn" type="button" disabled>验证短信</button>
    </div>

    <h5 class="mui-content-padded c-black">微信二维码 <span class="strong">10MB以内</span></h5>
    <div class="input-row input-clear  padding-10">
        <div class="mui-col-xs-4 padding-5">
            <div class="upload-pic">
                <i class="delpic mui-hidden" key="serviceQrcodeUrl">x</i>
                <i class="iconfont icon-add-more"></i>
                <input id="qrcodePic" type="file" draggable="false" accept="image/*">
                <img class="mui-hidden" src="">
            </div>
        </div>
    </div>

</div>
<div class="subt">
    <input class="mui-btn-block" type="button" value="保存" onclick="save()">
</div>

</body>
<script src="https://cdn.washpayer.com/components/lib/jquery.min.js"></script>
<script src="https://cdn.washpayer.com/components/lib/mui.min.js"></script>
<script charset="utf-8" src="//g.alicdn.com/sd/nch5/index.js?t=2015052012"></script>
<script src="/components/lib/image-compressor.min.js"></script>
<script src="/components/custom/js/common.js"></script>
<script src="/app/js/xyf.common.js"></script>
<script>
    var $gzhqrcodeInput = $('#gzhQrcodePic');
    var $qrcodeInput = $('#qrcodePic');
    var $brandPic = $('#brandPic');
    var productLogo = "";
    var gzhServiceQrcodeUrl = "";
    var serviceQrcodeUrl = "";
    var basicConfig = {
        imgPrefix: ""
    };

    function myImageCompressor(file, callback) {
        if (window.ImageCompressor) {
            const imageCompressor = new ImageCompressor();
            if (file) {
                imageCompressor.compress(file, {
                    quality: .7,
                    // logo图片不需要太清晰，也不需要太大
                    maxWidth: 800,
                    maxHeight: 800,
                    success: function (result) {
                        var formData = new FormData();
                        formData.append('file', result, result.name);

                        if (callback) {
                            callback(formData);
                        }
                    }
                })
            }
        } else {
            //图片插件未加载完成提示
            mui.toast("图片上传工具未加载，刷新页面重试...");
        }
    }

    var oldPhone = ''

    //获取基本信息
    $(function () {
        var url = "/agent/getAgentInfo";
        var data = {};
        sendRequest(url, "GET", data, function (res) {
            if (res.result == 1) {
                var para = res.para;

                var productName = para.productName || '';
                if (productName.indexOf('微付乐') > -1) {
                    $('#titleInfo').removeClass('mui-hidden')
                }

                $("#productName").val(productName);
                $("#title").val(para.title || '');
                $("#desc ").val(para.desc || '');
                $("#serviceName").val(para.serviceName);
                $("#servicePhone").val(para.servicePhone);
                oldPhone = para.servicePhone
                gzhServiceQrcodeUrl = para.gzhServiceQrcodeUrl;
                serviceQrcodeUrl = para.serviceQrcodeUrl;
                productLogo = para.productLogo;

                if (serviceQrcodeUrl && serviceQrcodeUrl != "") {
                    $qrcodeInput.siblings('.iconfont').addClass('mui-hidden');
                    $qrcodeInput.siblings('img').attr('src', serviceQrcodeUrl).removeClass('mui-hidden');
                    $qrcodeInput.siblings('.delpic').removeClass('mui-hidden');
                }

                if (gzhServiceQrcodeUrl && gzhServiceQrcodeUrl != "") {
                    $gzhqrcodeInput.siblings('.iconfont').addClass('mui-hidden');
                    $gzhqrcodeInput.siblings('img').attr('src', gzhServiceQrcodeUrl).removeClass('mui-hidden');
                    $gzhqrcodeInput.siblings('.delpic').removeClass('mui-hidden');
                }

                if (productLogo && productLogo != "") {
                    $brandPic.siblings('.iconfont').addClass('mui-hidden');
                    $brandPic.siblings('img').attr('src', productLogo).removeClass('mui-hidden');
                    $brandPic.siblings('.delpic').removeClass('mui-hidden');
                }

                $("#servicePhone").trigger("keyup");
            } else {
                mui.toast(res.description);
            }
        });

        $('.delpic').tap(function (e) {
            var self = $(this);
            self.siblings('img').attr('src', '').addClass('mui-hidden');
            self.addClass('mui-hidden');
            self.siblings('.iconfont').removeClass('mui-hidden');
            self.siblings('input').show();

            var key = self.attr("key");
            window[key] = "";
            return false;
        });
    });


    //品牌上传
    var brandPicUpload = $("#brandPic");
    if (typeof FileReader === 'undefined') {
        brandPicUpload.attr('disabled', true);
        brandPicUpload.tap(function () {
            mui.alert('当前微信浏览器版本过低，请升级微信后再试！', '温馨提示', '我知道了');
        });
    } else {
        brandPicUpload.change(function (e) {
            var self = $(this);
            var file = brandPicUpload[0].files[0];
            //大小限制为200k以内
            if (file && file.size > 10000 * 1024) {
                msgPopup('温馨提示', '图片大小超出规定范围！', '知道了');
                return;
            }
            if (!(/^image\/.*$/i.test(file.type))) {
                mui.toast('该文件不是图片，请重新选择！');
                return;
            } else {
                myImageCompressor(file, function (formData) {
                    var url = '/agent/uploadLogo';
                    myAjax({
                        url: url,
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        beforeSend: function () {
                            showLoading('上传中...');
                        },
                        success: function (res) {
                            if (res.result == 1) {
                                productLogo = res.para;
                                self.hide();
                                self.siblings('.iconfont').addClass('mui-hidden');
                                self.siblings('img').attr('src', productLogo).removeClass('mui-hidden');
                                self.siblings('.delpic').removeClass('mui-hidden');
                            } else {
                                mui.toast('上传失败，请重试');
                            }
                        },
                        complete: function () {
                            hideLoading();

                            //重置文件路径，避免选中重复不触发onchange
                            brandPicUpload[0].value = "";
                        }
                    });
                });
            }
        });
    }

    //公众号二维码上传
    var gzhQrcodeUpload = $("#gzhQrcodePic");
    if (typeof FileReader === 'undefined') {
        gzhQrcodeUpload.attr('disabled', true);
        gzhQrcodeUpload.tap(function () {
            mui.alert('当前微信浏览器版本过低，请升级微信后再试！', '温馨提示', '我知道了');
        });
    } else {
        gzhQrcodeUpload.change(function (e) {
            var self = $(this);
            var file = gzhQrcodeUpload[0].files[0];
            //大小限制为200k以内
            if (file && file.size > 10000 * 1024) {
                msgPopup('温馨提示', '图片大小超出规定范围！', '知道了');
                return;
            }
            if (!(/^image\/.*$/i.test(file.type))) {
                mui.toast('该文件不是图片，请重新选择！');
                return;
            } else {
                myImageCompressor(file, function (formData) {
                    var url = '/agent/uploadServiceGzhQrcodeUrl';
                    myAjax({
                        url: url,
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        beforeSend: function () {
                            showLoading('上传中...');
                        },
                        success: function (res) {
                            if (res.result == 1) {
                                gzhServiceQrcodeUrl = res.para;
                                self.hide();
                                self.siblings('.iconfont').addClass('mui-hidden');
                                self.siblings('img').attr('src', gzhServiceQrcodeUrl).removeClass('mui-hidden');
                                self.siblings('.delpic').removeClass('mui-hidden');
                            } else {
                                mui.toast('上传失败，请重试');
                            }
                        },
                        complete: function () {
                            hideLoading();

                            //重置文件路径，避免选中重复不触发onchange
                            gzhQrcodeUpload[0].value = "";
                        }
                    });
                })

            }
        });
    }

    //客服二维码上传
    var qrcodeUpload = $("#qrcodePic");
    if (typeof FileReader === 'undefined') {
        qrcodeUpload.attr('disabled', true);
        qrcodeUpload.tap(function () {
            mui.alert('当前微信浏览器版本过低，请升级微信后再试！', '温馨提示', '我知道了');
        });
    } else {
        qrcodeUpload.change(function (e) {
            var self = $(this);
            var file = qrcodeUpload[0].files[0];
            //大小限制为200k以内
            if (file && file.size > 10000 * 1024) {
                msgPopup('温馨提示', '图片大小超出规定范围！', '知道了');
                return;
            }
            if (!(/^image\/.*$/i.test(file.type))) {
                mui.toast('该文件不是图片，请重新选择！');
                return;
            } else {
                myImageCompressor(file, function (formData) {
                    var url = '/agent/uploadServiceQrcodeUrl';
                    myAjax({
                        url: url,
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        beforeSend: function () {
                            showLoading('上传中...');
                        },
                        success: function (res) {
                            if (res.result == 1) {
                                serviceQrcodeUrl = res.para;
                                self.hide();
                                self.siblings('.iconfont').addClass('mui-hidden');
                                self.siblings('img').attr('src', serviceQrcodeUrl).removeClass('mui-hidden');
                                self.siblings('.delpic').removeClass('mui-hidden');
                            } else {
                                mui.toast('上传失败，请重试');
                            }
                        },
                        complete: function () {
                            hideLoading();

                            //重置文件路径，避免选中重复不触发onchange
                            qrcodeUpload[0].value = "";
                        }
                    });
                })
            }
        });
    }

    //保存客服信息
    function save() {
        var url = "/agent/saveAgentInfo";

        var toastOption = {"duration": 5000};
        var code = $("#code").val();
        //检查手机号码
        var servicePhone = $("#servicePhone").val();
//        if (!isPhone(servicePhone) && servicePhone != "") {
//            mui.toast("请输入11位正确手机号码", toastOption);
//            return;
//        }

        if (servicePhone && oldPhone != servicePhone) {
            //检查验证码
            var codeReg = /^\d{4}$/;
            if (!codeReg.test(code)) {
                mui.toast("请输入正确的验证码");
                return;
            }
        }

        var data = {
            "serviceQrcodeUrl": serviceQrcodeUrl,
            "gzhServiceQrcodeUrl": gzhServiceQrcodeUrl,
            "productLogo": productLogo,
            "productName": $("#productName").val(),
            "title": $("#title").val(),
            "desc": $("#desc").val(),
            "serviceName": $("#serviceName").val(),
            "code": code,
            "servicePhone": servicePhone
        };
        sendRequest(url, "POST", JSON.stringify(data), function (res) {
            if (res.result == 1) {
                mui.toast("保存成功");
                var url = "account-setting.html";
                goPage(url);
            } else {
                mui.toast(res.description);
            }
        });
    }

    $("#servicePhone").on('keyup', function () {
        var phone = $("#servicePhone").val();
        if (phone != "") {
            $("#sendBtn").attr("disabled", false);
        } else {
            $("#sendBtn").attr("disabled", true);
        }
    }).on('change', function () {
        $('.phone-change-show').show()
    })

    //初始化验证码控件
    initCheck('agentsModify', function () {
        var phone = $("#servicePhone").val();
        if (!isPhone(phone)) {
            mui.toast("请输入11位正确手机号码");
            return;
        }
        var data = {
            phone: phone,
        }
        return data
    }, '/agent/getCheckCode');
</script>
</html>