vue实现在线客服功能（附完整代码） |
您所在的位置：网站首页 › 易聊客服系统常用语添加 › vue实现在线客服功能（附完整代码） |
vue实现在线客服功能（附完整代码）
|
公司需要在网站实现一个在线客服的功能，开始是用的jq实现的，但是！！！把代码拿到vue里使用的时候，Jq的事件一直没有办法触发，各种百度都没有结果然后就放弃了，最后找到一种很好的解决方法，完美实现了功能！！！还有感谢我的外援，哈哈哈哈哈，一直是我的后盾！！！！！！！！哈哈哈哈哈
以下为vue部分
主要是循环info里的数据，通过type来判断显示机器人还是用户。
用户发送消息后直接push进数组里即可
原生部分。对比之下还是vue更舒服一点。 
您好，欢迎使用网上营业厅，为保证账户安全，
在会话过程中请勿透露您的账号、密码等信息。
1
2
3
发 送
nHnSite.subServiceInit();
// nHnSite.initAbout();
window.onload = setWelcomeTime;
// 打开页面默认展示问候语添加时间
function setWelcomeTime() {
showTimer();
// 获取当前时间
var day = new Date();
let time = getTodayTime();
var commentLi = '' + time + '';
$('.info_default').append(commentLi);
// 获取当前登录的用户名称
let city = $('#cityChoice').text();
// 拆分为简称
let cityJc = city.split('销售');
console.log(cityJc)
cityShow = cityJc[0] + '销售智能客服';
$('.title-hn').text(cityShow);
}
// 发送消息
function sentMsg() {
clearTimeout(timer);
showTimer();
let time = getTodayTime();
let text = $('#text').val();
console.log(text)
var commentLi = '';
commentLi = '';
commentLi += '' + text + '';
commentLi += ' ';
commentLi += '' + time + '';
commentLi += '';
$('.content').append(commentLi);
$.ajax({
url: '/api/admin/reg/getNetInfo',
type: 'get',
contentType: "application/json; charset=utf-8",
success: function (res) {
console.log(res,'0000')
// checkNetInfo(resultData);
},
error: function (data) {
// var resultData = { "status": 200, "data": { "id": "1", "province": "BJ", "url": "://www.chngyx.com.cn", "provinceName": "北京" }, "rel": true }
// checkNetInfo(resultData);
}
});
// 发送过消息后将页面滚动到底部
var contentHeight = document.getElementById('content');
contentHeight.scrollTop = contentHeight.scrollHeight;
appendRobotMsg(text)
}
// 选中问题后再次发送消息
function selMsg(text) {
clearTimeout(timer);
showTimer();
let time = getTodayTime();
var commentLi = '';
commentLi = '';
commentLi += '' + text + '';
commentLi += '';
commentLi += '' + time + '';
commentLi += '';
$('.content').append(commentLi);
appendRobotMsg(text)
// 发送过消息后将页面滚动到底部
var contentHeight = document.getElementById('content');
contentHeight.scrollTop = contentHeight.scrollHeight;
}
// 键盘回车事件
$(document).keypress(function (e) {
if (e.keyCode == '13') {
sentMsg();
}
});
// 结束语
function endMsg() {
let time = getTodayTime();
var commentLi = '';
commentLi = '';
commentLi += '';
commentLi += '' + '借宿了' + '';
commentLi += '' + time + '';
commentLi += '';
$('.content').append(commentLi);
// 发送过消息后将页面滚动到底部
var contentHeight = document.getElementById('content');
contentHeight.scrollTop = contentHeight.scrollHeight;
}
function showTimer() {
console.log(000)
timer = setTimeout(endMsg, 5000 * 60);
}
//点击单个问答
$('.content').on('click', '.con_que', function (event) {
let text = $(event)[0].currentTarget.innerText;
console.log($(event))
selectAnswer(text)
// var dataSet = $(event)[0].currentTarget.dataset;
// var parent = $($(event)[0].currentTarget).parents('.czkj-msg');
// var flag = $(parent).data('choosed')
// selectAnswer(parent, dataSet.index, dataSet.questionid, flag)
})
//多个答案选择一个
function selectAnswer(text) {
// parent, index, questionId, flag
var questionObj = {}, parent = {}
// for (var i = 0; i < questionArr.length; i++) {
// for (var j = 0; j < questionArr[i].questionList.length; j++) {
// if (questionArr[i].questionList[j].questionId === questionId) {
// questionObj = questionArr[i].questionList[j]
// parent = questionArr[i]
// }
// }
// }
selMsg(text)
// sentMsg(questionObj.question)
// appendRobotMsg(questionObj, questionObj.answer, parent)
}
// 获取当前时间
function getTodayTime() {
// 获取当前时间
var day = new Date();
let seconds = day.getSeconds();
if (seconds < 10) {
seconds = "0" + seconds;
} else {
seconds = seconds;
}
let minutes = day.getMinutes();
if (minutes < 10) {
minutes = "0" + minutes;
} else {
minutes = minutes;
}
let time = day.getFullYear() + "-" + (day.getMonth() + 1) + "-" + day.getDate() + " " + day.getHours() + ":" + minutes + ":" + seconds;
return time
}
// 新增机器人回复
function appendRobotMsg(text) {
console.log(text)
// text = text.replace(/\n/g, '')
text = text.trim();
let time = getTodayTime();
// 输入内容为空时提示
var questionList = [{ msg: '问题1,好嘞啊啊啊啊啊', questionId: '1', }, { msg: '问题2：我真的好嘞啊', questionId: '2', }];
let title = '嘎嘎嘎嘎嘎过过嘎嘎嘎嘎嘎'
let commentLi;
if (text == '1') {
let time = getTodayTime()
var questions = ''
for (var i = 0; i < questionList.length; i++) {
questions += '' + questionList[i].msg + ''
}
commentLi = '' +
'' +
'' +
title + '' + questions + ''
+ '' + time + '' + ''
}else if (text == ''){
commentLi = '';
commentLi += '';
commentLi += '' + '说人话' + '';
commentLi += '' + time + '';
commentLi += '';
}else {
commentLi = '';
commentLi += '';
commentLi += '' + '这道题我不会换一个' + '';
commentLi += '' + time + '';
commentLi += '';
}
$('.content').append(commentLi);
$('#text').val('');
// 发送过消息后将页面滚动到底部
var contentHeight = document.getElementById('content');
contentHeight.scrollTop = contentHeight.scrollHeight;
}
样式
.main {
width: 100vw;
height: 100vh;
background:linear-gradient(180deg,rgba(149,179,212,1) 0%,rgba(74,131,194,1) 100%);
overflow: hidden;
}
.box {
width: 58%;
/* width: 680px; */
height: 500px;
background-color: #FAFAFA;
border-radius:10px;
margin:10vh auto;
position: relative;
}
.title{
width: 100%;
height: 10vh;
background-color: #FFFFFF;
border-radius:10px 10px 0 0 ;
}
.logo{
width: 50px;
height: 40px;
margin: 11px 0 0 25px;
}
.title .title-hn {
font-size: 25px;
color: #3F5267;
vertical-align: 10px;
}
.setproblem{
width: 80%;
height: 68px;
background-color: #FFFFFF;
border:1px solid rgba(221,221,221,1);
border-radius:2px;
position: absolute;
bottom: 10%;
left: 10%;
}
.setproblem textarea {
color:#999999;
padding: 10px;
box-sizing: border-box;
}
.setproblem button {
width:53px;
height:23px;
line-height: 23px;
background:rgba(28,136,255,1);
opacity:1;
border-radius:2px;
font-size: 10px;
color: #FFFFFF;
position: absolute;
right: 5%;
top: 30%;
cursor: pointer;
}
.content {
height: 300px;
overflow-y:scroll;
font-size: 14px;
}
.content .circle {
display: inline-block;
width: 34px;
height: 34px;
border-radius: 50%;
background-color: #EFF1F3;
}
.content .circle_r {
position: absolute;
left: 0%;
}
.content .circle_l {
vertical-align: -10px;
}
.content .info_r .pic_r{
width: 17px;
height: 17px;
margin: 8px;
}
.content .info_l .pic_l{
width: 13px;
height: 17px;
margin: 8px 10px;
}
.content .info_r{
margin-left: 20px;
margin-top: 15px;
position: relative;
}
.content .info_l{
text-align: right;
margin-right: 20px;
color: #FFFFFF;
margin-top: 10px;
}
.content .con_r{
display: inline-block;
/* max-width: 253px; */
width: 253px;
min-height: 55px;
/* min-height: 20px; */
background-color: #E3EAF2;
border-radius: 6px;
padding: 10px;
margin-left: 40px;
}
.content .con_text {
color: #333;
margin-bottom: 5px;
}
.content .con_que {
color: #1C88FF;
height: 30px;
line-height: 30px;
cursor: pointer;
}
.content .con_l {
display: inline-block;
width: 253px;
/* min-height: 20px; */
min-height: 51px;
background-color: #1C88FF;
border-radius: 6px;
padding: 10px;
text-align: left;
color: #fff;
margin-right: 5px;
}
.content .time_r {
margin-left: 45px;
color: #999999;
font-size: 12px;
}
.content .time_l {
margin-right: 45px;
color: #999999;
font-size: 12px;
margin-top: 5px;
}
#question {
cursor: pointer;
}
.czkj-item-title {
line-height: 25px;
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
margin-bottom: 5px;
}
.czkj-item-question {
cursor: pointer;
display: block;
padding: 8px;
position: relative;
border-bottom: 1px dashed #ccc;
line-height: 20px;
min-height: 20px;
overflow: hidden;
}
.czkj-question-msg {
float: left;
font-size: 14px;
color: #4aa4eb;
}
|
【本文地址】
今日新闻 |
推荐新闻 |