scrm-vue/src/scrm_pages/contactBox/index.vue

<template>
    <div class="contact-box" id="contact-box">
        <div class="contact-box-item msg-box" >
            <div class="box-btn " @click="toggleMsgBox">
                <i class="el-icon-service"></i>
                <span>在线客服</span>
            </div>
            <div class="contact-msg-box" v-show="showMsgBox">
                <div class="msg-box-panel">
                    <div class="panel-header">
                        <i class="el-icon-close kf-close" @click="showMsgBox=false"></i>
                        <p class="kf-h-line">酷医云在线客服</p>
                        <div class="clearfix"></div>
                    </div>
                    <div class="panel-body">
                        <ul class="msg-inner scroll-y">
                            <li v-for="(messageitem, key) in messageBox" :key="key" :id="'id_'+messageitem.id" class="cell clearfix" :class="messageitem.float=='right'?'cell_right':''">
                                <template v-if="messageitem.float=='right'">
                                    <div class="msg_body fl">
                                        <div class="inner" v-html="messageitem.message"></div>
                                    </div>
                                    <div class="cell_pic fl">
                                        <div class="pic">
                                            <img :src="messageitem.avatar" alt="">
                                        </div>
                                    </div>
                                </template>
                                <template v-else>
                                    <div class="cell_pic fl">
                                        <div class="pic">
                                            <img :src="messageitem.avatar" alt="">
                                        </div>
                                    </div>
                                    <div class="msg_body fl">
                                        <div class="inner" v-html="messageitem.message"></div>
                                    </div>
                                </template>
                            </li>
                        </ul>
                    </div>
                    <div class="panel-tool">
                        <i class="icon-face" title="表情" @click="showEmotion"></i>
                        <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :http-request='handleIMPicUload'
                        :on-success="handleIMPicSuccess"
                        :before-upload="beforeIMPicUpload">
                        <i class="el-icon-picture" title="图片"></i>
                        </el-upload>
                        <div class="face-box" v-show="showFace">
                            <div class="face-box-title">
                                <span>表情</span>
                                <i class="el-icon-close " @click="showFace=false" style="float:right" ></i>
                            </div>
                            <ul class="face-box-list clearfix">
                                <li v-for="(faceitem, index) in facelist" :key="index" @click="selectEmotion(faceitem)" >
                                    <img :src="faceitem[1]" :id="faceitem[0]"  alt="">
                                </li>
                            </ul>
                        </div>

                    </div>
                    <div class="panel-booter">
                        <div class="msg-input-box">
                            <textarea class="textarea scroll-y message-textarea"  v-model="message" placeholder="请输入"></textarea>
                        </div>
                        <div class="msg-send-btn-box">
                            <span class="time fl">服务时间:工作时间:9:00-22:00 节假日:9:00-18:00</span>
                            <el-button type="primary" icon="el-icon-edit" class="fr" size="mini" @click="sendMessage">发送</el-button>
                            <!-- <button type="submit" id="sendadminkfmsg" class="send_btn fr">发送</button> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="contact-box-item phone-box">
            <div class="box-btn" @click="togglePhoneBox">
                <i class="el-icon-phone-outline"></i>
                <span>客服电话</span>
            </div>
            <div class="contact-phone-box" v-show="showPhoneBox">
                <i class="el-icon-phone-outline" ></i>
                <span>0755-86526342</span>
            </div>
        </div>
    </div>
