Browse Source

多端改造-uniapp开发完成(语音和视频功能未开发)

master
xsx 3 years ago
parent
commit
34349d4d97
  1. 6
      im-platform/src/main/java/com/bx/implatform/service/impl/GroupServiceImpl.java
  2. 2
      im-platform/src/main/java/com/bx/implatform/vo/UserVO.java
  3. BIN
      im-ui/public/logo.png
  4. 2
      im-uniapp/components/chat-message-item/chat-message-item.vue
  5. 8
      im-uniapp/package.json
  6. 31
      im-uniapp/pages/chat/chat-box.vue
  7. 85
      im-uniapp/pages/chat/chat.vue
  8. 10
      im-uniapp/pages/common/user-info.vue
  9. 17
      im-uniapp/pages/group/group-edit.vue
  10. 86
      im-uniapp/pages/group/group-info.vue
  11. 13
      im-uniapp/pages/group/group-invite.vue
  12. 11
      im-uniapp/pages/group/group-member.vue
  13. 18
      im-uniapp/pages/mine/mine.vue
  14. 10
      im-uniapp/static/icon/iconfont.css
  15. BIN
      im-uniapp/static/icon/iconfont.ttf
  16. 8
      im-uniapp/store/chatStore.js

6
im-platform/src/main/java/com/bx/implatform/service/impl/GroupServiceImpl.java

