调整样式

This commit is contained in:
2022-02-17 15:27:52 +08:00
parent b904c4449e
commit 1c5d6d9f4c
5 changed files with 63 additions and 55 deletions

View File

@@ -3,15 +3,19 @@
<!-- chat -->
<list class="body" :show-scrollbar="false">
<cell class="cell" v-for="(item, index) in messages" :key="index">
<view class="time"> <text class="text">{{ customCN(item.sentTime) }}</text> </view>
<view class="time"> <text class="text">{{ customCN(item.sentTime) }}</text> </view>
<view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
<u-avatar class="avatar" size="36" shape="square" @click="showUser(targetId, item.messageDirection)" :src="contact(item.senderUserId).portraitUrl" />
<u-avatar class="avatar" size="40" shape="square" @click="showUser(targetId, item.messageDirection)"
:src="contact(item.senderUserId).portraitUrl" />
<view class="msg">
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1" :msg="item.content" />
<show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1" :msg="item.content" />
<show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1" :msg="item.content" />
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
:msg="item.content" />
<show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
:msg="item.content" />
<show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
:msg="item.content" />
<view class="state" v-if="item.messageDirection == 1">
<text class="state-text">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
<text :class="item.sentStatus === 50?'state-text':'state-text-active'">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
</view>
</view>
</view>
@@ -55,19 +59,19 @@
}
},
computed: {
latestMessage() {
if (this.messages.length) {
return this.messages[this.messages.length - 1]
} else {
return {
sentTime: 0
}
latestMessage() {
if (this.messages.length) {
return this.messages[this.messages.length - 1]
} else {
return {
sentTime: 0
}
}
},
contact() {
return function(targetId) {
return this.$store.getters.contactInfo(targetId)
}
},
contact() {
return function(targetId) {
return this.$store.getters.contactInfo(targetId)
}
}
},
onLoad(e) {
@@ -104,18 +108,18 @@
customCN(val) {
return timeCustomCN(val)
},
getNewMessage() {
im.getMessageList(
this.conversationType,
this.targetId,
this.latestMessage.sentTime || 0,
1,
false,
(messages) => {
console.log(messages);
this.messages = this.messages.concat(messages)
this.scrollBottom()
})
getNewMessage() {
im.getMessageList(
this.conversationType,
this.targetId,
this.latestMessage.sentTime || 0,
1,
false,
(messages) => {
console.log(messages);
this.messages = this.messages.concat(messages)
this.scrollBottom()
})
},
// 获取消息列表
getMessageList() {
@@ -125,7 +129,7 @@
0,
100,
true,
(messages) => {
(messages) => {
console.log(messages);
this.messages = messages.reverse()
this.scrollBottom()
@@ -167,6 +171,7 @@
background: $window-color;
flex: 1;
.body {
flex: 1;
@@ -192,7 +197,6 @@
width: 690rpx;
justify-content: flex-start;
&.left {
flex-direction: row;
}
@@ -213,8 +217,13 @@
padding-top: 10rpx;
.state-text {
font-size: 24rpx;
color: #666;
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;
}
}
}