Ver código fonte

0.0.33

基本完成聊天
Sean 4 meses atrás
pai
commit
67b55aed21
2 arquivos alterados com 87 adições e 731 exclusões
  1. 39 700
      src/views/chat/contacts.vue
  2. 48 31
      src/views/chat/hall.vue

+ 39 - 700
src/views/chat/contacts.vue

@@ -28,7 +28,8 @@
           <div class="searchFriendBox" v-if="searchWindowStatus==true">
             <div class="searchFriendItem">
               <div class="searchFriendAvatar">
-                <img :src="searchFriendList.avatar">
+                <img :src="searchFriendList.avatar" v-if="searchFriendList.avatar!=''">
+                <img src="@/assets/chat/user/admin.png" v-else>
               </div>
               <div class="searchFriendInfo">
                 <div class="searchFriendName">
@@ -88,11 +89,12 @@
           <!-- <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">
+              <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}}({{item.remark}})</div>
+                <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>
@@ -110,16 +112,17 @@
         <div class="rightNewFriendBox" v-for="(item,index) in userApplyList" :key="index">
           <div class="rightNewFriendItem">
             <div class="rightNewFriendAvatar">
-              <img src="@/assets/chat/user/user.png">
+              <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.nickname}}</div>
+              <div class="rightNewFriendPhone">{{item.user_name}}</div>
             </div>
           </div>
           <div class="rightNewFriendStatus">
             <div class="rightNewFriendStatus2">
-              <el-button type="primary" @click="openWindow(item.id)">接受</el-button>
+              <el-button type="primary" @click="openWindow(item)">接受</el-button>
             </div>
           </div>
         </div>
@@ -158,7 +161,8 @@
         <div class="userInfoMainBox">
           <div class="userInfoMainItem">
             <div class="userInfoMainAvatar">
-              <img :src="friendInfo.avatar">
+              <img :src="friendInfo.avatar" v-if="friendInfo.avatar!=''">
+              <img src="@/assets/chat/user/admin.png" v-else>
             </div>
             <div class="userInfoMainInfo">
               <div class="userInfoMainName">
@@ -202,8 +206,8 @@
         <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 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>
@@ -218,14 +222,16 @@
     <!--请求验证弹出框 start------------------------------------------------------------>
     <el-dialog :visible.sync="friendWindowStatus" title="通过朋友验证" :close-on-click-modal="false" width="420px">
       <div>
-        <div>
-          <el-form :model="form" ref="form" autocomplete="off" label-position="left">
+        <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-input v-model="form.remark" autocomplete="off" placeholder="请输入备注名.."></el-input>
               </el-form-item>
             </div> 
-          </el-form>
+          </el-form> -->
+          确定要添加<span>{{friendInfo.user_name}}</span>为好友吗?
         </div>
         <div class="footerButtonBox">
           <el-button type="info" @click="friendWindowStatus=false">取消</el-button>
@@ -275,7 +281,7 @@ export default {
       //1.全局配置 start------------------------------------------------------------>
       tableTitleName:'通讯录',
       pagestatus:1,//1=没有选择任何联系人 2=申请列表 3=好友详情 4=搜索结果
-      formLabelWidth:"80px",//表单label宽度
+      formLabelWidth:"100px",//表单label宽度
       searchUserName:"",//搜索框
       friendId:"",//要添加的好友id
       friendWindowStatus:false,//通过朋友申请弹出框
@@ -296,7 +302,9 @@ export default {
         //好友申请
         remark:"",
         //状态
-        status:2
+        status:2,
+        //申请id
+        apply_id:""
       },
       //3.通过好友申请 end------------------------------------------------------------>
       //4.编辑好友 start------------------------------------------------------------>
@@ -324,6 +332,7 @@ export default {
           item.status = 0;
         }
       }
+      this.getFriendApplyList();
     },
     //0.全局操作 end------------------------------------------------------------>
     //1.好友列表 start------------------------------------------------------------>
