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

Merge branch 'master' of https://git.yuzhankeji.cn/TmOct5/ZhHealth

Browse Source
This commit is contained in:
Jason.Chen
2022-02-18 17:22:07 +08:00
parent a5319fb6d6 b39961fe3e
commit 3a2d92514c
2 changed files with 90 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
pages/im/components/sentPopups.vue
View File

@@ -141,12 +141,13 @@
.sent--popups { .sent--popups {
background: white; background: white;
padding: 30rpx 15rpx; padding: 30rpx 15rpx;
display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: row; flex-direction: row;
.item { .item {
width: 150rpx; width: 150rpx;
margin: 15rpx; margin: 15rpx;
text-align: center;
} }
.text { .text {

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

@@ -1,26 +1,24 @@
<template> <template>
<view class="group--chat"> <view class="group--chat">
<sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" /> <scroll-view class="body" :show-scrollbar="false">
<view class="body"> <view class="cell" v-for="(item, index) in messages" :key="index">
<view class="scroll"> <view class="cell-system" v-if="item.senderUserId === '__system__'">{{ item.content.message }}</view>
<view class="cell" v-for="(item, index) in messages" :key="index"> <view v-else :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
<view class="cell-system" v-if="item.senderUserId === '__system__'">{{ item.content.message }} <u-avatar class="avatar" @click="toUser(item)" size="36" shape="square"
</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> <view class="cell-footer" ref="chatBottom"></view>
</scroll-view>
<sent-message-bar class="message-bar" :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
</view> </view>
</template> </template>
@@ -102,7 +100,7 @@
}) })
}, },
methods: { methods: {
onScroll(e) { onScroll(e){
this.$refs.messageBar.onHidePopus() this.$refs.messageBar.onHidePopus()
}, },
toUser(item) { toUser(item) {
@@ -173,72 +171,85 @@
background: $window-color; background: $window-color;
height: 100vh; height: 100vh;
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column;
overflow: scroll;
.body { .body {
overflow: scroll;
flex: 1; flex: 1;
height: 0; .cell {
display: flex; padding: 10rpx 30rpx;
flex-direction: column-reverse;
.scroll { .cell-system {
display: flex; text-align: center;
flex-direction: column-reverse; }
justify-content: flex-end;
.cell { .cell-item {
padding: 10rpx 30rpx; display: flex;
flex-direction: row;
width: 690rpx;
justify-content: flex-start;
align-items: flex-start;
margin-top: 20rpx;
.cell-system { &.left {
text-align: center;
font-size: 24rpx;
color: $text-gray-m;
}
.cell-item {
display: flex;
flex-direction: row; flex-direction: row;
width: 690rpx; }
justify-content: flex-start;
align-items: flex-start;
margin-top: 20rpx;
&.left { &.right {
flex-direction: row-reverse;
.state {
flex-direction: row; flex-direction: row;
} justify-content: flex-end;
&.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 { .avatar {
height: 20rpx; 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;
justify-content: space-between;
flex-direction: row;
.msg-type {
width: 70rpx;
height: 70rpx;
.icon {
margin: 5rpx;
width: 60rpx;
height: 60rpx;
} }
} }
} }
} }
.message-bar{
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
</style> </style>