BCMM/pages/user/transfer.vue

<template>
	<view class="container">
		<view class="listBox">
			<view class="titleTetx">{{$t('user.收款地址')}}</view>
			<view class="flex listTpl">
				<input type="text" class="inputBox" v-model="address" :placeholder="$t('user.请输入收款地址')" />
			</view>
		</view>
		<view class="listBox" style="padding-top: 0rpx;">
			<view class="titleTetx">{{$t('user.转账数量')}}</view>
			<view class="listTpl flex">
				<input type="number" class="inputBox" v-model="number" :placeholder="$t('user.请输入转账金额')" />
				<view class="listAll" @click="number=money">{{$t('user.全部')}}</view>
			</view>
			<view class="flex tipBox">
				<view class="tip1">{{$t('user.可用余额')}}{{money||0}}{{type}}</view>
			</view>
		</view>
		<view class="submission">
			<button class="golden" type="golden" hover-class="none" @click="submission">{{$t('user.确认转账')}}</button>
		</view>
	</view>
</template>

<script>
	import {
		trade
	} from '@/api/index.js';
	import {
		getUserInfo
	} from '@/api/user.js';
	import {
		mapState,
	} from "vuex";
	export default {
		data() {
			return {
				address: '',
				number: '',
				money: 0,
				type: '',
			};
		},
		computed: {
			...mapState("user", ['userInfo']),
		},
		onLoad(option) {
			this.type = option.type;
			this.getUserInfo();
		},
		methods: {
			getUserInfo() {
				const that = this;
				getUserInfo({}).then(
					(res) => {
						that.money = +res.data[that.type];
					}
				).catch(
					(res) => {
						console.log(res)
					}
				)
			},
			submission() {
				const that = this;
				const USER_TRADE = 'USER_TRADE' + (new Date()).getTime();
				ethereum.request({
					"method": "personal_sign",
					"params": [
						USER_TRADE,
						that.userInfo.address
					]
				}).then((res) => {
					trade({
						token: that.type,
						num: that.number,
						address: that.address,
						sign: res,
						msg: USER_TRADE,
					}).then((res) => {
						uni.showToast({
							title: res.msg,
							duration: 1500,
						});
						that.number = '';
						that.address='';
						that.getUserInfo();
					}).catch(
						(res) => {
					
						}
					)
				});
			}
		}
	};
</script>

<style lang="scss">
	.container {
		padding: 25rpx 25rpx;
		background-color: rgb(12, 8, 21);
		min-height: 100vh;
	}

	.listBox {
		padding: 46rpx 25rpx;
		background: rgba(255, 255, 255, .09);
		border-radius: 10rpx;

		.titleTetx {
			font-weight: bold;
			font-size: 24rpx;
			color: #FFFFFF;
			padding-bottom: 25rpx;
		}

		.tipBox {
			padding-top: 15rpx;
			font-size: 24rpx;

			.tip1 {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #0C5AFA;
				line-height: 45rpx;
			}
		}
	}

	.listTpl {
		border-bottom: 1rpx solid #6A7288;
		padding-bottom: 25rpx;

		.inputBox {
			font-size: 35rpx;
			color: #FFFFFF;
		}

		.listTip {}

		.listAll {
			padding-left: 30rpx;
			font-size: 30rpx;
			color: #0C5AFA;
		}
	}

	.input-placeholder {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #666666;
	}

	.submission {
		padding: 80rpx 25rpx;
		padding-bottom: 25rpx;

		.golden {
			background: linear-gradient(90deg, #7D32FF, #3EE0FF);
			color: #ffffff;
		}
	}
</style>