kunpeng/pages/calculation/details.vue

<template>
	<view class="container">
		<view class="list-box"></view>
		<view class="list">
			<view class="list-title">{{ list.name }}</view>
			<view class="flex list-item">
				<view class="item-name">价格</view>
				<view class="item-tpl">{{ list.cost_money * 1 }}{{ list._cost_money_type }}</view>
			</view>
			<view class="flex list-item" v-if="list.stand_money > 0">
				<view class="item-name">质押FIL数量(用户自行支付）</view>
				<view class="item-tpl">{{ list.stand_money * 1 }}</view>
			</view>
			<view class="flex list-item">
				<view class="item-name">托管运维费</view>
				<view class="item-tpl">{{ list.service_ratio }}%</view>
			</view>
			<view class="flex list-item">
				<view class="item-name">上架期</view>
				<view class="item-tpl">{{ list.stand_time }}天</view>
			</view>
			<!-- <view class="flex list-item">
				<view class="item-name">封装期</view>
				<view class="item-tpl">{{list.first_step_time}}</view>
			</view> -->
			<view class="flex list-item">
				<view class="item-name">合约期</view>
				<view class="item-tpl">{{ list.first_step_time + list.second_step_time + list.third_step_time }}天</view>
			</view>
			<!-- <view class="tpl" v-if="list.stand_money > 0">需完成应质押的FIL后，才能开始进入50天封装期</view> -->
			<view class="flex num-box">
				<view class="num-title">有效算力</view>
				<view class="step">{{ list.step * 1 }}T</view>
			</view>
			<view class="num-box flex">
				<view class="num-title">购买数量（1T）</view>
				<uni-number-box class="step" :value="num" :disabled="false" @eventChange="numberChange"></uni-number-box>
			</view>
			<view class="flex money-box">
				<view class="money-name">购买总数</view>
				<view class="money-num">{{ list.step * 1 * num}}T</view>
			</view>
			<view class="flex money-box">
				<view class="money-name">金额</view>
				<view class="money-num">{{ money * 1 }}{{ list._cost_money_type }}</view>
			</view>
			<view class="flex money-box">
				<view class="money-name">交易密码</view>
				<view class="money-num"><input class="input-box" type="password" v-model="password" placeholder="请输入交易密码" /></view>
			</view>
			<view class="pay-box">支付方式：{{ list._cost_money_type }}</view>
			<!-- <view class="list-title">IPFS独享算力包-1T</view> -->
			<view class="tips">说明：</view>
			<view class="explain"><rich-text :nodes="list.detail"></rich-text></view>
			<view class="check_box flex_item">
				<view><radio style="transform: scale(0.75)" @click="Getcheckbox" color="#6786FB" :checked="checked" /></view>
				<view class="">
					请阅读并同意
					<text @click="ToIndex">《矿机租赁协议》</text>
				</view>
			</view>
			<view class="submit-box">
				<view class="submit" @click="pay()">{{ type == 3 ? '立即质押' : '立即购买' }}</view>
			</view>
		</view>
	</view>
</template>
<script>
import { miningDateils, buyMining } from '@/api/calculation.js';
import uniNumberBox from '@/components/uni-number-box.vue';
export default {
	components: {
		uniNumberBox
	},
	data() {
		return {
			id: '',
			type: '',
			num: 1,
			step: 0,
			password: '',
			
			price: '',
			list: {
				
			},
			checked: false
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.type = option.type;
		this.loadData();
	},
	
	computed: {
		money() {
			return this.num * this.price *this.step ;
		}
	},
	onShow() {},
	methods: {
		async loadData() {
			let obj = this;
			miningDateils({}, obj.id).then(({ data }) => {
				obj.list = data;
				// obj.money = obj.list.cost_money;
				obj.price = obj.list.cost_money;
				obj.step = obj.list.step;
			});
		},
		//阅读并同意
		Getcheckbox() {
			let obj = this;
			obj.checked = !obj.checked;
		},
		ToIndex() {
			uni.navigateTo({
				url: '/pages/finance/xieyi'
			});
		},
		pay() {
			let obj = this;
			if (obj.password == '') {
				obj.$api.msg('请输入交易密码！');
				return;
			}
			if (obj.checked == false) {
				obj.$api.msg('请阅读并同意协议！');
				return;
			}
			buyMining(
				{
					num: obj.num * obj.step,
					trade_psw: obj.password
				},
				obj.id
			)
				.then(data => {
					obj.$api.msg(data.msg);
					obj.password = '';
					obj.num = 1;
				})
				.catch(e => {
					obj.password = '';
					obj.num = 1;
					if (e.msg == '交易密码错误') {
						return;
					}
					console.log(e);
					var reg = new RegExp('购买矿机所需的');
					if (e.msg.match(reg) == -1) {
					} else {
						setTimeout(function() {
							uni.navigateTo({
								url: '/pages/finance/recharge'
							});
						}, 1000);
					}
				});
		},
		numberChange(data) {
			let obj = this;
			obj.num = data.number;
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	min-height: 100%;
	background-color: #ffffff;
	.container {
		width: 100%;
	}
}
.list-box {
	background-color: #5771df;
	width: 100%;
	height: 200rpx;
}
.list {
	margin: 0rpx 31rpx;
	padding: 45rpx 35rpx;
	background-color: #ffffff;
	border-radius: 15rpx;
	position: relative;
	top: -100rpx;
	.list-title {
		font-size: 34rpx;
		font-weight: 500;
		color: #333333;
		padding-bottom: 35rpx;
	}
	.list-item {
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
		padding-bottom: 35rpx;
		.item-tpl {
			font-size: 24rpx;
			font-weight: bold;
			color: #333333;
		}
		.tpls {
			color: #faba38;
		}
	}
	.tpl {
		font-size: 26rpx;
		font-weight: 500;
		color: #faba38;
		padding-bottom: 98rpx;
	}
	.num-box {
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
		padding-bottom: 83rpx;
	}
	.money-box {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		padding-bottom: 102rpx;
		.money-num {
			font-weight: bold;
			.input-box {
				text-align: right;
			}
		}
	}
	.pay-box {
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		padding-bottom: 60rpx;
	}
	.tips {
		font-size: 26rpx;
		font-weight: 500;
		color: #5771df;
		padding-bottom: 25rpx;
	}
	.explain {
		word-wrap: break-word;
		font-size: 26rpx;
		font-weight: 500;
		color: #666666;
		line-height: 38rpx;
	}
}
.submit-box {
	.submit {
		background-color: #5771df;
		color: #ffffff;
		text-align: center;
		padding: 25rpx 0rpx;
		border-radius: 50rpx;
	}
}
.check_box {
	padding: 25rpx 25rpx;
	font-size: 28rpx;
	padding-bottom: 60rpx;
	text {
		color: #6786fb;
	}
}
</style>