admin_home/src/views/chat/contacts.vue

<template>
  <div class="mainBox">
    <div class="hallBox">
      <div class="hallLeft">
        <!--添加好友 start------------------------------------------>
        <contactsTitle :name="tableTitleName" @addUser="addUser" @closeAddUser="closeAddUser" />
        <!--添加好友 end------------------------------------------>
        <!--搜索 start------------------------------------------>
        <div class="searchBox">
          <el-input
            placeholder="请输入用户账号"
            prefix-icon="el-icon-search"
            v-model="searchUserName"
            @keyup.enter.native="searchFriend"
            v-if="pagestatus == 4"
          >
          </el-input>
          <el-input
            placeholder="请输入好友账号"
            prefix-icon="el-icon-search"
            v-model="searchUserListName"
            @keyup.enter.native="searchOrdFriend"
            v-if="pagestatus==1||pagestatus==2||pagestatus==3"
          >
          </el-input>
        </div>
        <!--搜索 end------------------------------------------>
        <div class="newFriendBox">新的朋友</div>
        <div class="newFriendImgBox" v-if="pagestatus==4">
          <div class="newFriendImg">
            <img src="@/assets/chat/newcontacts.png">
          </div>
          <div class="newFriendText" @click="searchFriend">
            搜索：{{searchUserName}}
          </div>
          <div class="searchFriendBox" v-if="searchWindowStatus==true">
            <div class="searchFriendItem">
              <div class="searchFriendAvatar">
                <img :src="searchFriendList.avatar" v-if="searchFriendList.avatar!=''">
                <img src="@/assets/chat/user/admin.png" v-else>
              </div>
              <div class="searchFriendInfo">
                <div class="searchFriendName">
                  <div class="searchFriendNameText" v-if="searchFriendList.remark!=null&&searchFriendList.remark!=''">{{searchFriendList.remark}}</div>
                  <div class="searchFriendNameText" v-else>{{searchFriendList.user_name}}</div>
                  <!--性别-->
                  <!-- <div class="gender"><img src="@/assets/chat/girl.png"></div> -->
                  <!--更多-->
                  <!-- <img src="@/assets/chat/fi_more.png"> -->
                </div>
                <div class="searchFriendPhone">账号：{{searchFriendList.user_name}}</div>
              </div>
            </div>
            <!-- <div v-if="searchFriendList.isfriend==0||searchFriendList.isfriend==null"></div>
            <div class="searchFriendLineBox" v-else @click="openEditWindow">
              <div class="searchFriendLineTitle">备注</div>
              <div class="searchFriendLineContent">
                <div class="searchFriendLineContentItem">
                  <div>{{searchFriendList.remark}}</div>
                  <div><i class="el-icon-edit"></i></div>
                </div>
              </div>
            </div> -->
            <!-- <div class="searchFriendLineBox">
              <div class="searchFriendLineTitle">共同群聊</div>
              <div class="searchFriendLineContent">0个</div>
            </div>
            <div class="searchFriendLineBox">
              <div class="searchFriendLineTitle">添加方式</div>
              <div class="searchFriendLineContent">通过账号添加</div>
            </div> -->
            <div class="searchFriendButton">
              <el-button type="primary" v-if="searchFriendList.showBtn==false&&searchFriendList.id!=this.$store.state.user.userid" @click="openAddWindow(searchFriendList.id)">添加到通讯录</el-button>
              <el-button type="danger" v-else-if="searchFriendList.showBtn==true" @click="deleteFriend(searchFriendList)">删除好友</el-button>
              <el-button type="primary" disabled v-else>添加到通讯录</el-button>
            </div>
            <!-- <div class="searchFriendButton">
              <div class="searchFriendButtonItem">
                <img src="@/assets/chat/sendmessage.png">
                <div>发消息</div>
              </div>
            </div> -->
          </div>
        </div>
        <div :class="['newFriendImgBox', pagestatus === 2 ? 'newFriendIActive' : '']" @click="tabPage(2)" v-else>
          <div class="newFriendImg">
            <img src="@/assets/chat/newcontacts.png">
          </div>
          <div class="newFriendText" v-if="pagestatus==4">
            搜索：{{searchUserName}}
          </div>
          <div class="newFriendText" v-else>
            新的朋友
            <span v-if="userApplyList.length>0">{{userApplyList.length}}</span>
          </div>
        </div>
        <!--用户列表 start------------------------------------------>
        <div class="userListBox" v-if="pagestatus==1||pagestatus==2||pagestatus==3">
          <!-- <div class="userListTitle">A</div> -->
          <div class="userItem" @click="changeUserItem(item.friend_id)" v-for="(item,index) in userFriendList" :key="index" :class="['userItem', { active: item.status == 1 }]">
            <div class="userAvatar">
              <img :src="item.avatar" v-if="item.avatar!=''">
              <img src="@/assets/chat/user/admin.png" v-else>
            </div>
            <div class="userInfo">
              <div class="userName">
                <div class="userNameText" v-if="item.remark!=null">{{item.user_name}}<span v-if="item.remark!=''">({{item.remark}})</span></div>
                <div class="userNameText" v-else>{{item.user_name}}</div>
              </div>
            </div>
          </div>
        </div>
        <!--用户列表 end------------------------------------------>
      </div>
      <div class="hallRight" v-if="pagestatus==1||pagestatus==4">
        <div class="ifHallRigthNoMessage">恒星管理平台</div>
      </div>
      <div class="hallRight" v-if="pagestatus==2">
        <div class="UserNameBox">
          <div class="userName">新的朋友</div>
        </div>
        <div class="rightNewFriendBox" v-for="(item,index) in userApplyList" :key="index">
          <div class="rightNewFriendItem">
            <div class="rightNewFriendAvatar">
              <img :src="item.avatar" v-if="item.avatar!=''">
              <img src="@/assets/chat/user/admin.png" v-else>
            </div>
            <div class="rightNewFriendInfo">
              <div class="rightNewFriendName">{{item.remark}}</div>
              <div class="rightNewFriendPhone">{{item.user_name}}</div>
            </div>
          </div>
          <div class="rightNewFriendStatus">
            <div class="rightNewFriendStatus2">
              <el-button type="primary" @click="openWindow(item)">接受</el-button>
            </div>
          </div>
        </div>
        <!-- <div class="rightNewFriendBox">
          <div class="rightNewFriendItem">
            <div class="rightNewFriendAvatar">
              <img src="@/assets/chat/user/user.png">
            </div>
            <div class="rightNewFriendInfo">
              <div class="rightNewFriendName">我是某某某</div>
              <div class="rightNewFriendPhone">15210211200</div>
            </div>
          </div>
          <div class="rightNewFriendStatus">
            <div class="rightNewFriendStatus1">已接受</div>
          </div>
        </div>
        <div class="rightNewFriendBox">
          <div class="rightNewFriendItem">
            <div class="rightNewFriendAvatar">
              <img src="@/assets/chat/user/user.png">
            </div>
            <div class="rightNewFriendInfo">
              <div class="rightNewFriendName">我是某某某</div>
              <div class="rightNewFriendPhone">15210211200</div>
            </div>
          </div>
          <div class="rightNewFriendStatus">
            <div class="rightNewFriendStatus2">
              <el-button type="primary" @click="friendWindowStatus=true">接受</el-button>
            </div>
          </div>
        </div> -->
      </div>
      <div class="hallRight" v-if="pagestatus==3">
        <div class="userInfoMainBox">
          <div class="userInfoMainItem">
            <div class="userInfoMainAvatar">
              <img :src="friendInfo.avatar" v-if="friendInfo.avatar!=''">
              <img src="@/assets/chat/user/admin.png" v-else>
            </div>
            <div class="userInfoMainInfo">
              <div class="userInfoMainName">
                <div class="userInfoMainNameText">{{friendInfo.user_name}}</div>
              </div>
              <div class="userInfoMainPhone">账号：{{friendInfo.user_name}}</div>
            </div>
          </div>
          <div class="userInfoMainLineBox">
            <div class="userInfoMainLineTitle">备注</div>
            <div class="userInfoMainLineContent">
              <div class="userInfoMainLineContentItem" @click="openEditWindow">
                <div v-if="friendInfo.remark!=null&&friendInfo.remark!=''">{{friendInfo.remark}}</div>
                <div v-else>暂无备注</div>
                <div><i class="el-icon-edit"></i></div>
              </div>
            </div>
          </div>
          <!-- <div class="userInfoMainLineBox">
            <div class="userInfoMainLineTitle">共同群聊</div>
            <div class="userInfoMainLineContent">0个</div>
          </div>
          <div class="userInfoMainLineBox">
            <div class="userInfoMainLineTitle">添加方式</div>
            <div class="userInfoMainLineContent">通过账号添加</div>
          </div> -->
          <div class="userInfoMainButton">
            <!-- <div class="userInfoMainButtonItem">
              <img src="@/assets/chat/sendmessage.png">
              <div>删除好友</div>
            </div> -->
            <el-button type="primary" icon="el-icon-s-promotion" @click="sendMessage(friendInfo)">发送消息</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="deleteFriend(friendInfo.friend_id)">删除好友</el-button>
          </div>
        </div>
      </div>
    </div>
    <!--发送好友申请弹出框 start------------------------------------------------------------>
    <el-dialog :visible.sync="addFriendWindowStatus" title="朋友申请" :close-on-click-modal="false" width="420px">
      <div>
        <div>
          <el-form :model="form" ref="form" autocomplete="off" label-position="left">
            <div class="formDiv">
              <el-form-item label="验证消息：" :label-width="formLabelWidth" class="custom-align-right">
                <el-input v-model="addform.remark" autocomplete="off"  placeholder="我是.."></el-input>
              </el-form-item>
            </div> 
          </el-form>
        </div>
        <div class="footerButtonBox">
          <el-button type="info" @click="addFriendWindowStatus=false">取消</el-button>
          <el-button type="primary" @click="addMyFriend">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!--发送好友申请弹出框 end------------------------------------------------------------>
    <!--请求验证弹出框 start------------------------------------------------------------>
    <el-dialog :visible.sync="friendWindowStatus" title="通过朋友验证" :close-on-click-modal="false" width="420px">
      <div>
        <div class="friendWindowText">
          <!--此处修改备注是没用的，修改备注需要friendId，但是此时你们还不是好友，改不了备注-->
          <!-- <el-form :model="form" ref="form" autocomplete="off" label-position="left">
            <div class="formDiv">
              <el-form-item label="备注名" :label-width="formLabelWidth" class="custom-align-right">
                <el-input v-model="form.remark" autocomplete="off" placeholder="请输入备注名.."></el-input>
              </el-form-item>
            </div> 
          </el-form> -->
          确定要添加<span>{{friendInfo.user_name}}</span>为好友吗？
        </div>
        <div class="footerButtonBox">
          <el-button type="info" @click="friendWindowStatus=false">取消</el-button>
          <el-button type="primary" @click="addFriend">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!--请求验证弹出框 end------------------------------------------------------------>
    <!--修改备注弹出框 start------------------------------------------------------------>
    <el-dialog :visible.sync="editWindowStatus" title="修改备注" :close-on-click-modal="false" width="420px">
      <div>
        <div>
          <el-form :model="form" ref="form" autocomplete="off" label-position="left">
            <div class="formDiv">
              <el-form-item label="备注名" :label-width="formLabelWidth" class="custom-align-right">
                <el-input v-model="remark" autocomplete="off"  placeholder="请输入备注名.."></el-input>
              </el-form-item>
            </div> 
          </el-form>
        </div>
        <div class="footerButtonBox">
          <el-button type="info" @click="editWindowStatus=false">取消</el-button>
          <el-button type="primary" @click="editFriend">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!--修改备注弹出框 end------------------------------------------------------------>
  </div>
