修复聊天添加好友的bug

修复聊天添加好友的bug

src/router/index.js

@@ -384,6 +384,23 @@ export const constantRoutes = [
       }
     ]
   },
+  // ----fr-课题分类
+  {
+    path: '/topicType',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/chat/topicType'),
+        meta: {
+          title: '课题分类',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
   {
     path: '/webRule',
     component: Layout,

src/views/chat/components/tableTitle1.vue

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

src/views/chat/contacts.vue

@@ -1,1613 +1,1065 @@
 <template>
-  <div class="mainBox">
-    <div class="hallBox">
-      <div class="hallLeft">
-        <!--添加好友 start------------------------------------------>
-        <contactsTitle :name="tableTitleName" @addUser="addUser" @closeAddUser="closeAddUser" />
-        <!--添加好友 end------------------------------------------>
-        <!--搜索 start------------------------------------------>
-        <div class="searchBox">
-          <el-input
-            placeholder="请输入内容"
-            prefix-icon="el-icon-search"
-            v-model="searchUserName"
-            @keyup.enter.native="searchFriend"
-            :disabled="pagestatus !== 4"
-          >
-          </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">
-            搜索：{{searchUserName}}
+    <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>
-          <div class="searchFriendBox" v-if="searchWindowStatus==true">
-            <div class="searchFriendItem">
-              <div class="searchFriendAvatar">
-                <img src="@/assets/chat/user/user.png">
-              </div>
-              <div class="searchFriendInfo">
-                <div class="searchFriendName">
-                  <div class="searchFriendNameText" v-if="searchFriendList.remark!=null">{{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>
+          <!--搜索 end------------------------------------------>
+          <div class="newFriendBox">新的朋友</div>
+          <div class="newFriendImgBox" v-if="pagestatus==4">
+            <div class="newFriendImg">
+              <img src="@/assets/chat/newcontacts.png">
             </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 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> -->
-            <!-- <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.isfriend==0||searchFriendList.isfriend==null" @click="openAddWindow(searchFriendList.id)">添加到通讯录</el-button>
-              <el-button type="danger" v-else @click="deleteFriend(searchFriendList.id)">删除好友</el-button>
-            </div>
-            <!-- <div class="searchFriendButton">
-              <div class="searchFriendButtonItem">
-                <img src="@/assets/chat/sendmessage.png">
-                <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> -->
-          </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>
-            新的朋友
-          </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">
-            </div>
-            <div class="userInfo">
-              <div class="userName">
-                <div class="userNameText" v-if="item.remark!=null">{{item.user_name}}({{item.remark}})</div>
-                <div class="userNameText" v-else>{{item.user_name}}</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>
-        <!--用户列表 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="@/assets/chat/user/user.png">
+          <div :class="['newFriendImgBox', pagestatus === 2 ? 'newFriendIActive' : '']" @click="tabPage(2)" v-else>
+            <div class="newFriendImg">
+              <img src="@/assets/chat/newcontacts.png">
             </div>
-            <div class="rightNewFriendInfo">
-              <div class="rightNewFriendName">{{item.remark}}</div>
-              <div class="rightNewFriendPhone">{{item.nickname}}</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>
-          <div class="rightNewFriendStatus">
-            <div class="rightNewFriendStatus2">
-              <el-button type="primary" @click="openWindow(item.id)">接受</el-button>
+          <!--用户列表 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="rightNewFriendBox">
-          <div class="rightNewFriendItem">
-            <div class="rightNewFriendAvatar">
-              <img src="@/assets/chat/user/user.png">
+        <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="rightNewFriendInfo">
-              <div class="rightNewFriendName">我是某某某</div>
-              <div class="rightNewFriendPhone">15210211200</div>
+            <div class="rightNewFriendStatus">
+              <div class="rightNewFriendStatus2">
+                <el-button type="primary" @click="openWindow(item)">接受</el-button>
+              </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 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="rightNewFriendInfo">
-              <div class="rightNewFriendName">我是某某某</div>
-              <div class="rightNewFriendPhone">15210211200</div>
+            <div class="rightNewFriendStatus">
+              <div class="rightNewFriendStatus1">已接受</div>
             </div>
           </div>
-          <div class="rightNewFriendStatus">
-            <div class="rightNewFriendStatus2">
-              <el-button type="primary" @click="friendWindowStatus=true">接受</el-button>
+          <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>
-        </div> -->
-      </div>
-      <div class="hallRight" v-if="pagestatus==3">
-        <div class="userInfoMainBox">
-          <div class="userInfoMainItem">
-            <div class="userInfoMainAvatar">
-              <img :src="friendInfo.avatar">
+            <div class="rightNewFriendStatus">
+              <div class="rightNewFriendStatus2">
+                <el-button type="primary" @click="friendWindowStatus=true">接受</el-button>
+              </div>
             </div>
-            <div class="userInfoMainInfo">
-              <div class="userInfoMainName">
-                <div class="userInfoMainNameText">{{friendInfo.user_name}}</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 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}}</div>
-                <div v-else>暂无备注</div>
-                <div><i class="el-icon-edit"></i></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>
-          <!-- <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 class="userInfoMainLineBox">
+              <div class="userInfoMainLineTitle">共同群聊</div>
+              <div class="userInfoMainLineContent">0个</div>
+            </div>
+            <div class="userInfoMainLineBox">
+              <div class="userInfoMainLineTitle">添加方式</div>
+              <div class="userInfoMainLineContent">通过账号添加</div>
             </div> -->
-            <el-button type="danger" icon="el-icon-delete" @click="deleteFriend">删除好友</el-button>
+            <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>
-    </div>
-    <!--发送好友申请弹出框 start------------------------------------------------------------>
-    <el-dialog :visible.sync="addFriendWindowStatus" title="朋友申请" :close-on-click-modal="false" width="420px">
-      <div>
+      <!--发送好友申请弹出框 start------------------------------------------------------------>
+      <el-dialog :visible.sync="addFriendWindowStatus" title="朋友申请" :close-on-click-modal="false" width="420px">
         <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>
+            <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>
-      </div>
-    </el-dialog>
-    <!--发送好友申请弹出框 end------------------------------------------------------------>
-    <!--请求验证弹出框 start------------------------------------------------------------>
-    <el-dialog :visible.sync="friendWindowStatus" title="通过朋友验证" :close-on-click-modal="false" width="420px">
-      <div>
+      </el-dialog>
+      <!--发送好友申请弹出框 end------------------------------------------------------------>
+      <!--请求验证弹出框 start------------------------------------------------------------>
+      <el-dialog :visible.sync="friendWindowStatus" title="通过朋友验证" :close-on-click-modal="false" width="420px">
         <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="form.remark" autocomplete="off"  placeholder="请输入备注名.."></el-input>
-              </el-form-item>
-            </div> 
-          </el-form>
-        </div>
-        <div class="footerButtonBox">
-          <el-button type="info" @click="friendWindowStatus=false">取消</el-button>
-          <el-button type="primary" @click="addFriend">确定</el-button>
+          <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>
-      </div>
-    </el-dialog>
-    <!--请求验证弹出框 end------------------------------------------------------------>
-    <!--修改备注弹出框 start------------------------------------------------------------>
-    <el-dialog :visible.sync="editWindowStatus" title="修改备注" :close-on-click-modal="false" width="420px">
-      <div>
+      </el-dialog>
+      <!--请求验证弹出框 end------------------------------------------------------------>
+      <!--修改备注弹出框 start------------------------------------------------------------>
+      <el-dialog :visible.sync="editWindowStatus" title="修改备注" :close-on-click-modal="false" width="420px">
         <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>
+            <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>
-      </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:"80px",//表单label宽度
-      searchUserName:"",//搜索框
-      friendId:"",//要添加的好友id
-      friendWindowStatus:false,//通过朋友申请弹出框
-      searchWindowStatus:false,//搜索窗口左侧弹出框
-      editWindowStatus:false,//修改备注弹出框
-      addFriendWindowStatus:false,//发送好友申请弹出框
-      editFriendId:"",//要编辑的好友
-      //1.全局配置 end------------------------------------------------------------>
-      //2.好友列表 start------------------------------------------------------------>
-      userFriendList:[],//好友列表
-      userApplyList:[],//好友申请列表
-      searchFriendList:"",//搜索好友列表
-      //2.好友列表 end------------------------------------------------------------>
-      //3.通过好友申请 start------------------------------------------------------------>
-      form:{
-        //好友id
-        id:"",
-        //好友申请
-        remark:"",
-        //状态
-        status:2
+      </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;
       },
-      //3.通过好友申请 end------------------------------------------------------------>
-      //4.编辑好友 start------------------------------------------------------------>
-      friendInfo:{},//好友信息
-      remark:"",//修改的用户备注
-      //4.编辑好友 end------------------------------------------------------------>
-      //5.发送好友申请 start------------------------------------------------------------>
-      addform:{
-        //好友id
-        id:"",
-        //好友申请
-        remark:"",
+      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('获取好友列表失败!')
+        })
       },
-      //5.发送好友申请 end------------------------------------------------------------>
-    };
-  },
-  methods: {
-    //0.全局操作 start------------------------------------------------------------>
-    //0.1切换页面状态
-    tabPage(status){
-      this.pagestatus = status;
-      if(status==2){
-        //如果是2 好友列表状态还原
+      //1.2选择联系人
+      changeUserItem(id){
         for(let item of this.userFriendList){
-          item.status = 0;
-        }
-      }
-    },
-    //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; //默认未选中
+          if(item.friend_id == id){
+            item.status = 1;
+          }else{
+            item.status = 0;
+          }
         }
-        this.userFriendList = data;
-      }).catch(() => {
-        this.$message.error('获取好友列表失败!')
-      })
-    },
-    //1.2选择联系人
-    changeUserItem(id){
-      for(let item of this.userFriendList){
-        if(item.id == id){
-          item.status = 1;
+        //切换页面到用户列表
+        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{
-          item.status = 0;
-        }
-      }
-      //切换页面到用户列表
-      this.pagestatus = 3;
-      //把要编辑的好友的id存起来
-      this.editFriendId = id;
-
-      //获取好友身份信息详情
-      this.$store.dispatch('chat/getFriendInfo',{friend_id:this.editFriendId}).then(res=> {
-        console.log(res);
-        //保存好友信息
-        this.friendInfo = res.data;
-      }).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];
+          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('没有找到该联系人!')
           }