@ -62,12 +62,6 @@ public class GroupServiceImpl extends ServiceImpl<GroupMapper, Group> implements
public GroupVO createGroup(GroupVO vo) {
UserSession session = SessionContext.getSession();
User user = userService.getById(session.getUserId());
LambdaQueryWrapper<Group> wrapper = Wrappers.lambdaQuery();
wrapper.eq(Group::getName,vo.getName());
if(this.count(wrapper)>0){
throw new GlobalException("已经存在名为'"+vo.getName()+"'的群聊");
}
// 保存群组数据
Group group = BeanUtils.copyProperties(vo,Group.class);
group.setOwnerId(user.getId());

2
im-platform/src/main/java/com/bx/implatform/vo/UserVO.java

@ -30,7 +30,7 @@ public class UserVO {
@ApiModelProperty(value = "性别")
private Integer sex;
@Length(max = 64,message = "个性签名不能大于1024个字符")
@Length(max = 1024,message = "个性签名不能大于1024个字符")
@ApiModelProperty(value = "个性签名")
private String signature;

BIN
im-ui/public/logo.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 62 KiB

2
im-uniapp/components/chat-message-item/chat-message-item.vue

@ -107,8 +107,6 @@
});
}
})
},
onSendFail() {
uni.showToast({

8
im-uniapp/package.json

@ -6,16 +6,16 @@
"browser":"chrome",
"env": {
"UNI_PLATFORM": "h5",
"BASE_URL": "http://192.168.1.5:8888",
"WS_URL": "ws://192.168.1.5:8878/im"
"BASE_URL": "http://192.168.31.112:8888",
"WS_URL": "ws://192.168.31.112:8878/im"
}
},
"dev-wx-mini": {
"title": "开发环境-微信小程序",
"env": {
"UNI_PLATFORM": "mp-weixin",
"BASE_URL": "http://192.168.1.5:8888",
"WS_URL": "ws://192.168.1.5:8878/im"
"BASE_URL": "http://192.168.31.112:8888",
"WS_URL": "ws://192.168.31.112:8878/im"
}
},
"prod-h5": {

31
im-uniapp/pages/chat/chat-box.vue

@ -1,8 +1,9 @@
<template>
<view class=" page chat-box">
<view class="header">
<uni-icons class="btn-side left" type="back" size="30" @click="onNavBack()"></uni-icons>
<text class="title">{{title}}</text>
<uni-icons class="btn-side" type="more-filled" size="30" @click="onShowMore()"></uni-icons>
<uni-icons class="btn-side right" type="more-filled" size="30" @click="onShowMore()"></uni-icons>
</view>
<view class="chat-msg" @click="switchChatTabBox('none',true)">
<scroll-view class="scroll-box" scroll-y="true" :scroll-into-view="'chat-item-'+scrollMsgIdx">
@ -15,7 +16,7 @@
</scroll-view>
</view>
<view class="send-bar">
<view class="iconfont icon-voice-circle"></view>
<view class="iconfont icon-voice-circle" @click="showTip()"></view>
<view class="send-text">
<textarea class="send-text-area" v-model="sendText" auto-height :show-confirm-bar="false"
:adjust-position="false" @confirm="sendTextMessage()" @keyboardheightchange="onKeyboardheightchange"
@ -52,11 +53,11 @@
<view class="tool-name">文件</view>
</view>
<view class="chat-tools-item">
<view class="chat-tools-item" @click="showTip()">
<view class="tool-icon iconfont icon-microphone"></view>
<view class="tool-name">语音输入</view>
</view>
<view class="chat-tools-item">
<view class="chat-tools-item" @click="showTip()">
<view class="tool-icon iconfont icon-call"></view>
<view class="tool-name">呼叫</view>
</view>
@ -92,6 +93,12 @@
}
},
methods: {
showTip(){
uni.showToast({
title: "加班开发中...",
icon: "none"
})
},
headImage(msgInfo) {
if (this.chat.type == 'GROUP') {
let member = this.groupMembers.find((m) => m.userId == msgInfo.sendId);
@ -177,8 +184,12 @@
selectEmoji(emoText) {
this.sendText += `#${emoText};`;
},
onNavBack(){
uni.switchTab({
url: "/pages/chat/chat"
})
},
onKeyboardheightchange(e) {
;
if (e.detail.height > 0) {
this.showKeyBoard = true;
this.switchChatTabBox('none', false)
@ -457,11 +468,19 @@
.btn-side {
position: absolute;
right: 30rpx;
line-height: 60rpx;
font-size: 28rpx;
cursor: pointer;
&.left {
left: 30rpx;
}
&.right {
right: 30rpx;
}
}
}

85
im-uniapp/pages/chat/chat.vue

@ -2,9 +2,11 @@
<view class="tab-page">
<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
<view v-for="(chat,index) in $store.state.chatStore.chats" :key="index">
<chat-item :chat="chat" :index="index"></chat-item>
<chat-item :chat="chat" :index="index" @longpress.native="onShowMenu($event,index)"></chat-item>
</view>
</scroll-view>
<pop-menu v-show="menu.show" :menu-style="menu.style" :items="menu.items" @close="menu.show=false"
@select="onSelectMenu"></pop-menu>
</view>
</template>
@ -12,28 +14,85 @@
export default {
data() {
return {
menu: {
show: false,
style: "",
chatIdx: -1,
items: [{
key: 'DELETE',
name: '删除',
icon: 'trash'
},
{
key: 'TOP',
name: '置顶',
icon: 'arrow-up'
}
]
}
}
},
methods: {
refreshUnreadBadge(){
if(this.unreadCount>0){
onSelectMenu(item) {
switch (item.key) {
case 'DELETE':
this.removeChat(this.menu.chatIdx);
case 'TOP':
this.moveToTop(this.menu.chatIdx);
default:
break;
}
},
onShowMenu(e,chatIdx) {
uni.getSystemInfo({
success: (res) => {
let touches = e.touches[0];
let style = "";
/* 因 非H5端不兼容 style 属性绑定 Object ,所以拼接字符 */
if (touches.clientY > (res.windowHeight / 2)) {
style = `bottom:${res.windowHeight-touches.clientY}px;`;
} else {
style = `top:${touches.clientY}px;`;
}
if (touches.clientX > (res.windowWidth / 2)) {
style += `right:${res.windowWidth-touches.clientX}px;`;
} else {
style += `left:${touches.clientX}px;`;
}
this.menu.style = style;
this.menu.chatIdx = chatIdx;
//
this.$nextTick(() => {
this.menu.show = true;
});
}
})
},
removeChat(chatIdx) {
this.$store.commit("removeChat", chatIdx);
},
moveToTop(chatIdx) {
this.$store.commit("moveTop", chatIdx);
},
refreshUnreadBadge() {
if (this.unreadCount > 0) {
uni.setTabBarBadge({
index: 0,
text: this.unreadCount+""
index: 0,
text: this.unreadCount + ""
})
}else{
} else {
uni.removeTabBarBadge({
index:0
index: 0
})
}
}
},
computed:{
unreadCount(){
computed: {
unreadCount() {
let count = 0;
this.$store.state.chatStore.chats.forEach(chat =>{
this.$store.state.chatStore.chats.forEach(chat => {
count += chat.unreadCount;
})
return count;
@ -47,4 +106,4 @@
<style>
</style>
</style>

10
im-uniapp/pages/common/user-info.vue

@ -1,7 +1,7 @@
<template>
<view class="page user-info">
<view class="content">
<view class="avatar">
<view class="avatar" @click="onShowFullImage()">
<image class="head-image" :src="userInfo.headImage" lazy-load="true" mode="aspectFill"></image>
</view>
<view class="info-item">
@ -39,6 +39,12 @@
}
},
methods: {
onShowFullImage(){
let imageUrl = this.userInfo.headImage;
uni.previewImage({
urls: [imageUrl]
})
},
onSendMessage() {
let chat = {
type: 'PRIVATE',
@ -73,7 +79,7 @@
uni.showModal({
title: "确认删除",
content: `确认要删除与 '${this.userInfo.nickName}'的好友关系吗?`,
success: ()=> {
success: (res)=> {
if(res.cancel)
return;
this.$http({

17
im-uniapp/pages/group/group-edit.vue

@ -64,10 +64,13 @@
title: "修改群聊信息成功",
icon: 'none'
});
setTimeout(()=>{
setTimeout(() => {
let pages = getCurrentPages();
let prevPage = pages[pages.length - 2];
prevPage.$vm.loadGroupInfo();
uni.navigateBack();
},1000);
}, 1000);
})
},
createNewGroup() {
@ -82,12 +85,12 @@
icon: 'none',
duration: 1500
});
setTimeout(()=>{
setTimeout(() => {
uni.navigateTo({
url: "/pages/group/group-info?id="+group.id
url: "/pages/group/group-info?id=" + group.id
});
},1500)
}, 1500)
})
},
loadGroupInfo(id) {

86
im-uniapp/pages/group/group-info.vue

@ -13,35 +13,35 @@
</view>
</view>
<view class="invite-btn" @click="onInviteMember()">
<view class="iconfont icon-add-circle"></view>
<uni-icons type="plusempty" size="28" color="#888888"></uni-icons>
</view>
</view>
<view class="member-more" @click="onShowMoreMmeber()">查看更多群成员 ></view>
</view>
<view class="group-detail">
<uni-section title="群聊名称:" titleFontSize="30rpx">
<uni-section title="群聊名称:" titleFontSize="12px">
<template v-slot:right>
<text>{{groupInfo.name}}</text>
<text>{{group.name}}</text>
</template>
</uni-section>
<uni-section title="群主:" titleFontSize="30rpx">
<uni-section title="群主:" titleFontSize="12px">
<template v-slot:right>
<text>{{ownerName}}</text>
</template>
</uni-section>
<uni-section title="群聊备注:" titleFontSize="30rpx">
<uni-section title="群聊备注:" titleFontSize="12px">
<template v-slot:right>
<text> {{groupInfo.remark}}</text>
<text> {{group.remark}}</text>
</template>
</uni-section>
<uni-section title="我在本群的昵称:" titleFontSize="30rpx">
<uni-section title="我在本群的昵称:" titleFontSize="12px">
<template v-slot:right>
<text> {{groupInfo.aliasName}}</text>
<text> {{group.aliasName}}</text>
</template>
</uni-section>
<uni-section title="群公告:" titleFontSize="30rpx">
<uni-notice-bar :text="groupInfo.notice" />
<uni-section title="群公告:" titleFontSize="12px">
<uni-notice-bar :text="group.notice" />
</uni-section>
<view class="group-edit" @click="onEditGroup()">修改群聊资料 > </view>
</view>
@ -58,6 +58,7 @@
data() {
return {
groupId: null,
group:{},
groupMembers: []
}
},
@ -86,9 +87,9 @@
onSendMessage() {
let chat = {
type: 'GROUP',
targetId: this.groupInfo.id,
showName: this.groupInfo.remark,
headImage: this.groupInfo.headImage,
targetId: this.group.id,
showName: this.group.remark,
headImage: this.group.headImage,
};
this.$store.commit("openChat", chat);
uni.navigateTo({
@ -99,21 +100,25 @@
uni.showModal({
title: '确认退出?',
content: `退出群聊后将不再接受群里的消息,确认退出吗?`,
success: () => {
success: (res) => {
if (res.cancel)
return;
this.$http({
url: `/group/quit/${this.groupId}`,
method: 'DELETE'
}).then(() => {
this.$store.commit("removeGroup", this.groupId);
this.$store.commit("removeGroupChat", this.groupId);
uni.showModal({
title: `退出成功`,
content: `您已退出群聊'${this.groupInfo.name}'`,
content: `您已退出群聊'${this.group.name}'`,
showCancel: false,
success: () => {
uni.navigateBack();
setTimeout(()=>{
uni.switchTab({
url:"/pages/group/group"
});
this.$store.commit("removeGroup", this.groupId);
this.$store.commit("removeGroupChat", this.groupId);
},100)
}
})
});
@ -121,9 +126,10 @@
});
},
onDissolveGroup() {
console.log(this.group.name)
uni.showModal({
title: '确认解散?',
content: `确认要解散群聊'${this.groupInfo.name}'吗?`,
content: `确认要解散群聊'${this.group.name}'吗?`,
success: (res) => {
if (res.cancel)
return;
@ -131,14 +137,18 @@
url: `/group/delete/${this.groupId}`,
method: 'delete'
}).then(() => {
this.$store.commit("removeGroup", this.groupId);
this.$store.commit("removeGroupChat", this.groupId);
uni.showModal({
title: `解散成功`,
content: `群聊'${this.groupInfo.name}'已解散`,
content: `群聊'${this.group.name}'已解散`,
showCancel: false,
success: () => {
uni.navigateBack();
success: () => {
setTimeout(()=>{
uni.switchTab({
url:"/pages/group/group"
});
this.$store.commit("removeGroup", this.groupId);
this.$store.commit("removeGroupChat", this.groupId);
},100)
}
})
});
@ -146,11 +156,12 @@
});
},
loadGroupInfo(id) {
loadGroupInfo() {
this.$http({
url: `/group/find/${id}`,
url: `/group/find/${this.groupId}`,
method: 'GET'
}).then((group) => {
this.group = group;
//
this.$store.commit("updateChatFromGroup", group);
//
@ -158,9 +169,10 @@
});
},
loadGroupMembers(id) {
loadGroupMembers() {
console.log("loadGroupMembers")
this.$http({
url: `/group/members/${id}`,
url: `/group/members/${this.groupId}`,
method: "GET"
}).then((members) => {
this.groupMembers = members.filter(m => !m.quit);
@ -168,16 +180,12 @@
}
},
computed: {
groupInfo() {
let groups = this.$store.state.groupStore.groups;
return groups.find(g => g.id == this.groupId)
},
ownerName() {
let member = this.groupMembers.find((m) => m.userId == this.groupInfo.ownerId);
let member = this.groupMembers.find((m) => m.userId == this.group.ownerId);
return member && member.aliasName;
},
isOwner() {
return this.groupInfo.ownerId == this.$store.state.userStore.userInfo.id;
return this.group.ownerId == this.$store.state.userStore.userInfo.id;
}
},
onLoad(options) {
@ -231,6 +239,7 @@
.text {
width: 100%;
flex: 1;
font-size: 14px;
overflow: hidden;
text-align: center;
white-space: nowrap;
@ -246,18 +255,13 @@
margin: 10rpx;
border: #686868 dashed 2px;
border-radius: 10%;
.iconfont {
font-size: 70rpx;
color: #888888;
}
}
}
.member-more {
padding: 20rpx;
text-align: center;
font-size: 30rpx;
font-size: 16px;
}
}
@ -271,7 +275,7 @@
.group-edit {
padding: 20rpx;
text-align: center;
font-size: 30rpx;
font-size: 16px;
}
}

13
im-uniapp/pages/group/group-invite.vue

@ -8,10 +8,9 @@
<view v-for="friend in friendItems" v-show="!searchText || friend.nickName.startsWith(searchText)"
:key="friend.id">
<uni-list-chat :avatar="friend.headImage" :title="friend.nickName" :clickable="true"
@click="onShowUserInfo(friend.id)">
@click="onSwitchChecked(friend)">
<view class="chat-custom-right">
<radio :checked="friend.checked" :disabled="friend.disabled"
@click.stop="onSwitchChecked(friend)" />
<radio :checked="friend.checked" :disabled="friend.disabled" @click.stop="onSwitchChecked(friend)"/>
</view>
</uni-list-chat>
</view>
@ -55,8 +54,11 @@
icon: 'none'
})
setTimeout(() => {
uni.navigateBack({
});
// 退
let pages = getCurrentPages();
let prevPage = pages[pages.length - 2];
prevPage.$vm.loadGroupMembers();
uni.navigateBack();
}, 1000);
})
@ -71,6 +73,7 @@
if (!friend.disabled) {
friend.checked = !friend.checked;
}
console.log(this.inviteSize)
},
initFriendItems() {
this.friendItems = [];

11
im-uniapp/pages/group/group-member.vue

@ -24,6 +24,7 @@
export default {
data() {
return {
isModify: false,
searchText: "",
group: {},
groupMembers: []
@ -51,7 +52,7 @@
icon: 'none'
})
this.groupMembers.splice(idx, 1);
this.isModify = true;
});
}
})
@ -84,6 +85,14 @@
onLoad(options) {
this.loadGroupInfo(options.id);
this.loadGroupMembers(options.id);
},
onUnload() {
if(this.isModify){
//
let pages = getCurrentPages();
let prevPage = pages[pages.length - 2];
prevPage.$vm.loadGroupMembers();
}
}
}
</script>

18
im-uniapp/pages/mine/mine.vue

@ -9,10 +9,10 @@
<text class="info-username">
{{userInfo.userName}}
</text>
<uni-icons v-show="userInfo.sex==0" class="sex-boy" type="person-filled" size="20"
color="darkblue"></uni-icons>
<uni-icons v-show="userInfo.sex==1" class="sex-girl" type="person-filled" size="20"
color="darkred"></uni-icons>
<text v-show="userInfo.sex==0" class="iconfont icon-man"
color="darkblue"></text>
<text v-show="userInfo.sex==1" class="iconfont icon-girl"
color="darkred"></text>
</view>
<text>
昵称 {{userInfo.nickName}}
@ -100,11 +100,19 @@
.info-primary {
display: flex;
align-items: center;
.info-username {
font-size: 40rpx;
font-weight: 600;
}
.icon-man {
color: darkblue;
}
.icon-girl {
color: darkred;
}
}
}

10
im-uniapp/static/icon/iconfont.css

@ -1,6 +1,6 @@
@font-face {
font-family: "iconfont"; /* Project id 4272106 */
src: url('iconfont.ttf?t=1697301725830') format('truetype');
src: url('iconfont.ttf?t=1697348383625') format('truetype');
}
.iconfont {
@ -11,6 +11,14 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-man:before {
content: "\e615";
}
.icon-girl:before {
content: "\e602";
}
.icon-file:before {
content: "\e671";
}

BIN
im-uniapp/static/icon/iconfont.ttf

Binary file not shown.

8
im-uniapp/store/chatStore.js

@ -65,6 +65,14 @@ export default {
}
}
},
moveTop(state,idx){
let chat = state.chats[idx];
// 放置头部
state.chats.splice(idx, 1);
state.chats.unshift(chat);
console.log(state.chats)
},
insertMessage(state, msgInfo) {
// 获取对方id或群id
let type = msgInfo.groupId ? 'GROUP' : 'PRIVATE';

Loading…
Cancel
Save