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

ui优化

master
xie.bx 2 years ago
parent
627f17165b
commit
ea79557056
13 changed files with 101 additions and 43 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. 3
      im-platform/src/main/java/com/bx/implatform/service/impl/PrivateMessageServiceImpl.java
  2. 35
      im-ui/src/components/friend/FriendItem.vue
  3. 5
      im-ui/src/store/chatStore.js
  4. 3
      im-ui/src/store/friendStore.js
  5. 2
      im-ui/src/view/Friend.vue
  6. 2
      im-uniapp/App.vue
  7. 15
      im-uniapp/components/friend-item/friend-item.vue
  8. 2
      im-uniapp/pages.json
  9. 31
      im-uniapp/pages/chat/chat.vue
  10. 4
      im-uniapp/pages/common/user-info.vue
  11. 17
      im-uniapp/pages/friend/friend.vue
  12. 19
      im-uniapp/pages/group/group.vue
  13. 6
      im-uniapp/store/chatStore.js

3
im-platform/src/main/java/com/bx/implatform/service/impl/PrivateMessageServiceImpl.java
View File

@ -158,6 +158,9 @@ public class PrivateMessageServiceImpl extends ServiceImpl<PrivateMessageMapper,
}
List<Friend> friends = friendService.findFriendByUserId(session.getUserId());
if(friends.isEmpty()){
return;
}
List<Long> friendIds = friends.stream().map(Friend::getFriendId).collect(Collectors.toList());
// 获取当前用户所有未读消息
LambdaQueryWrapper<PrivateMessage> queryWrapper = Wrappers.lambdaQuery();

35
im-ui/src/components/friend/FriendItem.vue
View File

@ -1,16 +1,16 @@
<template>
<div class="friend-item" :class="active ? 'active' : ''" @contextmenu.prevent="showRightMenu($event)">
<div class="friend-avatar">
<head-image :name="friend.nickName"
:url="friend.headImage"
:online="friend.online">
<head-image :name="friend.nickName" :url="friend.headImage" :online="friend.online">
</head-image>
</div>
<div class="friend-info">
<div class="friend-name">{{ friend.nickName}}</div>
<div class="friend-online online">
<span v-show="friend.onlineWeb" class="el-icon-s-platform" title="电脑端在线"></span>
<span v-show="friend.onlineApp" class="el-icon-mobile-phone" title="移动端在线"></span>
<div class="friend-online">
<el-image v-show="friend.onlineWeb" class="online" :src="require('@/assets/image/online_web.png')"
title="电脑设备在线" />
<el-image v-show="friend.onlineApp" class="online" :src="require('@/assets/image/online_app.png')"
title="移动设备在线" />
</div>
</div>
<right-menu v-show="menu && rightMenu.show" :pos="rightMenu.pos" :items="rightMenu.items"
@ -61,10 +61,12 @@
this.$emit(item.key.toLowerCase(), this.msgInfo);
}
},
computed:{
friend(){
return this.$store.state.friendStore.friends[this.index];
}
},
props: {
friend: {
type: Object
},
active: {
type: Boolean
},
@ -75,11 +77,7 @@
type: Boolean,
default: true
}
},
mounted() {
console.log(this.menu)
}
}
</script>
@ -94,6 +92,7 @@
padding-right: 5px;
background-color: #fafafa;
white-space: nowrap;
cursor: pointer;
&:hover {
background-color: #eeeeee;
@ -127,10 +126,12 @@
}
.friend-online {
padding-right: 15px;
font-size: 16px;
font-weight: 600;
color: #2f6dce;
.online {
padding-right: 2px;
width: 15px;
height: 15px;
}
}
}
}

5
im-ui/src/store/chatStore.js
View File

