新增：发送消息

2024-05-08 23:09:33 +08:00
parent 93ba6c579a
commit ac66084650
5 changed files with 172 additions and 124 deletions
--- a/src/views/im/Message/components/inputBox/index.vue
+++ b/src/views/im/Message/components/inputBox/index.vue
@ -7,6 +7,8 @@ import { onClickOutside } from '@vueuse/core'
 /* 组件 */
 import PreviewSendImg from '../suit/previewSendImg.vue'
 import VueAt from 'vue-at/dist/vue-at-textarea' // for textarea
+import * as MessageApi from '@/api/im/message'
+import { generateUUID } from '@/utils'
 const props = defineProps({
  nowPickInfo: {
    type: Object,
@ -100,17 +102,21 @@ const sendTextMessage = _.debounce(async () => {
      em_at_list: isAtAll.value ? MENTION_ALL.VALUE : _.map(atMembers.value, 'value')
    }
  }
+  const imMessageSendReqVO = {
+    clientMessageId: generateUUID(),
+    receiverId: nowPickInfo.value.id,
+    conversationType: nowPickInfo.value.chatType,
+    contentType: ALL_MESSAGE_TYPE.TEXT,
+    content: textContent.value
+  }
  //关闭引用框
  if (messageQuoteRef.value?.isShowQuoteMsgBox) {
  }
  textContent.value = ''
  messageQuoteRef.value?.clearQuoteContent()
  try {
-    console.log('msgOptions', msgOptions)
-    // await store.dispatch('sendShowTypeMessage', {
-    //   msgType: ALL_MESSAGE_TYPE.TEXT,
-    //   msgOptions
-    // })
+    console.log('imMessageSendReqVO', imMessageSendReqVO)
+    await MessageApi.sendMessage(imMessageSendReqVO)
  } catch (error) {
    //handleSDKErrorNotifi(error.type, error.message)
    console.log('>>>>>>>发送失败+++++++', error)
--- a/src/views/im/Message/components/messageList/index.vue
+++ b/src/views/im/Message/components/messageList/index.vue
@ -2,43 +2,21 @@
 import { formatDate } from '@/utils/formatTime'
 /* 默认头像 */
 import defaultAvatar from '@/assets/imgs/avatar.gif'
-/* emits */
-const emit = defineEmits(['scroll-message-list', 're-edit-message', 'message-quote'])
-const messageData = ref([
-  {
-    id: 1,
-    type: 'text',
-    isRecall: false,
-    time: '2024-04-01 12:00:00',
-    from: '1',
-    msg: 'Hello, world!',
-    modifiedInfo: {
-      operationCount: 1
-    }
+/* props */
+const props = defineProps({
+  messageData: {
+    type: [Array, Object],
+    default: () => []
  },
-  {
-    id: 2,
-    type: 'text',
-    isRecall: false,
-    time: '2024-04-01 12:00:01',
-    from: '2',
-    msg: 'Hi, there!',
-    modifiedInfo: {
-      operationCount: 0
-    }
-  },
-  {
-    id: 3,
-    type: 'text',
-    isRecall: true,
-    time: '2024-04-01 12:00:02',
-    from: '1',
-    msg: 'Hello, world!',
-    modifiedInfo: {
-      operationCount: 0
-    }
+  nowPickInfo: {
+    type: Object,
+    default: () => ({}),
+    required: true
  }
-])
+})
+const { nowPickInfo } = toRefs(props)
+const { messageData } = toRefs(props)
+//消息类型
 const ALL_MESSAGE_TYPE = {
  TEXT: 'txt',
  IMAGE: 'img',
@ -52,6 +30,7 @@ const ALL_MESSAGE_TYPE = {
 }
 /* 处理时间显示间隔 */
 const handleMsgTimeShow = (time, index) => {
+  console.log('>>>>>时间显示', time, index)
  const msgList = Array.from(messageData.value)
  if (index !== 0) {
    const lastTime = msgList[index - 1].time
@ -108,10 +87,6 @@ const startplayAudio = (msgBody) => {
    audioPlayStatus.playMsgId = ''
  })
 }
-//父组件重新编辑方法
-const reEdit = (msg) => emit('reEditMessage', msg)
-//调用父组件引用消息
-const onMsgQuote = (msg) => emit('messageQuote', msg)
 </script>
 <template>
  <div>
--- a/src/views/im/Message/index.vue
+++ b/src/views/im/Message/index.vue
@ -5,10 +5,9 @@ import { messageType } from '@/constant/im'
 import MessageList from './components/messageList/index.vue'
 import InputBox from './components/inputBox/index.vue'

-const { push, currentRoute } = useRouter() // 路由
 const { query } = useRoute() // 查询参数

-const { CHAT_TYPE } = messageType
+const { CHAT_TYPE, ALL_MESSAGE_TYPE } = messageType
 /* header 操作 */
 const drawer = ref(false) //抽屉显隐
 const handleDrawer = () => {
@ -25,10 +24,10 @@ const delTheFriend = () => {
 }
 // 当前聊天对象信息
 const nowPickInfo = ref({
-  id: '1',
+  id: 1,
  chatType: CHAT_TYPE.SINGLE,
  userInfo: {
-    nickname: '好友1',
+    nickname: '芋道源码',
    userStatus: '1'
  },
  groupDetail: {
@ -45,27 +44,40 @@ const groupDetail = computed(() => {
 //获取其id对应的消息内容
 const messageData = computed(() => [
  {
-    type: 'text'
-  }
-])
-//监听路由改变获取对应的getIdInfo
-const stopWatchRoute = watch(
-  () => query,
-  (routeVal) => {
-    console.log('>>>>>>>>监听到路由参数变化', routeVal)
-    if (routeVal) {
-      // nowPickInfo.value = { ...routeVal }
-      // loginState.value && getIdInfo(routeVal)
+    id: 1,
+    type: ALL_MESSAGE_TYPE.TEXT,
+    isRecall: false,
+    time: '1711944000000',
+    from: '1',
+    msg: 'Hello, world!',
+    modifiedInfo: {
+      operationCount: 1
    }
  },
  {
-    immediate: true
+    id: 2,
+    type: ALL_MESSAGE_TYPE.TEXT,
+    isRecall: false,
+    time: '1711944001000',
+    from: '2',
+    msg: 'Hi, there!',
+    modifiedInfo: {
+      operationCount: 0
+    }
+  },
+  {
+    id: 3,
+    type: ALL_MESSAGE_TYPE.TEXT,
+    isRecall: true,
+    time: '1711944002000',
+    from: '1',
+    msg: 'Hello, world!',
+    modifiedInfo: {
+      operationCount: 0
+    }
  }
-)
-//离开该路由销毁route监听
-onBeforeRouteLeave(() => {
-  stopWatchRoute()
-})
+])
+
 /* 消息相关 */
 const loadingHistoryMsg = ref(false) //是否正在加载中
 const isMoreHistoryMsg = ref(true) //加载文案展示为加载更多还是已无更多。
@ -74,6 +86,10 @@ const notScrollBottom = ref(false) //是否滚动置底
 const fechHistoryMessage = (loadType) => {
  console.log(loadType)
  console.log('加载更多')
+  loadingHistoryMsg.value = true
+  setTimeout(() => {
+    loadingHistoryMsg.value = false
+  }, 1000)
 }
 //控制消息滚动
 const scrollMessageList = (direction) => {
@ -96,37 +112,15 @@ const messageQuote = (msg) => inputBox.value.handleQuoteMessage(msg)
        </div>
        <div v-else> {{ nowPickInfo.id }}<span style="font-size: 10px">(非好友)</span> </div>
      </template>
-      <!-- 单人展示删除拉黑 -->
-      <span class="more" v-if="nowPickInfo.chatType === CHAT_TYPE.SINGLE">
-        <el-dropdown placement="bottom-end" trigger="click">
-          <svg
-            width="18"
-            height="4"
-            viewBox="0 0 18 4"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <circle cx="2" cy="2" r="2" fill="#333333" />
-            <circle cx="9" cy="2" r="2" fill="#333333" />
-            <circle cx="16" cy="2" r="2" fill="#333333" />
-          </svg>
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item @click="delTheFriend"> 删除好友 </el-dropdown-item>
-              <!-- <el-dropdown-item @click="addFriendToBlackList">
-              加入黑名单
-            </el-dropdown-item> -->
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
-      </span>
    </el-header>
    <el-main class="chat_message_main">
      <el-scrollbar class="main_container" ref="messageContainer">
        <div class="innerRef">
          <div v-show="isMoreHistoryMsg" class="chat_message_tips">
            <div
-              v-show="messageData?.length && messageData[0].type !== 'inform'"
+              v-show="
+                messageData?.length && messageData[0].type !== ALL_MESSAGE_TYPE.OA_NOTIFICATION
+              "
              class="load_more_msg"
            >
              <el-link
@ -140,13 +134,7 @@ const messageQuote = (msg) => inputBox.value.handleQuoteMessage(msg)
              <el-link v-show="loadingHistoryMsg" disabled>消息加载中...</el-link>
            </div>
          </div>
-          <MessageList
-            :nowPickInfo="nowPickInfo"
-            :messageData="messageData"
-            @scroll-message-list="scrollMessageList"
-            @re-edit-message="reEditMessage"
-            @message-quote="messageQuote"
-          />
+          <MessageList :nowPickInfo="nowPickInfo" :messageData="messageData" />
        </div>
      </el-scrollbar>
    </el-main>