CommunityApp/pages/myhome/myhome.vue

<template>
	<view class="">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view class="data" v-for="(item, index) in room_list" :key="index">
				<view class="top">
					<view class="left">
						<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
						<view class="title">{{item.residentialName}}</view>
					</view>
					
					<view class="right text-orange">
						<text  v-if="item.relationshipType==0">业主</text>
						<text  v-if="item.relationshipType==1">家属</text>
						<text  v-if="item.relationshipType==2">租户</text>
						<text  v-if="item.relationshipType==3">访客</text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<view style="padding: 0 30rpx;">
							<view class="content">
								<text>房屋信息：</text>
								<text >{{item.buildingName}},{{item.unitName}},{{item.name}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom" >
					<view class="cu-btn  sm round bg-red-btn"  @click="jump(item.id)">
						房屋成员
					</view>
				</view>
			</view>
		</mescroll-body>
		<view @tap="choosePlot" class="footer-fixed " >
			<view class="cu-btn  flex  text-lg bg-red-btn" style="padding: 46rpx 0;">
				添加房屋认证
			</view>
		</view>
	</view>
</template>

<script>
var app=getApp()
import MescrollMixin from "@/comps/mescroll-body/mescroll-mixins.js";
export default {
	mixins: [MescrollMixin], // 使用mixin
	name: '',
	data() {
		return {
			room_list:[],
			downOption:{
				auto:false,
				use:true
			},
			upOption:{
				auto:true,
				use:true,
				noMoreSize:5
			}
		};
	},
	onLoad() {
		
	},
	methods:{
		/**房屋成员
		 * @param {Object} id
		 */
		jump(id){
			 uni.navigateTo({
				 url:"./familyList?room_id="+id
			 })
		},
		/**
		 * 房屋认证
		 */
		choosePlot() {
			if(!this.$isEmpty(getApp().globalData.totalStep)){
				getApp().globalData.totalStep=2
			}
			  uni.navigateTo({
				url:"../auth/auth"
			  })
		},
		/**
		 * 下拉刷新回调
		 * @param {Object} mescroll
		 */
		downCallback(mescroll){
			setTimeout(()=>{
				uni.showToast({
					title:"刷新成功",
					icon:"none"
				})
				this.mescroll.resetUpScroll()
			},1500)
		},
		/**
		 * 上拉加载回调
		 */
		upCallback(mescroll){
			let that = this
			let parmas={
				member_id:getApp().globalData.member.id,
				pageNum:mescroll.num,
				pageSize:20
			}
			let operation = 'estate/getRoomByMemberId'
			try{
				getApp().globalData.postRequest(parmas,operation,(res)=>{
					if (res.data.result_code!=1) {
						mescroll.endErr()
						return
					}
					let data=[]
					if (uni.getStorageSync('plotName')) {
						//如果选择了当前小区，就只把当前小区的房屋列表展示出来
						  res.data.list.map(item => {
							if (item.residentialName == uni.getStorageSync('plotName')) {
							  data.push(item);
							}
						  })
					} else {
						// 如果没有选择到小区，就把所有的房屋列表展示出来
					  data = res.data.list;
					}
					//不推荐
					mescroll.endSuccess(data.length)
					//推荐用下面这个，但是后台没有给我返回total
					// this.mescroll.endBySize(data.length, total)
					if(mescroll.num == 1) that.room_list = []
					that.room_list = that.room_list.concat(data)
					getApp().globalData.room_list = that.room_list
				})
			}catch(e){	
				mescroll.endErr()
			}
		}
		
	}
};
</script>

<style lang="scss">
view,
button
 {
	box-sizing: border-box;
}
.data {
	width: 710rpx;
	background-color: #ffffff;
	margin: 20rpx auto;
	border-radius: 6rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	.top {
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx dashed #DDDDDD;
		padding-bottom: 20rpx;
		.left {
			display: flex;
			align-items: center;
			.title {
				margin: 0 10rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}
	.item {
		margin: 40rpx 0 20rpx 0;
		.content {
			display: flex;
			justify-content: space-between;
			padding: 10rpx 0;
		}
	}
	.bottom {
		display: flex;
		margin-top: 20rpx;
		justify-content: flex-end;
		align-items: center;
	}
}

</style>