</template>
<script>
import {getusersig} from "@/api/kefu/tencentim";
import webim from 'webim-tencent';
let selType =  webim.SESSION_TYPE.C2C;
let reqMsgCount = 15; //每次请求的历史消息(c2c获取群)条数
var msgList = [];
var getPrePageC2CHistroyMsgInfoMap = {};
export default {
    name:'contactBox',
    data(){
        return{
            showMsgBox:false,
            showPhoneBox:false,
            selToID:'',
            loginInfo: {
                sdkAppID: '', //用户所属应用id,必填
                appIDAt3rd: '',
                identifier: '', //当前用户ID,必须是否字符串类型，必填
                accountType: '', //用户所属应用帐号类型，必填
                userSig: '', //当前用户身份凭证，必须是字符串类型，必填
                identifierNick: '', //当前用户昵称，不用填写，登录接口会返回用户的昵称，如果没有设置，则返回用户的id
                headurl: '', //当前用户默认头像，选填，如果设置过头像，则可以通过拉取个人资料接口来得到头像信息
            },
            useradmin:{
                usersig: '',
                Indentifier: '',
                appIDAt3rd:'',
                IdentifierNick:'',
                HeadURL:'',
            },
            kefuUrl:'https://images.shengws.com/ico_gjh.png',
            userSigFlag:false,
            imloginFlag:false,
            message:'',
            messageBox:[],
            facelist:[],
            showFace:false,
        }
    },
    created(){
        
        this.getusersig();
    },
    methods:{
        getusersig() {
            getusersig().then(response => {
                if (response.data.state == 0) {
                    this.$message.error(response.data.msg);
                    return false;
                } else {
                    this.useradmin = {
                        usersig: response.data.data.sig,
                        Indentifier: response.data.data.Indentifier,
                        appIDAt3rd:response.data.data.appIDAt3rd,
                        IdentifierNick:response.data.data.IdentifierNick,
                        HeadURL:response.data.data.HeadURL,
                    } 
                    
                    this.loginInfo.appIDAt3rd = this.useradmin.appIDAt3rd
                    this.loginInfo.identifier = this.useradmin.Indentifier
                    this.loginInfo.userSig = this.useradmin.usersig
                    this.loginInfo.identifierNick = this.useradmin.IdentifierNick
                    this.loginInfo.headurl = this.useradmin.HeadURL
                    this.loginInfo.sdkAppID = response.data.data.sdkAppID
                    this.loginInfo.accountType = response.data.data.accountType
                    this.selToID = response.data.data.selToAdmin;
                    this.userSigFlag = true;
                }
            });
        },
        showEmotion:function(){
            this.facelist = [];
            for (const index in webim.Emotions) {
                this.facelist.push(webim.Emotions[index]);
            }
            this.showFace = true;
        },
        selectEmotion:function(face){
            this.message += face[0];
            this.showFace = false;
        },
        sendMessage:function(){
            var message = this.message.trim();
            var msgLen = webim.Tool.getStrBytes(message);
            if(message == '') {
                this.$message.error('不能发送空消息');
                return false;
            }
            var maxLen, errInfo;
            if (selType == webim.SESSION_TYPE.C2C) {
                maxLen = webim.MSG_MAX_LENGTH.C2C;
                errInfo = "消息长度超出限制(最多" + Math.round(maxLen / 3) + "汉字)";
            } else {
                maxLen = webim.MSG_MAX_LENGTH.GROUP;
                errInfo = "消息长度超出限制(最多" + Math.round(maxLen / 3) + "汉字)";
            }
            if (msgLen > maxLen) {
                this.$message.error(errInfo);
                return false;
            }
            this.handleMsgSend(message);
        },
        handleMsgSend(msgContent) {
            var selSess = new webim.Session(selType, this.selToID, this.selToID, this.kefuUrl, Math.round(new Date().getTime() / 1000));
            var isSend = true; //是否为自己发送
            var seq = -1; //消息序列，-1表示sdk自动生成，用于去重
            var random = Math.round(Math.random() * 4294967296); //消息随机数，用于去重
            var msgTime = Math.round(new Date().getTime() / 1000); //消息时间戳
            var subType; //消息子类型
            if (selType == webim.SESSION_TYPE.C2C) {
                subType = webim.C2C_MSG_SUB_TYPE.COMMON;
            } else {
                subType = webim.GROUP_MSG_SUB_TYPE.COMMON;
            }
            var msg = new webim.Msg(selSess, isSend, seq, random, msgTime, this.loginInfo.identifier, subType, this.loginInfo.identifierNick);

            var text_obj, face_obj, tmsg, emotionIndex, emotion, restMsgIndex;
            //解析文本和表情
            var expr = /\[[^[\]]{1,3}\]/mg;
            var emotions = msgContent.match(expr);
            if (!emotions || emotions.length < 1) {
                text_obj = new webim.Msg.Elem.Text(msgContent);
                msg.addText(text_obj);
            } else {
                for (var i = 0; i < emotions.length; i++) {
                    tmsg = msgContent.substring(0, msgContent.indexOf(emotions[i]));
                    if (tmsg) {
                        text_obj = new webim.Msg.Elem.Text(tmsg);
                        msg.addText(text_obj);
                    }
                    emotionIndex = webim.EmotionDataIndexs[emotions[i]];
                    emotion = webim.Emotions[emotionIndex];

                    if (emotion) {
                        face_obj = new webim.Msg.Elem.Face(emotionIndex, emotions[i]);
                        msg.addFace(face_obj);
                    } else {
                        text_obj = new webim.Msg.Elem.Text(emotions[i]);
                        msg.addText(text_obj);
                    }
                    restMsgIndex = msgContent.indexOf(emotions[i]) + emotions[i].length;
                    msgContent = msgContent.substring(restMsgIndex);
                }
                if (msgContent) {
                    text_obj = new webim.Msg.Elem.Text(msgContent);
                    msg.addText(text_obj);
                }
            }

            msg.PushInfo = {
                "PushFlag": 0,
                "Desc": '测试离线推送内容', //离线推送内容
                "Ext": '测试离线推送透传内容', //离线推送透传内容
                "AndroidInfo": {
                    "Sound": "android.mp3" //离线推送声音文件路径。
                },
                "ApnsInfo": {
                    "Sound": "apns.mp3", //离线推送声音文件路径。
                    "BadgeMode": 1
                }
            };

            msg.PushInfoBoolean = true; //是否开启离线推送push同步
            msg.sending = 1;
            msg.originContent = msgContent;
            // turnoffFaces_box();
            var _this = this;

            webim.sendMsg(msg, function (resp) {
                _this.addMsg(msg);
                _this.message = '';
            }, function (err) {
                console.log(err)
            });
        },
        addMsg(msg, prepage) {
            var messageitem = {
                id:'',
                message:'',
                avatar:'',
                time:'',
                float:''
            };
            var isSelfSend, fromAccount, fromAccountNick, fromAccountImage, sessType, subType;

            //webim.SESSION_TYPE.GROUP-群聊，
            //webim.SESSION_TYPE.C2C-私聊，
            sessType = msg.getSession().type();
            isSelfSend = msg.getIsSend();//消息是否为自己发的
            fromAccount = msg.getFromAccount();
            if (!fromAccount) {
                return;
            }
            if (isSelfSend) {//如果是自己发的消息
                messageitem.avatar = this.loginInfo.headurl;
                messageitem.float = "right";
            } else {
                messageitem.avatar = this.kefuUrl;
                messageitem.float = "left";
            }
            messageitem.id = msg.random;
            messageitem.time = webim.Tool.formatText2Html(webim.Tool.formatTimeStamp(msg.getTime()));
            messageitem.message = this.convertMsgtoHtml(msg)
            this.messageBox.push(messageitem);

            var msgflow = document.getElementsByClassName("msg-inner")[0];
            if (prepage) {
                //300ms后,等待图片加载完，滚动条自动滚动到底部
                if (msgflow.scrollTop == 0) {
                    setTimeout(function () {
                        msgflow.scrollTop = 0;
                    }, 300);
                }
            } else {
                //300ms后,等待图片加载完，滚动条自动滚动到底部
                setTimeout(function () {
                    msgflow.scrollTop = msgflow.scrollHeight;
                }, 300);
            }
        },
        sendPic(images, imgName) {
            var _this = this;
            if (!this.selToID) {
                alert("请先选择对话用户");
                return;
            }

            if (!this.selSess) {
                this.selSess = new webim.Session(selType, this.selToID, this.selToID, this.kefuUrl, Math.round(new Date().getTime() / 1000));
            }
            var msg = new webim.Msg(this.selSess, true, -1, -1, -1, this.loginInfo.identifier, 0, this.loginInfo.identifierNick);
            var images_obj = new webim.Msg.Elem.Images(images.File_UUID);
            for (var i in images.URL_INFO) {
                var img = images.URL_INFO[i];
                var newImg;
                var type;
                switch (img.PIC_TYPE) {
                    case 1://原图
                        type = 1;//原图
                        break;
                    case 2://小图（缩略图）
                        type = 3;//小图
                        break;
                    case 4://大图
                        type = 2;//大图
                        break;
                }
                newImg = new webim.Msg.Elem.Images.Image(type, img.PIC_Size, img.PIC_Width, img.PIC_Height, img.DownUrl);
                images_obj.addImage(newImg);
            }
            msg.addImage(images_obj);
            //if(imgName){
            //    var data=imgName;//通过自定义消息中的data字段保存图片名称
            //    var custom_obj = new webim.Msg.Elem.Custom(data, '', '');
            //    msg.addCustom(custom_obj);
            //}
            //调用发送图片消息接口
            webim.sendMsg(msg, function (resp) {
                if (selType == webim.SESSION_TYPE.C2C) {//私聊时，在聊天窗口手动添加一条发的消息，群聊时，长轮询接口会返回自己发的消息
                    _this.addMsg(msg);
                }
            }, function (err) {
                alert(err.ErrorInfo);
            });
        },
        bindScrollHistoryEvent(axtion){
            var msgflow = document.getElementsByClassName("msg-inner")[0];
            var _this = this;
            if (axtion=='init') {
                msgflow.onscroll = function () {
                    if (msgflow.scrollTop == 0) {
                        msgflow.scrollTop = 10;
                        if (selType == webim.SESSION_TYPE.C2C) {
                            _this.getPrePageC2CHistoryMsgs();
                        } 
                    }
                }
            }else {
                msgflow.onscroll = null;
            }
        },
        getPrePageC2CHistoryMsgs  (cbOk, cbError) {
            var _this = this;
            if (selType == webim.SESSION_TYPE.GROUP) {
                _this.$message.error("当前的聊天类型为群聊天，不能进行拉取好友历史消息操作");
                return;
            }
            var tempInfo = getPrePageC2CHistroyMsgInfoMap[_this.selToID];//获取下一次拉取的c2c消息时间和消息Key
            var lastMsgTime;
            var msgKey;
            if (tempInfo) {
                lastMsgTime = tempInfo.LastMsgTime;
                msgKey = tempInfo.MsgKey;
            } else {
                _this.$message.error("获取下一次拉取的c2c消息时间和消息Key为空");
                return;
            }
            var options = {
                'Peer_Account': _this.selToID, //好友帐号
                'MaxCnt': reqMsgCount, //拉取消息条数
                'LastMsgTime': lastMsgTime, //最近的消息时间，即从这个时间点向前拉取历史消息
                'MsgKey': msgKey
            };
            webim.getC2CHistoryMsgs(
                options,
                function (resp) {
                    var complete = resp.Complete;//是否还有历史消息可以拉取，1-表示没有，0-表示有
                    if (resp.MsgList.length == 0) {
                        webim.Log.warn("没有历史消息了:data=" + JSON.stringify(options));
                        return;
                    }
                    getPrePageC2CHistroyMsgInfoMap[_this.selToID] = {//保留服务器返回的最近消息时间和消息Key,用于下次向前拉取历史消息
                        'LastMsgTime': resp.LastMsgTime,
                        'MsgKey': resp.MsgKey
                    };
                    if (cbOk) {
                        cbOk(resp.MsgList);
                    } else {
                        _this.getHistoryMsgCallback(resp.MsgList, true);
                    }
                },
                cbError
            );
        },
        getLastC2CHistoryMsgs (cbOk, cbError) {
            var _this = this;
            var lastMsgTime = 0;//第一次拉取好友历史消息时，必须传0
            var msgKey = '';
            var options = {
                'Peer_Account': this.selToID, //好友帐号
                'MaxCnt': reqMsgCount, //拉取消息条数
                'LastMsgTime': lastMsgTime, //最近的消息时间，即从这个时间点向前拉取历史消息
                'MsgKey': msgKey
            };
            this.selSess = null;
            webim.MsgStore.delSessByTypeId(selType, this.selToID);

            webim.getC2CHistoryMsgs(
                options,
                function (resp) {
                    var complete = resp.Complete;//是否还有历史消息可以拉取，1-表示没有，0-表示有

                    if (resp.MsgList.length == 0) {
                        webim.Log.warn("没有历史消息了:data=" + JSON.stringify(options));
                        return;
                    }
                    getPrePageC2CHistroyMsgInfoMap[_this.selToID] = {//保留服务器返回的最近消息时间和消息Key,用于下次向前拉取历史消息
                        'LastMsgTime': resp.LastMsgTime,
                        'MsgKey': resp.MsgKey
                    };
                    
                    if (cbOk)
                        cbOk(resp.MsgList);
                },
                cbError
            );
        },
        getHistoryMsgCallback(msgList, prepage) {
            var msg;
            var prepage = prepage || false;

            //如果是加载前几页的消息，消息体需要prepend，所以先倒排一下
            if (prepage) {
                msgList.reverse();
            }

            for (var j in msgList) {//遍历新消息
                msg = msgList[j];
                if (msg.getSession().id() == this.selToID) {//为当前聊天对象的消息
                    this.selSess = msg.getSession();
                    //在聊天窗体中新增一条消息
                    this.addMsg(msg, prepage);
                }
            }
            //消息已读上报，并将当前会话的消息设置成自动已读
            webim.setAutoRead(this.selSess, true, true);
        },
        convertMsgtoHtml(msg) {
            var html = "",
                elems, elem, type, content;
            elems = msg.getElems(); //获取消息包含的元素数组
            var count = elems.length;
            for (var i = 0; i < count; i++) {
                elem = elems[i];
                type = elem.getType();//获取元素类型
                content = elem.getContent();//获取元素对象
                switch (type) {
                    case webim.MSG_ELEMENT_TYPE.TEXT:
                        var eleHtml = this.convertTextMsgToHtml(content);
                        //转义，防XSS
                        html += webim.Tool.formatText2Html(eleHtml);
                        break;
                    case webim.MSG_ELEMENT_TYPE.FACE:
                        html += this.convertFaceMsgToHtml(content);
                        break;
                    case webim.MSG_ELEMENT_TYPE.IMAGE:
                        if (i <= count - 2) {
                            var customMsgElem = elems[i + 1];//获取保存图片名称的自定义消息elem
                            var imgName = customMsgElem.getContent().getData();//业务可以自定义保存字段，demo中采用data字段保存图片文件名
                            html += this.convertImageMsgToHtml(content, imgName);
                            i++;//下标向后移一位
                        } else {
                            html += this.convertImageMsgToHtml(content);
                        }
                        break;
                    case webim.MSG_ELEMENT_TYPE.SOUND:
                        html += this.convertSoundMsgToHtml(content);
                        break;
                    case webim.MSG_ELEMENT_TYPE.FILE:
                        html += this.convertFileMsgToHtml(content);
                        break;
                    case webim.MSG_ELEMENT_TYPE.LOCATION:
                        html += this.convertLocationMsgToHtml(content);
                        break;
                    case webim.MSG_ELEMENT_TYPE.CUSTOM:
                        var eleHtml = this.convertCustomMsgToHtml(content);
                        //转义，防XSS
                        html += webim.Tool.formatText2Html(eleHtml);
                        break;
                    case webim.MSG_ELEMENT_TYPE.GROUP_TIP:
                        var eleHtml = this.convertGroupTipMsgToHtml(content);
                        //转义，防XSS
                        html += webim.Tool.formatText2Html(eleHtml);
                        break;
                    default:
                        webim.Log.error('未知消息元素类型: elemType=' + type);
                        break;
                }
            }
            return html;
        },
        convertTextMsgToHtml(content) {
            return content.getText();
        },
        //解析表情消息元素
        convertFaceMsgToHtml(content) {
            var faceUrl = null;
            var data = content.getData();
            var index = webim.EmotionDataIndexs[data];

            var emotion = webim.Emotions[index];
            if (emotion && emotion[1]) {
                faceUrl = emotion[1];
            }
            if (faceUrl) {
                return "<img src='" + faceUrl + "'/>";
            } else {
                return data;
            }
        },
        //解析图片消息元素
        convertImageMsgToHtml(content, imageName) {
            var smallImage = content.getImage(webim.IMAGE_TYPE.SMALL);//小图
            var bigImage = content.getImage(webim.IMAGE_TYPE.LARGE);//大图
            var oriImage = content.getImage(webim.IMAGE_TYPE.ORIGIN);//原图
            if (!bigImage) {
                bigImage = smallImage;
            }
            if (!oriImage) {
                oriImage = smallImage;
            }
            return "<img name='" + imageName + "' src='" + smallImage.getUrl() + "#" + bigImage.getUrl() + "#" + oriImage.getUrl() + "' style='CURSOR: hand' id='" + content.getImageId() + "' bigImgUrl='" + bigImage.getUrl() + "'/>";
        }, 
        handleIMPicUload:function(fileobj){
            var file = fileobj.file
            console.log("file", file);
            var _this = this;
            var businessType;//业务类型，1-发群图片，2-向好友发图片
            if (selType != webim.SESSION_TYPE.C2C) {//向好友发图片
                this.$message.error('不支持群聊');
                return; 
            } 
            businessType = webim.UPLOAD_PIC_BUSSINESS_TYPE.C2C_MSG;
            //封装上传图片请求
            var opt = {
                'file': file, //图片对象
                'onProgressCallBack': this.onProgressCallBack, //上传图片进度条回调函数
                //'abortButton': document.getElementById('upd_abort'), //停止上传图片按钮
                'To_Account': this.selToID, //接收者
                'businessType': businessType//业务类型
            };
            //上传图片
            webim.uploadPic(opt,
                function (resp) {
                    //上传成功发送图片
                    _this.sendPic(resp, file.name);
                    
                },
                function (err) {
                    alert(err.ErrorInfo);
                }
            );
        },
        handleIMPicSuccess:function(){},
        beforeIMPicUpload:function(file){
            var fileType = file.type;
            const isJPG = fileType.indexOf("image") > -1;
            if (!isJPG) {
                this.$message.error('只能上传图片');
            }
            return isJPG;
        },
        togglePhoneBox:function(){
            if (this.showPhoneBox) {
                this.showPhoneBox = false;
            }else {
                this.showPhoneBox = true;
            }
            this.showMsgBox = false;
        },
        toggleMsgBox:function(){
            if (this.showMsgBox) {
                this.showMsgBox = false;
            }else {
                this.showMsgBox = true;
            }
            this.showPhoneBox = false;
        },
        webimlogin(){
            let _this = this;
            let listeners = {
                "onConnNotify": this.onConnNotify //监听连接状态回调变化事件,必填
                , "jsonpCallback": this.jsonpCallback //IE9(含)以下浏览器用到的jsonp回调函数，
                , "onMsgNotify": this.onMsgNotify //监听新消息(私聊，普通群(非直播聊天室)消息，全员推送消息)事件，必填
                , "onProfileSystemNotifys": this.onProfileSystemNotifys //监听资料系统（自己或好友）通知事件，选填
                , "onKickedEventCall": this.onKickedEventCall //被其他登录实例踢下线
                , "onC2cEventNotifys": this.onC2cEventNotifys //监听C2C系统消息通道
            };
            webim.login(this.loginInfo, listeners, this.loginOptions, 
                function(resp){
                    // _this.$message.success('webim登录成功');
                    _this.imloginFlag = true;
                },
                function(err) {
                    _this.$message.error('webim登录错误');
                }
            );
        },
        onConnNotify(){},
        jsonpCallback(){},
        onMsgNotify(newMsgList){
            //监听新消息事件
            var msgList = [];
            var dateStart = null;
            var dateEnd = null;

            //console.warn(newMsgList);
            var sess, newMsg, formId;
            //获取所有聊天会话
            var sessMap = webim.MsgStore.sessMap();

            for (var j in newMsgList) {//遍历新消息

                newMsg = newMsgList[j];
                formId = newMsg.getSession().id();
                if (formId.indexOf("AdminKeFu")>-1) {
                    
                    if (newMsg.getSession().id() == this.selToID) {//为当前聊天对象的消息
                        this.addMsg(newMsg);
                    }
                    msgList.push(newMsg.elems[0].content.text);
                }else if(formId.indexOf("User")>-1){
                    this.$message.success("有的新的消息，请到客服管理查看")
                }
                
            }
        },
        onProfileSystemNotifys(){},
        onKickedEventCall(){},
        onC2cEventNotifys(){},
    },
    watch:{
        'userSigFlag':function(value){
            if(this.userSigFlag) {
                this.webimlogin();
            }
        },
        'imloginFlag':function(value) {
            var _this = this;
            if (this.imloginFlag) {
                this.bindScrollHistoryEvent('reset');
                this.getLastC2CHistoryMsgs(function (msgList) {
                    _this.getHistoryMsgCallback(msgList);
                    _this.bindScrollHistoryEvent('init');
                    //绑定滚动操作
                }, function (err) {
                    alert(err.ErrorInfo);
                });
            }
        }
    },

}
</script>

