0.0.35

搜索好友列表

src/views/chat/contacts.vue

@@ -8,11 +8,19 @@
         <!--搜索 start------------------------------------------>
         <div class="searchBox">
           <el-input
-            placeholder="请输入内容"
+            placeholder="请输入用户账号"
             prefix-icon="el-icon-search"
             v-model="searchUserName"
             @keyup.enter.native="searchFriend"
-            :disabled="pagestatus !== 4"
+            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>
@@ -82,6 +90,7 @@
           </div>
           <div class="newFriendText" v-else>
             新的朋友
+            <span v-if="userApplyList.length>0">{{userApplyList.length}}</span>
           </div>
         </div>
         <!--用户列表 start------------------------------------------>
@@ -282,13 +291,16 @@ export default {
       tableTitleName:'通讯录',
       pagestatus:1,//1=没有选择任何联系人 2=申请列表 3=好友详情 4=搜索结果
       formLabelWidth:"100px",//表单label宽度
-      searchUserName:"",//搜索框
+      searchUserName:"",//搜索新添加用户
+      searchUserListName:"",//搜索好友列表
       friendId:"",//要添加的好友id
       friendWindowStatus:false,//通过朋友申请弹出框
       searchWindowStatus:false,//搜索窗口左侧弹出框
+      searchUserWindowStatus:false,//搜索好友列表弹出框
       editWindowStatus:false,//修改备注弹出框
       addFriendWindowStatus:false,//发送好友申请弹出框
       editFriendId:"",//要编辑的好友
+      getFriendApplyListStatus:null,//获取好友申请列表状态
       //1.全局配置 end------------------------------------------------------------>
       //2.好友列表 start------------------------------------------------------------>
       userFriendList:[],//好友列表
@@ -360,7 +372,7 @@ export default {
     //1.2选择联系人
     changeUserItem(id){
       for(let item of this.userFriendList){
-        if(item.id == id){
+        if(item.friend_id == id){
           item.status = 1;
         }else{
           item.status = 0;
@@ -371,6 +383,8 @@ export default {
       //把要编辑的好友的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);
@@ -403,6 +417,27 @@ export default {
         }
       })
     },
+    //1.3搜索好友列表中的好友
+    searchOrdFriend(){
+      if(this.searchUserListName==""){
+        this.$message.error('搜索关键字不能为空!')
+        return;
+      }else{
+        let isFriend = false;
+        for(let item of this.userFriendList){
+          if(item.user_name == this.searchUserListName){
+            isFriend = true;
+            this.searchFriendList = item;
+          }
+        }
+        if(isFriend){
+          this.changeUserItem(this.searchFriendList.friend_id)
+          //console.log(this.searchFriendList);
+        }else{
+          this.$message.error('没有找到该联系人!')
+        }
+      }
+    },
     //1.好友列表 end------------------------------------------------------------>
 
     //2.获得好友申请列表 start------------------------------------------------------------>
@@ -429,10 +464,12 @@ export default {
           this.getUserFriendList();
           //清空右侧
           this.friendInfo = {};
-          this.pagestatus = 1;
+          //this.pagestatus = 1;
+          this.getFriendApplyListStatus();
         }
       })
     },
+    
     //2.3 删除好友
     deleteFriend(id){
       console.log(id);
@@ -503,6 +540,14 @@ export default {
         this.$forceUpdate();
       })
     },
+    //2.7 定时查询好友申请状态
+    setTimeFriendApplyList(){
+      console.log("定时查询好友申请状态");
+      let that = this;
+      this.getFriendApplyListStatus = setInterval(()=>{
+        that.getFriendApplyList();
+      },5000)
+    },
     //2.获得好友申请列表 end------------------------------------------------------------>
 
     //3.操作弹出框 start------------------------------------------------------------>
@@ -539,11 +584,13 @@ export default {
     this.getUserFriendList();
     //2.获取好友申请列表
     this.getFriendApplyList();
+    //3.定时查询好友申请状态
+    this.setTimeFriendApplyList();
     //打印当前用户id
     console.log("当前的用户id为：" + this.$store.state.user.userid);
   },
   beforeDestroy() {
-    
+    clearInterval(this.getFriendApplyListStatus);
   }
 };
 </script>
@@ -572,6 +619,8 @@ export default {
         cursor: pointer;
         border-bottom: 1px solid #E9EDF7;
         position: relative;
+        box-sizing: border-box;
+        border-right: 4px solid #fff;
         .newFriendImg {
           width: 58px;
           height: 58px;
@@ -585,6 +634,22 @@ export default {
         .newFriendText {  
           color: #333;
           font-size: 18px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          flex: 1;
+          span {
+            background: #5570F1;
+            color: #fff;
+            line-height: 24px;
+            font-size: 12px;
+            width: 24px;
+            height: 24px;
+            text-align: center;
+            border-radius: 50%;
+            display: block;
+            margin-right: 20px;
+          }
         }
       }
       .newFriendIActive {