You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
397 lines
11 KiB
397 lines
11 KiB
<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>
|