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

<template>
	<view class="visitor-list">
		<mescroll-body top="40" bottom="40" @init="mescrollInit" @down="downCallback" @up="upCallback" :option="{}">
			<view class="visitor">
				<view class="visitor-item" v-for="(item,index) in list" :key="index">
					<image class="visitor-avatar" :src="item.userPortrait" mode="aspectFill">
					</image>
					<text class="visitor-label">{{item.userName}}访问了房源</text>
					<uni-dateformat class="visitor-time" :date="item.date" :threshold="[60000,3600000 * 24 * 365]">
					</uni-dateformat>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		getVisitorByQuery
	} from '@/request/api/house.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				list: [],
				houseId: 15
			}
		},
		onLoad(body) {
			console.log(body);
			if (body.houseId) this.houseId = body.houseId;
		},
		methods: {
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				getVisitorByQuery({
					currPage: page.num,
					pageSize: 10,
					projectItemTargetRoomId: this.houseId
				}).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">
	.visitor-list {

		.visitor {
			background: #fff;
			padding-left: 40rpx;
		}

		.visitor-item {
			display: flex;
			align-items: center;
			font-weight: 300;
			border-bottom: 1px solid $uni-border-1;
			padding: 20rpx 30rpx 20rpx 0;

			.visitor-avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 80rpx;
			}

			.visitor-label {
				flex: 1;
				width: 0;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin: 0 20rpx;
			}

			.visitor-time {
				font-size: 24rpx;
				color: $uni-secondary-color;
			}

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
</style>