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-row :gutter="20">
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div class="box_l">
|
<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">
|
<div class="user_item_l">
|
||||||
<el-avatar
|
<el-avatar
|
||||||
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
|
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
|
||||||
@ -21,18 +27,59 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="18">
|
<el-col :span="18">
|
||||||
<div class="box_r">
|
<div class="box_r">
|
||||||
<div class="content">
|
<div class="box" v-if="!activeId">
|
||||||
123
|
<div class="famous-box">
|
||||||
|
<img src="~@/assets/image/chat.png" width="300" />
|
||||||
|
<p>
|
||||||
|
不是井里没有水，而是你挖的不够深<br />
|
||||||
|
不是成功来得慢，而是你努力的不够多<br />
|
||||||
|
加油吧！ ......
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dialogue">
|
<div class="box" v-else>
|
||||||
<el-input
|
<div id="content" class="content">
|
||||||
type="textarea"
|
<div v-for="(item, index) in info" :key="index">
|
||||||
:autosize="{ minRows: 4, maxRows: 4 }"
|
<div class="info_r info_default" v-if="item.type == 'leftinfo'">
|
||||||
placeholder="请输入内容"
|
<span class="circle circle_r"></span>
|
||||||
v-model="textarea"
|
<div class="con_r con_text">
|
||||||
>
|
<div>{{ item.content }}</div>
|
||||||
</el-input>
|
<div v-for="(item2, index) in item.question" :key="index">
|
||||||
<button @click="send">确定</button>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
@ -44,6 +91,45 @@
|
|||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
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: '',
|
textarea: '',
|
||||||
path: 'ws://192.168.0.125:1919/webStock/' + this.$store.state.user.userId,
|
path: 'ws://192.168.0.125:1919/webStock/' + this.$store.state.user.userId,
|
||||||
socket: ''
|
socket: ''
|
||||||
@ -53,7 +139,97 @@ export default {
|
|||||||
// 初始化
|
// 初始化
|
||||||
this.init();
|
this.init();
|
||||||
},
|
},
|
||||||
|
created() {},
|
||||||
methods: {
|
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() {
|
init: function() {
|
||||||
if (typeof WebSocket === 'undefined') {
|
if (typeof WebSocket === 'undefined') {
|
||||||
alert('您的浏览器不支持socket');
|
alert('您的浏览器不支持socket');
|
||||||
@ -109,7 +285,7 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 10px 0;
|
padding: 10px 10px;
|
||||||
border-bottom: 1px solid #ccc;
|
border-bottom: 1px solid #ccc;
|
||||||
.user_item_l {
|
.user_item_l {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -133,26 +309,172 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.box_r {
|
.box_r {
|
||||||
display: flex;
|
height: 100%;
|
||||||
flex-direction: column;
|
.box {
|
||||||
justify-content: space-between;
|
width: 100%;
|
||||||
background-color: #fff;
|
/* width: 680px; */
|
||||||
padding: 10px 20px;
|
// height: 500px;
|
||||||
min-height: 100%;
|
height: 100%;
|
||||||
.content {
|
background-color: #fafafa;
|
||||||
flex: 1;
|
position: relative;
|
||||||
}
|
padding: 1.25rem;
|
||||||
.dialogue {
|
#content {
|
||||||
height: 150px;
|
height: 80%;
|
||||||
.el-input {
|
overflow-y: scroll;
|
||||||
height: 100%;
|
font-size: 14px;
|
||||||
/deep/.el-input--medium .el-input__inner {
|
width: 100%;
|
||||||
height: 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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user