-        }else{
-          this.$message.error('搜索关键字不能为空!')
-        }
-      }).catch(() => {
-        this.$message.error('网络错误!')
-      })
-    },
-    //1.好友列表 end------------------------------------------------------------>
-
-    //2.获得好友申请列表 start------------------------------------------------------------>
-    //2.1 好友申请列表
-    getFriendApplyList(){
-      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;
         }
-      })
-    },
-    //2.3 删除好友
-    deleteFriend(id){
-      if(id){
-        this.editFriendId = id;
-      }
-      this.$confirm('此操作将永久删除该联系人, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        console.log(this.editFriendId);
-        this.$store.dispatch('chat/delFriend',{id:editFriendId}).then(res=> {
-          this.$message.success('删除成功!')
-          //关闭用户详情显示
-          this.pagestatus = 1;
-          //重新装在用户列表
-          this.getUserFriendList();
+      },
+      //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('获取好友申请列表失败!')
         })
-      }).catch(() => {
-        this.$message({
-          type: 'warning',
-          message: '已取消删除'
+      },
+      
+      //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=> {
-        this.$message.success('修改备注名成功!')
-        this.pagestatus = 1;
-        this.editWindowStatus = false;
-        this.getUserFriendList();
-        this.remark = "";
-      }).catch(() => {
-        this.$message.error('修改备注名失败!')
-      })
-    },
-    //2.5 发送好友申请
-    addMyFriend(){
-      console.log(this.addform);
-      this.$store.dispatch('chat/applyFriend',this.addform).then(res=> {
-        if(res.code==200){
-          this.$message.success('成功添加好友!')
-          this.friendWindowStatus = false;
+      },
+      //2.4 编辑好友
+      editFriend(){
+        let data = {
+          friend_id:this.editFriendId,
+          remark:this.remark
         }
-      })
-    },
-    //2.获得好友申请列表 end------------------------------------------------------------>
-
-    //3.操作弹出框 start------------------------------------------------------------>
-    //用户菜单操作
-    openWindow(id){
-      this.form.id = id;
-      //打开弹出框
-      this.friendWindowStatus = true;
+        //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------------------------------------------------------------>
+      
     },
-    openEditWindow(id){
-      //打开修改备注弹出框
-      this.editWindowStatus = true;
+    mounted() {
+      //1.获取联系人列表
+      this.getUserFriendList();
+      //2.获取好友申请列表
+      this.getFriendApplyList();
+      //3.定时查询好友申请状态
+      this.setTimeFriendApplyList();
+      //打印当前用户id
+      console.log("当前的用户id为：" + this.$store.state.user.userid);
     },
-    openAddWindow(id){
-      this.addform.id = id;
-      this.addFriendWindowStatus = true;
+    beforeDestroy() {
+      clearInterval(this.getFriendApplyListStatus);
     }
-    //3.操作弹出框 end------------------------------------------------------------>
-    
-  },
-  mounted() {
-    //1.获取联系人列表
-    this.getUserFriendList();
-    //2.获取好友申请列表
-    this.getFriendApplyList();
-  },
-  beforeDestroy() {
-    
-  }
-};
-</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;
-        .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;
-        }
-      }
-      .newFriendIActive {
-        border-right: 4px solid #5570F1 !important;
-        background: #F5F7FD
-      }
-      .searchFriendBox {
-        position: absolute;
-        width: 280px;
-        border-radius: 8px;
-        top: 0;
-        right: -300px;
+  };
+  </script>
+  
+  <style scoped lang="less">
+    .hallBox {
+      display: flex;
+      margin: 30px;
+      //左侧
+      .hallLeft {
+        width: 420px;
         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;
-            }
-          }
+        border-radius: 20px;
+        margin-right: 20px;
+        .newFriendBox {
+          padding: 10px 25px 0 25px;
+          font-size: 18px;
+          color: #999;
         }
-        .searchFriendLineBox {
+        .newFriendImgBox {
+          margin: 10px 0 10px 0;
+          padding: 20px 0 20px 25px;
           display: flex;
           align-items: center;
           justify-content: flex-start;
-          padding: 20px;
+          cursor: pointer;
           border-bottom: 1px solid #E9EDF7;
-          .searchFriendLineTitle{
-            font-size: 16px;
-            color: #999999;
-            width: 90px;
+          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;
           }
-          .searchFriendLineContent{
-            font-size: 16px;
+          .newFriendText {  
             color: #333;
+            font-size: 18px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
             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;
+            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;
             }
           }
         }
-      }
-      .userListTitle {
-        padding: 15px 25px;
-        font-size: 18px;
-        color: #999;
-      }
-      .searchBox {
-        padding-left: 25px;
-        padding-right: 25px;
-        padding-bottom: 20px;
-      }
-      .userListBox {
-        padding: 15px 0;
-        .active {
-          background: #F5F7FD;
-          box-sizing: border-box;
+        .newFriendIActive {
           border-right: 4px solid #5570F1 !important;
+          background: #F5F7FD
         }
-        .userItem {
-          padding: 0 21px 0 25px;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          height: 90px;
+        .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;
-          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;
+          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%;
-                background: #FFCC91;
-                font-weight: bold;
               }
+              margin-right: 15px;
             }
-            .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;
+            .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;
+                }
               }
-              .userMessageTime {
+              .searchFriendPhone {
                 font-size: 14px;
-                color: #999999;
+                color: #999;
+                margin-top: 10px;
               }
             }
           }
-        }
-      }
-    }
-    //右侧
-    .hallRight {
-      flex: 1;
-      background: #fff;
-      border-radius: 20px;
-      position: relative;
-      height: 1184px;
-      .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;
+          .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;
             }
-            .rightNewFriendPhone {
-              font-size: 18px;
-              color: #999;
+            .searchFriendLineContent{
+              font-size: 16px;
+              color: #333;
+              flex: 1;
+              .searchFriendLineContentItem{
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+              }
             }
           }
-        }
-        .rightNewFriendStatus {
-          .rightNewFriendStatus1 {
-            font-size: 16px;
-            color: #999;
-            width: 69px;
+          .searchFriendButton {
+            padding:40px 0 10px 0;
             text-align: center;
+            .searchFriendButtonItem {
+              font-size: 14px;
+              color: #5570F1;
+              img {
+                width: 30px;
+                height: 30px;
+                margin-bottom: 5px;
+              }
+            }
           }
         }
-      }
-      .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: 1184px;
-        line-height: 1184px;
-      }
-      .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;
+        .userListTitle {
+          padding: 15px 25px;
+          font-size: 18px;
+          color: #999;
         }
-        .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;
+        .searchBox {
+          padding-left: 25px;
+          padding-right: 25px;
+          padding-bottom: 20px;
         }
-      }
-      .rightPositionBox {
-        position: relative;
-        .rightUserMessageBox {
-          padding: 40px;
-          height: 760px;
-          box-sizing: border-box;
+        .userListBox {
+          padding: 15px 0;
           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;
-            }
+          height: 380px;
+          .active {
+            background: #F5F7FD;
+            box-sizing: border-box;
+            border-right: 4px solid #5570F1 !important;
           }
-          .newUserStatus {
-            width: 100%;
+          .userItem {
+            padding: 0 21px 0 25px;
             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;
+            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%;
               }
             }
-            .otherUserMessageText {
-              border-radius: 16px;
-              padding:16px;
-              font-size: 16px;
-              color:#fff;
-              background: #5570F1;
-              position: relative;
-            }
-            .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%;
+            .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;
+                }
               }
             }
-            .meUserMessageText {
-              border-radius: 16px;
-              padding:16px;
-              font-size: 16px;
-              color:#333;
-              background: #FFEAD1;
-              position: relative;
-            }
-            .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 {
-        padding: 20px 40px;
-        border-top: 1px solid #E7E7E7;
-        box-sizing: border-box;
-        height: 276px;
-        .sendMessageTools {
-          img {
-            width: 36px;
-            height: 36px;
-            margin-right: 30px;
-            cursor: pointer;
-          }
-        }
-        .sendMessageInput {
-          margin-top: 20px;
-        }
-        .sendMessageButton {
-          padding-top: 20px;
-          text-align: right;
-          button {
-            width: 120px;
-            height: 38px;
           }
         }
       }