<style scoped>
.contact-box {
    position: fixed;
    right: 12px;
    bottom: 10%;
    margin-top: -100px;
    z-index: 9999;
}
    
.contact-box .contact-box-item{
    position: relative;
    margin-bottom: 6px;
    border: 1px solid #999;
}

.contact-box .contact-box-item .box-btn {
    width: 48px;
    height: 48px;
    text-align: center;
    display: block;
    position: relative;
    background: #fff;
    cursor: pointer;
}
.contact-box .contact-box-item .box-btn i{
    font-size:30px; 
    margin: 9px;
    color: #59a3ec;
    display: inline-block;
}
/* .contact-box .contact-box-item .box-btn:hover {
} */
.contact-box .box-btn span{
    display: none;
    color:#fff;
    padding: 8px;
    font-size: 14px;
    background: #5aa6f1;
}
.contact-box .box-btn:hover span{
    display: block;
}
.contact-box .box-btn:hover i{
    display: none;
}
.contact-box .contact-phone-box {
    border: 1px solid #999;
    position: absolute;
    bottom: 0px;
    right: 56px;
    height: 48px;
    display:flex;
    background: #fff;
    width: 230px;
    align-items: center;
}
.contact-box .contact-phone-box i {
    color: #59a3ec;
    font-size:30px; 
    margin: 9px;
}
.contact-box .contact-phone-box span {
    font-size:20px; 
    margin-left: 15px;
    color: #485b6d;
}

