2
This commit is contained in:
熊丽君
BIN
src/assets/image/chat.png
Normal file
BIN
src/assets/image/chat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 151 KiB |
@ -3,7 +3,13 @@
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div class="box_l">
|
||||
<div class="user_item" v-for="item in 15" :key="item">
|
||||
<div
|
||||
class="user_item"
|
||||
v-for="item in 15"
|
||||
:key="item"
|
||||
@click="active(item)"
|
||||
:class="activeId === item ? 'active' : ''"
|
||||
>
|
||||
<div class="user_item_l">
|
||||
<el-avatar
|
||||
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
|
||||
@ -21,18 +27,59 @@
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<div class="box_r">
|
||||
<div class="content">
|
||||
123
|
||||
<div class="box" v-if="!activeId">
|
||||
<div class="famous-box">
|
||||
<img src="~@/assets/image/chat.png" width="300" />
|
||||
<p>
|
||||
不是井里没有水，而是你挖的不够深<br />
|
||||
不是成功来得慢，而是你努力的不够多<br />
|
||||
加油吧！ ......
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialogue">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 4, maxRows: 4 }"
|
||||
placeholder="请输入内容"
|
||||
v-model="textarea"
|
||||
>
|
||||
</el-input>
|
||||
<button @click="send">确定</button>
|
||||
<div class="box" v-else>
|
||||
<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">
|
||||
<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: 100%;width: 100%;resize:none;padding-right:125px;outline: none;border-color:#ccc;border-radius:5px;"
|
||||
id="text"
|
||||
v-model="customerText"
|
||||
@keyup.enter="sentMsg()"
|
||||
></textarea>
|
||||
<button @click="sentMsg()" class="setproblems">
|
||||
<span style="vertical-align: 4px;">发 送</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@ -44,6 +91,45 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeId: null,
|
||||
customerText: '',
|
||||
info: [
|
||||
// {
|
||||
// type: 'leftinfo',
|
||||
// time: this.getTodayTime(),
|
||||
// name: 'robot',
|
||||
// content: '',
|
||||
// question: []
|
||||
// }
|
||||
],
|
||||
timer: null,
|
||||
robotQuestion: [
|
||||
{ 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 }
|
||||
],
|
||||
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 }
|
||||
],
|
||||
textarea: '',
|
||||
path: 'ws://192.168.0.125:1919/webStock/' + this.$store.state.user.userId,
|
||||
socket: ''
|
||||
@ -53,7 +139,97 @@ export default {
|
||||
// 初始化
|
||||
this.init();
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
// 用户发送消息
|
||||
sentMsg() {
|
||||
clearTimeout(this.timer);
|
||||
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);
|
||||
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;
|
||||
});
|
||||
},
|
||||
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;
|
||||
},
|
||||
active(id) {
|
||||
this.activeId = id;
|
||||
},
|
||||
init: function() {
|
||||
if (typeof WebSocket === 'undefined') {
|
||||
alert('您的浏览器不支持socket');
|
||||
@ -109,7 +285,7 @@ export default {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
padding: 10px 10px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
.user_item_l {
|
||||
display: flex;
|
||||
@ -133,26 +309,172 @@ export default {
|
||||
}
|
||||
}
|
||||
.box_r {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
padding: 10px 20px;
|
||||
min-height: 100%;
|
||||
.content {
|
||||
flex: 1;
|
||||
}
|
||||
.dialogue {
|
||||
height: 150px;
|
||||
.el-input {
|
||||
height: 100%;
|
||||
/deep/.el-input--medium .el-input__inner {
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
.box {
|
||||
width: 100%;
|
||||
/* width: 680px; */
|
||||
// height: 500px;
|
||||
height: 100%;
|
||||
background-color: #fafafa;
|
||||
position: relative;
|
||||
padding: 1.25rem;
|
||||
#content {
|
||||
height: 80%;
|
||||
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;
|
||||
/* max-width: 253px; */
|
||||
width: 55%;
|
||||
min-height: 50px;
|
||||
line-height: 50px;
|
||||
/* min-height: 20px; */
|
||||
background-color: #e2e2e2;
|
||||
border-radius: 6px;
|
||||
padding: 0 10px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.time_r {
|
||||
margin-left: 45px;
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.info_l {
|
||||
text-align: right;
|
||||
// margin-right: 20px;
|
||||
color: #ffffff;
|
||||
color: #3163c5;
|
||||
margin-top: 10px;
|
||||
|
||||
// .circle_l {
|
||||
// // vertical-align: -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;
|
||||
min-width: 220px;
|
||||
max-width: 55%;
|
||||
min-height: 51px;
|
||||
line-height: 51px;
|
||||
background-color: #3163c5;
|
||||
border-radius: 6px;
|
||||
padding: 0 10px;
|
||||
text-align: left;
|
||||
color: #fff;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
#question {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.setproblem {
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
height: 17%;
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
}
|
||||
.setproblem textarea {
|
||||
color: #999999;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.setproblem button {
|
||||
width: 5.875rem;
|
||||
height: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
background: #3163c5;
|
||||
opacity: 1;
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
color: #ffffff;
|
||||
position: absolute;
|
||||
right: 2%;
|
||||
top: 50%;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// justify-content: space-between;
|
||||
// background-color: #fff;
|
||||
// padding: 10px 20px;
|
||||
// min-height: 100%;
|
||||
// .content {
|
||||
// flex: 1;
|
||||
// }
|
||||
// .dialogue {
|
||||
// height: 150px;
|
||||
// .el-input {
|
||||
// height: 100%;
|
||||
// /deep/.el-input--medium .el-input__inner {
|
||||
// height: 100%;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.active {
|
||||
background-color: paleturquoise;
|
||||
}
|
||||
.famous-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
font-size: 24px;
|
||||
p {
|
||||
width: 100%;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
color: #b9b4b4;
|
||||
margin-top: -30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user