nzhbsr/pages/transaction/tbdetail.vue

<template>
	<view class="content">
		<view class="vheight"></view>
		<view class="top flex">
			<image @click="back()" class="top-icon1" src="../../static/img/cb2.png" mode=""></image>
			<image class="top-icon2" src="../../static/img/cb1.png" mode=""></image>
		</view>
		<view class="title">提幣</view>
		<view class="type flex" @click="navTo('/pages/transaction/cblist')">
			<view class="type-left">幣種</view>
			<view class="type-right">
				<view class="type-name">{{ info.title }}</view>
				<image class="type-icon" src="../../static/icon/user-back.png" mode=""></image>
			</view>
		</view>
		<view class="main">
			<view class="main-title">提幣網絡</view>
			<view class="main-list">{{ info.czline }}</view>
			<view class="main-title" style="margin-top: 20rpx;">提幣地址</view>
			<view class="sr-input"><input placeholder="請輸入提幣地址" type="text" v-model="address" /></view>
			<view class="sr-sl flex">
				<view class="sr-title">提幣數量</view>
				<view class="sr-num" v-if="info">可用 {{ money }} {{ info.name.toLocaleUpperCase() }}</view>
			</view>
			<view class="sr-input flex">
				<input placeholder="請輸入提幣數量" type="number" v-model="num" />
				<view class="main-type-box">
					<view class="main-type" v-if="info">{{ info.name.toLocaleUpperCase() }}</view>
					<view class="all" @click="qb()">全部</view>
				</view>
			</view>
			<view class="sr-btn" @click="submit()">提交</view>
			<view class="sr-tip flex" v-if="num">
				<view class="sr-tip-item">實際到賬</view>
				<view class="sr-tip-item" v-if="info.sxftype == 1">{{ num * 1 * (1 - (info.txsxf * 1) / 100) }}</view>
				<view class="sr-tip-item" v-if="info.sxftype == 2">{{ num * 1 - info.txsxf_n * 1 }}</view>
			</view>
		</view>
		<view class="info">
			<view class="info-item red">
				提币扣除{{ info.sxftype == 1 ? info.txsxf + '%' : info.txsxf_n + info.title }}手续费 , 輸小提幣數量：{{ info.txminnum
				}}{{ info.title }}，小於最小金額的提幣將不會到賬且無法退回
			</view>
			<view class="info-item">為保障資金安全，當您賬戶安全策略變更，密碼修改，我們會對提幣進行人工審核，請耐心等待工作人員電話或郵件聯繫.</view>
			<view class="info-item">請務必確認電腦及瀏覽器安全，防止信息被篡改或洩露</view>
		</view>
	</view>
</template>

<script>
import { txpage, tbhandle } from '@/api/wallet.js';
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
import uniCopy from '@/js_sdk/xb-copy/uni-copy.js';
export default {
	data() {
		return {
			id: '',
			info: '',
			address: '',
			num: '',
			money: ''
		};
	},
	onLoad(opt) {
		this.id = opt.type;
		this.loadData();
	},
	onShow() {},
	onReachBottom() {},
	onReady() {},
	methods: {
		loadData() {
			txpage({ id: this.id }).then(({ data }) => {
				this.info = data.info;
				this.money = data.money;
			});
		},
		qrR(res) {
			console.log(res, '123456');
		},
		back() {
			uni.navigateBack();
		},
		qb() {
			this.num = this.money;
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		submit() {
			console.log(222);
			if (this.num < 0) {
				return this.$api.msg('提幣數量不能為0');
			}
			if (!this.address) {
				return this.$api.msg('請輸入上傳地址');
			}
			tbhandle({ id: this.id, num: this.num, address: this.address }).then(e => {
				this.num = '';
				this.image = '';
				return this.$api.msg('提交申請成功，請耐心等待審核');
			});
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	min-height: 100%;
	height: auto;
	background: #f5f5f5;
}
.vheigh {
	height: var(--status-bar-height);
}
.top {
	padding: 20rpx 40rpx;
	.top-icon1 {
		width: 52rpx;
		height: 36rpx;
	}
	.top-icon2 {
		width: 48rpx;
		height: 48rpx;
	}
}
.title {
	padding: 20rpx 20rpx 0;
	font-size: 52rpx;
	font-weight: 500;
}
.type {
	margin: 20rpx auto 0;
	width: 690rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx 20rpx;
	.type-left {
		font-size: 32rpx;
		color: #000;
	}
	.type-right {
		display: flex;
		align-items: center;
		.type-name {
			font-size: 36rpx;
			font-weight: bold;
			color: #fcd535;
			margin-right: 10rpx;
		}
		.type-icon {
			width: 24rpx;
			height: 24rpx;
		}
	}
}
.main {
	margin: 20rpx auto 0;
	width: 690rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx 20rpx;
	.main-title {
		font-size: 32rpx;
		color: #000;
	}
	.main-list {
		margin-top: 20rpx;
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		border: 2px solid #fcd535;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #fcd535;
	}
	.sr-input {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background: #f5f5f5;
		border-radius: 20rpx;
		padding: 0rpx 30rpx;
		input {
			font-size: 28rpx;
			padding-left: 30rpx;
			background: #f5f5f5;
		}
	}
	.sr-sl {
		margin-top: 20rpx;
		.sr-num {
			color: #707a8a;
			font-size: 24rpx;
		}
	}
	.main-type-box {
		display: flex;
		align-items: center;
		.main-type {
			font-size: 32rpx;
			color: #707a8a;
			margin-right: 20rpx;
		}
		.all {
			font-size: 32rpx;
			color: #707a8a;
		}
	}
	.sr-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 10rpx;
		margin: 20rpx auto 0;
		background: linear-gradient(to left, #eeb80d, #ffe35b);
		font-size: 28rpx;
		color: #000;
	}
	.sr-tip {
		margin-top: 20rpx;
		.sr-tip-item {
			font-size: 24rpx;
			color: #707a8a;
		}
	}
}
.info {
	margin: 20rpx auto 0;
	width: 690rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx 20rpx;
	.info-item {
		font-size: 24rpx;
		color: #000;
		margin-bottom: 20rpx;
	}
	.red {
		color: red;
	}
}
</style>