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

stash

Browse Source
This commit is contained in:
Jason.Chen
2022-02-18 17:08:45 +08:00
parent e957217635
commit 3a90894351
1 changed files with 76 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,11 @@
<template> <template>
<view class="group--chat"> <view class="group--chat">
<scroll-view class="body" :show-scrollbar="false"> <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
<view class="body">
<view class="scroll">
<view class="cell" v-for="(item, index) in messages" :key="index"> <view class="cell" v-for="(item, index) in messages" :key="index">
<view class="cell-system" v-if="item.senderUserId === '__system__'">{{ item.content.message }}</view> <view class="cell-system" v-if="item.senderUserId === '__system__'">{{ item.content.message }}
</view>
<view v-else :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']"> <view v-else :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
<u-avatar class="avatar" @click="toUser(item)" size="36" shape="square" <u-avatar class="avatar" @click="toUser(item)" size="36" shape="square"
:src="contact(item.senderUserId).portraitUrl" /> :src="contact(item.senderUserId).portraitUrl" />
@@ -16,9 +19,8 @@
</view> </view>
</view> </view>
</view> </view>
<view class="cell-footer" ref="chatBottom"></view> </view>
</scroll-view> </view>
<sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
</view> </view>
</template> </template>
@@ -169,17 +171,27 @@
background: $window-color; background: $window-color;
height: 100vh; height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column-reverse;
.body { .body {
overflow: scroll; overflow: scroll;
flex: 1; flex: 1;
height: 0;
display: flex;
flex-direction: column-reverse;
.scroll {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
.cell { .cell {
padding: 10rpx 30rpx; padding: 10rpx 30rpx;
.cell-system { .cell-system {
text-align: center; text-align: center;
font-size: 24rpx;
color: $text-gray-m;
} }
.cell-item { .cell-item {
@@ -225,24 +237,6 @@
} }
} }
} }
.footer {
background: white;
padding: 20rpx 30rpx;
display: flex;
justify-content: space-between;
flex-direction: row;
.msg-type {
width: 70rpx;
height: 70rpx;
.icon {
margin: 5rpx;
width: 60rpx;
height: 60rpx;
}
}
} }
} }
</style> </style>