132 lines
4.1 KiB
Vue
132 lines
4.1 KiB
Vue
<template>
|
||
<div>
|
||
<u-popup overlay mode="left" closeable closeOnClickOverlay :show="showLeft" @close="showLeft = false">
|
||
<leftMenu></leftMenu>
|
||
</u-popup>
|
||
|
||
<div class="container">
|
||
<div class="msg-item u-border-bottom" v-for="(item, index) in conversations" @click="toDetail(item)">
|
||
<div class="avatar">
|
||
<u-badge numberType="ellipsis" max="99" shape="horn" absolute :offset="[-7, -7]"
|
||
:value="item.unreadMessageCount" />
|
||
<u-avatar shape="square" :src="friend(item.targetId).portraitUrl"></u-avatar>
|
||
</div>
|
||
<div class="content ">
|
||
<div class="name">
|
||
<h3>{{ friend(item.targetId).name }}</h3>
|
||
<span class="time">{{ item.sentTime|timeCustomCN }}</span>
|
||
</div>
|
||
<div class="u-line-1">{{ item.latestMessage.content }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<u-loadmore status="nomore" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as RongIMLib from '@rongcloud/imlib-uni'
|
||
import im from '@/utils/im/index.js'
|
||
import leftMenu from './components/left_menu.vue'
|
||
|
||
export default {
|
||
components: {
|
||
leftMenu
|
||
},
|
||
data() {
|
||
return {
|
||
isShown: true, // 当前页面显示状态
|
||
conversations: [], // 会话列表
|
||
showLeft: false
|
||
}
|
||
},
|
||
computed: {
|
||
friend() {
|
||
return function(targetId) {
|
||
return this.$store.getters.userInfo(targetId)
|
||
}
|
||
}
|
||
},
|
||
onLoad() {},
|
||
onShow() {
|
||
this.getConversationList()
|
||
this.isShown = true
|
||
},
|
||
onHide() {
|
||
this.isShown = false
|
||
},
|
||
onNavigationBarButtonTap(e) {
|
||
if (e.index == 0) {
|
||
this.showLeft = true
|
||
}
|
||
},
|
||
watch: {
|
||
'$store.getters.newMessage': function(n, o) {
|
||
if (this.isShown) {
|
||
this.getConversationList()
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
getFriend(targetId) {
|
||
return this.$store.getters.userInfo(targetId)
|
||
},
|
||
getConversationList() {
|
||
const count = 1000
|
||
const timestamp = 0 // 会话的时间戳（获取这个时间戳之前的会话列表，0 表示从最新开始获取）会话类型
|
||
RongIMLib.getConversationList(undefined, count, timestamp, (res) => {
|
||
if (res.code === 0 && res.conversations.length > 0) {
|
||
this.conversations = res.conversations
|
||
}
|
||
})
|
||
},
|
||
// 进入聊天的详情页面，清理未读消息数量
|
||
toDetail(item) {
|
||
uni.navigateTo({
|
||
url: '/pages/im/detail?targetId=' + item.targetId +
|
||
'&conversationType=' + item.conversationType
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.container {
|
||
padding: 0 $uni-spacing-col-lg $uni-spacing-col-lg $uni-spacing-col-lg;
|
||
}
|
||
|
||
.msg-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: $uni-spacing-col-lg 0;
|
||
|
||
.avatar {
|
||
position: relative;
|
||
margin-right: $uni-spacing-col-lg;
|
||
|
||
.u-badge {
|
||
z-index: 9;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
flex: 1;
|
||
|
||
.name {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.time {
|
||
font-size: $uni-font-size-sm;
|
||
color: $uni-text-color-grey;
|
||
}
|
||
}
|
||
|
||
.u-line-1 {
|
||
color: $u-info;
|
||
}
|
||
}
|
||
}
|
||
</style>
|