ludu-admin-vue3/src/views/im/Message/index.vue

<script setup lang="ts">
import UserStatus from '@/components/UserStatus/index.vue'
import MessageList from './components/messageList/index.vue'
import InputBox from './components/inputBox/index.vue'
/* 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: 1,
  userInfo: {
    nickname: '好友1',
    userStatus: '1'
  },
  groupDetail: {
    name: '',
    affiliations_count: '',
    custom: ''
  }
})

//获取群组详情
const groupDetail = computed(() => {
  return nowPickInfo.value.groupDetail
})
//获取其id对应的消息内容
const messageData = computed(() => [
  {
    type: 'text'
  }
])
/* 消息相关 */
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 === 1">
        <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>
      <template v-if="nowPickInfo.chatType === 2">
        <div v-if="nowPickInfo.groupDetail" class="chat_user_box">
          <span class="chat_user_name">
            {{ groupDetail.name || '' }}
            {{ `(${groupDetail?.affiliations_count || ''})` }}
          </span>
        </div>
        <div v-else class="chat_user_box">
          <span class="chat_user_name">
            {{ groupDetail.name || nowPickInfo.id }}
          </span>
        </div>
      </template>
      <!-- 群组展示抽屉 -->
      <span
        class="more"
        v-if="nowPickInfo.groupDetail && nowPickInfo.chatType === 2"
        @click="handleDrawer"
      >
        <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>
      </span>
      <!-- 单人展示删除拉黑 -->
      <span class="more" v-if="nowPickInfo.chatType === 1">
        <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"
            @scrollMessageList="scrollMessageList"
            @reEditMessage="reEditMessage"
            @messageQuote="messageQuote"
          />
        </div>
      </el-scrollbar>
    </el-main>
    <el-footer class="chat_message_inputbar">
      <InputBox ref="inputBox" :nowPickInfo="nowPickInfo" />
    </el-footer>
    <el-drawer
      v-if="nowPickInfo.chatType === 2"
      v-model="drawer"
      :show-close="false"
      :close-on-click-modal="true"
      direction="rtl"
      :modal="true"
      size="280px"
    >
      <GroupsDetails
        :nowGroupId="nowPickInfo.id"
        :groupDetail="groupDetail"
        @handleDrawer="handleDrawer"
      />
    </el-drawer>
  </el-container>
</template>

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