nzhbsr/pages/transaction/transfer.vue

<template>
	<view class="content">
		<view class="" style="height: 50rpx;">

		</view>
		<view class="wrap">
			<view class="imgbox_1">
				劃轉類型
			</view>
			<view class="flex">
				<view class="imgbox_noaction" :class="{'imgbox_action': current == 1}" @click="current = 1">
					資金賬戶轉合約賬戶
				</view>
				<view class="imgbox_noaction" :class="{'imgbox_action': current == 2}" @click="current = 2">
					合約帳戶甎資金賬戶
				</view>
			</view>
			<view class="flex" style="margin-top: 20rpx;">
				<view class="item-left">
					資金賬戶
				</view>
				<view class="item-right">
					可用餘額 {{userInfo.usdt}} USDT
				</view>
			</view>
			<view class="flex">
				<view class="item-left">
					合約賬戶
				</view>
				<view class="item-right">
					可用餘額 {{userInfo.money}} USDT
				</view>
			</view>
			<view class="sr-wrap flex">
				<input type="digit" placeholder="輸入劃轉數量" class="sr-inp" v-model="tbnum" />
				<view class="">
					USDT
				</view>
			</view>
			<view class="sub-btn" @click="transfer">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		transfer,
		getUser
	} from '@/api/login.js'
	export default {
		data() {
			return {
				current: 1,
				tbnum: '',
				loaded: false
			}
		},
		onLoad() {
			console.log(this.userInfo)
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		onShow() {

		},
		onReachBottom() {

		},
		onReady() {

		},
		methods: {
			...mapMutations('user', ['setUserInfo']),
			transfer() {
				let obj = this
				if(obj.loaded) {
					return
				}
				obj.loaded = true
				transfer({
					tbnum: obj.tbnum,
					type: obj.current
				}).then(res => {
					
					uni.showToast({
						title: '劃轉成功',
						duration: 2000,
						position: 'top'
					});
					getUser().then(re => {
						obj.loaded = false
						obj.setUserInfo(re.data)
					})
				}).catch(err => {
					obj.loaded = false
				})
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		width: 640rpx;
		height: 610rpx;
		padding: 40rpx;
		background-color: #fff;
		margin: auto;
		border-radius: 20rpx;

		.imgbox_1 {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 32rpx;
		}

		.imgbox_noaction {
			width: 280rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			font-size: 24rpx;
			border: #ccc solid 1px;
			color: #ccc;
			border-radius: 20rpx;
		}

		.imgbox_action {
			color: #FCD535;
			border: #FCD535 solid 1px;

		}
	}

	.item-left {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 32rpx;
	}

	.item-right {
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		color: #707A8A;
	}

	.sr-wrap {
		width: 560rpx;
		height: 80rpx;
		background-color: #f5f5f5;
		border-radius: 20rpx;
		padding: 0 20rpx;

		.sr-inp {
			width: 352rpx;
			height: 60rpx;
			line-height: 60rpx;
			display: inline-block;
		}
	}

	.sub-btn {
		width: 560rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #000;
		text-align: center;
		font-size: 28rpx;
		background: linear-gradient(to left, #eeb80d, #ffe35b);
		margin-top: 30rpx;
		border-radius: 20rpx;
	}
</style>