La123123.
/
im-backed
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

群聊功能开发-完成

master
xie.bx 3 years ago
parent
dc361f21fa
commit
a77d8b1d0b
5 changed files with 83 additions and 52 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 103
      im-ui/src/components/chat/ChatGroup.vue
  2. 4
      im-ui/src/components/group/GroupMember.vue
  3. 19
      im-ui/src/store/groupStore.js
  4. 4
      im-ui/src/view/Chat.vue
  5. 5
      im-ui/src/view/Group.vue

103
im-ui/src/components/chat/ChatGroup.vue
View File

@ -1,45 +1,54 @@
<template> <template>
<el-container class="r-chat-box"> <el-container class="r-chat-box">
<el-header height="60px"> <el-header height="60px">
{{title}} <span>{{title}}</span>
<span class="btn-side el-icon-more" @click="showSide=!showSide"></span>
</el-header> </el-header>
<el-main class="im-chat-main" id="chatScrollBox"> <el-container>
<div class="im-chat-box"> <el-container class="content-box">
<ul> <el-main class="im-chat-main" id="chatScrollBox">
<li v-for="msgInfo in chat.messages" :key="msgInfo.id"> <div class="im-chat-box">
<message-item :mine="msgInfo.sendId == mine.id" :headImage="headImage(msgInfo)" :showName="showName(msgInfo)" <ul>
:msgInfo="msgInfo"> <li v-for="msgInfo in chat.messages" :key="msgInfo.id">
</message-item> <message-item :mine="msgInfo.sendId == mine.id" :headImage="headImage(msgInfo)" :showName="showName(msgInfo)"
</li> :msgInfo="msgInfo">
</ul> </message-item>
</div> </li>
</el-main> </ul>
<el-footer height="25%" class="im-chat-footer"> </div>
<div class="chat-tool-bar"> </el-main>
<div class="el-icon-service"></div> <el-footer height="25%" class="im-chat-footer">
<div> <div class="chat-tool-bar">
<file-upload action="/api/image/upload" :maxSize="5*1024*1024" :fileTypes="['image/jpeg', 'image/png', 'image/jpg', 'image/gif']" <div class="el-icon-service"></div>
@before="handleImageBefore" @success="handleImageSuccess" @fail="handleImageFail"> <div>
<i class="el-icon-picture-outline"></i> <file-upload action="/api/image/upload" :maxSize="5*1024*1024" :fileTypes="['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
</file-upload> @before="handleImageBefore" @success="handleImageSuccess" @fail="handleImageFail">
</div> <i class="el-icon-picture-outline"></i>
<div> </file-upload>
<file-upload action="/api/file/upload" :maxSize="10*1024*1024" @before="handleFileBefore" @success="handleFileSuccess" </div>
@fail="handleFileFail"> <div>
<i class="el-icon-wallet"></i> <file-upload action="/api/file/upload" :maxSize="10*1024*1024" @before="handleFileBefore" @success="handleFileSuccess"
</file-upload> @fail="handleFileFail">
</div> <i class="el-icon-wallet"></i>
<div class="el-icon-chat-dot-round"></div> </file-upload>
</div> </div>
<textarea v-model="sendText" ref="sendBox" class="send-text-area" @keydown.enter="sendTextMessage()"></textarea> <div class="el-icon-chat-dot-round"></div>
<div class="im-chat-send"> </div>
<el-button type="primary" @click="sendTextMessage()">发送</el-button> <textarea v-model="sendText" ref="sendBox" class="send-text-area" @keydown.enter="sendTextMessage()"></textarea>
</div> <div class="im-chat-send">
</el-footer> <el-button type="primary" @click="sendTextMessage()">发送</el-button>
</div>
</el-footer>
</el-container>
<el-aside class="chat-group-side-box" width="20%" v-show="showSide">
<chat-group-side :group="group" :groupMembers="groupMembers" @reload="loadGroup(group.id)"></chat-group-side>
</el-aside>
</el-container>
</el-container> </el-container>
</template> </template>
<script> <script>
import ChatGroupSide from "./ChatGroupSide.vue";
import MessageItem from "./MessageItem.vue"; import MessageItem from "./MessageItem.vue";
import FileUpload from "../common/FileUpload.vue"; import FileUpload from "../common/FileUpload.vue";
@ -47,7 +56,8 @@
name: "chatPrivate", name: "chatPrivate",
components: { components: {
MessageItem, MessageItem,
FileUpload FileUpload,
ChatGroupSide
}, },
props: { props: {
chat: { chat: {
@ -57,6 +67,7 @@
data() { data() {
return { return {
sendText: "", sendText: "",
showSide: false,
group: {}, group: {},
groupMembers: [] groupMembers: []
} }
@ -174,8 +185,11 @@
// 借助file对象保存对方id // 借助file对象保存对方id
file.targetId = this.chat.targetId; file.targetId = this.chat.targetId;
}, },
handleCloseSide() {
this.showSide = false;
},
sendTextMessage() { sendTextMessage() {
if (!this.sendText.trim()) { if (!this.sendText.trim()) {
this.$message.error("不能发送空白信息"); this.$message.error("不能发送空白信息");
return return
@ -214,7 +228,7 @@
method: 'get' method: 'get'
}).then((group) => { }).then((group) => {
this.group = group; this.group = group;
this.$store.commit("updateChatFromGroup",group); this.$store.commit("updateChatFromGroup", group);
}); });
this.$http({ this.$http({
@ -244,8 +258,8 @@
mine() { mine() {
return this.$store.state.userStore.userInfo; return this.$store.state.userStore.userInfo;
}, },
title(){ title() {
let size = this.groupMembers.filter(m=>!m.quit).length; let size = this.groupMembers.filter(m => !m.quit).length;
return `${this.chat.showName}(${size})`; return `${this.chat.showName}(${size})`;
} }
@ -259,4 +273,15 @@
</script> </script>
<style> <style>
.btn-side {
position: absolute;
right: 20px;
line-height: 60px;
font-size: 22px;
cursor: pointer;
&:hover {
font-size: 30px;
}
}
</style> </style>

4
im-ui/src/components/group/GroupMember.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="group-member"> <div class="group-member">
<head-image :url="member.headImage" :size="60" class=""> <head-image :url="member.headImage" :size="50" class="">
<div v-if="showDel" @click.stop="handleDelete()" class="btn-kick el-icon-error"></div> <div v-if="showDel" @click.stop="handleDelete()" class="btn-kick el-icon-error"></div>
</head-image> </head-image>
<div class="member-name">{{member.aliasName}}</div> <div class="member-name">{{member.aliasName}}</div>
@ -39,7 +39,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: 60px; width: 50px;
.member-name { .member-name {
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;

19
im-ui/src/store/groupStore.js
View File

@ -24,17 +24,22 @@ export default {
addGroup(state,group){ addGroup(state,group){
state.groups.unshift(group); state.groups.unshift(group);
}, },
removeGroup(state,index){ removeGroup(state,groupId){
state.groups.splice(index, 1); state.groups.forEach((g,index)=>{
if(state.activeIndex >= state.groups.length){ if(g.id==groupId){
state.activeIndex = state.groups.length-1; state.groups.splice(index, 1);
} if(state.activeIndex >= state.groups.length){
state.activeIndex = state.groups.length-1;
}
}
})
}, },
updateGroup(state,group){ updateGroup(state,group){
state.groups.forEach((g,index)=>{ state.groups.forEach((g,idx)=>{
if(g.id==group.id){ if(g.id==group.id){
// 拷贝属性 // 拷贝属性
state.groups[index] = Object.assign(state.groups[index], group); state.groups[idx] = Object.assign(state.groups[idx], group);
} }
}) })
} }

4
im-ui/src/view/Chat.vue
View File

@ -164,6 +164,7 @@
padding: 5px; padding: 5px;
background-color: white; background-color: white;
line-height: 50px; line-height: 50px;
border: #dddddd solid 1px;
} }
.im-chat-main { .im-chat-main {
@ -185,7 +186,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0; padding: 0;
border: #dddddd solid 1px;
.chat-tool-bar { .chat-tool-bar {
display: flex; display: flex;
@ -193,6 +194,7 @@
width: 100%; width: 100%;
height: 40px; height: 40px;
text-align: left; text-align: left;
box-sizing: border-box;
border: #dddddd solid 1px; border: #dddddd solid 1px;
>div { >div {

5
im-ui/src/view/Group.vue
View File

@ -56,7 +56,6 @@
</div> </div>
</el-form> </el-form>
</div> </div>
<el-divider content-position="center"></el-divider> <el-divider content-position="center"></el-divider>
<el-scrollbar style="height:400px;"> <el-scrollbar style="height:400px;">
<div class="r-group-member-list"> <div class="r-group-member-list">
@ -169,7 +168,7 @@
url: `/api/group/delete/${this.activeGroup.id}`, url: `/api/group/delete/${this.activeGroup.id}`,
method: 'delete' method: 'delete'
}).then(() => { }).then(() => {
this.$store.commit("removeGroup", this.groupStore.activeIndex); this.$store.commit("removeGroup", this.activeGroup.id);
this.$store.commit("activeGroup", -1); this.$store.commit("activeGroup", -1);
this.$store.commit("removeGroupChat", this.activeGroup.id); this.$store.commit("removeGroupChat", this.activeGroup.id);
}); });
@ -205,7 +204,7 @@
url: `/api/group/quit/${this.activeGroup.id}`, url: `/api/group/quit/${this.activeGroup.id}`,
method: 'delete' method: 'delete'
}).then(() => { }).then(() => {
this.$store.commit("removeGroup", this.groupStore.activeIndex); this.$store.commit("removeGroup", this.activeGroup.id);
this.$store.commit("activeGroup", -1); this.$store.commit("activeGroup", -1);
this.$store.commit("removeGroupChat", this.activeGroup.id); this.$store.commit("removeGroupChat", this.activeGroup.id);
}); });

Write Preview
Loading…
Cancel
Save