kunpeng/pages/finance/today.vue

<template>
	<view class="container">
		<view class="list-box flex">
			<view class="list-tpl">
				<view class="num">{{count || 0}}</view>
				<view class="name">新增会员数</view>
			</view>
			<view class="list-tpl">
				<view class="num">{{people_num || 0}}</view>
				<view class="name">新增算力数</view>
			</view>
		</view>
		<view class="list-cell" v-if="list.length > 0">
			<view class="cell-name flex">
				<view class="title">成员信息</view>
				<view class="title-box flex">
					<view class="title">状态</view>
					<view class="title">算力</view>
					<view class="title">购买时间</view>
				</view>
			</view>
			<view class="cell-box flex" v-for="(ls,index) in list" :key='index'>
				<view class="cell-tit flex_item">
					<image :src="ls._user.avatar"></image>
					<view class="tit-box">
						<view class="tit-tpl clamp">{{ls.nickname}}</view>
						<view class="tit-tip">{{ls.phone}}</view>
					</view>
				</view>
				<view class="flex num-box">
					<view class="num clamp">{{ls.status == 0 ? '准备中' : ls.status ==  1 ? '挖矿中' : '已到期'}}</view>
					<view class="num clamp">{{ls.num}}T</view>
					<view class="date">
						<view class="year">
							{{ ls.year }}
						</view>
						<view class="">
							{{ ls.month }}-{{ ls.day }}
						</view>
						<view class="">
							{{ ls.today }}
						</view>
					</view>
				</view>
			</view>
			<view class="nav flex" v-show="page != 1 || isLast">
				<view class="next" @click="last" >
					上一页
				</view>
				
				<view class="next"  @click="next">
					下一页
				</view>
			</view>
		</view>
		<view class="empty-box" v-show="list.length === 0"><empty></empty></view>
	</view>
</template>

<script>
import { newMining,miner } from '@/api/finance.js';
import empty from '@/components/empty';
export default {
	components: {
		empty
	},
	data() {
		return {
			page: 1,
			limit: 5,
			data:'',
			list:'',
			isLast: true,
			people_num: '',
			count: '',
		};
	},
	onLoad(option){
		this.people_num = option.num
		this.loadData();
		this.loadDataNext();
		this.getCount();
	},
	onShow() {
		
	},
	methods: {
		async getCount() {
			let obj = this;
			miner({new: 1}).then(e => {
				obj.count = e.data.count;
			})
		},
		// 请求载入数据
		async loadData() {
			let obj = this;
			newMining({
				page: obj.page,
				limit: obj.limit,
			}).then(({ data }) => {
				obj.data = data;
				obj.list = data.data;
				obj.list.forEach(e => {
					let date = e._pay_time.split(' ');
					e.today = date[1];
					let all = date[0].split('-');
					e.year = all[0];
					e.month = all[1];
					e.day = all[2];
				})
				console.log(obj.list);
			});
		},
		async loadDataNext() {
			let obj = this;
			console.log(obj.page)
			newMining({
				page: obj.page + 1,
				limit: obj.limit,
			}).then(({ data }) => {
				if(data.data.length === 0){
					obj.isLast = false;
				}else{
					obj.isLast = true;
				}
			});
		},
		nav(url){
			uni.navigateTo({
				url:url
			})
		},
		next(){
			let that = this;
			this.page = this.page + 1;
			this.loadDataNext();
			if(this.isLast){
				
				this.loadData();
			}else{
				this.page = this.page - 1;
				that.$api.msg('已经是最后一页了')
			}
			
			
			
		},
		last(){
			let that = this;
			if(this.page != 1){
				this.page = this.page - 1;
				this.loadData();
				this.loadDataNext();
			}else{
				that.$api.msg('已经是第一页了')
			}
			
		}
	}
};
</script>

<style lang="scss">
page {
	min-height: 100%;
	background-color: #ffffff;
	.container {
		width: 100%;
	}
}
.list-box{
	width: 100%;
	padding: 50rpx 41rpx;
	padding-top: 80rpx !important;
	background-color: #5771DF;
	position: relative;
	.list-title{
		position: absolute;
		top: 80rpx;
		color: #FFFFFF;
		left: 40%;
		font-size: 36rpx;
	}
	.list-tpl{
		background-color: #FFFFFF;
		width: 314rpx;
		height: 168rpx;
		text-align: center;
		padding-top:40rpx;
		border-radius: 15rpx;
		.num{
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
			padding-bottom: 15rpx;
		}
		.name{
			font-size: 26rpx;
			font-weight: 500;
			color: #999999;
		}
	}
}
.list-cell{
		padding: 40rpx 30rpx;
		.cell-name{
			padding: 40rpx 0;
			.title {
				text-align: center;
				width: 40%;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
			.title-box{
				width: 60%;
				.title {
					text-align: center;
					width: 33%;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}
		}
		.cell-box{
			margin-bottom: 94rpx;
			.cell-tit{
				width: 40%;
				image{
					width: 80rpx;
					height: 80rpx;
					border-radius: 100%;
				}
				.tit-box{
					padding-left: 15rpx;
					width: 70%;
					.tit-tpl{
						font-size: 30rpx;
						font-weight: 500;
						color: #333333;
					}
					.tit-tip{
						font-size: 24rpx;
						font-weight: 500;
						color: #999999;
						padding-top: 20rpx;
					}
				}
			}
			.num-box{
				width: 60%;
				.num{
					width: 33%;
					text-align: center;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
				.date{
					width: 33%;
					padding-left: 10rpx;
					text-align: left;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}
		}
	}
.empty-box{
	margin-top: 60rpx;
	width: 100%;
	height: 500rpx;
}
.nav{
	.next{
		margin: 40rpx;
		width: 50%;
		background-color: #5771DF;
		color: #FFFFFF;
		text-align: center;
		padding:10rpx 0rpx;
		border-radius: 50rpx;
	}
}
</style>