kunpeng/pages/finance/allMiner.vue

<template>
	<view class="container">
		<view class="info-box">
			
			
			<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.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.wait_mining}}T</view>
						<view class="num clamp">{{ls.mining}}T</view>
						<view class="level">V{{ls.level}}</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>
	</view>
</template>

<script>
import { miner } from '@/api/finance.js';
import empty from '@/components/empty';
export default {
	components: {
		empty
	},
	data() {
		return {
			loadingType: 'more',
			data:'',
			list:'',
			page: 1,
			limit: 5,
			isLast: true,
		};
	},
	onLoad(option){
		this.loadData("add");
	},
	onShow() {
	},
	methods: {
		// 请求载入数据
		async loadData() {
			let obj = this;
			// if (type === 'add'){
			// 	if (obj.loadingType === 'nomore'){
			// 		return;
			// 	}
			// 	obj.loadingType = 'loading';
			// }else {
			// 	obj.loadingType = 'more';
			// }
			
			miner({
				page: obj.page,
				limit: obj.limit,
				
			}).then(({ data }) => {
				console.log(data);
				obj.data = data;
				obj.list = data.list;
			});
		},
		async loadDataNext() {
			let obj = this;
			console.log(obj.page)
			miner({
				page: obj.page + 1,
				limit: obj.limit,
				
			}).then(({ data }) => {
				if(data.list.length === 0){
					obj.isLast = false;
				}else{
					obj.isLast = true;
				}
			});
		},
		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%;
		}
	}
	.info-box{
		
		.info-name{
			padding: 40rpx 0rpx;
			.info-cell{
				width: 33.33%;
				text-align: center;
				.cell{
					font-size: 38rpx;
					font-weight: bold;
					color: #333333;
				}
				.cell-title{
					font-size: 26rpx;
					font-weight: 500;
					color: #999999;
					padding-top: 20rpx;
				}
			}
		}
		.list-cell{
			padding: 10rpx 25rpx;
			.cell-name{
				padding:50rpx 50rpx;
				.title-box{
					width: 60%;
				}
			}
			.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.33%;
						text-align: center;
					}
					.level{
						background-color: #FED82F;
						border-radius: 25rpx;
						padding: 8rpx 50rpx;
						font-size: 26rpx;
					}
				}
			}
		}
	}
	.empty-box{
		margin-top: 60rpx;
		width: 100%;
		height: 500rpx;
	}
	.nav{
		position: fixed;
		bottom: 50rpx;
		left: 0;
		right: 0;
		width: 100%;
		.next{
			margin: 40rpx;
			width: 50%;
			background-color: #5771DF;
			color: #FFFFFF;
			text-align: center;
			padding:10rpx 0rpx;
			border-radius: 50rpx;
		}
	}
</style>