Onlife/pages/mymoney/moneyDetail.vue

<template>
	<view class="money_detail">
		<!-- <picker :value="selectType" :range="selectData" @change="selectTypeChange" style="height: 60rpx;line-height: 60rpx;margin-bottom: 20rpx;">
			<view style="color: #000;background: #fff;">目前選擇：{{ selectData[selectType] }}</view>
		</picker> -->
		<scroll-view scroll-y="true" class="" style="height: calc(100% - 80rpx);" @scrolltolower="loadMore">
			<view v-if="swiperList.length == 0" style="text-align: center; width: 50%;margin: 20rpx auto;color: #fff;">
				<view>暫無數據</view>
			</view>
			<view class="each_content" v-for="(item, index) in swiperList" :key="item.id">
				<view class="each_content_left">
					<view class="header_money">
						<view class="text-green" v-if="item.to == userMoneyAdress">
							<text class=" "></text>
							<text class="">{{ "+ " + (item.value / 10 ** 18).toFixed(8) + " " + selectData[selectType] }}</text>
						</view>
						<view class="text-red" v-else>
							<text class=" "></text>
							<text v-if="item.value == 0 && item.functionName">{{ "- " + (Number(item.gasUsed) * (Number(item.gasPrice) / 1e18)).toFixed(8) + " " + selectData[selectType] }}</text>
							<text v-else>{{ "- " + (item.value / 10 ** 18).toFixed(8) + " " + selectData[selectType] }}</text>
						</view>
					</view>
					<view class="content_adress">
						<view class="text-gray">
							收款地址:{{ adressOptions(item.to) }}
						</view>
						<view class="margin-top-lg">
							<image @click="fuzhi(item.to)" src="/static/fizhi.png" style="width: 35rpx;height: 35rpx;">
							</image>
						</view>
					</view>
					<view class="content_adress">
						<view class="text-gray">
							付款地址:{{ adressOptions(item.from) }}
						</view>
						<view class="margin-top-lg">
							<image @click="fuzhi(item.from)" src="/static/fizhi.png"
								style="width: 35rpx;height: 35rpx;"></image>
						</view>
					</view>
				</view>
				<view class="each_content_right">
					<view class="timeBtn">
						{{ timeOptions(item.timeStamp * 1000) }}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { _coinlist, _userInfos } from "@/request/api.js"
export default {
	data() {
		return {
			selectData:['USDT','BNB','ETH','BTC'],
			selectType: '0',
			contractaddress:"0x55d398326f99059fF775485246999027B3197955",
			userinfo: {},
			swiperList: [],
			userMoneyAdress: "",
			page: 1,
			offset: 10,
			isLoading: false,
			hasMore: true
		}
	},
	mounted() {
		this.getUserInfos();
	},
	methods: {
		adressOptions(data) {
			let start = data.substring(0, 10);
			let end = data.substring(data.length - 4);
			let middle = "…";
			let finalString = start + middle + end;
			return finalString
		},
		async getUserInfos() {
			let res = await _userInfos();
			if (res.code === 1) {
				this.userinfo = res.data.userinfo;
				this.userMoneyAdress = res.data.userinfo.wallet.address;
				this.userMoneyAdress = this.userMoneyAdress.toLowerCase();
				this.getCoinlist();
			}
		},
		selectTypeChange(selObj){
			this.selectType = selObj.detail.value;
			this.isLoading = false;
			this.hasMore = true;
			this.swiperList = [];
			this.contractaddress = "";
			switch(this.selectData[this.selectType]){
			    case 'USDT':
			        this.contractaddress = '0x55d398326f99059fF775485246999027B3197955';
					this.getCoinlist();
			        break;
			    case 'BNB':
			        this.contractaddress = '';
					this.getCoinlist();
			        break;
			    case 'ETH':
			        this.contractaddress = '0x2170ed0880ac9a755fd29b2688956bd959f933f8';
					this.getCoinlist();
			        break;
			    case 'BTC':
			        this.contractaddress = '0x7130d2a12b9bcbfae4f2634d864a1ee1ce3ead9c';
					this.getCoinlist();
			        break;
			}
		},
		getCoinlist() {
			if (this.isLoading || !this.hasMore) return;
			this.isLoading = true;
			uni.showLoading({
				mask:true,
				title: "載入中..."
			})
			let _that = this;
			let params = {
			    module: 'account',
			    apikey: '1UQ3PHID4UJUDTVD4EJK35PZB8XDKS7K9T',
			    sort: 'desc',
			    address: _that.userMoneyAdress,
				page: _that.page,
				offset: _that.offset,
			}; 
			if (_that.contractaddress && _that.contractaddress != '') {
			    params.action = 'tokentx';
			    params.contractaddress = _that.contractaddress;
			} else {
			    params.action = 'txlist';
			}
			uni.request({
				url:'https://api.bscscan.com/api',
				data: params,
				success(res) {
					if(res.data.status == 1){
						const newData = res.data.result;
						if (newData.length < _that.offset) {
							_that.hasMore = false;
						}
						if (_that.page === 1) {
							_that.swiperList = newData;
						} else {
							_that.swiperList = [..._that.swiperList, ...newData];
						}
					}
				},
				fail(err) {
					console.log(err,'err');
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				},
				complete() {
					_that.isLoading = false;
					uni.hideLoading();
				}
			})
		},
		loadMore() {
			if (this.hasMore && !this.isLoading) {
				this.page += 1;
				this.getCoinlist();
			}
		},
		timeOptions(timestamp) {
			const date = new Date(timestamp);
			const year = date.getFullYear();
			const month = (date.getMonth() + 1).toString().padStart(2, '0');
			const day = date.getDate().toString().padStart(2, '0');
			const hours = date.getHours().toString().padStart(2, '0');
			const minutes = date.getMinutes().toString().padStart(2, '0');
			const seconds = date.getSeconds().toString().padStart(2, '0');
			return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
		},
		fuzhi(e) {
			uni.setClipboardData({
				data: e,
				success: function () {
					uni.showToast({
						title: '複製成功'
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.money_detail {
	width: 100vw;
	height: 100vh;
	background: #000033;
	padding: 20rpx;
	box-sizing: border-box;

	.each_content {
		height: 180rpx;
		background-color: #4c5188;
		border-radius: 20rpx;
		display: flex;
		padding: 20rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
		color: #fff;

		.header_money {
			height: calc(100% / 3);
			display: flex;
			align-items: center;

			.text-green {
				color: #3eb93b;
				font-weight: 700;
			}

			.text-red {
				color: #e54d42;
				font-weight: 700;
			}
		}

		.footer_shouy {
			width: 60%;
			text-align: center;
			color: #0081ff;
			border: 1px solid skyblue;
			border-radius: 30rpx;
			font-weight: 700;
			font-size: 30rpx;
			line-height: 50rpx;
		}

		.content_adress {
			display: flex;
			align-items: center;
			height: calc(100% / 3);

			.text-gray {
				width: calc(92% - 35rpx);
				font-size: 25rpx;
			}
		}

		.each_content_left {
			width: 60%;
			height: 100%;
		}

		.each_content_right {
			width: 40%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			.timeBtn {
				background: linear-gradient(to right, #8f8f8f, #3e3e3e);
				font-size: 25rpx;
				border-radius: 40rpx;
				color: #fff;
				height: 75rpx;
				width: 90%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
}
</style>