BiKing/pages/content/extract-currency.vue

<template>
	<view class="page-box">
		<headContent>
			<template #left>
				<reverse-back path="pages/content/top-up" />
			</template>
			<template #content>
				<view class="haed-title">
					提币
				</view>
			</template>
			<!-- <template #right>
				<view @click.stop="lookRecord()" class="head-record iconfont">&#xe642;</view>
			</template> -->
		</headContent>

		<view class="currency-box">
			<view class="currency-item">
				<view class="currency-info">
					<template v-if="biInfo">
						<image class="currency-icon" :src="biInfo.logo" mode="aspectFit"></image>
						<text class="currency-name">{{ biInfo.name|| biInfo.currency_name }}</text>
					</template>
				</view>
				<view class="select-currency" @click.stop="selectCurrency">
					<text>请选择币种</text>
					<text class="iconfont">&#xe8b5;</text>
				</view>
			</view>
			<view class="wallet-box">
				<view class="wallet-item">
					<text class="item-lable">地址</text>
					<input type="text" v-model="address" class="item-input" placeholder-class="item-placeholder"
						placeholder="请输入地址">
					<view class="item-right" @click.stop="openScanCode()">
						<text class="iconfont">&#xe8b6;</text>
						<text class="moer-icon iconfont">&#xe8b5;</text>
					</view>
				</view>
				<view class="wallet-item">
					<text class="item-lable">金额</text>
					<input type="number" v-model="number" class="item-input" placeholder-class="item-placeholder"
						placeholder="请输入提币数量">
					<view class="item-right">
						<text class="tag">USDT</text>
						<text class="all"
							@click.stop=" WalletCurrencyInfo ? number = WalletCurrencyInfo.legal_balance : ''">全部</text>
					</view>
				</view>

				<view class="wallet-usable">
					可用金额: {{ WalletCurrencyInfo ? WalletCurrencyInfo.legal_balance : '--' }} USDT
				</view>
				<view class="wallet-item">
					<text class="item-lable">资金密码</text>
					<input type="password" v-model="pay_password" class="item-input"
						placeholder-class="item-placeholder" placeholder="请输入资金密码">
				</view>
				<view class="service-charge">
					手续费<text> {{ WalletCurrencyInfo ? WalletCurrencyInfo.rate : '--' }} </text> USDT
				</view>
				<view class="actual-receipt">
					<text>实际到账</text>
					<text>{{ getSuccessAccount() || '--'}}</text>
				</view>

				<view :class="['wallet-btn' , checkout() ? 'active-wallet-btn' : '']"
					@click.stop="checkoutSuccess ? setWalletCurrency() : ''">
					提币
				</view>
				<view class="hint-box">
					<text class="hint-title">温馨提示</text>
					<text class="hint-item">最小提币数量为 10USDT，提币手续费将从提币金额中扣取:</text>
					<text class="hint-item">提币前请认真核对收款地址，不要将USDT提币至除USDT之外的地址，否则将无法找回;</text>
					<text class="hint-item">请不要直接提现众筹或者ICO地址，Biking不会处理代币的发
						放；</text>
					<text class="hint-item">受AML反洗钱等法规因素，OTC买入的数量24小时后才可以
						进行提币申请。</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Api_getWalletCurrency,
		Api_setWalletOut
	} from "@/api/index.js"
	import {
		scanCode
	} from "@/utils/common.js"
	export default {
		data() {
			return {
				biInfo: {},
				number: "",
				address: '',
				pay_password: "",
				WalletCurrencyInfo: null,

				checkoutSuccess: false,
				successAccount: ''
			};
		},
		onLoad(opt) {
			const key = opt?.key || '';
			this.init()
			this.biInfo = this.$getStorageSync('select')[key];
			this.getWalletCurrency();
		},
		computed: {
			// console.log('数据变动')
		},
		methods: {
			getSuccessAccount() {
				if (this.WalletCurrencyInfo) {
					const nus = this.$decimalNum.sub(Number(this.number), Number(this.WalletCurrencyInfo.rate));
					return nus > 0 ? nus : '--'
				}

			},
			setBiInfo(e) {
				this.biInfo = e;
				this.getWalletCurrency()
			},
			checkout() {
				if (this.WalletCurrencyInfo && (this.biInfo.currency_id || this.biInfo.id)) {
					if (Number(this.number) >= Number(this.WalletCurrencyInfo.min_number) && Number(this.number) > Number(
							this
							.WalletCurrencyInfo.rate) && Number(this.number) <= Number(this.WalletCurrencyInfo
							.legal_balance)) {

					} else {
						this.successAccount = ''
						this.checkoutSuccess = false
						return false
					}
					if (!this.address) {
						this.checkoutSuccess = false
						return false
					}
					if (!this.pay_password) {
						this.checkoutSuccess = false
						return false
					}
					this.checkoutSuccess = true
					return true
				} else {
					this.checkoutSuccess = false
					return false
				}
			},
			getWalletCurrency() {
				Api_getWalletCurrency({
					currency: this.biInfo.currency_id || this.biInfo.id
				}).then(res => {
					this.WalletCurrencyInfo = res
				}).catch(err => {

				})
			},
			// 选择币种
			selectCurrency() {
				const pages = getCurrentPages()
				if (pages.length > 1 && pages[pages.length - 1].route === 'pages/content/select-currency') {
					uni.navigateBack()
				} else {
					uni.navigateTo({
						url: "/pages/content/select-currency?type=withdraw"
					});
				}

			},
			// 提币
			setWalletCurrency() {
				uni.showLoading({
					title: ''
				})
				Api_setWalletOut({
					currency: this.biInfo.currency_id || this.biInfo.id,
					number: this.number,
					address: this.address,
					rate: this.WalletCurrencyInfo.rate,
					pay_password: this.pay_password
				}).then(res => {
					this.init()
					uni.showToast({
						icon:'none',
						title: res || '提交成功'
					})
					this.getWalletCurrency()
				}).catch(err => {

				})
			},
			init() {
				this.number = "";
				this.address = '';
				this.pay_password = "";
			},
			openScanCode() {
				scanCode().then(res => {

					this.address = res
				}).catch(err => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-box {
		width: 100%;
		min-height: 100vh;
		background-color: $page-bg;
	}

	.head-record {
		font-size: 60rpx;
	}

	.currency-box {
		width: 100%;
		padding: 30rpx 40rpx;

		.currency-item {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.currency-info {
				flex-shrink: 0;
				display: flex;
				align-items: center;

				.currency-icon {
					width: 46rpx;
					height: 46rpx;
					flex-shrink: 0;
				}

				.currency-name {
					font-size: 28rpx;
					padding-left: 7px;
					font-weight: 700;
				}
			}

			.select-currency {
				flex-shrink: 0;
				display: flex;
				align-items: center;
				font-size: 24rpx;

				.iconfont {
					color: #ccc;
					transform: rotateY(180deg);
				}
			}

		}


	}

	.wallet-box {

		.wallet-item {
			width: 100%;
			height: 100rpx;
			border-bottom: 1rpx solid $border-color11;
			display: flex;
			align-items: center;
			padding-top: 20rpx;

			.item-lable {
				width: 160rpx;
				flex-shrink: 0;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #1a1a1a;
			}

			.item-input {
				flex: 1;
				padding-right: 20rpx;
				font-size: 26rpx;
			}

			.item-placeholder {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #cccccc;
			}

			.item-right {
				flex-shrink: 0;
				display: flex;
				align-items: center;

				text {
					font-size: 26rpx;
				}

				.iconfont {
					font-size: 40rpx;
				}

				.moer-icon {
					transform: rotate(180deg);
					color: #666666;
					font-size: 36rpx;
				}

				.tag {
					line-height: 1.2;
					border-right: 1px solid #d9d9d9;
					padding-right: 20rpx;
					color: #CCCCCC;
				}

				.all {
					padding-left: 20rpx;
					color: $Theme-Color;
				}
			}
		}

		.wallet-usable {
			width: 100%;
			height: 50rpx;
			padding: 17rpx 0;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: right;
			color: #1a1a1a;
		}

		.service-charge {
			width: 100%;
			padding: 40rpx 0;
			line-height: 1.2;
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: left;
			color: #808080;

			text {
				color: #FFBA6A;
			}
		}

		.actual-receipt {
			font-size: 26rpx;
			line-height: 1.2;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 25rpx;
			border-bottom: 1rpx solid $border-color11;
		}

		.wallet-btn {
			width: 100%;
			height: 90rpx;
			background: #b3b3b3;
			border-radius: 8px;
			text-align: center;
			line-height: 90rpx;
			color: #fff;
			margin: 40rpx 0;
		}

		.active-wallet-btn {
			background-color: $Theme-Color;
		}

		// <view class="hint-box">
		// 	<text class="hint-title">温馨提示</text>
		// 	<text class="hint-item">最小提币数量为 10USDT，提币手续费将从提币金额中扣取:</text>
		// 	<text class="hint-item">提币前请认真核对收款地址，不要将USDT提币至除USDT之外的地址，否则将无法找回;</text>
		// 	<text class="hint-item">请不要直接提现众筹或者ICO地址，Biking不会处理代币的发
		// 		放；</text>
		// 	<text class="hint-item">受AML反洗钱等法规因素，OTC买入的数量24小时后才可以
		// 		进行提币申请。</text>
		// </view>
		.hint-box {
			width: 100%;
			font-size: 26rpx;
			display: flex;
			flex-direction: column;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;

			.hint-title {
				padding-bottom: 20rpx;
				color: #1a1a1a;
				line-height: 1.2;
			}

			.hint-item {
				padding-bottom: 14rpx;

				color: #808080;
				line-height: 1.2;
			}
		}
	}
</style>