调整样式
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user