PKR/pages/user/money/withdrawal.vue

<template>
	<view class="all">
		<view class="top">
			<view class="topO">
				{{$t('userinfo.u6')}}
			</view>
			<view class="topT flex-start padding-b-30">
				<view class="TT">USDT</view>
				<view class="TT noaction" @click="openPkr">PKR</view>
			</view>
			<view class="topO">
				{{$t('userinfo.u7')}}
			</view>
			<view class="topF margin-b-30">
				<input class="FF" type="text" :placeholder="$t('userinfo.u17')" v-model="address"
					placeholder-class="placeholder-input" />
			</view>
			<view class="topO ">
				{{$t('userinfo.u8')}} <text class="font-color-gray font-size-sm">({{$t('userinfo.u19')}}：{{userWallet}})</text>
			</view>
			<view class="topF flex margin-b-30">
				<input class="FF" type="number" v-model="withdrawal" :placeholder="$t('userinfo.u18')"
					placeholder-class="placeholder-input" />
				<view class="btn" @click="withdrawal=userWallet">USDT {{$t('userinfo.u20')}}</view>
			</view>
			<view class="topO ">
				{{$t('userinfo.u21')}} ({{num}}%)
			</view>
			<view class="topF flex">
				<text v-if="type==1">{{charge}}</text>
				<text v-else>{{num}}</text>
			</view>
		</view>
		<view class="center margin-t-30">
			<view class="tx">{{$t('userinfo.u9')}}</view>
			<view class="buzhou margin-t-20">
				<view class="">1.{{$t('userinfo.u10')}} </view>
				<view class="">① {{$t('userinfo.u11')}}</view>
				<view class="">② {{$t('userinfo.u12')}} </view>
				<view class="">2.{{$t('userinfo.u13')}}</view>
				<view class="">3.{{$t('userinfo.u14')}}</view>
				<view class="">4.{{$t('userinfo.u15')}}</view>
			</view>
		</view>
		<view class="last margin-t-30" @click="openPayPassword">
			<view class="la" :class="{action:loding}">{{$t('userinfo.u16')}}</view>
		</view>
		<uni-popup type="bottom" ref="popup">
			<inputPassword @commit='KeyInfo'></inputPassword>
		</uni-popup>
	</view>
</template>

<script>
	import {
		gameWallet
	} from "@/api/game.js";
	import {
		extractCash
	} from "@/api/wallet.js";
	import inputPassword from "@/components/input-password/input-password.vue";
	export default {
		components: {
			inputPassword
		},
		data() {
			return {
				address: '', //提现地址
				withdrawal: '', //提现金额
				userWallet: '',
				loding: false,
				password: '',
				// 手续费信息
				type: 0,
				num: 0//手续费百分比
			};
		},
		computed: {
			charge() {
				return Number( (this.withdrawal*this.num/100).toFixed(8))
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$t("tab.a8"),
			});
			this.gameWallet();
		},
		methods: {
			openPkr(){
				uni.showToast({
					// title: '余额不足！',
					title: this.$t("withdrawal.暂未开放"),
					icon: 'error'
				});
			},
			// 支付弹窗
			openPayPassword() {
				if (this.userWallet < this.withdrawal) {
					uni.showToast({
						// title: '余额不足！',
						title: this.$t("userinfo.u22"),
						icon: 'error'
					});
					return
				};
				this.$refs.popup.open();
			},
			// 关闭支付弹窗
			colsePayPassword() {
				this.$refs.popup.close();
			},
			// 密码输入完成
			KeyInfo(val) {
				this.password = val;
				this.colsePayPassword();
				this.submit();
			},
			// 获取用户信息
			gameWallet() {
				const that = this;
				gameWallet().then((res) => {
					that.userWallet = +res.data.back.USDT.money.money;
					that.type = +res.data.back.USDT.cash_commission_count_type;
					that.num = +res.data.back.USDT.cash_commission_ratio;
				})
			},
			// 提交
			submit() {
				const that = this;
				uni.showLoading({
					title: this.$t("userinfo.u23"),
					mask: true
				});
				that.loding = true;
				extractCash({
					money: that.withdrawal,
					money_type: "USDT",
					address: that.address,
					trade_password: that.password,
				}).then((res) => {
					that.loding = false;
					uni.hideLoading()
					uni.showToast({
						title: this.$t("userinfo.u24")
					});
					this.address = '';
					this.withdrawal = ''; //提现金额
					this.password = '';
				}).catch((res) => {
					uni.showToast({
						title: this.$t("userinfo.u25"),
						icon: 'error'
					});
					that.loding = false;
					uni.hideLoading()
				})


			}
		}
	}
</script>

<style lang="scss" scoped>
	.all {
		color: #FFFFFF;
		padding: 0 30rpx;
		line-height: 1;
		padding-bottom: 150rpx;
	}

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

	.top {
		background: #191A1F;
		border-radius: 20rpx;
		padding: 40rpx 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: #feb041;
		border-radius: 10rpx;
		overflow: hidden;
		position: fixed;
		bottom: 30rpx;
		left: 30rpx;
		right:30rpx;
		.la {
			font-size: $font-lg;
			font-weight: bold;
			color: #040404;
			text-align: center;
			padding: 30rpx;

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