BCMM/pages/index/community.vue

<template>
	<view class="container">
		<navBar :show-title="true" :title="$t('home.共创社区')" url="/pages/index/index"></navBar>
		<view class="text-center border-linear-gradient">
			<image class="contentImg" src="../../static/img/itemListMax.png" mode="widthFix"></image>
			<view class="title flex-center">
				<view>{{$t('home.认购价')}}：</view>
				<view class="num text-linear-gradient">{{num}}U</view>
			</view>
			<!-- <view class="title flex-center">
				<view>{{$t('home.认购数')}}：</view>
				<view class="num text-linear-gradient">10000个</view>
			</view> -->
			<!-- <view class="title flex-center">
				<view>{{$t('home.社区建设')}}</view>
			</view> -->
			<view class="buttom" @click="openPayMoney">
				{{$t('home.立即认购')}}
			</view>
		</view>
		<view class="detail border-linear-gradient">
			<view class="flex  top">
				<view class="item">
					<view class="text-linear-gradient">
						{{order_num||0}}
					</view>
					<view class="tipText margin-t-20">
						{{$t('home.已认购')}}
					</view>
				</view>
				<view class="lineH">

				</view>
				<view class="item">
					<view class="text-linear-gradient">
						{{wait||0}}
					</view>
					<view class="tipText margin-t-20">
						{{$t('home.待释放')}}
					</view>
				</view>
			</view>
			<view class="flex padding-c-30 padding-v-20">
				<view class="flex">
					<view class="imageTip margin-r-10">
						<image class="nodeImg" src="../../static/img/nodeIcon.png" mode=""></image>
					</view>
					<view class="typename">
						{{$t('home.释放记录')}}
					</view>
				</view>
				<navigator url="./communityDetail">
					<view class="flex-center">
						<view class="rightTip margin-r-10">
							{{$t('home.查看详细')}}
						</view>
						<image class="nextImg" src="../../static/img/mininext.png" mode="scaleToFill"></image>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		loadIndexs,
		creatorOrder,
		payOrder,
		orderCalculator,
		orderList
	} from '@/api/index.js';
	import {
		mapMutations
	} from "vuex";
	import {
		getUserInfo
	} from '@/api/user.js';
	import navBar from "@/components/nav/nav.vue"
	export default {
		data() {
			return {
				num: 300,
				order_num:'',
				wait:'',
			}
		},
		components: {
			navBar
		},
		onLoad(option) {
			this.getUserInfo();
		},
		methods: {
			...mapMutations('user', ['setUserInfo']),
			// 获取更新用户信息
			getUserInfo() {
				getUserInfo().then((res) => {
					this.setUserInfo(res.data);
				}).catch((res) => {
					console.log(res);
				})
				// loadIndexs().then((res) => {
				// 	this.num = res.data.point_num
				// }).catch((res) => {
				// 	console.log(res);
				// })
				orderList().then(({data}) => {
					this.order_num = data.order_num;
					this.wait = data.wait;
				}).catch((res) => {
					console.log(res);
				})
			},
			// 报单
			openPayMoney() {
				const that = this;
				uni.showActionSheet({
					title: that.$t("home.请选择支付方式"),
					itemList: ['USDT', that.$t("home.余额")],
					success(res) {
						uni.showLoading({
							mask: true
						});
						that.creatorOrder(res.tapIndex)
					}

				})
			},
			// 生成订单
			creatorOrder(index) {
				creatorOrder({
					num: this.num * 1,
				}).then(({
					data
				}) => {
					this.payOrder(index + 1, data.id)
				}).catch((res) => {
					console.log(res);
				})
			},
			// 支付订单
			async payOrder(ind, id) {
				const that = this;
				let pushData = {
					num: this.num * 1,
					type: ind
				}
				try {
					if (ind == 1) {
						const {
							data
						} = await orderCalculator({
							id
						});
						const txHash = await ethereum.request({
							method: 'eth_sendTransaction',
							params: [{
								from: that.userInfo.address, // The user's active address.
								to: data.data.to,
								value: 0,
								data: data.data.data,
							}]
						})
						const req = await payOrder(id, {
							type: ind,
							transactionHash: txHash,
						});
					}
					if (ind == 2) {
						const req = await payOrder(id, {
							type: ind
						});
					}
					that.getUserInfo();

					uni.showToast({
						title: that.$t('home.认购成功')
					})
				} catch (e) {
					console.log(e, 'err');
					uni.showToast({
						title: that.$t('home.认购失败'),
						icon: 'error'
					})
				}
			},
		},
	}
</script>

<style lang="scss">
	.contentImg {
		margin: 0 auto;
		width: 100%;
		margin-top: -200rpx;
	}

	.container {
		width: 100%;
		line-height: 1;
		background-color: rgb(12, 8, 21);
		min-height: 100vh;
	}

	.detail {
		margin: 30rpx 30rpx 0 30rpx;
		border-radius: 30rpx;

		.top {
			justify-content: space-around;
			padding: 30rpx;
			color: #FFF;
			font-weight: 500;
			border-bottom: 1px solid #E1E1E1;
			margin: 0 30rpx;

			.item {
				text-align: center;
				font-weight: bold;
				font-size: 38rpx;

				.tipText {
					font-size: 22rpx;
					opacity: 0.8;
				}
			}

			.lineH {
				height: 92rpx;
				width: 2px;
				background: linear-gradient(0deg, rgba(255, 255, 255, 0), #FFFFFF, rgba(255, 255, 255, 0));
			}
		}

		.typename {
			font-size: 30rpx;
			color: #FFF;
		}

		.imageTip {
			.nodeImg {
				width: 36rpx;
				height: 33rpx;
			}
		}

		.rightTip {
			color: #FFF;
			font-size: 24rpx;
		}

		.nextImg {
			width: 8rpx;
			height: 14rpx;
		}
	}

	.text-center {
		border-radius: 30rpx;
		margin: 100rpx 30rpx 0 30rpx;
		color: #FFF;
		padding: 80rpx 50rpx;

		.title {
			font-weight: 500;
			font-size: 33rpx;
			padding-bottom: 50rpx;
			// align-items: flex-end;
		}

		.num {
			font-weight: bold;
			font-size: 52rpx;
		}
	}

	.buttom {
		font-weight: bold;
		font-size: 32rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		background: linear-gradient(to right, #7D32FF 0%, #3EE0FF 100%);
	}
</style>