rkljw 1 zi în urmă
părinte
comite
22b509ae74

+ 1 - 0
package.json

@@ -30,6 +30,7 @@
     "js-cookie": "2.2.0",
     "jsonlint": "1.6.3",
     "jszip": "3.2.1",
+    "mitt": "^3.0.1",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",

+ 23 - 2
src/App.vue

@@ -1,14 +1,19 @@
 <template>
   <div id="app">
     <router-view />
-    <ChatFloatButton v-show="!showChat && this.$store.state.user.name" @open="showChat = true" />
-    <ChatPanel v-show="showChat && this.$store.state.user.name" @close="showChat = false" />
+    <ChatFloatButton ref="chatFloatButton" v-show="!showChat && $store.state.user.name" @open="showChat = true" />
+    <ChatPanel
+      ref="chatPanel"
+      v-show="showChat && $store.state.user.name"
+      @close="showChat = false"
+    />
   </div>
 </template>
 
 <script>
 import ChatFloatButton from './layout/components/Chat/ChatFloatButton.vue'
 import ChatPanel from './layout/components/Chat/ChatPanel.vue'
+import emitter from '@/eventBus';
 
 export default {
   name: 'App',
@@ -17,6 +22,22 @@ export default {
     return {
       showChat: false
     }
+  },
+  mounted() {
+    emitter.on('view-group-chat', this.handleViewGroupChat);
+  },
+  beforeDestroy() {
+    emitter.off('view-group-chat', this.handleViewGroupChat);
+  },
+  methods: {
+    handleViewGroupChat(val) {
+      this.showChat = true; // 先显示 ChatPanel
+      this.$nextTick(() => {
+        if (this.$refs.chatPanel) {
+          this.$refs.chatPanel.viewGroupChat(val);// 这里调用 selectGroup 或其它弹窗方法
+        }
+      });
+    }
   }
 }
 </script>

+ 3 - 0
src/eventBus.js

@@ -0,0 +1,3 @@
+import mitt from 'mitt';
+const emitter = mitt();
+export default emitter;

+ 52 - 31
src/layout/components/Chat/ChatPanel.vue

@@ -177,6 +177,7 @@
     heigth="80%"
     class="chat-dialog"
     top="2vh"
+    :model="false"
   >
     <!--右侧菜单 start------------------------------------------------------------>
         <div class="hallRight">
@@ -618,7 +619,7 @@
           </div>
         </div>
     </el-dialog>
-    <el-dialog :visible.sync="groupWindowStatus" :close-on-click-modal="false" width="1028px">
+    <el-dialog :visible.sync="groupWindowStatus" :modal="false" :close-on-click-modal="false" width="1028px">
       <div class="searchWindow">
         <div class="searchWindowLeft">
           <div class="searchUserWindowBox">
@@ -705,7 +706,7 @@
       </div>
     </el-dialog>
     <!--分享群聊 start------------------------------------------------------------>
-      <el-dialog :visible.sync="shareGroupWindowStatus" title="分享群聊" :close-on-click-modal="false" width="420px">
+      <el-dialog :visible.sync="shareGroupWindowStatus" :modal="false" title="分享群聊" :close-on-click-modal="false" width="420px">
         <div>
           <div class="shareCardWindowBox">
             <el-tabs v-model="shareGroupActive" type="card" @tab-click="handleClickShareGroupCard">
@@ -750,7 +751,7 @@
       <!--分享群聊 end------------------------------------------------------------>
   
       <!--放大图片 start------------------------------------------------------------>
-      <el-dialog :visible.sync="imgZoomStatus" title="图片详情" :close-on-click-modal="false" max-width="600px">
+      <el-dialog :visible.sync="imgZoomStatus" :modal="false" title="图片详情" :close-on-click-modal="false" max-width="600px">
         <div>
           <div class="imgZoomBox">
             <img :src="imgZoomUrl">
@@ -760,8 +761,8 @@
           </div>
         </div>
       </el-dialog>
