|
|
@@ -0,0 +1,178 @@
|
|
|
+<template>
|
|
|
+ <div class="global-im">
|
|
|
+ <!-- 悬浮按钮与角标 -->
|
|
|
+ <div class="im-trigger" :class="{ active: visible }" @click="toggleChat">
|
|
|
+ <el-icon :size="18"><el-icon-chat-round /></el-icon>
|
|
|
+ <el-badge :value="unreadCount" :hidden="unreadCount === 0" :max="99">
|
|
|
+ <i class="el-icon-chat-dot-round" style="font-size: 24px"></i>
|
|
|
+ </el-badge>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-drawer v-model="visible" title="在线客服" size="100%" destroy-on-close :close-on-click-modal="false" :with-header="false">
|
|
|
+ <el-container class="flex-column" v-loading="loading">
|
|
|
+ <div class="drawer-detail-main">
|
|
|
+ <div class="drawer-detail-header">
|
|
|
+ <div class="drawer-detail-header-body">
|
|
|
+ <div class="drawer-detail-header-left">在线客服</div>
|
|
|
+ <div class="drawer-detail-header-left">
|
|
|
+ <el-button type="default" icon="el-icon-close" @click="visible=false">隐藏窗口</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-main class="nopadding">
|
|
|
+ <el-container>
|
|
|
+ <el-aside width="200px" v-loading="menuloading">
|
|
|
+
|
|
|
+ </el-aside>
|
|
|
+ <el-container>
|
|
|
+ <el-header><div class="msg-title">与xxx的对话</div></el-header>
|
|
|
+ <el-main class="nopadding" ref="main">
|
|
|
+ <div class="chat-container">
|
|
|
+ <div class="message-list" ref="messageListRef">
|
|
|
+ </div>
|
|
|
+ <div class="input-area">
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ :rows="3"
|
|
|
+ v-model="inputMessage"
|
|
|
+ placeholder="请输入消息..."
|
|
|
+ ></el-input>
|
|
|
+ <el-button type="primary" style="margin-top: 10px;" @click="sendMessage">发送</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
+ <el-aside width="400px">
|
|
|
+ <el-container>
|
|
|
+ <el-header><div class="msg-title">个人资料</div></el-header>
|
|
|
+ </el-container>
|
|
|
+ </el-aside>
|
|
|
+ </el-container>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
+ </el-drawer>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { Push } from "@/utils/push";
|
|
|
+var pushObj = null;
|
|
|
+export default {
|
|
|
+ name: 'GlobalIM',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading:false,
|
|
|
+ visible: false, // 聊天窗口可见性
|
|
|
+ unreadCount: 0, // 未读消息数量
|
|
|
+ inputMessage: '', // 输入的消息
|
|
|
+ timer: null, // 定时器
|
|
|
+ messages: [ // 消息列表
|
|
|
+ { id: 1, name: '系统助手', avatar: '', text: '欢迎使用 SCUI！', time: '10:00', self: false },
|
|
|
+ { id: 2, name: '我', avatar: '', text: '你好，这个全局IM功能不错', time: '10:01', self: true },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ console.log("pushObj")
|
|
|
+ // this.simulateNewMessage()
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ // if (this.timer) {
|
|
|
+ // clearInterval(this.timer)
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 切换聊天窗口
|
|
|
+ toggleChat() {
|
|
|
+ this.visible = !this.visible
|
|
|
+ if (this.visible) {
|
|
|
+ // 打开窗口时清除未读角标
|
|
|
+ this.unreadCount = 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.msg-title{font-size: 18px;font-weight: bold;}
|
|
|
+.global-im {
|
|
|
+ .im-trigger {
|
|
|
+ position: fixed;
|
|
|
+ right: 24px;
|
|
|
+ bottom: 24px;
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ background: #409eff;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
|
|
|
+ z-index: 2000;
|
|
|
+ transition: all 0.3s;
|
|
|
+ color: white;
|
|
|
+ &:hover {
|
|
|
+ transform: scale(1.05);
|
|
|
+ background: #66b1ff;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ background: #909399;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.chat-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100%;
|
|
|
+ .message-list {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ .message-item {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ &.self {
|
|
|
+ flex-direction: row-reverse;
|
|
|
+ .content {
|
|
|
+ margin-right: 12px;
|
|
|
+ align-items: flex-end;
|
|
|
+ .text {
|
|
|
+ background: #95ec69;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.other {
|
|
|
+ .content {
|
|
|
+ margin-left: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ max-width: 70%;
|
|
|
+ .name {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ padding: 8px 12px;
|
|
|
+ background: #f0f0f0;
|
|
|
+ border-radius: 12px;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ font-size: 10px;
|
|
|
+ color: #ccc;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .input-area {
|
|
|
+ padding: 16px;
|
|
|
+ border-top: 1px solid #eee;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
