NN2022060801/addons/utcapp/pages/trade/transfer.vue

<template>
	<view class="main">
		<view class="collection">
			<view class="head">
				<view class="title">{{lang.link_name}}</view>
				<view class="links">
					<text :class="'btn trc' + (formData.contact_type==1? ' active' :'')"
						@click="(formData.contact_type=1) && (formData.to_address='')">TRC20</text>
					<text :class="'btn erc' + (formData.contact_type==2? ' active' :'')"
						@click="(formData.contact_type=2) && (formData.to_address='')">ERC20</text>
				</view>
				<text class="btn-link" @click="gotoPage('/pages/account/transfer')">{{lang.detailed}}</text>
			</view>
			<view class="form" v-if="formData.contact_type==1">
				<view class="form-item">
					<view class="title">{{lang.collection_address}}</view>
					<view class="input-item">
						<image class="icon plane" src="/static/icons/transfer_icon.png" mode=""></image>
						<input class="input" v-model="formData.to_address" type="text" :placeholder="lang.input_address"
							@input="inputAddress">


						<image class="icon address" src="/static/icons/address_light.png" mode=""
							@click="gotoPage('/pages/center/address?ct=1&type=2')"></image>
						<image class="icon scan" src="/static/icons/scan_light.png" mode=""></image>
					</view>
				</view>
				<view class="form-item">
					<view class="title">{{lang.transfer_num}}</view>
					<view class="input-item">
						<image class="icon usdt" src="/static/icons/usdt_icon.png" mode=""></image>
						<input class="input" v-model="formData.num" type="text"
							:placeholder="lang.limit+' '+config.trc_out_limit+'~'+config.trc_out_max"
							@input="countTotal" :max="config.trc_out_max" maxlength="6" :min="config.trc_out_limit">
						<text class="text all">{{lang.all}}</text>
					</view>
					<view class="tips">
						<text class="text">{{lang.transfer_balance}}: {{userInfo.usdt_num}} USDT</text>
					</view>
				</view>
				<view class="form-item">
					<view class="title">{{lang.transfer_fee}}</view>
					<view class="input-item">
						<input class="input" v-model="formData.fee" type="text" placeholder="-" :disabled="true">

						<text class="text unit">USDT</text>
					</view>
				</view>
			</view>
			<view class="form" v-else-if="formData.contact_type==2">
				<view class="form-item">
					<view class="title">{{lang.collection_address}}</view>
					<view class="input-item">
						<image class="icon plane" src="/static/icons/transfer_icon.png" mode=""></image>
						<input class="input" v-model="formData.to_address" type="text"
							:placeholder="lang.input_address">

						<image class="icon address" src="/static/icons/address_light.png" mode=""
							@click="gotoPage('/pages/center/address?ct=2&type=2')"></image>
						<image class="icon scan" src="/static/icons/scan_light.png" mode=""></image>
					</view>
				</view>
				<view class="form-item">
					<view class="title">{{lang.transfer_num}}</view>
					<view class="input-item">
						<image class="icon usdt" src="/static/icons/usdt_icon.png" mode=""></image>
						<input class="input" v-model="formData.num" type="text"
							:placeholder="lang.limit+' '+config.erc_out_limit+'~'+config.erc_out_max"
							@input="countTotal" :max="config.erc_out_max" maxlength="6" :min="config.erc_out_limit">
						<text class="text all">{{lang.all}}</text>
					</view>
					<view class="tips">
						<text class="text">{{lang.transfer_balance}}: {{userInfo.usdt_num}} USDT</text>
					</view>
				</view>
				<view class="form-item">
					<view class="title">{{lang.transfer_fee}}</view>
					<view class="input-item">
						<input class="input" v-model="formData.fee" type="text" placeholder="-" :disabled="true">

						<text class="text unit">USDT</text>
					</view>
				</view>
			</view>
			<view class="action submit">
				<view class="total-box">
					<text class="text name">{{lang.transfer_total}}</text>
					<text class="text total">{{formData.total? formData.total+' USDT': '-'}}</text>
				</view>
				<button class="btn" @click="showPopupModal">{{lang.transfer}}</button>
			</view>
		</view>

		<u-modal :title="lang.op_tips" v-model="showPopup" @confirm="transfer" ref="uModal" :async-close="true"
			:mask-close-able="true" width="90%" :zIndex="996" :show-title="true" :show-cancel-button="true"
			:confirm-text="lang.confirm" confirm-color="#bb955e">
			<view v-slot class="u-modal-content">
				<u-form labelPosition="left" :model="formData" :rules="rules" ref="form" :labelWidth="'178rpx'">
					<u-form-item :label="lang.trade_password" prop="formData.trade_password">
						<u-input type="password" v-model="formData.trade_password"
							:placeholder="lang.input_trade_password" clearable>
						</u-input>
					</u-form-item>
				</u-form>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPopup: false,
				config: {
					trc_out_limit: '0.00',
					trc_out_max: '1000.00',
					erc_out_limit: '0.00',
					erc_out_max: '1000.00',
				},
				formData: {
					to_address: '',
					num: '',
					fee: '',
					total: '',
					contact_type: 1,
					coin_type: 1
				},
				userInfo: {
					usdt_num: '0.00'
				},
			}
		},
		onLoad(options) {
			let addressData = uni.getStorageSync('otc.select_address');
			addressData = typeof(addressData) != 'undefined' ? addressData : {};

			let address = typeof(addressData.address) != 'undefined' ? addressData.address : '';
			let coin_type = typeof(addressData.ct) != 'undefined' ? addressData.ct : 0;
			this.formData.coin_type = coin_type > 0 ? coin_type : 1;
			if (address && !this.checkAddress(address)) {
				this.$u.toast(this.lang.incorret_address);
			} else {
				this.formData.to_address = address ? address : '';
			}

			this.getConfig();
			this.getUserInfo()
		},
		methods: {
			// 验证地址格式
			checkAddress(addess) {
				if (this.formData.coin_type == 1) {
					let patt = /^T[a-zA-Z0-9]{20,50}/;
					return patt.test(addess);
				} else {
					let patt = /^0x[a-zA-Z0-9]{20,50}/;
					return patt.test(addess);
				}
			},
			inputAddress() {
				uni.clearStorageSync('otc.select_address');
			},
			countTotal() {
				let num = this.formData.num > 0 ? parseFloat(this.formData.num) : 0;
				this.formData.fee = parseFloat(num * this.config.coin_out_free / 100).toFixed(2)
				this.formData.total = parseFloat(parseFloat(num) + parseFloat(this.formData.fee)).toFixed(2)

			},
			// 扫码
			scan() {
				let _this = this;
				uni.scanCode({
					success: function(res) {
						if (_this.checkAddress(res.result)) {
							_this.formData.to_address = res.result;
							return false;
						}

						_this.$u.toast(_this.lang.incorret_address);
					}
				});
			},
			// 获取配置
			getConfig() {
				this.$request.sendToken('/api/config', {
					type: 2
				}, 'POST').then(res => {
					// 打印调用成功回调
					this.config = res.data.trade;
				})
			},
			//获取用户数据
			getUserInfo() {
				this.$request.sendToken('/api/user/info', {}, 'POST').then(res => {
					if (res.success == true) {
						this.userInfo = res.data;
					} else {
						this.$u.toast(res.msg);
						setTimeout(function() {
							uni.navigateTo({
								url: '/pages/login/login',
							});
						}, 2000)
					}
				})
			},
			showPopupModal() {
				let _this = this
				if (this.formData.address == '') {
					_this.$u.toast(_this.lang.input_address);
					return false;
				}

				if (this.formData.num <= 0) {
					_this.$u.toast(_this.lang.input_num);
					return false;
				}

				if (this.formData.num <= 0) {
					_this.$u.toast(_this.lang.input_num);
					return false;
				}

				if (this.formData.trade_password == '') {
					_this.$u.toast(_this.lang.input_trade_password);
					return false;
				}

				_this.showPopup = true;
			},
			// 转账提现
			transfer() {
				let _this = this
				if (this.formData.address == '') {
					_this.$u.toast(_this.lang.input_address);
					return false;
				}

				if (this.formData.num <= 0) {
					_this.$u.toast(_this.lang.input_num);
					return false;
				}

				if (this.formData.num <= 0) {
					_this.$u.toast(_this.lang.input_num);
					return false;
				}

				if (this.formData.trade_password == '') {
					_this.$u.toast(_this.lang.input_trade_password);
					return false;
				}

				uni.showLoading({
					title: _this.catch
				})
				_this.$request.sendToken('/api/coin/withdraw', _this.formData, 'POST').then(res => {
					uni.hideLoading();
					if (res.success == true) {
						_this.$u.toast(res.msg);
						setTimeout(function() {
							_this.showPopup = false
							_this.formData.trade_password = ''
							_this.getUserInfo()
						}, 800)
					} else {
						_this.$refs.uModal.clearLoading();
						_this.$u.toast(res.msg);
					}

				});
			}

		},
	}