-            <!--聊天记录弹出框 start------------------------------------------------------------>
-            <el-dialog :visible.sync="fileWindowStatus" title="聊天记录" :close-on-click-modal="false" width="757px">
+      <!--聊天记录弹出框 start------------------------------------------------------------>
+      <el-dialog :visible.sync="fileWindowStatus" title="聊天记录" :model="false" :close-on-click-modal="false" width="757px">
         <div class="fileWindow">
           <div class="fileWindowHeader">
             <el-input
@@ -927,7 +928,7 @@
                         <div class="fileWindowMessageItemName">用户名称</div>
                         <div class="fileWindowMessageItemTime">12:40</div>
                       </div>
-                      <div class="fileWindowMessageItemText">用用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息</div>
+                      <div class="fileWindowMessageItemText">用用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息</div>
                     </div>
                   </div>
                 </div>
@@ -957,7 +958,7 @@
       <!--聊天记录弹出框 end------------------------------------------------------------>
             <!--编辑群成员弹出框 start------------------------------------------------------------>
       <!--编辑时 左侧显示的是好友列表 右侧显示的是群成员-->
-      <el-dialog :visible.sync="groupEditWindowStatus" :close-on-click-modal="false" width="1028px" @closed="cancelEditGroupMember">
+      <el-dialog :visible.sync="groupEditWindowStatus" :model="false" :close-on-click-modal="false" width="1028px" @closed="cancelEditGroupMember">
         <div class="searchWindow">
           <div class="searchWindowLeft">
             <div class="searchUserWindowBox">
@@ -1052,7 +1053,7 @@
       </el-dialog>
       <!--编辑群成员弹出框 end------------------------------------------------------------>
       <!--群名称弹出框 start------------------------------------------------------------>
-      <el-dialog :visible.sync="editGroupNameWindow" title="编辑群名称" :close-on-click-modal="false" width="420px">
+      <el-dialog :visible.sync="editGroupNameWindow" title="编辑群名称" :model="false" :close-on-click-modal="false" width="420px">
         <div>
           <div>
             <el-input type="textarea" resize="none" v-model="editMessageTitle" placeholder="请输入" maxlength="20"></el-input>
@@ -1064,8 +1065,8 @@
         </div>
       </el-dialog>
       <!--群名称弹出框 end------------------------------------------------------------>
-            <!--群公告弹出框 start------------------------------------------------------------>
-            <el-dialog :visible.sync="editGroupNoticeWindow" title="编辑群公告" :close-on-click-modal="false" width="420px">
+      <!--群公告弹出框 start------------------------------------------------------------>
+      <el-dialog :visible.sync="editGroupNoticeWindow" title="编辑群公告" :model="false" :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>
@@ -1079,7 +1080,7 @@
       <!--群公告弹出框 end------------------------------------------------------------>
   
       <!--查看群公告 start------------------------------------------------------------>
-      <el-dialog :visible.sync="groupProfileWindow" title="群公告详情" :close-on-click-modal="false" width="420px">
+      <el-dialog :visible.sync="groupProfileWindow" title="群公告详情" :model="false" :close-on-click-modal="false" width="420px">
         <div>
           <div class="groupProfileBox">
             {{groupProfile}}
@@ -1090,8 +1091,8 @@
         </div>
       </el-dialog>
       <!--查看群公告 end------------------------------------------------------------>
-            <!--分享名片 start------------------------------------------------------------>
-            <el-dialog :visible.sync="userCardWindowStatus" title="分享名片" :close-on-click-modal="false" width="420px">
+      <!--分享名片 start------------------------------------------------------------>
+      <el-dialog :visible.sync="userCardWindowStatus" title="分享名片" :model="false" :close-on-click-modal="false" width="420px">
         <div>
           <div class="shareCardWindowBox">
             <el-tabs v-model="shareTableActive" type="card" @tab-click="handleClickShareCard">
@@ -1136,7 +1137,7 @@
       <!--分享名片 end------------------------------------------------------------>
         
       <!--发送好友申请弹出框 start------------------------------------------------------------>