@@ -399,6 +408,7 @@ export default {
     //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;
@@ -409,6 +419,7 @@ export default {
     
     //2.2 接受好友申请
     addFriend(){
+      //通过用户申请
       console.log(this.form);
       this.$store.dispatch('chat/applyFriend',this.form).then(res=> {
         if(res.code==200){
@@ -424,6 +435,7 @@ export default {
     },
     //2.3 删除好友
     deleteFriend(id){
+      console.log(id);
       if(id){
         this.editFriendId = String(id);
       }
@@ -469,8 +481,10 @@ export default {
     addMyFriend(){
       console.log(this.addform);
       this.$store.dispatch('chat/addFriend',this.addform).then(res=> {
-        this.$message.success(res.data)
+        this.$message.success("已成功发送好友申请!")
         this.addFriendWindowStatus = false;
+        this.searchWindowStatus = false;
+        this.addform.remark = "";
       })
     },
     //2.6 查询是否是好友
@@ -493,8 +507,9 @@ export default {
 
     //3.操作弹出框 start------------------------------------------------------------>
     //用户菜单操作
-    openWindow(id){
-      this.form.id = id;
+    openWindow(item){
+      this.form.id = item.id;
+      this.friendInfo = item;
       //打开弹出框
       this.friendWindowStatus = true;
     },
@@ -524,7 +539,6 @@ export default {
     this.getUserFriendList();
     //2.获取好友申请列表
     this.getFriendApplyList();
-
     //打印当前用户id
     console.log("当前的用户id为:" + this.$store.state.user.userid);
   },
@@ -930,666 +944,6 @@ export default {
           text-overflow: ellipsis;
         }
       }
-      .rightPositionBox {
-        position: relative;
-        .rightUserMessageBox {
-          padding: 40px;
-          height: 760px;
-          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;
-            }
-            .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;
-            }
-            .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;
-        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;
-          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%;
-
-              img {
-                width: 58px;
-                height: 58px;
-                border-radius: 50%;
-              }
-              .addUserIcon {
-                width: 58px;
-                height: 58px;
-                line-height: 58px;
-                background: #F0F0F0;
-                border-radius: 50%;
-                text-align: center;
-              }
-            }
-            .rightSlideUserItemName {
-              font-size: 18px;
-              color: #333;
-              margin-top: 10px;
-              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;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 30px 40px;
-            border-bottom: 1px solid #E9EDF7;
-            .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;
-            .groupChatTitle {
-              font-size: 18px;
-              color: #333;
-              margin-bottom: 15px;
-            }
-            .groupChatText {
-              font-size: 18px;
-              color: #999;
-            }
-          }
-        }
-        .rightSlideFooter {
-          font-size: 18px;
-          color: #CC5F5F;
-          padding: 30px 40px;
-          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%;
-        }
-      } 
-      .messageTypeCardName {
-        font-size: 16px;
-        color: #333;
-      }
-    }
-    .messageTypeCardText {
-      padding-top: 14px;
-      padding-left: 20px;
-      padding-bottom: 15px;
-      font-size: 12px;
-      color: #999999;
-    }
-  }
-  //发送图片
-  .messageTypeImage {
-    width: 200px;
-    height: 200px;
-    img {
-      max-width: 200px;
-      border-radius: 16px;
-      border: 1px solid #ECECEC;
-    }
-  }
-  //发送群聊
-  .messageGroupInvite {
-    background: #fff;
-    border-radius: 16px;
-    border: 1px solid #E9EDF7;
-    .messageGroupInviteTop {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 20px 20px 24px 20px;
-      .messageGroupInviteIcon {
-        margin-right: 15px;
-        img {
-          width: 58px;
-          height: 58px;
-          border-radius: 50%;
-        }
-      }
-      .messageGroupInfoText {
-        .messageGroupInfoTextTitle {
-          font-size: 16px;
-          color: #333;
-          margin-bottom: 5px;
-        }
-        .messageGroupInfoTextTxt {
-          font-size: 12px;
-          color: #999;
-          line-height: 18px;
-        }
-      }
-    }
-    .messageGroupInviteText {
-      padding-top: 14px;
-      padding-left: 20px;
-      padding-bottom: 15px;
-      font-size: 12px;
-      color: #999999;
-      border-top: 1px solid #E9EDF7;
-    }
-  }
-  //添加用户弹出框
-  .searchWindow {
-    display: flex;
-    .searchWindowLeft {
-      width: 330px;
-      box-sizing: border-box;
-      border-right: 1px solid #E9EDF7;
-      padding-right: 25px;
-      .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;
-          }
-        }
-      }
-    }
-    .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 {
-          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;
-          }
-        }
-      }
-    }
-    //图片列表
-    .fileWindowImageBox {
-      display: flex;
-      flex-wrap: wrap;
-      div {
-        width: 25%;
-        text-align: center;
-        padding: 20px 0 0 0;
-      }
-      img {
-        width: 150px;
-        height: 150px;
-        border-radius: 16px;
-        border: 1px solid #ECECEC;
-      }
-    }
-    //日期搜索
-    .fileWindowDateBox {
-      width: 100%;
-      padding: 30px 0;
-    }
-    .fileWindowDateButton {
-      margin-left: 10px;
-    }
-    //群成员搜索
-    .fileWindowGroupMain{
-      display: flex;
-      .fileWindowGroupUserLeft {
-        flex: 1;
-        box-sizing: border-box;
-        padding-right: 20px;
-      }
-      .fileWindowGroupUserRight {
-         width: 300px;
-        .fileWindowGroupUserBox {
-          padding: 30px 0;
-          .searchUserBox {
-            .searchNameEnglish {
-              font-size: 18px;
-              color: #999;
-              padding: 30px 0 20px 0;
-            }
-            .searchUserItem {
-              display: flex;
-              align-items: center;
-              .searchUserName {
-                font-size: 18px;
-                font-weight: bold;
-                color: #333;
-              }
-              img {
-                width: 38px;
-                height: 38px;
-                border-radius: 50%;
-                margin: 0 20px 0 0;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  //添加用户弹出框
-  .messageFormBox {
-    .messageFormTitle {
-      font-size: 18px;
-      padding-bottom: 20px;
-    }
-    .messageFormInput {
-      margin-bottom: 30px;
     }
   }
   //弹出框底部按钮
@@ -1597,27 +951,12 @@ export default {
     padding-top: 40px;
     text-align: center;
   }
-  //加入群聊弹出框
-  .addGroupWindow {
-    .addGroupWindowImg {
-      img {
-        width:58px;
-        height: 58px;
-      }
-      text-align: center;
-      font-size: 18px;
-      color: #333;
-    }
-    .addGroupWindowTitle {
-      font-size: 18px;
-      color: #333;
-      text-align: center;
-      padding: 20px 0 40px 0;
-    }
-    .addGroupWindowText {
-      font-size: 12px;
-      color: #999;
-      text-align: center;
+  .friendWindowText {
+    font-size: 16px;
+    color: #333;
+    span {
+      color: #5570F1;
+      font-weight: bold;
     }
   }
   //表单微调 start------------------------------------------------------------>*/

+ 48 - 31
src/views/chat/hall.vue

@@ -32,7 +32,7 @@
             </div>
             <div class="searchFriendItem">
               <div class="searchFriendAvatar" v-if="selectConversationItem.group_name==null">
-                <img :src="selectConversationItem.avatar" v-if="selectConversationItem.avatar!=null">
+                <img :src="selectConversationItem.avatar" v-if="selectConversationItem.avatar!=null&&selectConversationItem.avatar!=''">
                 <img src="@/assets/chat/user/admin.png" v-else>
               </div>
               <div class="searchFriendAvatar" v-else>
@@ -59,7 +59,7 @@
             <div class="flexItemBox" v-if="item.is_group==0" @click="selectConversation(item)">
               <!--单聊-->
               <div class="userAvatar">
-                <img :src="item.avatar" v-if="item.avatar!=null">
+                <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
                 <img src="@/assets/chat/user/admin.png" v-else>
               </div>
               <div class="userInfo">
@@ -117,7 +117,8 @@
               <!--文字消息类型 对方-->
               <div class="otherUserMessage" v-if="item.action=='recieved'&&Number(item.msg_type)==1">
                 <div class="otherUserIcon">
-                  <img :src="item.receiver_avatar">
+                  <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}}
@@ -129,13 +130,15 @@
                   {{item.content}}
                 </div>
                 <div class="meUserIcon">
-                  <img :src="item.user_avatar">
+                  <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">
+                  <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">
@@ -151,13 +154,15 @@
                   </div>
                 </div>
                 <div class="meUserIcon">
-                  <img :src="item.user_avatar">
+                  <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">
+                  <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">
@@ -195,7 +200,8 @@
                   </div>
                 </div>
                 <div class="meUserIcon">
-                  <img :src="item.user_avatar">
+                  <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>
               <!--名片 我-->
@@ -204,7 +210,8 @@
                   <div class="messageTypeCard">
                     <div class="messageTypeCardTop">
                       <div class="messageTypeCardIcon">
-                        <img :src="item.content.split(',')[0]">
+                        <!-- <img :src="item.content.split(',')[0]"> -->
+                        <img src="@/assets/chat/user/user.png">
                       </div>
                       <div class="messageTypeCardName">{{item.content.split(',')[1]}}</div>
                     </div>
@@ -214,19 +221,22 @@
                   </div>
                 </div>
                 <div class="meUserIcon">
-                  <img :src="item.user_avatar">
+                  <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">
+                  <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="item.content.split(',')[0]"> -->
+                        <img src="@/assets/chat/user/user.png">
                       </div>
                       <div class="messageTypeCardName">{{item.content.split(',')[1]}}</div>
                     </div>
@@ -255,13 +265,15 @@
                   </div>
                 </div>
                 <div class="meUserIcon">
-                  <img :src="item.user_avatar">
+                  <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">
+                  <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">
@@ -363,7 +375,8 @@
                 </div>
                 <div class="searchFriendItem">
                   <div class="searchFriendAvatar">
-                    <img :src="groupRightUserInfo.avatar">
+                    <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">
@@ -384,7 +397,7 @@
               <div class="rightSlideUserItem" v-for="item in groupUserList" :key="item.user_id">
                 <div class="rightSlideUserItemIcon">
                   <span class="el-dropdown-link">
-                    <img :src="item.avatar" v-if="item.avatar!=null">
+                    <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
                     <img src="@/assets/chat/user/admin.png" v-else>
                   </span>
                 </div>
@@ -555,7 +568,7 @@
               </div>
               <div class="searchFriendItem">
                 <div class="searchFriendAvatar">
-                  <img :src="groupFriendSearchUser.avatar" v-if="groupFriendSearchUser.avatar!=null">
+                  <img :src="groupFriendSearchUser.avatar" v-if="groupFriendSearchUser.avatar!=null&&groupFriendSearchUser.avatar!=''">
                   <img src="@/assets/chat/user/admin.png" v-else>
                 </div>
                 <div class="searchFriendInfo">
@@ -578,7 +591,7 @@
             <!-- <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" v-if="item.avatar!=null">
+              <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}}</div>
               <div class="searchUserName" v-else>{{item.user_name}}</div>
@@ -594,7 +607,7 @@
           <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">
+                <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>
@@ -643,7 +656,7 @@
                 <!--文字消息 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">
+                    <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">
@@ -658,7 +671,7 @@
                 <!--图片消息 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">
+                    <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">
@@ -675,7 +688,8 @@
                 <!--文件消息 start-->
                 <div v-if="Number(item.msg_type)==3" class="historicalMessageBox">
                   <div class="fileWindowMessageItemIcon">
-                    <img :src="item.receiver_avatar">
+                    <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">
@@ -710,7 +724,7 @@
               <!--文件消息 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">
+                  <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">
@@ -747,7 +761,7 @@
               <!--图片消息 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">
+                  <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">
@@ -901,7 +915,8 @@
               </div>
               <div class="searchFriendItem">
                 <div class="searchFriendAvatar">
-                  <img :src="groupSearchUser.avatar">
+                  <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">
@@ -922,7 +937,8 @@
             <!-- <div class="searchNameEnglish">A</div> -->
             <div class="searchUserItem" v-for="(item,index) in friendsList" :key="index">
               <el-checkbox v-model="item.status" @change="changeSelectFriends(item)"></el-checkbox>
-              <img :src="item.avatar">
+              <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}}</div>
               <div class="searchUserName" v-else>{{item.user_name}}</div>
             </div>
@@ -937,7 +953,8 @@
           <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">
+                <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
+                <img src="@/assets/chat/user/admin.png" v-else>
                 <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>
@@ -987,7 +1004,7 @@
                     <input type="hidden" :value="item.friend_id">
                   </el-radio>
                   <div class="shareCardItem">
-                    <img :src="item.avatar" v-if="item.avatar!=null">
+                    <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}}</div>
                     <div class="shareCardName" v-else>{{item.user_name}}</div>
@@ -1002,7 +1019,7 @@
                     <input type="hidden" :value="item.receiver_id">
                   </el-radio>
                   <div class="shareCardItem">
-                    <img :src="item.avatar" v-if="item.avatar!=null">
+                    <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}}</div>
                     <div class="shareCardName" v-else>{{item.name}}</div>
@@ -1032,7 +1049,7 @@
                     <input type="hidden" :value="item.friend_id">
                   </el-radio>
                   <div class="shareCardItem">
-                    <img :src="item.avatar" v-if="item.avatar!=null">
+                    <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}}</div>
                     <div class="shareCardName" v-else>{{item.user_name}}</div>
@@ -1047,7 +1064,7 @@
                     <input type="hidden" :value="item.receiver_id">
                   </el-radio>
                   <div class="shareCardItem">
-                    <img :src="item.avatar" v-if="item.avatar!=null">
+                    <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}}</div>
                     <div class="shareCardName" v-else>{{item.name}}</div>