dayuan
/
manyi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
							<!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="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="name">
    </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="phone">
    </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">x</i>
                <i class="iconfont icon-add-more"></i>
                <input id="qrcodePic" type="file" draggable="false" accept="image/*">
                <img class="mui-hidden" id="showPic" 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="https://cdn.washpayer.com/components/lib/image-compressor.min.js"></script>
<script src="/components/custom/js/common.js"></script>

<script src="js/xyf.common.js"></script>
<script>
    var $qrcodeInput = $('#qrcodePic')
    var qrcodeUrl = "";
    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 = "/dealer/getServiceInfo";
        var data = {};
        sendRequest(url, "GET", data, function (res) {
            if (res.result == 1) {
                var para = res.para;

                $("#name").val(para.serviceName);
                $("#phone").val(para.servicePhone);
                oldPhone = para.servicePhone
                qrcodeUrl = para.qrcodeUrl;

                if (qrcodeUrl && qrcodeUrl != "") {
                    $qrcodeInput.siblings('.iconfont').addClass('mui-hidden');
                    $qrcodeInput.siblings('img').attr('src', qrcodeUrl).removeClass('mui-hidden');
                    $qrcodeInput.siblings('.delpic').removeClass('mui-hidden');
                }
                $("#phone").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();
            qrcodeUrl = '';
            checkBtnStatus();
            return false;
        });
    });


    //按钮样式状态
    var checkBtnStatus = function () {
    };

    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 = '/common/upload?type=serviceQrcode';
                    myAjax({
                        url: url,
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        beforeSend: function () {
                            showLoading('上传中...');
                        },
                        success: function (res) {
                            if (res.result == 1) {
                                qrcodeUrl = res.para;
                                checkBtnStatus();
                                self.hide();
                                self.siblings('.iconfont').addClass('mui-hidden');
                                self.siblings('img').attr('src', qrcodeUrl).removeClass('mui-hidden');
                                self.siblings('.delpic').removeClass('mui-hidden');
                            } else {
                                mui.toast('上传失败，请重试');
                            }
                        },
                        complete: function () {
                            hideLoading();

                            //重置文件路径，避免选中重复不触发onchange
                            var imgUpload = $("#qrcodePic");
                            imgUpload[0].value = "";
                        }
                    });
                });

            }
        });
    }

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

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

        if (phone && oldPhone != phone) {
            //填了就检查验证码
            var codeReg = /^\d{4}$/;
            if (!codeReg.test(code)) {
                mui.toast("请输入正确的验证码");
                return;
            }
        }
        var data = {
            "qrcodeUrl": qrcodeUrl,
            "serviceName": $("#name").val(),
            "code": code,
            "servicePhone": phone
        };
        sendRequest(url, "POST", data, function (res) {
            if (res.result == 1) {
                mui.toast("保存成功");
            } else {
                mui.toast(res.description);
            }
        });
    }

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

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