CBB3/pages/chat/group/info/groupInfo/msgView.vue

<template>
	<view>
		<view class="item fx-r fx-bc" @tap="tapItem(item)" v-for="(item,index) in data">
			<image :src="item.img == '' ? '/static/chat/user-avatar.png' : item.img" mode="aspectFill"></image>
			<view class="info fx-h fx-ac">
				<view class="fx-r">
					<view class="nickname">{{item.name}}</view>
					<view class="fx-g1"></view>
					<view class="iitem-time">{{utils.date('Y-m-d H:i:s',item.time)}}</view>
				</view>
				<rich-text class="title" :nodes="item.data"></rich-text>
			</view>
		</view>
		
		<view class="loading fx-r fx-ac fx-bc" v-if="page.isFrite && !page.isFoot">
			<image src="/static/chat/xloading.png"></image>
			<text>正在载入更多...</text>
		</view>
		<view class="loading complete" :hidden="!page.isFoot">已加载全部</view>	
	</view>
</template>
<style>
	.item{background: #fff;padding:0 10px;position: relative;}
	.item:active{background: #f1f1f1;}
	.item image{width: 40px;height: 40px;border-radius: 50%;}
	.item .info{width: calc(100% - 70px);padding: 10px 0;margin-left: 10px;font-size: 14px;color:#787878;border-bottom: 1px solid #f1f1f1;}
	.item .info .title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
	.item .flg{background: #ff5857;width: 20px;height: 20px;border-radius: 50%;font-size: 10px;text-align: center;line-height: 20px;color: #fff;}
	.item:last-child .info{border-bottom: 0;}
	.iitem-time{font-size: 12px;}
</style>

<script>
	import {mapState,mapMutations } from 'vuex';
	export default {
	    data() {
	        return {
				usercode : "",
				groupId  : "",
				data	 : [],
				page:{
					isFirst:false,
					isLoad:false,
					isFoot:false,
					page:1
				}
	        }  
	    },
		
		onLoad(option){
			this.groupId = option.groupId || "";
			this.usercode = option.usercode || "";
			this.getData();
		},
		onReachBottom() {
			if(this.page.isFoot || this.page.isLoad) {
				return;
			}
			this.page.page ++;
			this.getData();			
		},
	    methods: {	
			getData:function(isPull = false){
				if(this.page.isLoad) return;
				this.page.isLoad = true;
				if(isPull) {
					this.page.page = 1;
					this.page.isLoad = false;
					this.page.isFoot = false;
				}
				uni.showLoading({ title: '获取数据中..' });
				var post = {};
				post.page = this.page.page;
				post.usercode = this.usercode;
				post.groupId = this.groupId;
				this
					.request
					.post("chatGroupUserMsg",post)
					.then(res => {
						uni.hideLoading();
						this.page.isFirst = true;
						this.page.isLoad = false;
						if(isPull) {
							this.data = res.data.list;
						} else {
							this.data = this.data.concat(res.data.list);
						}
						//是否到底
						if(res.data.list.length != res.data.pageSize) {
							this.page.isFoot = true;
						}   
					})
					.catch(res=>{
						console.log(res);
						uni.hideLoading();
						uni.showModal({title: '系统提示',content: '加载失败，返回在尝试',showCancel: false});
					});
			},
			
			tapItem:function(item){
				uni.navigateTo({
					url:"../../chatGroup?groupId=" + this.groupId + "&usercode=&msgId=" + item.msgId + "&nid=" + item.nid
				})
			}
			
			
	    }
	}
</script>

<style>
</style>