hb/pages/user/jiedian.vue

<template>
	<view class="contant">
		<view class="jiedian-box" v-for="(item, index) in jieList">
			<view class="box-top">
				<view class="title-top">
					<view class="img">
						<image src="../../static/img/jiedian01.png" mode=""></image>
					</view>
					<view class="title">节点</view>
				</view>
				<view class="xiangqing" @click="navTo(item.id)">
					详情
					<text>></text>
				</view>
				<!-- <text class="xiangqing" @click="navTo(item.id)">
						详情>
					</text> -->
			</view>
			<view class="box-bottom">
				<view class="shouyi">
					<view class="jiedian">节点收益</view>
					<view class="number">{{ item.get }}</view>
				</view>
				<view class="shouyi">
					<view class="jiedian">团队人数</view>
					<view class="number">{{ item.children_num }}</view>
				</view>
				<view class="shouyi">
					<view class="jiedian">参加时间</view>
					<view class="number">{{ item.add_time | getTime }}</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import {
		lookOneself
	} from '../../api/user.js';
	export default {
		data() {
			return {
				jieList: [],
				page: 1, //当前页数
				limit: 10, //每次信息条数
				loadingType: 'more'
			};
		},
		filters: {
			getTime(val) {
				let str = '';
				if (val) {
					const date = new Date(val * 1000);
					const year = date.getFullYear();
					const mon = date.getMonth() + 1;
					const day = date.getDate();
					const hours = date.getHours();
					const minu = date.getMinutes();
					const sec = date.getSeconds();
					str = year + '-' + mon + '-' + day + ' ' + hours + ':' + minu + ':' + sec;
				}
				return str;
			}
		},
		// onLoad() {
		// 	this.lookMyjiedian()
		// },
		onShow() {
			this.lookMyjiedian();
		},
		onReachBottom() {
			this.lookMyjiedian();
		},
		methods: {
			lookMyjiedian() {
				let obj = this;
				if (obj.loadingType == 'noMore' || obj.loadingType == 'loading') {
					return;
				}
				obj.loadingType = 'loading';
				lookOneself({
					page: obj.page,
					limit: obj.limit
				}).then(res => {
					console.log(res);
					obj.jieList = obj.jieList.concat(res.data.points);
					if (res.data.points.length != obj.limit) {
						obj.loadingType = 'noMore';
					} else {
						obj.loadingType = 'more';
						obj.page++;
					}
					console.log(obj.loadingType, '2222222');
				});
			},
			navTo(id) {
				uni.navigateTo({
					url: './jiedianDetails?id=' + id
				});
			}
		}
	};
</script>

<style lang="scss">
	page,
	.contant {
		// background: #F3F3F3;

		margin: 0;
		padding: 0;
		height: 100%;
		width: 100%;
	}

	.jiedian-box {
		background: #ffffff;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		justify-content: space-between;
		margin: 20rpx 30rpx;
		border-radius: 15rpx;
		box-shadow: 2px 2px 0px #ebeef5;
	}

	.box-top {
		display: flex;
		justify-content: space-between;
		text-align: center;
		line-height: 1;

		.title-top {
			display: flex;
			justify-content: center;
			text-align: center;

			.img {
				width: 40rpx;
				height: 40rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.title {
				margin-left: 5rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.xiangqing {
			color: red;
			font-size: 28rpx;
			line-height: 40rpx;

			text {
				display: inline-block;
				margin-left: 10rpx;
			}
		}
	}

	.box-bottom {
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		text-align: center;
	}

	.shouyi {
		margin: 6rpx 0;
		display: flex;
		justify-content: space-between;
	}

	.jiedian {
		font-size: 26rpx;
		color: #999999;
	}

	.number {}
</style>