</script>

<style lang="scss" scoped>
	.collection {
		margin: 19rpx 38rpx 38rpx;
		color: #6e6c6b;

		.head {
			.title {
				// font-size: 30rpx;
				margin: 28rpx 0;
			}

			.links {
				margin: 28rpx 0;

				.btn {
					padding: 6rpx 16rpx;
					border: 2rpx solid #bb955e;
					border-radius: 14rpx;
					margin-right: 28rpx;
					color: #bb955e;
					font-weight: bold;
				}

				.btn.active {
					color: #333;
					background-color: #bb955e;
				}
			}

			.btn-link {
				float: right;
				color: #bb955e;
				padding: 8rpx 10rpx;
				position: fixed;
				top: 26rpx;
				right: 28rpx;
				z-index: 998;
			}
		}

		.form {
			margin-top: 56rpx;

			.form-item {
				padding-bottom: 38rpx;
				font-size: 26rpx;

				.icon {
					width: 34rpx;
					height: 34rpx;
					vertical-align: middle;
				}

				.icon.address {
					margin-right: 28rpx;
				}

				.input-item {
					display: flex;
					padding: 19rpx 0;
					border-bottom: 2rpx solid #6e6c6b;

					.input {
						width: calc(100% - 100rpx);
						margin: 0 10rpx;
						font-size: 26rpx;
						vertical-align: middle;
						color: #6e6c6b;
					}

					.text {
						font-size: 26rpx;
						width: 80rpx;
					}

					.text.all {
						color: #bb955e;
					}
				}

				.tips {
					.text {
						margin: 16rpx 0;
						font-size: 24rpx;
						color: #6e6c6b;
						display: inline-block;
					}
				}
			}
		}

		.action {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 19rpx 0;
			border-radius: 10rpx;
			background-color: #2c2b2b;

			.total-box {
				width: 90%;
				margin: 0 auto;
				padding: 19rpx 0;

				display: flex;

				.text.name {
					width: calc(100% - 130rpx);
				}

				.text.total {
					min-width: 120rpx;
					text-align: right;
					color: #bb955e;
					float: right;
				}
			}

			.btn {
				width: 90%;
				text-align: center;
				font-size: 36rpx;
				// font-weight: bold;
				background-color: #bb955e;
				color: 2c2b2b;
				padding: 12rpx 8rpx;
				margin: 19rpx auto;
			}
		}
	}

	.u-modal-content {
		padding: 19rpx;

		.u-form-item {
			.icon {
				width: 36rpx;
				height: 36rpx;
				padding: 8rpx;
				margin-left: 4rpx;
			}
		}
	}
</style>