yuebeilian-c/src/packages/user/fund/data-statistics.vue

<template>
	<view class="data-statistics-box">
		<Navbar title="数据统计" color="#333"></Navbar>
		<view class="content">
			<view class="bk"></view>
			<view class="info">
				<view class="top">
					<view class="name">绿通总量池</view>
					<view class="num">{{info.totalGold}}</view>
					<!-- <view class="tip" @click="toPage('')">查询区块链</view> -->
				</view>
				<view class="bottom">
					<view class="title">
						绿通兑换产品系数（1 : {{price}}）
					</view>
					<view class="box">
						<view class="item">
							<text>{{info.released}}</text>
							绿通释放池
						</view>
						<view class="item">
							<text>{{info.remained}}</text>
							绿通剩余释放池
						</view>
						<view class="item">
							<text>{{info.totalDestroyed}}</text>
							绿通总销毁值
						</view>
						<view class="item">
							<text>{{info.todayDestroyed}}</text>
							今日绿通销毁值
						</view>
						<view class="item">
							<text>{{info.allIntegral}}</text>
							全网已释放的绿值
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue
	} from 'vue-property-decorator';
	@Component({
		filters: {
			moneyFormat(val: any) {
				if (!+val) return '0.000000000000000000';
				return (+val).toFixed(18);
			}
		}
	})

	export default class DataStatistics extends Vue {
		info: any = {};
		price: any = 0;
		balanceInfo: any = {};

		onShow() {
			this.getInfo();
			this.getGoldPrice();
			// this.getBalance();
		}

		getInfo() {
			this.$http
				.get({
					url: this.$api.getDataSum
				})
				.then((res: any) => {
					this.info = res;
				}, (err: any) => {
					console.log(err);
				});
		}
		
		toPage(url: any, data: any = {}) {
			if (!url) {
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				})
				return;
			}
			this.$Router.push({
				path: url,
				query: data
			})
		}

		getGoldPrice() {
			this.$http
				.get({
					url: this.$api.getGoldPrice
				})
				.then((res: any) => {
					this.price = res.goldOfficialPrice;
				}, (err: any) => {
					console.log(err);
				});
		}
		getBalance() {
			this.$http
				.get({
					url: this.$api.getBalance
				})
				.then((res: any) => {
					this.balanceInfo = res;
				}, (err: any) => {
					console.log(err);
				});
		}
	}
</script>

<style lang="scss" scoped>
	.data-statistics-box {
		.content {
			@include flex-y();

			.bk {
				width: vw(800);
				height: vw(800);
				background: linear-gradient(90deg, rgba(24, 105, 171, 1) 0%, rgba(3, 86, 152, 1) 100%);
				border-radius: vw(300);
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: vw(-520);
			}

			.info {
				position: relative;
				z-index: 10;
				margin-top: vw(32);

				.top {
					@include flex-y();

					.name {
						@include word-vw(14, #fff);
					}

					.num {
						@include word-vw(24, #fff);
						margin-top: vw(8);
					}

					.tip {
						padding: 0 vw(10);
						height: vw(24);
						line-height: vw(24);
						box-sizing: border-box;
						background: rgba(255, 255, 255, 0.2);
						@include word-vw(14, #fff);
						border: vw(1) solid rgba(255, 255, 255, 0.5);
						border-radius: vw(12);
						margin-top: vw(16);
					}
				}

				.bottom {
					background: #fff;
					width: vw(355);
					border-radius: vw(10);
					margin-top: vw(32);
					overflow: hidden;

					.title {
						height: vw(36);
						line-height: vw(36);
						background: #F7F7F7;
						@include word-vw(12, #A8A8A8);
						text-align: center;
					}

					.box {
						@include flex-x();
						flex-wrap: wrap;

						.item {
							width: 100%;
							height: vw(100);
							@include flex-y(center);
							@include word-vw(14, #A8A8A8);

							text {
								@include word-vw(20, #333);
								font-weight: bold;
								margin-bottom: vw(5);
							}
						}
					}
				}
			}
		}
	}
</style>