添加聊天室功能
This commit is contained in:
parent
fe522cc3cb
commit
000cb4a55f
|
|
@ -14,7 +14,7 @@ module.exports = {
|
|||
// 代理列表, 是否开启代理通过[./dev.env.js]配置
|
||||
proxyTable: devEnv.OPEN_PROXY === false ? {} : {
|
||||
'/proxyApi': {
|
||||
target: "http://47.75.182.93:8090/sqx_fast/",
|
||||
target: "https://sausers.blxinchuang.com/sqx_fast/",
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
'^/proxyApi': ''
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import Vue from 'vue'
|
||||
|
||||
// const serverUrl = "https://admin.sjajk.com/sqx_fast/";//生产需替换
|
||||
const serverUrl = "http://47.75.182.93:8090/sqx_fast/";
|
||||
const serverUrl = "https://sausers.blxinchuang.com/sqx_fast/";
|
||||
|
||||
export const serverPaths = {
|
||||
serverUrl ,
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ http.adornUrl = (actionName) => {
|
|||
http.adornWss = (actionName) => {
|
||||
// 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
|
||||
// return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl) + actionName
|
||||
return 'wss://anmoadmin5.0.xianmaxiong.com' + actionName
|
||||
return 'wss://sausers.blxinchuang.com/wss/' + actionName
|
||||
// return 'https://anmoadmin5.0.xianmaxiong.comsqx_fast/' + actionName
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,19 +17,19 @@
|
|||
v-bind:class="{ blue: index == current }" v-for="(item, index) in chatList" :key="index"
|
||||
@click="clickItem(item, index)">
|
||||
<div class="left-item-left">
|
||||
<div class="left-item-head" v-if="item.userHead == null || item.userHead == ''">
|
||||
<div class="left-item-head" v-if="item.avatar == null || item.avatar == ''">
|
||||
<img src="~@/assets/img/head.png" />
|
||||
</div>
|
||||
<div class="left-item-head" v-else><img :src="item.userHead" /></div>
|
||||
<div class="left-item-head" v-else><img :src="item.avatar" /></div>
|
||||
<div class="left-item-info">
|
||||
<div class="left-item-info_title">{{ item.userName }}</div>
|
||||
<div class="left-item-info_content">{{ item.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-item-time">
|
||||
<div class="left-item-time-time" v-if="item.contentTime == null"></div>
|
||||
<div class="left-item-time-time" v-if="item.messageTime == null"></div>
|
||||
<div class="left-item-time-time" v-else>
|
||||
{{ item.contentTime.substring(11, 16) }}
|
||||
{{ item.messageTime.substring(11, 16) }}
|
||||
</div>
|
||||
<div class="left-item-time-number" style="position: absolute; left: 59px; top: 8px"
|
||||
v-if="item.storeCount">
|
||||
|
|
@ -58,18 +58,16 @@
|
|||
<div class="center_wrapper_center" id="ele" style="overflow-y: auto" ref="dialogue_box">
|
||||
<!-- <div class="item loading">{{loadText}}<span>{{"第" + pageNum + "页"}}</span></div> -->
|
||||
<div v-for="(item, index) in dialogueList" :key="index" :class="
|
||||
item.sendType == '1'
|
||||
? center_wrapper_center_item
|
||||
: center_wrapper_center_item_reserve
|
||||
item.userId == 0
|
||||
? center_wrapper_center_item_reserve
|
||||
: center_wrapper_center_item
|
||||
">
|
||||
<div class="left-item-head">
|
||||
<img v-if="item.sendType == '1' && userHead !== null" :src="userHead" />
|
||||
<img v-else-if="item.sendType == '1' && userHead == null"
|
||||
src="~@/assets/img/head.png" />
|
||||
<img v-if="item.avatar != null && item.avatar !=''" :src="item.avatar" />
|
||||
<img v-else src="~@/assets/img/avatar.png" />
|
||||
</div>
|
||||
<!-- 文字 -->
|
||||
<div class="center-item-info_wrapper" v-if="item.type == 1">
|
||||
<div class="center-item-info_wrapper" v-if="item.messageType==1">
|
||||
<div class="center-item-tip">
|
||||
<div class="center-item-info">
|
||||
{{ item.content }}
|
||||
|
|
@ -78,7 +76,7 @@
|
|||
<div class="center-item-time">{{ item.createTime }}</div>
|
||||
</div>
|
||||
<!-- 图片 -->
|
||||
<div class="center-item-info_wrapper" v-if="item.type == 2">
|
||||
<div class="center-item-info_wrapper" v-else-if="item.messageType==2">
|
||||
<div class="center-item-tip">
|
||||
<div>
|
||||
<el-popover placement="top-start" title="" trigger="hover">
|
||||
|
|
@ -252,7 +250,7 @@ import { serverPaths } from '@/utils/enumData'
|
|||
initWebSocket() {
|
||||
|
||||
this.websock = new WebSocket(
|
||||
this.$http.adornWss("websocket/0"));
|
||||
this.$http.adornWss("chatSocket/0"));
|
||||
// "ws://192.168.1.17:8180/sqx_fast/websocket/0"); //这个连接ws://固定，后面的根据自己的IP和端口进行改变，我设置监听的就是8081
|
||||
// this.websock = new WebSocket("ws://yungameadmin.xianmxkj.com/ws/websocket/0");
|
||||
this.websock.onmessage = this.websocketonmessage;
|
||||
|
|
@ -360,11 +358,12 @@ import { serverPaths } from '@/utils/enumData'
|
|||
},
|
||||
// 点击聊天列表的某一项
|
||||
clickItem(item, index) {
|
||||
console.log(`🚀 ~ clickItem ~ item:`, item)
|
||||
this.current = index;
|
||||
this.userId = item.userId;
|
||||
this.name = item.userName;
|
||||
this.userHead = item.userHead;
|
||||
this.chatId = item.chatId;
|
||||
this.userHead = item.avatar;
|
||||
this.chatId = item.chatConversationId;
|
||||
this.chatList[index].storeCount = 0
|
||||
this.clickItem2();
|
||||
this.initWebSocket();
|
||||
|
|
@ -373,16 +372,18 @@ import { serverPaths } from '@/utils/enumData'
|
|||
|
||||
clickItem2() {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl("chatsContent/storeList"),
|
||||
url: this.$http.adornUrl("chat/selectChatContent"),
|
||||
method: "get",
|
||||
params: this.$http.adornParams({
|
||||
chatId: this.chatId,
|
||||
chatConversationId: this.chatId,
|
||||
page: 1,
|
||||
limit: 10,
|
||||
}),
|
||||
}).then(({
|
||||
data
|
||||
}) => {
|
||||
let returnData = data.data;
|
||||
this.dialogueList = returnData;
|
||||
this.dialogueList = returnData.list.reverse();
|
||||
let ele = document.getElementById("ele");
|
||||
this.$nextTick(() => {
|
||||
ele.scrollTop = ele.scrollHeight;
|
||||
|
|
@ -393,15 +394,16 @@ import { serverPaths } from '@/utils/enumData'
|
|||
sendTextarea(type) {
|
||||
let data = {
|
||||
content: this.content,
|
||||
type: type,
|
||||
messageType: type,
|
||||
createTime: this.info.stockDate,
|
||||
sendType: this.sendType,
|
||||
userId: this.userId,
|
||||
userId: 0,
|
||||
storeId: this.storeId,
|
||||
chatId: this.chatId,
|
||||
chatConversationId: this.chatId,
|
||||
};
|
||||
this.numlist = data;
|
||||
data = JSON.stringify(data);
|
||||
console.log(`🚀 ~ sendTextarea ~ data:`, data)
|
||||
this.websock.send(data);
|
||||
this.content = "";
|
||||
this.dialogueList.push(this.numlist);
|
||||
|
|
@ -450,20 +452,22 @@ import { serverPaths } from '@/utils/enumData'
|
|||
dataSelect() {
|
||||
this.tableDataLoading = true;
|
||||
this.$http({
|
||||
url: this.$http.adornUrl("chats/list"),
|
||||
url: this.$http.adornUrl("chat/selectChatConversationPage"),
|
||||
method: "get",
|
||||
params: this.$http.adornParams({
|
||||
userName: this.userName,
|
||||
nickName: this.userName,
|
||||
storeId: this.storeId,
|
||||
page: 1,
|
||||
limit: 10,
|
||||
}),
|
||||
}).then(({
|
||||
data
|
||||
}) => {
|
||||
this.tableDataLoading = false;
|
||||
let returnData = data.data;
|
||||
this.chatList = returnData;
|
||||
this.chatList = returnData.list;
|
||||
|
||||
this.clickItem(this.chatList[this.current], this.current);
|
||||
// this.clickItem(this.chatList[this.current], this.current);
|
||||
});
|
||||
},
|
||||
// 验证只能上传音频
|
||||
|
|
@ -484,11 +488,12 @@ import { serverPaths } from '@/utils/enumData'
|
|||
},
|
||||
},
|
||||
mounted() {
|
||||
// this.timer = window.setInterval(() => {
|
||||
// setTimeout(() => {
|
||||
// this.dataSelect()
|
||||
// },0)
|
||||
// },2000)
|
||||
this.dataSelect()
|
||||
this.timer = window.setInterval(() => {
|
||||
setTimeout(() => {
|
||||
this.dataSelect()
|
||||
},0)
|
||||
},4000)
|
||||
},
|
||||
destroyed() {
|
||||
window.clearInterval(this.timer);
|
||||
|
|
|
|||
Loading…
Reference in New Issue