From 2fbeb407e6e8bec89b52cdf2cf62d8e5f39849be Mon Sep 17 00:00:00 2001 From: bob <312777916@qq.com> Date: Sun, 8 Sep 2024 23:49:43 +0800 Subject: [PATCH] =?UTF-8?q?=E8=81=8A=E5=A4=A9=E7=AA=97=E5=8F=A3=E7=9A=84me?= =?UTF-8?q?ssagebox=E5=9F=BA=E6=9C=AC=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/message/MessageItem.vue | 77 ++++++++++++++++++++++++ src/components/message/SessionBox.vue | 16 +++-- src/const/msgConst.js | 4 ++ src/utils/common.js | 81 ++++++++++++++++++++++++++ src/views/message/MessageLayout.vue | 61 ++++++++++++++++++- 5 files changed, 234 insertions(+), 5 deletions(-) create mode 100644 src/components/message/MessageItem.vue create mode 100644 src/const/msgConst.js diff --git a/src/components/message/MessageItem.vue b/src/components/message/MessageItem.vue new file mode 100644 index 0000000..100b361 --- /dev/null +++ b/src/components/message/MessageItem.vue @@ -0,0 +1,77 @@ + + + + + diff --git a/src/components/message/SessionBox.vue b/src/components/message/SessionBox.vue index 00e0454..f31f07b 100644 --- a/src/components/message/SessionBox.vue +++ b/src/components/message/SessionBox.vue @@ -4,6 +4,7 @@ import AvatarIcon from './AvatarIcon.vue' import SessionTag from './SessionTag.vue' import UserCard from '../user/UserCard.vue' import GroupCard from '../group/GroupCard.vue' +import { sessionShowTime } from '@/utils/common' import { Top, Bottom, MuteNotification, Bell } from '@element-plus/icons-vue' const props = defineProps(['sessionId', 'sessionType', 'objectInfo']) @@ -53,6 +54,12 @@ const showAvatarThumb = computed(() => { } }) +const showTime = computed(() => { + const now = new Date() + const oneDayAgo = new Date(now.getTime() - 0 * 24 * 60 * 60 * 1000) + return sessionShowTime(oneDayAgo) +}) + const handleUserCard = (flag) => { isShowUserCard.value = flag } @@ -93,7 +100,7 @@ const showSomeoneCard = () => {
- 15:10 + {{ showTime }}
@@ -185,11 +192,12 @@ const showSomeoneCard = () => { } .datetime { - display: block; - margin-left: 10px; - width: 40px; + width: 52px; font-size: 12px; + margin-right: 5px; color: gray; + display: flex; + justify-content: flex-end; } } diff --git a/src/const/msgConst.js b/src/const/msgConst.js new file mode 100644 index 0000000..9f5da563 --- /dev/null +++ b/src/const/msgConst.js @@ -0,0 +1,4 @@ +export const msgType = { + NO_MORE_MSG: 1, + USER_MSG: 2 +} diff --git a/src/utils/common.js b/src/utils/common.js index d187f8e..6f51309 100644 --- a/src/utils/common.js +++ b/src/utils/common.js @@ -46,3 +46,84 @@ export const generateClientId = () => { } return clientId } + +export const sessionShowTime = (datetime) => { + const now = new Date() + const inputDate = new Date(datetime) + + const isToday = + now.getDate() === inputDate.getDate() && + now.getMonth() === inputDate.getMonth() && + now.getFullYear() === inputDate.getFullYear() + + const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000) + const isYesterday = + yesterday.getDate() === inputDate.getDate() && + yesterday.getMonth() === inputDate.getMonth() && + yesterday.getFullYear() === inputDate.getFullYear() + + const dayBeforeYesterday = new Date(now.getTime() - 2 * 24 * 60 * 60 * 1000) + const isDayBeforeYesterday = + dayBeforeYesterday.getDate() === inputDate.getDate() && + dayBeforeYesterday.getMonth() === inputDate.getMonth() && + dayBeforeYesterday.getFullYear() === inputDate.getFullYear() + + if (isToday) { + const hours = inputDate.getHours().toString().padStart(2, '0') + const minutes = inputDate.getMinutes().toString().padStart(2, '0') + return `${hours}:${minutes}` + } else if (isYesterday) { + return '昨天' + } else if (isDayBeforeYesterday) { + return '前天' + } else { + const year = inputDate.getFullYear() % 100 + let month = inputDate.getMonth() + 1 + let day = inputDate.getDate() + day = day < 10 ? day.toString() : day + return `${year}/${month}/${day}` + } +} + +export const messageShowTime = (datetime) => { + const now = new Date() + const inputDate = new Date(datetime) + + const isToday = + now.getDate() === inputDate.getDate() && + now.getMonth() === inputDate.getMonth() && + now.getFullYear() === inputDate.getFullYear() + + const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000) + const isYesterday = + yesterday.getDate() === inputDate.getDate() && + yesterday.getMonth() === inputDate.getMonth() && + yesterday.getFullYear() === inputDate.getFullYear() + + const dayBeforeYesterday = new Date(now.getTime() - 2 * 24 * 60 * 60 * 1000) + const isDayBeforeYesterday = + dayBeforeYesterday.getDate() === inputDate.getDate() && + dayBeforeYesterday.getMonth() === inputDate.getMonth() && + dayBeforeYesterday.getFullYear() === inputDate.getFullYear() + + if (isToday) { + const hours = inputDate.getHours().toString().padStart(2, '0') + const minutes = inputDate.getMinutes().toString().padStart(2, '0') + return `${hours}:${minutes}` + } else if (isYesterday) { + const hours = inputDate.getHours().toString().padStart(2, '0') + const minutes = inputDate.getMinutes().toString().padStart(2, '0') + return `昨天 ${hours}:${minutes}` + } else if (isDayBeforeYesterday) { + const hours = inputDate.getHours().toString().padStart(2, '0') + const minutes = inputDate.getMinutes().toString().padStart(2, '0') + return `前天 ${hours}:${minutes}` + } else { + const year = inputDate.getFullYear() + const month = inputDate.getMonth() + 1 + const day = inputDate.getDate() + const hours = inputDate.getHours().toString().padStart(2, '0') + const minutes = inputDate.getMinutes().toString().padStart(2, '0') + return `${year}年${month}月${day}日 ${hours}:${minutes}` + } +} diff --git a/src/views/message/MessageLayout.vue b/src/views/message/MessageLayout.vue index 6395a3c..dc9a35e 100644 --- a/src/views/message/MessageLayout.vue +++ b/src/views/message/MessageLayout.vue @@ -20,9 +20,11 @@ import AddBotton from '@/components/common/AddBotton.vue' import SessionBox from '@/components/message/SessionBox.vue' import InputTool from '@/components/message/InputTool.vue' import InputEditor from '@/components/message/InputEditor.vue' +import MessageItem from '@/components/message/MessageItem.vue' import { userStore, settingStore, messageStore } from '@/stores' import backgroupImage from '@/assets/messagebx_bg.webp' import { msgChatSessionListService } from '@/api/message' +import { msgType } from '@/const/msgConst' const userData = userStore() const settingData = settingStore() @@ -41,6 +43,12 @@ const curSessionType = ref('') const curObject = ref({}) const sessionList = ref([]) +const isShowTopLoading = ref(false) +const isTopLoading = ref(false) +const loadMoreTips = ref('查看更多消息') +const loadCursor = computed(() => { + return isTopLoading.value ? 'auto' : 'pointer' +}) onMounted(async () => { curSessionId.value = messageData.lastSessionId @@ -102,6 +110,11 @@ const handleExportData = (data) => { messageData.setLastObject(data.objectInfo) } +const onLoadMore = () => { + isTopLoading.value = true + loadMoreTips.value = '' +} +