</template>

<script>
//引入公用样式
import '@/styles/global.less';
//引入baseUrl
import URL from '@/utils/baseUrl';
//引入组件
import contactsTitle from './components/contactsTitle.vue';
import { status } from 'nprogress';
import openWindow from '@/utils/open-window';

export default {
  components: {
    contactsTitle
  },
  data() {
    return {
      //1.全局配置 start------------------------------------------------------------>
      tableTitleName:'通讯录',
      pagestatus:1,//1=没有选择任何联系人 2=申请列表 3=好友详情 4=搜索结果
      formLabelWidth:"100px",//表单label宽度
      searchUserName:"",//搜索新添加用户
      searchUserListName:"",//搜索好友列表
      friendId:"",//要添加的好友id
      friendWindowStatus:false,//通过朋友申请弹出框
      searchWindowStatus:false,//搜索窗口左侧弹出框
      searchUserWindowStatus:false,//搜索好友列表弹出框
      editWindowStatus:false,//修改备注弹出框
      addFriendWindowStatus:false,//发送好友申请弹出框
      editFriendId:"",//要编辑的好友
      getFriendApplyListStatus:null,//获取好友申请列表状态
      //1.全局配置 end------------------------------------------------------------>
      //2.好友列表 start------------------------------------------------------------>
      userFriendList:[],//好友列表
      userApplyList:[],//好友申请列表
      searchFriendList:"",//搜索好友列表
      //2.好友列表 end------------------------------------------------------------>
      //3.通过好友申请 start------------------------------------------------------------>
      form:{
        //好友的用户id
        id:"",
        //好友id
        friend_id:"",
        //好友申请
        remark:"",
        //状态
        status:2,
        //申请id
        apply_id:""
      },
      //3.通过好友申请 end------------------------------------------------------------>
      //4.编辑好友 start------------------------------------------------------------>
      friendInfo:{},//好友信息
      remark:"",//修改的用户备注
      //4.编辑好友 end------------------------------------------------------------>
      //5.发送好友申请 start------------------------------------------------------------>
      addform:{
        //好友id
        friend_id:"",
        //好友申请
        remark:"",
      },
      //5.发送好友申请 end------------------------------------------------------------>
    };
  },
  methods: {
    //0.全局操作 start------------------------------------------------------------>
    //0.1切换页面状态
    tabPage(status){
      this.pagestatus = status;
      if(status==2){
        //如果是2 好友列表状态还原
        for(let item of this.userFriendList){
          item.status = 0;
        }
      }
      this.getFriendApplyList();
    },
    //0.全局操作 end------------------------------------------------------------>
    //1.好友列表 start------------------------------------------------------------>
    addUser(){
      this.pagestatus = 4;
    },
    closeAddUser(){
      this.pagestatus = 2;
      this.searchWindowStatus = false;
    },
    //1.1获取联系人列表
    getUserFriendList(){
      //获取用户身份id
      //const userId = this.$store.state.user.userid;
      this.$store.dispatch('chat/getFriendsList',{}).then(res=> {
        let data = res.data;
        for(let item of data){
          item.status = 0; //默认未选中
        }
        this.userFriendList = data;
      }).catch(() => {
        this.$message.error('获取好友列表失败!')
      })
    },
    //1.2选择联系人
    changeUserItem(id){
      for(let item of this.userFriendList){
        if(item.friend_id == id){
          item.status = 1;
        }else{
          item.status = 0;
        }
      }
      //切换页面到用户列表
      this.pagestatus = 3;
      //把要编辑的好友的id存起来
      this.editFriendId = id;

      // console.log(id)
      // console.log(this.userFriendList)
      //获取好友身份信息详情
      this.$store.dispatch('chat/getFriendInfo',{friend_id:this.editFriendId}).then(res=> {
        console.log(res);
        //保存好友信息
        this.friendInfo = res.data;
      }).catch(() => {
        this.$message.error('获得好友身份详情失败!')
      })

    },
    //1.3搜索联系人
    searchFriend(){
      //搜索联系人
      this.$store.dispatch('chat/searchFriend',{keyword:this.searchUserName}).then(res=> {
        //获取到好友
        this.searchWindowStatus = false;
        console.log(res);
        if(res.code==200){
          if(res.data.length>0){
            this.searchWindowStatus = true;
            this.searchFriendList = res.data[0];
            //搜出来以后查询两人是否为好友
            this.searchIsFriend(this.searchFriendList)

          }else{
            this.$message.error('没有找到该联系人!')
          }
        }else{
          this.$message.error('搜索关键字不能为空!')
        }
      })
    },
    //1.3搜索好友列表中的好友
    searchOrdFriend(){
      if(this.searchUserListName==""){
        this.$message.error('搜索关键字不能为空!')
        return;
      }else{
        let isFriend = false;
        for(let item of this.userFriendList){
          if(item.user_name == this.searchUserListName){
            isFriend = true;
            this.searchFriendList = item;
          }
        }
        if(isFriend){
          this.changeUserItem(this.searchFriendList.friend_id)
          //console.log(this.searchFriendList);
        }else{
          this.$message.error('没有找到该联系人!')
        }
      }
    },
    //1.好友列表 end------------------------------------------------------------>

    //2.获得好友申请列表 start------------------------------------------------------------>
    //2.1 好友申请列表
    getFriendApplyList(){
      console.log("获取好友申请列表");
      const userId = this.$store.state.user.userid;
      this.$store.dispatch('chat/getFriendsApplyList',{user_id:userId}).then(res=> {
        this.userApplyList = res.data;
      }).catch(() => {
        this.$message.error('获取好友申请列表失败!')
      })
    },
    
    //2.2 接受好友申请
    addFriend(){
      //通过用户申请
      console.log(this.form);
      this.$store.dispatch('chat/applyFriend',this.form).then(res=> {
        if(res.code==200){
          this.$message.success('成功添加好友!')
          this.friendWindowStatus = false;
          //重新加载用户列表
          this.getUserFriendList();
          //清空右侧
          this.friendInfo = {};
          //this.pagestatus = 1;
          this.getFriendApplyListStatus();
        }
      })
    },
    
    //2.3 删除好友
    deleteFriend(id){
      console.log(id);
      if(id){
        this.editFriendId = String(id);
      }
      console.log(id)
      this.$confirm('此操作将永久删除该联系人, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(this.editFriendId);
        this.$store.dispatch('chat/delFriend',{friend_id:this.editFriendId}).then(res=> {
          this.$message.success('删除成功!')
          //关闭用户详情显示
          this.pagestatus = 1;
          //重新装在用户列表
          this.getUserFriendList();
        })
      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '已取消删除'
        });
      });
    },
    //2.4 编辑好友
    editFriend(){
      let data = {
        friend_id:this.editFriendId,
        remark:this.remark
      }
      //this.editFriendId
      this.$store.dispatch('chat/updateFriend',data).then(res=> {
        if(res.code==200){
          this.$message.success('修改备注名成功!')
          this.pagestatus = 1;
          this.editWindowStatus = false;
          this.getUserFriendList();
          this.remark = "";
        }else{
          this.$message.error(res.message)
        }
      }).catch(() => {
        this.$message.error('修改备注名失败!')
      })
    },
    //2.5 发送好友申请
    addMyFriend(){
      console.log(this.addform);
      this.$store.dispatch('chat/addFriend',this.addform).then(res=> {
        this.$message.success("已成功发送好友申请！")
        this.addFriendWindowStatus = false;
        this.searchWindowStatus = false;
        this.addform.remark = "";
      })
    },
    //2.6 查询是否是好友
    searchIsFriend(item){
      let data = {
        friend_id:item.isfriend
      }
      console.log(data);
      this.$store.dispatch('chat/isFriend',data).then(res=>{
        console.log(res);
        if(res.code==0&&res.message=="不是好友"){
          this.searchFriendList.showBtn = false;
        }else{
          this.searchFriendList.showBtn = true;
        }
        this.$forceUpdate();
      })
    },
    //2.7 定时查询好友申请状态
    setTimeFriendApplyList(){
      console.log("定时查询好友申请状态");
      let that = this;
      this.getFriendApplyListStatus = setInterval(()=>{
        that.getFriendApplyList();
      },5000)
    },
    //2.获得好友申请列表 end------------------------------------------------------------>

    //3.操作弹出框 start------------------------------------------------------------>
    //用户菜单操作
    openWindow(item){
      this.form.id = item.id;
      this.form.friend_id = item.friend_id;
      this.friendInfo = item;
      //打开弹出框
      this.friendWindowStatus = true;
    },
    openEditWindow(id){
      //打开修改备注弹出框
      this.editWindowStatus = true;
    },
    openAddWindow(id){
      console.log(id);
      this.addform.friend_id = String(id);
      this.addFriendWindowStatus = true;
    },
    //发送消息
    sendMessage(friendInfo){
      console.log(friendInfo);
      //带着friend_id跳转到hall页面
      this.$router.push({
        path:'/hall',
        query:{friend_id:friendInfo.friend_id}
      }); 
    },
    //3.操作弹出框 end------------------------------------------------------------>
    
  },
  mounted() {
    //1.获取联系人列表
    this.getUserFriendList();
    //2.获取好友申请列表
    this.getFriendApplyList();
    //3.定时查询好友申请状态
    this.setTimeFriendApplyList();
    //打印当前用户id
    console.log("当前的用户id为：" + this.$store.state.user.userid);
  },
  beforeDestroy() {
    clearInterval(this.getFriendApplyListStatus);
  }
};
</script>

