消息列表展示优化
This commit is contained in:
@@ -4,9 +4,9 @@
|
||||
<block v-if="conversations.length < 1">
|
||||
<view class="vertical null-list">
|
||||
<u-empty icon="http://cdn.uviewui.com/uview/empty/message.png" textColor="#999" text="暂无好友消息">
|
||||
<template>
|
||||
<!-- <template>
|
||||
<view class="null-list-btn">开启聊天</view>
|
||||
</template>
|
||||
</template> -->
|
||||
</u-empty>
|
||||
</view>
|
||||
</block>
|
||||
@@ -67,7 +67,6 @@
|
||||
return {
|
||||
isShown: true, // 当前页面显示状态
|
||||
conversations: [], // 会话列表
|
||||
isImToken: '', // 是否已鉴权
|
||||
connection: 0,
|
||||
/* 窗口尺寸 */
|
||||
winSize: {},
|
||||
@@ -89,16 +88,14 @@
|
||||
},
|
||||
onShow() {
|
||||
if (this.$store.state.token !== '') {
|
||||
if (this.isImToken === '') {
|
||||
getImToken().then(res => {
|
||||
im.connect(res.token, res.userInfo)
|
||||
this.isImToken = res.token
|
||||
this.getConversationList()
|
||||
getImToken().then(res => {
|
||||
console.log("IMTOKEN", res);
|
||||
im.connect(res.token, res.userInfo, () => {
|
||||
this.getConversationList()
|
||||
})
|
||||
}
|
||||
this.getConversationList()
|
||||
this.isShown = true
|
||||
}
|
||||
})
|
||||
}
|
||||
this.isShown = true
|
||||
},
|
||||
onHide() {
|
||||
this.isShown = false
|
||||
@@ -182,15 +179,16 @@
|
||||
},
|
||||
getConversationList() {
|
||||
const count = 1000
|
||||
const timestamp = 0 // 会话的时间戳（获取这个时间戳之前的会话列表，0 表示从最新开始获取）会话类型
|
||||
RongIMLib.getConversationList(undefined, count, timestamp, (res) => {
|
||||
const timestamp = 0
|
||||
RongIMLib.getConversationList(undefined, count, timestamp, (res) => {
|
||||
console.log('获取列表', res);
|
||||
if (res.code === 0 && res.conversations.length > 0) {
|
||||
this.conversations = res.conversations
|
||||
this.conversations = res.conversations
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// 进入聊天的详情页面，清理未读消息数量
|
||||
toDetail(item) {
|
||||
toDetail(item) {
|
||||
this.hidePop()
|
||||
uni.navigateTo({
|
||||
url: '/pages/im/private/index?targetId=' + item.targetId + '&conversationType=' + item
|
||||
@@ -279,76 +277,6 @@
|
||||
background: $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// .message-box:not(:last-child) {
|
||||
|
||||
// .message-action {
|
||||
// &::after {
|
||||
// position: absolute;
|
||||
// left: $padding + 108;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// content: " ";
|
||||
// height: 1rpx;
|
||||
// background: $border-color;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// .message-box {
|
||||
// background: white;
|
||||
|
||||
// .message-action {
|
||||
// position: relative;
|
||||
// padding: 20rpx $padding;
|
||||
|
||||
// .message-avatar {
|
||||
// position: relative;
|
||||
// background: red;
|
||||
// }
|
||||
|
||||
// &-content {
|
||||
// position: absolute;
|
||||
// top: 20rpx;
|
||||
// height: 44px;
|
||||
// left: $padding + 108;
|
||||
// right: $margin;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// justify-content: center;
|
||||
|
||||
// .message-header {
|
||||
// display: flex;
|
||||
// font-size: $title-size;
|
||||
// line-height: 40rpx;
|
||||
// justify-content: space-between;
|
||||
|
||||
// .header-name {
|
||||
// flex: 1;
|
||||
// @extend .nowrap;
|
||||
// }
|
||||
|
||||
// .header-time {
|
||||
// padding-left: $padding;
|
||||
// font-size: $title-size-sm - 2;
|
||||
// color: $text-gray;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .message-msg {
|
||||
// font-size: $title-size-sm - 2;
|
||||
// color: $text-gray;
|
||||
// @extend .nowrap;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// &-item:last-child {
|
||||
// .message-action::after {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
/* 遮罩 */
|
||||
|
||||
@@ -3,10 +3,7 @@
|
||||
<scroll-view class="chat-scrool" :scroll-y="true" :scroll-into-view="scrollIntoID"
|
||||
:scroll-with-animation="false">
|
||||
<!-- 聊天窗口 -->
|
||||
<view class="chat-item" v-for="(item,index) in messages" :key="index" :id="'chatId_'+index">
|
||||
<view class="chat-item-time">
|
||||
<text>{{ item.sentTime|timeCustomCN }}</text>
|
||||
</view>
|
||||
<view class="chat-item" v-for="(item,index) in messages" :key="index">
|
||||
<view class="chat-item-article" :class="item.messageDirection == 1 ? 'right' : 'left'">
|
||||
<view class="chat-msg">
|
||||
<view class="chat-msg-text">{{ item.content.content }}</view>
|
||||
@@ -15,11 +12,14 @@
|
||||
<view class="chat-status" :class="{'hide': item.sentStatus == 50}"
|
||||
v-if="item.messageDirection == 1">{{ item.sentStatus == 50 ? '已读': '未读'}}</view>
|
||||
<view class="chat-avatar">
|
||||
<u-avatar v-if="item.messageDirection == 2" :src="friend(targetId).portraitUrl"
|
||||
<u-avatar v-if="item.messageDirection == 2" bg-color="#ffffff" :src="userInfo.portraitUrl"
|
||||
@click="showFriend(targetId)"></u-avatar>
|
||||
<u-avatar v-else @click="showMine" :src="$store.getters.sender.portraitUrl" />
|
||||
<u-avatar v-else @click="showMine" bg-color="#ffffff" :src="$store.getters.sender.portraitUrl" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="chat-item-time" :id="'chatId_'+index">
|
||||
<text>{{ item.sentTime|timeCustomCN }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
onLoad(e) {
|
||||
this.targetId = e.targetId
|
||||
this.conversationType = e.conversationType // 会话类型
|
||||
// 消息总数量
|
||||
|
||||
@@ -31,7 +31,6 @@
|
||||
getUserInfo
|
||||
} from '@/apis/interfaces/im.js'
|
||||
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
Reference in New Issue
Block a user