.contact-box .contact-info-box {
    border: 1px #e5e5e5 solid;
    position: absolute;
    bottom: 0px;
    right: 56px;
    display: none;
    background: #fff;
    width: 175px;
    z-index: 10000;
}
.contact-box .msg-box:hover .contact-info-box{
    display:block;
    color: #485b6d;
    font-size:20px; 
    padding: 5px;
}

.contact-box .contact-msg-box {
    border: 1px #e5e5e5 solid;
    position: absolute;
    bottom: 0px;
    right: 56px;
    background: #fff;
}
.contact-box .msg-box-panel {
    width: 408px;
    background-color: #fff;
    position: relative;
}
.contact-box .panel-header {
    border-bottom: 1px #e5e5e5 solid;
}
.contact-box .panel-header .kf-close {
    width: 30px;
    height: 20px;
    float: right;
    cursor: pointer;
    margin: 12px 0 0 0;
}
.contact-box .panel-header .kf-h-line {
    float: left;
    color: #485b6d;
    font-size: 16px;
    line-height: 40px;
    height: 40px;
    padding-left: 10px;
}
.contact-box .panel-body {
    overflow-x: visible;
    overflow-y: auto;
    height: 182px;
}

.contact-box .msg-inner {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    border-bottom: 1px #e5e5e5 solid;
}
.contact-box .scroll-y::-webkit-scrollbar {
    width: 6px;
    height: 3px;
}
.contact-box .scroll-y::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);
    box-shadow: inset 0 0 6px rgba(0,0,0,.1);
    border-radius: 2px;
}
.contact-box .scroll-y::-webkit-scrollbar-track {
    border-radius: 2px;
}
.contact-box .msg-inner .cell {
    margin-bottom: 15px;
}
.contact-box .cell_right {
    float: right;
}

