<template>
|
<div id="mining-account">
|
<!-- <van-tabs v-model="active">-->
|
<!-- <van-tab :title="$t('市价')"></van-tab>-->
|
<!-- </van-tabs>-->
|
<div class="flex-centerY" style="border-radius: 5px;background: white;padding:15px 10px;margin: 0 15px">
|
<div style="flex: 1">
|
<mining-exchange-input :isMoney="true" v-model="form.volume" :actions="actions"
|
@select="onSelect('symbol', $event)" @input="onInput" :coin="form.symbol" @max="onMax"
|
:type="1" :tips="[]"
|
:showMax="true"/>
|
<div v-if="show" style="margin-left: 7px;margin-top: 5px;font-size: 14px;color: #999">
|
{{ Number(amountAvailable).toFixed(8) }}
|
</div>
|
</div>
|
<div style="flex: 1" class="flex-center">
|
<img src="../../assets/new/img.png" style="width: 45px;height: 45px"/>
|
</div>
|
<div style="flex: 1">
|
<div class="flex-position-end-to-start">
|
<mining-exchange-input :title="$t('至')" :value="form.volume ? (form.volume * form.rate).toFixed(5) : ''"
|
:actions="actions" @select="onSelect('symbol_to', $event)" :disabled="true" :type="2"
|
:coin1="form.symbol_to"
|
:tips="[]" :showMax="false"/>
|
</div>
|
<div v-if="show" style="margin-left: 7px;margin-top: 5px;font-size: 14px;color: #bbb"
|
class="flex-position-end-to-start">
|
{{ Number(amountAvailable2).toFixed(8) }}
|
</div>
|
</div>
|
</div>
|
<div style="padding: 20px">
|
<div class="flex-centerY flex-position-between">
|
<div>
|
{{ $t("交易数量") }}
|
</div>
|
<div style="font-size: 12px;color: #999">
|
1{{ form.symbol }} ≈ {{ (1 * form.rate).toFixed(5) }}{{ form.symbol_to }}
|
</div>
|
</div>
|
<div style="margin-top: 10px">
|
<van-field
|
:placeholder="$t('请输入数量')"
|
v-model="form.volume"
|
@input="onInput"
|
type="number"
|
style="border: #ccc 1px solid;border-radius: 3px"
|
:border="true"
|
>
|
<template #button>
|
<div style="color: #1D91FF" @click="onMax">
|
{{ $t("全部") }}
|
</div>
|
</template>
|
</van-field>
|
</div>
|
<van-cell style="margin-top: 10px;background: transparent;border-bottom: #ccc 1px solid" :title="$t('手续费')"
|
:value="'0.0%'+' '+form.symbol_to"/>
|
<van-cell style="margin-top: 10px;background: transparent;border-bottom: #ccc 1px solid" :title="$t('实际到账')"
|
:value="(form.volume ? (form.volume * form.rate).toFixed(5) : '0.00000')+' '+form.symbol_to"/>
|
</div>
|
<div v-if="false" style="position: relative" class="px-30 pb-104">
|
<mining-exchange-input :title="$t('从')" :isMoney="true" v-model="form.volume" :actions="actions"
|
@select="onSelect('symbol', $event)" @input="onInput" @max="onMax" :type="1"
|
:coin="form.symbol" :tips="[]"
|
:showMax="true"/>
|
<div v-if="show" class="font-28 textColor">{{ $t('可用数量') }}：<span class="textColor">{{
|
amountAvailable
|
}} {{ form.symbol.toUpperCase() }}</span>
|
</div>
|
<div class="flex ex-bg justify-center my-42 items-center">
|
<img src="@/assets/image/exchange/icon_3.png" alt="" class="w-25 h-25" @click="onSwitch"/>
|
</div>
|
<mining-exchange-input :title="$t('至')" :value="form.volume ? (form.volume * form.rate).toFixed(5) : ''"
|
:actions="actions" @select="onSelect('symbol_to', $event)" :disabled="true" :type="2"
|
:coin1="form.symbol_to"
|
:tips="[]" :showMax="false"/>
|
</div>
|
<div class="exchange-btn w-full flex justify-center" style="margin-top: 20px">
|
<p class="h-100 btnMain mx-auto flex justify-center items-center text-white w-768" @click="onConfirm">
|
{{ $t('闪兑') }}
|
</p>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import MiningExchangeInput from "@/components/mining-exchange-input";
|
import {Grid, GridItem, Popup, Icon, Field, Cell} from "vant";
|
// import { mapState } from "vuex";
|
import {_exchangeRage, _getAllWallet, _getBalance, _initWidthdrawl, _widthdrawl, _records} from "@/API/fund.api";
|
import {_getBalance as __getBalance} from '@/API/trade.api'
|
import {mapGetters} from "vuex";
|
import Axios from "@/API/recharge";
|
import {List, PullRefresh, Tab, Tabs} from 'vant';
|
import {debounce} from '@/utils/utis'
|
|
export default {
|
name: "MiningAcccount",
|
components: {
|
[Grid.name]: Grid,
|
[GridItem.name]: GridItem,
|
[Popup.name]: Popup,
|
[Icon.name]: Icon,
|
[Field.name]: Field,
|
[Cell.name]: Cell,
|
MiningExchangeInput,
|
[List.name]: List,
|
[PullRefresh.name]: PullRefresh,
|
[Tab.name]: Tab,
|
[Tabs.name]: Tabs
|
},
|
props: {
|
show: {
|
type: Boolean,
|
default: false,
|
},
|
},
|
computed: {
|
...mapGetters('user', ['userInfo']),
|
amountAvailable() {
|
let res
|
let data = this.wallets.find(item => item.symbol === this.form.symbol.toLowerCase())
|
if (data) {
|
res = data.usable
|
} else {
|
res = 0
|
}
|
return res;
|
},
|
amountAvailable2() {
|
let res
|
let data = this.wallets.find(item => item.symbol === this.form.symbol_to.toLowerCase())
|
if (data) {
|
res = data.usable
|
} else {
|
res = 0
|
}
|
return res;
|
},
|
tabList() {
|
return [
|
{id: 1, text: this.$t('提幣')},
|
{id: 2, text: this.$t('交易記錄')}
|
]
|
},
|
addr() {
|
const account = this.userInfo.account
|
return account && account.substr(0, 5) + '********' + account.substr(account.length - 5)
|
}
|
},
|
data() {
|
return {
|
showPopup: false,
|
activeRecord: 'exchange',
|
valueTwo: 0,
|
rate: 0,
|
form: { // 闪兑
|
symbol: 'ETH',
|
symbol_to: 'USDT',
|
volume: '',
|
rate: 0
|
},
|
interval: null,
|
actions: [],
|
balance: 0, // 质押余额
|
page: 1,
|
loading: false, // 当loading为true时，转圈圈
|
finished: false, // 数据是否请求结束，结束会先显示'已经全部加载完毕'
|
noData: false,// 如果没有数据，显示暂无数据
|
wallets: [], // 钱包列表
|
active: 0
|
|
}
|
},
|
created() {
|
_getAllWallet().then(data => {
|
console.log('闪兑', data)
|
data.extends.map(item => {
|
console.log(item)
|
this.actions.push({symbol: item.symbol, name: item.symbol.toUpperCase(), usable: item.usable, usdt: item.usdt})
|
})
|
this.wallets = data.extends
|
this.form.symbol = this.actions[0].name
|
let toObj = this.actions.find(item => {
|
return item.symbol.toLowerCase() == 'btc'
|
})
|
this.form.symbol_to = toObj.name
|
this.form.volume = 0
|
this.debounceFn()
|
})
|
},
|
methods: {
|
onMax() { // 最大
|
|
if (this.amountAvailable>0) {
|
console.log(this.amountAvailable)
|
this.form.volume = this.amountAvailable
|
} else {
|
this.$toast(this.$t('你没有可提数量'))
|
}
|
},
|
onInput(e) { // 获取最新
|
this.form.volume = e
|
this.clearInterval()
|
if (this.form.volume == '') {
|
this.form.get_volume = ''
|
} else {
|
this.debounceFn()
|
}
|
},
|
debounceFn: debounce(function () {
|
this.fetchRate(true)
|
}, 300),
|
fetchRate(callback) { // interval
|
_exchangeRage(this.form).then(data => {
|
const {get_rate} = data
|
this.form.rate = get_rate
|
this.clearInterval()
|
if (callback && typeof callback === 'function') {
|
callback()
|
}
|
})
|
},
|
onSwitch() { // 交换
|
const temp = this.form.symbol
|
this.form.symbol = this.form.symbol_to
|
this.form.symbol_to = temp
|
this.form.volume = ''
|
this.clearInterval()
|
},
|
onSelect(type, evt) { // 选择
|
if (evt.type == 0) {
|
this.form['symbol'] = evt.item.name
|
} else {
|
this.form['symbol_to'] = evt.item.name
|
}
|
if (this.form.symbol !== this.form.symbol_to) {
|
this.form.volume = ''
|
}
|
this.clearInterval()
|
},
|
onConfirm() { // 闪兑
|
this.clearInterval()
|
if (this.form.volume == '' || this.form.volume <= 0) {
|
this.$toast(this.$t('请输入数量'));
|
} else {
|
this.fetchRate(() => {
|
this.$emit("exchange", this.form);
|
})
|
}
|
},
|
clearInterval() { // 清除定时器
|
clearInterval(this.interval)
|
this.interval = null
|
}
|
},
|
mounted() {
|
|
},
|
beforeDestroy() {
|
// console.log('beforeDestroy')
|
this.clearInterval()
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
#mining-account {
|
::v-deep .van-tabs__nav {
|
@include themify() {
|
background-color: themed("main_background") !important;
|
}
|
}
|
|
::v-deep .van-tab {
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
|
::v-deep .van-tab--active {
|
@include themify() {
|
background: themed("main_background") !important;
|
}
|
}
|
}
|
|
|
.ex-bg {
|
width: 70px;
|
height: 70px;
|
|
@include themify() {
|
background: 12px solid themed("cont_background");
|
}
|
|
border-radius: 50%;
|
margin: 30px auto;
|
}
|
|
.exchange-btn {
|
margin-top: 400px;
|
|
.btnMain {
|
background: linear-gradient(90deg, #2C64D4 0%, #38AEEA 100%);
|
border-radius: 10px;
|
}
|
}
|
</style>
|