-      <el-dialog :visible.sync="addFriendWindowStatus" title="朋友申请" :close-on-click-modal="false" width="420px">
+      <el-dialog :visible.sync="addFriendWindowStatus" title="朋友申请" :model="false" :close-on-click-modal="false" width="420px">
         <div>
           <div>
             <el-form :model="form" ref="form" autocomplete="off" label-position="left">
@@ -1156,7 +1157,7 @@
       <!--发送好友申请弹出框 end------------------------------------------------------------>
 
       <!--加入群聊弹出框 start------------------------------------------------------------>
-      <el-dialog :visible.sync="addGroupWindow" title="加入群聊" :close-on-click-modal="false" width="420px">
+      <el-dialog :visible.sync="addGroupWindow" title="加入群聊" :model="false" :close-on-click-modal="false" width="420px">
         <div class="addGroupWindow">
           <div class="addGroupWindowImg">
             <img src="@/assets/chat/user/group.jpg" alt="">
@@ -1175,6 +1176,7 @@
           title=" "
           :close-on-click-modal="false"
           width="420px"
+          :model="false"
         >
         <div class="searchFriendBox" >
               <div class="searchFriendItem">
@@ -1200,17 +1202,9 @@
             </div>
       </el-dialog>
       <!--请求验证弹出框 start------------------------------------------------------------>
-      <el-dialog :visible.sync="friendWindowStatus" title="通过朋友验证" :close-on-click-modal="false" width="420px">
+      <el-dialog :visible.sync="friendWindowStatus" title="通过朋友验证" :model="false" :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">
@@ -1221,7 +1215,7 @@
       </el-dialog>
       <!--请求验证弹出框 end------------------------------------------------------------>
       <!--修改备注弹出框 start------------------------------------------------------------>
-      <el-dialog :visible.sync="editWindowStatus" title="修改备注" :close-on-click-modal="false" width="420px">
+      <el-dialog :visible.sync="editWindowStatus" title="修改备注" :modal="false" :close-on-click-modal="false" width="420px">
         <div>
           <div>
             <el-form :model="form" ref="form" autocomplete="off" label-position="left">
@@ -1261,6 +1255,7 @@
               </div>
             </div>
       </el-dialog>
+      <!-- <el-button class="top-button" type="primary" @click="viewGroupChat">查看群聊</el-button> -->
     </div>
    
   </template>
@@ -1855,6 +1850,7 @@
       //2.2 选择群聊
       //2.1.1 在会话列表中选择一个群聊
       selectGroup(item){
+        console.log("群聊接收值:",item)
         this.$fixModalZIndex();
         this.showDialog = true;
         //选择会话的时候开启loading框
@@ -2022,6 +2018,7 @@
       },
       //2.3.8 群弹出框回显群内成员
       editGroupMember(){
+
         //1.打开编辑窗口
         this.groupEditWindowStatus = true;
         //2.获得好友列表
@@ -2031,8 +2028,7 @@
             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)
@@ -2872,7 +2868,7 @@
       
       //2.3 删除好友
       deleteFriend(id){
-        console.log(id);
+        this.showfrindDialog = false;
         if(id){
           this.editFriendId = String(id);
         }
@@ -2881,14 +2877,14 @@
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning',
-          zIndex: 11000, // 新增,确保弹窗在最上层
-          modal: false // 移除蒙层
+          // zIndex: 11000, // 新增,确保弹窗在最上层
         }).then(() => {
           console.log(this.editFriendId);
           this.$store.dispatch('chat/delFriend',{friend_id:this.editFriendId}).then(res=> {
             this.$message.success('删除成功!')
             //关闭用户详情显示
             this.pagestatus = 1;
+            this.showfrindDialog = false;
             //重新装在用户列表
             this.getUserFriendList();
           })
@@ -2960,6 +2956,7 @@
       //3.操作弹出框 start------------------------------------------------------------>
       //用户菜单操作
       openWindow(item){
+        this.$message.closeAll();
         this.form.id = item.id;
         this.form.friend_id = item.friend_id;
         this.friendInfo = item;
@@ -2967,6 +2964,7 @@
         this.friendWindowStatus = true;
       },
       openEditWindow(id){
+
         //打开修改备注弹出框
         this.editWindowStatus = true;
       },
@@ -3072,6 +3070,29 @@
           document.addEventListener('mouseup', onMouseUp);
         });
       },
