BCMM/pages/user/fhlist.vue

<template>
	<view class="content">			
		<view class="wrap fhlist" >
			<view class="title flex">節點詳情 </view>
			<view class="fhbox flex">
				<view class="flex boxnum">
					今日加權 <p class="p">{{fhNums.jinri}}VGT</p>
				</view>
				<view class="fg"></view>
				<view class="flex boxnum">
					總加權 <p class="p">{{fhNums.zong}}VGT</p>
				</view>
			</view>
			<view class="mylist">
				<view class="Listbox">
					<view class="listTop flex"  >
						<p style="width: 30%;">地址</p>
						<p style="width: 30%;">金額</p>
						<p style="width: 40%;">時間</p>
					</view>
					<view class="listrow" v-if="lists.length>0">
						<view class="rowli flex" v-for="(items,indexs) in lists" :key="indexs">
							<p style="width: 30%;color: #2F80ED;" >{{items.walletAddress}}</p>
					     	<p style="width: 30%;" >{{items.money}}</p>						
							<p style="width: 40%;" >{{items.shijian}}</p>
							</view>
						<uni-load-more :status="status" :icon-size="14" :content-text="contentText"
							v-if="totalCount > 10" />
					</view>
					<view class="noMore" v-else>暫無數據</view>
				</view>
			</view>
		</view>
		<!-- <view class="noMore" v-else>暫無數據</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight:'',
				content:''	,
				fhNums:{},
				lists:[],
				type:'',
				status: 'more',//'上拉加載更多','加載中','沒有更多'
				contentText: {
					contentdown: '上拉加載更多',
					contentrefresh:'加載中',
					contentnomore:'沒有更多'
				 },
				page: '1',
				totalCount: '',//总条数
				
			}
		},
		computed: {
			i18n() {
				return this.$t('lang')
			}		
		},
		onLoad(option) {	
			this.type=option.type
			this.getList()			
	     //获取状态栏+导航栏的高度
			let _that = this;
			uni.getSystemInfo({
				success(e) {
					if (e.platform == "ios") {
						_that.statusBarHeight = e.statusBarHeight + 45;
					} else {
						_that.statusBarHeight = e.statusBarHeight + 50;
					}
				}
			})
		},
		//上拉加载更多,onReachBottom上拉触底函数
		onReachBottom() { 			
			if (this.totalCount > this.lists.length) {
				this.status = 'loading';
				setTimeout(() => {
					this.page++
					this.getList(); //执行的方法	
					
				}, 1000) //这里我是延迟一秒在加载方法有个loading效果，如果接口请求慢的话可以去掉
			} else { //停止加载
				this.status = 'noMore'
			}
		
		},
		
	
		methods: {           
			getList(){	
				let data={
						walletAddress:uni.getStorageSync('walletAddress'),
						cType:uni.getStorageSync('cType'),	
						type:this.type,
						page:this.page
				   	}
				this.$http.jiedianxq(data).then(res => {					
					var datas =res.data						
					if(datas.code == 200 ){							
						
						this.fhNums=datas.data
						this.totalCount = datas.data.list.total
						if (datas.data.list.total > 0) {
							const dataMap = datas.data.list.data
							this.lists = this.reload ? dataMap : this.lists.concat(dataMap);
							this.reload = false;
						} else {
							this.lists = [];
						}
						if (this.totalCount == this.lists.length) {
							this.reload = false;
							this.status = 'noMore'
						}
					}else{					
						uni.showToast({
							title:datas.msg,
							icon:'none',
				 		})
					}
				 }).catch(err => {						
					uni.showToast({
						title:err,
						icon:'none',
					})
				 })			
			},
			back(){
				uni.navigateBack()
			}
		
		},
	
	}
</script>

<style scoped lang="scss">
	.fhlist{
		 padding-top: 100rpx;
		 .title{
			 color: #000;
			 font-size: 36rpx;
			 margin-left: 10rpx;
			 align-items: flex-end;
			 .p{
				 color: #333;
				 font-size: 24rpx;
				 margin-left: 12rpx;
			 }
		 }
		 .fhbox{
			width:94%; 
			background-color: #fff;
			padding: 32rpx 3%;
			margin-top:24rpx ;
			justify-content: space-around;
			.fg{
				height: 52rpx;
				width: 1rpx;
				background-color: #333;
			}
			.boxnum{
				width: 40%;
				font-size: 24rpx;
				color: #333333;
				.p{
					font-size: 36rpx;
					font-weight: bold;
					margin-left: 10rpx;
				}
			}
		 }
		 .mylist{
			 background-color: #fff;
			 border-radius: 20rpx;
			 padding: 24rpx 0;	
			 margin: 40rpx 0;		 }
		 .Listbox{
			margin: 0 24rpx; 								
			.listTop{
				padding: 20rpx 0;
				border-bottom: 1rpx solid #DCE1F6;
				font-size: 28rpx;
				color: #828282;
				text-align: center;
				
			}
			.listrow{
				margin: 20rpx 0;
				.rowli{
					padding-bottom: 48rpx;
					font-size: 28rpx;
					color: #4F4F4F;
					text-align: center;
					flex-wrap:wrap;
					.yuyin{
						margin-top:20rpx ;
						padding: 10rpx 20rpx;
						font-size: 28rpx;
						color: #828282;
					}
				}
			}
		 }
		 
	}
	
	.leakagebox{
		position: relative;
		font-size: 28rpx;
		color: #333;
		line-height: 80rpx;
	
	}
	.mallList{
	
		margin-top: 40rpx;
	    flex-wrap: wrap;
		.listli{
			width: 41%;
			padding:30rpx 24rpx;
			// border-radius: 8rpx;
			// background-color: #fff;
			// box-shadow: 0px 1px 5px 0px #C9D9F199;
			margin-bottom: 30rpx;
			margin-right: 28rpx;
			
		}
			.listli:nth-child(2n){
				margin-right: 0;
			}
		.rows {
			background-color: #fff;
			border-radius: 20rpx;
			//padding: 32rpx 0;
		
		
			.title {
				margin-bottom: 20rpx;		
				.titfl {
					color: #333333;
					font-size: 32rpx;
					font-weight: 700;
					.typeTips{
						width: 20rpx;
						height: 20rpx;
						border-radius: 50rpx;
						margin-left: 20rpx;
					}
					.red{
						background-color: red;
					}
					.green{
						background-color: #14C670;
					}
				}
		
				.price {
					color: #F5A94F;
				}
		
			}
		
			.listimg {
				width: 48rpx;
				height: 48rpx;
				margin-right: 10rpx;
			}
		
			.iconimg {
				width: 36rpx;
				height: 36rpx;
			}
		
			.rowsfl {
				font-size: 28rpx;		
				.times {
					margin-bottom: 24rpx;
					color: #828282;		
					span {
						color: #333333;
					}
				}
			}
		
			.rowsfr {
				background: linear-gradient(90.89deg, #38F957 49.57%, #1DEEE1 99.24%);
				width: 80%;
				height: 64rpx;
				text-align: center;
				line-height: 64rpx;
				color: #040616;
				font-size: 28rpx;
				border-radius: 8rpx;
		        margin-left: 10%;
				margin-top: 12rpx;
			}
		}
	}

</style>