nzhbsr/pages/transaction/transfer.vue

<template>
	<view class="content">
		<view class="" style="height: 50rpx;"></view>
		<view class="wrap">
			<view class="imgbox_1">{{ $t('user.hzlx') }}</view>
			<view class="flex">
				<view class="imgbox_noaction" :class="{ imgbox_action: current == 1 }" @click="current = 1">{{ $t('user.zjzhzhyzh') }}</view>
				<view class="imgbox_noaction" :class="{ imgbox_action: current == 2 }" @click="current = 2">{{ $t('user.hyzhzzjzh') }}</view>
			</view>
			<view class="flex" style="margin-top: 20rpx;">
				<view class="item-left">{{ $t('user.zjzh') }}</view>
				<view class="item-right">{{ $t('user.kyye') }} {{ userInfo.usdt }} USDT</view>
			</view>
			<view class="flex">
				<view class="item-left">{{ $t('user.hyzh') }}</view>
				<view class="item-right">{{ $t('user.kyye') }} {{ userInfo.money }} USDT</view>
			</view>
			<view class="sr-wrap flex">
				<input type="digit" :placeholder="$t('user.qsrhzsl')" class="sr-inp" v-model="tbnum" />
				<view class="">USDT</view>
			</view>
			<view class="sub-btn" @click="transfer">{{ $t('user.tj') }}</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() {
		uni.setNavigationBarTitle({ title: this.$t('user.zjhz') });
		getUser().then(re => {
			this.setUserInfo(re.data);
		});
	},
	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: this.$t('user.hzcg'),
						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>