FXB/pages/index/recharge.vue

<template>
	<view class="container" style="padding-top: 100rpx;">
		<topView :backg="'#1A1A17'"></topView>
		<view class="infoBox">
			<view class="navBack" @click="navTo('/pages/index/property')">
				<u-icon name="arrow-left" size="25" color="#fff" style="position: absolute;left: 0;top: 0;font-weight: bold;"></u-icon>
				<view class="title">{{$t("property.充值")}}</view>
			</view>
			<view class="infoTpl">
				<view class="flex tplTop">
					<view class="name">{{$t("recharge.充值数量")}}</view>
					<view class="tip">{{$t("recharge.可用")}}{{userInfo.NUSD * 1}}NUSD</view>
				</view>
				<view class="flex inputBox">
					<input type="number" v-model="money" :placeholder='$t("recharge.请输入充值数量")'/>
					<!-- <view class="clickAll" @click="money = userInfo.NUSD * 1">NUSD 全部</view> -->
				</view>
				<!-- <view class="name">手续费</view>
				<view class="flex inputBox">
					<input v-model="free"/>
					<view class="freeTip">USTD</view>
				</view> -->
			</view>
		</view>
		<view class="footBox">
			<!-- <view class="flex numBox">
				<view class="numName">实际到账</view>
				<view class="num">{{num}}</view>
			</view> -->
			<view class="btnBox">
				<view class="submitBtn" :class="{ submitNo: !payOn }" @click="payOn ? recharge() : ''">{{$t("property.充值")}}</view>
			</view>
		</view>
	</view>
</template>
<script>
	import topView from '../components/topView.vue';
	import {mapState,mapActions,mapMutations} from "vuex";
	import {charge,chargeCalculator} from "@/api/index.js";
	export default {
		components: {
			topView
		},
		data () {
			return {
				money:"",
				free:"--",
				payOn:true
			}
		},
		onLoad () {
			
		},
		computed: {
			...mapState('user', ['userInfo']),
		},
		methods: {
			async recharge(){
				let obj = this;
				if (obj.money == '') {
					uni.showToast({
						title: obj.$t("recharge.请输入充值数量"),
						icon: "none",
					});
					return;
				}
				obj.payOn = false
				try {
					const res = await chargeCalculator({
						token: 'NUSD',
						num: obj.money,
					});
					uni.showLoading({
						title: "loading...",
						mask: true,
					});
					const txHash = await ethereum.request({
						method: "eth_sendTransaction",
						params: [{
							from: obj.userInfo.address,
							to: res.data.data.to,
							value: 0,
							data: res.data.data.data,
						}, ],
					});
					const req = await charge({
						token: 'NUSD',
						num: obj.money,
						transactionHash: txHash
					});
					obj.payOn = true
					uni.showToast({
						title:obj.$t("recharge.请等待审核"),
						icon:'success'
					});
					obj.money = ''
					// setTimeout(function () {
					// 	obj.$router.go(0)
					// }, 1000);
				} catch (e) {
					obj.payOn = true
					uni.showToast({
						title: obj.$t("recharge.充值成功"),
						icon:"error"
					});
				}
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		min-height: 100vh;
		.container {
			width: 100%;
			min-height: 100vh;
		}
	}
	.topBox {
		color: #FFE0BD;
		padding: 25rpx 27rpx;
		background: #1A1A17;
		.topTpl {
			.addr {
				padding: 6rpx 25rpx;
				background: linear-gradient(-74deg, #CE9C6D, #FFECD6);
				box-shadow: 3rpx 4rpx 5rpx 0rpx rgba(151, 118, 74, 0.5);
				border-radius: 21rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #986629;
			}
		}
	}
	.infoBox{
		padding: 0rpx 30rpx;
		color: #fff;
	}
	.navBack{
		position: relative;
		color: #fff;
		text-align: center;
		margin: 30rpx 0rpx 40rpx 0rpx;
		.title{
			font-weight: bold;
			font-size: 34rpx;
		}
	}
	.infoTpl{
		background: #1A1A17;
		padding: 85rpx 25rpx;
		border-radius: 25rpx;
		.tplTop{
			.tip{
				font-size: 20rpx;
			}
		}
		.inputBox{
			background: #2F2F2D;
			padding: 25rpx 25rpx;
			border-radius: 25rpx;
			margin-bottom: 61rpx;
			.clickAll{
				font-size: 26rpx;
			}
			.freeTip{
				font-size: 30rpx;
				color: #888785;
			}
		}
	}
	.footBox{
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #1A1A17;
		color: #fff;
		padding: 50rpx 42rpx;
		.numBox{
			.numName{
				font-weight: 500;
				font-size: 26rpx;
				color: #888785;
			}
		}
		.btnBox{
			// margin-top: 50rpx;
			.submitBtn{
				background: linear-gradient(258deg, #FFF0CF, #CBA16B, #FCE9CF, #C29963);
				border-radius: 10rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #31190B;
				text-align: center;
				padding: 20rpx 0rpx;
			}
			.submitNo {
				background: #999999 !important;
				color: #fff !important;
			}
		}
	}
	.name{
		font-size: 32rpx;
		font-weight: bold;
		padding-bottom: 35rpx;
	}
</style>