yunshan/pages/calculation/computer.vue

<template>
	<view class="container">
		<view class="list-cell">
			<view class="list-name">有效算力</view>
			<view class="list-tpl flex">
				<view class="tip"><input type="number" v-model="num" placeholder="请输入有效算力"></view>
				<view class="tpl">T</view>
			</view>
		</view>
		<view class="list-cell">
			<view class="list-name">XCH价格</view>
			<view class="list-tpl flex">
				<view class="tip">{{list.fli_usdt}}</view>
				<view class="tpl">USDT</view>
			</view>
		</view><view class="list-cell">
			<view class="list-name">算力单价</view>
			<view class="list-tpl flex">
				<view class="tip">{{list.machine_price}}</view>
				<view class="tpl">{{list.machine_price_type}}</view>
			</view>
		</view><view class="list-cell">
			<view class="list-name">算力收益</view>
			<view class="list-tpl flex">
				<view class="tip">{{list.machine_get}}</view>
				<view class="tpl">XCH/T</view>
			</view>
		</view><view class="list-cell">
			<view class="list-name">合约周期</view>
			<view class="list-tpl flex">
				<view class="tip">{{list.time}}</view>
				<view class="tpl">天</view>
			</view>
		</view>
		<view class="submit-box">
			<view class="submit" @click="jisuan">计算收益</view>
		</view>
		<view class="tips">计算结果仅供参考，具体以实际交易为准。</view>
		<view class="jisuan-box" v-show="infoShow == true">
			<view class="flex jisuan">
				<view>投入资金</view>
				<view>{{moeny}}</view>
			</view>
			<view class="flex jisuan">
				<view>有效算力</view>
				<view>{{suanli}}</view>
			</view>
			<view class="flex jisuan">
				<view>回本期</view>
				<view>{{huiben}}</view>
			</view>
			<view class="flex jisuan">
				<view>算力年华收益率</view>
				<view>{{year}}</view>
			</view>
			<view class="flex jisuan">
				<view>每月产币</view>
				<view>{{month}}</view>
			</view>
		</view>
	</view>
</template>
<script>
import { calculator } from '@/api/calculation.js';
export default {
	data() {
		return {
			list:'',
			num:'',
			moeny:'',
			suanli:'',
			huiben:'',
			year:'',
			month:'',
			infoShow:false
		};
	},
	onLoad(option){
		this.loadData();
	},
	onShow() {
		
	},
	methods: {
		async loadData(){
			let obj = this;
			calculator({}).then(({ data }) => {
				obj.list = data;
			});
		},
		jisuan(){
			if(this.num < 0 || this.num ==''){
				this.$api.msg('请输入大于或等于1的有效算力！');
				return;
			}
			this.moeny = (this.list.machine_price)*(this.num);
			this.suanli = this.num;
			this.huiben = (this.list.get_back)*(this.num);
			this.year = (this.list.year_get)*(this.num);
			this.month = (this.list.month_back)*(this.num);
			this.infoShow = true;
		},
	}
};
</script>

<style lang="scss">
page {
	min-height: 100%;
	background-color: #ffffff;
	.container {
		width: 100%;
		padding: 20rpx 50rpx;
		
	}
}
.list-cell{
	font-size: 28rpx;
	font-weight: bold;
	color: #333333;
	padding: 0rpx 32rpx;
	padding-top: 50rpx;
	.list-tpl{
		padding-top: 50rpx;
	}
}
.submit-box{
		padding: 54rpx 50rpx;
		.submit{
			background-color: #5771DF;
			color: #FFFFFF;
			font-size: 30rpx;
			padding: 26rpx 0rpx;
			border-radius: 50rpx;
			text-align: center;
		}
	}
	.tips{
		color: #FB3A2F;
		font-size: 24rpx;
		font-weight: 500;
	}
	.jisuan-box{
		margin: 80rpx 0rpx;
		.jisuan{
			padding-bottom: 50rpx;
			font-size: 26rpx;
		}
	}
</style>