|
|
@@ -1,4022 +1,5865 @@
|
|
|
-<!-- src/components/ChatPanel.vue -->
|
|
|
-<template>
|
|
|
- <div class="chat-panel">
|
|
|
-
|
|
|
- <div class="chat-header">
|
|
|
- <img class="chat-icon" src="@/assets/chat/chat_line.png" alt="在线会话" />
|
|
|
- <span>测试名称</span>
|
|
|
- <span class="chat-status online"></span>
|
|
|
- <span class="chat-close" @click="$emit('close')">×</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="chat-tabs">
|
|
|
- <span
|
|
|
- v-for="(tab, idx) in tabs"
|
|
|
- :key="tab.key"
|
|
|
- class="tab"
|
|
|
- :class="{ active: activeTab === idx }"
|
|
|
- @click="activeTab = idx"
|
|
|
- >
|
|
|
- <i :class="tab.icon"></i>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="chat-groups">
|
|
|
- <template v-if="activeTab === 0">
|
|
|
- <div class="hallLeft">
|
|
|
- <!--加载中 start------------------------------------------>
|
|
|
- <div class="hallLeftLoading" v-if="hallLeftLoading">
|
|
|
- <div class="hallLeftLoadingIcon">
|
|
|
- <div class="hallLeftLoadingIconItem"><i class="el-icon-loading"></i></div>
|
|
|
- <div class="hallLeftLoadingText">恒星管理平台</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--加载中 end------------------------------------------>
|
|
|
- <!--添加好友 start------------------------------------------>
|
|
|
- <hallTitle :name="tableTitleName" @addUser="creatGroup" />
|
|
|
- <!--添加好友 end------------------------------------------>
|
|
|
- <!--搜索 start------------------------------------------>
|
|
|
- <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" v-if="selectConversationItem.avatar!=null&&selectConversationItem.avatar!=''">
|
|
|
- <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
- </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------------------------------------------>
|
|
|
- <div :class="['userItem', item.status === 1 ? 'active' : '']" v-for="item in conversationList" :key="item.receiver_id">
|
|
|
- <div class="flexItemBox" v-if="item.is_group==0" @click="selectConversation(item)">
|
|
|
- <!--单聊-->
|
|
|
- <div class="userAvatar">
|
|
|
- <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
|
|
|
- <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
- </div>
|
|
|
- <div class="userInfo">
|
|
|
- <div class="userName">
|
|
|
- <div class="userNameText">{{item.user_name}}</div>
|
|
|
- <div class="userMessageNum" v-if="item.num>0">{{item.num}}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--群聊-->
|
|
|
- <div class="flexItemBox" v-else @click="selectGroup(item)">
|
|
|
- <div class="userAvatar">
|
|
|
- <img src="@/assets/chat/user/group.jpg">
|
|
|
- </div>
|
|
|
- <div class="userInfo">
|
|
|
- <div class="userName">
|
|
|
- <div class="userNameText">{{item.group_name}}</div>
|
|
|
- <div class="userMessageNum" v-if="item.num>0">{{item.num}}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--会话列表 end------------------------------------------>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <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>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <el-dialog
|
|
|
- :visible.sync="showDialog"
|
|
|
- width="80%"
|
|
|
- heigth="80%"
|
|
|
- class="chat-dialog"
|
|
|
- >
|
|
|
- <!--右侧菜单 start------------------------------------------------------------>
|
|
|
- <div class="hallRight">
|
|
|
- <!--加载中 start-->
|
|
|
- <div class="hallRightLoading" v-if="hallRightLoading">
|
|
|
- <div class="hallRightLoadingIcon">
|
|
|
- <div class="hallRightLoadingIconItem"><i class="el-icon-loading"></i></div>
|
|
|
- <div class="hallRightLoadingText">恒星管理平台</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--加载中 end-->
|
|
|
- <div :class="['UserNameBox', groupId ? 'ifNotice' : '']">
|
|
|
- <div class="userName">{{ messageTitle }}</div>
|
|
|
- <img src="@/assets/chat/fi_more.png" v-if="groupId!=''" @click="openGroupSystem" class="moreIcon">
|
|
|
- <div class="groupNotice" v-if="groupId!=''&&groupProfile!=''" @click="groupProfileWindow=true">{{groupProfile}}</div>
|
|
|
- <div v-if="groupId==''">
|
|
|
- <div class="shareCardIcon" @click="openShareCard">
|
|
|
- <i class="el-icon-postcard"></i>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="rightPositionBox">
|
|
|
- <div class="rightUserMessageBox" ref="rightUserMessageBox">
|
|
|
- <!-- <div class="timeBox">
|
|
|
- <span>12:40:22</span>
|
|
|
- </div> -->
|
|
|
- <div v-for="item in chatrecords" :key="item.id">
|
|
|
- <!--文字消息类型 对方-->
|
|
|
- <div class="otherUserMessage" v-if="item.action=='recieved'&&Number(item.msg_type)==1">
|
|
|
- <div class="otherUserIcon">
|
|
|
- <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
|
|
|
- <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
- </div>
|
|
|
- <div class="otherUserMessageText">
|
|
|
- {{item.content}}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--文字消息类型 我-->
|
|
|
- <div class="meUserMessage" v-if="item.action=='said'&&Number(item.msg_type)==1">
|
|
|
- <div class="meUserMessageText">
|
|
|
- {{item.content}}
|
|
|
- </div>
|
|
|
- <div class="meUserIcon">
|
|
|
- <img :src="item.user_avatar" v-if="item.user_avatar!=null&&item.user_avatar!=''">
|
|
|
- <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 图片类型 对方-->
|
|
|
- <div class="otherUserMessage" v-if="item.action=='recieved'&&Number(item.msg_type)==2">
|
|
|
- <div class="otherUserIcon">
|
|
|
- <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
|
|
|
- <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
- </div>
|
|
|
- <div class="otherUserMessageText">
|
|
|
- <div class="messageTypeImage">
|
|
|
- <img :src="item.content" @click="imgZoom(item.content)">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 图片类型 我-->
|
|
|
- <div class="meUserMessage" v-if="item.action=='said'&&Number(item.msg_type)==2">
|
|
|
- <div class="meUserMessageText">
|
|
|
- <div class="messageTypeImage">
|
|
|
- <img :src="item.content" @click="imgZoom(item.content)">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="meUserIcon">
|
|
|
- <img :src="item.user_avatar" v-if="item.user_avatar!=null&&item.user_avatar!=''">
|
|
|
- <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--文件类型 对方-->
|
|
|
- <div class="otherUserMessage" v-if="item.action=='recieved'&&item.msg_type==3">
|
|
|
- <div class="otherUserIcon">
|
|
|
- <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
|
|
|
- <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
- </div>
|
|
|
- <div class="otherUserMessageText" @click="downloadFile(item)">
|
|
|
- <div class="messageTypeFile">
|
|
|
- <div class="messageTypeFileTop">
|
|
|
- <div class="messageTypeFileInfo">
|
|
|
- <div class="messageTypeFileTitle">
|
|
|
- {{ JSON.parse(item.content).oldFileName }}
|
|
|
- </div>
|
|
|
- <div class="messageTypeFileIcon">
|
|
|
- <img src="@/assets/chat/file.png"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- <div class="messageTypeFileSize">20kb</div> -->
|
|
|
- </div>
|
|
|
- <div class="messageTypeFileLogo">恒星管理平台保护您的电脑安全</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--文件类型 我-->
|
|
|
- <div class="meUserMessage" v-if="item.action=='said'&&Number(item.msg_type)==3">
|
|
|
- <div class="meUserMessageText" @click="downloadFile(item)">
|
|
|
- <div class="messageTypeFile">
|
|
|
- <div class="messageTypeFileTop">
|
|
|
- <div class="messageTypeFileInfo">
|
|
|
- <div class="messageTypeFileTitle">
|
|
|
- {{ JSON.parse(item.content).oldFileName }}
|
|
|
- </div>
|
|
|
- <div class="messageTypeFileIcon">
|
|
|
- <img src="@/assets/chat/file.png"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- <div class="messageTypeFileSize">20kb</div> -->
|
|
|
- </div>
|
|
|
- <div class="messageTypeFileLogo">恒星管理平台保护您的电脑安全</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="meUserIcon">
|
|
|
- <img :src="item.user_avatar" v-if="item.user_avatar!=null&&item.user_avatar!=''">
|
|
|
- <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--名片 我-->
|
|
|
- <div class="meUserMessage" v-if="item.action=='said'&&Number(item.msg_type)==4">
|
|
|
- <div class="meUserMessageText" @click="addFriend(item.content.split(',')[2])">
|
|
|
- <div class="messageTypeCard">
|
|
|
- <div class="messageTypeCardTop">
|
|
|
- <div class="messageTypeCardIcon">
|
|
|
- <!-- <img :src="item.content.split(',')[0]"> -->
|
|
|
- <img src="@/assets/chat/user/user.png">
|
|
|
- </div>
|
|
|
- <div class="messageTypeCardName">{{item.content.split(',')[1]}}</div>
|
|
|
- </div>
|
|
|
- <div class="messageTypeCardText">
|
|
|
- 分享个人名片
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="meUserIcon">
|
|
|
- <img :src="item.user_avatar" v-if="item.user_avatar!=null&&item.user_avatar!=''">
|
|
|
- <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--名片 对方-->
|
|
|
- <div class="otherUserMessage" v-if="item.action=='recieved'&&Number(item.msg_type)==4">
|
|
|
- <div class="otherUserIcon">
|
|
|
- <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
|
|
|
- <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
- </div>
|
|
|
- <div class="otherUserMessageText" @click="addFriend(item.content.split(',')[2])">
|
|
|
- <div class="messageTypeCard">
|
|
|
- <div class="messageTypeCardTop">
|
|
|
- <div class="messageTypeCardIcon">
|
|
|
- <!-- <img :src="item.content.split(',')[0]"> -->
|
|
|
- <img src="@/assets/chat/user/user.png">
|
|
|
- </div>
|
|
|
- <div class="messageTypeCardName">{{item.content.split(',')[1]}}</div>
|
|
|
- </div>
|
|
|
- <div class="messageTypeCardText">
|
|
|
- 分享个人名片
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--邀请加群 我-->
|
|
|
- <div class="meUserMessage" v-if="item.action=='said'&&Number(item.msg_type)==6">
|
|
|
- <div class="meUserMessageText">
|
|
|
- <div class="messageGroupInvite" @click="openGroupInviteWindow(item)">
|
|
|
- <div class="messageGroupInviteTop">
|
|
|
- <div class="messageGroupInviteIcon">
|
|
|
- <img src="@/assets/chat/user/group.jpg">
|
|
|
- </div>
|
|
|
- <div class="messageGroupInfoText">
|
|
|
- <div class="messageGroupInfoTextTitle">邀请你加入群聊</div>
|
|
|
- <div class="messageGroupInfoTextTxt">{{item.content.split(',')[0]}}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="messageGroupInviteText">
|
|
|
- 点击加入
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="meUserIcon">
|
|
|
- <img :src="item.user_avatar" v-if="item.user_avatar!=null&&item.user_avatar!=''">
|
|
|
- <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--邀请加群 对方-->
|
|
|
- <div class="otherUserMessage" v-if="item.action=='recieved'&&Number(item.msg_type)==6">
|
|
|
- <div class="otherUserIcon">
|
|
|
- <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
|
|
|
- <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
- </div>
|
|
|
- <div class="otherUserMessageText">
|
|
|
- <div class="messageGroupInvite" @click="openGroupInviteWindow(item)">
|
|
|
- <div class="messageGroupInviteTop">
|
|
|
- <div class="messageGroupInviteIcon">
|
|
|
- <img src="@/assets/chat/user/group.jpg">
|
|
|
- </div>
|
|
|
- <div class="messageGroupInfoText">
|
|
|
- <div class="messageGroupInfoTextTitle">邀请你加入群聊</div>
|
|
|
- <div class="messageGroupInfoTextTxt">{{item.content.split(',')[0]}}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="messageGroupInviteText">
|
|
|
- 点击加入
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="sendMessageBox">
|
|
|
- <div class="sendMessageTools">
|
|
|
- <!--上传文件 start-->
|
|
|
- <div class="toolsBigBox">
|
|
|
- <div class="toolsBox">
|
|
|
- <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeImgUpload">
|
|
|
- <img src="@/assets/chat/send_img.png">
|
|
|
- </el-upload>
|
|
|
- <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeFileUpload">
|
|
|
- <img src="@/assets/chat/send_file.png">
|
|
|
- </el-upload>
|
|
|
- <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 @click="deFileUpload"><i class="el-icon-close"></i></div>
|
|
|
- </div>
|
|
|
- <div class="fileBox" v-if="sendMessage.file.fileUrl!=''">
|
|
|
- <img src="@/assets/chat/file.png">
|
|
|
- <div class="fileBoxText">{{ sendMessage.file.oldFileName }}</div>
|
|
|
- <div @click="deFileUpload"><i class="el-icon-close"></i></div>
|
|
|
- </div>
|
|
|
- <!--上传文件 end-->
|
|
|
- </div>
|
|
|
- <div class="sendMessageInput">
|
|
|
- <el-input
|
|
|
- type="textarea"
|
|
|
- placeholder="请输入内容"
|
|
|
- v-model="userMessage"
|
|
|
- :rows="4"
|
|
|
- resize="none"
|
|
|
- maxlength="200"
|
|
|
- @keyup.enter.native="sendUserMessage"
|
|
|
- >
|
|
|
- </el-input>
|
|
|
- </div>
|
|
|
- <div class="sendMessageButton">
|
|
|
- <el-button v-if="sendMessage.img.imgUrl!=''||sendMessage.file.fileUrl!=''" type="primary" size="medium" @click="sendUserMessageToFile">发送文件 <i class="el-icon-position"></i></el-button>
|
|
|
- <el-button v-else type="primary" size="medium" @click="sendUserMessage">发送 <i class="el-icon-position"></i></el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--右侧菜单 start------------------------------------------------------------>
|
|
|
- <div class="rightSlideBox" v-if="rightSlideBoxShow">
|
|
|
- <!--关闭按钮-->
|
|
|
- <div class="rightSlideBoxClose">
|
|
|
- <div class="rightSlideBoxCloseTitle">群设置</div>
|
|
|
- <div @click="openGroupSystem" class="rightSlideBoxCloseIcon">
|
|
|
- <i class="el-icon-close"></i>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!--2216-->
|
|
|
- <div class="rightSlideSearch">
|
|
|
- <div class="searchBox">
|
|
|
- <el-input
|
|
|
- placeholder="请输入内容"
|
|
|
- prefix-icon="el-icon-search"
|
|
|
- v-model="searchUser"
|
|
|
- @keyup.enter.native="rightSearchUser"
|
|
|
- >
|
|
|
- </el-input>
|
|
|
- </div>
|
|
|
- <!--弹出框-->
|
|
|
- <div class="searchFriendBox" v-if="groupRightSearchWindow">
|
|
|
- <div class="searchFriendClose">
|
|
|
- <div @click="closeRightSearchUser" class="rightSlideBoxCloseIcon">
|
|
|
- <i class="el-icon-close"></i>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="searchFriendItem">
|
|
|
- <div class="searchFriendAvatar">
|
|
|
- <img :src="groupRightUserInfo.avatar" v-if="groupRightUserInfo.avatar!=null&&groupRightUserInfo.avatar!=''">
|
|
|
- <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
- </div>
|
|
|
- <div class="searchFriendInfo">
|
|
|
- <div class="searchFriendName">
|
|
|
- <div class="searchFriendNameText">{{groupRightUserInfo.user_name}}</div>
|
|
|
- </div>
|
|
|
- <div class="searchFriendPhone">账号：{{groupRightUserInfo.user_name}}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="searchFriendButton">
|
|
|
- <el-button type="primary" v-if="groupRightUserInfo.isFriend==true" @click="searchConversationIfCreate(groupRightUserInfo.user_id)">发送消息</el-button>
|
|
|
- <el-button type="primary" v-if="groupRightUserInfo.isFriend==false&&Number(groupRightUserInfo.user_id)!=Number(myUserId)" @click="addFriend(groupRightUserInfo.user_id)">添加好友</el-button>
|
|
|
- <el-button type="primary" v-if="groupRightUserInfo.isFriend==false&&Number(groupRightUserInfo.user_id)==Number(myUserId)" disabled>添加好友</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="rightSlideUserBox">
|
|
|
- <div class="rightSlideUserItem rightEditUserItem" @click="editGroupMember">
|
|
|
- <div class="rightSlideUserItemIcon">
|
|
|
- <div class="addUserIcon">
|
|
|
- <i class="el-icon-user-solid"></i>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="rightSlideUserItemName">
|
|
|
- 编辑成员
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="rightSlideUserItem" v-for="item in groupUserList" :key="item.user_id">
|
|
|
- <div class="rightSlideUserItemIcon">
|
|
|
- <span class="el-dropdown-link">
|
|
|
- <!-- {{ creatorId }} {{ item.user_id }} -->
|
|
|
- <div class="rightSlideUserGroupLeader" v-if="creatorId == item.user_id">群主</div>
|
|
|
- <div>
|
|
|
- <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
|
|
|
- <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
- </div>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="rightSlideUserItemName">
|
|
|
- <span v-if="item.user_name!=null">{{item.user_name}}</span>
|
|
|
- <span v-else>未知用户</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="rightLineBorder"></div>
|
|
|
- <!--聊天记录 start------------------------------------------------------------>
|
|
|
- <div class="rightSlideFunction">
|
|
|
- <div class="rightSlideFunctionItem" @click="fileWindowStatus=true">
|
|
|
- <div class="rightSlideFunctionItemText">聊天记录</div>
|
|
|
- <div class="rightSlideFunctionItemIcon">
|
|
|
- <img src="@/assets/chat/arrow_right.png" alt="">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--聊天记录 end------------------------------------------------------------>
|
|
|
- <!--群聊设置 start------------------------------------------------------------>
|
|
|
- <div class="rightSlideFunction">
|
|
|
- <div class="groupSystem">
|
|
|
- <div class="groupChatSystem">
|
|
|
- <div class="groupChatTitle">群聊名称</div>
|
|
|
- <div class="groupChatText">
|
|
|
- <div class="groupChatTextContent">{{this.messageTitle}}</div>
|
|
|
- <img src="@/assets/chat/editGroup.png" @click="editGroupNameWindow=true">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="groupChatSystem">
|
|
|
- <div class="groupChatTitle">群公告</div>
|
|
|
- <div class="groupChatText" v-if="this.groupProfile!=''">
|
|
|
- <div class="groupChatTextContent">{{this.groupProfile}}</div>
|
|
|
- <img src="@/assets/chat/editGroup.png" @click="editGroupNoticeWindow=true" v-if="Number(this.myUserId)==Number(this.creatorId)">
|
|
|
- </div>
|
|
|
- <div class="groupChatText" v-else>
|
|
|
- 暂无群公告
|
|
|
- <img src="@/assets/chat/editGroup.png" @click="editGroupNoticeWindow=true" v-if="Number(this.myUserId)==Number(this.creatorId)">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--群聊设置 end------------------------------------------------------------>
|
|
|
- <div class="rightSlideFooterBox">
|
|
|
- <div @click="openShareMyGroup">分享群</div>
|
|
|
- <div @click="delGroup" v-if="creatorId==myUserId">解散群</div>
|
|
|
- <div @click="closeGroup" v-else>退出群</div>
|
|
|
- <div @click="openGroupSystem">关闭</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!--右侧菜单 end------------------------------------------>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- </template>
|
|
|
-
|
|
|
-<script>
|
|
|
- //引入组件
|
|
|
- import hallTitle from './components/hallTitle.vue';
|
|
|
- import baseUrl from '@/utils/baseUrl';
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- hallTitle
|
|
|
- },
|
|
|
- name: "ChatPanel",
|
|
|
- data() {
|
|
|
- return {
|
|
|
- tabs: [
|
|
|
- { key: "user", icon: "el-icon-user" },
|
|
|
- { key: "user-solid", icon: "el-icon-user-solid" }
|
|
|
- ],
|
|
|
- activeTab: 0,
|
|
|
- groupList: [
|
|
|
- { name: "分组A1", count: 3 },
|
|
|
- { name: "分组A2", count: 2 }
|
|
|
- ],
|
|
|
- contactList: [
|
|
|
- { username: "张三", online: true },
|
|
|
- { username: "李四", online: false }
|
|
|
- ],
|
|
|
- showDialog:false,
|
|
|
- //1.全局配置 start---------------------------------------->
|
|
|
- myUserId:'',//我的用户id
|
|
|
- tableTitleName:'聊天列表',//左侧菜单标题
|
|
|
- messageTitle:'',//当前的聊天名称
|
|
|
- editMessageTitle:'',//正在编辑的聊天名称
|
|
|
- groupProfile:'',//当前的群公告
|
|
|
- editGroupProfile:'',//正在编辑的群公告
|
|
|
- groupProfileWindow:false,//群公告弹出框
|
|
|
- listTimeOut:null,//定时器
|
|
|
- addFriendWindowStatus:false,//添加好友弹出框
|
|
|
- addform:{
|
|
|
- friend_id:'',//好友id
|
|
|
- remark:'',//备注名
|
|
|
- },
|
|
|
- formLabelWidth:'100px',
|
|
|
- imgZoomStatus:false,//图片放大框
|
|
|
- imgZoomUrl:'',//图片放大框的图片地址
|
|
|
- //1.全局配置 end---------------------------------------->
|
|
|
-
|
|
|
- //2.会话列表 start---------------------------------------->
|
|
|
- hallLeftLoading:false,//左侧加载中
|
|
|
- hallRightLoading:false,//右侧加载中
|
|
|
- conversationList:[],//会话列表
|
|
|
- groupConversationList:[],//群聊会话列表
|
|
|
- selectConversationItem:{},//选择会话
|
|
|
- searchConversationStatus:false,//搜索会话状态
|
|
|
- chatrecords:[],//聊天记录
|
|
|
- ifTop:false,//是否为置顶
|
|
|
- searchConversation:'',//搜索会话
|
|
|
- //2.会话列表 end---------------------------------------->
|
|
|
-
|
|
|
- //3.聊天记录 start---------------------------------------->
|
|
|
- receiverId:'',//接收消息的id
|
|
|
- receiverType:'',//接收消息的类型 1单聊 2群聊
|
|
|
- ifNoMessage:true,//如果没有选择任何聊天记录
|
|
|
- searchChatRecords:"",//搜索聊天记录
|
|
|
- userMessage:'',//用户发送的消息
|
|
|
- fileWindowStatus:false,//聊天记录弹出框是否显示
|
|
|
- activeName: 'all',//聊天记录选项卡
|
|
|
- time:'',//按照时间搜索
|
|
|
- //3.聊天记录 end---------------------------------------->
|
|
|
-
|
|
|
- //4.群聊 start---------------------------------------->
|
|
|
- //4.1 创建群聊
|
|
|
- groupWindowStatus:false,//添加聊天群组出框是否显示
|
|
|
- groupFriendsWindowStatus:false,//创建群聊时搜索框
|
|
|
- friendsList:[],//左侧好友列表
|
|
|
- searchFriendGroup:'',//搜索群聊的输入框绑定值
|
|
|
- groupFriendSearchUser:{},//编辑群时搜索群成员 用于显示搜索结果
|
|
|
- //4.2 加入群聊
|
|
|
- addGroupWindow:false,//加入群聊弹出框
|
|
|
- //4.2 编辑群聊
|
|
|
- groupId:'',//当前编辑的群聊的id
|
|
|
- creatorId:'',//群主id
|
|
|
- groupUserList:[],//群成员列表
|
|
|
- groupInfo:{},//群设置信息
|
|
|
- groupSearchUser:{},//编辑群时搜索群成员 用于显示搜索结果
|
|
|
- rightSlideBoxShow:false,//右侧菜单是否显示
|
|
|
- searchGroup:'',//搜索群聊的输入框绑定值
|
|
|
- editGroupNoticeWindow:false,//编辑群公告弹出框
|
|
|
- editGroupNameWindow:false,//编辑群名称弹出框
|
|
|
- groupEditWindowStatus:false,//编辑群成员弹出框
|
|
|
- groupEditMainWindowStatus:false,//编辑弹框中搜索人员
|
|
|
- searchUser:"",//右侧菜单的搜索框
|
|
|
- groupRightUserInfo:{},//直接从右侧群组菜单中搜索成员
|
|
|
- groupRightSearchWindow:false,//右侧群组详情弹出框
|
|
|
- //shareGroupMessage:"",//分享群聊的消息
|
|
|
- shareGroupWindowStatus:false,//分享群聊弹出框
|
|
|
- shareGroupActive:'friend',//分享名片选项卡
|
|
|
- shareGroupId:'',//要分享给谁
|
|
|
- useShareGroupInfo:{},//分享名片时选中的群组信息
|
|
|
- groupInviteInfo:{},//群邀请信息
|
|
|
- //4.群聊 end---------------------------------------->
|
|
|
-
|
|
|
- //6.名片 start---------------------------------------->
|
|
|
- //userCardMessage:'',//用户留言
|
|
|
- userCardWindowStatus:false,//用户名片弹出框
|
|
|
- shareTableActive:'friend',//分享名片选项卡
|
|
|
- useShareUserId:'',//分享名片时选中的用户id
|
|
|
- useShareUserInfo:{},//分享名片时选中的用户信息
|
|
|
- //6.名片 end---------------------------------------->
|
|
|
-
|
|
|
- //7.加好友 start---------------------------------------->
|
|
|
- addUserWindowStatus:false,//添加用户弹出框是否显示
|
|
|
- form:{
|
|
|
- //好友申请
|
|
|
- addUserForm:{
|
|
|
- notes:"",//备注
|
|
|
- nickname:"",//修改昵称
|
|
|
- }
|
|
|
- },
|
|
|
- //7.加好友 end---------------------------------------->
|
|
|
-
|
|
|
- //8.发消息 start---------------------------------------->
|
|
|
- sendMessage:{
|
|
|
- img:{
|
|
|
- imgUrl:'',//图片地址
|
|
|
- oldFileName:"",//文件名
|
|
|
- },
|
|
|
- file:{
|
|
|
- fileUrl:'',
|
|
|
- oldFileName:"",//文件名
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- //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:"",
|
|
|
- },
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- //1.会话列表 start---------------------------------------->
|
|
|
- //1.1获取会话列表
|
|
|
- getConversationList(){
|
|
|
- this.$store.dispatch('chat/getConversation',{}).then(res=> {
|
|
|
- console.log(res)
|
|
|
- let data = res.data;
|
|
|
- for(let item of data){
|
|
|
- item.status = 0; //默认未选中
|
|
|
- }
|
|
|
- this.conversationList = data;
|
|
|
-
|
|
|
- this.hallLeftLoading = false;
|
|
|
- }).catch(() => {
|
|
|
- this.$message.error('获取会话列表失败!')
|
|
|
- })
|
|
|
- },
|
|
|
- //1.2选择会话
|
|
|
- selectConversation(item){
|
|
|
- this.showDialog = true;
|
|
|
- console.log(item)
|
|
|
- //选择会话的时候开启loading框
|
|
|
- this.hallRightLoading = true;
|
|
|
- //关闭右侧详情框
|
|
|
- this.closeRightDetailWindow();
|
|
|
- //使用receiverId判断当前是哪个会话
|
|
|
- this.receiverId = item.receiver_id;
|
|
|
- //会话类型 = 1 单聊
|
|
|
- this.receiverType = 1;
|
|
|
- //分享名片时需要使用用户的头像和名称
|
|
|
- this.useShareUserInfo = item;
|
|
|
- //关闭搜索会话搜索框
|
|
|
- this.closeSearchConversation();
|
|
|
- //清理单聊状态
|
|
|
- this.conversationList.forEach(conversation => {
|
|
|
- conversation.status = (conversation.receiver_id === item.receiver_id) ? 1 : 0;
|
|
|
- if(conversation.receiver_id === item.receiver_id){
|
|
|
- //当前的聊天名称
|
|
|
- this.messageTitle = item.user_name;
|
|
|
- }
|
|
|
- });
|
|
|
- //console.log(this.conversationList)
|
|
|
- this.getchatrecords(item.receiver_id);
|
|
|
- //关闭没有选择任何聊天的界面
|
|
|
- this.ifNoMessage = false;
|
|
|
- //选择单聊的时候把群聊的id清空
|
|
|
- this.groupId = '';
|
|
|
- },
|
|
|
- //1.3获取聊天记录
|
|
|
- getchatrecords(user_id){
|
|
|
- //此处增加一个show_id 用于后端判断如何积累未读消息 注意，选择group的方法在下面
|
|
|
- this.$store.dispatch('chat/getChatRecords',{friend_id:user_id}).then(res=> {
|
|
|
- console.log(res)
|
|
|
- this.chatrecords = res.data.data;
|
|
|
- //滚动条滚动到底部
|
|
|
- this.scorllBottom();
|
|
|
- console.log(this.chatrecords)
|
|
|
- //选择会话后关闭loading框
|
|
|
- this.hallRightLoading = false;
|
|
|
- }).catch(() => {
|
|
|
- this.$message.error('获取聊天记录失败!')
|
|
|
- //选择会话后关闭loading框
|
|
|
- this.hallRightLoading = false;
|
|
|
- })
|
|
|
- },
|
|
|
- //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.6 搜索并定位聊天记录
|
|
|
- searchChatRecordsUser() {
|
|
|
- // 获取输入的内容
|
|
|
- const searchTerm = this.searchChatRecords.toLowerCase();
|
|
|
- // 查找匹配的消息
|
|
|
- const matchingItem = this.chatrecords.find(item => {
|
|
|
- return item.content.toLowerCase().includes(searchTerm);
|
|
|
- });
|
|
|
-
|
|
|
- // 如果找到匹配的消息，滚动到该消息
|
|
|
- if (matchingItem) {
|
|
|
- const index = this.chatrecords.indexOf(matchingItem);
|
|
|
- this.$nextTick(() => {
|
|
|
- const messageElements = this.$refs.fileWindowMessageScrollBox.children;
|
|
|
- if (messageElements[index]) {
|
|
|
- messageElements[index].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
|
|
- }
|
|
|
- });
|
|
|
- } else {
|
|
|
- this.$message.error('聊天信息不存在！'); // 提示用户
|
|
|
- }
|
|
|
- },
|
|
|
- //1.7 从通讯录进入会话大厅
|
|
|
- retrieveSession(){
|
|
|
- console.log("开始执行retrieveSession方法！")
|
|
|
- //1.获取会话列表
|
|
|
- this.$store.dispatch('chat/getConversation',{}).then(res=> {
|
|
|
- //2.查询当前会话中是否已经存在该好友的会话
|
|
|
- let data = res.data;
|
|
|
- let SeleteItem = {};
|
|
|
- let flag = false;//对话是否已经存在
|
|
|
- for(let item of data){
|
|
|
- //3.如果会话中含有该好友的会话，则选中该会话
|
|
|
- if(item.receiver_id == this.$route.query.friend_id){
|
|
|
- item.status = 1;
|
|
|
- SeleteItem = item;
|
|
|
- flag = true;
|
|
|
- }else{
|
|
|
- item.status = 0;
|
|
|
- }
|
|
|
- }
|
|
|
- //4.更新会话列表
|
|
|
- this.conversationList = data;
|
|
|
- //5.判断对话是否已经在会话列表中存在
|
|
|
- if(flag==true){
|
|
|
- console.log("会话存在！选中会话！")
|
|
|
- //6.如果存在，则选中该会话
|
|
|
- this.selectConversation(SeleteItem)
|
|
|
- }else{
|
|
|
- console.log("会话不存在！创建单聊！")
|
|
|
- //7.如果不存在，则创建单聊
|
|
|
- this.createSession();
|
|
|
- }
|
|
|
- //8.循环更新会话列表
|
|
|
- this.forSearchConversationList();
|
|
|
- }).catch(() => {
|
|
|
- this.$message.error('获取会话列表失败!')
|
|
|
- })
|
|
|
- },
|
|
|
- //1.8 创建单聊
|
|
|
- createSession(){
|
|
|
- //console.log(this.$route.query.friend_id)
|
|
|
- const currentDateTime = new Date();
|
|
|
- const formattedDateTime = currentDateTime.toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' });
|
|
|
- console.log("当前时间（北京时间）:", formattedDateTime);
|
|
|
- const message = {
|
|
|
- talk_type:1,//当前的会话类型
|
|
|
- //receiver_id:this.$route.query.friend_id,//当前的会话id
|
|
|
- receiver_id:this.createMessageId,//当前的会话id
|
|
|
- content:"我于" + formattedDateTime + "创建了一个会话",//用户发发送的消息
|
|
|
- msg_type:1,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
|
|
|
- };
|
|
|
- //console.log(message)
|
|
|
- //发送消息
|
|
|
- let that = this;
|
|
|
- if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
|
|
- //打开左侧loading防止重复点击
|
|
|
- this.hallLeftLoading = true;
|
|
|
- this.ws.send(JSON.stringify(message));
|
|
|
-
|
|
|
- //bug
|
|
|
- //如果双方不是好友，此处可以弹出错误
|
|
|
-
|
|
|
- //2秒后搜索会话列表 防止创建失败
|
|
|
- setTimeout(() => {
|
|
|
- that.$store.dispatch('chat/getConversation',{}).then(res=> {
|
|
|
- //查询当前会话中是否已经存在该好友的会话
|
|
|
- let data = res.data;
|
|
|
- let SeleteItem = {};
|
|
|
- let flag = false;//对话是否已经存在
|
|
|
- for(let item of data){
|
|
|
- //如果会话中含有该好友的会话，则选中该会话
|
|
|
- if(item.receiver_id == this.createMessageId){
|
|
|
- item.status = 1;
|
|
|
- SeleteItem = item;
|
|
|
- flag = true;
|
|
|
- }else{
|
|
|
- item.status = 0;
|
|
|
- }
|
|
|
- }
|
|
|
- //更新会话列表
|
|
|
- that.conversationList = data;
|
|
|
- //关闭loading层
|
|
|
- that.hallLeftLoading = false;
|
|
|
- //判断对话是否已经在会话列表中存在
|
|
|
- if(flag==true){
|
|
|
- //如果存在，则选中该会话
|
|
|
- that.selectConversation(SeleteItem)
|
|
|
- }else{
|
|
|
- that.$message.error('创建会话失败，请重新从通讯录发起会话！')
|
|
|
- }
|
|
|
-
|
|
|
- }).catch(() => {
|
|
|
- that.$message.error('获取会话列表失败!')
|
|
|
- })
|
|
|
- }, 2000);
|
|
|
-
|
|
|
- }else{
|
|
|
- this.$message.error('WebSocket连接失败!创建会话失败！')
|
|
|
- }
|
|
|
- },
|
|
|
- //1.9 循环更新会话列表
|
|
|
- forSearchConversationList(){
|
|
|
- let that = this;
|
|
|
- this.listTimeOut = setInterval(() => {
|
|
|
- //刷新时先判断是否有选中的会话
|
|
|
- if(that.receiverId!=''){
|
|
|
- //如果不为空,说明用户选择了某一个会话，此时需要修改会话列表中该会话的状态
|
|
|
- this.$store.dispatch('chat/getConversation',{}).then(res=> {
|
|
|
- console.log(res)
|
|
|
- let data = res.data;
|
|
|
- for(let item of data){
|
|
|
- if(item.receiver_id==that.receiverId){
|
|
|
- item.status = 1;
|
|
|
- }else{
|
|
|
- item.status = 0;
|
|
|
- }
|
|
|
- }
|
|
|
- this.conversationList = data;
|
|
|
- console.log("开始获取会话列表，将于8秒后再次获取！")
|
|
|
- }).catch(() => {
|
|
|
- this.$message.error('获取会话列表失败!')
|
|
|
- })
|
|
|
-
|
|
|
- }else{
|
|
|
- //如果为空，说明用户没有选择任何会话，此时可以直接请求列表
|
|
|
- that.getConversationList();
|
|
|
- }
|
|
|
- }, 7000);
|
|
|
- },
|
|
|
- //1.10 查询会话列表中是否存在会话，不存在就创建
|
|
|
- searchConversationIfCreate(user_id){
|
|
|
- //从会话列表中找到receiver_id于user_id相同的会话
|
|
|
- let flag = false;
|
|
|
- for(let item of this.conversationList){
|
|
|
- if(item.receiver_id==user_id){
|
|
|
- flag = true;
|
|
|
- }
|
|
|
- }
|
|
|
- //第一种情况：两人是好友，且会话已经创建了
|
|
|
- if(flag){
|
|
|
- //给与右侧展示列表的id
|
|
|
- this.groupRightUserInfo.receiver_id = String(user_id);
|
|
|
- this.groupRightUserInfo.user_id = String(user_id);
|
|
|
- this.selectConversation(this.groupRightUserInfo)
|
|
|
- this.rightSlideBoxShow = false;
|
|
|
- this.groupRightSearchWindow = false;
|
|
|
- }else{
|
|
|
- //第二种情况：两人是好友但是不存在对话
|
|
|
- //console.log("不存在这个会话，创建单聊")
|
|
|
- this.createMessageId = user_id;
|
|
|
- this.createSession();
|
|
|
- }
|
|
|
- },
|
|
|
- //1.会话列表 end---------------------------------------->
|
|
|
-
|
|
|
- //2.群聊 start---------------------------------------->
|
|
|
- //2.1 创建群聊
|
|
|
- //2.1.1 打开群聊创建窗口
|
|
|
- creatGroup(){
|
|
|
- this.groupWindowStatus = true;
|
|
|
- //获得好友列表
|
|
|
- this.getFriendsList();
|
|
|
- },
|
|
|
- //2.1.2 左侧菜单获取好友列表
|
|
|
- getFriendsList(){
|
|
|
- this.$store.dispatch('chat/getFriendsList',{user_id:this.myUserId}).then(res=> {
|
|
|
- console.log(res)
|
|
|
- for(let item of res.data){
|
|
|
- item.status = false; //默认未选中
|
|
|
- }
|
|
|
- this.friendsList = res.data;
|
|
|
- }).catch(() => {
|
|
|
- this.$message.error('获取好友列表失败!')
|
|
|
- })
|
|
|
- },
|
|
|
- //2.1.3 左侧菜单取消选择好友
|
|
|
- cancelSelectFriends(id){
|
|
|
- this.friendsList.forEach(item => {
|
|
|
- if(item.id == id){
|
|
|
- item.status = false;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- //2.1.4 清空并关闭创建群弹出框
|
|
|
- clearCreatGroupWindow(){
|
|
|
- this.friendsList.forEach(item => {
|
|
|
- item.status = false;
|
|
|
- });
|
|
|
- this.groupWindowStatus = false;
|
|
|
- },
|
|
|
- //2.1.5 创建群
|
|
|
- createForGroup(){
|
|
|
- let data = {
|
|
|
- group_name:"",//群聊名称
|
|
|
- group_desc:"仅群主可以修改",//群聊公告
|
|
|
- group_avatar:"",//群聊头像
|
|
|
- group_member:""//群成员
|
|
|
- }
|
|
|
- //从friendsList找出用户选择的联系人，然后创建群组
|
|
|
- //先把我自己放进去
|
|
|
- data.group_member = this.myUserId + ",";
|
|
|
- //然后循环添加其他用户
|
|
|
- this.friendsList.forEach(item => {
|
|
|
- if(item.status){
|
|
|
- data.group_member += item.friend_id + ",";
|
|
|
- }
|
|
|
- data.group_name = this.friendsList
|
|
|
- .filter(item => item.status)
|
|
|
- .slice(0, 3) // 只取前三个
|
|
|
- .map(item => item.remark !== null ? item.remark : item.user_name)
|
|
|
- .join(", ") // 使用逗号和空格分隔
|
|
|
- });
|
|
|
- data.group_member = data.group_member.slice(0,-1);//掉最后一个字符
|
|
|
-
|
|
|
- //console.log(data)
|
|
|
- this.$store.dispatch('chat/addGroup',data).then(res=> {
|
|
|
- this.$message.success('创建群聊成功!')
|
|
|
- //完成后关闭弹出框
|
|
|
- this.clearCreatGroupWindow();
|
|
|
- //重新获取会话列表
|
|
|
- this.getConversationList();
|
|
|
- }).catch(() => {
|
|
|
- this.$message.error('创建群聊失败!')
|
|
|
- })
|
|
|
- },
|
|
|
- //2.1.6 建群时搜索群成员
|
|
|
- searchFriendGroupUser(){
|
|
|
- this.groupFriendSearchUser = {};
|
|
|
- let flag = false; //是否找到成员
|
|
|
- for(let item of this.friendsList){
|
|
|
- if(item.user_name==this.searchFriendGroup||item.remark==this.searchFriendGroup){
|
|
|
- this.groupFriendSearchUser = item;
|
|
|
- flag = true;
|
|
|
- }
|
|
|
- }
|
|
|
- console.log(this.searchGroup)
|
|
|
- console.log(this.friendsList)
|
|
|
- console.log(flag)
|
|
|
-
|
|
|
- console.log(this.groupFriendSearchUser)
|
|
|
- //this.searchGroup 搜索的内容
|
|
|
- //this.groupEditWindowStatus 弹出框状态
|
|
|
- //this.groupSearchUser 搜索出来的成员
|
|
|
- if(!flag){
|
|
|
- this.$message.error('没有找到该成员!')
|
|
|
- }else{
|
|
|
- this.groupFriendsWindowStatus = true;
|
|
|
- }
|
|
|
- },
|
|
|
- //2.1.7 把用户添加到选择框里面
|
|
|
- addSearchFriendWindow(){
|
|
|
- this.groupFriendSearchUser.status=!this.groupFriendSearchUser.status;
|
|
|
- this.closeSearchFriendWindow();
|
|
|
- },
|
|
|
- //2.1.7 关闭搜索弹出框
|
|
|
- closeSearchFriendWindow(){
|
|
|
- this.groupFriendsWindowStatus = false;
|
|
|
- },
|
|
|
-
|
|
|
- //2.2 选择群聊
|
|
|
- //2.1.1 在会话列表中选择一个群聊
|
|
|
- selectGroup(item){
|
|
|
- //选择会话的时候开启loading框
|
|
|
- this.hallRightLoading = true;
|
|
|
- //关闭右侧详情框
|
|
|
- this.closeRightDetailWindow();
|
|
|
- //使用receiverId判断当前是哪个会话
|
|
|
- this.receiverId = item.receiver_id;
|
|
|
- //会话类型 = 2 群聊
|
|
|
- this.receiverType = 2;
|
|
|
- //分享群聊时需要使用群名称和群id
|
|
|
- this.useShareGroupInfo = item;
|
|
|
- console.log("选择群聊")
|
|
|
- //清理单聊状态
|
|
|
- this.conversationList.forEach(conversation => {
|
|
|
- conversation.status = (conversation.receiver_id === item.receiver_id) ? 1 : 0;
|
|
|
- });
|
|
|
- console.log(item)
|
|
|
- //记录准备加入群聊的id
|
|
|
- this.groupId = item.receiver_id;
|
|
|
- //当前的聊天名称
|
|
|
- this.messageTitle = item.group_name;
|
|
|
- //关闭没有选择任何聊天的界面
|
|
|
- this.ifNoMessage = false;
|
|
|
- //获取群聊天信息
|
|
|
- this.getGroupChatRecords(item.receiver_id);
|
|
|
- //获取群设置信息
|
|
|
- this.getGroupSystem(item.receiver_id);
|
|
|
- //获取群成员
|
|
|
- this.getGroupMember(item.receiver_id);
|
|
|
- },
|
|
|
- //2.1.2 获取群聊消息
|
|
|
- getGroupChatRecords(group_id){
|
|
|
- this.$store.dispatch('chat/getGroupChatRecords',{group_id:group_id}).then(res=> {
|
|
|
- console.log(res)
|
|
|
- this.chatrecords = res.data.data;
|
|
|
- //滚动条滚动到底部
|
|
|
- this.scorllBottom();
|
|
|
- //选择会话的时候开启loading框
|
|
|
- this.hallRightLoading = false;
|
|
|
-
|
|
|
- }).catch(() => {
|
|
|
- this.$message.error('获取群设置信息失败!');
|
|
|
- //选择会话的时候开启loading框
|
|
|
- this.hallRightLoading = false;
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- //2.3 编辑群聊
|
|
|
- //2.3.1 打开右侧菜单设置窗口
|
|
|
- openGroupSystem(){
|
|
|
- this.rightSlideBoxShow = !this.rightSlideBoxShow;
|
|
|
- },
|
|
|
- //2.3.2 获取群设置群成员
|
|
|
- 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('获取群成员信息失败!')
|
|
|
- })
|
|
|
- },
|
|
|
- //2.3.3 获取群设置信息
|
|
|
- getGroupSystem(group_id){
|
|
|
- this.$store.dispatch('chat/getGroupInfo',{group_id:group_id}).then(res=> {
|
|
|
- console.log(res)
|
|
|
- this.groupInfo = res.data;
|
|
|
- this.creatorId = res.data.creator_id;
|
|
|
- this.messageTitle = res.data.group_name;
|
|
|
- this.editMessageTitle = res.data.group_name;
|
|
|
- if(res.data.profile==null){
|
|
|
- this.groupProfile = "暂无群公告"
|
|
|
- }else{
|
|
|
- this.groupProfile = res.data.profile;
|
|
|
- this.editGroupProfile = res.data.profile;
|
|
|
- }
|
|
|
-
|
|
|
- }).catch(() => {
|
|
|
- this.$message.error('获取群设置信息失败!')
|
|
|
- })
|
|
|
- },
|
|
|
- //2.3.4 右侧菜单退出群聊
|
|
|
- closeGroup(){
|
|
|
- this.$confirm('将要退出该群聊，确定吗？', '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
- }).then(() => {
|
|
|
- //this.groupId
|
|
|
- this.$store.dispatch('chat/quitGroup',{group_id:this.groupId}).then(res=> {
|
|
|
- this.$message.success('退出群聊成功!')
|
|
|
- //关闭右侧菜单
|
|
|
- this.rightSlideBoxShow = false;
|
|
|
- //关闭右侧聊天界面
|
|
|
- this.ifNoMessage = true;
|
|
|
- //重新请求会话列表
|
|
|
- this.getConversationList();
|
|
|
-
|
|
|
- }).catch(() => {
|
|
|
- this.$message.error('群聊退出失败!')
|
|
|
- })
|
|
|
- }).catch(() => {
|
|
|
- this.$message.warning('已取消退出')
|
|
|
- });
|
|
|
- },
|
|
|
- //2.3.5 右侧菜单删除群聊
|
|
|
- delGroup(){
|
|
|
- this.$confirm('将要解散该群聊，确定吗？', '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
- }).then(() => {
|
|
|
- //this.groupId
|
|
|
- this.$store.dispatch('chat/delGroup',{group_id:this.groupId}).then(res=> {
|
|
|
- this.$message.success('已解散群聊!')
|
|
|
- //关闭右侧菜单
|
|
|
- this.rightSlideBoxShow = false;
|
|
|
- //关闭右侧聊天界面
|
|
|
- this.ifNoMessage = true;
|
|
|
- //重新请求会话列表
|
|
|
- this.getConversationList();
|
|
|
-
|
|
|
- }).catch(() => {
|
|
|
- this.$message.error('解散群聊失败!')
|
|
|
- })
|
|
|
- }).catch(() => {
|
|
|
- this.$message.warning('已取消解散')
|
|
|
- });
|
|
|
- },
|
|
|
- //2.3.6 右侧菜单编辑群名称
|
|
|
- editGroupName(){
|
|
|
- let data = {
|
|
|
- group_id:this.groupId,
|
|
|
- group_name:this.editMessageTitle//群名称
|
|
|
- }
|
|
|
- this.$store.dispatch('chat/updateGroup',data).then(res=> {
|
|
|
- this.$message.success('成功修改群聊名称！');
|
|
|
- //重新获取群详情
|
|
|
- this.getGroupSystem(this.groupId);
|
|
|
- //重新获取会话列表
|
|
|
- this.getConversationList();
|
|
|
- this.editGroupNameWindow = false;
|
|
|
- }).catch(() => {
|
|
|
- this.$message.error('修改群聊名称失败!')
|
|
|
- })
|
|
|
- },
|
|
|
- //2.3.7 右侧菜单编辑群公告
|
|
|
- editGroupNotice(){
|
|
|
- let data = {
|
|
|
- group_id:this.groupId,
|
|
|
- profile:this.editGroupProfile//群公告
|
|
|
- }
|
|
|
- this.$store.dispatch('chat/updateGroup',data).then(res=> {
|
|
|
- this.editGroupNoticeWindow = false;
|
|
|
- this.$message.success('成功添加群公告')
|
|
|
- //重新获取群详情
|
|
|
- this.getGroupSystem(this.groupId)
|
|
|
-
|
|
|
- }).catch(() => {
|
|
|
- this.$message.error('编辑群公告失败!')
|
|
|
- })
|
|
|
- },
|
|
|
- //2.3.8 群弹出框回显群内成员
|
|
|
- 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.3.9 群弹出框编辑群成员
|
|
|
- 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.3.19 群弹出框取消编辑群成员
|
|
|
- cancelEditGroupMember(){
|
|
|
- this.groupEditWindowStatus = false;
|
|
|
- this.getGroupMember(this.groupId);
|
|
|
- },
|
|
|
- //2.3.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.3.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.3.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.3.23 群弹出框关闭弹出框
|
|
|
- closeAddGroupUserWindow(){
|
|
|
- this.searchGroup = "";
|
|
|
- this.groupSearchUser = {};
|
|
|
- this.groupEditMainWindowStatus = false;
|
|
|
- },
|
|
|
- //2.3.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.3.25 右侧菜单编辑成员
|
|
|
- rightSearchUser(){
|
|
|
- this.groupRightUserInfo = {};
|
|
|
- let flag = false; //是否找到成员
|
|
|
- for(let item of this.groupUserList){
|
|
|
- if(item.user_name==this.searchUser||item.remark==this.searchUser){
|
|
|
- this.groupRightUserInfo = item;
|
|
|
- flag = true;
|
|
|
- }
|
|
|
- }
|
|
|
- console.log(this.searchUser)
|
|
|
- console.log(this.groupUserList)
|
|
|
- console.log(flag)
|
|
|
- //this.searchGroup 搜索的内容
|
|
|
- //this.groupEditWindowStatus 弹出框状态
|
|
|
- //this.groupSearchUser 搜索出来的成员
|
|
|
- if(!flag){
|
|
|
- this.$message.error('没有找到该成员!')
|
|
|
- }else{
|
|
|
- //找到这个成员以后，需要先验证一下他俩是不是好友
|
|
|
- this.$store.dispatch('chat/isFriend',{friend_id:this.groupRightUserInfo.user_id}).then(res=> {
|
|
|
- console.log(res.data)//true false
|
|
|
- this.groupRightUserInfo.isFriend = res.data;
|
|
|
- //打开弹出框
|
|
|
- this.groupRightSearchWindow = true;
|
|
|
- }).catch(() => {
|
|
|
- this.$message.error('获取成员身份信息失败!')
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- //2.3.26 关闭弹出框
|
|
|
- closeRightSearchUser(){
|
|
|
- this.searchUser = "";
|
|
|
- this.groupRightUserInfo = {};
|
|
|
- this.groupRightSearchWindow = false;
|
|
|
- },
|
|
|
-
|
|
|
- //2.4 加入群聊
|
|
|
- //2.4.1 打开群聊邀请窗口
|
|
|
- openGroupInviteWindow(info){
|
|
|
- this.addGroupWindow = true;
|
|
|
- //info.content.split(',')[0] 群名称
|
|
|
- //info.content.split(',')[1] 群id
|
|
|
- //获得要加入的群聊详情
|
|
|
- console.log(info.content)
|
|
|
- this.groupInviteInfo.group_name = info.content.split(',')[0];
|
|
|
- this.groupInviteInfo.group_id = info.content.split(',')[1];
|
|
|
- },
|
|
|
- //2.4.2 加入群聊
|
|
|
- joinGroup(){
|
|
|
- this.$store.dispatch('chat/joinGroup',{group_id:this.groupInviteInfo.group_id}).then(res=> {
|
|
|
- if(res.code=='200'){
|
|
|
- this.$message.success('加入群聊成功!')
|
|
|
- this.addGroupWindow = false;
|
|
|
- }else{
|
|
|
- this.$message.error(res.message)
|
|
|
- }
|
|
|
- }).catch(() => {
|
|
|
- this.$message.error('加入群聊失败!')
|
|
|
- })
|
|
|
- },
|
|
|
- //2.4.3 打开分享群聊弹出框
|
|
|
- openShareMyGroup(){
|
|
|
- //群组聊天数据初始化
|
|
|
- this.groupConversationList = [];
|
|
|
- //打开名片弹出框
|
|
|
- this.shareGroupWindowStatus = true;
|
|
|
- // shareGroupWindowStatus:false,//分享群聊弹出框
|
|
|
- // shareGroupActive:'friend',//分享名片选项卡
|
|
|
- // shareGroupId:'',//要分享的群聊id
|
|
|
- // useShareGroupInfo:{},//分享名片时选中的群组信息
|
|
|
- //默认获取一下好友列表
|
|
|
- this.getFriendsList();
|
|
|
- //把群聊提出来单独放到一个数组
|
|
|
- for(let item of this.conversationList){
|
|
|
- if(item.is_group==1){
|
|
|
- this.groupConversationList.push(item);
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- //2.4.4 分享群聊
|
|
|
- shareMyGroup(){
|
|
|
- console.log(this.shareGroupId)
|
|
|
- if(this.shareGroupId!=''){
|
|
|
- let message = {};
|
|
|
- console.log(this.useShareGroupInfo)
|
|
|
- let userInfo = [this.useShareGroupInfo.group_name,this.useShareGroupInfo.receiver_id];
|
|
|
- let userInfoString = userInfo.join(',');
|
|
|
-
|
|
|
- if(this.shareGroupActive=='friend'){
|
|
|
- //单聊
|
|
|
- message = {
|
|
|
- talk_type:1,
|
|
|
- receiver_id:this.shareGroupId,
|
|
|
- msg_type:6,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
|
|
|
- };
|
|
|
- message.content = userInfoString;
|
|
|
- }else if(this.shareGroupActive=='group'){
|
|
|
- //群聊
|
|
|
- message = {
|
|
|
- talk_type:2,
|
|
|
- receiver_id:this.shareGroupId,
|
|
|
- content:userInfo,
|
|
|
- msg_type:6,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
|
|
|
- };
|
|
|
- message.content = userInfoString;
|
|
|
- }
|
|
|
-
|
|
|
- console.log(message)
|
|
|
- //发送消息
|
|
|
- if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
|
|
- this.ws.send(JSON.stringify(message));
|
|
|
- }
|
|
|
- //关闭分享弹出框
|
|
|
- this.shareGroupWindowStatus = false;
|
|
|
- this.$message.success('分享名片成功!')
|
|
|
- }else{
|
|
|
- this.$message.error('请选择分享对象!')
|
|
|
- }
|
|
|
- },
|
|
|
- handleClickShareGroupCard(tab, event) {
|
|
|
- const tabName = tab.name;
|
|
|
- console.log("当前选中的tab name:", tabName);
|
|
|
- this.shareGroupActive = tabName;
|
|
|
- },
|
|
|
- //2.4.5 判断该成员是否在群聊中
|
|
|
- isGroupUser(id){
|
|
|
- let flag = false;
|
|
|
- for(let item of this.groupUserList){
|
|
|
- if(item.user_id==id){
|
|
|
- flag = true;
|
|
|
- }
|
|
|
- }
|
|
|
- return flag;
|
|
|
- },
|
|
|
- //2.群聊 end---------------------------------------->
|
|
|
-
|
|
|
- //3.全局应用 start---------------------------------------->
|
|
|
- //3.1 滚动条滚动到底部
|
|
|
- scorllBottom(){
|
|
|
- //滚动条滚动到底部
|
|
|
- this.$nextTick(() => {
|
|
|
- const rightUserMessageBox = this.$refs.rightUserMessageBox;
|
|
|
- if (rightUserMessageBox) {
|
|
|
- rightUserMessageBox.scrollTop = rightUserMessageBox.scrollHeight;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- //3.2 添加好友
|
|
|
- addFriend(id){
|
|
|
- console.log(id)
|
|
|
- this.addFriendWindowStatus = true;
|
|
|
- this.addform.friend_id = id;
|
|
|
- },
|
|
|
- addMyFriend(){
|
|
|
- this.$store.dispatch('chat/addFriend',this.addform).then(res=> {
|
|
|
- if(res.code=='200'){
|
|
|
- this.$message.success("好友申请发送成功！")
|
|
|
- this.addFriendWindowStatus = false;
|
|
|
- }else{
|
|
|
- //this.$message.error(res.data)
|
|
|
- this.$message.error(res.message)
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- //3.3 关闭右侧详情框
|
|
|
- closeRightDetailWindow(){
|
|
|
- this.rightSlideBoxShow = false;
|
|
|
- this.groupRightSearchWindow = false;
|
|
|
- this.searchUser = "";
|
|
|
- },
|
|
|
- //3.全局应用 end---------------------------------------->
|
|
|
-
|
|
|
- //4.会话框 start---------------------------------------->
|
|
|
- //4.1上传
|
|
|
- //4.1.1上传图片
|
|
|
- beforeImgUpload(file) {
|
|
|
- //先清理一下上传的缩略窗口
|
|
|
- this.deFileUpload()
|
|
|
- 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.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.1.2上传文件
|
|
|
- beforeFileUpload(file) {
|
|
|
- //先清理一下上传的缩略窗口
|
|
|
- this.deFileUpload()
|
|
|
- console.log(file)
|
|
|
- //允许的文件类型
|
|
|
- const isDoc = file.type === 'application/msword';
|
|
|
- const isDocx = file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
|
|
|
- const isXls = file.type === 'application/vnd.ms-excel';
|
|
|
- const isXlsx = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
|
|
|
- const isPptx = file.type === 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
|
|
|
- const isRar = file.type === 'application/x-rar-compressed';
|
|
|
- const isZip = file.type === 'application/x-zip-compressed';
|
|
|
- const isTxt = file.type === 'text/plain';
|
|
|
- const isPdf = file.type === 'application/pdf';
|
|
|
- //文件大小不能超过2M
|
|
|
- const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
-
|
|
|
- if (!isTxt && !isDoc && !isDocx && !isXls && !isXlsx && !isPptx && !isRar && !isZip && !isPdf) {
|
|
|
- this.$message.error('该文件类型不允许上传!');
|
|
|
- return false;
|
|
|
- }
|
|
|
- if (!isLt2M) {
|
|
|
- this.$message.error('发送的文件大小不能超过2M！');
|
|
|
- return false;
|
|
|
- }
|
|
|
-
|
|
|
- const formData = new FormData();
|
|
|
- formData.append('file', file);
|
|
|
-
|
|
|
- this.$store.dispatch('pool/uploadFile',formData).then(res=> {
|
|
|
- this.sendMessage.file.fileUrl = res.data.imgUrl;
|
|
|
- this.sendMessage.file.oldFileName = res.data.oldFileName;
|
|
|
- console.log(res.data)
|
|
|
- }).catch(() => {
|
|
|
- this.$message({
|
|
|
- type: 'info',
|
|
|
- message: '网络错误，请重试！'
|
|
|
- });
|
|
|
- })
|
|
|
-
|
|
|
- // 阻止默认的上传行为
|
|
|
- return false;
|
|
|
- },
|
|
|
- //4.1.3 删除上传的文件
|
|
|
- deFileUpload(){
|
|
|
- this.sendMessage.img.imgUrl = "";
|
|
|
- this.sendMessage.img.oldFileName = "";
|
|
|
- this.sendMessage.file.fileUrl = "";
|
|
|
- this.sendMessage.file.oldFileName = "";
|
|
|
- },
|
|
|
- //4.会话框 end---------------------------------------->
|
|
|
-
|
|
|
- //5.websocket会话 start---------------------------------------->
|
|
|
- //5.1 接受消息
|
|
|
- handleIncomingMessage(event) {
|
|
|
- const message = JSON.parse(event.data);
|
|
|
- console.log("监听消息：",message)
|
|
|
-
|
|
|
- console.log(message.receiver_id.length == 18)
|
|
|
- //第一步：先判断是否为群消息
|
|
|
- if (message.receiver_id && message.receiver_id.length == 18) {
|
|
|
- //第二步：判断当前接收的消息是否显示到聊天框中
|
|
|
- if(Number(this.receiverId)==Number(message.receiver_id)){
|
|
|
- console.log("当前消息为群消息，并且可以显示到当前的会话框中！")
|
|
|
- //18位就是群聊
|
|
|
- if(Number(this.myUserId) == Number(message.user_id)){
|
|
|
- //如果message的receiverId和会话的receiverId一致，说明这条信息是自己发的回显
|
|
|
- let receiveMessage = {
|
|
|
- action:"said",//自己说的
|
|
|
- user_avatar:message.user_avatar,//头像
|
|
|
- content:message.content,//内容
|
|
|
- msg_type:message.msg_type,//消息类型
|
|
|
- }
|
|
|
- console.log("来自单聊的回显消息:"+this.receiverId,message.receiver_id)
|
|
|
- console.log(message)
|
|
|
- //消息添加到聊天记录
|
|
|
- this.chatrecords.push(receiveMessage);
|
|
|
- // 确保 Vue 能够检测到数组的变化
|
|
|
- //this.$set(this.chatrecords, this.chatrecords.length, receiveMessage);
|
|
|
- console.log(this.chatrecords)
|
|
|
- //滚动条滚动到底部
|
|
|
- this.scorllBottom();
|
|
|
- }else{
|
|
|
- let receiveMessage = {
|
|
|
- action:"recieved",//对方说的
|
|
|
- receiver_avatar:message.user_avatar,//头像
|
|
|
- content:message.content,//内容
|
|
|
- msg_type:message.msg_type,//消息类型
|
|
|
- }
|
|
|
- //如果message的receiverId和会话的receiverId不一致，说明这条信息是别人发的，需要添加到聊天记录
|
|
|
- //消息添加到聊天记录
|
|
|
- console.log("来自单聊消息:"+this.receiverId,message.user_id)
|
|
|
- this.chatrecords.push(receiveMessage);
|
|
|
- console.log(message)
|
|
|
- //滚动条滚动到底部
|
|
|
- this.scorllBottom();
|
|
|
- }
|
|
|
- }else{
|
|
|
- console.log("当前消息为群消息，但是用户未开启此聊天窗口！")
|
|
|
- }
|
|
|
- }else{
|
|
|
- //当前的单聊消息是自己发的，回显到聊天框中
|
|
|
- if(Number(this.receiverId)==Number(message.receiver_id)){
|
|
|
- //如果message的receiverId和会话的receiverId一致，说明这条信息是自己发的回显
|
|
|
- let receiveMessage = {
|
|
|
- action:"said",//自己说的
|
|
|
- user_avatar:message.user_avatar,//头像
|
|
|
- content:message.content,//内容
|
|
|
- msg_type:message.msg_type,//消息类型
|
|
|
- }
|
|
|
- console.log("来自单聊的回显消息:"+this.receiverId,message.receiver_id)
|
|
|
- console.log(message)
|
|
|
- //消息添加到聊天记录
|
|
|
- this.chatrecords.push(receiveMessage);
|
|
|
- // 确保 Vue 能够检测到数组的变化
|
|
|
- //this.$set(this.chatrecords, this.chatrecords.length, receiveMessage);
|
|
|
- console.log(this.chatrecords)
|
|
|
- //滚动条滚动到底部
|
|
|
- this.scorllBottom();
|
|
|
- }else{
|
|
|
- //判断要回显的内容是不是在群聊
|
|
|
- if(Number(message.receiver_id.length) == 18){
|
|
|
- console.log("当前是单聊消息，你选择的是单聊框，可以回显！")
|
|
|
- let receiveMessage = {
|
|
|
- action:"recieved",//对方说的
|
|
|
- receiver_avatar:message.user_avatar,//头像
|
|
|
- content:message.content,//内容
|
|
|
- msg_type:message.msg_type,//消息类型
|
|
|
- }
|
|
|
- console.log("来自单聊的回显消息:"+this.receiverId,message.receiver_id)
|
|
|
- console.log(message)
|
|
|
- //消息添加到聊天记录
|
|
|
- this.chatrecords.push(receiveMessage);
|
|
|
- // 确保 Vue 能够检测到数组的变化
|
|
|
- //this.$set(this.chatrecords, this.chatrecords.length, receiveMessage);
|
|
|
- console.log(this.chatrecords)
|
|
|
- //滚动条滚动到底部
|
|
|
- this.scorllBottom();
|
|
|
- }else{
|
|
|
- // console.log(this.receiverId)
|
|
|
- // console.log(message.receiver_id,message.user_id)
|
|
|
- // console.log("当前是单聊消息，但是你选择的是群聊框，该条消息不能回显！")
|
|
|
- if(this.receiverId!=message.receiver_id&&this.receiverId!=message.user_id){
|
|
|
- //收到单聊消息，但是单聊消息不属于当前的聊天窗口
|
|
|
- console.log("当前单聊消息不属于当前的聊天窗口，不回显！")
|
|
|
- }else{
|
|
|
- if(this.receiverId==message.user_id){
|
|
|
- console.log("当前单聊消息属于当前的聊天窗口，回显！")
|
|
|
- let receiveMessage = {
|
|
|
- action:"recieved",//对方说的
|
|
|
- receiver_avatar:message.user_avatar,//头像
|
|
|
- content:message.content,//内容
|
|
|
- msg_type:message.msg_type,//消息类型
|
|
|
- }
|
|
|
- console.log("来自单聊的回显消息:"+this.receiverId,message.receiver_id)
|
|
|
- console.log(message)
|
|
|
- //消息添加到聊天记录
|
|
|
- this.chatrecords.push(receiveMessage);
|
|
|
- // 确保 Vue 能够检测到数组的变化
|
|
|
- //this.$set(this.chatrecords, this.chatrecords.length, receiveMessage);
|
|
|
- console.log(this.chatrecords)
|
|
|
- //滚动条滚动到底部
|
|
|
- this.scorllBottom();
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- // 5.2 发送消息
|
|
|
- sendUserMessage() {
|
|
|
- if (this.userMessage.trim() !== '') {
|
|
|
- const message = {
|
|
|
- talk_type:this.receiverType,//当前的会话类型
|
|
|
- receiver_id:this.receiverId,//当前的会话id
|
|
|
- content:this.userMessage,//用户发发送的消息
|
|
|
- msg_type:1,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
|
|
|
- };
|
|
|
- //发送消息
|
|
|
- if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
|
|
- this.ws.send(JSON.stringify(message));
|
|
|
- }
|
|
|
- this.userMessage = '';
|
|
|
- }else{
|
|
|
- this.$message.error('消息不能为空！')
|
|
|
- }
|
|
|
- },
|
|
|
- // 5.3 发送图片或者文字
|
|
|
- sendUserMessageToFile() {
|
|
|
- if(this.sendMessage.img.imgUrl!=''){
|
|
|
- const message = {
|
|
|
- talk_type:this.receiverType,//当前的会话类型
|
|
|
- receiver_id:this.receiverId,//当前的会话id
|
|
|
- content:this.sendMessage.img.imgUrl,//用户发发送的消息
|
|
|
- msg_type:2,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
|
|
|
- };
|
|
|
- if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
|
|
- this.ws.send(JSON.stringify(message));
|
|
|
- //发送完毕清除选择的图片
|
|
|
- this.sendMessage.img.imgUrl='';
|
|
|
- }
|
|
|
- //如果文本框不为空，把文本框内的消息也提交过去
|
|
|
- if(this.userMessage.trim()!=''){
|
|
|
- this.sendUserMessage();
|
|
|
- }
|
|
|
- }
|
|
|
- if(this.sendMessage.file.fileUrl!=''){
|
|
|
- //把名称和地址打包成一个对象
|
|
|
- const fileInfo = {
|
|
|
- file_url:this.sendMessage.file.fileUrl,
|
|
|
- oldFileName:this.sendMessage.file.oldFileName
|
|
|
- }
|
|
|
- const fileInfoString = JSON.stringify(fileInfo);
|
|
|
- //发送消息
|
|
|
- const message = {
|
|
|
- talk_type:this.receiverType,//当前的会话类型
|
|
|
- receiver_id:this.receiverId,//当前的会话id
|
|
|
- content:fileInfoString,//用户发发送的消息
|
|
|
- msg_type:3,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
|
|
|
- };
|
|
|
- if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
|
|
- this.ws.send(JSON.stringify(message));
|
|
|
- //发送完毕清除选择的文件
|
|
|
- this.sendMessage.file.fileUrl='';
|
|
|
- }
|
|
|
- //如果文本框不为空，把文本框内的消息也提交过去
|
|
|
- if(this.userMessage.trim()!=''){
|
|
|
- this.sendUserMessage();
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- //5.4 打开名片弹出框
|
|
|
- openShareCard(){
|
|
|
- //群组聊天数据初始化
|
|
|
- this.groupConversationList = [];
|
|
|
- //打开名片弹出框
|
|
|
- this.userCardWindowStatus = true;
|
|
|
- //默认获取一下好友列表
|
|
|
- this.getFriendsList();
|
|
|
- //好友列表
|
|
|
- //this.friendsList
|
|
|
- //会话列表
|
|
|
- //this.conversationList
|
|
|
- //把群聊提出来单独放到一个数组
|
|
|
- //this.groupConversationList
|
|
|
- for(let item of this.conversationList){
|
|
|
- if(item.is_group==1){
|
|
|
- this.groupConversationList.push(item);
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- //5.5 分享名片
|
|
|
- shareCard(){
|
|
|
- console.log(this.useShareUserId)
|
|
|
- if(this.useShareUserId!=''){
|
|
|
- let message = {};
|
|
|
- // let userInfo = {
|
|
|
- // avatar:this.useShareUserInfo.avatar,
|
|
|
- // user_name:this.useShareUserInfo.user_name,
|
|
|
- // friend_id:this.receiverId
|
|
|
- // }
|
|
|
- let userInfo = [this.useShareUserInfo.avatar,this.useShareUserInfo.user_name,this.receiverId];
|
|
|
- let userInfoString = userInfo.join(',');
|
|
|
-
|
|
|
- if(this.shareTableActive=='friend'){
|
|
|
- //单聊
|
|
|
- message = {
|
|
|
- talk_type:1,
|
|
|
- receiver_id:this.useShareUserId,
|
|
|
- msg_type:4,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
|
|
|
- };
|
|
|
- message.content = userInfoString;
|
|
|
- }else if(this.shareTableActive=='group'){
|
|
|
- //群聊
|
|
|
- message = {
|
|
|
- talk_type:2,
|
|
|
- receiver_id:this.useShareUserId,
|
|
|
- content:userInfo,
|
|
|
- msg_type:4,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
|
|
|
- };
|
|
|
- message.content = userInfoString;
|
|
|
- }
|
|
|
- // console.log(typeof message.content)
|
|
|
- // console.log(message.content)
|
|
|
- // console.log(message)
|
|
|
- //发送消息
|
|
|
- if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
|
|
- this.ws.send(JSON.stringify(message));
|
|
|
- }
|
|
|
- //关闭分享弹出框
|
|
|
- this.userCardWindowStatus = false;
|
|
|
- this.$message.success('分享名片成功!')
|
|
|
- }else{
|
|
|
- this.$message.error('请选择分享对象!')
|
|
|
- }
|
|
|
- },
|
|
|
- //5.6 切换分享名片
|
|
|
- handleClickShareCard(tab, event) {
|
|
|
- const tabName = tab.name;
|
|
|
- console.log("当前选中的tab name:", tabName);
|
|
|
- this.shareTableActive = tabName;
|
|
|
- },
|
|
|
- //5.7 下载文件
|
|
|
- downloadFile(item){
|
|
|
- let downloadData = JSON.parse(item.content);
|
|
|
- console.log(downloadData.file_url)
|
|
|
- if(downloadData.file_url!=''){
|
|
|
- const link = document.createElement('a');
|
|
|
- link.href = downloadData.file_url;
|
|
|
- link.setAttribute('download', 'downloaded_file'); // You can set a default file name here
|
|
|
- document.body.appendChild(link);
|
|
|
- link.click();
|
|
|
- document.body.removeChild(link);
|
|
|
- }else{
|
|
|
- this.$message.error('文件下载失败！')
|
|
|
- }
|
|
|
- },
|
|
|
- //5.8 图片放大
|
|
|
- imgZoom(url){
|
|
|
- this.imgZoomUrl = url;
|
|
|
- this.imgZoomStatus = true;
|
|
|
- },
|
|
|
- //5.9 创建链接 防止websocket意外中断
|
|
|
- getWebsocket(){
|
|
|
- //判断当前的route是否为/hall，否则不触发这个方法
|
|
|
- if(this.$route.path=="/hall"){
|
|
|
- this.$confirm('您的会话意外断开，是否重新连接？', '提示', {
|
|
|
- confirmButtonText: '重新连接',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
- }).then(() => {
|
|
|
- //强制刷新页面
|
|
|
- window.location.reload();
|
|
|
- }).catch(() => {
|
|
|
- //取消刷新
|
|
|
- this.$message.error("您的连接已中断！")
|
|
|
- });
|
|
|
- }else{
|
|
|
- console.log("前往其他页面，关闭ws！")
|
|
|
- }
|
|
|
- },
|
|
|
- //5.websocket会话 end---------------------------------------->
|
|
|
-
|
|
|
- //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;
|
|
|
- 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;
|
|
|
- }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}
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- console.log("=====fuck")
|
|
|
- //开启websocket连接 start---------------------------------------->
|
|
|
- //1.获取admin-token
|
|
|
- const adminToken = document.cookie.split('; ').find(row => row.startsWith('Admin-Token=')).split('=')[1];
|
|
|
- console.log("Admin-Token:", adminToken);
|
|
|
-
|
|
|
- //2.连接websocket
|
|
|
- let websocketNewUrl = baseUrl.WebsocketUrl +"?token=" + adminToken;
|
|
|
- //let websocketNewUrl = URL.WebsocketUrl +"?token=" + adminToken;
|
|
|
- this.ws = new WebSocket(websocketNewUrl);
|
|
|
- this.ws.addEventListener('message', this.handleIncomingMessage);
|
|
|
-
|
|
|
- //3.当连接中断时提供一个方法重新连接
|
|
|
- let that = this;
|
|
|
-
|
|
|
- //当连接关闭的时候关闭websocket
|
|
|
- this.ws.addEventListener('close', function (event) {
|
|
|
- // 连接关闭时执行的操作
|
|
|
- console.log("关闭链接",event);
|
|
|
- // 弹窗询问用户是否手动刷新
|
|
|
- // that.getWebsocket();
|
|
|
- });
|
|
|
-
|
|
|
- //开启websocket连接 end---------------------------------------->
|
|
|
-
|
|
|
- //从通讯录创建单聊 start---------------------------------------->
|
|
|
- //当ws创建成功以后再执行，防止数据未加载
|
|
|
- this.ws.onopen = () => {
|
|
|
- console.log("ws创建成功!");
|
|
|
- console.log(this.$route.query.friend_id)
|
|
|
- //判断当前路由是否携带friend_id
|
|
|
- if(this.$route.query.friend_id){
|
|
|
- console.log("从通讯录进入，开始创建会话！")
|
|
|
- //1.从通讯录进入会话大厅
|
|
|
- this.retrieveSession();
|
|
|
- //2.获取我的用户id
|
|
|
- this.myUserId = this.$store.state.user.userid;
|
|
|
- //把这个id存一下
|
|
|
- this.createMessageId = this.$route.query.friend_id;
|
|
|
-
|
|
|
- }else{
|
|
|
- console.log("直接进入，无需创建会话！")
|
|
|
- //直接进入会话大厅
|
|
|
- //1.获取会话列表
|
|
|
- this.getConversationList();
|
|
|
- //2.获取我的用户id
|
|
|
- this.myUserId = this.$store.state.user.userid;
|
|
|
- //3.循环获取会话列表
|
|
|
- //开启loading
|
|
|
- this.hallLeftLoading = true;
|
|
|
- this.forSearchConversationList();
|
|
|
- }
|
|
|
- };
|
|
|
- //从通讯录创建单聊 end---------------------------------------->
|
|
|
- },
|
|
|
- beforeDestroy() {
|
|
|
- //页面销毁的时候清除定时器获取列表
|
|
|
- clearInterval(this.listTimeOut);
|
|
|
- //页面销毁的时候关闭websocket
|
|
|
- if (this.ws) {
|
|
|
- this.ws.removeEventListener('message', this.handleIncomingMessage);
|
|
|
- this.ws.close();
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
- </script>
|
|
|
-
|
|
|
- <style scoped lang="less">
|
|
|
- .chat-panel {
|
|
|
- position: fixed;
|
|
|
- right: 30px;
|
|
|
- bottom: 30px;
|
|
|
- width: 270px;
|
|
|
- height: 520px;
|
|
|
- background: #fff;
|
|
|
- border-radius: 8px;
|
|
|
- box-shadow: 0 2px 16px rgba(0,0,0,0.18);
|
|
|
- z-index: 10000;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .chat-header {
|
|
|
- height: 48px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 0 16px;
|
|
|
- background: #f5f5f5;
|
|
|
- border-bottom: 1px solid #eee;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- .chat-header .chat-status {
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- background: #4caf50;
|
|
|
- border-radius: 50%;
|
|
|
- margin-left: 8px;
|
|
|
- }
|
|
|
- .chat-header .chat-close {
|
|
|
- position: absolute;
|
|
|
- right: 16px;
|
|
|
- cursor: pointer;
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
- .chat-header .chat-icon {
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- margin-right: 8px;
|
|
|
- }
|
|
|
- .chat-tabs {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 0;
|
|
|
- border-bottom: 1px solid #eee;
|
|
|
- height: 44px;
|
|
|
- }
|
|
|
- .tab {
|
|
|
- flex: 1;
|
|
|
- text-align: center;
|
|
|
- font-size: 20px;
|
|
|
- cursor: pointer;
|
|
|
- color: #888;
|
|
|
- padding: 12px 0;
|
|
|
- transition: color 0.2s, border-bottom 0.2s;
|
|
|
- border-bottom: 2px solid transparent;
|
|
|
- }
|
|
|
- .tab.active {
|
|
|
- color: #409EFF;
|
|
|
- border-bottom: 2px solid #409EFF;
|
|
|
- }
|
|
|
- .chat-groups {
|
|
|
-
|
|
|
-
|
|
|
- padding: 0 6px;
|
|
|
-
|
|
|
- }
|
|
|
- .group {
|
|
|
- margin-bottom: 12px;
|
|
|
- font-size: 16px;
|
|
|
- color: #333;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .chat-footer {
|
|
|
- height: 48px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-around;
|
|
|
- border-top: 1px solid #eee;
|
|
|
- background: #fafafa;
|
|
|
- }
|
|
|
- .footer-icon {
|
|
|
- font-size: 22px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .contact {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 12px;
|
|
|
- font-size: 16px;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
- .status {
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- border-radius: 50%;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
- .status.online {
|
|
|
- background: #4caf50;
|
|
|
- }
|
|
|
- .status.offline {
|
|
|
- background: #ccc;
|
|
|
- }
|
|
|
- //左侧
|
|
|
- .hallLeft {
|
|
|
- // width: 420px;
|
|
|
- background: #fff;
|
|
|
- border-radius: 20px;
|
|
|
- margin-top: 11px;
|
|
|
- position: relative;
|
|
|
- .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: 2px;
|
|
|
- }
|
|
|
- .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: 300px;
|
|
|
- .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: 5px;
|
|
|
- .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: 64px;
|
|
|
- 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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .hallLeftLoading{
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 420px;
|
|
|
- height: 740px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background: rgba(255, 255, 255, 0.5);
|
|
|
- z-index: 100;
|
|
|
- .hallLeftLoadingIcon {
|
|
|
- .hallLeftLoadingIconItem {
|
|
|
- color: #CCCCCC;
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 20px;
|
|
|
- font-size: 60px;
|
|
|
- }
|
|
|
- .hallLeftLoadingText {
|
|
|
- color: #CCCCCC;
|
|
|
- font-size: 32px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .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 {
|
|
|
-
|
|
|
- .active {
|
|
|
- background: #F5F7FD;
|
|
|
- box-sizing: border-box;
|
|
|
- border-right: 4px solid #5570F1 !important;
|
|
|
- }
|
|
|
- .userItem {
|
|
|
- padding: 0 21px 0 25px;
|
|
|
- height: 90px;
|
|
|
- box-sizing: border-box;
|
|
|
- border-right: 4px solid #fff;
|
|
|
- cursor: pointer;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .flexItemBox{
|
|
|
- width: 100%;
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- .userAvatar {
|
|
|
-
|
|
|
- width: 58px;
|
|
|
- height: 58px;
|
|
|
- float:left;
|
|
|
- img {
|
|
|
- width: 58px;
|
|
|
- height: 58px;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- }
|
|
|
- .userInfo {
|
|
|
- float:left;
|
|
|
- width:131px;
|
|
|
- margin-top:17px;
|
|
|
- box-sizing: border-box;
|
|
|
- padding-left: 15px;
|
|
|
- .userName {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- //padding-bottom: 10px;
|
|
|
- .userNameText {
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bold;
|
|
|
- width:260px;
|
|
|
- }
|
|
|
- .userMessageNum {
|
|
|
- font-size: 12px;
|
|
|
- color: #333;
|
|
|
- width: 64px;
|
|
|
- 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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- //右侧菜单
|
|
|
- .rightSlideBox {
|
|
|
- width: 420px;
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- background: #fff;
|
|
|
- box-shadow: -4px 0px 4px 0px rgba(0, 0, 0, 0.1);
|
|
|
- .rightSlideBoxClose {
|
|
|
- padding: 20px 20px 0 20px;
|
|
|
- height: 50px;
|
|
|
- overflow: hidden;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- .rightSlideBoxCloseTitle {
|
|
|
- font-size: 18px;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
- .rightSlideBoxCloseIcon {
|
|
|
- cursor: pointer;
|
|
|
- width: 28px;
|
|
|
- height: 28px;
|
|
|
- line-height: 28px;
|
|
|
- text-align: center;
|
|
|
- background: #EFEFEF;
|
|
|
- border-radius: 8px;
|
|
|
- }
|
|
|
- }
|
|
|
- .rightSlideSearch {
|
|
|
- padding: 30px 25px 0 25px;
|
|
|
- height: 66px;
|
|
|
- //overflow: hidden;
|
|
|
- position: relative;
|
|
|
- .searchFriendBox {
|
|
|
- position: absolute;
|
|
|
- width: 280px;
|
|
|
- border-radius: 8px;
|
|
|
- top: 65px;
|
|
|
- left: -260px;
|
|
|
- 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;
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .rightSlideUserBox {
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 40px 40px 10px 40px;
|
|
|
- height: 180px;
|
|
|
- overflow-y: auto;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex-wrap: wrap;
|
|
|
- //border-bottom: 1px solid #E9EDF7;
|
|
|
- .rightEditUserItem {
|
|
|
- cursor: pointer;
|
|
|
- // color: #333;
|
|
|
- // .rightSlideUserItemIcon {
|
|
|
- // .addUserIcon {
|
|
|
- // transition: all 0.5s ease;
|
|
|
- // }
|
|
|
- // .addUserIcon:hover {
|
|
|
- // background: #5570F1;
|
|
|
- // color: #fff;
|
|
|
- // }
|
|
|
- // }
|
|
|
-
|
|
|
- }
|
|
|
- .rightSlideUserItem {
|
|
|
- margin-bottom: 20px;
|
|
|
- width: 25%;
|
|
|
- position: relative;
|
|
|
- //cursor: pointer;
|
|
|
- //用户菜单
|
|
|
- .rightSlideUserItemMore {
|
|
|
- position: absolute;
|
|
|
- background: #fff;
|
|
|
- box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
|
|
|
- bottom: -220px;
|
|
|
- left: -240px;
|
|
|
- width: 280px;
|
|
|
- height: 270px;
|
|
|
- .rightSlideUserItemMoreMain {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
- padding:0 20px;
|
|
|
- .rightSlideUserItemMoreMainIcon {
|
|
|
- img {
|
|
|
- width: 66px;
|
|
|
- height: 66px;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- }
|
|
|
- .rightSlideUserItemMoreMainInfo {
|
|
|
- padding: 30px 0 30px 20px;
|
|
|
- border-bottom: 1px solid #E9EDF7;
|
|
|
- flex: 1;
|
|
|
- .rightSlideUserItemMoreMainInfoTop {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- .rightSlideUserItemMoreUserName {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 18px;
|
|
|
- .rightSlideUserItemMoreUserMore {
|
|
|
- margin-left: 10px;
|
|
|
- img {
|
|
|
- width: 12px;
|
|
|
- height: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .rightSlideUserItemMoreUserMoreIcon {
|
|
|
- img {
|
|
|
- width: 18px;
|
|
|
- height: 18px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .rightSlideUserItemMoreNumber {
|
|
|
- font-size: 14px;
|
|
|
- color: #999;
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- .rightSlideUserItemMoreLine {
|
|
|
- .rightSlideUserItemMoreLineItem {
|
|
|
- padding: 20px;
|
|
|
- border-bottom: 1px solid #E9EDF7;
|
|
|
- display: flex;
|
|
|
- .rightSlideUserItemMoreTitle {
|
|
|
- font-size: 16px;
|
|
|
- color: #999;
|
|
|
- width: 80px;
|
|
|
- }
|
|
|
- .rightSlideUserItemMoreText {
|
|
|
- font-size: 16px;
|
|
|
- color: #333;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- flex:1;
|
|
|
- }
|
|
|
- }
|
|
|
- .rightSlideUserItemMoreLineButton {
|
|
|
- padding-top: 25px;
|
|
|
- text-align: center;
|
|
|
- font-size: 14px;
|
|
|
- color:#5570F1;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- img {
|
|
|
- width: 25px;
|
|
|
- height: 25px;
|
|
|
- margin-bottom: 8px;
|
|
|
- }
|
|
|
- .rightSlideUserItemMoreLineGroup {
|
|
|
- width: 33.33%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .rightSlideUserItemIcon {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- img {
|
|
|
- width: 58px;
|
|
|
- height: 58px;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- .el-dropdown-link {
|
|
|
- width: 58px;
|
|
|
- height: 58px;
|
|
|
- position: relative;
|
|
|
- .rightSlideUserGroupLeader{
|
|
|
- font-size: 12px;
|
|
|
- color: #FEAF50;
|
|
|
- background: #FFEAD1;
|
|
|
- width: 36px;
|
|
|
- height: 20px;
|
|
|
- border-radius: 4px;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- right: -10px;
|
|
|
- text-align: center;
|
|
|
- line-height: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- .addUserIcon {
|
|
|
- width: 58px;
|
|
|
- height: 58px;
|
|
|
- line-height: 58px;
|
|
|
- background: #F0F0F0;
|
|
|
- border-radius: 50%;
|
|
|
- text-align: center;
|
|
|
- color:#fff;
|
|
|
- font-size: 32px;
|
|
|
- }
|
|
|
- }
|
|
|
- .rightSlideUserItemName {
|
|
|
- //width: 80px;
|
|
|
- padding: 0 5px;
|
|
|
- font-size: 16px;
|
|
|
- color: #333;
|
|
|
- margin-top: 10px;
|
|
|
- text-align: center;
|
|
|
- white-space: nowrap; /* 强制不换行 */
|
|
|
- overflow: hidden; /* 超出宽度隐藏 */
|
|
|
- text-overflow: ellipsis; /* 显示省略号 */
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .rightLineBorder {
|
|
|
- width: 100%;
|
|
|
- border-bottom: 1px solid #E9EDF7;
|
|
|
- }
|
|
|
- .rightSlideMore {
|
|
|
- padding: 30px 40px;
|
|
|
- font-size: 18px;
|
|
|
- color: #999;
|
|
|
- text-align: center
|
|
|
- }
|
|
|
- //聊天记录
|
|
|
- .rightSlideFunction {
|
|
|
- .rightSlideFunctionItem {
|
|
|
- height: 60px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 20px 40px;
|
|
|
- border-bottom: 1px solid #E9EDF7;
|
|
|
- cursor: pointer;
|
|
|
- .rightSlideFunctionItemText {
|
|
|
- font-size: 18px;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
- .rightSlideFunctionItemIcon {
|
|
|
- img {
|
|
|
- width: 18px;
|
|
|
- height: 18px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- //群聊设置
|
|
|
- .groupSystem {
|
|
|
- border-bottom: 1px solid #E9EDF7;
|
|
|
- padding-bottom: 30px;
|
|
|
- .groupChatSystem {
|
|
|
- padding: 30px 40px 0 40px;
|
|
|
- height: 80px;
|
|
|
- overflow: hidden;
|
|
|
- .groupChatTitle {
|
|
|
- font-size: 18px;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
- .groupChatText {
|
|
|
- width: 100%;
|
|
|
- height: 20px;
|
|
|
- overflow: hidden;
|
|
|
- font-size: 18px;
|
|
|
- color: #999;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- img {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .groupChatTextContent {
|
|
|
- width: 300px;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .rightSlideFooterBox {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- div{
|
|
|
- width: 33%;
|
|
|
- text-align: center;
|
|
|
- font-size: 16px;
|
|
|
- color: #666;
|
|
|
- cursor: pointer;
|
|
|
- margin-top: 30px;
|
|
|
- box-sizing: border-box;
|
|
|
- border-right: 1px solid #E9EDF7;
|
|
|
- }
|
|
|
- }
|
|
|
- .rightSlideFooter {
|
|
|
- font-size: 18px;
|
|
|
- color: #666;
|
|
|
- padding: 30px 40px;
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
- border-bottom: 1px solid #E9EDF7;
|
|
|
- }
|
|
|
- .isLast {
|
|
|
- border-bottom: 0;
|
|
|
- color: #999;
|
|
|
- }
|
|
|
- }
|
|
|
- //右侧
|
|
|
- .hallRight {
|
|
|
- flex: 1;
|
|
|
- background: #fff;
|
|
|
- border-radius: 20px;
|
|
|
- position: relative;
|
|
|
- min-height: 500px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- position: relative;
|
|
|
- .hallRightLoading {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- height: 740px;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background: rgba(255, 255, 255, 0.5);
|
|
|
- z-index: 100;
|
|
|
- .hallRightLoadingIcon {
|
|
|
- .hallRightLoadingIconItem {
|
|
|
- color: #CCCCCC;
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 20px;
|
|
|
- font-size: 60px;
|
|
|
- }
|
|
|
- .hallRightLoadingText {
|
|
|
- color: #CCCCCC;
|
|
|
- font-size: 32px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .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;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .shareCardIcon {
|
|
|
- font-size: 24px;
|
|
|
- cursor: pointer;
|
|
|
- color: #666;
|
|
|
- }
|
|
|
- }
|
|
|
- .rightPositionBox {
|
|
|
- flex: 1;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .rightUserMessageBox {
|
|
|
- padding: 40px;
|
|
|
- height: 375px;
|
|
|
- box-sizing: border-box;
|
|
|
- overflow-y: auto;
|
|
|
- .timeBox {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- padding:0 0 30px 0;
|
|
|
- span {
|
|
|
- border-radius: 8px;
|
|
|
- display: block;
|
|
|
- width: 80px;
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
- font-size: 14px;
|
|
|
- text-align: center;
|
|
|
- display: block;
|
|
|
- background: #F4F5FA;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- }
|
|
|
- .newUserStatus {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- padding:0 0 30px 0;
|
|
|
- .newUserStatusText {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- border-radius: 8px;
|
|
|
- width: 200px;
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
- font-size: 14px;
|
|
|
- text-align: center;
|
|
|
- background: #F4F5FA;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- span {
|
|
|
- display: inline-block;
|
|
|
- line-height: 30px;
|
|
|
- }
|
|
|
- .newUserStatusTextName {
|
|
|
- display: inline-block;
|
|
|
- width: 100px;
|
|
|
- line-height: 30px;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
- }
|
|
|
- //其他用户
|
|
|
- .otherUserMessage {
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- margin-bottom: 30px;
|
|
|
- .otherUserIcon {
|
|
|
- margin-right: 20px;
|
|
|
- img {
|
|
|
- width: 58px;
|
|
|
- height: 58px;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- }
|
|
|
- .otherUserMessageText {
|
|
|
- border-radius: 16px;
|
|
|
- padding: 16px;
|
|
|
- font-size: 16px;
|
|
|
- color: #fff;
|
|
|
- background: #5570F1;
|
|
|
- position: relative;
|
|
|
- min-height: 50px;
|
|
|
- word-wrap:break-word;
|
|
|
- word-break:break-all;
|
|
|
- }
|
|
|
- .otherUserMessageText::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- left: -8px;
|
|
|
- top: 26px;
|
|
|
- transform: translateY(-50%);
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- border-top: 8px solid transparent;
|
|
|
- border-bottom: 8px solid transparent;
|
|
|
- border-right: 8px solid #5570F1;
|
|
|
- }
|
|
|
- }
|
|
|
- //我
|
|
|
- .meUserMessage {
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- margin-bottom: 30px;
|
|
|
- justify-content: flex-end;
|
|
|
- .meUserIcon {
|
|
|
- margin-left: 20px;
|
|
|
- img {
|
|
|
- width: 58px;
|
|
|
- height: 58px;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- }
|
|
|
- .meUserMessageText {
|
|
|
- border-radius: 16px;
|
|
|
- padding:16px;
|
|
|
- font-size: 16px;
|
|
|
- color:#333;
|
|
|
- background: #FFEAD1;
|
|
|
- position: relative;
|
|
|
- min-height: 50px;
|
|
|
- cursor: pointer;
|
|
|
- word-wrap:break-word;
|
|
|
- word-break:break-all;
|
|
|
- //width: 100%;
|
|
|
- }
|
|
|
- .meUserMessageText::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- right: -8px;
|
|
|
- top: 26px;
|
|
|
- transform: translateY(-50%);
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- border-top: 8px solid transparent;
|
|
|
- border-bottom: 8px solid transparent;
|
|
|
- border-left: 8px solid #FFEAD1;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- //消息框
|
|
|
- .sendMessageBox {
|
|
|
- //height: 250px;
|
|
|
- padding: 20px 40px 0 40px;
|
|
|
- border-top: 1px solid #E7E7E7;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .sendMessageTools {
|
|
|
- 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;
|
|
|
- height: 40px;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .sendMessageInput {
|
|
|
- margin-top: 5px;
|
|
|
- }
|
|
|
- .sendMessageButton {
|
|
|
- padding-top: 20px;
|
|
|
- text-align: right;
|
|
|
- button {
|
|
|
- width: 120px;
|
|
|
- height: 38px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- //右侧菜单
|
|
|
- .rightSlideBox {
|
|
|
- width: 420px;
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- background: #fff;
|
|
|
- box-shadow: -4px 0px 4px 0px rgba(0, 0, 0, 0.1);
|
|
|
- .rightSlideBoxClose {
|
|
|
- padding: 20px 20px 0 20px;
|
|
|
- height: 50px;
|
|
|
- overflow: hidden;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- .rightSlideBoxCloseTitle {
|
|
|
- font-size: 18px;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
- .rightSlideBoxCloseIcon {
|
|
|
- cursor: pointer;
|
|
|
- width: 28px;
|
|
|
- height: 28px;
|
|
|
- line-height: 28px;
|
|
|
- text-align: center;
|
|
|
- background: #EFEFEF;
|
|
|
- border-radius: 8px;
|
|
|
- }
|
|
|
- }
|
|
|
- .rightSlideSearch {
|
|
|
- padding: 30px 25px 0 25px;
|
|
|
- height: 66px;
|
|
|
- //overflow: hidden;
|
|
|
- position: relative;
|
|
|
- .searchFriendBox {
|
|
|
- position: absolute;
|
|
|
- width: 280px;
|
|
|
- border-radius: 8px;
|
|
|
- top: 65px;
|
|
|
- left: -260px;
|
|
|
- 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;
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .rightSlideUserBox {
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 40px 40px 10px 40px;
|
|
|
- height: 180px;
|
|
|
- overflow-y: auto;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex-wrap: wrap;
|
|
|
- //border-bottom: 1px solid #E9EDF7;
|
|
|
- .rightEditUserItem {
|
|
|
- cursor: pointer;
|
|
|
- // color: #333;
|
|
|
- // .rightSlideUserItemIcon {
|
|
|
- // .addUserIcon {
|
|
|
- // transition: all 0.5s ease;
|
|
|
- // }
|
|
|
- // .addUserIcon:hover {
|
|
|
- // background: #5570F1;
|
|
|
- // color: #fff;
|
|
|
- // }
|
|
|
- // }
|
|
|
-
|
|
|
- }
|
|
|
- .rightSlideUserItem {
|
|
|
- margin-bottom: 20px;
|
|
|
- width: 25%;
|
|
|
- position: relative;
|
|
|
- //cursor: pointer;
|
|
|
- //用户菜单
|
|
|
- .rightSlideUserItemMore {
|
|
|
- position: absolute;
|
|
|
- background: #fff;
|
|
|
- box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
|
|
|
- bottom: -220px;
|
|
|
- left: -240px;
|
|
|
- width: 280px;
|
|
|
- height: 270px;
|
|
|
- .rightSlideUserItemMoreMain {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
- padding:0 20px;
|
|
|
- .rightSlideUserItemMoreMainIcon {
|
|
|
- img {
|
|
|
- width: 66px;
|
|
|
- height: 66px;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- }
|
|
|
- .rightSlideUserItemMoreMainInfo {
|
|
|
- padding: 30px 0 30px 20px;
|
|
|
- border-bottom: 1px solid #E9EDF7;
|
|
|
- flex: 1;
|
|
|
- .rightSlideUserItemMoreMainInfoTop {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- .rightSlideUserItemMoreUserName {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 18px;
|
|
|
- .rightSlideUserItemMoreUserMore {
|
|
|
- margin-left: 10px;
|
|
|
- img {
|
|
|
- width: 12px;
|
|
|
- height: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .rightSlideUserItemMoreUserMoreIcon {
|
|
|
- img {
|
|
|
- width: 18px;
|
|
|
- height: 18px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .rightSlideUserItemMoreNumber {
|
|
|
- font-size: 14px;
|
|
|
- color: #999;
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- .rightSlideUserItemMoreLine {
|
|
|
- .rightSlideUserItemMoreLineItem {
|
|
|
- padding: 20px;
|
|
|
- border-bottom: 1px solid #E9EDF7;
|
|
|
- display: flex;
|
|
|
- .rightSlideUserItemMoreTitle {
|
|
|
- font-size: 16px;
|
|
|
- color: #999;
|
|
|
- width: 80px;
|
|
|
- }
|
|
|
- .rightSlideUserItemMoreText {
|
|
|
- font-size: 16px;
|
|
|
- color: #333;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- flex:1;
|
|
|
- }
|
|
|
- }
|
|
|
- .rightSlideUserItemMoreLineButton {
|
|
|
- padding-top: 25px;
|
|
|
- text-align: center;
|
|
|
- font-size: 14px;
|
|
|
- color:#5570F1;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- img {
|
|
|
- width: 25px;
|
|
|
- height: 25px;
|
|
|
- margin-bottom: 8px;
|
|
|
- }
|
|
|
- .rightSlideUserItemMoreLineGroup {
|
|
|
- width: 33.33%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .rightSlideUserItemIcon {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- img {
|
|
|
- width: 58px;
|
|
|
- height: 58px;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- .el-dropdown-link {
|
|
|
- width: 58px;
|
|
|
- height: 58px;
|
|
|
- position: relative;
|
|
|
- .rightSlideUserGroupLeader{
|
|
|
- font-size: 12px;
|
|
|
- color: #FEAF50;
|
|
|
- background: #FFEAD1;
|
|
|
- width: 36px;
|
|
|
- height: 20px;
|
|
|
- border-radius: 4px;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- right: -10px;
|
|
|
- text-align: center;
|
|
|
- line-height: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- .addUserIcon {
|
|
|
- width: 58px;
|
|
|
- height: 58px;
|
|
|
- line-height: 58px;
|
|
|
- background: #F0F0F0;
|
|
|
- border-radius: 50%;
|
|
|
- text-align: center;
|
|
|
- color:#fff;
|
|
|
- font-size: 32px;
|
|
|
- }
|
|
|
- }
|
|
|
- .rightSlideUserItemName {
|
|
|
- //width: 80px;
|
|
|
- padding: 0 5px;
|
|
|
- font-size: 16px;
|
|
|
- color: #333;
|
|
|
- margin-top: 10px;
|
|
|
- text-align: center;
|
|
|
- white-space: nowrap; /* 强制不换行 */
|
|
|
- overflow: hidden; /* 超出宽度隐藏 */
|
|
|
- text-overflow: ellipsis; /* 显示省略号 */
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .rightLineBorder {
|
|
|
- width: 100%;
|
|
|
- border-bottom: 1px solid #E9EDF7;
|
|
|
- }
|
|
|
- .rightSlideMore {
|
|
|
- padding: 30px 40px;
|
|
|
- font-size: 18px;
|
|
|
- color: #999;
|
|
|
- text-align: center
|
|
|
- }
|
|
|
- //聊天记录
|
|
|
- .rightSlideFunction {
|
|
|
- .rightSlideFunctionItem {
|
|
|
- height: 60px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 20px 40px;
|
|
|
- border-bottom: 1px solid #E9EDF7;
|
|
|
- cursor: pointer;
|
|
|
- .rightSlideFunctionItemText {
|
|
|
- font-size: 18px;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
- .rightSlideFunctionItemIcon {
|
|
|
- img {
|
|
|
- width: 18px;
|
|
|
- height: 18px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- //群聊设置
|
|
|
- .groupSystem {
|
|
|
- border-bottom: 1px solid #E9EDF7;
|
|
|
- padding-bottom: 30px;
|
|
|
- .groupChatSystem {
|
|
|
- padding: 30px 40px 0 40px;
|
|
|
- height: 80px;
|
|
|
- overflow: hidden;
|
|
|
- .groupChatTitle {
|
|
|
- font-size: 18px;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
- .groupChatText {
|
|
|
- width: 100%;
|
|
|
- height: 20px;
|
|
|
- overflow: hidden;
|
|
|
- font-size: 18px;
|
|
|
- color: #999;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- img {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .groupChatTextContent {
|
|
|
- width: 300px;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .rightSlideFooterBox {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- div{
|
|
|
- width: 33%;
|
|
|
- text-align: center;
|
|
|
- font-size: 16px;
|
|
|
- color: #666;
|
|
|
- cursor: pointer;
|
|
|
- margin-top: 30px;
|
|
|
- box-sizing: border-box;
|
|
|
- border-right: 1px solid #E9EDF7;
|
|
|
- }
|
|
|
- }
|
|
|
- .rightSlideFooter {
|
|
|
- font-size: 18px;
|
|
|
- color: #666;
|
|
|
- padding: 30px 40px;
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
- border-bottom: 1px solid #E9EDF7;
|
|
|
- }
|
|
|
- .isLast {
|
|
|
- border-bottom: 0;
|
|
|
- color: #999;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .chat-dialog{
|
|
|
- margin-top: 5vh !important;
|
|
|
- }
|
|
|
+<!-- src/components/ChatPanel.vue -->
|
|
|
+<template>
|
|
|
+ <div class="chat-panel">
|
|
|
+
|
|
|
+ <div class="chat-header">
|
|
|
+ <img class="chat-icon" :src=avatar alt="在线会话" />
|
|
|
+ <span>{{ this.$store.state.user.name }}</span>
|
|
|
+ <span class="chat-status online"></span>
|
|
|
+ <span class="chat-close" @click="$emit('close')">×</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="chat-tabs">
|
|
|
+ <span
|
|
|
+ v-for="(tab, idx) in tabList"
|
|
|
+ :key="tab.key"
|
|
|
+ class="tab"
|
|
|
+ :class="{ active: activeTab === idx }"
|
|
|
+ @click="activeTab = idx"
|
|
|
+ >
|
|
|
+ <img :src="activeTab === idx ? tab.active : tab.icon" class="tab-icon" />
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="chat-groups">
|
|
|
+ <template v-if="activeTab === 0">
|
|
|
+ <div class="hallLeft">
|
|
|
+ <!--加载中 start------------------------------------------>
|
|
|
+ <div class="hallLeftLoading" v-if="hallLeftLoading">
|
|
|
+ <div class="hallLeftLoadingIcon">
|
|
|
+ <div class="hallLeftLoadingIconItem"><i class="el-icon-loading"></i></div>
|
|
|
+ <div class="hallLeftLoadingText">恒星管理平台</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--加载中 end------------------------------------------>
|
|
|
+ <!--添加好友 start------------------------------------------>
|
|
|
+ <hallTitle name="聊天列表" @addUser="creatGroup" />
|
|
|
+ <!--添加好友 end------------------------------------------>
|
|
|
+ <!--搜索 start------------------------------------------>
|
|
|
+ <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>
|
|
|
+ <!--搜索 end------------------------------------------>
|
|
|
+ <div class="userListBox list001">
|
|
|
+ <!--会话列表 start------------------------------------------>
|
|
|
+ <div :class="['userItem', item.status === 1 ? 'active' : '']" v-for="item in conversationList" :key="item.receiver_id">
|
|
|
+ <div class="flexItemBox" v-if="item.is_group==0" @click="selectConversation(item)">
|
|
|
+ <!--单聊-->
|
|
|
+ <div class="userAvatar">
|
|
|
+ <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ </div>
|
|
|
+ <div class="userInfo">
|
|
|
+ <div class="userName">
|
|
|
+ <div class="userNameText">{{item.user_name}}</div>
|
|
|
+ <div class="userMessageNum" v-if="item.num>0">{{item.num}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--群聊-->
|
|
|
+ <div class="flexItemBox" v-else @click="selectGroup(item)">
|
|
|
+ <div class="userAvatar">
|
|
|
+ <img src="@/assets/chat/user/group.jpg">
|
|
|
+ </div>
|
|
|
+ <div class="userInfo">
|
|
|
+ <div class="userName">
|
|
|
+ <div class="userNameText">{{item.group_name}}</div>
|
|
|
+ <div class="userMessageNum" v-if="item.num>0">{{item.num}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--会话列表 end------------------------------------------>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <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" width="20px" height="20px">
|
|
|
+ </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>
|
|
|
+ <div class="searchFriendPhone">账号：{{searchFriendList.user_name}}</div>
|
|
|
+ </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>
|
|
|
+ </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 list002" 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>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="showDialog"
|
|
|
+ width="80%"
|
|
|
+ heigth="80%"
|
|
|
+ class="chat-dialog"
|
|
|
+ top="2vh"
|
|
|
+ >
|
|
|
+ <!--右侧菜单 start------------------------------------------------------------>
|
|
|
+ <div class="hallRight">
|
|
|
+ <!--加载中 start-->
|
|
|
+ <div class="hallRightLoading" v-if="hallRightLoading">
|
|
|
+ <div class="hallRightLoadingIcon">
|
|
|
+ <div class="hallRightLoadingIconItem"><i class="el-icon-loading"></i></div>
|
|
|
+ <div class="hallRightLoadingText">恒星管理平台</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--加载中 end-->
|
|
|
+ <div :class="['UserNameBox', groupId ? 'ifNotice' : '']">
|
|
|
+ <div class="userName">{{ messageTitle }}</div>
|
|
|
+ <img src="@/assets/chat/fi_more.png" v-if="groupId!=''" @click="openGroupSystem" class="moreIcon">
|
|
|
+ <div class="groupNotice" v-if="groupId!=''&&groupProfile!=''" @click="groupProfileWindow=true">{{groupProfile}}</div>
|
|
|
+ <div v-if="groupId==''">
|
|
|
+ <div class="shareCardIcon" @click="openShareCard">
|
|
|
+ <i class="el-icon-postcard"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rightPositionBox">
|
|
|
+ <div class="rightUserMessageBox" ref="rightUserMessageBox">
|
|
|
+ <!-- <div class="timeBox">
|
|
|
+ <span>12:40:22</span>
|
|
|
+ </div> -->
|
|
|
+ <div v-for="item in chatrecords" :key="item.id">
|
|
|
+ <!--文字消息类型 对方-->
|
|
|
+ <div class="otherUserMessage" v-if="item.action=='recieved'&&Number(item.msg_type)==1">
|
|
|
+ <div class="otherUserIcon">
|
|
|
+ <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ </div>
|
|
|
+ <div class="otherUserMessageText">
|
|
|
+ {{item.content}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--文字消息类型 我-->
|
|
|
+ <div class="meUserMessage" v-if="item.action=='said'&&Number(item.msg_type)==1">
|
|
|
+ <div class="meUserMessageText">
|
|
|
+ {{item.content}}
|
|
|
+ </div>
|
|
|
+ <div class="meUserIcon">
|
|
|
+ <img :src="item.user_avatar" v-if="item.user_avatar!=null&&item.user_avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 图片类型 对方-->
|
|
|
+ <div class="otherUserMessage" v-if="item.action=='recieved'&&Number(item.msg_type)==2">
|
|
|
+ <div class="otherUserIcon">
|
|
|
+ <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ </div>
|
|
|
+ <div class="otherUserMessageText">
|
|
|
+ <div class="messageTypeImage">
|
|
|
+ <img :src="item.content" @click="imgZoom(item.content)">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 图片类型 我-->
|
|
|
+ <div class="meUserMessage" v-if="item.action=='said'&&Number(item.msg_type)==2">
|
|
|
+ <div class="meUserMessageText">
|
|
|
+ <div class="messageTypeImage">
|
|
|
+ <img :src="item.content" @click="imgZoom(item.content)">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="meUserIcon">
|
|
|
+ <img :src="item.user_avatar" v-if="item.user_avatar!=null&&item.user_avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--文件类型 对方-->
|
|
|
+ <div class="otherUserMessage" v-if="item.action=='recieved'&&item.msg_type==3">
|
|
|
+ <div class="otherUserIcon">
|
|
|
+ <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ </div>
|
|
|
+ <div class="otherUserMessageText" @click="downloadFile(item)">
|
|
|
+ <div class="messageTypeFile">
|
|
|
+ <div class="messageTypeFileTop">
|
|
|
+ <div class="messageTypeFileInfo">
|
|
|
+ <div class="messageTypeFileTitle">
|
|
|
+ {{ JSON.parse(item.content).oldFileName }}
|
|
|
+ </div>
|
|
|
+ <div class="messageTypeFileIcon">
|
|
|
+ <img src="@/assets/chat/file.png"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="messageTypeFileSize">20kb</div> -->
|
|
|
+ </div>
|
|
|
+ <div class="messageTypeFileLogo">恒星管理平台保护您的电脑安全</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--文件类型 我-->
|
|
|
+ <div class="meUserMessage" v-if="item.action=='said'&&Number(item.msg_type)==3">
|
|
|
+ <div class="meUserMessageText" @click="downloadFile(item)">
|
|
|
+ <div class="messageTypeFile">
|
|
|
+ <div class="messageTypeFileTop">
|
|
|
+ <div class="messageTypeFileInfo">
|
|
|
+ <div class="messageTypeFileTitle">
|
|
|
+ {{ JSON.parse(item.content).oldFileName }}
|
|
|
+ </div>
|
|
|
+ <div class="messageTypeFileIcon">
|
|
|
+ <img src="@/assets/chat/file.png"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="messageTypeFileSize">20kb</div> -->
|
|
|
+ </div>
|
|
|
+ <div class="messageTypeFileLogo">恒星管理平台保护您的电脑安全</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="meUserIcon">
|
|
|
+ <img :src="item.user_avatar" v-if="item.user_avatar!=null&&item.user_avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--名片 我-->
|
|
|
+ <div class="meUserMessage" v-if="item.action=='said'&&Number(item.msg_type)==4">
|
|
|
+ <div class="meUserMessageText" @click="addFriendShow(item.content.split(',')[2])">
|
|
|
+ <div class="messageTypeCard">
|
|
|
+ <div class="messageTypeCardTop">
|
|
|
+ <div class="messageTypeCardIcon">
|
|
|
+ <!-- <img :src="item.content.split(',')[0]"> -->
|
|
|
+ <img src="@/assets/chat/user/user.png">
|
|
|
+ </div>
|
|
|
+ <div class="messageTypeCardName">{{item.content.split(',')[1]}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="messageTypeCardText">
|
|
|
+ 分享个人名片
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="meUserIcon">
|
|
|
+ <img :src="item.user_avatar" v-if="item.user_avatar!=null&&item.user_avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--名片 对方-->
|
|
|
+ <div class="otherUserMessage" v-if="item.action=='recieved'&&Number(item.msg_type)==4">
|
|
|
+ <div class="otherUserIcon">
|
|
|
+ <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ </div>
|
|
|
+ <div class="otherUserMessageText" @click="addFriend(item.content.split(',')[2])">
|
|
|
+ <div class="messageTypeCard">
|
|
|
+ <div class="messageTypeCardTop">
|
|
|
+ <div class="messageTypeCardIcon">
|
|
|
+ <!-- <img :src="item.content.split(',')[0]"> -->
|
|
|
+ <img src="@/assets/chat/user/user.png">
|
|
|
+ </div>
|
|
|
+ <div class="messageTypeCardName">{{item.content.split(',')[1]}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="messageTypeCardText">
|
|
|
+ 分享个人名片
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--邀请加群 我-->
|
|
|
+ <div class="meUserMessage" v-if="item.action=='said'&&Number(item.msg_type)==6">
|
|
|
+ <div class="meUserMessageText">
|
|
|
+ <div class="messageGroupInvite" @click="openGroupInviteWindow(item)">
|
|
|
+ <div class="messageGroupInviteTop">
|
|
|
+ <div class="messageGroupInviteIcon">
|
|
|
+ <img src="@/assets/chat/user/group.jpg">
|
|
|
+ </div>
|
|
|
+ <div class="messageGroupInfoText">
|
|
|
+ <div class="messageGroupInfoTextTitle">邀请你加入群聊</div>
|
|
|
+ <div class="messageGroupInfoTextTxt">{{item.content.split(',')[0]}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="messageGroupInviteText">
|
|
|
+ 点击加入
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="meUserIcon">
|
|
|
+ <img :src="item.user_avatar" v-if="item.user_avatar!=null&&item.user_avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--邀请加群 对方-->
|
|
|
+ <div class="otherUserMessage" v-if="item.action=='recieved'&&Number(item.msg_type)==6">
|
|
|
+ <div class="otherUserIcon">
|
|
|
+ <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ </div>
|
|
|
+ <div class="otherUserMessageText">
|
|
|
+ <div class="messageGroupInvite" @click="openGroupInviteWindow(item)">
|
|
|
+ <div class="messageGroupInviteTop">
|
|
|
+ <div class="messageGroupInviteIcon">
|
|
|
+ <img src="@/assets/chat/user/group.jpg">
|
|
|
+ </div>
|
|
|
+ <div class="messageGroupInfoText">
|
|
|
+ <div class="messageGroupInfoTextTitle">邀请你加入群聊</div>
|
|
|
+ <div class="messageGroupInfoTextTxt">{{item.content.split(',')[0]}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="messageGroupInviteText">
|
|
|
+ 点击加入
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sendMessageBox">
|
|
|
+ <div class="sendMessageTools">
|
|
|
+ <!--上传文件 start-->
|
|
|
+ <div class="toolsBigBox">
|
|
|
+ <div class="toolsBox">
|
|
|
+ <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeImgUpload">
|
|
|
+ <img src="@/assets/chat/send_img.png">
|
|
|
+ </el-upload>
|
|
|
+ <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeFileUpload">
|
|
|
+ <img src="@/assets/chat/send_file.png">
|
|
|
+ </el-upload>
|
|
|
+ <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 @click="deFileUpload"><i class="el-icon-close"></i></div>
|
|
|
+ </div>
|
|
|
+ <div class="fileBox" v-if="sendMessage.file.fileUrl!=''">
|
|
|
+ <img src="@/assets/chat/file.png">
|
|
|
+ <div class="fileBoxText">{{ sendMessage.file.oldFileName }}</div>
|
|
|
+ <div @click="deFileUpload"><i class="el-icon-close"></i></div>
|
|
|
+ </div>
|
|
|
+ <!--上传文件 end-->
|
|
|
+ </div>
|
|
|
+ <div class="sendMessageInput">
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请输入内容"
|
|
|
+ v-model="userMessage"
|
|
|
+ :rows="4"
|
|
|
+ resize="none"
|
|
|
+ maxlength="200"
|
|
|
+ @keyup.enter.native="sendUserMessageToFriend"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="sendMessageButton">
|
|
|
+ <el-button v-if="sendMessage.img.imgUrl!=''||sendMessage.file.fileUrl!=''" type="primary" size="medium" @click="sendUserMessageToFile">发送文件 <i class="el-icon-position"></i></el-button>
|
|
|
+ <el-button v-else type="primary" size="medium" @click="sendUserMessage">发送 <i class="el-icon-position"></i></el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--右侧菜单 start------------------------------------------------------------>
|
|
|
+ <div class="rightSlideBox" v-if="rightSlideBoxShow">
|
|
|
+ <!--关闭按钮-->
|
|
|
+ <div class="rightSlideBoxClose">
|
|
|
+ <div class="rightSlideBoxCloseTitle">群设置</div>
|
|
|
+ <div @click="openGroupSystem" class="rightSlideBoxCloseIcon">
|
|
|
+ <i class="el-icon-close"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--2216-->
|
|
|
+ <div class="rightSlideSearch">
|
|
|
+ <div class="searchBox">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入内容"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ v-model="searchUser"
|
|
|
+ @keyup.enter.native="rightSearchUser"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <!--弹出框-->
|
|
|
+ <div class="searchFriendBox" v-if="groupRightSearchWindow">
|
|
|
+ <div class="searchFriendClose">
|
|
|
+ <div @click="closeRightSearchUser" class="rightSlideBoxCloseIcon">
|
|
|
+ <i class="el-icon-close"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="searchFriendItem">
|
|
|
+ <div class="searchFriendAvatar">
|
|
|
+ <img :src="groupRightUserInfo.avatar" v-if="groupRightUserInfo.avatar!=null&&groupRightUserInfo.avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ </div>
|
|
|
+ <div class="searchFriendInfo">
|
|
|
+ <div class="searchFriendName">
|
|
|
+ <div class="searchFriendNameText">{{groupRightUserInfo.user_name}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="searchFriendPhone">账号：{{groupRightUserInfo.user_name}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="searchFriendButton">
|
|
|
+ <el-button type="primary" v-if="groupRightUserInfo.isFriend==true" @click="searchConversationIfCreate(groupRightUserInfo.user_id)">发送消息</el-button>
|
|
|
+ <el-button type="primary" v-if="groupRightUserInfo.isFriend==false&&Number(groupRightUserInfo.user_id)!=Number(myUserId)" @click="addFriend(groupRightUserInfo.user_id)">添加好友</el-button>
|
|
|
+ <el-button type="primary" v-if="groupRightUserInfo.isFriend==false&&Number(groupRightUserInfo.user_id)==Number(myUserId)" disabled>添加好友</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="rightSlideUserBox">
|
|
|
+ <div class="rightSlideUserItem rightEditUserItem" @click="editGroupMember">
|
|
|
+ <div class="rightSlideUserItemIcon">
|
|
|
+ <div class="addUserIcon">
|
|
|
+ <i class="el-icon-user-solid"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rightSlideUserItemName">
|
|
|
+ 编辑成员
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rightSlideUserItem" v-for="item in groupUserList" :key="item.user_id">
|
|
|
+ <div class="rightSlideUserItemIcon">
|
|
|
+ <span class="el-dropdown-link">
|
|
|
+ <!-- {{ creatorId }} {{ item.user_id }} -->
|
|
|
+ <div class="rightSlideUserGroupLeader" v-if="creatorId == item.user_id">群主</div>
|
|
|
+ <div>
|
|
|
+ <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ </div>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="rightSlideUserItemName">
|
|
|
+ <span v-if="item.user_name!=null">{{item.user_name}}</span>
|
|
|
+ <span v-else>未知用户</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rightLineBorder"></div>
|
|
|
+ <!--聊天记录 start------------------------------------------------------------>
|
|
|
+ <div class="rightSlideFunction">
|
|
|
+ <div class="rightSlideFunctionItem" @click="fileWindowStatus=true">
|
|
|
+ <div class="rightSlideFunctionItemText">聊天记录</div>
|
|
|
+ <div class="rightSlideFunctionItemIcon">
|
|
|
+ <img src="@/assets/chat/arrow_right.png" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--聊天记录 end------------------------------------------------------------>
|
|
|
+ <!--群聊设置 start------------------------------------------------------------>
|
|
|
+ <div class="rightSlideFunction">
|
|
|
+ <div class="groupSystem">
|
|
|
+ <div class="groupChatSystem">
|
|
|
+ <div class="groupChatTitle">群聊名称</div>
|
|
|
+ <div class="groupChatText">
|
|
|
+ <div class="groupChatTextContent">{{this.messageTitle}}</div>
|
|
|
+ <img src="@/assets/chat/editGroup.png" @click="editGroupNameWindow=true">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="groupChatSystem">
|
|
|
+ <div class="groupChatTitle">群公告</div>
|
|
|
+ <div class="groupChatText" v-if="this.groupProfile!=''">
|
|
|
+ <div class="groupChatTextContent">{{this.groupProfile}}</div>
|
|
|
+ <img src="@/assets/chat/editGroup.png" @click="editGroupNoticeWindow=true" v-if="Number(this.myUserId)==Number(this.creatorId)">
|
|
|
+ </div>
|
|
|
+ <div class="groupChatText" v-else>
|
|
|
+ 暂无群公告
|
|
|
+ <img src="@/assets/chat/editGroup.png" @click="editGroupNoticeWindow=true" v-if="Number(this.myUserId)==Number(this.creatorId)">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--群聊设置 end------------------------------------------------------------>
|
|
|
+ <div class="rightSlideFooterBox">
|
|
|
+ <div @click="openShareMyGroup">分享群</div>
|
|
|
+ <div @click="delGroup" v-if="creatorId==myUserId">解散群</div>
|
|
|
+ <div @click="closeGroup" v-else>退出群</div>
|
|
|
+ <div @click="openGroupSystem">关闭</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--右侧菜单 end------------------------------------------>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="showfrindDialog"
|
|
|
+ width="40%"
|
|
|
+ class="chat-friend-dialog"
|
|
|
+ top="15vh"
|
|
|
+ :modal="false"
|
|
|
+ >
|
|
|
+ <div class="hallBox">
|
|
|
+ <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="nodata" v-if="userApplyList.length==0">暂无数据</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>
|
|
|
+ </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="userInfoMainButton">
|
|
|
+ <el-button type="primary" icon="el-icon-s-promotion" @click="sendMessageToFriend(friendInfo)">发送消息</el-button>
|
|
|
+ <el-button type="danger" icon="el-icon-delete" @click="deleteFriend(friendInfo.friend_id)">删除好友</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog :visible.sync="groupWindowStatus" :close-on-click-modal="false" width="1028px">
|
|
|
+ <div class="searchWindow">
|
|
|
+ <div class="searchWindowLeft">
|
|
|
+ <div class="searchUserWindowBox">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入内容"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ v-model="searchFriendGroup"
|
|
|
+ @keyup.enter.native="searchFriendGroupUser"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <!--搜索用户弹出框 start------------------------------------------------------------>
|
|
|
+ <div class="searchFriendBox" v-if="groupFriendsWindowStatus">
|
|
|
+ <div class="searchFriendClose">
|
|
|
+ <div @click="closeSearchFriendWindow" class="rightSlideBoxCloseIcon">
|
|
|
+ <i class="el-icon-close"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="searchFriendItem">
|
|
|
+ <div class="searchFriendAvatar">
|
|
|
+ <img :src="groupFriendSearchUser.avatar" v-if="groupFriendSearchUser.avatar!=null&&groupFriendSearchUser.avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ </div>
|
|
|
+ <div class="searchFriendInfo">
|
|
|
+ <div class="searchFriendName">
|
|
|
+ <div class="searchFriendNameText">{{groupFriendSearchUser.user_name}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="searchFriendPhone">账号：{{groupFriendSearchUser.user_name}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="searchFriendButton">
|
|
|
+ <el-button v-if="groupFriendSearchUser.status==false" type="primary" @click="addSearchFriendWindow">添加</el-button>
|
|
|
+ <el-button v-else type="warning" @click="addSearchFriendWindow">移除</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--搜索用户弹出框 end------------------------------------------------------------>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--搜索用户 start------------------------------------------------------------>
|
|
|
+ <div class="searchUserBox">
|
|
|
+ <!-- <div class="searchNameEnglish">A</div> -->
|
|
|
+ <div class="searchUserItem" v-for="item in friendsList" :key="item.id">
|
|
|
+ <el-checkbox v-model="item.status"
|
|
|
+ @change="changeSelectFriends(item)"
|
|
|
+ :disabled="Number(item.friend_id) == Number(creatorId) || groupUserList.includes(item.friend_id)"></el-checkbox>
|
|
|
+ <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ <div class="searchUserName" v-if="item.remark!=null&&item.remark!=''">{{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">已选择{{friendsList.filter(item=>item.status).length}}个联系人</div>
|
|
|
+ </div>
|
|
|
+ <div class="searchWindowUserList">
|
|
|
+ <div class="searchWindowUserItem" v-for="item in friendsList" :key="item.id" v-if="item.status==true">
|
|
|
+ <div class="searchWindowUserIcon">
|
|
|
+ <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ <div class="searchWindowDeleteUser" @click="cancelSelectFriends(item.id)">
|
|
|
+ <i class="el-icon-close"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="searchWindowUserName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
|
|
|
+ <div class="searchWindowUserName" v-else>{{item.user_name}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--分享名片 start------------------------------------------------------------>
|
|
|
+ <!-- <div class="shareCardBox">
|
|
|
+ <div class="shareCardTitle">[名片]用户名称</div>
|
|
|
+ <div class="shareCardInput">
|
|
|
+ <el-input v-model="userCardMessage" placeholder="给用户留言"></el-input>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <!--分享名片 end------------------------------------------------------------>
|
|
|
+ <div class="searchWindowFooter">
|
|
|
+ <el-button type="info" @click="clearCreatGroupWindow">取消</el-button>
|
|
|
+ <el-button type="primary" @click="createForGroup" :disabled="friendsList.filter(item=>item.status).length<2">完成</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!--分享群聊 start------------------------------------------------------------>
|
|
|
+ <el-dialog :visible.sync="shareGroupWindowStatus" title="分享群聊" :close-on-click-modal="false" width="420px">
|
|
|
+ <div>
|
|
|
+ <div class="shareCardWindowBox">
|
|
|
+ <el-tabs v-model="shareGroupActive" type="card" @tab-click="handleClickShareGroupCard">
|
|
|
+ <el-tab-pane label="分享给朋友" name="friend">
|
|
|
+ <div class="shareCardWindowBoxMain">
|
|
|
+ <div v-for="item in friendsList" :key="item.id" class="shareCardRadioBox" >
|
|
|
+ <el-radio :label="item.friend_id" v-model="shareGroupId">
|
|
|
+ <input type="hidden" :value="item.friend_id">
|
|
|
+ </el-radio>
|
|
|
+ <div class="shareCardItem">
|
|
|
+ <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ <div class="shareCardName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
|
|
|
+ <div class="shareCardName" v-else>{{item.user_name}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="分享到群聊" name="group">
|
|
|
+ <div class="shareCardWindowBoxMain">
|
|
|
+ <div v-for="item in groupConversationList" :key="item.receiver_id" class="shareCardRadioBox" >
|
|
|
+ <el-radio :label="item.receiver_id" v-model="shareGroupId">
|
|
|
+ <input type="hidden" :value="item.receiver_id">
|
|
|
+ </el-radio>
|
|
|
+ <div class="shareCardItem">
|
|
|
+ <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/group.jpg" v-else>
|
|
|
+ <div class="shareCardName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
|
|
|
+ <div class="shareCardName" v-else>{{item.name}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ <div class="footerButtonBox">
|
|
|
+ <el-button type="info" @click="shareGroupWindowStatus=false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="shareMyGroup">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!--分享群聊 end------------------------------------------------------------>
|
|
|
+
|
|
|
+ <!--放大图片 start------------------------------------------------------------>
|
|
|
+ <el-dialog :visible.sync="imgZoomStatus" title="图片详情" :close-on-click-modal="false" max-width="600px">
|
|
|
+ <div>
|
|
|
+ <div class="imgZoomBox">
|
|
|
+ <img :src="imgZoomUrl">
|
|
|
+ </div>
|
|
|
+ <div class="footerButtonBox">
|
|
|
+ <el-button type="info" @click="imgZoomStatus=false">关闭</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!--聊天记录弹出框 start------------------------------------------------------------>
|
|
|
+ <el-dialog :visible.sync="fileWindowStatus" title="聊天记录" :close-on-click-modal="false" width="757px">
|
|
|
+ <div class="fileWindow">
|
|
|
+ <div class="fileWindowHeader">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入内容"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ v-model="searchChatRecords"
|
|
|
+ @keyup.enter.native="searchChatRecordsUser"
|
|
|
+ :disabled="activeName !== 'all'"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <!--聊天记录选项卡 start------------------------------------------------------------>
|
|
|
+ <el-tabs v-model="activeName">
|
|
|
+ <el-tab-pane label="全部" name="all">
|
|
|
+ <!-- <div class="fileWindowMessageTime">2024-11-10</div> -->
|
|
|
+ <div class="fileWindowMessageScrollBox" ref="fileWindowMessageScrollBox">
|
|
|
+ <div class="fileWindowMessageItemBox" v-for="item in chatrecords">
|
|
|
+ <!--文字消息 start-->
|
|
|
+ <div v-if="Number(item.msg_type)==1" class="historicalMessageBox">
|
|
|
+ <div class="fileWindowMessageItemIcon">
|
|
|
+ <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ </div>
|
|
|
+ <div class="fileWindowMessageItem">
|
|
|
+ <div class="fileWindowMessageItemInfo">
|
|
|
+ <div class="fileWindowMessageItemName">{{item.receiver_id_name}}</div>
|
|
|
+ <div class="fileWindowMessageItemTime">{{item.created_at}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="fileWindowMessageItemText">{{item.content}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--文字消息 end-->
|
|
|
+ <!--图片消息 start-->
|
|
|
+ <div v-if="Number(item.msg_type)==2" class="historicalMessageBox">
|
|
|
+ <div class="fileWindowMessageItemIcon">
|
|
|
+ <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ </div>
|
|
|
+ <div class="fileWindowMessageItem">
|
|
|
+ <div class="fileWindowMessageItemInfo">
|
|
|
+ <div class="fileWindowMessageItemName">{{item.receiver_id_name}}</div>
|
|
|
+ <div class="fileWindowMessageItemTime">{{item.created_at}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="fileWindowMessageItemText">
|
|
|
+ <img :src="item.content" class="fileWindowMessageItemImage">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--图片消息 end-->
|
|
|
+ <!--文件消息 start-->
|
|
|
+ <div v-if="Number(item.msg_type)==3" class="historicalMessageBox">
|
|
|
+ <div class="fileWindowMessageItemIcon">
|
|
|
+ <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ </div>
|
|
|
+ <div class="fileWindowMessageItem">
|
|
|
+ <div class="fileWindowMessageItemInfo">
|
|
|
+ <div class="fileWindowMessageItemName">{{item.receiver_id_name}}</div>
|
|
|
+ <div class="fileWindowMessageItemTime">{{item.created_at}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="fileWindowMessageItemText">
|
|
|
+ <div class="messageTypeFile">
|
|
|
+ <div class="messageTypeFileTop">
|
|
|
+ <div class="messageTypeFileInfo">
|
|
|
+ <div class="messageTypeFileTitle">
|
|
|
+ {{ JSON.parse(item.content).oldFileName }}
|
|
|
+ </div>
|
|
|
+ <div class="messageTypeFileIcon">
|
|
|
+ <img src="@/assets/chat/file.png"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="messageTypeFileSize">20kb</div> -->
|
|
|
+ </div>
|
|
|
+ <div class="messageTypeFileLogo">恒星管理平台保护您的电脑安全</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--文件消息 end-->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="文件" name="file">
|
|
|
+ <div class="fileWindowMessageItemBox" v-for="item in chatrecords">
|
|
|
+ <!--文件消息 start-->
|
|
|
+ <div v-if="Number(item.msg_type)==3" class="historicalMessageBox">
|
|
|
+ <div class="fileWindowMessageItemIcon">
|
|
|
+ <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ </div>
|
|
|
+ <div class="fileWindowMessageItem">
|
|
|
+ <div class="fileWindowMessageItemInfo">
|
|
|
+ <div class="fileWindowMessageItemName">{{item.receiver_id_name}}</div>
|
|
|
+ <div class="fileWindowMessageItemTime">{{item.created_at}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="fileWindowMessageItemText">
|
|
|
+ <div class="messageTypeFile">
|
|
|
+ <div class="messageTypeFileTop">
|
|
|
+ <div class="messageTypeFileInfo">
|
|
|
+ <div class="messageTypeFileTitle">
|
|
|
+ {{ JSON.parse(item.content).oldFileName }}
|
|
|
+ </div>
|
|
|
+ <div class="messageTypeFileIcon">
|
|
|
+ <img src="@/assets/chat/file.png"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="messageTypeFileSize">20kb</div> -->
|
|
|
+ </div>
|
|
|
+ <div class="messageTypeFileLogo">恒星管理平台保护您的电脑安全</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--文件消息 end-->
|
|
|
+ </div>
|
|
|
+ <!--图片消息 end-->
|
|
|
+ <div v-if="!chatrecords.some(item => Number(item.msg_type) === 3)" class="fileWindowNoMessage">暂无文件</div>
|
|
|
+ </el-tab-pane>
|
|
|
+
|
|
|
+ <el-tab-pane label="图片" name="img">
|
|
|
+ <div class="fileWindowMessageItemBox" v-for="item in chatrecords">
|
|
|
+ <!--图片消息 start-->
|
|
|
+ <div v-if="Number(item.msg_type)==2" class="historicalMessageBox">
|
|
|
+ <div class="fileWindowMessageItemIcon">
|
|
|
+ <img :src="item.receiver_avatar" v-if="item.receiver_avatar!=null&&item.receiver_avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ </div>
|
|
|
+ <div class="fileWindowMessageItem">
|
|
|
+ <div class="fileWindowMessageItemInfo">
|
|
|
+ <div class="fileWindowMessageItemName">{{item.receiver_id_name}}</div>
|
|
|
+ <div class="fileWindowMessageItemTime">{{item.created_at}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="fileWindowMessageItemText">
|
|
|
+ <img :src="item.content" class="fileWindowMessageItemImage">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--图片消息 end-->
|
|
|
+ <div v-if="!chatrecords.some(item => Number(item.msg_type) === 2)" class="fileWindowNoMessage">暂无图片</div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <!-- <el-tab-pane label="日期" name="date">
|
|
|
+ <div class="fileWindowDateBox">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="time"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ <el-button type="primary" class="fileWindowDateButton">搜索</el-button>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="群成员" name="groupUser">
|
|
|
+ <div class="fileWindowGroupMain">
|
|
|
+ <div class="fileWindowGroupUserLeft">
|
|
|
+ <div class="fileWindowMessageTime">2024-11-10</div>
|
|
|
+ <div class="fileWindowMessageItemBox">
|
|
|
+ <div class="fileWindowMessageItemIcon">
|
|
|
+ <img src="@/assets/chat/user/user.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="fileWindowMessageItem">
|
|
|
+ <div class="fileWindowMessageItemInfo">
|
|
|
+ <div class="fileWindowMessageItemName">用户名称</div>
|
|
|
+ <div class="fileWindowMessageItemTime">12:40</div>
|
|
|
+ </div>
|
|
|
+ <div class="fileWindowMessageItemText">用用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息用户消息</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="fileWindowGroupUserRight">
|
|
|
+ <div class="fileWindowGroupUserBox">
|
|
|
+ <el-input placeholder="请输入内容" prefix-icon="el-icon-search"></el-input>
|
|
|
+ <div class="searchUserBox">
|
|
|
+ <div class="searchNameEnglish">A</div>
|
|
|
+ <div class="searchUserItem">
|
|
|
+ <img src="@/assets/chat/user/user.png">
|
|
|
+ <div class="searchUserName">A农贸站群长</div>
|
|
|
+ </div>
|
|
|
+ <div class="searchNameEnglish">B</div>
|
|
|
+ <div class="searchUserItem">
|
|
|
+ <img src="@/assets/chat/user/user.png">
|
|
|
+ <div class="searchUserName">B农贸站群长</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane> -->
|
|
|
+ </el-tabs>
|
|
|
+ <!--聊天记录选项卡 end------------------------------------------------------------>
|
|
|
+ </div>
|
|
|
+ </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>
|
|
|
+ <!--搜索用户弹出框 start------------------------------------------------------------>
|
|
|
+ <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" v-if="groupSearchUser.avatar!=null&&groupSearchUser.avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ </div>
|
|
|
+ <div class="searchFriendInfo">
|
|
|
+ <div class="searchFriendName">
|
|
|
+ <div class="searchFriendNameText">{{groupSearchUser.nickname}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="searchFriendPhone">账号：{{groupSearchUser.nickname}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="searchFriendButton">
|
|
|
+ <el-button v-if="groupSearchUser.status==false" type="primary" @click="addGroupUser(groupSearchUser)">添加</el-button>
|
|
|
+ <el-button v-else-if="Number(creatorId)==Number(myUserId)" type="warning" @click="addGroupUser(groupSearchUser)" >移除</el-button>
|
|
|
+ <el-button v-else type="warning" @click="addGroupUser(groupSearchUser)" disabled>移除</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--搜索用户弹出框 end------------------------------------------------------------>
|
|
|
+ </div>
|
|
|
+ <!--通讯录列表 start------------------------------------------------------------>
|
|
|
+ <div class="searchUserBox">
|
|
|
+ <!-- <div class="searchNameEnglish">A</div> -->
|
|
|
+ <!--群主-->
|
|
|
+ <div class="searchUserItem" v-for="(item,index) in friendsList" :key="index" v-if="Number(creatorId)==Number(myUserId)">
|
|
|
+ <!-- {{ item.friend_id }}
|
|
|
+ {{ creatorId }} -->
|
|
|
+ <!-- <el-checkbox v-model="item.status" @change="changeSelectFriends(item)" :disabled="Number(item.friend_id)==Number(creatorId)"></el-checkbox> -->
|
|
|
+ <el-checkbox v-model="item.status" @change="changeSelectFriends(item)" :disabled="Number(item.friend_id) == Number(creatorId)"></el-checkbox>
|
|
|
+ <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ <div class="searchUserName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
|
|
|
+ <div class="searchUserName" v-else>
|
|
|
+ {{item.user_name}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--非群主-->
|
|
|
+ <div class="searchUserItem" v-for="(item,index) in friendsList" :key="index" v-if="Number(creatorId)!=Number(myUserId)">
|
|
|
+ <el-checkbox v-model="item.status" @change="changeSelectFriends(item)" :disabled="Number(item.friend_id) == Number(creatorId) || isGroupUser(item.friend_id)"></el-checkbox>
|
|
|
+ <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ <div class="searchUserName" v-if="item.remark!=null&&item.remark!=''">{{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" v-if="item.avatar!=null&&item.avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ <div class="rightSlideUserGroupLeader" v-if="creatorId == item.user_id">群主</div>
|
|
|
+ <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!=''">{{item.remark}}</div>
|
|
|
+ <div class="searchWindowUserName" v-else-if="item.user_name!=null&&item.user_name!=''">{{item.user_name}}</div>
|
|
|
+ <div class="searchWindowUserName" v-else>未知用户</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------------------------------------------------------------>
|
|
|
+ <!--群名称弹出框 start------------------------------------------------------------>
|
|
|
+ <el-dialog :visible.sync="editGroupNameWindow" title="编辑群名称" :close-on-click-modal="false" width="420px">
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ <el-input type="textarea" resize="none" v-model="editMessageTitle" placeholder="请输入" maxlength="20"></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="footerButtonBox">
|
|
|
+ <el-button type="info" @click="editGroupNameWindow=false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="editGroupName">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!--群名称弹出框 end------------------------------------------------------------>
|
|
|
+ <!--群公告弹出框 start------------------------------------------------------------>
|
|
|
+ <el-dialog :visible.sync="editGroupNoticeWindow" title="编辑群公告" :close-on-click-modal="false" width="420px">
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ <el-input type="textarea" resize="none" v-model="editGroupProfile" placeholder="请输入" rows="10" maxlength="500"></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="footerButtonBox">
|
|
|
+ <el-button type="info" @click="editGroupNoticeWindow=false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="editGroupNotice">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!--群公告弹出框 end------------------------------------------------------------>
|
|
|
+
|
|
|
+ <!--查看群公告 start------------------------------------------------------------>
|
|
|
+ <el-dialog :visible.sync="groupProfileWindow" title="群公告详情" :close-on-click-modal="false" width="420px">
|
|
|
+ <div>
|
|
|
+ <div class="groupProfileBox">
|
|
|
+ {{groupProfile}}
|
|
|
+ </div>
|
|
|
+ <div class="footerButtonBox">
|
|
|
+ <el-button type="info" @click="groupProfileWindow=false">关闭</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!--查看群公告 end------------------------------------------------------------>
|
|
|
+ <!--分享名片 start------------------------------------------------------------>
|
|
|
+ <el-dialog :visible.sync="userCardWindowStatus" title="分享名片" :close-on-click-modal="false" width="420px">
|
|
|
+ <div>
|
|
|
+ <div class="shareCardWindowBox">
|
|
|
+ <el-tabs v-model="shareTableActive" type="card" @tab-click="handleClickShareCard">
|
|
|
+ <el-tab-pane label="分享给朋友" name="friend">
|
|
|
+ <div class="shareCardWindowBoxMain">
|
|
|
+ <div v-for="item in friendsList" :key="item.id" class="shareCardRadioBox" >
|
|
|
+ <el-radio :label="item.friend_id" v-model="useShareUserId">
|
|
|
+ <input type="hidden" :value="item.friend_id">
|
|
|
+ </el-radio>
|
|
|
+ <div class="shareCardItem">
|
|
|
+ <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ <div class="shareCardName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
|
|
|
+ <div class="shareCardName" v-else>{{item.user_name}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="分享到群聊" name="group">
|
|
|
+ <div class="shareCardWindowBoxMain">
|
|
|
+ <div v-for="item in groupConversationList" :key="item.receiver_id" class="shareCardRadioBox" >
|
|
|
+ <el-radio :label="item.receiver_id" v-model="shareGroupId">
|
|
|
+ <input type="hidden" :value="item.receiver_id">
|
|
|
+ </el-radio>
|
|
|
+ <div class="shareCardItem">
|
|
|
+ <img :src="item.avatar" v-if="item.avatar!=null&&item.avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/group.jpg" v-else>
|
|
|
+ <div class="shareCardName" v-if="item.remark!=null&&item.remark!=''">{{item.remark}}</div>
|
|
|
+ <div class="shareCardName" v-else>{{item.name}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ <div class="footerButtonBox">
|
|
|
+ <el-button type="info" @click="userCardWindowStatus=false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="shareCard">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!--分享名片 end------------------------------------------------------------>
|
|
|
+
|
|
|
+ <!--发送好友申请弹出框 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="addGroupWindow" title="加入群聊" :close-on-click-modal="false" width="420px">
|
|
|
+ <div class="addGroupWindow">
|
|
|
+ <div class="addGroupWindowImg">
|
|
|
+ <img src="@/assets/chat/user/group.jpg" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="addGroupWindowTitle">{{groupInviteInfo.group_name}}</div>
|
|
|
+ <div class="addGroupWindowText">加入"{{groupInviteInfo.group_name}}"群聊，点击可查看该群消息</div>
|
|
|
+ <div class="footerButtonBox">
|
|
|
+ <el-button type="info" @click="addGroupWindow = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="joinGroup">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!--加入群聊弹出框 end------------------------------------------------------------>
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="searchConversationStatus"
|
|
|
+ title=" "
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ width="420px"
|
|
|
+ >
|
|
|
+ <div class="searchFriendBox" >
|
|
|
+ <div class="searchFriendItem">
|
|
|
+ <div class="searchFriendAvatar" v-if="selectConversationItem.group_name==null">
|
|
|
+ <img :src="selectConversationItem.avatar" v-if="selectConversationItem.avatar!=null&&selectConversationItem.avatar!=''">
|
|
|
+ <img src="@/assets/chat/user/admin.png" v-else>
|
|
|
+ </div>
|
|
|
+ <div class="searchFriendAvatar" v-else>
|
|
|
+ <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>
|
|
|
+ </el-dialog>
|
|
|
+ <!--请求验证弹出框 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------------------------------------------------------------>
|
|
|
+ <el-dialog :visible.sync="searchWindowStatus" title="聊天记录" :close-on-click-modal="false" width="420px" modal="false">
|
|
|
+ <div class="searchFriendBox">
|
|
|
+ <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>
|
|
|
+ <div class="searchFriendPhone">账号：{{searchFriendList.user_name}}</div>
|
|
|
+ </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>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ //引入组件
|
|
|
+ import hallTitle from './components/hallTitle.vue';
|
|
|
+ import contactsTitle from './components/contactsTitle.vue';
|
|
|
+ import baseUrl from '@/utils/baseUrl';
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ hallTitle,
|
|
|
+ contactsTitle
|
|
|
+ },
|
|
|
+ name: "ChatPanel",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ avatar:this.$store.state.user.avatar,
|
|
|
+ showfrindDialog:false,
|
|
|
+ activeTab: 0,
|
|
|
+ groupList: [],
|
|
|
+ contactList: [],
|
|
|
+ showDialog:false,
|
|
|
+ //1.全局配置 start---------------------------------------->
|
|
|
+ myUserId:'',//我的用户id
|
|
|
+ tableTitleName:'聊天列表',//左侧菜单标题
|
|
|
+ messageTitle:'',//当前的聊天名称
|
|
|
+ editMessageTitle:'',//正在编辑的聊天名称
|
|
|
+ groupProfile:'',//当前的群公告
|
|
|
+ editGroupProfile:'',//正在编辑的群公告
|
|
|
+ groupProfileWindow:false,//群公告弹出框
|
|
|
+ listTimeOut:null,//定时器
|
|
|
+ addFriendWindowStatus:false,//添加好友弹出框
|
|
|
+ addform:{
|
|
|
+ friend_id:'',//好友id
|
|
|
+ remark:'',//备注名
|
|
|
+ },
|
|
|
+ formLabelWidth:'100px',
|
|
|
+ imgZoomStatus:false,//图片放大框
|
|
|
+ imgZoomUrl:'',//图片放大框的图片地址
|
|
|
+ //1.全局配置 end---------------------------------------->
|
|
|
+
|
|
|
+ //2.会话列表 start---------------------------------------->
|
|
|
+ hallLeftLoading:false,//左侧加载中
|
|
|
+ hallRightLoading:false,//右侧加载中
|
|
|
+ conversationList:[],//会话列表
|
|
|
+ groupConversationList:[],//群聊会话列表
|
|
|
+ selectConversationItem:{},//选择会话
|
|
|
+ searchConversationStatus:false,//搜索会话状态
|
|
|
+ chatrecords:[],//聊天记录
|
|
|
+ ifTop:false,//是否为置顶
|
|
|
+ searchConversation:'',//搜索会话
|
|
|
+ //2.会话列表 end---------------------------------------->
|
|
|
+
|
|
|
+ //3.聊天记录 start---------------------------------------->
|
|
|
+ receiverId:'',//接收消息的id
|
|
|
+ receiverType:'',//接收消息的类型 1单聊 2群聊
|
|
|
+ ifNoMessage:true,//如果没有选择任何聊天记录
|
|
|
+ searchChatRecords:"",//搜索聊天记录
|
|
|
+ userMessage:'',//用户发送的消息
|
|
|
+ fileWindowStatus:false,//聊天记录弹出框是否显示
|
|
|
+ activeName: 'all',//聊天记录选项卡
|
|
|
+ time:'',//按照时间搜索
|
|
|
+ //3.聊天记录 end---------------------------------------->
|
|
|
+
|
|
|
+ //4.群聊 start---------------------------------------->
|
|
|
+ //4.1 创建群聊
|
|
|
+ groupWindowStatus:false,//添加聊天群组出框是否显示
|
|
|
+ groupFriendsWindowStatus:false,//创建群聊时搜索框
|
|
|
+ friendsList:[],//左侧好友列表
|
|
|
+ searchFriendGroup:'',//搜索群聊的输入框绑定值
|
|
|
+ groupFriendSearchUser:{},//编辑群时搜索群成员 用于显示搜索结果
|
|
|
+ //4.2 加入群聊
|
|
|
+ addGroupWindow:false,//加入群聊弹出框
|
|
|
+ //4.2 编辑群聊
|
|
|
+ groupId:'',//当前编辑的群聊的id
|
|
|
+ creatorId:'',//群主id
|
|
|
+ groupUserList:[],//群成员列表
|
|
|
+ groupInfo:{},//群设置信息
|
|
|
+ groupSearchUser:{},//编辑群时搜索群成员 用于显示搜索结果
|
|
|
+ rightSlideBoxShow:false,//右侧菜单是否显示
|
|
|
+ searchGroup:'',//搜索群聊的输入框绑定值
|
|
|
+ editGroupNoticeWindow:false,//编辑群公告弹出框
|
|
|
+ editGroupNameWindow:false,//编辑群名称弹出框
|
|
|
+ groupEditWindowStatus:false,//编辑群成员弹出框
|
|
|
+ groupEditMainWindowStatus:false,//编辑弹框中搜索人员
|
|
|
+ searchUser:"",//右侧菜单的搜索框
|
|
|
+ groupRightUserInfo:{},//直接从右侧群组菜单中搜索成员
|
|
|
+ groupRightSearchWindow:false,//右侧群组详情弹出框
|
|
|
+ //shareGroupMessage:"",//分享群聊的消息
|
|
|
+ shareGroupWindowStatus:false,//分享群聊弹出框
|
|
|
+ shareGroupActive:'friend',//分享名片选项卡
|
|
|
+ shareGroupId:'',//要分享给谁
|
|
|
+ useShareGroupInfo:{},//分享名片时选中的群组信息
|
|
|
+ groupInviteInfo:{},//群邀请信息
|
|
|
+ //4.群聊 end---------------------------------------->
|
|
|
+
|
|
|
+ //6.名片 start---------------------------------------->
|
|
|
+ //userCardMessage:'',//用户留言
|
|
|
+ userCardWindowStatus:false,//用户名片弹出框
|
|
|
+ shareTableActive:'friend',//分享名片选项卡
|
|
|
+ useShareUserId:'',//分享名片时选中的用户id
|
|
|
+ useShareUserInfo:{},//分享名片时选中的用户信息
|
|
|
+ //6.名片 end---------------------------------------->
|
|
|
+
|
|
|
+ //7.加好友 start---------------------------------------->
|
|
|
+ addUserWindowStatus:false,//添加用户弹出框是否显示
|
|
|
+ form:{
|
|
|
+ //好友申请
|
|
|
+ addUserForm:{
|
|
|
+ notes:"",//备注
|
|
|
+ nickname:"",//修改昵称
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //7.加好友 end---------------------------------------->
|
|
|
+
|
|
|
+ //8.发消息 start---------------------------------------->
|
|
|
+ sendMessage:{
|
|
|
+ img:{
|
|
|
+ imgUrl:'',//图片地址
|
|
|
+ oldFileName:"",//文件名
|
|
|
+ },
|
|
|
+ file:{
|
|
|
+ fileUrl:'',
|
|
|
+ oldFileName:"",//文件名
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ //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:"",
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ tabList() {
|
|
|
+ return [
|
|
|
+
|
|
|
+ { key: "user-solid", icon: require('@/assets/chat/huihua.png'), active: require('@/assets/chat/huihua_select.png') },
|
|
|
+ { key: "user", icon: require('@/assets/chat/tongxl.png'), active: require('@/assets/chat/tongxl_select.png') },
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //1.会话列表 start---------------------------------------->
|
|
|
+ //1.1获取会话列表
|
|
|
+ getConversationList(){
|
|
|
+ this.$store.dispatch('chat/getConversation',{}).then(res=> {
|
|
|
+ console.log(res)
|
|
|
+ let data = res.data;
|
|
|
+ for(let item of data){
|
|
|
+ item.status = 0; //默认未选中
|
|
|
+ }
|
|
|
+ this.conversationList = data;
|
|
|
+
|
|
|
+ this.hallLeftLoading = false;
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.error('获取会话列表失败!')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //1.2选择会话
|
|
|
+ selectConversation(item){
|
|
|
+ this.showDialog = true;
|
|
|
+ console.log("发送消息消息体2：",item)
|
|
|
+ //选择会话的时候开启loading框
|
|
|
+ this.hallRightLoading = true;
|
|
|
+ //关闭右侧详情框
|
|
|
+ this.closeRightDetailWindow();
|
|
|
+ //使用receiverId判断当前是哪个会话
|
|
|
+ this.receiverId = item.receiver_id;
|
|
|
+ //会话类型 = 1 单聊
|
|
|
+ this.receiverType = 1;
|
|
|
+ //分享名片时需要使用用户的头像和名称
|
|
|
+ this.useShareUserInfo = item;
|
|
|
+ //关闭搜索会话搜索框
|
|
|
+ this.closeSearchConversation();
|
|
|
+ //清理单聊状态
|
|
|
+ this.conversationList.forEach(conversation => {
|
|
|
+ conversation.status = (conversation.receiver_id === item.receiver_id) ? 1 : 0;
|
|
|
+ if(conversation.receiver_id === item.receiver_id){
|
|
|
+ //当前的聊天名称
|
|
|
+ this.messageTitle = item.user_name;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ //console.log(this.conversationList)
|
|
|
+ this.getchatrecords(item.receiver_id);
|
|
|
+ //关闭没有选择任何聊天的界面
|
|
|
+ this.ifNoMessage = false;
|
|
|
+ //选择单聊的时候把群聊的id清空
|
|
|
+ this.groupId = '';
|
|
|
+ },
|
|
|
+ //1.3获取聊天记录
|
|
|
+ getchatrecords(user_id){
|
|
|
+ //此处增加一个show_id 用于后端判断如何积累未读消息 注意，选择group的方法在下面
|
|
|
+ this.$store.dispatch('chat/getChatRecords',{friend_id:user_id}).then(res=> {
|
|
|
+ console.log(res)
|
|
|
+ this.chatrecords = res.data.data;
|
|
|
+ //滚动条滚动到底部
|
|
|
+ this.scorllBottom();
|
|
|
+ console.log(this.chatrecords)
|
|
|
+ //选择会话后关闭loading框
|
|
|
+ this.hallRightLoading = false;
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.error('获取聊天记录失败!')
|
|
|
+ //选择会话后关闭loading框
|
|
|
+ this.hallRightLoading = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //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.6 搜索并定位聊天记录
|
|
|
+ searchChatRecordsUser() {
|
|
|
+ // 获取输入的内容
|
|
|
+ const searchTerm = this.searchChatRecords.toLowerCase();
|
|
|
+ // 查找匹配的消息
|
|
|
+ const matchingItem = this.chatrecords.find(item => {
|
|
|
+ return item.content.toLowerCase().includes(searchTerm);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 如果找到匹配的消息，滚动到该消息
|
|
|
+ if (matchingItem) {
|
|
|
+ const index = this.chatrecords.indexOf(matchingItem);
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const messageElements = this.$refs.fileWindowMessageScrollBox.children;
|
|
|
+ if (messageElements[index]) {
|
|
|
+ messageElements[index].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$message.error('聊天信息不存在！'); // 提示用户
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //1.7 从通讯录进入会话大厅
|
|
|
+ retrieveSession(){
|
|
|
+ console.log("开始执行retrieveSession方法！")
|
|
|
+ //1.获取会话列表
|
|
|
+ this.$store.dispatch('chat/getConversation',{}).then(res=> {
|
|
|
+ //2.查询当前会话中是否已经存在该好友的会话
|
|
|
+ let data = res.data;
|
|
|
+ let SeleteItem = {};
|
|
|
+ let flag = false;//对话是否已经存在
|
|
|
+ for(let item of data){
|
|
|
+ //3.如果会话中含有该好友的会话，则选中该会话
|
|
|
+ if(item.receiver_id == this.$route.query.friend_id){
|
|
|
+ item.status = 1;
|
|
|
+ SeleteItem = item;
|
|
|
+ flag = true;
|
|
|
+ }else{
|
|
|
+ item.status = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //4.更新会话列表
|
|
|
+ this.conversationList = data;
|
|
|
+ //5.判断对话是否已经在会话列表中存在
|
|
|
+ if(flag==true){
|
|
|
+ console.log("会话存在！选中会话！")
|
|
|
+ //6.如果存在，则选中该会话
|
|
|
+ this.selectConversation(SeleteItem)
|
|
|
+ }else{
|
|
|
+ console.log("会话不存在！创建单聊！")
|
|
|
+ //7.如果不存在，则创建单聊
|
|
|
+ this.createSession();
|
|
|
+ }
|
|
|
+ //8.循环更新会话列表
|
|
|
+ this.forSearchConversationList();
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.error('获取会话列表失败!')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //1.8 创建单聊
|
|
|
+ createSession(){
|
|
|
+ //console.log(this.$route.query.friend_id)
|
|
|
+ const currentDateTime = new Date();
|
|
|
+ const formattedDateTime = currentDateTime.toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' });
|
|
|
+ console.log("当前时间（北京时间）:", formattedDateTime);
|
|
|
+ const message = {
|
|
|
+ talk_type:1,//当前的会话类型
|
|
|
+ //receiver_id:this.$route.query.friend_id,//当前的会话id
|
|
|
+ receiver_id:this.createMessageId,//当前的会话id
|
|
|
+ content:"我于" + formattedDateTime + "创建了一个会话",//用户发发送的消息
|
|
|
+ msg_type:1,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
|
|
|
+ };
|
|
|
+ //console.log(message)
|
|
|
+ //发送消息
|
|
|
+ let that = this;
|
|
|
+ if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
|
|
+ //打开左侧loading防止重复点击
|
|
|
+ this.hallLeftLoading = true;
|
|
|
+ this.ws.send(JSON.stringify(message));
|
|
|
+
|
|
|
+ //bug
|
|
|
+ //如果双方不是好友，此处可以弹出错误
|
|
|
+
|
|
|
+ //2秒后搜索会话列表 防止创建失败
|
|
|
+ setTimeout(() => {
|
|
|
+ that.$store.dispatch('chat/getConversation',{}).then(res=> {
|
|
|
+ //查询当前会话中是否已经存在该好友的会话
|
|
|
+ let data = res.data;
|
|
|
+ let SeleteItem = {};
|
|
|
+ let flag = false;//对话是否已经存在
|
|
|
+ for(let item of data){
|
|
|
+ //如果会话中含有该好友的会话，则选中该会话
|
|
|
+ if(item.receiver_id == this.createMessageId){
|
|
|
+ item.status = 1;
|
|
|
+ SeleteItem = item;
|
|
|
+ flag = true;
|
|
|
+ }else{
|
|
|
+ item.status = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //更新会话列表
|
|
|
+ that.conversationList = data;
|
|
|
+ //关闭loading层
|
|
|
+ that.hallLeftLoading = false;
|
|
|
+ //判断对话是否已经在会话列表中存在
|
|
|
+ if(flag==true){
|
|
|
+ //如果存在，则选中该会话
|
|
|
+ that.selectConversation(SeleteItem)
|
|
|
+ }else{
|
|
|
+ that.$message.error('创建会话失败，请重新从通讯录发起会话！')
|
|
|
+ }
|
|
|
+
|
|
|
+ }).catch(() => {
|
|
|
+ that.$message.error('获取会话列表失败!')
|
|
|
+ })
|
|
|
+ }, 2000);
|
|
|
+
|
|
|
+ }else{
|
|
|
+ this.$message.error('WebSocket连接失败!创建会话失败！')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //1.9 循环更新会话列表
|
|
|
+ forSearchConversationList(){
|
|
|
+ let that = this;
|
|
|
+ this.listTimeOut = setInterval(() => {
|
|
|
+ //刷新时先判断是否有选中的会话
|
|
|
+ if(that.receiverId!=''){
|
|
|
+ //如果不为空,说明用户选择了某一个会话，此时需要修改会话列表中该会话的状态
|
|
|
+ this.$store.dispatch('chat/getConversation',{}).then(res=> {
|
|
|
+ console.log(res)
|
|
|
+ let data = res.data;
|
|
|
+ for(let item of data){
|
|
|
+ if(item.receiver_id==that.receiverId){
|
|
|
+ item.status = 1;
|
|
|
+ }else{
|
|
|
+ item.status = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.conversationList = data;
|
|
|
+ console.log("开始获取会话列表，将于8秒后再次获取！")
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.error('获取会话列表失败!')
|
|
|
+ })
|
|
|
+
|
|
|
+ }else{
|
|
|
+ //如果为空，说明用户没有选择任何会话，此时可以直接请求列表
|
|
|
+ that.getConversationList();
|
|
|
+ }
|
|
|
+ }, 7000);
|
|
|
+ },
|
|
|
+ //1.10 查询会话列表中是否存在会话，不存在就创建
|
|
|
+ searchConversationIfCreate(user_id){
|
|
|
+ //从会话列表中找到receiver_id于user_id相同的会话
|
|
|
+ let flag = false;
|
|
|
+ for(let item of this.conversationList){
|
|
|
+ if(item.receiver_id==user_id){
|
|
|
+ flag = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //第一种情况：两人是好友，且会话已经创建了
|
|
|
+ if(flag){
|
|
|
+ //给与右侧展示列表的id
|
|
|
+ this.groupRightUserInfo.receiver_id = String(user_id);
|
|
|
+ this.groupRightUserInfo.user_id = String(user_id);
|
|
|
+ this.selectConversation(this.groupRightUserInfo)
|
|
|
+ this.rightSlideBoxShow = false;
|
|
|
+ this.groupRightSearchWindow = false;
|
|
|
+ }else{
|
|
|
+ //第二种情况：两人是好友但是不存在对话
|
|
|
+ //console.log("不存在这个会话，创建单聊")
|
|
|
+ this.createMessageId = user_id;
|
|
|
+ this.createSession();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //1.会话列表 end---------------------------------------->
|
|
|
+
|
|
|
+ //2.群聊 start---------------------------------------->
|
|
|
+ //2.1 创建群聊
|
|
|
+ //2.1.1 打开群聊创建窗口
|
|
|
+ creatGroup(){
|
|
|
+ this.groupWindowStatus = true;
|
|
|
+ //获得好友列表
|
|
|
+ this.getFriendsList();
|
|
|
+ },
|
|
|
+ //2.1.2 左侧菜单获取好友列表
|
|
|
+ getFriendsList(){
|
|
|
+ this.$store.dispatch('chat/getFriendsList',{user_id:this.myUserId}).then(res=> {
|
|
|
+ console.log(res)
|
|
|
+ for(let item of res.data){
|
|
|
+ item.status = false; //默认未选中
|
|
|
+ }
|
|
|
+ this.friendsList = res.data;
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.error('获取好友列表失败!')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //2.1.3 左侧菜单取消选择好友
|
|
|
+ cancelSelectFriends(id){
|
|
|
+ this.friendsList.forEach(item => {
|
|
|
+ if(item.id == id){
|
|
|
+ item.status = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //2.1.4 清空并关闭创建群弹出框
|
|
|
+ clearCreatGroupWindow(){
|
|
|
+ this.friendsList.forEach(item => {
|
|
|
+ item.status = false;
|
|
|
+ });
|
|
|
+ this.groupWindowStatus = false;
|
|
|
+ },
|
|
|
+ //2.1.5 创建群
|
|
|
+ createForGroup(){
|
|
|
+ let data = {
|
|
|
+ group_name:"",//群聊名称
|
|
|
+ group_desc:"仅群主可以修改",//群聊公告
|
|
|
+ group_avatar:"",//群聊头像
|
|
|
+ group_member:""//群成员
|
|
|
+ }
|
|
|
+ //从friendsList找出用户选择的联系人，然后创建群组
|
|
|
+ //先把我自己放进去
|
|
|
+ data.group_member = this.myUserId + ",";
|
|
|
+ //然后循环添加其他用户
|
|
|
+ this.friendsList.forEach(item => {
|
|
|
+ if(item.status){
|
|
|
+ data.group_member += item.friend_id + ",";
|
|
|
+ }
|
|
|
+ data.group_name = this.friendsList
|
|
|
+ .filter(item => item.status)
|
|
|
+ .slice(0, 3) // 只取前三个
|
|
|
+ .map(item => item.remark !== null ? item.remark : item.user_name)
|
|
|
+ .join(", ") // 使用逗号和空格分隔
|
|
|
+ });
|
|
|
+ data.group_member = data.group_member.slice(0,-1);//掉最后一个字符
|
|
|
+
|
|
|
+ //console.log(data)
|
|
|
+ this.$store.dispatch('chat/addGroup',data).then(res=> {
|
|
|
+ this.$message.success('创建群聊成功!')
|
|
|
+ //完成后关闭弹出框
|
|
|
+ this.clearCreatGroupWindow();
|
|
|
+ //重新获取会话列表
|
|
|
+ this.getConversationList();
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.error('创建群聊失败!')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //2.1.6 建群时搜索群成员
|
|
|
+ searchFriendGroupUser(){
|
|
|
+ this.groupFriendSearchUser = {};
|
|
|
+ let flag = false; //是否找到成员
|
|
|
+ for(let item of this.friendsList){
|
|
|
+ if(item.user_name==this.searchFriendGroup||item.remark==this.searchFriendGroup){
|
|
|
+ this.groupFriendSearchUser = item;
|
|
|
+ flag = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(this.searchGroup)
|
|
|
+ console.log(this.friendsList)
|
|
|
+ console.log(flag)
|
|
|
+
|
|
|
+ console.log(this.groupFriendSearchUser)
|
|
|
+ //this.searchGroup 搜索的内容
|
|
|
+ //this.groupEditWindowStatus 弹出框状态
|
|
|
+ //this.groupSearchUser 搜索出来的成员
|
|
|
+ if(!flag){
|
|
|
+ this.$message.error('没有找到该成员!')
|
|
|
+ }else{
|
|
|
+ this.groupFriendsWindowStatus = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //2.1.7 把用户添加到选择框里面
|
|
|
+ addSearchFriendWindow(){
|
|
|
+ this.groupFriendSearchUser.status=!this.groupFriendSearchUser.status;
|
|
|
+ this.closeSearchFriendWindow();
|
|
|
+ },
|
|
|
+ //2.1.7 关闭搜索弹出框
|
|
|
+ closeSearchFriendWindow(){
|
|
|
+ this.groupFriendsWindowStatus = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ //2.2 选择群聊
|
|
|
+ //2.1.1 在会话列表中选择一个群聊
|
|
|
+ selectGroup(item){
|
|
|
+ this.$fixModalZIndex();
|
|
|
+ this.showDialog = true;
|
|
|
+ //选择会话的时候开启loading框
|
|
|
+ this.hallRightLoading = true;
|
|
|
+ //关闭右侧详情框
|
|
|
+ this.closeRightDetailWindow();
|
|
|
+ //使用receiverId判断当前是哪个会话
|
|
|
+ this.receiverId = item.receiver_id;
|
|
|
+ //会话类型 = 2 群聊
|
|
|
+ this.receiverType = 2;
|
|
|
+ //分享群聊时需要使用群名称和群id
|
|
|
+ this.useShareGroupInfo = item;
|
|
|
+ console.log("选择群聊")
|
|
|
+ //清理单聊状态
|
|
|
+ this.conversationList.forEach(conversation => {
|
|
|
+ conversation.status = (conversation.receiver_id === item.receiver_id) ? 1 : 0;
|
|
|
+ });
|
|
|
+ console.log(item)
|
|
|
+ //记录准备加入群聊的id
|
|
|
+ this.groupId = item.receiver_id;
|
|
|
+ //当前的聊天名称
|
|
|
+ this.messageTitle = item.group_name;
|
|
|
+ //关闭没有选择任何聊天的界面
|
|
|
+ this.ifNoMessage = false;
|
|
|
+ //获取群聊天信息
|
|
|
+ this.getGroupChatRecords(item.receiver_id);
|
|
|
+ //获取群设置信息
|
|
|
+ this.getGroupSystem(item.receiver_id);
|
|
|
+ //获取群成员
|
|
|
+ this.getGroupMember(item.receiver_id);
|
|
|
+ },
|
|
|
+ //2.1.2 获取群聊消息
|
|
|
+ getGroupChatRecords(group_id){
|
|
|
+ this.$store.dispatch('chat/getGroupChatRecords',{group_id:group_id}).then(res=> {
|
|
|
+ console.log(res)
|
|
|
+ this.chatrecords = res.data.data;
|
|
|
+ //滚动条滚动到底部
|
|
|
+ this.scorllBottom();
|
|
|
+ //选择会话的时候开启loading框
|
|
|
+ this.hallRightLoading = false;
|
|
|
+
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.error('获取群设置信息失败!');
|
|
|
+ //选择会话的时候开启loading框
|
|
|
+ this.hallRightLoading = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ //2.3 编辑群聊
|
|
|
+ //2.3.1 打开右侧菜单设置窗口
|
|
|
+ openGroupSystem(){
|
|
|
+ this.rightSlideBoxShow = !this.rightSlideBoxShow;
|
|
|
+ },
|
|
|
+ //2.3.2 获取群设置群成员
|
|
|
+ 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('获取群成员信息失败!')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //2.3.3 获取群设置信息
|
|
|
+ getGroupSystem(group_id){
|
|
|
+ this.$store.dispatch('chat/getGroupInfo',{group_id:group_id}).then(res=> {
|
|
|
+ console.log(res)
|
|
|
+ this.groupInfo = res.data;
|
|
|
+ this.creatorId = res.data.creator_id;
|
|
|
+ this.messageTitle = res.data.group_name;
|
|
|
+ this.editMessageTitle = res.data.group_name;
|
|
|
+ if(res.data.profile==null){
|
|
|
+ this.groupProfile = "暂无群公告"
|
|
|
+ }else{
|
|
|
+ this.groupProfile = res.data.profile;
|
|
|
+ this.editGroupProfile = res.data.profile;
|
|
|
+ }
|
|
|
+
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.error('获取群设置信息失败!')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //2.3.4 右侧菜单退出群聊
|
|
|
+ closeGroup(){
|
|
|
+ this.$confirm('将要退出该群聊，确定吗？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ //this.groupId
|
|
|
+ this.$store.dispatch('chat/quitGroup',{group_id:this.groupId}).then(res=> {
|
|
|
+ this.$message.success('退出群聊成功!')
|
|
|
+ //关闭右侧菜单
|
|
|
+ this.rightSlideBoxShow = false;
|
|
|
+ //关闭右侧聊天界面
|
|
|
+ this.ifNoMessage = true;
|
|
|
+ //重新请求会话列表
|
|
|
+ this.getConversationList();
|
|
|
+
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.error('群聊退出失败!')
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.warning('已取消退出')
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //2.3.5 右侧菜单删除群聊
|
|
|
+ delGroup(){
|
|
|
+ this.$confirm('将要解散该群聊，确定吗？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ zIndex: 11000 // 新增，确保弹窗在最上层
|
|
|
+ }).then(() => {
|
|
|
+ //this.groupId
|
|
|
+ this.$store.dispatch('chat/delGroup',{group_id:this.groupId}).then(res=> {
|
|
|
+ this.$message.success('已解散群聊!')
|
|
|
+ //关闭右侧菜单
|
|
|
+ this.rightSlideBoxShow = false;
|
|
|
+ //关闭右侧聊天界面
|
|
|
+ this.ifNoMessage = true;
|
|
|
+ //重新请求会话列表
|
|
|
+ this.getConversationList();
|
|
|
+
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.error('解散群聊失败!')
|
|
|
+ })
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.warning('已取消解散')
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //2.3.6 右侧菜单编辑群名称
|
|
|
+ editGroupName(){
|
|
|
+ let data = {
|
|
|
+ group_id:this.groupId,
|
|
|
+ group_name:this.editMessageTitle//群名称
|
|
|
+ }
|
|
|
+ this.$store.dispatch('chat/updateGroup',data).then(res=> {
|
|
|
+ this.$message.success('成功修改群聊名称！');
|
|
|
+ //重新获取群详情
|
|
|
+ this.getGroupSystem(this.groupId);
|
|
|
+ //重新获取会话列表
|
|
|
+ this.getConversationList();
|
|
|
+ this.editGroupNameWindow = false;
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.error('修改群聊名称失败!')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //2.3.7 右侧菜单编辑群公告
|
|
|
+ editGroupNotice(){
|
|
|
+ let data = {
|
|
|
+ group_id:this.groupId,
|
|
|
+ profile:this.editGroupProfile//群公告
|
|
|
+ }
|
|
|
+ this.$store.dispatch('chat/updateGroup',data).then(res=> {
|
|
|
+ this.editGroupNoticeWindow = false;
|
|
|
+ this.$message.success('成功添加群公告')
|
|
|
+ //重新获取群详情
|
|
|
+ this.getGroupSystem(this.groupId)
|
|
|
+
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.error('编辑群公告失败!')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //2.3.8 群弹出框回显群内成员
|
|
|
+ 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.3.9 群弹出框编辑群成员
|
|
|
+ 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.3.19 群弹出框取消编辑群成员
|
|
|
+ cancelEditGroupMember(){
|
|
|
+ this.groupEditWindowStatus = false;
|
|
|
+ this.getGroupMember(this.groupId);
|
|
|
+ },
|
|
|
+ //2.3.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.3.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.3.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.3.23 群弹出框关闭弹出框
|
|
|
+ closeAddGroupUserWindow(){
|
|
|
+ this.searchGroup = "";
|
|
|
+ this.groupSearchUser = {};
|
|
|
+ this.groupEditMainWindowStatus = false;
|
|
|
+ },
|
|
|
+ //2.3.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.3.25 右侧菜单编辑成员
|
|
|
+ rightSearchUser(){
|
|
|
+ this.groupRightUserInfo = {};
|
|
|
+ let flag = false; //是否找到成员
|
|
|
+ for(let item of this.groupUserList){
|
|
|
+ if(item.user_name==this.searchUser||item.remark==this.searchUser){
|
|
|
+ this.groupRightUserInfo = item;
|
|
|
+ flag = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(this.searchUser)
|
|
|
+ console.log(this.groupUserList)
|
|
|
+ console.log(flag)
|
|
|
+ //this.searchGroup 搜索的内容
|
|
|
+ //this.groupEditWindowStatus 弹出框状态
|
|
|
+ //this.groupSearchUser 搜索出来的成员
|
|
|
+ if(!flag){
|
|
|
+ this.$message.error('没有找到该成员!')
|
|
|
+ }else{
|
|
|
+ //找到这个成员以后，需要先验证一下他俩是不是好友
|
|
|
+ this.$store.dispatch('chat/isFriend',{friend_id:this.groupRightUserInfo.user_id}).then(res=> {
|
|
|
+ console.log(res.data)//true false
|
|
|
+ this.groupRightUserInfo.isFriend = res.data;
|
|
|
+ //打开弹出框
|
|
|
+ this.groupRightSearchWindow = true;
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.error('获取成员身份信息失败!')
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //2.3.26 关闭弹出框
|
|
|
+ closeRightSearchUser(){
|
|
|
+ this.searchUser = "";
|
|
|
+ this.groupRightUserInfo = {};
|
|
|
+ this.groupRightSearchWindow = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ //2.4 加入群聊
|
|
|
+ //2.4.1 打开群聊邀请窗口
|
|
|
+ openGroupInviteWindow(info){
|
|
|
+ this.addGroupWindow = true;
|
|
|
+ //info.content.split(',')[0] 群名称
|
|
|
+ //info.content.split(',')[1] 群id
|
|
|
+ //获得要加入的群聊详情
|
|
|
+ console.log(info.content)
|
|
|
+ this.groupInviteInfo.group_name = info.content.split(',')[0];
|
|
|
+ this.groupInviteInfo.group_id = info.content.split(',')[1];
|
|
|
+ },
|
|
|
+ //2.4.2 加入群聊
|
|
|
+ joinGroup(){
|
|
|
+ this.$store.dispatch('chat/joinGroup',{group_id:this.groupInviteInfo.group_id}).then(res=> {
|
|
|
+ if(res.code=='200'){
|
|
|
+ this.$message.success('加入群聊成功!')
|
|
|
+ this.addGroupWindow = false;
|
|
|
+ }else{
|
|
|
+ this.$message.error(res.message)
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.error('加入群聊失败!')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //2.4.3 打开分享群聊弹出框
|
|
|
+ openShareMyGroup(){
|
|
|
+ //群组聊天数据初始化
|
|
|
+ this.groupConversationList = [];
|
|
|
+ //打开名片弹出框
|
|
|
+ this.shareGroupWindowStatus = true;
|
|
|
+ // shareGroupWindowStatus:false,//分享群聊弹出框
|
|
|
+ // shareGroupActive:'friend',//分享名片选项卡
|
|
|
+ // shareGroupId:'',//要分享的群聊id
|
|
|
+ // useShareGroupInfo:{},//分享名片时选中的群组信息
|
|
|
+ //默认获取一下好友列表
|
|
|
+ this.getFriendsList();
|
|
|
+ //把群聊提出来单独放到一个数组
|
|
|
+ for(let item of this.conversationList){
|
|
|
+ if(item.is_group==1){
|
|
|
+ this.groupConversationList.push(item);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //2.4.4 分享群聊
|
|
|
+ shareMyGroup(){
|
|
|
+ console.log(this.shareGroupId)
|
|
|
+ if(this.shareGroupId!=''){
|
|
|
+ let message = {};
|
|
|
+ console.log(this.useShareGroupInfo)
|
|
|
+ let userInfo = [this.useShareGroupInfo.group_name,this.useShareGroupInfo.receiver_id];
|
|
|
+ let userInfoString = userInfo.join(',');
|
|
|
+
|
|
|
+ if(this.shareGroupActive=='friend'){
|
|
|
+ //单聊
|
|
|
+ message = {
|
|
|
+ talk_type:1,
|
|
|
+ receiver_id:this.shareGroupId,
|
|
|
+ msg_type:6,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
|
|
|
+ };
|
|
|
+ message.content = userInfoString;
|
|
|
+ }else if(this.shareGroupActive=='group'){
|
|
|
+ //群聊
|
|
|
+ message = {
|
|
|
+ talk_type:2,
|
|
|
+ receiver_id:this.shareGroupId,
|
|
|
+ content:userInfo,
|
|
|
+ msg_type:6,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
|
|
|
+ };
|
|
|
+ message.content = userInfoString;
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(message)
|
|
|
+ //发送消息
|
|
|
+ if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
|
|
+ this.ws.send(JSON.stringify(message));
|
|
|
+ }
|
|
|
+ //关闭分享弹出框
|
|
|
+ this.shareGroupWindowStatus = false;
|
|
|
+ this.$message.success('分享名片成功!')
|
|
|
+ }else{
|
|
|
+ this.$message.error('请选择分享对象!')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleClickShareGroupCard(tab, event) {
|
|
|
+ const tabName = tab.name;
|
|
|
+ console.log("当前选中的tab name:", tabName);
|
|
|
+ this.shareGroupActive = tabName;
|
|
|
+ },
|
|
|
+ //2.4.5 判断该成员是否在群聊中
|
|
|
+ isGroupUser(id){
|
|
|
+ let flag = false;
|
|
|
+ for(let item of this.groupUserList){
|
|
|
+ if(item.user_id==id){
|
|
|
+ flag = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return flag;
|
|
|
+ },
|
|
|
+ //2.群聊 end---------------------------------------->
|
|
|
+
|
|
|
+ //3.全局应用 start---------------------------------------->
|
|
|
+ //3.1 滚动条滚动到底部
|
|
|
+ scorllBottom(){
|
|
|
+ //滚动条滚动到底部
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const rightUserMessageBox = this.$refs.rightUserMessageBox;
|
|
|
+ if (rightUserMessageBox) {
|
|
|
+ rightUserMessageBox.scrollTop = rightUserMessageBox.scrollHeight;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //3.2 添加好友
|
|
|
+ addFriendShow(id){
|
|
|
+ console.log("添加好友:",id)
|
|
|
+ this.addFriendWindowStatus = true;
|
|
|
+ this.addform.friend_id = id;
|
|
|
+ },
|
|
|
+ addMyFriend(){
|
|
|
+ this.$store.dispatch('chat/addFriend',this.addform).then(res=> {
|
|
|
+ if(res.code=='200'){
|
|
|
+ this.$message.success("好友申请发送成功！")
|
|
|
+ this.addFriendWindowStatus = false;
|
|
|
+ }else{
|
|
|
+ //this.$message.error(res.data)
|
|
|
+ this.$message.error(res.message)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //3.3 关闭右侧详情框
|
|
|
+ closeRightDetailWindow(){
|
|
|
+ this.rightSlideBoxShow = false;
|
|
|
+ this.groupRightSearchWindow = false;
|
|
|
+ this.searchUser = "";
|
|
|
+ },
|
|
|
+ //3.全局应用 end---------------------------------------->
|
|
|
+
|
|
|
+ //4.会话框 start---------------------------------------->
|
|
|
+ //4.1上传
|
|
|
+ //4.1.1上传图片
|
|
|
+ beforeImgUpload(file) {
|
|
|
+ //先清理一下上传的缩略窗口
|
|
|
+ this.deFileUpload()
|
|
|
+ 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.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.1.2上传文件
|
|
|
+ beforeFileUpload(file) {
|
|
|
+ //先清理一下上传的缩略窗口
|
|
|
+ this.deFileUpload()
|
|
|
+ console.log(file)
|
|
|
+ //允许的文件类型
|
|
|
+ const isDoc = file.type === 'application/msword';
|
|
|
+ const isDocx = file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
|
|
|
+ const isXls = file.type === 'application/vnd.ms-excel';
|
|
|
+ const isXlsx = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
|
|
|
+ const isPptx = file.type === 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
|
|
|
+ const isRar = file.type === 'application/x-rar-compressed';
|
|
|
+ const isZip = file.type === 'application/x-zip-compressed';
|
|
|
+ const isTxt = file.type === 'text/plain';
|
|
|
+ const isPdf = file.type === 'application/pdf';
|
|
|
+ //文件大小不能超过2M
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2;
|
|
|
+
|
|
|
+ if (!isTxt && !isDoc && !isDocx && !isXls && !isXlsx && !isPptx && !isRar && !isZip && !isPdf) {
|
|
|
+ this.$message.error('该文件类型不允许上传!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error('发送的文件大小不能超过2M！');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append('file', file);
|
|
|
+
|
|
|
+ this.$store.dispatch('pool/uploadFile',formData).then(res=> {
|
|
|
+ this.sendMessage.file.fileUrl = res.data.imgUrl;
|
|
|
+ this.sendMessage.file.oldFileName = res.data.oldFileName;
|
|
|
+ console.log(res.data)
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '网络错误，请重试！'
|
|
|
+ });
|
|
|
+ })
|
|
|
+
|
|
|
+ // 阻止默认的上传行为
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ //4.1.3 删除上传的文件
|
|
|
+ deFileUpload(){
|
|
|
+ this.sendMessage.img.imgUrl = "";
|
|
|
+ this.sendMessage.img.oldFileName = "";
|
|
|
+ this.sendMessage.file.fileUrl = "";
|
|
|
+ this.sendMessage.file.oldFileName = "";
|
|
|
+ },
|
|
|
+ //4.会话框 end---------------------------------------->
|
|
|
+
|
|
|
+ //5.websocket会话 start---------------------------------------->
|
|
|
+ //5.1 接受消息
|
|
|
+ handleIncomingMessage(event) {
|
|
|
+ const message = JSON.parse(event.data);
|
|
|
+ console.log("监听消息：",message)
|
|
|
+
|
|
|
+ // console.log(message.receiver_id.length == 18)
|
|
|
+ //第一步：先判断是否为群消息
|
|
|
+ if (message.receiver_id && message.receiver_id.length == 18) {
|
|
|
+ //第二步：判断当前接收的消息是否显示到聊天框中
|
|
|
+ if(Number(this.receiverId)==Number(message.receiver_id)){
|
|
|
+ console.log("当前消息为群消息，并且可以显示到当前的会话框中！")
|
|
|
+ //18位就是群聊
|
|
|
+ if(Number(this.myUserId) == Number(message.user_id)){
|
|
|
+ //如果message的receiverId和会话的receiverId一致，说明这条信息是自己发的回显
|
|
|
+ let receiveMessage = {
|
|
|
+ action:"said",//自己说的
|
|
|
+ user_avatar:message.user_avatar,//头像
|
|
|
+ content:message.content,//内容
|
|
|
+ msg_type:message.msg_type,//消息类型
|
|
|
+ }
|
|
|
+ console.log("来自单聊的回显消息:"+this.receiverId,message.receiver_id)
|
|
|
+ console.log(message)
|
|
|
+ //消息添加到聊天记录
|
|
|
+ this.chatrecords.push(receiveMessage);
|
|
|
+ // 确保 Vue 能够检测到数组的变化
|
|
|
+ //this.$set(this.chatrecords, this.chatrecords.length, receiveMessage);
|
|
|
+ console.log(this.chatrecords)
|
|
|
+ //滚动条滚动到底部
|
|
|
+ this.scorllBottom();
|
|
|
+ }else{
|
|
|
+ let receiveMessage = {
|
|
|
+ action:"recieved",//对方说的
|
|
|
+ receiver_avatar:message.user_avatar,//头像
|
|
|
+ content:message.content,//内容
|
|
|
+ msg_type:message.msg_type,//消息类型
|
|
|
+ }
|
|
|
+ //如果message的receiverId和会话的receiverId不一致，说明这条信息是别人发的，需要添加到聊天记录
|
|
|
+ //消息添加到聊天记录
|
|
|
+ console.log("来自单聊消息:"+this.receiverId,message.user_id)
|
|
|
+ this.chatrecords.push(receiveMessage);
|
|
|
+ console.log(message)
|
|
|
+ //滚动条滚动到底部
|
|
|
+ this.scorllBottom();
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ console.log("当前消息为群消息，但是用户未开启此聊天窗口！")
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ //当前的单聊消息是自己发的，回显到聊天框中
|
|
|
+ if(Number(this.receiverId)==Number(message.receiver_id)){
|
|
|
+ //如果message的receiverId和会话的receiverId一致，说明这条信息是自己发的回显
|
|
|
+ let receiveMessage = {
|
|
|
+ action:"said",//自己说的
|
|
|
+ user_avatar:message.user_avatar,//头像
|
|
|
+ content:message.content,//内容
|
|
|
+ msg_type:message.msg_type,//消息类型
|
|
|
+ }
|
|
|
+ console.log("来自单聊的回显消息:"+this.receiverId,message.receiver_id)
|
|
|
+ console.log(message)
|
|
|
+ //消息添加到聊天记录
|
|
|
+ this.chatrecords.push(receiveMessage);
|
|
|
+ // 确保 Vue 能够检测到数组的变化
|
|
|
+ //this.$set(this.chatrecords, this.chatrecords.length, receiveMessage);
|
|
|
+ console.log(this.chatrecords)
|
|
|
+ //滚动条滚动到底部
|
|
|
+ this.scorllBottom();
|
|
|
+ }else{
|
|
|
+ //判断要回显的内容是不是在群聊
|
|
|
+ if(message.receiver_id && Number(message.receiver_id.length) == 18){
|
|
|
+ console.log("当前是单聊消息，你选择的是单聊框，可以回显！")
|
|
|
+ let receiveMessage = {
|
|
|
+ action:"recieved",//对方说的
|
|
|
+ receiver_avatar:message.user_avatar,//头像
|
|
|
+ content:message.content,//内容
|
|
|
+ msg_type:message.msg_type,//消息类型
|
|
|
+ }
|
|
|
+ console.log("来自单聊的回显消息:"+this.receiverId,message.receiver_id)
|
|
|
+ console.log(message)
|
|
|
+ //消息添加到聊天记录
|
|
|
+ this.chatrecords.push(receiveMessage);
|
|
|
+ // 确保 Vue 能够检测到数组的变化
|
|
|
+ //this.$set(this.chatrecords, this.chatrecords.length, receiveMessage);
|
|
|
+ console.log(this.chatrecords)
|
|
|
+ //滚动条滚动到底部
|
|
|
+ this.scorllBottom();
|
|
|
+ }else{
|
|
|
+ // console.log(this.receiverId)
|
|
|
+ // console.log(message.receiver_id,message.user_id)
|
|
|
+ // console.log("当前是单聊消息，但是你选择的是群聊框，该条消息不能回显！")
|
|
|
+ if(this.receiverId!=message.receiver_id&&this.receiverId!=message.user_id){
|
|
|
+ //收到单聊消息，但是单聊消息不属于当前的聊天窗口
|
|
|
+ console.log("当前单聊消息不属于当前的聊天窗口，不回显！")
|
|
|
+ }else{
|
|
|
+ if(this.receiverId==message.user_id){
|
|
|
+ console.log("当前单聊消息属于当前的聊天窗口，回显！")
|
|
|
+ let receiveMessage = {
|
|
|
+ action:"recieved",//对方说的
|
|
|
+ receiver_avatar:message.user_avatar,//头像
|
|
|
+ content:message.content,//内容
|
|
|
+ msg_type:message.msg_type,//消息类型
|
|
|
+ }
|
|
|
+ console.log("来自单聊的回显消息:"+this.receiverId,message.receiver_id)
|
|
|
+ console.log(message)
|
|
|
+ //消息添加到聊天记录
|
|
|
+ this.chatrecords.push(receiveMessage);
|
|
|
+ // 确保 Vue 能够检测到数组的变化
|
|
|
+ //this.$set(this.chatrecords, this.chatrecords.length, receiveMessage);
|
|
|
+ console.log(this.chatrecords)
|
|
|
+ //滚动条滚动到底部
|
|
|
+ this.scorllBottom();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 5.2 发送消息
|
|
|
+ sendUserMessage() {
|
|
|
+ if (this.userMessage.trim() !== '') {
|
|
|
+ const message = {
|
|
|
+ talk_type:this.receiverType,//当前的会话类型
|
|
|
+ receiver_id:this.receiverId,//当前的会话id
|
|
|
+ content:this.userMessage,//用户发发送的消息
|
|
|
+ msg_type:1,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
|
|
|
+ };
|
|
|
+ //发送消息
|
|
|
+ if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
|
|
+ this.ws.send(JSON.stringify(message));
|
|
|
+ }
|
|
|
+ this.userMessage = '';
|
|
|
+ }else{
|
|
|
+ this.$message.error('消息不能为空！')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 5.3 发送图片或者文字
|
|
|
+ sendUserMessageToFile() {
|
|
|
+
|
|
|
+ if(this.sendMessage.img.imgUrl!=''){
|
|
|
+ const message = {
|
|
|
+ talk_type:this.receiverType,//当前的会话类型
|
|
|
+ receiver_id:this.receiverId,//当前的会话id
|
|
|
+ content:this.sendMessage.img.imgUrl,//用户发发送的消息
|
|
|
+ msg_type:2,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
|
|
|
+ };
|
|
|
+ if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
|
|
+ this.ws.send(JSON.stringify(message));
|
|
|
+ //发送完毕清除选择的图片
|
|
|
+ this.sendMessage.img.imgUrl='';
|
|
|
+ }
|
|
|
+ //如果文本框不为空，把文本框内的消息也提交过去
|
|
|
+ if(this.userMessage.trim()!=''){
|
|
|
+ this.sendUserMessage();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(this.sendMessage.file.fileUrl!=''){
|
|
|
+ //把名称和地址打包成一个对象
|
|
|
+ const fileInfo = {
|
|
|
+ file_url:this.sendMessage.file.fileUrl,
|
|
|
+ oldFileName:this.sendMessage.file.oldFileName
|
|
|
+ }
|
|
|
+ const fileInfoString = JSON.stringify(fileInfo);
|
|
|
+ //发送消息
|
|
|
+ const message = {
|
|
|
+ talk_type:this.receiverType,//当前的会话类型
|
|
|
+ receiver_id:this.receiverId,//当前的会话id
|
|
|
+ content:fileInfoString,//用户发发送的消息
|
|
|
+ msg_type:3,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
|
|
|
+ };
|
|
|
+ if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
|
|
+ this.ws.send(JSON.stringify(message));
|
|
|
+ //发送完毕清除选择的文件
|
|
|
+ this.sendMessage.file.fileUrl='';
|
|
|
+ }
|
|
|
+ //如果文本框不为空，把文本框内的消息也提交过去
|
|
|
+ if(this.userMessage.trim()!=''){
|
|
|
+ this.sendUserMessage();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //5.4 打开名片弹出框
|
|
|
+ openShareCard(){
|
|
|
+ //群组聊天数据初始化
|
|
|
+ this.groupConversationList = [];
|
|
|
+ //打开名片弹出框
|
|
|
+ this.userCardWindowStatus = true;
|
|
|
+ //默认获取一下好友列表
|
|
|
+ this.getFriendsList();
|
|
|
+ //好友列表
|
|
|
+ //this.friendsList
|
|
|
+ //会话列表
|
|
|
+ //this.conversationList
|
|
|
+ //把群聊提出来单独放到一个数组
|
|
|
+ //this.groupConversationList
|
|
|
+ for(let item of this.conversationList){
|
|
|
+ if(item.is_group==1){
|
|
|
+ this.groupConversationList.push(item);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //5.5 分享名片
|
|
|
+ shareCard(){
|
|
|
+ console.log(this.useShareUserId)
|
|
|
+ if(this.useShareUserId!=''){
|
|
|
+ let message = {};
|
|
|
+ // let userInfo = {
|
|
|
+ // avatar:this.useShareUserInfo.avatar,
|
|
|
+ // user_name:this.useShareUserInfo.user_name,
|
|
|
+ // friend_id:this.receiverId
|
|
|
+ // }
|
|
|
+ let userInfo = [this.useShareUserInfo.avatar,this.useShareUserInfo.user_name,this.receiverId];
|
|
|
+ let userInfoString = userInfo.join(',');
|
|
|
+
|
|
|
+ if(this.shareTableActive=='friend'){
|
|
|
+ //单聊
|
|
|
+ message = {
|
|
|
+ talk_type:1,
|
|
|
+ receiver_id:this.useShareUserId,
|
|
|
+ msg_type:4,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
|
|
|
+ };
|
|
|
+ message.content = userInfoString;
|
|
|
+ }else if(this.shareTableActive=='group'){
|
|
|
+ //群聊
|
|
|
+ message = {
|
|
|
+ talk_type:2,
|
|
|
+ receiver_id:this.useShareUserId,
|
|
|
+ content:userInfo,
|
|
|
+ msg_type:4,//消息类型 1：文本 2：图片 3：文件 4：好友卡片 5：系统消息；6：加群卡片
|
|
|
+ };
|
|
|
+ message.content = userInfoString;
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(message)
|
|
|
+ //发送消息
|
|
|
+ if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
|
|
+ this.ws.send(JSON.stringify(message));
|
|
|
+ }
|
|
|
+ //关闭分享弹出框
|
|
|
+ this.userCardWindowStatus = false;
|
|
|
+ this.$message.success('分享名片成功!')
|
|
|
+ }else{
|
|
|
+ this.$message.error('请选择分享对象!')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //5.6 切换分享名片
|
|
|
+ handleClickShareCard(tab, event) {
|
|
|
+ const tabName = tab.name;
|
|
|
+ console.log("当前选中的tab name:", tabName);
|
|
|
+ this.shareTableActive = tabName;
|
|
|
+ },
|
|
|
+ //5.7 下载文件
|
|
|
+ downloadFile(item){
|
|
|
+ let downloadData = JSON.parse(item.content);
|
|
|
+ console.log(downloadData.file_url)
|
|
|
+ if(downloadData.file_url!=''){
|
|
|
+ const link = document.createElement('a');
|
|
|
+ link.href = downloadData.file_url;
|
|
|
+ link.setAttribute('download', 'downloaded_file'); // You can set a default file name here
|
|
|
+ document.body.appendChild(link);
|
|
|
+ link.click();
|
|
|
+ document.body.removeChild(link);
|
|
|
+ }else{
|
|
|
+ this.$message.error('文件下载失败！')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //5.8 图片放大
|
|
|
+ imgZoom(url){
|
|
|
+ this.imgZoomUrl = url;
|
|
|
+ this.imgZoomStatus = true;
|
|
|
+ },
|
|
|
+ //5.9 创建链接 防止websocket意外中断
|
|
|
+ getWebsocket(){
|
|
|
+ //判断当前的route是否为/hall，否则不触发这个方法
|
|
|
+ if(this.$route.path=="/hall"){
|
|
|
+ this.$confirm('您的会话意外断开，是否重新连接？', '提示', {
|
|
|
+ confirmButtonText: '重新连接',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ //强制刷新页面
|
|
|
+ window.location.reload();
|
|
|
+ }).catch(() => {
|
|
|
+ //取消刷新
|
|
|
+ this.$message.error("您的连接已中断！")
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ console.log("前往其他页面，关闭ws！")
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //5.websocket会话 end---------------------------------------->
|
|
|
+
|
|
|
+ //0.全局操作 start------------------------------------------------------------>
|
|
|
+ //0.1切换页面状态
|
|
|
+ tabPage(status){
|
|
|
+ this.showfrindDialog = true;
|
|
|
+ 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(){
|
|
|
+ console.log("获取联系人列表##")
|
|
|
+ //获取用户身份id
|
|
|
+ //const userId = this.$store.state.user.userid;
|
|
|
+ this.$store.dispatch('chat/getFriendsList',{}).then(res=> {
|
|
|
+ let data = res.data;
|
|
|
+ console.log("=====:",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;
|
|
|
+ this.showfrindDialog = true;
|
|
|
+ //把要编辑的好友的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;
|
|
|
+ }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.showfrindDialog = false;
|
|
|
+ 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',
|
|
|
+ zIndex: 11000, // 新增，确保弹窗在最上层
|
|
|
+ modal: false // 移除蒙层
|
|
|
+ }).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.showfrindDialog = false;
|
|
|
+ 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;
|
|
|
+ },
|
|
|
+ //发送消息===
|
|
|
+ sendMessageToFriend(item){
|
|
|
+
|
|
|
+ this.showDialog = true;
|
|
|
+ console.log("发送消息消息体1：",item)
|
|
|
+ //选择会话的时候开启loading框
|
|
|
+ this.hallRightLoading = true;
|
|
|
+ //关闭右侧详情框
|
|
|
+ this.closeRightDetailWindow();
|
|
|
+ //使用receiverId判断当前是哪个会话
|
|
|
+ this.receiverId = item.friend_id;
|
|
|
+ //会话类型 = 1 单聊
|
|
|
+ this.receiverType = 1;
|
|
|
+ //分享名片时需要使用用户的头像和名称
|
|
|
+ this.useShareUserInfo = item;
|
|
|
+ //关闭搜索会话搜索框
|
|
|
+ this.closeSearchConversation();
|
|
|
+ //清理单聊状态
|
|
|
+ // this.conversationList.forEach(conversation => {
|
|
|
+ // conversation.status = (conversation.receiver_id === item.friend_id) ? 1 : 0;
|
|
|
+ // if(conversation.receiver_id === item.friend_id){
|
|
|
+ // //当前的聊天名称
|
|
|
+ // this.messageTitle = item.user_name;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ this.messageTitle = item.user_name;
|
|
|
+ //console.log(this.conversationList)
|
|
|
+ this.getchatrecords(item.friend_id);
|
|
|
+ //关闭没有选择任何聊天的界面
|
|
|
+ this.ifNoMessage = false;
|
|
|
+ //选择单聊的时候把群聊的id清空
|
|
|
+ this.groupId = '';
|
|
|
+ },
|
|
|
+ handleDialogOpen() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ const modals = document.querySelectorAll('.v-modal');
|
|
|
+ modals.forEach(modal => {
|
|
|
+ // 10999 比弹窗低，确保弹窗在上面
|
|
|
+ if (parseInt(modal.style.zIndex, 10) > 10999) {
|
|
|
+ modal.style.zIndex = 10999;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }, 50); // 动画结束后再修正一次
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ console.log("=====fuck")
|
|
|
+ //开启websocket连接 start---------------------------------------->
|
|
|
+ //1.获取admin-token
|
|
|
+ const adminToken = document.cookie.split('; ').find(row => row.startsWith('Admin-Token=')).split('=')[1];
|
|
|
+ console.log("Admin-Token:", adminToken);
|
|
|
+
|
|
|
+ //2.连接websocket
|
|
|
+ let websocketNewUrl = baseUrl.WebsocketUrl +"?token=" + adminToken;
|
|
|
+ //let websocketNewUrl = URL.WebsocketUrl +"?token=" + adminToken;
|
|
|
+ this.ws = new WebSocket(websocketNewUrl);
|
|
|
+ this.ws.addEventListener('message', this.handleIncomingMessage);
|
|
|
+
|
|
|
+ //3.当连接中断时提供一个方法重新连接
|
|
|
+ let that = this;
|
|
|
+
|
|
|
+ //当连接关闭的时候关闭websocket
|
|
|
+ this.ws.addEventListener('close', function (event) {
|
|
|
+ // 连接关闭时执行的操作
|
|
|
+ console.log("关闭链接",event);
|
|
|
+ // 弹窗询问用户是否手动刷新
|
|
|
+ // that.getWebsocket();
|
|
|
+ });
|
|
|
+
|
|
|
+ //开启websocket连接 end---------------------------------------->
|
|
|
+
|
|
|
+ //从通讯录创建单聊 start---------------------------------------->
|
|
|
+ //当ws创建成功以后再执行，防止数据未加载
|
|
|
+ this.ws.onopen = () => {
|
|
|
+ console.log("ws创建成功!");
|
|
|
+ console.log(this.$route.query.friend_id)
|
|
|
+ //判断当前路由是否携带friend_id
|
|
|
+ if(this.$route.query.friend_id){
|
|
|
+ console.log("从通讯录进入，开始创建会话！")
|
|
|
+ //1.从通讯录进入会话大厅
|
|
|
+ this.retrieveSession();
|
|
|
+ //2.获取我的用户id
|
|
|
+ this.myUserId = this.$store.state.user.userid;
|
|
|
+ //把这个id存一下
|
|
|
+ this.createMessageId = this.$route.query.friend_id;
|
|
|
+
|
|
|
+ }else{
|
|
|
+ console.log("直接进入，无需创建会话！")
|
|
|
+ //直接进入会话大厅
|
|
|
+ //1.获取会话列表
|
|
|
+ this.getConversationList();
|
|
|
+ this.getUserFriendList();
|
|
|
+ this.getFriendApplyList();
|
|
|
+ //2.获取我的用户id
|
|
|
+ this.myUserId = this.$store.state.user.userid;
|
|
|
+ //3.循环获取会话列表
|
|
|
+ //开启loading
|
|
|
+ this.hallLeftLoading = true;
|
|
|
+ this.forSearchConversationList();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ //从通讯录创建单聊 end---------------------------------------->
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ //页面销毁的时候清除定时器获取列表
|
|
|
+ clearInterval(this.listTimeOut);
|
|
|
+ //页面销毁的时候关闭websocket
|
|
|
+ if (this.ws) {
|
|
|
+ this.ws.removeEventListener('message', this.handleIncomingMessage);
|
|
|
+ this.ws.close();
|
|
|
+ }
|
|
|
+ clearInterval(this.getFriendApplyListStatus);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style scoped lang="less">
|
|
|
+ .chat-panel {
|
|
|
+ position: fixed;
|
|
|
+ right: 30px;
|
|
|
+ bottom: 30px;
|
|
|
+ width: 270px;
|
|
|
+ height: 520px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 16px rgba(0,0,0,0.18);
|
|
|
+ z-index: 10000;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .chat-header {
|
|
|
+ height: 48px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 16px;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .chat-header .chat-status {
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ background: #4caf50;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ .chat-header .chat-close {
|
|
|
+ position: absolute;
|
|
|
+ right: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ .chat-header .chat-icon {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin-right: 8px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .chat-tabs {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ height: 44px;
|
|
|
+ }
|
|
|
+ .tab {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #888;
|
|
|
+ padding: 12px 0;
|
|
|
+ transition: color 0.2s, border-bottom 0.2s;
|
|
|
+ border-bottom: 2px solid transparent;
|
|
|
+ }
|
|
|
+ .tab.active {
|
|
|
+ color: #409EFF;
|
|
|
+ border-bottom: 2px solid #409EFF;
|
|
|
+ }
|
|
|
+ .chat-groups {
|
|
|
+
|
|
|
+
|
|
|
+ padding: 0 6px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .group {
|
|
|
+ margin-bottom: 12px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .chat-footer {
|
|
|
+ height: 48px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ border-top: 1px solid #eee;
|
|
|
+ background: #fafafa;
|
|
|
+ }
|
|
|
+ .footer-icon {
|
|
|
+ font-size: 22px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .contact {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ .status {
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .status.online {
|
|
|
+ background: #4caf50;
|
|
|
+ }
|
|
|
+ .status.offline {
|
|
|
+ background: #ccc;
|
|
|
+ }
|
|
|
+ //左侧
|
|
|
+ .hallLeft {
|
|
|
+ // width: 420px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 20px;
|
|
|
+ margin-top: 11px;
|
|
|
+ position: relative;
|
|
|
+ .newFriendBox {
|
|
|
+ padding: 10px 25px 0 25px;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ .newFriendImgBox {
|
|
|
+ padding: 8px 21px 8px 25px;
|
|
|
+ height: 62px;
|
|
|
+ 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 {
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #5570F1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 10px;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .newFriendText {
|
|
|
+ color: #333;
|
|
|
+ font-size: 14px;
|
|
|
+ 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: 0px;
|
|
|
+ }
|
|
|
+ .userListBox {
|
|
|
+ padding: 15px 0;
|
|
|
+ overflow-y: auto;
|
|
|
+ // height: 300px;
|
|
|
+ .active {
|
|
|
+ background: #F5F7FD;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-right: 4px solid #5570F1 !important;
|
|
|
+ }
|
|
|
+ .userItem {
|
|
|
+ padding: 8 21px 8 25px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 52px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-right: 4px solid #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ .userAvatar {
|
|
|
+ width: 38px;
|
|
|
+ height: 38px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .userInfo {
|
|
|
+ flex: 1;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 5px;
|
|
|
+ .userName {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .userNameText {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ // width: 240px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ .userMessageNum {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #333;
|
|
|
+ width: 64px;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .hallLeftLoading{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 420px;
|
|
|
+ height: 740px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: rgba(255, 255, 255, 0.5);
|
|
|
+ z-index: 100;
|
|
|
+ .hallLeftLoadingIcon {
|
|
|
+ .hallLeftLoadingIconItem {
|
|
|
+ color: #CCCCCC;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-size: 60px;
|
|
|
+ }
|
|
|
+ .hallLeftLoadingText {
|
|
|
+ color: #CCCCCC;
|
|
|
+ font-size: 32px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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: 0px;
|
|
|
+ }
|
|
|
+ .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 {
|
|
|
+
|
|
|
+ .active {
|
|
|
+ background: #F5F7FD;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-right: 4px solid #5570F1 !important;
|
|
|
+ }
|
|
|
+ .userItem {
|
|
|
+ padding: 8px 21px 8px 25px;
|
|
|
+ height: 62px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-right: 4px solid #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .flexItemBox{
|
|
|
+ width: 100%;
|
|
|
+ .userAvatar {
|
|
|
+ width: 38px;
|
|
|
+ height: 38px;
|
|
|
+ float:left;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .userInfo {
|
|
|
+ float:left;
|
|
|
+ width:131px;
|
|
|
+ margin-top:17px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 15px;
|
|
|
+ .userName {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ //padding-bottom: 10px;
|
|
|
+ .userNameText {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ width:260px;
|
|
|
+ }
|
|
|
+ .userMessageNum {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #333;
|
|
|
+ width: 64px;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //右侧菜单
|
|
|
+ .rightSlideBox {
|
|
|
+ width: 420px;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: -4px 0px 4px 0px rgba(0, 0, 0, 0.1);
|
|
|
+ .rightSlideBoxClose {
|
|
|
+ padding: 20px 20px 0 20px;
|
|
|
+ height: 50px;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .rightSlideBoxCloseTitle {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ .rightSlideBoxCloseIcon {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ text-align: center;
|
|
|
+ background: #EFEFEF;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightSlideSearch {
|
|
|
+ padding: 30px 25px 0 25px;
|
|
|
+ height: 66px;
|
|
|
+ //overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ .searchFriendBox {
|
|
|
+ position: absolute;
|
|
|
+ width: 280px;
|
|
|
+ border-radius: 8px;
|
|
|
+ top: 65px;
|
|
|
+ left: -260px;
|
|
|
+ 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;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightSlideUserBox {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 40px 40px 10px 40px;
|
|
|
+ height: 180px;
|
|
|
+ overflow-y: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ //border-bottom: 1px solid #E9EDF7;
|
|
|
+ .rightEditUserItem {
|
|
|
+ cursor: pointer;
|
|
|
+ // color: #333;
|
|
|
+ // .rightSlideUserItemIcon {
|
|
|
+ // .addUserIcon {
|
|
|
+ // transition: all 0.5s ease;
|
|
|
+ // }
|
|
|
+ // .addUserIcon:hover {
|
|
|
+ // background: #5570F1;
|
|
|
+ // color: #fff;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ }
|
|
|
+ .rightSlideUserItem {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ width: 25%;
|
|
|
+ position: relative;
|
|
|
+ //cursor: pointer;
|
|
|
+ //用户菜单
|
|
|
+ .rightSlideUserItemMore {
|
|
|
+ position: absolute;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
|
|
|
+ bottom: -220px;
|
|
|
+ left: -240px;
|
|
|
+ width: 280px;
|
|
|
+ height: 270px;
|
|
|
+ .rightSlideUserItemMoreMain {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ padding:0 20px;
|
|
|
+ .rightSlideUserItemMoreMainIcon {
|
|
|
+ img {
|
|
|
+ width: 66px;
|
|
|
+ height: 66px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightSlideUserItemMoreMainInfo {
|
|
|
+ padding: 30px 0 30px 20px;
|
|
|
+ border-bottom: 1px solid #E9EDF7;
|
|
|
+ flex: 1;
|
|
|
+ .rightSlideUserItemMoreMainInfoTop {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .rightSlideUserItemMoreUserName {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 18px;
|
|
|
+ .rightSlideUserItemMoreUserMore {
|
|
|
+ margin-left: 10px;
|
|
|
+ img {
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightSlideUserItemMoreUserMoreIcon {
|
|
|
+ img {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightSlideUserItemMoreNumber {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightSlideUserItemMoreLine {
|
|
|
+ .rightSlideUserItemMoreLineItem {
|
|
|
+ padding: 20px;
|
|
|
+ border-bottom: 1px solid #E9EDF7;
|
|
|
+ display: flex;
|
|
|
+ .rightSlideUserItemMoreTitle {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #999;
|
|
|
+ width: 80px;
|
|
|
+ }
|
|
|
+ .rightSlideUserItemMoreText {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex:1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightSlideUserItemMoreLineButton {
|
|
|
+ padding-top: 25px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ color:#5570F1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ img {
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ .rightSlideUserItemMoreLineGroup {
|
|
|
+ width: 33.33%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightSlideUserItemIcon {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ img {
|
|
|
+ width: 58px;
|
|
|
+ height: 58px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .el-dropdown-link {
|
|
|
+ width: 58px;
|
|
|
+ height: 58px;
|
|
|
+ position: relative;
|
|
|
+ .rightSlideUserGroupLeader{
|
|
|
+ font-size: 12px;
|
|
|
+ color: #FEAF50;
|
|
|
+ background: #FFEAD1;
|
|
|
+ width: 36px;
|
|
|
+ height: 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: -10px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .addUserIcon {
|
|
|
+ width: 58px;
|
|
|
+ height: 58px;
|
|
|
+ line-height: 58px;
|
|
|
+ background: #F0F0F0;
|
|
|
+ border-radius: 50%;
|
|
|
+ text-align: center;
|
|
|
+ color:#fff;
|
|
|
+ font-size: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightSlideUserItemName {
|
|
|
+ //width: 80px;
|
|
|
+ padding: 0 5px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ margin-top: 10px;
|
|
|
+ text-align: center;
|
|
|
+ white-space: nowrap; /* 强制不换行 */
|
|
|
+ overflow: hidden; /* 超出宽度隐藏 */
|
|
|
+ text-overflow: ellipsis; /* 显示省略号 */
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightLineBorder {
|
|
|
+ width: 100%;
|
|
|
+ border-bottom: 1px solid #E9EDF7;
|
|
|
+ }
|
|
|
+ .rightSlideMore {
|
|
|
+ padding: 30px 40px;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #999;
|
|
|
+ text-align: center
|
|
|
+ }
|
|
|
+ //聊天记录
|
|
|
+ .rightSlideFunction {
|
|
|
+ .rightSlideFunctionItem {
|
|
|
+ height: 60px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 20px 40px;
|
|
|
+ border-bottom: 1px solid #E9EDF7;
|
|
|
+ cursor: pointer;
|
|
|
+ .rightSlideFunctionItemText {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ .rightSlideFunctionItemIcon {
|
|
|
+ img {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //群聊设置
|
|
|
+ .groupSystem {
|
|
|
+ border-bottom: 1px solid #E9EDF7;
|
|
|
+ padding-bottom: 30px;
|
|
|
+ .groupChatSystem {
|
|
|
+ padding: 30px 40px 0 40px;
|
|
|
+ height: 80px;
|
|
|
+ overflow: hidden;
|
|
|
+ .groupChatTitle {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .groupChatText {
|
|
|
+ width: 100%;
|
|
|
+ height: 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #999;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ img {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .groupChatTextContent {
|
|
|
+ width: 300px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightSlideFooterBox {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ div{
|
|
|
+ width: 33%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #666;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-top: 30px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-right: 1px solid #E9EDF7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightSlideFooter {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #666;
|
|
|
+ padding: 30px 40px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ border-bottom: 1px solid #E9EDF7;
|
|
|
+ }
|
|
|
+ .isLast {
|
|
|
+ border-bottom: 0;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //右侧
|
|
|
+ .hallRight {
|
|
|
+ flex: 1;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 20px;
|
|
|
+ position: relative;
|
|
|
+ // min-height: 500px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ position: relative;
|
|
|
+ .hallRightLoading {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ height: 740px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: rgba(255, 255, 255, 0.5);
|
|
|
+ z-index: 100;
|
|
|
+ .hallRightLoadingIcon {
|
|
|
+ .hallRightLoadingIconItem {
|
|
|
+ color: #CCCCCC;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-size: 60px;
|
|
|
+ }
|
|
|
+ .hallRightLoadingText {
|
|
|
+ color: #CCCCCC;
|
|
|
+ font-size: 32px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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: 50px !important;
|
|
|
+ }
|
|
|
+ .UserNameBox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0px 30px 0px 0px;
|
|
|
+ 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;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .shareCardIcon {
|
|
|
+ font-size: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightPositionBox {
|
|
|
+ flex: 1;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .rightUserMessageBox {
|
|
|
+ padding: 40px;
|
|
|
+ height: 375px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow-y: auto;
|
|
|
+ .timeBox {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding:0 0 30px 0;
|
|
|
+ span {
|
|
|
+ border-radius: 8px;
|
|
|
+ display: block;
|
|
|
+ width: 80px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ display: block;
|
|
|
+ background: #F4F5FA;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .newUserStatus {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding:0 0 30px 0;
|
|
|
+ .newUserStatusText {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 8px;
|
|
|
+ width: 200px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ background: #F4F5FA;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+ .newUserStatusTextName {
|
|
|
+ display: inline-block;
|
|
|
+ width: 100px;
|
|
|
+ line-height: 30px;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //其他用户
|
|
|
+ .otherUserMessage {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ .otherUserIcon {
|
|
|
+ margin-right: 20px;
|
|
|
+ img {
|
|
|
+ width: 58px;
|
|
|
+ height: 58px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .otherUserMessageText {
|
|
|
+ border-radius: 16px;
|
|
|
+ padding: 16px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ background: #5570F1;
|
|
|
+ position: relative;
|
|
|
+ min-height: 50px;
|
|
|
+ word-wrap:break-word;
|
|
|
+ word-break:break-all;
|
|
|
+ }
|
|
|
+ .otherUserMessageText::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: -8px;
|
|
|
+ top: 26px;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-top: 8px solid transparent;
|
|
|
+ border-bottom: 8px solid transparent;
|
|
|
+ border-right: 8px solid #5570F1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //我
|
|
|
+ .meUserMessage {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ justify-content: flex-end;
|
|
|
+ .meUserIcon {
|
|
|
+ margin-left: 20px;
|
|
|
+ img {
|
|
|
+ width: 58px;
|
|
|
+ height: 58px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .meUserMessageText {
|
|
|
+ border-radius: 16px;
|
|
|
+ padding:16px;
|
|
|
+ font-size: 16px;
|
|
|
+ color:#333;
|
|
|
+ background: #FFEAD1;
|
|
|
+ position: relative;
|
|
|
+ min-height: 50px;
|
|
|
+ cursor: pointer;
|
|
|
+ word-wrap:break-word;
|
|
|
+ word-break:break-all;
|
|
|
+ //width: 100%;
|
|
|
+ }
|
|
|
+ .meUserMessageText::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ right: -8px;
|
|
|
+ top: 26px;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-top: 8px solid transparent;
|
|
|
+ border-bottom: 8px solid transparent;
|
|
|
+ border-left: 8px solid #FFEAD1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //消息框
|
|
|
+ .sendMessageBox {
|
|
|
+ //height: 250px;
|
|
|
+ padding: 20px 40px 0 40px;
|
|
|
+ border-top: 1px solid #E7E7E7;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .sendMessageTools {
|
|
|
+ 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;
|
|
|
+ height: 40px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sendMessageInput {
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ .sendMessageButton {
|
|
|
+ padding-top: 20px;
|
|
|
+ text-align: right;
|
|
|
+ button {
|
|
|
+ width: 120px;
|
|
|
+ height: 38px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //右侧菜单
|
|
|
+ .rightSlideBox {
|
|
|
+ width: 420px;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: -4px 0px 4px 0px rgba(0, 0, 0, 0.1);
|
|
|
+ .rightSlideBoxClose {
|
|
|
+ padding: 20px 20px 0 20px;
|
|
|
+ height: 50px;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .rightSlideBoxCloseTitle {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ .rightSlideBoxCloseIcon {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ text-align: center;
|
|
|
+ background: #EFEFEF;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightSlideSearch {
|
|
|
+ padding: 30px 25px 0 25px;
|
|
|
+ height: 66px;
|
|
|
+ //overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ .searchFriendBox {
|
|
|
+ position: absolute;
|
|
|
+ width: 280px;
|
|
|
+ border-radius: 8px;
|
|
|
+ top: 65px;
|
|
|
+ left: -260px;
|
|
|
+ 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;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightSlideUserBox {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 40px 40px 10px 40px;
|
|
|
+ height: 180px;
|
|
|
+ overflow-y: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ //border-bottom: 1px solid #E9EDF7;
|
|
|
+ .rightEditUserItem {
|
|
|
+ cursor: pointer;
|
|
|
+ // color: #333;
|
|
|
+ // .rightSlideUserItemIcon {
|
|
|
+ // .addUserIcon {
|
|
|
+ // transition: all 0.5s ease;
|
|
|
+ // }
|
|
|
+ // .addUserIcon:hover {
|
|
|
+ // background: #5570F1;
|
|
|
+ // color: #fff;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ }
|
|
|
+ .rightSlideUserItem {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ width: 25%;
|
|
|
+ position: relative;
|
|
|
+ //cursor: pointer;
|
|
|
+ //用户菜单
|
|
|
+ .rightSlideUserItemMore {
|
|
|
+ position: absolute;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
|
|
|
+ bottom: -220px;
|
|
|
+ left: -240px;
|
|
|
+ width: 280px;
|
|
|
+ height: 270px;
|
|
|
+ .rightSlideUserItemMoreMain {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ padding:0 20px;
|
|
|
+ .rightSlideUserItemMoreMainIcon {
|
|
|
+ img {
|
|
|
+ width: 66px;
|
|
|
+ height: 66px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightSlideUserItemMoreMainInfo {
|
|
|
+ padding: 30px 0 30px 20px;
|
|
|
+ border-bottom: 1px solid #E9EDF7;
|
|
|
+ flex: 1;
|
|
|
+ .rightSlideUserItemMoreMainInfoTop {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .rightSlideUserItemMoreUserName {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 18px;
|
|
|
+ .rightSlideUserItemMoreUserMore {
|
|
|
+ margin-left: 10px;
|
|
|
+ img {
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightSlideUserItemMoreUserMoreIcon {
|
|
|
+ img {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightSlideUserItemMoreNumber {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightSlideUserItemMoreLine {
|
|
|
+ .rightSlideUserItemMoreLineItem {
|
|
|
+ padding: 20px;
|
|
|
+ border-bottom: 1px solid #E9EDF7;
|
|
|
+ display: flex;
|
|
|
+ .rightSlideUserItemMoreTitle {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #999;
|
|
|
+ width: 80px;
|
|
|
+ }
|
|
|
+ .rightSlideUserItemMoreText {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex:1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightSlideUserItemMoreLineButton {
|
|
|
+ padding-top: 25px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ color:#5570F1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ img {
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ .rightSlideUserItemMoreLineGroup {
|
|
|
+ width: 33.33%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightSlideUserItemIcon {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ img {
|
|
|
+ width: 58px;
|
|
|
+ height: 58px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .el-dropdown-link {
|
|
|
+ width: 58px;
|
|
|
+ height: 58px;
|
|
|
+ position: relative;
|
|
|
+ .rightSlideUserGroupLeader{
|
|
|
+ font-size: 12px;
|
|
|
+ color: #FEAF50;
|
|
|
+ background: #FFEAD1;
|
|
|
+ width: 36px;
|
|
|
+ height: 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: -10px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .addUserIcon {
|
|
|
+ width: 58px;
|
|
|
+ height: 58px;
|
|
|
+ line-height: 58px;
|
|
|
+ background: #F0F0F0;
|
|
|
+ border-radius: 50%;
|
|
|
+ text-align: center;
|
|
|
+ color:#fff;
|
|
|
+ font-size: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightSlideUserItemName {
|
|
|
+ //width: 80px;
|
|
|
+ padding: 0 5px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ margin-top: 10px;
|
|
|
+ text-align: center;
|
|
|
+ white-space: nowrap; /* 强制不换行 */
|
|
|
+ overflow: hidden; /* 超出宽度隐藏 */
|
|
|
+ text-overflow: ellipsis; /* 显示省略号 */
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightLineBorder {
|
|
|
+ width: 100%;
|
|
|
+ border-bottom: 1px solid #E9EDF7;
|
|
|
+ }
|
|
|
+ .rightSlideMore {
|
|
|
+ padding: 30px 40px;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #999;
|
|
|
+ text-align: center
|
|
|
+ }
|
|
|
+ //聊天记录
|
|
|
+ .rightSlideFunction {
|
|
|
+ .rightSlideFunctionItem {
|
|
|
+ height: 60px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 20px 40px;
|
|
|
+ border-bottom: 1px solid #E9EDF7;
|
|
|
+ cursor: pointer;
|
|
|
+ .rightSlideFunctionItemText {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ .rightSlideFunctionItemIcon {
|
|
|
+ img {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //群聊设置
|
|
|
+ .groupSystem {
|
|
|
+ border-bottom: 1px solid #E9EDF7;
|
|
|
+ padding-bottom: 30px;
|
|
|
+ .groupChatSystem {
|
|
|
+ padding: 30px 40px 0 40px;
|
|
|
+ height: 80px;
|
|
|
+ overflow: hidden;
|
|
|
+ .groupChatTitle {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .groupChatText {
|
|
|
+ width: 100%;
|
|
|
+ height: 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #999;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ img {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .groupChatTextContent {
|
|
|
+ width: 300px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightSlideFooterBox {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ div{
|
|
|
+ width: 33%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #666;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-top: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-right: 1px solid #E9EDF7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightSlideFooter {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #666;
|
|
|
+ padding: 30px 40px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ border-bottom: 1px solid #E9EDF7;
|
|
|
+ }
|
|
|
+ .isLast {
|
|
|
+ border-bottom: 0;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .chat-dialog{
|
|
|
+ margin-top: 5vh !important;
|
|
|
+ }
|
|
|
+ .list002{
|
|
|
+ height: 280px;
|
|
|
+ }
|
|
|
+ .list001{
|
|
|
+ height: 330px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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: 38px;
|
|
|
+ height: 38px;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .searchWindow {
|
|
|
+ display: flex;
|
|
|
+ .searchWindowLeft {
|
|
|
+ width: 330px;
|
|
|
+ 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 {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #999;
|
|
|
+ padding: 30px 0 20px 0;
|
|
|
+ }
|
|
|
+ .searchUserItem {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .searchUserName {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 38px;
|
|
|
+ height: 38px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin: 0 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .searchWindowRight {
|
|
|
+ width: 690px;
|
|
|
+ .searchWindowRightTop {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 30px 30px 30px;
|
|
|
+ .searchWindowRightTitle {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ .searchWindowRightNum {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .searchWindowUserList {
|
|
|
+ padding: 0 30px;
|
|
|
+ height: 400px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: flex-start;
|
|
|
+ align-content: flex-start;
|
|
|
+ .searchWindowUserItem {
|
|
|
+ width:20%;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ .searchWindowUserName {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ width: 122px;
|
|
|
+ white-space: nowrap; /* 强制不换行 */
|
|
|
+ overflow: hidden; /* 超出宽度隐藏 */
|
|
|
+ text-overflow: ellipsis; /* 显示省略号 */
|
|
|
+ }
|
|
|
+ .searchWindowUserIcon {
|
|
|
+ width: 58px;
|
|
|
+ height: 58px;
|
|
|
+ position: relative;
|
|
|
+ margin: 0 auto 10px auto;
|
|
|
+ .searchWindowDeleteUser {
|
|
|
+ position: absolute;
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ background: rgba(0,0,0,0.3);
|
|
|
+ border-radius: 5px;
|
|
|
+ color: #fff;
|
|
|
+ right: -3px;
|
|
|
+ top: -3px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .rightSlideUserGroupLeader{
|
|
|
+ font-size: 12px;
|
|
|
+ color: #FEAF50;
|
|
|
+ background: #FFEAD1;
|
|
|
+ width: 36px;
|
|
|
+ height: 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: -10px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 58px;
|
|
|
+ height: 58px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .shareCardBox {
|
|
|
+ border-top: 1px solid #E9EDF7;
|
|
|
+ .shareCardTitle {
|
|
|
+ padding: 30px;
|
|
|
+ }
|
|
|
+ .shareCardInput {
|
|
|
+ padding: 0 30px 0 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .searchWindowFooter {
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .shareCardWindowBox{
|
|
|
+ .shareCardWindowBoxMain {
|
|
|
+ border: 1px solid #E9EDF7;
|
|
|
+ border-top: none;
|
|
|
+ border-bottom-left-radius: 4px;
|
|
|
+ border-bottom-right-radius: 4px;
|
|
|
+ background: #F5F7FB;
|
|
|
+ padding-left: 14px;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ .shareCardRadioBox {
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ >.el-radio {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .shareCardItem{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ .shareCardName {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 38px;
|
|
|
+ height: 38px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //弹出框底部按钮
|
|
|
+ .footerButtonBox {
|
|
|
+ padding-top: 40px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ //聊天记录弹出框
|
|
|
+ .fileWindow {
|
|
|
+ .fileWindowHeader {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .fileWindowMessageTime {
|
|
|
+ width: 100px;
|
|
|
+ height: 37px;
|
|
|
+ line-height: 37px;
|
|
|
+ text-align: center;
|
|
|
+ background: #F4F5FA;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999999;
|
|
|
+ margin-top: 30px;
|
|
|
+ }
|
|
|
+ .fileWindowMessageScrollBox {
|
|
|
+ height: 500px;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ .fileWindowNoMessage {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #999;
|
|
|
+ text-align: center;
|
|
|
+ height: 500px;
|
|
|
+ line-height: 500px;
|
|
|
+ }
|
|
|
+ .fileWindowMessageItemBox {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ .active {
|
|
|
+ background: #F5F7FD;
|
|
|
+ border-right: 4px solid #5570F1 !important;
|
|
|
+ }
|
|
|
+ .historicalMessageBox {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ padding: 30px 0 20px 0;
|
|
|
+ border-bottom: 1px solid #E9EDF7;
|
|
|
+ }
|
|
|
+ .fileWindowMessageItemIcon {
|
|
|
+ img {
|
|
|
+ width: 58px;
|
|
|
+ height: 58px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fileWindowMessageItemIcon {
|
|
|
+ padding-right: 15px;
|
|
|
+ }
|
|
|
+ .fileWindowMessageItem {
|
|
|
+ flex: 1;
|
|
|
+ .fileWindowMessageItemInfo {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ .fileWindowMessageItemName {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ .fileWindowMessageItemTime {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fileWindowMessageItemText {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ .fileWindowMessageItemImage {
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
+ border-radius: 16px;
|
|
|
+ border: 1px solid #ECECEC;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //文件列表
|
|
|
+ .fileWindowFlieBox {
|
|
|
+ .fileWindowFlieItem {
|
|
|
+ padding:30px 0 20px 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #E9EDF7;
|
|
|
+ .fileWindowFlieItemIcon {
|
|
|
+ margin-right: 10px;
|
|
|
+ img {
|
|
|
+ width: 42px;
|
|
|
+ height: 42px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fileWindowFlieItemMain {
|
|
|
+ flex: 1;
|
|
|
+ .fileWindowFlieItemTitle {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+ .fileWindowFlieItemTime {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ .fileWindowFlieInfo {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //图片列表
|
|
|
+ .fileWindowImageBox {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ div {
|
|
|
+ width: 25%;
|
|
|
+ text-align: center;
|
|
|
+ padding: 20px 0 0 0;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
+ border-radius: 16px;
|
|
|
+ border: 1px solid #ECECEC;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //日期���索
|
|
|
+ .fileWindowDateBox {
|
|
|
+ width: 100%;
|
|
|
+ padding: 30px 0;
|
|
|
+ }
|
|
|
+ .fileWindowDateButton {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ //群成员搜索
|
|
|
+ .fileWindowGroupMain{
|
|
|
+ display: flex;
|
|
|
+ .fileWindowGroupUserLeft {
|
|
|
+ flex: 1;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-right: 20px;
|
|
|
+ }
|
|
|
+ .fileWindowGroupUserRight {
|
|
|
+ width: 300px;
|
|
|
+ .fileWindowGroupUserBox {
|
|
|
+ padding: 30px 0;
|
|
|
+ .searchUserBox {
|
|
|
+ .searchNameEnglish {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #999;
|
|
|
+ padding: 30px 0 20px 0;
|
|
|
+ }
|
|
|
+ .searchUserItem {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .searchUserName {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 38px;
|
|
|
+ height: 38px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin: 0 20px 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //发送文件
|
|
|
+ .messageTypeFile {
|
|
|
+ width: 283px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16px;
|
|
|
+ border: 1px solid #E9EDF7;
|
|
|
+ cursor:pointer;
|
|
|
+ .messageTypeFileTop{
|
|
|
+ border-bottom: 1px solid #E9EDF7;
|
|
|
+ .messageTypeFileSize {
|
|
|
+ padding: 10px 20px 10px 20px;
|
|
|
+ }
|
|
|
+ .messageTypeFileInfo {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding:20px 20px 20px 20px;
|
|
|
+ .messageTypeFileTitle {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ height: auto; /* Allow height to adjust */
|
|
|
+ max-height: 48px; /* Maximum height for two lines (16px * 2) */
|
|
|
+ overflow: hidden; /* Hide overflow */
|
|
|
+ text-overflow: ellipsis; /* Show ellipsis for overflow text */
|
|
|
+ display: -webkit-box; /* Use flexbox for multi-line ellipsis */
|
|
|
+ -webkit-box-orient: vertical; /* Set box orientation to vertical */
|
|
|
+ -webkit-line-clamp: 2; /* Limit to 2 lines */
|
|
|
+ white-space: normal; /* Allow text wrapping */
|
|
|
+ width: 200px;
|
|
|
+ }
|
|
|
+ .messageTypeFileIcon {
|
|
|
+ img {
|
|
|
+ width: 42px;
|
|
|
+ height: 42px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .messageTypeFileLogo {
|
|
|
+ padding:15px 20px;
|
|
|
+ }
|
|
|
+ .messageTypeFileSize {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ .messageTypeFileLogo {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //发送名片
|
|
|
+ .messageTypeCard {
|
|
|
+ width: 321px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16px;
|
|
|
+ border: 1px solid #E9EDF7;
|
|
|
+ .messageTypeCardTop {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20px 20px 24px 20px;
|
|
|
+ border-bottom: 1px solid #E9EDF7;
|
|
|
+ .messageTypeCardIcon {
|
|
|
+ margin-right: 15px;
|
|
|
+ img {
|
|
|
+ width: 58px;
|
|
|
+ height: 58px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .messageTypeCardName {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .messageTypeCardText {
|
|
|
+ padding-top: 14px;
|
|
|
+ padding-left: 20px;
|
|
|
+ padding-bottom: 15px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //发送图片
|
|
|
+ .messageTypeImage {
|
|
|
+ width: 200px;
|
|
|
+ //height: 200px;
|
|
|
+ img {
|
|
|
+ max-width: 200px;
|
|
|
+ border-radius: 16px;
|
|
|
+ border: 1px solid #ECECEC;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //发送群聊
|
|
|
+ .messageGroupInvite {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16px;
|
|
|
+ border: 1px solid #E9EDF7;
|
|
|
+ .messageGroupInviteTop {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 20px 20px 24px 20px;
|
|
|
+ .messageGroupInviteIcon {
|
|
|
+ margin-right: 15px;
|
|
|
+ img {
|
|
|
+ width: 58px;
|
|
|
+ height: 58px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .messageGroupInfoText {
|
|
|
+ .messageGroupInfoTextTitle {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ .messageGroupInfoTextTxt {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .messageGroupInviteText {
|
|
|
+ padding-top: 14px;
|
|
|
+ padding-left: 20px;
|
|
|
+ padding-bottom: 15px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999999;
|
|
|
+ border-top: 1px solid #E9EDF7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //加入群聊弹出框
|
|
|
+ .addGroupWindow {
|
|
|
+ .addGroupWindowImg {
|
|
|
+ img {
|
|
|
+ width:58px;
|
|
|
+ height: 58px;
|
|
|
+ }
|
|
|
+ text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ .addGroupWindowTitle {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #333;
|
|
|
+ text-align: center;
|
|
|
+ padding: 20px 0 40px 0;
|
|
|
+ }
|
|
|
+ .addGroupWindowText {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .searchFriendBox {
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nodata{
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
+ height: 400px;
|
|
|
+ line-height: 400px;
|
|
|
+ }
|
|
|
</style>
|
rkljw
