| | |
| | | <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", |
| | |
| | | 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 }); |
| | | } |
| | | |
| | | // 关闭 |
| | |
| | | }); |
| | | |
| | | mitt.emit("message.scrollToBottom"); |
| | | console.log("消息服务", service); |
| | | |
| | | // 阅读消息 |
| | | service.chat.message.read({ |