From 3ed2cb78a690b64c3b2646d35e1500081186dfa3 Mon Sep 17 00:00:00 2001
From: huzheng12 <52150713+huzheng12@users.noreply.github.com>
Date: Mon, 06 May 2024 00:21:32 +0800
Subject: [PATCH] first commit
---
src/page/exchange/exchangeSubmit.vue | 247 ++++++++++++++++++++++++++++--------------------
1 files changed, 144 insertions(+), 103 deletions(-)
diff --git a/src/page/exchange/exchangeSubmit.vue b/src/page/exchange/exchangeSubmit.vue
index 24c90ff..67bf016 100644
--- a/src/page/exchange/exchangeSubmit.vue
+++ b/src/page/exchange/exchangeSubmit.vue
@@ -1,151 +1,192 @@
<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">
+ <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>
+ <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" />
+ <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">
+ <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">
+ <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>
+ <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
- }
+ data() {
+ return {
+ detail: {},
+ toValue: "",
+ formValue: "",
+ isLoading: true,
+ };
+ },
+ components: {
+ assetsHead,
+ },
+ created() {
+ setTimeout(() => {
+ this.isLoading = false;
+ }, 2000);
+ },
+ methods: {
+ onClickLeft() {
+ this.$router.go(-1);
},
- components: {
- assetsHead,
+ route(path) {
+ this.$router.push(path);
},
- created() {
- setTimeout(() => {
- this.isLoading = false
- }, 2000);
+ convert() {
+ [this.toValue, this.formValue] = [this.formValue, this.toValue];
},
- 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()
- })
- }
-}
+ },
+ 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;
+ width: 100%;
+ height: 100vh;
- @include themify() {
- background: themed("main_background");
- }
+ @include themify() {
+ background: themed("main_background");
+ }
- box-sizing: border-box;
+ box-sizing: border-box;
}
.bg-grey-light {
- background: #F5F5F5;
+ background: #f5f5f5;
}
.bg-grey-dark {
- background: #C8CAD2;
+ background: #c8cad2;
}
::v-deep .van-nav-bar {
- @include themify() {
- background: themed("main_background");
- }
+ @include themify() {
+ background: themed("main_background");
+ }
}
.bgDark {
- @include themify() {
- background: themed("tab_background2");
- }
+ @include themify() {
+ background: themed("tab_background2");
+ }
}
.btnMain {
- background: linear-gradient(90deg, #2C64D4 0%, #38AEEA 100%);
+ background: linear-gradient(90deg, #2c64d4 0%, #38aeea 100%);
}
-
.color-green {
- color: #00B087;
+ color: #00b087;
}
.tips {
- color: #989899;
- font-size: 26px;
- margin-top: 30px;
+ color: #989899;
+ font-size: 26px;
+ margin-top: 30px;
}
</style>
--
Gitblit v1.9.3