NFT/pages/market/pay.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">
				<view class="item-name">所需幸运值</view>
				<view class="item-tpl">{{ list.cost_times }}</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="flex list-item">
				<view class="item-name">电费</view>
				<view class="item-tpl">{{list.elect_fee|keept}}元/天</view>
			</view>
			<!-- <view class="tpl" v-if="list.stand_money > 0">需完成应质押的FIL后，才能开始进入50天封装期</view> -->
			<view class="num-box flex">
				<view class="num-title" v-if="list.get_money_type == 'BZZ'">购买数量（{{ list.step * 1 }}节点）</view>
				<view class="num-title" v-else>购买数量（{{ 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" v-if="list.get_money_type == 'BZZ'">{{ list.step * 1 * num}}节点</view>
				<view class="money-num" v-else>{{ 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="#60BAB0" :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 class="curtain" :class="{'ishiden':isHiden}" @touchmove.stop.prevent="moveHandle">
			<view class="psw-wrapper">
				<view class="psw-title">请输入支付密码</view>
				<input type="password" v-model="password" class="psw-ipt"/>
				<view class="psw-btn">
					<text @click="cancel">取消</text>
					<text class="psw-qd" @click="pswQd">确定</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { miningDateils, buyMining } from '@/api/market.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,
			isHiden: true
		};
	},
	filters: {
		Keept(value) {
			if(!value) {
				return '0.00'
			}
			value = Math.round(value* 100)/100;
			return value
		}
	},
	onLoad(option) {
		// this.list = JSON.parse(option.list)
		// console.log(this.list)
		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;
			}
			console.log()
			if (obj.list.cost_times > (obj.list.luck_point - obj.list.exchange_point)) {
				obj.$api.msg('所需荣誉值不足！');
				return;
			}
			//弹出输入交易密码
			this.isHiden = false
			// 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;
		},
		cancel() {
			this.password = ''
			this.isHiden = true
		},
		pswQd() {
			let obj = this;
			if( obj.password === '' ) {
				obj.$api.msg('请输入交易密码！');
				return
			}
			obj.isHiden = true
			
			
			buyMining(
				{
					num: obj.num * obj.step,
					trade_psw: obj.password
				},
				obj.id
			)
				.then(data => {
					obj.$api.msg(data.msg);
					obj.password = '';
					obj.num = 1;
					setTimeout(function() {
						uni.navigateTo({
							url: '/pages/market/myCalculation'
						});
					}, 1500);
				})
				.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'
							});
						}, 1500);
					}
				});
		},
		moveHandle() {}
	}
};
</script>

<style lang="scss" scoped>
page {
	min-height: 100%;
	background-color: #ffffff;
	.container {
		width: 100%;
	}
}
.list-box {
	background: linear-gradient(90deg, #60BAB0, #60BAB0, #45969B);
	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: 32rpx;
		font-weight: 500;
		color: #333333;
		padding-bottom: 60rpx;
	}
	.tips {
		font-size: 26rpx;
		font-weight: 500;
		color: #60BAB0;
		padding-bottom: 25rpx;
	}
	.explain {
		word-wrap: break-word;
		font-size: 26rpx;
		font-weight: 500;
		color: #666666;
		line-height: 38rpx;
	}
}
.submit-box {
	.submit {
		background-color: #60BAB0;
		color: #ffffff;
		text-align: center;
		padding: 25rpx 0rpx;
		border-radius: 50rpx;
	}
}
.check_box {
	padding: 25rpx 25rpx;
	font-size: 28rpx;
	padding-bottom: 60rpx;
	text {
		color: #60BAB0;
	}
}
.curtain {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	background-color: rgba($color: #000000, $alpha: 0.2);
	.psw-wrapper {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-100%);
		width: 548.6rpx;
		height: 344.4rpx;
		background-color: #FFFFFF;
		border-radius: 15rpx 15rpx;
		.psw-title {
			width: 100%;
			font-size: 35rpx;
			padding: 43rpx 0 49rpx;
			text-align: center;
			font-weight: 800;
		}
		.psw-ipt {
			display: block;
			background-color: #dce3ed;
			height: 90rpx;
			width: 464rpx;
			padding-left: 30rpx;
			margin: 0 auto;
			font-size: 80rpx;
		}
		.psw-btn text{
			display: inline-block;
			text-align: center;
			width: 50%;
			padding-top: 29rpx;
			font-size: 35rpx;
		}
		.psw-qd {
			color:#60BAB0;
		}
	}
}
.ishiden {
	display: none;
}
</style>