yudao-ui-admin-vue3/src/views/im/Message/index.vue

<script setup lang="ts">
import { UserStatus } from '@/components/Im/UserStatus'
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
/* header 操作 */
const drawer = ref(false) //抽屉显隐
const handleDrawer = () => {
  drawer.value = !drawer.value
}
//删除好友
const delTheFriend = () => {
  console.log(nowPickInfo.value)
  if (nowPickInfo.value?.id) {
    const targetId = nowPickInfo.value.id
    // EaseChatClient.deleteContact(targetId)
    // ElMessage({ type: 'success', center: true, message: '好友已删除~' })
  }
}
// 当前聊天对象信息
const nowPickInfo = ref({
  id: '1',
  chatType: CHAT_TYPE.SINGLE,
  userInfo: {
    nickname: '好友1',
    userStatus: '1'
  },
  groupDetail: {
    name: '',
    affiliations_count: '',
    custom: ''
  }
})

//获取群组详情
const groupDetail = computed(() => {
  return nowPickInfo.value.groupDetail
})
//获取其id对应的消息内容
const messageData = computed(() => [
  {
    type: 'text'
  }
])
//监听路由改变获取对应的getIdInfo
const stopWatchRoute = watch(
  () => query,
  (routeVal) => {
    console.log('>>>>>>>>监听到路由参数变化', routeVal)
    if (routeVal) {
      // nowPickInfo.value = { ...routeVal }
      // loginState.value && getIdInfo(routeVal)
    }
  },
  {
    immediate: true
  }
)
//离开该路由销毁route监听
onBeforeRouteLeave(() => {
  stopWatchRoute()
})
/* 消息相关 */
const loadingHistoryMsg = ref(false) //是否正在加载中
const isMoreHistoryMsg = ref(true) //加载文案展示为加载更多还是已无更多。
const notScrollBottom = ref(false) //是否滚动置底
//获取历史记录
const fechHistoryMessage = (loadType) => {
  console.log(loadType)
  console.log('加载更多')
}
//控制消息滚动
const scrollMessageList = (direction) => {
  console.log(direction)
}
//消息重新编辑
const inputBox = ref(null)
const reEditMessage = (msg) => (inputBox.value.textContent = msg)
//消息引用
const messageQuote = (msg) => inputBox.value.handleQuoteMessage(msg)
</script>

<template>
  <el-container class="app_container">
    <el-header class="chat_message_header">
      <template v-if="nowPickInfo.chatType === CHAT_TYPE.SINGLE">
        <div v-if="nowPickInfo.userInfo" class="chat_user_box">
          <span class="chat_user_name"> {{ nowPickInfo.userInfo.nickname || nowPickInfo.id }}</span>
          <UserStatus :userStatus="nowPickInfo.userInfo.userStatus" />
        </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'"
              class="load_more_msg"
            >
              <el-link
                v-show="!loadingHistoryMsg"
                :disabled="!isMoreHistoryMsg"
                :underline="false"
                @click="fechHistoryMessage('loadFirst')"
              >
                加载更多
              </el-link>
              <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"
          />
        </div>
      </el-scrollbar>
    </el-main>
    <el-footer class="chat_message_input_bar">
      <InputBox ref="inputBox" :nowPickInfo="nowPickInfo" />
    </el-footer>
  </el-container>
</template>

<style scoped lang="scss">
@import './index.scss';
</style>