projectionscreenPc/src/views/assets/transfer.vue

<template>
	<div class="global-width">
		<div class="container">
			<!--当前位置-->
			<div class="hc-breadcrumb">
				<span class="hc-color4" @click="goBack">{{$route.params.type == 1 ? $t('币币账户') : $t('法币账户')}}</span>
				<i class="hc-breadcrumb-icon"></i>
				<span class="margin0">{{$t('划转')}}</span>
			</div>

			<div class="hc-breadcrumb second-position">
				<span class="hc-color1">
					<img src="../../assets/images/icon-money.png" />{{transferCoin}} {{$t('划转')}}
				</span>
			</div>

			<div class="recharge-warp">
				<div class="withdrawmoney-box">
					<div class="form-box">
						<div class="form-group">
							<label class="form-label">{{$t('选择划转币种')}}</label>

							<div class="form-control">
								<div class="hc-form-warp" @click="showCoin = !showCoin" v-if="transferCoin">
									<img class="hc-select-img" :src="'data:img/jpg;base64,' + transferCoinImg" v-if="transferCoinImg">
									<span class="hc-select-span1">{{transferCoin}}</span>

									<span class="hc-form-down-icon">
										<i class="fa-caret-down"></i>
									</span>
								</div>
								<div class="hc-form-warp" @click="showCoin = !showCoin" v-else>
									<span class="hc-select-span1">{{$t('选择划转币种')}}</span>

									<span class="hc-form-down-icon">
										<i class="fa-caret-down"></i>
									</span>
								</div>

								<!-- 选择币种弹框 -->
								<div class="choose-currencies" v-if="showCoin">
									<div class="hc-select-options" v-for="item of allCoinList" :key="item.id" @click="chooseCoin(item)">
										<img class="hc-select-img" :src="'data:img/jpg;base64,' + item.image" v-if="item.image">
										<span class="hc-select-span1">{{item.id}}</span>
									</div>

								</div>
							</div>
						</div>

						<div class="form-group">
							<label class="form-label">
								{{$t('划转方向')}}
							</label>
							
							<div class="address-form-div2">
								<div class="form-control">
									<el-input class="text-input" v-model="transferFrom" type="text" readonly>
									</el-input>
								</div>	
							</div>
							
							<div class="address-form-div4" @click="changeType">
								<img src="../../assets/images/trade/icon-equal.png">
							</div>
							
							<div class="address-form-div2">
								<div class="form-control">
									<el-input class="text-input" v-model="transferTo" type="text" readonly>
									</el-input>
								</div>	
							</div>
						</div>
						
						<div class="form-group">
							<label class="form-label">
							{{$t('划转数量')}}
							<span class="hc-color3">( {{$t('可用')}}:{{account}} )</span>
							</label>
							
							<div class="form-control">
								<el-input class="text-input" :placeholder="$t('请输入划转数量')" v-model="amount" type="text" clearable autocomplete="off" @keyup.enter.native="submit">
								</el-input>
							</div>
						</div>
						
						<div class="form-group">
							<div class="address-form-div2">
								<label class="form-label">{{$t('到账数量')}}</label>
								<div class="form-control">
									<input type="text" class="text-input" :value="summary" readonly>
								</div>
							</div>
							
							<div class="address-form-div3">
								<label class="form-label">{{$t('支付密码')}}</label>
								<div class="form-control">
									<el-input class="text-input" :placeholder="$t('请输入支付密码')" v-model="password" type="password" clearable autocomplete="off" @keyup.enter.native="submit">
									</el-input>
								</div>
							</div>
						</div>
						
						<div class="form-group">
							<el-button class="form-submit-btn" type="primary" :loading="true" v-if="loading">{{$t('提交中...')}}</el-button>
							<el-button class="form-submit-btn" type="primary" @click="submit" v-else>{{$t('确认划转')}}</el-button>
						</div>
					</div>
				</div>

				<div class="address-line"></div>
				<div class="recharge-reminder">
					<div class="recharge-r-top">
						<i class="fa-exclamation"></i>
						<span>{{$t('温馨提示')}}</span>
					</div>

					<p>{{$t('1. 最小划转数量为：')}}{{minVolumn}}{{transferCoin}}{{$t('，最大划转数量为：')}}{{maxVolumn}}{{transferCoin}}</p>
					<p>{{$t('2. 请务必确认电脑及浏览器安全，防止信息被篡改或泄露。')}}</p>
				</div>
				<div class="address-line"></div>

				<div class="address-bot">
					<div class="address-div1">
						<div class="address-div2">{{$t('划转记录')}}</div>
						<!-- <span class="hc-breadcrumb-r">{{$t('查看更多')}}</span> -->
					</div>

					<table class="table">
						<thead>
							<tr>
								<th>
									<div class="cell">{{$t('时间')}}</div>
								</th>
								<th>
									<div class="cell">{{$t('币种')}}</div>
								</th>
								<th>
									<div class="cell">{{$t('数量')}}</div>
								</th>
								<th>
									<div class="cell">{{$t('类型')}}</div>
								</th>
								<th>
									<div class="cell">{{$t('备注')}}</div>
								</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="item of recordsList" :key="item.id">
								<td>
									<div class="cell">{{item.createDatetime | dateFormat('YYYY-MM-DD hh:mm:ss')}}</div>
								</td>
								<td>
									<div class="cell">{{item.coinId}}</div>
								</td>
								<td>
									<div class="cell">{{item.amount}}</div>
								</td>
								<td>
									<div class="cell">{{$t('划转')}}</div>
								</td>
								<td>
									<div class="cell">{{item.remark}}</div>
								</td>
							</tr>
						</tbody>
					</table>
					
					<no-content :isText="$t('暂无数据')" :isContent="isContent"></no-content>

					<el-pagination class="list-pages" background layout="prev, pager, next" v-show="!isContent" :page-count="pageTotal" :current-page="currentPage" @next-click="pagesChange" @prev-click="pagesChange" @current-change="pagesChange"></el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	import noContent from '@/components/no_content'
	export default {
		name: 'withdraw',
		components: {
			noContent,
		},
		data() {
			return {
				transferCoin: '', //划转币种
				showCoin: false, //选择币种弹窗
				assetsCaseCode: 'COIN_TO_COIN', //划转转出
				targetAssetsCaseCode: 'F_COIN', //划转转入
				amount: '', //划转数量
				password: '', //支付密码
				
				account: 0, //余额
				fee: 0, //提币手续费
				minFee: 0, //最低手续费
				minVolumn: 0, //最小提币数量
				maxVolumn: 0, //最大提币数量
				
				loading: false,

				recordsList: [], //划转记录
				isContent: false,
				pageTotal: 0, //总页数
				currentPage: 1, //默认当前页
			}
		},
		computed: {
			...mapState('trend', ['allCoinList']),

			transferCoinImg() { //币种的图片
				let img;
				this.allCoinList.forEach(item => {
					if (item.id == this.transferCoin) {
						img = item.image;
					}
				})
				return img;
			},
			transferFrom() {
				let text;
				text = this.assetsCaseCode == 'COIN_TO_COIN' ? this.$t('币币账户') : this.$t('法币账户');
				return text;
			},
			transferTo() {
				let text;
				text = this.targetAssetsCaseCode == 'COIN_TO_COIN' ? this.$t('币币账户') : this.$t('法币账户');
				return text;
			},
			
			summary() { //实际扣除数量
				let value = 0;
				let remainder = this.common.accAdd(1, this.fee);
				
				if(this.amount > 0) {
					if(this.common.accMul(this.fee, this.amount) < this.minFee) { //最低手续费
						value = this.common.accAdd(this.amount, this.minFee).toFixed(8);
					} else {
						value = this.common.accMul(this.amount, remainder).toFixed(8);
					}
				}
				return value;
			}
		},
		methods: {
			getTransferInfo() { //获取提币信息
				this.getAxios('/api/user/coin/list')
					.then(data => {
						data.data.forEach(item => {
							if(item.id == this.transferCoin) {
								this.fee = item.changeCaseFee;
								this.minFee = item.changeCaseMinFee;
								this.minVolumn = item.changeCaseMinLimit;
								this.maxVolumn = item.changeCaseMaxLimit;
							}
						})
					})
			},
			getBalance() { //获取余额
				this.getAxios('/api/user/assets/list?type=' + this.assetsCaseCode)
					.then(data => {
						let list = data.data;
						list.forEach(item => {
							if(item.coinId == this.transferCoin) {
								this.account = item.normalAmount;
							}
						})
					})
			},
			getRecords(pages) { //获取提币记录
				let params = {
					data: {
						assetsType: 'A_I_T_NORMAL',
						dealCode: 'assets_transfer',
						//caseCode: this.listType == 1 ? 'COIN_TO_COIN' : 'F_COIN',
					},
					limit: 10,
					page: pages
				}
				this.currentPage = pages;
				
				this.postAxios('/api/user/assets/flow/page', params)
					.then(data => {
						this.pageTotal = data.data.pages;

						if (data.data.total == 0) {
							this.isContent = true;
						} else {
							this.isContent = false;
						}
						
						this.recordsList = [];
						data.data.records.forEach(item => {
							this.recordsList.push(item);
						})
					})
			},
			pagesChange(pages) {
				this.getRecords(pages);
			},

			chooseCoin(item) { //选择币种
				this.transferCoin = item.id;
				this.showCoin = false;
				
				this.getTransferInfo();
				this.getBalance();
				this.getRecords(1);
			},
			changeType() { //账户切换
				if(this.assetsCaseCode == 'COIN_TO_COIN') {
					this.assetsCaseCode = 'F_COIN';
					this.targetAssetsCaseCode = 'COIN_TO_COIN';
				} else {
					this.assetsCaseCode = 'COIN_TO_COIN';
					this.targetAssetsCaseCode = 'F_COIN';
				}
				this.getBalance();
			},
			
			submit() {
				if(this.loading) {
					return;
				}
				if(!this.amount) {
					this.$message.error(this.$t('请输入划转数量！'));
					return;
				}
				// if(this.amount < this.minVolumn) {
				// 	this.$message.error(this.$t('划转数量不能小于最小划转数量') + this.minVolumn + this.transferCoin);
				// 	return;
				// }
				// if(this.amount > this.maxVolumn) {
				// 	this.$message.error(this.$t('划转数量不能大于最大划转数量') + this.maxVolumn + this.transferCoin);
				// 	return;
				// }
				if(!this.password) {
					this.$message.error(this.$t('请输入支付密码！'));
					return;
				}
				this.loading = true;
				
				let params = {
					coinId: this.transferCoin,
					amount: this.amount,
					assetsCaseCode: this.assetsCaseCode,
					targetAssetsCaseCode: this.targetAssetsCaseCode,
					payPassword: this.password
				}
				this.putAxios('/api/user/assets/transfer', params)
					.then(() => {
						this.$message.success(this.$t('划转提交成功！'));
						
						this.loading = false;
						this.getRecords(1);
						this.getBalance();
						this.clearData();
					})
					.catch(() => {
						this.loading = false;
					})
			},
			clearData() {
				this.amount = '';
				this.password = '';
			},
			
			goBack() {
				if(this.$route.params.type == 1) {
					this.$router.push('/assets/coincoin');
				} else {
					this.$router.push('/assets/currency');
				}
			},
		},
		created() {
			this.transferCoin = this.$route.params.id;
			if(this.$route.params.type == 2) {
				this.assetsCaseCode = 'F_COIN';
				this.targetAssetsCaseCode = 'COIN_TO_COIN';
			}
			this.getTransferInfo();
			this.getBalance();
			this.getRecords(1);
		}
	}
</script>

<style scoped>
	.address-form-div4 {
		width: 32px;
		display: inline-block;
		margin: 0 9px;
	}
</style>