fh/pages/user/zjcdetail.vue

<template>
	<view class="content">
		<view class="v-top">
			<image src="../../static/img/zjc-bg.png" mode="" class="top-bg"></image>
			<view class="top-num">
				{{all || 0}}
			</view>
		</view>
		<scroll-view class="scorll-wrap" scroll-y @scrolltolower="loadData" :style="{'height': height}">
			<!-- 空白页 -->
			<!-- <empty v-if="loaded == true && list.length === 0"></empty> -->
		 
			<!-- 订单列表 -->
			<view v-for="(item, index) in list" :key="index" class="order-item flex">
				<view class="title-box flex_item">
					<view class="title-avatar"><image :src="item.avatar"></image></view>
					<view class="list_tpl">
						<view class="title">
							<text>{{ item.nickname }}</text>
						</view>
						<view class="time">
							<text>{{ item.phone | phone}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- <uni-load-more :status="loadingType"></uni-load-more> -->
		</scroll-view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from '@/components/empty';
	import {
		getPoolDetail
	} from '@/api/pool.js'
	export default {
		data() {
			return {
				all: '',
				height: '',
				list: [],
				loadingType: 'more',
				page: 1,
				limit: 10,
				loaded: true,
				type: 0,
				name: ''
			}
		},
		filters: {
			phone(val) {
				let str = ''
				if(val) {
					val = "" + val;
					str = val.substr(0,3) + "****" + val.substr(7)
				}
				return str
			}
		},
		components: {
			uniLoadMore,
			empty
		},
		onLoad(opt) {
			this.name = opt.name
			this.type = opt.type
			uni.setNavigationBarTitle({
			　　title:this.name
			})
			this.loadData()
		},
		onReady(res) {
			var _this = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.scorll-wrap').boundingClientRect();
					query.exec(function(res) {
						_this.height = resu.windowHeight - res[0].top + 'px';
						console.log('打印页面的剩余高度', _this.height);
					});
				},
				fail: res => {}
			});
		},
		methods: {
			loadData() {
				let obj =this
				getPoolDetail({
					type: obj.type
				}).then(({data}) => {
					obj.list = data.item.data
					obj.all = data.total_amount
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.v-top {
		// position: relative;
		height: 470rpx;
		width: 750rpx;
		.top-bg {
			position: absolute;
			width: 750rpx;
			height: 470rpx;
		}
		.top-num {
			position: relative;
			padding-top: 200rpx;
			font-size: 72rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #fff;
			text-align: center;
		}
		
	}
	.scorll-wrap {
		// background-color: red;
	}
	.order-item {
		// margin-top: 20rpx;
		padding: 20rpx 30rpx;
		line-height: 1.5;
		.title-box {
			width: 100%;
			.title-avatar{
				width: 100rpx;
				height: 100rpx;
				margin-right: 25rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 100%;
				}
			}
			.list_tpl{
				width: 85%;
				.title {
					font-size: $font-lg;
					color: $font-color-base;
					overflow:hidden;            //超出的文本隐藏
					text-overflow:ellipsis;     //溢出用省略号显示
					white-space:nowrap;
					 justify-content: flex-start;
					image {
						margin-left: 9rpx;
						width: 147rpx;
						height: 32rpx;
					}
				}
				.time {
					margin-top: 15rpx;
					font-size: 22rpx;
					color: $font-color-light;
				}
			}
		}
		.money {
			color: #DB1935;
			font-size: $font-lg;
		}
	}
</style>