realty/virgo.wzfrontend/yui_wx/pages/data/data.vue

<template>
	<view>
		<mescroll-empty :option="option" @emptyclick="$navigateTo('/pages/login/login')" v-if="isEmpty">
		</mescroll-empty>
		<mescroll-body top="30" bottom="30" @init="mescrollInit" @down="downCallback" @up="upCallback" v-else>
			<view class="data-house-list">
				<view class="data-house-item" v-for="(item,index) in list" :key="item.id"
					@click="$navigateTo('/pages/dataDetail/dataDetail?houseId='+item.id)">
					<image class="image" :src="imageUrl(item.showPicture)" mode="aspectFill"></image>
					<view class=" content">
						<view class="title">{{item.projectItemName}}-{{item.projectItemTargetName}}-{{item.roomNumber}}
						</view>
						<view class="const">
							<view class="const-item">
								<uni-icons class="inherit-icons" type="map-filled" color="#7f7f7f"></uni-icons>
								<text class="text">2</text>
							</view>
							<view class="const-item">
								<uni-icons class="inherit-icons" type="calendar-filled" color="#7f7f7f"></uni-icons>
								<text class="text">2</text>
							</view>
						</view>
						<view class="sub">{{item.projectName}}</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		getHouseListByPage
	} from '@/request/api/house.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				option: {
					tip: '暂未加入项目'
				},
				list: [],
				isEmpty: true
			}
		},
		onLoad() {
			uni.$on('reloadData', () => {
				this.mescroll.resetUpScroll();
			})
		},
		onShow() {
			this.isEmpty = true;
			if (!uni.getStorageSync('token')) {
				this.option = {
					tip: '暂未登录',
					btnText: '点击登录'
				}
			} else if (!this.$store.getters.project.id) {
				this.option = {
					tip: '暂未加入项目'
				}
			} else {
				this.isEmpty = false;
			}
		},
		methods: {
			imageUrl(data) {
				if (!data || data === '[]') return 'https://assets.api.uizard.io/api/cdn/stream/c05650d2-192b-4a56-ae97-05638f53804c.png';
				return JSON.parse(data)[0].url;
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				getHouseListByPage({
					currPage: page.num,
					pageSize: 10,
					projectId: this.$store.getters.project.id
				}).then(res => {
					if (res.code === 200) {
						this.mescroll.endBySize(res.data.dataList.length, res.data.totalCount);
						if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(res.data.dataList); //追加新数据
					} else {
						this.mescroll.endErr();
					}
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			}
		}
	}
</script>

<style lang="scss">
	.data-house-list {
		padding: 0 30rpx;

		.data-house-item {
			height: 200rpx;
			background: #fff;
			display: flex;
			align-items: center;
			border-radius: 16rpx;
			box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.08);
			padding: 0 30rpx;
			margin-bottom: 30rpx;
		}

		.image {
			width: 200rpx;
			height: 140rpx;
			border-radius: 8rpx;
		}

		.content {
			margin-left: 20rpx;
		}

		.title {
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 10rpx;
		}

		.sub {
			font-weight: 300;
			font-size: 24rpx;
			margin-top: 10rpx;
			color: $uni-secondary-color;
		}

		.const {
			display: flex;
			align-items: center;

			.const-item {
				display: flex;
				align-items: center;
				color: $uni-secondary-color;
				margin-right: 20rpx;
			}

			.text {
				margin-left: 6rpx;
			}
		}
	}
</style>