q

src/App.vue

@@ -1,11 +1,22 @@
 <template>
   <div id="app">
     <router-view />
+    <ChatFloatButton v-if="!showChat" @open="showChat = true" />
+    <ChatPanel v-if="showChat" @close="showChat = false" />
   </div>
 </template>
 
 <script>
+import ChatFloatButton from './layout/components/Chat/ChatFloatButton.vue'
+import ChatPanel from './layout/components/Chat/ChatPanel.vue'
+
 export default {
-  name: 'App'
+  name: 'App',
+  components: { ChatFloatButton, ChatPanel },
+  data() {
+    return {
+      showChat: false
+    }
+  }
 }
 </script>

src/components/GlobalOverlay.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="global-overlay">
+    <slot>
+      <!-- 默认全局浮层内容，可自定义 -->
+      <div class="overlay-content">全局浮层</div>
+    </slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GlobalOverlay'
+}
+</script>
+
+<style scoped>
+.global-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0,0,0,0.2);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+}
+.overlay-content {
+  background: #fff;
+  padding: 32px 48px;
+  border-radius: 8px;
+  box-shadow: 0 2px 16px rgba(0,0,0,0.15);
+  font-size: 20px;
+  color: #333;
+}
+</style> 

src/layout/components/Chat/ChatFloatButton.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="chat-float-button" @click="handleClick">
+    <img class="chat-icon" src="@/assets/chat/chat_line.png" alt="在线会话" />
+    <span class="chat-label">在线会话</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChatFloatButton',
+  methods: {
+    handleClick() {
+      this.$emit('open');
+    }
+  }
+}
+</script>
+
+<style scoped>
+.chat-float-button {
+  position: fixed;
+  right: 30px;
+  bottom: 30px;
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  cursor: pointer;
+  z-index: 9999;
+  border: 1px solid #eee;
+}
+.chat-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+  border-radius: 50%;
+  border: 1px solid #e0e0e0;
+  object-fit: cover;
+}
+.chat-label {
+  font-size: 16px;
+  color: #333;
+}
+</style>

src/layout/components/Chat/ChatPanel.vue

@@ -0,0 +1,4015 @@
+<!-- src/components/ChatPanel.vue -->
+<template>
+    <div class="chat-panel">
+      <div class="chat-header">
+        <img class="chat-icon" src="@/assets/chat/chat_line.png" alt="在线会话" />
+        <span>测试名称</span>
+        <span class="chat-status online"></span>
+        <span class="chat-close" @click="$emit('close')">×</span>
+      </div>
+      <div class="chat-tabs">
+        <span
+          v-for="(tab, idx) in tabs"
+          :key="tab.key"
+          class="tab"
+          :class="{ active: activeTab === idx }"
+          @click="activeTab = idx"
+        >
+          <i :class="tab.icon"></i>
+        </span>
+      </div>
+      <div class="chat-groups">
+        <template v-if="activeTab === 0">
+          <div class="hallLeft">
+          <!--加载中 start------------------------------------------>
+          <div class="hallLeftLoading" v-if="hallLeftLoading">
+            <div class="hallLeftLoadingIcon">
+              <div class="hallLeftLoadingIconItem"><i class="el-icon-loading"></i></div>
+              <div class="hallLeftLoadingText">恒星管理平台</div>
+            </div>
+          </div>
+          <!--加载中 end------------------------------------------>
+          <!--添加好友 start------------------------------------------>
+          <hallTitle :name="tableTitleName" @addUser="creatGroup" />
+          <!--添加好友 end------------------------------------------>
+          <!--搜索 start------------------------------------------>
+          <div class="searchBoxMain">
+            <div class="searchBox">
+              <el-input
+                placeholder="请输入内容"
+                prefix-icon="el-icon-search"
+                v-model="searchConversation"
+                @keyup.enter.native="searchUserConversation"
+              >
+              </el-input>
+            </div>
+            <div class="searchFriendBox" v-if="searchConversationStatus">
+              <div class="searchFriendClose">
+                <div @click="closeSearchConversation" class="rightSlideBoxCloseIcon">
+                  <i class="el-icon-close"></i>
+                </div>
+              </div>
+              <div class="searchFriendItem">
+                <div class="searchFriendAvatar" v-if="selectConversationItem.group_name==null">
+                  <img :src="selectConversationItem.avatar" v-if="selectConversationItem.avatar!=null&&selectConversationItem.avatar!=''">
+                  <img src="@/assets/chat/user/admin.png" v-else>
+                </div>
+                <div class="searchFriendAvatar" v-else>
+                  <img src="@/assets/chat/user/group.jpg">
+                </div>
+                <div class="searchFriendInfo">
+                  <div class="searchFriendName">
+                    <div class="searchFriendNameText" v-if="selectConversationItem.group_name==null">{{selectConversationItem.user_name}}</div>
+                    <div class="searchFriendNameText" v-else>{{selectConversationItem.group_name}}</div>
+                  </div>
+                  <div class="searchFriendPhone" v-if="selectConversationItem.group_name==null">账号：{{selectConversationItem.user_name}}</div>
+                  <div class="searchFriendPhone" v-else>多人群组</div>
+                </div>
+              </div>
+              <div class="searchFriendButton">
+                <el-button type="primary" @click="selectConversation(selectConversationItem)">发送消息</el-button>
+              </div>
+            </div>
+          </div>
+          <!--搜索 end------------------------------------------>
+          <div class="userListBox">
+            <!--会话列表 start------------------------------------------>
+            <div :class="['userItem', item.status === 1 ? 'active' : '']" v-for="item in conversationList" :key="item.receiver_id">
+              <div class="flexItemBox" v-if="item.is_group==0" @click="selectConversation(item)">
+                <!--单聊-->
+                <div class="userAvatar">
+                  <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
+                  <img src="@/assets/chat/user/admin.png" v-else>
+                </div>
+                <div class="userInfo">
+                  <div class="userName">
+                    <div class="userNameText">{{item.user_name}}</div>
+                    <div class="userMessageNum" v-if="item.num>0">{{item.num}}</div>
+                  </div>
+                </div>
+              </div>
+              <!--群聊-->
+              <div class="flexItemBox" v-else @click="selectGroup(item)">
+                <div class="userAvatar">
+                  <img src="@/assets/chat/user/group.jpg">
+                </div>
+                <div class="userInfo">
+                  <div class="userName">
+                    <div class="userNameText">{{item.group_name}}</div>
+                    <div class="userMessageNum" v-if="item.num>0">{{item.num}}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!--会话列表 end------------------------------------------>
+          </div>
+        </div>
+        </template>
+        <template v-else>
+          <div class="hallLeft">
+          <!--添加好友 start------------------------------------------>
+          <contactsTitle :name="tableTitleName" @addUser="addUser" @closeAddUser="closeAddUser" />
+          <!--添加好友 end------------------------------------------>
+          <!--搜索 start------------------------------------------>
+          <div class="searchBox">
+            <el-input
+              placeholder="请输入用户账号"
+              prefix-icon="el-icon-search"
+              v-model="searchUserName"
+              @keyup.enter.native="searchFriend"
+              v-if="pagestatus == 4"
+            >
+            </el-input>
+            <el-input
+              placeholder="请输入好友账号"
+              prefix-icon="el-icon-search"
+              v-model="searchUserListName"
+              @keyup.enter.native="searchOrdFriend"
+              v-if="pagestatus==1||pagestatus==2||pagestatus==3"
+            >
+            </el-input>
+          </div>
+          <!--搜索 end------------------------------------------>
+          <div class="newFriendBox">新的朋友</div>
+          <div class="newFriendImgBox" v-if="pagestatus==4">
+            <div class="newFriendImg">
+              <img src="@/assets/chat/newcontacts.png">
+            </div>
+            <div class="newFriendText" @click="searchFriend">
+              搜索：{{searchUserName}}
+            </div>
+            <div class="searchFriendBox" v-if="searchWindowStatus==true">
+              <div class="searchFriendItem">
+                <div class="searchFriendAvatar">
+                  <img :src="searchFriendList.avatar" v-if="searchFriendList.avatar!=''">
+                  <img src="@/assets/chat/user/admin.png" v-else>
+                </div>
+                <div class="searchFriendInfo">
+                  <div class="searchFriendName">
+                    <div class="searchFriendNameText" v-if="searchFriendList.remark!=null&&searchFriendList.remark!=''">{{searchFriendList.remark}}</div>
+                    <div class="searchFriendNameText" v-else>{{searchFriendList.user_name}}</div>
+                    <!--性别-->
+                    <!-- <div class="gender"><img src="@/assets/chat/girl.png"></div> -->
+                    <!--更多-->
+                    <!-- <img src="@/assets/chat/fi_more.png"> -->
+                  </div>
+                  <div class="searchFriendPhone">账号：{{searchFriendList.user_name}}</div>
+                </div>
+              </div>
+              <!-- <div v-if="searchFriendList.isfriend==0||searchFriendList.isfriend==null"></div>
+              <div class="searchFriendLineBox" v-else @click="openEditWindow">
+                <div class="searchFriendLineTitle">备注</div>
+                <div class="searchFriendLineContent">
+                  <div class="searchFriendLineContentItem">
+                    <div>{{searchFriendList.remark}}</div>
+                    <div><i class="el-icon-edit"></i></div>
+                  </div>
+                </div>
+              </div> -->
+              <!-- <div class="searchFriendLineBox">
+                <div class="searchFriendLineTitle">共同群聊</div>
+                <div class="searchFriendLineContent">0个</div>
+              </div>
+              <div class="searchFriendLineBox">
+                <div class="searchFriendLineTitle">添加方式</div>
+                <div class="searchFriendLineContent">通过账号添加</div>
+              </div> -->
+              <div class="searchFriendButton">
+                <el-button type="primary" v-if="searchFriendList.showBtn==false&&searchFriendList.id!=this.$store.state.user.userid" @click="openAddWindow(searchFriendList.id)">添加到通讯录</el-button>
+                <el-button type="danger" v-else-if="searchFriendList.showBtn==true" @click="deleteFriend(searchFriendList)">删除好友</el-button>
+                <el-button type="primary" disabled v-else>添加到通讯录</el-button>
+              </div>
+              <!-- <div class="searchFriendButton">
+                <div class="searchFriendButtonItem">
+                  <img src="@/assets/chat/sendmessage.png">
+                  <div>发消息</div>
+                </div>
+              </div> -->
+            </div>
+          </div>
+          <div :class="['newFriendImgBox', pagestatus === 2 ? 'newFriendIActive' : '']" @click="tabPage(2)" v-else>
+            <div class="newFriendImg">
+              <img src="@/assets/chat/newcontacts.png">
+            </div>
+            <div class="newFriendText" v-if="pagestatus==4">
+              搜索：{{searchUserName}}
+            </div>
+            <div class="newFriendText" v-else>
+              新的朋友
+              <span v-if="userApplyList.length>0">{{userApplyList.length}}</span>
+            </div>
+          </div>
+          <!--用户列表 start------------------------------------------>
+          <div class="userListBox" v-if="pagestatus==1||pagestatus==2||pagestatus==3">
+            <!-- <div class="userListTitle">A</div> -->
+            <div class="userItem" @click="changeUserItem(item.friend_id)" v-for="(item,index) in userFriendList" :key="index" :class="['userItem', { active: item.status == 1 }]">
+              <div class="userAvatar">
+                <img :src="item.avatar" v-if="item.avatar!=''">
+                <img src="@/assets/chat/user/admin.png" v-else>
+              </div>
+              <div class="userInfo">
+                <div class="userName">
+                  <div class="userNameText" v-if="item.remark!=null">{{item.user_name}}<span v-if="item.remark!=''">({{item.remark}})</span></div>
+                  <div class="userNameText" v-else>{{item.user_name}}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!--用户列表 end------------------------------------------>
+        </div>
+        </template>
+  </div>
+  <el-dialog
+    :visible.sync="showDialog"
+    width="80%"
+    heigth="80%"
+    class="chat-dialog"
+  >
+    <!--右侧菜单 start------------------------------------------------------------>
+        <div class="hallRight">
+          <!--加载中 start-->
+          <div class="hallRightLoading" v-if="hallRightLoading">
+            <div class="hallRightLoadingIcon">
+              <div class="hallRightLoadingIconItem"><i class="el-icon-loading"></i></div>
+              <div class="hallRightLoadingText">恒星管理平台</div>
+            </div>
+          </div>
+          <!--加载中 end-->
+          <div :class="['UserNameBox', groupId ? 'ifNotice' : '']">
+            <div class="userName">{{ messageTitle }}</div>
+            <img src="@/assets/chat/fi_more.png" v-if="groupId!=''" @click="openGroupSystem" class="moreIcon">
+            <div class="groupNotice" v-if="groupId!=''&&groupProfile!=''" @click="groupProfileWindow=true">{{groupProfile}}</div>
+            <div v-if="groupId==''">
+              <div class="shareCardIcon" @click="openShareCard">
+                <i class="el-icon-postcard"></i>
+              </div>
+            </div>
+          </div>
+          <div class="rightPositionBox">
+            <div class="rightUserMessageBox" ref="rightUserMessageBox">
+              <!-- <div class="timeBox">
+                <span>12:40:22</span>
+              </div> -->
+              <div v-for="item in chatrecords" :key="item.id">
+                <!--文字消息类型 对方-->
+                <div class="otherUserMessage" v-if="item.action=='recieved'&&Number(item.msg_type)==1">
+                  <div class="otherUserIcon">
+                    <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
+                    <img src="@/assets/chat/user/admin.png" v-else>
+                  </div>
+                  <div class="otherUserMessageText">
+                    {{item.content}}
+                  </div>
+                </div>
+                <!--文字消息类型 我-->
+                <div class="meUserMessage" v-if="item.action=='said'&&Number(item.msg_type)==1">
+                  <div class="meUserMessageText">
+                    {{item.content}}
+                  </div>
+                  <div class="meUserIcon">
+                    <img :src="item.user_avatar" v-if="item.user_avatar!=null&&item.user_avatar!=''">
+                    <img src="@/assets/chat/user/admin.png" v-else>
+                  </div>
+                </div>
+                <!-- 图片类型 对方-->
+                <div class="otherUserMessage" v-if="item.action=='recieved'&&Number(item.msg_type)==2">
+                  <div class="otherUserIcon">
+                    <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
+                    <img src="@/assets/chat/user/admin.png" v-else>
+                  </div>
+                  <div class="otherUserMessageText">
+                    <div class="messageTypeImage">
+                      <img :src="item.content" @click="imgZoom(item.content)">
+                    </div>
+                  </div>
+                </div>
+                <!-- 图片类型 我-->
+                <div class="meUserMessage" v-if="item.action=='said'&&Number(item.msg_type)==2">
+                  <div class="meUserMessageText">
+                    <div class="messageTypeImage">
+                      <img :src="item.content" @click="imgZoom(item.content)">
+                    </div>
+                  </div>
+                  <div class="meUserIcon">
+                    <img :src="item.user_avatar" v-if="item.user_avatar!=null&&item.user_avatar!=''">
+                    <img src="@/assets/chat/user/admin.png" v-else>
+                  </div>
+                </div>
+                <!--文件类型 对方-->
+                <div class="otherUserMessage" v-if="item.action=='recieved'&&item.msg_type==3">
+                  <div class="otherUserIcon">
+                    <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
+                    <img src="@/assets/chat/user/admin.png" v-else>
+                  </div>
+                  <div class="otherUserMessageText" @click="downloadFile(item)">
+                    <div class="messageTypeFile">
+                      <div class="messageTypeFileTop">
+                        <div class="messageTypeFileInfo">
+                          <div class="messageTypeFileTitle">
+                            {{ JSON.parse(item.content).oldFileName }}
+                          </div>
+                          <div class="messageTypeFileIcon">
+                            <img src="@/assets/chat/file.png"/>
+                          </div>
+                        </div>
+                        <!-- <div class="messageTypeFileSize">20kb</div> -->
+                      </div>
+                      <div class="messageTypeFileLogo">恒星管理平台保护您的电脑安全</div>
+                    </div>
+                  </div>
+                </div>
+                <!--文件类型 我-->
+                <div class="meUserMessage" v-if="item.action=='said'&&Number(item.msg_type)==3">
+                  <div class="meUserMessageText" @click="downloadFile(item)">
+                    <div class="messageTypeFile">
+                      <div class="messageTypeFileTop">
+                        <div class="messageTypeFileInfo">
+                          <div class="messageTypeFileTitle">
+                            {{ JSON.parse(item.content).oldFileName }}
+                          </div>
+                          <div class="messageTypeFileIcon">
+                            <img src="@/assets/chat/file.png"/>
+                          </div>
+                        </div>
+                        <!-- <div class="messageTypeFileSize">20kb</div> -->
+                      </div>
+                      <div class="messageTypeFileLogo">恒星管理平台保护您的电脑安全</div>
+                    </div>
+                  </div>
+                  <div class="meUserIcon">
+                    <img :src="item.user_avatar" v-if="item.user_avatar!=null&&item.user_avatar!=''">
+                    <img src="@/assets/chat/user/admin.png" v-else>
+                  </div>
+                </div>
+                <!--名片 我-->
+                <div class="meUserMessage" v-if="item.action=='said'&&Number(item.msg_type)==4">
+                  <div class="meUserMessageText" @click="addFriend(item.content.split(',')[2])">
+                    <div class="messageTypeCard">
+                      <div class="messageTypeCardTop">
+                        <div class="messageTypeCardIcon">
+                          <!-- <img :src="item.content.split(',')[0]"> -->
+                          <img src="@/assets/chat/user/user.png">
+                        </div>
+                        <div class="messageTypeCardName">{{item.content.split(',')[1]}}</div>
+                      </div>
+                      <div class="messageTypeCardText">
+                        分享个人名片
+                      </div>
+                    </div>
+                  </div>
+                  <div class="meUserIcon">
+                    <img :src="item.user_avatar" v-if="item.user_avatar!=null&&item.user_avatar!=''">
+                    <img src="@/assets/chat/user/admin.png" v-else>
+                  </div>
+                </div>
+                <!--名片 对方-->
+                <div class="otherUserMessage" v-if="item.action=='recieved'&&Number(item.msg_type)==4">
+                  <div class="otherUserIcon">
+                    <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
+                    <img src="@/assets/chat/user/admin.png" v-else>
+                  </div>
+                  <div class="otherUserMessageText" @click="addFriend(item.content.split(',')[2])">
+                    <div class="messageTypeCard">
+                      <div class="messageTypeCardTop">
+                        <div class="messageTypeCardIcon">
+                          <!-- <img :src="item.content.split(',')[0]"> -->
+                          <img src="@/assets/chat/user/user.png">
+                        </div>
+                        <div class="messageTypeCardName">{{item.content.split(',')[1]}}</div>
+                      </div>
+                      <div class="messageTypeCardText">
+                        分享个人名片
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <!--邀请加群 我-->
+                <div class="meUserMessage" v-if="item.action=='said'&&Number(item.msg_type)==6">
+                  <div class="meUserMessageText">
+                    <div class="messageGroupInvite" @click="openGroupInviteWindow(item)">
+                      <div class="messageGroupInviteTop">
+                        <div class="messageGroupInviteIcon">
+                          <img src="@/assets/chat/user/group.jpg">
+                        </div>
+                        <div class="messageGroupInfoText">
+                          <div class="messageGroupInfoTextTitle">邀请你加入群聊</div>
+                          <div class="messageGroupInfoTextTxt">{{item.content.split(',')[0]}}</div>
+                        </div>
+                      </div>
+                      <div class="messageGroupInviteText">
+                        点击加入
+                      </div>
+                    </div>
+                  </div>
+                  <div class="meUserIcon">
+                    <img :src="item.user_avatar" v-if="item.user_avatar!=null&&item.user_avatar!=''">
+                    <img src="@/assets/chat/user/admin.png" v-else>
+                  </div>
+                </div>
+                <!--邀请加群 对方-->
+                <div class="otherUserMessage" v-if="item.action=='recieved'&&Number(item.msg_type)==6">
+                  <div class="otherUserIcon">
+                    <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
+                    <img src="@/assets/chat/user/admin.png" v-else>
+                  </div>
+                  <div class="otherUserMessageText">
+                    <div class="messageGroupInvite" @click="openGroupInviteWindow(item)">
+                      <div class="messageGroupInviteTop">
+                        <div class="messageGroupInviteIcon">
+                          <img src="@/assets/chat/user/group.jpg">
+                        </div>
+                        <div class="messageGroupInfoText">
+                          <div class="messageGroupInfoTextTitle">邀请你加入群聊</div>
+                          <div class="messageGroupInfoTextTxt">{{item.content.split(',')[0]}}</div>
+                        </div>
+                      </div>
+                      <div class="messageGroupInviteText">
+                        点击加入
+                      </div>
+                    </div>
+                  </div>
+                </div>
+  
+              </div>
+            </div>
+            <div class="sendMessageBox">
+              <div class="sendMessageTools">
+                <!--上传文件 start-->
+                <div class="toolsBigBox">
+                  <div class="toolsBox">
+                    <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeImgUpload">
+                      <img src="@/assets/chat/send_img.png">
+                    </el-upload>
+                    <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeFileUpload">
+                      <img src="@/assets/chat/send_file.png">
+                    </el-upload>
+                    <img src="@/assets/chat/send_message.png" @click="fileWindowStatus=true">
+                  </div>
+                </div>
+                <div class="fileBox" v-if="sendMessage.img.imgUrl!=''">
+                  <img :src="sendMessage.img.imgUrl">
+                  <div class="fileBoxText">{{ sendMessage.img.oldFileName }}</div>
+                  <div @click="deFileUpload"><i class="el-icon-close"></i></div>
+                </div>
+                <div class="fileBox" v-if="sendMessage.file.fileUrl!=''">
+                  <img src="@/assets/chat/file.png">
+                  <div class="fileBoxText">{{ sendMessage.file.oldFileName }}</div>
+                  <div @click="deFileUpload"><i class="el-icon-close"></i></div>
+                </div>
+                <!--上传文件 end-->
+              </div>
+              <div class="sendMessageInput">
+                <el-input
+                  type="textarea"
+                  placeholder="请输入内容"
+                  v-model="userMessage"
+                  :rows="4"
+                  resize="none"
+                  maxlength="200"
+                  @keyup.enter.native="sendUserMessage"
+                >
+                </el-input>
+              </div>
+              <div class="sendMessageButton">
+                <el-button v-if="sendMessage.img.imgUrl!=''||sendMessage.file.fileUrl!=''" type="primary" size="medium" @click="sendUserMessageToFile">发送文件 <i class="el-icon-position"></i></el-button>
+                <el-button v-else type="primary" size="medium" @click="sendUserMessage">发送 <i class="el-icon-position"></i></el-button>
+              </div>
+            </div>
+            <!--右侧菜单 start------------------------------------------------------------>
+            <div class="rightSlideBox" v-if="rightSlideBoxShow">
+              <!--关闭按钮-->
+              <div class="rightSlideBoxClose">
+                <div class="rightSlideBoxCloseTitle">群设置</div>
+                <div @click="openGroupSystem" class="rightSlideBoxCloseIcon">
+                  <i class="el-icon-close"></i>
+                </div>
+              </div>
+  
+              <!--2216-->
+              <div class="rightSlideSearch">
+                <div class="searchBox">
+                  <el-input
+                    placeholder="请输入内容"
+                    prefix-icon="el-icon-search"
+                    v-model="searchUser"
+                    @keyup.enter.native="rightSearchUser"
+                  >
+                  </el-input>
+                </div>
+                <!--弹出框-->
+                <div class="searchFriendBox" v-if="groupRightSearchWindow">
+                  <div class="searchFriendClose">
+                    <div @click="closeRightSearchUser" class="rightSlideBoxCloseIcon">
+                      <i class="el-icon-close"></i>
+                    </div>
+                  </div>
+                  <div class="searchFriendItem">
+                    <div class="searchFriendAvatar">
+                      <img :src="groupRightUserInfo.avatar" v-if="groupRightUserInfo.avatar!=null&&groupRightUserInfo.avatar!=''">
+                      <img src="@/assets/chat/user/admin.png" v-else>
+                    </div>
+                    <div class="searchFriendInfo">
+                      <div class="searchFriendName">
+                        <div class="searchFriendNameText">{{groupRightUserInfo.user_name}}</div>
+                      </div>
+                      <div class="searchFriendPhone">账号：{{groupRightUserInfo.user_name}}</div>
+                    </div>
+                  </div>
+                  <div class="searchFriendButton">
+                    <el-button type="primary" v-if="groupRightUserInfo.isFriend==true" @click="searchConversationIfCreate(groupRightUserInfo.user_id)">发送消息</el-button>
+                    <el-button type="primary" v-if="groupRightUserInfo.isFriend==false&&Number(groupRightUserInfo.user_id)!=Number(myUserId)" @click="addFriend(groupRightUserInfo.user_id)">添加好友</el-button>
+                    <el-button type="primary" v-if="groupRightUserInfo.isFriend==false&&Number(groupRightUserInfo.user_id)==Number(myUserId)" disabled>添加好友</el-button>
+                  </div>
+                </div>
+              </div>
+  
+              <div class="rightSlideUserBox">
+                <div class="rightSlideUserItem rightEditUserItem" @click="editGroupMember">
+                  <div class="rightSlideUserItemIcon">
+                    <div class="addUserIcon">
+                      <i class="el-icon-user-solid"></i>
+                    </div>
+                  </div>
+                  <div class="rightSlideUserItemName">
+                    编辑成员
+                  </div>
+                </div>
+                <div class="rightSlideUserItem" v-for="item in groupUserList" :key="item.user_id">
+                  <div class="rightSlideUserItemIcon">
+                    <span class="el-dropdown-link">
+                      <!-- {{ creatorId }} {{ item.user_id }} -->
+                      <div class="rightSlideUserGroupLeader" v-if="creatorId == item.user_id">群主</div>
+                      <div>
+                        <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
+                        <img src="@/assets/chat/user/admin.png" v-else>
+                      </div>
+                    </span>
+                  </div>
+                  <div class="rightSlideUserItemName">
+                    <span v-if="item.user_name!=null">{{item.user_name}}</span>
+                    <span v-else>未知用户</span>
+                  </div>
+                </div>
+              </div>
+              <div class="rightLineBorder"></div>
+              <!--聊天记录 start------------------------------------------------------------>
+              <div class="rightSlideFunction">
+                <div class="rightSlideFunctionItem" @click="fileWindowStatus=true">
+                  <div class="rightSlideFunctionItemText">聊天记录</div>
+                  <div class="rightSlideFunctionItemIcon">
+                    <img src="@/assets/chat/arrow_right.png" alt="">
+                  </div>
+                </div>
+              </div>
+              <!--聊天记录 end------------------------------------------------------------>
+              <!--群聊设置 start------------------------------------------------------------>
+              <div class="rightSlideFunction">
+                <div class="groupSystem">
+                  <div class="groupChatSystem">
+                    <div class="groupChatTitle">群聊名称</div>
+                    <div class="groupChatText">
+                      <div class="groupChatTextContent">{{this.messageTitle}}</div>
+                      <img src="@/assets/chat/editGroup.png" @click="editGroupNameWindow=true">
+                    </div>
+                  </div>
+                  <div class="groupChatSystem">
+                    <div class="groupChatTitle">群公告</div>
+                    <div class="groupChatText" v-if="this.groupProfile!=''">
+                      <div class="groupChatTextContent">{{this.groupProfile}}</div>
+                      <img src="@/assets/chat/editGroup.png" @click="editGroupNoticeWindow=true" v-if="Number(this.myUserId)==Number(this.creatorId)">
+                    </div>
+                    <div class="groupChatText" v-else>
+                      暂无群公告
+                      <img src="@/assets/chat/editGroup.png" @click="editGroupNoticeWindow=true" v-if="Number(this.myUserId)==Number(this.creatorId)">
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <!--群聊设置 end------------------------------------------------------------>
+              <div class="rightSlideFooterBox">
+                <div @click="openShareMyGroup">分享群</div>
+                <div @click="delGroup" v-if="creatorId==myUserId">解散群</div>
+                <div @click="closeGroup" v-else>退出群</div>
+                <div @click="openGroupSystem">关闭</div>
+              </div>
+            </div>
+          </div>
+          <!--右侧菜单 end------------------------------------------>
+        </div>
+    </el-dialog>      
+
+    </div>
+   
+  </template>
+  
+<script>
+  //引入组件
+  import hallTitle from './components/hallTitle.vue';
+  import baseUrl from '@/utils/baseUrl';
+  export default {
+    components: {
+      hallTitle
+    },
+    name: "ChatPanel",
+    data() {
+      return {
+        tabs: [
+          { key: "user", icon: "el-icon-user" },
+          { key: "user-solid", icon: "el-icon-user-solid" }
+        ],
+        activeTab: 0,
+        groupList: [
+          { name: "分组A1", count: 3 },
+          { name: "分组A2", count: 2 }
+        ],
+        contactList: [
+          { username: "张三", online: true },
+          { username: "李四", online: false }
+        ],
+        showDialog:false,
+         //1.全局配置 start---------------------------------------->
+         myUserId:'',//我的用户id
+        tableTitleName:'聊天列表',//左侧菜单标题
+        messageTitle:'',//当前的聊天名称
+        editMessageTitle:'',//正在编辑的聊天名称  
+        groupProfile:'',//当前的群公告
+        editGroupProfile:'',//正在编辑的群公告
+        groupProfileWindow:false,//群公告弹出框
+        listTimeOut:null,//定时器
+        addFriendWindowStatus:false,//添加好友弹出框
+        addform:{
+          friend_id:'',//好友id
+          remark:'',//备注名
+        },
+        formLabelWidth:'100px',
+        imgZoomStatus:false,//图片放大框
+        imgZoomUrl:'',//图片放大框的图片地址
+        //1.全局配置 end---------------------------------------->
+  
+        //2.会话列表 start---------------------------------------->
+        hallLeftLoading:false,//左侧加载中
+        hallRightLoading:false,//右侧加载中
+        conversationList:[],//会话列表
+        groupConversationList:[],//群聊会话列表
+        selectConversationItem:{},//选择会话
+        searchConversationStatus:false,//搜索会话状态
+        chatrecords:[],//聊天记录
+        ifTop:false,//是否为置顶
+        searchConversation:'',//搜索会话
+        //2.会话列表 end---------------------------------------->
+  
+        //3.聊天记录 start---------------------------------------->
+        receiverId:'',//接收消息的id
+        receiverType:'',//接收消息的类型 1单聊 2群聊
+        ifNoMessage:true,//如果没有选择任何聊天记录
+        searchChatRecords:"",//搜索聊天记录
+        userMessage:'',//用户发送的消息
+        fileWindowStatus:false,//聊天记录弹出框是否显示
+        activeName: 'all',//聊天记录选项卡
+        time:'',//按照时间搜索
+        //3.聊天记录 end---------------------------------------->
+  
+        //4.群聊 start---------------------------------------->
+        //4.1 创建群聊
+        groupWindowStatus:false,//添加聊天群组出框是否显示
+        groupFriendsWindowStatus:false,//创建群聊时搜索框
+        friendsList:[],//左侧好友列表
+        searchFriendGroup:'',//搜索群聊的输入框绑定值
+        groupFriendSearchUser:{},//编辑群时搜索群成员 用于显示搜索结果
+        //4.2 加入群聊
+        addGroupWindow:false,//加入群聊弹出框
+        //4.2 编辑群聊
+        groupId:'',//当前编辑的群聊的id
+        creatorId:'',//群主id
+        groupUserList:[],//群成员列表
+        groupInfo:{},//群设置信息
+        groupSearchUser:{},//编辑群时搜索群成员 用于显示搜索结果
+        rightSlideBoxShow:false,//右侧菜单是否显示
+        searchGroup:'',//搜索群聊的输入框绑定值
+        editGroupNoticeWindow:false,//编辑群公告弹出框
+        editGroupNameWindow:false,//编辑群名称弹出框
+        groupEditWindowStatus:false,//编辑群成员弹出框
+        groupEditMainWindowStatus:false,//编辑弹框中搜索人员
+        searchUser:"",//右侧菜单的搜索框
+        groupRightUserInfo:{},//直接从右侧群组菜单中搜索成员
+        groupRightSearchWindow:false,//右侧群组详情弹出框
+        //shareGroupMessage:"",//分享群聊的消息
+        shareGroupWindowStatus:false,//分享群聊弹出框
+        shareGroupActive:'friend',//分享名片选项卡
+        shareGroupId:'',//要分享给谁
+        useShareGroupInfo:{},//分享名片时选中的群组信息
+        groupInviteInfo:{},//群邀请信息
+        //4.群聊 end---------------------------------------->
+  
+        //6.名片 start---------------------------------------->
+        //userCardMessage:'',//用户留言
+        userCardWindowStatus:false,//用户名片弹出框
+        shareTableActive:'friend',//分享名片选项卡
+        useShareUserId:'',//分享名片时选中的用户id
+        useShareUserInfo:{},//分享名片时选中的用户信息
+        //6.名片 end---------------------------------------->
+  
+        //7.加好友 start---------------------------------------->
+        addUserWindowStatus:false,//添加用户弹出框是否显示
+        form:{
+          //好友申请
+          addUserForm:{
+            notes:"",//备注
+            nickname:"",//修改昵称
+          }
+        },
+        //7.加好友 end---------------------------------------->
+  
+        //8.发消息 start---------------------------------------->
+        sendMessage:{
+          img:{
+            imgUrl:'',//图片地址
+            oldFileName:"",//文件名
+          },
+          file:{
+            fileUrl:'',
+            oldFileName:"",//文件名
+          }
+        },
+
+
+        //1.全局配置 start------------------------------------------------------------>
+        tableTitleName:'通讯录',
+        pagestatus:1,//1=没有选择任何联系人 2=申请列表 3=好友详情 4=搜索结果
+        formLabelWidth:"100px",//表单label宽度
+        searchUserName:"",//搜索新添加用户
+        searchUserListName:"",//搜索好友列表
+        friendId:"",//要添加的好友id
+        friendWindowStatus:false,//通过朋友申请弹出框
+        searchWindowStatus:false,//搜索窗口左侧弹出框
+        searchUserWindowStatus:false,//搜索好友列表弹出框
+        editWindowStatus:false,//修改备注弹出框
+        addFriendWindowStatus:false,//发送好友申请弹出框
+        editFriendId:"",//要编辑的好友
+        getFriendApplyListStatus:null,//获取好友申请列表状态
+        //1.全局配置 end------------------------------------------------------------>
+        //2.好友列表 start------------------------------------------------------------>
+        userFriendList:[],//好友列表
+        userApplyList:[],//好友申请列表
+        searchFriendList:"",//搜索好友列表
+        //2.好友列表 end------------------------------------------------------------>
+        //3.通过好友申请 start------------------------------------------------------------>
+        form:{
+          //好友的用户id
+          id:"",
+          //好友id
+          friend_id:"",
+          //好友申请
+          remark:"",
+          //状态
+          status:2,
+          //申请id
+          apply_id:""
+        },
+        //3.通过好友申请 end------------------------------------------------------------>
+        //4.编辑好友 start------------------------------------------------------------>
+        friendInfo:{},//好友信息
+        remark:"",//修改的用户备注
+        //4.编辑好友 end------------------------------------------------------------>
+        //5.发送好友申请 start------------------------------------------------------------>
+        addform:{
+          //好友id
+          friend_id:"",
+          //好友申请
+          remark:"",
+        },
+      };
+    },
+    methods: {
+      //1.会话列表 start---------------------------------------->
+      //1.1获取会话列表
+      getConversationList(){
+        this.$store.dispatch('chat/getConversation',{}).then(res=> {
+          console.log(res)
+          let data = res.data;
+          for(let item of data){
+            item.status = 0; //默认未选中
+          }
+          this.conversationList = data;
+          
+          this.hallLeftLoading = false;
+        }).catch(() => {
+          this.$message.error('获取会话列表失败!')
+        })
+      },
+      //1.2选择会话
+      selectConversation(item){
+        this.showDialog = true;
+        console.log(item)
+        //选择会话的时候开启loading框
+        this.hallRightLoading = true;
+        //关闭右侧详情框
+        this.closeRightDetailWindow();
+        //使用receiverId判断当前是哪个会话
+        this.receiverId = item.receiver_id;
+        //会话类型 = 1 单聊
+        this.receiverType = 1;
+        //分享名片时需要使用用户的头像和名称
+        this.useShareUserInfo = item;
+        //关闭搜索会话搜索框
+        this.closeSearchConversation();
+        //清理单聊状态
+        this.conversationList.forEach(conversation => {
+          conversation.status = (conversation.receiver_id === item.receiver_id) ? 1 : 0;
+          if(conversation.receiver_id === item.receiver_id){
+            //当前的聊天名称
+            this.messageTitle = item.user_name;
+          }
+        });
+        //console.log(this.conversationList)
+        this.getchatrecords(item.receiver_id);
+        //关闭没有选择任何聊天的界面
+        this.ifNoMessage = false;
+        //选择单聊的时候把群聊的id清空
+        this.groupId = '';
+      },
+      //1.3获取聊天记录
+      getchatrecords(user_id){
+        //此处增加一个show_id 用于后端判断如何积累未读消息 注意，选择group的方法在下面
+        this.$store.dispatch('chat/getChatRecords',{friend_id:user_id}).then(res=> {
+          console.log(res)
+          this.chatrecords = res.data.data;
+          //滚动条滚动到底部
+          this.scorllBottom();
+          console.log(this.chatrecords)
+          //选择会话后关闭loading框
+          this.hallRightLoading = false;
+        }).catch(() => {
+          this.$message.error('获取聊天记录失败!')
+          //选择会话后关闭loading框
+          this.hallRightLoading = false;
+        })
+      },
+      //1.4搜索会话
+      searchUserConversation(){
+        this.selectConversationItem = {};
+        let flag = false; //是否找到会话
+        //当group_name等于搜索内容的时候，选择会话
+        for(let item of this.conversationList){
+          if(item.group_name==this.searchConversation||item.user_name==this.searchConversation){
+            this.selectConversationItem = item;
+            flag = true;
+          }
+        }
+        //如果没有找到会话 就提示没有找到
+        if(!flag){
+          this.$message.error('没有找到该会话!')
+        }else{
+          this.searchConversationStatus = true;
+        }
+      },
+      //1.5关闭搜索会话
+      closeSearchConversation(){
+        this.selectConversationItem = {};
+        this.searchConversationStatus = false;
+      },
+      //1.6 搜索并定位聊天记录
+      searchChatRecordsUser() {
+        // 获取输入的内容
+        const searchTerm = this.searchChatRecords.toLowerCase();
+        // 查找匹配的消息
+        const matchingItem = this.chatrecords.find(item => {
+          return item.content.toLowerCase().includes(searchTerm);
+        });
+  
+        // 如果找到匹配的消息，滚动到该消息
+        if (matchingItem) {
+          const index = this.chatrecords.indexOf(matchingItem);
+          this.$nextTick(() => {
+            const messageElements = this.$refs.fileWindowMessageScrollBox.children;
+            if (messageElements[index]) {
+              messageElements[index].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+            }
+          });
+        } else {
+          this.$message.error('聊天信息不存在！'); // 提示用户
+        }
+      },
+      //1.7 从通讯录进入会话大厅
+      retrieveSession(){
+        console.log("开始执行retrieveSession方法！")
+        //1.获取会话列表
+        this.$store.dispatch('chat/getConversation',{}).then(res=> {
+          //2.查询当前会话中是否已经存在该好友的会话
+          let data = res.data;
+          let SeleteItem = {};
+          let flag = false;//对话是否已经存在
+          for(let item of data){
+            //3.如果会话中含有该好友的会话，则选中该会话
+            if(item.receiver_id == this.$route.query.friend_id){
+              item.status = 1;
+              SeleteItem = item;
+              flag = true;
+            }else{
+              item.status = 0;
+            }
+          }
+          //4.更新会话列表
+          this.conversationList = data;
+          //5.判断对话是否已经在会话列表中存在
+          if(flag==true){
+            console.log("会话存在！选中会话！")
+            //6.如果存在，则选中该会话
+            this.selectConversation(SeleteItem)
+          }else{
+            console.log("会话不存在！创建单聊！")
+            //7.如果不存在，则创建单聊
+            this.createSession();
+          }
+          //8.循环更新会话列表
+          this.forSearchConversationList();
+        }).catch(() => {
+          this.$message.error('获取会话列表失败!')
+        })
+      },
+      //1.8 创建单聊
+      createSession(){
+        //console.log(this.$route.query.friend_id)
+        const currentDateTime = new Date();
+        const formattedDateTime = currentDateTime.toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' });
+        console.log("当前时间（北京时间）:", formattedDateTime);
+        const message = { 
+          talk_type:1,//当前的会话类型
+          //receiver_id:this.$route.query.friend_id,//当前的会话id
+          receiver_id:this.createMessageId,//当前的会话id
+          content:"我于" + formattedDateTime + "创建了一个会话",//用户发发送的消息
+          msg_type:1,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
+        };
+        //console.log(message)
+        //发送消息
+        let that = this;
+        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+          //打开左侧loading防止重复点击
+          this.hallLeftLoading = true;
+          this.ws.send(JSON.stringify(message));
+  
+          //bug
+          //如果双方不是好友，此处可以弹出错误
+  
+          //2秒后搜索会话列表 防止创建失败
+          setTimeout(() => {
+            that.$store.dispatch('chat/getConversation',{}).then(res=> {
+              //查询当前会话中是否已经存在该好友的会话
+              let data = res.data;
+              let SeleteItem = {};
+              let flag = false;//对话是否已经存在
+              for(let item of data){
+                //如果会话中含有该好友的会话，则选中该会话
+                if(item.receiver_id == this.createMessageId){
+                  item.status = 1;
+                  SeleteItem = item;
+                  flag = true;
+                }else{
+                  item.status = 0;
+                }
+              }
+              //更新会话列表
+              that.conversationList = data;
+              //关闭loading层
+              that.hallLeftLoading = false;
+              //判断对话是否已经在会话列表中存在
+              if(flag==true){
+                //如果存在，则选中该会话
+                that.selectConversation(SeleteItem)
+              }else{
+                that.$message.error('创建会话失败，请重新从通讯录发起会话！')
+              }
+              
+            }).catch(() => {
+              that.$message.error('获取会话列表失败!')
+            })
+          }, 2000);
+  
+        }else{
+          this.$message.error('WebSocket连接失败!创建会话失败！')
+        }
+      },
+      //1.9 循环更新会话列表
+      forSearchConversationList(){
+        let that = this;
+        this.listTimeOut = setInterval(() => {
+          //刷新时先判断是否有选中的会话
+          if(that.receiverId!=''){
+            //如果不为空,说明用户选择了某一个会话，此时需要修改会话列表中该会话的状态
+            this.$store.dispatch('chat/getConversation',{}).then(res=> {
+              console.log(res)
+              let data = res.data;
+              for(let item of data){
+                if(item.receiver_id==that.receiverId){
+                  item.status = 1;
+                }else{
+                  item.status = 0;
+                }
+              }
+              this.conversationList = data;
+              console.log("开始获取会话列表，将于8秒后再次获取！")
+            }).catch(() => {
+              this.$message.error('获取会话列表失败!')
+            })
+  
+          }else{
+            //如果为空，说明用户没有选择任何会话，此时可以直接请求列表
+            that.getConversationList();
+          }
+        }, 7000);
+      },
+      //1.10 查询会话列表中是否存在会话，不存在就创建
+      searchConversationIfCreate(user_id){
+        //从会话列表中找到receiver_id于user_id相同的会话
+        let flag = false;
+        for(let item of this.conversationList){
+          if(item.receiver_id==user_id){
+            flag = true;
+          }
+        }
+        //第一种情况：两人是好友，且会话已经创建了
+        if(flag){
+          //给与右侧展示列表的id
+          this.groupRightUserInfo.receiver_id = String(user_id);
+          this.groupRightUserInfo.user_id = String(user_id);
+          this.selectConversation(this.groupRightUserInfo)
+          this.rightSlideBoxShow = false;
+          this.groupRightSearchWindow = false;
+        }else{
+          //第二种情况：两人是好友但是不存在对话
+          //console.log("不存在这个会话，创建单聊")
+          this.createMessageId = user_id;
+          this.createSession();
+        }
+      },
+      //1.会话列表 end---------------------------------------->
+  
+      //2.群聊 start---------------------------------------->
+      //2.1 创建群聊
+      //2.1.1 打开群聊创建窗口
+      creatGroup(){
+        this.groupWindowStatus = true;
+        //获得好友列表
+        this.getFriendsList();
+      },
+      //2.1.2 左侧菜单获取好友列表
+      getFriendsList(){
+        this.$store.dispatch('chat/getFriendsList',{user_id:this.myUserId}).then(res=> {
+          console.log(res)
+          for(let item of res.data){
+            item.status = false; //默认未选中
+          }
+          this.friendsList = res.data;
+        }).catch(() => {
+          this.$message.error('获取好友列表失败!')
+        })
+      },
+      //2.1.3 左侧菜单取消选择好友
+      cancelSelectFriends(id){
+        this.friendsList.forEach(item => {
+          if(item.id == id){
+            item.status = false;
+          }
+        });
+      },
+      //2.1.4 清空并关闭创建群弹出框
+      clearCreatGroupWindow(){
+        this.friendsList.forEach(item => {
+          item.status = false;
+        });
+        this.groupWindowStatus = false;
+      },
+      //2.1.5 创建群
+      createForGroup(){
+        let data = {
+          group_name:"",//群聊名称
+          group_desc:"仅群主可以修改",//群聊公告
+          group_avatar:"",//群聊头像
+          group_member:""//群成员
+        }
+        //从friendsList找出用户选择的联系人，然后创建群组
+        //先把我自己放进去
+        data.group_member = this.myUserId + ",";
+        //然后循环添加其他用户
+        this.friendsList.forEach(item => {
+          if(item.status){
+            data.group_member += item.friend_id + ",";
+          }
+          data.group_name = this.friendsList
+            .filter(item => item.status)
+            .slice(0, 3) // 只取前三个
+            .map(item => item.remark !== null ? item.remark : item.user_name)
+            .join(", ") // 使用逗号和空格分隔
+        });
+        data.group_member = data.group_member.slice(0,-1);//掉最后一个字符
+  
+        //console.log(data)
+        this.$store.dispatch('chat/addGroup',data).then(res=> {
+          this.$message.success('创建群聊成功!')
+          //完成后关闭弹出框
+          this.clearCreatGroupWindow();
+          //重新获取会话列表
+          this.getConversationList();
+        }).catch(() => {
+          this.$message.error('创建群聊失败!')
+        })
+      },
+      //2.1.6 建群时搜索群成员
+      searchFriendGroupUser(){
+        this.groupFriendSearchUser = {};
+        let flag = false; //是否找到成员
+        for(let item of this.friendsList){
+          if(item.user_name==this.searchFriendGroup||item.remark==this.searchFriendGroup){
+            this.groupFriendSearchUser = item;
+            flag = true;
+          }
+        }
+        console.log(this.searchGroup)
+        console.log(this.friendsList)
+        console.log(flag)
+  
+        console.log(this.groupFriendSearchUser)
+        //this.searchGroup 搜索的内容
+        //this.groupEditWindowStatus 弹出框状态
+        //this.groupSearchUser 搜索出来的成员
+        if(!flag){
+          this.$message.error('没有找到该成员!')
+        }else{
+          this.groupFriendsWindowStatus = true;
+        }
+      },
+      //2.1.7 把用户添加到选择框里面
+      addSearchFriendWindow(){
+        this.groupFriendSearchUser.status=!this.groupFriendSearchUser.status;
+        this.closeSearchFriendWindow();
+      },
+      //2.1.7 关闭搜索弹出框
+      closeSearchFriendWindow(){
+        this.groupFriendsWindowStatus = false;
+      },
+  
+      //2.2 选择群聊
+      //2.1.1 在会话列表中选择一个群聊
+      selectGroup(item){
+        //选择会话的时候开启loading框
+        this.hallRightLoading = true;
+        //关闭右侧详情框
+        this.closeRightDetailWindow();
+        //使用receiverId判断当前是哪个会话
+        this.receiverId = item.receiver_id;
+        //会话类型 = 2 群聊
+        this.receiverType = 2;
+        //分享群聊时需要使用群名称和群id
+        this.useShareGroupInfo = item;
+        console.log("选择群聊")
+        //清理单聊状态
+        this.conversationList.forEach(conversation => {
+          conversation.status = (conversation.receiver_id === item.receiver_id) ? 1 : 0;
+        });
+        console.log(item)
+        //记录准备加入群聊的id
+        this.groupId = item.receiver_id;
+        //当前的聊天名称
+        this.messageTitle = item.group_name;
+        //关闭没有选择任何聊天的界面
+        this.ifNoMessage = false;
+        //获取群聊天信息
+        this.getGroupChatRecords(item.receiver_id);
+        //获取群设置信息
+        this.getGroupSystem(item.receiver_id);
+        //获取群成员
+        this.getGroupMember(item.receiver_id);
+      },
+      //2.1.2 获取群聊消息
+      getGroupChatRecords(group_id){
+        this.$store.dispatch('chat/getGroupChatRecords',{group_id:group_id}).then(res=> {
+          console.log(res)
+          this.chatrecords = res.data.data;
+          //滚动条滚动到底部
+          this.scorllBottom();
+          //选择会话的时候开启loading框
+          this.hallRightLoading = false;
+  
+        }).catch(() => {
+          this.$message.error('获取群设置信息失败!');
+          //选择会话的时候开启loading框
+          this.hallRightLoading = false;
+        })
+      },
+  
+      //2.3 编辑群聊
+      //2.3.1 打开右侧菜单设置窗口
+      openGroupSystem(){
+        this.rightSlideBoxShow = !this.rightSlideBoxShow;
+      },
+      //2.3.2 获取群设置群成员
+      getGroupMember(group_id){
+        this.$store.dispatch('chat/getGroupMembers',{group_id:group_id}).then(res=> {
+          for(let item of res.data){
+            item.status = true; //默认选中
+          }
+          this.groupUserList = res.data;
+        }).catch(() => {
+          this.$message.error('获取群成员信息失败!')
+        })
+      },
+      //2.3.3 获取群设置信息
+      getGroupSystem(group_id){
+        this.$store.dispatch('chat/getGroupInfo',{group_id:group_id}).then(res=> {
+          console.log(res)
+          this.groupInfo = res.data;
+          this.creatorId = res.data.creator_id;
+          this.messageTitle = res.data.group_name;
+          this.editMessageTitle = res.data.group_name;
+          if(res.data.profile==null){
+            this.groupProfile = "暂无群公告"
+          }else{
+            this.groupProfile = res.data.profile;
+            this.editGroupProfile = res.data.profile;
+          }
+          
+        }).catch(() => {
+          this.$message.error('获取群设置信息失败!')
+        })
+      },
+      //2.3.4 右侧菜单退出群聊
+      closeGroup(){
+        this.$confirm('将要退出该群聊，确定吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning' 
+        }).then(() => {
+          //this.groupId
+          this.$store.dispatch('chat/quitGroup',{group_id:this.groupId}).then(res=> {
+            this.$message.success('退出群聊成功!')
+            //关闭右侧菜单
+            this.rightSlideBoxShow = false;
+            //关闭右侧聊天界面
+            this.ifNoMessage = true;
+            //重新请求会话列表
+            this.getConversationList();
+  
+          }).catch(() => {
+            this.$message.error('群聊退出失败!')
+          })
+        }).catch(() => {
+          this.$message.warning('已取消退出')
+        });
+      },
+      //2.3.5 右侧菜单删除群聊
+      delGroup(){
+        this.$confirm('将要解散该群聊，确定吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning' 
+        }).then(() => {
+          //this.groupId
+          this.$store.dispatch('chat/delGroup',{group_id:this.groupId}).then(res=> {
+            this.$message.success('已解散群聊!')
+            //关闭右侧菜单
+            this.rightSlideBoxShow = false;
+            //关闭右侧聊天界面
+            this.ifNoMessage = true;
+            //重新请求会话列表
+            this.getConversationList();
+  
+          }).catch(() => {
+            this.$message.error('解散群聊失败!')
+          })
+        }).catch(() => {
+          this.$message.warning('已取消解散')
+        });
+      },
+      //2.3.6 右侧菜单编辑群名称
+      editGroupName(){
+        let data = {
+          group_id:this.groupId,
+          group_name:this.editMessageTitle//群名称
+        }
+        this.$store.dispatch('chat/updateGroup',data).then(res=> {
+          this.$message.success('成功修改群聊名称！');
+          //重新获取群详情
+          this.getGroupSystem(this.groupId);
+          //重新获取会话列表
+          this.getConversationList();
+          this.editGroupNameWindow = false;
+        }).catch(() => {
+          this.$message.error('修改群聊名称失败!')
+        })
+      },
+      //2.3.7 右侧菜单编辑群公告
+      editGroupNotice(){
+        let data = {
+          group_id:this.groupId,
+          profile:this.editGroupProfile//群公告
+        }
+        this.$store.dispatch('chat/updateGroup',data).then(res=> {
+          this.editGroupNoticeWindow = false;
+          this.$message.success('成功添加群公告')
+          //重新获取群详情
+          this.getGroupSystem(this.groupId)
+          
+        }).catch(() => {
+          this.$message.error('编辑群公告失败!')
+        })
+      },
+      //2.3.8 群弹出框回显群内成员
+      editGroupMember(){
+        //1.打开编辑窗口
+        this.groupEditWindowStatus = true;
+        //2.获得好友列表
+        this.$store.dispatch('chat/getFriendsList',{user_id:this.myUserId}).then(res=> {
+          //3.设置成未选中
+          for(let item of res.data){
+            item.status = false; //默认未选中
+          }
+          this.friendsList = res.data;
+          console.log(this.friendsList)
+          console.log(this.groupUserList)
+          //4.判断一下groupUserList是否包含friendsList中的成员，如果包含，就把friendsList中的成员status设置为true
+          this.friendsList.forEach(item => {
+            console.log(item.user_id)
+            if(this.groupUserList.find(groupItem => groupItem.user_id == item.friend_id)){
+              item.status = true;
+            }
+          });
+          console.log(this.friendsList)
+        }).catch(() => {
+          this.$message.error('获取好友列表失败!')
+        })
+      },
+      //2.3.9 群弹出框编辑群成员
+      changeSelectFriends(item) {
+        // 检查 groupUserList 是否包含 item
+        const index = this.groupUserList.findIndex(i => i.user_id == item.friend_id);
+        // 如果包含，就删除这个 item；否则，添加到 groupUserList
+        // 注意不能直接把friend_id放进去,因为最后编辑保存的时候取的是user_id,这里要传一下值
+        if (index !== -1) {
+          this.groupUserList.splice(index, 1);
+        } else {
+          item.user_id = item.friend_id;
+          this.groupUserList.push(item);
+        }
+      },
+      //2.3.19 群弹出框取消编辑群成员
+      cancelEditGroupMember(){
+        this.groupEditWindowStatus = false;
+        this.getGroupMember(this.groupId);
+      },
+      //2.3.20 群弹出框保存编辑群成员
+      saveEditGroupMember(){
+        let groupUser = []
+        
+        // console.log(this.myUserId)
+        // console.log(this.groupUserList)
+        //取出所有选择的user_id且不能与自己的id相同
+        for(let item of this.groupUserList){
+          if(Number(item.user_id) != Number(this.myUserId)){
+            groupUser.push(item.user_id);
+          }
+        }
+        groupUser = groupUser.join(',');
+        //console.log(groupUser)
+        let data = {
+          group_id:this.groupId,
+          group_member:groupUser
+        }
+        this.$store.dispatch('chat/updateGroupMembers',data).then(res=> {
+          this.$message.success('群成员保存成功!')
+          this.groupEditWindowStatus = false;
+          this.getGroupMember(this.groupId);
+        }).catch(() => {
+          this.$message.error('群成员保存失败!')
+          this.groupEditWindowStatus = false;
+          this.getGroupMember(this.groupId);
+        })
+      },
+      //2.3.21 群弹出框搜索群成员
+      searchGroupUser(){
+        this.groupSearchUser = {};
+        let flag = false; //是否找到成员
+        for(let item of this.friendsList){
+          if(item.user_name==this.searchGroup||item.remark==this.searchGroup){
+            this.groupSearchUser = item;
+            flag = true;
+          }
+        }
+        console.log(this.searchGroup)
+        console.log(this.friendsList)
+        console.log(flag)
+        //this.searchGroup 搜索的内容
+        //this.groupEditWindowStatus 弹出框状态
+        //this.groupSearchUser 搜索出来的成员
+        if(!flag){
+          this.$message.error('没有找到该成员!')
+        }else{
+          this.groupEditMainWindowStatus = true;
+        }
+  
+      },
+      //2.3.22 群弹出框添加群成员
+      addGroupUser(item){
+        item.user_id = item.friend_id;
+        console.log(item)
+        //找到friendsList中的该成员，把status设置为相反的值
+        for(let item of this.friendsList){
+          if(item.user_id==this.groupSearchUser.user_id){
+            item.status = !item.status;
+          }
+        }
+        // 找到groupUserList中是否存在该成员，如果存在就删除，没有不存在就添加
+        const index = this.groupUserList.findIndex(member => member.user_id === item.user_id);
+        if (index !== -1) {
+          // 如果存在，删除该成员
+          this.groupUserList.splice(index, 1);
+        } else {
+          // 如果不存在，添加该成员
+          this.groupUserList.push(item);
+        }
+        //完成后关闭弹出框
+        this.closeAddGroupUserWindow();
+      },
+      //2.3.23 群弹出框关闭弹出框
+      closeAddGroupUserWindow(){
+        this.searchGroup = "";
+        this.groupSearchUser = {};
+        this.groupEditMainWindowStatus = false;
+      },
+      //2.3.24 群弹出框移除群成员
+      editRemoveGroupUser(id){
+        console.log(id)
+        //移除this.groupUserList中user_id与id一致的
+        const index = this.groupUserList.findIndex(member => member.user_id === id);
+        if (index !== -1) {
+          this.groupUserList.splice(index, 1);
+        }
+        //找到friendsList中user_id与id一致的，把status设置为false
+        for(let item of this.friendsList){
+          if(item.friend_id==id){
+            item.status = false;
+          }
+        }
+      },
+      //2.3.25 右侧菜单编辑成员
+      rightSearchUser(){
+        this.groupRightUserInfo = {};
+        let flag = false; //是否找到成员
+        for(let item of this.groupUserList){
+          if(item.user_name==this.searchUser||item.remark==this.searchUser){
+            this.groupRightUserInfo = item;
+            flag = true;
+          }
+        }
+        console.log(this.searchUser)
+        console.log(this.groupUserList)
+        console.log(flag)
+        //this.searchGroup 搜索的内容
+        //this.groupEditWindowStatus 弹出框状态
+        //this.groupSearchUser 搜索出来的成员
+        if(!flag){
+          this.$message.error('没有找到该成员!')
+        }else{
+          //找到这个成员以后，需要先验证一下他俩是不是好友
+          this.$store.dispatch('chat/isFriend',{friend_id:this.groupRightUserInfo.user_id}).then(res=> {
+            console.log(res.data)//true false
+            this.groupRightUserInfo.isFriend = res.data;
+            //打开弹出框
+            this.groupRightSearchWindow = true;
+          }).catch(() => {
+            this.$message.error('获取成员身份信息失败!')
+          })
+        }
+      },
+      //2.3.26 关闭弹出框
+      closeRightSearchUser(){
+        this.searchUser = "";
+        this.groupRightUserInfo = {};
+        this.groupRightSearchWindow = false;
+      },
+  
+      //2.4 加入群聊
+      //2.4.1 打开群聊邀请窗口
+      openGroupInviteWindow(info){
+        this.addGroupWindow = true;
+        //info.content.split(',')[0] 群名称
+        //info.content.split(',')[1] 群id
+        //获得要加入的群聊详情
+        console.log(info.content)
+        this.groupInviteInfo.group_name = info.content.split(',')[0];
+        this.groupInviteInfo.group_id = info.content.split(',')[1];
+      },
+      //2.4.2 加入群聊
+      joinGroup(){
+        this.$store.dispatch('chat/joinGroup',{group_id:this.groupInviteInfo.group_id}).then(res=> {
+          if(res.code=='200'){
+            this.$message.success('加入群聊成功!')
+            this.addGroupWindow = false;
+          }else{
+            this.$message.error(res.message)
+          }
+        }).catch(() => {
+          this.$message.error('加入群聊失败!')
+        })
+      },
+      //2.4.3 打开分享群聊弹出框
+      openShareMyGroup(){
+        //群组聊天数据初始化
+        this.groupConversationList = [];
+        //打开名片弹出框
+        this.shareGroupWindowStatus = true;
+        // shareGroupWindowStatus:false,//分享群聊弹出框
+        // shareGroupActive:'friend',//分享名片选项卡
+        // shareGroupId:'',//要分享的群聊id
+        // useShareGroupInfo:{},//分享名片时选中的群组信息
+        //默认获取一下好友列表
+        this.getFriendsList();
+        //把群聊提出来单独放到一个数组
+        for(let item of this.conversationList){
+          if(item.is_group==1){
+            this.groupConversationList.push(item);
+          }
+        }
+      },
+      //2.4.4 分享群聊
+      shareMyGroup(){
+        console.log(this.shareGroupId)
+        if(this.shareGroupId!=''){
+          let message = {};
+          console.log(this.useShareGroupInfo)
+          let userInfo = [this.useShareGroupInfo.group_name,this.useShareGroupInfo.receiver_id];
+          let userInfoString = userInfo.join(',');
+          
+          if(this.shareGroupActive=='friend'){
+            //单聊
+            message = { 
+              talk_type:1,
+              receiver_id:this.shareGroupId,
+              msg_type:6,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
+            };
+            message.content = userInfoString;
+          }else if(this.shareGroupActive=='group'){
+            //群聊
+            message = { 
+              talk_type:2,
+              receiver_id:this.shareGroupId,
+              content:userInfo,
+              msg_type:6,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
+            };
+            message.content = userInfoString;
+          }
+  
+          console.log(message)
+          //发送消息
+          if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify(message));
+          }
+          //关闭分享弹出框
+          this.shareGroupWindowStatus = false;
+          this.$message.success('分享名片成功!')
+        }else{
+          this.$message.error('请选择分享对象!')
+        }
+      },
+      handleClickShareGroupCard(tab, event) {
+        const tabName = tab.name;
+        console.log("当前选中的tab name:", tabName);
+        this.shareGroupActive = tabName;
+      },
+      //2.4.5 判断该成员是否在群聊中
+      isGroupUser(id){
+        let flag = false;
+        for(let item of this.groupUserList){
+          if(item.user_id==id){
+            flag = true;
+          }
+        }
+        return flag;
+      },
+      //2.群聊 end---------------------------------------->
+  
+      //3.全局应用 start---------------------------------------->
+      //3.1 滚动条滚动到底部
+      scorllBottom(){
+        //滚动条滚动到底部
+        this.$nextTick(() => {
+          const rightUserMessageBox = this.$refs.rightUserMessageBox;
+          if (rightUserMessageBox) {
+            rightUserMessageBox.scrollTop = rightUserMessageBox.scrollHeight;
+          }
+        });
+      },
+      //3.2 添加好友
+      addFriend(id){
+        console.log(id)
+        this.addFriendWindowStatus = true;
+        this.addform.friend_id = id;
+      },
+      addMyFriend(){
+        this.$store.dispatch('chat/addFriend',this.addform).then(res=> {
+          if(res.code=='200'){
+            this.$message.success("好友申请发送成功！")
+            this.addFriendWindowStatus = false;
+          }else{
+            //this.$message.error(res.data)
+            this.$message.error(res.message)
+          }
+        })
+      },
+      //3.3 关闭右侧详情框
+      closeRightDetailWindow(){
+        this.rightSlideBoxShow = false;
+        this.groupRightSearchWindow = false;
+        this.searchUser = "";
+      },
+      //3.全局应用 end---------------------------------------->
+      
+      //4.会话框 start---------------------------------------->
+      //4.1上传
+      //4.1.1上传图片
+      beforeImgUpload(file) {
+        //先清理一下上传的缩略窗口
+        this.deFileUpload()
+        const isJPG = file.type === 'image/jpeg';
+        const isPNG = file.type === 'image/png';
+        const isLt2M = file.size / 1024 / 1024 < 2;
+  
+        if (!isJPG && !isPNG) {
+          this.$message.error('发送的图片只能是 JPG 或 PNG 格式!');
+          return false;
+        }
+        if (!isLt2M) {
+          this.$message.error('发送的图片大小不能超过 2MB!');
+          return false;
+        }
+  
+        const formData = new FormData();
+        formData.append('file', file);
+  
+        this.$store.dispatch('pool/uploadFile',formData).then(res=> {
+          this.sendMessage.img.imgUrl = res.data.imgUrl;//获取上传的图片地址
+          this.sendMessage.img.oldFileName = res.data.oldFileName;
+          console.log(res.data.imgUrl)
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '网络错误，请重试！'
+          });
+        })
+  
+        // 阻止默认的上传行为
+        return false;
+      },
+      //4.1.2上传文件
+      beforeFileUpload(file) {
+        //先清理一下上传的缩略窗口
+        this.deFileUpload()
+        console.log(file)
+        //允许的文件类型
+        const isDoc = file.type === 'application/msword';
+        const isDocx = file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
+        const isXls = file.type === 'application/vnd.ms-excel';
+        const isXlsx = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+        const isPptx = file.type === 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
+        const isRar = file.type === 'application/x-rar-compressed';
+        const isZip = file.type === 'application/x-zip-compressed';
+        const isTxt = file.type === 'text/plain';
+        const isPdf = file.type === 'application/pdf';
+        //文件大小不能超过2M
+        const isLt2M = file.size / 1024 / 1024 < 2;
+  
+        if (!isTxt && !isDoc && !isDocx && !isXls && !isXlsx && !isPptx && !isRar && !isZip && !isPdf) {
+          this.$message.error('该文件类型不允许上传!');
+          return false;
+        }
+        if (!isLt2M) {
+          this.$message.error('发送的文件大小不能超过2M！');
+          return false;
+        }
+  
+        const formData = new FormData();
+        formData.append('file', file);
+  
+        this.$store.dispatch('pool/uploadFile',formData).then(res=> {
+          this.sendMessage.file.fileUrl = res.data.imgUrl;
+          this.sendMessage.file.oldFileName = res.data.oldFileName;
+          console.log(res.data)
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '网络错误，请重试！'
+          });
+        })
+  
+        // 阻止默认的上传行为
+        return false;
+      },
+      //4.1.3 删除上传的文件
+      deFileUpload(){
+        this.sendMessage.img.imgUrl = "";
+        this.sendMessage.img.oldFileName = "";
+        this.sendMessage.file.fileUrl = "";
+        this.sendMessage.file.oldFileName = "";
+      },
+      //4.会话框 end---------------------------------------->
+      
+      //5.websocket会话 start---------------------------------------->
+      //5.1 接受消息
+      handleIncomingMessage(event) {
+        const message = JSON.parse(event.data);
+        console.log("监听消息：",message)
+  
+        console.log(message.receiver_id.length == 18)
+        //第一步：先判断是否为群消息
+        if (message.receiver_id && message.receiver_id.length == 18) {
+          //第二步：判断当前接收的消息是否显示到聊天框中
+          if(Number(this.receiverId)==Number(message.receiver_id)){
+            console.log("当前消息为群消息，并且可以显示到当前的会话框中！")
+            //18位就是群聊
+            if(Number(this.myUserId) == Number(message.user_id)){
+              //如果message的receiverId和会话的receiverId一致，说明这条信息是自己发的回显
+              let receiveMessage = {
+                action:"said",//自己说的
+                user_avatar:message.user_avatar,//头像
+                content:message.content,//内容
+                msg_type:message.msg_type,//消息类型
+              }
+              console.log("来自单聊的回显消息:"+this.receiverId,message.receiver_id)
+              console.log(message)
+              //消息添加到聊天记录
+              this.chatrecords.push(receiveMessage);
+              // 确保 Vue 能够检测到数组的变化
+              //this.$set(this.chatrecords, this.chatrecords.length, receiveMessage);
+              console.log(this.chatrecords)
+              //滚动条滚动到底部
+              this.scorllBottom();
+            }else{
+              let receiveMessage = {
+                action:"recieved",//对方说的
+                receiver_avatar:message.user_avatar,//头像
+                content:message.content,//内容
+                msg_type:message.msg_type,//消息类型
+              }
+              //如果message的receiverId和会话的receiverId不一致，说明这条信息是别人发的，需要添加到聊天记录
+              //消息添加到聊天记录
+              console.log("来自单聊消息:"+this.receiverId,message.user_id)
+              this.chatrecords.push(receiveMessage);
+              console.log(message)
+              //滚动条滚动到底部
+              this.scorllBottom();
+            }
+          }else{
+            console.log("当前消息为群消息，但是用户未开启此聊天窗口！")
+          }
+        }else{
+          //当前的单聊消息是自己发的，回显到聊天框中
+          if(Number(this.receiverId)==Number(message.receiver_id)){
+            //如果message的receiverId和会话的receiverId一致，说明这条信息是自己发的回显
+            let receiveMessage = {
+              action:"said",//自己说的
+              user_avatar:message.user_avatar,//头像
+              content:message.content,//内容
+              msg_type:message.msg_type,//消息类型
+            }
+            console.log("来自单聊的回显消息:"+this.receiverId,message.receiver_id)
+            console.log(message)
+            //消息添加到聊天记录
+            this.chatrecords.push(receiveMessage);
+            // 确保 Vue 能够检测到数组的变化
+            //this.$set(this.chatrecords, this.chatrecords.length, receiveMessage);
+            console.log(this.chatrecords)
+            //滚动条滚动到底部
+            this.scorllBottom();
+          }else{
+            //判断要回显的内容是不是在群聊
+            if(Number(message.receiver_id.length) == 18){
+              console.log("当前是单聊消息，你选择的是单聊框，可以回显！")
+              let receiveMessage = {
+                action:"recieved",//对方说的
+                receiver_avatar:message.user_avatar,//头像
+                content:message.content,//内容
+                msg_type:message.msg_type,//消息类型
+              }
+              console.log("来自单聊的回显消息:"+this.receiverId,message.receiver_id)
+              console.log(message)
+              //消息添加到聊天记录
+              this.chatrecords.push(receiveMessage);
+              // 确保 Vue 能够检测到数组的变化
+              //this.$set(this.chatrecords, this.chatrecords.length, receiveMessage);
+              console.log(this.chatrecords)
+              //滚动条滚动到底部
+              this.scorllBottom();
+            }else{
+              // console.log(this.receiverId)
+              // console.log(message.receiver_id,message.user_id)
+              // console.log("当前是单聊消息，但是你选择的是群聊框，该条消息不能回显！")
+              if(this.receiverId!=message.receiver_id&&this.receiverId!=message.user_id){
+                //收到单聊消息，但是单聊消息不属于当前的聊天窗口
+                console.log("当前单聊消息不属于当前的聊天窗口，不回显！")
+              }else{
+                if(this.receiverId==message.user_id){
+                  console.log("当前单聊消息属于当前的聊天窗口，回显！")
+                  let receiveMessage = {
+                    action:"recieved",//对方说的
+                    receiver_avatar:message.user_avatar,//头像
+                    content:message.content,//内容
+                    msg_type:message.msg_type,//消息类型
+                  }
+                  console.log("来自单聊的回显消息:"+this.receiverId,message.receiver_id)
+                  console.log(message)
+                  //消息添加到聊天记录
+                  this.chatrecords.push(receiveMessage);
+                  // 确保 Vue 能够检测到数组的变化
+                  //this.$set(this.chatrecords, this.chatrecords.length, receiveMessage);
+                  console.log(this.chatrecords)
+                  //滚动条滚动到底部
+                  this.scorllBottom();
+                }
+              }
+            } 
+  
+  
+            
+          }
+        }
+      },
+      // 5.2 发送消息
+      sendUserMessage() {
+        if (this.userMessage.trim() !== '') {
+          const message = { 
+            talk_type:this.receiverType,//当前的会话类型
+            receiver_id:this.receiverId,//当前的会话id
+            content:this.userMessage,//用户发发送的消息
+            msg_type:1,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
+          };
+          //发送消息
+          if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify(message));
+          }
+          this.userMessage = '';
+        }else{
+          this.$message.error('消息不能为空！')
+        }
+      },
+      // 5.3 发送图片或者文字
+      sendUserMessageToFile() {
+        if(this.sendMessage.img.imgUrl!=''){
+          const message = { 
+            talk_type:this.receiverType,//当前的会话类型
+            receiver_id:this.receiverId,//当前的会话id
+            content:this.sendMessage.img.imgUrl,//用户发发送的消息
+            msg_type:2,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
+          };
+          if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify(message));
+            //发送完毕清除选择的图片
+            this.sendMessage.img.imgUrl='';
+          }
+          //如果文本框不为空，把文本框内的消息也提交过去
+          if(this.userMessage.trim()!=''){
+            this.sendUserMessage();
+          }
+        }
+        if(this.sendMessage.file.fileUrl!=''){
+          //把名称和地址打包成一个对象
+          const fileInfo = {
+            file_url:this.sendMessage.file.fileUrl,
+            oldFileName:this.sendMessage.file.oldFileName
+          }
+          const fileInfoString = JSON.stringify(fileInfo);
+          //发送消息
+          const message = { 
+            talk_type:this.receiverType,//当前的会话类型
+            receiver_id:this.receiverId,//当前的会话id
+            content:fileInfoString,//用户发发送的消息
+            msg_type:3,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
+          };
+          if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify(message));
+            //发送完毕清除选择的文件
+            this.sendMessage.file.fileUrl='';
+          }
+          //如果文本框不为空，把文本框内的消息也提交过去
+          if(this.userMessage.trim()!=''){
+            this.sendUserMessage();
+          }
+        }
+      },
+      //5.4 打开名片弹出框
+      openShareCard(){
+        //群组聊天数据初始化
+        this.groupConversationList = [];
+        //打开名片弹出框
+        this.userCardWindowStatus = true;
+        //默认获取一下好友列表
+        this.getFriendsList();
+        //好友列表
+        //this.friendsList 
+        //会话列表
+        //this.conversationList
+        //把群聊提出来单独放到一个数组
+        //this.groupConversationList
+        for(let item of this.conversationList){
+          if(item.is_group==1){
+            this.groupConversationList.push(item);
+          }
+        }
+      },
+      //5.5 分享名片
+      shareCard(){
+        console.log(this.useShareUserId)
+        if(this.useShareUserId!=''){
+          let message = {};
+          // let userInfo = {
+          //   avatar:this.useShareUserInfo.avatar,
+          //   user_name:this.useShareUserInfo.user_name,
+          //   friend_id:this.receiverId
+          // }
+          let userInfo = [this.useShareUserInfo.avatar,this.useShareUserInfo.user_name,this.receiverId];
+          let userInfoString = userInfo.join(',');
+          
+          if(this.shareTableActive=='friend'){
+            //单聊
+            message = { 
+              talk_type:1,
+              receiver_id:this.useShareUserId,
+              msg_type:4,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
+            };
+            message.content = userInfoString;
+          }else if(this.shareTableActive=='group'){
+            //群聊
+            message = { 
+              talk_type:2,
+              receiver_id:this.useShareUserId,
+              content:userInfo,
+              msg_type:4,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
+            };
+            message.content = userInfoString;
+          }
+          // console.log(typeof message.content)
+          // console.log(message.content)
+          // console.log(message)
+          //发送消息
+          if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify(message));
+          }
+          //关闭分享弹出框
+          this.userCardWindowStatus = false;
+          this.$message.success('分享名片成功!')
+        }else{
+          this.$message.error('请选择分享对象!')
+        }
+      },
+      //5.6 切换分享名片
+      handleClickShareCard(tab, event) {
+        const tabName = tab.name;
+        console.log("当前选中的tab name:", tabName);
+        this.shareTableActive = tabName;
+      },
+      //5.7 下载文件
+      downloadFile(item){
+        let downloadData = JSON.parse(item.content);
+        console.log(downloadData.file_url)
+        if(downloadData.file_url!=''){
+          const link = document.createElement('a');
+          link.href = downloadData.file_url;
+          link.setAttribute('download', 'downloaded_file'); // You can set a default file name here
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+        }else{
+          this.$message.error('文件下载失败！')
+        }
+      },
+      //5.8 图片放大
+      imgZoom(url){
+        this.imgZoomUrl = url;
+        this.imgZoomStatus = true;
+      },
+      //5.9 创建链接 防止websocket意外中断
+      getWebsocket(){
+        //判断当前的route是否为/hall，否则不触发这个方法
+        if(this.$route.path=="/hall"){
+          this.$confirm('您的会话意外断开，是否重新连接？', '提示', {
+            confirmButtonText: '重新连接',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            //强制刷新页面
+            window.location.reload();
+          }).catch(() => {
+            //取消刷新
+            this.$message.error("您的连接已中断！")
+          });
+        }else{
+          console.log("前往其他页面，关闭ws！")
+        }
+      },
+      //5.websocket会话 end---------------------------------------->
+
+            //0.全局操作 start------------------------------------------------------------>
+      //0.1切换页面状态
+      tabPage(status){
+        this.pagestatus = status;
+        if(status==2){
+          //如果是2 好友列表状态还原
+          for(let item of this.userFriendList){
+            item.status = 0;
+          }
+        }
+        this.getFriendApplyList();
+      },
+      //0.全局操作 end------------------------------------------------------------>
+      //1.好友列表 start------------------------------------------------------------>
+      addUser(){
+        this.pagestatus = 4;
+      },
+      closeAddUser(){
+        this.pagestatus = 2;
+        this.searchWindowStatus = false;
+      },
+      //1.1获取联系人列表
+      getUserFriendList(){
+        //获取用户身份id
+        //const userId = this.$store.state.user.userid;
+        this.$store.dispatch('chat/getFriendsList',{}).then(res=> {
+          let data = res.data;
+          for(let item of data){
+            item.status = 0; //默认未选中
+          }
+          this.userFriendList = data;
+        }).catch(() => {
+          this.$message.error('获取好友列表失败!')
+        })
+      },
+      //1.2选择联系人
+      changeUserItem(id){
+        for(let item of this.userFriendList){
+          if(item.friend_id == id){
+            item.status = 1;
+          }else{
+            item.status = 0;
+          }
+        }
+        //切换页面到用户列表
+        this.pagestatus = 3;
+        //把要编辑的好友的id存起来
+        this.editFriendId = id;
+  
+        // console.log(id)
+        // console.log(this.userFriendList)
+        //获取好友身份信息详情
+        this.$store.dispatch('chat/getFriendInfo',{friend_id:this.editFriendId}).then(res=> {
+          console.log(res)
+          //保存好友信息
+          this.friendInfo = res.data;
+          this.remark = res.data.remark;
+        }).catch(() => {
+          this.$message.error('获得好友身份详情失败!')
+        })
+  
+      },
+      //1.3搜索联系人
+      searchFriend(){
+        //搜索联系人
+        this.$store.dispatch('chat/searchFriend',{keyword:this.searchUserName}).then(res=> {
+          //获取到好友
+          this.searchWindowStatus = false;
+          console.log(res);
+          if(res.code==200){
+            if(res.data.length>0){
+              this.searchWindowStatus = true;
+              this.searchFriendList = res.data[0];
+              //搜出来以后查询两人是否为好友
+              this.searchIsFriend(this.searchFriendList)
+  
+            }else{
+              this.$message.error('没有找到该联系人!')
+            }
+          }else{
+            this.$message.error('搜索关键字不能为空!')
+          }
+        })
+      },
+      //1.3搜索好友列表中的好友
+      searchOrdFriend(){
+        if(this.searchUserListName==""){
+          this.$message.error('搜索关键字不能为空!')
+          return;
+        }else{
+          let isFriend = false;
+          for(let item of this.userFriendList){
+            if(item.user_name == this.searchUserListName){
+              isFriend = true;
+              this.searchFriendList = item;
+            }
+          }
+          if(isFriend){
+            this.changeUserItem(this.searchFriendList.friend_id)
+            //console.log(this.searchFriendList);
+          }else{
+            this.$message.error('没有找到该联系人!')
+          }
+        }
+      },
+      //1.好友列表 end------------------------------------------------------------>
+  
+      //2.获得好友申请列表 start------------------------------------------------------------>
+      //2.1 好友申请列表
+      getFriendApplyList(){
+        console.log("获取好友申请列表");
+        const userId = this.$store.state.user.userid;
+        this.$store.dispatch('chat/getFriendsApplyList',{user_id:userId}).then(res=> {
+          this.userApplyList = res.data;
+        }).catch(() => {
+          this.$message.error('获取好友申请列表失败!')
+        })
+      },
+      
+      //2.2 接受好友申请
+      addFriend(){
+        //通过用户申请
+        console.log(this.form);
+        this.$store.dispatch('chat/applyFriend',this.form).then(res=> {
+          if(res.code==200){
+            this.$message.success('成功添加好友!')
+            this.friendWindowStatus = false;
+            //重新加载用户列表
+            this.getUserFriendList();
+            //清空右侧
+            this.friendInfo = {};
+            //this.pagestatus = 1;
+            this.getFriendApplyListStatus();
+          }
+        })
+      },
+      
+      //2.3 删除好友
+      deleteFriend(id){
+        console.log(id);
+        if(id){
+          this.editFriendId = String(id);
+        }
+        console.log(id)
+        this.$confirm('此操作将永久删除该联系人, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          console.log(this.editFriendId);
+          this.$store.dispatch('chat/delFriend',{friend_id:this.editFriendId}).then(res=> {
+            this.$message.success('删除成功!')
+            //关闭用户详情显示
+            this.pagestatus = 1;
+            //重新装在用户列表
+            this.getUserFriendList();
+          })
+        }).catch(() => {
+          this.$message({
+            type: 'warning',
+            message: '已取消删除'
+          });
+        });
+      },
+      //2.4 编辑好友
+      editFriend(){
+        let data = {
+          friend_id:this.editFriendId,
+          remark:this.remark
+        }
+        //this.editFriendId
+        this.$store.dispatch('chat/updateFriend',data).then(res=> {
+          if(res.code==200){
+            this.$message.success('修改备注名成功!')
+            this.pagestatus = 1;
+            this.editWindowStatus = false;
+            this.getUserFriendList();
+            this.remark = "";
+          }else{
+            this.$message.error(res.message)
+          }
+        }).catch(() => {
+          this.$message.error('修改备注名失败!')
+        })
+      },
+      //2.5 发送好友申请
+      addMyFriend(){
+        console.log(this.addform);
+        this.$store.dispatch('chat/addFriend',this.addform).then(res=> {
+          this.$message.success("已成功发送好友申请！")
+          this.addFriendWindowStatus = false;
+          this.searchWindowStatus = false;
+          this.addform.remark = "";
+        })
+      },
+      //2.6 查询是否是好友
+      searchIsFriend(item){
+        let data = {
+          friend_id:item.isfriend
+        }
+        console.log(data);
+        this.$store.dispatch('chat/isFriend',data).then(res=>{
+          console.log(res);
+          if(res.code==0&&res.message=="不是好友"){
+            this.searchFriendList.showBtn = false;
+          }else{
+            this.searchFriendList.showBtn = true;
+          }
+          this.$forceUpdate();
+        })
+      },
+      //2.7 定时查询好友申请状态
+      setTimeFriendApplyList(){
+        console.log("定时查询好友申请状态");
+        let that = this;
+        this.getFriendApplyListStatus = setInterval(()=>{
+          that.getFriendApplyList();
+        },5000)
+      },
+      //2.获得好友申请列表 end------------------------------------------------------------>
+  
+      //3.操作弹出框 start------------------------------------------------------------>
+      //用户菜单操作
+      openWindow(item){
+        this.form.id = item.id;
+        this.form.friend_id = item.friend_id;
+        this.friendInfo = item;
+        //打开弹出框
+        this.friendWindowStatus = true;
+      },
+      openEditWindow(id){
+        //打开修改备注弹出框
+        this.editWindowStatus = true;
+      },
+      openAddWindow(id){
+        console.log(id);
+        this.addform.friend_id = String(id);
+        this.addFriendWindowStatus = true;
+      },
+      //发送消息
+      sendMessage(friendInfo){
+        console.log(friendInfo);
+        //带着friend_id跳转到hall页面
+        this.$router.push({
+          path:'/hall',
+          query:{friend_id:friendInfo.friend_id}
+        }); 
+      },
+    },
+    mounted() {
+      console.log("=====fuck")
+      //开启websocket连接 start---------------------------------------->
+      //1.获取admin-token
+      const adminToken = document.cookie.split('; ').find(row => row.startsWith('Admin-Token=')).split('=')[1];
+      console.log("Admin-Token:", adminToken);
+  
+      //2.连接websocket 
+      let websocketNewUrl = baseUrl.WebsocketUrl +"?token=" + adminToken;
+      //let websocketNewUrl = URL.WebsocketUrl +"?token=" + adminToken;
+      this.ws = new WebSocket(websocketNewUrl);
+      this.ws.addEventListener('message', this.handleIncomingMessage);
+  
+      //3.当连接中断时提供一个方法重新连接
+      let that = this;
+  
+      //当连接关闭的时候关闭websocket
+      this.ws.addEventListener('close', function (event) {
+        // 连接关闭时执行的操作
+        console.log("关闭链接",event);
+        // 弹窗询问用户是否手动刷新
+        // that.getWebsocket();
+      });
+      
+      //开启websocket连接 end---------------------------------------->
+  
+      //从通讯录创建单聊 start---------------------------------------->
+      //当ws创建成功以后再执行，防止数据未加载
+      this.ws.onopen = () => {
+        console.log("ws创建成功!");
+        console.log(this.$route.query.friend_id)
+        //判断当前路由是否携带friend_id
+        if(this.$route.query.friend_id){
+          console.log("从通讯录进入，开始创建会话！")
+          //1.从通讯录进入会话大厅
+          this.retrieveSession();
+          //2.获取我的用户id
+          this.myUserId = this.$store.state.user.userid;
+          //把这个id存一下
+          this.createMessageId = this.$route.query.friend_id;
+          
+        }else{
+          console.log("直接进入，无需创建会话！")
+          //直接进入会话大厅
+          //1.获取会话列表
+          this.getConversationList();
+          //2.获取我的用户id
+          this.myUserId = this.$store.state.user.userid;
+          //3.循环获取会话列表
+          //开启loading
+          this.hallLeftLoading = true;
+          this.forSearchConversationList();
+        }
+      };
+      //从通讯录创建单聊 end---------------------------------------->
+    },
+    beforeDestroy() {
+      //页面销毁的时候清除定时器获取列表
+      clearInterval(this.listTimeOut);
+      //页面销毁的时候关闭websocket
+      if (this.ws) {
+        this.ws.removeEventListener('message', this.handleIncomingMessage);
+        this.ws.close();
+      }
+    }
+  };
+  </script>
+  
+  <style scoped lang="less">
+  .chat-panel {
+    position: fixed;
+    right: 30px;
+    bottom: 30px;
+    width: 270px;
+    height: 520px;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 16px rgba(0,0,0,0.18);
+    z-index: 10000;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  .chat-header {
+    height: 48px;
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    background: #f5f5f5;
+    border-bottom: 1px solid #eee;
+    position: relative;
+  }
+  .chat-header .chat-status {
+    width: 8px;
+    height: 8px;
+    background: #4caf50;
+    border-radius: 50%;
+    margin-left: 8px;
+  }
+  .chat-header .chat-close {
+    position: absolute;
+    right: 16px;
+    cursor: pointer;
+    font-size: 20px;
+  }
+  .chat-header .chat-icon {
+    width: 24px;
+    height: 24px;
+    margin-right: 8px;
+  }
+  .chat-tabs {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0;
+    border-bottom: 1px solid #eee;
+    height: 44px;
+  }
+  .tab {
+    flex: 1;
+    text-align: center;
+    font-size: 20px;
+    cursor: pointer;
+    color: #888;
+    padding: 12px 0;
+    transition: color 0.2s, border-bottom 0.2s;
+    border-bottom: 2px solid transparent;
+  }
+  .tab.active {
+    color: #409EFF;
+    border-bottom: 2px solid #409EFF;
+  }
+  .chat-groups {
+    flex: 1;
+
+    padding: 16px;
+    overflow-y: auto;
+  }
+  .group {
+    margin-bottom: 12px;
+    font-size: 16px;
+    color: #333;
+    cursor: pointer;
+  }
+  .chat-footer {
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    border-top: 1px solid #eee;
+    background: #fafafa;
+  }
+  .footer-icon {
+    font-size: 22px;
+    cursor: pointer;
+  }
+  .contact {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    font-size: 16px;
+    color: #333;
+  }
+  .status {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    display: inline-block;
+  }
+  .status.online {
+    background: #4caf50;
+  }
+  .status.offline {
+    background: #ccc;
+  }
+    //左侧
+    .hallLeft {
+        // width: 420px;
+        background: #fff;
+        border-radius: 20px;
+        margin-right: 20px;
+        position: relative;
+        .newFriendBox {
+          padding: 10px 25px 0 25px;
+          font-size: 18px;
+          color: #999;
+        }
+        .newFriendImgBox {
+          margin: 10px 0 10px 0;
+          padding: 20px 0 20px 25px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          cursor: pointer;
+          border-bottom: 1px solid #E9EDF7;
+          position: relative;
+          box-sizing: border-box;
+          border-right: 4px solid #fff;
+          .newFriendImg {
+            width: 58px;
+            height: 58px;
+            border-radius: 8px;
+            background: #5570F1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 20px;
+          }
+          .newFriendText {  
+            color: #333;
+            font-size: 18px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            flex: 1;
+            span {
+              background: #5570F1;
+              color: #fff;
+              line-height: 24px;
+              font-size: 12px;
+              width: 24px;
+              height: 24px;
+              text-align: center;
+              border-radius: 50%;
+              display: block;
+              margin-right: 20px;
+            }
+          }
+        }
+        .newFriendIActive {
+          border-right: 4px solid #5570F1 !important;
+          background: #F5F7FD
+        }
+        .searchFriendBox {
+          position: absolute;
+          width: 280px;
+          border-radius: 8px;
+          top: 0;
+          right: -300px;
+          background: #fff;
+          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+          border-radius: 8px;
+          z-index: 100;
+          box-sizing: border-box;
+          padding: 30px 0;
+          .searchFriendItem {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            border-bottom: 1px solid #E9EDF7;
+            padding: 0 20px 30px 20px;
+            .searchFriendAvatar {
+              img {
+                width: 66px;
+                height: 66px;
+                border-radius: 50%;
+              }
+              margin-right: 15px;
+            }
+            .searchFriendInfo {
+              flex: 1;
+              .searchFriendName {
+                display: flex;
+                align-items: center;
+                .gender {
+                  img {
+                    width: 12px;
+                    height: 12px;
+                  }
+                }
+                img {
+                  width: 18px;
+                  height: 18px;
+                  cursor: pointer;
+                }
+                .searchFriendNameText {
+                  font-size: 18px;
+                  width: 120px;
+                  height: 28px;
+                  line-height: 28px;
+                  white-space: nowrap; 
+                  overflow: hidden; 
+                  text-overflow: ellipsis;
+                }
+              }
+              .searchFriendPhone {
+                font-size: 14px;
+                color: #999;
+                margin-top: 10px;
+              }
+            }
+          }
+          .searchFriendLineBox {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            padding: 20px;
+            border-bottom: 1px solid #E9EDF7;
+            .searchFriendLineTitle{
+              font-size: 16px;
+              color: #999999;
+              width: 90px;
+            }
+            .searchFriendLineContent{
+              font-size: 16px;
+              color: #333;
+              flex: 1;
+              .searchFriendLineContentItem{
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+              }
+            }
+          }
+          .searchFriendButton {
+            padding:40px 0 10px 0;
+            text-align: center;
+            .searchFriendButtonItem {
+              font-size: 14px;
+              color: #5570F1;
+              img {
+                width: 30px;
+                height: 30px;
+                margin-bottom: 5px;
+              }
+            }
+          }
+        }
+        .userListTitle {
+          padding: 15px 25px;
+          font-size: 18px;
+          color: #999;
+        }
+        .searchBox {
+          padding-left: 25px;
+          padding-right: 25px;
+          padding-bottom: 20px;
+        }
+        .userListBox {
+          padding: 15px 0;
+          overflow-y: auto;
+          height: 380px;
+          .active {
+            background: #F5F7FD;
+            box-sizing: border-box;
+            border-right: 4px solid #5570F1 !important;
+          }
+          .userItem {
+            padding: 0 21px 0 25px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 90px;
+            box-sizing: border-box;
+            border-right: 4px solid #fff;
+            cursor: pointer;
+            .userAvatar {
+              img {
+                width: 58px;
+                height: 58px;
+                border-radius: 50%;
+              }
+            }
+            .userInfo {
+              flex: 1;
+              box-sizing: border-box;
+              padding-left: 15px;
+              .userName {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                .userNameText {
+                  font-size: 18px;
+                  font-weight: bold;
+                  width: 240px;
+                  white-space: nowrap;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  color: #333;
+                }
+                .userMessageNum {
+                  font-size: 12px;
+                  color: #333;
+                  width: 24px;
+                  height: 24px;
+                  line-height: 24px;
+                  text-align: center;
+                  border-radius: 50%;
+                  background: #FFCC91;
+                  font-weight: bold;
+                }
+              }
+              .userMessage {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                .userMessageText {
+                  display: block;
+                  width: 240px;
+                  white-space: nowrap;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  font-size: 14px;
+                  color: #999999;
+                }
+                .userMessageTime {
+                  font-size: 14px;
+                  color: #999999;
+                }
+              }
+            }
+          }
+        }
+        .hallLeftLoading{
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 420px;
+          height: 740px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: rgba(255, 255, 255, 0.5);
+          z-index: 100;
+          .hallLeftLoadingIcon {
+            .hallLeftLoadingIconItem {
+              color: #CCCCCC;
+              text-align: center;
+              margin-bottom: 20px;
+              font-size: 60px;
+            }
+            .hallLeftLoadingText {
+              color: #CCCCCC;
+              font-size: 32px;
+              font-weight: bold;
+            }
+          }
+        }
+        .searchBoxMain {
+          position: relative;
+          .searchFriendClose {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            padding-right: 10px;
+            padding-bottom: 10px;
+            .rightSlideBoxCloseIcon {
+              cursor: pointer;
+              width: 28px;
+              height: 28px;
+              line-height: 28px;
+              text-align: center;
+              background: #EFEFEF;
+              border-radius: 8px;
+            }
+          }
+          .searchBox {
+            padding-left: 25px;
+            padding-right: 25px;
+            padding-bottom: 20px;
+          }
+          .searchFriendBox {
+            position: absolute;
+            width: 280px;
+            border-radius: 8px;
+            top: 0;
+            right: -300px;
+            background: #fff;
+            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            z-index: 100;
+            box-sizing: border-box;
+            padding: 20px 0 30px 0;
+            .searchFriendItem {
+              display: flex;
+              align-items: center;
+              justify-content: flex-start;
+              border-bottom: 1px solid #E9EDF7;
+              padding: 0 20px 30px 20px;
+              .searchFriendAvatar {
+                img {
+                  width: 66px;
+                  height: 66px;
+                  border-radius: 50%;
+                }
+                margin-right: 15px;
+              }
+              .searchFriendInfo {
+                flex: 1;
+                .searchFriendName {
+                  display: flex;
+                  align-items: center;
+                  .gender {
+                    img {
+                      width: 12px;
+                      height: 12px;
+                    }
+                  }
+                  img {
+                    width: 18px;
+                    height: 18px;
+                    cursor: pointer;
+                  }
+                  .searchFriendNameText {
+                    font-size: 18px;
+                    width: 120px;
+                    height: 28px;
+                    line-height: 28px;
+                    white-space: nowrap; 
+                    overflow: hidden; 
+                    text-overflow: ellipsis;
+                  }
+                }
+                .searchFriendPhone {
+                  font-size: 14px;
+                  color: #999;
+                  margin-top: 10px;
+                }
+              }
+            }
+            .searchFriendLineBox {
+              display: flex;
+              align-items: center;
+              justify-content: flex-start;
+              padding: 20px;
+              border-bottom: 1px solid #E9EDF7;
+              .searchFriendLineTitle{
+                font-size: 16px;
+                color: #999999;
+                width: 90px;
+              }
+              .searchFriendLineContent{
+                font-size: 16px;
+                color: #333;
+                flex: 1;
+                .searchFriendLineContentItem{
+                  display: flex;
+                  align-items: center;
+                  justify-content: space-between;
+                }
+              }
+            }
+            .searchFriendButton {
+              padding:40px 0 10px 0;
+              text-align: center;
+              .searchFriendButtonItem {
+                font-size: 14px;
+                color: #5570F1;
+                img {
+                  width: 30px;
+                  height: 30px;
+                  margin-bottom: 5px;
+                }
+              }
+            }
+          }
+        }
+        
+        .userListBox {
+          padding: 15px 0;
+          overflow-y: auto;
+          height: 560px;
+          .active {
+            background: #F5F7FD;
+            box-sizing: border-box;
+            border-right: 4px solid #5570F1 !important;
+          }
+          .userItem {
+            padding: 0 21px 0 25px;
+            height: 90px;
+            box-sizing: border-box;
+            border-right: 4px solid #fff;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            .flexItemBox{
+              width: 100%;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              .userAvatar {
+                img {
+                  width: 58px;
+                  height: 58px;
+                  border-radius: 50%;
+                }
+              }
+              .userInfo {
+                flex: 1;
+                box-sizing: border-box;
+                padding-left: 15px;
+                .userName {
+                  display: flex;
+                  align-items: center;
+                  justify-content: space-between;
+                  //padding-bottom: 10px;
+                  .userNameText {
+                    font-size: 18px;
+                    font-weight: bold;
+                    width:260px;
+                  }
+                  .userMessageNum {
+                    font-size: 12px;
+                    color: #333;
+                    width: 24px;
+                    height: 24px;
+                    line-height: 24px;
+                    text-align: center;
+                    border-radius: 50%;
+                    background: #FFCC91;
+                    font-weight: bold;
+                  }
+                }
+                .userMessage {
+                  display: flex;
+                  align-items: center;
+                  justify-content: space-between;
+                  .userMessageText {
+                    display: block;
+                    width: 240px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    font-size: 14px;
+                    color: #999999;
+                  }
+                  .userMessageTime {
+                    font-size: 14px;
+                    color: #999999;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+              //右侧菜单
+              .rightSlideBox {
+          width: 420px;
+          height: 100%;
+          position: absolute;
+          right: 0;
+          top: 0;
+          background: #fff;
+          box-shadow: -4px 0px 4px 0px rgba(0, 0, 0, 0.1); 
+          .rightSlideBoxClose {
+            padding: 20px 20px 0 20px;
+            height: 50px;
+            overflow: hidden;
+            display: flex;  
+            align-items: center;
+            justify-content: space-between;
+            .rightSlideBoxCloseTitle {
+              font-size: 18px;
+              color: #333;
+            }
+            .rightSlideBoxCloseIcon {
+              cursor: pointer;
+              width: 28px;
+              height: 28px;
+              line-height: 28px;
+              text-align: center;
+              background: #EFEFEF;
+              border-radius: 8px;
+            }
+          }
+          .rightSlideSearch {
+            padding: 30px 25px 0 25px;
+            height: 66px;
+            //overflow: hidden;
+            position: relative;
+            .searchFriendBox {
+              position: absolute;
+              width: 280px;
+              border-radius: 8px;
+              top: 65px;
+              left: -260px;
+              background: #fff;
+              box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+              border-radius: 8px;
+              z-index: 100;
+              box-sizing: border-box;
+              padding: 20px 0 30px 0;
+              .searchFriendClose {
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+                padding-right: 10px;
+                padding-bottom: 10px;
+                .rightSlideBoxCloseIcon {
+                  cursor: pointer;
+                  width: 28px;
+                  height: 28px;
+                  line-height: 28px;
+                  text-align: center;
+                  background: #EFEFEF;
+                  border-radius: 8px;
+                }
+              }
+              .searchFriendItem {
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                border-bottom: 1px solid #E9EDF7;
+                padding: 0 20px 30px 20px;
+                .searchFriendAvatar {
+                  img {
+                    width: 66px;
+                    height: 66px;
+                    border-radius: 50%;
+                  }
+                  margin-right: 15px;
+                }
+                .searchFriendInfo {
+                  flex: 1;
+                  .searchFriendName {
+                    display: flex;
+                    align-items: center;
+                    .gender {
+                      img {
+                        width: 12px;
+                        height: 12px;
+                      }
+                    }
+                    img {
+                      width: 18px;
+                      height: 18px;
+                      cursor: pointer;
+                    }
+                    .searchFriendNameText {
+                      font-size: 18px;
+                      width: 120px;
+                      height: 28px;
+                      line-height: 28px;
+                      white-space: nowrap; 
+                      overflow: hidden; 
+                      text-overflow: ellipsis;
+                    }
+                  }
+                  .searchFriendPhone {
+                    font-size: 14px;
+                    color: #999;
+                    margin-top: 10px;
+                  }
+                }
+              }
+              .searchFriendLineBox {
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                padding: 20px;
+                border-bottom: 1px solid #E9EDF7;
+                .searchFriendLineTitle{
+                  font-size: 16px;
+                  color: #999999;
+                  width: 90px;
+                }
+                .searchFriendLineContent{
+                  font-size: 16px;
+                  color: #333;
+                  flex: 1;
+                  .searchFriendLineContentItem{
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                  }
+                }
+              }
+              .searchFriendButton {
+                padding:40px 0 10px 0;
+                text-align: center;
+                .searchFriendButtonItem {
+                  font-size: 14px;
+                  color: #5570F1;
+                  img {
+                    width: 30px;
+                    height: 30px;
+                    margin-bottom: 5px;
+                  }
+                }
+              }
+            }
+          }
+          .rightSlideUserBox {
+            box-sizing: border-box;
+            padding: 40px 40px 10px 40px;
+            height: 180px;
+            overflow-y: auto;
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            //border-bottom: 1px solid #E9EDF7;
+            .rightEditUserItem {
+              cursor: pointer;
+              // color: #333;
+              // .rightSlideUserItemIcon {
+              //   .addUserIcon {
+              //     transition: all 0.5s ease;
+              //   }
+              //   .addUserIcon:hover {
+              //     background: #5570F1;
+              //     color: #fff;
+              //   }
+              // }
+              
+            }
+            .rightSlideUserItem {
+              margin-bottom: 20px;
+              width: 25%;
+              position: relative;
+              //cursor: pointer;
+              //用户菜单
+              .rightSlideUserItemMore {
+                position: absolute;
+                background: #fff;
+                box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+                bottom: -220px;
+                left: -240px;
+                width: 280px;
+                height: 270px;
+                .rightSlideUserItemMoreMain {
+                  display: flex;
+                  align-items: center;
+                  justify-content: flex-start;
+                  padding:0 20px;
+                  .rightSlideUserItemMoreMainIcon {
+                    img {
+                      width: 66px;
+                      height: 66px;
+                      border-radius: 50%;
+                    }
+                  }
+                  .rightSlideUserItemMoreMainInfo { 
+                    padding: 30px 0 30px 20px;
+                    border-bottom: 1px solid #E9EDF7;
+                    flex: 1;
+                    .rightSlideUserItemMoreMainInfoTop {
+                      display: flex;
+                      align-items: center;
+                      justify-content: space-between;
+                      .rightSlideUserItemMoreUserName {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        font-size: 18px;
+                        .rightSlideUserItemMoreUserMore {
+                          margin-left: 10px;
+                          img {
+                            width: 12px;
+                            height: 12px;
+                          }
+                        }
+                      }
+                      .rightSlideUserItemMoreUserMoreIcon {
+                        img {
+                          width: 18px;
+                          height: 18px;
+                        }
+                      }
+                    }
+                  }
+                  .rightSlideUserItemMoreNumber {
+                    font-size: 14px;
+                    color: #999;
+                    margin-top: 10px;
+                  }
+                }
+                .rightSlideUserItemMoreLine {
+                  .rightSlideUserItemMoreLineItem {
+                    padding: 20px;
+                    border-bottom: 1px solid #E9EDF7;
+                    display: flex;
+                    .rightSlideUserItemMoreTitle {
+                      font-size: 16px;
+                      color: #999;
+                      width: 80px;
+                    }
+                    .rightSlideUserItemMoreText {
+                      font-size: 16px;
+                      color: #333;
+                      display: flex;
+                      align-items: center;
+                      justify-content: space-between;
+                      flex:1;
+                    }
+                  }
+                  .rightSlideUserItemMoreLineButton {
+                    padding-top: 25px;
+                    text-align: center;
+                    font-size: 14px;
+                    color:#5570F1;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    img {
+                      width: 25px;
+                      height: 25px;
+                      margin-bottom: 8px;
+                    }
+                    .rightSlideUserItemMoreLineGroup {
+                      width: 33.33%;
+                    }
+                  }
+                }
+              }
+              .rightSlideUserItemIcon {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                img {
+                  width: 58px;
+                  height: 58px;
+                  border-radius: 50%;
+                }
+                .el-dropdown-link {
+                  width: 58px;
+                  height: 58px;
+                  position: relative;
+                  .rightSlideUserGroupLeader{
+                    font-size: 12px;
+                    color: #FEAF50;
+                    background: #FFEAD1;
+                    width: 36px;
+                    height: 20px;
+                    border-radius: 4px;
+                    position: absolute;
+                    bottom: 0;
+                    right: -10px;
+                    text-align: center;
+                    line-height: 20px;
+                  }
+                }
+                .addUserIcon {
+                  width: 58px;
+                  height: 58px;
+                  line-height: 58px;
+                  background: #F0F0F0;
+                  border-radius: 50%;
+                  text-align: center;
+                  color:#fff;
+                  font-size: 32px;
+                }
+              }
+              .rightSlideUserItemName {
+                //width: 80px;
+                padding: 0 5px;
+                font-size: 16px;
+                color: #333;
+                margin-top: 10px;
+                text-align: center;
+                white-space: nowrap; /* 强制不换行 */
+                overflow: hidden; /* 超出宽度隐藏 */
+                text-overflow: ellipsis; /* 显示省略号 */
+              }
+            }
+          }
+          .rightLineBorder {
+            width: 100%;
+            border-bottom: 1px solid #E9EDF7;
+          }
+          .rightSlideMore {
+            padding: 30px 40px;
+            font-size: 18px;
+            color: #999;
+            text-align: center
+          }
+          //聊天记录
+          .rightSlideFunction {
+            .rightSlideFunctionItem {
+              height: 60px;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              padding: 20px 40px;
+              border-bottom: 1px solid #E9EDF7;
+              cursor: pointer;
+              .rightSlideFunctionItemText {
+                font-size: 18px;
+                color: #333;
+              }
+              .rightSlideFunctionItemIcon {
+                img {
+                  width: 18px;
+                  height: 18px;
+                }
+              }
+            }
+          }
+          //群聊设置
+          .groupSystem {
+            border-bottom: 1px solid #E9EDF7;
+            padding-bottom: 30px;
+            .groupChatSystem {
+              padding: 30px 40px 0 40px;
+              height: 80px;
+              overflow: hidden; 
+              .groupChatTitle {
+                font-size: 18px;
+                color: #333;
+                margin-bottom: 10px;
+              }
+              .groupChatText {
+                width: 100%;
+                height: 20px;
+                overflow: hidden;
+                font-size: 18px;
+                color: #999;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                img {
+                  cursor: pointer;
+                }
+                .groupChatTextContent {
+                  width: 300px;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+              }
+            }
+          }
+          .rightSlideFooterBox {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            div{
+              width: 33%;
+              text-align: center;
+              font-size: 16px;
+              color: #666;
+              cursor: pointer;
+              margin-top: 30px;
+              box-sizing: border-box;
+              border-right: 1px solid #E9EDF7;
+            }
+          }
+          .rightSlideFooter {
+            font-size: 18px;
+            color: #666;
+            padding: 30px 40px;
+            text-align: center;
+            cursor: pointer;
+            border-bottom: 1px solid #E9EDF7;
+          }
+          .isLast {
+            border-bottom: 0;
+            color: #999;
+          }
+        }
+      //右侧
+      .hallRight {
+        flex: 1;
+        background: #fff;
+        border-radius: 20px;
+        position: relative;
+        min-height: 500px;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        .hallRightLoading {
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 740px;
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: rgba(255, 255, 255, 0.5);
+          z-index: 100;
+          .hallRightLoadingIcon {
+            .hallRightLoadingIconItem {
+              color: #CCCCCC;
+              text-align: center;
+              margin-bottom: 20px;
+              font-size: 60px;
+            }
+            .hallRightLoadingText {
+              color: #CCCCCC;
+              font-size: 32px;
+              font-weight: bold;
+            }
+          }
+        }
+        .ifHallRigthNoMessage {
+          color: #CCCCCC;
+          font-size: 32px;
+          font-weight: bold;
+          text-align: center;
+          height: 740px;
+          line-height: 740px;
+        }
+        .userName {
+          font-size: 20px;
+          color: #333;
+          font-weight: bold;
+        }
+        .ifNotice {
+          padding-bottom: 60px !important;  
+        }
+        .UserNameBox {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 40px 30px 30px 30px;
+          border-bottom: 1px solid #E7E7E7;
+          position: relative;
+          .moreIcon {
+            cursor: pointer;
+          }
+          .groupNotice {
+            position: absolute;
+            height: 40px;
+            line-height: 40px;
+            font-size: 16px;
+            background:url('../../../assets/chat/notice.png') no-repeat 10px center #F6F8FE;
+            left: 30px;
+            box-sizing: border-box;
+            padding-left: 40px;
+            bottom: 10px;
+            color: #999999;
+            border-radius: 10px;
+            padding-right: 10px;
+            width: 400px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            cursor: pointer;
+          }
+          .shareCardIcon {
+            font-size: 24px;
+            cursor: pointer;
+            color: #666;
+          }
+        }
+        .rightPositionBox { 
+          flex: 1;
+          position: relative;
+          
+          .rightUserMessageBox {
+            padding: 40px;
+            height: 375px;
+            box-sizing: border-box;
+            overflow-y: auto;
+            .timeBox {
+              width: 100%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              padding:0 0 30px 0; 
+              span {
+                border-radius: 8px;
+                display: block;
+                width: 80px;
+                height: 30px;
+                line-height: 30px;
+                font-size: 14px;
+                text-align: center;
+                display: block;
+                background: #F4F5FA;
+                color: #999999;
+              }
+            }
+            .newUserStatus {
+              width: 100%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              padding:0 0 30px 0;
+              .newUserStatusText {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 8px;
+                width: 200px;
+                height: 30px;
+                line-height: 30px;
+                font-size: 14px;
+                text-align: center;
+                background: #F4F5FA;
+                color: #999999;
+              }
+              span {
+                display: inline-block;
+                line-height: 30px;
+              }
+              .newUserStatusTextName {
+                display: inline-block;
+                width: 100px;
+                line-height: 30px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+              }
+            }
+            //其他用户
+            .otherUserMessage {
+              display: flex;
+              align-items: flex-start;
+              margin-bottom: 30px;
+              .otherUserIcon {
+                margin-right: 20px;
+                img {
+                  width: 58px;
+                  height: 58px;
+                  border-radius: 50%;
+                }
+              }
+              .otherUserMessageText {
+                border-radius: 16px;
+                padding: 16px;
+                font-size: 16px;
+                color: #fff;
+                background: #5570F1;
+                position: relative;
+                min-height: 50px;
+                word-wrap:break-word;
+                word-break:break-all;
+              }
+              .otherUserMessageText::before {
+                content: '';
+                position: absolute;
+                left: -8px;
+                top: 26px;
+                transform: translateY(-50%);
+                width: 0;
+                height: 0;
+                border-top: 8px solid transparent;
+                border-bottom: 8px solid transparent;
+                border-right: 8px solid #5570F1;
+              }
+            }
+            //我
+            .meUserMessage {
+              display: flex;
+              align-items: flex-start;
+              margin-bottom: 30px;
+              justify-content: flex-end; 
+              .meUserIcon {
+                margin-left: 20px;
+                img {
+                  width: 58px;
+                  height: 58px;
+                  border-radius: 50%;
+                }
+              }
+              .meUserMessageText {
+                border-radius: 16px;
+                padding:16px;
+                font-size: 16px;
+                color:#333;
+                background: #FFEAD1;
+                position: relative;
+                min-height: 50px;
+                cursor: pointer;
+                word-wrap:break-word;
+                word-break:break-all;
+                //width: 100%;
+              }
+              .meUserMessageText::before {
+                content: '';
+                position: absolute;
+                right: -8px;
+                top: 26px;
+                transform: translateY(-50%);
+                width: 0;
+                height: 0;
+                border-top: 8px solid transparent;
+                border-bottom: 8px solid transparent; 
+                border-left: 8px solid #FFEAD1;
+              }
+            }
+          }
+        }
+        //消息框
+        .sendMessageBox {
+          //height: 250px;
+          padding: 20px 40px 0 40px;
+          border-top: 1px solid #E7E7E7;
+          box-sizing: border-box;
+  
+          .sendMessageTools {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .toolsBigBox {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              .toolsBox {
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                img {
+                  width: 36px;
+                  height: 36px;
+                  margin-right: 30px;
+                  cursor: pointer;
+                }
+              }
+            }
+            .fileBox {
+              width: 180px;
+              display: flex;
+              align-items: center;
+              border: 1px solid #E9EDF7;
+              border-radius: 8px;
+              padding: 5px 10px;
+              .fileBoxText {
+                font-size: 14px;
+                color: #999;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                width: 110px;
+              }
+              img {
+                width: 40px;
+                height: 40px;
+                margin-right: 5px;
+              }
+            }
+          }
+          .sendMessageInput {
+            margin-top: 5px;
+          }
+          .sendMessageButton {
+            padding-top: 20px;
+            text-align: right;
+            button {
+              width: 120px;
+              height: 38px;
+            }
+          }
+        }
+        //右侧菜单
+        .rightSlideBox {
+          width: 420px;
+          height: 100%;
+          position: absolute;
+          right: 0;
+          top: 0;
+          background: #fff;
+          box-shadow: -4px 0px 4px 0px rgba(0, 0, 0, 0.1); 
+          .rightSlideBoxClose {
+            padding: 20px 20px 0 20px;
+            height: 50px;
+            overflow: hidden;
+            display: flex;  
+            align-items: center;
+            justify-content: space-between;
+            .rightSlideBoxCloseTitle {
+              font-size: 18px;
+              color: #333;
+            }
+            .rightSlideBoxCloseIcon {
+              cursor: pointer;
+              width: 28px;
+              height: 28px;
+              line-height: 28px;
+              text-align: center;
+              background: #EFEFEF;
+              border-radius: 8px;
+            }
+          }
+          .rightSlideSearch {
+            padding: 30px 25px 0 25px;
+            height: 66px;
+            //overflow: hidden;
+            position: relative;
+            .searchFriendBox {
+              position: absolute;
+              width: 280px;
+              border-radius: 8px;
+              top: 65px;
+              left: -260px;
+              background: #fff;
+              box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+              border-radius: 8px;
+              z-index: 100;
+              box-sizing: border-box;
+              padding: 20px 0 30px 0;
+              .searchFriendClose {
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+                padding-right: 10px;
+                padding-bottom: 10px;
+                .rightSlideBoxCloseIcon {
+                  cursor: pointer;
+                  width: 28px;
+                  height: 28px;
+                  line-height: 28px;
+                  text-align: center;
+                  background: #EFEFEF;
+                  border-radius: 8px;
+                }
+              }
+              .searchFriendItem {
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                border-bottom: 1px solid #E9EDF7;
+                padding: 0 20px 30px 20px;
+                .searchFriendAvatar {
+                  img {
+                    width: 66px;
+                    height: 66px;
+                    border-radius: 50%;
+                  }
+                  margin-right: 15px;
+                }
+                .searchFriendInfo {
+                  flex: 1;
+                  .searchFriendName {
+                    display: flex;
+                    align-items: center;
+                    .gender {
+                      img {
+                        width: 12px;
+                        height: 12px;
+                      }
+                    }
+                    img {
+                      width: 18px;
+                      height: 18px;
+                      cursor: pointer;
+                    }
+                    .searchFriendNameText {
+                      font-size: 18px;
+                      width: 120px;
+                      height: 28px;
+                      line-height: 28px;
+                      white-space: nowrap; 
+                      overflow: hidden; 
+                      text-overflow: ellipsis;
+                    }
+                  }
+                  .searchFriendPhone {
+                    font-size: 14px;
+                    color: #999;
+                    margin-top: 10px;
+                  }
+                }
+              }
+              .searchFriendLineBox {
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                padding: 20px;
+                border-bottom: 1px solid #E9EDF7;
+                .searchFriendLineTitle{
+                  font-size: 16px;
+                  color: #999999;
+                  width: 90px;
+                }
+                .searchFriendLineContent{
+                  font-size: 16px;
+                  color: #333;
+                  flex: 1;
+                  .searchFriendLineContentItem{
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                  }
+                }
+              }
+              .searchFriendButton {
+                padding:40px 0 10px 0;
+                text-align: center;
+                .searchFriendButtonItem {
+                  font-size: 14px;
+                  color: #5570F1;
+                  img {
+                    width: 30px;
+                    height: 30px;
+                    margin-bottom: 5px;
+                  }
+                }
+              }
+            }
+          }
+          .rightSlideUserBox {
+            box-sizing: border-box;
+            padding: 40px 40px 10px 40px;
+            height: 180px;
+            overflow-y: auto;
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            //border-bottom: 1px solid #E9EDF7;
+            .rightEditUserItem {
+              cursor: pointer;
+              // color: #333;
+              // .rightSlideUserItemIcon {
+              //   .addUserIcon {
+              //     transition: all 0.5s ease;
+              //   }
+              //   .addUserIcon:hover {
+              //     background: #5570F1;
+              //     color: #fff;
+              //   }
+              // }
+              
+            }
+            .rightSlideUserItem {
+              margin-bottom: 20px;
+              width: 25%;
+              position: relative;
+              //cursor: pointer;
+              //用户菜单
+              .rightSlideUserItemMore {
+                position: absolute;
+                background: #fff;
+                box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+                bottom: -220px;
+                left: -240px;
+                width: 280px;
+                height: 270px;
+                .rightSlideUserItemMoreMain {
+                  display: flex;
+                  align-items: center;
+                  justify-content: flex-start;
+                  padding:0 20px;
+                  .rightSlideUserItemMoreMainIcon {
+                    img {
+                      width: 66px;
+                      height: 66px;
+                      border-radius: 50%;
+                    }
+                  }
+                  .rightSlideUserItemMoreMainInfo { 
+                    padding: 30px 0 30px 20px;
+                    border-bottom: 1px solid #E9EDF7;
+                    flex: 1;
+                    .rightSlideUserItemMoreMainInfoTop {
+                      display: flex;
+                      align-items: center;
+                      justify-content: space-between;
+                      .rightSlideUserItemMoreUserName {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        font-size: 18px;
+                        .rightSlideUserItemMoreUserMore {
+                          margin-left: 10px;
+                          img {
+                            width: 12px;
+                            height: 12px;
+                          }
+                        }
+                      }
+                      .rightSlideUserItemMoreUserMoreIcon {
+                        img {
+                          width: 18px;
+                          height: 18px;
+                        }
+                      }
+                    }
+                  }
+                  .rightSlideUserItemMoreNumber {
+                    font-size: 14px;
+                    color: #999;
+                    margin-top: 10px;
+                  }
+                }
+                .rightSlideUserItemMoreLine {
+                  .rightSlideUserItemMoreLineItem {
+                    padding: 20px;
+                    border-bottom: 1px solid #E9EDF7;
+                    display: flex;
+                    .rightSlideUserItemMoreTitle {
+                      font-size: 16px;
+                      color: #999;
+                      width: 80px;
+                    }
+                    .rightSlideUserItemMoreText {
+                      font-size: 16px;
+                      color: #333;
+                      display: flex;
+                      align-items: center;
+                      justify-content: space-between;
+                      flex:1;
+                    }
+                  }
+                  .rightSlideUserItemMoreLineButton {
+                    padding-top: 25px;
+                    text-align: center;
+                    font-size: 14px;
+                    color:#5570F1;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    img {
+                      width: 25px;
+                      height: 25px;
+                      margin-bottom: 8px;
+                    }
+                    .rightSlideUserItemMoreLineGroup {
+                      width: 33.33%;
+                    }
+                  }
+                }
+              }
+              .rightSlideUserItemIcon {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                img {
+                  width: 58px;
+                  height: 58px;
+                  border-radius: 50%;
+                }
+                .el-dropdown-link {
+                  width: 58px;
+                  height: 58px;
+                  position: relative;
+                  .rightSlideUserGroupLeader{
+                    font-size: 12px;
+                    color: #FEAF50;
+                    background: #FFEAD1;
+                    width: 36px;
+                    height: 20px;
+                    border-radius: 4px;
+                    position: absolute;
+                    bottom: 0;
+                    right: -10px;
+                    text-align: center;
+                    line-height: 20px;
+                  }
+                }
+                .addUserIcon {
+                  width: 58px;
+                  height: 58px;
+                  line-height: 58px;
+                  background: #F0F0F0;
+                  border-radius: 50%;
+                  text-align: center;
+                  color:#fff;
+                  font-size: 32px;
+                }
+              }
+              .rightSlideUserItemName {
+                //width: 80px;
+                padding: 0 5px;
+                font-size: 16px;
+                color: #333;
+                margin-top: 10px;
+                text-align: center;
+                white-space: nowrap; /* 强制不换行 */
+                overflow: hidden; /* 超出宽度隐藏 */
+                text-overflow: ellipsis; /* 显示省略号 */
+              }
+            }
+          }
+          .rightLineBorder {
+            width: 100%;
+            border-bottom: 1px solid #E9EDF7;
+          }
+          .rightSlideMore {
+            padding: 30px 40px;
+            font-size: 18px;
+            color: #999;
+            text-align: center
+          }
+          //聊天记录
+          .rightSlideFunction {
+            .rightSlideFunctionItem {
+              height: 60px;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              padding: 20px 40px;
+              border-bottom: 1px solid #E9EDF7;
+              cursor: pointer;
+              .rightSlideFunctionItemText {
+                font-size: 18px;
+                color: #333;
+              }
+              .rightSlideFunctionItemIcon {
+                img {
+                  width: 18px;
+                  height: 18px;
+                }
+              }
+            }
+          }
+          //群聊设置
+          .groupSystem {
+            border-bottom: 1px solid #E9EDF7;
+            padding-bottom: 30px;
+            .groupChatSystem {
+              padding: 30px 40px 0 40px;
+              height: 80px;
+              overflow: hidden; 
+              .groupChatTitle {
+                font-size: 18px;
+                color: #333;
+                margin-bottom: 10px;
+              }
+              .groupChatText {
+                width: 100%;
+                height: 20px;
+                overflow: hidden;
+                font-size: 18px;
+                color: #999;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                img {
+                  cursor: pointer;
+                }
+                .groupChatTextContent {
+                  width: 300px;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+              }
+            }
+          }
+          .rightSlideFooterBox {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            div{
+              width: 33%;
+              text-align: center;
+              font-size: 16px;
+              color: #666;
+              cursor: pointer;
+              margin-top: 30px;
+              box-sizing: border-box;
+              border-right: 1px solid #E9EDF7;
+            }
+          }
+          .rightSlideFooter {
+            font-size: 18px;
+            color: #666;
+            padding: 30px 40px;
+            text-align: center;
+            cursor: pointer;
+            border-bottom: 1px solid #E9EDF7;
+          }
+          .isLast {
+            border-bottom: 0;
+            color: #999;
+          }
+        }
+      }
+      .chat-dialog{
+        margin-top: 5vh !important;
+      }
+</style>

src/layout/components/Chat/components/contactsTitle.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="tableTitle">
+    <div class="tableTitleBox">
+      <span class="tableFloatLine"></span>
+      <div>{{name}}</div>
+    </div>
+    <div class="addContacts">
+      <img src="@/assets/chat/addcontacts.png" @click="handleAddUser" v-if="iconStatus==1">
+      <i class="el-icon-close" @click="closeAddUser" v-else></i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      someData: '',
+      iconStatus: 1,//1=添加好友 2=关闭
+    };
+  },
+  methods: {
+    handleAddUser() {
+      this.iconStatus = 2;
+      this.$emit('addUser'); // Emit an event to notify the parent
+    },
+    closeAddUser(){
+      this.iconStatus = 1;
+      this.$emit('closeAddUser');
+    }
+  }
+};
+</script>
+
+<style scoped lang="less">
+  .tableTitle {
+    color:#333333;
+    position: relative;
+    padding-bottom: 20px;
+    padding-top: 37px;
+    padding-right: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    img {
+      cursor: pointer;
+    }
+    .tableFloatLine {
+      width: 3px;
+      height:16px;
+      background:#5570F1;
+      display: inline-block;
+    }
+    .tableTitleBox {
+      display: flex;
+      align-items: center;
+      font-size: 18px;
+      font-weight: bold;
+      span {
+        margin-right: 25px;
+      }
+    }
+    .addContacts {
+      width: 28px;
+      height: 28px;
+      background: #EFEFEF;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
+  }
+</style>

src/layout/components/Chat/components/hallTitle.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="tableTitle">
+    <div class="tableTitleBox">
+      <span class="tableFloatLine"></span>
+      <div>{{name}}</div>
+    </div>
+    <img src="@/assets/chat/addUser.png" @click="handleAddUser">
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      someData: '',
+    };
+  },
+  methods: {
+    handleAddUser() {
+      this.$emit('addUser'); // Emit an event to notify the parent
+    }
+  }
+};
+</script>
+
+<style scoped lang="less">
+  .tableTitle {
+    color:#333333;
+    position: relative;
+    padding-bottom: 20px;
+    padding-right: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    img {
+      cursor: pointer;
+    }
+    .tableFloatLine {
+      width: 3px;
+      height:16px;
+      background:#5570F1;
+      display: inline-block;
+    }
+    .tableTitleBox {
+      display: flex;
+      align-items: center;
+      font-size: 18px;
+      font-weight: bold;
+      span {
+        margin-right: 25px;
+      }
+    }
+  }
+</style>

src/layout/components/Chat/components/tableTitle.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="tableTitle">
+    <span class="tableFloatLine"></span>
+    {{name}}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      someData: '',
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .tableTitle {
+    color:#333333;
+    position: relative;
+    padding-bottom: 20px;
+    .tableFloatLine {
+      width: 3px;
+      height:16px;
+      background:#5570F1;
+      display: block;
+      position: absolute;
+      left:-20px;
+      top:1px;
+    }
+  }
+</style>

src/layout/components/Chat/components/tableTitle1.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="tableTitle">
+    <span class="tableFloatLine"></span>
+    {{name}}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      someData: '',
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .tableTitle {
+    height: 38px;
+    line-height: 38px;
+    color:#333333;
+    position: relative;
+    margin-bottom: 30px;
+    .tableFloatLine {
+      // display: inline-block;
+      width: 3px;
+      height:16px;
+      background:#5570F1;
+      display: block;
+      position: absolute;
+      left:-20px;
+      top:10px;
+      // vertical-align: middle;
+    }
+  }
+</style>

src/utils/baseUrl.js

@@ -1,17 +1,38 @@
 const URL = {
-  webUrl:'admin.bjzxtw.org.cn',//管理系统地址，如果用户因为某种原因以外退出，需要一个userurl用于请求接口
-  baseUrl: 'https://flzxw.bjzxtw.org.cn',//正式环境
-  //baseUrl: 'http://116.131.8.26:9501',//正式环境
-  //baseUrl: 'http://183.131.25.186:9501',//测试环境
+  // webUrl:'admin.bjzxtw.org.cn',//管理系统地址，如果用户因为某种原因以外退出，需要一个userurl用于请求接口
+  // baseUrl: 'https://flzxw.bjzxtw.org.cn',//正式环境
+  // //baseUrl: 'http://116.131.8.26:9501',//正式环境
+  // //baseUrl: 'http://183.131.25.186:9501',//测试环境
+  // //baseUrl: 'http://192.168.1.201:9501',//刘佳伟本地环境
+  // //baseUrl:'http://192.168.1.115:9501',//冯蕊的本地环境
+  // //baseUrl: 'http://192.168.1.127:9501',//刘剑的本地环境
+  // //WebsocketUrl: 'ws://192.168.1.201:9506',//刘佳伟websocket地址
+  // //WebsocketUrl: 'ws://192.168.1.127:9506',//刘剑websocket地址
+  // WebsocketUrl: 'wss://flzxw.bjzxtw.org.cn',//正式环境域名 wss可用 -- websocket地址
+  // WebCloginUrl: 'https://flzxw.bjzxtw.org.cn/api/loginapi', //单点登录地址
+  // WebCLogoutUrl: 'https://flzxw.bjzxtw.org.cn/api/logoutapi', //单点登录退出
+  // //webClogBackUrL: 'https://admin.bjzxtw.org.cn/auth/back_login.php', //单点登录返回地址 - 王鹏
+  // webClogBackUrL: 'http://adminpre.bjzxtw.org.cn/adminapi/api/backlogin' //单点登录返回地址 - 刘佳伟
+
+
+
+  webUrl: 'adminpre.bjzxtw.org.cn',//管理系统地址，如果用户因为某种原因以外退出，需要一个userurl用于请求接口
+  baseUrl: 'http://apipre1.bjzxtw.org.cn:29501',//pre环境域名2
   //baseUrl: 'http://192.168.1.201:9501',//刘佳伟本地环境
   //baseUrl:'http://192.168.1.115:9501',//冯蕊的本地环境
-  //baseUrl: 'http://192.168.1.127:9501',//刘剑的本地环境
-  //WebsocketUrl: 'ws://192.168.1.201:9506',//刘佳伟websocket地址
-  //WebsocketUrl: 'ws://192.168.1.127:9506',//刘剑websocket地址
-  WebsocketUrl: 'wss://flzxw.bjzxtw.org.cn',//正式环境域名 wss可用 -- websocket地址
-  WebCloginUrl: 'https://flzxw.bjzxtw.org.cn/api/loginapi', //单点登录地址
-  WebCLogoutUrl: 'https://flzxw.bjzxtw.org.cn/api/logoutapi', //单点登录退出
-  //webClogBackUrL: 'https://admin.bjzxtw.org.cn/auth/back_login.php', //单点登录返回地址 - 王鹏
+  //baseUrl: 'http://192.168.1.129:9501',//刘剑的本地环境
+  //WebsocketUrl: 'ws://192.168.1.201:9506',//刘佳伟 -- websocket地址
+  // WebsocketUrl: 'ws://192.168.1.127:9506'//刘剑 -- websocket地址
+  //WebsocketUrl: 'ws://183.131.25.186:9506',//测试环境ip -- websocket地址
+  //WebsocketUrl: 'ws://admindev.bjzxtw.org.cn:9506',//测试环境域名
+  //WebsocketUrl: 'ws://116.131.8.26:9506'//pre环境ip -- websocket地址
+  //WebsocketUrl: 'ws://adminpre.bjzxtw.org.cn:9506'//pre环境域名 -- websocket地址
+  WebsocketUrl: 'ws://apipre1.bjzxtw.org.cn:29501',//pre环境域名 -- websocket地址
+  //WebsocketUrl: 'ws://103.105.201.2:9506'//正式环境ip -- websocket地址
+  //WebsocketUrl: 'wss://flzxw.bjzxtw.org.cn'//正式环境域名 wss可用 -- websocket地址
+  WebCloginUrl: 'http://apipre1.bjzxtw.org.cn/api/loginapi', //单点登录地址
+  WebCLogoutUrl: 'http://apipre1.bjzxtw.org.cn:29501/api/logoutapi', //单点登录退出
+  //webClogBackUrL: 'http://adminpre.bjzxtw.org.cn/auth/back_login.php' //单点登录返回地址 - 王鹏
   webClogBackUrL: 'http://adminpre.bjzxtw.org.cn/adminapi/api/backlogin' //单点登录返回地址 - 刘佳伟
   
 }

src/views/chat - 副本/components/contactsTitle.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="tableTitle">
+    <div class="tableTitleBox">
+      <span class="tableFloatLine"></span>
+      <div>{{name}}</div>
+    </div>
+    <div class="addContacts">
+      <img src="@/assets/chat/addcontacts.png" @click="handleAddUser" v-if="iconStatus==1">
+      <i class="el-icon-close" @click="closeAddUser" v-else></i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      someData: '',
+      iconStatus: 1,//1=添加好友 2=关闭
+    };
+  },
+  methods: {
+    handleAddUser() {
+      this.iconStatus = 2;
+      this.$emit('addUser'); // Emit an event to notify the parent
+    },
+    closeAddUser(){
+      this.iconStatus = 1;
+      this.$emit('closeAddUser');
+    }
+  }
+};
+</script>
+
+<style scoped lang="less">
+  .tableTitle {
+    color:#333333;
+    position: relative;
+    padding-bottom: 20px;
+    padding-top: 37px;
+    padding-right: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    img {
+      cursor: pointer;
+    }
+    .tableFloatLine {
+      width: 3px;
+      height:16px;
+      background:#5570F1;
+      display: inline-block;
+    }
+    .tableTitleBox {
+      display: flex;
+      align-items: center;
+      font-size: 18px;
+      font-weight: bold;
+      span {
+        margin-right: 25px;
+      }
+    }
+    .addContacts {
+      width: 28px;
+      height: 28px;
+      background: #EFEFEF;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
+  }
+</style>

src/views/chat - 副本/components/hallTitle.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="tableTitle">
+    <div class="tableTitleBox">
+      <span class="tableFloatLine"></span>
+      <div>{{name}}</div>
+    </div>
+    <img src="@/assets/chat/addUser.png" @click="handleAddUser">
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      someData: '',
+    };
+  },
+  methods: {
+    handleAddUser() {
+      this.$emit('addUser'); // Emit an event to notify the parent
+    }
+  }
+};
+</script>
+
+<style scoped lang="less">
+  .tableTitle {
+    color:#333333;
+    position: relative;
+    padding-bottom: 20px;
+    padding-top: 37px;
+    padding-right: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    img {
+      cursor: pointer;
+    }
+    .tableFloatLine {
+      width: 3px;
+      height:16px;
+      background:#5570F1;
+      display: inline-block;
+    }
+    .tableTitleBox {
+      display: flex;
+      align-items: center;
+      font-size: 18px;
+      font-weight: bold;
+      span {
+        margin-right: 25px;
+      }
+    }
+  }
+</style>

src/views/chat - 副本/components/tableTitle.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="tableTitle">
+    <span class="tableFloatLine"></span>
+    {{name}}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      someData: '',
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .tableTitle {
+    color:#333333;
+    position: relative;
+    padding-bottom: 20px;
+    .tableFloatLine {
+      width: 3px;
+      height:16px;
+      background:#5570F1;
+      display: block;
+      position: absolute;
+      left:-20px;
+      top:1px;
+    }
+  }
+</style>

src/views/chat - 副本/components/tableTitle1.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="tableTitle">
+    <span class="tableFloatLine"></span>
+    {{name}}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      someData: '',
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .tableTitle {
+    height: 38px;
+    line-height: 38px;
+    color:#333333;
+    position: relative;
+    margin-bottom: 30px;
+    .tableFloatLine {
+      // display: inline-block;
+      width: 3px;
+      height:16px;
+      background:#5570F1;
+      display: block;
+      position: absolute;
+      left:-20px;
+      top:10px;
+      // vertical-align: middle;
+    }
+  }
+</style>

src/views/chat - 副本/contacts.vue

@@ -0,0 +1,1065 @@
+<template>
+    <div class="mainBox">
+      <div class="hallBox">
+        <div class="hallLeft">
+          <!--添加好友 start------------------------------------------>
+          <contactsTitle :name="tableTitleName" @addUser="addUser" @closeAddUser="closeAddUser" />
+          <!--添加好友 end------------------------------------------>
+          <!--搜索 start------------------------------------------>
+          <div class="searchBox">
+            <el-input
+              placeholder="请输入用户账号"
+              prefix-icon="el-icon-search"
+              v-model="searchUserName"
+              @keyup.enter.native="searchFriend"
+              v-if="pagestatus == 4"
+            >
+            </el-input>
+            <el-input
+              placeholder="请输入好友账号"
+              prefix-icon="el-icon-search"
+              v-model="searchUserListName"
+              @keyup.enter.native="searchOrdFriend"
+              v-if="pagestatus==1||pagestatus==2||pagestatus==3"
+            >
+            </el-input>
+          </div>
+          <!--搜索 end------------------------------------------>
+          <div class="newFriendBox">新的朋友</div>
+          <div class="newFriendImgBox" v-if="pagestatus==4">
+            <div class="newFriendImg">
+              <img src="@/assets/chat/newcontacts.png">
+            </div>
+            <div class="newFriendText" @click="searchFriend">
+              搜索：{{searchUserName}}
+            </div>
+            <div class="searchFriendBox" v-if="searchWindowStatus==true">
+              <div class="searchFriendItem">
+                <div class="searchFriendAvatar">
+                  <img :src="searchFriendList.avatar" v-if="searchFriendList.avatar!=''">
+                  <img src="@/assets/chat/user/admin.png" v-else>
+                </div>
+                <div class="searchFriendInfo">
+                  <div class="searchFriendName">
+                    <div class="searchFriendNameText" v-if="searchFriendList.remark!=null&&searchFriendList.remark!=''">{{searchFriendList.remark}}</div>
+                    <div class="searchFriendNameText" v-else>{{searchFriendList.user_name}}</div>
+                    <!--性别-->
+                    <!-- <div class="gender"><img src="@/assets/chat/girl.png"></div> -->
+                    <!--更多-->
+                    <!-- <img src="@/assets/chat/fi_more.png"> -->
+                  </div>
+                  <div class="searchFriendPhone">账号：{{searchFriendList.user_name}}</div>
+                </div>
+              </div>
+              <!-- <div v-if="searchFriendList.isfriend==0||searchFriendList.isfriend==null"></div>
+              <div class="searchFriendLineBox" v-else @click="openEditWindow">
+                <div class="searchFriendLineTitle">备注</div>
+                <div class="searchFriendLineContent">
+                  <div class="searchFriendLineContentItem">
+                    <div>{{searchFriendList.remark}}</div>
+                    <div><i class="el-icon-edit"></i></div>
+                  </div>
+                </div>
+              </div> -->
+              <!-- <div class="searchFriendLineBox">
+                <div class="searchFriendLineTitle">共同群聊</div>
+                <div class="searchFriendLineContent">0个</div>
+              </div>
+              <div class="searchFriendLineBox">
+                <div class="searchFriendLineTitle">添加方式</div>
+                <div class="searchFriendLineContent">通过账号添加</div>
+              </div> -->
+              <div class="searchFriendButton">
+                <el-button type="primary" v-if="searchFriendList.showBtn==false&&searchFriendList.id!=this.$store.state.user.userid" @click="openAddWindow(searchFriendList.id)">添加到通讯录</el-button>
+                <el-button type="danger" v-else-if="searchFriendList.showBtn==true" @click="deleteFriend(searchFriendList)">删除好友</el-button>
+                <el-button type="primary" disabled v-else>添加到通讯录</el-button>
+              </div>
+              <!-- <div class="searchFriendButton">
+                <div class="searchFriendButtonItem">
+                  <img src="@/assets/chat/sendmessage.png">
+                  <div>发消息</div>
+                </div>
+              </div> -->
+            </div>
+          </div>
+          <div :class="['newFriendImgBox', pagestatus === 2 ? 'newFriendIActive' : '']" @click="tabPage(2)" v-else>
+            <div class="newFriendImg">
+              <img src="@/assets/chat/newcontacts.png">
+            </div>
+            <div class="newFriendText" v-if="pagestatus==4">
+              搜索：{{searchUserName}}
+            </div>
+            <div class="newFriendText" v-else>
+              新的朋友
+              <span v-if="userApplyList.length>0">{{userApplyList.length}}</span>
+            </div>
+          </div>
+          <!--用户列表 start------------------------------------------>
+          <div class="userListBox" v-if="pagestatus==1||pagestatus==2||pagestatus==3">
+            <!-- <div class="userListTitle">A</div> -->
+            <div class="userItem" @click="changeUserItem(item.friend_id)" v-for="(item,index) in userFriendList" :key="index" :class="['userItem', { active: item.status == 1 }]">
+              <div class="userAvatar">
+                <img :src="item.avatar" v-if="item.avatar!=''">
+                <img src="@/assets/chat/user/admin.png" v-else>
+              </div>
+              <div class="userInfo">
+                <div class="userName">
+                  <div class="userNameText" v-if="item.remark!=null">{{item.user_name}}<span v-if="item.remark!=''">({{item.remark}})</span></div>
+                  <div class="userNameText" v-else>{{item.user_name}}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!--用户列表 end------------------------------------------>
+        </div>
+        <div class="hallRight" v-if="pagestatus==1||pagestatus==4">
+          <div class="ifHallRigthNoMessage">恒星管理平台</div>
+        </div>
+        <div class="hallRight" v-if="pagestatus==2">
+          <div class="UserNameBox">
+            <div class="userName">新的朋友</div>
+          </div>
+          <div class="rightNewFriendBox" v-for="(item,index) in userApplyList" :key="index">
+            <div class="rightNewFriendItem">
+              <div class="rightNewFriendAvatar">
+                <img :src="item.avatar" v-if="item.avatar!=''">
+                <img src="@/assets/chat/user/admin.png" v-else>
+              </div>
+              <div class="rightNewFriendInfo">
+                <div class="rightNewFriendName">{{item.remark}}</div>
+                <div class="rightNewFriendPhone">{{item.user_name}}</div>
+              </div>
+            </div>
+            <div class="rightNewFriendStatus">
+              <div class="rightNewFriendStatus2">
+                <el-button type="primary" @click="openWindow(item)">接受</el-button>
+              </div>
+            </div>
+          </div>
+          <!-- <div class="rightNewFriendBox">
+            <div class="rightNewFriendItem">
+              <div class="rightNewFriendAvatar">
+                <img src="@/assets/chat/user/user.png">
+              </div>
+              <div class="rightNewFriendInfo">
+                <div class="rightNewFriendName">我是某某某</div>
+                <div class="rightNewFriendPhone">15210211200</div>
+              </div>
+            </div>
+            <div class="rightNewFriendStatus">
+              <div class="rightNewFriendStatus1">已接受</div>
+            </div>
+          </div>
+          <div class="rightNewFriendBox">
+            <div class="rightNewFriendItem">
+              <div class="rightNewFriendAvatar">
+                <img src="@/assets/chat/user/user.png">
+              </div>
+              <div class="rightNewFriendInfo">
+                <div class="rightNewFriendName">我是某某某</div>
+                <div class="rightNewFriendPhone">15210211200</div>
+              </div>
+            </div>
+            <div class="rightNewFriendStatus">
+              <div class="rightNewFriendStatus2">
+                <el-button type="primary" @click="friendWindowStatus=true">接受</el-button>
+              </div>
+            </div>
+          </div> -->
+        </div>
+        <div class="hallRight" v-if="pagestatus==3">
+          <div class="userInfoMainBox">
+            <div class="userInfoMainItem">
+              <div class="userInfoMainAvatar">
+                <img :src="friendInfo.avatar" v-if="friendInfo.avatar!=''">
+                <img src="@/assets/chat/user/admin.png" v-else>
+              </div>
+              <div class="userInfoMainInfo">
+                <div class="userInfoMainName">
+                  <div class="userInfoMainNameText" v-if="friendInfo.nickname!=null&&friendInfo.nickname!=''">{{friendInfo.nickname}}</div>
+                  <div class="userInfoMainNameText" v-else>{{friendInfo.user_name}}</div>
+                </div>
+                <div class="userInfoMainPhone">账号：{{friendInfo.user_name}}</div>
+              </div>
+            </div>
+            <div class="userInfoMainLineBox">
+              <div class="userInfoMainLineTitle">备注</div>
+              <div class="userInfoMainLineContent">
+                <div class="userInfoMainLineContentItem" @click="openEditWindow">
+                  <div v-if="friendInfo.remark!=null&&friendInfo.remark!=''">{{friendInfo.remark}}</div>
+                  <div v-else>暂无备注</div>
+                  <div><i class="el-icon-edit"></i></div>
+                </div>
+              </div>
+            </div>
+            <!-- <div class="userInfoMainLineBox">
+              <div class="userInfoMainLineTitle">共同群聊</div>
+              <div class="userInfoMainLineContent">0个</div>
+            </div>
+            <div class="userInfoMainLineBox">
+              <div class="userInfoMainLineTitle">添加方式</div>
+              <div class="userInfoMainLineContent">通过账号添加</div>
+            </div> -->
+            <div class="userInfoMainButton">
+              <!-- <div class="userInfoMainButtonItem">
+                <img src="@/assets/chat/sendmessage.png">
+                <div>删除好友</div>
+              </div> -->
+              <el-button type="primary" icon="el-icon-s-promotion" @click="sendMessage(friendInfo)">发送消息</el-button>
+              <el-button type="danger" icon="el-icon-delete" @click="deleteFriend(friendInfo.friend_id)">删除好友</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!--发送好友申请弹出框 start------------------------------------------------------------>
+      <el-dialog :visible.sync="addFriendWindowStatus" title="朋友申请" :close-on-click-modal="false" width="420px">
+        <div>
+          <div>
+            <el-form :model="form" ref="form" autocomplete="off" label-position="left">
+              <div class="formDiv">
+                <el-form-item label="验证消息：" :label-width="formLabelWidth" class="custom-align-right">
+                  <el-input v-model="addform.remark" autocomplete="off"  placeholder="我是.."></el-input>
+                </el-form-item>
+              </div> 
+            </el-form>
+          </div>
+          <div class="footerButtonBox">
+            <el-button type="info" @click="addFriendWindowStatus=false">取消</el-button>
+            <el-button type="primary" @click="addMyFriend">确定</el-button>
+          </div>
+        </div>
+      </el-dialog>
+      <!--发送好友申请弹出框 end------------------------------------------------------------>
+      <!--请求验证弹出框 start------------------------------------------------------------>
+      <el-dialog :visible.sync="friendWindowStatus" title="通过朋友验证" :close-on-click-modal="false" width="420px">
+        <div>
+          <div class="friendWindowText">
+            <!--此处修改备注是没用的，修改备注需要friendId，但是此时你们还不是好友，改不了备注-->
+            <!-- <el-form :model="form" ref="form" autocomplete="off" label-position="left">
+              <div class="formDiv">
+                <el-form-item label="备注名" :label-width="formLabelWidth" class="custom-align-right">
+                  <el-input v-model="form.remark" autocomplete="off" placeholder="请输入备注名.."></el-input>
+                </el-form-item>
+              </div> 
+            </el-form> -->
+            确定要添加<span>{{friendInfo.user_name}}</span>为好友吗？
+          </div>
+          <div class="footerButtonBox">
+            <el-button type="info" @click="friendWindowStatus=false">取消</el-button>
+            <el-button type="primary" @click="addFriend">确定</el-button>
+          </div>
+        </div>
+      </el-dialog>
+      <!--请求验证弹出框 end------------------------------------------------------------>
+      <!--修改备注弹出框 start------------------------------------------------------------>
+      <el-dialog :visible.sync="editWindowStatus" title="修改备注" :close-on-click-modal="false" width="420px">
+        <div>
+          <div>
+            <el-form :model="form" ref="form" autocomplete="off" label-position="left">
+              <div class="formDiv">
+                <el-form-item label="备注名" :label-width="formLabelWidth" class="custom-align-right">
+                  <el-input v-model="remark" autocomplete="off"  placeholder="请输入备注名.."></el-input>
+                </el-form-item>
+              </div> 
+            </el-form>
+          </div>
+          <div class="footerButtonBox">
+            <el-button type="info" @click="editWindowStatus=false">取消</el-button>
+            <el-button type="primary" @click="editFriend">确定</el-button>
+          </div>
+        </div>
+      </el-dialog>
+      <!--修改备注弹出框 end------------------------------------------------------------>
+    </div>
+  </template>
+  
+  <script>
+  //引入公用样式
+  import '@/styles/global.less';
+  //引入baseUrl
+  import URL from '@/utils/baseUrl';
+  //引入组件
+  import contactsTitle from './components/contactsTitle.vue';
+  import { status } from 'nprogress';
+  import openWindow from '@/utils/open-window';
+  
+  export default {
+    components: {
+      contactsTitle
+    },
+    data() {
+      return {
+        //1.全局配置 start------------------------------------------------------------>
+        tableTitleName:'通讯录',
+        pagestatus:1,//1=没有选择任何联系人 2=申请列表 3=好友详情 4=搜索结果
+        formLabelWidth:"100px",//表单label宽度
+        searchUserName:"",//搜索新添加用户
+        searchUserListName:"",//搜索好友列表
+        friendId:"",//要添加的好友id
+        friendWindowStatus:false,//通过朋友申请弹出框
+        searchWindowStatus:false,//搜索窗口左侧弹出框
+        searchUserWindowStatus:false,//搜索好友列表弹出框
+        editWindowStatus:false,//修改备注弹出框
+        addFriendWindowStatus:false,//发送好友申请弹出框
+        editFriendId:"",//要编辑的好友
+        getFriendApplyListStatus:null,//获取好友申请列表状态
+        //1.全局配置 end------------------------------------------------------------>
+        //2.好友列表 start------------------------------------------------------------>
+        userFriendList:[],//好友列表
+        userApplyList:[],//好友申请列表
+        searchFriendList:"",//搜索好友列表
+        //2.好友列表 end------------------------------------------------------------>
+        //3.通过好友申请 start------------------------------------------------------------>
+        form:{
+          //好友的用户id
+          id:"",
+          //好友id
+          friend_id:"",
+          //好友申请
+          remark:"",
+          //状态
+          status:2,
+          //申请id
+          apply_id:""
+        },
+        //3.通过好友申请 end------------------------------------------------------------>
+        //4.编辑好友 start------------------------------------------------------------>
+        friendInfo:{},//好友信息
+        remark:"",//修改的用户备注
+        //4.编辑好友 end------------------------------------------------------------>
+        //5.发送好友申请 start------------------------------------------------------------>
+        addform:{
+          //好友id
+          friend_id:"",
+          //好友申请
+          remark:"",
+        },
+        //5.发送好友申请 end------------------------------------------------------------>
+      };
+    },
+    methods: {
+      //0.全局操作 start------------------------------------------------------------>
+      //0.1切换页面状态
+      tabPage(status){
+        this.pagestatus = status;
+        if(status==2){
+          //如果是2 好友列表状态还原
+          for(let item of this.userFriendList){
+            item.status = 0;
+          }
+        }
+        this.getFriendApplyList();
+      },
+      //0.全局操作 end------------------------------------------------------------>
+      //1.好友列表 start------------------------------------------------------------>
+      addUser(){
+        this.pagestatus = 4;
+      },
+      closeAddUser(){
+        this.pagestatus = 2;
+        this.searchWindowStatus = false;
+      },
+      //1.1获取联系人列表
+      getUserFriendList(){
+        //获取用户身份id
+        //const userId = this.$store.state.user.userid;
+        this.$store.dispatch('chat/getFriendsList',{}).then(res=> {
+          let data = res.data;
+          for(let item of data){
+            item.status = 0; //默认未选中
+          }
+          this.userFriendList = data;
+        }).catch(() => {
+          this.$message.error('获取好友列表失败!')
+        })
+      },
+      //1.2选择联系人
+      changeUserItem(id){
+        for(let item of this.userFriendList){
+          if(item.friend_id == id){
+            item.status = 1;
+          }else{
+            item.status = 0;
+          }
+        }
+        //切换页面到用户列表
+        this.pagestatus = 3;
+        //把要编辑的好友的id存起来
+        this.editFriendId = id;
+  
+        // console.log(id)
+        // console.log(this.userFriendList)
+        //获取好友身份信息详情
+        this.$store.dispatch('chat/getFriendInfo',{friend_id:this.editFriendId}).then(res=> {
+          console.log(res)
+          //保存好友信息
+          this.friendInfo = res.data;
+          this.remark = res.data.remark;
+        }).catch(() => {
+          this.$message.error('获得好友身份详情失败!')
+        })
+  
+      },
+      //1.3搜索联系人
+      searchFriend(){
+        //搜索联系人
+        this.$store.dispatch('chat/searchFriend',{keyword:this.searchUserName}).then(res=> {
+          //获取到好友
+          this.searchWindowStatus = false;
+          console.log(res);
+          if(res.code==200){
+            if(res.data.length>0){
+              this.searchWindowStatus = true;
+              this.searchFriendList = res.data[0];
+              //搜出来以后查询两人是否为好友
+              this.searchIsFriend(this.searchFriendList)
+  
+            }else{
+              this.$message.error('没有找到该联系人!')
+            }
+          }else{
+            this.$message.error('搜索关键字不能为空!')
+          }
+        })
+      },
+      //1.3搜索好友列表中的好友
+      searchOrdFriend(){
+        if(this.searchUserListName==""){
+          this.$message.error('搜索关键字不能为空!')
+          return;
+        }else{
+          let isFriend = false;
+          for(let item of this.userFriendList){
+            if(item.user_name == this.searchUserListName){
+              isFriend = true;
+              this.searchFriendList = item;
+            }
+          }
+          if(isFriend){
+            this.changeUserItem(this.searchFriendList.friend_id)
+            //console.log(this.searchFriendList);
+          }else{
+            this.$message.error('没有找到该联系人!')
+          }
+        }
+      },
+      //1.好友列表 end------------------------------------------------------------>
+  
+      //2.获得好友申请列表 start------------------------------------------------------------>
+      //2.1 好友申请列表
+      getFriendApplyList(){
+        console.log("获取好友申请列表");
+        const userId = this.$store.state.user.userid;
+        this.$store.dispatch('chat/getFriendsApplyList',{user_id:userId}).then(res=> {
+          this.userApplyList = res.data;
+        }).catch(() => {
+          this.$message.error('获取好友申请列表失败!')
+        })
+      },
+      
+      //2.2 接受好友申请
+      addFriend(){
+        //通过用户申请
+        console.log(this.form);
+        this.$store.dispatch('chat/applyFriend',this.form).then(res=> {
+          if(res.code==200){
+            this.$message.success('成功添加好友!')
+            this.friendWindowStatus = false;
+            //重新加载用户列表
+            this.getUserFriendList();
+            //清空右侧
+            this.friendInfo = {};
+            //this.pagestatus = 1;
+            this.getFriendApplyListStatus();
+          }
+        })
+      },
+      
+      //2.3 删除好友
+      deleteFriend(id){
+        console.log(id);
+        if(id){
+          this.editFriendId = String(id);
+        }
+        console.log(id)
+        this.$confirm('此操作将永久删除该联系人, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          console.log(this.editFriendId);
+          this.$store.dispatch('chat/delFriend',{friend_id:this.editFriendId}).then(res=> {
+            this.$message.success('删除成功!')
+            //关闭用户详情显示
+            this.pagestatus = 1;
+            //重新装在用户列表
+            this.getUserFriendList();
+          })
+        }).catch(() => {
+          this.$message({
+            type: 'warning',
+            message: '已取消删除'
+          });
+        });
+      },
+      //2.4 编辑好友
+      editFriend(){
+        let data = {
+          friend_id:this.editFriendId,
+          remark:this.remark
+        }
+        //this.editFriendId
+        this.$store.dispatch('chat/updateFriend',data).then(res=> {
+          if(res.code==200){
+            this.$message.success('修改备注名成功!')
+            this.pagestatus = 1;
+            this.editWindowStatus = false;
+            this.getUserFriendList();
+            this.remark = "";
+          }else{
+            this.$message.error(res.message)
+          }
+        }).catch(() => {
+          this.$message.error('修改备注名失败!')
+        })
+      },
+      //2.5 发送好友申请
+      addMyFriend(){
+        console.log(this.addform);
+        this.$store.dispatch('chat/addFriend',this.addform).then(res=> {
+          this.$message.success("已成功发送好友申请！")
+          this.addFriendWindowStatus = false;
+          this.searchWindowStatus = false;
+          this.addform.remark = "";
+        })
+      },
+      //2.6 查询是否是好友
+      searchIsFriend(item){
+        let data = {
+          friend_id:item.isfriend
+        }
+        console.log(data);
+        this.$store.dispatch('chat/isFriend',data).then(res=>{
+          console.log(res);
+          if(res.code==0&&res.message=="不是好友"){
+            this.searchFriendList.showBtn = false;
+          }else{
+            this.searchFriendList.showBtn = true;
+          }
+          this.$forceUpdate();
+        })
+      },
+      //2.7 定时查询好友申请状态
+      setTimeFriendApplyList(){
+        console.log("定时查询好友申请状态");
+        let that = this;
+        this.getFriendApplyListStatus = setInterval(()=>{
+          that.getFriendApplyList();
+        },5000)
+      },
+      //2.获得好友申请列表 end------------------------------------------------------------>
+  
+      //3.操作弹出框 start------------------------------------------------------------>
+      //用户菜单操作
+      openWindow(item){
+        this.form.id = item.id;
+        this.form.friend_id = item.friend_id;
+        this.friendInfo = item;
+        //打开弹出框
+        this.friendWindowStatus = true;
+      },
+      openEditWindow(id){
+        //打开修改备注弹出框
+        this.editWindowStatus = true;
+      },
+      openAddWindow(id){
+        console.log(id);
+        this.addform.friend_id = String(id);
+        this.addFriendWindowStatus = true;
+      },
+      //发送消息
+      sendMessage(friendInfo){
+        console.log(friendInfo);
+        //带着friend_id跳转到hall页面
+        this.$router.push({
+          path:'/hall',
+          query:{friend_id:friendInfo.friend_id}
+        }); 
+      },
+      //3.操作弹出框 end------------------------------------------------------------>
+      
+    },
+    mounted() {
+      //1.获取联系人列表
+      this.getUserFriendList();
+      //2.获取好友申请列表
+      this.getFriendApplyList();
+      //3.定时查询好友申请状态
+      this.setTimeFriendApplyList();
+      //打印当前用户id
+      console.log("当前的用户id为：" + this.$store.state.user.userid);
+    },
+    beforeDestroy() {
+      clearInterval(this.getFriendApplyListStatus);
+    }
+  };
+  </script>
+  
+  <style scoped lang="less">
+    .hallBox {
+      display: flex;
+      margin: 30px;
+      //左侧
+      .hallLeft {
+        width: 420px;
+        background: #fff;
+        border-radius: 20px;
+        margin-right: 20px;
+        .newFriendBox {
+          padding: 10px 25px 0 25px;
+          font-size: 18px;
+          color: #999;
+        }
+        .newFriendImgBox {
+          margin: 10px 0 10px 0;
+          padding: 20px 0 20px 25px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          cursor: pointer;
+          border-bottom: 1px solid #E9EDF7;
+          position: relative;
+          box-sizing: border-box;
+          border-right: 4px solid #fff;
+          .newFriendImg {
+            width: 58px;
+            height: 58px;
+            border-radius: 8px;
+            background: #5570F1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 20px;
+          }
+          .newFriendText {  
+            color: #333;
+            font-size: 18px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            flex: 1;
+            span {
+              background: #5570F1;
+              color: #fff;
+              line-height: 24px;
+              font-size: 12px;
+              width: 24px;
+              height: 24px;
+              text-align: center;
+              border-radius: 50%;
+              display: block;
+              margin-right: 20px;
+            }
+          }
+        }
+        .newFriendIActive {
+          border-right: 4px solid #5570F1 !important;
+          background: #F5F7FD
+        }
+        .searchFriendBox {
+          position: absolute;
+          width: 280px;
+          border-radius: 8px;
+          top: 0;
+          right: -300px;
+          background: #fff;
+          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+          border-radius: 8px;
+          z-index: 100;
+          box-sizing: border-box;
+          padding: 30px 0;
+          .searchFriendItem {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            border-bottom: 1px solid #E9EDF7;
+            padding: 0 20px 30px 20px;
+            .searchFriendAvatar {
+              img {
+                width: 66px;
+                height: 66px;
+                border-radius: 50%;
+              }
+              margin-right: 15px;
+            }
+            .searchFriendInfo {
+              flex: 1;
+              .searchFriendName {
+                display: flex;
+                align-items: center;
+                .gender {
+                  img {
+                    width: 12px;
+                    height: 12px;
+                  }
+                }
+                img {
+                  width: 18px;
+                  height: 18px;
+                  cursor: pointer;
+                }
+                .searchFriendNameText {
+                  font-size: 18px;
+                  width: 120px;
+                  height: 28px;
+                  line-height: 28px;
+                  white-space: nowrap; 
+                  overflow: hidden; 
+                  text-overflow: ellipsis;
+                }
+              }
+              .searchFriendPhone {
+                font-size: 14px;
+                color: #999;
+                margin-top: 10px;
+              }
+            }
+          }
+          .searchFriendLineBox {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            padding: 20px;
+            border-bottom: 1px solid #E9EDF7;
+            .searchFriendLineTitle{
+              font-size: 16px;
+              color: #999999;
+              width: 90px;
+            }
+            .searchFriendLineContent{
+              font-size: 16px;
+              color: #333;
+              flex: 1;
+              .searchFriendLineContentItem{
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+              }
+            }
+          }
+          .searchFriendButton {
+            padding:40px 0 10px 0;
+            text-align: center;
+            .searchFriendButtonItem {
+              font-size: 14px;
+              color: #5570F1;
+              img {
+                width: 30px;
+                height: 30px;
+                margin-bottom: 5px;
+              }
+            }
+          }
+        }
+        .userListTitle {
+          padding: 15px 25px;
+          font-size: 18px;
+          color: #999;
+        }
+        .searchBox {
+          padding-left: 25px;
+          padding-right: 25px;
+          padding-bottom: 20px;
+        }
+        .userListBox {
+          padding: 15px 0;
+          overflow-y: auto;
+          height: 380px;
+          .active {
+            background: #F5F7FD;
+            box-sizing: border-box;
+            border-right: 4px solid #5570F1 !important;
+          }
+          .userItem {
+            padding: 0 21px 0 25px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 90px;
+            box-sizing: border-box;
+            border-right: 4px solid #fff;
+            cursor: pointer;
+            .userAvatar {
+              img {
+                width: 58px;
+                height: 58px;
+                border-radius: 50%;
+              }
+            }
+            .userInfo {
+              flex: 1;
+              box-sizing: border-box;
+              padding-left: 15px;
+              .userName {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                .userNameText {
+                  font-size: 18px;
+                  font-weight: bold;
+                  width: 240px;
+                  white-space: nowrap;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  color: #333;
+                }
+                .userMessageNum {
+                  font-size: 12px;
+                  color: #333;
+                  width: 24px;
+                  height: 24px;
+                  line-height: 24px;
+                  text-align: center;
+                  border-radius: 50%;
+                  background: #FFCC91;
+                  font-weight: bold;
+                }
+              }
+              .userMessage {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                .userMessageText {
+                  display: block;
+                  width: 240px;
+                  white-space: nowrap;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  font-size: 14px;
+                  color: #999999;
+                }
+                .userMessageTime {
+                  font-size: 14px;
+                  color: #999999;
+                }
+              }
+            }
+          }
+        }
+      }
+      //右侧
+      .hallRight {
+        flex: 1;
+        background: #fff;
+        border-radius: 20px;
+        position: relative;
+        height: 740px;
+        .rightNewFriendBox {
+          height: 126px;
+          border-bottom: 1px solid #E9EDF7;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          box-sizing: border-box;
+          padding: 30px 40px;
+          .rightNewFriendItem { 
+            display: flex;
+            align-items: center; 
+            .rightNewFriendAvatar {
+              margin-right: 15px;
+              img {
+                width: 66px;
+                height: 66px;
+                border-radius: 50%;
+              }
+            }
+            .rightNewFriendInfo {
+              .rightNewFriendName {
+                font-size: 18px; 
+                margin-bottom: 7px;
+              }
+              .rightNewFriendPhone {
+                font-size: 18px;
+                color: #999;
+              }
+            }
+          }
+          .rightNewFriendStatus {
+            .rightNewFriendStatus1 {
+              font-size: 16px;
+              color: #999;
+              width: 69px;
+              text-align: center;
+            }
+          }
+        }
+        .userInfoMainBox {
+          padding: 40px;
+          max-width: 900px;
+          margin: 100px auto 0 auto;
+          .userInfoMainItem {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            border-bottom: 1px solid #E9EDF7;
+            padding: 0 20px 30px 20px;
+            .userInfoMainAvatar {
+              img {
+                width: 66px;
+                height: 66px;
+                border-radius: 50%;
+              }
+              margin-right: 15px;
+            }
+            .userInfoMainInfo {
+              flex: 1;
+              .userInfoMainName {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                img {
+                  width: 18px;
+                  height: 18px;
+                  cursor: pointer;
+                }
+                .userInfoMainNameText {
+                  font-size: 18px;
+                  width: 240px;
+                  height: 28px;
+                  line-height: 28px;
+                  white-space: nowrap; 
+                  overflow: hidden; 
+                  text-overflow: ellipsis;
+                }
+              }
+              .userInfoMainPhone {
+                font-size: 14px;
+                color: #999;
+                margin-top: 10px;
+              }
+            }
+          }
+          .userInfoMainLineBox {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            padding: 20px;
+            border-bottom: 1px solid #E9EDF7;
+            .userInfoMainLineTitle{
+              font-size: 16px;
+              color: #999999;
+              width: 90px;
+            }
+            .userInfoMainLineContent{
+              font-size: 16px;
+              color: #333;
+              flex: 1;
+              .userInfoMainLineContentItem{
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                cursor: pointer;
+              }
+            }
+          }
+          .userInfoMainButton {
+            padding:40px 0 10px 0;
+            text-align: center;
+            .userInfoMainButtonItem {
+              font-size: 14px;
+              color: #5570F1;
+              img {
+                width: 30px;
+                height: 30px;
+                margin-bottom: 5px;
+              }
+            }
+          }
+        }
+        .ifHallRigthNoMessage {
+          color: #CCCCCC;
+          font-size: 32px;
+          font-weight: bold;
+          text-align: center;
+          height: 740px;
+          line-height: 740px;
+        }
+        .userName {
+          font-size: 20px;
+          color: #333;
+          font-weight: bold;
+        }
+        .ifNotice {
+          padding-bottom: 60px !important;  
+        }
+        .UserNameBox {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 40px 30px 30px 30px;
+          border-bottom: 1px solid #E7E7E7;
+          position: relative;
+          .moreIcon {
+            cursor: pointer;
+          }
+          .groupNotice {
+            position: absolute;
+            height: 40px;
+            line-height: 40px;
+            font-size: 16px;
+            background:url('../../assets/chat/notice.png') no-repeat 10px center #F6F8FE;
+            left: 30px;
+            box-sizing: border-box;
+            padding-left: 40px;
+            bottom: 10px;
+            color: #999999;
+            border-radius: 10px;
+            padding-right: 10px;
+            width: 400px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+    }
+    //弹出框底部按钮
+    .footerButtonBox {
+      padding-top: 40px;
+      text-align: center;
+    }
+    .friendWindowText {
+      font-size: 16px;
+      color: #333;
+      span {
+        color: #5570F1;
+        font-weight: bold;
+      }
+    }
+    //表单微调 start------------------------------------------------------------>*/
+    ::v-deep .custom-form-item > .el-form-item__label {
+      line-height: 140px !important;
+    }
+    ::v-deep .custom-textarea .el-textarea__inner {
+      resize: none; /* 禁止用拖拽调整大小 */
+    }
+    ::v-deep .custom-align-right .el-form-item__label {
+      text-align: right; /* 设置标签文字右对齐 */
+    }
+    ::v-deep .el-select-group__title {
+      color: #909399;
+    }
+    ::v-deep .el-select {
+      width: 100% !important;
+    }
+    ::v-deep .el-tabs__active-bar{
+      height: 1px !important;
+    }
+    ::v-deep .el-tabs__nav-wrap::after {
+      height:1px !important;
+    }
+    ::v-deep .el-tabs__header {
+      margin-bottom: 0 !important;
+    }
+  </style>
+  

src/views/chat - 副本/creatTopic.vue

@@ -0,0 +1,321 @@
+<template>
+  <div class="mainBox">
+    <div class="layerBox">
+      <tableTitle :name="tableDivTitle"/>
+      <el-form :model="form" ref="form" :rules="formRules" label-position="left" label-width="120px">
+        <div class="formDiv">
+          <div>
+            <el-form-item label="课题分类：" prop="type" class="custom-align-right">
+              <el-select v-model="form.type" placeholder="请选择课题分类..">
+                <!-- <el-option label="科研" value="1"></el-option>
+                <el-option label="维权" value="2"></el-option> -->
+                <el-option :label="item.label" :value="item.value" v-for="item in topicType"></el-option>
+              </el-select>
+            </el-form-item>  
+            <el-form-item label="课题标题：" prop="title" class="custom-align-right">
+              <el-input v-model="form.title" autocomplete="off" placeholder="请输入课题标题"></el-input>
+            </el-form-item>
+            <el-form-item label="课题内容：" prop="" class="custom-align-right">
+              <myEditor ref="myEditor" v-model="form.content"></myEditor>
+            </el-form-item>
+            <el-form-item label="建立群聊：" prop="is_group" class="custom-align-right">
+              <el-radio-group v-model="form.is_group" :disabled="this.$route.query.id!=undefined">
+                <el-radio :label="'1'">是</el-radio>
+                <el-radio :label="'0'">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <div>
+              <el-form-item label="群聊名称：" prop="group_name" class="custom-align-right" v-if="form.is_group=='1'">
+                <el-input v-model="form.group_name" autocomplete="off" placeholder="请输入群聊名称" :disabled="groupStatus" maxlength="20"></el-input>
+              </el-form-item>
+              <el-form-item label="作者：" class="custom-align-right">
+                <el-input v-model="form.author" autocomplete="off" placeholder="请输入作者名"></el-input>
+              </el-form-item>
+            </div>
+          </div>
+        </div>
+      </el-form>
+    </div>
+    <div class="bottomBtnBox">
+      <el-button type="info" @click="returnPage">返回</el-button>
+      <el-button type="primary" @click="editToServe" v-if="editStatus==true">修改</el-button>
+      <el-button type="primary" @click="addToServe" v-else>创建</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle';
+//引入公用样式
+import '@/styles/global.less';
+//引入富文本编辑器
+import myEditor from '../../components/edit/myEditor.vue';
+
+export default {
+  components: {
+    tableTitle,
+    myEditor
+  },
+  data() {
+    //0.全局操作 start ------------------------------------------------------------>
+    //表单验证
+    const validateEmpty = (rule,value,callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    const validateArray = (rule,value,callback) => {
+      if (value.length == 0) {
+        callback(new Error('该项不能为空！'))
+      } else {
+        callback()
+      }
+    }
+    let self = this;
+    //0.全局操作 end ------------------------------------------------------------>
+    return {
+      //1.表单项 start ------------------------------------------------------------>
+      editStatus:false,//是否为编辑状态
+      groupStatus:false,//是否可以编辑群信息
+      tableDivTitle:"编辑课题",
+      disclaimer:true,//免责声明
+      //提交表单
+      form: {
+        type:"",//课题分类
+        title:"",//课题标题
+        content:"",//内容
+        is_group:"0",//是否创建群聊
+        group_name:"",//群聊名称
+        author:"",//作者
+      },
+      topicType:[],//课题分类
+      topicStatus:[],//课题状态
+      //1.2 表单验证规则
+      formRules: {
+        title:[{required:true,trigger:'blur',validator:validateEmpty}],
+        type:[{required:true,trigger:'blur',validator:validateArray}],
+        is_group:[{required:true,trigger:'blur',validator:validateEmpty}],
+        group_name:[{required:true,trigger:'blur',validator:validateEmpty}],
+      },
+      //1.3富文本编辑器配置
+      
+      //表单项 end ------------------------------------------------------------>
+    };
+  },
+  methods: {
+    //1.提交表单 start ------------------------------------------------------------>
+    //1.1 直接上传图片
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg';
+      const isPNG = file.type === 'image/png';
+      const isLt2M = file.size / 1024 / 1024 < 2;
+
+      if (!isJPG && !isPNG) {
+        this.$message.error('上传缩略图只能是 JPG 或 PNG 格式!');
+        return false;
+      }
+      if (!isLt2M) {
+        this.$message.error('上传缩略图大小不能超过 2MB!');
+        return false;
+      }
+
+      const formData = new FormData();
+      formData.append('file', file);
+
+      this.$store.dispatch('pool/uploadFile',formData).then(res=> {
+        this.imgUrl = res.data.imgUrl;//显示缩略图
+        this.form.imgurl = res.data.imgUrl;//提供表单地址
+        console.log(res.data.imgUrl)
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      })
+      // 阻止默认的上传行为
+      return false;
+    },
+    //1.2 提交表单
+    addToServe(){
+      //先进行验证
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          //console.log(this.form)
+          this.$store.dispatch('chat/addTopic',this.form).then(res=> {
+            //汇报结果
+            this.$message({
+              type: 'success',
+              message: '已成功创建商圈！'
+            });
+            this.cleatForm();
+            //返回列表页
+            this.returnPage()
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '网络错误，请重试！'
+            });
+          })
+        }
+      })
+    },
+    //1.3 清理表单
+    cleatForm(){
+      this.form.type = "";
+      this.form.title = "";
+      this.form.content = "";
+      this.form.is_group = "";
+      this.form.group_name = "";
+      this.form.author = "";
+    },
+    //1.4 查询商圈分类
+    getTopicType(){
+      this.$store.dispatch('chat/topicType',this.getApiData).then(res=> {
+        this.topicType = res.data;
+        console.log(this.topicType)
+      }).catch(() => {
+        this.$message.error("查询商圈分类失败！");
+      })
+    },
+    //1.5 查询商圈状态
+    getTopicStatus(){
+      this.$store.dispatch('chat/topicStatus',this.getApiData).then(res=> {
+        this.topicStatus = res.data;
+        console.log(res)
+      }).catch(() => {
+        this.$message.error("查询商圈状态失败！");
+      })
+    },
+    //提交表单 end ------------------------------------------------------------>
+
+    //2.跳转操作 start ------------------------------------------------------------>
+    returnPage(){
+      this.$router.push({
+        path: '/topic',
+      });
+    },
+    //跳转操作 end ------------------------------------------------------------>
+
+    //3.回显操作 ------------------------------------------------------------>
+    //3.1回显数据
+    getMainData() {
+      let data = {
+        id: this.$route.query.id + ""
+      };
+      this.$store.dispatch('chat/getTopicInfo', data).then(res => {
+        console.log(res);
+        this.form.title = res.data.title;
+        this.form.type = res.data.type;
+        //回显编辑器内容
+        this.$nextTick(() => {
+          this.form.content = res.data.content;
+        });
+        this.form.is_group = res.data.is_group;
+        this.form.group_name = res.data.group_name;
+        this.form.author = res.data.author;
+        //如果已经创建了群聊，阻止其修改
+        if(res.data.is_group=="1"){
+          this.groupStatus = true;
+        }
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '网络错误，请重试！'
+        });
+      });
+    },
+    async loadCascaderPath(path) {
+      for (let i = 0; i < path.length; i++) {
+        const parentId = path[i - 1] || 0; // 获取当前层级的父级ID
+        const level = i; // 当前层级的索引
+
+        await this.$store.dispatch('pool/categoryList', { pid: parentId })
+          .then((res) => {
+            const nodes = res.data.map(item => ({
+              value: item.id,
+              label: item.name,
+              leaf: level >= 3, // 假设4层结构，设置叶子节点标记
+            }));
+
+            // 级联选择器加载数据
+            if (level === path.length - 1) {
+              this.form.cat_arr_id = path; // 确保最后一级路径正确设置
+              this.parentKey += 1; // 强制刷新 cascader
+            }
+          });
+      }
+    },
+    //1.3提交修改
+    editToServe(){
+      //添加要修改的id
+      this.form.id = this.editId + "";
+      //先进行验证
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          //console.log(this.form)
+          this.$store.dispatch('chat/updateTopic',this.form).then(res=> {
+            //汇报结果
+            this.$message({
+              type: 'success',
+              message: '已成功修改课题信息！'
+            });
+            this.cleatForm();
+            //返回列表页
+            this.returnPage()
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '网络错误，请重试！'
+            });
+          })
+        }
+      })
+    },
+    //跳转操作 end ------------------------------------------------------------>
+
+    //4.富文本编辑器 start ------------------------------------------------------------>
+    //4.1 编辑器点击上传图片
+    
+    //富文本编辑器 end ------------------------------------------------------------>
+
+  },
+  mounted(){
+    //查询课题分类
+    this.getTopicType();
+
+    this.form.author = this.$store.state.user.name;
+    //1.判断是新建还是回显
+    if(this.$route.query.id!=undefined){
+      this.editId = this.$route.query.id;
+      this.editStatus = true;
+      console.log("编辑商圈！")
+      this.getMainData();
+    }else{
+      this.editStatus = false;
+      console.log("新建商圈！")
+    }
+  },
+};
+</script>
+
+<style scoped lang="less">
+ 
+  //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
+  ::v-deep .custom-form-item > .el-form-item__label {
+    line-height: 140px !important;
+  }
+  ::v-deep .custom-textarea .el-textarea__inner {
+    resize: none; /* 禁止用户拖拽调整大小 */
+  }
+  ::v-deep .custom-align-right .el-form-item__label {
+    text-align: right; /* 设置标签文字右对齐 */
+  }
+  ::v-deep .el-select {
+    width: 100%; /* 禁止用户拖拽调整大小 */
+  }
+  
+  //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
+</style>

src/views/chat - 副本/hall.vue

@@ -0,0 +1,4242 @@
+<template>
+    <div class="mainBox">
+      <div class="hallBox">
+        <div class="hallLeft">
+          <!--加载中 start------------------------------------------>
+          <div class="hallLeftLoading" v-if="hallLeftLoading">
+            <div class="hallLeftLoadingIcon">
+              <div class="hallLeftLoadingIconItem"><i class="el-icon-loading"></i></div>
+              <div class="hallLeftLoadingText">恒星管理平台</div>
+            </div>
+          </div>
+          <!--加载中 end------------------------------------------>
+          <!--添加好友 start------------------------------------------>
+          <hallTitle :name="tableTitleName" @addUser="creatGroup" />
+          <!--添加好友 end------------------------------------------>
+          <!--搜索 start------------------------------------------>
+          <div class="searchBoxMain">
+            <div class="searchBox">
+              <el-input
+                placeholder="请输入内容"
+                prefix-icon="el-icon-search"
+                v-model="searchConversation"
+                @keyup.enter.native="searchUserConversation"
+              >
+              </el-input>
+            </div>
+            <div class="searchFriendBox" v-if="searchConversationStatus">
+              <div class="searchFriendClose">
+                <div @click="closeSearchConversation" class="rightSlideBoxCloseIcon">
+                  <i class="el-icon-close"></i>
+                </div>
+              </div>
+              <div class="searchFriendItem">
+                <div class="searchFriendAvatar" v-if="selectConversationItem.group_name==null">
+                  <img :src="selectConversationItem.avatar" v-if="selectConversationItem.avatar!=null&&selectConversationItem.avatar!=''">
+                  <img src="@/assets/chat/user/admin.png" v-else>
+                </div>
+                <div class="searchFriendAvatar" v-else>
+                  <img src="@/assets/chat/user/group.jpg">
+                </div>
+                <div class="searchFriendInfo">
+                  <div class="searchFriendName">
+                    <div class="searchFriendNameText" v-if="selectConversationItem.group_name==null">{{selectConversationItem.user_name}}</div>
+                    <div class="searchFriendNameText" v-else>{{selectConversationItem.group_name}}</div>
+                  </div>
+                  <div class="searchFriendPhone" v-if="selectConversationItem.group_name==null">账号：{{selectConversationItem.user_name}}</div>
+                  <div class="searchFriendPhone" v-else>多人群组</div>
+                </div>
+              </div>
+              <div class="searchFriendButton">
+                <el-button type="primary" @click="selectConversation(selectConversationItem)">发送消息</el-button>
+              </div>
+            </div>
+          </div>
+          <!--搜索 end------------------------------------------>
+          <div class="userListBox">
+            <!--会话列表 start------------------------------------------>
+            <div :class="['userItem', item.status === 1 ? 'active' : '']" v-for="item in conversationList" :key="item.receiver_id">
+              <div class="flexItemBox" v-if="item.is_group==0" @click="selectConversation(item)">
+                <!--单聊-->
+                <div class="userAvatar">
+                  <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
+                  <img src="@/assets/chat/user/admin.png" v-else>
+                </div>
+                <div class="userInfo">
+                  <div class="userName">
+                    <div class="userNameText">{{item.user_name}}</div>
+                    <div class="userMessageNum" v-if="item.num>0">{{item.num}}</div>
+                  </div>
+                </div>
+              </div>
+              <!--群聊-->
+              <div class="flexItemBox" v-else @click="selectGroup(item)">
+                <div class="userAvatar">
+                  <img src="@/assets/chat/user/group.jpg">
+                </div>
+                <div class="userInfo">
+                  <div class="userName">
+                    <div class="userNameText">{{item.group_name}}</div>
+                    <div class="userMessageNum" v-if="item.num>0">{{item.num}}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!--会话列表 end------------------------------------------>
+          </div>
+        </div>
+        <!--右侧菜单 start------------------------------------------>
+        <div class="hallRight" v-if="ifNoMessage==true">
+          <div class="ifHallRigthNoMessage">恒星管理平台</div>
+        </div>
+        <div class="hallRight" v-else>
+          <!--加载中 start-->
+          <div class="hallRightLoading" v-if="hallRightLoading">
+            <div class="hallRightLoadingIcon">
+              <div class="hallRightLoadingIconItem"><i class="el-icon-loading"></i></div>
+              <div class="hallRightLoadingText">恒星管理平台</div>
+            </div>
+          </div>
+          <!--加载中 end-->
+          <div :class="['UserNameBox', groupId ? 'ifNotice' : '']">
+            <div class="userName">{{ messageTitle }}</div>
+            <img src="@/assets/chat/fi_more.png" v-if="groupId!=''" @click="openGroupSystem" class="moreIcon">
+            <div class="groupNotice" v-if="groupId!=''&&groupProfile!=''" @click="groupProfileWindow=true">{{groupProfile}}</div>
+            <div v-if="groupId==''">
+              <div class="shareCardIcon" @click="openShareCard">
+                <i class="el-icon-postcard"></i>
+              </div>
+            </div>
+          </div>
+          <div class="rightPositionBox">
+            <div class="rightUserMessageBox" ref="rightUserMessageBox">
+              <!-- <div class="timeBox">
+                <span>12:40:22</span>
+              </div> -->
+              <div v-for="item in chatrecords" :key="item.id">
+                <!--文字消息类型 对方-->
+                <div class="otherUserMessage" v-if="item.action=='recieved'&&Number(item.msg_type)==1">
+                  <div class="otherUserIcon">
+                    <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
+                    <img src="@/assets/chat/user/admin.png" v-else>
+                  </div>
+                  <div class="otherUserMessageText">
+                    {{item.content}}
+                  </div>
+                </div>
+                <!--文字消息类型 我-->
+                <div class="meUserMessage" v-if="item.action=='said'&&Number(item.msg_type)==1">
+                  <div class="meUserMessageText">
+                    {{item.content}}
+                  </div>
+                  <div class="meUserIcon">
+                    <img :src="item.user_avatar" v-if="item.user_avatar!=null&&item.user_avatar!=''">
+                    <img src="@/assets/chat/user/admin.png" v-else>
+                  </div>
+                </div>
+                <!-- 图片类型 对方-->
+                <div class="otherUserMessage" v-if="item.action=='recieved'&&Number(item.msg_type)==2">
+                  <div class="otherUserIcon">
+                    <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
+                    <img src="@/assets/chat/user/admin.png" v-else>
+                  </div>
+                  <div class="otherUserMessageText">
+                    <div class="messageTypeImage">
+                      <img :src="item.content" @click="imgZoom(item.content)">
+                    </div>
+                  </div>
+                </div>
+                <!-- 图片类型 我-->
+                <div class="meUserMessage" v-if="item.action=='said'&&Number(item.msg_type)==2">
+                  <div class="meUserMessageText">
+                    <div class="messageTypeImage">
+                      <img :src="item.content" @click="imgZoom(item.content)">
+                    </div>
+                  </div>
+                  <div class="meUserIcon">
+                    <img :src="item.user_avatar" v-if="item.user_avatar!=null&&item.user_avatar!=''">
+                    <img src="@/assets/chat/user/admin.png" v-else>
+                  </div>
+                </div>
+                <!--文件类型 对方-->
+                <div class="otherUserMessage" v-if="item.action=='recieved'&&item.msg_type==3">
+                  <div class="otherUserIcon">
+                    <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
+                    <img src="@/assets/chat/user/admin.png" v-else>
+                  </div>
+                  <div class="otherUserMessageText" @click="downloadFile(item)">
+                    <div class="messageTypeFile">
+                      <div class="messageTypeFileTop">
+                        <div class="messageTypeFileInfo">
+                          <div class="messageTypeFileTitle">
+                            {{ JSON.parse(item.content).oldFileName }}
+                          </div>
+                          <div class="messageTypeFileIcon">
+                            <img src="@/assets/chat/file.png"/>
+                          </div>
+                        </div>
+                        <!-- <div class="messageTypeFileSize">20kb</div> -->
+                      </div>
+                      <div class="messageTypeFileLogo">恒星管理平台保护您的电脑安全</div>
+                    </div>
+                  </div>
+                </div>
+                <!--文件类型 我-->
+                <div class="meUserMessage" v-if="item.action=='said'&&Number(item.msg_type)==3">
+                  <div class="meUserMessageText" @click="downloadFile(item)">
+                    <div class="messageTypeFile">
+                      <div class="messageTypeFileTop">
+                        <div class="messageTypeFileInfo">
+                          <div class="messageTypeFileTitle">
+                            {{ JSON.parse(item.content).oldFileName }}
+                          </div>
+                          <div class="messageTypeFileIcon">
+                            <img src="@/assets/chat/file.png"/>
+                          </div>
+                        </div>
+                        <!-- <div class="messageTypeFileSize">20kb</div> -->
+                      </div>
+                      <div class="messageTypeFileLogo">恒星管理平台保护您的电脑安全</div>
+                    </div>
+                  </div>
+                  <div class="meUserIcon">
+                    <img :src="item.user_avatar" v-if="item.user_avatar!=null&&item.user_avatar!=''">
+                    <img src="@/assets/chat/user/admin.png" v-else>
+                  </div>
+                </div>
+                <!--名片 我-->
+                <div class="meUserMessage" v-if="item.action=='said'&&Number(item.msg_type)==4">
+                  <div class="meUserMessageText" @click="addFriend(item.content.split(',')[2])">
+                    <div class="messageTypeCard">
+                      <div class="messageTypeCardTop">
+                        <div class="messageTypeCardIcon">
+                          <!-- <img :src="item.content.split(',')[0]"> -->
+                          <img src="@/assets/chat/user/user.png">
+                        </div>
+                        <div class="messageTypeCardName">{{item.content.split(',')[1]}}</div>
+                      </div>
+                      <div class="messageTypeCardText">
+                        分享个人名片
+                      </div>
+                    </div>
+                  </div>
+                  <div class="meUserIcon">
+                    <img :src="item.user_avatar" v-if="item.user_avatar!=null&&item.user_avatar!=''">
+                    <img src="@/assets/chat/user/admin.png" v-else>
+                  </div>
+                </div>
+                <!--名片 对方-->
+                <div class="otherUserMessage" v-if="item.action=='recieved'&&Number(item.msg_type)==4">
+                  <div class="otherUserIcon">
+                    <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
+                    <img src="@/assets/chat/user/admin.png" v-else>
+                  </div>
+                  <div class="otherUserMessageText" @click="addFriend(item.content.split(',')[2])">
+                    <div class="messageTypeCard">
+                      <div class="messageTypeCardTop">
+                        <div class="messageTypeCardIcon">
+                          <!-- <img :src="item.content.split(',')[0]"> -->
+                          <img src="@/assets/chat/user/user.png">
+                        </div>
+                        <div class="messageTypeCardName">{{item.content.split(',')[1]}}</div>
+                      </div>
+                      <div class="messageTypeCardText">
+                        分享个人名片
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <!--邀请加群 我-->
+                <div class="meUserMessage" v-if="item.action=='said'&&Number(item.msg_type)==6">
+                  <div class="meUserMessageText">
+                    <div class="messageGroupInvite" @click="openGroupInviteWindow(item)">
+                      <div class="messageGroupInviteTop">
+                        <div class="messageGroupInviteIcon">
+                          <img src="@/assets/chat/user/group.jpg">
+                        </div>
+                        <div class="messageGroupInfoText">
+                          <div class="messageGroupInfoTextTitle">邀请你加入群聊</div>
+                          <div class="messageGroupInfoTextTxt">{{item.content.split(',')[0]}}</div>
+                        </div>
+                      </div>
+                      <div class="messageGroupInviteText">
+                        点击加入
+                      </div>
+                    </div>
+                  </div>
+                  <div class="meUserIcon">
+                    <img :src="item.user_avatar" v-if="item.user_avatar!=null&&item.user_avatar!=''">
+                    <img src="@/assets/chat/user/admin.png" v-else>
+                  </div>
+                </div>
+                <!--邀请加群 对方-->
+                <div class="otherUserMessage" v-if="item.action=='recieved'&&Number(item.msg_type)==6">
+                  <div class="otherUserIcon">
+                    <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
+                    <img src="@/assets/chat/user/admin.png" v-else>
+                  </div>
+                  <div class="otherUserMessageText">
+                    <div class="messageGroupInvite" @click="openGroupInviteWindow(item)">
+                      <div class="messageGroupInviteTop">
+                        <div class="messageGroupInviteIcon">
+                          <img src="@/assets/chat/user/group.jpg">
+                        </div>
+                        <div class="messageGroupInfoText">
+                          <div class="messageGroupInfoTextTitle">邀请你加入群聊</div>
+                          <div class="messageGroupInfoTextTxt">{{item.content.split(',')[0]}}</div>
+                        </div>
+                      </div>
+                      <div class="messageGroupInviteText">
+                        点击加入
+                      </div>
+                    </div>
+                  </div>
+                </div>
+  
+              </div>
+              <!-- <div class="newUserStatus">
+                <div class="newUserStatusText">
+                  <span>"</span>
+                  <span class="newUserStatusTextName">新用户新用户新用户新用户</span>
+                  <span>"加入了群聊</span>
+                </div>
+              </div> -->
+            </div>
+            <div class="sendMessageBox">
+              <div class="sendMessageTools">
+                <!--上传文件 start-->
+                <div class="toolsBigBox">
+                  <div class="toolsBox">
+                    <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeImgUpload">
+                      <img src="@/assets/chat/send_img.png">
+                    </el-upload>
+                    <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeFileUpload">
+                      <img src="@/assets/chat/send_file.png">
+                    </el-upload>
+                    <img src="@/assets/chat/send_message.png" @click="fileWindowStatus=true">
+                  </div>
+                </div>
+                <div class="fileBox" v-if="sendMessage.img.imgUrl!=''">
+                  <img :src="sendMessage.img.imgUrl">
+                  <div class="fileBoxText">{{ sendMessage.img.oldFileName }}</div>
+                  <div @click="deFileUpload"><i class="el-icon-close"></i></div>
+                </div>
+                <div class="fileBox" v-if="sendMessage.file.fileUrl!=''">
+                  <img src="@/assets/chat/file.png">
+                  <div class="fileBoxText">{{ sendMessage.file.oldFileName }}</div>
+                  <div @click="deFileUpload"><i class="el-icon-close"></i></div>
+                </div>
+                <!--上传文件 end-->
+              </div>
+              <div class="sendMessageInput">
+                <el-input
+                  type="textarea"
+                  placeholder="请输入内容"
+                  v-model="userMessage"
+                  :rows="4"
+                  resize="none"
+                  maxlength="200"
+                  @keyup.enter.native="sendUserMessage"
+                >
+                </el-input>
+              </div>
+              <div class="sendMessageButton">
+                <el-button v-if="sendMessage.img.imgUrl!=''||sendMessage.file.fileUrl!=''" type="primary" size="medium" @click="sendUserMessageToFile">发送文件 <i class="el-icon-position"></i></el-button>
+                <el-button v-else type="primary" size="medium" @click="sendUserMessage">发送 <i class="el-icon-position"></i></el-button>
+              </div>
+            </div>
+            <!--右侧菜单 start------------------------------------------------------------>
+            <div class="rightSlideBox" v-if="rightSlideBoxShow">
+              <!--关闭按钮-->
+              <div class="rightSlideBoxClose">
+                <div class="rightSlideBoxCloseTitle">群设置</div>
+                <div @click="openGroupSystem" class="rightSlideBoxCloseIcon">
+                  <i class="el-icon-close"></i>
+                </div>
+              </div>
+  
+              <!--2216-->
+              <div class="rightSlideSearch">
+                <div class="searchBox">
+                  <el-input
+                    placeholder="请输入内容"
+                    prefix-icon="el-icon-search"
+                    v-model="searchUser"
+                    @keyup.enter.native="rightSearchUser"
+                  >
+                  </el-input>
+                </div>
+                <!--弹出框-->
+                <div class="searchFriendBox" v-if="groupRightSearchWindow">
+                  <div class="searchFriendClose">
+                    <div @click="closeRightSearchUser" class="rightSlideBoxCloseIcon">
+                      <i class="el-icon-close"></i>
+                    </div>
+                  </div>
+                  <div class="searchFriendItem">
+                    <div class="searchFriendAvatar">
+                      <img :src="groupRightUserInfo.avatar" v-if="groupRightUserInfo.avatar!=null&&groupRightUserInfo.avatar!=''">
+                      <img src="@/assets/chat/user/admin.png" v-else>
+                    </div>
+                    <div class="searchFriendInfo">
+                      <div class="searchFriendName">
+                        <div class="searchFriendNameText">{{groupRightUserInfo.user_name}}</div>
+                      </div>
+                      <div class="searchFriendPhone">账号：{{groupRightUserInfo.user_name}}</div>
+                    </div>
+                  </div>
+                  <div class="searchFriendButton">
+                    <el-button type="primary" v-if="groupRightUserInfo.isFriend==true" @click="searchConversationIfCreate(groupRightUserInfo.user_id)">发送消息</el-button>
+                    <el-button type="primary" v-if="groupRightUserInfo.isFriend==false&&Number(groupRightUserInfo.user_id)!=Number(myUserId)" @click="addFriend(groupRightUserInfo.user_id)">添加好友</el-button>
+                    <el-button type="primary" v-if="groupRightUserInfo.isFriend==false&&Number(groupRightUserInfo.user_id)==Number(myUserId)" disabled>添加好友</el-button>
+                  </div>
+                </div>
+              </div>
+  
+              <div class="rightSlideUserBox">
+                <div class="rightSlideUserItem rightEditUserItem" @click="editGroupMember">
+                  <div class="rightSlideUserItemIcon">
+                    <div class="addUserIcon">
+                      <i class="el-icon-user-solid"></i>
+                    </div>
+                  </div>
+                  <div class="rightSlideUserItemName">
+                    编辑成员
+                  </div>
+                </div>
+                <div class="rightSlideUserItem" v-for="item in groupUserList" :key="item.user_id">
+                  <div class="rightSlideUserItemIcon">
+                    <span class="el-dropdown-link">
+                      <!-- {{ creatorId }} {{ item.user_id }} -->
+                      <div class="rightSlideUserGroupLeader" v-if="creatorId == item.user_id">群主</div>
+                      <div>
+                        <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
+                        <img src="@/assets/chat/user/admin.png" v-else>
+                      </div>
+                    </span>
+                  </div>
+                  <div class="rightSlideUserItemName">
+                    <span v-if="item.user_name!=null">{{item.user_name}}</span>
+                    <span v-else>未知用户</span>
+                  </div>
+                  <!-- <div class="rightSlideUserItemMore">
+                    <div class="rightSlideUserItemMoreMain">
+                      <div class="rightSlideUserItemMoreMainIcon">
+                        <img src="@/assets/chat/user/user.png">
+                      </div>
+                      <div class="rightSlideUserItemMoreMainInfo">
+                        <div class="rightSlideUserItemMoreMainInfoTop">
+                          <div class="rightSlideUserItemMoreUserName">
+                            <div>用户名</div>
+                            <div class="rightSlideUserItemMoreUserMore">
+                              <img src="@/assets/chat/boy.png">
+                            </div>
+                          </div>
+                          <div class="rightSlideUserItemMoreUserMoreIcon">
+                            <img src="@/assets/chat/fi_more.png">
+                          </div>
+                        </div>
+                        <div class="rightSlideUserItemMoreNumber">
+                          账号：15210211200
+                        </div>
+                      </div>
+                    </div>
+                    <div class="rightSlideUserItemMoreLine">
+                      <div class="rightSlideUserItemMoreLineItem">
+                        <div class="rightSlideUserItemMoreTitle">备注</div>
+                        <div class="rightSlideUserItemMoreText">
+                          用户名
+                          <i class="el-icon-edit"></i>
+                        </div>
+                      </div>
+                      <div class="rightSlideUserItemMoreLineItem">
+                        <div class="rightSlideUserItemMoreTitle">共同群聊</div>
+                        <div class="rightSlideUserItemMoreText">0个</div>
+                      </div>
+                      <div class="rightSlideUserItemMoreLineItem">
+                        <div class="rightSlideUserItemMoreTitle">添加方式</div>
+                        <div class="rightSlideUserItemMoreText">通过账号添加</div>
+                      </div>
+                      <div class="rightSlideUserItemMoreLineButton">
+                        <div class="rightSlideUserItemMoreLineGroup">
+                          <img src="@/assets/chat/sendmessage.png">
+                          <div>发消息</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div> -->
+                </div>
+  
+                
+              </div>
+              <!-- <div class="rightSlideMore">
+                显示更多 <i class="el-icon-arrow-down"></i>
+              </div> -->
+              <div class="rightLineBorder"></div>
+              <!--聊天记录 start------------------------------------------------------------>
+              <div class="rightSlideFunction">
+                <div class="rightSlideFunctionItem" @click="fileWindowStatus=true">
+                  <div class="rightSlideFunctionItemText">聊天记录</div>
+                  <div class="rightSlideFunctionItemIcon">
+                    <img src="@/assets/chat/arrow_right.png" alt="">
+                  </div>
+                </div>
+                <!-- <div class="rightSlideFunction">
+                  <div class="rightSlideFunctionItem">
+                    <div class="rightSlideFunctionItemText">设置为置顶</div>
+                    <div class="rightSlideFunctionItemIcon">
+                      <el-switch
+                        v-model="ifTop"
+                        active-color="#5570F1"
+                        inactive-color="#BBC5CB">
+                      </el-switch>
+                    </div>
+                  </div>
+                </div> -->
+              </div>
+              <!--聊天记录 end------------------------------------------------------------>
+              <!--群聊设置 start------------------------------------------------------------>
+              <div class="rightSlideFunction">
+                <div class="groupSystem">
+                  <div class="groupChatSystem">
+                    <div class="groupChatTitle">群聊名称</div>
+                    <div class="groupChatText">
+                      <div class="groupChatTextContent">{{this.messageTitle}}</div>
+                      <img src="@/assets/chat/editGroup.png" @click="editGroupNameWindow=true">
+                    </div>
+                  </div>
+                  <div class="groupChatSystem">
+                    <div class="groupChatTitle">群公告</div>
+                    <div class="groupChatText" v-if="this.groupProfile!=''">
+                      <div class="groupChatTextContent">{{this.groupProfile}}</div>
+                      <img src="@/assets/chat/editGroup.png" @click="editGroupNoticeWindow=true" v-if="Number(this.myUserId)==Number(this.creatorId)">
+                    </div>
+                    <div class="groupChatText" v-else>
+                      暂无群公告
+                      <img src="@/assets/chat/editGroup.png" @click="editGroupNoticeWindow=true" v-if="Number(this.myUserId)==Number(this.creatorId)">
+                    </div>
+                  </div>
+                  <!-- <div class="groupChatSystem">
+                    <div class="groupChatTitle">我在本群的昵称</div>
+                    <div class="groupChatText">
+                      仅群主可修改
+                    </div>
+                  </div> -->
+                </div>
+                <!-- <div class="rightSlideFunction">
+                  <div class="rightSlideFunctionItem">
+                    <div class="rightSlideFunctionItemText">显示群成员昵称</div>
+                    <div class="rightSlideFunctionItemIcon">
+                      <el-switch
+                        v-model="ifTop"
+                        active-color="#5570F1"
+                        inactive-color="#BBC5CB">
+                      </el-switch>
+                    </div>
+                  </div>
+                </div> -->
+              </div>
+              <!--群聊设置 end------------------------------------------------------------>
+              <div class="rightSlideFooterBox">
+                <div @click="openShareMyGroup">分享群</div>
+                <div @click="delGroup" v-if="creatorId==myUserId">解散群</div>
+                <div @click="closeGroup" v-else>退出群</div>
+                <div @click="openGroupSystem">关闭</div>
+              </div>
+              <!-- <div class="rightSlideFooter isShare" @click="openShareMyGroup">
+                分享群聊
+              </div>
+              <div class="rightSlideFooter" @click="delGroup" v-if="creatorId==myUserId">
+                解散群聊
+              </div>
+              <div class="rightSlideFooter" @click="closeGroup" v-else>
+                退出群聊
+              </div>
+              <div class="rightSlideFooter isLast" @click="openGroupSystem">
+                关闭
+              </div> -->
+            </div>
+          </div>
+          <!--右侧菜单 end------------------------------------------>
+        </div>
+      </div>
+      <!--大厅 end------------------------------------------------------------>
+  
+      <!--添加群组弹出框 start------------------------------------------------------------>
+      <el-dialog :visible.sync="groupWindowStatus" :close-on-click-modal="false" width="1028px">
+        <div class="searchWindow">
+          <div class="searchWindowLeft">
+            <div class="searchUserWindowBox">
+              <el-input
+                placeholder="请输入内容"
+                prefix-icon="el-icon-search"
+                v-model="searchFriendGroup"
+                @keyup.enter.native="searchFriendGroupUser"
+              >
+              </el-input>
+              <!--搜索用户弹出框 start------------------------------------------------------------>
+              <div class="searchFriendBox" v-if="groupFriendsWindowStatus">
+                <div class="searchFriendClose">
+                  <div @click="closeSearchFriendWindow" class="rightSlideBoxCloseIcon">
+                    <i class="el-icon-close"></i>
+                  </div>
+                </div>
+                <div class="searchFriendItem">
+                  <div class="searchFriendAvatar">
+                    <img :src="groupFriendSearchUser.avatar" v-if="groupFriendSearchUser.avatar!=null&&groupFriendSearchUser.avatar!=''">
+                    <img src="@/assets/chat/user/admin.png" v-else>
+                  </div>
+                  <div class="searchFriendInfo">
+                    <div class="searchFriendName">
+                      <div class="searchFriendNameText">{{groupFriendSearchUser.user_name}}</div>
+                    </div>
+                    <div class="searchFriendPhone">账号：{{groupFriendSearchUser.user_name}}</div>
+                  </div>
+                </div>
+                <div class="searchFriendButton">
+                  <el-button v-if="groupFriendSearchUser.status==false" type="primary" @click="addSearchFriendWindow">添加</el-button>
+                  <el-button v-else type="warning" @click="addSearchFriendWindow">移除</el-button>
+                </div>
+              </div>
+              <!--搜索用户弹出框 end------------------------------------------------------------>
+            </div>
+            
+            <!--搜索用户 start------------------------------------------------------------>
+            <div class="searchUserBox">
+              <!-- <div class="searchNameEnglish">A</div> -->
+              <div class="searchUserItem" v-for="item in friendsList" :key="item.id">
+                <el-checkbox v-model="item.status" 
+                             @change="changeSelectFriends(item)" 
+                             :disabled="Number(item.friend_id) == Number(creatorId) || groupUserList.includes(item.friend_id)"></el-checkbox>
+                <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
+                <img src="@/assets/chat/user/admin.png" v-else>
+                <div class="searchUserName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
+                <div class="searchUserName" v-else>{{item.user_name}}</div>
+              </div>
+            </div>
+            <!--搜索用户 end------------------------------------------------------------>
+          </div>
+          <div class="searchWindowRight">
+            <div class="searchWindowRightTop">
+              <div class="searchWindowRightTitle">创建群聊</div>
+              <div class="searchWindowRightNum">已选择{{friendsList.filter(item=>item.status).length}}个联系人</div>
+            </div>
+            <div class="searchWindowUserList">
+              <div class="searchWindowUserItem" v-for="item in friendsList" :key="item.id" v-if="item.status==true">
+                <div class="searchWindowUserIcon">
+                  <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
+                  <img src="@/assets/chat/user/admin.png" v-else>
+                  <div class="searchWindowDeleteUser" @click="cancelSelectFriends(item.id)">
+                    <i class="el-icon-close"></i>
+                  </div>
+                </div>
+                <div class="searchWindowUserName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
+                <div class="searchWindowUserName" v-else>{{item.user_name}}</div>
+              </div>
+            </div>
+            <!--分享名片 start------------------------------------------------------------>
+            <!-- <div class="shareCardBox">
+              <div class="shareCardTitle">[名片]用户名称</div>
+              <div class="shareCardInput">
+                <el-input v-model="userCardMessage" placeholder="给用户留言"></el-input>
+              </div>
+            </div> -->
+            <!--分享名片 end------------------------------------------------------------>
+            <div class="searchWindowFooter">
+              <el-button type="info" @click="clearCreatGroupWindow">取消</el-button>
+              <el-button type="primary" @click="createForGroup" :disabled="friendsList.filter(item=>item.status).length<2">完成</el-button>
+            </div>
+          </div>
+        </div>
+      </el-dialog>
+      <!--添加群组弹出框 end------------------------------------------------------------>
+  
+      <!--聊天记录弹出框 start------------------------------------------------------------>
+      <el-dialog :visible.sync="fileWindowStatus" title="聊天记录" :close-on-click-modal="false" width="757px">
+        <div class="fileWindow">
+          <div class="fileWindowHeader">
+            <el-input
+              placeholder="请输入内容"
+              prefix-icon="el-icon-search"
+              v-model="searchChatRecords"
+              @keyup.enter.native="searchChatRecordsUser"
+              :disabled="activeName !== 'all'"
+            >
+            </el-input>
+          </div>
+          <!--聊天记录选项卡 start------------------------------------------------------------>
+          <el-tabs v-model="activeName">
+            <el-tab-pane label="全部" name="all">
+              <!-- <div class="fileWindowMessageTime">2024-11-10</div> -->
+              <div class="fileWindowMessageScrollBox" ref="fileWindowMessageScrollBox">
+                <div class="fileWindowMessageItemBox" v-for="item in chatrecords">
+                  <!--文字消息 start-->
+                  <div v-if="Number(item.msg_type)==1" class="historicalMessageBox">
+                    <div class="fileWindowMessageItemIcon">
+                      <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
+                      <img src="@/assets/chat/user/admin.png" v-else>
+                    </div>
+                    <div class="fileWindowMessageItem">
+                      <div class="fileWindowMessageItemInfo">
+                        <div class="fileWindowMessageItemName">{{item.receiver_id_name}}</div>
+                        <div class="fileWindowMessageItemTime">{{item.created_at}}</div>
+                      </div>
+                      <div class="fileWindowMessageItemText">{{item.content}}</div>
+                    </div>
+                  </div>
+                  <!--文字消息 end-->
+                  <!--图片消息 start-->
+                  <div v-if="Number(item.msg_type)==2" class="historicalMessageBox">
+                    <div class="fileWindowMessageItemIcon">
+                      <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
+                      <img src="@/assets/chat/user/admin.png" v-else>
+                    </div>
+                    <div class="fileWindowMessageItem">
+                      <div class="fileWindowMessageItemInfo">
+                        <div class="fileWindowMessageItemName">{{item.receiver_id_name}}</div>
+                        <div class="fileWindowMessageItemTime">{{item.created_at}}</div>
+                      </div>
+                      <div class="fileWindowMessageItemText">
+                        <img :src="item.content" class="fileWindowMessageItemImage">
+                      </div>
+                    </div>
+                  </div>
+                  <!--图片消息 end-->
+                  <!--文件消息 start-->
+                  <div v-if="Number(item.msg_type)==3" class="historicalMessageBox">
+                    <div class="fileWindowMessageItemIcon">
+                      <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
+                      <img src="@/assets/chat/user/admin.png" v-else>
+                    </div>
+                    <div class="fileWindowMessageItem">
+                      <div class="fileWindowMessageItemInfo">
+                        <div class="fileWindowMessageItemName">{{item.receiver_id_name}}</div>
+                        <div class="fileWindowMessageItemTime">{{item.created_at}}</div>
+                      </div>
+                      <div class="fileWindowMessageItemText">
+                        <div class="messageTypeFile">
+                          <div class="messageTypeFileTop">
+                            <div class="messageTypeFileInfo">
+                              <div class="messageTypeFileTitle">
+                                {{ JSON.parse(item.content).oldFileName }}
+                              </div>
+                              <div class="messageTypeFileIcon">
+                                <img src="@/assets/chat/file.png"/>
+                              </div>
+                            </div>
+                            <!-- <div class="messageTypeFileSize">20kb</div> -->
+                          </div>
+                          <div class="messageTypeFileLogo">恒星管理平台保护您的电脑安全</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <!--文件消息 end-->
+                </div>
+              </div>
+              
+            </el-tab-pane>
+            <el-tab-pane label="文件" name="file">
+              <div class="fileWindowMessageItemBox" v-for="item in chatrecords">
+                <!--文件消息 start-->
+                <div v-if="Number(item.msg_type)==3" class="historicalMessageBox">
+                  <div class="fileWindowMessageItemIcon">
+                    <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
+                    <img src="@/assets/chat/user/admin.png" v-else>
+                  </div>
+                  <div class="fileWindowMessageItem">
+                    <div class="fileWindowMessageItemInfo">
+                      <div class="fileWindowMessageItemName">{{item.receiver_id_name}}</div>
+                      <div class="fileWindowMessageItemTime">{{item.created_at}}</div>
+                    </div>
+                    <div class="fileWindowMessageItemText">
+                      <div class="messageTypeFile">
+                        <div class="messageTypeFileTop">
+                          <div class="messageTypeFileInfo">
+                            <div class="messageTypeFileTitle">
+                              {{ JSON.parse(item.content).oldFileName }}
+                            </div>
+                            <div class="messageTypeFileIcon">
+                              <img src="@/assets/chat/file.png"/>
+                            </div>
+                          </div>
+                          <!-- <div class="messageTypeFileSize">20kb</div> -->
+                        </div>
+                        <div class="messageTypeFileLogo">恒星管理平台保护您的电脑安全</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <!--文件消息 end-->
+              </div>
+              <!--图片消息 end-->
+              <div v-if="!chatrecords.some(item => Number(item.msg_type) === 3)" class="fileWindowNoMessage">暂无文件</div>
+            </el-tab-pane>
+            
+            <el-tab-pane label="图片" name="img">
+              <div class="fileWindowMessageItemBox" v-for="item in chatrecords">
+                <!--图片消息 start-->
+                <div v-if="Number(item.msg_type)==2" class="historicalMessageBox">
+                  <div class="fileWindowMessageItemIcon">
+                    <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
+                    <img src="@/assets/chat/user/admin.png" v-else>
+                  </div>
+                  <div class="fileWindowMessageItem">
+                    <div class="fileWindowMessageItemInfo">
+                      <div class="fileWindowMessageItemName">{{item.receiver_id_name}}</div>
+                      <div class="fileWindowMessageItemTime">{{item.created_at}}</div>
+                    </div>
+                    <div class="fileWindowMessageItemText">
+                      <img :src="item.content" class="fileWindowMessageItemImage">
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <!--图片消息 end-->
+              <div v-if="!chatrecords.some(item => Number(item.msg_type) === 2)" class="fileWindowNoMessage">暂无图片</div>
+            </el-tab-pane>
+            <!-- <el-tab-pane label="日期" name="date">
+              <div class="fileWindowDateBox">
+                <el-date-picker
+                  v-model="time"
+                  type="date"
+                  placeholder="选择日期">
+                </el-date-picker>
+                <el-button type="primary" class="fileWindowDateButton">搜索</el-button>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="群成员" name="groupUser">
+              <div class="fileWindowGroupMain">
+                <div class="fileWindowGroupUserLeft">
+                  <div class="fileWindowMessageTime">2024-11-10</div>
+                  <div class="fileWindowMessageItemBox">
+                    <div class="fileWindowMessageItemIcon">
+                      <img src="@/assets/chat/user/user.png" alt="">
+                    </div>
+                    <div class="fileWindowMessageItem">
+                      <div class="fileWindowMessageItemInfo">
+                        <div class="fileWindowMessageItemName">用户名称</div>
+                        <div class="fileWindowMessageItemTime">12:40</div>
+                      </div>
+                      <div class="fileWindowMessageItemText">用用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="fileWindowGroupUserRight">
+                  <div class="fileWindowGroupUserBox">
+                    <el-input placeholder="请输入内容" prefix-icon="el-icon-search"></el-input>
+                    <div class="searchUserBox">
+                      <div class="searchNameEnglish">A</div>
+                      <div class="searchUserItem">
+                        <img src="@/assets/chat/user/user.png">
+                        <div class="searchUserName">A农贸站群长</div>
+                      </div>
+                      <div class="searchNameEnglish">B</div>
+                      <div class="searchUserItem">
+                        <img src="@/assets/chat/user/user.png">
+                        <div class="searchUserName">B农贸站群长</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane> -->
+          </el-tabs>
+          <!--聊天记录选项卡 end------------------------------------------------------------>
+        </div>
+      </el-dialog>
+      <!--聊天记录弹出框 end------------------------------------------------------------>
+  
+      <!--添加用户弹出框 start------------------------------------------------------------>
+      <el-dialog :visible.sync="addUserWindowStatus" title="添加用户" :close-on-click-modal="false" width="420px">
+        <div class="messageFormBox">
+          <div class="messageFormTitle">发送添加朋友申请</div>
+          <div class="messageFormInput">
+            <el-input v-model="form.addUserForm.notes" placeholder="请输入"></el-input>
+          </div>
+          <div class="messageFormTitle">验证消息：</div>
+          <div class="messageFormInput">
+            <el-input v-model="form.addUserForm.nickname" placeholder="请输入"></el-input>
+          </div>
+          <div class="footerButtonBox">
+            <el-button type="info">取消</el-button>
+            <el-button type="primary">确定</el-button>
+          </div>
+        </div>
+      </el-dialog>
+      <!--添加用户弹出框 end------------------------------------------------------------>
+  
+      <!--群公告弹出框 start------------------------------------------------------------>
+      <el-dialog :visible.sync="editGroupNoticeWindow" title="编辑群公告" :close-on-click-modal="false" width="420px">
+        <div>
+          <div>
+            <el-input type="textarea" resize="none" v-model="editGroupProfile" placeholder="请输入" rows="10" maxlength="500"></el-input>
+          </div>
+          <div class="footerButtonBox">
+            <el-button type="info" @click="editGroupNoticeWindow=false">取消</el-button>
+            <el-button type="primary" @click="editGroupNotice">确定</el-button>
+          </div>
+        </div>
+      </el-dialog>
+      <!--群公告弹出框 end------------------------------------------------------------>
+  
+      <!--查看群公告 start------------------------------------------------------------>
+      <el-dialog :visible.sync="groupProfileWindow" title="群公告详情" :close-on-click-modal="false" width="420px">
+        <div>
+          <div class="groupProfileBox">
+            {{groupProfile}}
+          </div>
+          <div class="footerButtonBox">
+            <el-button type="info" @click="groupProfileWindow=false">关闭</el-button>
+          </div>
+        </div>
+      </el-dialog>
+      <!--查看群公告 end------------------------------------------------------------>
+  
+      <!--群名称弹出框 start------------------------------------------------------------>
+      <el-dialog :visible.sync="editGroupNameWindow" title="编辑群名称" :close-on-click-modal="false" width="420px">
+        <div>
+          <div>
+            <el-input type="textarea" resize="none" v-model="editMessageTitle" placeholder="请输入" maxlength="20"></el-input>
+          </div>
+          <div class="footerButtonBox">
+            <el-button type="info" @click="editGroupNameWindow=false">取消</el-button>
+            <el-button type="primary" @click="editGroupName">确定</el-button>
+          </div>
+        </div>
+      </el-dialog>
+      <!--群名称弹出框 end------------------------------------------------------------>
+  
+      <!--加入群聊弹出框 start------------------------------------------------------------>
+      <el-dialog :visible.sync="addGroupWindow" title="加入群聊" :close-on-click-modal="false" width="420px">
+        <div class="addGroupWindow">
+          <div class="addGroupWindowImg">
+            <img src="@/assets/chat/user/group.jpg" alt="">
+          </div>
+          <div class="addGroupWindowTitle">{{groupInviteInfo.group_name}}</div>
+          <div class="addGroupWindowText">加入"{{groupInviteInfo.group_name}}"群聊，点击可查看该群消息</div>
+          <div class="footerButtonBox">
+            <el-button type="info" @click="addGroupWindow = false">取消</el-button>
+            <el-button type="primary" @click="joinGroup">确定</el-button>
+          </div>
+        </div>
+      </el-dialog>
+      <!--加入群聊弹出框 end------------------------------------------------------------>
+  
+  
+      <!--编辑群成员弹出框 start------------------------------------------------------------>
+      <!--编辑时 左侧显示的是好友列表 右侧显示的是群成员-->
+      <el-dialog :visible.sync="groupEditWindowStatus" :close-on-click-modal="false" width="1028px" @closed="cancelEditGroupMember">
+        <div class="searchWindow">
+          <div class="searchWindowLeft">
+            <div class="searchUserWindowBox">
+              <el-input
+                placeholder="请输入内容"
+                prefix-icon="el-icon-search"
+                v-model="searchGroup"
+                @keyup.enter.native="searchGroupUser">
+              </el-input>
+              <!--搜索用户弹出框 start------------------------------------------------------------>
+              <div class="searchFriendBox" v-if="groupEditMainWindowStatus">
+                <div class="searchFriendClose">
+                  <div @click="closeAddGroupUserWindow" class="rightSlideBoxCloseIcon">
+                    <i class="el-icon-close"></i>
+                  </div>
+                </div>
+                <div class="searchFriendItem">
+                  <div class="searchFriendAvatar">
+                    <img :src="groupSearchUser.avatar" v-if="groupSearchUser.avatar!=null&&groupSearchUser.avatar!=''">
+                    <img src="@/assets/chat/user/admin.png" v-else>
+                  </div>
+                  <div class="searchFriendInfo">
+                    <div class="searchFriendName">
+                      <div class="searchFriendNameText">{{groupSearchUser.nickname}}</div>
+                    </div>
+                    <div class="searchFriendPhone">账号：{{groupSearchUser.nickname}}</div>
+                  </div>
+                </div>
+                <div class="searchFriendButton">
+                  <el-button v-if="groupSearchUser.status==false" type="primary" @click="addGroupUser(groupSearchUser)">添加</el-button>
+                  <el-button v-else-if="Number(creatorId)==Number(myUserId)" type="warning" @click="addGroupUser(groupSearchUser)" >移除</el-button>
+                  <el-button v-else type="warning" @click="addGroupUser(groupSearchUser)" disabled>移除</el-button>
+                </div>
+              </div>
+              <!--搜索用户弹出框 end------------------------------------------------------------>
+            </div>
+            <!--通讯录列表 start------------------------------------------------------------>
+            <div class="searchUserBox">
+              <!-- <div class="searchNameEnglish">A</div> -->
+              <!--群主-->
+              <div class="searchUserItem" v-for="(item,index) in friendsList" :key="index" v-if="Number(creatorId)==Number(myUserId)">
+                <!-- {{ item.friend_id }}
+                {{ creatorId }} -->
+                <!-- <el-checkbox v-model="item.status" @change="changeSelectFriends(item)" :disabled="Number(item.friend_id)==Number(creatorId)"></el-checkbox> -->
+                <el-checkbox v-model="item.status" @change="changeSelectFriends(item)" :disabled="Number(item.friend_id) == Number(creatorId)"></el-checkbox>
+                <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
+                <img src="@/assets/chat/user/admin.png" v-else>
+                <div class="searchUserName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
+                <div class="searchUserName" v-else>
+                  {{item.user_name}}
+                </div>
+              </div>
+              <!--非群主-->
+              <div class="searchUserItem" v-for="(item,index) in friendsList" :key="index" v-if="Number(creatorId)!=Number(myUserId)">
+                <el-checkbox v-model="item.status" @change="changeSelectFriends(item)" :disabled="Number(item.friend_id) == Number(creatorId) || isGroupUser(item.friend_id)"></el-checkbox>
+                <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
+                <img src="@/assets/chat/user/admin.png" v-else>
+                <div class="searchUserName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
+                <div class="searchUserName" v-else>
+                  {{item.user_name}}
+                </div>
+              </div>
+            </div>
+            <!--通讯录列表 end------------------------------------------------------------>
+          </div>
+          <div class="searchWindowRight">
+            <div class="searchWindowRightTop">
+              <div class="searchWindowRightTitle">编辑群聊</div>
+              <div class="searchWindowRightNum">已选择{{groupUserList.length}}个联系人</div>
+            </div>
+            <div class="searchWindowUserList">
+              <div class="searchWindowUserItem" v-for="(item,index) in groupUserList" :key="index" v-if="item.status==true">
+                <div class="searchWindowUserIcon">
+                  <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
+                  <img src="@/assets/chat/user/admin.png" v-else>
+                  <div class="rightSlideUserGroupLeader" v-if="creatorId == item.user_id">群主</div>
+                  <div class="searchWindowDeleteUser" @click="editRemoveGroupUser(item.user_id)" v-if="Number(creatorId)==Number(myUserId)&&item.user_id!=myUserId">
+                    <i class="el-icon-close"></i>
+                  </div>
+                </div>
+                <div class="searchWindowUserName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
+                <div class="searchWindowUserName" v-else-if="item.user_name!=null&&item.user_name!=''">{{item.user_name}}</div>
+                <div class="searchWindowUserName" v-else>未知用户</div>
+              </div>
+            </div>
+            <div class="searchWindowFooter">
+              <el-button type="info" @click="cancelEditGroupMember">取消</el-button>
+              <el-button type="primary" @click="saveEditGroupMember" :disabled="groupUserList.filter(item=>item.status).length<=2">完成</el-button>
+            </div>
+          </div>
+        </div>
+      </el-dialog>
+      <!--编辑群成员弹出框 end------------------------------------------------------------>
+  
+      <!--发送好友申请弹出框 start------------------------------------------------------------>
+      <el-dialog :visible.sync="addFriendWindowStatus" title="朋友申请" :close-on-click-modal="false" width="420px">
+        <div>
+          <div>
+            <el-form :model="form" ref="form" autocomplete="off" label-position="left">
+              <div class="formDiv">
+                <el-form-item label="验证消息：" :label-width="formLabelWidth" class="custom-align-right">
+                  <el-input v-model="addform.remark" autocomplete="off"  placeholder="请输入"></el-input>
+                </el-form-item>
+              </div> 
+            </el-form>
+          </div>
+          <div class="footerButtonBox">
+            <el-button type="info" @click="addFriendWindowStatus=false">取消</el-button>
+            <el-button type="primary" @click="addMyFriend">确定</el-button>
+          </div>
+        </div>
+      </el-dialog>
+      <!--发送好友申请弹出框 end------------------------------------------------------------>
+  
+      <!--分享名片 start------------------------------------------------------------>
+      <el-dialog :visible.sync="userCardWindowStatus" title="分享名片" :close-on-click-modal="false" width="420px">
+        <div>
+          <div class="shareCardWindowBox">
+            <el-tabs v-model="shareTableActive" type="card" @tab-click="handleClickShareCard">
+              <el-tab-pane label="分享给朋友" name="friend">
+                <div class="shareCardWindowBoxMain">
+                  <div v-for="item in friendsList" :key="item.id" class="shareCardRadioBox" >
+                    <el-radio :label="item.friend_id" v-model="useShareUserId">
+                      <input type="hidden" :value="item.friend_id">
+                    </el-radio>
+                    <div class="shareCardItem">
+                      <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
+                      <img src="@/assets/chat/user/admin.png" v-else>
+                      <div class="shareCardName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
+                      <div class="shareCardName" v-else>{{item.user_name}}</div>
+                    </div>
+                  </div>
+                </div>
+              </el-tab-pane>
+              <el-tab-pane label="分享到群聊" name="group">
+                <div class="shareCardWindowBoxMain">
+                  <div v-for="item in groupConversationList" :key="item.receiver_id" class="shareCardRadioBox" >
+                    <el-radio :label="item.receiver_id" v-model="useShareUserId">
+                      <input type="hidden" :value="item.receiver_id">
+                    </el-radio>
+                    <div class="shareCardItem">
+                      <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
+                      <img src="@/assets/chat/user/group.jpg" v-else>
+                      <div class="shareCardName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
+                      <div class="shareCardName" v-else>{{item.name}}</div>
+                    </div>
+                  </div>
+                </div>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+          <div class="footerButtonBox">
+            <el-button type="info" @click="userCardWindowStatus=false">取消</el-button>
+            <el-button type="primary" @click="shareCard">确定</el-button>
+          </div>
+        </div>
+      </el-dialog>
+      <!--分享名片 end------------------------------------------------------------>
+  
+      <!--分享群聊 start------------------------------------------------------------>
+      <el-dialog :visible.sync="shareGroupWindowStatus" title="分享群聊" :close-on-click-modal="false" width="420px">
+        <div>
+          <div class="shareCardWindowBox">
+            <el-tabs v-model="shareGroupActive" type="card" @tab-click="handleClickShareGroupCard">
+              <el-tab-pane label="分享给朋友" name="friend">
+                <div class="shareCardWindowBoxMain">
+                  <div v-for="item in friendsList" :key="item.id" class="shareCardRadioBox" >
+                    <el-radio :label="item.friend_id" v-model="shareGroupId">
+                      <input type="hidden" :value="item.friend_id">
+                    </el-radio>
+                    <div class="shareCardItem">
+                      <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
+                      <img src="@/assets/chat/user/admin.png" v-else>
+                      <div class="shareCardName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
+                      <div class="shareCardName" v-else>{{item.user_name}}</div>
+                    </div>
+                  </div>
+                </div>
+              </el-tab-pane>
+              <el-tab-pane label="分享到群聊" name="group">
+                <div class="shareCardWindowBoxMain">
+                  <div v-for="item in groupConversationList" :key="item.receiver_id" class="shareCardRadioBox" >
+                    <el-radio :label="item.receiver_id" v-model="shareGroupId">
+                      <input type="hidden" :value="item.receiver_id">
+                    </el-radio>
+                    <div class="shareCardItem">
+                      <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
+                      <img src="@/assets/chat/user/group.jpg" v-else>
+                      <div class="shareCardName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
+                      <div class="shareCardName" v-else>{{item.name}}</div>
+                    </div>
+                  </div>
+                </div>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+          <div class="footerButtonBox">
+            <el-button type="info" @click="shareGroupWindowStatus=false">取消</el-button>
+            <el-button type="primary" @click="shareMyGroup">确定</el-button>
+          </div>
+        </div>
+      </el-dialog>
+      <!--分享群聊 end------------------------------------------------------------>
+  
+      <!--放大图片 start------------------------------------------------------------>
+      <el-dialog :visible.sync="imgZoomStatus" title="图片详情" :close-on-click-modal="false" width="600px">
+        <div>
+          <div class="imgZoomBox">
+            <img :src="imgZoomUrl">
+          </div>
+          <div class="footerButtonBox">
+            <el-button type="info" @click="imgZoomStatus=false">关闭</el-button>
+          </div>
+        </div>
+      </el-dialog>
+      <!--放大图片 end------------------------------------------------------------>
+  
+      <!--老刘的代码 start------------------------------------------------------------>
+      <!-- <div class="layerBox">
+        <el-container style="height: 100vh;">
+          <el-aside width="300px" style="background: #f2f2f2;">
+            <el-menu>
+              <div class="conversation-list">会话记录（100）</div>
+              <el-menu-item 
+                v-for="conversation in conversations" 
+                :key="conversation.session_id"
+                @click="selectConversation(conversation)"
+                @contextmenu.prevent="showContextMenu($event, conversation)"
+                :class="{ 'is-active': activeConversation && activeConversation.session_id === conversation.session_id }">
+                <div v-if="conversation.talk_type==1">
+                  <el-avatar :src=conversation.user_avatar>{{ conversation.nickname }}</el-avatar> {{ conversation.nickname }}
+                </div>
+                <div v-if="conversation.talk_type==2">
+                  <el-avatar :src=conversation.group_avatar>{{ conversation.group_name }}</el-avatar> {{ conversation.group_name }}
+                </div>
+              </el-menu-item>
+  
+              <el-dropdown v-if="contextMenuVisible" :style="{ position: 'absolute', top: contextMenuY + 'px', left: contextMenuX + 'px' }" @command="handleMenuCommand">
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item command="view">查看</el-dropdown-item>
+                  <el-dropdown-item command="delete">删除</el-dropdown-item>
+                  <el-dropdown-item command="edit">编辑</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </el-menu>
+          </el-aside>
+  
+          <el-container>
+            <el-main style="padding: 20px;">
+              <div v-if="activeConversation">
+                <div v-for="(message, index) in activeConversation.messages" :key="index"  class="message">
+                  <div v-if="message.is_me==1" :class="{'is_me':message.is_me==1}">
+                    {{ message.content }} <el-avatar :src=message.user_avatar>{{ message.nickname }}</el-avatar>
+                  </div>
+                  <div  v-else>
+                    <el-avatar :src=message.user_avatar>{{ message.nickname }}</el-avatar>{{ message.content }}
+                  </div>
+                </div> 
+              </div>
+              <div v-else>
+                请选择一个会话
+              </div>
+            </el-main>
+  
+            <el-footer height="60px" style="padding: 10px; background: #fff;">
+              <el-input 
+                v-model="newMessage" 
+                placeholder="输入消息..."
+                @keyup.enter="sendMessage"
+                style="width: calc(100% - 100px); margin-right: 10px;">
+              </el-input>
+              <el-button @click="sendMessage" type="primary">发送</el-button>
+            </el-footer>
+          </el-container>
+        </el-container>
+      </div>  -->
+      <!--老刘的代码 end------------------------------------------------------------>
+    </div>
+  </template>
+  
+  <script>
+  //引入公用样式
+  import '@/styles/global.less';
+  //引入baseUrl
+  import URL from '@/utils/baseUrl';
+  //引入组件
+  import hallTitle from './components/hallTitle.vue';
+  import RingChart from '../dashboard/admin/components/RingChart.vue';
+  import { TimeSelect } from 'element-ui';
+  //引入socket地址 注意 后续版本将会删除这个请求方式
+  import baseUrl from '@/utils/baseUrl';
+  
+  export default {
+    components: {
+      hallTitle
+    },
+    data() {
+      return {
+        //1.全局配置 start---------------------------------------->
+        myUserId:'',//我的用户id
+        tableTitleName:'聊天列表',//左侧菜单标题
+        messageTitle:'',//当前的聊天名称
+        editMessageTitle:'',//正在编辑的聊天名称  
+        groupProfile:'',//当前的群公告
+        editGroupProfile:'',//正在编辑的群公告
+        groupProfileWindow:false,//群公告弹出框
+        listTimeOut:null,//定时器
+        addFriendWindowStatus:false,//添加好友弹出框
+        addform:{
+          friend_id:'',//好友id
+          remark:'',//备注名
+        },
+        formLabelWidth:'100px',
+        imgZoomStatus:false,//图片放大框
+        imgZoomUrl:'',//图片放大框的图片地址
+        //1.全局配置 end---------------------------------------->
+  
+        //2.会话列表 start---------------------------------------->
+        hallLeftLoading:false,//左侧加载中
+        hallRightLoading:false,//右侧加载中
+        conversationList:[],//会话列表
+        groupConversationList:[],//群聊会话列表
+        selectConversationItem:{},//选择会话
+        searchConversationStatus:false,//搜索会话状态
+        chatrecords:[],//聊天记录
+        ifTop:false,//是否为置顶
+        searchConversation:'',//搜索会话
+        //2.会话列表 end---------------------------------------->
+  
+        //3.聊天记录 start---------------------------------------->
+        receiverId:'',//接收消息的id
+        receiverType:'',//接收消息的类型 1单聊 2群聊
+        ifNoMessage:true,//如果没有选择任何聊天记录
+        searchChatRecords:"",//搜索聊天记录
+        userMessage:'',//用户发送的消息
+        fileWindowStatus:false,//聊天记录弹出框是否显示
+        activeName: 'all',//聊天记录选项卡
+        time:'',//按照时间搜索
+        //3.聊天记录 end---------------------------------------->
+  
+        //4.群聊 start---------------------------------------->
+        //4.1 创建群聊
+        groupWindowStatus:false,//添加聊天群组出框是否显示
+        groupFriendsWindowStatus:false,//创建群聊时搜索框
+        friendsList:[],//左侧好友列表
+        searchFriendGroup:'',//搜索群聊的输入框绑定值
+        groupFriendSearchUser:{},//编辑群时搜索群成员 用于显示搜索结果
+        //4.2 加入群聊
+        addGroupWindow:false,//加入群聊弹出框
+        //4.2 编辑群聊
+        groupId:'',//当前编辑的群聊的id
+        creatorId:'',//群主id
+        groupUserList:[],//群成员列表
+        groupInfo:{},//群设置信息
+        groupSearchUser:{},//编辑群时搜索群成员 用于显示搜索结果
+        rightSlideBoxShow:false,//右侧菜单是否显示
+        searchGroup:'',//搜索群聊的输入框绑定值
+        editGroupNoticeWindow:false,//编辑群公告弹出框
+        editGroupNameWindow:false,//编辑群名称弹出框
+        groupEditWindowStatus:false,//编辑群成员弹出框
+        groupEditMainWindowStatus:false,//编辑弹框中搜索人员
+        searchUser:"",//右侧菜单的搜索框
+        groupRightUserInfo:{},//直接从右侧群组菜单中搜索成员
+        groupRightSearchWindow:false,//右侧群组详情弹出框
+        //shareGroupMessage:"",//分享群聊的消息
+        shareGroupWindowStatus:false,//分享群聊弹出框
+        shareGroupActive:'friend',//分享名片选项卡
+        shareGroupId:'',//要分享给谁
+        useShareGroupInfo:{},//分享名片时选中的群组信息
+        groupInviteInfo:{},//群邀请信息
+        //4.群聊 end---------------------------------------->
+  
+        //6.名片 start---------------------------------------->
+        //userCardMessage:'',//用户留言
+        userCardWindowStatus:false,//用户名片弹出框
+        shareTableActive:'friend',//分享名片选项卡
+        useShareUserId:'',//分享名片时选中的用户id
+        useShareUserInfo:{},//分享名片时选中的用户信息
+        //6.名片 end---------------------------------------->
+  
+        //7.加好友 start---------------------------------------->
+        addUserWindowStatus:false,//添加用户弹出框是否显示
+        form:{
+          //好友申请
+          addUserForm:{
+            notes:"",//备注
+            nickname:"",//修改昵称
+          }
+        },
+        //7.加好友 end---------------------------------------->
+  
+        //8.发消息 start---------------------------------------->
+        sendMessage:{
+          img:{
+            imgUrl:'',//图片地址
+            oldFileName:"",//文件名
+          },
+          file:{
+            fileUrl:'',
+            oldFileName:"",//文件名
+          }
+        }
+        //8.发消息 end---------------------------------------->
+        
+        //老刘的代码 start---------------------------------------->
+        // activeConversation: null,
+        // newMessage: '',
+        // conversations: [],
+        // ws: null,
+        // contextMenuVisible: false, // 控制右键菜单的显示
+        // contextMenuX: 0, // 右键菜单的 X 坐标
+        // contextMenuY: 0, // 右键菜单的 Y 坐标
+        // selectedConversation: null // 选中的对话
+        //老刘的代码 end---------------------------------------->
+      };
+    },
+    methods: {
+      //1.会话列表 start---------------------------------------->
+      //1.1获取会话列表
+      getConversationList(){
+        this.$store.dispatch('chat/getConversation',{}).then(res=> {
+          console.log(res)
+          let data = res.data;
+          for(let item of data){
+            item.status = 0; //默认未选中
+          }
+          this.conversationList = data;
+          
+          this.hallLeftLoading = false;
+        }).catch(() => {
+          this.$message.error('获取会话列表失败!')
+        })
+      },
+      //1.2选择会话
+      selectConversation(item){
+        console.log(item)
+        //选择会话的时候开启loading框
+        this.hallRightLoading = true;
+        //关闭右侧详情框
+        this.closeRightDetailWindow();
+        //使用receiverId判断当前是哪个会话
+        this.receiverId = item.receiver_id;
+        //会话类型 = 1 单聊
+        this.receiverType = 1;
+        //分享名片时需要使用用户的头像和名称
+        this.useShareUserInfo = item;
+        //关闭搜索会话搜索框
+        this.closeSearchConversation();
+        //清理单聊状态
+        this.conversationList.forEach(conversation => {
+          conversation.status = (conversation.receiver_id === item.receiver_id) ? 1 : 0;
+          if(conversation.receiver_id === item.receiver_id){
+            //当前的聊天名称
+            this.messageTitle = item.user_name;
+          }
+        });
+        //console.log(this.conversationList)
+        this.getchatrecords(item.receiver_id);
+        //关闭没有选择任何聊天的界面
+        this.ifNoMessage = false;
+        //选择单聊的时候把群聊的id清空
+        this.groupId = '';
+      },
+      //1.3获取聊天记录
+      getchatrecords(user_id){
+        //此处增加一个show_id 用于后端判断如何积累未读消息 注意，选择group的方法在下面
+        this.$store.dispatch('chat/getChatRecords',{friend_id:user_id}).then(res=> {
+          console.log(res)
+          this.chatrecords = res.data.data;
+          //滚动条滚动到底部
+          this.scorllBottom();
+          console.log(this.chatrecords)
+          //选择会话后关闭loading框
+          this.hallRightLoading = false;
+        }).catch(() => {
+          this.$message.error('获取聊天记录失败!')
+          //选择会话后关闭loading框
+          this.hallRightLoading = false;
+        })
+      },
+      //1.4搜索会话
+      searchUserConversation(){
+        this.selectConversationItem = {};
+        let flag = false; //是否找到会话
+        //当group_name等于搜索内容的时候，选择会话
+        for(let item of this.conversationList){
+          if(item.group_name==this.searchConversation||item.user_name==this.searchConversation){
+            this.selectConversationItem = item;
+            flag = true;
+          }
+        }
+        //如果没有找到会话 就提示没有找到
+        if(!flag){
+          this.$message.error('没有找到该会话!')
+        }else{
+          this.searchConversationStatus = true;
+        }
+      },
+      //1.5关闭搜索会话
+      closeSearchConversation(){
+        this.selectConversationItem = {};
+        this.searchConversationStatus = false;
+      },
+      //1.6 搜索并定位聊天记录
+      searchChatRecordsUser() {
+        // 获取输入的内容
+        const searchTerm = this.searchChatRecords.toLowerCase();
+        // 查找匹配的消息
+        const matchingItem = this.chatrecords.find(item => {
+          return item.content.toLowerCase().includes(searchTerm);
+        });
+  
+        // 如果找到匹配的消息，滚动到该消息
+        if (matchingItem) {
+          const index = this.chatrecords.indexOf(matchingItem);
+          this.$nextTick(() => {
+            const messageElements = this.$refs.fileWindowMessageScrollBox.children;
+            if (messageElements[index]) {
+              messageElements[index].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+            }
+          });
+        } else {
+          this.$message.error('聊天信息不存在！'); // 提示用户
+        }
+      },
+      //1.7 从通讯录进入会话大厅
+      retrieveSession(){
+        console.log("开始执行retrieveSession方法！")
+        //1.获取会话列表
+        this.$store.dispatch('chat/getConversation',{}).then(res=> {
+          //2.查询当前会话中是否已经存在该好友的会话
+          let data = res.data;
+          let SeleteItem = {};
+          let flag = false;//对话是否已经存在
+          for(let item of data){
+            //3.如果会话中含有该好友的会话，则选中该会话
+            if(item.receiver_id == this.$route.query.friend_id){
+              item.status = 1;
+              SeleteItem = item;
+              flag = true;
+            }else{
+              item.status = 0;
+            }
+          }
+          //4.更新会话列表
+          this.conversationList = data;
+          //5.判断对话是否已经在会话列表中存在
+          if(flag==true){
+            console.log("会话存在！选中会话！")
+            //6.如果存在，则选中该会话
+            this.selectConversation(SeleteItem)
+          }else{
+            console.log("会话不存在！创建单聊！")
+            //7.如果不存在，则创建单聊
+            this.createSession();
+          }
+          //8.循环更新会话列表
+          this.forSearchConversationList();
+        }).catch(() => {
+          this.$message.error('获取会话列表失败!')
+        })
+      },
+      //1.8 创建单聊
+      createSession(){
+        //console.log(this.$route.query.friend_id)
+        const currentDateTime = new Date();
+        const formattedDateTime = currentDateTime.toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' });
+        console.log("当前时间（北京时间）:", formattedDateTime);
+        const message = { 
+          talk_type:1,//当前的会话类型
+          //receiver_id:this.$route.query.friend_id,//当前的会话id
+          receiver_id:this.createMessageId,//当前的会话id
+          content:"我于" + formattedDateTime + "创建了一个会话",//用户发发送的消息
+          msg_type:1,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
+        };
+        //console.log(message)
+        //发送消息
+        let that = this;
+        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+          //打开左侧loading防止重复点击
+          this.hallLeftLoading = true;
+          this.ws.send(JSON.stringify(message));
+  
+          //bug
+          //如果双方不是好友，此处可以弹出错误
+  
+          //2秒后搜索会话列表 防止创建失败
+          setTimeout(() => {
+            that.$store.dispatch('chat/getConversation',{}).then(res=> {
+              //查询当前会话中是否已经存在该好友的会话
+              let data = res.data;
+              let SeleteItem = {};
+              let flag = false;//对话是否已经存在
+              for(let item of data){
+                //如果会话中含有该好友的会话，则选中该会话
+                if(item.receiver_id == this.createMessageId){
+                  item.status = 1;
+                  SeleteItem = item;
+                  flag = true;
+                }else{
+                  item.status = 0;
+                }
+              }
+              //更新会话列表
+              that.conversationList = data;
+              //关闭loading层
+              that.hallLeftLoading = false;
+              //判断对话是否已经在会话列表中存在
+              if(flag==true){
+                //如果存在，则选中该会话
+                that.selectConversation(SeleteItem)
+              }else{
+                that.$message.error('创建会话失败，请重新从通讯录发起会话！')
+              }
+              
+            }).catch(() => {
+              that.$message.error('获取会话列表失败!')
+            })
+          }, 2000);
+  
+        }else{
+          this.$message.error('WebSocket连接失败!创建会话失败！')
+        }
+      },
+      //1.9 循环更新会话列表
+      forSearchConversationList(){
+        let that = this;
+        this.listTimeOut = setInterval(() => {
+          //刷新时先判断是否有选中的会话
+          if(that.receiverId!=''){
+            //如果不为空,说明用户选择了某一个会话，此时需要修改会话列表中该会话的状态
+            this.$store.dispatch('chat/getConversation',{}).then(res=> {
+              console.log(res)
+              let data = res.data;
+              for(let item of data){
+                if(item.receiver_id==that.receiverId){
+                  item.status = 1;
+                }else{
+                  item.status = 0;
+                }
+              }
+              this.conversationList = data;
+              console.log("开始获取会话列表，将于8秒后再次获取！")
+            }).catch(() => {
+              this.$message.error('获取会话列表失败!')
+            })
+  
+          }else{
+            //如果为空，说明用户没有选择任何会话，此时可以直接请求列表
+            that.getConversationList();
+          }
+        }, 7000);
+      },
+      //1.10 查询会话列表中是否存在会话，不存在就创建
+      searchConversationIfCreate(user_id){
+        //从会话列表中找到receiver_id于user_id相同的会话
+        let flag = false;
+        for(let item of this.conversationList){
+          if(item.receiver_id==user_id){
+            flag = true;
+          }
+        }
+        //第一种情况：两人是好友，且会话已经创建了
+        if(flag){
+          //给与右侧展示列表的id
+          this.groupRightUserInfo.receiver_id = String(user_id);
+          this.groupRightUserInfo.user_id = String(user_id);
+          this.selectConversation(this.groupRightUserInfo)
+          this.rightSlideBoxShow = false;
+          this.groupRightSearchWindow = false;
+        }else{
+          //第二种情况：两人是好友但是不存在对话
+          //console.log("不存在这个会话，创建单聊")
+          this.createMessageId = user_id;
+          this.createSession();
+        }
+      },
+      //1.会话列表 end---------------------------------------->
+  
+      //2.群聊 start---------------------------------------->
+      //2.1 创建群聊
+      //2.1.1 打开群聊创建窗口
+      creatGroup(){
+        this.groupWindowStatus = true;
+        //获得好友列表
+        this.getFriendsList();
+      },
+      //2.1.2 左侧菜单获取好友列表
+      getFriendsList(){
+        this.$store.dispatch('chat/getFriendsList',{user_id:this.myUserId}).then(res=> {
+          console.log(res)
+          for(let item of res.data){
+            item.status = false; //默认未选中
+          }
+          this.friendsList = res.data;
+        }).catch(() => {
+          this.$message.error('获取好友列表失败!')
+        })
+      },
+      //2.1.3 左侧菜单取消选择好友
+      cancelSelectFriends(id){
+        this.friendsList.forEach(item => {
+          if(item.id == id){
+            item.status = false;
+          }
+        });
+      },
+      //2.1.4 清空并关闭创建群弹出框
+      clearCreatGroupWindow(){
+        this.friendsList.forEach(item => {
+          item.status = false;
+        });
+        this.groupWindowStatus = false;
+      },
+      //2.1.5 创建群
+      createForGroup(){
+        let data = {
+          group_name:"",//群聊名称
+          group_desc:"仅群主可以修改",//群聊公告
+          group_avatar:"",//群聊头像
+          group_member:""//群成员
+        }
+        //从friendsList找出用户选择的联系人，然后创建群组
+        //先把我自己放进去
+        data.group_member = this.myUserId + ",";
+        //然后循环添加其他用户
+        this.friendsList.forEach(item => {
+          if(item.status){
+            data.group_member += item.friend_id + ",";
+          }
+          data.group_name = this.friendsList
+            .filter(item => item.status)
+            .slice(0, 3) // 只取前三个
+            .map(item => item.remark !== null ? item.remark : item.user_name)
+            .join(", ") // 使用逗号和空格分隔
+        });
+        data.group_member = data.group_member.slice(0,-1);//掉最后一个字符
+  
+        //console.log(data)
+        this.$store.dispatch('chat/addGroup',data).then(res=> {
+          this.$message.success('创建群聊成功!')
+          //完成后关闭弹出框
+          this.clearCreatGroupWindow();
+          //重新获取会话列表
+          this.getConversationList();
+        }).catch(() => {
+          this.$message.error('创建群聊失败!')
+        })
+      },
+      //2.1.6 建群时搜索群成员
+      searchFriendGroupUser(){
+        this.groupFriendSearchUser = {};
+        let flag = false; //是否找到成员
+        for(let item of this.friendsList){
+          if(item.user_name==this.searchFriendGroup||item.remark==this.searchFriendGroup){
+            this.groupFriendSearchUser = item;
+            flag = true;
+          }
+        }
+        console.log(this.searchGroup)
+        console.log(this.friendsList)
+        console.log(flag)
+  
+        console.log(this.groupFriendSearchUser)
+        //this.searchGroup 搜索的内容
+        //this.groupEditWindowStatus 弹出框状态
+        //this.groupSearchUser 搜索出来的成员
+        if(!flag){
+          this.$message.error('没有找到该成员!')
+        }else{
+          this.groupFriendsWindowStatus = true;
+        }
+      },
+      //2.1.7 把用户添加到选择框里面
+      addSearchFriendWindow(){
+        this.groupFriendSearchUser.status=!this.groupFriendSearchUser.status;
+        this.closeSearchFriendWindow();
+      },
+      //2.1.7 关闭搜索弹出框
+      closeSearchFriendWindow(){
+        this.groupFriendsWindowStatus = false;
+      },
+  
+      //2.2 选择群聊
+      //2.1.1 在会话列表中选择一个群聊
+      selectGroup(item){
+        //选择会话的时候开启loading框
+        this.hallRightLoading = true;
+        //关闭右侧详情框
+        this.closeRightDetailWindow();
+        //使用receiverId判断当前是哪个会话
+        this.receiverId = item.receiver_id;
+        //会话类型 = 2 群聊
+        this.receiverType = 2;
+        //分享群聊时需要使用群名称和群id
+        this.useShareGroupInfo = item;
+        console.log("选择群聊")
+        //清理单聊状态
+        this.conversationList.forEach(conversation => {
+          conversation.status = (conversation.receiver_id === item.receiver_id) ? 1 : 0;
+        });
+        console.log(item)
+        //记录准备加入群聊的id
+        this.groupId = item.receiver_id;
+        //当前的聊天名称
+        this.messageTitle = item.group_name;
+        //关闭没有选择任何聊天的界面
+        this.ifNoMessage = false;
+        //获取群聊天信息
+        this.getGroupChatRecords(item.receiver_id);
+        //获取群设置信息
+        this.getGroupSystem(item.receiver_id);
+        //获取群成员
+        this.getGroupMember(item.receiver_id);
+      },
+      //2.1.2 获取群聊消息
+      getGroupChatRecords(group_id){
+        this.$store.dispatch('chat/getGroupChatRecords',{group_id:group_id}).then(res=> {
+          console.log(res)
+          this.chatrecords = res.data.data;
+          //滚动条滚动到底部
+          this.scorllBottom();
+          //选择会话的时候开启loading框
+          this.hallRightLoading = false;
+  
+        }).catch(() => {
+          this.$message.error('获取群设置信息失败!');
+          //选择会话的时候开启loading框
+          this.hallRightLoading = false;
+        })
+      },
+  
+      //2.3 编辑群聊
+      //2.3.1 打开右侧菜单设置窗口
+      openGroupSystem(){
+        this.rightSlideBoxShow = !this.rightSlideBoxShow;
+      },
+      //2.3.2 获取群设置群成员
+      getGroupMember(group_id){
+        this.$store.dispatch('chat/getGroupMembers',{group_id:group_id}).then(res=> {
+          for(let item of res.data){
+            item.status = true; //默认选中
+          }
+          this.groupUserList = res.data;
+        }).catch(() => {
+          this.$message.error('获取群成员信息失败!')
+        })
+      },
+      //2.3.3 获取群设置信息
+      getGroupSystem(group_id){
+        this.$store.dispatch('chat/getGroupInfo',{group_id:group_id}).then(res=> {
+          console.log(res)
+          this.groupInfo = res.data;
+          this.creatorId = res.data.creator_id;
+          this.messageTitle = res.data.group_name;
+          this.editMessageTitle = res.data.group_name;
+          if(res.data.profile==null){
+            this.groupProfile = "暂无群公告"
+          }else{
+            this.groupProfile = res.data.profile;
+            this.editGroupProfile = res.data.profile;
+          }
+          
+        }).catch(() => {
+          this.$message.error('获取群设置信息失败!')
+        })
+      },
+      //2.3.4 右侧菜单退出群聊
+      closeGroup(){
+        this.$confirm('将要退出该群聊，确定吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning' 
+        }).then(() => {
+          //this.groupId
+          this.$store.dispatch('chat/quitGroup',{group_id:this.groupId}).then(res=> {
+            this.$message.success('退出群聊成功!')
+            //关闭右侧菜单
+            this.rightSlideBoxShow = false;
+            //关闭右侧聊天界面
+            this.ifNoMessage = true;
+            //重新请求会话列表
+            this.getConversationList();
+  
+          }).catch(() => {
+            this.$message.error('群聊退出失败!')
+          })
+        }).catch(() => {
+          this.$message.warning('已取消退出')
+        });
+      },
+      //2.3.5 右侧菜单删除群聊
+      delGroup(){
+        this.$confirm('将要解散该群聊，确定吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning' 
+        }).then(() => {
+          //this.groupId
+          this.$store.dispatch('chat/delGroup',{group_id:this.groupId}).then(res=> {
+            this.$message.success('已解散群聊!')
+            //关闭右侧菜单
+            this.rightSlideBoxShow = false;
+            //关闭右侧聊天界面
+            this.ifNoMessage = true;
+            //重新请求会话列表
+            this.getConversationList();
+  
+          }).catch(() => {
+            this.$message.error('解散群聊失败!')
+          })
+        }).catch(() => {
+          this.$message.warning('已取消解散')
+        });
+      },
+      //2.3.6 右侧菜单编辑群名称
+      editGroupName(){
+        let data = {
+          group_id:this.groupId,
+          group_name:this.editMessageTitle//群名称
+        }
+        this.$store.dispatch('chat/updateGroup',data).then(res=> {
+          this.$message.success('成功修改群聊名称！');
+          //重新获取群详情
+          this.getGroupSystem(this.groupId);
+          //重新获取会话列表
+          this.getConversationList();
+          this.editGroupNameWindow = false;
+        }).catch(() => {
+          this.$message.error('修改群聊名称失败!')
+        })
+      },
+      //2.3.7 右侧菜单编辑群公告
+      editGroupNotice(){
+        let data = {
+          group_id:this.groupId,
+          profile:this.editGroupProfile//群公告
+        }
+        this.$store.dispatch('chat/updateGroup',data).then(res=> {
+          this.editGroupNoticeWindow = false;
+          this.$message.success('成功添加群公告')
+          //重新获取群详情
+          this.getGroupSystem(this.groupId)
+          
+        }).catch(() => {
+          this.$message.error('编辑群公告失败!')
+        })
+      },
+      //2.3.8 群弹出框回显群内成员
+      editGroupMember(){
+        //1.打开编辑窗口
+        this.groupEditWindowStatus = true;
+        //2.获得好友列表
+        this.$store.dispatch('chat/getFriendsList',{user_id:this.myUserId}).then(res=> {
+          //3.设置成未选中
+          for(let item of res.data){
+            item.status = false; //默认未选中
+          }
+          this.friendsList = res.data;
+          console.log(this.friendsList)
+          console.log(this.groupUserList)
+          //4.判断一下groupUserList是否包含friendsList中的成员，如果包含，就把friendsList中的成员status设置为true
+          this.friendsList.forEach(item => {
+            console.log(item.user_id)
+            if(this.groupUserList.find(groupItem => groupItem.user_id == item.friend_id)){
+              item.status = true;
+            }
+          });
+          console.log(this.friendsList)
+        }).catch(() => {
+          this.$message.error('获取好友列表失败!')
+        })
+      },
+      //2.3.9 群弹出框编辑群成员
+      changeSelectFriends(item) {
+        // 检查 groupUserList 是否包含 item
+        const index = this.groupUserList.findIndex(i => i.user_id == item.friend_id);
+        // 如果包含，就删除这个 item；否则，添加到 groupUserList
+        // 注意不能直接把friend_id放进去,因为最后编辑保存的时候取的是user_id,这里要传一下值
+        if (index !== -1) {
+          this.groupUserList.splice(index, 1);
+        } else {
+          item.user_id = item.friend_id;
+          this.groupUserList.push(item);
+        }
+      },
+      //2.3.19 群弹出框取消编辑群成员
+      cancelEditGroupMember(){
+        this.groupEditWindowStatus = false;
+        this.getGroupMember(this.groupId);
+      },
+      //2.3.20 群弹出框保存编辑群成员
+      saveEditGroupMember(){
+        let groupUser = []
+        
+        // console.log(this.myUserId)
+        // console.log(this.groupUserList)
+        //取出所有选择的user_id且不能与自己的id相同
+        for(let item of this.groupUserList){
+          if(Number(item.user_id) != Number(this.myUserId)){
+            groupUser.push(item.user_id);
+          }
+        }
+        groupUser = groupUser.join(',');
+        //console.log(groupUser)
+        let data = {
+          group_id:this.groupId,
+          group_member:groupUser
+        }
+        this.$store.dispatch('chat/updateGroupMembers',data).then(res=> {
+          this.$message.success('群成员保存成功!')
+          this.groupEditWindowStatus = false;
+          this.getGroupMember(this.groupId);
+        }).catch(() => {
+          this.$message.error('群成员保存失败!')
+          this.groupEditWindowStatus = false;
+          this.getGroupMember(this.groupId);
+        })
+      },
+      //2.3.21 群弹出框搜索群成员
+      searchGroupUser(){
+        this.groupSearchUser = {};
+        let flag = false; //是否找到成员
+        for(let item of this.friendsList){
+          if(item.user_name==this.searchGroup||item.remark==this.searchGroup){
+            this.groupSearchUser = item;
+            flag = true;
+          }
+        }
+        console.log(this.searchGroup)
+        console.log(this.friendsList)
+        console.log(flag)
+        //this.searchGroup 搜索的内容
+        //this.groupEditWindowStatus 弹出框状态
+        //this.groupSearchUser 搜索出来的成员
+        if(!flag){
+          this.$message.error('没有找到该成员!')
+        }else{
+          this.groupEditMainWindowStatus = true;
+        }
+  
+      },
+      //2.3.22 群弹出框添加群成员
+      addGroupUser(item){
+        item.user_id = item.friend_id;
+        console.log(item)
+        //找到friendsList中的该成员，把status设置为相反的值
+        for(let item of this.friendsList){
+          if(item.user_id==this.groupSearchUser.user_id){
+            item.status = !item.status;
+          }
+        }
+        // 找到groupUserList中是否存在该成员，如果存在就删除，没有不存在就添加
+        const index = this.groupUserList.findIndex(member => member.user_id === item.user_id);
+        if (index !== -1) {
+          // 如果存在，删除该成员
+          this.groupUserList.splice(index, 1);
+        } else {
+          // 如果不存在，添加该成员
+          this.groupUserList.push(item);
+        }
+        //完成后关闭弹出框
+        this.closeAddGroupUserWindow();
+      },
+      //2.3.23 群弹出框关闭弹出框
+      closeAddGroupUserWindow(){
+        this.searchGroup = "";
+        this.groupSearchUser = {};
+        this.groupEditMainWindowStatus = false;
+      },
+      //2.3.24 群弹出框移除群成员
+      editRemoveGroupUser(id){
+        console.log(id)
+        //移除this.groupUserList中user_id与id一致的
+        const index = this.groupUserList.findIndex(member => member.user_id === id);
+        if (index !== -1) {
+          this.groupUserList.splice(index, 1);
+        }
+        //找到friendsList中user_id与id一致的，把status设置为false
+        for(let item of this.friendsList){
+          if(item.friend_id==id){
+            item.status = false;
+          }
+        }
+      },
+      //2.3.25 右侧菜单编辑成员
+      rightSearchUser(){
+        this.groupRightUserInfo = {};
+        let flag = false; //是否找到成员
+        for(let item of this.groupUserList){
+          if(item.user_name==this.searchUser||item.remark==this.searchUser){
+            this.groupRightUserInfo = item;
+            flag = true;
+          }
+        }
+        console.log(this.searchUser)
+        console.log(this.groupUserList)
+        console.log(flag)
+        //this.searchGroup 搜索的内容
+        //this.groupEditWindowStatus 弹出框状态
+        //this.groupSearchUser 搜索出来的成员
+        if(!flag){
+          this.$message.error('没有找到该成员!')
+        }else{
+          //找到这个成员以后，需要先验证一下他俩是不是好友
+          this.$store.dispatch('chat/isFriend',{friend_id:this.groupRightUserInfo.user_id}).then(res=> {
+            console.log(res.data)//true false
+            this.groupRightUserInfo.isFriend = res.data;
+            //打开弹出框
+            this.groupRightSearchWindow = true;
+          }).catch(() => {
+            this.$message.error('获取成员身份信息失败!')
+          })
+        }
+      },
+      //2.3.26 关闭弹出框
+      closeRightSearchUser(){
+        this.searchUser = "";
+        this.groupRightUserInfo = {};
+        this.groupRightSearchWindow = false;
+      },
+  
+      //2.4 加入群聊
+      //2.4.1 打开群聊邀请窗口
+      openGroupInviteWindow(info){
+        this.addGroupWindow = true;
+        //info.content.split(',')[0] 群名称
+        //info.content.split(',')[1] 群id
+        //获得要加入的群聊详情
+        console.log(info.content)
+        this.groupInviteInfo.group_name = info.content.split(',')[0];
+        this.groupInviteInfo.group_id = info.content.split(',')[1];
+      },
+      //2.4.2 加入群聊
+      joinGroup(){
+        this.$store.dispatch('chat/joinGroup',{group_id:this.groupInviteInfo.group_id}).then(res=> {
+          if(res.code=='200'){
+            this.$message.success('加入群聊成功!')
+            this.addGroupWindow = false;
+          }else{
+            this.$message.error(res.message)
+          }
+        }).catch(() => {
+          this.$message.error('加入群聊失败!')
+        })
+      },
+      //2.4.3 打开分享群聊弹出框
+      openShareMyGroup(){
+        //群组聊天数据初始化
+        this.groupConversationList = [];
+        //打开名片弹出框
+        this.shareGroupWindowStatus = true;
+        // shareGroupWindowStatus:false,//分享群聊弹出框
+        // shareGroupActive:'friend',//分享名片选项卡
+        // shareGroupId:'',//要分享的群聊id
+        // useShareGroupInfo:{},//分享名片时选中的群组信息
+        //默认获取一下好友列表
+        this.getFriendsList();
+        //把群聊提出来单独放到一个数组
+        for(let item of this.conversationList){
+          if(item.is_group==1){
+            this.groupConversationList.push(item);
+          }
+        }
+      },
+      //2.4.4 分享群聊
+      shareMyGroup(){
+        console.log(this.shareGroupId)
+        if(this.shareGroupId!=''){
+          let message = {};
+          console.log(this.useShareGroupInfo)
+          let userInfo = [this.useShareGroupInfo.group_name,this.useShareGroupInfo.receiver_id];
+          let userInfoString = userInfo.join(',');
+          
+          if(this.shareGroupActive=='friend'){
+            //单聊
+            message = { 
+              talk_type:1,
+              receiver_id:this.shareGroupId,
+              msg_type:6,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
+            };
+            message.content = userInfoString;
+          }else if(this.shareGroupActive=='group'){
+            //群聊
+            message = { 
+              talk_type:2,
+              receiver_id:this.shareGroupId,
+              content:userInfo,
+              msg_type:6,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
+            };
+            message.content = userInfoString;
+          }
+  
+          console.log(message)
+          //发送消息
+          if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify(message));
+          }
+          //关闭分享弹出框
+          this.shareGroupWindowStatus = false;
+          this.$message.success('分享名片成功!')
+        }else{
+          this.$message.error('请选择分享对象!')
+        }
+      },
+      handleClickShareGroupCard(tab, event) {
+        const tabName = tab.name;
+        console.log("当前选中的tab name:", tabName);
+        this.shareGroupActive = tabName;
+      },
+      //2.4.5 判断该成员是否在群聊中
+      isGroupUser(id){
+        let flag = false;
+        for(let item of this.groupUserList){
+          if(item.user_id==id){
+            flag = true;
+          }
+        }
+        return flag;
+      },
+      //2.群聊 end---------------------------------------->
+  
+      //3.全局应用 start---------------------------------------->
+      //3.1 滚动条滚动到底部
+      scorllBottom(){
+        //滚动条滚动到底部
+        this.$nextTick(() => {
+          const rightUserMessageBox = this.$refs.rightUserMessageBox;
+          if (rightUserMessageBox) {
+            rightUserMessageBox.scrollTop = rightUserMessageBox.scrollHeight;
+          }
+        });
+      },
+      //3.2 添加好友
+      addFriend(id){
+        console.log(id)
+        this.addFriendWindowStatus = true;
+        this.addform.friend_id = id;
+      },
+      addMyFriend(){
+        this.$store.dispatch('chat/addFriend',this.addform).then(res=> {
+          if(res.code=='200'){
+            this.$message.success("好友申请发送成功！")
+            this.addFriendWindowStatus = false;
+          }else{
+            //this.$message.error(res.data)
+            this.$message.error(res.message)
+          }
+        })
+      },
+      //3.3 关闭右侧详情框
+      closeRightDetailWindow(){
+        this.rightSlideBoxShow = false;
+        this.groupRightSearchWindow = false;
+        this.searchUser = "";
+      },
+      //3.全局应用 end---------------------------------------->
+      
+      //4.会话框 start---------------------------------------->
+      //4.1上传
+      //4.1.1上传图片
+      beforeImgUpload(file) {
+        //先清理一下上传的缩略窗口
+        this.deFileUpload()
+        const isJPG = file.type === 'image/jpeg';
+        const isPNG = file.type === 'image/png';
+        const isLt2M = file.size / 1024 / 1024 < 2;
+  
+        if (!isJPG && !isPNG) {
+          this.$message.error('发送的图片只能是 JPG 或 PNG 格式!');
+          return false;
+        }
+        if (!isLt2M) {
+          this.$message.error('发送的图片大小不能超过 2MB!');
+          return false;
+        }
+  
+        const formData = new FormData();
+        formData.append('file', file);
+  
+        this.$store.dispatch('pool/uploadFile',formData).then(res=> {
+          this.sendMessage.img.imgUrl = res.data.imgUrl;//获取上传的图片地址
+          this.sendMessage.img.oldFileName = res.data.oldFileName;
+          console.log(res.data.imgUrl)
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '网络错误，请重试！'
+          });
+        })
+  
+        // 阻止默认的上传行为
+        return false;
+      },
+      //4.1.2上传文件
+      beforeFileUpload(file) {
+        //先清理一下上传的缩略窗口
+        this.deFileUpload()
+        console.log(file)
+        //允许的文件类型
+        const isDoc = file.type === 'application/msword';
+        const isDocx = file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
+        const isXls = file.type === 'application/vnd.ms-excel';
+        const isXlsx = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+        const isPptx = file.type === 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
+        const isRar = file.type === 'application/x-rar-compressed';
+        const isZip = file.type === 'application/x-zip-compressed';
+        const isTxt = file.type === 'text/plain';
+        const isPdf = file.type === 'application/pdf';
+        //文件大小不能超过2M
+        const isLt2M = file.size / 1024 / 1024 < 2;
+  
+        if (!isTxt && !isDoc && !isDocx && !isXls && !isXlsx && !isPptx && !isRar && !isZip && !isPdf) {
+          this.$message.error('该文件类型不允许上传!');
+          return false;
+        }
+        if (!isLt2M) {
+          this.$message.error('发送的文件大小不能超过2M！');
+          return false;
+        }
+  
+        const formData = new FormData();
+        formData.append('file', file);
+  
+        this.$store.dispatch('pool/uploadFile',formData).then(res=> {
+          this.sendMessage.file.fileUrl = res.data.imgUrl;
+          this.sendMessage.file.oldFileName = res.data.oldFileName;
+          console.log(res.data)
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '网络错误，请重试！'
+          });
+        })
+  
+        // 阻止默认的上传行为
+        return false;
+      },
+      //4.1.3 删除上传的文件
+      deFileUpload(){
+        this.sendMessage.img.imgUrl = "";
+        this.sendMessage.img.oldFileName = "";
+        this.sendMessage.file.fileUrl = "";
+        this.sendMessage.file.oldFileName = "";
+      },
+      //4.会话框 end---------------------------------------->
+      
+      //5.websocket会话 start---------------------------------------->
+      //5.1 接受消息
+      handleIncomingMessage(event) {
+        const message = JSON.parse(event.data);
+        console.log("监听消息：",message)
+  
+        console.log(message.receiver_id.length == 18)
+        //第一步：先判断是否为群消息
+        if (message.receiver_id && message.receiver_id.length == 18) {
+          //第二步：判断当前接收的消息是否显示到聊天框中
+          if(Number(this.receiverId)==Number(message.receiver_id)){
+            console.log("当前消息为群消息，并且可以显示到当前的会话框中！")
+            //18位就是群聊
+            if(Number(this.myUserId) == Number(message.user_id)){
+              //如果message的receiverId和会话的receiverId一致，说明这条信息是自己发的回显
+              let receiveMessage = {
+                action:"said",//自己说的
+                user_avatar:message.user_avatar,//头像
+                content:message.content,//内容
+                msg_type:message.msg_type,//消息类型
+              }
+              console.log("来自单聊的回显消息:"+this.receiverId,message.receiver_id)
+              console.log(message)
+              //消息添加到聊天记录
+              this.chatrecords.push(receiveMessage);
+              // 确保 Vue 能够检测到数组的变化
+              //this.$set(this.chatrecords, this.chatrecords.length, receiveMessage);
+              console.log(this.chatrecords)
+              //滚动条滚动到底部
+              this.scorllBottom();
+            }else{
+              let receiveMessage = {
+                action:"recieved",//对方说的
+                receiver_avatar:message.user_avatar,//头像
+                content:message.content,//内容
+                msg_type:message.msg_type,//消息类型
+              }
+              //如果message的receiverId和会话的receiverId不一致，说明这条信息是别人发的，需要添加到聊天记录
+              //消息添加到聊天记录
+              console.log("来自单聊消息:"+this.receiverId,message.user_id)
+              this.chatrecords.push(receiveMessage);
+              console.log(message)
+              //滚动条滚动到底部
+              this.scorllBottom();
+            }
+          }else{
+            console.log("当前消息为群消息，但是用户未开启此聊天窗口！")
+          }
+        }else{
+          //当前的单聊消息是自己发的，回显到聊天框中
+          if(Number(this.receiverId)==Number(message.receiver_id)){
+            //如果message的receiverId和会话的receiverId一致，说明这条信息是自己发的回显
+            let receiveMessage = {
+              action:"said",//自己说的
+              user_avatar:message.user_avatar,//头像
+              content:message.content,//内容
+              msg_type:message.msg_type,//消息类型
+            }
+            console.log("来自单聊的回显消息:"+this.receiverId,message.receiver_id)
+            console.log(message)
+            //消息添加到聊天记录
+            this.chatrecords.push(receiveMessage);
+            // 确保 Vue 能够检测到数组的变化
+            //this.$set(this.chatrecords, this.chatrecords.length, receiveMessage);
+            console.log(this.chatrecords)
+            //滚动条滚动到底部
+            this.scorllBottom();
+          }else{
+            //判断要回显的内容是不是在群聊
+            if(Number(message.receiver_id.length) == 18){
+              console.log("当前是单聊消息，你选择的是单聊框，可以回显！")
+              let receiveMessage = {
+                action:"recieved",//对方说的
+                receiver_avatar:message.user_avatar,//头像
+                content:message.content,//内容
+                msg_type:message.msg_type,//消息类型
+              }
+              console.log("来自单聊的回显消息:"+this.receiverId,message.receiver_id)
+              console.log(message)
+              //消息添加到聊天记录
+              this.chatrecords.push(receiveMessage);
+              // 确保 Vue 能够检测到数组的变化
+              //this.$set(this.chatrecords, this.chatrecords.length, receiveMessage);
+              console.log(this.chatrecords)
+              //滚动条滚动到底部
+              this.scorllBottom();
+            }else{
+              // console.log(this.receiverId)
+              // console.log(message.receiver_id,message.user_id)
+              // console.log("当前是单聊消息，但是你选择的是群聊框，该条消息不能回显！")
+              if(this.receiverId!=message.receiver_id&&this.receiverId!=message.user_id){
+                //收到单聊消息，但是单聊消息不属于当前的聊天窗口
+                console.log("当前单聊消息不属于当前的聊天窗口，不回显！")
+              }else{
+                if(this.receiverId==message.user_id){
+                  console.log("当前单聊消息属于当前的聊天窗口，回显！")
+                  let receiveMessage = {
+                    action:"recieved",//对方说的
+                    receiver_avatar:message.user_avatar,//头像
+                    content:message.content,//内容
+                    msg_type:message.msg_type,//消息类型
+                  }
+                  console.log("来自单聊的回显消息:"+this.receiverId,message.receiver_id)
+                  console.log(message)
+                  //消息添加到聊天记录
+                  this.chatrecords.push(receiveMessage);
+                  // 确保 Vue 能够检测到数组的变化
+                  //this.$set(this.chatrecords, this.chatrecords.length, receiveMessage);
+                  console.log(this.chatrecords)
+                  //滚动条滚动到底部
+                  this.scorllBottom();
+                }
+              }
+            } 
+  
+  
+            
+          }
+        }
+      },
+      // 5.2 发送消息
+      sendUserMessage() {
+        if (this.userMessage.trim() !== '') {
+          const message = { 
+            talk_type:this.receiverType,//当前的会话类型
+            receiver_id:this.receiverId,//当前的会话id
+            content:this.userMessage,//用户发发送的消息
+            msg_type:1,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
+          };
+          //发送消息
+          if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify(message));
+          }
+          this.userMessage = '';
+        }else{
+          this.$message.error('消息不能为空！')
+        }
+      },
+      // 5.3 发送图片或者文字
+      sendUserMessageToFile() {
+        if(this.sendMessage.img.imgUrl!=''){
+          const message = { 
+            talk_type:this.receiverType,//当前的会话类型
+            receiver_id:this.receiverId,//当前的会话id
+            content:this.sendMessage.img.imgUrl,//用户发发送的消息
+            msg_type:2,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
+          };
+          if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify(message));
+            //发送完毕清除选择的图片
+            this.sendMessage.img.imgUrl='';
+          }
+          //如果文本框不为空，把文本框内的消息也提交过去
+          if(this.userMessage.trim()!=''){
+            this.sendUserMessage();
+          }
+        }
+        if(this.sendMessage.file.fileUrl!=''){
+          //把名称和地址打包成一个对象
+          const fileInfo = {
+            file_url:this.sendMessage.file.fileUrl,
+            oldFileName:this.sendMessage.file.oldFileName
+          }
+          const fileInfoString = JSON.stringify(fileInfo);
+          //发送消息
+          const message = { 
+            talk_type:this.receiverType,//当前的会话类型
+            receiver_id:this.receiverId,//当前的会话id
+            content:fileInfoString,//用户发发送的消息
+            msg_type:3,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
+          };
+          if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify(message));
+            //发送完毕清除选择的文件
+            this.sendMessage.file.fileUrl='';
+          }
+          //如果文本框不为空，把文本框内的消息也提交过去
+          if(this.userMessage.trim()!=''){
+            this.sendUserMessage();
+          }
+        }
+      },
+      //5.4 打开名片弹出框
+      openShareCard(){
+        //群组聊天数据初始化
+        this.groupConversationList = [];
+        //打开名片弹出框
+        this.userCardWindowStatus = true;
+        //默认获取一下好友列表
+        this.getFriendsList();
+        //好友列表
+        //this.friendsList 
+        //会话列表
+        //this.conversationList
+        //把群聊提出来单独放到一个数组
+        //this.groupConversationList
+        for(let item of this.conversationList){
+          if(item.is_group==1){
+            this.groupConversationList.push(item);
+          }
+        }
+      },
+      //5.5 分享名片
+      shareCard(){
+        console.log(this.useShareUserId)
+        if(this.useShareUserId!=''){
+          let message = {};
+          // let userInfo = {
+          //   avatar:this.useShareUserInfo.avatar,
+          //   user_name:this.useShareUserInfo.user_name,
+          //   friend_id:this.receiverId
+          // }
+          let userInfo = [this.useShareUserInfo.avatar,this.useShareUserInfo.user_name,this.receiverId];
+          let userInfoString = userInfo.join(',');
+          
+          if(this.shareTableActive=='friend'){
+            //单聊
+            message = { 
+              talk_type:1,
+              receiver_id:this.useShareUserId,
+              msg_type:4,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
+            };
+            message.content = userInfoString;
+          }else if(this.shareTableActive=='group'){
+            //群聊
+            message = { 
+              talk_type:2,
+              receiver_id:this.useShareUserId,
+              content:userInfo,
+              msg_type:4,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
+            };
+            message.content = userInfoString;
+          }
+          // console.log(typeof message.content)
+          // console.log(message.content)
+          // console.log(message)
+          //发送消息
+          if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify(message));
+          }
+          //关闭分享弹出框
+          this.userCardWindowStatus = false;
+          this.$message.success('分享名片成功!')
+        }else{
+          this.$message.error('请选择分享对象!')
+        }
+      },
+      //5.6 切换分享名片
+      handleClickShareCard(tab, event) {
+        const tabName = tab.name;
+        console.log("当前选中的tab name:", tabName);
+        this.shareTableActive = tabName;
+      },
+      //5.7 下载文件
+      downloadFile(item){
+        let downloadData = JSON.parse(item.content);
+        console.log(downloadData.file_url)
+        if(downloadData.file_url!=''){
+          const link = document.createElement('a');
+          link.href = downloadData.file_url;
+          link.setAttribute('download', 'downloaded_file'); // You can set a default file name here
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+        }else{
+          this.$message.error('文件下载失败！')
+        }
+      },
+      //5.8 图片放大
+      imgZoom(url){
+        this.imgZoomUrl = url;
+        this.imgZoomStatus = true;
+      },
+      //5.9 创建链接 防止websocket意外中断
+      getWebsocket(){
+        //判断当前的route是否为/hall，否则不触发这个方法
+        if(this.$route.path=="/hall"){
+          this.$confirm('您的会话意外断开，是否重新连接？', '提示', {
+            confirmButtonText: '重新连接',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            //强制刷新页面
+            window.location.reload();
+          }).catch(() => {
+            //取消刷新
+            this.$message.error("您的连接已中断！")
+          });
+        }else{
+          console.log("前往其他页面，关闭ws！")
+        }
+      }
+      //5.websocket会话 end---------------------------------------->
+    },
+    mounted() {
+      //开启websocket连接 start---------------------------------------->
+      //1.获取admin-token
+      const adminToken = document.cookie.split('; ').find(row => row.startsWith('Admin-Token=')).split('=')[1];
+      //console.log("Admin-Token:", adminToken);
+  
+      //2.连接websocket 
+      let websocketNewUrl = baseUrl.WebsocketUrl +"?token=" + adminToken;
+      //let websocketNewUrl = URL.WebsocketUrl +"?token=" + adminToken;
+      this.ws = new WebSocket(websocketNewUrl);
+      this.ws.addEventListener('message', this.handleIncomingMessage);
+  
+      //3.当连接中断时提供一个方法重新连接
+      let that = this;
+  
+      //当连接关闭的时候关闭websocket
+      this.ws.addEventListener('close', function (event) {
+        // 连接关闭时执行的操作
+        console.log("关闭链接",event);
+        // 弹窗询问用户是否手动刷新
+        that.getWebsocket();
+      });
+      
+      //开启websocket连接 end---------------------------------------->
+  
+      //从通讯录创建单聊 start---------------------------------------->
+      //当ws创建成功以后再执行，防止数据未加载
+      this.ws.onopen = () => {
+        console.log("ws创建成功!");
+        console.log(this.$route.query.friend_id)
+        //判断当前路由是否携带friend_id
+        if(this.$route.query.friend_id){
+          console.log("从通讯录进入，开始创建会话！")
+          //1.从通讯录进入会话大厅
+          this.retrieveSession();
+          //2.获取我的用户id
+          this.myUserId = this.$store.state.user.userid;
+          //把这个id存一下
+          this.createMessageId = this.$route.query.friend_id;
+          
+        }else{
+          console.log("直接进入，无需创建会话！")
+          //直接进入会话大厅
+          //1.获取会话列表
+          this.getConversationList();
+          //2.获取我的用户id
+          this.myUserId = this.$store.state.user.userid;
+          //3.循环获取会话列表
+          //开启loading
+          this.hallLeftLoading = true;
+          this.forSearchConversationList();
+        }
+      };
+      //从通讯录创建单聊 end---------------------------------------->
+    },
+    beforeDestroy() {
+      //页面销毁的时候清除定时器获取列表
+      clearInterval(this.listTimeOut);
+      //页面销毁的时候关闭websocket
+      if (this.ws) {
+        this.ws.removeEventListener('message', this.handleIncomingMessage);
+        this.ws.close();
+      }
+    }
+  }
+  </script>
+  
+  <style scoped lang="less">
+    .hallBox {
+      display: flex;
+      margin: 30px;
+      //左侧
+      .hallLeft {
+        width: 420px;
+        background: #fff;
+        border-radius: 20px;
+        margin-right: 20px;
+        position: relative;
+        .hallLeftLoading{
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 420px;
+          height: 740px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: rgba(255, 255, 255, 0.5);
+          z-index: 100;
+          .hallLeftLoadingIcon {
+            .hallLeftLoadingIconItem {
+              color: #CCCCCC;
+              text-align: center;
+              margin-bottom: 20px;
+              font-size: 60px;
+            }
+            .hallLeftLoadingText {
+              color: #CCCCCC;
+              font-size: 32px;
+              font-weight: bold;
+            }
+          }
+        }
+        .searchBoxMain {
+          position: relative;
+          .searchFriendClose {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            padding-right: 10px;
+            padding-bottom: 10px;
+            .rightSlideBoxCloseIcon {
+              cursor: pointer;
+              width: 28px;
+              height: 28px;
+              line-height: 28px;
+              text-align: center;
+              background: #EFEFEF;
+              border-radius: 8px;
+            }
+          }
+          .searchBox {
+            padding-left: 25px;
+            padding-right: 25px;
+            padding-bottom: 20px;
+          }
+          .searchFriendBox {
+            position: absolute;
+            width: 280px;
+            border-radius: 8px;
+            top: 0;
+            right: -300px;
+            background: #fff;
+            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            z-index: 100;
+            box-sizing: border-box;
+            padding: 20px 0 30px 0;
+            .searchFriendItem {
+              display: flex;
+              align-items: center;
+              justify-content: flex-start;
+              border-bottom: 1px solid #E9EDF7;
+              padding: 0 20px 30px 20px;
+              .searchFriendAvatar {
+                img {
+                  width: 66px;
+                  height: 66px;
+                  border-radius: 50%;
+                }
+                margin-right: 15px;
+              }
+              .searchFriendInfo {
+                flex: 1;
+                .searchFriendName {
+                  display: flex;
+                  align-items: center;
+                  .gender {
+                    img {
+                      width: 12px;
+                      height: 12px;
+                    }
+                  }
+                  img {
+                    width: 18px;
+                    height: 18px;
+                    cursor: pointer;
+                  }
+                  .searchFriendNameText {
+                    font-size: 18px;
+                    width: 120px;
+                    height: 28px;
+                    line-height: 28px;
+                    white-space: nowrap; 
+                    overflow: hidden; 
+                    text-overflow: ellipsis;
+                  }
+                }
+                .searchFriendPhone {
+                  font-size: 14px;
+                  color: #999;
+                  margin-top: 10px;
+                }
+              }
+            }
+            .searchFriendLineBox {
+              display: flex;
+              align-items: center;
+              justify-content: flex-start;
+              padding: 20px;
+              border-bottom: 1px solid #E9EDF7;
+              .searchFriendLineTitle{
+                font-size: 16px;
+                color: #999999;
+                width: 90px;
+              }
+              .searchFriendLineContent{
+                font-size: 16px;
+                color: #333;
+                flex: 1;
+                .searchFriendLineContentItem{
+                  display: flex;
+                  align-items: center;
+                  justify-content: space-between;
+                }
+              }
+            }
+            .searchFriendButton {
+              padding:40px 0 10px 0;
+              text-align: center;
+              .searchFriendButtonItem {
+                font-size: 14px;
+                color: #5570F1;
+                img {
+                  width: 30px;
+                  height: 30px;
+                  margin-bottom: 5px;
+                }
+              }
+            }
+          }
+        }
+        
+        .userListBox {
+          padding: 15px 0;
+          overflow-y: auto;
+          height: 560px;
+          .active {
+            background: #F5F7FD;
+            box-sizing: border-box;
+            border-right: 4px solid #5570F1 !important;
+          }
+          .userItem {
+            padding: 0 21px 0 25px;
+            height: 90px;
+            box-sizing: border-box;
+            border-right: 4px solid #fff;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            .flexItemBox{
+              width: 100%;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              .userAvatar {
+                img {
+                  width: 58px;
+                  height: 58px;
+                  border-radius: 50%;
+                }
+              }
+              .userInfo {
+                flex: 1;
+                box-sizing: border-box;
+                padding-left: 15px;
+                .userName {
+                  display: flex;
+                  align-items: center;
+                  justify-content: space-between;
+                  //padding-bottom: 10px;
+                  .userNameText {
+                    font-size: 18px;
+                    font-weight: bold;
+                    width:260px;
+                  }
+                  .userMessageNum {
+                    font-size: 12px;
+                    color: #333;
+                    width: 24px;
+                    height: 24px;
+                    line-height: 24px;
+                    text-align: center;
+                    border-radius: 50%;
+                    background: #FFCC91;
+                    font-weight: bold;
+                  }
+                }
+                .userMessage {
+                  display: flex;
+                  align-items: center;
+                  justify-content: space-between;
+                  .userMessageText {
+                    display: block;
+                    width: 240px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    font-size: 14px;
+                    color: #999999;
+                  }
+                  .userMessageTime {
+                    font-size: 14px;
+                    color: #999999;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      //右侧
+      .hallRight {
+        flex: 1;
+        background: #fff;
+        border-radius: 20px;
+        position: relative;
+        height: 760px;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        .hallRightLoading {
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 740px;
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: rgba(255, 255, 255, 0.5);
+          z-index: 100;
+          .hallRightLoadingIcon {
+            .hallRightLoadingIconItem {
+              color: #CCCCCC;
+              text-align: center;
+              margin-bottom: 20px;
+              font-size: 60px;
+            }
+            .hallRightLoadingText {
+              color: #CCCCCC;
+              font-size: 32px;
+              font-weight: bold;
+            }
+          }
+        }
+        .ifHallRigthNoMessage {
+          color: #CCCCCC;
+          font-size: 32px;
+          font-weight: bold;
+          text-align: center;
+          height: 740px;
+          line-height: 740px;
+        }
+        .userName {
+          font-size: 20px;
+          color: #333;
+          font-weight: bold;
+        }
+        .ifNotice {
+          padding-bottom: 60px !important;  
+        }
+        .UserNameBox {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 40px 30px 30px 30px;
+          border-bottom: 1px solid #E7E7E7;
+          position: relative;
+          .moreIcon {
+            cursor: pointer;
+          }
+          .groupNotice {
+            position: absolute;
+            height: 40px;
+            line-height: 40px;
+            font-size: 16px;
+            background:url('../../assets/chat/notice.png') no-repeat 10px center #F6F8FE;
+            left: 30px;
+            box-sizing: border-box;
+            padding-left: 40px;
+            bottom: 10px;
+            color: #999999;
+            border-radius: 10px;
+            padding-right: 10px;
+            width: 400px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            cursor: pointer;
+          }
+          .shareCardIcon {
+            font-size: 24px;
+            cursor: pointer;
+            color: #666;
+          }
+        }
+        .rightPositionBox { 
+          flex: 1;
+          position: relative;
+          
+          .rightUserMessageBox {
+            padding: 40px;
+            height: 375px;
+            box-sizing: border-box;
+            overflow-y: auto;
+            .timeBox {
+              width: 100%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              padding:0 0 30px 0; 
+              span {
+                border-radius: 8px;
+                display: block;
+                width: 80px;
+                height: 30px;
+                line-height: 30px;
+                font-size: 14px;
+                text-align: center;
+                display: block;
+                background: #F4F5FA;
+                color: #999999;
+              }
+            }
+            .newUserStatus {
+              width: 100%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              padding:0 0 30px 0;
+              .newUserStatusText {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 8px;
+                width: 200px;
+                height: 30px;
+                line-height: 30px;
+                font-size: 14px;
+                text-align: center;
+                background: #F4F5FA;
+                color: #999999;
+              }
+              span {
+                display: inline-block;
+                line-height: 30px;
+              }
+              .newUserStatusTextName {
+                display: inline-block;
+                width: 100px;
+                line-height: 30px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+              }
+            }
+            //其他用户
+            .otherUserMessage {
+              display: flex;
+              align-items: flex-start;
+              margin-bottom: 30px;
+              .otherUserIcon {
+                margin-right: 20px;
+                img {
+                  width: 58px;
+                  height: 58px;
+                  border-radius: 50%;
+                }
+              }
+              .otherUserMessageText {
+                border-radius: 16px;
+                padding: 16px;
+                font-size: 16px;
+                color: #fff;
+                background: #5570F1;
+                position: relative;
+                min-height: 50px;
+                word-wrap:break-word;
+                word-break:break-all;
+              }
+              .otherUserMessageText::before {
+                content: '';
+                position: absolute;
+                left: -8px;
+                top: 26px;
+                transform: translateY(-50%);
+                width: 0;
+                height: 0;
+                border-top: 8px solid transparent;
+                border-bottom: 8px solid transparent;
+                border-right: 8px solid #5570F1;
+              }
+            }
+            //我
+            .meUserMessage {
+              display: flex;
+              align-items: flex-start;
+              margin-bottom: 30px;
+              justify-content: flex-end; 
+              .meUserIcon {
+                margin-left: 20px;
+                img {
+                  width: 58px;
+                  height: 58px;
+                  border-radius: 50%;
+                }
+              }
+              .meUserMessageText {
+                border-radius: 16px;
+                padding:16px;
+                font-size: 16px;
+                color:#333;
+                background: #FFEAD1;
+                position: relative;
+                min-height: 50px;
+                cursor: pointer;
+                word-wrap:break-word;
+                word-break:break-all;
+                //width: 100%;
+              }
+              .meUserMessageText::before {
+                content: '';
+                position: absolute;
+                right: -8px;
+                top: 26px;
+                transform: translateY(-50%);
+                width: 0;
+                height: 0;
+                border-top: 8px solid transparent;
+                border-bottom: 8px solid transparent; 
+                border-left: 8px solid #FFEAD1;
+              }
+            }
+          }
+        }
+        //消息框
+        .sendMessageBox {
+          //height: 250px;
+          padding: 20px 40px 0 40px;
+          border-top: 1px solid #E7E7E7;
+          box-sizing: border-box;
+  
+          .sendMessageTools {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .toolsBigBox {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              .toolsBox {
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                img {
+                  width: 36px;
+                  height: 36px;
+                  margin-right: 30px;
+                  cursor: pointer;
+                }
+              }
+            }
+            .fileBox {
+              width: 180px;
+              display: flex;
+              align-items: center;
+              border: 1px solid #E9EDF7;
+              border-radius: 8px;
+              padding: 5px 10px;
+              .fileBoxText {
+                font-size: 14px;
+                color: #999;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                width: 110px;
+              }
+              img {
+                width: 40px;
+                height: 40px;
+                margin-right: 5px;
+              }
+            }
+          }
+          .sendMessageInput {
+            margin-top: 5px;
+          }
+          .sendMessageButton {
+            padding-top: 20px;
+            text-align: right;
+            button {
+              width: 120px;
+              height: 38px;
+            }
+          }
+        }
+        //右侧菜单
+        .rightSlideBox {
+          width: 420px;
+          height: 100%;
+          position: absolute;
+          right: 0;
+          top: 0;
+          background: #fff;
+          box-shadow: -4px 0px 4px 0px rgba(0, 0, 0, 0.1); 
+          .rightSlideBoxClose {
+            padding: 20px 20px 0 20px;
+            height: 50px;
+            overflow: hidden;
+            display: flex;  
+            align-items: center;
+            justify-content: space-between;
+            .rightSlideBoxCloseTitle {
+              font-size: 18px;
+              color: #333;
+            }
+            .rightSlideBoxCloseIcon {
+              cursor: pointer;
+              width: 28px;
+              height: 28px;
+              line-height: 28px;
+              text-align: center;
+              background: #EFEFEF;
+              border-radius: 8px;
+            }
+          }
+          .rightSlideSearch {
+            padding: 30px 25px 0 25px;
+            height: 66px;
+            //overflow: hidden;
+            position: relative;
+            .searchFriendBox {
+              position: absolute;
+              width: 280px;
+              border-radius: 8px;
+              top: 65px;
+              left: -260px;
+              background: #fff;
+              box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+              border-radius: 8px;
+              z-index: 100;
+              box-sizing: border-box;
+              padding: 20px 0 30px 0;
+              .searchFriendClose {
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+                padding-right: 10px;
+                padding-bottom: 10px;
+                .rightSlideBoxCloseIcon {
+                  cursor: pointer;
+                  width: 28px;
+                  height: 28px;
+                  line-height: 28px;
+                  text-align: center;
+                  background: #EFEFEF;
+                  border-radius: 8px;
+                }
+              }
+              .searchFriendItem {
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                border-bottom: 1px solid #E9EDF7;
+                padding: 0 20px 30px 20px;
+                .searchFriendAvatar {
+                  img {
+                    width: 66px;
+                    height: 66px;
+                    border-radius: 50%;
+                  }
+                  margin-right: 15px;
+                }
+                .searchFriendInfo {
+                  flex: 1;
+                  .searchFriendName {
+                    display: flex;
+                    align-items: center;
+                    .gender {
+                      img {
+                        width: 12px;
+                        height: 12px;
+                      }
+                    }
+                    img {
+                      width: 18px;
+                      height: 18px;
+                      cursor: pointer;
+                    }
+                    .searchFriendNameText {
+                      font-size: 18px;
+                      width: 120px;
+                      height: 28px;
+                      line-height: 28px;
+                      white-space: nowrap; 
+                      overflow: hidden; 
+                      text-overflow: ellipsis;
+                    }
+                  }
+                  .searchFriendPhone {
+                    font-size: 14px;
+                    color: #999;
+                    margin-top: 10px;
+                  }
+                }
+              }
+              .searchFriendLineBox {
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                padding: 20px;
+                border-bottom: 1px solid #E9EDF7;
+                .searchFriendLineTitle{
+                  font-size: 16px;
+                  color: #999999;
+                  width: 90px;
+                }
+                .searchFriendLineContent{
+                  font-size: 16px;
+                  color: #333;
+                  flex: 1;
+                  .searchFriendLineContentItem{
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                  }
+                }
+              }
+              .searchFriendButton {
+                padding:40px 0 10px 0;
+                text-align: center;
+                .searchFriendButtonItem {
+                  font-size: 14px;
+                  color: #5570F1;
+                  img {
+                    width: 30px;
+                    height: 30px;
+                    margin-bottom: 5px;
+                  }
+                }
+              }
+            }
+          }
+          .rightSlideUserBox {
+            box-sizing: border-box;
+            padding: 40px 40px 10px 40px;
+            height: 180px;
+            overflow-y: auto;
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            //border-bottom: 1px solid #E9EDF7;
+            .rightEditUserItem {
+              cursor: pointer;
+              // color: #333;
+              // .rightSlideUserItemIcon {
+              //   .addUserIcon {
+              //     transition: all 0.5s ease;
+              //   }
+              //   .addUserIcon:hover {
+              //     background: #5570F1;
+              //     color: #fff;
+              //   }
+              // }
+              
+            }
+            .rightSlideUserItem {
+              margin-bottom: 20px;
+              width: 25%;
+              position: relative;
+              //cursor: pointer;
+              //用户菜单
+              .rightSlideUserItemMore {
+                position: absolute;
+                background: #fff;
+                box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+                bottom: -220px;
+                left: -240px;
+                width: 280px;
+                height: 270px;
+                .rightSlideUserItemMoreMain {
+                  display: flex;
+                  align-items: center;
+                  justify-content: flex-start;
+                  padding:0 20px;
+                  .rightSlideUserItemMoreMainIcon {
+                    img {
+                      width: 66px;
+                      height: 66px;
+                      border-radius: 50%;
+                    }
+                  }
+                  .rightSlideUserItemMoreMainInfo { 
+                    padding: 30px 0 30px 20px;
+                    border-bottom: 1px solid #E9EDF7;
+                    flex: 1;
+                    .rightSlideUserItemMoreMainInfoTop {
+                      display: flex;
+                      align-items: center;
+                      justify-content: space-between;
+                      .rightSlideUserItemMoreUserName {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        font-size: 18px;
+                        .rightSlideUserItemMoreUserMore {
+                          margin-left: 10px;
+                          img {
+                            width: 12px;
+                            height: 12px;
+                          }
+                        }
+                      }
+                      .rightSlideUserItemMoreUserMoreIcon {
+                        img {
+                          width: 18px;
+                          height: 18px;
+                        }
+                      }
+                    }
+                  }
+                  .rightSlideUserItemMoreNumber {
+                    font-size: 14px;
+                    color: #999;
+                    margin-top: 10px;
+                  }
+                }
+                .rightSlideUserItemMoreLine {
+                  .rightSlideUserItemMoreLineItem {
+                    padding: 20px;
+                    border-bottom: 1px solid #E9EDF7;
+                    display: flex;
+                    .rightSlideUserItemMoreTitle {
+                      font-size: 16px;
+                      color: #999;
+                      width: 80px;
+                    }
+                    .rightSlideUserItemMoreText {
+                      font-size: 16px;
+                      color: #333;
+                      display: flex;
+                      align-items: center;
+                      justify-content: space-between;
+                      flex:1;
+                    }
+                  }
+                  .rightSlideUserItemMoreLineButton {
+                    padding-top: 25px;
+                    text-align: center;
+                    font-size: 14px;
+                    color:#5570F1;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    img {
+                      width: 25px;
+                      height: 25px;
+                      margin-bottom: 8px;
+                    }
+                    .rightSlideUserItemMoreLineGroup {
+                      width: 33.33%;
+                    }
+                  }
+                }
+              }
+              .rightSlideUserItemIcon {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                img {
+                  width: 58px;
+                  height: 58px;
+                  border-radius: 50%;
+                }
+                .el-dropdown-link {
+                  width: 58px;
+                  height: 58px;
+                  position: relative;
+                  .rightSlideUserGroupLeader{
+                    font-size: 12px;
+                    color: #FEAF50;
+                    background: #FFEAD1;
+                    width: 36px;
+                    height: 20px;
+                    border-radius: 4px;
+                    position: absolute;
+                    bottom: 0;
+                    right: -10px;
+                    text-align: center;
+                    line-height: 20px;
+                  }
+                }
+                .addUserIcon {
+                  width: 58px;
+                  height: 58px;
+                  line-height: 58px;
+                  background: #F0F0F0;
+                  border-radius: 50%;
+                  text-align: center;
+                  color:#fff;
+                  font-size: 32px;
+                }
+              }
+              .rightSlideUserItemName {
+                //width: 80px;
+                padding: 0 5px;
+                font-size: 16px;
+                color: #333;
+                margin-top: 10px;
+                text-align: center;
+                white-space: nowrap; /* 强制不换行 */
+                overflow: hidden; /* 超出宽度隐藏 */
+                text-overflow: ellipsis; /* 显示省略号 */
+              }
+            }
+          }
+          .rightLineBorder {
+            width: 100%;
+            border-bottom: 1px solid #E9EDF7;
+          }
+          .rightSlideMore {
+            padding: 30px 40px;
+            font-size: 18px;
+            color: #999;
+            text-align: center
+          }
+          //聊天记录
+          .rightSlideFunction {
+            .rightSlideFunctionItem {
+              height: 60px;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              padding: 20px 40px;
+              border-bottom: 1px solid #E9EDF7;
+              cursor: pointer;
+              .rightSlideFunctionItemText {
+                font-size: 18px;
+                color: #333;
+              }
+              .rightSlideFunctionItemIcon {
+                img {
+                  width: 18px;
+                  height: 18px;
+                }
+              }
+            }
+          }
+          //群聊设置
+          .groupSystem {
+            border-bottom: 1px solid #E9EDF7;
+            padding-bottom: 30px;
+            .groupChatSystem {
+              padding: 30px 40px 0 40px;
+              height: 80px;
+              overflow: hidden; 
+              .groupChatTitle {
+                font-size: 18px;
+                color: #333;
+                margin-bottom: 10px;
+              }
+              .groupChatText {
+                width: 100%;
+                height: 20px;
+                overflow: hidden;
+                font-size: 18px;
+                color: #999;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                img {
+                  cursor: pointer;
+                }
+                .groupChatTextContent {
+                  width: 300px;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+              }
+            }
+          }
+          .rightSlideFooterBox {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            div{
+              width: 33%;
+              text-align: center;
+              font-size: 16px;
+              color: #666;
+              cursor: pointer;
+              margin-top: 30px;
+              box-sizing: border-box;
+              border-right: 1px solid #E9EDF7;
+            }
+          }
+          .rightSlideFooter {
+            font-size: 18px;
+            color: #666;
+            padding: 30px 40px;
+            text-align: center;
+            cursor: pointer;
+            border-bottom: 1px solid #E9EDF7;
+          }
+          .isLast {
+            border-bottom: 0;
+            color: #999;
+          }
+        }
+      }
+    }
+    //不同的消息类型
+    //发送文件
+    .messageTypeFile {
+      width: 283px;
+      background: #fff;
+      border-radius: 16px;
+      border: 1px solid #E9EDF7;
+      cursor:pointer;
+      .messageTypeFileTop{
+        border-bottom: 1px solid #E9EDF7;
+        .messageTypeFileSize {
+          padding: 10px 20px 10px 20px;
+        }
+        .messageTypeFileInfo {
+          display: flex;
+          align-items: center;
+          padding:20px 20px 20px 20px;
+          .messageTypeFileTitle {
+            font-size: 16px;
+            color: #333;
+            height: auto; /* Allow height to adjust */
+            max-height: 48px; /* Maximum height for two lines (16px * 2) */
+            overflow: hidden; /* Hide overflow */
+            text-overflow: ellipsis; /* Show ellipsis for overflow text */
+            display: -webkit-box; /* Use flexbox for multi-line ellipsis */
+            -webkit-box-orient: vertical; /* Set box orientation to vertical */
+            -webkit-line-clamp: 2; /* Limit to 2 lines */
+            white-space: normal; /* Allow text wrapping */
+            width: 200px;
+          }
+          .messageTypeFileIcon {
+            img {
+              width: 42px;
+              height: 42px;
+            }
+          }
+        }
+      }
+      .messageTypeFileLogo {
+        padding:15px 20px;
+      }
+      .messageTypeFileSize {
+        font-size: 12px;
+        color: #999;
+      }
+      .messageTypeFileLogo {
+        font-size: 12px;
+        color: #999;
+      }
+    }
+    //发送名片
+    .messageTypeCard {
+      width: 321px;
+      background: #fff;
+      border-radius: 16px;
+      border: 1px solid #E9EDF7;
+      .messageTypeCardTop {
+        display: flex;
+        align-items: center;
+        padding: 20px 20px 24px 20px;
+        border-bottom: 1px solid #E9EDF7;
+        .messageTypeCardIcon {
+          margin-right: 15px;
+          img {
+            width: 58px;
+            height: 58px;
+            border-radius: 50%;
+          }
+        } 
+        .messageTypeCardName {
+          font-size: 16px;
+          color: #333;
+        }
+      }
+      .messageTypeCardText {
+        padding-top: 14px;
+        padding-left: 20px;
+        padding-bottom: 15px;
+        font-size: 12px;
+        color: #999999;
+      }
+    }
+    //发送图片
+    .messageTypeImage {
+      width: 200px;
+      //height: 200px;
+      img {
+        max-width: 200px;
+        border-radius: 16px;
+        border: 1px solid #ECECEC;
+      }
+    }
+    //发送群聊
+    .messageGroupInvite {
+      background: #fff;
+      border-radius: 16px;
+      border: 1px solid #E9EDF7;
+      .messageGroupInviteTop {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 20px 20px 24px 20px;
+        .messageGroupInviteIcon {
+          margin-right: 15px;
+          img {
+            width: 58px;
+            height: 58px;
+            border-radius: 50%;
+          }
+        }
+        .messageGroupInfoText {
+          .messageGroupInfoTextTitle {
+            font-size: 16px;
+            color: #333;
+            margin-bottom: 5px;
+          }
+          .messageGroupInfoTextTxt {
+            font-size: 12px;
+            color: #999;
+            line-height: 18px;
+          }
+        }
+      }
+      .messageGroupInviteText {
+        padding-top: 14px;
+        padding-left: 20px;
+        padding-bottom: 15px;
+        font-size: 12px;
+        color: #999999;
+        border-top: 1px solid #E9EDF7;
+      }
+    }
+    //添加用户弹出框
+    .searchWindow {
+      display: flex;
+      .searchWindowLeft {
+        width: 330px;
+        box-sizing: border-box;
+        border-right: 1px solid #E9EDF7;
+        padding-right: 25px;
+        .searchUserWindowBox {
+          position: relative;
+          .searchFriendClose {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            padding-right: 10px;
+            padding-bottom: 10px;
+            .rightSlideBoxCloseIcon {
+              cursor: pointer;
+              width: 28px;
+              height: 28px;
+              line-height: 28px;
+              text-align: center;
+              background: #EFEFEF;
+              border-radius: 8px;
+            }
+          }
+          .searchFriendBox {
+            position: absolute;
+            width: 280px;
+            border-radius: 8px;
+            top: 0;
+            right: -280px;
+            background: #fff;
+            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            z-index: 100;
+            box-sizing: border-box;
+            padding: 20px 0 30px 0;
+            .searchFriendItem {
+              display: flex;
+              align-items: center;
+              justify-content: flex-start;
+              border-bottom: 1px solid #E9EDF7;
+              padding: 0 20px 30px 20px;
+              .searchFriendAvatar {
+                img {
+                  width: 66px;
+                  height: 66px;
+                  border-radius: 50%;
+                }
+                margin-right: 15px;
+              }
+              .searchFriendInfo {
+                flex: 1;
+                .searchFriendName {
+                  display: flex;
+                  align-items: center;
+                  .gender {
+                    img {
+                      width: 12px;
+                      height: 12px;
+                    }
+                  }
+                  img {
+                    width: 18px;
+                    height: 18px;
+                    cursor: pointer;
+                  }
+                  .searchFriendNameText {
+                    font-size: 18px;
+                    width: 120px;
+                    height: 28px;
+                    line-height: 28px;
+                    white-space: nowrap; 
+                    overflow: hidden; 
+                    text-overflow: ellipsis;
+                  }
+                }
+                .searchFriendPhone {
+                  font-size: 14px;
+                  color: #999;
+                  margin-top: 10px;
+                }
+              }
+            }
+            .searchFriendLineBox {
+              display: flex;
+              align-items: center;
+              justify-content: flex-start;
+              padding: 20px;
+              border-bottom: 1px solid #E9EDF7;
+              .searchFriendLineTitle{
+                font-size: 16px;
+                color: #999999;
+                width: 90px;
+              }
+              .searchFriendLineContent{
+                font-size: 16px;
+                color: #333;
+                flex: 1;
+                .searchFriendLineContentItem{
+                  display: flex;
+                  align-items: center;
+                  justify-content: space-between;
+                }
+              }
+            }
+            .searchFriendButton {
+              padding:40px 0 10px 0;
+              text-align: center;
+              .searchFriendButtonItem {
+                font-size: 14px;
+                color: #5570F1;
+                img {
+                  width: 30px;
+                  height: 30px;
+                  margin-bottom: 5px;
+                }
+              }
+            }
+          }
+        }
+        .searchUserBox {
+          padding-top: 30px;
+          .searchNameEnglish {
+            font-size: 18px;
+            color: #999;
+            padding: 30px 0 20px 0;
+          }
+          .searchUserItem {
+            display: flex;
+            align-items: center;
+            margin-bottom: 20px;
+            .searchUserName {
+              font-size: 18px;
+              font-weight: bold;
+              color: #333;
+            }
+            img {
+              width: 38px;
+              height: 38px;
+              border-radius: 50%;
+              margin: 0 20px;
+            }
+          }
+        }
+      }
+      .searchWindowRight {
+        width: 690px;
+        .searchWindowRightTop {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0 30px 30px 30px;
+          .searchWindowRightTitle {
+            font-size: 18px;
+            color: #333;
+          }
+          .searchWindowRightNum {
+            font-size: 18px;
+            color: #999;
+          }
+        }
+        .searchWindowUserList {
+          padding: 0 30px;
+          height: 400px;
+          display: flex;
+          flex-wrap: wrap;
+          align-items: flex-start;
+          align-content: flex-start;
+          .searchWindowUserItem {
+            width:20%;
+            text-align: center;
+            margin-bottom: 30px;
+            .searchWindowUserName {
+              font-size: 18px;
+              color: #333;
+              font-weight: bold;
+              width: 122px;
+              white-space: nowrap; /* 强制不换行 */
+              overflow: hidden; /* 超出宽度隐藏 */
+              text-overflow: ellipsis; /* 显示省略号 */
+            }
+            .searchWindowUserIcon {
+              width: 58px;
+              height: 58px;
+              position: relative;
+              margin: 0 auto 10px auto;
+              .searchWindowDeleteUser {
+                position: absolute;
+                width: 15px;
+                height: 15px;
+                background: rgba(0,0,0,0.3);
+                border-radius: 5px;
+                color: #fff;
+                right: -3px;
+                top: -3px;
+                cursor: pointer;
+              }
+              .rightSlideUserGroupLeader{
+                font-size: 12px;
+                color: #FEAF50;
+                background: #FFEAD1;
+                width: 36px;
+                height: 20px;
+                border-radius: 4px;
+                position: absolute;
+                bottom: 0;
+                right: -10px;
+                text-align: center;
+                line-height: 20px;
+              }
+              img {
+                width: 58px;
+                height: 58px;
+                border-radius: 50%;
+                margin-bottom: 10px;
+              }
+            }
+            
+          }
+        }
+        .shareCardBox {
+          border-top: 1px solid #E9EDF7;
+          .shareCardTitle {
+            padding: 30px;
+          }
+          .shareCardInput {
+            padding: 0 30px 0 30px;
+          }
+        }
+        .searchWindowFooter {
+          text-align: center;
+          padding-top: 30px;
+        }
+      }
+    }
+    //聊天记录弹出框
+    .fileWindow {
+      .fileWindowHeader {
+        margin-bottom: 20px;
+      }
+      .fileWindowMessageTime {
+        width: 100px;
+        height: 37px;
+        line-height: 37px;
+        text-align: center;
+        background: #F4F5FA;
+        border-radius: 8px;
+        font-size: 14px;
+        color: #999999;
+        margin-top: 30px;
+      }
+      .fileWindowMessageScrollBox {
+        height: 500px;
+        overflow-y: auto;
+      }
+      .fileWindowNoMessage {
+        font-size: 18px;
+        color: #999;
+        text-align: center;
+        height: 500px;
+        line-height: 500px;
+      }
+      .fileWindowMessageItemBox {
+        display: flex;
+        align-items: flex-start;
+        .active {
+          background: #F5F7FD;
+          border-right: 4px solid #5570F1 !important;
+        }
+        .historicalMessageBox {
+          width: 100%;
+          display: flex;
+          align-items: flex-start;
+          padding: 30px 0 20px 0;
+          border-bottom: 1px solid #E9EDF7;
+        }
+        .fileWindowMessageItemIcon {
+          img {
+            width: 58px;
+            height: 58px;
+            border-radius: 50%;
+          }
+        }
+        .fileWindowMessageItemIcon {
+          padding-right: 15px;
+        }
+        .fileWindowMessageItem {
+          flex: 1;
+          .fileWindowMessageItemInfo {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding-bottom: 20px;
+            .fileWindowMessageItemName {
+              font-size: 18px;
+              color: #333;
+            }
+            .fileWindowMessageItemTime {
+              font-size: 14px;
+              color: #999;
+            }
+          }
+          .fileWindowMessageItemText {
+            font-size: 14px;
+            color: #999;
+          }
+          .fileWindowMessageItemImage {
+            width: 150px;
+            height: 150px;
+            border-radius: 16px;
+            border: 1px solid #ECECEC;
+          }
+        }
+      }
+      //文件列表
+      .fileWindowFlieBox {
+        .fileWindowFlieItem {
+          padding:30px 0 20px 0;
+          display: flex;
+          align-items: center;
+          border-bottom: 1px solid #E9EDF7;
+          .fileWindowFlieItemIcon {
+            margin-right: 10px;
+            img {
+              width: 42px;
+              height: 42px;
+            }
+          }
+          .fileWindowFlieItemMain {
+            flex: 1;
+            .fileWindowFlieItemTitle {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              font-size: 16px;
+              color: #333;
+              margin-bottom: 6px;
+            }
+            .fileWindowFlieItemTime {
+              font-size: 14px;
+              color: #999;
+            }
+            .fileWindowFlieInfo {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              font-size: 12px;
+              color: #999;
+            }
+          }
+        }
+      }
+      //图片列表
+      .fileWindowImageBox {
+        display: flex;
+        flex-wrap: wrap;
+        div {
+          width: 25%;
+          text-align: center;
+          padding: 20px 0 0 0;
+        }
+        img {
+          width: 150px;
+          height: 150px;
+          border-radius: 16px;
+          border: 1px solid #ECECEC;
+        }
+      }
+      //日期���索
+      .fileWindowDateBox {
+        width: 100%;
+        padding: 30px 0;
+      }
+      .fileWindowDateButton {
+        margin-left: 10px;
+      }
+      //群成员搜索
+      .fileWindowGroupMain{
+        display: flex;
+        .fileWindowGroupUserLeft {
+          flex: 1;
+          box-sizing: border-box;
+          padding-right: 20px;
+        }
+        .fileWindowGroupUserRight {
+           width: 300px;
+          .fileWindowGroupUserBox {
+            padding: 30px 0;
+            .searchUserBox {
+              .searchNameEnglish {
+                font-size: 18px;
+                color: #999;
+                padding: 30px 0 20px 0;
+              }
+              .searchUserItem {
+                display: flex;
+                align-items: center;
+                .searchUserName {
+                  font-size: 18px;
+                  font-weight: bold;
+                  color: #333;
+                }
+                img {
+                  width: 38px;
+                  height: 38px;
+                  border-radius: 50%;
+                  margin: 0 20px 0 0;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    //添加用户弹出框
+    .messageFormBox {
+      .messageFormTitle {
+        font-size: 18px;
+        padding-bottom: 20px;
+      }
+      .messageFormInput {
+        margin-bottom: 30px;
+      }
+    }
+    .imgZoomBox {
+      img {
+        width: 550px;
+      }
+    }
+    //弹出框底部按钮
+    .footerButtonBox {
+      padding-top: 40px;
+      text-align: center;
+    }
+    //加入群聊弹出框
+    .addGroupWindow {
+      .addGroupWindowImg {
+        img {
+          width:58px;
+          height: 58px;
+        }
+        text-align: center;
+        font-size: 18px;
+        color: #333;
+      }
+      .addGroupWindowTitle {
+        font-size: 18px;
+        color: #333;
+        text-align: center;
+        padding: 20px 0 40px 0;
+      }
+      .addGroupWindowText {
+        font-size: 12px;
+        color: #999;
+        text-align: center;
+      }
+    }
+    .shareCardWindowBox{
+      .shareCardWindowBoxMain {
+        border: 1px solid #E9EDF7;
+        border-top: none;
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+        background: #F5F7FB;
+        padding-left: 14px;
+        padding: 10px;
+      }
+      .shareCardRadioBox {
+        height: 50px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        >.el-radio {
+          margin-right: 5px;
+        }
+      }
+      .shareCardItem{
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        .shareCardName {
+          font-size: 14px;
+          color: #333;
+          margin-left: 10px;
+        }
+        img {
+          width: 38px;
+          height: 38px;
+          border-radius: 50%;
+        }
+      }
+    }
+    .groupProfileBox {
+      font-size: 16px;
+      color: #333;
+      min-height: 100px;
+      max-height: 300px;
+      overflow-y: auto;
+      overflow-x: hidden;
+      word-wrap: break-word;
+    }
+  
+  
+    //表单微调 start------------------------------------------------------------>*/
+    ::v-deep .custom-form-item > .el-form-item__label {
+      line-height: 140px !important;
+    }
+    ::v-deep .custom-textarea .el-textarea__inner {
+      resize: none; /* 禁止用拖拽调整大小 */
+    }
+    ::v-deep .custom-align-right .el-form-item__label {
+      text-align: right; /* 设置标签文字右对齐 */
+    }
+    ::v-deep .el-select-group__title {
+      color: #909399;
+    }
+    ::v-deep .el-select {
+      width: 100% !important;
+    }
+    ::v-deep .el-tabs__active-bar{
+      height: 1px !important;
+    }
+    ::v-deep .el-tabs__nav-wrap::after {
+      height:1px !important;
+    }
+    ::v-deep .el-tabs__header {
+      margin-bottom: 0 !important;
+    }
+    /* 添加样式以确保右键菜单的显示 */
+    .el-dropdown {
+      z-index: 2000; /* 确保右键菜单在其他元素之上 */
+    }
+  </style>
+  

src/views/chat - 副本/topic.vue

@@ -0,0 +1,320 @@
+<template>
+  <div class="mainBox">
+    <!--搜索功能 start------------------------------------------------------------>
+    <div class="layerBox_search">
+      <div class="layerBoxLine">
+        <el-row>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">课题标题：</div>
+              <el-input placeholder="请输入课题标题" autocomplete="off" v-model="getApiData.title"/>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">课题分类：</div>
+              <el-select v-model="getApiData.type" placeholder="请选择课题分类..">
+                <!-- <el-option label="科研" value="1"></el-option>
+                <el-option label="维权" value="2"></el-option> -->
+                <el-option :label="item.label" :value="item.value" v-for="item in topicType"></el-option>
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">作者：</div>
+              <el-input placeholder="请输入作者姓名" autocomplete="off" v-model="getApiData.nickname"/>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="layerBoxLineTwo">
+        <el-row>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">审核状态：</div>
+              <el-select v-model="getApiData.status" placeholder="请选择审核状态..">
+                <!-- <el-option label="待审核" value="1"></el-option>
+                <el-option label="已通过" value="2"></el-option>
+                <el-option label="已拒绝" value="3"></el-option> -->
+                <el-option :label="item.label" :value="item.value" v-for="item in topicStatus"></el-option>
+              </el-select>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <div class="layerBoxNoBg">
+      <div>
+        <el-button type="primary" @click="goCreat">发布课题</el-button>
+      </div>
+      <div>
+        <el-button @click="clearSearchList">重置</el-button>
+        <el-button type="primary" @click="getData('search')">搜索</el-button>
+      </div>
+    </div>
+    <!--搜索功能 end------------------------------------------------------------>
+
+    <!--表格内容 start------------------------------------------------------------>
+    <div class="layerBox">
+      <tableTitle :name="tableDivTitle"/>
+      <el-row>
+        <template>
+          <el-table :data="tableData" style="width: 100%">
+            <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
+            <el-table-column prop="title" label="课题标题" width=""></el-table-column>
+            <el-table-column prop="type" label="课题分类" width="">
+              <!-- <template slot-scope="scope">
+                <div v-if="scope.row.type==1">科研</div>
+                <div v-if="scope.row.type==2">维权</div>
+                <div v-if="scope.row.type==3">讨论</div>
+              </template> -->
+            </el-table-column>
+            <el-table-column prop="author" label="作者" width=""></el-table-column>
+            <el-table-column prop="created_at" label="创建时间" width=""></el-table-column>
+            <el-table-column prop="updated_at" label="修改时间" width=""></el-table-column>
+            <el-table-column prop="status" label="状态" width="">
+              <template slot-scope="scope">
+                <div v-if="scope.row.status==1" class="status1">待审核</div>
+                <div v-if="scope.row.status==2" class="status2">已通过</div>
+                <div v-if="scope.row.status==3" class="status3">已拒绝</div>
+              </template>
+            </el-table-column>
+            <el-table-column fixed="right" label="操作" width="280" header-align="center">
+              <template slot-scope="scope">
+                <div class="listBtnBox">
+                  <div class="listDeleteBtn" @click="deleteRow(scope.row.id)"><i class="el-icon-delete"></i>删除</div>
+                  <div class="listEditBtn" @click="goEdit(scope.row.id)"><i class="el-icon-edit-outline"></i>编辑</div>
+                  <div class="listMainBtn" @click="openEditWindow(scope.row.id)" v-if="$store.state.user.role_id==1||$store.state.user.role_id==21||$store.state.user.role_id==23"><i class="el-icon-edit-outline"></i>审核</div>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </template>
+      </el-row>
+    </div>
+    <!--分页 start------------------------------------------------------------>
+    <div class="alignBox">
+      <el-row>
+        <el-col :span="24">
+          <el-pagination @size-change="handleSizeChange" :current-page="getApiData.page" @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper" :total="allCount"></el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+    <!--分页 end------------------------------------------------------------>
+    <!--表格内容 end------------------------------------------------------------>
+
+    <!--审核状态弹出框 start------------------------------------------------------------>
+    <el-dialog :visible.sync="auditStatus" title="审核状态" :close-on-click-modal="false" width="420px">
+      <div>
+        <div class="contentBox">
+          <el-radio-group v-model="form.radio">
+            <el-radio :label="2">通过</el-radio>
+            <el-radio :label="3">拒绝</el-radio>
+          </el-radio-group>
+        </div>
+        <div class="footerButtonBox">
+          <el-button type="info" @click="auditStatus = false">取消</el-button>
+          <el-button type="primary" @click="editStatus">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <!--审核状态弹出框 end------------------------------------------------------------>
+  </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle';
+//引入公用样式
+import '@/styles/global.less';
+
+export default {
+  components: {
+    tableTitle,//表格标题
+  },
+  data() {
+    return {
+      //1.列表和分页相关 start ------------------------------------------------------------>
+      tableDivTitle:"课题列表",
+      tableData:[],//内容
+      editId:0,//要修改的网站id
+      topicType:[],//课题分类
+      topicStatus:[],//课题状态
+      getApiData:{
+        title:"",//标题
+        type:"",//课题分类
+        nickname:"",//作者
+        status:"",//审核状态
+        page:1,//当前是第几页
+        page_size:10,//一共多少条
+      },
+      allCount:0,//总条数
+      auditStatus:false,//审核状态弹出框
+      form:{
+        radio:2 //1=通过 2=拒绝
+      }
+      //分页相关 end ------------------------------------------------------------>
+    }
+  },
+  methods: {
+    //1.列表和分页相关 start ------------------------------------------------------------>
+    //1.1 开始请求商圈列表
+    getData(type){
+      if(type=="search"){
+        this.getApiData.page = 1;
+      }
+      this.$store.dispatch('chat/getTopicsList',this.getApiData).then(res=> {
+        this.tableData = res.data.data; //给与内容
+        this.allCount = res.data.total; //给与总条数
+        //把数字转换为汉字
+        for(let item of res.data.data){
+          for(let item2 of this.topicType){
+            if(item.type == item2.value){
+              item.type = item2.label;
+            }
+          }
+        }
+      }).catch(() => {
+        this.$message({
+          type: 'warning',
+          message: '网络错误，请重试！'
+        });
+      })
+    },
+    //1.2 删除商圈
+    deleteRow(id){
+      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log("当前删除：" + id)
+        let data = {
+          id:id+""
+        }
+        this.$store.dispatch('chat/delTopic',data).then(res=> {
+          this.getData();
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'warning',
+            message: '网络错误，请重试！'
+          });
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'warning',
+          message: '已取消删除'
+        });
+      });
+    },
+    //1.4 列表内容分页
+    //直接跳转
+    handleSizeChange(val) {
+      this.getApiData.page = val;
+      this.getData();
+    },
+    //1.5 点击分页
+    handleCurrentChange(val) {
+      this.getApiData.page = val;
+      this.getData();
+    },
+    //1.6 重置按钮
+    clearSearchList(){
+      this.tableData = [];
+      this.getApiData.title = "";
+      this.getApiData.type = "";
+      this.getApiData.nickname = "";
+      this.getApiData.status = "";
+      this.getApiData.page = 1;
+      this.getApiData.pageSize = 10;
+      this.getData();
+    },
+    //1.7 查询商圈分类
+    getTopicType(){
+      this.$store.dispatch('chat/topicType',this.getApiData).then(res=> {
+        this.topicType = res.data;
+        console.log(this.topicType)
+      }).catch(() => {
+        this.$message.error("查询商圈分类失败！");
+      })
+    },
+    //1.8 查询商圈状态
+    getTopicStatus(){
+      this.$store.dispatch('chat/topicStatus',this.getApiData).then(res=> {
+        this.topicStatus = res.data;
+        console.log(res)
+      }).catch(() => {
+        this.$message.error("查询商圈状态失败！");
+      })
+    },
+    //列表和分页相关 end ------------------------------------------------------------>
+
+    //2.添加商圈 start ------------------------------------------------------------>
+    //跳转到资讯发布页面
+    goCreat(){
+      this.$router.push({
+        path: '/creatTopic',
+      });
+    },
+    goEdit(id){
+      let data = {
+        id:id
+      }
+      this.$router.push({
+        path: '/creatTopic',
+        query: data
+      });
+    },
+    //添加商圈 end ------------------------------------------------------------>
+
+    //3.审核 start ------------------------------------------------------------>
+    openEditWindow(id){
+      this.editId = id;
+      this.auditStatus = true;
+    },
+    editStatus(){
+      let data = {
+        id:this.editId + "",
+        status:this.form.radio + ""
+      }
+      this.$store.dispatch('chat/applyTopic',data).then(res=> {
+        console.log(res)
+        this.getData();
+        this.auditStatus = false;
+      });
+    },
+    //3.审核 end ------------------------------------------------------------>
+  },
+  mounted(){
+    //1.获得初始数据
+    this.getData();
+    //2.查询课题分类
+    this.getTopicType();
+    // //3.查询课题状态
+    this.getTopicStatus();
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .contentBox {
+    padding: 0 0 20px 0;
+  }
+  .footerButtonBox {
+    text-align: right;
+  }
+  .status1 {
+    color: #F19655;
+  }
+  .status2 {
+    color: #519C66;
+  }
+  .status3 {
+    color: #CC5F5F;
+  }
+</style>

src/views/chat - 副本/topicType.vue

@@ -0,0 +1,550 @@
+<template>
+    <!-- 广告位管理 -->
+    <div>
+        <!-- 头部搜索框部分 -->
+        <div class="title">
+            <el-row>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">课题分类名称</div>
+                        <el-input v-model="tabbarName" class="input" placeholder="请输入课题分类名称" :maxlength="10"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="8" class="right">
+                    <div class="btnList">
+                        <button class="search" @click="goSearch">搜索</button>
+                        <button class="reset" @click="goReset">重置</button>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <!--表格内容 start------------------------------------------------------------>
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <button class="btn" @click="addTopicClass">添加分类名称</button>
+            <el-row>
+                <template>
+                    <el-table class="my-table" :data="tableData" style="width: 100%">
+                        <el-table-column fixed prop="id" label="编号" width="90">
+                        </el-table-column>
+                        <el-table-column prop="topicname" label="课题分类名称" width="">
+                        </el-table-column>
+                        <el-table-column prop="created_at" label="添加时间" width="">
+                        </el-table-column>
+                        <el-table-column prop="updated_at" label="修改时间" width="">
+                        </el-table-column>
+                        <el-table-column fixed="right" label="操作" width="300">
+                            <template slot-scope="scope">
+                                <div class="listBtnBox">
+                                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id)">
+                                        <i class="el-icon-delete"></i>
+                                        删除
+                                    </div>
+                                    <div class="listEditBtn" @click="goEdit(scope.row.id, scope.row)">
+                                        <i class="el-icon-edit-outline"></i>
+                                        编辑
+                                    </div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </template>
+            </el-row>
+        </div>
+        <!--分页 start------------------------------------------------------------>
+        <div class="alignBox">
+            <el-row>
+                <el-col :span="24">
+                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                        :current-page="page" :page-size="pageSize" layout="total, prev, pager, next, jumper"
+                        :total="total">
+                    </el-pagination>
+                </el-col>
+            </el-row>
+        </div>
+        <!--分页 end------------------------------------------------------------>
+        <!--表格内容 end------------------------------------------------------------>
+
+        <!-- 弹出框 编辑 start----------------------------------------------------------->
+        <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="8vh"
+            :close-on-click-modal="false">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
+                <div class="dialogText">
+                    <el-form-item label="课题分类名称:" prop="tabbarName">
+                        <el-input v-model="ruleForm.tabbarName" placeholder="请输入课题分类名称"  :maxlength="10" ></el-input>
+                    </el-form-item>
+                </div>
+                <div class="dialogBtn">
+                    <el-button type="info" @click="dialogTableVisible = false">取消</el-button>
+                    <el-button type="primary" @click="submitForm('ruleForm')" v-if="dialogTableVisible">提交</el-button>
+                </div>
+            </el-form>
+        </el-dialog>
+        <!-- 弹出框 编辑 end----------------------------------------------------------->
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle1.vue';
+//引入公用样式
+import '@/styles/global.less';
+import { getTopicClassList,addTopicClass,getTopicClassInfo,updateTopicClass,deleteTopicClass } from '@/api/chat'
+export default {
+    components: {
+        tableTitle,//表格标题-
+    },
+    data() {
+        return {
+            tableDivTitle: "课题分类列表",  //列表标题
+            dialogTableVisible: false,      //编辑弹框
+            dialogName: '编辑', //编辑弹窗名称
+            disabled: false, //禁用
+            tableData: [],//表格数据
+            activeid: "",  //活动id 
+            // 分页相关
+            page: 1,
+            pageSize: 10,
+            total: 0,
+            tabbarName: '', //底部导航名称
+            ruleForm: {
+                tabbarName: '', //底部导航名称
+            },
+            rules: {
+                tabbarName: [{ required: true, message:"课题分类名称不能为空"}],
+            }
+        }
+    },
+    methods: {
+        //1.1 开始请求列表信息方法
+        getData(){
+            getTopicClassList({ page: this.page,page_size: this.pageSize,topicname:this.tabbarName}).then(res=> {
+                if(res.code==200){
+                    this.tableData = res.data.data;
+                    this.total = res.data.total;
+                }else{
+                    this.$message.error("查询课题分类失败！");
+                }
+             
+            }).catch(() => {
+                this.$message.error("网络错误");
+            })
+        },
+         //1.2 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        //1.3 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        // 1.6 搜索按钮
+        goSearch() {
+            this.getData()
+        },
+        //1.7 重置按钮
+        goReset() {
+            this.page = 1
+            this.tabbarName = ""
+            this.getData()
+        },
+       
+        //3. 删除内容
+        deleteRow(id) {
+            let data = new FormData()
+            data.append('id', id)
+            this.$confirm( '是否确认删除该条信息？', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(() => {
+                console.log("当前删除：" + id)
+
+                deleteTopicClass({
+                    id: id
+                }).then(data => {
+                    console.log(data);
+                    if (data.code = 200) {
+                        this.$message({
+                            message: '删除成功',
+                            type: 'success'
+                        })
+                        this.getData()
+                    } else {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                    }
+                })
+
+            }).catch(() => {
+                this.$message({
+                    type: 'warning',
+                    message: '已取消删除'
+                });
+            });
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+        // //1.9 编辑
+        goEdit(id, val) {
+            console.log(id);
+            this.dialogName = '编辑'
+            this.activeid = id
+            this.dialogTableVisible = true
+            this.disabled=true
+            console.log(id, val);
+            console.log("状态", val);
+            //数据回显
+            this.ruleForm.tabbarName = val.topicname //课题分类名称
+
+        },
+
+        //1.7 添加
+        addTopicClass() {
+            this.dialogTableVisible = true
+            this.dialogName = "添加"
+            this.disabled=false
+            //添加时清空回显回来的数据
+            this.ruleForm.tabbarName = '' //课题分类名称
+        },
+
+        // 弹出层相关方法
+        // 提交表单
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    if (this.dialogName == "添加") {
+                        addTopicClass({
+                            topicname: this.ruleForm.tabbarName,
+                        }).then(data => {
+                          
+                            if (data.code == 200) {
+                                this.$message({
+                                    message: '添加成功',
+                                    type: 'success'
+                                })
+                                this.dialogTableVisible = false
+                                this.getData()
+                            } else {
+                                this.$message({
+                                    message: data.message,
+                                    type: 'error'
+                                })
+                                this.dialogTableVisible = true
+                                return
+                            }
+                           
+                        })
+                    }
+                    if (this.dialogName == "编辑") {
+                        updateTopicClass({
+                            topicname: this.ruleForm.tabbarName,
+                            id: this.activeid
+                        }).then(data => {
+                            console.log(data);
+                            if (data.code == 200) {
+                                this.$message({
+                                    message: '编辑成功',
+                                    type: 'success'
+                                })
+                                this.dialogTableVisible = false
+                            }else{
+                                this.$message({
+                                    message: data.message,
+                                    type: 'error'
+                                })
+                                this.dialogTableVisible = true
+                            }
+                            this.getData()
+                        })
+                    }
+
+                }
+            });
+        },    
+    },
+    mounted() {
+        this.getData()
+    },
+}
+</script>
+
+<style scoped lang="less">
+input[aria-hidden=true] {
+    display: none !important;
+}
+
+// 提示信息
+.tips {
+    margin: 30px;
+    background-color: #e9ecf9;
+    border-radius: 11px;
+
+    .tipsIcon {
+        margin: 10px 15px;
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        background: url("../../assets/advertise/Info Circle.png") no-repeat;
+        vertical-align: middle;
+    }
+
+    .tipsText {
+        font-size: 14px;
+        color: #666666;
+    }
+}
+
+// 头部
+.title {
+    margin: 30px 30px 20px 30px;
+    padding: 30px 30px 40px 30px;
+    background-color: #fff;
+    border-radius: 20px 20px 20px 20px;
+    border: 1px solid #E9EDF7;
+
+    .left {
+        float: left;
+    }
+
+    .right {
+        float: right;
+    }
+
+
+    .searchBox {
+        ::v-deep .el-input {
+            position: relative;
+            font-size: 14px;
+            display: inline-block;
+            width: 80%;
+        }
+
+        .searchTitle {
+            padding-bottom: 10px;
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 14px;
+            color: #999999;
+            line-height: 16px;
+        }
+
+        .el-select {
+            width: 100%;
+            display: inline-block;
+            position: relative;
+        }
+    }
+
+
+    .btnList {
+        float: right;
+        padding-top: 28px;
+
+        button {
+            height: 38px;
+            border: none;
+            border-radius: 8px;
+            padding: 0 30px;
+        }
+
+        .search {
+            background-color: #5570f1;
+            color: #fff;
+            margin-right: 20px;
+        }
+
+        .reset {
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 16px;
+            color: #333333;
+            background: #F5F7FB;
+            border-radius: 8px 8px 8px 8px;
+            border: 1px solid rgba(85, 112, 241, 0.11);
+        }
+    }
+}
+
+.layerBox {
+    padding: 30px 20px;
+    position: relative;
+
+    .btn {
+        margin-bottom: 20px;
+        position: absolute;
+        top: 30px;
+        right: 20px;
+        height: 38px;
+        color: #fff;
+        background-color: #5570f1;
+        border: none;
+        border-radius: 8px;
+        padding: 8px 28px 9px;
+        box-sizing: border-box;
+    }
+
+    .listBtnBox {
+        justify-content: left;
+    }
+
+
+    .listDeleteBtn,
+    .listEditBtn,
+    .listLookBtn {
+        margin-left: 0px;
+        padding-left: 0px;
+        margin-right: 20px;
+        width: 76px;
+        height: 36px;
+        line-height: 36px;
+    }
+
+
+    .listLookBtn {
+        text-align: center;
+        border-radius: 8px;
+        cursor: pointer;
+        color: #55b5f1;
+        background-color: rgba(85, 181, 241, 0.16);
+
+        >i {
+            padding-right: 8px;
+        }
+    }
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-input--medium,
+    ::v-deep .el-form-item__label {
+        line-height: 36px;
+        font-size: 16px;
+    }
+}
+
+// 弹出层内容
+.dialogText {
+    margin: 0 7px 0 3px;
+    padding-bottom: 1px;
+    padding: 30px 60px 1px 20px;
+    background-color: #f5f7fb;
+
+    .adImage {
+        width: 140px;
+        height: 140px;
+        line-height: 210px;
+        border-radius: 12px;
+        border: 1px solid rgba(85, 112, 241, 0.11);
+
+        img {
+            width: 140px;
+            height: 80px;
+        }
+    }
+
+
+
+    ::v-deep .avatar {
+        width: 140px;
+        height: auto;
+    }
+
+    .price {
+        ::v-deep .el-input {
+            width: 29%;
+        }
+    }
+
+    .example {
+        font-family: Microsoft YaHei;
+        color: #5570F1;
+    }
+
+    .el_btnList {
+        margin-right: 15px;
+        margin-top: 20px;
+    }
+
+    //日期时间选择器的宽
+    ::v-deep .el-date-editor.el-input {
+        width: 48%;
+    }
+
+    ::v-deep .el-button+.el-button {
+        margin-left: 0px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+}
+
+// 弹出层按钮
+.dialogBtn {
+    text-align: center;
+    margin: 50px auto 20px;
+
+    button {
+        width: 184px;
+        padding: 16px;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        border: none;
+        border-radius: 12px 12px 12px 12px;
+    }
+
+    // 取消
+    .cancel {
+        color: #333333;
+        background-color: #f5f7fb;
+        border: 2px solid rgba(85, 112, 241, 0.11);
+    }
+
+    // 提交
+    .submit {
+        color: #fff;
+        background-color: #5570F1;
+        margin-left: 40px;
+    }
+}
+
+//审核弹出框
+.radioGroup {
+    ::v-deep .el-form-item {
+        margin-top: 40px;
+        margin-bottom: 0;
+    }
+}
+
+.graph {
+    background-color: #f5f7fb;
+    padding: 60px 100px;
+    overflow: hidden;
+
+    li {
+        float: left;
+    }
+
+    >li:first-child {
+        margin-right: 100px;
+    }
+}
+
+.dialog-footer {
+    margin: 0 auto;
+}
+</style>