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

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

@ -1,6 +1,6 @@
<template>
<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>
</head-image>
<div class="member-name">{{member.aliasName}}</div>
@ -39,7 +39,7 @@
display: flex;
flex-direction: column;
align-items: center;
width: 60px;
width: 50px;
.member-name {
font-size: 12px;
text-align: center;

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

@ -24,17 +24,22 @@ export default {
addGroup(state,group){
state.groups.unshift(group);
},
removeGroup(state,index){
state.groups.splice(index, 1);
if(state.activeIndex >= state.groups.length){
state.activeIndex = state.groups.length-1;
}
removeGroup(state,groupId){
state.groups.forEach((g,index)=>{
if(g.id==groupId){
state.groups.splice(index, 1);
if(state.activeIndex >= state.groups.length){
state.activeIndex = state.groups.length-1;
}
}
})
},
updateGroup(state,group){
state.groups.forEach((g,index)=>{
state.groups.forEach((g,idx)=>{
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;
background-color: white;
line-height: 50px;
border: #dddddd solid 1px;
}
.im-chat-main {
@ -185,7 +186,7 @@
display: flex;
flex-direction: column;
padding: 0;
border: #dddddd solid 1px;
.chat-tool-bar {
display: flex;
@ -193,6 +194,7 @@
width: 100%;
height: 40px;
text-align: left;
box-sizing: border-box;
border: #dddddd solid 1px;
>div {

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

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

Write Preview
Loading…
Cancel
Save