|
|
@@ -4,7 +4,7 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<script setup>
|
|
|
-import { ref, reactive, toRaw, toRefs, nextTick, computed } from "vue";
|
|
|
+import { ref, reactive, toRaw, toRefs, nextTick, computed, watchEffect } from "vue";
|
|
|
import { useRouter, useRoute } from "vue-router";
|
|
|
import useUserStore from "@/store/modules/user";
|
|
|
import word from "@/assets/images/word2.png";
|
|
|
@@ -50,6 +50,7 @@ const openForwardFile = ref(false); //转发目录
|
|
|
const showCircel = ref(""); //是否 显示圆点
|
|
|
const chatRecords = reactive({ data: [] });
|
|
|
const loading = ref(false);
|
|
|
+const wangzhi=import.meta.env.VITE_APP_BASE_API
|
|
|
const sendCont = reactive({
|
|
|
//发送聊天内容数据组装
|
|
|
data: {
|
|
|
@@ -77,8 +78,6 @@ const getMsgList = async () => {
|
|
|
searchData.value.map((i) => {
|
|
|
if (i.fromId == websoctStore.messOne?.fromId) {
|
|
|
i.showCircel = true;
|
|
|
- } else {
|
|
|
- i.showCircel = false;
|
|
|
}
|
|
|
});
|
|
|
//圆点======
|
|
|
@@ -96,16 +95,16 @@ const getMsgList = async () => {
|
|
|
}
|
|
|
};
|
|
|
const noMes = ref(false);
|
|
|
-const boottmScroll=()=>{
|
|
|
-//发送消息后滚动到最底部显示最新消息
|
|
|
-const chatContainer = document.querySelector(".right-container");
|
|
|
+const boottmScroll = () => {
|
|
|
+ //发送消息后滚动到最底部显示最新消息
|
|
|
+ const chatContainer = document.querySelector(".right-container");
|
|
|
// 计算滚动的目标位置
|
|
|
const targetScrollTop = chatContainer.scrollHeight;
|
|
|
// 设置滚动位置
|
|
|
nextTick(() => {
|
|
|
chatContainer.scrollTop = targetScrollTop;
|
|
|
});
|
|
|
-}
|
|
|
+};
|
|
|
//获取用户的聊天记录
|
|
|
const msgRecordEvent = async (toIdValue) => {
|
|
|
const queryParams = {
|
|
|
@@ -126,7 +125,7 @@ const msgRecordEvent = async (toIdValue) => {
|
|
|
i.createTime = i.createTime.substring(11);
|
|
|
});
|
|
|
total.value = resMsgData.total;
|
|
|
- boottmScroll()
|
|
|
+ boottmScroll();
|
|
|
};
|
|
|
//点击左侧新建聊天
|
|
|
const open = ref(false);
|
|
|
@@ -154,7 +153,7 @@ const clickPerson = (index, item) => {
|
|
|
clickPersonIndex.value = index;
|
|
|
//点击某个人就不显示红点
|
|
|
searchData.value.map((i) => {
|
|
|
- if (i.fromId == websoctStore.messOne?.fromId) {
|
|
|
+ if (i.fromId == item.fromId) {
|
|
|
i.showCircel = false;
|
|
|
}
|
|
|
});
|
|
|
@@ -205,7 +204,6 @@ const changeMsg = async (val) => {
|
|
|
//发送聊天
|
|
|
const inputRef = ref(null);
|
|
|
const msgSendClick = (event) => {
|
|
|
- console.log(event);
|
|
|
if (event.ctrlKey && event.keyCode == 13) {
|
|
|
//CTRL+enter键换行
|
|
|
const textarea = event.target;
|
|
|
@@ -221,7 +219,6 @@ const msgSendClick = (event) => {
|
|
|
} else if (event.shiftKey && event.keyCode == 13) {
|
|
|
event.preventDefault();
|
|
|
} else {
|
|
|
- console.log("onlyenter");
|
|
|
noMes.value = false;
|
|
|
if (messageText.value.trim() == "") {
|
|
|
return ElMessage({ message: "不能发送空白消息", type: "error" });
|
|
|
@@ -233,7 +230,7 @@ const msgSendClick = (event) => {
|
|
|
toId: sendCont.data.toId,
|
|
|
};
|
|
|
websoctStore.sendMessage(message);
|
|
|
- boottmScroll()
|
|
|
+ boottmScroll();
|
|
|
event.preventDefault();
|
|
|
messageText.value = "";
|
|
|
// 将光标设置到输入框第一行
|
|
|
@@ -278,12 +275,6 @@ const mainContainer = ref(null);
|
|
|
const handleScroll = (event) => {
|
|
|
// 在滚动到顶部时,加载上一页的聊天记录
|
|
|
const mainContainer2 = document.querySelector(".right-container");
|
|
|
- console.log(
|
|
|
- " event.deltaY",
|
|
|
- mainContainer2.scrollTop,
|
|
|
- noMes.value,
|
|
|
- loading.value
|
|
|
- );
|
|
|
if (
|
|
|
event.deltaY < 0 &&
|
|
|
mainContainer2.scrollTop <= 1 &&
|
|
|
@@ -321,7 +312,8 @@ const loadPreviousPage = async () => {
|
|
|
const newMessages = document.querySelectorAll(".message-container");
|
|
|
const firstNewMessage = newMessages[previousPageData.length];
|
|
|
const firstNewMessageTop = mainContainer.offsetHeight + 100;
|
|
|
- mainContainer.scrollTop = firstNewMessageTop;chatRecords.data
|
|
|
+ mainContainer.scrollTop = firstNewMessageTop;
|
|
|
+ chatRecords.data;
|
|
|
//===========
|
|
|
// 将加载的上一页聊天记录插入到 chatRecords.data 的前面
|
|
|
loading.value = false;
|
|
|
@@ -370,11 +362,6 @@ const formatText = (text) => {
|
|
|
const formattedText = text.replace(/\n/g, "<br>");
|
|
|
return formattedText;
|
|
|
};
|
|
|
-//获得个人头像转换
|
|
|
-
|
|
|
-const getMyThoto=computed(() => item => {
|
|
|
- return item.toId == userIds.uid?item.fromAvatar:item.toAvatar
|
|
|
-})
|
|
|
// 滚动翻页========
|
|
|
onMounted(() => {
|
|
|
getMsgList();
|
|
|
@@ -435,12 +422,36 @@ onMounted(() => {
|
|
|
</button> -->
|
|
|
<div>
|
|
|
<!-- <img :src="item.avatar?item.avatar : chat" class="head-sculpture" /> -->
|
|
|
- <img :src="getMyThoto(item)" class="head-sculpture" v-if="getMyThoto(item)"/>
|
|
|
- <span style="background-color: #7a89ba;display: inline-block;color: #fff;font-weight: 600;text-align: center;line-height: 40px;" class="head-sculpture" v-else>{{item.toId == userIds.uid?item.fromName?.slice(0,1):item.toName?.slice(0,1)}}</span>
|
|
|
+ <img
|
|
|
+ :src="wangzhi + item.fromAvatar"
|
|
|
+ class="head-sculpture"
|
|
|
+ v-if="item.toId == userIds.uid && item.fromAvatar"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ :src="wangzhi + item.toAvatar"
|
|
|
+ class="head-sculpture"
|
|
|
+ v-else-if="item.toId != userIds.uid && item.toAvatar"
|
|
|
+ />
|
|
|
+ <span
|
|
|
+ style="
|
|
|
+ background-color: #7a89ba;
|
|
|
+ display: inline-block;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ "
|
|
|
+ class="head-sculpture"
|
|
|
+ v-else
|
|
|
+ >{{ item.toId == userIds.uid? item.fromName?.slice(0, 1): item.toName?.slice(0, 1) }}</span>
|
|
|
</div>
|
|
|
<div class="spill">
|
|
|
<span class="person-name">{{
|
|
|
- item.nickName? item.nickName: (item.toId == userIds.uid? item.fromName: item.toName)
|
|
|
+ item.nickName
|
|
|
+ ? item.nickName
|
|
|
+ : item.toId == userIds.uid
|
|
|
+ ? item.fromName
|
|
|
+ : item.toName
|
|
|
}}</span
|
|
|
><span class="person-cont spill">
|
|
|
{{ item.file?.fileName ? item.file?.fileName : item.content }}</span
|
|
|
@@ -479,82 +490,149 @@ onMounted(() => {
|
|
|
}"
|
|
|
:key="index"
|
|
|
>
|
|
|
- <div
|
|
|
- v-if="useUserStore().uid !== record.toId"
|
|
|
- :class="
|
|
|
- record.msgType == '1'
|
|
|
- ? 'file-msg right-back'
|
|
|
- : 'time-text right-back'
|
|
|
- "
|
|
|
- >
|
|
|
- <img
|
|
|
- :src="word"
|
|
|
- v-if="record.msgType == '1'"
|
|
|
- class="head-sculpture"
|
|
|
- />
|
|
|
+ <div>
|
|
|
<div
|
|
|
- :class="
|
|
|
- record.msgType == '2' ? 'clip-path' : 'clip-path-right'
|
|
|
- "
|
|
|
+ v-if="useUserStore().uid !== record.toId"
|
|
|
+ style="display: flex"
|
|
|
>
|
|
|
<div
|
|
|
- style="color: #c1cce3; font-size: 12px; margin-bottom: 4px"
|
|
|
+ :class="
|
|
|
+ record.msgType == '1'
|
|
|
+ ? 'file-msg right-back'
|
|
|
+ : 'time-text right-back'
|
|
|
+ "
|
|
|
>
|
|
|
- {{ record.createTime.slice(0, -3) }}
|
|
|
- </div>
|
|
|
- <span v-if="record.msgType == '1'">{{
|
|
|
- record.file?.fileName
|
|
|
- }}</span>
|
|
|
- <!-- <span v-else-if="record.msgType == '2'">{{
|
|
|
+ <img
|
|
|
+ :src="word"
|
|
|
+ v-if="record.msgType == '1'"
|
|
|
+ class="head-sculpture"
|
|
|
+ />
|
|
|
+ <div
|
|
|
+ :class="
|
|
|
+ record.msgType == '2' ? 'clip-path' : 'clip-path-right'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ color: #c1cce3;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ record.createTime.slice(0, -3) }}
|
|
|
+ </div>
|
|
|
+ <span v-if="record.msgType == '1'">{{
|
|
|
+ record.file?.fileName
|
|
|
+ }}</span>
|
|
|
+ <!-- <span v-else-if="record.msgType == '2'">{{
|
|
|
record.content
|
|
|
}}</span> -->
|
|
|
- <span
|
|
|
- v-else-if="record.msgType == '2'"
|
|
|
- v-html="formatText(record.content)"
|
|
|
- ></span>
|
|
|
+ <span
|
|
|
+ v-else-if="record.msgType == '2'"
|
|
|
+ v-html="formatText(record.content)"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <img
|
|
|
+ :src="wangzhi + record.fromAvatar"
|
|
|
+ class="head-sculpture"
|
|
|
+ v-if="
|
|
|
+ useUserStore().uid != record.toId && record.fromAvatar
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ :src="wangzhi + record.toAvatar"
|
|
|
+ class="head-sculpture"
|
|
|
+ v-else-if="
|
|
|
+ useUserStore().uid == record.toId && record.toAvatar
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <span
|
|
|
+ style="
|
|
|
+ background-color: #7a89ba;
|
|
|
+ display: inline-block;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ "
|
|
|
+ class="head-sculpture"
|
|
|
+ v-else
|
|
|
+ >{{ record.fromName.slice(0, 1) }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <!-- 头像 -->
|
|
|
+ <!-- <img :src="chat" class="head-sculpture" /> -->
|
|
|
</div>
|
|
|
- <!-- 头像 -->
|
|
|
- <!-- <img :src="chat" class="head-sculpture" /> -->
|
|
|
- <img :src="getMyThoto(record)" class="head-sculpture" v-if="getMyThoto(record)"/>
|
|
|
- <span style="background-color: #7a89ba;display: inline-block;color: #fff;font-weight: 600;text-align: center;line-height: 40px;" class="head-sculpture" v-else>{{ record.fromName.slice(0,1) }}</span>
|
|
|
<div style="display: flex; align-items: center">
|
|
|
<div
|
|
|
v-if="useUserStore().uid == record.toId"
|
|
|
- :class="
|
|
|
- record.msgType == '1' ? 'file-msg left-back' : 'left-back'
|
|
|
- "
|
|
|
- @click="transferFiles(record.msgType, record.msgId, index)"
|
|
|
+ style="display: flex"
|
|
|
>
|
|
|
- <img
|
|
|
- v-if="record.msgType == '1'"
|
|
|
- :src="word"
|
|
|
- class="head-sculpture"
|
|
|
- />
|
|
|
+ <div>
|
|
|
+ <img
|
|
|
+ :src="wangzhi + record.fromAvatar"
|
|
|
+ class="head-sculpture"
|
|
|
+ v-if="
|
|
|
+ useUserStore().uid == record.toId && record.fromAvatar
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ :src="wangzhi + record.toAvatar"
|
|
|
+ class="head-sculpture"
|
|
|
+ v-else-if="
|
|
|
+ useUserStore().uid != record.toId && record.toAvatar
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <span
|
|
|
+ style="
|
|
|
+ background-color: #7a89ba;
|
|
|
+ display: inline-block;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ "
|
|
|
+ class="head-sculpture"
|
|
|
+ v-else
|
|
|
+ >{{ record.fromName.slice(0, 1) }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
<div
|
|
|
:class="
|
|
|
- record.msgType == '2' ? 'clip-path' : 'clip-path-left'
|
|
|
+ record.msgType == '1' ? 'file-msg left-back' : 'left-back'
|
|
|
"
|
|
|
+ @click="transferFiles(record.msgType, record.msgId, index)"
|
|
|
>
|
|
|
+ <img
|
|
|
+ v-if="record.msgType == '1'"
|
|
|
+ :src="word"
|
|
|
+ class="head-sculpture"
|
|
|
+ />
|
|
|
<div
|
|
|
- style="
|
|
|
- color: #7a89ba;
|
|
|
- font-size: 12px;
|
|
|
- margin-bottom: 4px;
|
|
|
+ :class="
|
|
|
+ record.msgType == '2' ? 'clip-path' : 'clip-path-left'
|
|
|
"
|
|
|
>
|
|
|
- {{ record.createTime.slice(0, -3) }}
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ color: #7a89ba;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ record.createTime.slice(0, -3) }}
|
|
|
+ </div>
|
|
|
+ <span v-if="record.msgType == '1'">{{
|
|
|
+ record.file?.fileName
|
|
|
+ }}</span>
|
|
|
+ <span
|
|
|
+ v-else-if="record.msgType == '2'"
|
|
|
+ v-html="formatText(record.content)"
|
|
|
+ ></span>
|
|
|
</div>
|
|
|
- <span v-if="record.msgType == '1'">{{
|
|
|
- record.file?.fileName
|
|
|
- }}</span>
|
|
|
- <!-- <span v-else-if="record.msgType == '2'">{{
|
|
|
- record.content
|
|
|
- }}</span> -->
|
|
|
- <span
|
|
|
- v-else-if="record.msgType == '2'"
|
|
|
- v-html="formatText(record.content)"
|
|
|
- ></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<img
|