<template>
<div>
<div style="margin: 20px 0">
<el-button @click="showWin = !showWin" size="mini" type="primary" plain>
{{ showWin ? '关闭' : '打开' }}会话列表
</el-button>
<el-button @click="showRightBox = !showRightBox" size="mini" type="danger" plain>
{{ showRightBox ? '关闭' : '打开' }}右侧组件
</el-button>
<el-button @click="Rightopen = !Rightopen" size="mini" type="success" plain>
切换:{{ Rightopen ? '公告通知' : '快速回复' }}-组件
</el-button>
</div>
<JwChat-index
ref="jwChat"
v-model="inputMsg"
:taleList="taleList"
:scrollType="scrollType"
:toolConfig="tool"
:placeholder="placeholder"
:config="config"
:winBarConfig="winBarConfig"
:showRightBox="showRightBox"
@enter="bindEnter"
@clickTalk="talkEvent"
>
<JwChat-talk v-if="Rightopen" class="rightSlot" :Talelist="talk" :config="quickConfig" @event="bindTalk" />
<JwChat-rightbox v-else class="rightSlot" :config="rightConfig" @click="rightClick" />
<template slot="tools">
<div style="width: 20rem; text-align: right" @click="toolEvent(12)">
<JwChat-icon type="icon-lishi" title="自定义" />
</div>
</template>
</JwChat-index>
</div>
</template>
<script>
export default {
data() {
return {
scrollType: 'scroll', // scroll noroll 俩种类型 scroll (滚动到最新消息) noroll (停留当期位置)
placeholder: '',
inputMsg: '',
taleList: [],
tool: {
callback: this.toolEvent,
},
//当前聊天窗口
config: {
img: '../image/cover.png',
name: 'JwChat',
dept: '最简单、最便捷11111',
callback: this.bindCover,
historyConfig: {
show: true,
tip: '加载更多提示框,可以直接使用组件的1234',
callback: this.bindLoadHistory,
},
//快捷回复
quickList: [
{ text: '这里是jwchat，您想了解什么问题。', id: 3 },
{ text: 'jwchat是最好的聊天组件', id: 4 },
{ text: '谁将烟焚散，散了纵横的牵绊；听弦断，断那
三千痴缠。', id: 5 },
{ text: '长夏逝去。山野间的初秋悄然涉足。', id: 6 },
{ text: '江南风骨，天水成碧，天教心愿与身违。', id: 7 },
{ text: '总在不经意的年生。回首彼岸。纵然发现光景绵长。', id: 8 },
{ text: '外面的烟花奋力的燃着，屋里的人激情的
说着情话', id: 10 },
{ text: '假如你是云，我就是雨，一生相伴，
风风雨雨；', id: 11 },
{
text: '即使泪水在眼中打转，我依旧可以笑的很美，这是你学不来的坚强。',
id: 12,
},
{
text: ' 因为不知来生来世会不会遇到你，所以今生今世我会加倍爱你。',
id: 13,
},
],
maxlength: 30,
},
//公告信息栏
rightConfig: {
listTip: '人员列表-在线',
notice: '【公告】这是一款高度自由的聊天组件，基于AVue、Vue、Element-ui开发。点个赞再走吧 ',
filterTip: '好友过滤',
list: [
{
name: 'JwChat1',
img: '../image/cover.png',
id: 1,
},
{
id: 2,
name: 'JwChat',
img: 'image/three.jpeg',
},
{
id: 3,
name: 'JwChat',
img: 'image/three.jpeg',
},
{
id: 4,
name: '留恋人间不羡仙',
img: 'image/one.jpeg',
},
{
name: '只盼流星不盼雨',
img: 'image/two.jpeg',
},
],
},
//快捷回复
talk: ['快捷回复1', '快捷回复2', '快捷回复3', '快捷回复4', '快捷回复5', '快捷回复6'],
quickConfig: {
nav: ['快捷回复', '超级回复'],
showAdd: true,
maxlength: 200,
showHeader: true,
showDeleteBtn: true,
},
//右侧快捷栏开关
showRightBox: false,
showWin: false,
//左侧快捷栏
winBarConfig: {
active: 'win00',
width: '180px',
listHeight: '60px',
list: [
{
id: 'win00',
img: '../image/two.jpeg',
name: 'JwChat',
dept: '最简单、最便捷',
readNum: 1,
},
{
id: 'win01',
img: '@/assets/wx/cover.png',
name: '阳光明媚爱万物',
dept: '沙拉黑油',
readNum: 12,
},
{
id: 'win02',
img: 'image/two.jpeg',
name: '只盼流星不盼雨',
dept: '最后
说的话',
readNum: 12,
},
{
id: 'win03',
img: 'image/one.jpeg',
name: '留恋人间不羡仙',
dept: '这里可以放万物',
readNum: 0,
},
{
id: 'win04',
img: 'image/three.jpeg',
name: '阳光明媚爱万物',
dept: '官方客服',
},
{
id: 'win05',
img: 'image/three.jpeg',
name: '测试',
dept: '官方客服',
},
],
callback: this.bindWinBar,
},
}
},
methods: {
/**
* @description: 点击加载更多的回调函数
* @param {*}
* @return {*}
*/
async bindLoadHistory() {
const history = new Array(3).fill().map((i, j) => {
return {
date: '2020/05/20 23:19:07',
text: { text: j + new Date() },
mine: false,
name: 'JwChat',
img: 'image/three.jpeg',
}
})
let list = history.concat(this.taleList)
this.taleList = list
console.log('加载历史', list, history)
// 加载完成后通知组件关闭加载动画
this.config.historyConfig.tip = '加载完成'
this.$nextTick(() => {
this.$refs.jwChat.finishPullDown()
})
},
bindEnter(e) {
console.log(e)
const msg = this.inputMsg
if (!msg) return
const msgObj = {
date: '2020/05/20 23:19:07',
text: { text: msg },
mine: true,
name: 'JwChat',
img: '../image/three.jpeg',
}
this.list.push(msgObj)
},
toolEvent(type, obj) {
console.log('tools', type, obj)
},
talkEvent(play) {
console.log(play)
},
rightClick(type) {
console.log('rigth', type)
},
bindTalk(play) {
console.log('talk', play)
const { key, value } = play
if (key === 'navIndex')
this.talk = [1, 1, 1, 1, 1, 1, 1, 1].reduce((p) => {
p.push('随机修改颜色 #' + Math.random().toString(16).substr(-6))
return p
}, [])
if (key === 'select') {
this.inputMsg = value
this.bindEnter()
}
if (key === 'delIndex') {
this.talk.splice(value, 1)
}
},
},
mounted() {
const img = 'https://www.baidu.com/img/flexible/logo/pc/result.png'
const list = [
{
date: '2020/04/25 21:19:07',
text: { text: '起床不' },
mine: false,
name: '留恋人间不羡仙',
img: '../image/one.jpeg',
},
{
date: '2020/04/25 21:19:07',
text: { text: "<audio data-src='https://www.w3school.com.cn/i/horse.mp3'/>" },
mine: false,
name: '只盼流星不盼雨',
img: '../image/two.jpeg',
},
{
date: '2020/04/25 21:19:07',
text: { text: "<img data-src='" + img + "'/>" },
mine: false,
name: '只盼流星不盼雨',
img: '../image/two.jpeg',
},
{
date: '2020/04/25 21:19:07',
text: { text: "<img data-src='../image/three.jpeg'/>" },
mine: false,
name: '只盼流星不盼雨',
img: '../image/two.jpeg',
},
{
date: '2020/04/16 21:19:07',
text: { text: "<video data-src='https://www.w3school.com.cn/i/movie.mp4' controls='controls' />" },
mine: false,
name: 'JwChat',
img: '../image/three.jpeg',
},
{
date: '2021/03/02 13:14:21',
mine: false,
name: '留恋人间不羡仙',
img: '../image/one.jpeg',
text: {
system: {
title: '在接入人工前，智能助手将为您首次应答。',
subtitle: '猜您想问:',
content: [
{
id: `system1`,
text: '组件如何使用',
},
{
id: `system2`,
text: '组件参数在哪里查看',
},
{
id: 'system',
text: '我可不可把组件用在商业',
},
],
},
},
},
{
date: '2020/04/25 21:19:07',
text: {
text: "<i class='el-icon-document-checked' style='font-size:2rem;'/>",
subLink: {
text: 'a.txt',
prop: {
underline: false,
},
},
},
mine: false,
name: '留恋人间不羡仙',
img: '../image/one.jpeg',
},
]
this.taleList = list
},
}
</script>
修改以上代码，思路如下
1.添加import { listMessage, addMessage } from '@/api/mod/nkimxx'
可以通过listMessage获取fromId为消息发
送ID，toId为消息接
送ID，sendTime为消息发
送时间，content为消息内容
addMessage 为消息发
送代码
2.然后添加import { getUserProfile, listUser } from '@/api/system/user'
listUser 获取用户信息
通过userID=fromId、userID=toId，提取用户的头像avatar=以上代码的img，用户姓名nickName=以上代码的name，部门dept.deptName=以上代码的dept
getUserProfile,可以获取当前登录用户信息
资深股民分享投资经验，强调自我研究的重要性，并对民生银行的投资价值进行分析。提醒投资者要具备正确心态，谨慎入市。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
