From 66a33e936d39ec4db7fdffed5d646e044ccc43e9 Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Fri, 18 Apr 2025 10:44:39 +0800
Subject: [PATCH] feat
---
src/page/exchange/exchangePage.vue | 444 ++++++++++++++++++++++++++++++------------------------
1 files changed, 247 insertions(+), 197 deletions(-)
diff --git a/src/page/exchange/exchangePage.vue b/src/page/exchange/exchangePage.vue
index e8628a9..cdceb15 100644
--- a/src/page/exchange/exchangePage.vue
+++ b/src/page/exchange/exchangePage.vue
@@ -1,270 +1,320 @@
<template>
- <div class="exchange-page">
- <!-- <assets-head :title="$t('闪兑')" >
+ <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"
+ <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>
+ </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}/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="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}/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>
+ <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">
+ <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">
+ <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>
+ <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 ListAccount from "@/components/mining-account";
import { _initExchange, _exchange } from "@/API/fund.api";
-import { Popup } from "vant"
-import { HOST_URL } from '@/config'
+import { Popup } from "vant";
+import { HOST_URL } from "@/config";
export default {
- components: {
- assetsHead,
- ListAccount,
- [Popup.name]: Popup
+ 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;
+ });
},
- data() {
- return {
- show: false,
- session_token: '',
- detail: {},
- interval: null,
- count: 5,
- HOST_URL,
+ 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);
},
- created() {
- this.getSessionToken()
+ onClose() {
+ this.$refs.exchange.fetchRate(true);
+ this.clearInterval();
},
- 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
- }
- }
+ onClickLeft() {
+ this.$router.go(-1);
},
- beforeRouteLeave(to, from, next) {
- this.clearInterval()
- next()
- }
-}
+ 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;
+ border-top-left-radius: 30px;
+ border-top-right-radius: 30px;
}
</style>
<style lang="scss" scoped>
.exchange-page {
- height: 100vh - 6vh;
+ height: 100vh - 6vh;
+ @include themify() {
+ background: themed("main_background");
+ }
+
+ ::v-deep .van-tab--active {
@include themify() {
- background: themed("main_background");
+ 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");
}
- ::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;
- }
+ font-size: 40px;
+ }
}
.bg-grey-light {
- background: #F5F5F5;
+ background: #f5f5f5;
}
.bg-grey-dark {
- background: #C8CAD2;
+ background: #c8cad2;
}
-
.fee {
- // background: #21353A;
- border-radius: 4px;
- color: #00B087;
- font-size: 24px;
- padding: 5px 10px;
- margin-left: 10px;
+ // background: #21353A;
+ border-radius: 4px;
+ color: #00b087;
+ font-size: 24px;
+ padding: 5px 10px;
+ margin-left: 10px;
}
.tab_background {
- @include themify() {
- background: themed("tab_background");
- }
+ @include themify() {
+ background: themed("tab_background");
+ }
- box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.21);
- border-radius: 24px;
+ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.21);
+ border-radius: 24px;
}
.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;
}
.exchange-icon {
- margin-left: 10px;
+ margin-left: 10px;
- @include themify() {
- color: themed("text_color");
- }
+ @include themify() {
+ color: themed("text_color");
+ }
}
</style>
--
Gitblit v1.9.3