|
|
@@ -6,13 +6,44 @@
|
|
|
<hallTitle :name="tableTitleName" @addUser="creatGroup" />
|
|
|
<!--添加好友 end------------------------------------------>
|
|
|
<!--搜索 start------------------------------------------>
|
|
|
- <div class="searchBox">
|
|
|
- <el-input
|
|
|
- placeholder="请输入内容"
|
|
|
- prefix-icon="el-icon-search"
|
|
|
- v-model="searchConversation">
|
|
|
- </el-input>
|
|
|
+ <div class="searchBoxMain">
|
|
|
+ <div class="searchBox">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入内容"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ v-model="searchConversation"
|
|
|
+ @keyup.enter.native="searchUserConversation"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="searchFriendBox" v-if="searchConversationStatus">
|
|
|
+ <div class="searchFriendClose">
|
|
|
+ <div @click="closeSearchConversation" class="rightSlideBoxCloseIcon">
|
|
|
+ <i class="el-icon-close"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="searchFriendItem">
|
|
|
+ <div class="searchFriendAvatar" v-if="selectConversationItem.group_name==null">
|
|
|
+ <img :src="selectConversationItem.avatar">
|
|
|
+ </div>
|
|
|
+ <div class="searchFriendAvatar" v-else>
|
|
|
+ <img src="@/assets/chat/user/group.jpg">
|
|
|
+ </div>
|
|
|
+ <div class="searchFriendInfo">
|
|
|
+ <div class="searchFriendName">
|
|
|
+ <div class="searchFriendNameText" v-if="selectConversationItem.group_name==null">{{selectConversationItem.user_name}}</div>
|
|
|
+ <div class="searchFriendNameText" v-else>{{selectConversationItem.group_name}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="searchFriendPhone" v-if="selectConversationItem.group_name==null">账号：{{selectConversationItem.user_name}}</div>
|
|
|
+ <div class="searchFriendPhone" v-else>多人群组</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="searchFriendButton">
|
|
|
+ <el-button type="primary" @click="selectConversation(selectConversationItem)">发送消息</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
<!--搜索 end------------------------------------------>
|
|
|
<div class="userListBox">
|
|
|
<!--普通用户 start------------------------------------------>
|
|
|
@@ -176,13 +207,25 @@
|
|
|
<img src="@/assets/chat/user/user.png">
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
<div class="sendMessageBox">
|
|
|
<div class="sendMessageTools">
|
|
|
- <img src="@/assets/chat/send_img.png">
|
|
|
- <img src="@/assets/chat/send_file.png">
|
|
|
- <img src="@/assets/chat/send_message.png" @click="fileWindowStatus=true">
|
|
|
+ <!--上传文件 start-->
|
|
|
+ <div class="toolsBigBox">
|
|
|
+ <div class="toolsBox">
|
|
|
+ <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload">
|
|
|
+ <img src="@/assets/chat/send_img.png">
|
|
|
+ </el-upload>
|
|
|
+ <img src="@/assets/chat/send_file.png">
|
|
|
+ <img src="@/assets/chat/send_message.png" @click="fileWindowStatus=true">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="fileBox" v-if="sendMessage.img.imgUrl!=''">
|
|
|
+ <img :src="sendMessage.img.imgUrl">
|
|
|
+ <div class="fileBoxText">{{ sendMessage.img.oldFileName }}</div>
|
|
|
+ <div><i class="el-icon-close"></i></div>
|
|
|
+ </div>
|
|
|
+ <!--上传文件 end-->
|
|
|
</div>
|
|
|
<div class="sendMessageInput">
|
|
|
<el-input
|
|
|
@@ -275,7 +318,7 @@
|
|
|
</div> -->
|
|
|
</div>
|
|
|
|
|
|
- <div class="rightSlideUserItem">
|
|
|
+ <div class="rightSlideUserItem" @click="editGroupMember">
|
|
|
<div class="rightSlideUserItemIcon">
|
|
|
<div class="addUserIcon">
|
|
|
<i class="el-icon-plus"></i>
|
|
|
@@ -550,7 +593,7 @@
|
|
|
<div><img src="@/assets/chat/user/user.png"></div>
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
- <el-tab-pane label="日期" name="date">
|
|
|
+ <!-- <el-tab-pane label="日期" name="date">
|
|
|
<div class="fileWindowDateBox">
|
|
|
<el-date-picker
|
|
|
v-model="time"
|
|
|
@@ -595,7 +638,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </el-tab-pane>
|
|
|
+ </el-tab-pane> -->
|
|
|
</el-tabs>
|
|
|
<!--聊天记录选项卡 end------------------------------------------------------------>
|
|
|
</div>
|
|
|
@@ -665,6 +708,81 @@
|
|
|
</el-dialog>
|
|
|
<!--加入群聊弹出框 end------------------------------------------------------------>
|
|
|
|
|
|
+
|
|
|
+ <!--编辑群成员弹出框 start------------------------------------------------------------>
|
|
|
+ <!--编辑时 左侧显示的是好友列表 右侧显示的是群成员-->
|
|
|
+ <el-dialog :visible.sync="groupEditWindowStatus" :close-on-click-modal="false" width="1028px" @closed="cancelEditGroupMember">
|
|
|
+ <div class="searchWindow">
|
|
|
+ <div class="searchWindowLeft">
|
|
|
+ <div class="searchUserWindowBox">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入内容"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ v-model="searchGroup"
|
|
|
+ @keyup.enter.native="searchGroupUser">
|
|
|
+ </el-input>
|
|
|
+ <div class="searchFriendBox" v-if="groupEditMainWindowStatus">
|
|
|
+ <div class="searchFriendClose">
|
|
|
+ <div @click="closeAddGroupUserWindow" class="rightSlideBoxCloseIcon">
|
|
|
+ <i class="el-icon-close"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="searchFriendItem">
|
|
|
+ <div class="searchFriendAvatar">
|
|
|
+ <img :src="groupSearchUser.avatar">
|
|
|
+ </div>
|
|
|
+ <div class="searchFriendInfo">
|
|
|
+ <div class="searchFriendName">
|
|
|
+ <div class="searchFriendNameText">{{groupSearchUser.user_name}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="searchFriendPhone">账号：{{groupSearchUser.user_name}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="searchFriendButton">
|
|
|
+ <el-button v-if="groupSearchUser.status==false" type="primary" @click="addGroupUser(groupSearchUser)">添加</el-button>
|
|
|
+ <el-button v-else type="warning" @click="addGroupUser(groupSearchUser)">移除</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <!--搜索用户 start------------------------------------------------------------>
|
|
|
+ <div class="searchUserBox">
|
|
|
+ <!-- <div class="searchNameEnglish">A</div> -->
|
|
|
+ <div class="searchUserItem" v-for="(item,index) in friendsList" :key="index">
|
|
|
+ <el-checkbox v-model="item.status" @change="changeSelectFriends(item)"></el-checkbox>
|
|
|
+ <img :src="item.avatar">
|
|
|
+ <div class="searchUserName" v-if="item.remark!=null">{{item.remark}}</div>
|
|
|
+ <div class="searchUserName" v-else>{{item.user_name}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--搜索用户 end------------------------------------------------------------>
|
|
|
+ </div>
|
|
|
+ <div class="searchWindowRight">
|
|
|
+ <div class="searchWindowRightTop">
|
|
|
+ <div class="searchWindowRightTitle">编辑群聊</div>
|
|
|
+ <div class="searchWindowRightNum">已选择{{groupUserList.length}}个联系人</div>
|
|
|
+ </div>
|
|
|
+ <div class="searchWindowUserList">
|
|
|
+ <div class="searchWindowUserItem" v-for="(item,index) in groupUserList" :key="index" v-if="item.status==true">
|
|
|
+ <div class="searchWindowUserIcon">
|
|
|
+ <img :src="item.avatar">
|
|
|
+ <div class="searchWindowDeleteUser" @click="editRemoveGroupUser(item.user_id)" v-if="Number(creatorId)==Number(myUserId)&&item.user_id!=myUserId">
|
|
|
+ <i class="el-icon-close"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="searchWindowUserName" v-if="item.remark!=null">{{item.remark}}</div>
|
|
|
+ <div class="searchWindowUserName" v-else>{{item.user_name}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="searchWindowFooter">
|
|
|
+ <el-button type="info" @click="cancelEditGroupMember">取消</el-button>
|
|
|
+ <el-button type="primary" @click="saveEditGroupMember" :disabled="groupUserList.filter(item=>item.status).length<2">完成</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!--编辑群成员弹出框 end------------------------------------------------------------>
|
|
|
+
|
|
|
<!-- <div class="layerBox">
|
|
|
<el-container style="height: 100vh;">
|
|
|
<el-aside width="300px" style="background: #f2f2f2;">
|
|
|
@@ -752,6 +870,8 @@ export default {
|
|
|
|
|
|
//2.会话列表 start---------------------------------------->
|
|
|
conversationList:[],//会话列表
|
|
|
+ selectConversationItem:{},//选择会话
|
|
|
+ searchConversationStatus:false,//搜索会话状态
|
|
|
chatrecords:[],//聊天记录
|
|
|
ifTop:false,//是否为置顶
|
|
|
searchConversation:'',//搜索会话
|
|
|
@@ -771,12 +891,15 @@ export default {
|
|
|
editGroupNoticeWindow:false,//编辑群公告弹出框
|
|
|
editGroupNameWindow:false,//编辑群名称弹出框
|
|
|
addGroupWindow:false,//加入群聊弹出框
|
|
|
- groupId:'',//准备加入群聊的id
|
|
|
+ groupEditWindowStatus:false,//编辑群成员弹出框
|
|
|
+ groupEditMainWindowStatus:false,//编辑弹框中搜索人员
|
|
|
+ groupId:'',//当前编辑的群聊的id
|
|
|
friendsList:[],//好友列表
|
|
|
searchGroup:'',//搜索群聊
|
|
|
groupUserList:[],//群成员列表
|
|
|
groupInfo:{},//群设置信息
|
|
|
creatorId:'',//群主id
|
|
|
+ groupSearchUser:{},//搜索群成员
|
|
|
//4.群聊 end---------------------------------------->
|
|
|
|
|
|
//5.用户详情 start---------------------------------------->
|
|
|
@@ -798,6 +921,16 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
//7.加好友 end---------------------------------------->
|
|
|
+
|
|
|
+ //8.发消息 start---------------------------------------->
|
|
|
+ sendMessage:{
|
|
|
+ img:{
|
|
|
+ imgUrl:'',//图片地址
|
|
|
+ oldFileName:"",//文件名
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ //8.发消息 end---------------------------------------->
|
|
|
|
|
|
//老刘的码 start---------------------------------------->
|
|
|
// activeConversation: null,
|
|
|
@@ -828,6 +961,8 @@ export default {
|
|
|
},
|
|
|
//1.2选择会话
|
|
|
selectConversation(item){
|
|
|
+ //关闭搜索会话搜索框
|
|
|
+ this.closeSearchConversation();
|
|
|
//清理单聊状态
|
|
|
this.conversationList.forEach(conversation => {
|
|
|
conversation.status = (conversation.receiver_id === item.receiver_id) ? 1 : 0;
|
|
|
@@ -855,6 +990,29 @@ export default {
|
|
|
this.$message.error('获取聊天记录失败!')
|
|
|
})
|
|
|
},
|
|
|
+ //1.4搜索会话
|
|
|
+ searchUserConversation(){
|
|
|
+ this.selectConversationItem = {};
|
|
|
+ let flag = false; //是否找到会话
|
|
|
+ //当group_name等于搜索内容的时候，选择会话
|
|
|
+ for(let item of this.conversationList){
|
|
|
+ if(item.group_name==this.searchConversation||item.user_name==this.searchConversation){
|
|
|
+ this.selectConversationItem = item;
|
|
|
+ flag = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //如果没有找到会话 就提示没有找到
|
|
|
+ if(!flag){
|
|
|
+ this.$message.error('没有找到该会话!')
|
|
|
+ }else{
|
|
|
+ this.searchConversationStatus = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //1.5关闭搜索会话
|
|
|
+ closeSearchConversation(){
|
|
|
+ this.selectConversationItem = {};
|
|
|
+ this.searchConversationStatus = false;
|
|
|
+ },
|
|
|
//1.会话列表 end---------------------------------------->
|
|
|
|
|
|
//2.群聊 start---------------------------------------->
|
|
|
@@ -966,6 +1124,9 @@ export default {
|
|
|
//2.10获取群成员
|
|
|
getGroupMember(group_id){
|
|
|
this.$store.dispatch('chat/getGroupMembers',{group_id:group_id}).then(res=> {
|
|
|
+ for(let item of res.data){
|
|
|
+ item.status = true; //默认选中
|
|
|
+ }
|
|
|
this.groupUserList = res.data;
|
|
|
}).catch(() => {
|
|
|
this.$message.error('获取群成员信息失败!')
|
|
|
@@ -1078,6 +1239,143 @@ export default {
|
|
|
this.$message.error('编辑群公告失败!')
|
|
|
})
|
|
|
},
|
|
|
+ //2.17回显群内成员
|
|
|
+ editGroupMember(){
|
|
|
+ //1.打开编辑窗口
|
|
|
+ this.groupEditWindowStatus = true;
|
|
|
+ //2.获得好友列表
|
|
|
+ this.$store.dispatch('chat/getFriendsList',{user_id:this.myUserId}).then(res=> {
|
|
|
+ //3.设置成未选中
|
|
|
+ for(let item of res.data){
|
|
|
+ item.status = false; //默认未选中
|
|
|
+ }
|
|
|
+ this.friendsList = res.data;
|
|
|
+ console.log(this.friendsList)
|
|
|
+ console.log(this.groupUserList)
|
|
|
+ //4.判断一下groupUserList是否包含friendsList中的成员，如果包含，就把friendsList中的成员status设置为true
|
|
|
+ this.friendsList.forEach(item => {
|
|
|
+ console.log(item.user_id)
|
|
|
+ if(this.groupUserList.find(groupItem => groupItem.user_id == item.friend_id)){
|
|
|
+ item.status = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ console.log(this.friendsList)
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.error('获取好友列表失败!')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //2.18编辑群成员
|
|
|
+ changeSelectFriends(item) {
|
|
|
+ // 检查 groupUserList 是否包含 item
|
|
|
+ const index = this.groupUserList.findIndex(i => i.user_id == item.friend_id);
|
|
|
+ // 如果包含，就删除这个 item；否则，添加到 groupUserList
|
|
|
+ // 注意不能直接把friend_id放进去,因为最后编辑保存的时候取的是user_id,这里要传一下值
|
|
|
+ if (index !== -1) {
|
|
|
+ this.groupUserList.splice(index, 1);
|
|
|
+ } else {
|
|
|
+ item.user_id = item.friend_id;
|
|
|
+ this.groupUserList.push(item);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //2.19取消编辑群成员
|
|
|
+ cancelEditGroupMember(){
|
|
|
+ this.groupEditWindowStatus = false;
|
|
|
+ this.getGroupMember(this.groupId);
|
|
|
+ },
|
|
|
+ //2.20保存编辑群成员
|
|
|
+ saveEditGroupMember(){
|
|
|
+ let groupUser = []
|
|
|
+
|
|
|
+ // console.log(this.myUserId)
|
|
|
+ // console.log(this.groupUserList)
|
|
|
+ //取出所有选择的user_id且不能与自己的id相同
|
|
|
+ for(let item of this.groupUserList){
|
|
|
+ if(Number(item.user_id) != Number(this.myUserId)){
|
|
|
+ groupUser.push(item.user_id);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ groupUser = groupUser.join(',');
|
|
|
+ //console.log(groupUser)
|
|
|
+ let data = {
|
|
|
+ group_id:this.groupId,
|
|
|
+ group_member:groupUser
|
|
|
+ }
|
|
|
+ this.$store.dispatch('chat/updateGroupMembers',data).then(res=> {
|
|
|
+ this.$message.success('群成员保存成功!')
|
|
|
+ this.groupEditWindowStatus = false;
|
|
|
+ this.getGroupMember(this.groupId);
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.error('群成员保存失败!')
|
|
|
+ this.groupEditWindowStatus = false;
|
|
|
+ this.getGroupMember(this.groupId);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //2.21搜索群成员
|
|
|
+ searchGroupUser(){
|
|
|
+ this.groupSearchUser = {};
|
|
|
+ let flag = false; //是否找到成员
|
|
|
+ for(let item of this.friendsList){
|
|
|
+ if(item.user_name==this.searchGroup||item.remark==this.searchGroup){
|
|
|
+ this.groupSearchUser = item;
|
|
|
+ flag = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(this.searchGroup)
|
|
|
+ console.log(this.friendsList)
|
|
|
+ console.log(flag)
|
|
|
+ //this.searchGroup 搜索的内容
|
|
|
+ //this.groupEditWindowStatus 弹出框状态
|
|
|
+ //this.groupSearchUser 搜索出来的成员
|
|
|
+ if(!flag){
|
|
|
+ this.$message.error('没有找到该成员!')
|
|
|
+ }else{
|
|
|
+ this.groupEditMainWindowStatus = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ //2.22添加该群成员
|
|
|
+ addGroupUser(item){
|
|
|
+ item.user_id = item.friend_id;
|
|
|
+ console.log(item)
|
|
|
+ //找到friendsList中的该成员，把status设置为相反的值
|
|
|
+ for(let item of this.friendsList){
|
|
|
+ if(item.user_id==this.groupSearchUser.user_id){
|
|
|
+ item.status = !item.status;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 找到groupUserList中是否存在该成员，如果存在就删除，没有不存在就添加
|
|
|
+ const index = this.groupUserList.findIndex(member => member.user_id === item.user_id);
|
|
|
+ if (index !== -1) {
|
|
|
+ // 如果存在，删除该成员
|
|
|
+ this.groupUserList.splice(index, 1);
|
|
|
+ } else {
|
|
|
+ // 如果不存在，添加该成员
|
|
|
+ this.groupUserList.push(item);
|
|
|
+ }
|
|
|
+ //完成后关闭弹出框
|
|
|
+ this.closeAddGroupUserWindow();
|
|
|
+ },
|
|
|
+ //2.23 关闭添加成员弹出框
|
|
|
+ closeAddGroupUserWindow(){
|
|
|
+ this.searchGroup = "";
|
|
|
+ this.groupSearchUser = {};
|
|
|
+ this.groupEditMainWindowStatus = false;
|
|
|
+ },
|
|
|
+ //2.24 编辑移除群成员
|
|
|
+ editRemoveGroupUser(id){
|
|
|
+ console.log(id)
|
|
|
+ //移除this.groupUserList中user_id与id一致的
|
|
|
+ const index = this.groupUserList.findIndex(member => member.user_id === id);
|
|
|
+ if (index !== -1) {
|
|
|
+ this.groupUserList.splice(index, 1);
|
|
|
+ }
|
|
|
+ //找到friendsList中user_id与id一致的，把status设置为false
|
|
|
+ for(let item of this.friendsList){
|
|
|
+ if(item.friend_id==id){
|
|
|
+ item.status = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
//2.群聊 end---------------------------------------->
|
|
|
|
|
|
//3.全局应用 start---------------------------------------->
|
|
|
@@ -1093,6 +1391,47 @@ export default {
|
|
|
},
|
|
|
//3.全局应用 end---------------------------------------->
|
|
|
|
|
|
+ //4.会话框 start---------------------------------------->
|
|
|
+ //4.1上传文件
|
|
|
+ beforeAvatarUpload(file) {
|
|
|
+ const isJPG = file.type === 'image/jpeg';
|
|
|
+ const isPNG = file.type === 'image/png';
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
+
|
|
|
+ if (!isJPG && !isPNG) {
|
|
|
+ this.$message.error('发送的图片只能是 JPG 或 PNG 格式!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error('发送的图片大小不能超过 2MB!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append('file', file);
|
|
|
+
|
|
|
+ this.$store.dispatch('pool/uploadFile',formData).then(res=> {
|
|
|
+ // this.imgUrl = res.data.imgUrl;//显示缩略图
|
|
|
+ // this.form.imgurl = res.data.imgUrl;//提供表单地址
|
|
|
+ this.sendMessage.img.imgUrl = res.data.imgUrl;//获取上传的图片地址
|
|
|
+ this.sendMessage.img.oldFileName = res.data.oldFileName;
|
|
|
+ console.log(res.data.imgUrl)
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '网络错误，请重试！'
|
|
|
+ });
|
|
|
+ })
|
|
|
+
|
|
|
+ // 阻止默认的上传行为
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ //4.会话框 end---------------------------------------->
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
//老刘的代码 start---------------------------------------->
|
|
|
// selectConversation(conversation) {
|
|
|
// this.activeConversation = conversation;
|
|
|
@@ -1227,11 +1566,126 @@ export default {
|
|
|
background: #fff;
|
|
|
border-radius: 20px;
|
|
|
margin-right: 20px;
|
|
|
- .searchBox {
|
|
|
- padding-left: 25px;
|
|
|
- padding-right: 25px;
|
|
|
- padding-bottom: 20px;
|
|
|
+ .searchBoxMain {
|
|
|
+ position: relative;
|
|
|
+ .searchFriendClose {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding-right: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ .rightSlideBoxCloseIcon {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ text-align: center;
|
|
|
+ background: #EFEFEF;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .searchBox {
|
|
|
+ padding-left: 25px;
|
|
|
+ padding-right: 25px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ }
|
|
|
+ .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: 20px 0 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
.userListBox {
|
|
|
padding: 15px 0;
|
|
|
overflow-y: auto;
|
|
|
@@ -1503,11 +1957,44 @@ export default {
|
|
|
box-sizing: border-box;
|
|
|
height: 276px;
|
|
|
.sendMessageTools {
|
|
|
- img {
|
|
|
- width: 36px;
|
|
|
- height: 36px;
|
|
|
- margin-right: 30px;
|
|
|
- cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .toolsBigBox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .toolsBox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ img {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ margin-right: 30px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fileBox {
|
|
|
+ width: 180px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border: 1px solid #E9EDF7;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ .fileBoxText {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ width: 110px;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 40px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.sendMessageInput {
|
|
|
@@ -1899,6 +2386,120 @@ export default {
|
|
|
box-sizing: border-box;
|
|
|
border-right: 1px solid #E9EDF7;
|
|
|
padding-right: 25px;
|
|
|
+ .searchUserWindowBox {
|
|
|
+ position: relative;
|
|
|
+ .searchFriendClose {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding-right: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ .rightSlideBoxCloseIcon {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ text-align: center;
|
|
|
+ background: #EFEFEF;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .searchFriendBox {
|
|
|
+ position: absolute;
|
|
|
+ width: 280px;
|
|
|
+ border-radius: 8px;
|
|
|
+ top: 0;
|
|
|
+ right: -280px;
|
|
|
+ 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: 20px 0 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.searchUserBox {
|
|
|
padding-top: 30px;
|
|
|
.searchNameEnglish {
|
|
|
@@ -1945,6 +2546,8 @@ export default {
|
|
|
height: 400px;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
+ align-items: flex-start;
|
|
|
+ align-content: flex-start;
|
|
|
.searchWindowUserItem {
|
|
|
width:20%;
|
|
|
text-align: center;
|
Sean