vgts/pages/my/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>
	import {
		createWeb3Modal,
		defaultWagmiConfig,
		useWeb3ModalState,
		useWeb3Modal
	} from '@web3modal/wagmi/vue'
	import {
		mainnet,
		arbitrum,
		optimism,
		bsc,
		polygon
	} from '@wagmi/core/chains'
	import {
		getAccount, //地址         
		writeContract,
		disconnect, //断开
		watchAccount,
		createConfig, //创建客户端
		configureChains, //配置链
		getNetwork, //获取链         
		getWalletClient,
		fetchToken,
		connect, //链接           
		watchContractEvent,
		watchNetwork,
		sendTransaction,
		signMessage,
		prepareSendTransaction
	} from '@wagmi/core'
	import {
		publicProvider
	} from '@wagmi/core/providers/public'
	import {
		InjectedConnector
	} from '@wagmi/core/connectors/injected'
	import {
		parseEther
	} from 'viem'
	const projectId = 'c46fe115e62fd8cc283e8db10b3a7fa7'
	// 2. Create wagmiConfig
	const metadata = {
		name: 'Web3Modal',
		description: 'Web3Modal Example',
		url: 'https://web3modal.com',
		icons: ['https://avatars.githubusercontent.com/u/37784886']
	}
	const chains = [bsc]
	const wagmiConfig = defaultWagmiConfig({
		chains,
		projectId,
		metadata
	})
	
	// 3. Create modal  
	const modal = createWeb3Modal({
		wagmiConfig,
		projectId,
		chains,
		optionalChains: [{
				chainId: 128,
				chainName: "HECO",
				nativeCurrency: {
					name: "HECO",
					symbol: "HT",
					decimals: 18,
				},
				rpcUrls: ["https://http-mainnet.hecochain.com/ "]
			},
			{
				chainId: 137,
				chainName: "MATIC",
				nativeCurrency: {
					name: "MATIC",
					symbol: "MATIC",
					decimals: 18,
				},
				rpcUrls: ["https://matic.mytokenpocket.vip/ "],
	
			}
		],
		defaultChain: bsc,
		tokens: {
			1: {
				address: '0xdac17f958d2ee523a2206206994597c13d831ec7',
				image: 'token_image_url' //optional ETH
			},
			56: {
				address: '0x55d398326f99059ff775485246999027b3197955',
				image: 'token_image_url' //optional BSC
			},
			137: {
				address: '0xc2132d05d31c914a87c6611c10748aeb04b58e8f',
				image: 'token_image_url' //optional  MATIC
			},
			128: {
				address: '0xa71edc38d189767582c38a3145b5873052c3e47a',
				image: 'token_image_url' //optional  HT
			}
		},
	
		//主题覆盖
		themeVariables: {
			'--w3m-accent': '#02cc66',
		},
		//主题亮，暗
		themeMode: 'light'
	
	})
	

	
	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>