dy-admin-manager/src/layout/components/modal/chat-model.vue

<template>
  <!-- v-if="isConnect" -->
  <div class="chat-message">
    <!-- 会话列表界面 -->
    <div class="chat-header">
      <i class="el-icon-close" @click="$listeners.close()"></i>

      <div class="header-card">
        <el-tooltip
          effect="dark"
          content="会话"
          placement="bottom"
          :open-delay="500"
        >
          <i
            class="el-icon-chat-line-round"
            :class="active === 'conversation' && 'active'"
            @click="active = 'conversation'"
          ></i>
        </el-tooltip>
        <el-tooltip
          effect="dark"
          content="联系人"
          placement="bottom"
          :open-delay="500"
        >
          <i
            class="el-icon-user"
            :class="active === 'contacts' && 'active'"
            @click="active = 'contacts'"
          ></i>
        </el-tooltip>
        <el-tooltip
          effect="dark"
          content="班级"
          placement="bottom"
          :open-delay="500"
        >
          <!-- <i
            class="el-icon-menu"
            :class="active === 'class' && 'active'"
            @click="active = 'class'"
          ></i> -->
          <!-- <img src="../imkit/images/class.svg" style="width: 30px;" /> -->
          <svg
            t="1660637972073"
            class="icon icon-class"
            :class="active === 'class' && 'active'"
            @click="active = 'class'"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3853"
            width="30"
            height="30"
          >
            <path
              d="M710.6 592.64c-34.76-35.29-75.26-63.01-120.36-82.39-7.6-3.26-15.28-6.26-23.03-9C616.28 463.21 648 403.29 648 336c0-114.69-92.11-208-205.33-208s-205.33 93.31-205.33 208c0 67.29 31.72 127.21 80.8 165.26-7.75 2.74-15.43 5.74-23.03 9-45.11 19.37-85.6 47.09-120.36 82.39-34.73 35.26-61.99 76.32-81.03 122.04C73.99 762 64 812.23 64 864c0 17.67 14.33 32 32 32s32-14.33 32-32c0-176.45 141.16-320 314.67-320 173.51 0 314.67 143.55 314.67 320 0 17.67 14.33 32 32 32s32-14.33 32-32c0-51.77-9.99-102-29.7-149.32-19.05-45.72-46.32-86.77-81.04-122.04zM301.33 336c0-79.4 63.4-144 141.33-144S584 256.6 584 336s-63.4 144-141.33 144-141.34-64.6-141.34-144z"
              p-id="3854"
              fill="#000000"
            ></path>
            <path
              d="M885.37 599.86c-23.5-32.05-51.65-60.1-83.65-83.36a377.22 377.22 0 0 0-58.05-34.72 208.22 208.22 0 0 0 23.19-35.61c15.09-29.39 23.07-62.54 23.07-95.87 0-83.7-49.16-158.9-125.24-191.57-16.24-6.98-35.06 0.54-42.03 16.77-6.97 16.24 0.54 35.06 16.78 42.03 52.54 22.56 86.49 74.68 86.49 132.77 0 45.62-21.49 88.86-57.55 115.96a31.89 31.89 0 0 0-13.01 17.04c-5.4 16.83 3.87 34.85 20.7 40.24C807.61 565.72 896 688.39 896 828.8c0 17.67 14.33 32 32 32s32-14.33 32-32c0-83.2-25.81-162.36-74.63-228.94z"
              p-id="3855"
              fill="#000000"
            ></path>
          </svg>
        </el-tooltip>
      </div>
    </div>
    <el-container style="margin-top: 56px">
      <el-aside width="280px" style="border-right: 1px solid #f7f7f7;">
        <conversation-list
          ref="conversationList"
          v-show="active === 'conversation'"
        />
        <contacts-list
          ref="contactsList"
          v-show="active === 'contacts'"
          @select="onSelect"
        />
        <class-list
          ref="classList"
          v-show="active === 'class'"
          @select="onSelect"
        />
      </el-aside>
      <!-- 判断是否有会话 -->
      <el-container v-show="currentConversation.targetId">
        <el-main style="padding: 0" id="el-main">
          <message-list ref="messageList"></message-list>
        </el-main>
        <el-footer
          style="height: auto; border-top: 1px solid #f7f7f7; padding: 0 20px;"
        >
          <message-editor ref="messageEditor"></message-editor>
        </el-footer>
      </el-container>
      <el-empty
        v-if="!currentConversation.targetId"
        :image="emptyImg"
        style="width: 100%;height: 100%"
        description=" "
      ></el-empty>
    </el-container>
  </div>
