kunpeng/pages/finance/withdraw.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="addr" placeholder="请输入提币地址"/>
			<view class="from-title">数量</view>
			<view class="flex input-tpl">
				<input class="input-box" type="number" v-model="num" :placeholder="'最低数量 1.0'+name"/>
				<view class="all" @click="num = money">全部</view>
			</view>
			<view class="all-num">可用<text>{{money *1 }}</text>{{name}}</view>
			<view class="submit" @click="cash">确定</view>
			<view class="tpl-box" v-show="showText == true">提币数量在1.0-10000.0个之间，认真核对提币地址；手续费：{{data.service}}{{data.service_type}}</view>
		</view>
	</view>
</template>
<script>
	import { cash,cashmoney_type,calculator } from '@/api/finance.js';
	import selectss from '@/components/select.vue';
	export default {
		components: {
			selectss
		},
		data() {
			return {
				moneyTypeList: [],
				name: '',
				code: '',
				logo: '',
				money:'',
				
				addr: '',
				num: '',
				
				data:'',
				showText:false
			};
		},
		onLoad(option) {
			if (option.name) {
				this.name = option.name;
				this.logo = option.logo;
				this.code = option.code;
				this.money = option.money;
			}
			this.moneyType();
		},
		onShow() {

		},
		watch:{
			num(newVal, oldVal) {
				this.calculator();
			}
		},
		methods: {
			// 所有币种
			async moneyType() {
				let obj = this;
				cashmoney_type({}).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;
					}
				});
			},
			calculator(){
				let obj = this;
				calculator({
					money_type:obj.code,
					money:obj.num
				}).then(({data}) => {
					obj.data  = data;
					obj.showText = true;
				});
			},
			cash(){
				let obj = this;
				if(obj.code == ''){
					obj.$api.msg('请选择币种！');
					return;
				}
				if(obj.addr == ''){
					obj.$api.msg('请输入提币地址！');
					return;
				}
				if(obj.num == ''){
					obj.$api.msg('请输入提币数量！');
					return;
				}
				if(obj.num < 1 ){
					obj.$api.msg('最低数量不能低于1！');
					return;
				}
				cash({
					money_type:obj.code,
					money:obj.num,
					address:obj.addr,
				}).then((data) => {
					obj.money = '';
					obj.address = '';
					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;
		}
		.submit {
			background-color: #5771DF;
			margin-top: 165rpx;
			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>