2406 lines
115 KiB
HTML
2406 lines
115 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<!--删除苹果默认的工具栏和菜单栏，默认为no显示工具栏和菜单栏。-->
|
|||
|
|
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
|||
|
|
<!--QQ强制全屏-->
|
|||
|
|
<meta name="x5-fullscreen" content="true">
|
|||
|
|
<!--UC强制全屏-->
|
|||
|
|
<meta name="fullscreen" content="yes">
|
|||
|
|
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
|
|||
|
|
<title>{{.Title}}</title>
|
|||
|
|
<link rel="stylesheet" href="/static/cdn/element-ui/2.15.1/theme-chalk/index.min.css">
|
|||
|
|
<script src="/static/cdn/vue/2.6.11/vue.min.js"></script>
|
|||
|
|
<script src="/static/cdn/element-ui/2.15.1/index.js"></script>
|
|||
|
|
<script src="/static/cdn/jquery/3.6.0/jquery.min.js"></script>
|
|||
|
|
|
|||
|
|
<script src="/static/js/functions.js?v=0.6.9"></script>
|
|||
|
|
<link rel="stylesheet" href="/static/css/common.css?v=20240618" />
|
|||
|
|
<link rel="stylesheet" href="/static/css/icon/iconfont.css?v=fgjlgfda"/>
|
|||
|
|
<link rel="icon" href="/static/images/favicon.ico">
|
|||
|
|
<style>
|
|||
|
|
.el-message-box{
|
|||
|
|
width: auto;
|
|||
|
|
max-width: 100%;
|
|||
|
|
max-height: 100%;
|
|||
|
|
overflow: auto;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body class="visitorBody">
|
|||
|
|
<div id="app" class="chatCenter">
|
|||
|
|
<template>
|
|||
|
|
<!--客服代码-->
|
|||
|
|
|
|||
|
|
<div class="chatEntTitle" v-show="!isIframe">
|
|||
|
|
<el-badge :type="onlineType" is-dot class="item">
|
|||
|
|
<el-avatar class="chatEntTitleLogo" :size="35" :src="noticeAvatar"></el-avatar>
|
|||
|
|
</el-badge>
|
|||
|
|
<div>
|
|||
|
|
<div><{chatTitle}></div>
|
|||
|
|
<div class="entIntro" v-show="entIntroduce!=''"><{entIntroduce}></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="chatEntBox">
|
|||
|
|
<!--公告栏-->
|
|||
|
|
<div v-show="visitorNotice!=''"
|
|||
|
|
class="visitorNotice"
|
|||
|
|
>
|
|||
|
|
<img src='/static/images/laba.svg'/>
|
|||
|
|
<span><{visitorNotice}></span>
|
|||
|
|
<img v-on:click="visitorNotice=''" src="/static/images/cha.png" class="visitorNoticeClose"/>
|
|||
|
|
</div>
|
|||
|
|
<!--//公告栏-->
|
|||
|
|
<!--最小化的语音视频-->
|
|||
|
|
<div class="minimiCallBox" v-show="isCalling">正在语音或视频通话
|
|||
|
|
<div>
|
|||
|
|
<el-button size="mini" type="warning" plain @click="callClose();messageContent='🚫 '+flyLang.cancel;chatToUser()">挂断</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!--//最小化的语音视频-->
|
|||
|
|
|
|||
|
|
<div ref="chatVisitorPage" id="chatVisitorPage" class="chatVisitorPage" v-on:click="showExtendTool=false;showIconBtns=false;showEmojis=false">
|
|||
|
|
<div class="chatNotice" v-on:click="loadMoreMessages" v-show="showLoadMore">
|
|||
|
|
<a class="chatNoticeContent"><{flyLang.moremessage}></a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div v-for="v in msgList">
|
|||
|
|
|
|||
|
|
<div class="messageBox questionBox" v-if="v.type=='question'">
|
|||
|
|
<div class="chatTime left" v-bind:class="{'chatTimeHide': v.show_time==false}"><span><{v.time}></span></div>
|
|||
|
|
<div class="left" v-if="v.is_kefu!=true" style="display: flex;">
|
|||
|
|
<el-avatar style="margin-right:10px;flex-shrink: 0;" :size="36" :src="v.avator"></el-avatar>
|
|||
|
|
<div class="chatMsgContent">
|
|||
|
|
<div class="chatUser" v-if="showKefuName!='off'"><{v.name}></div>
|
|||
|
|
<div class="chatContent chatContent2 replyContentBtn" v-html="v.content"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!--猜你想问-->
|
|||
|
|
<div class="messageBox" v-else-if="v.type=='card'" v-show="robotInfo.RobotCard!=''">
|
|||
|
|
<div class="chatNewRow">
|
|||
|
|
<el-avatar class="chatNewAvatar" :size="35" :src="noticeAvatar"></el-avatar>
|
|||
|
|
<div class="chatMsgContent" style="flex: 1">
|
|||
|
|
<div class="cardBox">
|
|||
|
|
|
|||
|
|
<div v-html="robotInfo.RobotCard"></div>
|
|||
|
|
<div v-show="topQuestionListHtml!=''">
|
|||
|
|
<div class='visitorReplyTitle'><{flyLang.guess}><a href="javascript:;"><i class='el-icon-refresh-left'></i> <{flyLang.huanyihuan}></a></div>
|
|||
|
|
<div class="cardBoxContent replyContentBtn" v-html="topQuestionListHtml"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!--//猜你想问-->
|
|||
|
|
<!--公众号卡片-->
|
|||
|
|
<div class="wechatTip" v-else-if="v.type=='wechatTip'">
|
|||
|
|
<img style="width:100px; margin:6px;" :src="VisitorWechatQrcodeUrl">
|
|||
|
|
扫描或长按左侧二维码关注公众号。<br>可同步聊天消息，防止更换浏览器消息丢失<br>并可及时接收到回复通知
|
|||
|
|
</div>
|
|||
|
|
<!--//公众号卡片-->
|
|||
|
|
<!--提示部分-->
|
|||
|
|
<div class="chatNotice" v-else-if="v.type=='notice'">
|
|||
|
|
<div class="chatNoticeContent" v-html="v.content"></div>
|
|||
|
|
</div>
|
|||
|
|
<!--//提示部分-->
|
|||
|
|
<!--询前表单-->
|
|||
|
|
<div class="cardBox" v-else-if="v.type=='preVisitorForm'" style="margin: 10px">
|
|||
|
|
您好，为了更高效精准的为您解答，请先填写下面的表单哦 ~，*星号必填，其余选填
|
|||
|
|
<el-form>
|
|||
|
|
<el-form-item label="姓名 *">
|
|||
|
|
<el-input v-model="preVisitorForm.name"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="手机">
|
|||
|
|
<el-input v-model="preVisitorForm.tel"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="微信">
|
|||
|
|
<el-input v-model="preVisitorForm.wechat"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="QQ">
|
|||
|
|
<el-input v-model="preVisitorForm.qq"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="邮箱">
|
|||
|
|
<el-input v-model="preVisitorForm.email"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="备注">
|
|||
|
|
<el-input type="textarea" v-model="preVisitorForm.remark"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary" size="small" @click="postPreVisitorForm">提交</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</div>
|
|||
|
|
<!--//询前表单-->
|
|||
|
|
<!--消息模板-->
|
|||
|
|
<div class="messageBox" v-else>
|
|||
|
|
<div class="chatTime left" v-bind:class="{'chatTimeHide': v.show_time==false}"><span><{v.time}></span></div>
|
|||
|
|
<div class="chatNewRow" v-if="v.is_kefu!=true">
|
|||
|
|
<el-avatar class="chatNewAvatar" :size="35" :src="v.avator"></el-avatar>
|
|||
|
|
<div class="chatMsgContent">
|
|||
|
|
<div class="chatUser" v-if="showKefuName!='off'"><{v.name}></div>
|
|||
|
|
<div class="chatNewContent replyContentBtn" v-html="v.content"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="chatNewRow chatNewRowMe" v-if="v.is_kefu==true">
|
|||
|
|
<div class="chatMsgContent">
|
|||
|
|
<div class="chatNewContent replyContentBtn" v-html="v.content"></div>
|
|||
|
|
<div class="chatReadStatus" v-show="VisitorReadStatus!='true'"><{v.read_status}></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="clear"></div>
|
|||
|
|
</div>
|
|||
|
|
<!--//消息模板-->
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<!--评价-->
|
|||
|
|
<div class="commentBox" v-if="comment">
|
|||
|
|
<div style="font-size: 14px;color: #3e3e3e"><{flyLang.visitorCommentTitle}></div>
|
|||
|
|
<el-rate v-model="commentScore" style="margin-bottom: 20px"></el-rate>
|
|||
|
|
<el-input
|
|||
|
|
style="margin: 10px 0px"
|
|||
|
|
type="textarea"
|
|||
|
|
:rows="4"
|
|||
|
|
v-model="commentContent">
|
|||
|
|
</el-input>
|
|||
|
|
<el-button :disabled="commentScore==''" size="mini" type="primary" v-on:click="sendComment()"><{flyLang.sent}></el-button>
|
|||
|
|
</div>
|
|||
|
|
<!--//评价-->
|
|||
|
|
<!--视频-->
|
|||
|
|
<div class="remoteVideoMask messageBox" id="remoteVideoMask" v-show="isCalling">
|
|||
|
|
<div class="chatNewRow">
|
|||
|
|
<div class="chatMsgContent">
|
|||
|
|
<div class="chatNewContent replyContentBtn">
|
|||
|
|
远程音视频<br/>
|
|||
|
|
<video style="max-width: 500px" id="chatRtc" controls autoplay playsinline muted></video>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="chatNewRow chatNewRowMe">
|
|||
|
|
<div class="chatMsgContent">
|
|||
|
|
<div class="chatNewContent replyContentBtn">
|
|||
|
|
本地音视频<br/>
|
|||
|
|
<video style="max-width: 500px" id="chatLocalRtc" muted controls autoplay></video></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!--视频-->
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!--热门问题-->
|
|||
|
|
<div class="hotQuestion" v-if="hotQuestion.length!=0 && !reconnectDialog">
|
|||
|
|
<a
|
|||
|
|
class="slideInRightItem"
|
|||
|
|
v-for="item in hotQuestion"
|
|||
|
|
v-on:click="messageContent=item;chatToUser($event)">
|
|||
|
|
<{item}>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<!--//热门问题-->
|
|||
|
|
<!--表情图片-->
|
|||
|
|
<div class="faceBox visitorFaceBox" v-if="showFaceIcon">
|
|||
|
|
<ul class="faceBoxList">
|
|||
|
|
<li v-on:click="faceIconClick(i)" class="faceIcon" v-for="(v,i) in face" :title="v.name"><img :src=v.path></li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="clear"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="emojis" v-show="showEmojis">
|
|||
|
|
<span v-for="item in emojis" @click="messageContent+=item;showEmojis=false"><{item}></span>
|
|||
|
|
</div>
|
|||
|
|
<!--//表情图片-->
|
|||
|
|
<!--搜索建议-->
|
|||
|
|
<div class="searchList" v-show="searchList.length!=0">
|
|||
|
|
<div v-on:click="messageContent=item.title;chatToUser();searchList=[]" class="searchItem" v-for="item in searchList" v-html="item.htmlTitle"></div>
|
|||
|
|
</div>
|
|||
|
|
<!--//搜索建议-->
|
|||
|
|
<div class="chatBoxSend" v-show="chatBoxSend">
|
|||
|
|
<div class="chatBoxSendMask" v-show="reconnectDialog">
|
|||
|
|
<a @click="location.reload()" href="javascript:void(0);"><{flyLang.socketclose}></a>
|
|||
|
|
</div>
|
|||
|
|
<div class="chatSendProduct" v-if="visitorProduct!=null">
|
|||
|
|
<img :src="visitorProduct.img" class="productImg"/>
|
|||
|
|
<div class="productInfo">
|
|||
|
|
<h2 class="productCardTitle" v-html="visitorProduct.title"></h2>
|
|||
|
|
<div class="productPrice"><{visitorProduct.price}></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="productBtns">
|
|||
|
|
<div class="el-icon-close" @click="visitorProduct=null"></div>
|
|||
|
|
<el-button size="mini" type="primary" @click="sendProductInfo"><{flyLang.sent}></el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!--进度条-->
|
|||
|
|
<div class="progressLine">
|
|||
|
|
<el-progress :stroke-width="6" :percentage="percentage" v-show="percentage!=0" :text-inside="true"></el-progress>
|
|||
|
|
</div>
|
|||
|
|
<!--//进度条-->
|
|||
|
|
<div class="iconBtns visitorIconBox">
|
|||
|
|
|
|||
|
|
<el-tooltip :content="flyLang.emotions" placement="top">
|
|||
|
|
<div class="iconfont icon-xiaolian visitorIconBtns visitorFaceBtn" v-on:click="showEmojis==true?showEmojis=false:showEmojis=true"></div>
|
|||
|
|
</el-tooltip>
|
|||
|
|
<el-tooltip :content="flyLang.photo" placement="top">
|
|||
|
|
<div v-show="VisitorUploadImgBtn!='true'" :title="flyLang.photo" class="el-icon-picture" id="uploadImg" v-on:click="uploadImg('/uploadimg')" style="font-size: 25px;"></div>
|
|||
|
|
</el-tooltip>
|
|||
|
|
<el-tooltip :content="flyLang.recoder" placement="top" v-show="VisitorVoiceBtn!='true'">
|
|||
|
|
<div class="el-icon-mic" v-on:click="audioDialog=true" style="font-size: 24px;"></div>
|
|||
|
|
</el-tooltip>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<el-tooltip :content="flyLang.language" placement="top">
|
|||
|
|
<div @click="flagsDialog='true'" class="iconfont icon-duoyuyan"></div>
|
|||
|
|
</el-tooltip>
|
|||
|
|
<el-tooltip :content="flyLang.more" placement="top">
|
|||
|
|
<div class="iconfont icon-zengjiatianjiajiahao" v-if="VisitorPlusBtn!='true'" @click="showExtendTool==true?showExtendTool=false:showExtendTool=true;"></div>
|
|||
|
|
</el-tooltip>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="visitorEditor">
|
|||
|
|
<el-input :placeholder="flyLang.textarea" :maxlength="VisitorMaxLength" :rows="9" :autosize="{ minRows: 4, maxRows: 9 }" type="textarea" resize="none" class="visitorEditorArea" @focus="scrollBottom;showIconBtns=false" @blur="scrollBottom;showIconBtns=false" v-model="messageContent" @keyup.native="inputNextText" v-on:keyup.enter.native="chatToUser($event)">
|
|||
|
|
</el-input>
|
|||
|
|
<el-button type="primary" size="small" class="visitorEditorBtn" :disabled="sendDisabled||messageContent==''" v-on:click="chatToUser($event);showIconBtns=false"><{flyLang.sent}></el-button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="chatExtend" v-show="showExtendTool">
|
|||
|
|
<div class="iconExtendBtn" id="uploadImg" v-show="VisitorUploadImgBtn!='true'" @click="uploadImg('/uploadimg')">
|
|||
|
|
<div class="elIcon el-icon-picture"></div>
|
|||
|
|
<div><{flyLang.photo}></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="iconExtendBtn" id="uploadFile" v-show="VisitorUploadFileBtn!='true'" @click="uploadFile('/2/uploadFile')">
|
|||
|
|
<div class="elIcon el-icon-upload" ></div>
|
|||
|
|
<div><{flyLang.file}></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="iconExtendBtn" @click="window.open('/cutpic.html')">
|
|||
|
|
<div class="elIcon iconfont icon-jietu" style="font-size: 20px"></div>
|
|||
|
|
<div><{flyLang.cutpic}></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="iconExtendBtn" @click="audioDialog=true">
|
|||
|
|
<div v-show="VisitorVoiceBtn!='true'" :title="flyLang.recoder" class="elIcon el-icon-microphone" ></div>
|
|||
|
|
<div><{flyLang.recoder}></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="iconExtendBtn" @click="qqMap==true?qqMap=false:qqMap=true;">
|
|||
|
|
<div v-show="VisitorMapBtn!='true'" class="elIcon el-icon-location" ></div>
|
|||
|
|
<div><{flyLang.map}></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="iconExtendBtn" @click="callPhone()">
|
|||
|
|
<div class="elIcon el-icon-phone-outline" ></div>
|
|||
|
|
<div><{flyLang.audio}></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="iconExtendBtn" @click="callPeer()">
|
|||
|
|
<div class="elIcon el-icon-video-camera" >
|
|||
|
|
</div>
|
|||
|
|
<div><{flyLang.video}></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="iconExtendBtn" @click="window.open(window.location.href.replace('&show_title=no',''))">
|
|||
|
|
<div class="elIcon el-icon-full-screen" >
|
|||
|
|
</div>
|
|||
|
|
<div><{flyLang.expand}></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="iconExtendBtn" @click="flagsDialog='true'">
|
|||
|
|
<div class="elIcon iconfont icon-duoyuyan" >
|
|||
|
|
</div>
|
|||
|
|
<div><{flyLang.language}></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="clear"></div>
|
|||
|
|
<div class="footContact">
|
|||
|
|
<a href="javascript:void(0)">{{.Title}}{{.CopyrightTxt}}</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="chatArticle">
|
|||
|
|
<div style="padding: 8px;" v-if="entInfo.intro_pic"><img style="width: 100%" :src="entInfo.intro_pic" v-if="entInfo.intro_pic" :title="entInfo.username"/></div>
|
|||
|
|
<div v-html="robotInfo.RobotCard"></div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<el-tabs class="hotQuestionTab">
|
|||
|
|
<el-tab-pane :label="item['cat_name']" v-for="item in topQuestionCatResult">
|
|||
|
|
<ul>
|
|||
|
|
<li v-on:click="messageContent=title;chatToUser($event)" class="chatArticleItem" v-for="title in item['titles']" ><a><{title}></a></li>
|
|||
|
|
</ul>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="clear"></div>
|
|||
|
|
|
|||
|
|
<!--//客服代码-->
|
|||
|
|
<audio id="chatMessageAudio">
|
|||
|
|
<source id="chatMessageAudioSource" />
|
|||
|
|
</audio>
|
|||
|
|
<audio id="chatMessageSendAudio">
|
|||
|
|
<source id="chatMessageSendAudioSource" />
|
|||
|
|
</audio>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!--图片预览-->
|
|||
|
|
|
|||
|
|
<el-image
|
|||
|
|
style="display: none;"
|
|||
|
|
ref="preview"
|
|||
|
|
class="hideImgDiv"
|
|||
|
|
:src="imgPreviewSrc[0]"
|
|||
|
|
:preview-src-list="imgPreviewSrc"
|
|||
|
|
z-index="9999"
|
|||
|
|
></el-image>
|
|||
|
|
|
|||
|
|
<!--地图-->
|
|||
|
|
<iframe v-if="qqMap" style="position: fixed;top: 0;left: 0;z-index: 999999999" id="mapPage" width="100%" height="100%" frameborder=0
|
|||
|
|
src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=
|
|||
|
|
3ZPBZ-IDF63-PH33P-YOPSA-LUXIH-UKFVR&referer=kefu">
|
|||
|
|
</iframe>
|
|||
|
|
<!--//地图-->
|
|||
|
|
<el-dialog
|
|||
|
|
:title="flyLang.leave"
|
|||
|
|
:visible.sync="allOffline"
|
|||
|
|
width="100%"
|
|||
|
|
top="0">
|
|||
|
|
<el-input style="margin-bottom: 10px;" :placeholder="flyLang.email" v-model="visitorContact.email"></el-input>
|
|||
|
|
<el-input style="margin-bottom: 10px;" :placeholder="flyLang.wechat" v-model="visitorContact.weixin"></el-input>
|
|||
|
|
<el-input style="margin-bottom: 10px;" :placeholder="flyLang.realname" v-model="visitorContact.name"></el-input>
|
|||
|
|
<el-input :placeholder="flyLang.content" type="textarea" v-model="visitorContact.msg"></el-input>
|
|||
|
|
<span slot="footer" class="dialog-footer">
|
|||
|
|
<el-button @click="sendEmailMsg"><{flyLang.sent}></el-button>
|
|||
|
|
<el-button @click="allOffline = false"><{flyLang.cancel}></el-button>
|
|||
|
|
</span>
|
|||
|
|
</el-dialog>
|
|||
|
|
<!--录音-->
|
|||
|
|
<el-dialog
|
|||
|
|
:visible.sync="audioDialog"
|
|||
|
|
width="70%"
|
|||
|
|
>
|
|||
|
|
<div class="dialogRecoder">
|
|||
|
|
<el-progress :color="colors" type="dashboard" :format="recoderFormat" :stroke-width="10" :percentage="recoderSecond"></el-progress>
|
|||
|
|
<br/>
|
|||
|
|
<audio v-show="recorderEnd!=null" controls ref="audio" muted="muted" src="" id="audio"></audio>
|
|||
|
|
<br/>
|
|||
|
|
<el-button @click="startRecoder()" size="small" type="primary"><{flyLang.start}></el-button>
|
|||
|
|
<el-button @click="stopRecoder()" size="small" type="warning"><{flyLang.stop}></el-button>
|
|||
|
|
<el-button @click="cancelRecoder()" size="small" type="danger"><{flyLang.cancel}></el-button>
|
|||
|
|
<el-button @click="sendRecoder();" size="small" type="success"><{flyLang.sent}></el-button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</el-dialog>
|
|||
|
|
<!--//录音-->
|
|||
|
|
<!--切换语言-->
|
|||
|
|
<el-dialog
|
|||
|
|
:visible.sync="flagsDialog"
|
|||
|
|
width="90%"
|
|||
|
|
top="30px">
|
|||
|
|
<el-button @click="selectLang('zh-CN')" class="flagBtn" type="primary" plain>中文简体</el-button>
|
|||
|
|
<el-button @click="selectLang('en-US')" class="flagBtn" type="primary" plain>English</el-button>
|
|||
|
|
<el-button @click="selectLang('ru-RU')" class="flagBtn" type="primary" plain>Русский язык</el-button>
|
|||
|
|
<el-button @click="selectLang('zh-HK')" class="flagBtn" type="primary" plain>香港繁體</el-button>
|
|||
|
|
<el-button @click="selectLang('zh-TW')" class="flagBtn" type="primary" plain>台灣繁體</el-button>
|
|||
|
|
<el-button @click="selectLang('ja-JP')" class="flagBtn" type="primary" plain>日本語</el-button>
|
|||
|
|
<el-button @click="selectLang('ko-KR')" class="flagBtn" type="primary" plain>한국어</el-button>
|
|||
|
|
<el-button @click="selectLang('es-ES')" class="flagBtn" type="primary" plain>Español</el-button>
|
|||
|
|
<el-button @click="selectLang('kk-KZ')" class="flagBtn" type="primary" plain>қазақ тілі</el-button>
|
|||
|
|
</el-dialog>
|
|||
|
|
<!--//切换语言-->
|
|||
|
|
<!--录音-->
|
|||
|
|
|
|||
|
|
<!--//录音-->
|
|||
|
|
<!--关闭-->
|
|||
|
|
|
|||
|
|
<div v-if="closeNotice!=''" style="
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
position: fixed;
|
|||
|
|
z-index: 9999999;
|
|||
|
|
left: 0px;
|
|||
|
|
top: 0px;
|
|||
|
|
background:#f1f5f8;
|
|||
|
|
">
|
|||
|
|
<div style="margin:200px auto;background: #fff;width: 88%;padding: 20px 10px;box-shadow: 0 3px 20px rgb(0 20 41 / 6%);">
|
|||
|
|
<h2 style="text-align: center;word-break: break-all;"><{closeNotice}></h2>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!--//关闭-->
|
|||
|
|
|
|||
|
|
</template>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
<script src="/static/js/xss.js"></script>
|
|||
|
|
<script src="/static/js/reconnecting-websocket.min.js"></script>
|
|||
|
|
<script src="/static/js/recoder.js"></script>
|
|||
|
|
<script src="/static/js/audio.js"></script>
|
|||
|
|
<!-- 引入markdown-it的库 -->
|
|||
|
|
<script src="/static/js/markdown-it.min.js"></script>
|
|||
|
|
<script>
|
|||
|
|
var KEFU_ID='{{.KEFU_ID}}';
|
|||
|
|
var REFER=urlDecode('{{.Refer}}');
|
|||
|
|
var REFER_URL=urlDecode('{{.ReferUrl}}');
|
|||
|
|
var ENT_ID='{{.ENT_ID}}';
|
|||
|
|
var IS_TRY='{{.IS_TRY}}';
|
|||
|
|
var VISITOR_ID='{{.visitorId}}';
|
|||
|
|
var VISITOR_NAME='{{.visitorName}}';
|
|||
|
|
var ERR_MSG='{{.errMsg}}';
|
|||
|
|
var AVATOR='{{.avator}}';
|
|||
|
|
var LANG=checkLang();
|
|||
|
|
|
|||
|
|
var SHOW_KEFU_NAME='{{.ShowKefuName}}';
|
|||
|
|
var EXTRA='{{.Extra}}';
|
|||
|
|
</script>
|
|||
|
|
<script src="/static/js/front-lang.js?v=bys3jhh6hl"></script>
|
|||
|
|
<script src="/static/js/chat-config.js?v=0.5.1"></script>
|
|||
|
|
<script src="/static/js/peer.js"></script>
|
|||
|
|
<script>
|
|||
|
|
loadJsFile("lang/"+LANG+".js",function () {
|
|||
|
|
new Vue({
|
|||
|
|
el: '#app',
|
|||
|
|
delimiters:["<{","}>"],
|
|||
|
|
data: {
|
|||
|
|
window:window,
|
|||
|
|
server:getWsBaseUrl()+"/ws_visitor",
|
|||
|
|
socket:null,
|
|||
|
|
msgList:[],
|
|||
|
|
imgPreviewSrc:[
|
|||
|
|
""],
|
|||
|
|
msgListNum:[],
|
|||
|
|
messageContent:"",
|
|||
|
|
chatTitle:KEFU_LANG[LANG]['connecting'],
|
|||
|
|
visitor:{},
|
|||
|
|
face:emojiGifsMap(),
|
|||
|
|
showKfonline:false,
|
|||
|
|
socketClosed:false,
|
|||
|
|
focusSendConn:false,
|
|||
|
|
wsSocketClosed:true,
|
|||
|
|
timer:null,
|
|||
|
|
loadingTimer:null,
|
|||
|
|
sendDisabled:false,
|
|||
|
|
entLogo:"",
|
|||
|
|
entName:"",
|
|||
|
|
peer:null,
|
|||
|
|
peerjsId:"",
|
|||
|
|
kefuPeerId:"",
|
|||
|
|
loading:null,
|
|||
|
|
localStream:null,
|
|||
|
|
flyLang:KEFU_LANG[LANG],
|
|||
|
|
lang:LANG,
|
|||
|
|
textareaFocused:false,
|
|||
|
|
replys:[],
|
|||
|
|
noticeName:"",
|
|||
|
|
noticeAvatar:"",
|
|||
|
|
allOffline:false,
|
|||
|
|
visitorContact:{
|
|||
|
|
email:"",
|
|||
|
|
weixin:"",
|
|||
|
|
name:"",
|
|||
|
|
msg:"",
|
|||
|
|
},
|
|||
|
|
haveUnreadMessage:false,
|
|||
|
|
audioDialog:false,
|
|||
|
|
flagsDialog:false,
|
|||
|
|
recorder:null,
|
|||
|
|
recorderAudio:null,
|
|||
|
|
recordeTimer:null,
|
|||
|
|
recoderSecond:0,
|
|||
|
|
currentActiveTime:Date.now(),
|
|||
|
|
timeoutTimer:null,
|
|||
|
|
timeoutLongTime:20*60*1000,//20分钟没反应
|
|||
|
|
allTimeouter:[],
|
|||
|
|
currentPage:1,
|
|||
|
|
showLoadMore:false,
|
|||
|
|
loadMoreDisable:false,
|
|||
|
|
websocketOpenNum:0,//websocket打开次数
|
|||
|
|
websocketMaxOpenNum:10,//websocket最大打开次数
|
|||
|
|
recorderEnd:null,
|
|||
|
|
isMobile:false,
|
|||
|
|
isIframe:false,
|
|||
|
|
onlineType:"success",
|
|||
|
|
reconnectDialog:false,
|
|||
|
|
showIconBtns:false,
|
|||
|
|
showFaceIcon:false,
|
|||
|
|
showKefuName:SHOW_KEFU_NAME,
|
|||
|
|
comment:false,
|
|||
|
|
qqMap:false,
|
|||
|
|
hotQuestion:[],
|
|||
|
|
topQuestionList:[],
|
|||
|
|
topQuestionListHtml:"",
|
|||
|
|
topQuestionCatResult:[],
|
|||
|
|
topQuestionCount:0,
|
|||
|
|
topQuestionPage:1,
|
|||
|
|
topQuestionPagesize:5,
|
|||
|
|
entIntroduce:"",
|
|||
|
|
robotSwitch:"",
|
|||
|
|
robotNoAnswer:"",
|
|||
|
|
visitorNotice:"",
|
|||
|
|
autoWelcome:"",
|
|||
|
|
searchList:[],
|
|||
|
|
VisitorVoiceBtn:'{{.VisitorVoiceBtn}}',
|
|||
|
|
VisitorMapBtn:'{{.VisitorMapBtn}}',
|
|||
|
|
VisitorCommentBtn:'{{.VisitorCommentBtn}}',
|
|||
|
|
VisitorFaceBtn:'{{.VisitorFaceBtn}}',
|
|||
|
|
VisitorReadStatus:'{{.VisitorReadStatus}}',
|
|||
|
|
VisitorPlusBtn:'{{.VisitorPlusBtn}}',
|
|||
|
|
VisitorUploadImgBtn:'{{.VisitorUploadImgBtn}}',
|
|||
|
|
VisitorUploadFileBtn:'{{.VisitorUploadFileBtn}}',
|
|||
|
|
VisitorMaxLength:'{{.VisitorMaxLength}}'==''?100:parseInt('{{.VisitorMaxLength}}'),
|
|||
|
|
VisitorShowAvator:'{{.VisitorShowAvator}}',
|
|||
|
|
VisitorWechatQrcodeUrl:'{{.VisitorWechatQrcodeUrl}}',
|
|||
|
|
closeNotice:'',
|
|||
|
|
percentage:0,
|
|||
|
|
visitorMaxNumLimit:false,//客服达到接待上限
|
|||
|
|
visitorMaxNumNotice:"",//客服达到接待上限文案
|
|||
|
|
visitorCookie:"",
|
|||
|
|
scanWechatQrcode:"",
|
|||
|
|
entConfig:{},//企业配置信息
|
|||
|
|
colors: [
|
|||
|
|
{color: '#f56c6c', percentage: 20},
|
|||
|
|
{color: '#e6a23c', percentage: 40},
|
|||
|
|
{color: '#5cb87a', percentage: 60},
|
|||
|
|
{color: '#1989fa', percentage: 80},
|
|||
|
|
{color: '#6f7ad3', percentage: 100}
|
|||
|
|
],
|
|||
|
|
commentScore:0,
|
|||
|
|
commentContent:"",
|
|||
|
|
isCalling:false,
|
|||
|
|
call:null,
|
|||
|
|
videoElement:null,
|
|||
|
|
canvasElement:null,
|
|||
|
|
isVideo:false,
|
|||
|
|
entInfo:{},
|
|||
|
|
showExtendTool:false,
|
|||
|
|
visitorProduct:null,
|
|||
|
|
robotInfo:{},
|
|||
|
|
showEmojis:false,
|
|||
|
|
//固定营销话术
|
|||
|
|
marketing:[],
|
|||
|
|
//机器人阶段模式
|
|||
|
|
isRobotModel:"no",
|
|||
|
|
//是否有自动回复
|
|||
|
|
isAutoReply:"yes",
|
|||
|
|
//是否展示输入框
|
|||
|
|
chatBoxSend:true,
|
|||
|
|
markdownIt:null,
|
|||
|
|
//询前表单
|
|||
|
|
preVisitorForm:{name:"",wechat:"",qq:"",email:"",remark:"",tel:""},
|
|||
|
|
emojis:{"smile":"😄","smiley":"😃","grinning":"😀","blush":"😊","wink":"😉","heart_eyes":"😍","kissing_heart":"😘","kissing_closed_eyes":"😚","kissing":"😗","kissing_smiling_eyes":"😙","stuck_out_tongue_winking_eye":"😜","stuck_out_tongue_closed_eyes":"😝","stuck_out_tongue":"😛","flushed":"😳","grin":"😁","pensive":"😔","relieved":"😌","unamused":"😒","disappointed":"😞","persevere":"😣","cry":"😢","joy":"😂","sob":"😭","sleepy":"😪","disappointed_relieved":"😥","cold_sweat":"😰","sweat_smile":"😅","sweat":"😓","weary":"😩","tired_face":"😫","fearful":"😨","scream":"😱","angry":"😠","rage":"😡","triumph":"😤","confounded":"😖","laughing":"😆","yum":"😋","mask":"😷","sunglasses":"😎","sleeping":"😴","dizzy_face":"😵","astonished":"😲","worried":"😟","frowning":"😦","anguished":"😧","imp":"👿","open_mouth":"😮","grimacing":"😬","neutral_face":"😐","confused":"😕","hushed":"😯","smirk":"😏","expressionless":"😑","man_with_gua_pi_mao":"👲","man_with_turban":"👳","cop":"👮","construction_worker":"👷","guardsman":"💂","baby":"👶","boy":"👦","girl":"👧","man":"👨","woman":"👩","older_man":"👴","older_woman":"👵","person_with_blond_hair":"👱","angel":"👼","princess":"👸","smiley_cat":"😺","smile_cat":"😸","heart_eyes_cat":"😻","kissing_cat":"😽","smirk_cat":"😼","scream_cat":"🙀","crying_cat_face":"😿","joy_cat":"😹","pouting_cat":"😾","japanese_ogre":"👹","japanese_goblin":"👺","see_no_evil":"🙈","hear_no_evil":"🙉","speak_no_evil":"🙊","skull":"💀","alien":"👽","hankey":"💩","fire":"🔥","sparkles":"✨","star2":"🌟","dizzy":"💫","boom":"💥","anger":"💢","sweat_drops":"💦","droplet":"💧","zzz":"💤","dash":"💨","ear":"👂","eyes":"👀","nose":"👃","tongue":"👅","lips":"👄","thumbs_up":"👍","-1":"👎","ok_hand":"👌","facepunch":"👊","fist":"✊","wave":"👋","hand":"✋","open_hands":"👐","point_up_2":"👆","point_down":"👇","point_right":"👉","point_left":"👈","raised_hands":"🙌","pray":"🙏","clap":"👏","muscle":"💪","walking":"🚶","runner":"🏃","dancer":"💃","couple":"👫","family":"👪","couplekiss":"💏","couple_with_heart":"💑","dancers":"👯","ok_woman":"🙆","no_good":"🙅","information_desk_person":"💁","raising_hand":"🙋","massage":"💆","haircut":"💇","nail_care":"💅","bride_with_veil":"👰","person_with_pouting_face":"🙎","person_frowning":"🙍","bow":"🙇","tophat":"🎩","crown":"👑","womans_hat":"👒","athletic_shoe":"👟","mans_shoe":"👞","sandal":"👡","high_heel":"👠","boot":"👢","shirt":"👕","necktie":"👔","womans_clothes":"👚","dress":"👗","running_shirt_with_sash":"🎽","jeans":"👖","kimono":"👘","bikini":"👙","briefcase":"💼","handbag":"👜","pouch":"👝","purse":"👛","eyeglasses":"👓","ribbon":"🎀","closed_umbrella":"🌂","lipstick":"💄","yellow_heart":"💛","blue_heart":"💙","purple_heart":"💜","green_heart":"💚","broken_heart":"💔","heartpulse":"💗","heartbeat":"💓","two_hearts":"💕","sparkling_heart":"💖","revolving_hearts":"💞","cupid":"💘","love_letter":"💌","kiss":"💋","ring":"💍","gem":"💎","bust_in_silhouette":"👤","speech_balloon":"💬","footprints":"👣"},
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//初始化websocket
|
|||
|
|
initConn:function() {
|
|||
|
|
this.socket = new ReconnectingWebSocket(this.server+"?visitor_id="+this.visitor.visitor_id+"&to_id="+this.visitor.to_id);//创建Socket实例
|
|||
|
|
this.socket.debug = true;
|
|||
|
|
this.socket.onmessage = this.OnMessage;
|
|||
|
|
this.socket.onopen = this.OnOpen;
|
|||
|
|
this.socket.onerror = this.OnError;
|
|||
|
|
this.socket.onclose = this.OnClose;
|
|||
|
|
this.ping();
|
|||
|
|
},
|
|||
|
|
OnOpen:function() {
|
|||
|
|
console.log("ws:onopen");
|
|||
|
|
//限制最大打开次数
|
|||
|
|
if(this.websocketOpenNum>=this.websocketMaxOpenNum){
|
|||
|
|
this.chatTitle=KEFU_LANG[LANG]['refresh'];
|
|||
|
|
this.socket.close();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.websocketOpenNum++;
|
|||
|
|
|
|||
|
|
//获取历史消息
|
|||
|
|
this.currentPage=1;
|
|||
|
|
this.msgList=[];
|
|||
|
|
this.loadMoreMessages();
|
|||
|
|
|
|||
|
|
this.chatTitle=this.noticeName;
|
|||
|
|
this.checkTimeout();
|
|||
|
|
this.socketClosed=false;
|
|||
|
|
this.focusSendConn=false;
|
|||
|
|
this.wsSocketClosed=false;
|
|||
|
|
this.sendVisitorLogin();
|
|||
|
|
//this.getExtendInfo();
|
|||
|
|
//获取产品卡片信息
|
|||
|
|
this.getUrlExtra();
|
|||
|
|
this.reconnectDialog=false;
|
|||
|
|
if(this.onlineType!="danger"){
|
|||
|
|
this.showTitle(this.entInfo.staffNickname+" "+KEFU_LANG[LANG]['connectok']);
|
|||
|
|
}
|
|||
|
|
//this.getNotice();
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
OnMessage:function(e) {
|
|||
|
|
console.log("ws:onmessage");
|
|||
|
|
this.socketClosed=false;
|
|||
|
|
this.focusSendConn=false;
|
|||
|
|
let _this=this;
|
|||
|
|
const redata = JSON.parse(e.data);
|
|||
|
|
if (redata.type == "transfer") {
|
|||
|
|
var kefuId = redata.data
|
|||
|
|
if(!kefuId){
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.visitor.to_id=kefuId;
|
|||
|
|
setFakeCookie("kefu_"+ENT_ID,kefuId,24*3600*30);
|
|||
|
|
}
|
|||
|
|
if (redata.type == "comment") {
|
|||
|
|
this.comment=true;
|
|||
|
|
this.scrollBottom();
|
|||
|
|
this.socket.close();
|
|||
|
|
this.socketClosed=true;
|
|||
|
|
this.reconnectDialog=true;
|
|||
|
|
}
|
|||
|
|
if (redata.type == "wechat_notice") {
|
|||
|
|
this.showTitle(KEFU_LANG[LANG]['wechatNotice']);
|
|||
|
|
}
|
|||
|
|
if (redata.type == "notice") {
|
|||
|
|
let msg = redata.data
|
|||
|
|
if(!msg){
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.showTitle(msg);
|
|||
|
|
// this.chatTitle=msg
|
|||
|
|
// $(".chatVisitorPage").append("<div class=\"chatTime\">"+this.chatTitle+"</div>");
|
|||
|
|
//this.scrollBottom();
|
|||
|
|
}
|
|||
|
|
if (redata.type == "accept") {
|
|||
|
|
let msg = redata.data;
|
|||
|
|
if(!msg||_this.localStream==null){
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// this.$confirm('请求与您通话?', '提示', {
|
|||
|
|
// confirmButtonText: '确定',
|
|||
|
|
// cancelButtonText: '取消',
|
|||
|
|
// type: 'warning'
|
|||
|
|
// }).then(() => {
|
|||
|
|
_this.kefuPeerId=msg;
|
|||
|
|
_this.isCalling=true;
|
|||
|
|
_this.talkPeer();
|
|||
|
|
// }).catch(() => {
|
|||
|
|
// });
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
if (redata.type == "callPhone") {
|
|||
|
|
this.callPhone();
|
|||
|
|
}
|
|||
|
|
if (redata.type == "callVideo") {
|
|||
|
|
this.callPeer();
|
|||
|
|
}
|
|||
|
|
if (redata.type == "refuse") {
|
|||
|
|
this.callClear();
|
|||
|
|
this.$message({
|
|||
|
|
message: "已挂断",
|
|||
|
|
type: 'error'
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (redata.type == "delete") {
|
|||
|
|
var msg = redata.data;
|
|||
|
|
for(var i=0;i<this.msgList.length;i++){
|
|||
|
|
if(this.msgList[i].msg_id==msg.msg_id){
|
|||
|
|
this.msgList.splice(i,1);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (redata.type == "read") {
|
|||
|
|
var msg = redata.data;
|
|||
|
|
for(var i=0;i<this.msgList.length;i++){
|
|||
|
|
this.msgList[i].read_status=KEFU_LANG[LANG]['read'];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (redata.type == "message") {
|
|||
|
|
let msg = redata.data
|
|||
|
|
//this.visitor.to_id=msg.id;
|
|||
|
|
let content = {}
|
|||
|
|
content.avator = msg.avator;
|
|||
|
|
content.name = msg.name;
|
|||
|
|
content.content =this.markdownHtml(replaceSpecialTag(msg.content));
|
|||
|
|
content.is_kefu = false;
|
|||
|
|
content.time = shortTime(msg.time);
|
|||
|
|
content.is_reply=true;
|
|||
|
|
content.msg_id = msg.msg_id;
|
|||
|
|
content.show_time=true;
|
|||
|
|
let isExist=false;
|
|||
|
|
for(key in this.msgList){
|
|||
|
|
if(this.msgList[key].msg_id==msg.msg_id){
|
|||
|
|
this.$set(this.msgList,key,content);
|
|||
|
|
this.scrollBottom();
|
|||
|
|
isExist=true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if(isExist) return;
|
|||
|
|
this.msgList.push(content);
|
|||
|
|
setTimeout(function () {
|
|||
|
|
_this.scrollBottom();
|
|||
|
|
},200);
|
|||
|
|
|
|||
|
|
notify(msg.name, {
|
|||
|
|
body: msg.content,
|
|||
|
|
icon: msg.avator
|
|||
|
|
},function(notification) {
|
|||
|
|
window.focus();
|
|||
|
|
notification.close();
|
|||
|
|
});
|
|||
|
|
flashTitle();//标题闪烁
|
|||
|
|
//clearInterval(this.timer);
|
|||
|
|
this.cleanAllTimeout();
|
|||
|
|
this.alertSound('/static/images/alert4.mp3');//提示音
|
|||
|
|
this.haveUnreadMessage=true;
|
|||
|
|
}
|
|||
|
|
if (redata.type == "close") {
|
|||
|
|
this.showTitle(KEFU_LANG[LANG]['closemes']);
|
|||
|
|
this.scrollBottom();
|
|||
|
|
this.socket.close();
|
|||
|
|
//this.socketClosed=true;
|
|||
|
|
this.focusSendConn=true;
|
|||
|
|
this.reconnectDialog=true;
|
|||
|
|
}
|
|||
|
|
if (redata.type == "force_close") {
|
|||
|
|
this.showTitle(KEFU_LANG[LANG]['forceclosemes']);
|
|||
|
|
this.scrollBottom();
|
|||
|
|
this.socket.close();
|
|||
|
|
this.socketClosed=true;
|
|||
|
|
this.reconnectDialog=true;
|
|||
|
|
}
|
|||
|
|
if (redata.type == "auto_close") {
|
|||
|
|
this.showTitle(KEFU_LANG[LANG]['autoclosemes']);
|
|||
|
|
this.scrollBottom();
|
|||
|
|
this.socket.close();
|
|||
|
|
this.socketClosed=true;
|
|||
|
|
this.reconnectDialog=true;
|
|||
|
|
}
|
|||
|
|
if (redata.type == "change_id") {
|
|||
|
|
var openId = redata.data;
|
|||
|
|
setFakeCookie("visitor_"+ENT_ID,openId,this.visitorCookie);
|
|||
|
|
location.reload();
|
|||
|
|
}
|
|||
|
|
window.parent.postMessage(redata,"*");
|
|||
|
|
},
|
|||
|
|
//发送给客户
|
|||
|
|
chatToUser:function(e) {
|
|||
|
|
this.searchList=[];
|
|||
|
|
if(this.sendDisabled){
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
//用户点击了ctrl+enter触发
|
|||
|
|
if(e && e.ctrlKey && e.keyCode==13) {
|
|||
|
|
this.messageContent += '\n';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
let messageContent=filterXSS(trim(this.messageContent.replace(/\r\n|\n/g,"<br>"),"<br>"));
|
|||
|
|
if(messageContent==""){
|
|||
|
|
this.messageContent="";
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.messageContent="";
|
|||
|
|
this.currentActiveTime=Date.now();
|
|||
|
|
if(this.socketClosed){
|
|||
|
|
this.initConn();
|
|||
|
|
// this.$message({
|
|||
|
|
// message: '连接关闭!请重新打开页面',
|
|||
|
|
// type: 'warning'
|
|||
|
|
// });
|
|||
|
|
//return;
|
|||
|
|
}
|
|||
|
|
this.sendDisabled=true;
|
|||
|
|
let _this=this;
|
|||
|
|
|
|||
|
|
let content = {}
|
|||
|
|
content.avator=_this.visitor.avator;
|
|||
|
|
content.content = replaceSpecialTag(messageContent);
|
|||
|
|
content.name = _this.visitor.name;
|
|||
|
|
content.is_kefu = true;
|
|||
|
|
//content.time = _this.getNowDate();
|
|||
|
|
content.show_time=false;
|
|||
|
|
content.read_status = KEFU_LANG[LANG]['unread'];
|
|||
|
|
_this.msgList.push(content);
|
|||
|
|
_this.scrollBottom();
|
|||
|
|
|
|||
|
|
let mes = {};
|
|||
|
|
// mes.type = "visitor";
|
|||
|
|
mes.content = messageContent;
|
|||
|
|
mes.from_id = this.visitor.visitor_id;
|
|||
|
|
mes.to_id = this.visitor.to_id;
|
|||
|
|
|
|||
|
|
//营销话术
|
|||
|
|
_this.sendMarketing(messageContent);
|
|||
|
|
|
|||
|
|
//机器人回答
|
|||
|
|
if(this.turnToMan && this.turnToMan.includes(messageContent)) {
|
|||
|
|
//用户输入了转人工的关键词
|
|||
|
|
this.isAutoReply = "no";
|
|||
|
|
}
|
|||
|
|
if(this.robotSwitch=="true" && this.robotToMessage(messageContent)){
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
mes.is_autoreply=this.isAutoReply;
|
|||
|
|
|
|||
|
|
//发送人工消息
|
|||
|
|
$.post("/2/message?lang="+getQuery("lang"),mes,function(res){
|
|||
|
|
_this.sendDisabled=false;
|
|||
|
|
if(res.code!=200){
|
|||
|
|
_this.$message({
|
|||
|
|
message: res.msg,
|
|||
|
|
type: 'error'
|
|||
|
|
});
|
|||
|
|
if(res.code==401){
|
|||
|
|
setTimeout(function(){
|
|||
|
|
window.location.reload();
|
|||
|
|
},2000);
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var result=res.result
|
|||
|
|
if(result.isBlack){
|
|||
|
|
_this.msgList.pop();
|
|||
|
|
content.content=result.content;
|
|||
|
|
_this.msgList.push(content);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
_this.messageContent = "";
|
|||
|
|
_this.cleanAllTimeout();
|
|||
|
|
_this.sendSound();
|
|||
|
|
_this.sendDisabled=false;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
//机器人模式回复
|
|||
|
|
robotToMessage(userContent){
|
|||
|
|
let _this=this;
|
|||
|
|
this.sendDisabled=false;
|
|||
|
|
this.messageContent="";
|
|||
|
|
//转接人工
|
|||
|
|
if(this.turnToMan && this.turnToMan.includes(userContent)){
|
|||
|
|
//转接人工
|
|||
|
|
this.isAutoReply="no";
|
|||
|
|
//正在排队
|
|||
|
|
if(this.visitorMaxNumLimit){
|
|||
|
|
this.showTitle(this.visitorMaxNumNotice);
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
this.initConn();
|
|||
|
|
this.robotSwitch="";
|
|||
|
|
this.isRobotModel="no";
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
sendAjax("/2/robotMessage","post",{
|
|||
|
|
ent_id:ENT_ID,
|
|||
|
|
content:userContent,
|
|||
|
|
visitor_id:this.visitor.visitor_id,
|
|||
|
|
},function(result){
|
|||
|
|
let msg=result.result;
|
|||
|
|
let code=result.code;
|
|||
|
|
if (code!="20000"||(msg.content=="" && _this.robotNoAnswer=="")){
|
|||
|
|
// _this.msgList.pop();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if(msg.content==""){
|
|||
|
|
msg.content=_this.robotNoAnswer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let content = {}
|
|||
|
|
content.avator=_this.noticeAvatar;
|
|||
|
|
content.content = replaceSpecialTag(msg.content);
|
|||
|
|
content.name = _this.noticeName;
|
|||
|
|
content.is_kefu = false;
|
|||
|
|
content.read_status = KEFU_LANG[LANG]['read'];
|
|||
|
|
content.time = _this.getNowDate();
|
|||
|
|
content.show_time=false;
|
|||
|
|
_this.msgList.push(content);
|
|||
|
|
// _this.msgList[_this.msgList.length-1].content=replaceSpecialTag(msg.content);
|
|||
|
|
_this.scrollBottom();
|
|||
|
|
});
|
|||
|
|
return true;
|
|||
|
|
},
|
|||
|
|
//正在输入
|
|||
|
|
inputNextText:function(){
|
|||
|
|
var _this=this;
|
|||
|
|
this.sendInputingStrNow(this.messageContent);
|
|||
|
|
//是否进行搜索
|
|||
|
|
if(this.robotSwitch!="true"){
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.sendAjax("/2/searchQuestion","get",{ent_id:ENT_ID,content:this.messageContent},function(result){
|
|||
|
|
if(!result){
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
for(key in result){
|
|||
|
|
let title=result[key].title.split(",")[0];
|
|||
|
|
result[key].title=title;
|
|||
|
|
let str= title.replace(_this.messageContent,"<span>"+_this.messageContent+"</span>");
|
|||
|
|
result[key].htmlTitle=str;
|
|||
|
|
}
|
|||
|
|
_this.searchList=result;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
sendInputingStrNow:function(str){
|
|||
|
|
if(this.socketClosed||!this.socket||this.wsSocketClosed){
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var message = {}
|
|||
|
|
message.type = "inputing";
|
|||
|
|
message.data = {
|
|||
|
|
from : this.visitor.visitor_id,
|
|||
|
|
to : this.visitor.to_id,
|
|||
|
|
content:str
|
|||
|
|
};
|
|||
|
|
this.socket.send(JSON.stringify(message));
|
|||
|
|
},
|
|||
|
|
sendVisitorLogin:function(){
|
|||
|
|
var _this=this;
|
|||
|
|
setTimeout(function(){
|
|||
|
|
if(_this.socketClosed||!_this.socket||_this.wsSocketClosed){
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var message = {}
|
|||
|
|
message.type = "visitor_login";
|
|||
|
|
message.data = {
|
|||
|
|
from : _this.visitor.visitor_id,
|
|||
|
|
to : _this.visitor.to_id,
|
|||
|
|
};
|
|||
|
|
_this.socket.send(JSON.stringify(message));
|
|||
|
|
}, 3000);
|
|||
|
|
},
|
|||
|
|
OnClose:function(event) {
|
|||
|
|
console.log("ws:onclose",event);
|
|||
|
|
this.focusSendConn=true;
|
|||
|
|
this.wsSocketClosed=true;
|
|||
|
|
this.closeTimeoutTimer();
|
|||
|
|
},
|
|||
|
|
OnError:function(event) {
|
|||
|
|
console.log("ws:onerror",event);
|
|||
|
|
this.closeTimeoutTimer();
|
|||
|
|
},
|
|||
|
|
//访客初始化
|
|||
|
|
getUserInfo:function(){
|
|||
|
|
let _this=this;
|
|||
|
|
let visitor_id=getFakeCookie("visitor_"+ENT_ID);
|
|||
|
|
let to_id=KEFU_ID;
|
|||
|
|
let preKefuId=getFakeCookie("kefu_"+ENT_ID);
|
|||
|
|
if(preKefuId!="") to_id=preKefuId;
|
|||
|
|
let extra=EXTRA;
|
|||
|
|
//var url=getQuery("url");
|
|||
|
|
let paramVisitorId=VISITOR_ID;
|
|||
|
|
if(paramVisitorId!=""){
|
|||
|
|
visitor_id=paramVisitorId;
|
|||
|
|
}
|
|||
|
|
let visitorName=VISITOR_NAME;
|
|||
|
|
let avator=AVATOR;
|
|||
|
|
|
|||
|
|
if(extra==""){
|
|||
|
|
let ext={};
|
|||
|
|
let refer=document.referrer?document.referrer:"-";
|
|||
|
|
ext.refer=refer;
|
|||
|
|
ext.host=document.location.href;
|
|||
|
|
extra=utf8ToB64(JSON.stringify(ext));
|
|||
|
|
}else{
|
|||
|
|
try{
|
|||
|
|
let jsonStr=b64ToUtf8(extra)
|
|||
|
|
let extJson=JSON.parse(jsonStr)
|
|||
|
|
if(extJson.refer){
|
|||
|
|
if(REFER=="") REFER=extJson.refer;
|
|||
|
|
if(REFER_URL=="") REFER_URL=extJson.refer;
|
|||
|
|
}
|
|||
|
|
}catch (e) {}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
if(REFER_URL==""){
|
|||
|
|
REFER_URL=document.referrer;
|
|||
|
|
}
|
|||
|
|
if(REFER==""){
|
|||
|
|
REFER=document.title;
|
|||
|
|
}
|
|||
|
|
//发送消息
|
|||
|
|
$.ajax({
|
|||
|
|
type: "post",
|
|||
|
|
url: "/visitor_login",
|
|||
|
|
data:{visitor_id:visitor_id,
|
|||
|
|
visitor_name:visitorName,
|
|||
|
|
avator:avator,
|
|||
|
|
refer:REFER,
|
|||
|
|
to_id:to_id,
|
|||
|
|
extra:extra,
|
|||
|
|
ent_id:ENT_ID,
|
|||
|
|
url:document.location.href,
|
|||
|
|
refer_url:REFER_URL,
|
|||
|
|
title:document.title,
|
|||
|
|
language:window.navigator.language,//浏览器的语言。
|
|||
|
|
},
|
|||
|
|
error:function(res){
|
|||
|
|
let data=JSON.parse(res.responseText);
|
|||
|
|
_this.$message({
|
|||
|
|
message: data.msg,
|
|||
|
|
type: 'error'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
success: function(res) {
|
|||
|
|
_this.getTopQuestion();
|
|||
|
|
|
|||
|
|
//判断同时接待访客数
|
|||
|
|
if(res.code==40018){
|
|||
|
|
_this.visitorMaxNumLimit=true;
|
|||
|
|
_this.visitor=res.result;
|
|||
|
|
_this.robotSwitch="true";
|
|||
|
|
_this.chatTitle=res.kefu.username;
|
|||
|
|
_this.turnToMan=res.turnToMan.split(",");
|
|||
|
|
var visitorMaxNumNotice=res.visitorMaxNumNotice;
|
|||
|
|
if(visitorMaxNumNotice==""){
|
|||
|
|
visitorMaxNumNotice="当前有"+res.visitorMaxNum+"位访客正在排队咨询，请稍等一会再尝试 <a href='javascript:window.location.reload();'>刷新</a>";
|
|||
|
|
}
|
|||
|
|
_this.visitorMaxNumNotice=visitorMaxNumNotice;
|
|||
|
|
if (_this.isRobotModel!="yes") _this.showTitle(visitorMaxNumNotice);
|
|||
|
|
//_this.sendDisabled=true;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
//提示错误信息
|
|||
|
|
if(res.code!=200){
|
|||
|
|
_this.$message({
|
|||
|
|
message: res.msg,
|
|||
|
|
type: 'error'
|
|||
|
|
});
|
|||
|
|
_this.reconnectDialog=true;
|
|||
|
|
_this.chatTitle=res.msg;
|
|||
|
|
_this.sendDisabled=true;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
_this.entInfo=res.kefu;
|
|||
|
|
_this.noticeName=res.kefu.username;
|
|||
|
|
_this.noticeAvatar=res.kefu.avatar;
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
if(res.alloffline){
|
|||
|
|
_this.onlineType="danger";
|
|||
|
|
_this.showTitle(_this.flyLang.offline);
|
|||
|
|
}else{
|
|||
|
|
_this.onlineType="success";
|
|||
|
|
}
|
|||
|
|
// if(KEFU_CONFIG.SHOW_OFFLINE_PAGE){
|
|||
|
|
// _this.allOffline=res.alloffline;
|
|||
|
|
// }
|
|||
|
|
_this.sendDisabled=false;
|
|||
|
|
_this.visitor=res.result;
|
|||
|
|
// _this.noticeName=res.kefu.username;
|
|||
|
|
// _this.noticeAvatar=res.kefu.avatar;
|
|||
|
|
_this.entIntroduce=res.entIntroduce;
|
|||
|
|
_this.robotSwitch=res.robotSwitch;
|
|||
|
|
_this.turnToMan=res.turnToMan.split(",");
|
|||
|
|
_this.chatTitle=_this.noticeName;
|
|||
|
|
_this.visitorNotice=res.visitorNotice;
|
|||
|
|
_this.autoWelcome=res.autoWelcome;
|
|||
|
|
_this.visitorCookie=res.visitorCookie;
|
|||
|
|
_this.scanWechatQrcode=res.scanWechatQrcode;
|
|||
|
|
_this.closeNotice=res.closeNotice;
|
|||
|
|
_this.robotInfo=res.robot;
|
|||
|
|
document.title=res.kefu.username;
|
|||
|
|
if(!getFakeCookie("visitor_"+ENT_ID)){
|
|||
|
|
setFakeCookie("visitor_"+ENT_ID,_this.visitor.visitor_id,res.visitorCookie);
|
|||
|
|
}
|
|||
|
|
setFakeCookie("kefu_"+ENT_ID,_this.visitor.to_id,res.visitorCookie);
|
|||
|
|
//_this.loadMoreMessages();
|
|||
|
|
_this.showWechatTip();
|
|||
|
|
//展示固定营销
|
|||
|
|
_this.sendMarketing();
|
|||
|
|
if(_this.robotSwitch!="true"){
|
|||
|
|
_this.initConn();
|
|||
|
|
_this.getNotice();
|
|||
|
|
}else{
|
|||
|
|
//展示机器人
|
|||
|
|
// _this.msgList.push({type:"card"});
|
|||
|
|
// _this.displayHide();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//获取信息列表
|
|||
|
|
sendEmailMsg:function(){
|
|||
|
|
let _this=this;
|
|||
|
|
_this.visitorContact.ent_id=ENT_ID;
|
|||
|
|
$.ajax({
|
|||
|
|
type:"post",
|
|||
|
|
url:"/ent/email_message",
|
|||
|
|
data:_this.visitorContact,
|
|||
|
|
success: function(data) {
|
|||
|
|
if(data.code!=200){
|
|||
|
|
_this.$message({
|
|||
|
|
message: data.msg,
|
|||
|
|
type: 'error'
|
|||
|
|
});
|
|||
|
|
}else{
|
|||
|
|
_this.allOffline=false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//滚动到底部
|
|||
|
|
scrollBottom:function(){
|
|||
|
|
var _this=this;
|
|||
|
|
//$('.chatVisitorPage').animate({scrollTop:'99999999999999'},"slow");
|
|||
|
|
this.$nextTick(function(){
|
|||
|
|
var container = _this.$el.querySelector(".chatVisitorPage");
|
|||
|
|
container.scrollTop = 999999;
|
|||
|
|
//alert(1);
|
|||
|
|
//$('.chatVisitorPage').animate({scrollTop:'99999999999999'},'99999999');
|
|||
|
|
// $('.chatVisitorPage').scrollTop(9999999999999999999);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//软键盘问题
|
|||
|
|
textareaFocus:function(){
|
|||
|
|
// if(/Android|webOS|iPhone|iPad|BlackBerry/i.test(navigator.userAgent)) {
|
|||
|
|
// //$(".chatContext").css("margin-bottom","0");
|
|||
|
|
// //$(".chatBoxSend").css("position","static");
|
|||
|
|
// this.textareaFocused=true;
|
|||
|
|
// }
|
|||
|
|
this.scrollBottom();
|
|||
|
|
},
|
|||
|
|
textareaBlur:function(){
|
|||
|
|
// if(this.textareaFocused&&/Android|webOS|iPhone|iPad|BlackBerry/i.test(navigator.userAgent)) {
|
|||
|
|
// var chatBoxSendObj=$(".chatBoxSend");
|
|||
|
|
// var chatContextObj=$(".chatContext");
|
|||
|
|
// if(this.textareaFocused&&chatBoxSendObj.css("position")!="fixed"){
|
|||
|
|
// //chatContextObj.css("margin-bottom","105px");
|
|||
|
|
// //chatBoxSendObj.css("position","fixed");
|
|||
|
|
// this.textareaFocused=false;
|
|||
|
|
// }
|
|||
|
|
//
|
|||
|
|
// }
|
|||
|
|
this.scrollBottom();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//获取日期
|
|||
|
|
getNowDate : function() {// 获取日期
|
|||
|
|
var d = new Date(new Date());
|
|||
|
|
return d.getFullYear() + '-' + this.digit(d.getMonth() + 1) + '-' + this.digit(d.getDate())
|
|||
|
|
+ ' ' + this.digit(d.getHours()) + ':' + this.digit(d.getMinutes()) + ':' + this.digit(d.getSeconds());
|
|||
|
|
},
|
|||
|
|
//补齐数位
|
|||
|
|
digit : function (num) {
|
|||
|
|
return num < 10 ? '0' + (num | 0) : num;
|
|||
|
|
},
|
|||
|
|
setNoticeWelcome(list){
|
|||
|
|
var _this=this;
|
|||
|
|
var msgs = list;
|
|||
|
|
var delaySecond=2;
|
|||
|
|
for(let i in msgs){
|
|||
|
|
var msg=msgs[i];
|
|||
|
|
if(msg.delay_second){
|
|||
|
|
delaySecond+=msg.delay_second;
|
|||
|
|
}else{
|
|||
|
|
delaySecond+=4;
|
|||
|
|
}
|
|||
|
|
var timer = setTimeout(function (msg) {
|
|||
|
|
msg.time=shortTime(getNowDate());
|
|||
|
|
msg.show_time=false;
|
|||
|
|
msg.content = replaceSpecialTag(msg.content);
|
|||
|
|
|
|||
|
|
//判断类型
|
|||
|
|
if(msg.content.includes("[询前表单]")){
|
|||
|
|
if (getFakeCookie("preVisitorForm_"+ENT_ID)) return
|
|||
|
|
_this.chatBoxSend=false;
|
|||
|
|
msg.type="preVisitorForm";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
_this.msgList.push(msg);
|
|||
|
|
_this.scrollBottom();
|
|||
|
|
_this.alertSound('/static/images/notification.mp3');
|
|||
|
|
var redata={
|
|||
|
|
type:"message",
|
|||
|
|
data:msg
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
window.parent.postMessage(redata,"*");
|
|||
|
|
},1000*delaySecond,msg);
|
|||
|
|
_this.allTimeouter.push(timer);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//获取自动欢迎语句
|
|||
|
|
getNotice : function (){
|
|||
|
|
var _this=this;
|
|||
|
|
var oldNotice=getFakeCookie("noticed_"+ENT_ID);
|
|||
|
|
if(oldNotice && _this.autoWelcome=="on"){
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
$.get("/2/notices?visitor_id="+this.visitor.visitor_id+"&ent_id="+ENT_ID+"&kefu_name="+this.visitor.to_id,function(res) {
|
|||
|
|
_this.entConfig=res.result.ent_config;
|
|||
|
|
if (res.result.welcome != null) {
|
|||
|
|
setFakeCookie("noticed_"+ENT_ID,res.result.welcome,7*3600*24);
|
|||
|
|
_this.setNoticeWelcome(res.result.welcome);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
initCss:function(){
|
|||
|
|
|
|||
|
|
|
|||
|
|
var _this=this;
|
|||
|
|
$(function () {
|
|||
|
|
//手机端的样式问题
|
|||
|
|
if(_this.isMobile){
|
|||
|
|
$(".chatVisitorPage").css("height","calc(100% - 100px)");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$("body").on("click",".cardBox a,.chatNewContent a",function() {
|
|||
|
|
var txt=$(this).text();
|
|||
|
|
var href=$(this).attr("href");
|
|||
|
|
if(href=="#"||!href){
|
|||
|
|
_this.messageContent=txt;
|
|||
|
|
_this.chatToUser();
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//var windheight = $(window).height();
|
|||
|
|
$(window).resize(function(){
|
|||
|
|
//var docheight = $(window).height(); /*唤起键盘时当前窗口高度*/
|
|||
|
|
//_this.scrollBottom();
|
|||
|
|
_this.visitorPageHeight();
|
|||
|
|
// if(docheight < windheight){ /*当唤起键盘高度小于未唤起键盘高度时执行*/
|
|||
|
|
// $(".chatBoxSend").css("position","static");
|
|||
|
|
// }else{
|
|||
|
|
// $(".chatBoxSend").css("position","fixed");
|
|||
|
|
// }
|
|||
|
|
//_this.visitorPageHeight();
|
|||
|
|
//document.getElementById('chatVisitorPage').style.height = (document.documentElement.clientHeight - 71) + 'px';
|
|||
|
|
});
|
|||
|
|
if(isMobile()){
|
|||
|
|
_this.visitorPageHeight();
|
|||
|
|
//document.getElementById('chatVisitorPage').style.height = (document.documentElement.clientHeight - 71) + 'px';
|
|||
|
|
}
|
|||
|
|
//自动问答
|
|||
|
|
$("body").on("click",".visitorReplyContent",function() {
|
|||
|
|
var txt=$(this).find("span").text();
|
|||
|
|
_this.messageContent=txt;
|
|||
|
|
_this.chatToUser();
|
|||
|
|
});
|
|||
|
|
//自动问答换一换
|
|||
|
|
$("body").on("click",".visitorReplyTitle a",function() {
|
|||
|
|
++_this.topQuestionPage;
|
|||
|
|
if(_this.topQuestionPage>_this.topQuestionCount){
|
|||
|
|
_this.topQuestionPage=1;
|
|||
|
|
}
|
|||
|
|
var result=pagination(_this.topQuestionPage,_this.topQuestionPagesize,_this.topQuestionList);
|
|||
|
|
_this.makeReplyItem(result,true);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//展开收起效果
|
|||
|
|
// displayHide:function(){
|
|||
|
|
// setTimeout(function(){
|
|||
|
|
// //展开和收起效果
|
|||
|
|
// let cardBoxArticle=$(".cardBoxArticle");
|
|||
|
|
// cardBoxArticle.after(`<a class="cardBoxToggle" href="javascript:;">展开</a>`);
|
|||
|
|
// let cardBoxToggle=$(".cardBoxToggle");
|
|||
|
|
// let height=cardBoxArticle.height();
|
|||
|
|
// if(height>70){
|
|||
|
|
// cardBoxToggle.text("展开").show();
|
|||
|
|
// cardBoxArticle.css({
|
|||
|
|
// "height":"70px",
|
|||
|
|
// "overflow":"hidden",
|
|||
|
|
// });
|
|||
|
|
// }else{
|
|||
|
|
// cardBoxToggle.hide();
|
|||
|
|
// }
|
|||
|
|
// $("body").on("click",".cardBoxToggle",function() {
|
|||
|
|
// height=cardBoxArticle.height();
|
|||
|
|
// if(height>70){
|
|||
|
|
// cardBoxToggle.text("展开");
|
|||
|
|
// cardBoxArticle.css({
|
|||
|
|
// "height":"70px",
|
|||
|
|
// "overflow":"hidden",
|
|||
|
|
// });
|
|||
|
|
// }else{
|
|||
|
|
// cardBoxArticle.css({
|
|||
|
|
// "height":"auto",
|
|||
|
|
// "overflow":"auto",
|
|||
|
|
// });
|
|||
|
|
// cardBoxToggle.text("收起");
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
// },100);
|
|||
|
|
// },
|
|||
|
|
//心跳
|
|||
|
|
ping:function(){
|
|||
|
|
let _this=this;
|
|||
|
|
let mes = {}
|
|||
|
|
mes.type = "ping";
|
|||
|
|
mes.data = "visitor:"+_this.visitor.visitor_id;
|
|||
|
|
setInterval(function () {
|
|||
|
|
if(_this.socket!=null&&!_this.wsSocketClosed){
|
|||
|
|
_this.socket.send(JSON.stringify(mes));
|
|||
|
|
}
|
|||
|
|
},10000);
|
|||
|
|
},
|
|||
|
|
//初始化
|
|||
|
|
init:function(){
|
|||
|
|
var _this=this;
|
|||
|
|
_this.isMobile=isMobile();
|
|||
|
|
|
|||
|
|
this.initCss();
|
|||
|
|
//已读消息
|
|||
|
|
var ms= 1000*2;
|
|||
|
|
var lastClick = Date.now() - ms;
|
|||
|
|
$("body").mouseover(function(){
|
|||
|
|
if(!_this.haveUnreadMessage){
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (Date.now() - lastClick >= ms) {
|
|||
|
|
lastClick = Date.now();
|
|||
|
|
//如果有未读消息，调用已读接口
|
|||
|
|
_this.sendAjax("/2/messages_read","post",{"visitor_id":_this.visitor.visitor_id,"kefu":_this.visitor.to_id},function(data){
|
|||
|
|
_this.haveUnreadMessage=false;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
$('body').click(function(){
|
|||
|
|
clearFlashTitle();
|
|||
|
|
window.parent.postMessage({type:"focus"},"*");
|
|||
|
|
//$('.faceBox').hide();
|
|||
|
|
//剪贴板
|
|||
|
|
try{
|
|||
|
|
var selecter = window.getSelection().toString();
|
|||
|
|
if (selecter != null && selecter.trim() != ""){
|
|||
|
|
var str=selecter.trim();
|
|||
|
|
_this.sendInputingStrNow(str);
|
|||
|
|
}
|
|||
|
|
} catch (err){
|
|||
|
|
var selecter = document.selection.createRange();
|
|||
|
|
var s = selecter.text;
|
|||
|
|
if (s != null && s.trim() != ""){
|
|||
|
|
var str=s.trim();
|
|||
|
|
_this.sendInputingStrNow(str);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
$("body").on("click",".chatNewContent img",function() {
|
|||
|
|
var url=$(this).attr("data-src");
|
|||
|
|
if(!url){
|
|||
|
|
url=$(this).attr("src");
|
|||
|
|
}
|
|||
|
|
_this.imgPreviewSrc=[url];
|
|||
|
|
_this.$refs.preview.clickHandler();
|
|||
|
|
//new PinchZoom.default($(this)[0], {});
|
|||
|
|
// _this.$alert("<img src='"+url+"'/>", "", {
|
|||
|
|
// dangerouslyUseHTMLString: true
|
|||
|
|
// });
|
|||
|
|
return false;
|
|||
|
|
});
|
|||
|
|
// window.onfocus = function () {
|
|||
|
|
// //_this.focusHandle();
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
//判断当前是否在iframe中
|
|||
|
|
if(getQuery("show_title")=='no'){
|
|||
|
|
_this.isIframe=true;
|
|||
|
|
}
|
|||
|
|
//判断微信环境
|
|||
|
|
_this.checkWechatEnvironmentAndShowImage();
|
|||
|
|
|
|||
|
|
this.markdownIt=window.markdownit({
|
|||
|
|
html: true,
|
|||
|
|
linkify: true,
|
|||
|
|
typographer: true,
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//表情点击事件
|
|||
|
|
faceIconClick:function(index){
|
|||
|
|
this.showFaceIcon=false;
|
|||
|
|
this.messageContent+="face"+this.face[index].name;
|
|||
|
|
},
|
|||
|
|
//上传图片
|
|||
|
|
uploadImg:function (url){
|
|||
|
|
let _this=this;
|
|||
|
|
$('#uploadImg').after('<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png" id="uploadImgFile" name="file" style="display:none" >');
|
|||
|
|
$("#uploadImgFile").click();
|
|||
|
|
$("#uploadImgFile").change(function (e) {
|
|||
|
|
var formData = new FormData();
|
|||
|
|
var file = $("#uploadImgFile")[0].files[0];
|
|||
|
|
formData.append("imgfile",file); //传给后台的file的key值是可以自己定义的
|
|||
|
|
filter(file) && $.ajax({
|
|||
|
|
url: url || '',
|
|||
|
|
type: "post",
|
|||
|
|
data: formData,
|
|||
|
|
contentType: false,
|
|||
|
|
processData: false,
|
|||
|
|
dataType: 'JSON',
|
|||
|
|
mimeType: "multipart/form-data",
|
|||
|
|
//添加自定义属性,监听上下文的进度
|
|||
|
|
xhr: function() {
|
|||
|
|
//创建原生的ajax请求对象
|
|||
|
|
var xhr = $.ajaxSettings.xhr();
|
|||
|
|
//监听进度的一个事件
|
|||
|
|
xhr.upload.onprogress = function(e) {
|
|||
|
|
console.log(e.total); //文件大小
|
|||
|
|
console.log(e.loaded); //上传多少
|
|||
|
|
var w = parseInt((e.loaded / e.total) * 100)
|
|||
|
|
console.log(w);
|
|||
|
|
_this.percentage=w;
|
|||
|
|
if(w>=100){
|
|||
|
|
_this.percentage=0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return xhr
|
|||
|
|
},
|
|||
|
|
success: function (res) {
|
|||
|
|
if(res.code!=200){
|
|||
|
|
_this.$message({
|
|||
|
|
message: res.msg,
|
|||
|
|
type: 'error'
|
|||
|
|
});
|
|||
|
|
}else{
|
|||
|
|
_this.$message({
|
|||
|
|
message: KEFU_LANG[LANG]['uploadSuccess'],
|
|||
|
|
type: 'success'
|
|||
|
|
});
|
|||
|
|
_this.messageContent+='img[' + res.result.path + ']';
|
|||
|
|
_this.chatToUser();
|
|||
|
|
setTimeout(function () {
|
|||
|
|
_this.scrollBottom();
|
|||
|
|
},2000);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error: function (data) {
|
|||
|
|
console.log(data);
|
|||
|
|
_this.$message({
|
|||
|
|
message: KEFU_LANG[LANG]['uploadFailed']+data.responseText,
|
|||
|
|
type: 'error'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//上传文件
|
|||
|
|
uploadFile:function (url){
|
|||
|
|
let _this=this;
|
|||
|
|
$('#uploadFile').after('<input type="file" id="uploadRealFile" name="file2" style="display:none" >');
|
|||
|
|
$("#uploadRealFile").click();
|
|||
|
|
$("#uploadRealFile").change(function (e) {
|
|||
|
|
var formData = new FormData();
|
|||
|
|
var file = $("#uploadRealFile")[0].files[0];
|
|||
|
|
formData.append("realfile",file); //传给后台的file的key值是可以自己定义的
|
|||
|
|
console.log(formData);
|
|||
|
|
$.ajax({
|
|||
|
|
url: url || '',
|
|||
|
|
type: "post",
|
|||
|
|
data: formData,
|
|||
|
|
contentType: false,
|
|||
|
|
processData: false,
|
|||
|
|
dataType: 'JSON',
|
|||
|
|
mimeType: "multipart/form-data",
|
|||
|
|
//添加自定义属性,监听上下文的进度
|
|||
|
|
xhr: function() {
|
|||
|
|
//创建原生的ajax请求对象
|
|||
|
|
var xhr = $.ajaxSettings.xhr();
|
|||
|
|
//监听进度的一个事件
|
|||
|
|
xhr.upload.onprogress = function(e) {
|
|||
|
|
console.log(e.total); //文件大小
|
|||
|
|
console.log(e.loaded); //上传多少
|
|||
|
|
var w = parseInt((e.loaded / e.total) * 100)
|
|||
|
|
console.log(w);
|
|||
|
|
_this.percentage=w;
|
|||
|
|
if(w>=100){
|
|||
|
|
_this.percentage=0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return xhr
|
|||
|
|
},
|
|||
|
|
success: function (res) {
|
|||
|
|
|
|||
|
|
if(res.code!=200){
|
|||
|
|
_this.$message({
|
|||
|
|
message: res.msg,
|
|||
|
|
type: 'error'
|
|||
|
|
});
|
|||
|
|
}else{
|
|||
|
|
_this.$message({
|
|||
|
|
message: KEFU_LANG[LANG]['uploadSuccess'],
|
|||
|
|
type: 'success'
|
|||
|
|
});
|
|||
|
|
//_this.messageContent+='file[' + res.result.path + ']';
|
|||
|
|
var data=JSON.stringify({
|
|||
|
|
name:res.result.name,
|
|||
|
|
ext:res.result.ext,
|
|||
|
|
size:res.result.size,
|
|||
|
|
path:res.result.path,
|
|||
|
|
})
|
|||
|
|
_this.messageContent+='mutiFile[' + data+ ']';
|
|||
|
|
_this.chatToUser();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error: function (data) {
|
|||
|
|
console.log(data);
|
|||
|
|
_this.$message({
|
|||
|
|
message: KEFU_LANG[LANG]['uploadFailed']+data.responseText,
|
|||
|
|
type: 'error'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//粘贴上传图片
|
|||
|
|
onPasteUpload:function(event){
|
|||
|
|
let items = event.clipboardData && event.clipboardData.items;
|
|||
|
|
let file = null
|
|||
|
|
if (items && items.length) {
|
|||
|
|
// 检索剪切板items
|
|||
|
|
for (var i = 0; i < items.length; i++) {
|
|||
|
|
if (items[i].type.indexOf('image') !== -1) {
|
|||
|
|
file = items[i].getAsFile()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (!file) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
let _this=this;
|
|||
|
|
var formData = new FormData();
|
|||
|
|
formData.append('imgfile', file);
|
|||
|
|
$.ajax({
|
|||
|
|
url: '/uploadimg',
|
|||
|
|
type: "post",
|
|||
|
|
data: formData,
|
|||
|
|
contentType: false,
|
|||
|
|
processData: false,
|
|||
|
|
dataType: 'JSON',
|
|||
|
|
mimeType: "multipart/form-data",
|
|||
|
|
//添加自定义属性,监听上下文的进度
|
|||
|
|
xhr: function() {
|
|||
|
|
//创建原生的ajax请求对象
|
|||
|
|
var xhr = $.ajaxSettings.xhr();
|
|||
|
|
//监听进度的一个事件
|
|||
|
|
xhr.upload.onprogress = function(e) {
|
|||
|
|
console.log(e.total); //文件大小
|
|||
|
|
console.log(e.loaded); //上传多少
|
|||
|
|
var w = parseInt((e.loaded / e.total) * 100)
|
|||
|
|
console.log(w);
|
|||
|
|
_this.percentage=w;
|
|||
|
|
if(w>=100){
|
|||
|
|
_this.percentage=0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return xhr
|
|||
|
|
},
|
|||
|
|
success: function (res) {
|
|||
|
|
if(res.code!=200){
|
|||
|
|
_this.$message({
|
|||
|
|
message: res.msg,
|
|||
|
|
type: 'error'
|
|||
|
|
});
|
|||
|
|
}else{
|
|||
|
|
_this.$message({
|
|||
|
|
message: KEFU_LANG[LANG]['uploadSuccess'],
|
|||
|
|
type: 'success'
|
|||
|
|
});
|
|||
|
|
_this.messageContent+='img[' + res.result.path + ']';
|
|||
|
|
_this.chatToUser();
|
|||
|
|
setTimeout(function () {
|
|||
|
|
_this.scrollBottom();
|
|||
|
|
},2000);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error: function (data) {
|
|||
|
|
console.log(data);
|
|||
|
|
_this.$message({
|
|||
|
|
message: KEFU_LANG[LANG]['uploadFailed']+data.responseText,
|
|||
|
|
type: 'error'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//自动
|
|||
|
|
getTopQuestion:function(){
|
|||
|
|
var _this=this;
|
|||
|
|
$.get("/other/getTopQuestion?ent_id="+ENT_ID,function(res) {
|
|||
|
|
if(res.code!=200||!res.result){
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var hotQuestion=res.result.hotQuestion;
|
|||
|
|
if(hotQuestion!=""){
|
|||
|
|
_this.hotQuestion=hotQuestion.split(",");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var questionList=res.result.questionList;
|
|||
|
|
if(questionList.length==0){
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
for(var i=0;i<questionList.length;i++){
|
|||
|
|
var item=questionList[i].split(",")[0];
|
|||
|
|
questionList[i]=item;
|
|||
|
|
}
|
|||
|
|
//多选项卡
|
|||
|
|
let catResult=res.result.catResult;
|
|||
|
|
for(let catName in catResult){
|
|||
|
|
let arr={};
|
|||
|
|
arr['cat_name']=catName;
|
|||
|
|
arr['titles']=catResult[catName];
|
|||
|
|
_this.topQuestionCatResult.push(arr);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
_this.topQuestionList=questionList;
|
|||
|
|
_this.topQuestionCount=sumPage(_this.topQuestionPagesize,questionList);
|
|||
|
|
var result=pagination(1,_this.topQuestionPagesize,questionList);
|
|||
|
|
_this.makeReplyItem(result);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
makeReplyItem:function(result,isPage){
|
|||
|
|
var i=1;
|
|||
|
|
let content="";
|
|||
|
|
for(key in result){
|
|||
|
|
content+="<p>"+i+". <a href='#'>"+result[key]+"</a></p>";
|
|||
|
|
i++;
|
|||
|
|
}
|
|||
|
|
this.topQuestionListHtml=content;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//提示音
|
|||
|
|
alertSound:function(soundUrl){
|
|||
|
|
var b = document.getElementById("chatMessageAudio");
|
|||
|
|
if (b.canPlayType('audio/ogg; codecs="vorbis"')) {
|
|||
|
|
b.type= 'audio/mpeg';
|
|||
|
|
b.src=soundUrl ;
|
|||
|
|
var p = b.play();
|
|||
|
|
p && p.then(function () {
|
|||
|
|
}).catch(function (e) {
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
sendSound:function(){
|
|||
|
|
var b = document.getElementById("chatMessageSendAudio");
|
|||
|
|
if (b.canPlayType('audio/ogg; codecs="vorbis"')) {
|
|||
|
|
b.type= 'audio/mpeg';
|
|||
|
|
b.src= '/static/images/sent.ogg';
|
|||
|
|
var p = b.play();
|
|||
|
|
p && p.then(function(){}).catch(function(e){});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
initPeerjs:function(){
|
|||
|
|
var peer = new Peer();
|
|||
|
|
this.peer=peer;
|
|||
|
|
var _this=this;
|
|||
|
|
|
|||
|
|
peer.on('open', function(id) {
|
|||
|
|
console.log('My peer ID is: ' + id);
|
|||
|
|
_this.peerjsId=id;
|
|||
|
|
});
|
|||
|
|
peer.on('close', function() {
|
|||
|
|
console.log('My peer close');
|
|||
|
|
if(_this.loading!=null){
|
|||
|
|
_this.loading.close();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
peer.on('disconnected', function() {
|
|||
|
|
console.log('My peer disconnected');
|
|||
|
|
if(_this.loading!=null){
|
|||
|
|
_this.loading.close();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
peer.on('error', function() {
|
|||
|
|
console.log('My peer error');
|
|||
|
|
if(_this.loading!=null){
|
|||
|
|
_this.loading.close();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//打电话
|
|||
|
|
callPhone:function(){
|
|||
|
|
var _this=this;
|
|||
|
|
var media=(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia);
|
|||
|
|
if(!media){
|
|||
|
|
_this.$message({
|
|||
|
|
type: 'error',
|
|||
|
|
message: "not support"
|
|||
|
|
});
|
|||
|
|
return ;
|
|||
|
|
}
|
|||
|
|
var getUserMedia = media.bind(navigator);
|
|||
|
|
this.$confirm(this.flyLang.videoAudio, this.flyLang.tips, {
|
|||
|
|
confirmButtonText: this.flyLang.audio,
|
|||
|
|
cancelButtonText: this.flyLang.cancel,
|
|||
|
|
type: 'warning'
|
|||
|
|
}).then(() => {
|
|||
|
|
|
|||
|
|
// _this.loading = _this.$loading({
|
|||
|
|
// lock: true,
|
|||
|
|
// text: _this.flyLang.connecting,
|
|||
|
|
// spinner: 'el-icon-phone-outline',
|
|||
|
|
// background: 'rgba(0, 0, 0, 0.7)'
|
|||
|
|
// });
|
|||
|
|
|
|||
|
|
_this.initPeerjs();//初始化peerjs
|
|||
|
|
_this.loadingTimerTimeoutClose();
|
|||
|
|
_this.isVideo=false;
|
|||
|
|
getUserMedia({video:false, audio: {
|
|||
|
|
noiseSuppression: true,
|
|||
|
|
echoCancellation: true,
|
|||
|
|
}}, function(stream) {
|
|||
|
|
_this.$message({
|
|||
|
|
type: 'success',
|
|||
|
|
message: "语音通话请求已发出，等待客服回复..."
|
|||
|
|
});
|
|||
|
|
_this.messageContent="📞"+_this.flyLang.audioCall;
|
|||
|
|
_this.chatToUser();
|
|||
|
|
_this.localStream=stream;
|
|||
|
|
_this.sendAjax("/2/callKefu","post",{"action":"callpeer",kefu_id:_this.visitor.to_id,visitor_id:_this.visitor.visitor_id},function(result){
|
|||
|
|
});
|
|||
|
|
}, function(err) {
|
|||
|
|
_this.$message({
|
|||
|
|
type: 'error',
|
|||
|
|
message: err
|
|||
|
|
});
|
|||
|
|
if(_this.loading) _this.loading.close();
|
|||
|
|
});
|
|||
|
|
}).catch(() => {
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
callPeer:function(){
|
|||
|
|
var _this=this;
|
|||
|
|
var media=(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia);
|
|||
|
|
if(!media){
|
|||
|
|
_this.$message({
|
|||
|
|
type: 'error',
|
|||
|
|
message: "not support"
|
|||
|
|
});
|
|||
|
|
return ;
|
|||
|
|
}
|
|||
|
|
var getUserMedia = media.bind(navigator);
|
|||
|
|
this.$confirm(this.flyLang.videoAudio, this.flyLang.tips, {
|
|||
|
|
confirmButtonText: this.flyLang.video,
|
|||
|
|
cancelButtonText: this.flyLang.cancel,
|
|||
|
|
type: 'warning'
|
|||
|
|
}).then(() => {
|
|||
|
|
|
|||
|
|
// this.loading = this.$loading({
|
|||
|
|
// lock: true,
|
|||
|
|
// text: _this.flyLang.connecting,
|
|||
|
|
// spinner: 'el-icon-video-camera',
|
|||
|
|
// background: 'rgba(0, 0, 0, 0.5)'
|
|||
|
|
// });
|
|||
|
|
|
|||
|
|
_this.loadingTimerTimeoutClose();
|
|||
|
|
this.isVideo=true;
|
|||
|
|
//初始化peerjs
|
|||
|
|
this.initPeerjs();
|
|||
|
|
getUserMedia({video:true, audio: {
|
|||
|
|
noiseSuppression: true,
|
|||
|
|
echoCancellation: true,
|
|||
|
|
}}, function(stream) {
|
|||
|
|
_this.$message({
|
|||
|
|
type: 'success',
|
|||
|
|
message: "视频通话请求已发出，等待客服回复..."
|
|||
|
|
});
|
|||
|
|
_this.messageContent="🎥 "+_this.flyLang.videoCall;
|
|||
|
|
_this.chatToUser();
|
|||
|
|
_this.localStream=stream;
|
|||
|
|
|
|||
|
|
_this.sendAjax("/2/callKefu","post",{"action":"callpeer",kefu_id:_this.visitor.to_id,visitor_id:_this.visitor.visitor_id},function(result){
|
|||
|
|
});
|
|||
|
|
}, function(err) {
|
|||
|
|
_this.$message({
|
|||
|
|
type: 'error',
|
|||
|
|
message: err
|
|||
|
|
});
|
|||
|
|
if(_this.loading) _this.loading.close();
|
|||
|
|
});
|
|||
|
|
}).catch(() => {
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
talkPeer:function(){
|
|||
|
|
var _this=this;
|
|||
|
|
if(this.loading!=null){
|
|||
|
|
this.loading.close();
|
|||
|
|
}
|
|||
|
|
clearTimeout(this.loadingTimer);
|
|||
|
|
this.$message({
|
|||
|
|
message: '正在通话...',
|
|||
|
|
type: 'success'
|
|||
|
|
});
|
|||
|
|
if(_this.kefuPeerId==""||_this.localStream==null){
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
//本人摄像头
|
|||
|
|
// if(_this.isVideo){
|
|||
|
|
// var localVideo=document.querySelector("#chatLocalRtc");
|
|||
|
|
// localVideo.srcObject = _this.localStream;
|
|||
|
|
// localVideo.autoplay=true;
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
//localVideo.autoplay = true;
|
|||
|
|
|
|||
|
|
_this.call = _this.peer.call(_this.kefuPeerId, _this.localStream);
|
|||
|
|
_this.call.on('stream', function(remoteStream) {
|
|||
|
|
console.log(remoteStream);
|
|||
|
|
var videoTracks = remoteStream.getVideoTracks();
|
|||
|
|
var audioTracks = remoteStream.getAudioTracks();
|
|||
|
|
|
|||
|
|
var remoteVideo = document.getElementById("chatRtc");
|
|||
|
|
let localVideo = document.getElementById("chatLocalRtc");
|
|||
|
|
|
|||
|
|
remoteVideo.srcObject = remoteStream;
|
|||
|
|
remoteVideo.autoplay = true;
|
|||
|
|
remoteVideo.play();
|
|||
|
|
//视频流
|
|||
|
|
if (videoTracks.length > 0) {
|
|||
|
|
remoteVideo.style.display = "block";
|
|||
|
|
remoteVideo.muted=false;
|
|||
|
|
localVideo.srcObject = _this.localStream;
|
|||
|
|
localVideo.autoplay = true;
|
|||
|
|
localVideo.style.display="block";
|
|||
|
|
|
|||
|
|
}else if (audioTracks.length > 0) {
|
|||
|
|
//音频流
|
|||
|
|
//remoteVideo.style.display = "none";
|
|||
|
|
remoteVideo.muted=false;
|
|||
|
|
remoteVideo.autoplay = true;
|
|||
|
|
localVideo.style.display = "none";
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
_this.call.on('close', function() {
|
|||
|
|
console.log("call close");
|
|||
|
|
_this.callClear();
|
|||
|
|
});
|
|||
|
|
_this.call.on('error', function(err) {
|
|||
|
|
console.log(err);
|
|||
|
|
_this.callClear();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
callClose(){
|
|||
|
|
var _this=this;
|
|||
|
|
_this.sendAjax("/2/callKefu","post",{"action":"callCancel",kefu_id:_this.visitor.to_id,visitor_id:_this.visitor.visitor_id},function(result){
|
|||
|
|
});
|
|||
|
|
_this.callClear();
|
|||
|
|
},
|
|||
|
|
getExtendInfo:function(){
|
|||
|
|
var _this=this;
|
|||
|
|
var extra=getQuery("extra");
|
|||
|
|
if(extra==""){
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try{
|
|||
|
|
var extraString=b64ToUtf8(extra);
|
|||
|
|
var extra=JSON.parse(extraString);
|
|||
|
|
if (typeof extra=="string"){
|
|||
|
|
extra=JSON.parse(extra);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
for(var key in extra){
|
|||
|
|
if(extra[key]==""){
|
|||
|
|
extra[key]="无";
|
|||
|
|
}
|
|||
|
|
// if(key=="visitorProduct"){
|
|||
|
|
// _this.messageContent="product["+JSON.stringify(extra[key])+"]";
|
|||
|
|
// _this.chatToUser();
|
|||
|
|
// _this.setCache("extra",extraString);
|
|||
|
|
// };
|
|||
|
|
}
|
|||
|
|
}catch (e) {
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
sendAjax:function(url,method,params,callback){
|
|||
|
|
let _this=this;
|
|||
|
|
$.ajax({
|
|||
|
|
type: method,
|
|||
|
|
url: url,
|
|||
|
|
data:params,
|
|||
|
|
headers:{
|
|||
|
|
"lang":getQuery("lang"),
|
|||
|
|
},
|
|||
|
|
error:function(res){
|
|||
|
|
var data=JSON.parse(res.responseText);
|
|||
|
|
console.log(data);
|
|||
|
|
if(data.code!=200){
|
|||
|
|
_this.$message({
|
|||
|
|
message: data.msg,
|
|||
|
|
type: 'error'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
success: function(data) {
|
|||
|
|
if(data.code!=200 && data.code!=20000){
|
|||
|
|
_this.$message({
|
|||
|
|
message: data.msg,
|
|||
|
|
type: 'error'
|
|||
|
|
});
|
|||
|
|
}else if(data.result!=null){
|
|||
|
|
callback(data.result);
|
|||
|
|
}else{
|
|||
|
|
callback([]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
showTitle:function(title){
|
|||
|
|
//this.chatTitle=title;
|
|||
|
|
title=filterXSS(title);
|
|||
|
|
this.msgList.push({
|
|||
|
|
type:"notice",
|
|||
|
|
content:title,
|
|||
|
|
});
|
|||
|
|
//$(".chatVisitorPage").append("<div class=\"chatNotice\"><div class='chatNoticeContent'>"+title+"</div></div>");
|
|||
|
|
this.scrollBottom();
|
|||
|
|
},
|
|||
|
|
//开始录音
|
|||
|
|
startRecoder:function(){
|
|||
|
|
if(this.recorder){
|
|||
|
|
this.recorder.destroy();
|
|||
|
|
this.recorder=null;
|
|||
|
|
}
|
|||
|
|
var _this=this;
|
|||
|
|
Recorder.getPermission().then(function() {
|
|||
|
|
_this.recorder = new Recorder();
|
|||
|
|
_this.recorderAudio = document.querySelector('#audio');
|
|||
|
|
_this.recorder.start();
|
|||
|
|
_this.recorder.onprogress = function (params) {
|
|||
|
|
_this.recoderSecond = parseInt(params.duration);
|
|||
|
|
if(_this.recoderSecond>=60) _this.stopRecoder();
|
|||
|
|
}
|
|||
|
|
}, function(error){
|
|||
|
|
_this.$message({
|
|||
|
|
message: error,
|
|||
|
|
type: 'error'
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
stopRecoder:function(){
|
|||
|
|
if(!this.recorder){
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var blob=this.recorder.getWAVBlob();
|
|||
|
|
this.recorderAudio.src = URL.createObjectURL(blob);
|
|||
|
|
this.recorderAudio.controls = true;
|
|||
|
|
this.recorderEnd=blob;
|
|||
|
|
this.recorder.destroy();
|
|||
|
|
this.recorder=null;
|
|||
|
|
},
|
|||
|
|
sendRecoder:function(){
|
|||
|
|
this.stopRecoder()
|
|||
|
|
if(!this.recorderEnd) return;
|
|||
|
|
|
|||
|
|
var formdata = new FormData(); // form 表单 {key:value}
|
|||
|
|
formdata.append("realfile", this.recorderEnd); // form input type="file"
|
|||
|
|
var _this=this;
|
|||
|
|
this.loading = this.$loading({
|
|||
|
|
background: 'rgba(0, 0, 0, 0.5)'
|
|||
|
|
});
|
|||
|
|
$.ajax({
|
|||
|
|
url: "/2/uploadAudio",
|
|||
|
|
type: 'post',
|
|||
|
|
processData: false,
|
|||
|
|
contentType: false,
|
|||
|
|
data: formdata,
|
|||
|
|
dataType: 'JSON',
|
|||
|
|
mimeType: "multipart/form-data",
|
|||
|
|
success: function (res) {
|
|||
|
|
_this.loading.close();
|
|||
|
|
if(res.code!=200){
|
|||
|
|
_this.$message({
|
|||
|
|
message: res.msg,
|
|||
|
|
type: 'error'
|
|||
|
|
});
|
|||
|
|
}else{
|
|||
|
|
_this.cancelRecoder();
|
|||
|
|
_this.messageContent+='audio[' + res.result.path + ']';
|
|||
|
|
_this.chatToUser();
|
|||
|
|
_this.recorderEnd=null;
|
|||
|
|
_this.recoderSecond=0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
cancelRecoder:function(){
|
|||
|
|
this.audioDialog=false;
|
|||
|
|
if(!this.recorder){
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.recorder.destroy();
|
|||
|
|
this.recorder=null;
|
|||
|
|
this.recoderSecond=0;
|
|||
|
|
},
|
|||
|
|
recoderFormat:function(percentage){
|
|||
|
|
return percentage+"s";
|
|||
|
|
},
|
|||
|
|
openNewWindow:function(){
|
|||
|
|
var features = "height=800px, width=960px, top=0, left=0, toolbar=no, menubar=no,scrollbars=no,resizable=no, location=no, status=no"; //设置新窗口的特性
|
|||
|
|
var me = window.open(location.href, "newW", features);
|
|||
|
|
},
|
|||
|
|
//超时关闭
|
|||
|
|
checkTimeout:function(){
|
|||
|
|
var _this=this;
|
|||
|
|
this.timeoutTimer=setInterval(function(){
|
|||
|
|
if (Date.now() - _this.currentActiveTime >= _this.timeoutLongTime) {
|
|||
|
|
if(_this.VisitorCommentBtn!="true"){
|
|||
|
|
_this.comment=true;
|
|||
|
|
_this.scrollBottom();
|
|||
|
|
}
|
|||
|
|
console.log("长时间无操作");
|
|||
|
|
if(_this.socket!=null){
|
|||
|
|
_this.reconnectDialog=true;
|
|||
|
|
_this.showTitle(KEFU_LANG[LANG]['autoclosemes']);
|
|||
|
|
_this.socket.close();
|
|||
|
|
_this.socket=null;
|
|||
|
|
}
|
|||
|
|
window.parent.postMessage({"type":"force_close"},"*");
|
|||
|
|
}
|
|||
|
|
},10000);
|
|||
|
|
},
|
|||
|
|
closeTimeoutTimer:function(){
|
|||
|
|
clearInterval(this.timeoutTimer);
|
|||
|
|
},
|
|||
|
|
cleanAllTimeout:function(){
|
|||
|
|
for(var i in this.allTimeouter){
|
|||
|
|
clearTimeout(this.allTimeouter[i]);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
loadMoreMessages:function(){
|
|||
|
|
var _this=this;
|
|||
|
|
var pagesize=5;
|
|||
|
|
// if(this.currentPage>1){
|
|||
|
|
// this.replys=[];
|
|||
|
|
// }
|
|||
|
|
if(_this.loadMoreDisable){
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var moreMessage=KEFU_LANG[LANG]['moremessage'];
|
|||
|
|
this.flyLang.moremessage=this.flyLang.loading;
|
|||
|
|
this.loadMoreDisable=true;
|
|||
|
|
var hasUnread=false;
|
|||
|
|
this.sendAjax("/2/messages_page","get",{pagesize:pagesize,ent_id:ENT_ID,page:this.currentPage,visitor_id:_this.visitor.visitor_id},function(result){
|
|||
|
|
let msgList=result.list;
|
|||
|
|
if(msgList.length>=pagesize){
|
|||
|
|
_this.showLoadMore=true;
|
|||
|
|
}else{
|
|||
|
|
_this.showLoadMore=false;
|
|||
|
|
}
|
|||
|
|
// if(result.list.length!=0){
|
|||
|
|
// if(len<pagesize){
|
|||
|
|
// _this.showLoadMore=false;
|
|||
|
|
// }else{
|
|||
|
|
// _this.showLoadMore=true;
|
|||
|
|
// }
|
|||
|
|
for(let i=0;i<msgList.length;i++) {
|
|||
|
|
let visitorMes = msgList[i];
|
|||
|
|
let content = {}
|
|||
|
|
if (visitorMes["mes_type"] == "kefu") {
|
|||
|
|
content.is_kefu = false;
|
|||
|
|
content.content = _this.markdownHtml(replaceSpecialTag(visitorMes["content"]));
|
|||
|
|
} else {
|
|||
|
|
content.is_kefu = true;
|
|||
|
|
content.content = replaceContent(visitorMes["content"]);
|
|||
|
|
}
|
|||
|
|
if (visitorMes["read_status"] == "read") {
|
|||
|
|
content.read_status = KEFU_LANG[LANG].read;
|
|||
|
|
} else {
|
|||
|
|
content.read_status = KEFU_LANG[LANG].unread;
|
|||
|
|
if(i==0){
|
|||
|
|
hasUnread=true;
|
|||
|
|
_this.haveUnreadMessage=true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if((i+1)<msgList.length){
|
|||
|
|
const nextTime = new Date(msgList[i+1]["time"]).getTime();
|
|||
|
|
const currTime = new Date(visitorMes["time"]).getTime();
|
|||
|
|
if((currTime-nextTime)>=180000){
|
|||
|
|
content.show_time=true;
|
|||
|
|
}else{
|
|||
|
|
content.show_time=false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
content.avator = visitorMes["avator"];
|
|||
|
|
content.name = visitorMes["name"];
|
|||
|
|
content.msg_id = visitorMes["msg_id"];
|
|||
|
|
content.time = shortTime(visitorMes["time"]);
|
|||
|
|
_this.msgList.unshift(content);
|
|||
|
|
}
|
|||
|
|
if(_this.currentPage==1){
|
|||
|
|
_this.scrollBottom();
|
|||
|
|
}
|
|||
|
|
_this.currentPage++;
|
|||
|
|
_this.flyLang.moremessage=moreMessage;
|
|||
|
|
_this.loadMoreDisable=false;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//展示微信公众号带参二维码
|
|||
|
|
showWechatTip:function(){
|
|||
|
|
return;
|
|||
|
|
if(this.scanWechatQrcode!="true"){
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if(this.visitor.visitor_id.substr(0,2)=='wx'){
|
|||
|
|
this.showTitle("微信访客用户已登录");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if(this.VisitorWechatQrcodeUrl==""){
|
|||
|
|
this.VisitorWechatQrcodeUrl="/wechat/visitorQrcode";
|
|||
|
|
}
|
|||
|
|
this.VisitorWechatQrcodeUrl=this.VisitorWechatQrcodeUrl+'?visitor_id=' + this.visitor.visitor_id + '&ent_id='+ENT_ID;
|
|||
|
|
// var msg={type:"wechatTip"};
|
|||
|
|
// this.msgList.push(msg);
|
|||
|
|
var child = '<div class="wechatTip">';
|
|||
|
|
child += '<img style="width:100px; margin:6px;" src="'+this.VisitorWechatQrcodeUrl+'">';
|
|||
|
|
child += '扫描或长按左侧二维码关注公众号。<br>可同步聊天消息，防止更换浏览器消息丢失<br>并可及时接收到回复通知</div>';
|
|||
|
|
$(".chatVisitorPage").append(child);
|
|||
|
|
},
|
|||
|
|
sendComment:function(tagName){
|
|||
|
|
var _this=this;
|
|||
|
|
if(!_this.commentScore){
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
_this.comment = false;
|
|||
|
|
this.sendAjax("/2/comment","post",{
|
|||
|
|
comment_score:_this.commentScore,
|
|||
|
|
comment_content:_this.commentContent,
|
|||
|
|
kefu_name:this.visitor.to_id,
|
|||
|
|
ent_id:ENT_ID,
|
|||
|
|
visitor_id:_this.visitor.visitor_id},function(result){});
|
|||
|
|
},
|
|||
|
|
//格式化时间
|
|||
|
|
formatTime:function(time) {
|
|||
|
|
return time;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
selectLang:function(lang){
|
|||
|
|
var url=changeURLPar(document.URL,"lang",lang);
|
|||
|
|
document.location.href=url;
|
|||
|
|
},
|
|||
|
|
//focus事件处理
|
|||
|
|
// focusHandle(){
|
|||
|
|
// clearFlashTitle();
|
|||
|
|
// window.location.reload();
|
|||
|
|
// },
|
|||
|
|
visitorPageHeight(){
|
|||
|
|
//$("#chatVisitorPage").css("height","calc(100% - 121px)");
|
|||
|
|
if(isWeiXin()){
|
|||
|
|
$("body").css("height","100vh");
|
|||
|
|
}else{
|
|||
|
|
let height = Math.min(
|
|||
|
|
document.documentElement.clientHeight,
|
|||
|
|
window.innerHeight
|
|||
|
|
);
|
|||
|
|
$("body").css("height",height+"px");
|
|||
|
|
}
|
|||
|
|
//document.getElementById('chatVisitorPage').style.height = (document.documentElement.clientHeight - 71) + 'px';
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
initCallingDialog(){
|
|||
|
|
// this.canvasElement=$('#audioCanvas')[0];
|
|||
|
|
// this.videoElement=$('#chatRtc')[0];
|
|||
|
|
this.talkPeer();
|
|||
|
|
},
|
|||
|
|
//loading关闭
|
|||
|
|
loadingTimerTimeoutClose(){
|
|||
|
|
var _this=this;
|
|||
|
|
if(this.loadingTimer){
|
|||
|
|
clearTimeout(this.loadingTimer);
|
|||
|
|
this.loadingTimer=null;
|
|||
|
|
}
|
|||
|
|
this.loadingTimer=setTimeout(function(){
|
|||
|
|
if(_this.loading){
|
|||
|
|
_this.loading.close();
|
|||
|
|
}
|
|||
|
|
_this.callClear();
|
|||
|
|
}, 60000);
|
|||
|
|
},
|
|||
|
|
callClear() {
|
|||
|
|
var _this=this;
|
|||
|
|
_this.isCalling=false;
|
|||
|
|
if(_this.loading){
|
|||
|
|
_this.loading.close();
|
|||
|
|
}
|
|||
|
|
if(_this.call!=null){
|
|||
|
|
_this.call.close();
|
|||
|
|
}
|
|||
|
|
if(_this.localStream){
|
|||
|
|
var tracks=_this.localStream.getTracks();
|
|||
|
|
for(var i=0;i<tracks.length;i++){
|
|||
|
|
tracks[i].stop();
|
|||
|
|
}
|
|||
|
|
_this.localStream=null;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//获取url中的扩展信息
|
|||
|
|
getUrlExtra(){
|
|||
|
|
let extra=getQuery("extra");
|
|||
|
|
if(!extra) return;
|
|||
|
|
try{
|
|||
|
|
let extraString=b64ToUtf8(extra);
|
|||
|
|
let extraJson=JSON.parse(extraString);
|
|||
|
|
if (typeof extraJson=="string"){
|
|||
|
|
extraJson=JSON.parse(extraJson);
|
|||
|
|
}
|
|||
|
|
this.visitorProduct=extraJson.visitorProduct;
|
|||
|
|
}catch (e) {
|
|||
|
|
console.log(e);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//发送产品信息
|
|||
|
|
sendProductInfo(){
|
|||
|
|
if(this.visitorProduct==null) return;
|
|||
|
|
this.messageContent="product["+JSON.stringify(this.visitorProduct)+"]";
|
|||
|
|
this.chatToUser();
|
|||
|
|
this.visitorProduct=null;
|
|||
|
|
},
|
|||
|
|
//展示固定营销话术
|
|||
|
|
sendMarketing(answer){
|
|||
|
|
let _this=this;
|
|||
|
|
if(!this.marketing) return;
|
|||
|
|
let marktingList=this.marketing;
|
|||
|
|
let item=marktingList.shift();
|
|||
|
|
if(item){
|
|||
|
|
let itemArr=item.split("#");
|
|||
|
|
let ask=itemArr[0];
|
|||
|
|
if(itemArr.length==2){
|
|||
|
|
let answerArr=itemArr[1].split("|");
|
|||
|
|
for(let k in answerArr){
|
|||
|
|
ask+="<br/><a href='#'>"+answerArr[k]+"</a>";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
let msg={content:ask,avator:this.noticeAvatar,name:this.noticeName}
|
|||
|
|
setTimeout(function(){
|
|||
|
|
sendAjax("/2/syncMessage","POST",{
|
|||
|
|
content:itemArr[0],
|
|||
|
|
ent_id:ENT_ID,
|
|||
|
|
visitor_id:_this.visitor.visitor_id,
|
|||
|
|
kefu_name:_this.visitor.to_id},function(){});
|
|||
|
|
_this.msgList.push(msg);
|
|||
|
|
_this.scrollBottom();
|
|||
|
|
},1000)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//企业信息
|
|||
|
|
getEntInfo(){
|
|||
|
|
let entId=ENT_ID;
|
|||
|
|
let _this=this;
|
|||
|
|
sendAjax("/2/entInfo","POST",{ent_id:entId},function(result){
|
|||
|
|
console.log(result);
|
|||
|
|
if(result.code!=20000 || !result.result){
|
|||
|
|
//禁止发送
|
|||
|
|
_this.sendDisabled=true;
|
|||
|
|
//隐藏输入框
|
|||
|
|
_this.reconnectDialog=true;
|
|||
|
|
//提示
|
|||
|
|
_this.$message({
|
|||
|
|
message: result.msg,
|
|||
|
|
type: 'error'
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
let entInfo=result.result;
|
|||
|
|
_this.robotNoAnswer=entInfo.RobotNoAnswer;
|
|||
|
|
_this.noticeName=entInfo.RobotName;
|
|||
|
|
_this.noticeAvatar=entInfo.RobotAvator;
|
|||
|
|
_this.robotInfo.RobotCard=entInfo.RobotCard;
|
|||
|
|
//机器人模式
|
|||
|
|
if(entInfo.RobotStatus=="2"){
|
|||
|
|
_this.isRobotModel="yes";
|
|||
|
|
_this.msgList.push({type:"card"});
|
|||
|
|
_this.turnToMan=entInfo.TurnToMan.split(",");
|
|||
|
|
}
|
|||
|
|
//固定营销话术
|
|||
|
|
if(entInfo.Marketing) _this.marketing=entInfo.Marketing.replace("\r\n","\n").split("\n");
|
|||
|
|
//分配客服
|
|||
|
|
_this.getUserInfo();
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//提交讯前表单
|
|||
|
|
postPreVisitorForm(){
|
|||
|
|
this.preVisitorForm.visitor_id=this.visitor.visitor_id;
|
|||
|
|
this.preVisitorForm.ent_id=ENT_ID;
|
|||
|
|
let _this=this;
|
|||
|
|
this.sendAjax("/2/postPreVisitorForm","POST",this.preVisitorForm,function(res){
|
|||
|
|
_this.msgList.pop();
|
|||
|
|
_this.chatBoxSend=true;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//判断微信环境
|
|||
|
|
checkWechatEnvironmentAndShowImage:function() {
|
|||
|
|
// 判断是否在 iframe 内
|
|||
|
|
const isInIframe = window.self !== window.top;
|
|||
|
|
// 判断是否在微信浏览器打开
|
|||
|
|
const isWeChatBrowser = /MicroMessenger/i.test(navigator.userAgent);
|
|||
|
|
// 如果不在 iframe 并且是在微信内打开的
|
|||
|
|
if (!isInIframe && isWeChatBrowser) {
|
|||
|
|
// 展示图片
|
|||
|
|
const img = document.createElement('div');
|
|||
|
|
img.style.width = '100%';
|
|||
|
|
img.style.height = '100vh';
|
|||
|
|
img.style.position = 'fixed'; // 使用 fixed 定位
|
|||
|
|
img.style.top = '0';
|
|||
|
|
img.style.left = '0';
|
|||
|
|
img.style.zIndex = '99999999';
|
|||
|
|
img.style.background = 'rgba(0, 0, 0, 0.7)';
|
|||
|
|
img.innerHTML = '<img width="100%" src="/static/images/wechat_notice.png"/>';
|
|||
|
|
document.body.appendChild(img);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//解析markdown
|
|||
|
|
markdownHtml(str){
|
|||
|
|
var result = this.markdownIt.render(str);
|
|||
|
|
return result;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
mounted:function() {
|
|||
|
|
var _this=this;
|
|||
|
|
document.addEventListener('paste', this.onPasteUpload);
|
|||
|
|
document.addEventListener('scroll',this.textareaBlur);
|
|||
|
|
window.addEventListener('message',function(e){
|
|||
|
|
var msg=e.data;
|
|||
|
|
if(msg.module&&msg.module=="locationPicker"){
|
|||
|
|
_this.qqMap=false;
|
|||
|
|
console.log('location', msg);
|
|||
|
|
var address={
|
|||
|
|
"title":msg.poiaddress,
|
|||
|
|
"price":msg.poiname,
|
|||
|
|
"img":"/static/images/qqmap.png",
|
|||
|
|
"url":"https://apis.map.qq.com/tools/poimarker?type=0&marker=coord:"+msg.latlng.lat+","+msg.latlng.lng+"&key=3ZPBZ-IDF63-PH33P-YOPSA-LUXIH-UKFVR&referer=myapp"
|
|||
|
|
};
|
|||
|
|
_this.messageContent="product["+JSON.stringify(address)+"]";
|
|||
|
|
_this.chatToUser();
|
|||
|
|
}
|
|||
|
|
if(msg.type=="inputing_message"){
|
|||
|
|
_this.sendInputingStrNow(msg.content);
|
|||
|
|
}
|
|||
|
|
if(msg.type=="send_message"){
|
|||
|
|
_this.messageContent=msg.content;
|
|||
|
|
_this.chatToUser();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
//监听页面关闭
|
|||
|
|
window.onbeforeunload = function(e) {
|
|||
|
|
if(_this.isCalling) _this.callClose();
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
created: function () {
|
|||
|
|
this.init();
|
|||
|
|
this.getEntInfo();
|
|||
|
|
|
|||
|
|
|
|||
|
|
//加载历史记录
|
|||
|
|
//this.msgList=this.getHistory();
|
|||
|
|
//滚动底部
|
|||
|
|
//this.scrollBottom();
|
|||
|
|
//获取欢迎
|
|||
|
|
//this.initPeerjs();
|
|||
|
|
|
|||
|
|
//this.getVersion();
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</html>
|