</template>

<script>
import ConversationList from "../components/conversation-list.vue";
import MessageList from "../components/message-list.vue";
import MessageEditor from "../components/message-editor.vue";
import ContactsList from "../components/contacts-list.vue";
import ClassList from "../components/class-list.vue";
import { core, CoreEvent } from "../imkit";
import * as RongIMLib from "@rongcloud/imlib-next";
import { custom_service } from "./chat.js";
import ItemVue from "../Sidebar/Item.vue";
// 接入时需要将 '请更换您应用的 appkey' 替换为您的应用的 appkey
let libOption = { appkey: "c9kqb3rdc451j" };

// 初始化 SDK
core.init({
  service: custom_service,
  libOption: libOption,
  conversationPullCount: 20
});

export default {
  components: {
    ConversationList,
    MessageList,
    MessageEditor,
    ContactsList,
    ClassList
  },
  data() {
    return {
      emptyImg: require("../imkit/images/no-conversation.svg"),
      active: "conversation", // 会话 conversation; 联系人 contacts; 班级 class
      isConnect: false, // 连接中
      currentConversation: {
        channelId: "",
        conversationType: 0,
        targetId: ""
      }
    };
  },
  mounted() {
    core.connect(this.$store.state.user.imToken).then(res => {
      if (res.code === RongIMLib.ErrorCode.SUCCESS) {
        console.log("链接成功, 链接用户 id 为: ", res.data.userId);
        this.isConnect = true;
      } else {
        console.warn("链接失败, code:", res.code);
      }
    });
    core.on(CoreEvent.SWITCH_CONVERSATION, this.switchConversation);

    // 注册消息监听器
    // core.on("tapConversation", function(e) {
    //   console.log("tapConversation", e);
    // });
  },
  methods: {
    onSelect(item) {
      console.log(item, "item");
      core.selectConversation({
        conversationType: item.conversationType,
        targetId: item.targetId,
        channelId: item.channelId
      });
      this.active = "conversation";
    },
    switchConversation(conversation) {
      console.log(conversation, "switchConversation chat-model");
      this.currentConversation = conversation;
    }
  },
  destoryed() {
    core.off(CoreEvent.SWITCH_CONVERSATION, this.switchConversation);
  }
};
</script>

<style lang="scss" scoped>
.chat-message {
  height: 100%;
  display: flex;
}

.chat-header {
  position: absolute;
  left: 0;
  right: 0;
  background: #f7f7f7;
  width: 100%;
  height: 56px;

  .el-icon-close {
    position: absolute;
    top: 0;
    right: 12px;
    line-height: 56px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: #333;
    cursor: pointer;
  }

  .header-card {
    cursor: pointer;
    line-height: 56px;
    text-align: center;
    font-size: 30px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    i,
    .icon-class {
      margin: 0 8px;

      &:hover,
      &.active {
        path {
          fill: #00a79d;
        }
        color: #00a79d;
      }
    }
  }
}

.chat-conversation {
  float: left;
  width: 20vw;
  height: 100%;
  overflow: hidden;
}
.chat-container {
  width: calc(100% - 20vw);
}

.chat-massage-list {
  height: calc(100% - 150px);
}
.chat-massage-editor {
  height: 150px;
}
/deep/.no-data::before {
  background-size: cover;
}
</style>