NFT/pages/assets/transfer.vue

<template>
	<view class="container">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<view class="goback-box" @click="toBack"><image class="goback" src="../../static/img/fanhui.png" mode=""></image></view>
		<view class="header">转账</view>

		<view class="list-box">
			<view class="img"><image src="../../static/img/zhuanzhang-bg.png" mode=""></image></view>
			<view class="list flex">
				<view class="flex_item list-item">
					<image :src="logo"></image>
					<view>{{ name }}</view>
				</view>
				<view class="flex_item list-tpl">
					<view class="content" @click="useOutClickSide"><selectss ref="easySelect" :options="moneyTypeList" :value="name" @selectOne="selectOne"></selectss></view>
					<image src="../../static/img/jiantou.png"></image>
				</view>
			</view>
		</view>
		<view class="from-box">
			<view class="from-title">对方账号</view>
			<input class="input-box" type="text" v-model="account" placeholder="请输入对方账号" />
			<view class="from-title">对方UID</view>
			<input class="input-box" type="text" v-model="UUID" placeholder="请输入对方UID" />
			<view class="from-title">交易密码</view>
			<input class="input-box" type="password" v-model="password" placeholder="请输入交易密码" />
			<view class="from-title">转账数量</view>
			<view class="flex input-tpl">
				<input class="input-box" type="number" v-model="num" placeholder="请输入数量" />
				<view class="all" @click="num = money">全部</view>
			</view>
			<view class="all-num">
				可用
				<text>{{ money * 1 }}</text>
				{{ name }}
			</view>
			<view class="submit" @click="transfer">确定</view>
			<!-- <view class="tpl-box">转账数量10.0个起，手续费：0.0001FIL。</view> -->
		</view>
	</view>
</template>
<script>
import { goPay, trade, wallet } from '@/api/finance.js';
import selectss from '@/components/select.vue';
export default {
	components: {
		selectss
	},
	data() {
		return {
			moneyTypeList: [],
			logo: '',
			name: '',
			code: '',
			money: '',

			account: '',
			UUID: '',
			num: '',
			password: ''
		};
	},
	onLoad(option) {
		if (option.name) {
			this.name = option.name;
			this.logo = option.logo;
			this.code = option.code;
		}
		this.moneyType();
	},
	onShow() {},
	methods: {
		// 所有币种
		async moneyType() {
			let obj = this;
			wallet({}).then(({ data }) => {
				const arr = Object.keys(data.back);
				console.log(arr);
				let ar = [];
				arr.forEach(e => {
					ar.push(data.back[e]);
				});

				obj.moneyTypeList = ar.filter(e => {
					console.log(e);
					if (e.can_trade == 1) {
						return e;
					} else {
						return;
					}
				});
				console.log(obj.moneyTypeList);
				if (obj.logo == '') {
					obj.logo = obj.moneyTypeList[0].LOGO;
					obj.name = obj.moneyTypeList[0].name;
					obj.code = obj.moneyTypeList[0].code;
					obj.money = obj.moneyTypeList[0].money.money - obj.moneyTypeList[0].money.only_pink*1;
				}
			});
		},
		transfer() {
			let obj = this;
			if (obj.code == '') {
				obj.$api.msg('请选择币种！');
				return;
			}
			if (obj.account == '') {
				obj.$api.msg('请输入对方账号！');
				return;
			}
			if (obj.UUID == '') {
				obj.$api.msg('请输入对方UUID！');
				return;
			}
			if (obj.password == '') {
				obj.$api.msg('请输入交易密码！');
				return;
			}
			if (obj.num == '') {
				obj.$api.msg('请输入转账数量！');
				return;
			}
			goPay({
				type: obj.code,
				num: obj.num,
				to_uid: obj.UUID,
				trade_psw: obj.password,
				to_user_account: obj.account
			}).then(data => {
				obj.num = '';
				obj.UUID = '';
				obj.password = '';
				obj.account = '';
				obj.$api.msg(data.msg);
			});
		},
		selectOne(options) {
			this.logo = options.LOGO;
			this.name = options.name;
			this.code = options.code;
			this.money = options.money.money - options.money.only_pink;
		},
		useOutClickSide() {
			this.$refs.easySelect.hideOptions && this.$refs.easySelect.hideOptions();
		},
		toBack() {
			uni.switchTab({
				url: '/pages/assets/assets'
			});
		}
	}
};
</script>

<style lang="scss">
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
	background: linear-gradient(90deg, #60bab0, #45969b);
}
page {
	min-height: 100%;
	background-color: #ffffff;
	.container {
		width: 100%;
	}
}

.list-box {
	padding: 104rpx 30rpx 60rpx;
	height: 350rpx;
	.img {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 440rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.list {
		position: relative;
		z-index: 10;
		background-color: #ffffff;
		border-radius: 15rpx;
		padding: 15rpx 23rpx;
		.list-item {
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
			image {
				width: 43rpx;
				height: 43rpx;
				margin-right: 15rpx;
			}
		}
		.list-tpl {
			image {
				width: 15rpx;
				height: 25rpx;
				margin-left: 20rpx;
			}
		}
	}
}
.from-box {
	margin: 74rpx 30rpx;
	padding: 44rpx 25rpx;
	background-color: #ffffff;
	border-radius: 15rpx;
	position: relative;
	top: -180rpx;
	.from-title {
		font-size: 24rpx;
		font-weight: bold;
		color: #333333;
	}
	.input-box {
		font-size: 26rpx;
		font-weight: 500;
		color: #666666;
		margin: 35rpx 0rpx;
	}
	.all {
		font-size: 30rpx;
		font-weight: 500;
		color: #44969d;
	}
	.all-num {
		font-size: 24rpx;
		font-weight: bold;
		color: #333333;
		text {
			font-size: 26rpx;
			padding: 0rpx 10rpx;
			color: #44969d;
		}
	}
	.submit {
		background: linear-gradient(90deg, #60bab0, #60bab0, #45969b);
		margin-top: 160rpx;
		color: #ffffff;
		text-align: center;
		padding: 26rpx 0rpx;
		border-radius: 15rpx;
	}

	.tpl-box {
		text-align: left;
		font-size: 28rpx;
		font-weight: 500;
		color: #fb3a2f;
		margin-top: 26rpx;
	}
}
.goback-box {
	position: absolute;
	left: 18rpx;
	top: var(--status-bar-height);
	height: 80rpx;
	display: flex;
	align-items: center;
}
.goback {
	z-index: 100;
	width: 34rpx;
	height: 34rpx;
}
.header {
	color: #ffffff;
	position: absolute;
	left: 0;
	top: var(--status-bar-height);
	width: 100%;
	height: 80rpx;
	font-size: 32rpx;
	font-weight: 700;
	z-index: 99;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>