demingshangjia/pages/messages/messagesList.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;
		line-height: 30rpx;
	}
	.times{
		position: absolute;
		right: 29rpx;
		top: 29rpx;
		font-size: 22rpx;
		color: #999999;
	}
	.massage_list > view{
		float: left;
	}
</style>