-      //右侧菜单
-      .rightSlideBox {
-        width: 420px;
-        position: absolute;
-        right: 0;
-        top: 0;
+      //右侧
+      .hallRight {
+        flex: 1;
         background: #fff;
-        height: 100%;
-        box-shadow: -4px 0px 4px 0px rgba(0, 0, 0, 0.1); 
-        .rightSlideSearch {
-          padding: 30px 25px 0 25px;
-        }
-        .rightSlideUserBox {
-          box-sizing: border-box;
-          padding: 40px 40px 10px 40px;
+        border-radius: 20px;
+        position: relative;
+        height: 740px;
+        .rightNewFriendBox {
+          height: 126px;
+          border-bottom: 1px solid #E9EDF7;
           display: flex;
           align-items: center;
-          flex-wrap: wrap;
-          //border-bottom: 1px solid #E9EDF7;
-          .rightSlideUserItem {
-            margin-bottom: 20px;
-            width: 25%;
-            .rightSlideUserItemIcon {
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              border-radius: 50%;
-
+          justify-content: space-between;
+          box-sizing: border-box;
+          padding: 30px 40px;
+          .rightNewFriendItem { 
+            display: flex;
+            align-items: center; 
+            .rightNewFriendAvatar {
+              margin-right: 15px;
               img {
-                width: 58px;
-                height: 58px;
+                width: 66px;
+                height: 66px;
                 border-radius: 50%;
               }
-              .addUserIcon {
-                width: 58px;
-                height: 58px;
-                line-height: 58px;
-                background: #F0F0F0;
-                border-radius: 50%;
-                text-align: center;
+            }
+            .rightNewFriendInfo {
+              .rightNewFriendName {
+                font-size: 18px; 
+                margin-bottom: 7px;
+              }
+              .rightNewFriendPhone {
+                font-size: 18px;
+                color: #999;
               }
             }
-            .rightSlideUserItemName {
-              font-size: 18px;
-              color: #333;
-              margin-top: 10px;
-              text-align: center
+          }
+          .rightNewFriendStatus {
+            .rightNewFriendStatus1 {
+              font-size: 16px;
+              color: #999;
+              width: 69px;
+              text-align: center;
             }
           }
         }
-        .rightLineBorder {
-          width: 100%;
-          border-bottom: 1px solid #E9EDF7;
-        }
-        .rightSlideMore {
-          padding: 30px 40px;
-          font-size: 18px;
-          color: #999;
-          text-align: center
-        }
-        //聊天记录
-        .rightSlideFunction {
-          .rightSlideFunctionItem {
-            height: 80px;
+        .userInfoMainBox {
+          padding: 40px;
+          max-width: 900px;
+          margin: 100px auto 0 auto;
+          .userInfoMainItem {
             display: flex;
             align-items: center;
-            justify-content: space-between;
-            padding: 30px 40px;
+            justify-content: flex-start;
             border-bottom: 1px solid #E9EDF7;
-            .rightSlideFunctionItemText {
-              font-size: 18px;
-              color: #333;
-            }
-            .rightSlideFunctionItemIcon {
+            padding: 0 20px 30px 20px;
+            .userInfoMainAvatar {
               img {
-                width: 18px;
-                height: 18px;
+                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;
               }
             }
           }
-        }
-        //群聊设置
-        .groupSystem {
-          border-bottom: 1px solid #E9EDF7;
-          padding-bottom: 30px;
-          .groupChatSystem {
-            padding: 30px 40px 0 40px;
-            .groupChatTitle {
-              font-size: 18px;
+          .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;
-              margin-bottom: 15px;
+              flex: 1;
+              .userInfoMainLineContentItem{
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                cursor: pointer;
+              }
             }
-            .groupChatText {
-              font-size: 18px;
-              color: #999;
+          }
+          .userInfoMainButton {
+            padding:40px 0 10px 0;
+            text-align: center;
+            .userInfoMainButtonItem {
+              font-size: 14px;
+              color: #5570F1;
+              img {
+                width: 30px;
+                height: 30px;
+                margin-bottom: 5px;
+              }
             }
           }
         }
-        .rightSlideFooter {
-          font-size: 18px;
-          color: #CC5F5F;
-          padding: 30px 40px;
+        .ifHallRigthNoMessage {
+          color: #CCCCCC;
+          font-size: 32px;
+          font-weight: bold;
           text-align: center;
-          cursor: pointer;
-          border-bottom: 1px solid #E9EDF7;
-        }
-      }
-    }
-  }
-  //不同的消息类型
-  //发送文件
-  .messageTypeFile {
-    width: 283px;
-    background: #fff;
-    border-radius: 16px;
-    border: 1px solid #E9EDF7;
-    .messageTypeFileTop{
-      border-bottom: 1px solid #E9EDF7;
-      .messageTypeFileSize {
-        padding: 10px 20px 10px 20px;
-      }
-      .messageTypeFileInfo {
-        display: flex;
-        align-items: center;
-        padding:20px 20px 0 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%;
+          height: 740px;
+          line-height: 740px;
         }
-      } 
-      .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;
+        .userName {
+          font-size: 20px;
           color: #333;
-          margin-bottom: 5px;
-        }
-        .messageGroupInfoTextTxt {
-          font-size: 12px;
-          color: #999;
-          line-height: 18px;
+          font-weight: bold;
         }
-      }
-    }
-    .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;
-      .searchUserBox {
-        .searchNameEnglish {
-          font-size: 18px;
-          color: #999;
-          padding: 30px 0 20px 0;
+        .ifNotice {
+          padding-bottom: 60px !important;  
         }
-        .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;
-          }
-        }
-      }
-    }
-    .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;
-        display: flex;
-        flex-wrap: wrap;
-        .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;
-            }
-            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;
-    }
-    .fileWindowMessageItemBox {
-      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 {
+        .UserNameBox {
           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;
-        }
-      }
-    }
-    //文件列表
-    .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;
+          padding: 40px 30px 30px 30px;
+          border-bottom: 1px solid #E7E7E7;
+          position: relative;
+          .moreIcon {
+            cursor: pointer;
           }
-        }
-        .fileWindowFlieItemMain {
-          flex: 1;
-          .fileWindowFlieItemTitle {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
+          .groupNotice {
+            position: absolute;
+            height: 40px;
+            line-height: 40px;
             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;
+            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;
           }
         }
       }
     }
-    //图片列表
-    .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;
+    //弹出框底部按钮
+    .footerButtonBox {
+      padding-top: 40px;
+      text-align: center;
+    }
+    .friendWindowText {
+      font-size: 16px;
+      color: #333;
+      span {
+        color: #5570F1;
+        font-weight: bold;
       }
     }
-    //日期搜索
-    .fileWindowDateBox {
-      width: 100%;
-      padding: 30px 0;
+    //表单微调 start------------------------------------------------------------>*/
+    ::v-deep .custom-form-item > .el-form-item__label {
+      line-height: 140px !important;
     }
-    .fileWindowDateButton {
-      margin-left: 10px;
+    ::v-deep .custom-textarea .el-textarea__inner {
+      resize: none; /* 禁止用拖拽调整大小 */
     }
-    //群成员搜索
-    .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;
-              }
-            }
-          }
-        }
-      }
+    ::v-deep .custom-align-right .el-form-item__label {
+      text-align: right; /* 设置标签文字右对齐 */
     }
