CommunityApp/pages/myhome/familyList.vue

<template>
	<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
		<view class="card" v-for="(item,index) in user_list" :key="index">
			<view class="alignCenter">
				<image :src="item.imageUri?item.imageUri:'http://139.9.103.171:1888/img/image/head.png'" mode="scaleToFill"></image>
			</view>
			<view class="content">
				<view class="flex">
					<text class="name">{{item.name}}</text>
					<view style="margin:8rpx 0 0 15rpx;" class="cu-tag sm line-blue radius">
						<text v-if="item.type==0">业主</text>
						<text v-if="item.type==1">家属</text>
						<text v-if="item.type==2">租客</text>
					</view>
				</view>
				<view class="padding-top-20 ">
					<text class="cuIcon-mobile text-blue  padding-right-10"></text>
					<text>{{item.tel}}</text>
				</view>
				<view class="padding-top-10 ">
					<text class="cuIcon-vipcard text-blue  padding-right-10"></text>
					<text>{{item.idCard || '暂无'}}</text>
				</view>
			</view>
		</view>
	</mescroll-body>
</template>
<script>
import MescrollMixin from "@/comps/mescroll-body/mescroll-mixins.js";
export default {
	mixins: [MescrollMixin], // 使用mixin
	name: '',
	data() {
		return {
			room_id:'',
			user_list:[],
			downOption:{
				auto:false,
				use:true
			},
			upOption:{
				auto:true,
				use:true,
				noMoreSize:5
			}
		};
	},
	onLoad(options) {
		this.room_id=options.room_id
	},
	methods:{
		/**
		 * 下拉刷新回调
		 */
		downCallback(){
			setTimeout(()=>{
				uni.showToast({
					title:"刷新成功",
					icon:"none"
				})
				this.mescroll.resetUpScroll()
			},1500)
		},
		upCallback(mescroll){
			let that=this
			let params = {
				  pageSize:mescroll.size,
				  pageNum:mescroll.num,
				  room_id:this.room_id
			};
			let operation = 'user/getUserByRoomId';
			try{
				getApp().globalData.postRequest(params,operation,(res)=>{
					let data=res.data.list
					//不推荐
					mescroll.endSuccess(data.length)
					//推荐用下面这个，但是后台没有给我返回total
					// this.mescroll.endBySize(data.length, total)
					if(mescroll.num == 1) that.user_list = []
					that.user_list = that.user_list.concat(data)
				})
				
				this.user_list
			}catch(e){
				mescroll.endErr()
			}
		}
	}
};
</script>

<style lang="scss" scoped>
	.card{
		background-color: #FFFFFF;
		// margin: 20rpx;
		margin-bottom: 2rpx;
		padding:30rpx 20rpx;
		// border-radius: 10rpx;
		display: flex;
		box-sizing: border-box;
		image{
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}
		.content{
			display: flex;
			flex-direction: column;
			padding-left: 20rpx;
			.name{
				font-size: 32rpx;
				font-weight: 600;
			}
		}
	}
</style>