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

界面优化

master
xsx 2 years ago
parent
de6e5a9ac7
commit
ec7fe6a8e6
15 changed files with 138 additions and 139 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. 1
      im-ui/src/api/enums.js
  2. 10
      im-ui/src/components/chat/ChatBox.vue
  3. 2
      im-ui/src/components/chat/ChatHistory.vue
  4. 11
      im-ui/src/components/chat/ChatItem.vue
  5. 61
      im-ui/src/components/chat/ChatMessageItem.vue
  6. 17
      im-ui/src/components/common/FullImage.vue
  7. 5
      im-ui/src/components/friend/FriendItem.vue
  8. 6
      im-ui/src/components/group/AddGroupMember.vue
  9. 2
      im-ui/src/components/group/GroupItem.vue
  10. 10
      im-ui/src/store/chatStore.js
  11. 3
      im-ui/src/view/Chat.vue
  12. 1
      im-uniapp/common/enums.js
  13. 68
      im-uniapp/components/chat-item/chat-item.vue
  14. 71
      im-uniapp/components/chat-message-item/chat-message-item.vue
  15. 9
      im-uniapp/store/chatStore.js

1
im-ui/src/api/enums.js
View File

@ -6,6 +6,7 @@ const MESSAGE_TYPE = {
AUDIO:3, AUDIO:3,
VIDEO:4, VIDEO:4,
RECALL:10, RECALL:10,
TIP_TIME:20,
RTC_CALL: 101, RTC_CALL: 101,
RTC_ACCEPT: 102, RTC_ACCEPT: 102,
RTC_REJECT: 103, RTC_REJECT: 103,

10
im-ui/src/components/chat/ChatBox.vue
View File

@ -18,7 +18,7 @@
</ul> </ul>
</div> </div>
</el-main> </el-main>
<el-footer height="200px" class="im-chat-footer"> <el-footer height="240px" class="im-chat-footer">
<div class="chat-tool-bar"> <div class="chat-tool-bar">
<div title="表情" class="icon iconfont icon-biaoqing" ref="emotion" @click="switchEmotionBox()"> <div title="表情" class="icon iconfont icon-biaoqing" ref="emotion" @click="switchEmotionBox()">
</div> </div>
@ -40,9 +40,11 @@
</div> </div>
<div title="聊天记录" class="el-icon-chat-dot-round" @click="showHistoryBox()"></div> <div title="聊天记录" class="el-icon-chat-dot-round" @click="showHistoryBox()"></div>
</div> </div>
<textarea v-model="sendText" ref="sendBox" class="send-text-area" :disabled="lockMessage" @keydown.enter="sendTextMessage()"></textarea> <textarea v-model="sendText" ref="sendBox" class="send-text-area"
:disabled="lockMessage" @keydown.enter="sendTextMessage()"
placeholder="聊点什么吧~"></textarea>
<div class="im-chat-send"> <div class="im-chat-send">
<el-button type="primary" @click="sendTextMessage()">发送</el-button> <el-button type="primary" size="small" @click="sendTextMessage()">发送</el-button>
</div> </div>
</el-footer> </el-footer>
</el-container> </el-container>
@ -502,6 +504,8 @@
width: 100%; width: 100%;
flex: 1; flex: 1;
resize: none; resize: none;
font-size: 16px;
color: black;
background-color: #f8f8f8 !important; background-color: #f8f8f8 !important;
outline-color: rgba(83, 160, 231, 0.61); outline-color: rgba(83, 160, 231, 0.61);
} }

2
im-ui/src/components/chat/ChatHistory.vue
View File

@ -5,7 +5,7 @@
<el-scrollbar class="chat-history-scrollbar" ref="scrollbar" id="historyScrollbar" > <el-scrollbar class="chat-history-scrollbar" ref="scrollbar" id="historyScrollbar" >
<ul> <ul>
<li v-for="(msgInfo,idx) in messages" :key="idx"> <li v-for="(msgInfo,idx) in messages" :key="idx">
<chat-message-item :mine="msgInfo.sendId == mine.id" :headImage="headImage(msgInfo)" :showName="showName(msgInfo)" <chat-message-item :mode="2" :mine="msgInfo.sendId == mine.id" :headImage="headImage(msgInfo)" :showName="showName(msgInfo)"
:msgInfo="msgInfo" :menu="false"> :msgInfo="msgInfo" :menu="false">
</chat-message-item> </chat-message-item>
</li> </li>