-  }
-  //添加用户弹出框
-  .messageFormBox {
-    .messageFormTitle {
-      font-size: 18px;
-      padding-bottom: 20px;
+    ::v-deep .el-select-group__title {
+      color: #909399;
     }
-    .messageFormInput {
-      margin-bottom: 30px;
+    ::v-deep .el-select {
+      width: 100% !important;
     }
-  }
-  //弹出框底部按钮
-  .footerButtonBox {
-    padding-top: 40px;
-    text-align: center;
-  }
-  //加入群聊弹出框
-  .addGroupWindow {
-    .addGroupWindowImg {
-      img {
-        width:58px;
-        height: 58px;
-      }
-      text-align: center;
-      font-size: 18px;
-      color: #333;
+    ::v-deep .el-tabs__active-bar{
+      height: 1px !important;
     }
-    .addGroupWindowTitle {
-      font-size: 18px;
-      color: #333;
-      text-align: center;
-      padding: 20px 0 40px 0;
+    ::v-deep .el-tabs__nav-wrap::after {
+      height:1px !important;
     }
-    .addGroupWindowText {
-      font-size: 12px;
-      color: #999;
-      text-align: center;
+    ::v-deep .el-tabs__header {
+      margin-bottom: 0 !important;
     }
-  }
-  //表单微调 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>
+  </style>
+  

src/views/chat/hall.vue

@@ -1,2222 +1,4242 @@
 <template>
-  <div class="mainBox">
-    <div class="hallBox">
-      <div class="hallLeft">
-        <!--添加好友 start------------------------------------------>
-        <hallTitle :name="tableTitleName" @addUser="creatGroup" />
-        <!--添加好友 end------------------------------------------>
-        <!--搜索 start------------------------------------------>
-        <div class="searchBox">
-          <el-input
-            placeholder="请输入内容"
-            prefix-icon="el-icon-search"
-            v-model="searchConversation">
-          </el-input>
-        </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">
-              </div>
-              <div class="userInfo">
-                <div class="userName">
-                  <div class="userNameText">{{item.user_name}}</div>
-                  <div class="userMessageNum">{{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">{{item.num}}</div>
-                </div>
-              </div>
+    <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------------------------------------------>
-          <!-- <div :class="['userItem', item.status === 1 ? 'active' : '']" v-for="(item,index) in groupList" :key="item.id" @click="selectGroup(item)">
-            <div class="userAvatar">
-              <img src="@/assets/chat/user/group.jpg" alt="">
-            </div>
-            <div class="userInfo">
-              <div class="userName">
-                <div class="userNameText">{{item.group_name}}</div>
-                <div class="userMessageNum">{{item.max_num > 99 ? '99+' : item.max_num }}</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> -->
-          <!--群聊 end------------------------------------------>
-        </div>
-      </div>
-      <!--右侧菜单 start------------------------------------------>
-      <div class="hallRight" v-if="ifNoMessage==true">
-        <div class="ifHallRigthNoMessage">恒星管理平台</div>
-      </div>
-      <div class="hallRight" v-else>
-        <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}}</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'">
-                <div class="otherUserIcon">
-                  <img :src="item.receiver_avatar">
-                </div>
-                <div class="otherUserMessageText">
-                  {{item.content}}
+            <div class="searchFriendBox" v-if="searchConversationStatus">
+              <div class="searchFriendClose">
+                <div @click="closeSearchConversation" class="rightSlideBoxCloseIcon">
+                  <i class="el-icon-close"></i>
                 </div>
               </div>
-              <!--文字消息类型 我-->
-              <div class="meUserMessage" v-if="item.action=='said'">
-                <div class="meUserMessageText">
-                  {{item.content}}
+              <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="meUserIcon">
-                  <img :src="item.user_avatar">
+                <div class="searchFriendAvatar" v-else>
+                  <img src="@/assets/chat/user/group.jpg">
                 </div>
-              </div>
-            </div>
-            <!-- 文件类型
-            <div class="meUserMessage">
-              <div class="meUserMessageText">
-                <div class="messageTypeFile">
-                  <div class="messageTypeFileTop">
-                    <div class="messageTypeFileInfo">
-                      <div class="messageTypeFileTitle">文件标题文件标题文件标题文件标题文件标题文件标题文件标题.doc</div>
-                      <div class="messageTypeFileIcon">
-                        <img src="@/assets/chat/file.png" alt="">
-                      </div>
-                    </div>
-                    <div class="messageTypeFileSize">20kb</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="messageTypeFileLogo">恒星管理平台</div>
+                  <div class="searchFriendPhone" v-if="selectConversationItem.group_name==null">账号：{{selectConversationItem.user_name}}</div>
+                  <div class="searchFriendPhone" v-else>多人群组</div>
                 </div>
               </div>
-              <div class="meUserIcon">
-                <img src="@/assets/chat/user/user.png" alt="">
+              <div class="searchFriendButton">
+                <el-button type="primary" @click="selectConversation(selectConversationItem)">发送消息</el-button>
               </div>
-            </div> -->
-
-            <!-- 图片类型
-            <div class="meUserMessage">
-              <div class="meUserMessageText">
-                <div class="messageTypeImage">
-                  <img src="@/assets/chat/user/user.png" alt="">
+            </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>
-              <div class="meUserIcon">
-                <img src="@/assets/chat/user/user.png" alt="">
-              </div>
-            </div> -->
-
-            <!--发名片
-            <div class="meUserMessage">
-              <div class="meUserMessageText">
-                <div class="messageTypeCard">
-                  <div class="messageTypeCardTop">
-                    <div class="messageTypeCardIcon">
-                      <img src="@/assets/chat/user/user.png">
-                    </div>
-                    <div class="messageTypeCardName">用户名称</div>
-                  </div>
-                  <div class="messageTypeCardText">
-                    个人名片
+                <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="meUserIcon">
-                <img src="@/assets/chat/user/user.png" alt="">
-              </div>
-            </div> -->
-            
-            <!-- <div class="newUserStatus">
-              <div class="newUserStatusText">
-                <span>"</span>
-                <span class="newUserStatusTextName">新用户新用户新用户新用户</span>
-                <span>"加入了群聊</span>
-              </div>
-            </div> -->
-
-            <!--群聊邀请-->
-            <div class="meUserMessage">
-              <div class="meUserMessageText">
-                <div class="messageGroupInvite" @click="openGroupInviteWindow">
-                  <div class="messageGroupInviteTop">
-                    <div class="messageGroupInviteIcon">
-                      <img src="@/assets/chat/user/group.jpg">
-                    </div>
-                    <div class="messageGroupInfoText">
-                      <div class="messageGroupInfoTextTitle">邀请你加入群聊</div>
-                      <div class="messageGroupInfoTextTxt">您的好友"XX"邀请你加入群聊"XX",进入可查看群聊</div>
-                    </div>
-                  </div>
-                  <div class="messageGroupInviteText">
-                    群聊名片
+              <!--群聊-->
+              <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 class="meUserIcon">
-                <img src="@/assets/chat/user/user.png">
-              </div>
             </div>
-
+            <!--会话列表 end------------------------------------------>
           </div>
-          <div class="sendMessageBox">
-            <div class="sendMessageTools">
-              <img src="@/assets/chat/send_img.png">
-              <img src="@/assets/chat/send_file.png">
-              <img src="@/assets/chat/send_message.png" @click="fileWindowStatus=true">
-            </div>
-            <div class="sendMessageInput">
-              <el-input
-                type="textarea"
-                placeholder="请输入内容"
-                v-model="userMessage"
-                :rows="6"
-                resize="none"
-                maxlength="200"
-              >
-              </el-input>
-            </div>
-            <div class="sendMessageButton">
-              <el-button type="primary" size="medium">发送 <i class="el-icon-position"></i></el-button>
+        </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>
-          <!--右侧菜单 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>
+          <!--加载中 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 class="rightSlideSearch">
-              <div class="searchBox">
-                <el-input
-                  placeholder="请输入内容"
-                  prefix-icon="el-icon-search"
-                  v-model="searchUser">
-                </el-input>
-              </div>
-            </div> -->
-            <div class="rightSlideUserBox">
-              <div class="rightSlideUserItem" v-for="item in groupUserList" :key="item.user_id">
-                <div class="rightSlideUserItemIcon">
-                  <span class="el-dropdown-link">
-                    <img :src="item.avatar">
-                  </span>
+          </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="rightSlideUserItemName">
-                  {{item.user_name}}
+                <!--文字消息类型 我-->
+                <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="rightSlideUserItemMore">
-                  <div class="rightSlideUserItemMoreMain">
-                    <div class="rightSlideUserItemMoreMainIcon">
-                      <img src="@/assets/chat/user/user.png">
+                <!-- 图片类型 我-->
+                <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 class="rightSlideUserItemMoreMainInfo">
-                      <div class="rightSlideUserItemMoreMainInfoTop">
-                        <div class="rightSlideUserItemMoreUserName">
-                          <div>用户名</div>
-                          <div class="rightSlideUserItemMoreUserMore">
-                            <img src="@/assets/chat/boy.png">
+                  </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="rightSlideUserItemMoreUserMoreIcon">
-                          <img src="@/assets/chat/fi_more.png">
-                        </div>
+                        <!-- <div class="messageTypeFileSize">20kb</div> -->
                       </div>
-                      <div class="rightSlideUserItemMoreNumber">
-                        账号：15210211200
+                      <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="rightSlideUserItemMoreLine">
-                    <div class="rightSlideUserItemMoreLineItem">
-                      <div class="rightSlideUserItemMoreTitle">备注</div>
-                      <div class="rightSlideUserItemMoreText">
-                        用户名
-                        <i class="el-icon-edit"></i>
+                  <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 class="rightSlideUserItemMoreLineItem">
-                      <div class="rightSlideUserItemMoreTitle">共同群聊</div>
-                      <div class="rightSlideUserItemMoreText">0个</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 class="rightSlideUserItemMoreLineItem">
-                      <div class="rightSlideUserItemMoreTitle">添加方式</div>
-                      <div class="rightSlideUserItemMoreText">通过账号添加</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 class="rightSlideUserItemMoreLineButton">
-                      <div class="rightSlideUserItemMoreLineGroup">
-                        <img src="@/assets/chat/sendmessage.png">
-                        <div>发消息</div>
+                  </div>
+                  <div class="meUserIcon">
+                    <img :src="item.user_avatar" v-if="item.user_avatar!=null&&item.user_avatar!=''">
+                    <img src="@/assets/chat/user/admin.png" v-else>
+                  </div>
+                </div>
+                <!--邀请加群 对方-->
+                <div class="otherUserMessage" v-if="item.action=='recieved'&&Number(item.msg_type)==6">
+                  <div class="otherUserIcon">
+                    <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
+                    <img src="@/assets/chat/user/admin.png" v-else>
+                  </div>
+                  <div class="otherUserMessageText">
+                    <div class="messageGroupInvite" @click="openGroupInviteWindow(item)">
+                      <div class="messageGroupInviteTop">
+                        <div class="messageGroupInviteIcon">
+                          <img src="@/assets/chat/user/group.jpg">
+                        </div>
+                        <div class="messageGroupInfoText">
+                          <div class="messageGroupInfoTextTitle">邀请你加入群聊</div>
+                          <div class="messageGroupInfoTextTxt">{{item.content.split(',')[0]}}</div>
+                        </div>
+                      </div>
+                      <div class="messageGroupInviteText">
+                        点击加入
                       </div>
                     </div>
                   </div>
-                </div> -->
+                </div>
+  
               </div>
-
-              <div class="rightSlideUserItem">
-                <div class="rightSlideUserItemIcon">
-                  <div class="addUserIcon">
-                    <i class="el-icon-plus"></i>
+              <!-- <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="rightSlideUserItemName">
-                  添加
+                <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>
-            <!-- <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="">
+            <!--右侧菜单 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>
-              <!-- <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>
+  
+              <!--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>
-            <!--聊天记录 end------------------------------------------------------------>
-            <!--群聊设置 start------------------------------------------------------------>
-            <div class="rightSlideFunction">
-              <div class="groupSystem">
-                <div class="groupChatSystem">
-                  <div class="groupChatTitle">群聊名称</div>
-                  <div class="groupChatText" @click="editGroupNameWindow=true">
-                    {{this.messageTitle}}
+              </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="groupChatSystem">
-                  <div class="groupChatTitle">群公告</div>
-                  <div class="groupChatText" v-if="this.groupProfile!=''" @click="editGroupNoticeWindow=true">
-                    {{this.groupProfile}}
+                <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="groupChatText" v-else @click="editGroupNoticeWindow=true">
-                    暂无群公告
+                  <!-- <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="groupChatSystem">
-                  <div class="groupChatTitle">我在本群的昵称</div>
-                  <div class="groupChatText">
-                    仅群主可修改
+                <!-- <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>
-              <!-- <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>
+              <!--聊天记录 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>
-            <!--群聊设置 end------------------------------------------------------------>
-            <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>
+          <!--右侧菜单 end------------------------------------------>
         </div>
-        <!--右侧菜单 end------------------------------------------>
       </div>
-    </div>
-    <!--大厅 end------------------------------------------------------------>
-
-    <!--添加群组弹出框 start------------------------------------------------------------>
-    <el-dialog :visible.sync="groupWindowStatus" :close-on-click-modal="false" width="1028px">
-      <div class="searchWindow">
-        <div class="searchWindowLeft">
-          <el-input
-            placeholder="请输入内容"
-            prefix-icon="el-icon-search"
-            v-model="searchGroup">
-          </el-input>
-          <!--搜索用户 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"></el-checkbox>
-              <img :src="item.avatar">
-              <div class="searchUserName" v-if="item.remark!=null">{{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">
-                <div class="searchWindowDeleteUser" @click="cancelSelectFriends(item.id)">
-                  <i class="el-icon-close"></i>
+      <!--大厅 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>
-              <div class="searchWindowUserName" v-if="item.remark!=null">{{item.remark}}</div>
-              <div class="searchWindowUserName" v-else>{{item.user_name}}</div>
+              <!--搜索用户弹出框 end------------------------------------------------------------>
             </div>
-          </div>
-          <!--分享名片 start------------------------------------------------------------>
-          <!-- <div class="shareCardBox">
-            <div class="shareCardTitle">[名片]用户名称</div>
-            <div class="shareCardInput">
-              <el-input v-model="userCardMessage" placeholder="给用户留言"></el-input>
+            
+            <!--搜索用户 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>
-          </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>
+            <!--搜索用户 end------------------------------------------------------------>
           </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">
-          </el-input>
-        </div>
-        <!--聊天记录选项卡 start------------------------------------------------------------>
-        <el-tabs v-model="activeName">
-          <el-tab-pane label="全部" name="all">
-            <!--文字消息 start------------------------------------------------------------>
-            <!-- <div class="fileWindowMessageTime">2024-11-10</div> -->
-            <div class="fileWindowMessageItemBox" v-for="item in chatrecords">
-              <div class="fileWindowMessageItemIcon">
-                <img :src="item.receiver_avatar">
-              </div>
-              <div class="fileWindowMessageItem">
-                <div class="fileWindowMessageItemInfo">
-                  <div class="fileWindowMessageItemName">{{item.receiver_id_name}}</div>
-                  <div class="fileWindowMessageItemTime">{{item.updated_at}}</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="fileWindowMessageItemText">{{item.content}}</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>
-            <!--文字消息 end------------------------------------------------------------>
-            <!--文件消息 start------------------------------------------------------------>
-            <!-- <div class="fileWindowMessageTime">2024-11-10</div>
-            <div class="fileWindowMessageItemBox">
-              <div class="fileWindowMessageItemIcon">
-                <img src="@/assets/chat/user/user.png" alt="">
+            <!--分享名片 start------------------------------------------------------------>
+            <!-- <div class="shareCardBox">
+              <div class="shareCardTitle">[名片]用户名称</div>
+              <div class="shareCardInput">
+                <el-input v-model="userCardMessage" placeholder="给用户留言"></el-input>
               </div>
-              <div class="fileWindowMessageItem">
-                <div class="fileWindowMessageItemInfo">
-                  <div class="fileWindowMessageItemName">用户名称</div>
-                  <div class="fileWindowMessageItemTime">12:40</div>
-                </div>
-                <div class="messageTypeFile">
-                  <div class="messageTypeFileTop">
-                    <div class="messageTypeFileInfo">
-                      <div class="messageTypeFileTitle">文件标题文件标题文件标题文件标题文件标题文件标题文件标题.doc</div>
-                      <div class="messageTypeFileIcon">
-                        <img src="@/assets/chat/file.png" alt="">
+            </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 class="messageTypeFileSize">20kb</div>
                   </div>
-                  <div class="messageTypeFileLogo">恒星管理平台</div>
-                </div>
-              </div>
-            </div> -->
-            <!--文件消息 end------------------------------------------------------------>
-            <!--图片消息 start------------------------------------------------------------>
-            <!-- <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="messageTypeImage">
-                  <img src="@/assets/chat/user/user.png" alt="">
-                </div>
-              </div>
-            </div> -->
-            <!--图片消息 end------------------------------------------------------------>
-          </el-tab-pane>
-          <el-tab-pane label="文件" name="file">
-            <div class="fileWindowFlieBox">
-              <div class="fileWindowFlieItem">
-                <div class="fileWindowFlieItemIcon">
-                  <img src="@/assets/chat/file.png">
-                </div>
-                <div class="fileWindowFlieItemMain">
-                  <div class="fileWindowFlieItemTitle">
-                    <div>
-                      文件标题文件标题文件标题.dox
+                  <!--文字消息 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="fileWindowFlieItemTime">
-                      12:40
+                    <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 class="fileWindowFlieInfo">
-                    <div>用户名</div>
-                    <div>19.4k</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>
-              <div class="fileWindowFlieItem">
-                <div class="fileWindowFlieItemIcon">
-                  <img src="@/assets/chat/file.png">
-                </div>
-                <div class="fileWindowFlieItemMain">
-                  <div class="fileWindowFlieItemTitle">
-                    <div>
-                      文件标题文件标题文件标题.dox
+              
+            </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="fileWindowFlieItemTime">
-                      12:40
+                    <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 class="fileWindowFlieInfo">
-                    <div>用户名</div>
-                    <div>19.4k</div>
-                  </div>
                 </div>
+                <!--文件消息 end-->
               </div>
-            </div>
-          </el-tab-pane>
-          <el-tab-pane label="图片" name="img">
-            <div class="fileWindowMessageTime">2024-11-10</div>
-            <div class="fileWindowImageBox">
-              <div><img src="@/assets/chat/user/user.png"></div>
-              <div><img src="@/assets/chat/user/user.png"></div>
-              <div><img src="@/assets/chat/user/user.png"></div>
-              <div><img src="@/assets/chat/user/user.png"></div>
-              <div><img src="@/assets/chat/user/user.png"></div>
-            </div>
-            <div class="fileWindowMessageTime">2024-11-11</div>
-            <div class="fileWindowImageBox">
-              <div><img src="@/assets/chat/user/user.png"></div>
-            </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">
+              <!--图片消息 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="@/assets/chat/user/user.png" alt="">
+                    <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">用户名称</div>
-                      <div class="fileWindowMessageItemTime">12:40</div>
+                      <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 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>
+              <!--图片消息 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 class="searchNameEnglish">B</div>
-                    <div class="searchUserItem">
-                      <img src="@/assets/chat/user/user.png">
-                      <div class="searchUserName">B农贸站群长</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>
-            </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>
+            </el-tab-pane> -->
+          </el-tabs>
+          <!--聊天记录选项卡 end------------------------------------------------------------>
         </div>
-        <div class="footerButtonBox">
-          <el-button type="info">取消</el-button>
-          <el-button type="primary">确定</el-button>
+      </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>
-      </div>
-    </el-dialog>
-    <!--添加用户弹出框 end------------------------------------------------------------>
-
-    <!--群公告弹出框 start------------------------------------------------------------>
-    <el-dialog :visible.sync="editGroupNoticeWindow" title="编辑群公告" :close-on-click-modal="false" width="420px">
-      <div>
+      </el-dialog>
+      <!--添加用户弹出框 end------------------------------------------------------------>
+  
+      <!--群公告弹出框 start------------------------------------------------------------>
+      <el-dialog :visible.sync="editGroupNoticeWindow" title="编辑群公告" :close-on-click-modal="false" width="420px">
         <div>
-          <el-input type="textarea" resize="none" v-model="groupProfile" placeholder="请输入"></el-input>
-        </div>
-        <div class="footerButtonBox">
-          <el-button type="info" @click="editGroupNoticeWindow=false">取消</el-button>
-          <el-button type="primary" @click="editGroupNotice">确定</el-button>
+          <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>
-      </div>
-    </el-dialog>
-    <!--群公告弹出框 end------------------------------------------------------------>
-
-    <!--群名称弹出框 start------------------------------------------------------------>
-    <el-dialog :visible.sync="editGroupNameWindow" title="编辑群名称" :close-on-click-modal="false" width="420px">
-      <div>
+      </el-dialog>
+      <!--群公告弹出框 end------------------------------------------------------------>
+  
+      <!--查看群公告 start------------------------------------------------------------>
+      <el-dialog :visible.sync="groupProfileWindow" title="群公告详情" :close-on-click-modal="false" width="420px">
         <div>
-          <el-input type="textarea" resize="none" v-model="messageTitle" placeholder="请输入"></el-input>
+          <div class="groupProfileBox">
+            {{groupProfile}}
+          </div>
+          <div class="footerButtonBox">
+            <el-button type="info" @click="groupProfileWindow=false">关闭</el-button>
+          </div>
         </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="">
+      </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>
-        <div class="addGroupWindowTitle">某某群聊</div>
-        <div class="addGroupWindowText">某某好友"用户名称"邀请您加入"某某群聊"，进入可查看群消息</div>
-        <div class="footerButtonBox">
-          <el-button type="info" @click="addGroupWindow = false">取消</el-button>
-          <el-button type="primary" @click="joinGroup">确定</el-button>
+      </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>
-      </div>
-    </el-dialog>
-    <!--加入群聊弹出框 end------------------------------------------------------------>
-
-    <!-- <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 }}
+      </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>
-              <div v-if="conversation.talk_type==2">
-                <el-avatar :src=conversation.group_avatar>{{ conversation.group_name }}</el-avatar> {{ conversation.group_name }}
+              <!--搜索用户弹出框 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>
-            </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 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  v-else>
-                  <el-avatar :src=message.user_avatar>{{ message.nickname }}</el-avatar>{{ message.content }}
+              </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> 
+                <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 v-else>
-              请选择一个会话
+            <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>
-          </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>
+          </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>
-      </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';
-
-
-export default {
-  components: {
-    hallTitle
-  },
-  data() {
-    return {
-      //1.全局配置 start---------------------------------------->
-      myUserId:'',//我的用户id
-      tableTitleName:'聊天列表',//左侧菜单标题
-      messageTitle:'',//当前的聊天名称
-      groupProfile:'',//当前的群公告
-      //1.全局配置 end---------------------------------------->
-
-      //2.会话列表 start---------------------------------------->
-      conversationList:[],//会话列表
-      chatrecords:[],//聊天记录
-      ifTop:false,//是否为置顶
-      searchConversation:'',//搜索会话
-      //2.会话列表 end---------------------------------------->
-
-      //3.聊天记录 start---------------------------------------->
-      ifNoMessage:true,//如果没有选择任何聊天记录
-      searchChatRecords:"",//搜索聊天记录
-      userMessage:'',//用户发送的消息
-      fileWindowStatus:false,//聊天记录弹出框是否显示
-      activeName: 'all',//聊天记录选项卡
-      time:'',//按照时间搜索
-      //3.聊天记录 end---------------------------------------->
-
-      //4.群聊 start---------------------------------------->
-      groupWindowStatus:false,//添加聊天群组出框是否显示
-      editGroupNoticeWindow:false,//编辑群公告弹出框
-      editGroupNameWindow:false,//编辑群名称弹出框
-      addGroupWindow:false,//加入群聊弹出框
-      groupId:'',//准备加入群聊的id
-      friendsList:[],//好友列表
-      searchGroup:'',//搜索群聊
-      groupUserList:[],//群成员列表
-      groupInfo:{},//群设置信息
-      creatorId:'',//群主id
-      //4.群聊 end---------------------------------------->
-      
-      //5.用户详情 start---------------------------------------->
-      rightSlideBoxShow:false,//右侧菜单是否显示
-      searchUser:'',//搜索用户
-      //5.用户详情 end---------------------------------------->
-
-      //6.名片 start---------------------------------------->
-      userCardMessage:'',//用户留言
-      //6.名片 end---------------------------------------->
-
-      //7.加好友 start---------------------------------------->
-      addUserWindowStatus:false,//添加用户弹出框是否显示
-      form:{
-        //好友申请
-        addUserForm:{
-          notes:"",//备注
-          nickname:"",//修改昵称
-        }
-      },
-      //7.加好友 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;
-      }).catch(() => {
-        this.$message.error('获取会话列表失败!')
-      })
+      </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
     },
-    //1.2选择会话
-    selectConversation(item){
-      //清理单聊状态
-      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;
+    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:"",//文件名
+          }
         }
-      });
-      //console.log(this.conversationList)
-      this.getchatrecords(item.receiver_id);
-      //关闭没有选择任何聊天的界面
-      this.ifNoMessage = false;
-      //选择单聊的时候把群聊的id清空
-      this.groupId = '';
-    },
-    //1.3获取聊天记录
-    getchatrecords(user_id){
-      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)
-      }).catch(() => {
-        this.$message.error('获取聊天记录失败!')
-      })
-    },
-    //1.会话列表 end---------------------------------------->
-
-    //2.群聊 start---------------------------------------->
-    //2.1打开群聊创建窗口
-    creatGroup(){
-      this.groupWindowStatus = true;
-      //获得好友列表
-      this.getFriendsList();
-    },
-    //2.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('获取好友列表失败!')
-      })
+        //8.发消息 end---------------------------------------->
+        
+        //老刘的代码 start---------------------------------------->
+        // activeConversation: null,
+        // newMessage: '',
+        // conversations: [],
+        // ws: null,
+        // contextMenuVisible: false, // 控制右键菜单的显示
+        // contextMenuX: 0, // 右键菜单的 X 坐标
+        // contextMenuY: 0, // 右键菜单的 Y 坐标
+        // selectedConversation: null // 选中的对话
+        //老刘的代码 end---------------------------------------->
+      };
     },
