NFT/pages/index/node.vue

<template>
	<view class="center">
		<scroll-view class="box" scroll-y="true" >
			<view class="bg">
				<image src="../../static/img/rengou.png" mode=""></image>
			</view>
			<view class="rengou">
					1、每份投资{{list.buy_price*1}}U，有效直推3人<br>
					2、49份组成一个社区节点<br>
					3、总节点合伙人1024名，每期49人，分21期招募
			</view>
			<view class="quanyi">
					1、赠送1T FiL矿机1080天标准产币收益，技术服务费30% <br>
					2、赠送LALA积分通证10万枚，每天1%释放。LALA上交易所前每天1%上涨，总100天<br>
					3、享受LALA门票50%合伙人加权分红(扣除销毁后的门票，门票销毁按照市场情况动态调整，系数在10~50%之间)。<br>
					4、享受项目总50%的股权加权分红(包括门票、手续费等)。<br>
					5、享受LALA社区会员A2级别权益。<br>
					6、赠送LALA NFT创世勋章一枚。
			</view>
			<view class="rule">
					1、LALA NFT平台节点合伙人共分21期，即21个主节点。<br>
					2、LALA节点每期认购满额后，自然开启第2期节点认购。直至21个节点认购满结束。<br>
					3、个人可以一次多份参与认购，也可参与多个节点认购，每份节点认购享受的权益相同。<br>
			</view>
			<view class="jiedian">
				<view class="mun">
					{{mun}}
				</view>
				<view class="font">
					认购份数
				</view>
				<view class="jdt">
					<u-line-progress :show-percent="false" inactive-color="#BBBBBB" active-color="#29F3FD" :percent="zuiduo"></u-line-progress>
				</view>
				<view class="yue-num">
					仅剩{{ shen }}份，总共{{ all }}份
				</view>
				
			</view>
			<view class="btn" @click="buy()">
				立即认购
			</view>
		</scroll-view>
		<u-popup v-model="show1" mode="center" width="548rpx" border-radius="14">
			<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>
		</u-popup>
	</view>
</template>
<script>
import { getPoint,buyPoint } from '@/api/set.js'
export default {
	data() {
		return {
			mun: 1,
			zuiduo:0,//剩余份数占总数的百分比
			shen:0,//还剩几份
			all:0,//总量
			id:'',
			list:'',
			show1: false, //支付密码
			password: '',
		}
	},
	onLoad() {
		this.loadData()
	},
	methods: {
		async loadData() {
			getPoint().then(({data}) => {
				console.log(data)
				this.list = data[0]
				this.shen = data[0].stock * 1
				this.zuiduo = (data[0].stock * 1 / data[0].all_stock) * 100
				// this.zuiduo = this.zuiduo.toFixed(2)
				this.all = data[0].all_stock*1
				this.id = data[0].id
			})
		},
		buy(){
			this.show1 = true
		},
		cancel() {
			this.password = '';
			this.show1 = false;
		},
		pswQd() {
			const obj = this
			buyPoint(
				{
					trade_psw: this.password,
					num: this.mun
				},
				this.id
			)
				.then(e => {
					this.password = '';
					this.show1 = false;
					this.$api.msg("购买节点成功");
				})
				.catch(e => {
					this.password = '';
					this.show1 = false;
					console.log(e);
				});
		},
	}
}
</script>
<style lang="scss">
page {
	height: 100%;
}

.center {
	height: 0;
	min-height: 100%;
}
.box {
	position: relative;
	width: 100%;
	height: 100%;
	.bg {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		width: 100%;
		height: 3456rpx;
		image {
			width: 100%;
			height: 3456rpx;
		}
	}
	.rengou {
		position: relative;
		z-index: 10;
		padding-top: 1120rpx;
		margin: 0 auto;
		width: 460rpx;
		font-size: 24rpx;
		line-height: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		height: 1260rpx;
	}
	.quanyi {
		position: relative;
		z-index: 10;
		// padding-top: 254rpx;
		// margin: 0 auto;
		margin: 240rpx auto 0;
		width: 460rpx;
		font-size: 24rpx;
		line-height: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		height: 420rpx;
	}
	.rule {
		position: relative;
		z-index: 10;
		// padding-top: 264rpx;
		// margin: 0 auto;
		margin: 264rpx auto 0;
		width: 460rpx;
		font-size: 24rpx;
		line-height: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		height: 252rpx;
	}
	.jiedian {
		text-align: center;
		position: relative;
		z-index: 10;
		// padding-top: 280rpx;
		// margin: 0 auto;
		margin: 300rpx auto 0;
		width: 460rpx;
		color: #FFFFFF;
		height: 206rpx;
		line-height: 1;
		.mun {
			font-size: 50rpx;
			font-family: PingFang SC;
			font-weight: bold;
		}
		.font {
			margin-top: 10rpx;
		}
		.jdt {
			// padding: 20rpx;
			margin: 20rpx auto 0;
			width: 300rpx;
			height: auto;
		}
		.yue-num {
			font-size: 20rpx;
			color: #29F3FD;
			margin-top: 20rpx;
		}
	}
	.btn {
		position: relative;
		margin: 120rpx auto 0;
		z-index: 10;
		width: 514rpx;
		height: 80rpx;
		background: #29F3FD;
		border-radius: 40px;
		text-align: center;
		line-height: 80rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #051D38;
	}
}
.line {
	display: inline-block;
	padding-left: 20rpx;
}
.psw-wrapper {
	width: 548rpx;
	height: 344rpx;
	background-color: #ffffff;
	.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: #45969b;
	}
}
</style>