|
@@ -1,1065 +1,1064 @@
|
|
|
<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 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>
|
|
|
- <!--搜索 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 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 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 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> -->
|
|
|
- <!-- <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 class="searchFriendPhone">账号:{{searchFriendList.user_name}}</div>
|
|
|
</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 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="newFriendText" v-else>
|
|
|
- 新的朋友
|
|
|
- <span v-if="userApplyList.length>0">{{userApplyList.length}}</span>
|
|
|
+ <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>
|
|
|
- <!--用户列表 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 class="searchFriendButton">
|
|
|
+ <div class="searchFriendButtonItem">
|
|
|
+ <img src="@/assets/chat/sendmessage.png">
|
|
|
+ <div>发消息</div>
|
|
|
</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>
|
|
|
+ <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>
|
|
|
- <!--用户列表 end------------------------------------------>
|
|
|
</div>
|
|
|
- <div class="hallRight" v-if="pagestatus==1||pagestatus==4">
|
|
|
- <div class="ifHallRigthNoMessage">恒星管理平台</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="hallRight" v-if="pagestatus==2">
|
|
|
- <div class="UserNameBox">
|
|
|
- <div class="userName">新的朋友</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="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 class="rightNewFriendStatus">
|
|
|
+ <div class="rightNewFriendStatus2">
|
|
|
+ <el-button type="primary" @click="openWindow(item)">接受</el-button>
|
|
|
</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="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 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="rightNewFriendStatus">
|
|
|
- <div class="rightNewFriendStatus1">已接受</div>
|
|
|
+ <div class="rightNewFriendInfo">
|
|
|
+ <div class="rightNewFriendName">我是某某某</div>
|
|
|
+ <div class="rightNewFriendPhone">15210211200</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 class="rightNewFriendStatus">
|
|
|
+ <div class="rightNewFriendStatus2">
|
|
|
+ <el-button type="primary" @click="friendWindowStatus=true">接受</el-button>
|
|
|
</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> -->
|
|
|
- </div>
|
|
|
- <div class="hallRight" v-if="pagestatus==3">
|
|
|
- <div class="userInfoMainBox">
|
|
|
- <div class="userInfoMainItem">
|
|
|
- <div class="userInfoMainAvatar">
|
|
|
- <img :src="friendInfo.avatar" v-if="friendInfo.avatar!=''">
|
|
|
- <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
- </div>
|
|
|
- <div class="userInfoMainInfo">
|
|
|
- <div class="userInfoMainName">
|
|
|
- <div class="userInfoMainNameText" v-if="friendInfo.nickname!=null&&friendInfo.nickname!=''">{{friendInfo.nickname}}</div>
|
|
|
- <div class="userInfoMainNameText" v-else>{{friendInfo.user_name}}</div>
|
|
|
- </div>
|
|
|
- <div class="userInfoMainPhone">账号:{{friendInfo.user_name}}</div>
|
|
|
+ <div class="userInfoMainInfo">
|
|
|
+ <div class="userInfoMainName">
|
|
|
+ <div class="userInfoMainNameText" v-if="friendInfo.nickname!=null&&friendInfo.nickname!=''">{{friendInfo.nickname}}</div>
|
|
|
+ <div class="userInfoMainNameText" v-else>{{friendInfo.user_name}}</div>
|
|
|
</div>
|
|
|
+ <div class="userInfoMainPhone">账号:{{friendInfo.user_name}}</div>
|
|
|
</div>
|
|
|
- <div class="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 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 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="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> -->
|
|
|
- <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>
|
|
|
+ <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>
|
|
|
- <!--发送好友申请弹出框 start------------------------------------------------------------>
|
|
|
- <el-dialog :visible.sync="addFriendWindowStatus" title="朋友申请" :close-on-click-modal="false" width="420px">
|
|
|
+ </div>
|
|
|
+ <!--发送好友申请弹出框 start------------------------------------------------------------>
|
|
|
+ <el-dialog :visible.sync="addFriendWindowStatus" title="朋友申请" :close-on-click-modal="false" width="420px">
|
|
|
+ <div>
|
|
|
<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>
|
|
|
+ <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>
|
|
|
- </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 class="footerButtonBox">
|
|
|
+ <el-button type="info" @click="addFriendWindowStatus=false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="addMyFriend">确定</el-button>
|
|
|
</div>
|
|
|
- </el-dialog>
|
|
|
- <!--请求验证弹出框 end------------------------------------------------------------>
|
|
|
- <!--修改备注弹出框 start------------------------------------------------------------>
|
|
|
- <el-dialog :visible.sync="editWindowStatus" title="修改备注" :close-on-click-modal="false" width="420px">
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!--发送好友申请弹出框 end------------------------------------------------------------>
|
|
|
+ <!--请求验证弹出框 start------------------------------------------------------------>
|
|
|
+ <el-dialog :visible.sync="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>
|
|
|
- <div>
|
|
|
- <el-form :model="form" ref="form" autocomplete="off" label-position="left">
|
|
|
- <div class="formDiv">
|
|
|
- <el-form-item label="备注名" :label-width="formLabelWidth" class="custom-align-right">
|
|
|
- <el-input v-model="remark" autocomplete="off" placeholder="请输入备注名.."></el-input>
|
|
|
- </el-form-item>
|
|
|
- </div>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <div class="footerButtonBox">
|
|
|
- <el-button type="info" @click="editWindowStatus=false">取消</el-button>
|
|
|
- <el-button type="primary" @click="editFriend">确定</el-button>
|
|
|
- </div>
|
|
|
+ <el-form :model="form" ref="form" autocomplete="off" label-position="left">
|
|
|
+ <div class="formDiv">
|
|
|
+ <el-form-item label="备注名" :label-width="formLabelWidth" class="custom-align-right">
|
|
|
+ <el-input v-model="remark" autocomplete="off" placeholder="请输入备注名.."></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
</div>
|
|
|
- </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();
|
|
|
+ <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:""
|
|
|
},
|
|
|
- //0.全局操作 end------------------------------------------------------------>
|
|
|
- //1.好友列表 start------------------------------------------------------------>
|
|
|
- addUser(){
|
|
|
- this.pagestatus = 4;
|
|
|
+ //3.通过好友申请 end------------------------------------------------------------>
|
|
|
+ //4.编辑好友 start------------------------------------------------------------>
|
|
|
+ friendInfo:{},//好友信息
|
|
|
+ remark:"",//修改的用户备注
|
|
|
+ //4.编辑好友 end------------------------------------------------------------>
|
|
|
+ //5.发送好友申请 start------------------------------------------------------------>
|
|
|
+ addform:{
|
|
|
+ //好友id
|
|
|
+ friend_id:"",
|
|
|
+ //好友申请
|
|
|
+ remark:"",
|
|
|
},
|
|
|
- closeAddUser(){
|
|
|
- this.pagestatus = 2;
|
|
|
- this.searchWindowStatus = false;
|
|
|
- },
|
|
|
- //1.1获取联系人列表
|
|
|
- getUserFriendList(){
|
|
|
- //获取用户身份id
|
|
|
- //const userId = this.$store.state.user.userid;
|
|
|
- this.$store.dispatch('chat/getFriendsList',{}).then(res=> {
|
|
|
- let data = res.data;
|
|
|
- for(let item of data){
|
|
|
- item.status = 0; //默认未选中
|
|
|
- }
|
|
|
- this.userFriendList = data;
|
|
|
- }).catch(() => {
|
|
|
- this.$message.error('获取好友列表失败!')
|
|
|
- })
|
|
|
- },
|
|
|
- //1.2选择联系人
|
|
|
- changeUserItem(id){
|
|
|
+ //5.发送好友申请 end------------------------------------------------------------>
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //0.全局操作 start------------------------------------------------------------>
|
|
|
+ //0.1切换页面状态
|
|
|
+ tabPage(status){
|
|
|
+ this.pagestatus = status;
|
|
|
+ if(status==2){
|
|
|
+ //如果是2 好友列表状态还原
|
|
|
for(let item of this.userFriendList){
|
|
|
- if(item.friend_id == id){
|
|
|
- item.status = 1;
|
|
|
- }else{
|
|
|
- item.status = 0;
|
|
|
- }
|
|
|
+ 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;
|
|
|
- this.remark = res.data.remark;
|
|
|
- }).catch(() => {
|
|
|
- this.$message.error('获得好友身份详情失败!')
|
|
|
- })
|
|
|
-
|
|
|
- },
|
|
|
- //1.3搜索联系人
|
|
|
- searchFriend(){
|
|
|
- //搜索联系人
|
|
|
- this.$store.dispatch('chat/searchFriend',{keyword:this.searchUserName}).then(res=> {
|
|
|
- //获取到好友
|
|
|
- this.searchWindowStatus = false;
|
|
|
- console.log(res);
|
|
|
- if(res.code==200){
|
|
|
- if(res.data.length>0){
|
|
|
- this.searchWindowStatus = true;
|
|
|
- this.searchFriendList = res.data[0];
|
|
|
- //搜出来以后查询两人是否为好友
|
|
|
- this.searchIsFriend(this.searchFriendList)
|
|
|
-
|
|
|
- }else{
|
|
|
- this.$message.error('没有找到该联系人!')
|
|
|
- }
|
|
|
- }else{
|
|
|
- this.$message.error('搜索关键字不能为空!')
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- //1.3搜索好友列表中的好友
|
|
|
- searchOrdFriend(){
|
|
|
- if(this.searchUserListName==""){
|
|
|
- this.$message.error('搜索关键字不能为空!')
|
|
|
- return;
|
|
|
+ }
|
|
|
+ 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{
|
|
|
- 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);
|
|
|
+ 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;
|
|
|
+ this.remark = res.data.remark;
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.error('获得好友身份详情失败!')
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ //1.3搜索联系人
|
|
|
+ searchFriend(){
|
|
|
+ //搜索联系人
|
|
|
+ this.$store.dispatch('chat/searchFriend',{keyword:this.searchUserName}).then(res=> {
|
|
|
+ //获取到好友
|
|
|
+ this.searchWindowStatus = false;
|
|
|
+ console.log(res);
|
|
|
+ if(res.code==200){
|
|
|
+ if(res.data.length>0){
|
|
|
+ this.searchWindowStatus = true;
|
|
|
+ this.searchFriendList = res.data[0];
|
|
|
+ //搜出来以后查询两人是否为好友
|
|
|
+ this.searchIsFriend(this.searchFriendList)
|
|
|
+
|
|
|
}else{
|
|
|
this.$message.error('没有找到该联系人!')
|
|
|
}
|
|
|
+ }else{
|
|
|
+ this.$message.error('搜索关键字不能为空!')
|
|
|
}
|
|
|
- },
|
|
|
- //1.好友列表 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();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //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;
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- //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
|
|
|
+ if(isFriend){
|
|
|
+ this.changeUserItem(this.searchFriendList.friend_id)
|
|
|
+ //console.log(this.searchFriendList);
|
|
|
+ }else{
|
|
|
+ this.$message.error('没有找到该联系人!')
|
|
|
}
|
|
|
- //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
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //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();
|
|
|
}
|
|
|
- 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.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();
|
|
|
})
|
|
|
- },
|
|
|
- //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------------------------------------------------------------>
|
|
|
-
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'warning',
|
|
|
+ message: '已取消删除'
|
|
|
+ });
|
|
|
+ });
|
|
|
},
|
|
|
- mounted() {
|
|
|
- //1.获取联系人列表
|
|
|
- this.getUserFriendList();
|
|
|
- //2.获取好友申请列表
|
|
|
- this.getFriendApplyList();
|
|
|
- //3.定时查询好友申请状态
|
|
|
- this.setTimeFriendApplyList();
|
|
|
- //打印当前用户id
|
|
|
- console.log("当前的用户id为:" + this.$store.state.user.userid);
|
|
|
+ //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('修改备注名失败!')
|
|
|
+ })
|
|
|
},
|
|
|
- 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;
|
|
|
+ //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;
|
|
|
}
|
|
|
- .newFriendImgBox {
|
|
|
- margin: 10px 0 10px 0;
|
|
|
- padding: 20px 0 20px 25px;
|
|
|
+ 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: 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;
|
|
|
+ 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;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 24px;
|
|
|
+ font-size: 12px;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: block;
|
|
|
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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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%;
|
|
|
- display: block;
|
|
|
- margin-right: 20px;
|
|
|
}
|
|
|
+ margin-right: 15px;
|
|
|
}
|
|
|
- }
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
+ .searchFriendInfo {
|
|
|
+ flex: 1;
|
|
|
+ .searchFriendName {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .gender {
|
|
|
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;
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
}
|
|
|
}
|
|
|
- .searchFriendPhone {
|
|
|
- font-size: 14px;
|
|
|
- color: #999;
|
|
|
- margin-top: 10px;
|
|
|
+ img {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .searchFriendLineBox {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
- padding: 20px;
|
|
|
- border-bottom: 1px solid #E9EDF7;
|
|
|
- .searchFriendLineTitle{
|
|
|
- font-size: 16px;
|
|
|
- color: #999999;
|
|
|
- width: 90px;
|
|
|
- }
|
|
|
- .searchFriendLineContent{
|
|
|
- font-size: 16px;
|
|
|
- color: #333;
|
|
|
- flex: 1;
|
|
|
- .searchFriendLineContentItem{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
+ .searchFriendNameText {
|
|
|
+ font-size: 18px;
|
|
|
+ width: 120px;
|
|
|
+ height: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .searchFriendButton {
|
|
|
- padding:40px 0 10px 0;
|
|
|
- text-align: center;
|
|
|
- .searchFriendButtonItem {
|
|
|
+ .searchFriendPhone {
|
|
|
font-size: 14px;
|
|
|
- color: #5570F1;
|
|
|
- img {
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
+ color: #999;
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .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;
|
|
|
+ .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;
|
|
|
}
|
|
|
- .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%;
|
|
|
- }
|
|
|
+ .searchFriendLineContent{
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ flex: 1;
|
|
|
+ .searchFriendLineContentItem{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
}
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .searchFriendButton {
|
|
|
+ padding:40px 0 10px 0;
|
|
|
+ text-align: center;
|
|
|
+ .searchFriendButtonItem {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #5570F1;
|
|
|
+ img {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ margin-bottom: 5px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- //右侧
|
|
|
- .hallRight {
|
|
|
- flex: 1;
|
|
|
- background: #fff;
|
|
|
- border-radius: 20px;
|
|
|
- position: relative;
|
|
|
- height: 740px;
|
|
|
- .rightNewFriendBox {
|
|
|
- height: 126px;
|
|
|
- border-bottom: 1px solid #E9EDF7;
|
|
|
+ .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;
|
|
|
- padding: 30px 40px;
|
|
|
- .rightNewFriendItem {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .rightNewFriendAvatar {
|
|
|
- margin-right: 15px;
|
|
|
- img {
|
|
|
- width: 66px;
|
|
|
- height: 66px;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
+ border-right: 4px solid #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ .userAvatar {
|
|
|
+ img {
|
|
|
+ width: 58px;
|
|
|
+ height: 58px;
|
|
|
+ border-radius: 50%;
|
|
|
}
|
|
|
- .rightNewFriendInfo {
|
|
|
- .rightNewFriendName {
|
|
|
- font-size: 18px;
|
|
|
- margin-bottom: 7px;
|
|
|
- }
|
|
|
- .rightNewFriendPhone {
|
|
|
+ }
|
|
|
+ .userInfo {
|
|
|
+ flex: 1;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 15px;
|
|
|
+ .userName {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .userNameText {
|
|
|
font-size: 18px;
|
|
|
- color: #999;
|
|
|
+ font-weight: bold;
|
|
|
+ width: 240px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ color: #333;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .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;
|
|
|
+ .userMessageNum {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #333;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: center;
|
|
|
border-radius: 50%;
|
|
|
+ background: #FFCC91;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
- 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;
|
|
|
- }
|
|
|
+ .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;
|
|
|
}
|
|
|
- .userInfoMainPhone {
|
|
|
+ .userMessageTime {
|
|
|
font-size: 14px;
|
|
|
- color: #999;
|
|
|
- margin-top: 10px;
|
|
|
+ color: #999999;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //右侧
|
|
|
+ .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%;
|
|
|
}
|
|
|
- .userInfoMainLineContent{
|
|
|
- font-size: 16px;
|
|
|
- color: #333;
|
|
|
- flex: 1;
|
|
|
- .userInfoMainLineContentItem{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .rightNewFriendInfo {
|
|
|
+ .rightNewFriendName {
|
|
|
+ font-size: 18px;
|
|
|
+ margin-bottom: 7px;
|
|
|
+ }
|
|
|
+ .rightNewFriendPhone {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #999;
|
|
|
}
|
|
|
}
|
|
|
- .userInfoMainButton {
|
|
|
- padding:40px 0 10px 0;
|
|
|
+ }
|
|
|
+ .rightNewFriendStatus {
|
|
|
+ .rightNewFriendStatus1 {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #999;
|
|
|
+ width: 69px;
|
|
|
text-align: center;
|
|
|
- .userInfoMainButtonItem {
|
|
|
- font-size: 14px;
|
|
|
- color: #5570F1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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: 30px;
|
|
|
- height: 30px;
|
|
|
- margin-bottom: 5px;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .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 {
|
|
|
+ .userInfoMainLineBox {
|
|
|
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;
|
|
|
+ justify-content: flex-start;
|
|
|
+ padding: 20px;
|
|
|
+ border-bottom: 1px solid #E9EDF7;
|
|
|
+ .userInfoMainLineTitle{
|
|
|
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;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- //弹出框底部按钮
|
|
|
- .footerButtonBox {
|
|
|
- padding-top: 40px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .friendWindowText {
|
|
|
- font-size: 16px;
|
|
|
- color: #333;
|
|
|
- span {
|
|
|
- color: #5570F1;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- //表单微调 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;
|
|
|
+ }
|
|
|
+ //弹出框底部按钮
|
|
|
+ .footerButtonBox {
|
|
|
+ padding-top: 40px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .friendWindowText {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ span {
|
|
|
+ color: #5570F1;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
- </style>
|
|
|
-
|
|
|
+ }
|
|
|
+ //表单微调 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>
|