@ -56,6 +56,7 @@ export default {
if (state.activeIndex >= state.chats.length) {
state.activeIndex = state.chats.length - 1;
}
},
moveTop(state,idx){
let chat = state.chats[idx];
@ -121,12 +122,12 @@ export default {
}
}
// 间隔大于10分钟插入时间显示
let lastTimeMsg = chat.messages.findLast(m=>m.type==MESSAGE_TYPE.TIP_TIME);
if(!lastTimeMsg || (lastTimeMsg.sendTime < msgInfo.sendTime - 600*1000)){
if(!chat.lastTimeTip || (chat.lastTimeTip < msgInfo.sendTime - 600*1000)){
chat.messages.push({
sendTime: msgInfo.sendTime,
type: MESSAGE_TYPE.TIP_TIME,
});
chat.lastTimeTip = msgInfo.sendTime;
}
// 新的消息
chat.messages.push(msgInfo);

3
im-ui/src/store/friendStore.js
View File

@ -46,7 +46,6 @@ export default {
},
refreshOnlineStatus(state){
let userIds = [];
console.log("refreshOnlineStatus")
if(state.friends.length ==0){
return;
}
@ -69,7 +68,6 @@ export default {
state.friends.forEach((f)=>{
let userTerminal = onlineTerminals.find((o)=> f.id==o.userId);
if(userTerminal){
console.log(userTerminal)
f.online = true;
f.onlineTerminals = userTerminal.terminals;
f.onlineWeb = userTerminal.terminals.indexOf(TERMINAL_TYPE.WEB)>=0
@ -92,6 +90,7 @@ export default {
return 0;
});
console.log(state.friends)
// 重新排序后，activeIndex指向的好友可能会变化，需要重新指定
if(state.activeIndex >=0){
state.friends.forEach((f,i)=>{

2
im-ui/src/view/Friend.vue
View File

@ -14,7 +14,7 @@
</div>
<el-scrollbar class="l-friend-list">
<div v-for="(friend,index) in $store.state.friendStore.friends" :key="index">
<friend-item v-show="friend.nickName.startsWith(searchText)" :friend="friend" :index="index"
<friend-item v-show="friend.nickName.startsWith(searchText)" :index="index"
:active="index === $store.state.friendStore.activeIndex" @chat="handleSendMessage(friend)"
@delete="handleDelItem(friend,index)" @click.native="handleActiveItem(friend,index)">
</friend-item>

2
im-uniapp/App.vue
View File

@ -171,7 +171,7 @@
// 隐藏群组功能
uni.setTabBarItem({
index: 2,
text: "资讯"
text: "搜索"
})
}
}

15
im-uniapp/components/friend-item/friend-item.vue
View File

@ -5,8 +5,10 @@
<view class="friend-info">
<view class="friend-name">{{ friend.nickName}}</view>
<view class="friend-online">
<text v-show="friend.onlineWeb" title="网页端在线">【网页端】</text>
<text v-show="friend.onlineApp" title="移动端在线">【移动端】</text>
<image v-show="friend.onlineWeb" class="online" src="/static/image/online_web.png"
title="电脑设备在线" />
<image v-show="friend.onlineApp" class="online" src="/static/image/online_app.png"
title="移动设备在线" />
</view>
</view>
</view>
@ -63,6 +65,15 @@
white-space: nowrap;
overflow: hidden;
}
.friend-online {
.online {
padding-right: 4rpx;
width: 32rpx;
height: 32rpx;
}
}
}
}
</style>

2
im-uniapp/pages.json
View File

@ -57,7 +57,7 @@
"pagePath": "pages/group/group",
"iconPath": "static/tarbar/group.png",
"selectedIconPath": "static/tarbar/group_active.png",
"text": "资讯"
"text": "搜索"
},
{
"pagePath": "pages/mine/mine",

31
im-uniapp/pages/chat/chat.vue
View File

@ -1,10 +1,14 @@
<template>
<view class="tab-page">
<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
<view class="chat-tip" v-if="$store.state.chatStore.chats.length==0">
温馨提示：您现在还没有任何聊天消息，快跟您的好友发起聊天吧~
</view>
<scroll-view class="scroll-bar" v-else 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" @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>
@ -14,7 +18,6 @@
export default {
data() {
return {
menu: {
show: false,
style: "",
@ -37,14 +40,16 @@
onSelectMenu(item) {
switch (item.key) {
case 'DELETE':
this.removeChat(this.menu.chatIdx);
this.removeChat(this.menu.chatIdx);
break;
case 'TOP':
this.moveToTop(this.menu.chatIdx);
break;
default:
break;
}
},
onShowMenu(e,chatIdx) {
onShowMenu(e, chatIdx) {
uni.getSystemInfo({
success: (res) => {
let touches = e.touches[0];
@ -84,7 +89,7 @@
} else {
uni.removeTabBarBadge({
index: 0,
complete:()=>{}
complete: () => {}
})
}
@ -99,8 +104,8 @@
return count;
}
},
watch:{
unreadCount(newCount,oldCount){
watch: {
unreadCount(newCount, oldCount) {
this.refreshUnreadBadge();
}
},
@ -110,6 +115,14 @@
}
</script>
<style>
<style scoped lang="scss">
.chat-tip {
position: absolute;
top: 400rpx;
padding: 50rpx;
line-height: 50rpx;
text-align: left;
color: darkblue;
font-size: 30rpx;
}
</style>

4
im-uniapp/pages/common/user-info.vue
View File

@ -121,8 +121,8 @@
}).then((user) => {
this.userInfo = user;
// 如果发现好友的头像和昵称改了，进行更新
if (this.isFriend &&this.userInfo.headImageThumb != this.friendInfo.headImage ||
this.userInfo.nickName != this.friendInfo.nickName) {
if (this.isFriend && (this.userInfo.headImageThumb != this.friendInfo.headImage ||
this.userInfo.nickName != this.friendInfo.nickName)) {
this.updateFriendInfo()
}
})

17
im-uniapp/pages/friend/friend.vue
View File

@ -8,13 +8,17 @@
<uni-icons type="personadd" size="30"></uni-icons>
</view>
</view>
<view class="friend-items">
<view class="friend-tip" v-if="$store.state.friendStore.friends.length==0">
温馨提示：您现在还没有任何好友，快点击右上方'+'按钮添加好友吧~
</view>
<view class="friend-items" v-else>
<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
<view v-for="(friend,index) in $store.state.friendStore.friends" :key="index">
<friend-item :friend="friend"></friend-item>
</view>
</scroll-view>
</view>
</view>
</template>
@ -48,6 +52,17 @@
display: flex;
flex-direction: column;
.friend-tip{
position: absolute;
top: 400rpx;
padding: 50rpx ;
text-align: center;
line-height: 50rpx;
text-align: left;
color: darkblue;
font-size: 30rpx;
}
.nav-bar {
margin: 5rpx;
display: flex;

19
im-uniapp/pages/group/group.vue
View File

@ -8,7 +8,10 @@
<uni-icons type="personadd" size="30"></uni-icons>
</view>
</view>
<view class="group-items">
<view class="group-tip" v-if="$store.state.groupStore.groups.length==0">
温馨提示：您现在还没有加入任何群聊，点击右上方'+'按钮可以创建群聊哦~
</view>
<view class="group-items" v-else>
<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
<view v-for="group in $store.state.groupStore.groups" :key="group.id">
<group-item :group="group"></group-item>
@ -16,6 +19,10 @@
</scroll-view>
</view>
</view>
<!-- wx audit -->
<view v-else>
<user-search></user-search>
</view>
</template>
<script>
@ -60,6 +67,16 @@
}
}
.group-tip{
position: absolute;
top: 400rpx;
padding: 50rpx;
text-align: left;
line-height: 50rpx;
color: darkblue;
font-size: 30rpx;
}
.group-items {
flex: 1;
padding: 0;

6
im-uniapp/store/chatStore.js
View File

@ -128,17 +128,15 @@ export default {
}
}
// 间隔大于10分钟插入时间显示
let lastTimeMsg = chat.messages.findLast(m=>m.type==MESSAGE_TYPE.TIP_TIME);
if(!lastTimeMsg || (lastTimeMsg.sendTime < msgInfo.sendTime - 600*1000)){
if(!chat.lastTimeTip || (chat.lastTimeTip < msgInfo.sendTime - 600*1000)){
chat.messages.push({
id:0,
sendTime: msgInfo.sendTime,
type: MESSAGE_TYPE.TIP_TIME,
});
chat.lastTimeTip = msgInfo.sendTime;
}
// 新的消息
chat.messages.push(msgInfo);
console.log(chat.unreadCount)
this.commit("saveToStorage");
},

Write Preview
Loading…
Cancel
Save