+      viewGroupChat(info) {
+        // 这里可以添加查看群聊的逻辑
+        console.log('查看群聊',info);
+        const item = {
+            "receiver_id": info.group_id,
+            "num": 18085,
+            "max_id": '',
+            "user_name": null,
+            "avatar": null,
+            "mobile": null,
+            "group_name": info.group_name,
+            "type": "group",
+            "name": info.group_name,
+            "is_group": 1
+        }
+        this.selectGroup(item);
+      },
+      openGroupChat(id) {
+        console.log('打开群聊',id);
+        // 你的逻辑,比如显示面板、加载群聊数据等
+        // this.showPanel = true;
+        // this.loadGroupChat(id);
+      }
     },
     mounted() {
       console.log("用户头像信息:",this.$store.state.user.avatar)
@@ -5995,7 +6016,7 @@
             text-align: center;
             font-size: 18px;
             height: 400px;
-            line-height: 400px;
+            line-height: 350px;
           }
 
 </style>

+ 1 - 1
src/main.js

@@ -37,7 +37,7 @@ Vue.prototype.$fixModalZIndex = function() {
     const modals = document.querySelectorAll('.v-modal');
     modals.forEach(modal => {
       if (parseInt(modal.style.zIndex, 10) > 10999) {
-        modal.style.zIndex = 10999;
+        modal.style.zIndex = 9999;
       }
     });
   });

+ 0 - 80
src/views/chat - 副本/components/contactsTitle.vue

@@ -1,80 +0,0 @@
-<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>

+ 0 - 61
src/views/chat - 副本/components/hallTitle.vue

@@ -1,61 +0,0 @@
-<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>

+ 0 - 39
src/views/chat - 副本/components/tableTitle.vue

@@ -1,39 +0,0 @@
-<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>

+ 0 - 43
src/views/chat - 副本/components/tableTitle1.vue

@@ -1,43 +0,0 @@
-<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>

+ 0 - 1065
src/views/chat - 副本/contacts.vue

@@ -1,1065 +0,0 @@
-<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>
-  

+ 0 - 321
src/views/chat - 副本/creatTopic.vue

@@ -1,321 +0,0 @@
-<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>

+ 0 - 4242
src/views/chat - 副本/hall.vue

@@ -1,4242 +0,0 @@
-<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>
-  

+ 0 - 320
src/views/chat - 副本/topic.vue

@@ -1,320 +0,0 @@
-<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>

+ 0 - 550
src/views/chat - 副本/topicType.vue

@@ -1,550 +0,0 @@
-<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>

+ 70 - 22
src/views/chat/businessDistrictDetail.vue

@@ -14,20 +14,26 @@
                 <div class="article-meta">
                   <span class="article-meta-item1">{{ dataInfo.nickname }}</span>
                   <span class="article-meta-item2">{{ dataInfo.group_name }}</span>
-                  <el-button  class="top-button" type="primary">查看群聊</el-button>
+                  <el-button  class="top-button" type="primary" @click="viewGroupChat">查看群聊</el-button>
                 </div>
                 <el-divider></el-divider>
                 <div class="background-color">
                   <div class="article-author">
                     <div class="article_box">
-                        <div class="article_panel" :class="{'dot1': !isExpanded}">
-                           <div v-html="dataInfo.content"></div>
+                        <div
+                          class="article_panel"
+                          :class="{ collapsed: !isExpanded }"
+                        >
+                          <div v-html="dataInfo.content"></div>
                         </div>
-                        <span class="article_panel_btn" @click="toggleExpand">
-                          阅读全文
-                            <i class="el-icon-arrow-down" v-if="!isExpanded"></i>
-                            <i class="el-icon-arrow-up" v-else></i>
-                        </span>
+                        <span
+                          class="article_panel_btn"
+                          v-if="!isExpanded"
+                          @click="toggleExpand"
+                        >阅读全文
+                        <i class="el-icon-arrow-down" ></i>
+                            
+                      </span>
                     </div>
                   </div>
                 </div>