<style scoped lang="less">
  .hallBox {
    display: flex;
    margin: 30px;
    //左侧
    .hallLeft {
      width: 420px;
      background: #fff;
      border-radius: 20px;
      margin-right: 20px;
      .newFriendBox {
        padding: 10px 25px 0 25px;
        font-size: 18px;
        color: #999;
      }
      .newFriendImgBox {
        margin: 10px 0 10px 0;
        padding: 20px 0 20px 25px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;
        border-bottom: 1px solid #E9EDF7;
        position: relative;
        box-sizing: border-box;
        border-right: 4px solid #fff;
        .newFriendImg {
          width: 58px;
          height: 58px;
          border-radius: 8px;
          background: #5570F1;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20px;
        }
        .newFriendText {  
          color: #333;
          font-size: 18px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex: 1;
          span {
            background: #5570F1;
            color: #fff;
            line-height: 24px;
            font-size: 12px;
            width: 24px;
            height: 24px;
            text-align: center;
            border-radius: 50%;
            display: block;
            margin-right: 20px;
          }
        }
      }
      .newFriendIActive {
        border-right: 4px solid #5570F1 !important;
        background: #F5F7FD
      }
      .searchFriendBox {
        position: absolute;
        width: 280px;
        border-radius: 8px;
        top: 0;
        right: -300px;
        background: #fff;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        z-index: 100;
        box-sizing: border-box;
        padding: 30px 0;
        .searchFriendItem {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          border-bottom: 1px solid #E9EDF7;
          padding: 0 20px 30px 20px;
          .searchFriendAvatar {
            img {
              width: 66px;
              height: 66px;
              border-radius: 50%;
            }
            margin-right: 15px;
          }
          .searchFriendInfo {
            flex: 1;
            .searchFriendName {
              display: flex;
              align-items: center;
              .gender {
                img {
                  width: 12px;
                  height: 12px;
                }
              }
              img {
                width: 18px;
                height: 18px;
                cursor: pointer;
              }
              .searchFriendNameText {
                font-size: 18px;
                width: 120px;
                height: 28px;
                line-height: 28px;
                white-space: nowrap; 
                overflow: hidden; 
                text-overflow: ellipsis;
              }
            }
            .searchFriendPhone {
              font-size: 14px;
              color: #999;
              margin-top: 10px;
            }
          }
        }
        .searchFriendLineBox {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          padding: 20px;
          border-bottom: 1px solid #E9EDF7;
          .searchFriendLineTitle{
            font-size: 16px;
            color: #999999;
            width: 90px;
          }
          .searchFriendLineContent{
            font-size: 16px;
            color: #333;
            flex: 1;
            .searchFriendLineContentItem{
              display: flex;
              align-items: center;
              justify-content: space-between;
            }
          }
        }
        .searchFriendButton {
          padding:40px 0 10px 0;
          text-align: center;
          .searchFriendButtonItem {
            font-size: 14px;
            color: #5570F1;
            img {
              width: 30px;
              height: 30px;
              margin-bottom: 5px;
            }
          }
        }
      }
      .userListTitle {
        padding: 15px 25px;
        font-size: 18px;
        color: #999;
      }
      .searchBox {
        padding-left: 25px;
        padding-right: 25px;
        padding-bottom: 20px;
      }
      .userListBox {
        padding: 15px 0;
        overflow-y: auto;
        height: 380px;
        .active {
          background: #F5F7FD;
          box-sizing: border-box;
          border-right: 4px solid #5570F1 !important;
        }
        .userItem {
          padding: 0 21px 0 25px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 90px;
          box-sizing: border-box;
          border-right: 4px solid #fff;
          cursor: pointer;
          .userAvatar {
            img {
              width: 58px;
              height: 58px;
              border-radius: 50%;
            }
          }
          .userInfo {
            flex: 1;
            box-sizing: border-box;
            padding-left: 15px;
            .userName {
              display: flex;
              align-items: center;
              justify-content: space-between;
              .userNameText {
                font-size: 18px;
                font-weight: bold;
                width: 240px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #333;
              }
              .userMessageNum {
                font-size: 12px;
                color: #333;
                width: 24px;
                height: 24px;
                line-height: 24px;
                text-align: center;
                border-radius: 50%;
                background: #FFCC91;
                font-weight: bold;
              }
            }
            .userMessage {
              display: flex;
              align-items: center;
              justify-content: space-between;
              .userMessageText {
                display: block;
                width: 240px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 14px;
                color: #999999;
              }
              .userMessageTime {
                font-size: 14px;
                color: #999999;
              }
            }
          }
        }
      }
    }
    //右侧
    .hallRight {
      flex: 1;
      background: #fff;
      border-radius: 20px;
      position: relative;
      height: 740px;
      .rightNewFriendBox {
        height: 126px;
        border-bottom: 1px solid #E9EDF7;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 30px 40px;
        .rightNewFriendItem { 
          display: flex;
          align-items: center; 
          .rightNewFriendAvatar {
            margin-right: 15px;
            img {
              width: 66px;
              height: 66px;
              border-radius: 50%;
            }
          }
          .rightNewFriendInfo {
            .rightNewFriendName {
              font-size: 18px; 
              margin-bottom: 7px;
            }
            .rightNewFriendPhone {
              font-size: 18px;
              color: #999;
            }
          }
        }
        .rightNewFriendStatus {
          .rightNewFriendStatus1 {
            font-size: 16px;
            color: #999;
            width: 69px;
            text-align: center;
          }
        }
      }
      .userInfoMainBox {
        padding: 40px;
        max-width: 900px;
        margin: 100px auto 0 auto;
        .userInfoMainItem {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          border-bottom: 1px solid #E9EDF7;
          padding: 0 20px 30px 20px;
          .userInfoMainAvatar {
            img {
              width: 66px;
              height: 66px;
              border-radius: 50%;
            }
            margin-right: 15px;
          }
          .userInfoMainInfo {
            flex: 1;
            .userInfoMainName {
              display: flex;
              align-items: center;
              justify-content: space-between;
              img {
                width: 18px;
                height: 18px;
                cursor: pointer;
              }
              .userInfoMainNameText {
                font-size: 18px;
                width: 240px;
                height: 28px;
                line-height: 28px;
                white-space: nowrap; 
                overflow: hidden; 
                text-overflow: ellipsis;
              }
            }
            .userInfoMainPhone {
              font-size: 14px;
              color: #999;
              margin-top: 10px;
            }
          }
        }
        .userInfoMainLineBox {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          padding: 20px;
          border-bottom: 1px solid #E9EDF7;
          .userInfoMainLineTitle{
            font-size: 16px;
            color: #999999;
            width: 90px;
          }
          .userInfoMainLineContent{
            font-size: 16px;
            color: #333;
            flex: 1;
            .userInfoMainLineContentItem{
              display: flex;
              align-items: center;
              justify-content: space-between;
              cursor: pointer;
            }
          }
        }
        .userInfoMainButton {
          padding:40px 0 10px 0;
          text-align: center;
          .userInfoMainButtonItem {
            font-size: 14px;
            color: #5570F1;
            img {
              width: 30px;
              height: 30px;
              margin-bottom: 5px;
            }
          }
        }
      }
      .ifHallRigthNoMessage {
        color: #CCCCCC;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        height: 740px;
        line-height: 740px;
      }
      .userName {
        font-size: 20px;
        color: #333;
        font-weight: bold;
      }
      .ifNotice {
        padding-bottom: 60px !important;  
      }
      .UserNameBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 40px 30px 30px 30px;
        border-bottom: 1px solid #E7E7E7;
        position: relative;
        .moreIcon {
          cursor: pointer;
        }
        .groupNotice {
          position: absolute;
          height: 40px;
          line-height: 40px;
          font-size: 16px;
          background:url('../../assets/chat/notice.png') no-repeat 10px center #F6F8FE;
          left: 30px;
          box-sizing: border-box;
          padding-left: 40px;
          bottom: 10px;
          color: #999999;
          border-radius: 10px;
          padding-right: 10px;
          width: 400px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
  //弹出框底部按钮
  .footerButtonBox {
    padding-top: 40px;
    text-align: center;
  }
  .friendWindowText {
    font-size: 16px;
    color: #333;
    span {
      color: #5570F1;
      font-weight: bold;
    }
  }
  //表单微调 start------------------------------------------------------------>*/
  ::v-deep .custom-form-item > .el-form-item__label {
    line-height: 140px !important;
  }
  ::v-deep .custom-textarea .el-textarea__inner {
    resize: none; /* 禁止用拖拽调整大小 */
  }
  ::v-deep .custom-align-right .el-form-item__label {
    text-align: right; /* 设置标签文字右对齐 */
  }
  ::v-deep .el-select-group__title {
    color: #909399;
  }
  ::v-deep .el-select {
    width: 100% !important;
  }
  ::v-deep .el-tabs__active-bar{
    height: 1px !important;
  }
  ::v-deep .el-tabs__nav-wrap::after {
    height:1px !important;
  }
  ::v-deep .el-tabs__header {
    margin-bottom: 0 !important;
  }
</style>