132 lines
2.9 KiB
Vue
132 lines
2.9 KiB
Vue
<template>
|
||
<!-- login页面 -->
|
||
<view :style="{'height':swiperHeight + 'px'}">
|
||
<!-- <view class="border_serach">
|
||
<view class="u-search">
|
||
<u-search :show-action="false" input-align="left" shape="round" placeholder="搜索" v-model="keyword"></u-search>
|
||
</view>
|
||
</view> -->
|
||
<!-- 消息列表 -->
|
||
<u-empty text="并没有什么消息" mode="message" v-if="Object.keys(list).length == 0" style="margin: auto"></u-empty>
|
||
<view class="massage_list" v-for="(item,index) in list" :key="index" @click="gochat(item)">
|
||
<view class="images">
|
||
<image :src="item.avatar" ></image>
|
||
</view>
|
||
<view class="names">{{item.name}}</view>
|
||
<view class="content u-line-1">{{item.text}}</view>
|
||
<view class="times">{{item.time}}</view>
|
||
<view class="tishi" v-if="item.unReadMessage"></view>
|
||
</view>
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
keyword: '搜索',
|
||
list: [
|
||
|
||
],
|
||
};
|
||
},
|
||
methods: {
|
||
gochat(id){
|
||
console.log(id)
|
||
this.$u.route({
|
||
url:"/pages/messages/privateChat",
|
||
params:{
|
||
id:JSON.stringify(id)
|
||
}
|
||
|
||
})
|
||
},
|
||
onFriendListChange(onlineFriends) {
|
||
//todo:比较垃圾的处理方式，因为Uniapp的基于MAP的双向绑定在H5端不稳定，H5端偶尔会抽风
|
||
// 下边这一行删掉，有时候页面可以更新，有时候不行，大家有优雅的方式，也欢迎跟我们沟通
|
||
console.log(onlineFriends,121212)
|
||
this.information_dl = onlineFriends;
|
||
|
||
this.$forceUpdate();
|
||
},
|
||
},
|
||
onShow(){
|
||
// this.list = this.imService.friends;
|
||
this.imService.onFriendListChange=this.onFriendListChange;
|
||
},
|
||
onLoad(){
|
||
const res = uni.getSystemInfoSync();
|
||
this.swiperHeight = res.windowHeight;
|
||
this.list = this.imService.friends;
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tishi{
|
||
position: absolute;
|
||
bottom: 30rpx;
|
||
right: 30rpx;
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
border-radius: 50%;
|
||
background-color: #FF0000;
|
||
}
|
||
.u-search{
|
||
width: 690rpx;
|
||
margin: 0 auto;
|
||
padding: 14rpx;
|
||
}
|
||
.border_serach{
|
||
border-top: 1px solid #EDEDED;
|
||
}
|
||
.massage_list{
|
||
padding: 25rpx 18rpx 25rpx 31rpx;
|
||
position: relative;
|
||
border-bottom: 1px #ECECEC solid;
|
||
overflow: hidden;
|
||
position: relative;
|
||
zoom: 1;
|
||
.images{
|
||
width: 84rpx;
|
||
height: 84rpx;
|
||
margin-right: 28rpx;
|
||
}
|
||
}
|
||
.massage_list image{
|
||
width: 84rpx;
|
||
height: 84rpx;
|
||
.names{
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.content{
|
||
margin-bottom: 19rpx;
|
||
}
|
||
}
|
||
.content , .names{
|
||
width: 480rpx;
|
||
}
|
||
.content{
|
||
margin-top: 19rpx;
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
height: 30rpx;
|
||
height: 30rpx;
|
||
overflow:hidden; //超出的文本隐藏
|
||
text-overflow:ellipsis; //用省略号显示
|
||
white-space:nowrap; //不换行
|
||
}
|
||
.times{
|
||
position: absolute;
|
||
right: 29rpx;
|
||
top: 29rpx;
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
}
|
||
.massage_list > view{
|
||
float: left;
|
||
}
|
||
</style>
|