<template>
<div class="box">
<div class="title">
<img src="" alt class="logo" />
<span class="title-hn">人工客服</span>
</div>
<div id="content" class="content">
<div v-for="(item,index) in info" :key="index">
<div class="info_r info_default" v-if="item.type == 'leftinfo'">
<span class="circle circle_r"></span>
<div class="con_r con_text">
<div>{{item.content}}</div>
<div v-for="(item2,index) in item.question" :key="index">
<div class="con_que" @click="clickRobot(item2.content,item2.id)">
<div class="czkj-question-msg">
{{item2.index}}
{{item2.content}}
</div>
</div>
</div>
</div>
<div class="time_r">{{item.time}}</div>
</div>
<div class="info_l" v-if="item.type == 'rightinfo'">
<div class="con_r con_text">
<span class="con_l">{{item.content}}</span>
<span class="circle circle_l">
<img src class="pic_l" />
</span>
</div>
<div class="time_l">{{item.time}}</div>
</div>
</div>
</div>
<div class="setproblem">
<textarea
placeholder="请输入您的问题..."
style="height: 68px;width: 100%;resize:none;padding-right:80px;outline: none;border-color:#ccc;border-radius:5px;"
id="text"
v-model="customerText"
@keyup.enter="sentMsg()"
></textarea>
<el-button @click="sentMsg()" class="buttonsend">
<span style="vertical-align: 4px;">发送</span>
</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
customerText: "",
info: [
{
type: 'leftinfo',
time: this.getTodayTime(),
name: "robot",
content:"您好，欢迎使用!",
question: [
{ id: 1, content: "客户资料完善后是由谁来审批", index: 1 },
{ id: 2, content: "客户资料审批一直不通过", index: 2 },
{ id: 3, content: "客户资料审批需要多长时间", index: 3 },
{id: 4,content: "注册网站时需要一次填写完所有的客户资料吗",index: 4 },
{ id: 5, content: "注册时使用的手机号变更怎么办", index: 5 }
]
}
],
timer: null,
robotQuestion: [
{ id: 1, content: "客户资料完善后是由谁来审批", index: 1 },
{ id: 2, content: "客户资料审批一直不通过", index: 2 },
{ id: 3, content: "客户资料审批需要多长时间", index: 3 },
{ d: 4, content: "注册网站时需要一次填写完所有的客户资料吗", index: 4 },
{ id: 5, content: "注册时使用的手机号变更怎么办", index: 5 },
],
robotAnswer: [
{ id: 1,content:"答案客户资料完善后是由谁来审批,答案客户资料完善后是由谁来审批,答案客户资料完善后是由谁来审批",index: 1},
{ id: 2, content: "测试", index: 2 },
{ id: 3, content: "测试", index: 3 },
{ id: 4,content: "3333333",index: 4 },
{ id: 5, content: "44444444", index: 5 },
]
}
},
created() {
this.showTimer();
},
methods: {
// 用户发送消息
sentMsg() {
clearTimeout(this.timer)
this.showTimer()
let text = this.customerText.trim()
if (text != '') {
var obj = {
type: 'rightinfo',
time: this.getTodayTime(),
content: text,
}
this.info.push(obj)
this.appendRobotMsg(this.customerText)
this.customerText = ''
this.$nextTick(() => {
var contentHeight = document.getElementById('content')
contentHeight.scrollTop = contentHeight.scrollHeight
})
}
},
// 机器人回答消息
appendRobotMsg(text) {
clearTimeout(this.timer)
this.showTimer()
text = text.trim()
let answerText = ''
let flag;
for (let i = 0; i < this.robotAnswer.length; i++) {
if (this.robotAnswer[i].content.indexOf(text) != -1) {
flag = true
answerText = this.robotAnswer[i].content
break
}
}
if (flag) {
let obj = {
type: "leftinfo",
time: this.getTodayTime(),
name: "robot",
content: answerText,
question: [],
}
this.info.push(obj)
} else {
answerText = "您可能想问："
let obj = {
type: 'leftinfo',
time: this.getTodayTime(),
name: "robot",
content: answerText,
question: this.robotQuestion,
}
this.info.push(obj)
}
this.$nextTick(() => {
var contentHeight = document.getElementById('content')
contentHeight.scrollTop = contentHeight.scrollHeight
})
},
sentMsgById(val, id) {
clearTimeout(this.timer)
this.showTimer()
let robotById = this.robotAnswer.filter((item) => {
return item.id == id;
})
let obj_l = {
type: 'leftinfo',
time: this.getTodayTime(),
name: 'robot',
content: robotById[0].content,
question: [],
};
let obj_r = {
type: 'rightinfo',
time: this.getTodayTime(),
name: 'robot',
content: val,
question: [],
};
this.info.push(obj_r)
this.info.push(obj_l)
this.$nextTick(() => {
var contentHeight = document.getElementById('content')
contentHeight.scrollTop = contentHeight.scrollHeight
})
},
// 点击机器人的单个问题
clickRobot(val, id) {
this.sentMsgById(val, id)
},
// 结束语
endMsg() {
let happyEnding = {
type: 'leftinfo',
time: this.getTodayTime(),
content: "退出",
question: [],
};
this.info.push(happyEnding)
this.$nextTick(() => {
var contentHeight = document.getElementById('content')
contentHeight.scrollTop = contentHeight.scrollHeight
})
},
showTimer() {
this.timer = setTimeout(this.endMsg, 1000*60)
},
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
}
}
}
</script>
<style scoped>
.box {
width: 100%;
height: 500px;
background-color: #fafafa;
position: relative;
padding: 20px;
}
#content {
height: 340px;
overflow-y: scroll;
font-size: 14px;
width: 100%;
}
.circle {
display: inline-block;
width: 34px;
height: 34px;
border-radius: 50%;
background-color: #eff1f3;
}
.con_text {
color: #333;
margin-bottom: 5px;
}
.con_que {
color: #1c88ff;
height: 30px;
line-height: 30px;
cursor: pointer;
}
.info_r {
position: relative;
}
.circle_r {
position: absolute;
left: 0%;
}
.pic_r {
width: 17px;
height: 17px;
margin: 8px;
}
.con_r {
display: inline-block;
width: 55%;
min-height: 55px;
background-color: #e2e2e2;
border-radius: 6px;
padding: 10px;
margin-left: 40px;
}
.time_r {
margin-left: 45px;
color: #999999;
font-size: 12px;
}
.info_l {
text-align: right;
color: #ffffff;
color: #3163C5;
margin-top: 10px;
}
.pic_l {
width: 13px;
height: 17px;
margin: 8px 10px;
}
.time_l {
margin-right: 45px;
color: #999999;
font-size: 12px;
margin-top: 5px;
}
.con_l {
display: inline-block;
width: 220px;
min-height: 51px;
background-color: #3163C5;
border-radius: 6px;
padding: 10px;
text-align: left;
color: #fff;
margin-right: 5px;
}
#question {
cursor: pointer;
}
.setproblem {
width: 90%;
height: 68px;
background-color: #ffffff;
position: relative;
margin-top: 20px;
padding-bottom: 20px;
}
.setproblem textarea {
margin-bottom: 10px;
color: #999999;
padding: 10px;
box-sizing: border-box;
}
.buttonsend {
background: #3163C5;
opacity: 1;
border-radius: 4px;
font-size: 10px;
color: #ffffff;
position: absolute;
right: -10%;
top: 30%;
cursor: pointer;
border: none;
}
.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: #3163C5;
}
</style>
文章来源地址https://www.toymoban.com/news/detail-677492.html
文章来源：https://www.toymoban.com/news/detail-677492.html
到了这里，关于vue + element UI 制作问答机器人的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
