<template>
|
<div class="exchange-page">
|
<van-nav-bar left-arrow @click-left="onClickLeft">
|
<template #title>
|
<div class="flex items-center">{{ $t("划转") }}</div>
|
</template>
|
</van-nav-bar>
|
<list-account show class="mt-94" type="exchange" ref="exchange" />
|
</div>
|
</template>
|
|
<script>
|
import assetsHead from "@/components/assets-head";
|
import ListAccount from "./mining-account";
|
import { _initExchange, _exchange } from "@/API/fund.api";
|
import { Popup } from "vant";
|
import { HOST_URL } from "@/config";
|
import Axios from "@/API/assets";
|
|
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() {
|
// console.log(33333);
|
// 闪兑
|
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>
|
