0.0.28

0.0.28

src/views/chat/hall.vue

@@ -251,7 +251,7 @@
                 <i class="el-icon-close"></i>
               </div>
             </div>
-            <!-- <div class="rightSlideSearch">
+            <div class="rightSlideSearch">
               <div class="searchBox">
                 <el-input
                   placeholder="请输入内容"
@@ -259,7 +259,7 @@
                   v-model="searchUser">
                 </el-input>
               </div>
-            </div> -->
+            </div>
             <div class="rightSlideUserBox">
               <div class="rightSlideUserItem" v-for="item in groupUserList" :key="item.user_id">
                 <div class="rightSlideUserItemIcon">
@@ -414,11 +414,40 @@
     <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>
+          <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="closeAddGroupUserWindow" class="rightSlideBoxCloseIcon">
+                  <i class="el-icon-close"></i>
+                </div>
+              </div>
+              <div class="searchFriendItem">
+                <div class="searchFriendAvatar">
+                  <img :src="groupFriendSearchUser.avatar">
+                </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="groupSearchUser.status==false" type="primary" @click="addGroupUser(groupSearchUser)">添加</el-button>
+                <el-button v-else type="warning" @click="addGroupUser(groupSearchUser)">移除</el-button>
+              </div>
+            </div>
+            <!--搜索用户弹出框 end------------------------------------------------------------>
+          </div>
+          
           <!--搜索用户 start------------------------------------------------------------>
           <div class="searchUserBox">
             <!-- <div class="searchNameEnglish">A</div> -->
@@ -721,6 +750,7 @@
               v-model="searchGroup"
               @keyup.enter.native="searchGroupUser">
             </el-input>
+            <!--搜索用户弹出框 start------------------------------------------------------------>
             <div class="searchFriendBox" v-if="groupEditMainWindowStatus">
               <div class="searchFriendClose">
                 <div @click="closeAddGroupUserWindow" class="rightSlideBoxCloseIcon">
@@ -743,9 +773,9 @@
                 <el-button v-else type="warning" @click="addGroupUser(groupSearchUser)">移除</el-button>
               </div>
             </div>
-
+            <!--搜索用户弹出框 end------------------------------------------------------------>
           </div>
-          <!--搜索用户 start------------------------------------------------------------>
+          <!--通讯录列表 start------------------------------------------------------------>
           <div class="searchUserBox">
             <!-- <div class="searchNameEnglish">A</div> -->
             <div class="searchUserItem" v-for="(item,index) in friendsList" :key="index">
@@ -755,7 +785,7 @@
               <div class="searchUserName" v-else>{{item.user_name}}</div>
             </div>
           </div>
-          <!--搜索用户 end------------------------------------------------------------>
+          <!--通讯录列表 end------------------------------------------------------------>
         </div>
         <div class="searchWindowRight">
           <div class="searchWindowRightTop">
@@ -887,25 +917,28 @@ export default {
       //3.聊天记录 end---------------------------------------->
 
       //4.群聊 start---------------------------------------->
+      //4.1 创建群聊
       groupWindowStatus:false,//添加聊天群组出框是否显示
-      editGroupNoticeWindow:false,//编辑群公告弹出框
-      editGroupNameWindow:false,//编辑群名称弹出框
+      groupFriendsWindowStatus:false,//创建群聊时搜索框
+      friendsList:[],//左侧好友列表
+      searchFriendGroup:'',//搜索群聊的输入框绑定值
+      groupFriendSearchUser:{},//编辑群时搜索群成员 用于显示搜索结果
+      //4.2 加入群聊
       addGroupWindow:false,//加入群聊弹出框
-      groupEditWindowStatus:false,//编辑群成员弹出框
-      groupEditMainWindowStatus:false,//编辑弹框中搜索人员
+      //4.2 编辑群聊
       groupId:'',//当前编辑的群聊的id
-      friendsList:[],//好友列表
-      searchGroup:'',//搜索群聊
+      creatorId:'',//群主id
       groupUserList:[],//群成员列表
       groupInfo:{},//群设置信息
-      creatorId:'',//群主id
-      groupSearchUser:{},//搜索群成员
-      //4.群聊 end---------------------------------------->
-      
-      //5.用户详情 start---------------------------------------->
+      groupSearchUser:{},//编辑群时搜索群成员 用于显示搜索结果
       rightSlideBoxShow:false,//右侧菜单是否显示
-      searchUser:'',//搜索用户
-      //5.用户详情 end---------------------------------------->
+      searchGroup:'',//搜索群聊的输入框绑定值
+      editGroupNoticeWindow:false,//编辑群公告弹出框
+      editGroupNameWindow:false,//编辑群名称弹出框
+      groupEditWindowStatus:false,//编辑群成员弹出框
+      groupEditMainWindowStatus:false,//编辑弹框中搜索人员
+      searchUser:"",//右侧菜单的搜索框
+      //4.群聊 end---------------------------------------->
 
       //6.名片 start---------------------------------------->
       userCardMessage:'',//用户留言
@@ -928,7 +961,6 @@ export default {
           imgUrl:'',//图片地址
           oldFileName:"",//文件名
         }
-        
       }
       //8.发消息 end---------------------------------------->
       
