hx/pages/private/private.vue

<template>
	<view class="content">
		<top></top>
		<view class="main">
			<view class="record" @click="openRecord()">
				记
				<br />
				录
			</view>
			<image class="main-bg" src="../../static/img/sm-bg.png" mode=""></image>
			<view class="title">恒星私募</view>
			<view class="font">私募单价</view>
			<view class="num">{{ money }}{{ moneyType }}</view>
			<view class="tip-title">【私募相关】</view>
			<view class="tip">
				恒星是一个集“元宇宙+NFT卡牌+DeFi+养成/经营/竞技”的加密链上游戏，是一款基于Solidity语言开发的去中心化GameFi应用，首发BSC链，基于银河系元宇宙原型，打造了一个集抽取盲盒开卡牌，NFT交易，LP质押获得收益的链上元宇宙游戏，
				结合区块链的游戏内容，铸成有价值的TCG游戏。
			</view>
		</view>
		<view class="bottom">
			<image class="bottom-bg" src="../../static/img/bottom.png" mode=""></image>
			<view class="btn" @click="nav()">私募认购</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup-record">
				<view class="record-title">私募记录</view>
				<view class="xian"><image src="../../static/img/xian.png" mode=""></image></view>
				<scroll-view scroll-y="true" class="yj-info-scroll" @scrolltolower="list">
					<view class="record-main-title flex">
						<view class="item">认购金额</view>
						<view class="item">认购数量</view>
						<view class="item">认购时间</view>
					</view>
					<view class="record-main flex" v-for="(item, index) in activity">
						<view class="item">{{ item.number * 1 }}{{ item.token }}</view>
						<view class="item">{{ item.get_num * 1 }}{{ item.get_token }}</view>
						<view class="item">{{ item.createtime }}</view>
					</view>
					<uni-load-more :status="loadingType"></uni-load-more>
				</scroll-view>
			</view>
			<view class="popup-x" @click="closeRecord()"><image src="../../static/img/x.png" mode=""></image></view>
		</uni-popup>
		<uni-popup ref="popup1" type="center">
			<view class="popup-buy">
				<view class="record-title ">私募认购</view>
				<view class="xian"><image src="../../static/img/xian.png" mode=""></image></view>
				<view class="buy-num">
					<view class="shu"></view>
					<view class="num-font">
						私募单价：
						<text>{{ money }}{{ moneyType }}</text>
					</view>
				</view>
				<view class="buy-num ren-num">
					<view class="shu"></view>
					<view class="num-font">认购金额</view>
				</view>
				<view class="buy-input">
					<input type="text" class="input" placeholder="请输入认购金额" placeholder-class="inputPlace" v-model="num" value="" />
					<view class="unit">USDT</view>
				</view>
				<!-- <view class="buy-tip">可用</view> -->
				<view class="buy-num ren-num">
					<view class="shu"></view>
					<view class="num-font">认购数量</view>
				</view>
				<view class="buy-input" style="padding-bottom: 18rpx;">
					<view class="input" style="color: #08EDE7;">{{ HXB }}</view>
					<view class="unit">HXB</view>
				</view>
				<view class="btn-box">
					<view class="btn-left" @click="close()">取消</view>
					<view class="btn-right " @click="buy()">购买</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import top from '@/components/top/top.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import { getTime } from '@/utils/rocessor.js';
import { addSpread, index } from '@/api/index.js';
import { mapState, mapMutations } from 'vuex';
import { buyHXB, transferDate, activityList } from '@/api/money.js';
export default {
	comments: {
		top,
		uniPopup
	},
	data() {
		return {
			num: '',
			money: '',
			moneyType: '',
			activity: [],
			page: 1,
			limit: 10,
			loadingType: 'more'
		};
	},
	computed: {
		...mapState('user', ['address', 'hasLogin', 'userInfo']),
		HXB() {
			return (this.num / this.money).toFixed(2) * 1;
		}
	},
	onShow() {
		this.loadData();
	},
	methods: {
		shua() {
			window.location.reload();
		},
		loadData() {
			index({}).then(({ data }) => {
				this.money = data.activateNumber * 1;
				this.moneyType = data.activateToken;
			});
			this.list();
		},
		list() {
			let obj = this;
			if (obj.loadingType == 'noMore' || obj.loadingType == 'loading') {
				return;
			}
			activityList({ page: this.page, limit: this.limit }).then(({ data }) => {
				data.data.list.forEach(e => {
					e.createtime = getTime(e.createtime);
				});
				this.activity = this.activity.concat(data.data.list);
				if(data.data.list.length != obj.limit){
					obj.loadingType = 'noMore'
				}else {
					obj.page++
					obj.loadingType = 'more'
				}
			});
		},
		nav() {
			this.$refs.popup1.open();
		},
		close() {
			this.$refs.popup1.close();
		},
		openRecord() {
			this.$refs.popup.open();
		},
		closeRecord() {
			this.$refs.popup.close();
		},
		buy() {
			uni.showLoading({
				title: '加载中...'
			});
			const obj = this;
			obj.show = false;
			transferDate({ to: '', amount: obj.num }).then(e => {
				console.log(obj.address, 'datajm');
				const params = [
					{
						from: obj.address,
						to: e.data.to,
						data: e.data.data
					}
				];
				obj.$refs.popup.close();
				obj.$refs.popup1.close();
				console.log(params);
				ethereum
					.request({
						method: 'eth_sendTransaction',
						params
					})
					.then(result => {
						console.log(result, 'result');
						uni.hideLoading();
						buyHXB({
							usdt_num: obj.num,
							transactionHash: result
						}).then(e => {
							this.num = '';
							obj.shua();
							obj.$api.msg(e.msg);
						});
					})
					.catch(error => {
						uni.hideLoading();
						console.log(error, 'error');
					});
			});
		}
	}
};
</script>