@@ -60,8 +66,8 @@
                   </el-row>
                 </div>
                 <div class="comment-actions">
-                  <el-button>返回</el-button>
-                  <el-button type="primary">查看群聊</el-button>
+                  <el-button @click="goBack">返回</el-button>
+                  <el-button type="primary" @click="viewGroupChat">查看群聊</el-button>
                 </div>
               </div>
             </div>
@@ -79,6 +85,7 @@
   import '@/styles/global.less';
   import InputTag from '@/components/InputTag'
   import { getTopicDataInfo,getTopicReply} from '@/api/chat'
+  import emitter from '@/eventBus';
   
   export default {
     components: {
@@ -99,6 +106,7 @@
         },
         allCount: 0,//总条数
         replyList:[],
+        currentGroupId: null
       }
     },
     methods: {
@@ -115,7 +123,7 @@
       },
         toggleExpand() { // 添加切换方法
             
-           this.isExpanded = !this.isExpanded
+           this.isExpanded = true;
         },
         getDataINfo(){
           getTopicDataInfo({
@@ -129,26 +137,38 @@
               })
         },
         getTopicReplyList(){
-          console.log("===")
           getTopicReply({
                 id:self.id,
                 page:this.getApiData.page,
                 page_size:this.getApiData.pageSize
               }).then(data => {
-                  // this.loading=false;
-                  console.log("返回数据##",data.data);
-                  this.replyList = data.data.data;
-                  console.log("赋值########!!!:",this.replyList)
-                 this.allCount = data.data.total;
+                this.replyList = data.data.data;
+                this.allCount = data.data.total;
              
               })
+        },
+        goBack() {
+          this.$router.back();
+        },
+        viewGroupChat() {
+          console.log('[businessDistrictDetail] 触发 view-group-chat 事件,id1:', this.dataInfo);
+          emitter.emit('view-group-chat', this.dataInfo);
+        },
+        handleViewGroupChat(ids) {
+          console.log('[businessDistrictDetail] 收到 view-group-chat 事件,id2:', ids);
+          // 这里一般不需要监听自己发的事件,除非有特殊需求
         }
     },
     mounted() {
       // 1.获取详情数据
-      self.id = this.$route.query.id;
+      self.id = this.$route.query.id+'';
       this.getDataINfo();
       this.getTopicReplyList();
+      // 可选:如果你需要监听(一般只在调试时用)
+      emitter.on('view-group-chat', this.handleViewGroupChat);
+    },
+    beforeDestroy() {
+      emitter.off('view-group-chat', this.handleViewGroupChat);
     }
   }
   </script>
@@ -209,7 +229,11 @@
       color: #999;
       font-size: 18px;
       span {
-        margin-right: 16px;
+        font-weight: 400;
+        font-size: 18px;
+        color: #6A82F3;
+        text-align: center;
+        // margin-right: 16px;
         display:block;
         line-height:30px;
       }
@@ -324,7 +348,7 @@
   }
   .background-color{
     background: #f0f2f5;
-    padding: 30px 20px;
+    padding: 10px 20px 0px 20px;
   }
   .clearfix::after{
     content:'';
@@ -348,8 +372,32 @@
   }
 }
 .article_box{margin-top:11;overflow:hidden;}
-.article_panel{float:left;width:800px;font-size:18px;line-height:30px;}
-.article_panel_btn{float:left;color: #6A82F3;cursor:pointer;}
+.article_panel {
+  transition: max-height 0.3s;
+  overflow: hidden;
+  position: relative;
+  max-height: none;
+  // 展开时无高度限制
+  &.collapsed {
+    max-height: 270px; // 固定高度
+    // 可选:加渐变遮罩
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0; right: 0; bottom: 0;
+      // height: 36px;
+      background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 80%);
+      pointer-events: none;
+    }
+  }
+}
+.article_panel_btn {
+  display: inline-block;
+  color: #5570F1;
+  cursor: pointer;
+  margin-top: 8px;
+  font-size: 15px;
+}
 .dot1{word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
 }
 </style>