lnyk/pages/calculation/details.vue

<template>
	<view class="container">
		<!-- 状态栏占位 -->
		<!-- <view class="status_bar"></view> -->
		<!-- <view class="topbar-box">
			<view class="topbar">
				<view class="topbar-left"><image src="../../static/img/img16.png" mode=""></image></view>
				<view class="topbar-center"></view>
				<view class="topbar-right"></view>
			</view>
		</view> -->
		<!-- 自定义导航栏 -->
		<!-- <uni-nav-bar left-icon="back" class="nav-bar" @clickLeft="back">
			<view class="topbar-center">
				<view :class="{ action: current === 0 }" @click="changeCurrent(0)">商品</view>
				<view :class="{ action: current === 1 }" @click="changeCurrent(1)">参数</view>
				<view :class="{ action: current === 2 }" @click="changeCurrent(2)">介绍</view>
			</view>
		</uni-nav-bar> -->
		<!-- <view class="list-box"></view> -->
		<view class="good-img">
			<image :src="list.logo"></image>
		</view>
		<view class="param-box">
			<view class="param-price">{{ list.cost_money * 1 }}{{ list._cost_money_type }}</view>
			<view class="param-name">{{ list.name }}</view>
			<view class="param-list">
					<view class="list-item">
						<view class="item-title">使用周期</view>
						<view class="item-val">{{ list.first_step_time + list.second_step_time + list.third_step_time }}天</view>
					</view>
					<view class="list-item">
						<view class="item-title">电费</view>
						<view class="item-val">{{list.elect_fee|keept}}元/天</view>
					</view>
					<view class="list-item">
						<view class="item-title">预计日产出</view>
						<view class="item-val">{{list._day_get}}</view>
					</view>
					<view class="list-item">
						<view class="item-title">算力</view>
						<view class="item-val">{{list.step}}TB</view>
					</view>
					<view class="list-item">
						<view class="item-title">管理费</view>
						<view class="item-val">{{ list.service_ratio }}%</view>
					</view>
					<view class="list-item">
						<view class="item-title">上架期</view>
						<view class="item-val">{{ list.stand_time }}天</view>
					</view>
			</view>
		</view>
		<view class="list">
			<view class="explain"><rich-text :nodes="list.detail"></rich-text></view>
		</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="list-title">IPFS独享算力包-1T</view> -->
		<!-- 产品说明 -->
		<!-- <view class="tips">说明：</view> -->

		<!-- <view class="explain"><rich-text :nodes="list.detail"></rich-text></view> -->
		<!-- <view class="num-box flex">
				<view class="num-title">购买数量（{{ list.step * 1 }}T）</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="pay-box">支付方式：{{ list._cost_money_type }}</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="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> -->
		<view class="submit-box">
			<view class="submit" @click="buy">{{ type == 3 ? '立即质押' : '立即购买' }}</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,
			current: 0
		};
	},
	filters: {
		Keept(value) {
			if(!value) {
				return '0.00'
			}
			value = Math.round(value* 100)/100;
			return value
		}
	},
	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;
				console.log(obj.list);
			});
		},
		//阅读并同意
		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;
		},
		buy() {
			// let list = JSON.stringify(this.list)
			uni.navigateTo({
				url: '/pages/calculation/pay?&id=' + this.id + '&type=' + this.type
			});
			// console.log(this.list,'--------------***********')
			// console.log('buy click')
		},
		changeCurrent(index) {
			this.current = index;
		},
		back() {
			uni.navigateBack({
				url: '/pages/calculation/buyCalculation'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	min-height: 100%;
	background-color: #ffffff;
	.container {
		width: 100%;
	}
}
.list-box {
	// background-color: #5771df;
	width: 100%;
	height: 100rpx;
}
.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: 32rpx;
		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;
		width: 662rpx;
		margin: 0 auto;
		padding-bottom: 141rpx;
	}
}
.submit-box {
	position: fixed;
	bottom: 0;
	padding: 25rpx 0;
	width: 100%;
	background-color: #fff;
	// border-top: 1px solid rgba(0,0,0,0.1);
	.submit {
		box-sizing: border-box;
		width: 662rpx;
		height: 91rpx;
		line-height: 91rpx;
		margin: 0 auto;
		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;
	}
}
.status_bar {
	position: fixed;
	top: 0;
	background-color: #ffffff;
	z-index: 999;
	height: var(--status-bar-height);
	width: 100%;
}
// .topbar-box {
// 	background-color: #bfa;
// 	height: 100rpx;
// 	width: 100%;
// 	position: fixed;
// 	top: var(--status-bar-height);
// 	.topbar {
// 		.topbar-left {

// 		}
// 		.topbar-center {

// 		}
// 		.topbar-right {

// 		}
// 	}
// }
.nav-bar {
	position: fixed;
	width: 100%;
	top: var(--status-bar-height);
	background-color: #fff;
	z-index: 999;
	.topbar-center {
		// width: 450rpx;
		height: 41px;
		margin: 0 auto;
		display: flex;
		justify-content: space-around;
		color: #9d989e;
		font-weight: bold;
		view {
			margin: 0 40rpx;
		}
		.action {
			color: #000;
			border-bottom: 3px #cc6551 solid;
		}
	}
}

.good-img {
	width: 330rpx;
	height: 330rpx;
	margin: 0 auto;
	image {
		width: 100%;
		height: 100%;
	}
}
.param-box {
	width: 660rpx;
	margin: 0 auto 20rpx;
	.param-price {
		font-size: 40rpx;
		font-weight: bold;
		color: #dc4423;
		padding: 34rpx 0;
	}
	.param-name {
		font-size: 32rpx;
		font-weight: bold;
		padding-bottom: 30rpx;
	}
	.param-list {
		box-sizing: border-box;
		background-color: #f7f8fc;
		color: #000;
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 24rpx;
		// margin: 0 19rpx;
		.list-item {
			width: 30%;
			padding: 5rpx 0 0 5rpx;
			// height: 122rpx;
			.item-title {
				font-size: 30rpx;
				padding: 20rpx 0;
				color: #8c8b90;
			}
			.item-val {
				font-size: 30rpx;
				font-weight: bold;
				padding-bottom: 14rpx;
			}
			
		}
	}
}
</style>