fuchengshen
2022-07-15 dfdcca599b595c7340b31ee7cd5878f29a3268eb
src/cool/modules/chat/components/chat.vue
@@ -1,61 +1,67 @@
<template>
   <div class="cl-chat__wrap">
      <!-- 聊天窗口 -->
      <cl-dialog
         v-model="visible"
         :title="title"
         :height="height"
         :width="width"
         :props="{
  <div class="cl-chat__wrap">
    <!-- 聊天窗口 -->
    <cl-dialog v-model="visible"
               :title="title"
               :height="height"
               :width="width"
               :props="{
            modal: true,
            customClass: 'cl-chat__dialog',
            'append-to-body': true,
            'close-on-click-modal': false
         }"
         :controls="['slot-session', 'cl-flex1', 'fullscreen', 'close']"
      >
         <div class="cl-chat">
            <!-- 会话列表 -->
            <chat-session />
               :controls="['slot-session', 'cl-flex1', 'fullscreen', 'close']">
      <div class="cl-chat">
        <!-- 会话列表 -->
        <chat-session />
            <div class="cl-chat__detail">
               <!-- 消息列表 -->
               <chat-message />
        <div class="cl-chat__detail">
          <!-- 消息列表 -->
          <chat-message />
               <template v-if="session">
                  <!-- 输入框 -->
                  <chat-input />
               </template>
            </div>
         </div>
          <template v-if="session">
            <!-- 输入框 -->
            <chat-input />
          </template>
        </div>
      </div>
         <template #slot-session>
            <button v-if="session">
               <i v-if="sessionVisible" class="el-icon-notebook-2" @click="closeSession()"></i>
               <i v-else class="el-icon-arrow-left" @click="openSession()"></i>
            </button>
         </template>
      </cl-dialog>
      <template #slot-session>
        <button v-if="session">
          <i v-if="sessionVisible"
             class="el-icon-notebook-2"
             @click="closeSession()"></i>
          <i v-else
             class="el-icon-arrow-left"
             @click="openSession()"></i>
        </button>
      </template>
    </cl-dialog>
      <!-- MP3 -->
      <div class="mp3">
         <audio :ref="setRefs('sound')" :src="NotifyMp3" controls style="display: none"></audio>
      </div>
   </div>
    <!-- MP3 -->
    <div class="mp3">
      <audio :ref="setRefs('sound')"
             :src="NotifyMp3"
             controls
             style="display: none"></audio>
    </div>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, h, onUnmounted, provide, ref } from "vue";
import { ElNotification } from "element-plus";
import dayjs from "dayjs";
// import io from "socket.io-client";
// import { socketUrl } from "/@/config/env";
import io from "socket.io-client";
import { socketUrl } from "/@/config/env";
import Session from "./session.vue";
import Message from "./message.vue";
import Input from "./input.vue";
import { parseContent } from "../utils";
import { useCool } from "/@/cool";
import NotifyMp3 from "../static/notify.mp3";
// import { io } from "socket.io-client";
export default defineComponent({
   name: "cl-chat",
@@ -102,9 +108,16 @@
         return session.value ? `与 ${session.value.nickname} 聊天中` : "聊天对话框";
      });
      // const socket_ = io("http://127.0.0.1:8001?token=123");
      // socket_.on("comm", (msg: any) => {
      //    console.log(msg, "msg");
      // });
      // 打开
      function open() {
         visible.value = true;
         // socket_.emit("push_web", { 3: "4", 5: session.value.nickname });
      }
      // 关闭
@@ -186,6 +199,7 @@
               });
               mitt.emit("message.scrollToBottom");
               console.log("消息服务", service);
               // 阅读消息
               service.chat.message.read({