.contact-box .clearfix {
    clear: both;
}
.contact-box .msg-inner .msg_body {
    border: 1px #e5e5e5 solid;
    line-height: 22px;
    display: inline-block;
    padding: 6px;
    max-width: 292px;
}
.contact-box .fl {
    float: left;
}
.contact-box .msg-inner .msg_body .inner {
    color: #465b6e;
}
.contact-box .msg-inner .cell_pic {
    width: 40px;
    height: 40px;
    display: inline-block;
    margin: 0 20px;
}
.contact-box .msg-inner .cell_pic .pic {
    width: 40px;
    height: 40px;
    display: flex;
}
.contact-box .msg-inner .cell_pic .pic img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.contact-box .msg-box-panel .panel-booter .textarea {
    border: 1px #fff solid;
    padding: 10px 20px;
    color: #465b6e;
    height: 100px;
    resize: none;
    width: 100%;
}
.contact-box .msg-box-panel .panel-booter .msg-send-btn-box {
    padding: 0 20px 10px 20px;
    float: left;
    background: #fff;
    width: 408px;
}
.contact-box .msg-box-panel .panel-booter .time {
    font-size: 12px;
    color: #bebebe;
    height: 26px;
    line-height: 26px;
}
.contact-box .msg-box-panel .panel-booter .msg-send-btn-box .send_btn {
    color: #fff;
    padding: 6px 20px;
    border-radius: 4px;
    font-size: 12px;
    background: #58a1ed;
    border: none;
}

.contact-box  .panel-tool {
    color: #465b6e;
    height: 30px;
    border-bottom: 1px #e5e5e5 solid;
    display:flex;
    align-items: center;
}

.contact-box  .panel-tool i {
    font-size: 20px;
    padding: 0 5px;
    margin: 0 5px;
    cursor: pointer;
}

.contact-box  .panel-tool .icon-face::before {
    content: '\1F642';
    font-size: 15px;
}
.contact-box .face-box {
    width: 304px;
    z-index: 10001;
    background: #fff;
    position: relative;
    bottom: 70px;
    left: -100px;
    border: 2px #e5e5e5 solid;
}
.contact-box .face-box-list li {
    display: inline-block;
    
    border-right: 1px #CCC solid;
    border-bottom: 1px #CCC solid;
    cursor: pointer;
}
.contact-box .face-box-title {
    border-bottom: 1px #e5e5e5 solid;
    margin: 2px 0;
}
</style>