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

聊天详情页面样式

Browse Source
This commit is contained in:
Jason.Chen
2022-02-18 10:16:13 +08:00
parent 08971f256d
commit 6c0feb9cb6
2 changed files with 27 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,8 @@
<template> <template>
<view class="group--chat"> <view class="group--chat">
<list class="body" :show-scrollbar="false"> <scroll-view class="body" :show-scrollbar="false">
<cell 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__'"> <text <view class="cell-system" v-if="item.senderUserId === '__system__'">{{ item.content.message }}</view>
class="text">{{ item.content.message }}</text> </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 +15,9 @@
:msg="item.content" :name="contact(item.senderUserId).name" /> :msg="item.content" :name="contact(item.senderUserId).name" />
</view> </view>
</view> </view>
</cell> </view>
<cell class="cell-footer" ref="chatBottom" /> <view class="cell-footer" ref="chatBottom"></view>
</list> </scroll-view>
<sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" /> <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
</view> </view>
</template> </template>
@@ -173,21 +172,19 @@
flex-direction: column; flex-direction: column;
.body { .body {
overflow: scroll;
flex: 1; flex: 1;
.cell { .cell {
padding: 10rpx 30rpx; padding: 10rpx 30rpx;
.cell-system { .cell-system {
align-items: center; text-align: center;
.text {
font-size: 24rpx;
color: $text-gray-m;
}
} }
.cell-item { .cell-item {
display: flex;
flex-direction: row;
width: 690rpx; width: 690rpx;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;

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

@@ -1,9 +1,9 @@
<template> <template>
<view class="chat"> <view class="chat">
<!-- chat --> <!-- chat -->
<list class="body" :show-scrollbar="false"> <scroll-view class="body" scroll-y>
<cell class="cell" v-for="(item, index) in messages" :key="index"> <view class="cell" v-for="(item, index) in messages" :key="index">
<view class="time"> <text class="text">{{ customCN(item.sentTime) }}</text> </view> <view class="time">{{ customCN(item.sentTime) }}</view>
<view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']"> <view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
<u-avatar class="avatar" size="40" shape="square" @click="showUser(targetId, item.messageDirection)" <u-avatar class="avatar" size="40" shape="square" @click="showUser(targetId, item.messageDirection)"
:src="contact(item.senderUserId).portraitUrl" /> :src="contact(item.senderUserId).portraitUrl" />
@@ -20,9 +20,9 @@
</view> </view>
</view> </view>
</view> </view>
</cell> </view>
<cell class="cell-footer" ref="chatBottom" /> <view class="cell-footer" ref="chatBottom"></view>
</list> </scroll-view>
<sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" /> <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
</view> </view>
</template> </template>
@@ -79,7 +79,7 @@
this.targetId = e.targetId this.targetId = e.targetId
this.userInfo = this.$store.getters.contactInfo(this.targetId) this.userInfo = this.$store.getters.contactInfo(this.targetId)
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title: this.userInfo.name title: this.contact(this.targetId).name
}) })
// 获取消息列表 // 获取消息列表
this.getMessageList() this.getMessageList()
@@ -176,26 +176,19 @@
.body { .body {
flex: 1; flex: 1;
overflow: scroll;
.cell { .cell {
padding: 10rpx 30rpx; padding: 10rpx 30rpx;
.time { .time {
justify-content: center; text-align: center;
align-items: center; font-size: 24rpx;
padding-bottom: 20rpx; color: #666;
.text {
background: #fff;
font-size: 24rpx;
color: #666;
line-height: 40rpx;
padding: 0 20rpx;
border-radius: 10rpx;
}
} }
.cell-item { .cell-item {
display: flex;
width: 690rpx; width: 690rpx;
justify-content: flex-start; justify-content: flex-start;