123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905 |
- <template>
- <div class="autoBox box">
- <div class="crumbs">
- <el-breadcrumb separator="/">
- <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
-
- <el-breadcrumb-item>{{$t('common.Online')}}</el-breadcrumb-item>
- </el-breadcrumb>
- </div>
- <div class="service">
- <div class="serviceBox">
- <div style="height: 68px;width: 68px;display: inline-block;position: relative;top: 20px;left: 20px;">
- <img src="@/assets/img/helpCenter/CusTitle.png" alt="" style="width: 100%;">
- </div>
- <div class="onlineTile">{{$t('common.customer')}}</div>
- </div>
- <div style="width: 100%;">
- <!-- 聊天框 -->
- <div style="width:66%;height:100%;float:left;border-right:1px solid #bfbfbf;position: relative;">
- <!-- 聊天界面 -->
- <div id="messageList" style="width: 95%;padding: 20px;color: #666666;height: 500px;overflow-y: auto;">
- <div v-for="(item,index) in oldMessageList" style="position: relative;margin: 30px 0">
- <div v-if="item.messageType=='2'">
- <div style="width:32px;height:32px;display: inline-block;;position: absolute;top: 25px;left: 0;">
- <img src="@/assets/img/helpCenter/customerHead.png" alt="" style="width: 100%;">
- </div>
- <div style="display: inline-block;margin-left: 50px;font-size: 12px;">
- <span style="float: left;">{{item.senderName}}</span>
- <div style="background:#F3F3F3;padding: 0 10px;line-height: 20px;margin-top: 25px;line-height: 38px;border-radius: 5px;">
- {{item.sendContent}}
- </div>
- </div>
- <div style="clear: both;"></div>
- </div>
- <div v-if="item.messageType=='1'">
- <div style="width:32px;height:32px;display: inline-block;;position: absolute;top: 25px;right: 0;">
- <img src="@/assets/img/helpCenter/customerHead.png" alt="" style="width: 100%;">
- </div>
- <div style="display: inline-block;margin-right: 50px;font-size: 12px;float: right;">
- <span style="float: right;">{{item.senderName}}</span>
- <div style="background:#F3F3F3;padding: 0 10px;line-height: 20px;margin-top: 25px;line-height: 38px;border-radius: 5px;">
- {{item.sendContent}}
- </div>
- </div>
- <div style="clear: both;"></div>
- </div>
- <div v-if="item.messageType=='3'">
- <div style="width:32px;height:32px;display: inline-block;;position: absolute;top: 25px;left: 0;">
- <img src="@/assets/img/helpCenter/customerHead.png" alt="" style="width: 100%;">
- </div>
- <div style="display: inline-block;margin-left: 50px;font-size: 12px;">
- <span style="float: left;">{{item.senderName}}</span>
- <div style="background:#F3F3F3;padding: 0 10px;line-height: 20px;margin-top: 25px;line-height: 38px;border-radius: 5px;">
- {{item.sendContent}}
- </div>
- </div>
- <div style="clear: both;"></div>
- </div>
- </div>
- <!-- <div v-if="this.oldMessageList.size == 0">
- <div style="width:100%;text-align: center;" >没有更多聊天记录了</div>
- </div>
- <div v-if="this.oldMessageList.size > 0"></div>
- <div style="width:100%;margin: 20px auto;text-align: center;">
- <div style="width: 90px;height: 1px;background-color: #666666;display: inline-block;"></div>
- 上次聊到这里
- <div style="width: 90px;height: 1px;background-color: #666666;display: inline-block;"></div>
- </div>
- <div style="text-align: center;">
- {{date}}
- </div>
- </div> -->
- <!-- 平台客服 -->
- <!-- <div v-for="(item,index) in chatList" style="position: relative;margin: 30px 0">-->
- <!-- <div style="width:32px;height:32px;display: inline-block;;position: absolute;top: 25px;left: 0;">-->
- <!-- <img src="@/assets/img/helpCenter/Customer.png" alt="" style="width: 100%;">-->
- <!-- </div>-->
- <!-- <div v-if="item.text == ''" style="display: inline-block;margin-left: 50px;font-size: 12px;">-->
- <!-- <span style="float: left;">{{item.nickName}}</span>-->
- <!-- <div style="background:#F3F3F3;padding: 0 10px;line-height: 20px;margin-top: 25px;line-height: 38px;border-radius: 5px;">-->
- <!-- {{item.content}}-->
- <!-- </div>-->
- <!-- </div>-->
- <!-- <div v-if="item.text != ''" style="display: inline-block;margin-left: 50px;font-size: 12px;">-->
- <!-- <span style="float: left;">{{item.nickName}}</span>-->
- <!-- <div style="background:#F3F3F3;padding: 0 10px;line-height: 20px;margin-top: 25px;line-height: 38px;border-radius: 5px;">-->
- <!-- {{item.content}}-->
- <!-- </div>-->
- <!-- <div class="quickAnswer">-->
- <!-- <ul v-for="(i,to) in item.text">-->
- <!-- <li>-->
- <!-- {{to + 1}}、{{i.menuName}}-->
- <!-- </li>-->
- <!-- </ul>-->
- <!-- </div>-->
- <!-- </div>-->
- <!-- <div v-for="(j,to) in item.list" style="position: relative;margin: 30px 0">-->
- <!-- <div style="width:32px;height:32px;display: inline-block;;position: absolute;top: 25px;right: 0;">-->
- <!-- <img src="@/assets/img/helpCenter/user.png" alt="" style="width: 100%;">-->
- <!-- </div>-->
- <!-- <div style="display: inline-block;margin-right: 50px;font-size: 12px;float: right;">-->
- <!-- <span style="float: right;">{{j.questionerName}}</span>-->
- <!-- <div style="background:#F3F3F3;padding: 0 10px;line-height: 20px;margin-top: 25px;line-height: 38px;border-radius: 5px;">-->
- <!-- {{j.questionerContext}}-->
- <!-- </div>-->
- <!-- -->
- <!-- </div>-->
- <!-- -->
- <!-- </div>-->
- <!-- </div>-->
- <!-- <div style="position: relative;margin: 30px 0;">
- <div style="width:32px;height:32px;display: inline-block;position: absolute;top: 25px;left: 0;">
- <img src="@/assets/img/helpCenter/Customer.png" alt="" style="width: 100%;">
- </div>
- <div style="display: inline-block;margin-left: 50px;font-size: 12px;">
- <span style="float: left;">平台智能在线客服</span>
- <div style="background:#F3F3F3;padding: 0 10px;line-height: 20px;margin-top: 25px;line-height: 38px;border-radius: 5px;">
- 您是想问以下问题吗?快读点选可以获取答案,如果不是,请在输入框提问
- </div>
- <div class="quickAnswer">
- <ul>
- <li>
- 1、如何修改实名认证手机
- </li>
- <li>
- 2、个人如何实名认证
- </li>
- <li>
- 3、企业如何实名认证
- </li>
- <li>
- 4、注册时选择个人,可以申请成为企业用户吗?
- </li>
- </ul>
- </div>
- </div>
- </div> -->
- <!-- 转人工客服 -->
- <div v-if="flag == '0'" style="text-align: center;font-size:12px;line-height: 20px;">
- <div @click="toConnect()" style="height: 22px;background-color: #25C4BA;border-radius: 10px;padding: 0 10px;display: inline-block;color: #fff;" class="cursor">
- {{$t('common.TransferService')}}
- </div>
- <div style="height: 22px;background-color: #dff8f2;border-radius: 10px;padding: 0 10px;display: inline-block;color: #44d6b5;">
- {{$t('common.CustomerStatus')}}:<span>{{$t(status)}}</span>
- </div>
- </div>
- <!-- 在线客服 -->
- <div v-if="flag == '0'" v-for="(item,index) in messageList" style="position: relative;margin: 30px 0">
- <!-- <div v-if="item.messageType=='2'">
- <div style="width:32px;height:32px;display: inline-block;;position: absolute;top: 25px;left: 0;">
- <img src="@/assets/img/helpCenter/userHead.png" alt="" style="width: 100%;">
- </div>
- <div style="display: inline-block;margin-left: 50px;font-size: 12px;">
- <span style="float: left;">{{item.senderName}}</span>
- <div style="background:#F3F3F3;padding: 0 10px;line-height: 20px;margin-top: 25px;line-height: 38px;border-radius: 5px;">
- {{item.sendContent}}
- </div>
- </div>
- <div style="clear: both;"></div>
- </div> -->
- <div v-if="item.messageType=='1'">
- <div style="width:32px;height:32px;display: inline-block;;position: absolute;top: 25px;right: 0;">
- <img src="@/assets/img/helpCenter/userHead.png" alt="" style="width: 100%;">
- </div>
- <div style="display: inline-block;margin-right: 50px;font-size: 12px;float: right;">
- <span style="float: right;">{{item.senderName}}</span>
- <div style="background:#F3F3F3;padding: 0 10px;line-height: 20px;margin-top: 25px;line-height: 38px;border-radius: 5px;">
- {{item.sendContent}}
- </div>
- </div>
- <div style="clear: both;"></div>
- </div>
- <div v-if="item.messageType=='3'">
- <div style="width:32px;height:32px;display: inline-block;;position: absolute;top: 25px;left: 0;">
- <img src="@/assets/img/helpCenter/userHead.png" alt="" style="width: 100%;">
- </div>
- <div style="display: inline-block;margin-left: 50px;font-size: 12px;">
- <span style="float: left;">{{$t('common.customer')}}</span>
- <div style="background:#F3F3F3;padding: 0 10px;line-height: 20px;margin-top: 25px;line-height: 38px;border-radius: 5px;" v-html="item.sendContent">
-
- </div>
- </div>
- <div class="quickAnswer">
- <ul v-for="(i,to) in item.umsUserOnlineServiceMenus">
- <li style="border-bottom:1px doshed #333333" class="cursor">
- <span @click="seek(i,to)">{{to + 1}}.{{i}}</span>
- </li>
- </ul>
- </div>
- <div style="clear: both;"></div>
- </div>
- </div>
-
-
- <!-- <!– 用户 –>-->
- <!-- <div v-for="(item,index) in custmerList" style="position: relative;margin: 30px 0">-->
- <!-- <div style="width:32px;height:32px;display: inline-block;;position: absolute;top: 25px;right: 0;">-->
- <!-- <img src="@/assets/img/helpCenter/user.png" alt="" style="width: 100%;">-->
- <!-- </div>-->
- <!-- <div style="display: inline-block;margin-right: 50px;font-size: 12px;float: right;">-->
- <!-- <span v-if="item.replyingPersonName == null" style="float: right;">{{item.questionerName}}</span>-->
- <!-- <div v-if="item.replyingPersonName == null" style="background:#F3F3F3;padding: 0 10px;line-height: 20px;margin-top: 25px;line-height: 38px;border-radius: 5px;">-->
- <!-- {{item.questionerContext}}-->
- <!-- </div>-->
- <!-- </div>-->
- <!-- </div>-->
- </div>
-
-
- <div class="down" style="width:100%;position: relative;border-top: 1px solid #bfbfbf;">
- <el-input
- ref="sendMsg"
- type="textarea"
- :placeholder="$t('common.EnterContent')"
- v-model="contentText"
- style="width: 92%;border: none;"
- >
- </el-input>
- <el-button ref="btn"
- @click="sendText"
- style="position: absolute;right: 10px;top: 45px;text-align:center"
- >{{$t('common.Send')}}
- </el-button>
- </div>
- </div>
- <!-- 常见问题 -->
- <div style="float: right;width: 33.8%;height: 100%;">
- <div style="margin: 0 20px;height: 20px;margin-top: 20px;">
- <span style="float: left;">
- <div style="width: 14px;height: 14px;float: left">
- <img src="@/assets/img/helpCenter/question.png" alt="" style="width:100%;">
- </div>
- <div style="float:left;margin-left:5px;font-size: 18px;color:#0091FF;font-size:14px;font-weight: 600;">
- {{$t('common.commonProblem')}}
- </div>
- </span>
- <!-- <span style="float: right;">
- <div style="width: 12px;height: 12px;float: left;">
- <img src="@/assets/img/helpCenter/change.png" alt="" style="width:100%;">
- </div>
- <div style="float:left;margin-left:5px;font-size:14px;color:#25C4BA">
- 换一批
- </div>
- </span> -->
- </div>
- <div style="width: 100%;margin: 40px 0;font-size: 12px;color: #0091FF;">
- <ul v-for="(item,index) in menu" style="list-style: disc;margin-left: 40px;">
- <li @click="toView('helpCenter',item.id)" style="margin-top: 20px;" >
- {{item.name}}
- </li>
- </ul>
- </div>
- </div>
- <div style="clear: both;"></div>
- </div>
- </div>
- <el-dialog
- :title="$i18n.locale=='zh'?'提示':'Reminder'"
- :visible.sync="toViewLogin"
- :width="$i18n.locale=='zh'?'500px':'750px'"
- :height="$i18n.locale=='zh'?'300px':'386px'"
- :before-close="toViewLoginChange"
- >
- <div style="width: 100%;height: 100%;">
- <img src="@/assets/img/loginTips.png" alt="" style="width: 180px;height: 180px;margin-left: 20px;">
- <div style="float: right;margin-right: 20px;" :style="$i18n.locale=='zh'?'width: 49%;margin-top: 10px;':'width: 453px;margin-top: -25px;'">
- <div style="font-size: 20px;font-weight: normal;color: #333333;
- font-family: HiraginoSansGB-W3, HiraginoSansGB;
- line-height: 40px;">
- {{$t('common.ReminderFirst')}}
- </div>
- <div style="font-size: 16px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
- font-weight: normal;color: #666666;line-height: 30px;">
- {{$t('common.ReminderSecond')}} <span style="color: #0091FF;font-size: 18px;">{{num}}</span> {{$t('common.ReminderThird')}}
- </div>
- <div style="font-size: 14px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
- font-weight: normal;color: #666666;line-height: 30px;">
- {{$t('common.ReminderForth')}}
- </div>
- <div style="font-size: 14px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
- height:33px;line-height:60px;font-weight: normal;color: #0091FF;">
- <span style="margin-left: 40px;" class="cursor" @click="toView('login')">
- {{$t('common.ReminderFifth')}}
- </span>
- <span style="margin-left: 10px;" class="cursor" @click="toView('Register')">
- {{$t('common.ReminderSixth')}}
- </span>
- </div>
- </div>
- </div>
- </el-dialog>
- </div>
- </template>
- <script>
- import { getDicts } from "@/api/dict";
- import { getLevelMenu, saveOrUpdate , addUmsUserOnlineServiceExchangeInformation,getUmsUserOnlineServiceExchangeInformations, } from "@/api/customer/umsUserOnlineServiceExchangeInformation";
- import {getOldMessage, getMessage, getAllInformationByCustomer} from "@/api/customer/baseCustomerMessage"
- import Base from "@/views/base/Base";
- import { getToken, resetToken } from "@/utils/auth";
- import {getHelpColumnTree,getHelpColumnContent} from '@/api/operation/help/helpCenterEntity'
- export default {
- extends: Base,
- data () {
- return {
- num:5,
- toViewLogin:false,
- customerServiceId: "",
- status: "common.Offline",
- menu: [],
- data:0,
- timeout: 30 * 1000,//30秒一次心跳
- timeoutObj: null,//心跳心跳倒计时
- serverTimeoutObj: null,//心跳倒计时
- timeoutnum: null,//断开 重连倒计时
- websocket: null,
- timestamp: "",
- //历史聊天信息
- oldMessageList:[],
- //当前聊天记录
- messageList:[],
- flag: "0",
- date: new Date(),
- params:{
- language: this.$i18n.locale.toUpperCase(),
- firstLevelStatus: "y",
- },
- ws: null,
- count: 0,
- userId: null,
- custmerList: [],
- chatList:[{
- img:'',
- nickName:'机器人小智',
- content:'下午好,我是机器人小智',
- text:[],
- list: [],
- },
- {
- img:'',
- nickName:'机器人小智',
- content:'很高兴为您服务!您是想问以下问题吗?快读点选可以获取答案,如果不是,请输入问题序号',
- text:[],
- list: [],
- }],
- contentText: '',// input输入的值
- management:[],
- userSendMessage: {
- id: null,
- senderId: '',
- senderName: '',
- sendContent: '',
- receiverId: '',
- receiverName: '',
- sendingStatus: '',
- receivingStatus: '',
- messageType: '',
- status: '',
- createBy: ''
- },
- }
- },
- // created () {
- // this.getUserId()
- // },
- mounted () {
- //this.timer = setInterval(this.setTimeout, 5000);
- this.initWebsocket()
- this.$refs.sendMsg.focus()
- this.toInitData()
- },
- beforeDestroy() {
- clearInterval(this.timer);
- },
- updated () {
- },
-
- methods: {
- // 未登录跳转
- loginTipsChange(){
- const that=this;
- this.num =5;
- // clearInterval(timer_interval);
- this.timer = setInterval(function() {
- if (that.num > 0) {
- that.num--;
- } else {
- if(that.toViewLogin==true){
- clearInterval(that.timer);
- that.toViewStart('login');
- }else {
- clearInterval(that.timer);
- }
- }
- }, 1000)
- },
- // 判断未登录跳转是否关闭
- toViewLoginChange(done){
- this.toViewLogin=false;
- this.num=5;
- clearInterval(this.timer);
- },
- toInitData() {
- var language = this.$i18n.locale.toUpperCase();
-
- getHelpColumnTree(language).then((result) => {
- this.menu = [];
- if (result.data[0].children != null) {
- result.data[0].children.forEach(element => {
- this.menu.push(element)
- });
- }
- if (result.data[1].children != null) {
- result.data[1].children.forEach(element => {
- this.menu.push(element)
- });
- }
- if (result.data[2].children != null) {
- result.data[2].children.forEach(element => {
- this.menu.push(element)
- });
- }
- return;
- })
- },
- seek(i,to){
- let user = window.localStorage.getItem("user");
- var users = JSON.parse(user);
- var userSendMessage = {}
- if (users == null) {
- userSendMessage.senderId = "0";
- if (this.$i18n.locale.toUpperCase() == "ZH") {
- userSendMessage.senderName = "游客";
- } else {
- userSendMessage.senderName = "Visitor";
- }
- userSendMessage.sendContent = i;
- userSendMessage.messageType = '1';
- userSendMessage.toMessageType = '3';
- this.messageList.push(userSendMessage);
- this.websocket.send(JSON.stringify(userSendMessage)) // 调用WebSocket send()发送信息的方法
- } else {
- userSendMessage.senderId = users.userId;
- userSendMessage.senderName = users.username;
- userSendMessage.sendContent = i;
- userSendMessage.messageType = '1';
- userSendMessage.toMessageType = '3';
- this.messageList.push(userSendMessage);
- this.websocket.send(JSON.stringify(userSendMessage)) // 调用WebSocket send()发送信息的方法
- }
-
-
- },
- toViewStart(router, json) {
- clearInterval(this.timer);
- this.$router.push({ name: router, params: {key:json} });
- },
- toView(router,id){
- this.$store.commit('modify', router);
- window.localStorage.setItem('router', router);
- const { href } = this.$router.resolve({
- name: router,
- query: {
- key: id
- }
- });
- window.open(href, '_blank');
- },
- //初始化数据,建立连接
- initWebsocket() {
- this.timestamp = Date.parse(new Date());
- let user = window.localStorage.getItem("user");
- if (user != null) {
- var users = JSON.parse(user);
- var userId = users.userId;
- //语言版本
- var language = this.$i18n.locale.toUpperCase();
- var params = users.userId+",customer,"+users.username+","+language;
- } else {
- var language = this.$i18n.locale.toUpperCase();
- var params = "0"+",customer,"+"游客,"+language;
- }
-
- // 判断页面有没有存在websocket连接
- if (window.WebSocket) {
- this.messageList = [];
- var ishttps = 'https:' == document.location.protocol ? true: false;
- if(ishttps){
- this.websocket = new WebSocket("wss://www.geidcp.com/robot/websocket/"+params)
- }else{
- this.websocket = new WebSocket("ws://localhost:7028/robot/websocket/"+params)
- }
- // 连接成功
- this.websocket.onopen = this.setOnopenMessage;
- // 连接关闭的回调
- this.websocket.onclose = this.setOncloseMessage;
- // 连接错误
- this.websocket.onerror = this.setErrorMessage;
- // 收到消息的回调
- this.websocket.onmessage = this.clickUserList;
- // 监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
- window.onbeforeunload = this.onbeforeunload
- }
- },
- reconnect () { // 重新连接
- let self = this;
- if(self.lockReconnect) return;
- self.lockReconnect = true;
- //没连接上会一直重连,设置延迟避免请求过多
- self.timeoutnum && clearTimeout(self.timeoutnum);
- self.timeoutnum = setTimeout(() => {
- //新连接
- self.initWebSocket();
- self.lockReconnect = false;
- }, 5000);
- },
- reset () { // 重置心跳
- var self = this;
- // 清除时间
- clearTimeout(self.timeoutObj);
- clearTimeout(self.serverTimeoutObj);
- // 重启心跳
- self.start();
- },
- start () { // 开启心跳
- var self = this;
- self.timeoutObj && clearTimeout(self.timeoutObj);
- self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
- self.timeoutObj = setTimeout(function(){
- //这里发送一个心跳,后端收到后,返回一个心跳消息,
- if (self.websocket.readyState == 1) {//如果连接正常
- var userSendMessage = {}
- userSendMessage.messageType = '1';
- userSendMessage.sendContent = "heartBeat";
- self.websocketsend(JSON.stringify(userSendMessage));
- } else { // 否则重连
- self.reconnect();
- }
- self.serverTimeoutObj = setTimeout(() => {
- //超时关闭
- self.closeWebSocket();
- }, self.timeout);
- }, self.timeout)
- },
- setOnmessageMessage (event) {
-
- },
- setErrorMessage () {
- var self = this;
- //重连
- self.reconnect();
- console.log("WebSocket连接发生错误" + ' 状态码:' + this.websocket.readyState)
- },
- setOnopenMessage () {
- var self = this;
- //开启心跳
- // this.getNoReadRecords();
- self.start();
- console.log("WebSocket连接成功" + ' 状态码:' + this.websocket.readyState)
- },
- setOncloseMessage () {
- var self = this;
- //重连
- self.reconnect();
- console.log( "WebSocket连接关闭" + ' 状态码:' + this.websocket.readyState)
- },
- onbeforeunload () {
- this.closeWebSocket();
- },
- //websocket发送消息
- websocketsend(messsage) {
- var self = this;
- self.websocket.send(messsage)
- },
- closeWebSocket() { // 关闭websocket
- var self = this;
- self.websocket.close()
- },
- //与客服建立连接
- toConnect() {
- let user = window.localStorage.getItem("user");
- var users = JSON.parse(user);
- if (users == null) {
- this.toViewLogin = true;
- return;
- }
- this.flag = "1";
- var userSendMessage = {}
- userSendMessage.senderId = users.userId;
- userSendMessage.senderName = users.username;
- userSendMessage.sendContent = "联系人工客服";
- userSendMessage.messageType = '1';
- this.messageList.push(userSendMessage);
- this.websocket.send(JSON.stringify(userSendMessage)) // 调用WebSocket send()发送信息的方法
- },
- //设置滚动条最底
- scrollToBottom() {
- this.$nextTick(() => {
- let div = document.getElementById('messageList');
- div.scrollTop = div.scrollHeight;
- });
- },
- //获取之前的聊天记录
- getOldUserMessage(){
- let user = window.localStorage.getItem('user');
- if (user != null) {
- var users = JSON.parse(user);
- var userId = users.userId;
- getOldMessage(userId).then(result => {
- if (result.data.baseCustomerMessages != null) {
- this.oldMessageList = result.data.baseCustomerMessages;
- this.scrollToBottom()
- } else {
- this.oldMessageList = [];
- }
-
- })
- }
-
- },
- clickUserList:function(e){
- let resData = e.data
- var send = JSON.parse(resData);
- if (send.umsUserOnlineServiceMenus == "null" && send.levelId == "null") {
- this.customerServiceId = send.sendContent.replace(/\[|]/g,'').split(",")[0];
- }
- if (send.sendContent == "心跳机制") {
- if (send.umsUserOnlineServiceMenus != "[]") {
- this.status = "common.Online"
- } else {
- this.status = "common.Offline"
- }
- if (this.flag == "1") {
- let user = window.localStorage.getItem("user");
- var users = JSON.parse(user);
- if (users == null) {
- this.toViewLogin = true;
- return;
- }
- if (this.customerServiceId != null) {
- getAllInformationByCustomer(users.userId,this.customerServiceId).then(result => {
- this.oldMessageList = result.data.allInformationByCustomer;
- })
- }
- }
- console.log(send.sendContent)
- this.reset();
- return
- }
- if (send.umsUserOnlineServiceMenus != "null") {
- send.umsUserOnlineServiceMenus = send.umsUserOnlineServiceMenus.replace(/\[|]/g,'').split(",");
- send.umsUserOnlineServiceMenus[0] = " "+send.umsUserOnlineServiceMenus[0]
- this.messageList.push(send);
- }
- if (send.levelId != "null") {
- this.toView('helpCenter',send.levelId)
- }
-
- if (send.sendContent == "当前没有客服在线!") {
- send.umsUserOnlineServiceMenus = null
- this.messageList.push(send);
-
- }
- if (send.sendContent == "There is no customer service online at present!") {
- send.umsUserOnlineServiceMenus = null
- this.messageList.push(send);
-
- }
- if (send.sendContent == "这个问题我暂时还不会呢,小E还在学习中~如您需要人工服务,请点击上方转人工按钮, 小E帮您转接至客户服务中心提供人工在线客服服务") {
- send.sendContent = "这个问题我暂时还不会呢,小E还在学习中~</br>如您需要人工服务,请点击上方转人工按钮, 小E帮您转接至客户服务中心提供人工在线客服服务"
- send.umsUserOnlineServiceMenus = null
- this.messageList.push(send);
-
- }
- if (send.sendContent == "I don't know about this problem for the time being. Xiao E is still learning ~ if you need manual service, please click the switch to manual button at the top, and small e will help you transfer to the customer service center to provide manual online customer service") {
- send.sendContent = "I don't know about this problem for the time being. Xiao E is still learning ~ </br>if you need manual service, please click the switch to manual button at the top, and small e will help you transfer to the customer service center to provide manual online customer service"
- send.umsUserOnlineServiceMenus = null
- this.messageList.push(send);
-
- }
- this.scrollToBottom();
- this.reset();
- },
- connectOnlineCustomer() {
- // window.open("http://localhost:8080/#/customerOnlineService");
- this.$store.commit('modify', 'customerOnlineService');
- window.localStorage.setItem('router', 'customerOnlineService');
- const { href } = this.$router.resolve({
- name: router,
-
- });
- window.open(href, '_blank');
- },
- // getUserId () {
- // let time = new Date().getTime()
- // let user = window.localStorage.getItem('user');
- // var users = JSON.parse(user);
- // this.userId = users.userId;
- // },
- // 发送聊天消息
- sendText () {
- var userSendMessage = {}
- let user = window.localStorage.getItem("user");
- let _this = this
- // _this.$refs.sendMsg.focus()
- // if (!_this.contentText) {
- // return false
- // }
- if (this.flag == "0") {
- if (user == null) {
- userSendMessage.senderId = "0";
- if (this.$i18n.locale.toUpperCase() == "ZH") {
- userSendMessage.senderName = "游客";
- } else {
- userSendMessage.senderName = "Visitor";
- }
- userSendMessage.sendContent = _this.contentText;
- userSendMessage.messageType = '1';
- userSendMessage.toMessageType = '3';
- this.messageList.push(userSendMessage);
- } else {
- var users = JSON.parse(user);
- userSendMessage.senderId = users.userId;
- userSendMessage.senderName = users.username;
- userSendMessage.sendContent = _this.contentText;
- userSendMessage.messageType = '1';
- userSendMessage.toMessageType = '3';
- this.messageList.push(userSendMessage);
- }
-
- }
- if (this.flag == "1") {
- var users = JSON.parse(user);
- if (user == null) {
- this.toViewLogin = true;
- return;
- }
- userSendMessage.senderId = users.userId;
- userSendMessage.senderName = users.username;
- userSendMessage.sendContent = _this.contentText;
- userSendMessage.messageType = '1';
- userSendMessage.toMessageType = '2';
- this.getOldUserMessage();
- }
- // this.userSendMessage.receiverId = this.management.questionerId;
- // this.userSendMessage.receiverName = this.management.questionerName;
- this.websocket.send(JSON.stringify(userSendMessage)) // 调用WebSocket send()发送信息的方法
- _this.contentText = ''
- this.reset();
- },
-
- },
- watch: {
- '$i18n.locale'(){
- this.toInitData();
- this.closeWebSocket();
- this.initWebsocket();
- },
- "toViewLogin"(){
- if(this.toViewLogin==true){
- this.loginTipsChange()
- }
- }
- }
- }
- </script>
- <style scoped>
- .message {
- padding-top: 60px;
- margin-bottom: 60px;
- height: 100%;
- overflow: hidden;
- }
- .crumbs {
- margin-left: 20px;
- margin-bottom: 20px;
- }
- .box .service>>>.el-textarea__inner {
- min-height: 130px !important;
- max-height: 130px !important;
- border-color: transparent;
- resize:none
- }
- .box {
- background: #fff;
- padding: 20px 0 50px 0;
-
- }
- .service {
- width: 95%;
- box-shadow: 0 5px 15px #ccc8c8;
- border-radius: 5px 5px 0 0;
- margin: auto;
- }
- .service input {
- flex: 1;
- height: 40px;
- font-display: 18px;
- }
- .service button {
- border: 1px solid #bfbfbf;
- width: 70px;
- height: 40px;
- background: #fff;
- color: #bfbfbf;
- text-align: center;
- border-radius: 5px;
- margin-left: 10px;
- }
- .serviceBox{
- width: 100%;
- height: 60px;
- border-bottom: 1px solid #bfbfbf;
- background-image: linear-gradient(to right, #8deade, #0be0c4 ,rgb(12, 184, 201));
- position:relative;
- border-radius: 5px 5px 0 0;
- }
- .avtive {
- display: inline-block;
- background: blue;
- color: #fff;
- padding: 10px;
- font-size: 16px;
- border-radius: 6px;
- margin-right: 10px;
- flex-wrap: wrap;
- word-break: break-all;
- max-width: 220px;
- }
- .onlineTile{
- display: inline-block;
- font-size: 16px;
- color: rgb(255, 255, 255);
- font-weight: 700;
- position: relative;
- bottom: 30px;
- left: 30px;
- width: 50%;
- }
- .management div{
- line-height: 50px;
- /* text-indent: 30px; */
- font-size: 14px;
- }
- .management div:hover {
- color: #ff0000;
- cursor: pointer;
- }
- .quickAnswer{
-
- margin-top: 20px;
- width:651px;
-
-
- }
- .quickAnswer ul li {
- border-bottom: 1px dashed #bfbfbf;
- height: 40px;
- line-height: 40px;
- padding-left: 20px;
- color: #38b5f1;
- }
- .send{
- width:57px;
- height:28px;
- border:1px solid #bfbfbf;
- color: #bfbfbf;
- position: absolute;
- top: 30px;
- right: 20px;
- text-align: center;
- line-height: 25px;
- border-radius: 5px;
- }
- </style>
|