TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

merge

Browse Source
This commit is contained in:
唐明明
2022-02-18 17:39:57 +08:00
parent d287513604 0fce904e6d
commit a290ad8df8
2 changed files with 89 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
pages/im/group/chat.vue
View File

@@ -1,24 +1,26 @@
<template> <template>
<view class="group--chat"> <view class="chat">
<sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" /> <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
<scroll-view class="body" :show-scrollbar="false">
<view class="cell" v-for="(item, index) in messages" :key="index"> <view class="body">
<view class="cell-system" v-if="item.senderUserId === '__system__'">{{ item.content.message }}</view> <view class="scroll">
<view v-else :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']"> <view class="cell" v-for="(item, index) in messages" :key="index">
<u-avatar class="avatar" @click="toUser(item)" size="36" shape="square" <view class="time" v-if="item.senderUserId === '__system__'">{{ item.content.message }}</view>
:src="contact(item.senderUserId).portraitUrl" /> <view v-else :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
<view class="msg"> <u-avatar class="avatar" @click="toUser(item)" size="36" shape="square"
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1" :src="contact(item.senderUserId).portraitUrl" />
:msg="item.content" :name="contact(item.senderUserId).name" /> <view class="msg">
<show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1" <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
:msg="item.content" :name="contact(item.senderUserId).name" /> :msg="item.content" :name="contact(item.senderUserId).name" />
<show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1" <show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
:msg="item.content" :name="contact(item.senderUserId).name" /> :msg="item.content" :name="contact(item.senderUserId).name" />
<show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
:msg="item.content" :name="contact(item.senderUserId).name" />
</view>
</view> </view>
</view> </view>
</view> </view>
<view class="cell-footer" ref="chatBottom"></view> </view>
</scroll-view>
</view> </view>
</template> </template>
@@ -36,8 +38,6 @@
import showText from '../components/showText' import showText from '../components/showText'
import sentMessageBar from '../components/sentMessageBar' import sentMessageBar from '../components/sentMessageBar'
const ChatList = uni.requireNativePlugin('dom')
export default { export default {
components: { components: {
showVoice, showVoice,
@@ -58,7 +58,7 @@
computed: { computed: {
latestMessage() { latestMessage() {
if (this.messages.length) { if (this.messages.length) {
return this.messages[this.messages.length - 1] return this.messages[0]
} else { } else {
return { return {
sentTime: 0 sentTime: 0
@@ -73,10 +73,6 @@
}, },
onLoad(e) { onLoad(e) {
this.targetId = e.targetId this.targetId = e.targetId
this.groupInfo = this.$store.getters.contactInfo(this.targetId)
uni.setNavigationBarTitle({
title: this.groupInfo.name
})
// 获取群成员数量 // 获取群成员数量
getGroupBase(this.targetId).then(res => { getGroupBase(this.targetId).then(res => {
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
@@ -99,9 +95,9 @@
url: '/pages/im/group/info?targetId=' + this.targetId url: '/pages/im/group/info?targetId=' + this.targetId
}) })
}, },
methods: { methods: {
onScroll(e){ onScroll(e) {
this.$refs.messageBar.onHidePopus() this.$refs.messageBar.onHidePopus()
}, },
toUser(item) { toUser(item) {
if (item.senderUserId == '__system__') { if (item.senderUserId == '__system__') {
@@ -125,7 +121,7 @@
10, 10,
false, false,
(messages) => { (messages) => {
this.messages = this.messages.concat(messages) this.messages.unshift(...messages)
this.scrollBottom() this.scrollBottom()
}) })
}, },
@@ -135,10 +131,10 @@
this.conversationType, this.conversationType,
this.targetId, this.targetId,
0, 0,
100, 20,
true, true,
(messages) => { (messages) => {
this.messages = messages.reverse() this.messages = messages
this.scrollBottom() this.scrollBottom()
}) })
}, },
@@ -153,103 +149,81 @@
// 更新badge提醒数量 // 更新badge提醒数量
im.setNotifyBadge() im.setNotifyBadge()
} }
setTimeout(() => {
let el = this.$refs.chatBottom
ChatList.scrollToElement(el, {
offset: 0,
animated: false
})
}, 50)
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style scoped lang="scss">
.group--chat { /* 窗口 */
.chat {
background: $window-color; background: $window-color;
height: 100vh; height: 100vh;
display: flex; display: flex;
overflow: scroll;
flex-direction: column-reverse; flex-direction: column-reverse;
.body {
flex: 1;
display: flex;
flex-direction: column-reverse;
.cell {
padding: 10rpx 30rpx;
.cell-system {
text-align: center;
}
.cell-item {
display: flex;
flex-direction: row;
width: 690rpx;
justify-content: flex-start;
align-items: flex-start;
margin-top: 20rpx;
&.left { .body {
flex-direction: row; overflow: scroll;
} flex: 1;
height: 0;
&.right {
flex-direction: row-reverse;
.state {
flex-direction: row;
justify-content: flex-end;
}
}
.avatar {
width: 78rpx;
height: 78rpx;
background-color: white;
border-radius: 10rpx;
}
.msg {
margin: 0 20rpx;
.user {
font-size: 18rpx;
line-height: 40rpx;
}
}
}
.cell-footer {
height: 20rpx;
}
}
}
.footer {
background: white;
padding: 20rpx 30rpx;
display: flex; display: flex;
justify-content: space-between; flex-direction: column-reverse;
flex-direction: row;
.msg-type { .scroll {
width: 70rpx; display: flex;
height: 70rpx; flex-direction: column-reverse;
justify-content: flex-end;
.icon { .cell {
margin: 5rpx; padding: 10rpx 30rpx;
width: 60rpx; .time {
height: 60rpx; text-align: center;
font-size: 24rpx;
color: #666;
}
.cell-item {
display: flex;
width: 690rpx;
justify-content: flex-start;
&.left {
flex-direction: row;
}
&.right {
flex-direction: row-reverse;
.state {
flex-direction: row;
justify-content: flex-end;
}
}
.msg {
margin: 0 20rpx;
.state {
padding-top: 10rpx;
.state-text {
font-size: $title-size-m - 2;
color: rgba($color: $main-color, $alpha: 0.3)
}
.state-text-active {
font-size: $title-size-m - 2;
color: #cecece;
}
}
}
}
.cell-footer {
height: 20rpx;
}
} }
} }
} }
}
.message-bar{
position: fixed;
bottom: 0;
left: 0;
right: 0;
} }
</style> </style>

5
pages/im/private/chat.vue
View File

@@ -119,7 +119,7 @@
this.conversationType, this.conversationType,
this.targetId, this.targetId,
0, 0,
100, 20,
true, true,
(messages) => { (messages) => {
this.messages = messages this.messages = messages
@@ -147,7 +147,8 @@
} }
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
/* 窗口 */ /* 窗口 */
.chat { .chat {