-    //2.3取消选择好友
-    cancelSelectFriends(id){
-      this.friendsList.forEach(item => {
-        if(item.id == id){
-          item.status = false;
+    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;
+          }
         }
-      });
-    },
-    //2.4清空并关闭创建群弹出框
-    clearCreatGroupWindow(){
-      this.friendsList.forEach(item => {
-        item.status = false;
-      });
-      this.groupWindowStatus = false;
-    },
-    //2.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.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.7选择群聊
-    selectGroup(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.8获取群聊消息
-    getGroupChatRecords(group_id){
-      this.$store.dispatch('chat/getGroupChatRecords',{group_id:group_id}).then(res=> {
-        console.log(res)
-        this.chatrecords = res.data.data;
-        //滚动条滚动到底部
-        this.scorllBottom();
-
-      }).catch(() => {
-        this.$message.error('获取群设置信息失败!')
-      })
-    },
-    //2.9打开群设置窗口
-    openGroupSystem(){
-      this.rightSlideBoxShow = !this.rightSlideBoxShow;
-    },
-    //2.10获取群成员
-    getGroupMember(group_id){
-      this.$store.dispatch('chat/getGroupMembers',{group_id:group_id}).then(res=> {
-        this.groupUserList = res.data;
-      }).catch(() => {
-        this.$message.error('获取群成员信息失败!')
-      })
-    },
-    //2.11 获取群设置信息
-    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;
-        if(res.data.profile==null){
-          this.groupProfile = "暂无群公告"
+        //如果没有找到会话 就提示没有找到
+        if(!flag){
+          this.$message.error('没有找到该会话!')
         }else{
-          this.groupProfile = res.data.profile;
+          this.searchConversationStatus = true;
         }
-        
-      }).catch(() => {
-        this.$message.error('获取群设置信息失败!')
-      })
-    },
-    //2.12打开群聊邀请窗口
-    openGroupInviteWindow(id){
-      this.addGroupWindow = true;
-    },
-    //2.13加入群聊
-    joinGroup(){
-      this.$store.dispatch('chat/joinGroup',{group_id:this.groupId}).then(res=> {
-        this.$message.success('加入群聊成功!')
-        this.addGroupWindow = false;
-      }).catch(() => {
-        this.$message.error('加入群聊失败!')
-      })
-    },
-    //2.14退出群聊
-    closeGroup(){
-      this.$confirm('将要退出该群聊，确定吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning' 
-      }).then(() => {
-        //this.groupId
-        this.$store.dispatch('chat/quitGroup',{group_id:this.groupId}).then(res=> {
-          this.$message.success('退出群聊成功!')
-          //关闭右侧菜单
+      },
+      //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.ifNoMessage = true;
-          //重新请求会话列表
+          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('群聊退出失败!')
+          this.$message.error('创建群聊失败!')
         })
-      }).catch(() => {
-        this.$message.warning('已取消退出')
-      });
-    },
-    //2.15删除群聊
-    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;
-          //重新请求会话列表
+      },
+      //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('解散群聊失败!')
+          this.$message.error('修改群聊名称失败!')
         })
