BCMM/pages/user/withdrawal.vue

<template>
	<view class="all">
		<navBar :show-title="true" :title="$t('user.提现1')" url="/pages/user/user"></navBar>
		<view class="top">
			<!-- <view class="topO">
				提現類型
			</view> -->
			<!-- <view class="topT flex-start padding-b-30">
				<view class="TT">USDT</view>
				<view class="TT noaction" @click="openPkr">BCMM</view>
			</view> -->
			<!-- <view class="topO">
				提現地址
			</view> -->
			<!-- <view class="topF margin-b-30">
				<input class="FF" type="text" placeholder="請輸入提現地址" v-model="address"
					placeholder-class="placeholder-input" />
			</view> -->
			<view class="topO ">
				{{$t('user.提现金额')}} <text class="font-color-gray font-size-sm">(USDT：{{userWallet}})</text>
			</view>
			<view class="topF flex margin-b-30">
				<input class="FF" type="number" v-model="withdrawal" :placeholder="$t('user.请输入提现金额')"
					placeholder-class="placeholder-input" />
				<view class="btn" @click="withdrawal=userWallet">USDT {{$t('user.全部1')}}</view>
			</view>
			<view class="topO ">
				{{$t('user.手续费')}} ({{num}}%)
			</view>
			<view class="topF flex">
				<text>{{charge}}</text>
			</view>
		</view>
		<view class="last margin-t-30" @click="submit">
			<view class="la" :class="{action:loding}">{{$t('user.立即提现')}}</view>
		</view>
		<!-- <uni-popup type="bottom" ref="popup">
			<inputPassword @commit='KeyInfo'></inputPassword>
		</uni-popup> -->
	</view>
</template>

<script>
	import {
		gameWallet,
		extractCalculator,
		loadIndexs
	} from "@/api/index.js";
	import {
		getUserInfo
	} from "@/api/user.js";
	import navBar from "@/components/nav/nav.vue"
	export default {
		components: {
			navBar
		},
		data() {
			return {
				address: '', //提现地址
				loding: false,
				type: 0,
				num: 0, //手续费百分比
				userWallet: '',
				withdrawal: '',
			};
		},
		computed: {
			charge() {
				return Number((this.withdrawal * this.num / 100).toFixed(18))
			}
		},
		onLoad(option) {
			this.getUserInfo();
		},
		methods: {
			openPkr() {
				uni.showToast({
					title: this.$t('user.暂未开放'),
					icon: 'error'
				});
			},
			// 获取用户信息
			getUserInfo() {
				const that = this;
				getUserInfo().then((res) => {
					// console.log(res)
					that.userWallet = +res.data.USDT;
					// console.log(that.userWallet)
				})
				loadIndexs().then((res) => {
					
					// console.log(res)
					that.num = +res.data.commission;
					// console.log(that.userWallet)
				})
			},
			// 提交
			submit() {
				const that = this;
				uni.showLoading({
					mask: true
				});
				if (that.userWallet < that.withdrawal) {
					uni.showToast({
						title:this.$t('user.余额不足'),
						icon: 'error'
					});
					return
				};
				that.loding = true;
				extractCalculator({
					number: that.withdrawal,
					token: "USDT",
				}).then((res) => {
					that.loding = false;
					uni.hideLoading()
					uni.showToast({
						title: this.$t("user.提现成功")
					});
					this.address = '';
					this.withdrawal = ''; //提现金额
					this.password = '';
				}).catch((res) => {
					uni.showToast({
						title: this.$t("user.提现失败"),
						icon: 'error'
					});
					that.loding = false;
					uni.hideLoading()
				})


			}
		}
	}
</script>

<style lang="scss" scoped>
	.all {
		color: #FFFFFF;
		line-height: 1;
		padding-bottom: 150rpx;
		background-color: rgb(12, 8, 21);
		min-height: 100vh;
	}

	.placeholder-input {
		color: $font-color-light;
	}

	.top {
		background: rgba(255, 255, 255, .09);
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		margin: 0 30rpx;
		.topO {
			font-size: $font-lg;
			padding-bottom: 30rpx;
		}

		.topT {
			.TT {
				border: 2px solid #DDBA82;
				border-radius: 10rpx;
				font-size: 26rpx;
				color: #FEB041;
				padding: 20rpx 24rpx;

				&.noaction {
					margin-left: 20rpx;
					border-color: #999999;
					color: #999999;
				}
			}

		}

		.topF {
			background-color: rgba(254, 176, 65, 0.09);
			border-radius: 20rpx;
			padding: 20rpx 30rpx;

			.FF {
				font-size: $font-base;
				flex-grow: 1;
			}

			.btn {
				font-size: $font-base;
			}
		}
	}

	.center {
		background: #191A1F;
		border-radius: 20rpx;
		font-weight: 500;
		padding: 30rpx;

		.tx {
			font-size: 29rpx;
			line-height: 30rpx;
		}

		.buzhou {
			font-size: 24rpx;
			color: #999999;
			line-height: 40rpx;
		}
	}


	.last {
		background: linear-gradient(90deg, #7D32FF, #3EE0FF);
		border-radius: 10rpx;
		overflow: hidden;
		position: fixed;
		bottom: 30rpx;
		left: 30rpx;
		right: 30rpx;

		.la {
			font-size: $font-lg;
			font-weight: bold;
			color: #FFF;
			text-align: center;
			padding: 30rpx;

			&.action {
				color: #FFF;
				background-color: $font-color-light;
			}
		}
	}
</style>