<style lang="less">
page,
.content {
	height: 100%;
	background: #000;
}
.main {
	position: relative;
	width: 680rpx;
	height: 962rpx;
	margin: 0 auto 0;
	.main-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}
}
.title {
	position: relative;
	z-index: 2;
	text-align: center;
	font-size: 44rpx;
	font-family: zihun100hao-fangfangxianfengti;
	font-weight: 400;
	color: #08ede7;
	line-height: 100rpx;
}
.record {
	position: absolute;
	z-index: 2;
	top: 160rpx;
	right: 0;
	background: #08ede7;
	padding: 20rpx 10rpx 20rpx 20rpx;
	border-radius: 10rpx 0px 0px 10rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #001337;
	line-height: 40rpx;
}
.font {
	position: relative;
	z-index: 2;
	margin-top: 280rpx;
	text-align: center;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #ffffff;
}
.num {
	position: relative;
	z-index: 2;
	margin: 22rpx auto 0;
	width: 394rpx;
	height: 80rpx;
	background: linear-gradient(90deg, rgba(8, 237, 231, 0), #08ede7, #08ede7, rgba(8, 237, 231, 0));
	font-size: 42rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #001337;
	text-align: center;
	line-height: 80rpx;
}
.tip-title {
	position: relative;
	z-index: 2;
	margin-top: 34rpx;
	text-align: center;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #ffffff;
}
.tip {
	position: relative;
	z-index: 2;
	margin: 30rpx auto 0;
	width: 570rpx;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #ffffff;
	line-height: 38rpx;
}
.bottom {
	padding-top: 182rpx;
	position: relative;
	width: 750rpx;
	height: 434rpx;
	margin-top: -118rpx;
	.bottom-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 100%;
		width: 100%;
	}
	.btn {
		position: relative;
		z-index: 3;
		margin: 0 auto;
		width: 450rpx;
		height: 76rpx;
		background: linear-gradient(0deg, #ff7206, #ffdd7e);
		box-shadow: 0px 2px 8px 0px rgba(207, 126, 57, 0.7);
		border-radius: 38rpx;
		text-align: center;
		line-height: 76rpx;
		font-size: 36rpx;
		font-family: zihun164hao-fangyuehei;
		font-weight: 400;
		color: #ffffff;
	}
}
.record-title {
	text-align: center;
	font-size: 46rpx;
	font-family: zihun100hao-fangfangxianfengti;
	font-weight: 400;
	color: #ffffff;
}
.xian {
	margin: 14rpx auto 0;
	width: 326rpx;
	height: 16rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.popup-record {
	width: 680rpx;
	height: 854rpx;
	background: linear-gradient(180deg, #254fab 0%, #230a8e 100%);
	border-radius: 20rpx;
	padding: 62rpx 34rpx 0;

	.record-main {
		margin-top: 10rpx;
	}
	.item {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		opacity: 0.8;
	}
}
.popup-x {
	margin: 62rpx auto 0;
	width: 66rpx;
	height: 66rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.popup-buy {
	width: 630rpx;
	background: linear-gradient(180deg, #254fab 0%, #230a8e 100%);
	border-radius: 20rpx;
	padding: 68rpx 74rpx 74rpx;
	.buy-num {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-top: 62rpx;
		.shu {
			width: 10rpx;
			height: 30rpx;
			background: #08ede7;
			border-radius: 5rpx;
		}
		.num-font {
			margin-left: 10rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
			text {
				color: #08ede7;
			}
		}
	}
	.ren-num {
		margin-top: 40rpx;
	}
	.buy-input {
		display: flex;
		margin-top: 32rpx;
		justify-content: space-between;
		align-items: flex-end;
		width: 100%;
		border-bottom: 1px solid #ffffff;
		padding-bottom: 12rpx;
		.input {
			width: 90%;
			height: 40rpx;
			color: #ffffff;
			font-size: 40rpx;
		}
		.inputPlace {
			font-size: 40rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
			line-height: 38px;
			opacity: 0.35;
		}
		.unit {
			font-size: 27rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
		}
	}
	.buy-tip {
		margin-top: 10rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
	}
	.btn-box {
		display: flex;
		justify-content: space-between;
		margin-top: 62rpx;
		.btn-left {
			width: 230rpx;
			height: 66rpx;
			background: #e8e8e8;
			border-radius: 10rpx;
			text-align: center;
			line-height: 66rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #001337;
		}
		.btn-right {
			width: 230rpx;
			height: 66rpx;
			background: #08ede7;
			border-radius: 10rpx;
			text-align: center;
			line-height: 66rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #001337;
		}
	}
}
.yj-info-scroll {
	width: 100%;
	height: 600rpx;
	margin-top: 60rpx;
}
</style>