-      }).catch(() => {
-        this.$message.warning('已取消解散')
-      });
-    },
-    //2.15编辑群名称
-    editGroupName(){
-      let data = {
-        group_id:this.groupId,
-        group_name:this.messageTitle//群名称
+      },
+      //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！")
+        }
       }
-      this.$store.dispatch('chat/updateGroup',data).then(res=> {
-        this.$message.success('成功添加群公告')
-        //重新获取群详情
-        this.getGroupSystem(this.groupId)
-        this.editGroupNoticeWindow = false;
-      }).catch(() => {
-        this.$message.error('编辑群公告失败!')
-      })
+      //5.websocket会话 end---------------------------------------->
     },
-    //2.16编辑群公告
-    editGroupNotice(){
-      let data = {
-        group_id:this.groupId,
-        profile:this.groupProfile//群公告
-      }
-      this.$store.dispatch('chat/updateGroup',data).then(res=> {
-        this.$message.success('成功添加群公告')
-        //重新获取群详情
-        this.getGroupSystem(this.groupId)
-        this.editGroupNameWindow = false;
-      }).catch(() => {
-        this.$message.error('编辑群公告失败!')
-      })
+    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---------------------------------------->
     },
-    //2.群聊 end---------------------------------------->
-
-    //3.全局应用 start---------------------------------------->
-    //3.1 滚动条滚动到底部
-    scorllBottom(){
-      //滚动条滚动到底部
-      this.$nextTick(() => {
-        const rightUserMessageBox = this.$refs.rightUserMessageBox;
-        if (rightUserMessageBox) {
-          rightUserMessageBox.scrollTop = rightUserMessageBox.scrollHeight;
+    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;
+                  }
+                }
+              }
+            }
+          }
         }
