<template>
|
<div class="exchangeSubmit">
|
<assets-head title="" :goHome="true" />
|
<div class="flex flex-col items-center">
|
<img
|
src="../../assets/image/exchange/icon_9.png"
|
v-if="!isLoading"
|
alt="logo"
|
class="w-150 h-150 mt-120"
|
/>
|
<img
|
src="../../assets/image/exchange/icon_8.png"
|
v-if="isLoading"
|
alt="logo"
|
class="w-100 h-150 mt-120"
|
/>
|
<p class="font-38 text-center pt-60 textColor" v-if="!isLoading">
|
{{ $t("闪兑成功") }}
|
</p>
|
<!-- <p class="font-50 mt-23 text-center textColor">{{ detail.rate * detail.volume }}<span class="text-grey font-35">
|
{{ detail.symbol_to && detail.symbol_to.toUpperCase() }}</span></p> -->
|
<span class="text-grey font-35 pt-60" v-if="isLoading">
|
{{ $t("结算中") }}
|
</span>
|
|
<ul
|
class="px-30 pt-20 pb-34 mt-53 tabBackground rounded flex-1 w-full box-border"
|
style="width: 90%"
|
>
|
<li class="flex items-center">
|
<div class="flex-1 textColor text-left">
|
<div class="text-grey font-28 mt-20">{{ $t("从") }}</div>
|
<div class="font-30 mt-30">
|
{{ detail.volume
|
}}{{ detail.symbol && detail.symbol.toUpperCase() }}
|
</div>
|
</div>
|
<img
|
src="../../assets/image/exchange/icon_6.png"
|
class="w-30 h-20"
|
style="margin-top: -28px"
|
/>
|
|
<div class="flex-1 textColor text-right">
|
<div class="text-grey font-28 mt-20">{{ $t("至") }}</div>
|
<div class="font-30 mt-30" v-if="detail.volume">
|
{{ detail.volume * detail.rate
|
}}{{ detail.symbol_to && detail.symbol_to.toUpperCase() }}
|
</div>
|
</div>
|
</li>
|
<!-- <li class="flex justify-between font-28 pt-20 mt-40 textColor">
|
<span class="text-grey">{{ $t('交易手续费') }}</span>
|
<span class="color-green">1</span>
|
</li> -->
|
<li class="flex justify-between font-28 pt-20 textColor">
|
<span class="text-grey">{{ $t("类型") }}</span>
|
<span class="textColor">{{ $t("市价") }}</span>
|
</li>
|
<!-- <li class="flex justify-between font-28 pt-25 mt-40">
|
<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 pt-20 textColor">
|
<span class="text-grey">{{ $t("汇率") }}</span>
|
<span class="textColor"
|
>{{ toValue }}≈{{ formValue }}
|
<img
|
src="../../assets/image/exchange/icon_4.png"
|
@click="convert"
|
class="w-22 h-22"
|
style="margin-top: -28px"
|
/>
|
</span>
|
</li>
|
</ul>
|
<p class="tips px-35" v-if="isLoading">
|
<van-icon name="warning-o" />{{
|
$t(
|
"您的订单正在处理中，可能需要5分钟才能完成。感谢您的耐心等待。您可以在订单历史中查看状态。"
|
)
|
}}
|
</p>
|
<div
|
class="h-100 rounded flex justify-between px-32 box-border items-center mt-90 mb-48 text-white w-full"
|
>
|
<p
|
class="w-360 h-80 rounded flex justify-center items-center bgDark"
|
@click="route('/home')"
|
>
|
{{ $t("返回首页") }}
|
</p>
|
<p
|
class="w-360 h-80 rounded btnMain text-white flex justify-center items-center"
|
@click="route('/exchange/exchangeHistory')"
|
>
|
{{ $t("查看历史") }}
|
</p>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import assetsHead from "@/components/assets-head";
|
import { Image as VanImage } from "vant";
|
export default {
|
data() {
|
return {
|
detail: {},
|
toValue: "",
|
formValue: "",
|
isLoading: true,
|
};
|
},
|
components: {
|
assetsHead,
|
},
|
created() {
|
setTimeout(() => {
|
this.isLoading = false;
|
}, 2000);
|
},
|
methods: {
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
route(path) {
|
this.$router.push(path);
|
},
|
convert() {
|
[this.toValue, this.formValue] = [this.formValue, this.toValue];
|
},
|
},
|
beforeRouteEnter(to, from, next) {
|
const {
|
query: { data },
|
} = to;
|
next((vm) => {
|
vm.detail = JSON.parse(data);
|
vm.toValue = vm.detail.volume + vm.detail.symbol.toUpperCase();
|
vm.formValue = vm.detail.rate + vm.detail.symbol_to.toUpperCase();
|
});
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.exchangeSubmit {
|
width: 100%;
|
height: 100vh;
|
|
@include themify() {
|
background: themed("main_background");
|
}
|
|
box-sizing: border-box;
|
}
|
|
.bg-grey-light {
|
background: #f5f5f5;
|
}
|
|
.bg-grey-dark {
|
background: #c8cad2;
|
}
|
|
::v-deep .van-nav-bar {
|
@include themify() {
|
background: themed("main_background");
|
}
|
}
|
|
.bgDark {
|
@include themify() {
|
background: themed("tab_background2");
|
}
|
}
|
|
.btnMain {
|
background: linear-gradient(90deg, #2c64d4 0%, #38aeea 100%);
|
}
|
|
.color-green {
|
color: #00b087;
|
}
|
|
.tips {
|
color: #989899;
|
font-size: 26px;
|
margin-top: 30px;
|
}
|
</style>
|
