|
|
@@ -1,1702 +1,1866 @@
|
|
|
<template>
|
|
|
- <div v-loading="allLoading" element-loading-text="拼命连接中" >
|
|
|
- <!-- -->
|
|
|
- <el-container class="chatBox">
|
|
|
- <!-- ************************* 头部消息 ************************* -->
|
|
|
- <el-header height='80px'>
|
|
|
- <el-row type="flex" justify='space-between' align = 'middle' style="height:100%;">
|
|
|
- <el-col class="tit nopd" v-if="machineAndAtl == 10"><span>智能客服</span></el-col>
|
|
|
- <el-col class="tit nopd" v-if="machineAndAtl == 100"><span>{{service.kf_name}}</span></el-col>
|
|
|
- <el-col>
|
|
|
- <div class="imgBox">
|
|
|
- <i v-if="selNum > chatNum" @click="ejectEvl(10)" class="sc pointer" :class="selType?'scActy':''"></i>
|
|
|
- <div style="float: right" class="pointer" @click="leaveMsg()">
|
|
|
- <span style="font-size: 25px; color: #b3c1e7; margin-top: 13px;" @click="back()" class="el-icon-chat-line-round"></span>
|
|
|
- </div>
|
|
|
- <!-- <i class="sy pointer" @click="select(2)" :class="syType?'syActy':''"></i>
|
|
|
- <i class="sq pointer" @click="select(3)" :class="sqType?'sqActy':''"></i>-->
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-header>
|
|
|
- <el-conatiner class="cationer">
|
|
|
-
|
|
|
- <!--****************************** 聊天会话框模块 *****************************-->
|
|
|
- <el-main>
|
|
|
- <el-row class="pd informationBox" id="main">
|
|
|
-
|
|
|
- <!-- 广告展示隐藏按钮 -->
|
|
|
- <div class="retract pointer" @click="retract()">
|
|
|
- <img src="./../assets/st-img/retract.png" alt="" v-if="retractShow">
|
|
|
- <img src="./../assets/st-img/retract2.png" alt="" v-else>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-------------------机器人聊天板块 ----------------------->
|
|
|
- <div v-if="machineAndAtl == 10">
|
|
|
-
|
|
|
- <!--··············· 欢迎语 ············-->
|
|
|
- <div class="conversationBox" v-if="machine != ''">
|
|
|
- <div class=" row">
|
|
|
- <div class="conversation row">
|
|
|
- <div class="headImg">
|
|
|
- <img src="./../assets/st-img/headAdvent.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="cont left" >
|
|
|
- <div>{{machine.content}}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="width:66px;"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!--··········· 快捷问题回答模块 ············-->
|
|
|
- <div class="questionList" v-if="questionShow">
|
|
|
- <section v-for="(item,idx) in problem" :key="item.id">
|
|
|
- <div @click="answers(idx)">
|
|
|
- <span class="pointer gl">{{item.robot_name}}</span>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- <section>
|
|
|
- <div>
|
|
|
- <span class="col6">上面问题都不是</span>
|
|
|
- <span class="pointer ly" @click="changeService()">转人工客服</span>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!--················ 和机器人会话发送消息 ·············-->
|
|
|
- <div v-for="item in chatCont" :key="item.id">
|
|
|
- <!-- 用户发文本信息 -->
|
|
|
- <div class="conversationBox" v-if="item.type =='user'">
|
|
|
- <div class="timer">{{item.time}}</div>
|
|
|
- <div class="customer row allAlignment">
|
|
|
- <div style="width:66px;"></div>
|
|
|
- <div class="row">
|
|
|
- <!-- 显示内容 -->
|
|
|
- <div v-if="item.chat" class="cont right">
|
|
|
- <div v-html="item.chat"></div>
|
|
|
- </div>
|
|
|
- <div v-else class=" right noafter" style="width:200px;margin-right:10px; ">
|
|
|
- <div slot="file">
|
|
|
- <img class="el-upload-list__item-thumbnail" @click="handlePictureCardPreview(url+item.imgUrl)" style="width:100%;height:auto;border-radius: 10px;" :src="url+item.imgUrl" alt="">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 图片放大 -->
|
|
|
- <el-dialog :visible.sync="dialogVisible">
|
|
|
- <img width="100%" :src="dialogImageUrl" alt="">
|
|
|
- </el-dialog>
|
|
|
-
|
|
|
- <!-- 头像 -->
|
|
|
- <div class="headImg">
|
|
|
- <img :src="user_info.avatar" alt="">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 机器人无法回答转人工 -->
|
|
|
- <div class="conversationBox" v-if="item.type == 1001">
|
|
|
- <div class=" row">
|
|
|
- <div class="conversation row">
|
|
|
- <div class="headImg">
|
|
|
- <img src="./../assets/st-img/headAdvent.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="cont left" >
|
|
|
- <div>您的问题暂时无法处理</div>
|
|
|
- <div>
|
|
|
- <span class="col">问题没有解决？</span>
|
|
|
- <span class="change pointer ly" @click="changeService()">转人工客服</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="width:66px;"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 机器人回答 -->
|
|
|
- <div class="conversationBox" v-else-if='item.type == "service"'>
|
|
|
- <div class=" row">
|
|
|
- <div class="conversation row">
|
|
|
- <div class="headImg">
|
|
|
- <img src="./../assets/st-img/headAdvent.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="cont left" >
|
|
|
- <div>{{item.cont}}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="width:66px;"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 快捷问题回答 -->
|
|
|
- <div class="conversationBox" v-else-if="item.type == 'machine'">
|
|
|
- <div class="timer">
|
|
|
- {{item.robot_addTime}}
|
|
|
- </div>
|
|
|
- <div class=" row">
|
|
|
- <div class="conversation row">
|
|
|
- <div class="headImg">
|
|
|
- <img src="./../assets/st-img/headAdvent.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="cont left" >
|
|
|
- <div>{{item.robot_content}}</div>
|
|
|
- <div>
|
|
|
- <span class="col">问题没有解决</span>
|
|
|
- <span class="change pointer ly" @click="changeService()">转人工客服</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="width:66px;"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 转接客服列表 -->
|
|
|
- <div class="changeService" v-else-if="item.type == 'artService'">
|
|
|
- <div v-for="(itemList,idx) in serviceList" :key="idx">
|
|
|
- <span class="col6">人工客服:</span>
|
|
|
- <span class="colE5 pointer gl" @click="jumpService(itemList.id)">{{itemList.name}}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!--············· 各种消息提示框 ··············-->
|
|
|
- <!-- 转接客服 -->
|
|
|
- <div class="promptBox" v-if="artAndLeave == 10">
|
|
|
- <div class="prompt">
|
|
|
- <span>已转接人工客服</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 客服关闭会话 -->
|
|
|
- <div class="promptBox" v-if="closeByServer">
|
|
|
- <div class="prompt" style="width: 50px">
|
|
|
- <span>会话结束</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 客服不在线帮助提示框 -->
|
|
|
- <div class="promptBox " v-if="artAndLeave == 100">
|
|
|
- <div class="prompt help">
|
|
|
- <span>当前客服不在线，如需帮助请</span>
|
|
|
- <span class="colE5 ly pointer" @click="leaveMsg()">留言</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!--············ 和人工会话聊天模块 ··············-->
|
|
|
- <div v-if="machineAndAtl == 100">
|
|
|
- <!-- 人工客服回复消息 -->
|
|
|
- <div v-for="item in customerSviceChat" :key="item.id">
|
|
|
- <!-- tem.cont != '' -->
|
|
|
- <div class="conversationBox" v-if="item.type == 'service' ">
|
|
|
- <div class="timer"> {{item.time}} </div>
|
|
|
- <div class=" row">
|
|
|
- <div class="conversation row">
|
|
|
- <div class="headImg">
|
|
|
- <img :src="serviceImg?url+serviceImg:require('@/assets/st-img/kf.png')" alt="">
|
|
|
- </div>
|
|
|
- <div class="cont left" >
|
|
|
- <div v-if="item.content != ''" v-html="item.content"></div>
|
|
|
- <div v-else slot="file">
|
|
|
- <img class="el-upload-list__item-thumbnail" @click="handlePictureCardPreview(url+item.imgUrl)" style="width:100%;height:auto;border-radius: 10px;" :src="url+item.imgUrl" alt="">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="width:66px;"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 用户发送文本消息 -->
|
|
|
- <div class="conversationBox" v-if="item.type == 'user' ">
|
|
|
- <div>
|
|
|
- <div class="timer">{{item.time}}</div>
|
|
|
- <div class="customer row allAlignment">
|
|
|
- <div style="width:66px;"></div>
|
|
|
- <div class="row">
|
|
|
- <div class="cont right">
|
|
|
- <div v-if="item.content != ''" v-html="item.content"></div>
|
|
|
- <div v-else slot="file">
|
|
|
- <img class="el-upload-list__item-thumbnail" @click="handlePictureCardPreview(url+item.imgUrl)" style="width:100%;height:auto;border-radius: 10px;" :src="url+item.imgUrl" alt="">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="headImg">
|
|
|
- <img :src="user_info.avatar" alt="">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 点击图片放大 -->
|
|
|
- <el-dialog :visible.sync="dialogVisible">
|
|
|
- <img width="100%" :src="dialogImageUrl" alt="">
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 评价 -->
|
|
|
- <div class="evaluate" @click="ejectEvl(10)" v-if="consult">
|
|
|
- <span>欢迎你的咨询，请对我们的服务做出评价</span>
|
|
|
- <span class="btn seek">评价</span>
|
|
|
- </div>
|
|
|
- <div class="promptBox " v-if="comtSuccess">
|
|
|
- <div class="prompt help">
|
|
|
- <span>您对我们的服务评价为： {{comtCount}}。非常感谢！</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 系统即将结束会话
|
|
|
- <div class="promptBoxH " v-if="willOverTime">
|
|
|
- <div class="prompt help" style="width: 280px; height: 35px;">
|
|
|
- <span>{{willOverTime}}</span>
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
- <!-- 客服关闭会话 -->
|
|
|
- <div class="promptBox " v-if="closeByServer">
|
|
|
- <div class="prompt help" style="width: 280px;">
|
|
|
- <span>会话已关闭，如需继续咨询请</span>
|
|
|
- <span class="colE5 ly pointer" @click="goBack()">重新连接</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 客服关闭会话 -->
|
|
|
- <div class="promptBox " v-if="serverNotOnlin">
|
|
|
- <div class="prompt help" style="width: 280px;">
|
|
|
- <span>客服掉线</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-row>
|
|
|
-
|
|
|
-
|
|
|
- <!--·········· 文本编辑框 ···········-->
|
|
|
- <el-row class="chatting">
|
|
|
- <el-col>
|
|
|
- <!-- 发送图和表情按钮 -->
|
|
|
- <div style="height:18px; display:flex;">
|
|
|
- <el-popover placement="top-start" width="200" trigger="hover" style="margin-top: -10px;">
|
|
|
- <ul>
|
|
|
- <li class="emoticon" v-for="(item,index) in frceArr" :key="item.id" >
|
|
|
- <img class="pointer" :src="require(`@/assets/st-img/${index}.gif`)" @click="memeImg(index)" alt="">
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <el-button class="expression" slot="reference"></el-button>
|
|
|
- </el-popover>
|
|
|
- <el-upload class="avatar-uploader" action="/api/index/upload/uploadImg"
|
|
|
- :on-success="handleAvatarSuccess"
|
|
|
- :before-upload="beforeAvatarUpload"
|
|
|
- :on-error ='handError'
|
|
|
- list-type ='no' accept="image/jpeg,image/jpg,image/png,image/svg">
|
|
|
- <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar"> -->
|
|
|
- <i slot="default" class=" photo"></i>
|
|
|
- </el-upload>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="row center allAlignment chattingBox">
|
|
|
- <div style="height:44px;width:300px;">
|
|
|
- <textarea name="" id="" v-model="information" cols="30" rows="1" placeholder="请输入你的问题："></textarea>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <!-- 准备修改 -->
|
|
|
- <div @click="sendCol?(!closeByServer||artAndLeave==0||artAndLeave==100?sendInfo():''):''" class="sendOut pointer" :class="sendCol?(!closeByServer||artAndLeave==0||artAndLeave==100?'sendCol':'netSendCol'):'netSendCol'">
|
|
|
- <span class="">发送</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-main>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <el-aside width='255px' v-if="retractShow">
|
|
|
- <el-row class="rt">
|
|
|
- <el-col :span='24' class="artificial pd20">
|
|
|
- <div class="infor">
|
|
|
- <div>
|
|
|
- <span>姓名:</span>
|
|
|
- <span>{{service.kf_name ? service.kf_name : '智能客服' }}</span>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <span>工号:</span>
|
|
|
- <span>{{service.serverInfo ? service.serverInfo.job_name : '001'}}</span>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <span>性别:</span>
|
|
|
- <span>保密</span>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <span>职务:</span>
|
|
|
- <span>咨询客服</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="headPortrait">
|
|
|
- <img :src="service.serverInfo?(url+service.serverInfo.avatar):require('@/assets/st-img/kf.png')" alt="">
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
-
|
|
|
- <el-col class="autograph pd20" >
|
|
|
- <div>
|
|
|
- <span>个性签名:</span>
|
|
|
- <span>{{service.serverInfo ? service.serverInfo.signature :'' }}</span>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col class="advent" v-for="imgs in advert" :key="imgs.id">
|
|
|
- <a :href="imgs.advertisement_url" target="_blank" ><img :src="url + imgs.advertisement_img" alt=""></a>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-aside>
|
|
|
-
|
|
|
- </el-conatiner>
|
|
|
- <!-- 评价框 -->
|
|
|
- <el-card class="box-card" v-if="evlShow">
|
|
|
- <!-- <div class="close" @click="closeEvl(10)"> -->
|
|
|
- <!-- <i></i> -->
|
|
|
- <!-- </div> -->
|
|
|
- <div class="tit">
|
|
|
- <span>感谢您的咨询，请对我们的服务做出评价</span>
|
|
|
- </div>
|
|
|
- <div class="selIcon row allAlignment">
|
|
|
- <div @click="chage(1)">
|
|
|
- <i :class="changeIcon == 10? '':'sfd'"></i>
|
|
|
- <span>满意</span>
|
|
|
- </div>
|
|
|
- <div @click="chage(2)">
|
|
|
- <i class="comm" :class="changeIcon == 100?'comm2':''"></i>
|
|
|
- <span>一般</span>
|
|
|
- </div>
|
|
|
- <div @click="chage(3)">
|
|
|
- <i class="notSfd" :class="changeIcon == 1000?'notSfd2':''"></i>
|
|
|
- <span>不满意</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="levMsg">
|
|
|
- <el-input type="textarea" rows="6" placeholder="评价备注" v-model="textarea">
|
|
|
- </el-input>
|
|
|
- </div>
|
|
|
- <div class="sure" @click="evaluateSure()">
|
|
|
- <span>确定</span>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- <div class="zzBox" v-if="zzShow"></div>
|
|
|
- <!-- </div> -->
|
|
|
- </el-container>
|
|
|
- </div>
|
|
|
+ <div v-loading="allLoading" element-loading-text="拼命连接中">
|
|
|
+ <!-- -->
|
|
|
+ <el-container class="chatBox">
|
|
|
+ <!-- ************************* 头部消息 ************************* -->
|
|
|
+ <el-header height='80px'>
|
|
|
+ <el-row type="flex" justify='space-between' align='middle' style="height:100%;">
|
|
|
+ <el-col class="tit nopd" v-if="machineAndAtl == 10"><span>智能客服</span></el-col>
|
|
|
+ <el-col class="tit nopd" v-if="machineAndAtl == 100"><span>{{service.kf_name}}</span></el-col>
|
|
|
+ <el-col>
|
|
|
+ <div class="imgBox">
|
|
|
+ <i v-if="selNum > chatNum" @click="ejectEvl(10)" class="sc pointer"
|
|
|
+ :class="selType?'scActy':''"></i>
|
|
|
+ <div style="float: right" class="pointer" @click="leaveMsg()">
|
|
|
+ <span style="font-size: 25px; color: #b3c1e7; margin-top: 13px;" @click="back()"
|
|
|
+ class="el-icon-chat-line-round"></span>
|
|
|
+ </div>
|
|
|
+ <!-- <i class="sy pointer" @click="select(2)" :class="syType?'syActy':''"></i>
|
|
|
+ <i class="sq pointer" @click="select(3)" :class="sqType?'sqActy':''"></i>-->
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-header>
|
|
|
+ <el-conatiner class="cationer">
|
|
|
+
|
|
|
+ <!--****************************** 聊天会话框模块 *****************************-->
|
|
|
+ <el-main>
|
|
|
+ <el-row class="pd informationBox" id="main">
|
|
|
+
|
|
|
+ <!-- 广告展示隐藏按钮 -->
|
|
|
+ <div class="retract pointer" @click="retract()">
|
|
|
+ <img src="./../assets/st-img/retract.png" alt="" v-if="retractShow">
|
|
|
+ <img src="./../assets/st-img/retract2.png" alt="" v-else>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-------------------机器人聊天板块 ----------------------->
|
|
|
+ <div v-if="machineAndAtl == 10">
|
|
|
+
|
|
|
+ <!--··············· 欢迎语 ············-->
|
|
|
+ <div class="conversationBox" v-if="machine != ''">
|
|
|
+ <div class=" row">
|
|
|
+ <div class="conversation row">
|
|
|
+ <div class="headImg">
|
|
|
+ <img src="./../assets/st-img/headAdvent.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="cont left">
|
|
|
+ <div>{{machine.content}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width:66px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--··········· 快捷问题回答模块 ············-->
|
|
|
+ <div class="questionList" v-if="questionShow">
|
|
|
+ <section v-for="(item,idx) in problem" :key="item.id">
|
|
|
+ <div @click="answers(idx)">
|
|
|
+ <span class="pointer gl">{{item.robot_name}}</span>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <section>
|
|
|
+ <div>
|
|
|
+ <span class="col6">上面问题都不是</span>
|
|
|
+ <span class="pointer ly" @click="changeService()">转人工客服</span>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--················ 和机器人会话发送消息 ·············-->
|
|
|
+ <div v-for="item in chatCont" :key="item.id">
|
|
|
+ <!-- 用户发文本信息 -->
|
|
|
+ <div class="conversationBox" v-if="item.type =='user'">
|
|
|
+ <div class="timer">{{item.time}}</div>
|
|
|
+ <div class="customer row allAlignment">
|
|
|
+ <div style="width:66px;"></div>
|
|
|
+ <div class="row">
|
|
|
+ <!-- 显示内容 -->
|
|
|
+ <div v-if="item.chat" class="cont right">
|
|
|
+ <div v-html="item.chat"></div>
|
|
|
+ </div>
|
|
|
+ <div v-else class=" right noafter" style="width:200px;margin-right:10px; ">
|
|
|
+ <div slot="file">
|
|
|
+ <img class="el-upload-list__item-thumbnail"
|
|
|
+ @click="handlePictureCardPreview(url+item.imgUrl)"
|
|
|
+ style="width:100%;height:auto;border-radius: 10px;"
|
|
|
+ :src="url+item.imgUrl" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 图片放大 -->
|
|
|
+ <el-dialog :visible.sync="dialogVisible">
|
|
|
+ <img width="100%" :src="dialogImageUrl" alt="">
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 头像 -->
|
|
|
+ <div class="headImg">
|
|
|
+ <img :src="user_info.avatar" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 机器人无法回答转人工 -->
|
|
|
+ <div class="conversationBox" v-if="item.type == 1001">
|
|
|
+ <div class=" row">
|
|
|
+ <div class="conversation row">
|
|
|
+ <div class="headImg">
|
|
|
+ <img src="./../assets/st-img/headAdvent.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="cont left">
|
|
|
+ <div>您的问题暂时无法处理</div>
|
|
|
+ <div>
|
|
|
+ <span class="col">问题没有解决？</span>
|
|
|
+ <span class="change pointer ly"
|
|
|
+ @click="changeService()">转人工客服</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width:66px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 机器人回答 -->
|
|
|
+ <div class="conversationBox" v-else-if='item.type == "service"'>
|
|
|
+ <div class=" row">
|
|
|
+ <div class="conversation row">
|
|
|
+ <div class="headImg">
|
|
|
+ <img src="./../assets/st-img/headAdvent.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="cont left">
|
|
|
+ <div>{{item.cont}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width:66px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 快捷问题回答 -->
|
|
|
+ <div class="conversationBox" v-else-if="item.type == 'machine'">
|
|
|
+ <div class="timer">
|
|
|
+ {{item.robot_addTime}}
|
|
|
+ </div>
|
|
|
+ <div class=" row">
|
|
|
+ <div class="conversation row">
|
|
|
+ <div class="headImg">
|
|
|
+ <img src="./../assets/st-img/headAdvent.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="cont left">
|
|
|
+ <div>{{item.robot_content}}</div>
|
|
|
+ <div>
|
|
|
+ <span class="col">问题没有解决</span>
|
|
|
+ <span class="change pointer ly"
|
|
|
+ @click="changeService()">转人工客服</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width:66px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 转接客服列表 -->
|
|
|
+ <div class="changeService" v-else-if="item.type == 'artService'">
|
|
|
+ <div v-for="(itemList,idx) in serviceList" :key="idx">
|
|
|
+ <span class="col6">人工客服:</span>
|
|
|
+ <span class="colE5 pointer gl" @click="jumpService(itemList.id)">{{itemList.name}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--············· 各种消息提示框 ··············-->
|
|
|
+ <!-- 转接客服 -->
|
|
|
+ <div class="promptBox" v-if="artAndLeave == 10">
|
|
|
+ <div class="prompt">
|
|
|
+ <span>已转接人工客服</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 客服关闭会话 -->
|
|
|
+ <div class="promptBox" v-if="closeByServer">
|
|
|
+ <div class="prompt" style="width: 150px">
|
|
|
+ <span>已重新连接</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 客服不在线帮助提示框 -->
|
|
|
+ <div class="promptBox " v-if="artAndLeave == 100">
|
|
|
+ <div class="prompt help">
|
|
|
+ <span>当前客服不在线，如需帮助请</span>
|
|
|
+ <span class="colE5 ly pointer" @click="leaveMsg()">留言</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--············ 和人工会话聊天模块 ··············-->
|
|
|
+ <div v-if="machineAndAtl == 100">
|
|
|
+ <!-- 人工客服回复消息 -->
|
|
|
+ <div v-for="item in customerSviceChat" :key="item.id">
|
|
|
+ <!-- tem.cont != '' -->
|
|
|
+ <div class="conversationBox" v-if="item.type == 'service' ">
|
|
|
+ <div class="timer"> {{item.time}}</div>
|
|
|
+ <div class=" row">
|
|
|
+ <div class="conversation row">
|
|
|
+ <div class="headImg">
|
|
|
+ <img :src="serviceImg?url+serviceImg:require('@/assets/st-img/kf.png')"
|
|
|
+ alt="">
|
|
|
+ </div>
|
|
|
+ <div class="cont left">
|
|
|
+ <div v-if="item.content != ''" v-html="item.content"></div>
|
|
|
+ <div v-else slot="file">
|
|
|
+ <img class="el-upload-list__item-thumbnail"
|
|
|
+ @click="handlePictureCardPreview(url+item.imgUrl)"
|
|
|
+ style="width:100%;height:auto;border-radius: 10px;"
|
|
|
+ :src="url+item.imgUrl" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width:66px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 用户发送文本消息 -->
|
|
|
+ <div class="conversationBox" v-if="item.type == 'user' ">
|
|
|
+ <div>
|
|
|
+ <div class="timer">{{item.time}}</div>
|
|
|
+ <div class="customer row allAlignment">
|
|
|
+ <div style="width:66px;"></div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="cont right">
|
|
|
+ <div v-if="item.content != ''" v-html="item.content"></div>
|
|
|
+ <div v-else slot="file">
|
|
|
+ <img class="el-upload-list__item-thumbnail"
|
|
|
+ @click="handlePictureCardPreview(url+item.imgUrl)"
|
|
|
+ style="width:100%;height:auto;border-radius: 10px;"
|
|
|
+ :src="url+item.imgUrl" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="headImg">
|
|
|
+ <img :src="user_info.avatar" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 点击图片放大 -->
|
|
|
+ <el-dialog :visible.sync="dialogVisible">
|
|
|
+ <img width="100%" :src="dialogImageUrl" alt="">
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 评价 -->
|
|
|
+ <div class="evaluate" @click="ejectEvl(10)" v-if="consult">
|
|
|
+ <span>欢迎你的咨询，请对我们的服务做出评价</span>
|
|
|
+ <span class="btn seek">评价</span>
|
|
|
+ </div>
|
|
|
+ <div class="promptBox " v-if="comtSuccess">
|
|
|
+ <div class="prompt help">
|
|
|
+ <span>您对我们的服务评价为： {{comtCount}}。非常感谢！</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 系统即将结束会话
|
|
|
+ <div class="promptBoxH " v-if="willOverTime">
|
|
|
+ <div class="prompt help" style="width: 280px; height: 35px;">
|
|
|
+ <span>{{willOverTime}}</span>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <!-- 客服关闭会话 -->
|
|
|
+ <div class="promptBox " v-if="closeByServer">
|
|
|
+ <div class="prompt help" style="width: 280px;">
|
|
|
+ <span>会话已关闭，如需继续咨询请</span>
|
|
|
+ <span class="colE5 ly pointer" @click="goBack()">重新连接</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 客服关闭会话 -->
|
|
|
+ <div class="promptBox " v-if="serverNotOnlin">
|
|
|
+ <div class="prompt help" style="width: 280px;">
|
|
|
+ <span>客服掉线</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+
|
|
|
+ <!--·········· 文本编辑框 ···········-->
|
|
|
+ <el-row class="chatting">
|
|
|
+ <el-col>
|
|
|
+ <!-- 发送图和表情按钮 -->
|
|
|
+ <div style="height:18px; display:flex;">
|
|
|
+ <el-popover placement="top-start" width="200" trigger="hover"
|
|
|
+ style="margin-top: -2px;">
|
|
|
+ <ul>
|
|
|
+ <li class="emoticon" v-for="(item,index) in frceArr" :key="item.id">
|
|
|
+ <img class="pointer" :src="require(`@/assets/st-img/${index}.gif`)"
|
|
|
+ @click="memeImg(index)" alt="">
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <el-button class="expression" slot="reference"></el-button>
|
|
|
+ </el-popover>
|
|
|
+ <el-upload class="avatar-uploader" action="/api/index/upload/uploadImg"
|
|
|
+ :on-success="handleAvatarSuccess"
|
|
|
+ :before-upload="beforeAvatarUpload"
|
|
|
+ :on-error='handError'
|
|
|
+ list-type='no' accept="image/jpeg,image/jpg,image/png,image/svg">
|
|
|
+ <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar"> -->
|
|
|
+ <i slot="default" class=" photo"></i>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="row center allAlignment chattingBox">
|
|
|
+ <div style="height:44px;width:300px;">
|
|
|
+ <textarea name="" id="" v-model="information" cols="30" rows="1"
|
|
|
+ placeholder="请输入你的问题："></textarea>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <!-- 准备修改 -->
|
|
|
+ <div @click="sendCol?(!closeByServer||artAndLeave==0||artAndLeave==100?sendInfo():''):''"
|
|
|
+ class="sendOut pointer"
|
|
|
+ :class="sendCol?(!closeByServer||artAndLeave==0||artAndLeave==100?'sendCol':'netSendCol'):'netSendCol'">
|
|
|
+ <span class="">发送</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-main>
|
|
|
+
|
|
|
+
|
|
|
+ <el-aside width='255px' v-if="retractShow">
|
|
|
+ <el-row class="rt">
|
|
|
+ <el-col :span='24' class="artificial pd20">
|
|
|
+ <div class="infor">
|
|
|
+ <div>
|
|
|
+ <span>姓名:</span>
|
|
|
+ <span>{{service.kf_name ? service.kf_name : '智能客服' }}</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>工号:</span>
|
|
|
+ <span>{{service.serverInfo ? service.serverInfo.job_name : '001'}}</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>性别:</span>
|
|
|
+ <span>保密</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>职务:</span>
|
|
|
+ <span>咨询客服</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="headPortrait">
|
|
|
+ <img :src="service.serverInfo?(url+service.serverInfo.avatar):require('@/assets/st-img/kf.png')"
|
|
|
+ alt="">
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col class="autograph pd20">
|
|
|
+ <div>
|
|
|
+ <span>个性签名:</span>
|
|
|
+ <span>{{service.serverInfo ? service.serverInfo.signature :'' }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="advent" v-for="imgs in advert" :key="imgs.id">
|
|
|
+ <a :href="'http://'+imgs.advertisement_url" target="_blank" rel="noopener noreferrer">
|
|
|
+ <img :src="url + imgs.advertisement_img" alt="">
|
|
|
+ </a>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-aside>
|
|
|
+
|
|
|
+ </el-conatiner>
|
|
|
+ <!-- 评价框 -->
|
|
|
+ <el-card class="box-card" v-if="evlShow">
|
|
|
+ <!-- <div class="close" @click="closeEvl(10)"> -->
|
|
|
+ <!-- <i></i> -->
|
|
|
+ <!-- </div> -->
|
|
|
+ <div class="tit">
|
|
|
+ <span>感谢您的咨询，请对我们的服务做出评价</span>
|
|
|
+ </div>
|
|
|
+ <div class="selIcon row allAlignment">
|
|
|
+ <div @click="chage(1)">
|
|
|
+ <i :class="changeIcon == 10? '':'sfd'"></i>
|
|
|
+ <span>满意</span>
|
|
|
+ </div>
|
|
|
+ <div @click="chage(2)">
|
|
|
+ <i class="comm" :class="changeIcon == 100?'comm2':''"></i>
|
|
|
+ <span>一般</span>
|
|
|
+ </div>
|
|
|
+ <div @click="chage(3)">
|
|
|
+ <i class="notSfd" :class="changeIcon == 1000?'notSfd2':''"></i>
|
|
|
+ <span>不满意</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="levMsg">
|
|
|
+ <el-input type="textarea" rows="6" placeholder="评价备注" v-model="textarea">
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="sure" @click="evaluateSure()">
|
|
|
+ <span>确定</span>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <div class="zzBox" v-if="zzShow"></div>
|
|
|
+ <!-- </div> -->
|
|
|
+ </el-container>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import '../css/index.css';
|
|
|
-import frce from '../assets/frce.js';
|
|
|
-export default {
|
|
|
- data(){
|
|
|
- return{
|
|
|
- textarea : '',//备注
|
|
|
- evlShow : false, // 评价框显示
|
|
|
- zzShow : false, // 遮罩层显示
|
|
|
- vertion:'',//图形验证码
|
|
|
- provShow : true, // 验证框显示
|
|
|
- changeIcon : 10,
|
|
|
- name : '', // 验证框姓名model
|
|
|
- phone:'',// 验证框电话model
|
|
|
- email:'',// 验证框邮箱model
|
|
|
- frceArr: [], //表情包代码
|
|
|
- information:'',//发送的文本信息
|
|
|
- sendCol : false, // 发送按钮切换样式
|
|
|
- selType : false, //图标选中样式 true为选中，false为未选中
|
|
|
- selNum : 0, // 自增当达到某个条件显示图片
|
|
|
- // syType : false,
|
|
|
- // sqType : false,
|
|
|
- error: false,
|
|
|
- emlError:false,
|
|
|
- artAndLeave:0, // 默认为100，转人工为10，人工不在转留言为100
|
|
|
- chatCont :[], // 客户会话数据
|
|
|
- imageUrl:[],//上传图片
|
|
|
- img:'', //上传的单个图片路径
|
|
|
- dialogVisible: false, //图片放大
|
|
|
- dialogImageUrl :'', // 放大的图片
|
|
|
- dialogUrl :false,
|
|
|
- serviceInfor:'', //客服信息
|
|
|
- websock: null, //会话初始值
|
|
|
- currTime :"", //获取系统时间
|
|
|
- apiToken :'',//系统Token
|
|
|
- machine:'', //机器会话信息
|
|
|
- advert:'', // 广告语
|
|
|
- problem:'', //机器智能问题
|
|
|
- macNotPro : false, //机器人问题无法解决显示
|
|
|
- answer:[], //解答问题的答案
|
|
|
- questionShow:true, // 问题显示
|
|
|
- consult : false, //评价模块显示
|
|
|
- type : 1001, //自增
|
|
|
- jumpArtl:false, // 跳转人工客服状态
|
|
|
- group : '' , //客服组
|
|
|
- userConversation : {} , //用户当前会话
|
|
|
- machineAndAtl: 10, //默认为机器人，100为人工
|
|
|
- satisfaction :1 , //评价满意度,1为满意，2为一般，3为不满意
|
|
|
- url :'http://kfadmin.bocai186.com', // 域名地址
|
|
|
- //url :'http://192.168.2.186:8090', // 域名地址
|
|
|
- user_info:'', // 用户信息
|
|
|
- // 人工客服信息
|
|
|
- service:'',
|
|
|
- serviceList: [], //后台推送的人工客服列表
|
|
|
- customerWelCome : '', // 客服欢迎语
|
|
|
- customerSviceChat:[], // 客服会话信息
|
|
|
- serviceImg: '',
|
|
|
- timerVote:'', //存储上一次时间
|
|
|
- curtTimer:'',//当前时间
|
|
|
- returnTimer : '',//返回当前时间
|
|
|
- // isConnection:true,//人工分组列表开关
|
|
|
- chatNum : '', // 会话数量
|
|
|
- comtSuccess : false, // 评论发送成功显示
|
|
|
- comtCount : '', // 评论成功返回的满意度
|
|
|
- retractShow:true, // 展开侧边栏
|
|
|
- sensitive :[], //敏感词1
|
|
|
- senType:false,//敏感词状态
|
|
|
- sensitiveNumber:0,//敏感词次数
|
|
|
- doubSensitive:[],//重复的敏感词
|
|
|
- senInfo:'', //敏感词数据
|
|
|
- // sensitiveWordsNumber:0,
|
|
|
- hourse:'' , //返回时间，小时
|
|
|
- closeByServer:false , //客服关闭会话
|
|
|
- serverNotOnlin:false , //客服掉线
|
|
|
- willOverTime:'' , //超时关闭会话
|
|
|
- allLoading:true , //整个页面加载中
|
|
|
- webTime:'',//网络时间
|
|
|
- }
|
|
|
- },
|
|
|
- methods:{
|
|
|
- /******************文字信息转表情******************/
|
|
|
- turnFace(data){
|
|
|
- let str = data.match(/\#\[.*?\]\//g);
|
|
|
- let arr =Array.from(new Set(str));
|
|
|
- arr.forEach(e=>{
|
|
|
- let imgsrc = '';
|
|
|
- for(let i = 0 ; i < this.frceArr.length ; i++){
|
|
|
- let expText = e.slice(1,e.length-1);
|
|
|
- if(expText == this.frceArr[i]){
|
|
|
- imgsrc = '<img class="hover" src="'+require(`@/assets/st-img/${i}.gif`)+'"/>'
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
- data = data.replace(new RegExp(`\\#\\[${e.substring(2,e.length-2)}\\]\\/`,'g'),imgsrc);
|
|
|
- })
|
|
|
- return data;
|
|
|
- },
|
|
|
-
|
|
|
- // 关闭加载中
|
|
|
- allLoadingClose() {
|
|
|
- this.allLoading = false;
|
|
|
- },
|
|
|
-
|
|
|
- /****************************** */
|
|
|
- retract(){
|
|
|
- this.retractShow = !this.retractShow;
|
|
|
- console.log('ddsd');
|
|
|
- },
|
|
|
-
|
|
|
- /***************发送图片***************/
|
|
|
- beforeAvatarUpload(file){
|
|
|
- let self = this
|
|
|
- const isJPG = file.type =='image/jpeg'||'image/jpg'||'image/png'||'image/svg';
|
|
|
- const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
-
|
|
|
- if (!isJPG) {
|
|
|
- this.$message.error('上传只能是图片格式!');
|
|
|
- }
|
|
|
- if (!isLt2M) {
|
|
|
- this.$message.error('上传图片大小不能超过 2MB!');
|
|
|
- }
|
|
|
- // 压缩图片
|
|
|
- // this.$public.imgPreview(picavalue, function(imgSrc, config, formData) {
|
|
|
- // // console.log(imgSrc,config,formData);
|
|
|
- // self.dialogImageUrl = imgSrc;
|
|
|
- // });
|
|
|
- return isJPG && isLt2M;
|
|
|
- },
|
|
|
- handError(err, file, fileList){
|
|
|
- // 获取当前发送时间
|
|
|
- },
|
|
|
-
|
|
|
- /***************传输成功之后返回图片*************** */
|
|
|
- handleAvatarSuccess(res, file) {
|
|
|
- this.dialogUrl = true;
|
|
|
- this.img = res.data.src;
|
|
|
- this.sendMessage();
|
|
|
- },
|
|
|
- /***************图片放大*************** */
|
|
|
- handlePictureCardPreview(url){
|
|
|
- this.dialogImageUrl = url;
|
|
|
- this.dialogVisible = true;
|
|
|
- },
|
|
|
-
|
|
|
- /***************弹出评价框*************** */
|
|
|
- ejectEvl(type){
|
|
|
- if(this.comtSuccess) return;
|
|
|
- this.changeIcon = 10;
|
|
|
- if(type == 10){
|
|
|
- this.evlShow = true
|
|
|
- }
|
|
|
- this.zzShow = true;
|
|
|
- },
|
|
|
-
|
|
|
- /***************传入父组件进行组件切换*************** */
|
|
|
- leaveMsg(){
|
|
|
- this.$emit('value',100)
|
|
|
- },
|
|
|
- //回到初始页面
|
|
|
- goBack(){
|
|
|
- this.artAndLeave = 0;
|
|
|
- this.machineAndAtl = 10;
|
|
|
- this.macNotPro = false;
|
|
|
- this.jumpArtl = false;
|
|
|
- this.automaticRolling();
|
|
|
- this.initWebSocket();
|
|
|
- //this.questionShow = true;
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- /*******发送消息按钮*******/
|
|
|
- sendInfo(){
|
|
|
- this.closeByServer = false;
|
|
|
- this.artAndLeave = 0;
|
|
|
- this.jumpArtl = false;
|
|
|
- this.dialogUrl = false;
|
|
|
- this.sendMessage();
|
|
|
- },
|
|
|
-
|
|
|
- /***************改变评价框的满意度*************** */
|
|
|
- chage(type){
|
|
|
- this.satisfaction = type;
|
|
|
- if(type == 1){
|
|
|
- this.comtCount = '满意'
|
|
|
- this.changeIcon = 10;
|
|
|
- }else if(type == 2){
|
|
|
- this.comtCount = '一般'
|
|
|
- this.changeIcon = 100;
|
|
|
- }else{
|
|
|
- this.comtCount = '不满意'
|
|
|
- this.changeIcon = 1000;
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- /***************图标样式切换*************** */
|
|
|
- select(type){
|
|
|
- if(type == 1){
|
|
|
- this.selType = !this.selType;
|
|
|
- }else if(type == 2){
|
|
|
- this.syType = !this.syType;
|
|
|
- }else{
|
|
|
- this.sqType = !this.sqType;
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- /***************评价确认*************** */
|
|
|
- evaluateSure(){
|
|
|
- // 参数
|
|
|
- let params = {
|
|
|
- 'evaluateId' : this.satisfaction,
|
|
|
- 'conversationId' : this.service.conversationId,
|
|
|
- 'evaluateContent' : this.textarea
|
|
|
- }
|
|
|
- this.$axios.get('/api/index/evaluate/putEvaluate',{params,
|
|
|
- headers:{
|
|
|
- 'Content-Type' :'application/x-www-form-urlencoded',
|
|
|
- 'apiToken' : this.setApiToken('putevaluate','evaluate',this.currTime,'index')
|
|
|
- }
|
|
|
- }).then(res =>{
|
|
|
- if(res.data.code == 1){
|
|
|
- this.evlShow = false;
|
|
|
- this.zzShow = false;
|
|
|
- this.textarea = '';
|
|
|
- this.comtSuccess = true;
|
|
|
- if(this.changeIcon == 10){
|
|
|
- this.comtCount = '满意'
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- /***************验证框确认*************** */
|
|
|
- yySure(){
|
|
|
- this.provShow = false;
|
|
|
- this.zzShow = false;
|
|
|
- },
|
|
|
-
|
|
|
- /***************转人工客服列表*************** */
|
|
|
- changeService(){
|
|
|
- // if(!this.isConnection) return
|
|
|
- this.$axios.post('/api/index/groups/index',{},{headers:{
|
|
|
- 'Content-Type' :'application/x-www-form-urlencoded',
|
|
|
- 'apiToken' : this.setApiToken('index','groups',this.currTime,'index')
|
|
|
- }}).then(res =>{
|
|
|
- if(res.data.code == 1){
|
|
|
- this.serviceList = res.data.data;
|
|
|
- this.chatCont.push({
|
|
|
- 'type' :'artService'
|
|
|
- })
|
|
|
- this.automaticRolling();
|
|
|
- }
|
|
|
- })
|
|
|
- // this.isConnection = false;
|
|
|
- },
|
|
|
-
|
|
|
- /***************表情点击*************** */
|
|
|
- memeImg(i) {
|
|
|
- //当表情被点击
|
|
|
- this.information = this.information + "#" + this.frceArr[i] + "/";
|
|
|
- },
|
|
|
-
|
|
|
- /***************失去焦点做正则验证*************** */
|
|
|
- sureInfor(type){
|
|
|
- if(type == 1){
|
|
|
- if(!/^1[34578]\d{9}$/.test(this.phone)){
|
|
|
- this.error = true;
|
|
|
- this.phone = '';
|
|
|
- }else{
|
|
|
- this.error = false;
|
|
|
- }
|
|
|
- }else if(type == 10){
|
|
|
- if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)){
|
|
|
- this.emlError = true;
|
|
|
- this.email = '';
|
|
|
- }else{
|
|
|
- this.emlError = false;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- /***************获取热点智能问题*************** */
|
|
|
- getProblem(){
|
|
|
- this.$axios.post('/api/index/robot/index',{groups_id:1,robotgroups_id:1},{
|
|
|
- headers:{
|
|
|
- 'Content-Type' :'application/x-www-form-urlencoded',
|
|
|
- 'apiToken' : this.setApiToken('index','robot',this.currTime,'index')
|
|
|
- }
|
|
|
- }).then(res =>{
|
|
|
- if(res.data.code == 1){
|
|
|
- this.problem = res.data.data
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- /*****************获取聊天次数*******************/
|
|
|
- getChatNum(){
|
|
|
- this.$axios.post('/api/index/evaluate/minRound','',{headers:{
|
|
|
- 'Content-Type' :'application/x-www-form-urlencoded',
|
|
|
- 'apiToken' : this.setApiToken('minround','evaluate',this.currTime,'index')
|
|
|
- }}).then(res =>{
|
|
|
- if(res.data.code == 1){
|
|
|
- this.chatNum = res.data.data.systemconfig_data
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- /*****************屏蔽关键字******************/
|
|
|
- shieldingKeyword(data){
|
|
|
- //将敏感词组用|转换字符串
|
|
|
- let snstive = this.sensitive.join('|');
|
|
|
- //console.log(snstive);
|
|
|
- this.sensitiveNumber = 0 ;
|
|
|
- //匹配出会话中的敏感词
|
|
|
- return data.replace(eval('/' + snstive + '/g'),(res)=>{
|
|
|
- var str = '';
|
|
|
- for(var i = 0; i < res.length;i++){
|
|
|
- str += '*';
|
|
|
- }
|
|
|
- this.sensitiveNumber ++;
|
|
|
- return str;
|
|
|
- })
|
|
|
- //console.log(this.senInfo);
|
|
|
- // let params = {
|
|
|
- // 'type' : 1,
|
|
|
- // 'conversationId' : this.service.conversationId,
|
|
|
- // 'number' : num
|
|
|
- // }
|
|
|
- // this.$axios.get('/api/index/alarm/sensitiveAlarm',{params,
|
|
|
- // headers:{
|
|
|
- // 'Content-Type' :'application/x-www-form-urlencoded',
|
|
|
- // 'apiToken' : this.setApiToken('sensitivealarm','alarm',this.currTime,'index')
|
|
|
- // }
|
|
|
- // }).then(res =>{
|
|
|
-
|
|
|
- // })
|
|
|
- },
|
|
|
-
|
|
|
- /*---------------------------------------------------------------------------------*/
|
|
|
- /**************初始化WebSocket****************/
|
|
|
- initWebSocket(){
|
|
|
- let _this = this;
|
|
|
- let apiToken = this.$md5.hex_md5('customer-service'+ this.currTime +window.location.origin);
|
|
|
- this.websock = new WebSocket('ws://103.108.43.176:9101?apiToken='+apiToken);
|
|
|
- // 数据接收
|
|
|
- this.websock.onmessage = this.websocketonmessage;
|
|
|
- // 连接建立之后
|
|
|
- this.websock.onopen = this.websocketonopen;
|
|
|
- // 连接建立失败重连
|
|
|
- this.websock.onerror = this.websocketonerror;
|
|
|
- // 关闭会话
|
|
|
- this.websock.onclose = this.websocketonclose;
|
|
|
- },
|
|
|
-
|
|
|
- /****************连接建立成功***************/
|
|
|
- websocketonopen(){
|
|
|
- console.log('链接成功');
|
|
|
- },
|
|
|
-
|
|
|
- /*************连接建立失败重连***************** */
|
|
|
- websocketonerror(){
|
|
|
- // this.initWebSocket();
|
|
|
- },
|
|
|
-
|
|
|
- /**************数据接收***************** */
|
|
|
- websocketonmessage(e){
|
|
|
- const redata = JSON.parse(e.data);
|
|
|
- console.log(redata)
|
|
|
- // 欢迎语
|
|
|
- if(redata.message_type == 'helloMessage'){
|
|
|
- this.machine = redata.data;
|
|
|
- }
|
|
|
- // 广告语
|
|
|
- if(redata.message_type == 'advertisement'){
|
|
|
- this.advert = redata.data;
|
|
|
- }
|
|
|
- // 评价
|
|
|
- if(redata.message_type == 'getEvaluate'){
|
|
|
- this.consult = true;
|
|
|
- }
|
|
|
-
|
|
|
- //返回的会话时间
|
|
|
- if(redata.message_type == 'webTime'){
|
|
|
- this.webTime = redata.data.time;
|
|
|
- if(this.machineAndAtl ==100){
|
|
|
- let num = this.customerSviceChat.length-1;
|
|
|
- if(this.customerSviceChat[num].type == "user"){
|
|
|
- this.$set(this.customerSviceChat[num],'time',redata.data.time);
|
|
|
- }
|
|
|
- }else if(this.machineAndAtl ==10){
|
|
|
- let num = this.chatCont.length-1;
|
|
|
- if(1){
|
|
|
- this.$set(this.chatCont[num],'time',redata.data.time);
|
|
|
- }
|
|
|
- // this.chatCont =
|
|
|
- }
|
|
|
-
|
|
|
- console.log(redata.data);
|
|
|
- }
|
|
|
-
|
|
|
- //会话超时提示
|
|
|
- if(redata.message_type == 'overtime'){
|
|
|
- console.log('接收会话超时');
|
|
|
- }
|
|
|
-
|
|
|
- // 链接客服信息
|
|
|
- if(redata.message_type == 'connect'){
|
|
|
- this.artAndLeave = 10;
|
|
|
- this.machineAndAtl = 100;
|
|
|
- this.service = redata.data;
|
|
|
- this.serviceImg = redata.data.serverInfo.avatar;
|
|
|
- }
|
|
|
- // 暂无客服
|
|
|
- if(redata.message_type == 'wait'){
|
|
|
- let content = JSON.parse(redata.data.content)
|
|
|
- this.artAndLeave = 100;
|
|
|
- }
|
|
|
- //接收客服会话
|
|
|
- if(redata.message_type == 'chatMessage'){
|
|
|
-
|
|
|
- //存储会话超时间
|
|
|
- this.webTime = redata.data.time;
|
|
|
-
|
|
|
- //会话大于两分钟显示
|
|
|
- let timer = ''
|
|
|
- if(this.returnTimer == ''){
|
|
|
- timer = redata.data.time;
|
|
|
- this.returnTimer = redata.data.time
|
|
|
- }else{
|
|
|
- let timeStamp = this.returnTimer.split(":");
|
|
|
- let rdtime = redata.data.time.split(":");
|
|
|
- if(timeStamp[0] == rdtime[0]){
|
|
|
- if((rdtime[1] - timeStamp[1]) < 2){
|
|
|
- timer = ''
|
|
|
- }else{
|
|
|
- timer = redata.data.time;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- //
|
|
|
- let contType = this.isJSON(redata.data.content);
|
|
|
- let content = {};
|
|
|
- if(contType == false){
|
|
|
- content.text = redata.data.content
|
|
|
- }else{
|
|
|
- content = JSON.parse(redata.data.content)
|
|
|
- }
|
|
|
- let obj = {
|
|
|
- time:timer,
|
|
|
- content:content.text ? this.turnFace(content.text) :'',
|
|
|
- imgUrl:content.img ? content.img : '',
|
|
|
- type:'service'
|
|
|
- }
|
|
|
- this.customerSviceChat.push(obj);
|
|
|
- // console.log(this.customerSviceChat);
|
|
|
- this.selNum++;
|
|
|
- this.automaticRolling();
|
|
|
- }
|
|
|
- //接收机器会话
|
|
|
- if(redata.message_type == 'robotMessage'){
|
|
|
- if(redata.data.content == 'error'){
|
|
|
- let _this = this;
|
|
|
- this.chatCont.push({type:1001 })
|
|
|
- this.automaticRolling();
|
|
|
- }else{
|
|
|
- this.chatCont.push({
|
|
|
- 'robot_content':redata.data.content,
|
|
|
- 'type' : 'machine'
|
|
|
- })
|
|
|
- this.automaticRolling();
|
|
|
- }
|
|
|
- }
|
|
|
- // 没有客服上线.
|
|
|
- if(redata.message_type == 'notice'){
|
|
|
- this.artAndLeave = 100;
|
|
|
- this.automaticRolling();
|
|
|
- this.machineAndAtl = 10;
|
|
|
- this.jumpArtl = false;
|
|
|
- this.initWebSocket();
|
|
|
- //this.noServer();
|
|
|
- }
|
|
|
- // 客服关闭会话.
|
|
|
- if(redata.message_type == 'closeBysever'){
|
|
|
- this.closeByServer = true;
|
|
|
- this.automaticRolling();
|
|
|
- }
|
|
|
- // 客服掉线.
|
|
|
- if(redata.message_type == 'serviceoffline'){
|
|
|
- this.serverNotOnlin = true;
|
|
|
- this.closeByServer = true;
|
|
|
- this.automaticRolling();
|
|
|
- }
|
|
|
- // 超时.
|
|
|
- if(redata.message_type == 'overtime'){
|
|
|
- this.willOverTime = redata.data.content;
|
|
|
- this.automaticRolling();
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- /************关闭会话****************** */
|
|
|
- websocketonclose(e){
|
|
|
- console.log('断开会话',e);
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- /******************消息发送数据处理********************/
|
|
|
- sendMessage(){
|
|
|
- // this.doubSensitive = [];
|
|
|
-
|
|
|
- this.senType = '';
|
|
|
-
|
|
|
- //发送消息时间获取服务器时间
|
|
|
- let currentdate = '';
|
|
|
- if(this.timerVote != ''){
|
|
|
- currentdate = this.newTimer();
|
|
|
- }else{
|
|
|
- let date = new Date();
|
|
|
- let curtDate = date.getHours()*60 + date.getMinutes()
|
|
|
- this.timerVote = curtDate;
|
|
|
- currentdate = '';
|
|
|
- }
|
|
|
-
|
|
|
- // 给机器人发送文本消息
|
|
|
- if(this.machineAndAtl == 10){
|
|
|
- //给机器人发送文本消息-本地储存
|
|
|
- let datas = {
|
|
|
- time : currentdate,
|
|
|
- chat : this.turnFace(this.shieldingKeyword(this.information)),
|
|
|
- imgUrl : this.img,
|
|
|
- type:'user'
|
|
|
- }
|
|
|
- this.chatCont.push(datas)
|
|
|
- //消息发送-机器人
|
|
|
- this.websocketsend(JSON.stringify({
|
|
|
- type:'toRobot',
|
|
|
- data:{
|
|
|
- groups_id :'1',
|
|
|
- robot_name:this.shieldingKeyword(this.information),
|
|
|
- webTime:this.webTime,
|
|
|
- robotgroups_id:'1',
|
|
|
- }
|
|
|
- }))
|
|
|
- }else if(this.machineAndAtl == 100){ //人工聊天
|
|
|
- //发送给客服消息-本地储存
|
|
|
- this.customerSviceChat.push({
|
|
|
- time : currentdate,
|
|
|
- content : this.turnFace(this.shieldingKeyword(this.information)),
|
|
|
- imgUrl : this.img,
|
|
|
- type:'user',
|
|
|
- });
|
|
|
- console.log(this.customerSviceChat);
|
|
|
-
|
|
|
- //消息发送-客服
|
|
|
- this.websocketsend(JSON.stringify({
|
|
|
- type:'chatMessage',
|
|
|
- data:{
|
|
|
- from_name : this.user_info.name,
|
|
|
- from_avatar:this.user_info.avatar,
|
|
|
- from_id : this.user_info.id,
|
|
|
- content : JSON.stringify({
|
|
|
- text:this.information,
|
|
|
- img :this.img,
|
|
|
- type:'user'
|
|
|
- }),
|
|
|
- webTime:this.webTime,
|
|
|
- to_id : this.service.kf_id,
|
|
|
- to_name :this.service.kf_name,
|
|
|
- sensitiveNumber:this.sensitiveNumber,
|
|
|
- conversationId : this.service.conversationId
|
|
|
- }
|
|
|
- }))
|
|
|
- }
|
|
|
- // 发送之后清空发送数据
|
|
|
- this.img = '';
|
|
|
- this.information = '';
|
|
|
- //高度自动向上滑动
|
|
|
- this.automaticRolling();
|
|
|
- },
|
|
|
-
|
|
|
- /**************获取会话间隔是否大于2分钟**************** */
|
|
|
- newTimer(){
|
|
|
- //console.log('house',this.hourse)
|
|
|
- this.timerVote = this.curtTimer;
|
|
|
- let currentdate = this.hourse;
|
|
|
- this.curtTimer = this.hourse;
|
|
|
- if(this.timerVote != ''){
|
|
|
- let timeDiffence = this.curtTimer - this.timerVote;
|
|
|
- if(timeDiffence < 2 ){
|
|
|
- currentdate = ''
|
|
|
- }
|
|
|
- }
|
|
|
- return currentdate;
|
|
|
- },
|
|
|
-
|
|
|
- /*************数据发送***************** */
|
|
|
- websocketsend(data){
|
|
|
- this.websock.send(data);
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- /*************设置token加密***************** */
|
|
|
- setApiToken(name,controller,time,modules){
|
|
|
- return this.$md5.hex_md5(name +'customer-service' + controller + time + modules)
|
|
|
- },
|
|
|
-
|
|
|
- /*************跳转人工客服***************** */
|
|
|
- jumpService(id){
|
|
|
- this.jumpArtl = true;
|
|
|
- this.closeByServer = false;
|
|
|
- this.group = id;
|
|
|
- //人工会话登陆
|
|
|
- let data = {
|
|
|
- 'type' : 'userInit',
|
|
|
- data:{
|
|
|
- 'uid':this.user_info.id,
|
|
|
- 'name':this.user_info.name,
|
|
|
- 'avatar':this.user_info.avatar,
|
|
|
- 'group':this.group
|
|
|
- }
|
|
|
- }
|
|
|
- this.websock.send(JSON.stringify(data));
|
|
|
- },
|
|
|
-
|
|
|
- /*************机器智能回答问题***************** */
|
|
|
- answers(idx){
|
|
|
- let obj = {
|
|
|
- 'robot_addTime':this.problem[idx].robot_addTime,
|
|
|
- 'robot_content':this.problem[idx].robot_content,
|
|
|
- 'type' : 'machine'
|
|
|
- }
|
|
|
- this.information = this.problem[idx].robot_name
|
|
|
- this.sendMessage();
|
|
|
- this.automaticRolling();
|
|
|
- },
|
|
|
-
|
|
|
- /**************匿名注册**************** */
|
|
|
- registered(){
|
|
|
- let token = localStorage.getItem('token');
|
|
|
- let data={
|
|
|
- token:token != null ? token :'',//
|
|
|
- appid: this.$public.getQueryString('appid') ,//
|
|
|
- appuid:this.$public.getQueryString('appuid'),//
|
|
|
- }
|
|
|
- let obj = {
|
|
|
- headers: {
|
|
|
- "apiToken":this.setApiToken('autoreg','register',this.currTime,'index')
|
|
|
- }
|
|
|
- }
|
|
|
- this.$axios.post('/api/index/register/autoReg',data,obj).then(res=>{
|
|
|
- if(res.data.code ==1){
|
|
|
- this.user_info = res.data.data;
|
|
|
- localStorage.setItem("token", res.data.data.token);
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- /***********聊天滑动的时候滑动滚动条到底部******************* */
|
|
|
- automaticRolling(){
|
|
|
- this.$nextTick(() => {
|
|
|
- let msg = document.getElementById('main') // 获取对象
|
|
|
- msg.scrollTop = msg.scrollHeight // 滚动高度
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- /**************获取敏感词**************** */
|
|
|
- getSensitive(){
|
|
|
- let obj = {
|
|
|
- headers: {
|
|
|
- 'Content-Type' :'application/x-www-form-urlencoded',
|
|
|
- "apiToken":this.setApiToken('sensitivewords','index',this.currTime,'index')
|
|
|
- }
|
|
|
- };
|
|
|
- let data = {
|
|
|
- userToken :''
|
|
|
- }
|
|
|
- this.$axios.post('/api/index/index/sensitiveWords','',obj).then(res =>{
|
|
|
- if(res.data.code == 1){
|
|
|
- console.log(res.data.data);
|
|
|
- res.data.data.userSensitive.forEach(res =>{
|
|
|
- this.sensitive.push(res.sensitivewords_word)
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- /**********判定是否是JSON格式*********** */
|
|
|
- isJSON(str) {
|
|
|
- if (typeof str == 'string') {
|
|
|
- try {
|
|
|
- JSON.parse(str);
|
|
|
- return true;
|
|
|
- } catch(e) {
|
|
|
- //console.log(e);
|
|
|
- return false;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- /**************页面加载中挂载**************** */
|
|
|
- mounted(){
|
|
|
- let self = this;
|
|
|
- this.frceArr = frce.frce;
|
|
|
- this.$axios.get('api/index/index/systime?t='+new Date()).then(res =>{
|
|
|
- if(res.data.code == 1){
|
|
|
- // 获取系统时间
|
|
|
- let date = res.data.data.time.split(" ");
|
|
|
- date[0] = (new Date( date[0].replace(/-/g,'/')).getTime()) /1000;;
|
|
|
- this.currTime = date[0];
|
|
|
- this.hourse = date[1];
|
|
|
- // 获取机器智能问题
|
|
|
- this.getProblem();
|
|
|
- // 匿名注册
|
|
|
- this.registered();
|
|
|
- setTimeout(() => {
|
|
|
- //关闭加载条
|
|
|
- this.allLoadingClose();
|
|
|
- // 初始化websocket
|
|
|
- this.initWebSocket();
|
|
|
- }, 2000);
|
|
|
- // 获取聊天次数
|
|
|
- this.getChatNum();
|
|
|
- // 获取敏感词
|
|
|
- this.getSensitive();
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 组件挂载阶段
|
|
|
-
|
|
|
- destroyed() {
|
|
|
- this.websock.close() //离开路由之后断开websocket连接
|
|
|
- },
|
|
|
- computed:{
|
|
|
- inforLeng(){
|
|
|
- return this.information.length;
|
|
|
- }
|
|
|
- },
|
|
|
- watch:{
|
|
|
- inforLeng(val){
|
|
|
- if(val > 0){
|
|
|
- this.sendCol = true;
|
|
|
- }else{
|
|
|
- this.sendCol = false;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
+ import '../css/index.css';
|
|
|
+ import frce from '../assets/frce.js';
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ textarea: '',//备注
|
|
|
+ evlShow: false, // 评价框显示
|
|
|
+ zzShow: false, // 遮罩层显示
|
|
|
+ vertion: '',//图形验证码
|
|
|
+ provShow: true, // 验证框显示
|
|
|
+ changeIcon: 10,
|
|
|
+ name: '', // 验证框姓名model
|
|
|
+ phone: '',// 验证框电话model
|
|
|
+ email: '',// 验证框邮箱model
|
|
|
+ frceArr: [], //表情包代码
|
|
|
+ information: '',//发送的文本信息
|
|
|
+ sendCol: false, // 发送按钮切换样式
|
|
|
+ selType: false, //图标选中样式 true为选中，false为未选中
|
|
|
+ selNum: 0, // 自增当达到某个条件显示图片
|
|
|
+ // syType : false,
|
|
|
+ // sqType : false,
|
|
|
+ error: false,
|
|
|
+ emlError: false,
|
|
|
+ artAndLeave: 0, // 默认为100，转人工为10，人工不在转留言为100
|
|
|
+ chatCont: [], // 客户会话数据
|
|
|
+ imageUrl: [],//上传图片
|
|
|
+ img: '', //上传的单个图片路径
|
|
|
+ dialogVisible: false, //图片放大
|
|
|
+ dialogImageUrl: '', // 放大的图片
|
|
|
+ dialogUrl: false,
|
|
|
+ serviceInfor: '', //客服信息
|
|
|
+ websock: null, //会话初始值
|
|
|
+ currTime: "", //获取系统时间
|
|
|
+ apiToken: '',//系统Token
|
|
|
+ machine: '', //机器会话信息
|
|
|
+ advert: '', // 广告语
|
|
|
+ problem: '', //机器智能问题
|
|
|
+ macNotPro: false, //机器人问题无法解决显示
|
|
|
+ answer: [], //解答问题的答案
|
|
|
+ questionShow: true, // 问题显示
|
|
|
+ consult: false, //评价模块显示
|
|
|
+ type: 1001, //自增
|
|
|
+ jumpArtl: false, // 跳转人工客服状态
|
|
|
+ group: '', //客服组
|
|
|
+ userConversation: {}, //用户当前会话
|
|
|
+ machineAndAtl: 10, //默认为机器人，100为人工
|
|
|
+ satisfaction: 1, //评价满意度,1为满意，2为一般，3为不满意
|
|
|
+ // url: 'http://kfadmin.bocai186.com', // 域名地址
|
|
|
+ url :'http://192.168.2.186:8090', // 域名地址
|
|
|
+ user_info: '', // 用户信息
|
|
|
+ // 人工客服信息
|
|
|
+ service: '',
|
|
|
+ serviceList: [], //后台推送的人工客服列表
|
|
|
+ customerWelCome: '', // 客服欢迎语
|
|
|
+ customerSviceChat: [], // 客服会话信息
|
|
|
+ serviceImg: '',
|
|
|
+ timerVote: '', //存储上一次时间
|
|
|
+ curtTimer: '',//当前时间
|
|
|
+ returnTimer: '',//返回当前时间
|
|
|
+ // isConnection:true,//人工分组列表开关
|
|
|
+ chatNum: '', // 会话数量
|
|
|
+ comtSuccess: false, // 评论发送成功显示
|
|
|
+ comtCount: '', // 评论成功返回的满意度
|
|
|
+ retractShow: true, // 展开侧边栏
|
|
|
+ sensitive: [], //敏感词1
|
|
|
+ senType: false,//敏感词状态
|
|
|
+ sensitiveNumber: 0,//敏感词次数
|
|
|
+ doubSensitive: [],//重复的敏感词
|
|
|
+ senInfo: '', //敏感词数据
|
|
|
+ // sensitiveWordsNumber:0,
|
|
|
+ hourse: '', //返回时间，小时
|
|
|
+ closeByServer: false, //客服关闭会话
|
|
|
+ serverNotOnlin: false, //客服掉线
|
|
|
+ willOverTime: '', //超时关闭会话
|
|
|
+ allLoading: true, //整个页面加载中
|
|
|
+ webTime: '',//网络时间
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /******************文字信息转表情******************/
|
|
|
+ turnFace(data) {
|
|
|
+ let str = data.match(/\#\[.*?\]\//g);
|
|
|
+ let arr = Array.from(new Set(str));
|
|
|
+ arr.forEach(e => {
|
|
|
+ let imgsrc = '';
|
|
|
+ for (let i = 0; i < this.frceArr.length; i++) {
|
|
|
+ let expText = e.slice(1, e.length - 1);
|
|
|
+ if (expText == this.frceArr[i]) {
|
|
|
+ imgsrc = '<img class="hover" src="' + require(`@/assets/st-img/${i}.gif`) + '"/>'
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ data = data.replace(new RegExp(`\\#\\[${e.substring(2, e.length - 2)}\\]\\/`, 'g'), imgsrc);
|
|
|
+ })
|
|
|
+ return data;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 关闭加载中
|
|
|
+ allLoadingClose() {
|
|
|
+ this.allLoading = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**************切换显示客服信息**************** */
|
|
|
+ retract() {
|
|
|
+ this.retractShow = !this.retractShow;
|
|
|
+ },
|
|
|
+
|
|
|
+ /***************发送图片***************/
|
|
|
+ beforeAvatarUpload(file) {
|
|
|
+ let self = this
|
|
|
+ const isJPG = file.type == 'image/jpeg' || 'image/jpg' || 'image/png' || 'image/svg';
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
+
|
|
|
+ if (!isJPG) {
|
|
|
+ this.$message.error('上传只能是图片格式!');
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error('上传图片大小不能超过 2MB!');
|
|
|
+ }
|
|
|
+ //对图片进行压缩
|
|
|
+ const imgSize = file.size / 1024 / 1024;
|
|
|
+ if(imgSize > 0.5) {
|
|
|
+ const _this = this
|
|
|
+ return new Promise(resolve => {
|
|
|
+ const reader = new FileReader()
|
|
|
+ const image = new Image()
|
|
|
+ image.onload = (imageEvent) => {
|
|
|
+ const canvas = document.createElement('canvas');
|
|
|
+ const context = canvas.getContext('2d');
|
|
|
+ const width = image.width * 0.4;
|
|
|
+ const height = image.height * 0.4;
|
|
|
+ canvas.width = width;
|
|
|
+ canvas.height = height;
|
|
|
+ context.clearRect(0, 0, width, height);
|
|
|
+ context.drawImage(image, 0, 0, width, height);
|
|
|
+ const dataUrl = canvas.toDataURL(file.type);
|
|
|
+ const blobData = _this.dataURItoBlob(dataUrl, file.type);
|
|
|
+ resolve(blobData)
|
|
|
+ }
|
|
|
+ reader.onload = (e => { image.src = e.target.result; });
|
|
|
+ reader.readAsDataURL(file);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ dataURItoBlob(dataURI, type) {
|
|
|
+ var binary = atob(dataURI.split(',')[1]);
|
|
|
+ var array = [];
|
|
|
+ for(var i = 0; i < binary.length; i++) {
|
|
|
+ array.push(binary.charCodeAt(i));
|
|
|
+ }
|
|
|
+ return new Blob([new Uint8Array(array)], {type: type});
|
|
|
+ },
|
|
|
+
|
|
|
+ handError(err, file, fileList) {
|
|
|
+ // 获取当前发送时间
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ /***************传输成功之后返回图片*************** */
|
|
|
+ handleAvatarSuccess(res, file) {
|
|
|
+ console.log(res)
|
|
|
+ this.dialogUrl = true;
|
|
|
+ this.img = res.data.src;
|
|
|
+ this.sendMessage();
|
|
|
+ },
|
|
|
+ /***************图片放大*************** */
|
|
|
+ handlePictureCardPreview(url) {
|
|
|
+ this.dialogImageUrl = url;
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ /***************弹出评价框*************** */
|
|
|
+ ejectEvl(type) {
|
|
|
+ if (this.comtSuccess) return;
|
|
|
+ this.changeIcon = 10;
|
|
|
+ if (type == 10) {
|
|
|
+ this.evlShow = true
|
|
|
+ }
|
|
|
+ this.zzShow = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ /***************传入父组件进行组件切换*************** */
|
|
|
+ leaveMsg() {
|
|
|
+ this.$emit('value', 100)
|
|
|
+ },
|
|
|
+ //回到初始页面
|
|
|
+ goBack() {
|
|
|
+ this.artAndLeave = 0;
|
|
|
+ this.machineAndAtl = 10;
|
|
|
+ this.macNotPro = false;
|
|
|
+ this.jumpArtl = false;
|
|
|
+ this.automaticRolling();
|
|
|
+ this.initWebSocket();
|
|
|
+ this.chatCont =[];
|
|
|
+ this.customerSviceChat =[];
|
|
|
+
|
|
|
+ //this.questionShow = true;
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ /*******发送消息按钮*******/
|
|
|
+ sendInfo() {
|
|
|
+ this.closeByServer = false;
|
|
|
+ this.artAndLeave = 0;
|
|
|
+ this.jumpArtl = false;
|
|
|
+ this.dialogUrl = false;
|
|
|
+ this.sendMessage();
|
|
|
+ },
|
|
|
+
|
|
|
+ /***************改变评价框的满意度*************** */
|
|
|
+ chage(type) {
|
|
|
+ this.satisfaction = type;
|
|
|
+ if (type == 1) {
|
|
|
+ this.comtCount = '满意'
|
|
|
+ this.changeIcon = 10;
|
|
|
+ } else if (type == 2) {
|
|
|
+ this.comtCount = '一般'
|
|
|
+ this.changeIcon = 100;
|
|
|
+ } else {
|
|
|
+ this.comtCount = '不满意'
|
|
|
+ this.changeIcon = 1000;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /***************图标样式切换*************** */
|
|
|
+ select(type) {
|
|
|
+ if (type == 1) {
|
|
|
+ this.selType = !this.selType;
|
|
|
+ } else if (type == 2) {
|
|
|
+ this.syType = !this.syType;
|
|
|
+ } else {
|
|
|
+ this.sqType = !this.sqType;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /***************评价确认*************** */
|
|
|
+ evaluateSure() {
|
|
|
+ // 参数
|
|
|
+ let params = {
|
|
|
+ 'evaluateId': this.satisfaction,
|
|
|
+ 'conversationId': this.service.conversationId,
|
|
|
+ 'evaluateContent': this.textarea
|
|
|
+ }
|
|
|
+ this.$axios.get('/api/index/evaluate/putEvaluate', {
|
|
|
+ params,
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'application/x-www-form-urlencoded',
|
|
|
+ 'apiToken': this.setApiToken('putevaluate', 'evaluate', this.currTime, 'index')
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data.code == 1) {
|
|
|
+ this.evlShow = false;
|
|
|
+ this.zzShow = false;
|
|
|
+ this.textarea = '';
|
|
|
+ this.comtSuccess = true;
|
|
|
+ if (this.changeIcon == 10) {
|
|
|
+ this.comtCount = '满意'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ /***************验证框确认*************** */
|
|
|
+ yySure() {
|
|
|
+ this.provShow = false;
|
|
|
+ this.zzShow = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ /***************转人工客服列表*************** */
|
|
|
+ changeService() {
|
|
|
+ // if(!this.isConnection) return
|
|
|
+ this.$axios.post('/api/index/groups/index', {}, {
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'application/x-www-form-urlencoded',
|
|
|
+ 'apiToken': this.setApiToken('index', 'groups', this.currTime, 'index')
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data.code == 1) {
|
|
|
+ this.serviceList = res.data.data;
|
|
|
+ this.chatCont.push({
|
|
|
+ 'type': 'artService'
|
|
|
+ })
|
|
|
+ this.automaticRolling();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // this.isConnection = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ /***************表情点击*************** */
|
|
|
+ memeImg(i) {
|
|
|
+ //当表情被点击
|
|
|
+ this.information = this.information + "#" + this.frceArr[i] + "/";
|
|
|
+ },
|
|
|
+
|
|
|
+ /***************失去焦点做正则验证*************** */
|
|
|
+ sureInfor(type) {
|
|
|
+ if (type == 1) {
|
|
|
+ if (!/^1[34578]\d{9}$/.test(this.phone)) {
|
|
|
+ this.error = true;
|
|
|
+ this.phone = '';
|
|
|
+ } else {
|
|
|
+ this.error = false;
|
|
|
+ }
|
|
|
+ } else if (type == 10) {
|
|
|
+ if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) {
|
|
|
+ this.emlError = true;
|
|
|
+ this.email = '';
|
|
|
+ } else {
|
|
|
+ this.emlError = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /***************获取热点智能问题*************** */
|
|
|
+ getProblem() {
|
|
|
+ this.$axios.post('/api/index/robot/index', {groups_id: 1, robotgroups_id: 1}, {
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'application/x-www-form-urlencoded',
|
|
|
+ 'apiToken': this.setApiToken('index', 'robot', this.currTime, 'index')
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data.code == 1) {
|
|
|
+ this.problem = res.data.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ /*****************获取聊天次数*******************/
|
|
|
+ getChatNum() {
|
|
|
+ this.$axios.post('/api/index/evaluate/minRound', '', {
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'application/x-www-form-urlencoded',
|
|
|
+ 'apiToken': this.setApiToken('minround', 'evaluate', this.currTime, 'index')
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data.code == 1) {
|
|
|
+ this.chatNum = res.data.data.systemconfig_data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ /*****************屏蔽关键字******************/
|
|
|
+ shieldingKeyword(data) {
|
|
|
+ //将敏感词组用|转换字符串
|
|
|
+ let snstive = this.sensitive.join('|');
|
|
|
+ //console.log(snstive);
|
|
|
+ this.sensitiveNumber = 0;
|
|
|
+ //匹配出会话中的敏感词
|
|
|
+ return data.replace(eval('/' + snstive + '/g'), (res) => {
|
|
|
+ var str = '';
|
|
|
+ for (var i = 0; i < res.length; i++) {
|
|
|
+ str += '*';
|
|
|
+ }
|
|
|
+ this.sensitiveNumber++;
|
|
|
+ return str;
|
|
|
+ })
|
|
|
+ //console.log(this.senInfo);
|
|
|
+ // let params = {
|
|
|
+ // 'type' : 1,
|
|
|
+ // 'conversationId' : this.service.conversationId,
|
|
|
+ // 'number' : num
|
|
|
+ // }
|
|
|
+ // this.$axios.get('/api/index/alarm/sensitiveAlarm',{params,
|
|
|
+ // headers:{
|
|
|
+ // 'Content-Type' :'application/x-www-form-urlencoded',
|
|
|
+ // 'apiToken' : this.setApiToken('sensitivealarm','alarm',this.currTime,'index')
|
|
|
+ // }
|
|
|
+ // }).then(res =>{
|
|
|
+
|
|
|
+ // })
|
|
|
+ },
|
|
|
+
|
|
|
+ /*---------------------------------------------------------------------------------*/
|
|
|
+ /**************初始化WebSocket****************/
|
|
|
+ initWebSocket() {
|
|
|
+ let _this = this;
|
|
|
+ let apiToken = this.$md5.hex_md5('customer-service' + this.currTime + window.location.origin);
|
|
|
+ // this.websock = new WebSocket('ws://103.108.43.176:9101?apiToken=' + apiToken);
|
|
|
+ this.websock = new WebSocket('ws://192.168.2.186:9101?apiToken=' + apiToken);
|
|
|
+ // 数据接收
|
|
|
+ this.websock.onmessage = this.websocketonmessage;
|
|
|
+ // 连接建立之后
|
|
|
+ this.websock.onopen = this.websocketonopen;
|
|
|
+ // 连接建立失败重连
|
|
|
+ this.websock.onerror = this.websocketonerror;
|
|
|
+ // 关闭会话
|
|
|
+ this.websock.onclose = this.websocketonclose;
|
|
|
+ },
|
|
|
+
|
|
|
+ /****************连接建立成功***************/
|
|
|
+ websocketonopen() {
|
|
|
+ console.log('链接成功');
|
|
|
+ },
|
|
|
+
|
|
|
+ /*************连接建立失败重连***************** */
|
|
|
+ websocketonerror() {
|
|
|
+ // this.initWebSocket();
|
|
|
+ },
|
|
|
+
|
|
|
+ /**************数据接收***************** */
|
|
|
+ websocketonmessage(e) {
|
|
|
+ const redata = JSON.parse(e.data);
|
|
|
+ console.log(redata)
|
|
|
+ // 欢迎语
|
|
|
+ if (redata.message_type == 'helloMessage') {
|
|
|
+ this.machine = redata.data;
|
|
|
+ }
|
|
|
+ // 广告语
|
|
|
+ if (redata.message_type == 'advertisement') {
|
|
|
+ this.advert = redata.data;
|
|
|
+ console.log(this.advert)
|
|
|
+ }
|
|
|
+ // 评价
|
|
|
+ if (redata.message_type == 'getEvaluate') {
|
|
|
+ this.consult = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ //返回的会话时间
|
|
|
+ if (redata.message_type == 'webTime') {
|
|
|
+ this.webTime = redata.data.time;
|
|
|
+ if (this.machineAndAtl == 100) {
|
|
|
+ let num = this.customerSviceChat.length - 1;
|
|
|
+ if (this.customerSviceChat[num].type == "user") {
|
|
|
+ this.$set(this.customerSviceChat[num], 'time', redata.data.time);
|
|
|
+ }
|
|
|
+ } else if (this.machineAndAtl == 10) {
|
|
|
+ let num = this.chatCont.length - 1;
|
|
|
+ if (this.chatCont[num].type == "user") {
|
|
|
+ this.$set(this.chatCont[num], 'time', redata.data.time);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(redata.data);
|
|
|
+ }
|
|
|
+
|
|
|
+ //会话超时提示
|
|
|
+ if (redata.message_type == 'overtime') {
|
|
|
+ console.log('接收会话超时');
|
|
|
+ }
|
|
|
+
|
|
|
+ // 链接客服信息
|
|
|
+ if (redata.message_type == 'connect') {
|
|
|
+ this.artAndLeave = 10;
|
|
|
+ this.machineAndAtl = 100;
|
|
|
+ this.service = redata.data;
|
|
|
+ this.serviceImg = redata.data.serverInfo.avatar;
|
|
|
+ }
|
|
|
+ // 暂无客服
|
|
|
+ if (redata.message_type == 'wait') {
|
|
|
+ let content = JSON.parse(redata.data.content)
|
|
|
+ this.artAndLeave = 100;
|
|
|
+ }
|
|
|
+ //接收客服会话
|
|
|
+ if (redata.message_type == 'chatMessage') {
|
|
|
+
|
|
|
+ //存储会话超时间
|
|
|
+ this.webTime = redata.data.time;
|
|
|
+
|
|
|
+ //会话大于两分钟显示
|
|
|
+ let timer = ''
|
|
|
+ if (this.returnTimer == '') {
|
|
|
+ timer = redata.data.time;
|
|
|
+ this.returnTimer = redata.data.time
|
|
|
+ } else {
|
|
|
+ let timeStamp = this.returnTimer.split(":");
|
|
|
+ let rdtime = redata.data.time.split(":");
|
|
|
+ if (timeStamp[0] == rdtime[0]) {
|
|
|
+ if ((rdtime[1] - timeStamp[1]) < 2) {
|
|
|
+ timer = ''
|
|
|
+ } else {
|
|
|
+ timer = redata.data.time;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //
|
|
|
+ let contType = this.isJSON(redata.data.content);
|
|
|
+ let content = {};
|
|
|
+ if (contType == false) {
|
|
|
+ content.text = redata.data.content
|
|
|
+ } else {
|
|
|
+ content = JSON.parse(redata.data.content)
|
|
|
+ }
|
|
|
+ let obj = {
|
|
|
+ time: timer,
|
|
|
+ content: content.text ? this.turnFace(content.text) : '',
|
|
|
+ imgUrl: content.img ? content.img : '',
|
|
|
+ type: 'service'
|
|
|
+ }
|
|
|
+ this.customerSviceChat.push(obj);
|
|
|
+ // console.log(this.customerSviceChat);
|
|
|
+ this.selNum++;
|
|
|
+ this.automaticRolling();
|
|
|
+ }
|
|
|
+ //接收机器会话
|
|
|
+ if (redata.message_type == 'robotMessage') {
|
|
|
+ if (redata.data.content == 'error') {
|
|
|
+ let _this = this;
|
|
|
+ this.chatCont.push({type: 1001})
|
|
|
+ this.automaticRolling();
|
|
|
+ } else {
|
|
|
+ this.chatCont.push({
|
|
|
+ 'robot_content': redata.data.content,
|
|
|
+ 'type': 'machine'
|
|
|
+ })
|
|
|
+ this.automaticRolling();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 没有客服上线.
|
|
|
+ if (redata.message_type == 'notice') {
|
|
|
+ this.artAndLeave = 100;
|
|
|
+ this.automaticRolling();
|
|
|
+ this.machineAndAtl = 10;
|
|
|
+ this.jumpArtl = false;
|
|
|
+ this.initWebSocket();
|
|
|
+ //this.noServer();
|
|
|
+ }
|
|
|
+ // 客服关闭会话.
|
|
|
+ if (redata.message_type == 'closeBysever') {
|
|
|
+ this.closeByServer = true;
|
|
|
+ this.automaticRolling();
|
|
|
+ }
|
|
|
+ // 客服掉线.
|
|
|
+ if (redata.message_type == 'serviceoffline') {
|
|
|
+ this.serverNotOnlin = true;
|
|
|
+ this.closeByServer = true;
|
|
|
+ this.automaticRolling();
|
|
|
+ }
|
|
|
+ // 超时.
|
|
|
+ if (redata.message_type == 'overtime') {
|
|
|
+ this.willOverTime = redata.data.content;
|
|
|
+ this.automaticRolling();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ /************关闭会话****************** */
|
|
|
+ websocketonclose(e) {
|
|
|
+ console.log('断开会话', e);
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ /******************消息发送数据处理********************/
|
|
|
+ sendMessage() {
|
|
|
+ // this.doubSensitive = [];
|
|
|
+
|
|
|
+ this.senType = '';
|
|
|
+
|
|
|
+ //发送消息时间获取服务器时间
|
|
|
+ let currentdate = '';
|
|
|
+ if (this.timerVote != '') {
|
|
|
+ currentdate = this.newTimer();
|
|
|
+ } else {
|
|
|
+ let date = new Date();
|
|
|
+ let curtDate = date.getHours() * 60 + date.getMinutes()
|
|
|
+ this.timerVote = curtDate;
|
|
|
+ currentdate = '';
|
|
|
+ }
|
|
|
+
|
|
|
+ // 给机器人发送文本消息
|
|
|
+ if (this.machineAndAtl == 10) {
|
|
|
+ //给机器人发送文本消息-本地储存
|
|
|
+ let datas = {
|
|
|
+ time: currentdate,
|
|
|
+ chat: this.turnFace(this.shieldingKeyword(this.information)),
|
|
|
+ imgUrl: this.img,
|
|
|
+ type: 'user'
|
|
|
+ }
|
|
|
+ this.chatCont.push(datas)
|
|
|
+ //消息发送-机器人
|
|
|
+ this.websocketsend(JSON.stringify({
|
|
|
+ type: 'toRobot',
|
|
|
+ data: {
|
|
|
+ groups_id: '1',
|
|
|
+ robot_name: this.shieldingKeyword(this.information),
|
|
|
+ webTime: this.webTime,
|
|
|
+ robotgroups_id: '1',
|
|
|
+ }
|
|
|
+ }))
|
|
|
+ } else if (this.machineAndAtl == 100) { //人工聊天
|
|
|
+ //发送给客服消息-本地储存
|
|
|
+ this.customerSviceChat.push({
|
|
|
+ time: currentdate,
|
|
|
+ content: this.turnFace(this.shieldingKeyword(this.information)),
|
|
|
+ imgUrl: this.img,
|
|
|
+ type: 'user',
|
|
|
+ });
|
|
|
+ console.log(this.customerSviceChat);
|
|
|
+
|
|
|
+ //消息发送-客服
|
|
|
+ this.websocketsend(JSON.stringify({
|
|
|
+ type: 'chatMessage',
|
|
|
+ data: {
|
|
|
+ from_name: this.user_info.name,
|
|
|
+ from_avatar: this.user_info.avatar,
|
|
|
+ from_id: this.user_info.id,
|
|
|
+ content: JSON.stringify({
|
|
|
+ text: this.information,
|
|
|
+ img: this.img,
|
|
|
+ type: 'user'
|
|
|
+ }),
|
|
|
+ webTime: this.webTime,
|
|
|
+ to_id: this.service.kf_id,
|
|
|
+ to_name: this.service.kf_name,
|
|
|
+ sensitiveNumber: this.sensitiveNumber,
|
|
|
+ conversationId: this.service.conversationId
|
|
|
+ }
|
|
|
+ }))
|
|
|
+ }
|
|
|
+ // 发送之后清空发送数据
|
|
|
+ this.img = '';
|
|
|
+ this.information = '';
|
|
|
+ //高度自动向上滑动
|
|
|
+ this.automaticRolling();
|
|
|
+ },
|
|
|
+
|
|
|
+ /**************获取会话间隔是否大于2分钟**************** */
|
|
|
+ newTimer() {
|
|
|
+ //console.log('house',this.hourse)
|
|
|
+ this.timerVote = this.curtTimer;
|
|
|
+ let currentdate = this.hourse;
|
|
|
+ this.curtTimer = this.hourse;
|
|
|
+ if (this.timerVote != '') {
|
|
|
+ let timeDiffence = this.curtTimer - this.timerVote;
|
|
|
+ if (timeDiffence < 2) {
|
|
|
+ currentdate = ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return currentdate;
|
|
|
+ },
|
|
|
+
|
|
|
+ /*************数据发送***************** */
|
|
|
+ websocketsend(data) {
|
|
|
+ this.websock.send(data);
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ /*************设置token加密***************** */
|
|
|
+ setApiToken(name, controller, time, modules) {
|
|
|
+ return this.$md5.hex_md5(name + 'customer-service' + controller + time + modules)
|
|
|
+ },
|
|
|
+
|
|
|
+ /*************跳转人工客服***************** */
|
|
|
+ jumpService(id) {
|
|
|
+ this.jumpArtl = true;
|
|
|
+ this.closeByServer = false;
|
|
|
+ this.group = id;
|
|
|
+ //人工会话登陆
|
|
|
+ let data = {
|
|
|
+ 'type': 'userInit',
|
|
|
+ data: {
|
|
|
+ 'uid': this.user_info.id,
|
|
|
+ 'name': this.user_info.name,
|
|
|
+ 'avatar': this.user_info.avatar,
|
|
|
+ 'group': this.group
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.websock.send(JSON.stringify(data));
|
|
|
+ },
|
|
|
+
|
|
|
+ /*************机器智能回答问题***************** */
|
|
|
+ answers(idx) {
|
|
|
+ let obj = {
|
|
|
+ 'robot_addTime': this.problem[idx].robot_addTime,
|
|
|
+ 'robot_content': this.problem[idx].robot_content,
|
|
|
+ 'type': 'machine'
|
|
|
+ }
|
|
|
+ this.information = this.problem[idx].robot_name
|
|
|
+ this.sendMessage();
|
|
|
+ this.automaticRolling();
|
|
|
+ },
|
|
|
+
|
|
|
+ /**************匿名注册**************** */
|
|
|
+ registered() {
|
|
|
+ let token = localStorage.getItem('token');
|
|
|
+ let data = {
|
|
|
+ token: token != null ? token : '',//
|
|
|
+ appid: this.$public.getQueryString('appid'),//
|
|
|
+ appuid: this.$public.getQueryString('appuid'),//
|
|
|
+ }
|
|
|
+ let obj = {
|
|
|
+ headers: {
|
|
|
+ "apiToken": this.setApiToken('autoreg', 'register', this.currTime, 'index')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$axios.post('/api/index/register/autoReg', data, obj).then(res => {
|
|
|
+ if (res.data.code == 1) {
|
|
|
+ this.user_info = res.data.data;
|
|
|
+ localStorage.setItem("token", res.data.data.token);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ /***********聊天滑动的时候滑动滚动条到底部******************* */
|
|
|
+ automaticRolling() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let msg = document.getElementById('main') // 获取对象
|
|
|
+ msg.scrollTop = msg.scrollHeight // 滚动高度
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ /**************获取敏感词**************** */
|
|
|
+ getSensitive() {
|
|
|
+ let obj = {
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'application/x-www-form-urlencoded',
|
|
|
+ "apiToken": this.setApiToken('sensitivewords', 'index', this.currTime, 'index')
|
|
|
+ }
|
|
|
+ };
|
|
|
+ let data = {
|
|
|
+ userToken: ''
|
|
|
+ }
|
|
|
+ this.$axios.post('/api/index/index/sensitiveWords', '', obj).then(res => {
|
|
|
+ if (res.data.code == 1) {
|
|
|
+ console.log(res.data.data);
|
|
|
+ res.data.data.userSensitive.forEach(res => {
|
|
|
+ this.sensitive.push(res.sensitivewords_word)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ /**********判定是否是JSON格式*********** */
|
|
|
+ isJSON(str) {
|
|
|
+ if (typeof str == 'string') {
|
|
|
+ try {
|
|
|
+ JSON.parse(str);
|
|
|
+ return true;
|
|
|
+ } catch (e) {
|
|
|
+ //console.log(e);
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**************页面加载中挂载**************** */
|
|
|
+ mounted() {
|
|
|
+ let self = this;
|
|
|
+ this.frceArr = frce.frce;
|
|
|
+ this.$axios.get('api/index/index/systime?t=' + new Date()).then(res => {
|
|
|
+ if (res.data.code == 1) {
|
|
|
+ // 获取系统时间
|
|
|
+ let date = res.data.data.time.split(" ");
|
|
|
+ date[0] = (new Date(date[0].replace(/-/g, '/')).getTime()) / 1000;
|
|
|
+ this.currTime = date[0];
|
|
|
+ this.hourse = date[1];
|
|
|
+ // 获取机器智能问题
|
|
|
+ this.getProblem();
|
|
|
+ // 匿名注册
|
|
|
+ this.registered();
|
|
|
+ setTimeout(() => {
|
|
|
+ //关闭加载条
|
|
|
+ this.allLoadingClose();
|
|
|
+ // 初始化websocket
|
|
|
+ this.initWebSocket();
|
|
|
+ }, 2000);
|
|
|
+ // 获取聊天次数
|
|
|
+ this.getChatNum();
|
|
|
+ // 获取敏感词
|
|
|
+ this.getSensitive();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 组件挂载阶段
|
|
|
+
|
|
|
+ destroyed() {
|
|
|
+ this.websock.close() //离开路由之后断开websocket连接
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ inforLeng() {
|
|
|
+ return this.information.length;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ inforLeng(val) {
|
|
|
+ if (val > 0) {
|
|
|
+ this.sendCol = true;
|
|
|
+ } else {
|
|
|
+ this.sendCol = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
- .chatBox{
|
|
|
- width: 700px;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .el-header{
|
|
|
- background:linear-gradient(90deg,rgba(22,84,209,1) 0%,rgba(9,52,173,1) 100%);
|
|
|
- box-shadow:0px 3px 3px rgba(0,0,0,0.2);
|
|
|
- }
|
|
|
- .tit{
|
|
|
- height: 100%;
|
|
|
- line-height: 80px;
|
|
|
- text-align: left;
|
|
|
- padding-left: 20px;
|
|
|
- }
|
|
|
- .el-col span{
|
|
|
- font-size: 18px;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- .imgBox{
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- .imgBox img{
|
|
|
- margin-right: 20px;
|
|
|
- }
|
|
|
- .imgBox img:nth-last-child(1){
|
|
|
- margin-right: 0
|
|
|
- }
|
|
|
- .el-main{
|
|
|
- background: #fff;
|
|
|
- width: 63%;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
- .el-aside{
|
|
|
- background: #F5F5F5;
|
|
|
- width: 37%;
|
|
|
- }
|
|
|
- .cationer,.artificial{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- /* align-items: center; */
|
|
|
- }
|
|
|
- .rt{
|
|
|
- width: 100%;
|
|
|
- box-sizing:inherit;
|
|
|
- }
|
|
|
- .artificial{
|
|
|
- /* width: 150px; */
|
|
|
- /* padding:0 20px; */
|
|
|
- margin-top: 23px;
|
|
|
- margin-bottom: 9px;
|
|
|
- vertical-align: middle;
|
|
|
- /* flex-direction: column;*/
|
|
|
-
|
|
|
- }
|
|
|
- .infor div{
|
|
|
- margin-bottom: 3px;
|
|
|
- }
|
|
|
- .infor div span,.autograph span{
|
|
|
- color: #999999;
|
|
|
- font-size: 14px;
|
|
|
- font-weight:400;
|
|
|
- }
|
|
|
- .infor div span:nth-child(2),.autograph span:nth-child(2){
|
|
|
- color: #666666;
|
|
|
- margin-left: 4px;
|
|
|
- }
|
|
|
- .headPortrait{
|
|
|
- width: 46%;
|
|
|
- height: 100px;
|
|
|
- }
|
|
|
- .headPortrait img{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .autograph{
|
|
|
- margin-bottom: 11px;
|
|
|
- }
|
|
|
- .advent{
|
|
|
- border-top: 1px solid #DDDDDD;
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
- .advent img{
|
|
|
- width: 100%;
|
|
|
- height: 350px;
|
|
|
- }
|
|
|
- .pd{
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
- .pd20{
|
|
|
- padding: 0 20px;
|
|
|
- }
|
|
|
- /* 会话 */
|
|
|
- .conversationBox{
|
|
|
- margin-top: 13px;
|
|
|
- margin-bottom: 13px;
|
|
|
- }
|
|
|
- .timer{
|
|
|
- text-align: center;
|
|
|
- margin: 10px 0;
|
|
|
- color: #999999;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- .headImg{
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- margin-right: 13px;
|
|
|
- }
|
|
|
- .headImg img{
|
|
|
- display: inline-block;
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- }
|
|
|
- .conversation .cont,.customer .cont{
|
|
|
- background: #ffffff;
|
|
|
- padding: 9px 8px 12px 10px;
|
|
|
- display: inline-block;
|
|
|
- border: 1px solid rgba(223, 223, 223, 1);
|
|
|
- border-radius: 5px;
|
|
|
- position: relative;
|
|
|
- max-width: 270px;
|
|
|
- }
|
|
|
- .left::after{
|
|
|
- position: absolute;
|
|
|
- content: "";
|
|
|
- display: inline-block;
|
|
|
- left: -4px;
|
|
|
- top: 5px;
|
|
|
- width: 5px;
|
|
|
- height: 9px;
|
|
|
- background: #fff;
|
|
|
- -webkit-transform: skewX(30deg);
|
|
|
- transform: skewX(30deg);
|
|
|
- /* z-index: -1; */
|
|
|
- border-left: 1px solid #dfdfdf;
|
|
|
- border-top: 1px solid #dfdfdf;
|
|
|
- }
|
|
|
- div.noafter::after{
|
|
|
- content: '';
|
|
|
- width: 0;
|
|
|
- height: 0;;
|
|
|
- display: inline;
|
|
|
- position: relative;
|
|
|
- border: 0;
|
|
|
- }
|
|
|
- .conversation .cont div,.customer .cont div{
|
|
|
- color: #666666;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
- .customer{
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
- .customer .cont{
|
|
|
- margin-right: 13px;
|
|
|
- border: 0;
|
|
|
- background: #5EA0F7;
|
|
|
- max-width: 260px;
|
|
|
- word-wrap: break-word;
|
|
|
- word-break: normal;
|
|
|
- }
|
|
|
- .customer .cont div{
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- .right::after{
|
|
|
- position: absolute;
|
|
|
- content: "";
|
|
|
- display: inline-block;
|
|
|
- right: -3px;
|
|
|
- top: 6px;
|
|
|
- width: 5px;
|
|
|
- height: 9px;
|
|
|
- background: #5ea0f7;
|
|
|
- -webkit-transform: skewX(-30deg);
|
|
|
- transform: skewX(-30deg);
|
|
|
- border-left: 1px solid #5ea0f7;
|
|
|
- border-top: 1px solid #5ea0f7;
|
|
|
- }
|
|
|
- .col{
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- .change{
|
|
|
- color: #5ea0f7;
|
|
|
- }
|
|
|
- .questionList,.changeService{
|
|
|
- margin: 10px;
|
|
|
- border:1px solid rgba(223,223,223,1);
|
|
|
- border-radius: 5px;
|
|
|
- }
|
|
|
- .questionList div,.changeService div{
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- padding-left: 15px;
|
|
|
- }
|
|
|
- .questionList div span{
|
|
|
- color: #5EA0F7;
|
|
|
- font-size:14px;
|
|
|
- }
|
|
|
- .questionList section:nth-child(odd),.changeService div:nth-child(odd){
|
|
|
- background: #F6F6F6;
|
|
|
- }
|
|
|
- .changeService div span{
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- .changeService div span:nth-child(1){
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- .col6{
|
|
|
- color: #666666!important;
|
|
|
- }
|
|
|
- .colE5{
|
|
|
- color: #5EA0F7;
|
|
|
- }
|
|
|
- .promptBox{
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- height: 26px;
|
|
|
- margin: 10px 0 10px;
|
|
|
- /* line-height: 26px; */
|
|
|
- }
|
|
|
- .promptBoxH{
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- height: 50px;
|
|
|
- margin: 10px 0 10px;
|
|
|
- /* line-height: 26px; */
|
|
|
- }
|
|
|
- .prompt{
|
|
|
- text-align: center;
|
|
|
- padding: 5px 28px 4px;
|
|
|
- background: #DDDDDD;
|
|
|
- border-radius:30px;
|
|
|
- width: 140px;
|
|
|
- color: #FFFFFF;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- .help{
|
|
|
- width: 260px;
|
|
|
- }
|
|
|
- .help .prompt{
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- /* 评论 */
|
|
|
- .evaluate{
|
|
|
- height: 101px;
|
|
|
- padding: 19px 0 16px;
|
|
|
- background:rgba(255,255,255,1);
|
|
|
- border:1px solid rgba(223,223,223,1);
|
|
|
- border-radius:10px;
|
|
|
- margin-top: 15px;
|
|
|
- text-align: center;
|
|
|
- position: relative;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- .evaluate span{
|
|
|
- font-size: 14px;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- .nopd{
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
- .evaluate .btn{
|
|
|
- display: block;
|
|
|
- background: #F04992;
|
|
|
- border-radius:10px;
|
|
|
- margin-top: 10px;
|
|
|
- color: #FFFFFF;
|
|
|
- height: 36px;
|
|
|
- line-height: 36px;
|
|
|
- width: 100px;
|
|
|
- position: absolute;
|
|
|
- bottom: 16px;
|
|
|
- left: 35%;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- /* 聊天框 */
|
|
|
- .chatting{
|
|
|
- width: 100%;
|
|
|
- background:rgba(255,255,255,1);
|
|
|
- box-shadow:0px -5px 5px rgba(0,0,0,0.05);
|
|
|
- height: 100px;
|
|
|
- padding: 10px 20px;
|
|
|
- }
|
|
|
- .informationBox{
|
|
|
- height: 500px;
|
|
|
- overflow: auto;
|
|
|
- }
|
|
|
- .expression,.photo{
|
|
|
- display: inline-block;
|
|
|
- width: 18px;
|
|
|
- height: 18px;
|
|
|
- background: url("./../assets/st-img/expression.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- cursor: pointer;
|
|
|
- margin-right: 18px;
|
|
|
- }
|
|
|
- .expression:hover{
|
|
|
- background: url("./../assets/st-img/expressionHover.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
- .photo{
|
|
|
- background: url("./../assets/st-img/photo.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
- .photo:hover{
|
|
|
- background: url("./../assets/st-img/photoHover.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
- textarea{
|
|
|
- height: 30px;
|
|
|
- width: 300px;
|
|
|
- border: 0;
|
|
|
- -webkit-user-select:auto;
|
|
|
- user-select:auto;-o-user-select:auto;
|
|
|
- -ms-user-select:auto;
|
|
|
- resize: none;
|
|
|
- outline: none;
|
|
|
- padding-top: 10px;
|
|
|
- }
|
|
|
- .sendOut{
|
|
|
- width: 80px;
|
|
|
- height: 44px;
|
|
|
- line-height: 40px;
|
|
|
- border:1px solid rgba(221,221,221,1);
|
|
|
- border-radius:5px;
|
|
|
- text-align: center;
|
|
|
- margin-left: 20px;
|
|
|
- }
|
|
|
- .sendOut span{
|
|
|
- color: #CCCCCC;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
- .chattingBox{
|
|
|
- margin-top: 12px;
|
|
|
- }
|
|
|
- /* 评论弹框 */
|
|
|
- .zzBox{
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: rgba(0,0,0,0.3)
|
|
|
- }
|
|
|
- .box-card,.proving{
|
|
|
- width: 494px;
|
|
|
- height: 429px;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50%;
|
|
|
- transform: translate(-50%,-50%);
|
|
|
- z-index : 999;
|
|
|
- border-radius:10px;
|
|
|
- padding: 20px 20px 30px 50px;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- .proving{
|
|
|
- padding:20px 20px 30px 47px;
|
|
|
- }
|
|
|
- /* .close{
|
|
|
- text-align: right;
|
|
|
- cursor: pointer;
|
|
|
- } */
|
|
|
-
|
|
|
- /* .close i{
|
|
|
- display: inline-block;
|
|
|
- width: 18px;
|
|
|
- height: 18px;
|
|
|
- background: url("./../assets/st-img/close.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- } */
|
|
|
- .box-card .tit{
|
|
|
- text-align: center;
|
|
|
- padding-right: 65px;
|
|
|
- margin-bottom: 40px;
|
|
|
- }
|
|
|
- .box-card .tit span{
|
|
|
- font-size:18px;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- .selIcon{
|
|
|
- padding-right: 30px;
|
|
|
- margin-bottom: 30px;
|
|
|
- }
|
|
|
- .selIcon div {
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .selIcon div i{
|
|
|
- display: block;
|
|
|
- width: 44px;
|
|
|
- height: 44px;
|
|
|
- background: url("./../assets/st-img/satisfied.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
- .selIcon div span{
|
|
|
- /* display: block; */
|
|
|
- }
|
|
|
- .selIcon div .comm{
|
|
|
- background: url("./../assets/st-img/comm2.png") no-repeat;
|
|
|
- }
|
|
|
- .selIcon div .sfd{
|
|
|
- background: url("./../assets/st-img/Satisfied2.png") no-repeat;
|
|
|
- }
|
|
|
- .selIcon div .comm2{
|
|
|
- background: url("./../assets/st-img/comm.png")no-repeat;
|
|
|
- }
|
|
|
- .selIcon div .notSfd{
|
|
|
- background: url("./../assets/st-img/notSatisfied2.png")
|
|
|
- }
|
|
|
- .selIcon div .notSfd2{
|
|
|
- background: url("./../assets/st-img/notSatisfied.png")
|
|
|
- }
|
|
|
- .levMsg{
|
|
|
- padding-right: 30px;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
- .sure{
|
|
|
- text-align: center;
|
|
|
- background:linear-gradient(90deg,rgba(22,84,209,1) 0%,rgba(9,52,173,1) 100%);
|
|
|
- box-shadow:0px 3px 3px rgba(0,0,0,0.2);
|
|
|
- border-radius:10px;
|
|
|
- width: 100px;
|
|
|
- height: 48px;
|
|
|
- line-height: 48px;
|
|
|
- color: #fff;
|
|
|
- position: absolute;
|
|
|
- bottom:30px;
|
|
|
- left: 37%;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- /* 验证框 */
|
|
|
- .logo{
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
- .logo span{
|
|
|
- font-size: 38px;
|
|
|
- font-weight:bold;
|
|
|
- color: #5EA0F7;
|
|
|
- font-family:Microsoft YaHei;
|
|
|
- }
|
|
|
- .logo span:nth-child(1){
|
|
|
- color: #F04992;
|
|
|
- }
|
|
|
- .formBox{
|
|
|
- padding:0 27px 0 0;
|
|
|
- }
|
|
|
- .formBox .el-input{
|
|
|
- margin-bottom: 21px;
|
|
|
- }
|
|
|
- .formBox .phone .el-input,.formBox .email .el-input{
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
- .formBox .phone,.formBox .email{
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
- .vertion {
|
|
|
- vertical-align: middle;
|
|
|
- /* margin-bottom: 28px; */
|
|
|
- }
|
|
|
- .vertion .el-input{
|
|
|
- width: 250px;
|
|
|
- margin-right: 15px;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
- .vertion span{
|
|
|
- display: inline-block;
|
|
|
- width: 128px;
|
|
|
- height: 40px;;
|
|
|
- vertical-align: middle;
|
|
|
- background:rgba(241,225,224,1);
|
|
|
- }
|
|
|
- .formBox .sure{
|
|
|
- bottom: 21px;
|
|
|
- }
|
|
|
- .el-card__body .tit{
|
|
|
- line-height: 25px;
|
|
|
- }
|
|
|
- .chatting .el-button{
|
|
|
- border: none;
|
|
|
- padding: 0;
|
|
|
- border-radius: 0
|
|
|
- }
|
|
|
- .emoticon{
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
- .pointer{
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .ly:hover{
|
|
|
- border-bottom: 1px solid #5EA0F7;
|
|
|
- /* 高亮效果 */
|
|
|
- filter: brightness(0.9);
|
|
|
- }
|
|
|
- .gl:hover{
|
|
|
- filter: brightness(0.9);
|
|
|
- }
|
|
|
- .seek:hover{
|
|
|
- background: #860c60
|
|
|
- }
|
|
|
- .sendCol{
|
|
|
- background: linear-gradient(90deg,rgba(22,84,209,1) 0%,rgba(9,52,173,1) 100%);
|
|
|
- }
|
|
|
- .netSendCol{
|
|
|
- cursor: not-allowed;
|
|
|
- }
|
|
|
- /* 修改滚动条 */
|
|
|
- ::-webkit-scrollbar-button{
|
|
|
- background: transparent;
|
|
|
- border: 0;
|
|
|
- }
|
|
|
- /* 顶部三个图标 */
|
|
|
- .imgBox i{
|
|
|
- display: inline-block;
|
|
|
- width: 25px;
|
|
|
- height: 25px;
|
|
|
- margin-right: 20px;
|
|
|
- background: url("./../assets/st-img/pj.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
- .imgBox .sy{
|
|
|
- background: url("./../assets/st-img/sy.png") no-repeat;
|
|
|
- }
|
|
|
- .imgBox .sq{
|
|
|
- background: url("./../assets/st-img/sq.png") no-repeat;
|
|
|
- }
|
|
|
- /* .sc:hover{
|
|
|
- background: url("./../assets/st-img/pjhover.png") no-repeat;
|
|
|
- }
|
|
|
- .sy:hover{
|
|
|
- background: url("./../assets/st-img/sy2.png")no-repeat;
|
|
|
- }
|
|
|
- .sq:hover{
|
|
|
- background: url("./../assets/st-img/sq2.png") no-repeat;
|
|
|
- } */
|
|
|
- i.scActy{
|
|
|
- background: #1654D1 url("./../assets/st-img/pjhover.png") no-repeat;
|
|
|
- width: 33px;
|
|
|
- height: 33px;
|
|
|
- background-position: 5px;
|
|
|
- }
|
|
|
- /* .imgBox .syActy{
|
|
|
- background:#1654D1 url("./../assets/st-img/jzsy.png") no-repeat;
|
|
|
- width: 33px;
|
|
|
- height: 33px;
|
|
|
- background-position: 5px;
|
|
|
- }
|
|
|
- .imgBox .sqActy{
|
|
|
- background: #1654D1 url("./../assets/st-img/sq2.png") no-repeat;
|
|
|
- width: 33px;
|
|
|
- height: 33px;
|
|
|
- transform: rotate(180deg);
|
|
|
- background-position: 5px;
|
|
|
- } */
|
|
|
- .tips{
|
|
|
- font-size: 12px;
|
|
|
- color: #F04992;
|
|
|
- }
|
|
|
-#main{
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-.retract{
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 225px;
|
|
|
-}
|
|
|
+ .chatBox {
|
|
|
+ width: 700px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-header {
|
|
|
+ background: linear-gradient(90deg, rgba(22, 84, 209, 1) 0%, rgba(9, 52, 173, 1) 100%);
|
|
|
+ box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ .tit {
|
|
|
+ height: 100%;
|
|
|
+ line-height: 80px;
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-col span {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgBox {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgBox img {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgBox img:nth-last-child(1) {
|
|
|
+ margin-right: 0
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-main {
|
|
|
+ background: #fff;
|
|
|
+ width: 63%;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-aside {
|
|
|
+ background: #F5F5F5;
|
|
|
+ width: 37%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cationer, .artificial {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ /* align-items: center; */
|
|
|
+ }
|
|
|
+
|
|
|
+ .rt {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: inherit;
|
|
|
+ }
|
|
|
+
|
|
|
+ .artificial {
|
|
|
+ /* width: 150px; */
|
|
|
+ /* padding:0 20px; */
|
|
|
+ margin-top: 23px;
|
|
|
+ margin-bottom: 9px;
|
|
|
+ vertical-align: middle;
|
|
|
+ /* flex-direction: column;*/
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .infor div {
|
|
|
+ margin-bottom: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .infor div span, .autograph span {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ .infor div span:nth-child(2), .autograph span:nth-child(2) {
|
|
|
+ color: #666666;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .headPortrait {
|
|
|
+ width: 46%;
|
|
|
+ height: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .headPortrait img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .autograph {
|
|
|
+ margin-bottom: 11px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .advent {
|
|
|
+ border-top: 1px solid #DDDDDD;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .advent img {
|
|
|
+ width: 100%;
|
|
|
+ height: 350px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pd {
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pd20 {
|
|
|
+ padding: 0 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 会话 */
|
|
|
+ .conversationBox {
|
|
|
+ margin-top: 13px;
|
|
|
+ margin-bottom: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timer {
|
|
|
+ text-align: center;
|
|
|
+ margin: 10px 0;
|
|
|
+ color: #999999;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .headImg {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ margin-right: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .headImg img {
|
|
|
+ display: inline-block;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .conversation .cont, .customer .cont {
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 9px 8px 12px 10px;
|
|
|
+ display: inline-block;
|
|
|
+ border: 1px solid rgba(223, 223, 223, 1);
|
|
|
+ border-radius: 5px;
|
|
|
+ position: relative;
|
|
|
+ max-width: 270px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left::after {
|
|
|
+ position: absolute;
|
|
|
+ content: "";
|
|
|
+ display: inline-block;
|
|
|
+ left: -4px;
|
|
|
+ top: 5px;
|
|
|
+ width: 5px;
|
|
|
+ height: 9px;
|
|
|
+ background: #fff;
|
|
|
+ -webkit-transform: skewX(30deg);
|
|
|
+ transform: skewX(30deg);
|
|
|
+ /* z-index: -1; */
|
|
|
+ border-left: 1px solid #dfdfdf;
|
|
|
+ border-top: 1px solid #dfdfdf;
|
|
|
+ }
|
|
|
+
|
|
|
+ div.noafter::after {
|
|
|
+ content: '';
|
|
|
+ width: 0;
|
|
|
+ height: 0;;
|
|
|
+ display: inline;
|
|
|
+ position: relative;
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .conversation .cont div, .customer .cont div {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .customer {
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .customer .cont {
|
|
|
+ margin-right: 13px;
|
|
|
+ border: 0;
|
|
|
+ background: #5EA0F7;
|
|
|
+ max-width: 260px;
|
|
|
+ word-wrap: break-word;
|
|
|
+ word-break: normal;
|
|
|
+ }
|
|
|
+
|
|
|
+ .customer .cont div {
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right::after {
|
|
|
+ position: absolute;
|
|
|
+ content: "";
|
|
|
+ display: inline-block;
|
|
|
+ right: -3px;
|
|
|
+ top: 6px;
|
|
|
+ width: 5px;
|
|
|
+ height: 9px;
|
|
|
+ background: #5ea0f7;
|
|
|
+ -webkit-transform: skewX(-30deg);
|
|
|
+ transform: skewX(-30deg);
|
|
|
+ border-left: 1px solid #5ea0f7;
|
|
|
+ border-top: 1px solid #5ea0f7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .col {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .change {
|
|
|
+ color: #5ea0f7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .questionList, .changeService {
|
|
|
+ margin: 10px;
|
|
|
+ border: 1px solid rgba(223, 223, 223, 1);
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .questionList div, .changeService div {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ padding-left: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .questionList div span {
|
|
|
+ color: #5EA0F7;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .questionList section:nth-child(odd), .changeService div:nth-child(odd) {
|
|
|
+ background: #F6F6F6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .changeService div span {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .changeService div span:nth-child(1) {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .col6 {
|
|
|
+ color: #666666 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .colE5 {
|
|
|
+ color: #5EA0F7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .promptBox {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ height: 26px;
|
|
|
+ margin: 10px 0 10px;
|
|
|
+ /* line-height: 26px; */
|
|
|
+ }
|
|
|
+
|
|
|
+ .promptBoxH {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ height: 50px;
|
|
|
+ margin: 10px 0 10px;
|
|
|
+ /* line-height: 26px; */
|
|
|
+ }
|
|
|
+
|
|
|
+ .prompt {
|
|
|
+ line-height: 25px;
|
|
|
+ text-align: center;
|
|
|
+ background: #DDDDDD;
|
|
|
+ border-radius: 30px;
|
|
|
+ width: 140px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .help {
|
|
|
+ width: 260px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .help .prompt {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 评论 */
|
|
|
+ .evaluate {
|
|
|
+ height: 101px;
|
|
|
+ padding: 19px 0 16px;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ border: 1px solid rgba(223, 223, 223, 1);
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-top: 15px;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .evaluate span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nopd {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .evaluate .btn {
|
|
|
+ display: block;
|
|
|
+ background: #F04992;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-top: 10px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ width: 100px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 16px;
|
|
|
+ left: 35%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 聊天框 */
|
|
|
+ .chatting {
|
|
|
+ width: 100%;
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.05);
|
|
|
+ height: 100px;
|
|
|
+ padding: 10px 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .informationBox {
|
|
|
+ height: 500px;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .expression, .photo {
|
|
|
+ display: inline-block;
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ background: url("./../assets/st-img/expression.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-right: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .expression:hover {
|
|
|
+ background: url("./../assets/st-img/expressionHover.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .photo {
|
|
|
+ background: url("./../assets/st-img/photo.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .photo:hover {
|
|
|
+ background: url("./../assets/st-img/photoHover.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ textarea {
|
|
|
+ height: 30px;
|
|
|
+ width: 300px;
|
|
|
+ border: 0;
|
|
|
+ -webkit-user-select: auto;
|
|
|
+ user-select: auto;
|
|
|
+ -o-user-select: auto;
|
|
|
+ -ms-user-select: auto;
|
|
|
+ resize: none;
|
|
|
+ outline: none;
|
|
|
+ padding-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sendOut {
|
|
|
+ width: 80px;
|
|
|
+ height: 44px;
|
|
|
+ line-height: 40px;
|
|
|
+ border: 1px solid rgba(221, 221, 221, 1);
|
|
|
+ border-radius: 5px;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sendOut span {
|
|
|
+ color: #CCCCCC;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chattingBox {
|
|
|
+ margin-top: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 评论弹框 */
|
|
|
+ .zzBox {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(0, 0, 0, 0.3)
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-card, .proving {
|
|
|
+ width: 494px;
|
|
|
+ height: 429px;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ z-index: 999;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 20px 20px 30px 50px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .proving {
|
|
|
+ padding: 20px 20px 30px 47px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* .close{
|
|
|
+ text-align: right;
|
|
|
+ cursor: pointer;
|
|
|
+ } */
|
|
|
+
|
|
|
+ /* .close i{
|
|
|
+ display: inline-block;
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ background: url("./../assets/st-img/close.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ } */
|
|
|
+ .box-card .tit {
|
|
|
+ text-align: center;
|
|
|
+ padding-right: 65px;
|
|
|
+ margin-bottom: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-card .tit span {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .selIcon {
|
|
|
+ padding-right: 30px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .selIcon div {
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .selIcon div i {
|
|
|
+ display: block;
|
|
|
+ width: 44px;
|
|
|
+ height: 44px;
|
|
|
+ background: url("./../assets/st-img/satisfied.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .selIcon div span {
|
|
|
+ /* display: block; */
|
|
|
+ }
|
|
|
+
|
|
|
+ .selIcon div .comm {
|
|
|
+ background: url("./../assets/st-img/comm2.png") no-repeat;
|
|
|
+ }
|
|
|
+
|
|
|
+ .selIcon div .sfd {
|
|
|
+ background: url("./../assets/st-img/Satisfied2.png") no-repeat;
|
|
|
+ }
|
|
|
+
|
|
|
+ .selIcon div .comm2 {
|
|
|
+ background: url("./../assets/st-img/comm.png") no-repeat;
|
|
|
+ }
|
|
|
+
|
|
|
+ .selIcon div .notSfd {
|
|
|
+ background: url("./../assets/st-img/notSatisfied2.png")
|
|
|
+ }
|
|
|
+
|
|
|
+ .selIcon div .notSfd2 {
|
|
|
+ background: url("./../assets/st-img/notSatisfied.png")
|
|
|
+ }
|
|
|
+
|
|
|
+ .levMsg {
|
|
|
+ padding-right: 30px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sure {
|
|
|
+ text-align: center;
|
|
|
+ background: linear-gradient(90deg, rgba(22, 84, 209, 1) 0%, rgba(9, 52, 173, 1) 100%);
|
|
|
+ box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
|
|
|
+ border-radius: 10px;
|
|
|
+ width: 100px;
|
|
|
+ height: 48px;
|
|
|
+ line-height: 48px;
|
|
|
+ color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 30px;
|
|
|
+ left: 37%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 验证框 */
|
|
|
+ .logo {
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo span {
|
|
|
+ font-size: 38px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #5EA0F7;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo span:nth-child(1) {
|
|
|
+ color: #F04992;
|
|
|
+ }
|
|
|
+
|
|
|
+ .formBox {
|
|
|
+ padding: 0 27px 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .formBox .el-input {
|
|
|
+ margin-bottom: 21px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .formBox .phone .el-input, .formBox .email .el-input {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .formBox .phone, .formBox .email {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .vertion {
|
|
|
+ vertical-align: middle;
|
|
|
+ /* margin-bottom: 28px; */
|
|
|
+ }
|
|
|
+
|
|
|
+ .vertion .el-input {
|
|
|
+ width: 250px;
|
|
|
+ margin-right: 15px;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .vertion span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 128px;
|
|
|
+ height: 40px;;
|
|
|
+ vertical-align: middle;
|
|
|
+ background: rgba(241, 225, 224, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .formBox .sure {
|
|
|
+ bottom: 21px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-card__body .tit {
|
|
|
+ line-height: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chatting .el-button {
|
|
|
+ border: none;
|
|
|
+ padding: 0;
|
|
|
+ border-radius: 0
|
|
|
+ }
|
|
|
+
|
|
|
+ .emoticon {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pointer {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ly:hover {
|
|
|
+ border-bottom: 1px solid #5EA0F7;
|
|
|
+ /* 高亮效果 */
|
|
|
+ filter: brightness(0.9);
|
|
|
+ }
|
|
|
+
|
|
|
+ .gl:hover {
|
|
|
+ filter: brightness(0.9);
|
|
|
+ }
|
|
|
+
|
|
|
+ .seek:hover {
|
|
|
+ background: #860c60
|
|
|
+ }
|
|
|
+
|
|
|
+ .sendCol {
|
|
|
+ background: linear-gradient(90deg, rgba(22, 84, 209, 1) 0%, rgba(9, 52, 173, 1) 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .netSendCol {
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 修改滚动条 */
|
|
|
+ ::-webkit-scrollbar-button {
|
|
|
+ background: transparent;
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 顶部三个图标 */
|
|
|
+ .imgBox i {
|
|
|
+ display: inline-block;
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ margin-right: 20px;
|
|
|
+ background: url("./../assets/st-img/pj.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgBox .sy {
|
|
|
+ background: url("./../assets/st-img/sy.png") no-repeat;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgBox .sq {
|
|
|
+ background: url("./../assets/st-img/sq.png") no-repeat;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* .sc:hover{
|
|
|
+ background: url("./../assets/st-img/pjhover.png") no-repeat;
|
|
|
+ }
|
|
|
+ .sy:hover{
|
|
|
+ background: url("./../assets/st-img/sy2.png")no-repeat;
|
|
|
+ }
|
|
|
+ .sq:hover{
|
|
|
+ background: url("./../assets/st-img/sq2.png") no-repeat;
|
|
|
+ } */
|
|
|
+ i.scActy {
|
|
|
+ background: #1654D1 url("./../assets/st-img/pjhover.png") no-repeat;
|
|
|
+ width: 33px;
|
|
|
+ height: 33px;
|
|
|
+ background-position: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* .imgBox .syActy{
|
|
|
+ background:#1654D1 url("./../assets/st-img/jzsy.png") no-repeat;
|
|
|
+ width: 33px;
|
|
|
+ height: 33px;
|
|
|
+ background-position: 5px;
|
|
|
+ }
|
|
|
+ .imgBox .sqActy{
|
|
|
+ background: #1654D1 url("./../assets/st-img/sq2.png") no-repeat;
|
|
|
+ width: 33px;
|
|
|
+ height: 33px;
|
|
|
+ transform: rotate(180deg);
|
|
|
+ background-position: 5px;
|
|
|
+ } */
|
|
|
+ .tips {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #F04992;
|
|
|
+ }
|
|
|
+
|
|
|
+ #main {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .retract {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 225px;
|
|
|
+ }
|
|
|
</style>
|