-      });
-    },
-    //3.全局应用 end---------------------------------------->
-    
-    //老刘的代码 start---------------------------------------->
-    // selectConversation(conversation) {
-    //   this.activeConversation = conversation;
-    // },
-    // sendMessage() {
-    //   if (this.newMessage.trim() !== '') {
-    //     //msg_type 消息类型  talk_type：聊天类型 1单聊 2群聊
-    //     const message = { 
-    //       msg_type:1,
-    //       talk_type:this.activeConversation.talk_type,
-    //       content:this.newMessage,
-    //       session_id:this.activeConversation.session_id,
-    //       msg_type:1,
-    //       receiver_id:this.activeConversation.user_id?this.activeConversation.user_id:this.activeConversation.group_id
-    //     };
-    //     // this.activeConversation.messages.push(message);
-    //     console.log("发送消息",this.ws,WebSocket.OPEN)
-    //     if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-    //       this.ws.send(JSON.stringify(message));
-    //     }
-    //     this.newMessage = '';
-    //   }
-    // },
-    // handleIncomingMessage(event) {
-    //   const message = JSON.parse(event.data);
-    //   console.log("监听消息：",message)
-    //   const conversation = this.conversations.find(conv => conv.session_id === message.session_id); // 假设所有消息都发送给Alice
-    //   if (conversation) {
-    //     conversation.messages.push(message);
-    //   }
-    // },
-    // //获取会话列表
-    // getTalkSessionList(){
-    //   let parames  = {
-    //     'page':1,
-    //     'pageSize':10
-    //   }
-    //   // this.$api.chat.getTalkSessionList(parames).then(res=>{
-    //   //     this.conversations =  res.data.row
-    //   // });
-    //   this.$store.dispatch('chat/getTalkSessionList',parames).then(res=> {
-    //     this.conversations =  res.data.row
-    //   }).catch(() => {
-    //     this.$message({
-    //       type: 'info',
-    //       message: '获取聊天记录失败！'
-    //     });
-    //   })
-    // },
-    // showContextMenu(event, conversation) {
-    //   this.contextMenuVisible = true; // 显示右键菜单
-    //   this.contextMenuX = event.clientX; // 获取鼠标 X 坐标
-    //   this.contextMenuY = event.clientY; // 获取鼠标 Y 坐标
-    //   this.selectedConversation = conversation; // 保存选中的对话
-    // },
-    // handleMenuCommand(command) {
-    //   switch (command) {
-    //     case 'view':
-    //       this.viewConversation(this.selectedConversation);
-    //       break;
-    //     case 'delete':
-    //       this.deleteConversation(this.selectedConversation);
-    //       break;
-    //     case 'edit':
-    //       this.editConversation(this.selectedConversation);
-    //       break;
-    //   }
-    //   this.contextMenuVisible = false; // 隐藏右键菜单
-    // },
-    // viewConversation(conversation) {
-    //   // 查看对话的逻辑
-    //   console.log('查看对话:', conversation);
-    // },
-    // deleteConversation(conversation) {
-    //   // 删除对话的逻辑
-    //   console.log('删除对话:', conversation);
-    // },
-    // editConversation(conversation) {
-    //   // 编辑对话的逻辑
-    //   console.log('编辑对话:', conversation);
-    // },
-    //老刘的代码 end---------------------------------------->
-  },
-  mounted() {
-    //1.获取会话列表
-    this.getConversationList();
-    //2.获取我的用户id
-    this.myUserId = this.$store.state.user.userid;
-
-    //老刘的代码 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 = URL.WebsocketUrl +"?token=" + adminToken;
-    // this.ws = new WebSocket(websocketNewUrl);
-    // this.ws.addEventListener('message', this.handleIncomingMessage);
-
-    // this.ws.addEventListener('close', function (event) {
-    //   // 连接关闭时执行的操作
-    //   console.log("关闭链接",event)
-    // });
-
-    // this.getTalkSessionList()
-    // // 监听全局点击事件以关闭右键菜单
-    // document.addEventListener('click', () => {
-    //   this.contextMenuVisible = false;
-    // });
-    //老刘的代码 end---------------------------------------->
-  },
-  beforeDestroy() {
-    // if (this.ws) {
-    //   this.ws.removeEventListener('message', this.handleIncomingMessage);
-    //   this.ws.close();
-    // }
-    // // 清理事件监听
-    // document.removeEventListener('click', () => {
-    //   this.contextMenuVisible = false;
-    // });
-  }
-};
-
-</script>
-
-<style scoped lang="less">
-  .hallBox {
-    display: flex;
-    margin: 30px;
-    //左侧
-    .hallLeft {
-      width: 420px;
-      background: #fff;
-      border-radius: 20px;
-      margin-right: 20px;
-      .searchBox {
-        padding-left: 25px;
-        padding-right: 25px;
-        padding-bottom: 20px;
       }
-      .userListBox {
-        padding: 15px 0;
-        overflow-y: auto;
-        height: 1000px;
-        .active {
-          background: #F5F7FD;
-          box-sizing: border-box;
-          border-right: 4px solid #5570F1 !important;
+      //右侧
+      .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;
+            }
+          }
         }
-        .userItem {
-          padding: 0 21px 0 25px;
-          height: 90px;
-          box-sizing: border-box;
-          border-right: 4px solid #fff;
-          cursor: pointer;
+        .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;
-          .flexItemBox{
-            width: 100%;
+          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;
-            .userAvatar {
+            .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: 58px;
-                height: 58px;
-                border-radius: 50%;
+                width: 40px;
+                height: 40px;
+                margin-right: 5px;
               }
             }
-            .userInfo {
-              flex: 1;
+          }
+          .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-left: 15px;
-              .userName {
+              padding: 20px 0 30px 0;
+              .searchFriendClose {
                 display: flex;
                 align-items: center;
-                justify-content: space-between;
-                //padding-bottom: 10px;
-                .userNameText {
-                  font-size: 18px;
-                  font-weight: bold;
+                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;
                 }
-                .userMessageNum {
-                  font-size: 12px;
+                .searchFriendLineContent{
+                  font-size: 16px;
                   color: #333;
-                  width: 24px;
-                  height: 24px;
-                  line-height: 24px;
-                  text-align: center;
+                  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%;
-                  background: #FFCC91;
-                  font-weight: bold;
                 }
+                .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;
               }
-              .userMessage {
+              .groupChatText {
+                width: 100%;
+                height: 20px;
+                overflow: hidden;
+                font-size: 18px;
+                color: #999;
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
-                .userMessageText {
-                  display: block;
-                  width: 240px;
-                  white-space: nowrap;
+                img {
+                  cursor: pointer;
+                }
+                .groupChatTextContent {
+                  width: 300px;
                   overflow: hidden;
                   text-overflow: ellipsis;
-                  font-size: 14px;
-                  color: #999999;
-                }
-                .userMessageTime {
-                  font-size: 14px;
-                  color: #999999;
+                  white-space: nowrap;
                 }
               }
             }
           }
+          .rightSlideFooterBox {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            div{
+              width: 33%;
+              text-align: center;
+              font-size: 16px;
+              color: #666;
+              cursor: pointer;
+              margin-top: 30px;
+              box-sizing: border-box;
+              border-right: 1px solid #E9EDF7;
+            }
+          }
+          .rightSlideFooter {
+            font-size: 18px;
+            color: #666;
+            padding: 30px 40px;
+            text-align: center;
+            cursor: pointer;
+            border-bottom: 1px solid #E9EDF7;
+          }
+          .isLast {
+            border-bottom: 0;
+            color: #999;
+          }
         }
       }
     }
-    //右侧
-    .hallRight {
-      flex: 1;
+    //不同的消息类型
+    //发送文件
+    .messageTypeFile {
+      width: 283px;
       background: #fff;
-      border-radius: 20px;
-      position: relative;
-      height: 1184px;
-      display: flex;
-      flex-direction: column;
-      .ifHallRigthNoMessage {
-        color: #CCCCCC;
-        font-size: 32px;
-        font-weight: bold;
-        text-align: center;
-        height: 1184px;
-        line-height: 1184px;
+      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;
+            }
+          }
+        }
       }
-      .userName {
-        font-size: 20px;
-        color: #333;
-        font-weight: bold;
+      .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;
       }
-      .ifNotice {
-        padding-bottom: 60px !important;  
+    }
+    //发送图片
+    .messageTypeImage {
+      width: 200px;
+      //height: 200px;
+      img {
+        max-width: 200px;
+        border-radius: 16px;
+        border: 1px solid #ECECEC;
       }
-      .UserNameBox {
+    }
+    //发送群聊
+    .messageGroupInvite {
+      background: #fff;
+      border-radius: 16px;
+      border: 1px solid #E9EDF7;
+      .messageGroupInviteTop {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 40px 30px 30px 30px;
-        border-bottom: 1px solid #E7E7E7;
-        position: relative;
-        .moreIcon {
-          cursor: pointer;
+        padding: 20px 20px 24px 20px;
+        .messageGroupInviteIcon {
+          margin-right: 15px;
+          img {
+            width: 58px;
+            height: 58px;
+            border-radius: 50%;
+          }
         }
-        .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;
+        .messageGroupInfoText {
+          .messageGroupInfoTextTitle {
+            font-size: 16px;
+            color: #333;
+            margin-bottom: 5px;
+          }
+          .messageGroupInfoTextTxt {
+            font-size: 12px;
+            color: #999;
+            line-height: 18px;
+          }
         }
       }
-      .rightPositionBox { 
-        flex: 1;
-        position: relative;
-        .rightUserMessageBox {
-          padding: 40px;
-          height: 760px;
-          box-sizing: border-box;
-          overflow-y: auto;
-          .timeBox {
-            width: 100%;
+      .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: center;
-            padding:0 0 30px 0; 
-            span {
-              border-radius: 8px;
-              display: block;
-              width: 80px;
-              height: 30px;
-              line-height: 30px;
-              font-size: 14px;
+            justify-content: flex-end;
+            padding-right: 10px;
+            padding-bottom: 10px;
+            .rightSlideBoxCloseIcon {
+              cursor: pointer;
+              width: 28px;
+              height: 28px;
+              line-height: 28px;
               text-align: center;
-              display: block;
-              background: #F4F5FA;
-              color: #999999;
+              background: #EFEFEF;
+              border-radius: 8px;
             }
           }
-          .newUserStatus {
-            width: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding:0 0 30px 0;
-            .newUserStatusText {
+          .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: 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%;
+              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;
               }
-            }
-            .otherUserMessageText {
-              border-radius: 16px;
-              padding: 16px;
-              font-size: 16px;
-              color: #fff;
-              background: #5570F1;
-              position: relative;
-              min-height: 50px;
-            }
-            .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%;
+              .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;
+                }
               }
             }
-            .meUserMessageText {
-              border-radius: 16px;
-              padding:16px;
-              font-size: 16px;
-              color:#333;
-              background: #FFEAD1;
-              position: relative;
-              min-height: 50px;
-              cursor: pointer;
+            .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;
+                }
+              }
             }
-            .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;
+            .searchFriendButton {
+              padding:40px 0 10px 0;
+              text-align: center;
+              .searchFriendButtonItem {
+                font-size: 14px;
+                color: #5570F1;
+                img {
+                  width: 30px;
+                  height: 30px;
+                  margin-bottom: 5px;
+                }
+              }
             }
           }
         }
