kunpeng/pages/calculation/index.vue

<template>
	<view class="container">
		<view class="list-box">
			<view class="list flex">
				<view class="list-tpls">
					<view class="tpls-num">{{list.all}}T</view>
					<view class="tpls-name">总算力</view>
				</view>
				<view class="level-box">
					<image src="../../static/img/img28.png"></image>
					<view class="level">V{{level}}</view>
				</view>
			</view>
			<view class="list-item flex">
				<view class="item-tpl">
					<view class="tpl name">已P好</view>
					<view class="tpl num">{{list.doing}}T</view>
				</view>
				<view class="item-tpl">
					<view class="tpl name">P盘中</view>
					<view class="tpl num">{{list.stand}}T</view>
				</view>
			</view>
			<view class="list-item">
				<view class="item-tpl tols">
					<view class="tpl name">累计挖币</view>
					<view class="tpl num">{{list.all_mining}}XCH</view>
				</view>
				<!-- <view class="item-tpl">
					<view class="tpl name">当前锁仓</view>
					<view class="tpl num">{{list.all_lock}}FIL</view>
				</view> -->
			</view>
			<view class="submit-box flex">
				<view class="submit" @click="navTo('/pages/calculation/myCalculation')">我的算力</view>
				<view class="submit" @click="navTo('/pages/calculation/buyCalculation')">购买算力</view>
			</view>
		</view>
		<image @click="navTo('/pages/calculation/computer')"  class="logo-img" src="../../static/img/img34.png"></image>
		<!-- <view class="item-box">
			<view class="item-tile flex_item">
				<image src="../../static/img/img02.png"></image>
				<view class="title">f0111469/存储0.0TB</view>
			</view>
			<view class="item-list flex">
				<view class="tpl-box">
					<view class="flex tpl">
						<view class="name">今日挖币</view>
						<image src="../../static/img/img03.png"></image>
					</view>
					<view class="list-tip">0.0FIL</view>
				</view>
				<view class="tpl-box">
					<view class="flex tpl">
						<view class="name">挖矿到期</view>
						<image src="../../static/img/img03.png"></image>
					</view>
					<view class="list-tip">0.0FIL</view>
				</view>
				<view class="tpl-box">
					<view class="flex tpl">
						<view class="name">销售奖励</view>
						<image src="../../static/img/img03.png"></image>
					</view>
					<view class="list-tip">0.0FIL</view>
				</view>
			</view>
			<view class="item-list flex">
				<view class="tpl-box">
					<view class="flex tpl">
						<view class="name">挖币奖励</view>
						<image src="../../static/img/img03.png"></image>
					</view>
					<view class="list-tip">0.0FIL</view>
				</view>
				<view class="tpl-box">
					<view class="flex tpl">
						<view class="name">已释放FIL</view>
						<image src="../../static/img/img03.png"></image>
					</view>
					<view class="list-tip">0.0FIL</view>
				</view>
				<view class="tpl-box">
					<view class="flex tpl">
						<view class="name">锁仓FIL</view>
						<image src="../../static/img/img03.png"></image>
					</view>
					<view class="list-tip">0.0FIL</view>
				</view>
			</view>
		</view> -->
	</view>
</template>
<script>
import { mining,miningIndex } from '@/api/calculation.js';
export default {
	data() {
		return {
			list:'',
			level:'',
		};
	},
	onLoad(option){
		let userInfo = uni.getStorageSync('userInfo') || '';
		this.level = userInfo.level;
		this.loadData();
	},
	onShow() {
		let userInfo = uni.getStorageSync('userInfo') || '';
		this.level = userInfo.level;
		this.loadData();
	},
	//下拉刷新
	onPullDownRefresh() {
		this.loadData();
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		// 请求载入数据
		async loadData() {
			let obj = this;
			miningIndex({}).then(({ data }) => {
				obj.list = data;
			});
		},
		/**
		 * 统一跳转接口,拦截未登录路由
		 * navigator标签现在默认没有转场动画，所以用view
		 */
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
	}
};
</script>

<style lang="scss">
page {
	min-height: 100%;
	background-color: #ffffff;
	.container {
		width: 100%;
		padding: 20rpx 40rpx;
		
	}
}
.list-box{
	padding:30rpx 25rpx;
	background-image: url(../../static/img/img42.png);
	background-size: 100% 100%;
	.list{
		padding:30rpx 0rpx;
		margin-bottom: 40rpx !important;
		.list-tpls{
			.tpls-num{
				font-weight: bold;
				color: #333333;
				font-size: 40rpx;
				padding-bottom: 30rpx;
			}
		}
		.level-box{
			position: relative;
			image{
				width: 128rpx;
				height:45rpx;
			}
			.level{
				position: absolute;
				top: 12rpx;
				left: 62rpx;
				font-size: 24rpx;
				color: #826740;
				font-weight: bold;
			}
		}
	}
	.list-item{
		// padding: 90rpx 118rpx 0 118rpx;
		margin-bottom: 15rpx;
		.item-tpl{
			text-align: center;
			background-color: #FFFFFF;
			padding: 41rpx 0;
			width: 48%;
			.name{
				color: #666666;
				font-size: 24rpx;
			}
			.num{
				font-size: 32rpx;
				color: #333333;
				font-weight: bold;
				padding-top: 10rpx;
			}
		}
	}
	.tols{
		width: 100% !important;
		
	}
	.submit-box{
		margin-top: 50rpx;
		.submit{
			background-color: #5771DF;
			color: #FFFFFF;
			font-size: 30rpx;
			padding: 25rpx 0;
			width: 40%;
			text-align: center;
			border-radius: 50rpx;
		}
	}
}
.logo-img{
	width: 100%;
	height: 208rpx;
	margin: 40rpx 0rpx;
}
.item-box{
	padding: 15rpx 25rpx;
	.item-tile{
		padding-bottom: 80rpx;
		.title{
			padding-left: 15rpx;
			font-weight: bold;
			color: #333333;
			font-size: 30rpx;
		}
		image{
			width: 44rpx;
			height: 44rpx;
		}
	}
	.item-list{
		padding-bottom: 67rpx;
		.tpl-box{
			.tpl{
				.name{
					color: #666666;
					font-size: 24rpx;
					padding-right: 10rpx;
					padding-bottom: 15rpx;
				}
				image{
					width: 25rpx;
					height: 25rpx;
				}
			}
			.list-tip{
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
			}
		}
	}
}
</style>