@@ -1016,13 +1048,14 @@ export default {
     //1.会话列表 end---------------------------------------->
 
     //2.群聊 start---------------------------------------->
-    //2.1打开群聊创建窗口
+    //2.1 创建群聊
+    //2.1.1 打开群聊创建窗口
     creatGroup(){
       this.groupWindowStatus = true;
       //获得好友列表
       this.getFriendsList();
     },
-    //2.2获取好友列表
+    //2.1.2 左侧菜单获取好友列表
     getFriendsList(){
       this.$store.dispatch('chat/getFriendsList',{user_id:this.myUserId}).then(res=> {
         console.log(res)
@@ -1034,7 +1067,7 @@ export default {
         this.$message.error('获取好友列表失败!')
       })
     },
-    //2.3取消选择好友
+    //2.1.3 左侧菜单取消选择好友
     cancelSelectFriends(id){
       this.friendsList.forEach(item => {
         if(item.id == id){
@@ -1042,14 +1075,14 @@ export default {
         }
       });
     },
-    //2.4清空并关闭创建群弹出框
+    //2.1.4 清空并关闭创建群弹出框
     clearCreatGroupWindow(){
       this.friendsList.forEach(item => {
         item.status = false;
       });
       this.groupWindowStatus = false;
     },
-    //2.5创建群
+    //2.1.5 创建群
     createForGroup(){
       let data = {
         group_name:"",//群聊名称
@@ -1084,7 +1117,31 @@ export default {
         this.$message.error('创建群聊失败!')
       })
     },
-    //2.7选择群聊
+    //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)
+      //this.searchGroup 搜索的内容
+      //this.groupEditWindowStatus 弹出框状态
+      //this.groupSearchUser 搜索出来的成员
+      if(!flag){
+        this.$message.error('没有找到该成员!')
+      }else{
+        this.groupFriendsWindowStatus = true;
+      }
+    },
+    
+    //2.2 选择群聊
+    //2.1.1 在会话列表中选择一个群聊
     selectGroup(item){
       console.log("选择群聊")
       //清理单聊状态
@@ -1105,7 +1162,7 @@ export default {
       //获取群成员
       this.getGroupMember(item.receiver_id);
     },
-    //2.8获取群聊消息
+    //2.1.2 获取群聊消息
     getGroupChatRecords(group_id){
       this.$store.dispatch('chat/getGroupChatRecords',{group_id:group_id}).then(res=> {
         console.log(res)
@@ -1117,11 +1174,13 @@ export default {
         this.$message.error('获取群设置信息失败!')
       })
     },
-    //2.9打开群设置窗口
+
+    //2.3 编辑群聊
+    //2.3.1 打开右侧菜单设置窗口
     openGroupSystem(){
       this.rightSlideBoxShow = !this.rightSlideBoxShow;
     },
-    //2.10获取群成员
+    //2.3.2 获取群设置群成员
     getGroupMember(group_id){
       this.$store.dispatch('chat/getGroupMembers',{group_id:group_id}).then(res=> {
         for(let item of res.data){
@@ -1132,7 +1191,7 @@ export default {
         this.$message.error('获取群成员信息失败!')
       })
     },
-    //2.11 获取群设置信息
+    //2.3.3 获取群设置信息
     getGroupSystem(group_id){
       this.$store.dispatch('chat/getGroupInfo',{group_id:group_id}).then(res=> {
         console.log(res)
@@ -1148,20 +1207,7 @@ export default {
         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退出群聊
+    //2.3.4 右侧菜单退出群聊
     closeGroup(){
       this.$confirm('将要退出该群聊，确定吗？', '提示', {
         confirmButtonText: '确定',
@@ -1185,7 +1231,7 @@ export default {
         this.$message.warning('已取消退出')
       });
     },
-    //2.15删除群聊
+    //2.3.5 右侧菜单删除群聊
     delGroup(){
       this.$confirm('将要解散该群聊，确定吗？', '提示', {
         confirmButtonText: '确定',
@@ -1209,7 +1255,7 @@ export default {
         this.$message.warning('已取消解散')
       });
     },
-    //2.15编辑群名称
+    //2.3.6 右侧菜单编辑群名称
     editGroupName(){
       let data = {
         group_id:this.groupId,
@@ -1224,7 +1270,7 @@ export default {
         this.$message.error('编辑群公告失败!')
       })
     },
-    //2.16编辑群公告
+    //2.3.7 右侧菜单编辑群公告
     editGroupNotice(){
       let data = {
         group_id:this.groupId,
@@ -1239,7 +1285,7 @@ export default {
         this.$message.error('编辑群公告失败!')
       })
     },
-    //2.17回显群内成员
+    //2.3.8 群弹出框回显群内成员
     editGroupMember(){
       //1.打开编辑窗口
       this.groupEditWindowStatus = true;
@@ -1264,7 +1310,7 @@ export default {
         this.$message.error('获取好友列表失败!')
       })
     },
-    //2.18编辑群成员
+    //2.3.9 群弹出框编辑群成员
     changeSelectFriends(item) {
       // 检查 groupUserList 是否包含 item
       const index = this.groupUserList.findIndex(i => i.user_id == item.friend_id);
@@ -1277,12 +1323,12 @@ export default {
         this.groupUserList.push(item);
       }
     },
-    //2.19取消编辑群成员
+    //2.3.19 群弹出框取消编辑群成员
     cancelEditGroupMember(){
       this.groupEditWindowStatus = false;
       this.getGroupMember(this.groupId);
     },
-    //2.20保存编辑群成员
+    //2.3.20 群弹出框保存编辑群成员
     saveEditGroupMember(){
       let groupUser = []
       
@@ -1310,7 +1356,7 @@ export default {
         this.getGroupMember(this.groupId);
       })
     },
-    //2.21搜索群成员
+    //2.3.21 群弹出框搜索群成员
     searchGroupUser(){
       this.groupSearchUser = {};
       let flag = false; //是否找到成员
@@ -1333,7 +1379,7 @@ export default {
       }
 
     },
-    //2.22添加该群成员
+    //2.3.22 群弹出框添加群成员
     addGroupUser(item){
       item.user_id = item.friend_id;
       console.log(item)
@@ -1355,13 +1401,13 @@ export default {
       //完成后关闭弹出框
       this.closeAddGroupUserWindow();
     },
-    //2.23 关闭添加成员弹出框
+    //2.3.23 群弹出框关闭弹出框
     closeAddGroupUserWindow(){
       this.searchGroup = "";
       this.groupSearchUser = {};
       this.groupEditMainWindowStatus = false;
     },
-    //2.24 编辑移除群成员
+    //2.3.24 群弹出框移除群成员
     editRemoveGroupUser(id){
       console.log(id)
       //移除this.groupUserList中user_id与id一致的
@@ -1376,6 +1422,23 @@ export default {
         }
       }
     },
+
+
+    //2.4 加入群聊
+    //2.4.1 打开群聊邀请窗口
+    openGroupInviteWindow(id){
+      this.addGroupWindow = true;
+    },
+    //2.4.2 加入群聊
+    joinGroup(){
+      this.$store.dispatch('chat/joinGroup',{group_id:this.groupId}).then(res=> {
+        this.$message.success('加入群聊成功!')
+        this.addGroupWindow = false;
+      }).catch(() => {
+        this.$message.error('加入群聊失败!')
+      })
+    },
+    
     //2.群聊 end---------------------------------------->
 
     //3.全局应用 start---------------------------------------->