xihaigou/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 { lookSubpoints, 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>