|
@@ -36,18 +36,20 @@
|
|
|
<el-icon><close /></el-icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div ref="historyMsgWrap" class="flex-1 overflow-hidden p-base scroll-auto">
|
|
|
+ <div class="flex-1 p-base">
|
|
|
<!-- <pre
|
|
|
class="full-h radius-base p-extra-base scroll-y-auto message-info-content"
|
|
|
@click="onContentClick"
|
|
|
v-html="currentMessage?.content"
|
|
|
></pre> -->
|
|
|
- <div v-for="(message, index) in history" :key="index" class="m-b-base history-box">
|
|
|
- <div class="m-b-mini message-header">
|
|
|
- <span class="m-r-base user-name">{{ message.sendUserName }}</span>
|
|
|
- <span class="message-time">{{ message.sendTime }}</span>
|
|
|
+ <div ref="historyMsgWrap" class="history-box scroll-auto">
|
|
|
+ <div v-for="(message, index) in historyReverse" :key="index" class="m-b-base">
|
|
|
+ <div class="m-b-mini message-header">
|
|
|
+ <span class="m-r-base user-name">{{ message.sendUserName }}</span>
|
|
|
+ <span class="message-time">{{ message.sendTime }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="history-message-info-content" @click="onContentClick" v-html="message.content"></div>
|
|
|
</div>
|
|
|
- <div class="history-message-info-content" @click="onContentClick" v-html="message.content"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="p-base" style="padding-top: 0">
|
|
@@ -84,7 +86,7 @@
|
|
|
|
|
|
<script setup lang="ts" name="MessageList">
|
|
|
/** 消息列表*/
|
|
|
-import { ref, watch, onUnmounted, computed, nextTick } from 'vue'
|
|
|
+import { ref, watch, onUnmounted, computed, nextTick, unref } from 'vue'
|
|
|
import { ElButton, ElIcon, ElMessage } from 'element-plus'
|
|
|
import { Close } from '@element-plus/icons-vue'
|
|
|
import useFetch from '@/hooks/useFetch'
|
|
@@ -100,6 +102,9 @@ const historyMsgWrap = ref()
|
|
|
const mainStore = useMainStore()
|
|
|
const emits = defineEmits(['close', 'change-type', 'reply'])
|
|
|
const { fetch: getMessageHistory, result: history, loading } = useFetch('getMessageHistory')
|
|
|
+const historyReverse = computed(() => {
|
|
|
+ return ((history.value as any) || []).reverse()
|
|
|
+})
|
|
|
/** 图片预览 */
|
|
|
const previewModalVisible = ref<boolean>(false)
|
|
|
/** 消息内容 */
|
|
@@ -112,12 +117,21 @@ const showHistory = ref<boolean>(false)
|
|
|
const { fetch: getMessageList, result: messageList } = useFetch('getMessageList')
|
|
|
|
|
|
const currentMessage = ref<MessageType>()
|
|
|
-watch(history, () => {
|
|
|
- nextTick(() => {
|
|
|
- console.log(historyMsgWrap.value.scrollHeight)
|
|
|
- })
|
|
|
+function scrollToBottom() {
|
|
|
+ let scrollHeight = historyMsgWrap.value.scrollHeight
|
|
|
+ if (scrollHeight > 200) {
|
|
|
+ historyMsgWrap.value.scrollTop = scrollHeight - 200 + 100
|
|
|
+ }
|
|
|
+}
|
|
|
+watch(historyReverse, (newVal: any, oldVal: any) => {
|
|
|
+ let oldV = unref(oldVal)
|
|
|
+ if ((oldV || []).length == 0) {
|
|
|
+ nextTick(() => {
|
|
|
+ scrollToBottom()
|
|
|
+ })
|
|
|
+ }
|
|
|
})
|
|
|
-watch(currentMessage, () => {
|
|
|
+watch(currentMessage, (newVal: any, oldVal: any) => {
|
|
|
if (currentMessage.value) {
|
|
|
useFetch('handleReadMessage')
|
|
|
.fetch({ id: currentMessage.value.id })
|
|
@@ -127,7 +141,13 @@ watch(currentMessage, () => {
|
|
|
currentMessage.value.unReadCount = 0
|
|
|
}
|
|
|
if (currentMessage.value?.sendUserId) {
|
|
|
- getMessageHistory({ sendUserId: currentMessage.value.sendUserId })
|
|
|
+ getMessageHistory({ sendUserId: currentMessage.value.sendUserId }).then(() => {
|
|
|
+ let newV = unref(newVal)
|
|
|
+ let oldV = unref(oldVal)
|
|
|
+ if (newV.id != oldV.id) {
|
|
|
+ setTimeout(scrollToBottom, 1)
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
})
|
|
|
}
|
|
@@ -149,6 +169,11 @@ const onSendMessage = async () => {
|
|
|
})
|
|
|
ElMessage.success('发送成功')
|
|
|
messageContent.value = ''
|
|
|
+ if (currentMessage.value?.sendUserId) {
|
|
|
+ getMessageHistory({ sendUserId: currentMessage.value.sendUserId }).then(() => {
|
|
|
+ setTimeout(scrollToBottom, 1)
|
|
|
+ })
|
|
|
+ }
|
|
|
// emit('close')
|
|
|
} catch (error) {
|
|
|
console.error(error)
|
|
@@ -213,12 +238,17 @@ onUnmounted(() => {
|
|
|
.message-list-modal {
|
|
|
width: 750px;
|
|
|
background-color: transparent;
|
|
|
-
|
|
|
+ border-top-left-radius: 0;
|
|
|
+ border-bottom-left-radius: 0;
|
|
|
.message-info-container {
|
|
|
// width: 600px;
|
|
|
width: calc(100% - 260px);
|
|
|
position: relative;
|
|
|
.history-box {
|
|
|
+ height: 200px;
|
|
|
+ border: 1px solid #eee;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 15px;
|
|
|
.message-header {
|
|
|
color: $color--primary;
|
|
|
}
|