<template>
|
<div class="exchange-page">
|
<!-- <assets-head :title="$t('闪兑')" >
|
<div slot="right">
|
<img src="../../assets/image/exchange/icon_1.png" alt="exchange-img" class="w-28 h-32 mr-20" @click="$router.push('/exchange/exchangeHistory')"/>
|
<img src="../../assets/image/exchange/icon_2.png" alt="exchange-img" class="w-28 h-32" @click="$router.push('/exchange/exchangeHistory')"/>
|
</div>
|
|
</assets-head> -->
|
<van-nav-bar left-arrow @click-left="onClickLeft">
|
<template #right>
|
<!-- <van-icon class="exchange-icon" name="question-o" /> -->
|
<van-icon
|
class="exchange-icon"
|
@click="$router.push('/exchange/exchangeHistory')"
|
name="clock-o"
|
/>
|
<!-- <img src="../../assets/image/exchange/icon_1.png" alt="exchange-img" class="w-28 h-32 mr-20"
|
/>
|
|
|
<img src="../../assets/image/exchange/icon_2.png" alt="exchange-img" class="w-28 h-32"
|
@click="$router.push('/exchange/exchangeHistory')" /> -->
|
</template>
|
<template #title>
|
<div class="flex items-center">
|
{{ $t("闪兑") }}
|
<div class="fee ex-bg">{{ $t("0手续费") }}</div>
|
</div>
|
</template>
|
</van-nav-bar>
|
<list-account
|
show
|
class="mt-94"
|
type="exchange"
|
@exchange="onPopup"
|
ref="exchange"
|
/>
|
<van-popup
|
class="tabBackground"
|
v-model="show"
|
position="bottom"
|
:close-on-click-overlay="false"
|
@close="onClose"
|
>
|
<div class="pop-box relative">
|
<img
|
src="@/assets/image/icon-close.png"
|
class="w-38 h-38 absolute right-20 top-20"
|
@click="show = false"
|
/>
|
<p class="font-38 text-center pt-60 textColor">{{ $t("确认报价") }}</p>
|
<!-- <p class="font-35 mt-49 text-grey text-center">{{ $t('您将获得') }}</p>
|
<p class="font-50 mt-23 text-center textColor">{{ (detail.rate * detail.volume).toFixed(5) }} <span
|
class="font-35"> {{ detail.symbol_to && detail.symbol_to.toUpperCase() }}</span></p> -->
|
<div class="px-30 flex items-center mt-30">
|
<div class="flex-1 textColor text-center">
|
<div>
|
<img
|
v-if="detail.symbol"
|
:src="`${HOST_URL}/wap/symbol/${detail.symbol.toLowerCase()}.png`"
|
alt="logo"
|
class="w-70 h-70 rounded-full"
|
/>
|
</div>
|
<div class="text-grey font-28 mt-20">{{ $t("从") }}</div>
|
<div class="font-30 mt-30">
|
{{ detail.volume }} {{ detail.symbol }}
|
</div>
|
</div>
|
<img
|
src="../../assets/image/exchange/icon_6.png"
|
class="w-30 h-20"
|
style="margin-top: -65px"
|
/>
|
|
<div class="flex-1 textColor text-center">
|
<div>
|
<img
|
v-if="detail.symbol_to"
|
:src="`${HOST_URL}/wap/symbol/${detail.symbol_to.toLowerCase()}.png`"
|
alt="logo"
|
class="w-70 h-70 rounded-full"
|
/>
|
</div>
|
<div class="text-grey font-28 mt-20">{{ $t("至") }}</div>
|
<div class="font-30 mt-30" v-if="detail.volume">
|
{{ (detail.volume * detail.rate).toFixed(5) }}
|
{{ detail.symbol_to }}
|
</div>
|
</div>
|
</div>
|
|
<ul class="mx-32 px-30 pt-20 pb-34 tab_background mt-53 rounded">
|
<!-- <li class="flex justify-between font-28 mt-25">
|
<span class="text-grey">{{ $t('交易手续费') }}</span>
|
<span class="color-green">1</span>
|
</li> -->
|
<li class="flex justify-between font-28 mt-25">
|
<span class="text-grey">{{ $t("类型") }}</span>
|
<span class="textColor">{{ $t("市价") }}</span>
|
</li>
|
<!-- <li class="flex justify-between font-28 mt-25">
|
<span class="text-grey">{{ $t('闪兑自') }}</span>
|
<span class="textColor">{{ detail.volume }} {{ detail.symbol && detail.symbol.toUpperCase()
|
}}</span>
|
</li> -->
|
<li class="flex justify-between font-28 mt-25">
|
<span class="text-grey">{{ $t("汇率") }}</span>
|
<span class="textColor"
|
>1 {{ detail.symbol && detail.symbol.toUpperCase() }}≈{{
|
(detail.rate * 1).toFixed(5)
|
}}
|
{{ detail.symbol_to && detail.symbol_to.toUpperCase() }}</span
|
>
|
</li>
|
</ul>
|
<div
|
class="h-100 rounded flex justify-between px-32 box-border items-center mt-56 mb-48 text-white w-full"
|
>
|
<p
|
class="w-360 h-80 rounded flex justify-center items-center bgDark"
|
@click="show = false"
|
>
|
{{ $t("返回") }}
|
</p>
|
<p
|
class="w-360 h-80 rounded btnMain text-white flex justify-center items-center"
|
@click="onConfirm"
|
>
|
{{ $t("闪兑") }}（{{ count }}{{ $t("秒") }}）
|
</p>
|
</div>
|
</div>
|
</van-popup>
|
</div>
|
</template>
|
|
<script>
|
import assetsHead from "@/components/assets-head";
|
import ListAccount from "@/components/mining-account";
|
import { _initExchange, _exchange } from "@/API/fund.api";
|
import { Popup } from "vant";
|
import { HOST_URL } from "@/config";
|
export default {
|
components: {
|
assetsHead,
|
ListAccount,
|
[Popup.name]: Popup,
|
},
|
data() {
|
return {
|
show: false,
|
session_token: "",
|
detail: {},
|
interval: null,
|
count: 5,
|
HOST_URL,
|
};
|
},
|
created() {
|
this.getSessionToken();
|
},
|
methods: {
|
getSessionToken() {
|
// 获取凭证
|
_initExchange().then((data) => {
|
const { session_token } = data;
|
console.log(data);
|
this.session_token = session_token;
|
});
|
},
|
onPopup(evt) {
|
console.log(evt);
|
this.clearInterval();
|
this.detail = evt;
|
this.show = true;
|
this.count = 5;
|
this.interval = setInterval(() => {
|
this.count--;
|
if (this.count <= 0) {
|
this.clearInterval();
|
this.$toast(this.$t("汇率已变化,请重新确认"));
|
this.show = false;
|
}
|
}, 1000);
|
},
|
onClose() {
|
this.$refs.exchange.fetchRate(true);
|
this.clearInterval();
|
},
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
onConfirm() {
|
// 闪兑
|
this.clearInterval();
|
_exchange({ ...this.detail, session_token: this.session_token })
|
.then(() => {
|
this.$router.push(
|
"/exchange/exchangeSubmit?data=" + JSON.stringify(this.detail)
|
);
|
this.getSessionToken();
|
this.show = false;
|
})
|
.catch(() => {
|
this.getSessionToken();
|
this.show = false;
|
});
|
},
|
clearInterval() {
|
if (this.interval) {
|
clearInterval(this.interval);
|
this.interval = null;
|
}
|
},
|
},
|
beforeRouteLeave(to, from, next) {
|
this.clearInterval();
|
next();
|
},
|
};
|
</script>
|
<style>
|
.van-popup.van-popup--bottom {
|
border-top-left-radius: 30px;
|
border-top-right-radius: 30px;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.exchange-page {
|
height: 100vh - 6vh;
|
|
@include themify() {
|
background: themed("main_background");
|
}
|
|
::v-deep .van-tab--active {
|
@include themify() {
|
background: themed("main_background");
|
color: themed("active_line");
|
}
|
}
|
|
::v-deep .van-nav-bar {
|
@include themify() {
|
background: themed("main_background");
|
}
|
}
|
::v-deep .van-tabs__nav {
|
@include themify() {
|
background: themed("main_background");
|
}
|
}
|
::v-deep .van-nav-bar__title {
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
|
::v-deep .van-hairline--bottom::after {
|
border-bottom-width: 0px;
|
}
|
::v-deep .van-nav-bar .van-icon {
|
@include themify() {
|
color: themed("text_color");
|
}
|
|
font-size: 40px;
|
}
|
}
|
|
.bg-grey-light {
|
background: #f5f5f5;
|
}
|
|
.bg-grey-dark {
|
background: #c8cad2;
|
}
|
|
.fee {
|
// background: #21353A;
|
border-radius: 4px;
|
color: #00b087;
|
font-size: 24px;
|
padding: 5px 10px;
|
margin-left: 10px;
|
}
|
|
.tab_background {
|
@include themify() {
|
background: themed("tab_background");
|
}
|
|
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.21);
|
border-radius: 24px;
|
}
|
|
.bgDark {
|
@include themify() {
|
background: themed("tab_background2");
|
}
|
}
|
|
.btnMain {
|
background: linear-gradient(90deg, #2c64d4 0%, #38aeea 100%);
|
}
|
|
.color-green {
|
color: #00b087;
|
}
|
|
.exchange-icon {
|
margin-left: 10px;
|
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
</style>
|
