kunpeng/pages/finance/transfer.vue

<template>
	<view class="container">
		<view class="list-box">
			<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/img23.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 } 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;
				trade({}).then(({
					data
				}) => {
					obj.moneyTypeList = data;
					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].wallet.money;
					}
				});
			},
			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.wallet.money;
			},
			useOutClickSide() {
				this.$refs.easySelect.hideOptions && this.$refs.easySelect.hideOptions()
			},
		}
	};
</script>

<style lang="scss">
	page {
		min-height: 100%;
		background-color: #ffffff;
		.container {
			width: 100%;
		}
	}

	.list-box {
		padding: 60rpx 30rpx;
		height: 350rpx;
		background-color: #5771DF;
		.list {
			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: 30rpx 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: #5771DF;
		}
		.all-num{
			font-size: 24rpx;
			font-weight: bold;
			color: #333333;
			text{
				font-size: 26rpx;
				padding: 0rpx 10rpx;
				color: #5771DF;
			}
		}
		.submit {
			background-color: #5771DF;
			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;
		}
	}
</style>