FXB/pages/index/withdrawal.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("withdrawal.提币")}}</view>
			</view>
			<view class="redion">
				 <u-radio-group class="flex" v-model="value">
				    <u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in currList"
				      :key="index" :label="item" :name="item" activeColor="#C29963">
				    </u-radio>
				  </u-radio-group>
			</view>
			<view class="infoTpl">
				<view class="flex tplTop">
					<view class="name">{{$t("withdrawal.提币數量")}}</view>
					<view class="tip" v-if="value == 'USDT'">{{$t("withdrawal.可用")}}{{userInfo.USDT * 1}}USDT</view>
					<view class="tip" v-if="value == 'NICE'">{{$t("withdrawal.可用")}}{{userInfo.NICE * 1}}NICE</view>
				</view>
				<view class="flex inputBox">
					<input type="number" v-model="money" @input="inputMonry" :placeholder='$t("withdrawal.请输入提币数量")'/>
					<view class="clickAll" v-if="value == 'USDT'" @click="money = userInfo.USDT * 1">USDT {{$t("withdrawal.全部")}}</view>
					<view class="clickAll" v-if="value == 'NICE'" @click="money = userInfo.NICE * 1">NICE {{$t("withdrawal.全部")}}</view>
				</view>
				<view class="name">{{$t("withdrawal.手续费")}}</view>
				<view class="flex inputBox">
					<input v-model="free" disabled/>
					<view class="freeTip">{{value}}</view>
				</view>
			</view>
		</view>
		<view class="footBox">
			<view class="flex numBox">
				<view class="numName">{{$t("withdrawal.实际到账")}}</view>
				<view class="num">{{num}}</view>
			</view>
			<view class="btnBox">
				<view class="submitBtn" :class="{ submitNo: !payOn }" @click="payOn ? clickExtract() : ''">{{$t("withdrawal.提币")}}</view>
			</view>
		</view>
	</view>
</template>
<script>
	import topView from '../components/topView.vue';
	import {extract,extractCalculator} from "@/api/index.js";
	import {mapState,mapActions,mapMutations} from "vuex";
	export default {
		components: {
			topView
		},
		data () {
			return {
				money:"",
				free:"--",
				num:'0.00',
				payOn:true,
				value:'USDT',
				currList:['USDT','NICE']
			}
		},
		onLoad () {},
		computed: {
			...mapState('user', ['userInfo']),
		},
		methods: {
			inputMonry(e){
				this.free = e.detail.value * (this.userInfo.extract_fee/100)
				this.num = e.detail.value - this.free
			},
			//提取
			async clickExtract() {
				let obj = this;
				if (obj.money == '') {
					uni.showToast({
						title: obj.$t("withdrawal.请输入提币数量"),
						icon: "none",
					});
					return;
				}
				if (obj.money < 100) {
					uni.showToast({
						title: obj.$t("withdrawal.提币数量大于100"),
						icon: "none",
					});
					return;
				}
				if(obj.value == 'USDT'){
					if (obj.money > obj.userInfo.USDT) {
						uni.showToast({
							title: "USDT" + obj.$t("exchange.余额不足"),
							icon: "none",
						});
						return;
					}
				}
				if(obj.value == 'NICE'){
					if (obj.money > obj.userInfo.NICE) {
						uni.showToast({
							title: "NICE" + obj.$t("exchange.余额不足"),
							icon: "none",
						});
						return;
					}
				}
				obj.payOn = false
				try {
					const res = await extractCalculator({
						token: obj.value,
						number: obj.money,
					});
					if(res.data.msg == '提币数量大于100'){
						obj.payOn = true
						uni.showToast({
							title: obj.$t("withdrawal.提币数量大于100"),
							icon: "error",
						});
					}else{
						const txHash = await ethereum.request({
							method: "eth_sendTransaction",
							params: [{
								from: obj.userInfo.address,
								to: res.data.to,
								value: (res.data.gas*1).toString(16),
							}, ],
						});
						uni.showLoading({
							title: "loading...",
							mask: true,
						});
						const req = await extract({
							token: obj.value,
							number: obj.money,
							transactionHash: txHash,
						});
						obj.payOn = true
						uni.showToast({
							title: this.$t("withdrawal.提取成功"),
						});
						setTimeout(function () {
							obj.$router.go(0)
						}, 1000);
					}
				} catch (e) {
					obj.payOn = true
					uni.showToast({
						title: this.$t("withdrawal.提取失败"),
						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;
		}
	}
	.redion{
		padding:25rpx 150rpx 25rpx 150rpx;
	}
	.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>