11
im-ui/src/components/chat/ChatItem.vue
View File

@ -130,9 +130,9 @@
flex-direction: column; flex-direction: column;
padding-left: 10px; padding-left: 10px;
text-align: left; text-align: left;
overflow: hidden;
.chat-name { .chat-name {
font-size: 16px; font-size: 15px;
font-weight: 600; font-weight: 600;
line-height: 30px; line-height: 30px;
white-space: nowrap; white-space: nowrap;
@ -141,13 +141,13 @@
.chat-content { .chat-content {
display: flex; display: flex;
line-height: 30px;
.chat-content-text { .chat-content-text {
flex: 2; flex:1;
font-size: 14px; font-size: 14px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
img { img {
width: 30px !important; width: 30px !important;
height: 30px !important; height: 30px !important;
@ -155,7 +155,6 @@
} }
.chat-time { .chat-time {
flex: 1;
font-size: 13px; font-size: 13px;
text-align: right; text-align: right;
color: #888888; color: #888888;

61
im-ui/src/components/chat/ChatMessageItem.vue
View File

@ -1,12 +1,17 @@
<template> <template>
<div class="chat-msg-item"> <div class="chat-msg-item">
<div class="chat-msg-tip" v-show="msgInfo.type==$enums.MESSAGE_TYPE.RECALL">{{msgInfo.content}}</div> <div class="chat-msg-tip" v-show="msgInfo.type==$enums.MESSAGE_TYPE.RECALL">{{msgInfo.content}}</div>
<div class="chat-msg-normal" v-show="msgInfo.type!=$enums.MESSAGE_TYPE.RECALL" :class="{'chat-msg-mine':mine}"> <div class="chat-msg-tip" v-show="msgInfo.type==$enums.MESSAGE_TYPE.TIP_TIME">{{$date.toTimeText(msgInfo.sendTime)}}</div>
<div class="chat-msg-normal" v-show="msgInfo.type>=0 && msgInfo.type<10" :class="{'chat-msg-mine':mine}">
<div class="head-image"> <div class="head-image">
<head-image :url="headImage" :id="msgInfo.sendId"></head-image> <head-image :size="40" :url="headImage" :id="msgInfo.sendId"></head-image>
</div> </div>
<div class="chat-msg-content"> <div class="chat-msg-content">
<div class="chat-msg-top"> <div v-show="mode==1 && msgInfo.groupId && !msgInfo.selfSend" class="chat-msg-top">
<span>{{showName}}</span>
</div>
<div v-show="mode==2" class="chat-msg-top">
<span>{{showName}}</span> <span>{{showName}}</span>
<span>{{$date.toTimeText(msgInfo.sendTime)}}</span> <span>{{$date.toTimeText(msgInfo.sendTime)}}</span>
</div> </div>
@ -60,6 +65,10 @@
RightMenu RightMenu
}, },
props: { props: {
mode:{
type: Number,
default :1
},
mine: { mine: {
type: Boolean, type: Boolean,
required: true required: true
@ -161,7 +170,7 @@
} }
}, },
mounted() { mounted() {
//console.log(this.msgInfo); console.log(this.msgInfo);
} }
} }
</script> </script>
@ -171,15 +180,16 @@
.chat-msg-tip { .chat-msg-tip {
line-height: 50px; line-height: 50px;
font-size: 14px;
} }
.chat-msg-normal { .chat-msg-normal {
position: relative; position: relative;
font-size: 0; font-size: 0;
margin-bottom: 10px;
padding-left: 60px; padding-left: 60px;
min-height: 68px; min-height: 50px;
margin-top: 10px;
.head-image { .head-image {
position: absolute; position: absolute;
width: 40px; width: 40px;
@ -190,7 +200,7 @@
.chat-msg-content { .chat-msg-content {
text-align: left; text-align: left;
.chat-msg-top { .chat-msg-top {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -210,18 +220,18 @@
.chat-msg-text { .chat-msg-text {
display: block; display: block;
position: relative; position: relative;
line-height: 35px; line-height: 30px;
margin-top: 10px; margin-top: 3px;
padding: 14px; padding: 7px;
background-color: rgb(235,235,245); background-color: rgb(235,235,245);
border-radius: 10px; border-radius: 10px;
color: black; color: black;
display: block; display: block;
font-size: 17px; font-size: 16px;
text-align: left; text-align: left;
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-all; word-break: break-all;
box-shadow: 2px 2px 2px #c0c0f0;
&:after { &:after {
content: ""; content: "";
position: absolute; position: absolute;
@ -232,7 +242,7 @@
border-style: solid dashed dashed; border-style: solid dashed dashed;
border-color: rgb(235,235,245) transparent transparent; border-color: rgb(235,235,245) transparent transparent;
overflow: hidden; overflow: hidden;
border-width: 13px; border-width: 10px;
} }
} }
@ -243,14 +253,16 @@
align-items: center; align-items: center;
.send-image { .send-image {
min-width: 300px; min-width: 200px;
min-height: 200px; min-height: 150px;
max-width: 600px; max-width: 400px;
max-height: 400px; max-height: 300px;
border: #dddddd solid 1px; border: #dddddd solid 1px;
box-shadow: 2px 2px 2px #c0c0c0;
border-radius: 6px;
cursor: pointer; cursor: pointer;
} }
c
.send-fail { .send-fail {
color: #e60c0c; color: #e60c0c;
font-size: 30px; font-size: 30px;
@ -270,10 +282,10 @@
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center; align-items: center;
width: 20%;
min-height: 80px; min-height: 80px;
box-shadow: 5px 5px 2px #c0c0c0;
border: #dddddd solid 1px; border: #dddddd solid 1px;
border-radius: 3px; border-radius: 6px;
background-color: #eeeeee; background-color: #eeeeee;
padding: 10px 15px; padding: 10px 15px;
@ -284,9 +296,14 @@
font-size: 14px; font-size: 14px;
.chat-file-name { .chat-file-name {
display: inline-block;
min-width: 150px;
max-width: 300px;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
margin-bottom: 15px; margin-bottom: 15px;
white-space: pre-wrap;
word-break: break-all;
} }
} }
@ -349,7 +366,7 @@
background-color: rgb(88, 127, 240); background-color: rgb(88, 127, 240);
color: #fff; color: #fff;
vertical-align: top; vertical-align: top;
box-shadow: 2px 2px 1px #ccc;
&:after { &:after {
left: auto; left: auto;
right: -10px; right: -10px;

17
im-ui/src/components/common/FullImage.vue
View File

@ -1,6 +1,9 @@
<template> <template>
<el-dialog width="40%" :visible.sync="visible" :before-close="handleClose"> <el-dialog width="60%" :visible.sync="visible" :before-close="handleClose" :modal="true">
<img class="full-img" :src="url" /> <div class="image-box">
<img class="full-img" :src="url" />
</div>
</el-dialog> </el-dialog>
</template> </template>
@ -28,8 +31,12 @@
</script> </script>
<style> <style>
.full-img { .image-box{
width: 100%; display: flex;
height: 100%; align-items: center;
justify-content: center;
} }
</style> </style>

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

@ -69,6 +69,9 @@
type: Boolean, type: Boolean,
default: true default: true
} }
},
mounted() {
console.log(this.menu)
} }
} }
@ -110,7 +113,7 @@
text-align: left; text-align: left;
.friend-name { .friend-name {
font-size: 16px; font-size: 15px;
font-weight: 600; font-weight: 600;
line-height: 30px; line-height: 30px;
white-space: nowrap; white-space: nowrap;

6
im-ui/src/components/group/AddGroupMember.vue
View File

@ -8,7 +8,7 @@
<el-scrollbar style="height:400px;"> <el-scrollbar style="height:400px;">
<div v-for="(friend,index) in friends" :key="friend.id"> <div v-for="(friend,index) in friends" :key="friend.id">
<friend-item v-show="friend.nickName.startsWith(searchText)" :showDelete="false" @click.native="handleSwitchCheck(friend)" <friend-item v-show="friend.nickName.startsWith(searchText)" :showDelete="false" @click.native="handleSwitchCheck(friend)"
:friend="friend" :index="index" :active="index === activeIndex"> :menu="false" :friend="friend" :index="index" :active="index === activeIndex">
<el-checkbox :disabled="friend.disabled" @click.native.stop="" class="agm-friend-checkbox" v-model="friend.isCheck" <el-checkbox :disabled="friend.disabled" @click.native.stop="" class="agm-friend-checkbox" v-model="friend.isCheck"
size="medium"></el-checkbox> size="medium"></el-checkbox>
</friend-item> </friend-item>
@ -19,7 +19,9 @@
<div class="agm-select-tip"> 已勾选{{checkCount}}位好友</div> <div class="agm-select-tip"> 已勾选{{checkCount}}位好友</div>
<el-scrollbar style="height:400px;"> <el-scrollbar style="height:400px;">
<div v-for="(friend,index) in friends" :key="friend.id"> <div v-for="(friend,index) in friends" :key="friend.id">
<friend-item v-if="friend.isCheck && !friend.disabled" :friend="friend" :index="index" :active="false" @del="handleRemoveFriend(friend,index)"> <friend-item v-if="friend.isCheck && !friend.disabled" :friend="friend"
:index="index" :active="false" @del="handleRemoveFriend(friend,index)"
:menu="false">
</friend-item> </friend-item>
</div> </div>
</el-scrollbar> </el-scrollbar>

2
im-ui/src/components/group/GroupItem.vue
View File

@ -63,7 +63,7 @@
line-height: 65px; line-height: 65px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
font-size: 16px; font-size: 14px;
font-weight: 600; font-weight: 600;
} }
} }

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

@ -8,7 +8,7 @@ export default {
mutations: { mutations: {
initChatStore(state) { initChatStore(state) {
//state.activeIndex = -1;
}, },
openChat(state, chatInfo) { openChat(state, chatInfo) {
let chat = null; let chat = null;
@ -120,6 +120,14 @@ export default {
return; return;
} }
} }
// 间隔大于10分钟插入时间显示
let lastTimeMsg = chat.messages.findLast(m=>m.type==MESSAGE_TYPE.TIP_TIME);
if(!lastTimeMsg || (lastTimeMsg.sendTime < msgInfo.sendTime - 600*1000)){
chat.messages.push({
sendTime: msgInfo.sendTime,
type: MESSAGE_TYPE.TIP_TIME,
});
}
// 新的消息 // 新的消息
chat.messages.push(msgInfo); chat.messages.push(msgInfo);

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

@ -8,7 +8,8 @@
</div> </div>
<el-scrollbar class="l-chat-list" > <el-scrollbar class="l-chat-list" >
<div v-for="(chat,index) in chatStore.chats" :key="index"> <div v-for="(chat,index) in chatStore.chats" :key="index">
<chat-item :chat="chat" :index="index" <chat-item v-show="chat.showName.startsWith(searchText)"
:chat="chat" :index="index"
@click.native="handleActiveItem(index)" @click.native="handleActiveItem(index)"
@delete="handleDelItem(index)" @delete="handleDelItem(index)"
@top="handleTop(index)" @top="handleTop(index)"

1
im-uniapp/common/enums.js
View File

@ -6,6 +6,7 @@ const MESSAGE_TYPE = {
AUDIO:3, AUDIO:3,
VIDEO:4, VIDEO:4,
RECALL:10, RECALL:10,
TIP_TIME:20,
RTC_CALL: 101, RTC_CALL: 101,
RTC_ACCEPT: 102, RTC_ACCEPT: 102,
RTC_REJECT: 103, RTC_REJECT: 103,

68
im-uniapp/components/chat-item/chat-item.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<view class="chat-item" @click="showChatBox()"> <view class="chat-item" @click="showChatBox()">
<view class="left"> <view class="left">
<image class="head-image" :src="chat.headImage" mode="aspectFill" lazy-load="true" ></image> <image class="head-image" :src="chat.headImage" mode="aspectFill" lazy-load="true"></image>
<view v-show="chat.unreadCount>0" class="unread-text">{{chat.unreadCount}}</view> <view v-show="chat.unreadCount>0" class="unread-text">{{chat.unreadCount}}</view>
</view> </view>
<view class="chat-right"> <view class="chat-right">
@ -31,9 +31,9 @@
} }
}, },
methods: { methods: {
showChatBox(){ showChatBox() {
uni.navigateTo({ uni.navigateTo({
url: "/pages/chat/chat-box?chatIdx="+this.index url: "/pages/chat/chat-box?chatIdx=" + this.index
}) })
} }
} }
@ -51,10 +51,11 @@
padding-right: 10rpx; padding-right: 10rpx;
background-color: white; background-color: white;
white-space: nowrap; white-space: nowrap;
&:hover { &:hover {
background-color: #eeeeee; background-color: #eeeeee;
} }
.left { .left {
position: relative; position: relative;
display: flex; display: flex;
@ -62,14 +63,14 @@
align-items: center; align-items: center;
width: 100rpx; width: 100rpx;
height: 100rpx; height: 100rpx;
.head-image{ .head-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 10%; border-radius: 10%;
border: #eeeeee solid 1px; border: #eeeeee solid 1px;
} }
.unread-text { .unread-text {
position: absolute; position: absolute;
background-color: red; background-color: red;
@ -90,6 +91,7 @@
flex-direction: column; flex-direction: column;
padding-left: 20rpx; padding-left: 20rpx;
text-align: left; text-align: left;
overflow: hidden;
.chat-name { .chat-name {
font-size: 30rpx; font-size: 30rpx;
@ -103,15 +105,15 @@
display: flex; display: flex;
.chat-content-text { .chat-content-text {
flex: 2; flex: 1;
font-size: 28rpx; font-size: 28rpx;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
line-height: 50rpx; line-height: 50rpx;
text-overflow: ellipsis;
} }
.chat-time { .chat-time {
flex: 1;
font-size: 26rpx; font-size: 26rpx;
text-align: right; text-align: right;
color: #888888; color: #888888;
@ -120,51 +122,5 @@
} }
} }
} }
.mid {
margin-left: 20rpx;
flex: 2;
display: flex;
flex-direction: column;
height: 100%;
flex-shrink: 0;
overflow: hidden;
.show-name {
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 36rpx;
flex: 3;
}
.msg-text {
flex: 2;
font-size: 28rpx;
color: #888888;
white-space: nowrap;
}
}
.right {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-end;
height: 80rpx;
flex-shrink: 0;
overflow: hidden;
.msg-time {
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 14px;
color: #888888;
white-space: nowrap;
}
}
} }
</style>
</style>

71
im-uniapp/components/chat-message-item/chat-message-item.vue
View File

@ -1,17 +1,18 @@
<template> <template>
<view class="chat-msg-item"> <view class="chat-msg-item">
<view class="chat-msg-tip" v-show="msgInfo.type==$enums.MESSAGE_TYPE.RECALL">{{msgInfo.content}}</view> <view class="chat-msg-tip" v-show="msgInfo.type==$enums.MESSAGE_TYPE.RECALL">{{msgInfo.content}}</view>
<view class="chat-msg-tip" v-show="msgInfo.type==$enums.MESSAGE_TYPE.TIP_TIME">
<view class="chat-msg-normal" v-show="msgInfo.type!=$enums.MESSAGE_TYPE.RECALL" {{$date.toTimeText(msgInfo.sendTime)}}</view>
<view class="chat-msg-normal" v-show="msgInfo.type>=0 && msgInfo.type<10"
:class="{'chat-msg-mine':msgInfo.selfSend}"> :class="{'chat-msg-mine':msgInfo.selfSend}">
<view class="avatar" @click="onShowUserInfo(msgInfo.sendId)"> <view class="avatar" @click="onShowUserInfo(msgInfo.sendId)">
<image class="head-image" :src="headImage" lazy-load="true"></image> <image class="head-image" :src="headImage" lazy-load="true"></image>
</view> </view>
<view class="chat-msg-content" @longpress="onShowMenu($event)"> <view class="chat-msg-content" @longpress="onShowMenu($event)">
<view class="chat-msg-top"> <view v-show="msgInfo.groupId && !msgInfo.selfSend" class="chat-msg-top">
<text>{{showName}}</text> <text>{{showName}}</text>
<text>{{$date.toTimeText(msgInfo.sendTime)}}</text>
</view> </view>
<view class="chat-msg-bottom"> <view class="chat-msg-bottom">
@ -189,7 +190,7 @@
<style scoped lang="scss"> <style scoped lang="scss">
.chat-msg-item { .chat-msg-item {
padding: 20rpx; padding: 2rpx 20rpx;
.chat-msg-tip { .chat-msg-tip {
line-height: 60rpx; line-height: 60rpx;
@ -200,16 +201,16 @@
position: relative; position: relative;
font-size: 0; font-size: 0;
margin-bottom: 15rpx; margin-bottom: 15rpx;
padding-left: 120rpx; padding-left: 100rpx;
min-height: 120rpx; min-height: 80rpx;
.avatar { .avatar {
position: absolute; position: absolute;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100rpx; width: 70rpx;
height: 100rpx; height: 70rpx;
top: 0; top: 0;
left: 0; left: 0;
@ -229,42 +230,39 @@
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
color: #333; color: #333;
font-size: 14px; font-size: 24rpx;
line-height: 20px; line-height: 24rpx;
text {
margin-right: 12px;
}
} }
.chat-msg-bottom { .chat-msg-bottom {
display: inline-block; display: inline-block;
padding-right: 120rpx ; padding-right: 80rpx ;
.chat-msg-text { .chat-msg-text {
position: relative; position: relative;
line-height: 30px; line-height: 60rpx;
margin-top: 10px; margin-top: 10rpx;
padding: 10px; padding: 10rpx;
background-color: rgb(235,235,245); background-color: rgb(235,235,245);
border-radius: 3px; border-radius: 10rpx;
color: #333; color: #333;
font-size: 16px; font-size: 30rpx;
text-align: left; text-align: left;
display: block; display: block;
word-break: break-all; word-break: break-all;
white-space: pre-line; white-space: pre-line;
box-shadow: 2px 2px 2px #c0c0f0;
&:after { &:after {
content: ""; content: "";
position: absolute; position: absolute;
left: -10px; left: -20rpx;
top: 13px; top: 26rpx;
width: 0; width: 0;
height: 0; height: 0;
border-style: solid dashed dashed; border-style: solid dashed dashed;
border-color: rgb(235,235,245) transparent transparent; border-color: rgb(235,235,245) transparent transparent;
overflow: hidden; overflow: hidden;
border-width: 10px; border-width: 20rpx;
} }
} }
@ -284,6 +282,7 @@
max-width: 400rpx; max-width: 400rpx;
max-height: 300rpx; max-height: 300rpx;
border: #dddddd solid 1px; border: #dddddd solid 1px;
box-shadow: 2px 2px 2px #c0c0c0;
cursor: pointer; cursor: pointer;
} }
} }
@ -309,19 +308,19 @@
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center; align-items: center;
width: 65%;
min-height: 80px; min-height: 80px;
border: #dddddd solid 1px; border: #dddddd solid 1px;
border-radius: 3px; border-radius: 10rpx;
background-color: #eeeeee; background-color: #eeeeee;
padding: 10px 15px; padding: 10px 15px;
box-shadow: 2px 2px 2px #c0c0c0;
.chat-file-info { .chat-file-info {
flex: 1; flex: 1;
height: 100%; height: 100%;
text-align: left; text-align: left;
font-size: 14px; font-size: 14px;
width: 300rpx;
.chat-file-name { .chat-file-name {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
@ -361,7 +360,7 @@
&.chat-msg-mine { &.chat-msg-mine {
text-align: right; text-align: right;
padding-left: 0; padding-left: 0;
padding-right: 120rpx; padding-right: 100rpx;
.avatar { .avatar {
left: auto; left: auto;
@ -370,23 +369,15 @@
.chat-msg-content { .chat-msg-content {
text-align: right; text-align: right;
.chat-msg-top {
flex-direction: row-reverse;
text {
margin-left: 12px;
margin-right: 0;
}
}
.chat-msg-bottom { .chat-msg-bottom {
padding-left: 120rpx ; padding-left: 80rpx ;
padding-right: 0; padding-right: 0;
.chat-msg-text { .chat-msg-text {
margin-left: 10px; margin-left: 10px;
background-color: rgb(88, 127, 240); background-color: rgb(88, 127, 240);
color: #fff; color: #fff;
box-shadow: 2px 2px 1px #ccc;
&:after { &:after {
left: auto; left: auto;
right: -10px; right: -10px;

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

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

Write Preview
Loading…
Cancel
Save