BlockChainH5/pages/index/info.vue

<template>
	<view>
		<!-- 区块信息 -->
		<view class="info-back"></view>
		<view class="info-list">
			<view class="flex" v-for="(item, index) in assetsList" :key="index">
				<view class="item-name ellipsis">
					<image class="icon" :src="item.icon" mode="widthFix" />
					{{ item.name || '-' }}
				</view>
				<view class="item-label">
					<view class="number ellipsis">{{ item.balance || '0.00' }}</view>
					<view class="unit ellipsis">{{ item.symbol || '-' }}</view>
				</view>
			</view>
		</view>
		<!-- 区块链变化 -->
		<view class="movements">
			<view class="title">区块链变化</view>
			<view class="chart">
				<l-f2 ref="chartChange"></l-f2>
			</view>
		</view>
		<!-- 区块记录 -->
		<view class="chain-record">
			<view class="title">区块记录</view>
			<chain-list :list="chainList" @onChain="chainInfo"/>
		</view>
		<!-- 底部安全区 -->
		<view class="ios-bottom"></view>
	</view>
</template>

<script>
	import { chain, situation } from '@/apis/interfaces/chain'
	import chainList from '@/components/chain/chain'
	import F2 from '@/uni_modules/lime-f2/components/lime-f2/f2.min.js'
	import lF2 from '@/uni_modules/lime-f2/components/lime-f2/'
	export default {
		components: {
			chainList,
			lF2
		},
		data() {
			return {
				data: [{
					time: '2021-08-08 00:00:00',
					value: 30
				}, {
					time: '2021-08-09 00:10:00',
					value: 36
				}, {
					time: '2021-08-10 00:12:00',
					value: 38
				}, {
					time: '2021-08-11 10:32:00',
					value: 40
				}, {
					time: '2021-08-13 12:30:00',
					value: 40
				}, {
					time: '2021-08-14 11:02:00',
					value: 41
				}, {
					time: '2021-08-15 10:02:00',
					value: 41
				}],
				assetsList: [],
				chainList: []
			};
		},
		mounted() {
			Promise.all([chain(), situation()]).then(res => {
				this.chainList = res[0]
				this.assetsList = res[1].assets
			}).catch(err => {
				uni.showToast({
					icon: 'none',
					title: 'err in chain/info.vue ' + err
				})
			})
			this.$refs.chartChange.init(config => {
				const chart = new F2.Chart(config);
					chart.source(this.data, {
					time: {
						type: 'timeCat',
						tickCount: 3,
						range: [ 0, 1 ]
					},
					value: {
						tickCount: 5,
						min: 0
					}
				});
				chart.axis('time', {
					label: function label(text, index, total) {
						const textCfg = {};
						if (index === 0) {
						textCfg.textAlign = 'left';
						} else if (index === total - 1) {
						textCfg.textAlign = 'right';
						}
						return textCfg;
					}
				});
				chart.tooltip({
					showCrosshairs: true
				});
				chart.area()
					.position('time*value')
					.color('l(90) 0:#009b69 1:#f7f7f7')
					.shape('smooth');
					chart.line()
					.position('time*value')
					.color('l(90) 0:#009b69 1:#f7f7f7')
					.shape('smooth');
					chart.render();
				return chart;
			})
		},
		methods: {
			// 区块详情
			chainInfo(e){
				uni.navigateTo({
					url: './deal?hash=' + e.hash
				})
			}
		}
	}
</script>

<style lang="scss">
	// 背景
	.info-back {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100vw;
		height: 100vh;
		background: linear-gradient(to bottom, #009B69, #00562d);
	}

	// 区块信息
	.info-list {
		padding: 0 $padding;

		.flex {
			margin: $margin * 2 $margin/2;
			background-color: white;
			border-radius: $radius;
			padding: $padding * 2;
			box-shadow: 0 0 2rpx 2rpx rgba($color: #000000, $alpha: .02);
			display: flex;
			justify-content: space-between;

			.item-name {
				width: 50%;
				font-size: $title-size;

				.icon {
					width: 38rpx;
					height: 38rpx;
					vertical-align: middle;
					margin-bottom: 5rpx;
					margin-right: $margin;
				}
			}

			.item-label {
				width: 50%;
				padding-left: $padding;
				text-align: right;

				.number {
					font-weight: bold;
					font-size: $title-size;
				}

				.unit {
					font-size: $title-size-m;
				}
			}
		}
	}

	// 区块链信息
	.chain-record,
	.movements {
		padding: $padding;

		.title {
			font-weight: bold;
			text-align: center;
			color: white;
			font-size: $title-size;
			padding-bottom: $padding;
		}
	}

	.movements {
		.chart {
			background-color: white;
			margin: $margin/2;
			height: 350rpx;
			border-radius: $radius;
		}
	}
</style>