-      }
-      //消息框
-      .sendMessageBox {
-        padding: 20px 40px;
-        border-top: 1px solid #E7E7E7;
-        box-sizing: border-box;
-        height: 276px;
-        .sendMessageTools {
-          img {
-            width: 36px;
-            height: 36px;
-            margin-right: 30px;
-            cursor: pointer;
+        .searchUserBox {
+          padding-top: 30px;
+          .searchNameEnglish {
+            font-size: 18px;
+            color: #999;
+            padding: 30px 0 20px 0;
           }
-        }
-        .sendMessageInput {
-          margin-top: 20px;
-        }
-        .sendMessageButton {
-          padding-top: 20px;
-          text-align: right;
-          button {
-            width: 120px;
-            height: 38px;
+          .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;
+            }
           }
         }
       }
-      //右侧菜单
-      .rightSlideBox {
-        width: 420px;
-        position: absolute;
-        right: 0;
-        top: 0;
-        background: #fff;
-        height: 100%;
-        box-shadow: -4px 0px 4px 0px rgba(0, 0, 0, 0.1); 
-        .rightSlideBoxClose {
-          padding: 20px 20px 0 20px;
-          display: flex;  
+      .searchWindowRight {
+        width: 690px;
+        .searchWindowRightTop {
+          display: flex;
           align-items: center;
           justify-content: space-between;
-          .rightSlideBoxCloseTitle {
+          padding: 0 30px 30px 30px;
+          .searchWindowRightTitle {
             font-size: 18px;
             color: #333;
           }
-          .rightSlideBoxCloseIcon {
-            cursor: pointer;
-            width: 28px;
-            height: 28px;
-            line-height: 28px;
-            text-align: center;
-            background: #EFEFEF;
-            border-radius: 8px;
+          .searchWindowRightNum {
+            font-size: 18px;
+            color: #999;
           }
         }
-        .rightSlideSearch {
-          padding: 30px 25px 0 25px;
-        }
-        .rightSlideUserBox {
-          box-sizing: border-box;
-          padding: 40px 40px 10px 40px;
+        .searchWindowUserList {
+          padding: 0 30px;
+          height: 400px;
           display: flex;
-          align-items: center;
           flex-wrap: wrap;
-          //border-bottom: 1px solid #E9EDF7;
-          .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;
-                
-              }
-              .addUserIcon {
-                width: 58px;
-                height: 58px;
-                line-height: 58px;
-                background: #F0F0F0;
-                border-radius: 50%;
-                text-align: center;
-              }
-            }
-            .rightSlideUserItemName {
-              width: 80px;
-              padding: 0 5px;
-              font-size: 16px;
+          align-items: flex-start;
+          align-content: flex-start;
+          .searchWindowUserItem {
+            width:20%;
+            text-align: center;
+            margin-bottom: 30px;
+            .searchWindowUserName {
+              font-size: 18px;
               color: #333;
-              margin-top: 10px;
-              text-align: center;
+              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;
         }
-        .rightLineBorder {
+        .historicalMessageBox {
           width: 100%;
+          display: flex;
+          align-items: flex-start;
+          padding: 30px 0 20px 0;
           border-bottom: 1px solid #E9EDF7;
         }
-        .rightSlideMore {
-          padding: 30px 40px;
-          font-size: 18px;
-          color: #999;
-          text-align: center
+        .fileWindowMessageItemIcon {
+          img {
+            width: 58px;
+            height: 58px;
+            border-radius: 50%;
+          }
+        }
+        .fileWindowMessageItemIcon {
+          padding-right: 15px;
         }
-        //聊天记录
-        .rightSlideFunction {
-          .rightSlideFunctionItem {
-            height: 80px;
+        .fileWindowMessageItem {
+          flex: 1;
+          .fileWindowMessageItemInfo {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            padding: 30px 40px;
-            border-bottom: 1px solid #E9EDF7;
-            cursor: pointer;
-            .rightSlideFunctionItemText {
+            padding-bottom: 20px;
+            .fileWindowMessageItemName {
               font-size: 18px;
               color: #333;
             }
-            .rightSlideFunctionItemIcon {
-              img {
-                width: 18px;
-                height: 18px;
-              }
+            .fileWindowMessageItemTime {
+              font-size: 14px;
+              color: #999;
             }
           }
+          .fileWindowMessageItemText {
+            font-size: 14px;
+            color: #999;
+          }
+          .fileWindowMessageItemImage {
+            width: 150px;
+            height: 150px;
+            border-radius: 16px;
+            border: 1px solid #ECECEC;
+          }
         }
-        //群聊设置
-        .groupSystem {
+      }
+      //文件列表
+      .fileWindowFlieBox {
+        .fileWindowFlieItem {
+          padding:30px 0 20px 0;
+          display: flex;
+          align-items: center;
           border-bottom: 1px solid #E9EDF7;
-          padding-bottom: 30px;
-          .groupChatSystem {
-            padding: 30px 40px 0 40px;
-            .groupChatTitle {
-              font-size: 18px;
+          .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: 15px;
+              margin-bottom: 6px;
             }
-            .groupChatText {
-              font-size: 18px;
+            .fileWindowFlieItemTime {
+              font-size: 14px;
+              color: #999;
+            }
+            .fileWindowFlieInfo {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              font-size: 12px;
               color: #999;
-              cursor: pointer;
             }
           }
         }
-        .rightSlideFooter {
-          font-size: 18px;
-          color: #CC5F5F;
-          padding: 30px 40px;
+      }
+      //图片列表
+      .fileWindowImageBox {
+        display: flex;
+        flex-wrap: wrap;
+        div {
+          width: 25%;
           text-align: center;
-          cursor: pointer;
-          border-bottom: 1px solid #E9EDF7;
+          padding: 20px 0 0 0;
         }
-        .isLast {
-          border-bottom: 0;
-          color: #999;
+        img {
+          width: 150px;
+          height: 150px;
+          border-radius: 16px;
+          border: 1px solid #ECECEC;
         }
       }
-    }
-  }
-  //不同的消息类型
-  //发送文件
-  .messageTypeFile {
-    width: 283px;
-    background: #fff;
-    border-radius: 16px;
-    border: 1px solid #E9EDF7;
-    .messageTypeFileTop{
-      border-bottom: 1px solid #E9EDF7;
-      .messageTypeFileSize {
-        padding: 10px 20px 10px 20px;
+      //日期���索
+      .fileWindowDateBox {
+        width: 100%;
+        padding: 30px 0;
       }
-      .messageTypeFileInfo {
+      .fileWindowDateButton {
+        margin-left: 10px;
+      }
+      //群成员搜索
+      .fileWindowGroupMain{
         display: flex;
-        align-items: center;
-        padding:20px 20px 0 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;
+        .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;
+                }
+              }
+            }
           }
         }
       }
     }
-    .messageTypeFileLogo {
-      padding:15px 20px;
+    //添加用户弹出框
+    .messageFormBox {
+      .messageFormTitle {
+        font-size: 18px;
+        padding-bottom: 20px;
+      }
+      .messageFormInput {
+        margin-bottom: 30px;
+      }
     }
-    .messageTypeFileSize {
-      font-size: 12px;
-      color: #999;
+    .imgZoomBox {
+      img {
+        width: 550px;
+      }
     }
-    .messageTypeFileLogo {
-      font-size: 12px;
-      color: #999;
+    //弹出框底部按钮
+    .footerButtonBox {
+      padding-top: 40px;
+      text-align: center;
     }
-  }
-  //发送名片
-  .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;
+    //加入群聊弹出框
+    .addGroupWindow {
+      .addGroupWindowImg {
         img {
-          width: 58px;
+          width:58px;
           height: 58px;
-          border-radius: 50%;
         }
-      } 
-      .messageTypeCardName {
-        font-size: 16px;
+        text-align: center;
+        font-size: 18px;
         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%;
-        }
+      .addGroupWindowTitle {
+        font-size: 18px;
+        color: #333;
+        text-align: center;
+        padding: 20px 0 40px 0;
       }
-      .messageGroupInfoText {
-        .messageGroupInfoTextTitle {
-          font-size: 16px;
-          color: #333;
-          margin-bottom: 5px;
-        }
-        .messageGroupInfoTextTxt {
-          font-size: 12px;
-          color: #999;
-          line-height: 18px;
-        }
+      .addGroupWindowText {
+        font-size: 12px;
+        color: #999;
+        text-align: center;
       }
     }
-    .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;
-      .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;
-          }
-        }
+    .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;
       }
-    }
-    .searchWindowRight {
-      width: 690px;
-      .searchWindowRightTop {
+      .shareCardRadioBox {
+        height: 50px;
         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;
+        justify-content: flex-start;
+        >.el-radio {
+          margin-right: 5px;
         }
       }
-      .searchWindowUserList {
-        padding: 0 30px;
-        height: 400px;
+      .shareCardItem{
         display: flex;
-        flex-wrap: wrap;
-        .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;
-            }
-            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;
+        align-items: center;
+        justify-content: flex-start;
+        .shareCardName {
+          font-size: 14px;
+          color: #333;
+          margin-left: 10px;
         }
-      }
-      .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;
-    }
-    .fileWindowMessageItemBox {
-      display: flex;
-      align-items: flex-start;
-      padding: 30px 0 20px 0;
-      border-bottom: 1px solid #E9EDF7;
-      .fileWindowMessageItemIcon {
         img {
-          width: 58px;
-          height: 58px;
+          width: 38px;
+          height: 38px;
           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;
-        }
-      }
     }
-    //文件列表
-    .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;
-          }
-        }
-      }
+    .groupProfileBox {
+      font-size: 16px;
+      color: #333;
+      min-height: 100px;
+      max-height: 300px;
+      overflow-y: auto;
+      overflow-x: hidden;
+      word-wrap: break-word;
     }
-    //图片列表
-    .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;
-      }
+  
+  
+    //表单微调 start------------------------------------------------------------>*/
+    ::v-deep .custom-form-item > .el-form-item__label {
+      line-height: 140px !important;
     }
-    //日期搜索
-    .fileWindowDateBox {
-      width: 100%;
-      padding: 30px 0;
+    ::v-deep .custom-textarea .el-textarea__inner {
+      resize: none; /* 禁止用拖拽调整大小 */
     }
-    .fileWindowDateButton {
-      margin-left: 10px;
+    ::v-deep .custom-align-right .el-form-item__label {
+      text-align: right; /* 设置标签文字右对齐 */
     }
-    //群成员搜索
-    .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;
-              }
-            }
-          }
-        }
-      }
+    ::v-deep .el-select-group__title {
+      color: #909399;
     }
-  }
-  //添加用户弹出框
-  .messageFormBox {
-    .messageFormTitle {
-      font-size: 18px;
-      padding-bottom: 20px;
+    ::v-deep .el-select {
+      width: 100% !important;
     }
-    .messageFormInput {
-      margin-bottom: 30px;
+    ::v-deep .el-tabs__active-bar{
+      height: 1px !important;
     }
-  }
-  //弹出框底部按钮
-  .footerButtonBox {
-    padding-top: 40px;
-    text-align: center;
-  }
-  //加入群聊弹出框
-  .addGroupWindow {
-    .addGroupWindowImg {
-      img {
-        width:58px;
-        height: 58px;
-      }
-      text-align: center;
-      font-size: 18px;
-      color: #333;
+    ::v-deep .el-tabs__nav-wrap::after {
+      height:1px !important;
     }
-    .addGroupWindowTitle {
-      font-size: 18px;
-      color: #333;
-      text-align: center;
-      padding: 20px 0 40px 0;
+    ::v-deep .el-tabs__header {
+      margin-bottom: 0 !important;
     }
-    .addGroupWindowText {
-      font-size: 12px;
-      color: #999;
-      text-align: center;
+    /* 添加样式以确保右键菜单的显示 */
+    .el-dropdown {
+      z-index: 2000; /* 确保右键菜单在其他元素之上 */
     }
-  }
-  //表单微调 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>
+  </style>
+  

src/views/chat/topicType.vue

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