From ef52095f5e9f0a9fe2da779bb1573947d77d75b6 Mon Sep 17 00:00:00 2001
From: jhzh <1628036192@qq.com>
Date: Fri, 22 May 2026 10:53:01 +0800
Subject: [PATCH] 1
---
src/i18n/Portuguese.js | 46
src/assets/imgs/new/riseBg.jpg | 0
src/i18n/th.js | 55
src/views/homePage/components/head.vue | 2
src/views/cryptos/Funds/components/history.css | 2
src/assets/imgs/new/share-order.jpg | 0
src/components/fx-footer/index.vue | 53
src/assets/imgs/new/swiper_1.png | 0
src/views/quotes/List.vue | 70
src/assets/imgs/new/menu-market2.png | 0
src/assets/imgs/new/empty.png | 0
src/assets/image/kline.png | 0
src/assets/imgs/new/menu-contract1.png | 0
src/i18n/Spanish.js | 46
src/assets/css/copy.scss | 4
src/views/my/aiDetail.vue | 66
src/service/news.api.js | 19
src/assets/imgs/new/menu-transaction2.png | 0
src/i18n/fa.js | 55
src/views/exchangeHistory/DailyDeal.vue | 6
src/views/cryptos/AccountChange/index.vue | 10
src/components/Transform/ex-header/index.vue | 7
src/assets/css/vant-theme.scss | 45
src/views/trade/index.vue | 32
src/service/trade.api.js | 37
src/components/Transform/list-quotation/index.vue | 32
src/service/request.js | 10
src/views/changePassword/index.vue | 151
src/views/safety/locale-labels.js | 17
src/assets/imgs/new/copy.png | 0
src/components/Transform/contract-header/index.vue | 30
src/assets/imgs/new/index-function2.png | 0
src/views/cryptos/Recharge/rechargeSubmit.vue | 7
src/views/certificationCenter/advancedCtf.vue | 4
src/components/Transform/cryptos-trade-deep-data/index.vue | 18
src/i18n/Deutsch.js | 55
src/components/application/application.vue | 7
src/views/login/index.vue | 457 +-
src/assets/imgs/new/a-FIL.png | 0
src/views/cryptos/PerpetualContract/index.vue | 1
src/assets/imgs/new/index-function3.png | 0
src/components/Transform/ex-tabs/index.vue | 7
src/views/C2C/c2cOrder/payment/components/Question.vue | 2
src/assets/imgs/footer/assets-active.png | 0
src/views/C2C/c2cOrder/components/appeal/AppealWaiting.vue | 7
src/assets/imgs/new/contract-slash.png | 0
src/config/index.js | 6
src/assets/imgs/footer/quotes.png | 0
src/assets/imgs/new/checked.png | 0
src/assets/imgs/new/menu-index1.png | 0
src/i18n/korean.js | 55
src/views/C2C/c2c-trade/components/TradeSuccessDetail.vue | 7
src/views/my/transfer.vue | 363 +
src/assets/imgs/new/quick-function1.png | 0
src/components/Transform/trade-order-area/index.vue | 364 +
src/views/cryptos/TrendDetails/index.vue | 122
src/views/cryptos/promote/init.scss | 4
src/i18n/cn.js | 98
src/assets/imgs/new/index-function5.png | 0
src/views/authentication/index.vue | 500 +-
src/components/Transform/kline-charts/drawTools.js | 120
src/views/cryptos/index.vue | 2
src/assets/css/variable.scss | 104
src/views/cryptos/Recharge/rechargeList.vue | 560 ++
src/assets/imgs/new/quick-function3.png | 0
src/components/Transform/mining-account/index.vue | 178
src/views/cryptos/Withdraw/withdrawSumbit.vue | 7
src/views/safety/resetPhoneEmail.vue | 11
tailwind.config.cjs | 4
src/components/Transform/application/application.vue | 7
src/views/cryptos/pledgeLoan/index.vue | 2
src/components/Transform/perpetual-entrust-list/index.vue | 2
src/components/fx-kline/index.vue | 26
src/assets/imgs/footer/trade.png | 0
src/config/theme.js | 4
src/views/my/assets.vue | 664 +-
src/i18n/Italy.js | 84
src/components/Transform/perpetual-order/index.vue | 3
src/i18n/Japanese.js | 84
src/views/certificationCenter/index.vue | 767 ---
src/assets/imgs/new/avatar.png | 0
src/assets/imgs/new/menu-contract2.png | 0
src/i18n/en.js | 126
src/assets/imgs/new/a-APT.png | 0
src/views/cryptos/AssetsCenter/components/history.css | 2
vite.config.js | 6
src/assets/imgs/new/index-funbg.png | 0
src/assets/imgs/new/index-function1.png | 0
src/assets/imgs/new/a-DOT.png | 0
src/assets/image/asset-function3.png | 0
src/assets/imgs/new/menu-transaction1.png | 0
src/components/Transform/trade-head/index.vue | 16
src/assets/theme/white/index.scss | 28
src/router/index.js | 14
src/components/Transform/mining-exchange-input/index.vue | 130
src/views/C2C/c2cOrder/payment/index.vue | 32
src/assets/imgs/new/menu-user1.png | 0
src/main.js | 4
src/views/register/index.vue | 736 +-
src/assets/imgs/new/swiper_2.png | 0
src/assets/imgs/new/menu-market1.png | 0
src/components/Transform/perpetual-open/index.vue | 730 ++
src/views/my/airdrop.vue | 106
src/views/changeFundsPassword/index.vue | 256
src/components/Transform/perpetual-position-list/index.vue | 626 ++
src/views/cryptos/Withdraw/withdrawPage.vue | 776 ++-
src/views/C2C/c2cOrder/order-generation/orderGeneration.vue | 7
src/assets/imgs/new/menu-user2.png | 0
src/assets/imgs/footer/assets.png | 0
src/assets/imgs/footer/quotes-active.png | 0
src/views/cryptos/Trade/index.vue | 14
src/i18n/vi.js | 55
src/assets/imgs/new/menu-index2.png | 0
src/components/Transform/kline-charts/index.vue | 198
src/i18n/zhcn.js | 120
src/views/C2C/c2c-order-list/Unread.vue | 2
src/assets/imgs/footer/sto.png | 0
src/assets/imgs/footer/sto-active.png | 0
src/assets/imgs/new/index-function4.png | 0
src/service/user.api.js | 26
src/views/safety/index.vue | 302
src/assets/imgs/footer/home.png | 0
src/views/C2C/c2c-trade/page/SellGenerate.vue | 7
src/views/C2C/c2c-order-list/components/TradeSuccessDetail.vue | 7
src/components/trade-deep-data/index.vue | 2
src/views/my/index.vue | 688 +-
src/assets/imgs/new/ai-strategy_pic.png | 0
src/views/homePage/index.vue | 767 +++
src/views/cryptos/Exchange/exchangePage.vue | 84
src/assets/imgs/footer/trade-active.png | 0
src/assets/imgs/new/kyc-reward.png | 0
src/views/C2C/c2c-trade/page/TradeSuccessSell.vue | 2
src/components/Transform/perpetual-open/amountSlider.vue | 2
src/views/order/order-submit.vue | 7
src/assets/init.scss | 22
src/assets/imgs/new/airdrop-bg.jpg | 0
src/assets/imgs/footer/home-active.png | 0
src/assets/imgs/new/check.png | 0
src/assets/imgs/new/quick-function2.png | 0
src/assets/theme/_themes.scss | 84
src/assets/theme/dark/image/black-convert.png | 0
src/App.vue | 40
src/views/cryptos/Recharge/rechargePage.vue | 10
143 files changed, 7,202 insertions(+), 4,340 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index cd79926..ed225b4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,8 @@
<template>
- <div class="pt-5" >
- <router-view />
+ <div class="app-root">
+ <div class="app-content-wrap" :class="{ 'app-content-wrap--no-bottom-padding': noBottomPadding, 'app-content-wrap--account-change': accountChangeWrap }">
+ <router-view />
+ </div>
</div>
<fx-footer v-if="route.meta.tarbar" />
</template>
@@ -11,7 +13,7 @@
import { authorizedLogin } from "@/service/login.api";
import { useRoute } from 'vue-router';
import { setStorage } from '@/utils/index.js'
-import { onMounted } from 'vue'
+import { onMounted, computed } from 'vue'
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store/user';
@@ -19,6 +21,21 @@
import { GET_USERINFO } from '@/store/types.store'
const router = useRouter()
const route = useRoute()
+
+// /quotes/index 页面不需要顶部 pt-5
+const applyTopPadding = computed(() => {
+ const path = route.path
+ return path !== '/quotes' && path !== '/quotes/index'
+})
+
+// 某些页面（如 aiDetail、airdrop）不需要底部 padding，由路由控制
+const noBottomPadding = computed(() => {
+ const path = route.path
+ return path === '/my/aiDetail' || path === '/my/airdrop'
+})
+
+// 账变记录页 .app-content-wrap 背景色 #F6F5FA
+const accountChangeWrap = computed(() => route.path === '/cryptos/accountChange')
const geturlkey = (name) => {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null;
@@ -99,6 +116,23 @@
@import "assets/css/variable.scss";
@import "assets/theme/index.scss";
+ .app-root {
+ min-height: 100vh;
+ background-color: #f6f5fa;
+ }
+ .app-content-wrap {
+ background-color: #ffffff;
+ border-radius: 12px 12px 0 0;
+ min-height: calc(100vh - 8px);
+ padding-bottom: 70px;
+ }
+ .app-content-wrap--no-bottom-padding {
+ padding-bottom: 0 !important;
+ }
+ .app-content-wrap--account-change {
+ background-color: #F6F5FA;
+ }
+
.nationList {
.van-action-sheet {
height: 80%;
diff --git a/src/assets/css/copy.scss b/src/assets/css/copy.scss
index 180fd41..ec63887 100644
--- a/src/assets/css/copy.scss
+++ b/src/assets/css/copy.scss
@@ -54,8 +54,8 @@
$border-grey: #E5E7ED;
$blue: #1194F7;
$light-blue: #1199FA;
-$red: #F43368;
-$green: #06CDA5;
+$red: #f4374b;
+$green: #06c16a;
$purple: #9A4DFD;
$night: #131a2e;
// 第三版
diff --git a/src/assets/css/vant-theme.scss b/src/assets/css/vant-theme.scss
index 7d3ddd0..664727c 100644
--- a/src/assets/css/vant-theme.scss
+++ b/src/assets/css/vant-theme.scss
@@ -1,5 +1,46 @@
-/* Vant 组件黑夜模式主题变量 */
-/* 同时定义在 :root 和 [data-theme="dark"] 上，确保 Vant 组件能正确读取 */
+/* Vant 组件主题变量：底色 #f6f5fa */
+:root,
+[data-theme="light"] {
+ --van-nav-bar-background: #f6f5fa !important;
+ --van-nav-bar-title-text-color: #1a1a1a !important;
+ --van-cell-background: #f6f5fa !important;
+ --van-cell-text-color: #1a1a1a !important;
+ --van-cell-label-color: #666666 !important;
+ --van-cell-value-color: #1a1a1a !important;
+ --van-cell-border-color: #e8e8e8 !important;
+ --van-field-label-color: #1a1a1a !important;
+ --van-field-input-text-color: #1a1a1a !important;
+ --van-field-placeholder-text-color: #999999 !important;
+ --van-field-background: #ffffff !important;
+ --van-field-border-color: #e8e8e8 !important;
+ --van-button-primary-background: #1a1a1a !important;
+ --van-button-default-background: #ffffff !important;
+ --van-button-default-border-color: #e8e8e8 !important;
+ --van-button-primary-border-color: #1a1a1a !important;
+ --van-button-primary-color: #ffffff !important;
+ --van-tabbar-background: #ffffff !important;
+ --van-tabbar-item-text-color: #666666 !important;
+ --van-tabbar-item-active-color: #1a1a1a !important;
+ --van-tabs-nav-background: #fff !important;
+ --van-tab-text-color: #666666 !important;
+ --van-tab-active-text-color: #1a1a1a !important;
+ --van-dialog-background: #f6f5fa !important;
+ --van-dialog-message-text-color: #1a1a1a !important;
+ --van-dialog-title-text-color: #1a1a1a !important;
+ --van-popup-background: #f6f5fa !important;
+ --van-action-sheet-item-background: #f6f5fa !important;
+ --van-action-sheet-item-text-color: #1a1a1a !important;
+ --van-picker-background: #f6f5fa !important;
+ --van-picker-title-text-color: #1a1a1a !important;
+ --van-picker-option-text-color: #1a1a1a !important;
+ --van-search-background: #ffffff !important;
+ --van-search-content-background: #ffffff !important;
+ --van-search-label-color: #1a1a1a !important;
+ --van-grid-item-content-background: #f6f5fa !important;
+ --van-grid-item-text-color: #1a1a1a !important;
+}
+
+/* Vant 黑夜模式主题变量 */
:root[data-theme="dark"],
[data-theme="dark"] {
/* NavBar 导航栏 */
diff --git a/src/assets/css/variable.scss b/src/assets/css/variable.scss
index 9850b22..2664637 100644
--- a/src/assets/css/variable.scss
+++ b/src/assets/css/variable.scss
@@ -1,55 +1,53 @@
-$mainBgColor: #131a2e;
-$mainTextColor: #fff;
-$mainbgWhiteColor: #111;
+/* 全局底色 #f6f5fa */
+$mainBgColor: #f6f5fa;
+$mainTextColor: #1a1a1a;
+$mainbgWhiteColor: #f6f5fa;
-$main_background:#f7f7f7; //主题色
-$main2_background:#1F233D; //主题浅色背景
-$text_color:#333; //文字颜色
-$text_color1:#555; //文字浅色
-$text_color2:#fff; // 白色文字
-$text_color3:#CFD5EC; //
-$text_color4:#333; //浅色标题背景文字颜色
-$text_color5:#878A96; //
-$text_color6:#B7BDD1; // 文字更浅色
-// $tab_background:#27293B; //tab切换背景颜色
-$tab_background:#f7f7f7; //tab切换背景颜色
-$active_line:#1194F7; //tab选中样式颜色
-$footer_background:#252738; // 底部颜色
-$btn_main: #1194F7; //主题色按钮
-$color_main:#1194F7; //主题色文字
-$btn_background:#474B62; //按钮颜色
-// $input_background:#27293B; //input背景颜色
-$input_background:#f7f7f7; //input背景颜色
-$cont_background:#27293B; //title背景色
-$title_color:#B8BDC5;
-$line_color: #393E49;
-$bg_dark: #474B62;
-$border_color: #212C4E;
-$divi_line: #ddd; //分割线
-$bg_step: #868D9A;
-$bg_Bottom:#313346;
-$chat_bg: #474B62;
-$upload_bg:#474B62;
-$grey_bg: #ccc;
-$input_background1: #131a2e; //质押借币input
-$c2c_color: #333;
-$c2c_background: #aaa;
-$c2c_background1: #ccc;
-$c2c_tab_background:#ccc;
-$c2c_tip_background: #aaa;
-$selectSymbol_background: #131a2e; //自选与选择币种背景颜色
-$US_tab_background: #1D2439;
-$US_tabActice_background: #112542;
-$lable_color: #B6BDD4;
-$cont_background: #f6f6f6;
-$delivery_left_tab_background: #1B2134;
-$delivery_tab_background: #2A324D;
-$search_background: #1B233B;
-$pledgeLoan_background:#00E3FF;
-$bg_yellow:#f7b600;
-$log-c: #282828;
-$icon-bg:#dbdbdb;
-$inp-b: #f7f7f7;
+$main_background: #f6f5fa;
+$main2_background: #f6f5fa;
+$text_color: #1a1a1a;
+$text_color1: #666666;
+$text_color2: #1a1a1a;
+$text_color3: #666666;
+$text_color4: #1a1a1a;
+$text_color5: #999999;
+$text_color6: #999999;
+$tab_background: #f6f5fa;
+$active_line: #1a1a1a;
+$footer_background: #ffffff;
+$btn_main: #1a1a1a;
+$color_main: #1a1a1a;
+$btn_background: #ffffff;
+$input_background: #ffffff;
+$cont_background: #f6f5fa;
+$title_color: #666666;
+$line_color: #e8e8e8;
+$bg_dark: #f6f5fa;
+$border_color: #e8e8e8;
+$divi_line: #eeeeee;
+$bg_step: #666666;
+$bg_Bottom: #f6f5fa;
+$chat_bg: #f6f5fa;
+$upload_bg: #f6f5fa;
+$grey_bg: #f6f5fa;
+$input_background1: #fff;
+$c2c_color: #1a1a1a;
+$c2c_background: #f6f5fa;
+$c2c_background1: #f6f5fa;
+$c2c_tab_background: #f6f5fa;
+$c2c_tip_background: #f6f5fa;
+$selectSymbol_background: #f6f5fa;
+$US_tab_background: #f6f5fa;
+$US_tabActice_background: #eeeeee;
+$lable_color: #666666;
+$delivery_left_tab_background: #f6f5fa;
+$delivery_tab_background: #f6f5fa;
+$search_background: #f6f5fa;
+$pledgeLoan_background: #1a1a1a;
+$bg_yellow: #f6f5fa;
+$log-c: #1a1a1a;
+$icon-bg: #e8e8e8;
+$inp-b: #f6f5fa;
// $text_color:$log-c;
.yellow-bg{
background: $bg_yellow;
@@ -175,7 +173,7 @@
$border-grey: #E5E7ED;
$blue: #1194F7;
$light-blue: #1199FA;
- $red: #F43368;
- $green: #06CDA5;
+ $red: #f4374b;
+ $green: #06c16a;
$purple: #9A4DFD;
$night: #131a2e;
\ No newline at end of file
diff --git a/src/assets/image/asset-function3.png b/src/assets/image/asset-function3.png
new file mode 100644
index 0000000..73df7dd
--- /dev/null
+++ b/src/assets/image/asset-function3.png
Binary files differ
diff --git a/src/assets/image/kline.png b/src/assets/image/kline.png
index 8e331c7..b80c823 100644
--- a/src/assets/image/kline.png
+++ b/src/assets/image/kline.png
Binary files differ
diff --git a/src/assets/imgs/footer/assets-active.png b/src/assets/imgs/footer/assets-active.png
index 91776b3..d5c3bef 100644
--- a/src/assets/imgs/footer/assets-active.png
+++ b/src/assets/imgs/footer/assets-active.png
Binary files differ
diff --git a/src/assets/imgs/footer/assets.png b/src/assets/imgs/footer/assets.png
index 941c985..5dce54f 100644
--- a/src/assets/imgs/footer/assets.png
+++ b/src/assets/imgs/footer/assets.png
Binary files differ
diff --git a/src/assets/imgs/footer/home-active.png b/src/assets/imgs/footer/home-active.png
index 30438cb..b6541f9 100644
--- a/src/assets/imgs/footer/home-active.png
+++ b/src/assets/imgs/footer/home-active.png
Binary files differ
diff --git a/src/assets/imgs/footer/home.png b/src/assets/imgs/footer/home.png
index 7bc0d8b..8b8dcbb 100644
--- a/src/assets/imgs/footer/home.png
+++ b/src/assets/imgs/footer/home.png
Binary files differ
diff --git a/src/assets/imgs/footer/quotes-active.png b/src/assets/imgs/footer/quotes-active.png
index 77e6109..db49809 100644
--- a/src/assets/imgs/footer/quotes-active.png
+++ b/src/assets/imgs/footer/quotes-active.png
Binary files differ
diff --git a/src/assets/imgs/footer/quotes.png b/src/assets/imgs/footer/quotes.png
index a642973..df5a175 100644
--- a/src/assets/imgs/footer/quotes.png
+++ b/src/assets/imgs/footer/quotes.png
Binary files differ
diff --git a/src/assets/imgs/footer/sto-active.png b/src/assets/imgs/footer/sto-active.png
index 646cc42..e681f5e 100644
--- a/src/assets/imgs/footer/sto-active.png
+++ b/src/assets/imgs/footer/sto-active.png
Binary files differ
diff --git a/src/assets/imgs/footer/sto.png b/src/assets/imgs/footer/sto.png
index 8313670..b5acdf4 100644
--- a/src/assets/imgs/footer/sto.png
+++ b/src/assets/imgs/footer/sto.png
Binary files differ
diff --git a/src/assets/imgs/footer/trade-active.png b/src/assets/imgs/footer/trade-active.png
index ddafb08..b5770d7 100644
--- a/src/assets/imgs/footer/trade-active.png
+++ b/src/assets/imgs/footer/trade-active.png
Binary files differ
diff --git a/src/assets/imgs/footer/trade.png b/src/assets/imgs/footer/trade.png
index 187a07a..293d6a6 100644
--- a/src/assets/imgs/footer/trade.png
+++ b/src/assets/imgs/footer/trade.png
Binary files differ
diff --git a/src/assets/imgs/new/a-APT.png b/src/assets/imgs/new/a-APT.png
new file mode 100644
index 0000000..03b565c
--- /dev/null
+++ b/src/assets/imgs/new/a-APT.png
Binary files differ
diff --git a/src/assets/imgs/new/a-DOT.png b/src/assets/imgs/new/a-DOT.png
new file mode 100644
index 0000000..c28b001
--- /dev/null
+++ b/src/assets/imgs/new/a-DOT.png
Binary files differ
diff --git a/src/assets/imgs/new/a-FIL.png b/src/assets/imgs/new/a-FIL.png
new file mode 100644
index 0000000..a62db27
--- /dev/null
+++ b/src/assets/imgs/new/a-FIL.png
Binary files differ
diff --git a/src/assets/imgs/new/ai-strategy_pic.png b/src/assets/imgs/new/ai-strategy_pic.png
new file mode 100644
index 0000000..ba93393
--- /dev/null
+++ b/src/assets/imgs/new/ai-strategy_pic.png
Binary files differ
diff --git a/src/assets/imgs/new/airdrop-bg.jpg b/src/assets/imgs/new/airdrop-bg.jpg
new file mode 100644
index 0000000..df969eb
--- /dev/null
+++ b/src/assets/imgs/new/airdrop-bg.jpg
Binary files differ
diff --git a/src/assets/imgs/new/avatar.png b/src/assets/imgs/new/avatar.png
new file mode 100644
index 0000000..2a88870
--- /dev/null
+++ b/src/assets/imgs/new/avatar.png
Binary files differ
diff --git a/src/assets/imgs/new/check.png b/src/assets/imgs/new/check.png
new file mode 100644
index 0000000..c2b271d
--- /dev/null
+++ b/src/assets/imgs/new/check.png
Binary files differ
diff --git a/src/assets/imgs/new/checked.png b/src/assets/imgs/new/checked.png
new file mode 100644
index 0000000..ea6718a
--- /dev/null
+++ b/src/assets/imgs/new/checked.png
Binary files differ
diff --git a/src/assets/imgs/new/contract-slash.png b/src/assets/imgs/new/contract-slash.png
new file mode 100644
index 0000000..301cc5b
--- /dev/null
+++ b/src/assets/imgs/new/contract-slash.png
Binary files differ
diff --git a/src/assets/imgs/new/copy.png b/src/assets/imgs/new/copy.png
new file mode 100644
index 0000000..2b16b18
--- /dev/null
+++ b/src/assets/imgs/new/copy.png
Binary files differ
diff --git a/src/assets/imgs/new/empty.png b/src/assets/imgs/new/empty.png
new file mode 100644
index 0000000..6f298e5
--- /dev/null
+++ b/src/assets/imgs/new/empty.png
Binary files differ
diff --git a/src/assets/imgs/new/index-funbg.png b/src/assets/imgs/new/index-funbg.png
new file mode 100644
index 0000000..6d0dc37
--- /dev/null
+++ b/src/assets/imgs/new/index-funbg.png
Binary files differ
diff --git a/src/assets/imgs/new/index-function1.png b/src/assets/imgs/new/index-function1.png
new file mode 100644
index 0000000..4687d6c
--- /dev/null
+++ b/src/assets/imgs/new/index-function1.png
Binary files differ
diff --git a/src/assets/imgs/new/index-function2.png b/src/assets/imgs/new/index-function2.png
new file mode 100644
index 0000000..644522f
--- /dev/null
+++ b/src/assets/imgs/new/index-function2.png
Binary files differ
diff --git a/src/assets/imgs/new/index-function3.png b/src/assets/imgs/new/index-function3.png
new file mode 100644
index 0000000..ae40443
--- /dev/null
+++ b/src/assets/imgs/new/index-function3.png
Binary files differ
diff --git a/src/assets/imgs/new/index-function4.png b/src/assets/imgs/new/index-function4.png
new file mode 100644
index 0000000..33f3ba7
--- /dev/null
+++ b/src/assets/imgs/new/index-function4.png
Binary files differ
diff --git a/src/assets/imgs/new/index-function5.png b/src/assets/imgs/new/index-function5.png
new file mode 100644
index 0000000..978df3e
--- /dev/null
+++ b/src/assets/imgs/new/index-function5.png
Binary files differ
diff --git a/src/assets/imgs/new/kyc-reward.png b/src/assets/imgs/new/kyc-reward.png
new file mode 100644
index 0000000..c24deaf
--- /dev/null
+++ b/src/assets/imgs/new/kyc-reward.png
Binary files differ
diff --git a/src/assets/imgs/new/menu-contract1.png b/src/assets/imgs/new/menu-contract1.png
new file mode 100644
index 0000000..293d6a6
--- /dev/null
+++ b/src/assets/imgs/new/menu-contract1.png
Binary files differ
diff --git a/src/assets/imgs/new/menu-contract2.png b/src/assets/imgs/new/menu-contract2.png
new file mode 100644
index 0000000..b5770d7
--- /dev/null
+++ b/src/assets/imgs/new/menu-contract2.png
Binary files differ
diff --git a/src/assets/imgs/new/menu-index1.png b/src/assets/imgs/new/menu-index1.png
new file mode 100644
index 0000000..8b8dcbb
--- /dev/null
+++ b/src/assets/imgs/new/menu-index1.png
Binary files differ
diff --git a/src/assets/imgs/new/menu-index2.png b/src/assets/imgs/new/menu-index2.png
new file mode 100644
index 0000000..b6541f9
--- /dev/null
+++ b/src/assets/imgs/new/menu-index2.png
Binary files differ
diff --git a/src/assets/imgs/new/menu-market1.png b/src/assets/imgs/new/menu-market1.png
new file mode 100644
index 0000000..df5a175
--- /dev/null
+++ b/src/assets/imgs/new/menu-market1.png
Binary files differ
diff --git a/src/assets/imgs/new/menu-market2.png b/src/assets/imgs/new/menu-market2.png
new file mode 100644
index 0000000..db49809
--- /dev/null
+++ b/src/assets/imgs/new/menu-market2.png
Binary files differ
diff --git a/src/assets/imgs/new/menu-transaction1.png b/src/assets/imgs/new/menu-transaction1.png
new file mode 100644
index 0000000..b5acdf4
--- /dev/null
+++ b/src/assets/imgs/new/menu-transaction1.png
Binary files differ
diff --git a/src/assets/imgs/new/menu-transaction2.png b/src/assets/imgs/new/menu-transaction2.png
new file mode 100644
index 0000000..e681f5e
--- /dev/null
+++ b/src/assets/imgs/new/menu-transaction2.png
Binary files differ
diff --git a/src/assets/imgs/new/menu-user1.png b/src/assets/imgs/new/menu-user1.png
new file mode 100644
index 0000000..5dce54f
--- /dev/null
+++ b/src/assets/imgs/new/menu-user1.png
Binary files differ
diff --git a/src/assets/imgs/new/menu-user2.png b/src/assets/imgs/new/menu-user2.png
new file mode 100644
index 0000000..d5c3bef
--- /dev/null
+++ b/src/assets/imgs/new/menu-user2.png
Binary files differ
diff --git a/src/assets/imgs/new/quick-function1.png b/src/assets/imgs/new/quick-function1.png
new file mode 100644
index 0000000..0eb6597
--- /dev/null
+++ b/src/assets/imgs/new/quick-function1.png
Binary files differ
diff --git a/src/assets/imgs/new/quick-function2.png b/src/assets/imgs/new/quick-function2.png
new file mode 100644
index 0000000..cc71612
--- /dev/null
+++ b/src/assets/imgs/new/quick-function2.png
Binary files differ
diff --git a/src/assets/imgs/new/quick-function3.png b/src/assets/imgs/new/quick-function3.png
new file mode 100644
index 0000000..3277502
--- /dev/null
+++ b/src/assets/imgs/new/quick-function3.png
Binary files differ
diff --git a/src/assets/imgs/new/riseBg.jpg b/src/assets/imgs/new/riseBg.jpg
new file mode 100644
index 0000000..3518a71
--- /dev/null
+++ b/src/assets/imgs/new/riseBg.jpg
Binary files differ
diff --git a/src/assets/imgs/new/share-order.jpg b/src/assets/imgs/new/share-order.jpg
new file mode 100644
index 0000000..44f1380
--- /dev/null
+++ b/src/assets/imgs/new/share-order.jpg
Binary files differ
diff --git a/src/assets/imgs/new/swiper_1.png b/src/assets/imgs/new/swiper_1.png
new file mode 100644
index 0000000..76ac991
--- /dev/null
+++ b/src/assets/imgs/new/swiper_1.png
Binary files differ
diff --git a/src/assets/imgs/new/swiper_2.png b/src/assets/imgs/new/swiper_2.png
new file mode 100644
index 0000000..9e4c78e
--- /dev/null
+++ b/src/assets/imgs/new/swiper_2.png
Binary files differ
diff --git a/src/assets/init.scss b/src/assets/init.scss
index 848d9ca..14c6752 100644
--- a/src/assets/init.scss
+++ b/src/assets/init.scss
@@ -38,7 +38,7 @@
}
input::-webkit-input-placeholder {
- color: #C0C4CC;
+ color: #999999;
}
.doTouch {
@@ -56,8 +56,8 @@
$border-grey: #E5E7ED;
$blue: #1194F7;
$light-blue: #1199FA;
- $red: #F43368;
- $green: #06CDA5;
+ $red: #f4374b;
+ $green: #06c16a;
$purple: #9A4DFD;
$night: #131a2e;
// overwrite vant
@@ -75,7 +75,7 @@
}
:root {
- --theme-color: #1194F7;
+ --theme-color: #1a1a1a;
}
/***************** global use framework *****************/
@@ -305,16 +305,22 @@
}
.bg-black {
- background: #131a2e;
+ @include themify() {
+ background: themed("main_background");
+ }
}
.bg-night {
- background: #131a2e;
- color: #fff;
+ @include themify() {
+ background: themed("tab_background");
+ color: themed("text_color");
+ }
}
.bg-night1 {
- background: #000;
+ @include themify() {
+ background: themed("tab_background");
+ }
}
.bg-grey {
diff --git a/src/assets/theme/_themes.scss b/src/assets/theme/_themes.scss
index ec0d017..1c7e2ef 100644
--- a/src/assets/theme/_themes.scss
+++ b/src/assets/theme/_themes.scss
@@ -1,47 +1,47 @@
$themes: (
light:(
- main_background: #ffffff, //主题色
- text_color: #333, //文字颜色
- text_color1: #868C9A, //文字浅色
- text_color2: #B7BDD1, // 资金页面所用对应
- text_color3: #000000, //
- tab_background: #F5F5F5, //tab切换背景颜色
- tab_background1: #ffffff, //tab切换背景颜色
- tab_background2: #ffffff, //tab切换背景颜色
- active_line: #f7b328, //tab选中样式颜色
- footer_background: #ffffff, // 底部颜色
- btn_main: #f7b328, //主题色按钮
- color_main: #f7b328, //主题色文字
- btn_background: #ffffff, //按钮颜色
- btn_background1: #ffffff, //按钮颜色
- btn_background2: #111, //按钮颜色
- btn_text: #fff, //按钮文字颜色
- input_background: #f5f5f5, //input背景颜色
- cont_background: #ffffff, //title背景色
- title_color: #B8BDC5,
- line_color: #ffffff,
- bg_dark: #ffffff,
- border_color: #e5e5e5, // 通用边框颜色
- border_color1: #ffffff,
- divi_line: #f5f5f5, //分割线
- bg_step: #868D9A,
- bg_Bottom: #ffffff,
- chat_bg: #e5e5e5,
- upload_bg: #ffffff,
- grey_bg: #f7f7f7,
- input_background1: #f5f5f5, //质押借币input
- c2c_color: #868C9A,
- c2c_background: #ffffff,
- c2c_background1: #ffffff,
- c2c_tab_background: #ffffff,
- c2c_tip_background: #ffffff,
- light-greybg:#ffffff,
- dark-greybg:#000,
- home_bg: #ffffff,
- cont_round: #ffffff,
- cont_nav: #ffffff,
- tab_color:#333, //tab文字颜色
- input_border:#e5e5e5, //输入框边框颜色
+ main_background: #f6f5fa, // 主背景
+ text_color: #1a1a1a, // 主文字：黑色
+ text_color1: #666666, // 次要文字：灰色
+ text_color2: #999999, // 辅助文字：浅灰
+ text_color3: #1a1a1a, // 标题/强调
+ tab_background: #f6f5fa, // tab 背景
+ tab_background1: #f6f5fa,
+ tab_background2: #f6f5fa,
+ active_line: #1a1a1a, // 选中线：深色
+ footer_background: #ffffff,
+ btn_main: #1a1a1a, // 主按钮：深色
+ color_main: #1a1a1a,
+ btn_background: #ffffff, // 次要按钮/输入区：白底凸显
+ btn_background1: #ffffff,
+ btn_background2: #1a1a1a,
+ btn_text: #ffffff,
+ input_background: #ffffff,
+ cont_background: #f6f5fa,
+ title_color: #666666,
+ line_color: #eeeeee,
+ bg_dark: #f6f5fa,
+ border_color: #e8e8e8, // 通用边框
+ border_color1: #eeeeee,
+ divi_line: #eeeeee,
+ bg_step: #666666,
+ bg_Bottom: #f6f5fa,
+ chat_bg: #f6f5fa,
+ upload_bg: #f6f5fa,
+ grey_bg: #f6f5fa,
+ input_background1: #ffffff,
+ c2c_color: #666666,
+ c2c_background: #f6f5fa,
+ c2c_background1: #f6f5fa,
+ c2c_tab_background: #f6f5fa,
+ c2c_tip_background: #f6f5fa,
+ light-greybg: #f6f5fa,
+ dark-greybg: #1a1a1a,
+ home_bg: #f6f5fa,
+ cont_round: #f6f5fa,
+ cont_nav: #f6f5fa,
+ tab_color: #1a1a1a,
+ input_border: #e8e8e8,
),
dark:(
main_background: #121212, //主题色
diff --git a/src/assets/theme/dark/image/black-convert.png b/src/assets/theme/dark/image/black-convert.png
index 4404519..4ae9446 100644
--- a/src/assets/theme/dark/image/black-convert.png
+++ b/src/assets/theme/dark/image/black-convert.png
Binary files differ
diff --git a/src/assets/theme/white/index.scss b/src/assets/theme/white/index.scss
index 7ab3c1f..452fc5e 100644
--- a/src/assets/theme/white/index.scss
+++ b/src/assets/theme/white/index.scss
@@ -1,32 +1,32 @@
-$main_background:#fff;
+$main_background:#f6f5fa;
$text_color:#333;
$text_color1:#868C9A;
$text_color2:#B7BDD1;
-$text_color3: #000000; //
-$tab_background:#F5F5F5;
+$text_color3: #000000; //
+$tab_background:#f6f5fa;
$active_line:#1194F7;
-$footer_background:#fff;
+$footer_background:#ffffff;
$btn_main: #1194F7;
$color_main: #1194F7;
$btn_background: #1194F7; //按钮颜色
-$input_background: #F5F5F5;
-$cont_background: #f6f6f6;
+$input_background: #f6f5fa;
+$cont_background: #f6f5fa;
$title_color: #000;
$line_color:#E5E7ED;
$bg_dark:#C8CAD2;
$border_color:#E5E7ED;
$divi_line:#E5E7ED;
$bg_step:#E5E9F0;
-$bg_Bottom: #fff;
-$chat_bg:#E5E7ED;
-$upload_bg: #f7f8fa;
-$grey_bg:#E5E7ED;
-$input_background1:#f5f5f5;
+$bg_Bottom: #f6f5fa;
+$chat_bg:#f6f5fa;
+$upload_bg: #f6f5fa;
+$grey_bg:#f6f5fa;
+$input_background1:#f6f5fa;
$c2c_color: #000;
$c2c_background:#1194F7;
-$c2c_background1: #f5f5f5;
-$c2c_tab_background: #fff;
-$c2c_tip_background:#eff7ff;
+$c2c_background1: #f6f5fa;
+$c2c_tab_background: #f6f5fa;
+$c2c_tip_background:#f6f5fa;
.mainBackground{
// background: $main_background;
diff --git a/src/components/Transform/application/application.vue b/src/components/Transform/application/application.vue
index 11f93c0..bbac938 100644
--- a/src/components/Transform/application/application.vue
+++ b/src/components/Transform/application/application.vue
@@ -37,7 +37,6 @@
import { Image as VanImage } from 'vant';
import assetsHead from "@/components/Transform/assets-head/index.vue";
import { dataTimeEx } from '@/utils/utis'
-import { customerServiceUrl } from "@/config";
export default {
name: 'rechargeSubmit',
components: {
@@ -71,11 +70,7 @@
this.time = dataTimeEx(Date.parse(new Date()), true);
},
tokefu() {
- if (customerServiceUrl()) {
- window.location.href = customerServiceUrl();
- } else {
- this.$router.push('/customerService')
- }
+ this.$router.push('/customerService');
}
}
}
diff --git a/src/components/Transform/contract-header/index.vue b/src/components/Transform/contract-header/index.vue
index 1d305d8..11236b6 100644
--- a/src/components/Transform/contract-header/index.vue
+++ b/src/components/Transform/contract-header/index.vue
@@ -1,20 +1,20 @@
<template>
<!-- 永续合约，交割合约公共头部 -->
- <div id="cryptos">
+ <div id="cryptos" style="padding: 0.9rem 1.6rem 0rem 1.6rem;margin-bottom: 10px;">
<div class="contract-header">
<div>
<div class="flex justify-start pt-5 before">
<div class="flex items-center ">
- <img src="@/assets/image/icon_back.png" class="w-35 h-35 back" alt="" @click="jump()">
+ <!-- <img src="@/assets/image/icon_back.png" class="w-35 h-35 back" alt="" @click="jump()"> -->
<!-- <img src="@/assets/theme/dark/image/black-convert.png" alt="convert-img" class="w-35 h-35" @click="onSidebar"> -->
- <img src="@/assets/image/exchangeIcon.png" alt="convert-img" class="w-35 h-35" @click="onSidebar">
+ <img src="../../../assets/theme/dark/image/black-convert.png" alt="convert-img" class="w-45 h-45" @click="onSidebar">
<div class="flex pl-21 textColor" @click="onSidebar">
<div class="font-35">{{ symbolName.toUpperCase() || '--' }}</div>
<!-- <div class="ml-15 font-28">{{ title }}</div> -->
</div>
- <div class="pl-10 w-160 font-28" :class="{ 'text-green': range > 0, 'text-red': range <= 0 }">{{ range > 0
+ <!-- <div class="pl-10 w-160 font-28" :class="{ 'text-green': range > 0, 'text-red': range <= 0 }">{{ range > 0
?
- '+' : '' }}{{ range || '--' }}%</div>
+ '+' : '' }}{{ range || '--' }}%</div> -->
<img src="@/assets/image/kline.png" class="w-44 h-44 right" alt="" @click="klineJump()">
</div>
<!-- <div class="flex items-center">
@@ -22,14 +22,14 @@
@click="jump" />
</div> -->
</div>
- <div class="flex justify-between pt-34">
+ <!-- <div class="flex justify-between pt-34">
<button class="tabBtn w-368 h-74 lh-74 border-none rounded"
:class="selectIndex == 1 ? 'select-active' : 'no-select'" @click="changeTab(1)">
{{ $t('永续合约') }}</button>
<button class="tabBtn w-368 h-74 lh-74 border-none rounded"
:class="selectIndex == 2 ? 'select-one-active' : 'no-select'" @click="changeTab(2)">
{{ queryType == 'cryptos' ? $t('交割合约') : $t('期货交易') }}</button>
- </div>
+ </div> -->
</div>
</div>
<!-- 左侧边弹出菜单 -->
@@ -155,12 +155,18 @@
},
methods: {
onRoute(item) {
- if (this.$route.params.symbol !== item.symbol) {
- this.$router.push(`/cryptos/perpetualContract/${item.symbol}?type=${this.queryType}`)
- this.$emit('update-coin', item.symbol)
- setStorage('symbol', item.symbol)
- this.$forceUpdate()
+ if (this.$route.params.symbol === item.symbol) {
+ this.show = false
+ return
}
+ setStorage('symbol', item.symbol)
+ this.$emit('update-coin', item.symbol)
+ // 当前在 /trade/index 时只更新币种不跳转，其它页面跳转到永续合约页
+ const isTradeIndex = this.$route.path === '/trade/index' || this.$route.path === '/trade'
+ if (!isTradeIndex) {
+ this.$router.push(`/cryptos/perpetualContract/${item.symbol}?type=${this.queryType}`)
+ }
+ this.$forceUpdate()
this.show = false
},
onSidebar() { // 侧边栏打开
diff --git a/src/components/Transform/cryptos-trade-deep-data/index.vue b/src/components/Transform/cryptos-trade-deep-data/index.vue
index 35c354c..fbec1ab 100644
--- a/src/components/Transform/cryptos-trade-deep-data/index.vue
+++ b/src/components/Transform/cryptos-trade-deep-data/index.vue
@@ -2,16 +2,16 @@
<div class="deep-data">
<div class="flex justify-between text-grey font-24">
<div>
- <div>{{ $t('价格') }}</div>
- <div class="mt-5">(USDT)</div>
+ <div>{{ $t('价格') }}(USDT)</div>
+ <!-- <div class="mt-5"></div> -->
</div>
<div class="text-right items-end justify-end">
- <div class="">{{ $t('数量') }}</div>
- <div class="mt-5">({{ symbol_name.toUpperCase() || '--' }})</div>
+ <div class="">{{ $t('数量') }}({{ symbol_name.toUpperCase() || '--' }})</div>
+ <!-- <div class="mt-5"></div> -->
</div>
</div>
- <div v-if="showType == 0 || showType == 2" class="flex justify-between pt-6 font-26"
+ <div v-if="showType == 0 || showType == 2" class="flex justify-between pt-1 font-24" style="font-family:DINAlternate-Bold;"
v-for="(item, index) in redData" :key="item + index" @click="onPrice(item.price)" :style="{
'background': `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'} 0%` +
(item.amount / greenData[greenData.length - 1].amount) * 100 + '%,rgba(246,70,93,.1) ' +
@@ -21,15 +21,15 @@
<div class="text-right textColor" v-if="symbol == 'shib'">{{ fixDate(item.amount, $i18n) || '--' }}</div>
<div class="text-right textColor" v-else>{{ item.amount || '--' }}</div>
</div>
- <div class="text-red pt-12 font-34 font-700 text-center">
+ <div class="text-red font-34 font-700 text-center">
{{ price || '--' }}
</div>
- <div class="pb-12 font-20 text-center">
+ <!-- <div class="pb-12 font-20 text-center">
≈ {{ ((price *
currency.rate).toFixed(price.toString().split('.')[1] ?
price.toString().split('.')[1].length : 2)) || '--' }}
- </div>
- <div v-if="showType == 0 || showType == 1" class="flex justify-between pt-6 font-26"
+ </div> -->
+ <div v-if="showType == 0 || showType == 1" class="flex justify-between pt-1 font-24"
v-for="(item, index) in greenData" :key="index" @click="onPrice(item.price)" :style="{
'background': `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'} 0%` +
(item.amount / greenData[greenData.length - 1].amount) * 100 + '%,rgba(94,186,137,.1) ' +
diff --git a/src/components/Transform/ex-header/index.vue b/src/components/Transform/ex-header/index.vue
index 8e26093..823f050 100644
--- a/src/components/Transform/ex-header/index.vue
+++ b/src/components/Transform/ex-header/index.vue
@@ -14,7 +14,6 @@
<script>
import { THEME } from '@/config/theme'
-import { customerServiceUrl } from "@/config";
export default {
props: {
unread_num: {
@@ -51,11 +50,7 @@
this.tabList[index]['data'] = this.tabList[index]['data'].filter(item => item.symbol.includes(this.keywords))
},
tokefu() {
- if (customerServiceUrl()) {
- window.location.href = customerServiceUrl();
- } else {
- this.$router.push('/customerService')
- }
+ this.$router.push('/customerService');
}
}
}
diff --git a/src/components/Transform/ex-tabs/index.vue b/src/components/Transform/ex-tabs/index.vue
index 2f9d814..a3ce78f 100644
--- a/src/components/Transform/ex-tabs/index.vue
+++ b/src/components/Transform/ex-tabs/index.vue
@@ -61,16 +61,17 @@
<style lang="scss" scoped>
.ex-tabs {
- font-size: 28px;
+ font-size: 34px;
display: flex;
- margin-top: 52px;
+ font-weight: bold;
+ // margin-top: 52px;
justify-content: center;
align-items: center;
.ex-tab {
text-align: center;
flex: 1;
- padding: 10px 17px !important;
+ padding: 25px 17px !important;
border-radius: 4px;
color: #787E8C;
}
diff --git a/src/components/Transform/kline-charts/drawTools.js b/src/components/Transform/kline-charts/drawTools.js
new file mode 100644
index 0000000..4aeab84
--- /dev/null
+++ b/src/components/Transform/kline-charts/drawTools.js
@@ -0,0 +1,120 @@
+/**
+ * 自定义绘图图形模板：矩形、三角形、平行四边形
+ * 供 klinecharts addShapeTemplate 使用
+ */
+
+// 矩形：两点为对角线端点，totalStep=3 表示点击2次完成
+export const rectShape = {
+ name: 'rect',
+ totalStep: 3,
+ checkEventCoordinateOnShape: ({ dataSource, eventCoordinate }) => {
+ if (!dataSource || dataSource.length < 1 || !dataSource[0].length) return false
+ const points = dataSource[0]
+ if (points.length < 4) return false
+ const xs = points.map(p => p.x)
+ const ys = points.map(p => p.y)
+ const minX = Math.min(...xs)
+ const maxX = Math.max(...xs)
+ const minY = Math.min(...ys)
+ const maxY = Math.max(...ys)
+ return eventCoordinate.x >= minX - 4 && eventCoordinate.x <= maxX + 4 &&
+ eventCoordinate.y >= minY - 4 && eventCoordinate.y <= maxY + 4
+ },
+ createShapeDataSource: ({ coordinates }) => {
+ if (coordinates.length < 2) return []
+ const [c1, c2] = coordinates
+ const minX = Math.min(c1.x, c2.x)
+ const maxX = Math.max(c1.x, c2.x)
+ const minY = Math.min(c1.y, c2.y)
+ const maxY = Math.max(c1.y, c2.y)
+ const polygon = [
+ { x: minX, y: minY },
+ { x: maxX, y: minY },
+ { x: maxX, y: maxY },
+ { x: minX, y: maxY }
+ ]
+ return [{
+ type: 'polygon',
+ isDraw: true,
+ isCheck: true,
+ dataSource: [polygon]
+ }]
+ }
+}
+
+// 三角形：三个顶点，totalStep=4 表示点击3次完成
+export const triangleShape = {
+ name: 'triangle',
+ totalStep: 4,
+ checkEventCoordinateOnShape: ({ dataSource, eventCoordinate }) => {
+ if (!dataSource || dataSource.length < 1 || !dataSource[0].length) return false
+ const points = dataSource[0]
+ if (points.length < 3) return false
+ const getTriangleSquare = (p1, p2, p3) => {
+ const x1 = Math.abs(p2.x - p1.x)
+ const y1 = Math.abs(p2.y - p1.y)
+ const x2 = Math.abs(p3.x - p1.x)
+ const y2 = Math.abs(p3.y - p1.y)
+ return Math.abs(x1 * y2 - x2 * y1) / 2
+ }
+ const square = getTriangleSquare(points[0], points[1], points[2])
+ const compareSquare = getTriangleSquare(points[0], points[1], eventCoordinate) +
+ getTriangleSquare(points[0], points[2], eventCoordinate) +
+ getTriangleSquare(points[1], points[2], eventCoordinate)
+ return Math.abs(square - compareSquare) < 4
+ },
+ createShapeDataSource: ({ coordinates }) => {
+ if (coordinates.length < 3) return []
+ const polygon = coordinates.slice(0, 3)
+ return [{
+ type: 'polygon',
+ isDraw: true,
+ isCheck: true,
+ dataSource: [polygon]
+ }]
+ }
+}
+
+function getTriangleSquare(p1, p2, p3) {
+ const x1 = Math.abs(p2.x - p1.x)
+ const y1 = Math.abs(p2.y - p1.y)
+ const x2 = Math.abs(p3.x - p1.x)
+ const y2 = Math.abs(p3.y - p1.y)
+ return Math.abs(x1 * y2 - x2 * y1) / 2
+}
+
+function pointInTriangle(p1, p2, p3, pt) {
+ const square = getTriangleSquare(p1, p2, p3)
+ const sum = getTriangleSquare(p1, p2, pt) + getTriangleSquare(p1, p3, pt) + getTriangleSquare(p2, p3, pt)
+ return Math.abs(square - sum) < 4
+}
+
+// 平行四边形：前三点确定，第四点 = p2 + (p3 - p1)
+export const parallelogramShape = {
+ name: 'parallelogram',
+ totalStep: 4,
+ checkEventCoordinateOnShape: ({ dataSource, eventCoordinate }) => {
+ if (!dataSource || dataSource.length < 1 || !dataSource[0].length) return false
+ const points = dataSource[0]
+ if (points.length < 4) return false
+ return pointInTriangle(points[0], points[1], points[2], eventCoordinate) ||
+ pointInTriangle(points[0], points[2], points[3], eventCoordinate)
+ },
+ createShapeDataSource: ({ coordinates }) => {
+ if (coordinates.length < 3) return []
+ const [p1, p2, p3] = coordinates
+ const p4 = {
+ x: p2.x + (p3.x - p1.x),
+ y: p2.y + (p3.y - p1.y)
+ }
+ const polygon = [p1, p2, p4, p3]
+ return [{
+ type: 'polygon',
+ isDraw: true,
+ isCheck: true,
+ dataSource: [polygon]
+ }]
+ }
+}
+
+export const customShapeTemplates = [rectShape, triangleShape, parallelogramShape]
diff --git a/src/components/Transform/kline-charts/index.vue b/src/components/Transform/kline-charts/index.vue
index 8fa0716..14840e7 100644
--- a/src/components/Transform/kline-charts/index.vue
+++ b/src/components/Transform/kline-charts/index.vue
@@ -1,5 +1,5 @@
<template>
- <div id="cryptos">
+ <div >
<div class="kline-charts">
<ul class="flex px-32 pb-20 box-border justify-between text-grey fontStyle font-26"
style="border-bottom:1px solid rgba(68,75,88,0.2);">
@@ -18,12 +18,54 @@
</template>
</template>
</ul>
- <div class="relative">
- <div id="kline" class="h-828"></div>
- <div
- class="flex justify-center items-center text-center text-grey absolute left-0 top-0 w-full h-full z-10 mainBackground"
- v-if="chartLoading">
- <van-loading type="spinner"></van-loading>
+ <div class="chart-with-tools flex">
+ <div class="relative flex-1 min-w-0">
+ <div id="kline" class="h-828"></div>
+ <div
+ class="flex justify-center items-center text-center text-grey absolute left-0 top-0 w-full h-full z-10 mainBackground"
+ v-if="chartLoading">
+ <van-loading type="spinner"></van-loading>
+ </div>
+ </div>
+ <!-- 铅笔图标：控制绘图工具栏显示/隐藏 -->
+ <div class="draw-tools-wrap flex">
+ <div class="pencil-trigger draw-tool-item" :class="[isNight ? 'draw-toolbar-night' : 'draw-toolbar-light', { active: showDrawToolbar }]"
+ :title="showDrawToolbar ? $t('隐藏绘图工具') : $t('显示绘图工具')" @click="showDrawToolbar = !showDrawToolbar">
+ <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
+ </div>
+ <!-- 绘图工具栏 -->
+ <div v-show="showDrawToolbar" class="draw-toolbar" :class="isNight ? 'draw-toolbar-night' : 'draw-toolbar-light'">
+ <div class="draw-tool-item" :class="{ active: activeDrawTool === 'fibonacciLine' }" title="斐波那契" @click="onDrawToolClick('fibonacciLine')">
+ <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M4 20L20 4l-2-2L2 18v4h2z"/><circle cx="6" cy="18" r="1.5"/><circle cx="18" cy="6" r="1.5"/></svg>
+ </div>
+ <div class="draw-tool-item" :class="{ active: activeDrawTool === 'segment' }" title="线段" @click="onDrawToolClick('segment')">
+ <svg viewBox="0 0 24 24" width="20" height="20"><line x1="4" y1="20" x2="20" y2="4" stroke="currentColor" stroke-width="2"/><circle cx="4" cy="20" r="2"/><circle cx="20" cy="4" r="2"/></svg>
+ </div>
+ <div class="draw-tool-item" :class="{ active: activeDrawTool === 'horizontalStraightLine' }" title="水平线" @click="onDrawToolClick('horizontalStraightLine')">
+ <svg viewBox="0 0 24 24" width="20" height="20"><line x1="2" y1="12" x2="22" y2="12" stroke="currentColor" stroke-width="2"/><circle cx="12" cy="12" r="2"/></svg>
+ </div>
+ <div class="draw-tool-item" :class="{ active: activeDrawTool === 'horizontalSegment' }" title="水平线段" @click="onDrawToolClick('horizontalSegment')">
+ <svg viewBox="0 0 24 24" width="20" height="20"><line x1="6" y1="12" x2="18" y2="12" stroke="currentColor" stroke-width="2"/><circle cx="6" cy="12" r="2"/><circle cx="18" cy="12" r="2"/></svg>
+ </div>
+ <div class="draw-tool-item" :class="{ active: activeDrawTool === 'verticalStraightLine' }" title="垂直线" @click="onDrawToolClick('verticalStraightLine')">
+ <svg viewBox="0 0 24 24" width="20" height="20"><line x1="12" y1="2" x2="12" y2="22" stroke="currentColor" stroke-width="2"/><circle cx="12" cy="12" r="2"/></svg>
+ </div>
+ <div class="draw-tool-item" :class="{ active: activeDrawTool === 'verticalSegment' }" title="垂直线段" @click="onDrawToolClick('verticalSegment')">
+ <svg viewBox="0 0 24 24" width="20" height="20"><line x1="12" y1="6" x2="12" y2="18" stroke="currentColor" stroke-width="2"/><circle cx="12" cy="6" r="2"/><circle cx="12" cy="18" r="2"/></svg>
+ </div>
+ <div class="draw-tool-item" :class="{ active: activeDrawTool === 'rect' }" title="矩形" @click="onDrawToolClick('rect')">
+ <svg viewBox="0 0 24 24" width="20" height="20"><rect x="5" y="7" width="14" height="10" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="5" cy="7" r="1.5"/><circle cx="19" cy="17" r="1.5"/></svg>
+ </div>
+ <div class="draw-tool-item" :class="{ active: activeDrawTool === 'triangle' }" title="三角形" @click="onDrawToolClick('triangle')">
+ <svg viewBox="0 0 24 24" width="20" height="20"><path d="M12 5L4 19h16L12 5z" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="12" cy="5" r="1.5"/><circle cx="4" cy="19" r="1.5"/><circle cx="20" cy="19" r="1.5"/></svg>
+ </div>
+ <div class="draw-tool-item" :class="{ active: activeDrawTool === 'parallelogram' }" title="平行四边形" @click="onDrawToolClick('parallelogram')">
+ <svg viewBox="0 0 24 24" width="20" height="20"><path d="M6 6h12l-4 12H2L6 6z" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="6" cy="6" r="1.5"/><circle cx="18" cy="6" r="1.5"/><circle cx="14" cy="18" r="1.5"/></svg>
+ </div>
+ <div class="draw-tool-item" title="清除全部" @click="onDrawToolClick('remove')">
+ <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
+ </div>
+ </div>
</div>
</div>
<ul class="flex px-32 py-20 box-border justify-between text-grey font-26" v-if="showBottom"
@@ -53,6 +95,7 @@
import config from './config'
import { clearAllTimers } from '@/utils/utis.js'
import { Loading } from 'vant';
+import { customShapeTemplates } from './drawTools'
export default {
name: 'KlineCharts',
data() {
@@ -70,19 +113,21 @@
chartLoading: true, //加载动画
paneId: '',
chartData: [], // 图表数据
- timer: null
+ timer: null,
+ activeDrawTool: '', // 当前选中的绘图工具
+ showDrawToolbar: true // 绘图工具栏是否显示，由铅笔图标切换
}
},
computed: {
timeList() {
return [
{ id: '1min', time: '1min', text: this.$t('分时'), ts: 1 * 60 * 1000 },
- { id: '1mins', time: '1min', text: '1' + this.$t('分'), ts: 1 * 60 * 1000 },
+ // { id: '1mins', time: '1min', text: '1' + this.$t('分'), ts: 1 * 60 * 1000 },
{ id: '5min', time: '5min', text: '5' + this.$t('分'), ts: 5 * 60 * 1000 },
{ id: '15min', time: '15min', text: '15' + this.$t('分'), ts: 15 * 60 * 1000 },
{ id: '30min', time: '30min', text: '30' + this.$t('分'), ts: 30 * 60 * 1000 },
{ id: '60min', time: '60min', text: '1' + this.$t('小时'), ts: 60 * 60 * 1000 },
- { id: '4hour', time: '4hour', text: '4' + this.$t('小时'), ts: 4 * 60 * 60 * 1000 },
+ // { id: '4hour', time: '4hour', text: '4' + this.$t('小时'), ts: 4 * 60 * 60 * 1000 },
{ id: '1day', time: '1day', text: '1' + this.$t('天'), ts: 24 * 60 * 60 * 1000 },
{ id: '1week', time: '1week', text: '1' + this.$t('周'), ts: 7 * 24 * 60 * 60 * 1000 },
{ id: '1mon', time: '1mon', text: '1' + this.$t('月'), ts: 30 * 24 * 60 * 60 * 1000 }
@@ -136,25 +181,14 @@
this.clearTimer()
this.fetchData()
},
- updateKey() { // 更新charts
+ updateKey() { // 更新charts：只更新 this.updateData 的 close，其余沿用最后一根
const dataList = chart.getDataList()
if (dataList.length > 0) {
const lastData = dataList[dataList.length - 1]
const nowData = this.updateData
- const timeValue = this.timeValue
const newData = {
- close: nowData.close / 1,
- current_time: lastData.current_time,
- high: lastData.high > nowData.close / 1 ? lastData.high : (nowData.close / 1),
- // high: lastData.high,
- line: timeValue.id,
- low: lastData.low < nowData.close / 1 ? lastData.low : (nowData.close / 1),
- // low: lastData.low,
- open: lastData.open,
- symbol: lastData.symbol,
- ts: lastData.ts, //
- timestamp: (nowData.ts - lastData.ts) < timeValue.ts ? lastData.ts : (lastData.ts + timeValue.ts),
- volume: lastData.volume / 1
+ ...lastData,
+ close: nowData.close != null && nowData.close !== '' ? (nowData.close / 1) : lastData.close
}
this.$nextTick(() => {
this.setChartType()
@@ -165,13 +199,15 @@
},
methods: {
initData() {
- this.timeValue = this.timeList[0]
+ this.timeValue = this.timeList.find(t => t.id === '15min') || this.timeList[0]
chart = init('kline', config);
chart.setOffsetRightSpace(25)
chart.setDataSpace(10)
chart.setPriceVolumePrecision(4, 2)
chart.createTechnicalIndicator('MA', false, { id: 'candle_pane' });
this.paneId = chart.createTechnicalIndicator('VOL');
+ // 注册自定义绘图图形：矩形、三角形、平行四边形
+ chart.addShapeTemplate(customShapeTemplates)
this.fetchData()
},
fetchData(time) { // 获取数据
@@ -210,7 +246,7 @@
chart.applyNewData(data);
this.$emit('updataLine', false)
})
- }, 30000);
+ }, 10000);
},
setChartType() {
let type = 'area'
@@ -239,6 +275,16 @@
this.timer = null
clearAllTimers()
},
+ onDrawToolClick(name) {
+ if (!chart) return
+ if (name === 'remove') {
+ chart.removeShape()
+ this.activeDrawTool = ''
+ return
+ }
+ this.activeDrawTool = name
+ chart.createShape(name, 'candle_pane')
+ },
},
deactivated() {
this.clearTimer()
@@ -247,7 +293,99 @@
</script>
<style lang="scss" scoped>
@import "@/assets/init.scss";
-// #kline {
-// // min-height: 828px;
-// height: 1200px;
-// }</style>
+
+.chart-with-tools {
+ position: relative;
+}
+
+.draw-tools-wrap {
+ flex-shrink: 0;
+ display: flex;
+ border-left: 1px solid rgba(68, 75, 88, 0.2);
+}
+
+.draw-tools-wrap .pencil-trigger {
+ width: 44px;
+ min-width: 44px;
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 8px 0;
+ cursor: pointer;
+ transition: background 0.2s;
+ border-radius: 0;
+}
+.pencil-trigger.draw-toolbar-light {
+ background: rgba(255, 255, 255, 0.98);
+ color: #333;
+}
+.pencil-trigger.draw-toolbar-light:hover,
+.pencil-trigger.draw-toolbar-light.active {
+ background: rgba(0, 0, 0, 0.06);
+ color: #2196f3;
+}
+.pencil-trigger.draw-toolbar-night {
+ background: rgba(17, 26, 46, 0.98);
+ color: #d9d9d9;
+}
+.pencil-trigger.draw-toolbar-night:hover,
+.pencil-trigger.draw-toolbar-night.active {
+ background: rgba(255, 255, 255, 0.08);
+ color: #42a5f5;
+}
+
+.draw-toolbar {
+ width: 44px;
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 8px 0;
+ gap: 4px;
+}
+
+.draw-toolbar-light {
+ background: rgba(255, 255, 255, 0.98);
+ color: #333;
+}
+
+.draw-toolbar-night {
+ background: rgba(17, 26, 46, 0.98);
+ color: #d9d9d9;
+ border-left-color: rgba(68, 75, 88, 0.4);
+}
+
+.draw-tool-item {
+ width: 36px;
+ height: 36px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 6px;
+ cursor: pointer;
+ transition: background 0.2s;
+}
+
+.draw-toolbar-light .draw-tool-item:hover {
+ background: rgba(0, 0, 0, 0.06);
+}
+
+.draw-toolbar-light .draw-tool-item.active {
+ background: rgba(33, 150, 243, 0.15);
+ color: #2196f3;
+}
+
+.draw-toolbar-night .draw-tool-item:hover {
+ background: rgba(255, 255, 255, 0.08);
+}
+
+.draw-toolbar-night .draw-tool-item.active {
+ background: rgba(33, 150, 243, 0.25);
+ color: #42a5f5;
+}
+
+.draw-tool-item svg {
+ display: block;
+}
+</style>
diff --git a/src/components/Transform/list-quotation/index.vue b/src/components/Transform/list-quotation/index.vue
index 3568206..fd62d42 100644
--- a/src/components/Transform/list-quotation/index.vue
+++ b/src/components/Transform/list-quotation/index.vue
@@ -22,10 +22,11 @@
<transition-group :name="type" tag="div">
<div v-if="active == 0">
<van-cell v-for="item in listData" :key="item.id">
- <ul class="flex justify-between w-full items-center" @click="onItemClick(item)">
+ <ul class="flex justify-between w-full items-center" @click="onItemClick(item)">
<li class="flex items-center left">
<img
- :src="item.symbol ? `${HOST_URL}/symbol/${item.symbol_data}.png` : handleImage('../../../assets/loading-default.png')"
+ :src="getSymbolImg(item)"
+ @error="onSymbolImgError"
alt="logo" class="w-72 h-72 rounded-full mr-16" />
<p class="flex flex-col">
<span class="flex items-end font-32 flex items-center">
@@ -36,7 +37,7 @@
<!-- <span class="font-24 text-grey" style="position: relative; top: 1px">
{{ item.name && item.name.replace(item.symbol.toUpperCase(), '') || '--' }}</span> -->
</span>
- <span class="font-24 text-grey text-left">{{ $t('成交量') + ' ' + (item.amount * 1).toFixed(2) }}</span>
+ <!-- <span class="font-24 text-grey text-left">{{ $t('成交量') + ' ' + (item.amount * 1).toFixed(2) }}</span> -->
</p>
</li>
<li class="flex flex-col items-end mid">
@@ -59,8 +60,9 @@
<van-cell v-for="item in showList" :key="item.id">
<ul class="flex justify-between w-full items-center" @click="onItemClick(item)">
<li class="flex items-center left">
- <img :src="`${HOST_URL}/symbol/${item.symbol_data}.png`" alt="logo"
- class="w-72 h-72 rounded-full mr-16" />
+ <img :src="getSymbolImg(item)"
+ @error="onSymbolImgError"
+ alt="logo" class="w-72 h-72 rounded-full mr-16" />
<p class="flex flex-col">
<span class="flex items-end font-32 flex items-center">
<span class="textColor font-600 font-30">{{ arrGk(item.name.toUpperCase())[0] }}</span>
@@ -110,12 +112,14 @@
import ExTabs from "@/components/Transform/ex-tabs/index.vue";
import { HOST_URL } from '@/config'
import { SET_CURRENCY } from "@/store/const.store";
+const defaultLogo = new URL('@/assets/imgs/logo.png', import.meta.url).href;
export default {
name: 'ListQuotation',
data() {
return {
fixDate,
HOST_URL,
+ defaultLogo,
active: 0,
showList: [],
type: 'left' //left 从左往右 right 从有王座
@@ -171,8 +175,14 @@
});
}
},
- handleImage(url) {
- return new URL(url, import.meta.url).href
+ getSymbolImg(item) {
+ if (item?.symbol && item?.symbol_data && this.HOST_URL) {
+ return `${this.HOST_URL}/symbol/${(item.symbol_data + '').toLowerCase()}.png`;
+ }
+ return this.defaultLogo;
+ },
+ onSymbolImgError(e) {
+ if (e?.target) e.target.src = this.defaultLogo;
},
onTabs(val) {
if (this.active < val) {
@@ -235,7 +245,7 @@
@import "@/assets/init.scss";
#cryptos {
-
+
.left-enter-active,
.left-leave-active,
.right-enter-active,
@@ -243,7 +253,11 @@
will-change: transform;
transition: all 250ms;
}
-
+.van-cell {
+ padding: 25px 15px !important;
+ background-color: #fff !important;
+ border-radius: 10px !important;
+}
.textColor {
color: $text_color4;
}
diff --git a/src/components/Transform/mining-account/index.vue b/src/components/Transform/mining-account/index.vue
index 556205d..392a6cf 100644
--- a/src/components/Transform/mining-account/index.vue
+++ b/src/components/Transform/mining-account/index.vue
@@ -1,37 +1,32 @@
<template>
- <div id="cryptos">
- <div id="mining-account">
- <div style="position: relative" class="px-30 pb-104">
- <div class="account_card">
- <mining-exchange-input :title="$t('从')" :value1="form.volume" :actions="actions"
- @select="onSelect('symbol', $event)" @input="onInput" :type="1" @max="onMax" :coin="form.symbol"
- :coin1="form.symbol_to" :tips="[]" :iconImg1="form.iconImg1" :iconImg2="form.iconImg2"
- :available="`${amountAvailable} ${form.symbol.toUpperCase()}`" :showMax="true" />
- <!-- <div v-if="show" class="font-28 text-grey">
- {{ $t('可用数量') }}：
- <span class="textColor">{{ amountAvailable }} {{ form.symbol.toUpperCase() }}</span>
- </div> -->
- </div>
-
- <div class="flex justify-center convert-box">
- <img src="../../../assets/image/assets-center/convert-two.png" alt="" @click="onSwitch" />
- </div>
-
- <div class="account_card">
- <mining-exchange-input :title="$t('至')"
- :value="form.volume ? (form.volume * form.rate).toFixed(5) : ''" :actions="actions"
- @select="onSelect('symbol_to', $event)" :disabled="true" :type="2" :coin="form.symbol"
- :coin1="form.symbol_to" :tips="[]" :showMax="false" :iconImg1="form.iconImg1"
- :iconImg2="form.iconImg2" />
- </div>
-
- <div class="exchange-btn w-full flex justify-center mt-116">
- <p class="h-100 btnMain mx-auto flex justify-center items-center text-white w-768"
- @click="onConfirm">
- {{ $t('询价') }}
- </p>
- </div>
+ <div id="cryptos" class="mining-account-wrap">
+ <div id="mining-account" class="mining-account-inner">
+ <!-- 上卡片：from user wallet -->
+ <div class="exchange-card exchange-card-from">
+ <mining-exchange-input :title="$t('from user wallet')" :value1="form.volume" :actions="actions"
+ @select="onSelect('symbol', $event)" @input="onInput" :type="1" @max="onMax" :coin="form.symbol"
+ :coin1="form.symbol_to" :tips="[]" :iconImg1="form.iconImg1" :iconImg2="form.iconImg2"
+ :available="`${amountAvailable} ${form.symbol.toUpperCase()}`" :showMax="false" />
</div>
+
+ <!-- 中间：紫色互换图标 -->
+ <div class="exchange-swap-circle" @click="onSwitch">
+ <van-icon name="exchange" size="22" color="#fff" />
+ </div>
+
+ <!-- 下卡片：至用户钱包（与目标图一致） -->
+ <div class="exchange-card exchange-card-to">
+ <mining-exchange-input :title="$t('to user wallet')"
+ :value="form.volume ? (form.volume * form.rate).toFixed(5) : ''" :actions="actions"
+ @select="onSelect('symbol_to', $event)" :disabled="true" :type="2" :coin="form.symbol"
+ :coin1="form.symbol_to" :tips="[]" :showMax="false" :iconImg1="form.iconImg1"
+ :iconImg2="form.iconImg2" :available="toWalletBalance" />
+ </div>
+
+ <!-- 提交按钮 -->
+ <button class="exchange-submit-btn" @click="onConfirm">
+ {{ $t('提交') }}
+ </button>
</div>
</div>
</template>
@@ -109,6 +104,10 @@
}
return res
+ },
+ toWalletBalance() {
+ let dataInfo = this.wallets.find(item => item.symbol_data.toUpperCase() == this.form.iconImg2.toUpperCase())
+ return dataInfo ? `${dataInfo.usable} ${(this.form.symbol_to || '').toUpperCase()}` : `0 ${(this.form.symbol_to || '').toUpperCase()}`
},
},
data() {
@@ -263,74 +262,51 @@
</script>
<style scoped lang="scss">
-@import "@/assets/init.scss";
-
-#cryptos {
- .account_card {
- // background: $inp-b !important;
- border-radius: 2.5rem;
- padding: 1.2rem 2.5rem;
-
- @include themify() {
- background: themed("input_background") !important;
- }
-
- div {
- // background: $inp-b !important;
-
- @include themify() {
- background: themed("input_background") !important;
- }
- }
- }
-
- .exchange-btn {
- bottom: 48px;
- left: 0;
-
- font-size: 36px;
-
- p {
- border-radius: 4rem;
- }
- }
-
- .active {
- color: $black;
-
- &:after {
- content: '';
- display: block;
- position: absolute;
- bottom: 0;
- width: 140px;
- height: 8px;
- background: $active_line;
- margin: 0 auto;
- }
- }
-
- .convert-box {
- background: $mainbgWhiteColor;
- margin: -2rem auto;
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- width: 6rem;
- height: 6rem;
- position: relative;
-
- img {
- width: 50%;
- height: 50%;
- }
- }
-
- .btnMain {
- background: linear-gradient(90deg, #2C64D4 0%, #38AEEA 100%);
- border-radius: 5px;
- font-weight: bold;
- }
+.mining-account-wrap {
+ background: transparent;
+}
+.mining-account-inner {
+ position: relative;
+ padding-bottom: 0;
+}
+.exchange-card {
+ background: #fff;
+ border-radius: 14px;
+ padding: 24px 24px 29px;
+ box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
+}
+.exchange-card-from {
+ margin-bottom: 0;
+}
+.exchange-swap-circle {
+ width: 84px;
+ height: 84px;
+ margin: -42px auto 0;
+ position: relative;
+ z-index: 2;
+ background: linear-gradient(135deg, #a443cf, #5e2bc8);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 5px 14px rgba(94, 43, 200, 0.35);
+ cursor: pointer;
+}
+.exchange-card-to {
+ margin-top: 0;
+ padding-top: 42px;
+}
+.exchange-submit-btn {
+ width: 100%;
+ height: auto;
+ padding: 18px 0;
+ margin: 38px 0 48px;
+ border: none;
+ border-radius: 14px;
+ background: linear-gradient(90deg, #a443cf, #5e2bc8);
+ color: #fff;
+ font-size: 2rem;
+ font-weight: 600;
+ cursor: pointer;
}
</style>
\ No newline at end of file
diff --git a/src/components/Transform/mining-exchange-input/index.vue b/src/components/Transform/mining-exchange-input/index.vue
index d3345cc..ed33a0b 100644
--- a/src/components/Transform/mining-exchange-input/index.vue
+++ b/src/components/Transform/mining-exchange-input/index.vue
@@ -1,35 +1,26 @@
<template>
- <div id="cryptos">
- <div class="flex mt-30 items-center">
- <p class=" font-18 flex-1 textColor">{{ title }}</p>
- <!-- <div class="money-bag" v-if="isMoney">
- 现货钱包
- <img src="@/assets/image/exchange/icon_4.png" alt="" class="w-25 h-25" />
- </div> -->
- <div v-if="available.length > 0" class="labelColor">
- {{ $t('可用数量') }}：
- <span>{{ available }}</span>
+ <div id="cryptos" class="exchange-input-card">
+ <div class="exchange-input-head">
+ <span class="exchange-input-title">{{ title }}</span>
+ <span class="exchange-input-balance">{{ $t('balance') }}: {{ available || '0' }}</span>
+ </div>
+ <div class="exchange-input-row">
+ <div class="exchange-input-coin" @click="type === 1 && onShowActionSheet()">
+ <img :src="`${HOST_URL}/symbol/${type == 1 ? iconImg1 : iconImg2}.png`" alt=""
+ class="exchange-input-coin-icon" />
+ <span class="exchange-input-coin-symbol">{{ type == 1 ? coin.toUpperCase() : coin1.toUpperCase() }}</span>
+ <van-icon v-if="type === 1" name="arrow-down" class="exchange-input-arrow" />
+ </div>
+ <div class="exchange-input-value">
+ <input v-if="type == 1" type="number" class="exchange-input-field"
+ v-model="oneValue" @input="onInput" :disabled="disabled" placeholder="0" />
+ <span v-else class="exchange-input-result">≈ {{ value || '0' }}</span>
</div>
</div>
- <div style="box-sizing: border-box" class="w-full rounded mt-22 flex items-center box-border py-3 inputBackground">
- <div class="flex border-r-gray border-white items-center" @click="onShowActionSheet">
- <img :src="`${HOST_URL}/symbol/${type == 1 ? iconImg1 : iconImg2}.png`" alt="logo"
- class="rounded-full mr-5 currency-icon" />
- <span class="font-16 mr-10 w-62 textColor">{{ type == 1 ? coin.toUpperCase() : coin1.toUpperCase() }}</span>
- <img src="./icon-arrow.png" alt="logo" class="w-12 h-8 icon-arrow" />
- </div>
- <div class="input-wrap flex justify-between flex-1 items-center ml-10">
- <input placeholder="" v-if="type == 1" type="number" class="h-40 pl-10 border-none inputBackground textColor"
- v-model="oneValue" @input="onInput" :disabled="disabled" />
- <input placeholder="" v-if="type == 2" type="number" class="h-40 pl-10 border-none inputBackground textColor"
- :value="value" @input="onInput" :disabled="disabled" />
- </div>
- <!-- <div v-if="showMax" class="pr-20" @click="onMax">{{ $t('最大') }}</div> -->
+ <div class="exchange-input-max" v-if="showMax">
+ <span @click="onMax">{{ $t('最大') }}</span>
</div>
- <div class="flex justify-end" v-if="showMax">
- <van-button type="default" round size="small" @click="onMax">{{ $t('最大') }}</van-button>
- </div>
- <div class="flex justify-between font-22 mt-15 text-grey">
+ <div class="flex justify-between font-22 mt-15 text-grey" v-if="tips && tips.length">
<p v-for="(tip, index) in tips" :key="index">{{ tip }}</p>
</div>
<!-- <van-action-sheet v-model="show" :actions="actions" @select="onSelect" /> -->
@@ -242,6 +233,88 @@
},
};
</script>
+<style lang="scss" scoped>
+.exchange-input-card {
+ background-color: #fff !important;
+ font-size: 2rem;
+ padding: 40px 0;
+}
+.exchange-input-head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 17px;
+}
+.exchange-input-title {
+ color: #888;
+ font-size: 2rem;
+}
+.exchange-input-balance {
+ color: #888;
+ font-size: 2rem;
+}
+.exchange-input-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 7px 0;
+ min-height: 53px;
+}
+.exchange-input-coin {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ cursor: pointer;
+}
+.exchange-input-coin-icon {
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ flex-shrink: 0;
+}
+.exchange-input-coin-symbol {
+ font-size: 2rem;
+ font-weight: 600;
+ color: #333;
+}
+.exchange-input-arrow {
+ color: #666;
+ font-size: 1.6rem;
+}
+.exchange-input-value {
+ flex: 1;
+ text-align: right;
+ min-width: 0;
+ margin-left: 19px;
+}
+.exchange-input-field {
+ width: 100%;
+ border: none;
+ background: transparent;
+ font-size: 2rem;
+ font-weight: 600;
+ color: #333;
+ text-align: right;
+ outline: none;
+}
+.exchange-input-field::placeholder {
+ color: #bbb;
+}
+.exchange-input-result {
+ font-size: 2rem;
+ font-weight: 600;
+ color: #666;
+}
+.exchange-input-max {
+ text-align: right;
+ margin-top: 7px;
+}
+.exchange-input-max span {
+ font-size: 2rem;
+ color: #5e2bc8;
+ cursor: pointer;
+}
+</style>
<style lang="scss">
@import "@/assets/init.scss";
@@ -250,7 +323,6 @@
font-size: 30px;
.input-wrap {
- // border-left: 1px solid #3E4968;
padding-left: 30px;
}
diff --git a/src/components/Transform/perpetual-entrust-list/index.vue b/src/components/Transform/perpetual-entrust-list/index.vue
index 6fedc16..b346af2 100644
--- a/src/components/Transform/perpetual-entrust-list/index.vue
+++ b/src/components/Transform/perpetual-entrust-list/index.vue
@@ -3,7 +3,7 @@
<div id="cryptos">
<template v-if="listData.length > 0">
<div class="border-b-color" v-for="item in listData" :key="item.order_no">
- <div class="flex justify-between pt-34 pb-19">
+ <div class="flex justify-between pt-34 pb-19" style="background-color: #fff;">
<div class="flex flex-col">
<div class="flex items-center">
<div class="font-31" :class="item.direction == 'buy' ? 'text-green' : 'text-red'">
diff --git a/src/components/Transform/perpetual-open/amountSlider.vue b/src/components/Transform/perpetual-open/amountSlider.vue
index a6d9526..0049937 100644
--- a/src/components/Transform/perpetual-open/amountSlider.vue
+++ b/src/components/Transform/perpetual-open/amountSlider.vue
@@ -13,7 +13,7 @@
</vue-slider>
</div>
<div class="poecs">
- <span></span>
+ <span>0%</span>
<span class="lins">25%</span>
<!-- <span >25%</span> -->
<span class="lins">50%</span>
diff --git a/src/components/Transform/perpetual-open/index.vue b/src/components/Transform/perpetual-open/index.vue
index 8959a8d..e1c869a 100644
--- a/src/components/Transform/perpetual-open/index.vue
+++ b/src/components/Transform/perpetual-open/index.vue
@@ -2,51 +2,160 @@
<!-- 永续合约开仓页 -->
<div id="cryptos">
<div class="perpetual-open">
- <div class="flex pt-34 ">
-
- <div class="w-180 h-60 lh-60 rounded tabBackground textColor" v-if="selectIndex / 1 === 1">
- <div @click="locationShow = !locationShow" style="height:100%; box-sizing: border-box"
- class="relative word-30 pl-28 pr-10 w-180 h-60 tabBackground select-wrap flex justify-between items-center">
- {{ locationTitle }}
- <img src="../../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11" />
- <div v-if="locationShow" class="options tabBackground w-180 absolute top-97 left-0 z-10">
- <div class="w-full" @click.stop="locationSelect(item)"
- :class="{ 'option-active': form.lever_rate === item.lever_rate }" :value="item.lever_rate"
- v-for="item in locationList" :key="item.type">
- {{ item.title }}
- </div>
- </div>
- </div>
+ <div class="trade-top-selectors" v-if="selectIndex / 1 === 1">
+ <div class="trade-selector trade-selector--buy relative" @click="openLeverPopup">
+ <span class="trade-selector-tag trade-selector-tag--green">{{ $t('买入') }}</span>
+ <span class="trade-selector-text">{{ leverDisplayMode }} {{ form.lever_rate }}X</span>
+ <van-icon name="arrow-down" class="trade-selector-arrow" />
</div>
-
- <div class="w-140 h-60 lh-60 ml-29 rounded tabBackground textColor" v-if="selectIndex / 1 === 1">
- <div @click="showOptions = !showOptions" style="height:100%; box-sizing: border-box"
- class="relative word-30 pl-28 pr-10 w-140 h-60 tabBackground select-wrap flex justify-between items-center">
- {{ form.lever_rate }}x <img src="../../../assets/image/public/grey-select.png" alt="select-icon"
- class="w-22 h-11" />
- <div v-if="showOptions" class="options tabBackground w-140 absolute top-97 left-0 z-10">
- <div class="w-full" @click.stop="handleChoose(item)"
- :class="{ 'option-active': form.lever_rate === item.lever_rate }" :value="item.lever_rate"
- v-for="item in initData.lever" :key="item.id">
- {{ item.lever_rate }}x
- </div>
- </div>
- </div>
+ <div class="trade-selector trade-selector--sell relative" @click="openLeverPopup">
+ <span class="trade-selector-tag trade-selector-tag--red">{{ $t('卖出') }}</span>
+ <span class="trade-selector-text">{{ leverDisplayMode }} {{ form.lever_rate }}X</span>
+ <van-icon name="arrow-down" class="trade-selector-arrow" />
</div>
</div>
<div class="pt-30 pb-20">
<div class="flex">
- <div class="w-440 flex flex-col">
+ <div class="mr-30">
+ <div class="w-290 flex justify-between text-grey font-22">
+ <div>
+ <div>{{ $t("价格") }}{{ queryType === 'cryptos' ? '(USDT)' : '(USD)' }}</div>
+ </div>
+ <div class="text-right items-end justify-end">
+ <div class="">{{ $t("数量") }}{{ queryType === 'cryptos' ?
+ `(${symbol_data.toUpperCase() || "--"})` : '(USD)' }}</div>
+ </div>
+ </div>
+ <div class="deep-div">
+ <!-- <div v-if="showType == 0 || showType == 2" class="w-290 flex justify-between pt-1 font-26"
+ v-for="(item, index) in redData" :key="item + index" @click="onQuickPrice(item.price)" :style="{
+ background:
+ `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
+ } 0%` +
+ (1 - item.amount / greenData[greenData.length - 1].amount) *
+ 100 +
+ '%,rgba(246,70,93,.1) ' +
+ (1 - item.amount / greenData[greenData.length - 1].amount) *
+ 100 +
+ '%,rgba(246,70,93,.1) 100%)',
+ }"> -->
+
+ <div v-show="(showType == 0 || showType == 2)" class="w-290 flex justify-between p-2 font-26"
+ v-for="(item, index) in redData" :key="item + index" @click="onQuickPrice(item.price)" :style="{
+ background:
+ `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
+ } 0%` +
+ (1 - item.amount / greenData[greenData.length - 1].amount) *
+ 100 +
+ '%,rgba(246,70,93,.1) ' +
+ (1 - item.amount / greenData[greenData.length - 1].amount) *
+ 100 +
+ '%,rgba(246,70,93,.1) 100%)'
+ }">
+ <div class="text-red">{{ item.price }}</div>
+ <div class="text-right textColor" v-if="symbol == 'shib'">
+ {{ fixDate(item.amount, $i18n) || "--" }}
+ </div>
+ <div class="text-right textColor" style="padding-right: 5px;" v-else>
+ {{ item.amount || "--" }}
+ </div>
+ </div>
+ </div>
+ <div class="depth-mark-price">
+ {{ price || '--' }} {{ $t('标记价格') }}
+ </div>
+ <div class="w-290 text-red pt-5 font-34 font-700 trade-price-hidden">
+ {{ price || '--' }}
+ </div>
+ <!-- <div class="pb-5 font-20 text-center">
+ ≈ {{ ((price *
+ currency.rate).toFixed(price.toString().split('.')[1] ?
+ price.toString().split('.')[1].length : 2)) || '--' }}
+ </div> -->
+ <div class="deep-div">
+ <!-- <div v-if="showType == 0 || showType == 1" class="w-290 flex justify-between pt-1 font-26"
+ v-for="(item, index) in greenData" :key="index" @click="onQuickPrice(item.price)" :style="{
+ background:
+ `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
+ } 0%` +
+ (1 - item.amount / greenData[greenData.length - 1].amount) *
+ 100 +
+ '%,rgba(94,186,137,.1) ' +
+ (1 - item.amount / greenData[greenData.length - 1].amount) *
+ 100 +
+ '%,rgba(94,186,137,.1) 100%)',
+ }"> -->
+
+ <div v-if="showType == 0 || showType == 1" class="w-290 flex justify-between p-2 font-26"
+ v-for="(item, index) in greenData" :key="index" @click="onQuickPrice(item.price)" :style="{
+ background:
+ `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
+ } 0%` +
+ (1 - item.amount / greenData[greenData.length - 1].amount) *
+ 100 +
+ '%,rgba(94,186,137,.1) ' +
+ (1 - item.amount / greenData[greenData.length - 1].amount) *
+ 100 +
+ '%,rgba(94,186,137,.1) 100%)',
+ }">
+ <div class="text-green">{{ item.price }}</div>
+ <div class="text-right textColor" v-if="symbol_data == 'shib'">
+ {{ fixDate(item.amount, $i18n) || "--" }}
+ </div>
+ <div class="text-right textColor" v-else style="padding-right: 5px;">
+ {{ item.amount || "--" }}
+ </div>
+
+ </div>
+ </div>
+ <!-- <div class="flex k-select-box">
+ <div class="mt-22 mb-22 select-box pl-5 pr-5" style="position: relative">
+ <div class="flex justify-between items-center w-full h-70" @click="selectArryBtn">
+ <div class="pl-16 font-28 textColor" style="width: 80%">
+ {{ dataArrTitle }}
+ </div>
+ <img src="../../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 mr-10" />
+ </div>
+ <div class="option-box" v-show="arryIsShow">
+ <div class="font-28" v-for="(item, index) in selectDataArry" :key="index"
+ @click="selectItemArry(item)">
+ {{ item.name }}
+ </div>
+ </div>
+ </div>
+ <div @click="isSelectShow = true">
+ <img src="../../../assets/image/selectIcon.png" alt="warn-icon" class="w-36 h-30 ml-10" />
+ </div>
+ </div> -->
+ </div>
+ <div class="w-440 flex flex-col perpetual-open-form">
<template v-if="selectIndex == 1">
- <div class="flex items-center h-66 rounded-lg text-grey">
- <p class="font-28 flex-1 flex items-center justify-center h-66 "
- :class="currentType == 'long' ? 'long' : ''" @click="changeTab('long')">
- {{ $t("开多") }}
- </p>
- <p class="font-28 flex-1 flex items-center justify-center h-66"
- :class="currentType == 'short' ? 'short' : ''" @click="changeTab('short')">
- {{ $t("开空") }}
- </p>
+ <div class="order-area_tabs">
+ <div class="order-tabs-buttons">
+ <p class="order-tab order-tab--left font-28 flex items-center justify-center"
+ :class="currentType == 'long' ? 'order-tab--buy' : 'order-tab-buy'" @click="changeTab('long')">
+ {{ $t("开仓") }}
+ </p>
+ <p class="order-tab order-tab--right font-28 flex items-center justify-center"
+ :class="currentType == 'short' ? 'order-tab--sell' : 'order-tab-sell'" @click="changeTab('short')">
+ {{ $t("平仓") }}
+ </p>
+ </div>
+ <div class="order-tabs-bg">
+ <img src="@/assets/imgs/new/contract-slash.png" alt="" class="order-tabs-bg-img" />
+ </div>
+ </div>
+ <div class="trade-futures-bonus flex flex-col mt-20 mb-20">
+ <div class="flex items-center justify-between font-26 textColor">
+ <div class="flex items-center">
+ <van-icon name="success" color="#5e2bc8" size="18" class="mr-10" />
+ {{ $t('永续') }}: {{ (initFutrue.amount || 0) }} USDT
+ </div>
+ <img src="@/assets/image/asset-function3.png" alt="" class="trade-futures-transfer-icon w-60 h-60" @click="$router.push('/my/transfer')" />
+ </div>
+ <div class="flex items-center font-26 text-grey mt-12 pl-50">
+ {{ $t('Bonus') }}: {{initFutrue.capitaltAmount || 0}} USDT
+ </div>
</div>
<div class="mt-22 mb-30" style="position:relative;">
<div class="greyBg flex justify-between items-center w-full h-76 rounded-lg textColor"
@@ -121,42 +230,40 @@
<span class="flex-1 text-right">100%</span>
</div> -->
<!-- 张数输入 -->
- <!-- <amount-slider ref="sliderRef" :maxAmount="maxUSDT" @getAmount="getAmount"
- :propsAmount="form.amount"></amount-slider> -->
- <div class="btns_box">
+ <amount-slider ref="sliderRef" :maxAmount="maxUSDT" @getAmount="getAmount"
+ :propsAmount="form.amount"></amount-slider>
+ <!-- <div class="btns_box">
<div :class="bfbindex == index ? 'btns_box_boxs' : 'btns_box_box'" @click="bfbclick(item, index)"
v-for="(item, index) in bfblist" :key="index">{{ item.name }}%</div>
- </div>
+ </div> -->
</template>
<template v-if="selectIndex == 1 && userInfo.token">
- <div class="flex justify-between mt-30">
+ <!-- <div class="flex justify-between mt-30">
<div class="text-grey">{{ $t('合约金额') }}</div>
<div class="textColor">
- <!-- {{ initData.amount * (form.amount / 1) * form.lever_rate }} -->
{{ form.lever_rate * form.amount }}
- <!-- <span>{{ queryType === 'cryptos' ? 'USDT' : 'USD' }}</span> -->
<span>{{ 'USDT' }}</span>
</div>
- </div>
+ </div> -->
<!-- <div class="flex justify-between mt-30">
<div class="text-grey">{{ $t("保证金") }}</div>
<div class="textColor">
{{ form.lever_rate * form.amount }} {{ 'USDT' }}
</div>
</div> -->
- <div class="flex justify-between mt-30">
+ <!-- <div class="flex justify-between mt-30">
<div class="text-grey">{{ $t("建仓手续费") }}</div>
<div class="textColor">{{ reserve(userInfo.perpetual_contracts_status === '1' ?
initData.fee * (form.amount / 1) : initData.fee * (form.amount / 1) * form.lever_rate, 6) }}
{{ queryType === 'cryptos' ? 'USDT' : 'USD' }}
</div>
- </div>
+ </div> -->
</template>
- <div class="flex font-24 text-grey justify-between mt-32">
+ <!-- <div class="flex font-24 text-grey justify-between mt-32">
<div>{{ $t("可用USDT") }}</div>
<div class="textColor">{{ initFutrue.amount }} USDT</div>
- </div>
+ </div> -->
<div class="flex font-24 text-grey justify-between mt-20"
v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'">
<div>{{ $t("手续费") }}</div>
@@ -175,29 +282,29 @@
<template v-if="userInfo.token">
<template v-if="selectIndex == 1">
- <div class="w-full h-80 lh-80 bg-green flex text-white rounded-ban mt-70" v-if="currentType == 'long'"
- @click="order('long')">
- <div class="font-34 relative text-center" style="flex-grow:1;" v-if="selectIndex == 1">
- {{ $t('开多') }}
- <!-- <span class="right-word font-22 text-center">{{
- $t("看涨")
- }}</span> -->
- </div>
- <div class="font-34 relative text-center" style="flex-grow:1;" v-else>
- {{ $t('做多买入') }}
- </div>
+ <div class="trade-long-margin flex justify-between mt-30 font-26 text-grey">
+ <span class="textColor">{{ $t('buy') }}</span>
+ <span>≈{{ (form.amount * form.lever_rate || 0) }}USDT</span>
</div>
- <div class="w-full h-80 lh-80 bg-red flex text-white rounded-ban mt-70" v-if="currentType == 'short'"
+ <div class="trade-long-margin flex justify-between font-26 text-grey">
+ <span class="textColor">{{ $t("保证金") }}</span>
+ <span>≈{{ (form.amount * form.lever_rate || 0) }}USDT</span>
+ </div>
+ <div class="w-full h-80 lh-80 bg-green flex text-white rounded-ban mt-20 trade-btn-buy"
+ @click="order('long')">
+ <div class="font-34 relative text-center" style="flex-grow:1;">{{ $t('开多') }}</div>
+ </div>
+ <div class="trade-long-margin flex justify-between mt-30 font-26 text-grey">
+ <span class="textColor">{{ $t('sell') }}</span>
+ <span>≈{{ (form.amount * form.lever_rate || 0) }}USDT</span>
+ </div>
+ <div class="trade-long-margin flex justify-between font-26 text-grey">
+ <span class="textColor">{{ $t("保证金") }}</span>
+ <span>≈{{ (form.amount * form.lever_rate || 0) }}USDT</span>
+ </div>
+ <div class="w-full h-80 lh-80 bg-red flex text-white rounded-ban mt-20 trade-btn-sell"
@click="order('short')">
- <div class="relative font-34 text-center" style="flex-grow:1;" v-if="selectIndex == 1">
- {{ $t('开空') }}
- <!-- <span class="right-word font-22 text-center">{{
- $t("看跌")
- }}</span> -->
- </div>
- <div class="relative font-34 text-center" style="flex-grow:1;" v-else>
- {{ $t('做空买入') }}
- </div>
+ <div class="relative font-34 text-center" style="flex-grow:1;">{{ $t('开空') }}</div>
</div>
</template>
<template v-if="selectIndex == 2">
@@ -232,118 +339,7 @@
{{ $t('logIn') }}</div>
</div>
</div>
- <div class="ml-30">
- <div class="w-290 flex justify-between text-grey font-22">
- <div>
- <div>{{ $t("价格") }}</div>
- <div class="mt-4">{{ queryType === 'cryptos' ? '(USDT)' : '(USD)' }}</div>
- </div>
- <div class="text-right items-end justify-end">
- <div class="">{{ $t("数量") }}</div>
- <div class="mt-4">{{ queryType === 'cryptos' ?
- `(${symbol_data.toUpperCase() || "--"})` : '(USD)' }}</div>
- </div>
- </div>
- <div class="deep-div">
- <!-- <div v-if="showType == 0 || showType == 2" class="w-290 flex justify-between pt-1 font-26"
- v-for="(item, index) in redData" :key="item + index" @click="onQuickPrice(item.price)" :style="{
- background:
- `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
- } 0%` +
- (1 - item.amount / greenData[greenData.length - 1].amount) *
- 100 +
- '%,rgba(246,70,93,.1) ' +
- (1 - item.amount / greenData[greenData.length - 1].amount) *
- 100 +
- '%,rgba(246,70,93,.1) 100%)',
- }"> -->
-
- <div v-show="(showType == 0 || showType == 2)" class="w-290 flex justify-between pt-1 font-26"
- v-for="(item, index) in redData" :key="item + index" @click="onQuickPrice(item.price)" :style="{
- background:
- `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
- } 0%` +
- (1 - item.amount / greenData[greenData.length - 1].amount) *
- 100 +
- '%,rgba(246,70,93,.1) ' +
- (1 - item.amount / greenData[greenData.length - 1].amount) *
- 100 +
- '%,rgba(246,70,93,.1) 100%)'
- }">
- <div class="text-red">{{ item.price }}</div>
- <div class="text-right textColor" v-if="symbol == 'shib'">
- {{ fixDate(item.amount, $i18n) || "--" }}
- </div>
- <div class="text-right textColor" v-else>
- {{ item.amount || "--" }}
- </div>
- </div>
- </div>
- <div class="w-290 text-red pt-5 font-34 font-700 text-center">
- {{ price || '--' }}
- </div>
- <div class="pb-5 font-20 text-center">
- ≈ {{ ((price *
- currency.rate).toFixed(price.toString().split('.')[1] ?
- price.toString().split('.')[1].length : 2)) || '--' }}
- </div>
- <div class="deep-div">
- <!-- <div v-if="showType == 0 || showType == 1" class="w-290 flex justify-between pt-1 font-26"
- v-for="(item, index) in greenData" :key="index" @click="onQuickPrice(item.price)" :style="{
- background:
- `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
- } 0%` +
- (1 - item.amount / greenData[greenData.length - 1].amount) *
- 100 +
- '%,rgba(94,186,137,.1) ' +
- (1 - item.amount / greenData[greenData.length - 1].amount) *
- 100 +
- '%,rgba(94,186,137,.1) 100%)',
- }"> -->
-
- <div v-if="showType == 0 || showType == 1" class="w-290 flex justify-between pt-1 font-26"
- v-for="(item, index) in greenData" :key="index" @click="onQuickPrice(item.price)" :style="{
- background:
- `linear-gradient(to right,${THEME == 'dark' ? '#131A2E' : '#fff'
- } 0%` +
- (1 - item.amount / greenData[greenData.length - 1].amount) *
- 100 +
- '%,rgba(94,186,137,.1) ' +
- (1 - item.amount / greenData[greenData.length - 1].amount) *
- 100 +
- '%,rgba(94,186,137,.1) 100%)',
- }">
- <div class="text-green">{{ item.price }}</div>
- <div class="text-right textColor" v-if="symbol_data == 'shib'">
- {{ fixDate(item.amount, $i18n) || "--" }}
- </div>
- <div class="text-right textColor" v-else>
- {{ item.amount || "--" }}
- </div>
-
- </div>
- </div>
- <div class="flex k-select-box">
- <div class="mt-22 mb-22 select-box pl-5 pr-5" style="position: relative">
- <div class="flex justify-between items-center w-full h-70" @click="selectArryBtn">
- <!-- <img src="@/assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20"/> -->
- <div class="pl-16 font-28 textColor" style="width: 80%">
- {{ dataArrTitle }}
- </div>
- <img src="../../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 mr-10" />
- </div>
- <div class="option-box" v-show="arryIsShow">
- <div class="font-28" v-for="(item, index) in selectDataArry" :key="index"
- @click="selectItemArry(item)">
- {{ item.name }}
- </div>
- </div>
- </div>
- <div @click="isSelectShow = true">
- <img src="../../../assets/image/selectIcon.png" alt="warn-icon" class="w-36 h-30 ml-10" />
- </div>
- </div>
- </div>
+
</div>
</div>
<van-popup v-model:show="show" class="rounded-2xl">
@@ -353,6 +349,38 @@
<van-action-sheet v-model:show="isSelectShow" @select="onSelect" :actions="actions" :cancel-text="$t('取消')"
close-on-click-action @cancel="onCancel">
</van-action-sheet>
+
+ <!-- 杠杆倍数弹框 Multi multiple 一比一样式 -->
+ <van-popup v-model:show="showLeverPopup" position="bottom" round class="lever-popup-wrap"
+ :style="{ overflow: 'visible' }" @closed="onLeverPopupClosed">
+ <div class="lever-popup">
+ <div class="lever-popup-header">
+ <span class="lever-popup-title">Multi multiple</span>
+ <span class="lever-popup-close" @click="showLeverPopup = false">×</span>
+ </div>
+ <div class="lever-popup-segment">
+ <div class="lever-popup-seg-item lever-popup-seg-left" :class="{ 'lever-popup-seg-active': leverPopupMargin === 1 }"
+ @click="leverPopupMargin = 1">Cross</div>
+ <div class="lever-popup-seg-item lever-popup-seg-right" :class="{ 'lever-popup-seg-active': leverPopupMargin === 0 }"
+ @click="leverPopupMargin = 0">Part</div>
+ </div>
+ <div class="lever-popup-row">
+ <div class="lever-popup-btn lever-popup-btn-minus" @click="leverPopupValue = Math.max(1, (leverPopupValue || 1) - 1)">−</div>
+ <input v-model.number="leverPopupValue" type="number" class="lever-popup-input" min="1" :max="maxLever"
+ @input="onLeverInput" />
+ <div class="lever-popup-btn lever-popup-btn-plus" @click="leverPopupValue = Math.min(maxLever, (leverPopupValue || 1) + 1)">+</div>
+ </div>
+ <div class="lever-popup-slider-wrap">
+ <span class="lever-popup-slider-label">1X</span>
+ <div class="lever-popup-slider-inner">
+ <van-slider v-model="leverPopupValue" :min="1" :max="maxLever" :step="1" class="lever-popup-slider"
+ bar-height="6px" active-color="#7c3aed" />
+ </div>
+ <span class="lever-popup-slider-label">{{ maxLever }}X</span>
+ </div>
+ <div class="lever-popup-confirm" @click="confirmLeverPopup">Confirm</div>
+ </div>
+ </van-popup>
</div>
</div>
</template>
@@ -514,8 +542,8 @@
if (this.selectIndex / 1 === 1) {
obj = this.initOpen
- if (!obj.lever || !obj.lever.length) { // 倍数
- obj.lever = [{ id: 1, lever_rate: 1 }]
+ if (!obj.lever || !obj.lever.length) { // 倍数，默认100倍
+ obj.lever = [{ id: 1, lever_rate: 100 }]
}
return obj
}
@@ -536,7 +564,13 @@
// console.log("dddddd", max, this.form.lever_rate, (1 / this.form.lever_rate + this.initData.fee));
return max
- }
+ },
+ maxLever() {
+ return 100 // 杠杆倍率固定 1～100，不从接口获取
+ },
+ leverDisplayMode() {
+ return this.locationVal === 1 ? 'Cross' : 'Part'
+ },
},
data() {
return {
@@ -570,7 +604,7 @@
session_token: '',
direction: 'buy', // 买or卖
price_type: 'opponent', // 市价or限价
- lever_rate: 1, // 杠杆
+ lever_rate: 100, // 杠杆，默认100倍
price: '',
amount: '', // 数量
para_id: '' // 交割周琦id
@@ -601,6 +635,9 @@
locationShow: false,
locationTitle: this.$t('全仓'),
locationVal: 1,
+ showLeverPopup: false,
+ leverPopupValue: 100,
+ leverPopupMargin: 1, // 1=全仓 Cross, 0=逐仓 Part
}
},
created() {
@@ -834,6 +871,31 @@
this.locationTitle = item.title;
this.locationVal = item.type;
this.locationShow = false;
+ },
+ openLeverPopup() {
+ this.leverPopupValue = this.form.lever_rate || 1;
+ this.leverPopupMargin = this.locationVal !== undefined ? this.locationVal : 1;
+ this.showLeverPopup = true;
+ },
+ onLeverInput() {
+ let v = parseInt(this.leverPopupValue, 10);
+ if (isNaN(v) || v < 1) this.leverPopupValue = 1;
+ else if (v > this.maxLever) this.leverPopupValue = this.maxLever;
+ else this.leverPopupValue = v;
+ },
+ onLeverPopupClosed() {
+ this.leverPopupValue = this.form.lever_rate || 1;
+ this.leverPopupMargin = this.locationVal !== undefined ? this.locationVal : 1;
+ },
+ confirmLeverPopup() {
+ let val = parseInt(this.leverPopupValue, 10);
+ if (isNaN(val) || val < 1) val = 1;
+ if (val > this.maxLever) val = this.maxLever;
+ this.form.lever_rate = val;
+ this.locationVal = this.leverPopupMargin;
+ this.locationTitle = this.leverPopupMargin === 1 ? this.$t('全仓') : this.$t('逐仓');
+ this.showLeverPopup = false;
+ this.handleInitSliderOption();
},
//选择开仓类型
changeTab(type) {
@@ -1191,7 +1253,299 @@
}
}
+/* trade-top-selectors 按参考图：浅灰容器、白底细边框、Buy绿/Sell红标签、深色文案、灰箭头 */
+.trade-top-selectors {
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ padding: 14px 18px;
+ border-radius: 12px;
+}
+.trade-top-selectors .trade-selector {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ background: #fff;
+ border-radius: 10px;
+ cursor: pointer;
+ min-height: 72px;
+}
+.trade-top-selectors .trade-selector-tag {
+ padding: 8px 20px;
+ border-radius: 6px;
+ font-size: 26px;
+ font-weight: 700;
+ color: #fff;
+ margin-right: 16px;
+ flex-shrink: 0;
+}
+.trade-top-selectors .trade-selector-tag--green {
+ background: #0ecb81;
+}
+.trade-top-selectors .trade-selector-tag--red {
+ background: #f6465d;
+}
+.trade-top-selectors .trade-selector-text {
+ flex: 1;
+ font-size: 28px;
+ font-weight: 500;
+ color: #1e1e1e;
+ min-width: 0;
+}
+.trade-top-selectors .trade-selector-arrow {
+ font-size: 28px;
+ color: #999;
+ flex-shrink: 0;
+ margin-left: 8px;
+}
+
+.perpetual-open-form > div,
+.perpetual-open-form > .order-area_tabs,
+.perpetual-open-form > .trade-futures-bonus,
+.perpetual-open-form .trade-long-margin {
+ margin-bottom: 10px !important;
+}
+.perpetual-open-form .mt-20,
+.perpetual-open-form .mb-20,
+.perpetual-open-form .mb-30,
+.perpetual-open-form .mt-30,
+.perpetual-open-form .mt-40 {
+ margin-top: 0 !important;
+ margin-bottom: 10px !important;
+}
+/* perpetual-open-form 下圆角统一 10px */
+.perpetual-open-form .rounded-lg,
+.perpetual-open-form .rounded-ban,
+.perpetual-open-form .option-box {
+ border-radius: 10px !important;
+}
+.perpetual-open-form .order-area_tabs {
+ border-radius: 10px 10px 0 0 !important;
+}
+.perpetual-open-form .order-area_tabs .order-tab--left {
+ border-radius: 10px 0 0 0 !important;
+}
+.perpetual-open-form .order-area_tabs .order-tab--right {
+ border-radius: 0 10px 0 0 !important;
+}
+
.deep-div {
min-height: 370px;
}
+
+.depth-mark-price {
+ padding: 8px 0;
+ font-size: 18px;
+ color: #999;
+ border-top: 1px solid #eee;
+ border-bottom: 1px solid #eee;
+}
+
+.trade-price-hidden {
+ display: none;
+}
+
+/* 与 /cryptos/trade/btcusdt order-area_tabs 样式一致 */
+.order-area_tabs {
+ position: relative;
+ height: 66px;
+ border-radius: 8px 8px 0 0;
+ overflow: hidden;
+}
+.order-area_tabs .order-tabs-buttons {
+ display: flex;
+ justify-content: space-between;
+ align-items: stretch;
+ width: 100%;
+ height: 100%;
+ position: relative;
+ z-index: 0;
+}
+.order-area_tabs .order-tab {
+ flex: 0 0 calc(50%);
+ width: calc(50%);
+ font-weight: 500;
+ transition: background 0.2s, color 0.2s;
+ cursor: pointer;
+}
+.order-area_tabs .order-tab--left {
+ border-radius: 8px 0 0 0;
+}
+.order-area_tabs .order-tab--right {
+ border-radius: 0 8px 0 0;
+}
+.order-area_tabs .order-tab--buy {
+ background: #38c172;
+ color: #fff;
+}
+.order-area_tabs .order-tab-buy {
+ background: #e8e8e8;
+ color: #000;
+}
+.order-area_tabs .order-tab--sell {
+ background: #f4374b;
+ color: #fff;
+}
+.order-area_tabs .order-tab-sell {
+ background: #e8e8e8;
+ color: #000;
+}
+.order-area_tabs .order-tabs-bg {
+ position: absolute;
+ left: 49.3%;
+ transform: translateX(-50%);
+ width: 90px;
+ height: 130%;
+ top: -5px;
+ bottom: 0;
+ z-index: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.order-area_tabs .order-tabs-bg-img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+}
+
+/* 杠杆弹框 Multi multiple（弹框内字体大一倍） */
+.lever-popup-wrap.van-popup {
+ background: transparent;
+}
+.lever-popup {
+ background: #fff;
+ border-radius: 24px 24px 0 0;
+ padding: 30px 36px 12px;
+ box-shadow: 0 -2px 30px rgba(0,0,0,0.08);
+}
+.lever-popup-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 30px;
+}
+.lever-popup-title {
+ font-size: 34px;
+ font-weight: 600;
+ color: #1e1e1e;
+}
+.lever-popup-close {
+ font-size: 47px;
+ color: #666;
+ line-height: 1;
+ cursor: pointer;
+ padding: 6px;
+}
+.lever-popup-segment {
+ display: flex;
+ align-items: stretch;
+ background: #f7f7f7;
+ border-radius: 15px;
+ overflow: hidden;
+}
+.lever-popup-seg-item {
+ flex: 1;
+ padding: 18px 24px;
+ text-align: center;
+ font-size: 27px;
+ color: #868e9a;
+ transition: background 0.2s, color 0.2s, font-weight 0.2s;
+}
+.lever-popup-seg-left { border-radius: 15px 0 0 15px; }
+.lever-popup-seg-right { border-radius: 0 15px 15px 0; }
+.lever-popup-seg-item.lever-popup-seg-active {
+ background: #fff;
+ color: #1e1e1e;
+ font-weight: 600;
+ box-shadow: 0 1px 6px rgba(0,0,0,0.06);
+}
+.lever-popup-row {
+ display: flex;
+ align-items: stretch;
+ margin-top: 30px;
+ border-radius: 15px;
+ overflow: hidden;
+ border: 1px solid #eee;
+}
+.lever-popup-btn {
+ width: 78px;
+ min-width: 78px;
+ background: #f7f7f7;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 43px;
+ color: #333;
+ cursor: pointer;
+ font-weight: 400;
+}
+.lever-popup-btn-minus { border-radius: 15px 0 0 15px; }
+.lever-popup-btn-plus { border-radius: 0 15px 15px 0; }
+.lever-popup-input {
+ flex: 1;
+ min-width: 0;
+ text-align: center;
+ border: none;
+ font-size: 35px;
+ font-weight: 600;
+ color: #1e1e1e;
+ background: #fff;
+ padding: 21px 12px;
+}
+.lever-popup-input:focus { outline: none; }
+.lever-popup-slider-wrap {
+ margin-top: 36px;
+ display: flex;
+ align-items: center;
+ gap: 18px;
+}
+.lever-popup-slider-label {
+ font-size: 23px;
+ color: #868e9a;
+ flex-shrink: 0;
+}
+.lever-popup-slider-inner {
+ flex: 1;
+ min-width: 0;
+}
+.lever-popup-slider :deep(.van-slider__bar) {
+ height: 6px;
+ background: linear-gradient(90deg, #7c3aed 0%, #5b21b6 100%) !important;
+ border-radius: 3px;
+}
+.lever-popup-slider :deep(.van-slider__button) {
+ width: 30px;
+ height: 30px;
+ background: #666;
+ border: none;
+ box-shadow: 0 1px 4px rgba(0,0,0,0.2);
+}
+.lever-popup-confirm {
+ margin-top: 42px;
+ width: 100%;
+ padding: 24px 36px;
+ background: linear-gradient(90deg, #7c3aed 0%, #5b21b6 100%);
+ color: #fff;
+ font-weight: 600;
+ font-size: 31px;
+ border-radius: 15px;
+ text-align: center;
+ cursor: pointer;
+}
+
+.trade-futures-bonus {
+ .mr-10 { margin-right: 10px; }
+ .trade-futures-transfer-icon {
+ flex-shrink: 0;
+ padding: 8px;
+ margin: -8px -8px -8px 0;
+ border-radius: 50%;
+ }
+}
+
+.trade-long-margin {
+ margin-top: 8px;
+}
</style>
diff --git a/src/components/Transform/perpetual-order/index.vue b/src/components/Transform/perpetual-order/index.vue
index 8049be0..e12ef45 100644
--- a/src/components/Transform/perpetual-order/index.vue
+++ b/src/components/Transform/perpetual-order/index.vue
@@ -181,8 +181,9 @@
background-color: #EAEBEF;
}
+ /* 与参考图一致：细浅灰分隔线 */
.border-b-color {
- border-bottom: 0.5px solid rgba($color: #393E49, $alpha: 0.1);
+ border-bottom: 1px solid #e8e8e8;
}
.cancel-btn {
diff --git a/src/components/Transform/perpetual-position-list/index.vue b/src/components/Transform/perpetual-position-list/index.vue
index 0207f3c..e494a52 100644
--- a/src/components/Transform/perpetual-position-list/index.vue
+++ b/src/components/Transform/perpetual-position-list/index.vue
@@ -1,130 +1,286 @@
<template>
- <!-- 持有仓位列表 -->
- <div id="cryptos">
- <!-- <div class="flex justify-between" v-if="listData.length">-->
- <!-- <div class="flex" @click.stop="changeIcon">-->
- <!-- <img v-show="!iconShow" src="../../assets/image/public/grey-rounded.png" alt="" class="w-38 h-38"/>-->
- <!-- <img v-show="iconShow" src="../../assets/image/public/blue-rounded.png" alt="" class="w-38 h-38"/>-->
- <!-- <div class="ml-37xw">{{ $t('隐藏其它合约') }}</div>-->
- <!-- </div>-->
- <!-- <button class="border-none all-cancel-btn pl-34 pr-34 pt-10 pb-10 font-25" @click="onSellAll">{{ $t('一键平仓') }}</button>-->
- <!-- </div>-->
- <div class="border-b-color" v-for="item in listData" :key="item.order_no">
- <div class="flex justify-between pt-44 pb-44">
- <div class="flex flex-col">
- <div class="flex items-center">
- <div class="pl-18 pr-18 pt-3 pb-3 text-white open-btn font-28"
- :class="item.direction == 'buy' ? ' bg-green' : 'bg-red'">
- {{ item.direction == 'buy' ? $t('开多') : $t('开空') }}
- </div>
- <div class="ml-22 font-31 font-600 ">
- <span class="textColor">{{ item.name }} {{ $t('永续') }}</span>
- <span class="text-grey font-28 font-400 ml-17 mr-17">
- {{ item.locationType == 1 ? $t('全仓') : $t('逐仓') }}
- {{ item.lever_rate }}x</span>
- </div>
- <img v-if="item.direction == 'buy'" src="@/assets/image/public/green-leverage.png" alt=""
- class="w-32 h-32" />
- <img v-else src="@/assets/image/public/red-leverage.png" alt="" class="w-32 h-32" />
+ <!-- 持有仓位列表：参考图样式 border-b-color 细浅灰、右上分享、保证金加号弹框 -->
+ <div >
+ <div class="position-card border-b-color" v-for="item in listData" :key="item.order_no">
+ <!-- 顶部：Buy/Sell 标签 + 交易对 Cross 100X + 刷新 + 分享 -->
+ <div class="flex justify-between items-center pt-44 pb-24">
+ <div class="flex items-center">
+ <div class="position-tag font-28" :class="item.direction == 'buy' ? 'bg-green' : 'bg-red'">
+ {{ item.direction == 'buy' ? $t('买入') : $t('卖出') }}
+ </div>
+ <div class="ml-22 font-31 font-600 textColor">
+ <span>{{ item.name }}</span>
+ <span class="text-grey font-28 font-400 ml-17">
+ {{ item.locationType == 1 ? 'Cross' : 'Part' }} {{ item.lever_rate }}X</span>
+ </div>
+ </div>
+ <div class="flex items-center" style="gap: 12px;">
+ <van-icon name="replay" class="position-icon text-grey" size="20" />
+ <van-icon name="share-o" class="position-icon text-grey" size="20" @click.stop="openShare(item)" />
+ </div>
+ </div>
+ <!-- PnL -->
+ <div class="flex justify-between font-28 pb-24">
+ <div>
+ <div class="text-grey">{{ $t('PnL(USDT)') || 'PnL(USDT)' }}</div>
+ <div class="mt-12" :class="item.profit > 0 ? 'text-green' : 'text-red'">
+ {{ item.profit > 0 ? '+' : '' }}{{ (item.profit != null ? item.profit : 0).toFixed(4) }}
+ <span class="ml-8">[{{ item.change_ratio != null ? item.change_ratio : 0 }}%]</span>
</div>
</div>
</div>
- <div class="flex justify-between font-28">
+ <!-- Size / Margin(USDT)+加号 / Margin Ratio -->
+ <div class="flex font-28 pb-20">
<div class="flex-1">
- <div class="text-grey">{{ routeType == 'cryptos' ? $t('未实现盈亏（USDT）') : $t('未实现盈亏（USD）') }}</div>
- <div class="mt-20" :class="item.profit > 0 ? 'text-green' : 'text-red'">
- {{ item.profit > 0 ? '+' + item.profit.toFixed(4) : item.profit.toFixed(4) }}</div>
+ <div class="text-grey">{{ $t('Size') || 'Size' }}</div>
+ <div class="mt-12 textColor">{{ item.volume != null ? item.volume : (item.deposit != null ? item.deposit : '-') }}</div>
</div>
- <div class="flex-1">
- <div class="text-grey text-center">ROE</div>
- <div class="mt-20 text-center" :class="item.change_ratio / 1 > 0 ? 'text-green' : 'text-red'">{{
- item.change_ratio
- }}%
+ <div class="flex-1 flex items-center justify-center">
+ <div>
+ <div class="text-grey">{{ $t('margin') }}(USDT)</div>
+ <div class="mt-12 flex items-center justify-center">
+ <span class="textColor">{{ item.deposit }}</span>
+ <span class="position-plus ml-8" @click.stop="openQuickAdd(item)" v-if="item.locationType == 0">+</span>
+ </div>
</div>
</div>
- <div class="flex-1 flex justify-end">
- <button class="font-30 detail-btn border-light-blue greyBg colorMain w-125 h-60" @click="goDetail(item)">{{
- $t('详情') }}</button>
+ <div class="flex-1 text-right">
+ <div class="text-grey">{{ $t('Margin Ratio') || 'Margin Ratio' }}</div>
+ <div class="mt-12 textColor">{{ item.margin_ratio != null ? item.margin_ratio + '%' : '-' }}</div>
</div>
</div>
- <div class="flex pt-44 pb-32 font-28">
+ <!-- Entry Price / Mark Price / Liq. Price -->
+ <div class="flex font-28 pb-24">
<div class="flex-1">
- <div class="text-grey">{{ $t('持仓数量') }}</div>
- <div class="mt-20 textColor">{{ reserve(item.volume / (item.lever_rate ? item.lever_rate : 1),4) }}*{{
- item.lever_rate ? item.lever_rate : 1 }}x</div>
+ <div class="text-grey">{{ $t('Entry Price') || 'Entry Price' }}</div>
+ <div class="mt-12 textColor">{{ item.trade_avg_price }}</div>
</div>
- <div class="flex-1 text-center font-28">
- <div class="text-grey">{{ $t('交易金额') }} ( {{ routeType == 'cryptos' ? 'USDT' : 'USD' }})</div>
- <div class="mt-20 textColor">{{ item.deposit }}</div>
+ <div class="flex-1 text-center">
+ <div class="text-grey">{{ $t('Mark Price') || 'Mark Price' }}</div>
+ <div class="mt-12 textColor">{{ item.mark_price }}</div>
</div>
- <div class="flex-1 flex flex-col items-end font-28">
- <div class="text-grey">{{ $t('开仓价格') }}</div>
- <div class="mt-20 textColor">{{ item.trade_avg_price }}</div>
+ <div class="flex-1 text-right">
+ <div class="text-grey">{{ $t('Liq. Price') || 'Liq. Price' }}</div>
+ <div class="mt-12 textColor">{{ item.force_close_rice || '-' }}</div>
</div>
</div>
- <div class="flex pb-32 font-28">
- <div class="flex-1">
- <div class="text-grey">{{ $t('标记价格') }}</div>
- <div class="mt-20 textColor">{{ item.mark_price }}</div>
- </div>
- <div class="flex-1">
- <div class="text-grey text-center">{{ $t('强平价格') }}</div>
- <div class="mt-20 textColor text-center">{{ item.force_close_rice }}</div>
- </div>
- <div class="flex-1 flex flex-col items-end justify-end">
- <button class="greyBg textColor border-none pl-34 pr-34 pt-10 pb-10 rounded-ban"
- @click="onSell(item.order_no)">
- {{ $t('平仓') }}</button>
+ <!-- 细浅灰分隔线 + 底部时间与 TP/SL、Close -->
+ <div class="position-card-border"></div>
+ <div class="flex justify-between items-center pt-24 pb-32 font-24">
+ <span class="text-grey">{{ formatTime(item.create_time) }}</span>
+ <div class="flex" style="gap: 12px;">
+ <button class="position-bottom-btn" @click.stop="onSell(item.order_no)">{{ $t('平仓') }}</button>
+ <button class="position-bottom-btn" @click.stop="goTpSl(item)">{{ $t('TP/SL') || 'TP/SL' }}</button>
</div>
</div>
- <!-- <div class="flex pb-32 font-28">
- <div class="flex-1 flex flex-col items-center justify-end">
- <button class="font-30 detail-btn border-light-blue greyBg colorMain w-125 h-60" @click="goDetail(item)">{{
- $t('详情') }}</button>
- </div>
- </div> -->
</div>
<div class="text-grey text-center py-300 font-30" v-if="!listData.length">{{ $t('您目前没有持仓') }}</div>
+
+ <!-- Quick addition 弹框 图三样式 -->
+ <van-popup v-model:show="showQuickAdd" position="bottom" round class="quick-add-popup">
+ <div class="quick-add-wrap">
+ <div class="quick-add-header">
+ <span class="quick-add-title">{{ $t('Quick addition') }}</span>
+ <span class="quick-add-close" @click="showQuickAdd = false">×</span>
+ </div>
+ <div class="quick-add-row">
+ <label class="quick-add-label">{{ $t('Quantity') || 'Quantity' }}:</label>
+ <input v-model.number="quickAddAmount" type="number" class="quick-add-input" />
+ <span class="quick-add-unit">USDT</span>
+ </div>
+ <div class="quick-add-slider-wrap">
+ <van-slider v-model="quickAddPercent" :min="0" :max="100" bar-height="4px" active-color="#7c3aed" />
+ <span class="quick-add-percent">{{ quickAddPercent }}%</span>
+ </div>
+ <div class="quick-add-balance">{{ $t('Futures asset balance') }}: {{ quickAddBalance }} USDT</div>
+ <div class="quick-add-submit" @click="submitQuickAdd">{{ $t('Submit') }}</div>
+ </div>
+ </van-popup>
+
+ <!-- TP/SL 止盈止损弹框：底部弹出，展示仓位信息 + 止盈/止损值 + Submit -->
+ <van-popup v-model:show="showTpSl" position="bottom" round class="tpsl-popup">
+ <div class="tpsl-wrap">
+ <div class="tpsl-header">
+ <h2 class="tpsl-title">{{ tpSlItem.name || 'BTC USDT' }} {{ tpSlItem.direction == 'buy' ? $t('Long') : $t('Short') }} {{ tpSlItem.lever_rate }}X {{ $t('Take Profit') }} {{ $t('Stop Loss') }}</h2>
+ <span class="tpsl-close" @click="showTpSl = false">×</span>
+ </div>
+ <div class="tpsl-info-grid">
+ <div class="tpsl-info-item">
+ <div class="tpsl-info-label">{{ $t('Entry Price') }}</div>
+ <div class="tpsl-info-value">{{ tpSlItem.trade_avg_price || '-' }}</div>
+ </div>
+ <div class="tpsl-info-item">
+ <div class="tpsl-info-label">{{ $t('Mark Price') }}</div>
+ <div class="tpsl-info-value">{{ tpSlItem.mark_price || '-' }}</div>
+ </div>
+ <div class="tpsl-info-item">
+ <div class="tpsl-info-label">{{ $t('Margin(USDT)') }}</div>
+ <div class="tpsl-info-value">{{ tpSlItem.deposit || '-' }}</div>
+ </div>
+ <div class="tpsl-info-item">
+ <div class="tpsl-info-label">{{ $t('Liq. Price') }}</div>
+ <div class="tpsl-info-value tpsl-liq">{{ tpSlItem.force_close_rice || '-' }}</div>
+ </div>
+ </div>
+ <div class="tpsl-row">
+ <label class="tpsl-row-label">{{ $t('Take Profit') }}</label>
+ <input v-model="tpSlTakeProfit" type="number" class="tpsl-input" :placeholder="$t('Please enter') || 'Please enter'" />
+ </div>
+ <div class="tpsl-row">
+ <label class="tpsl-row-label">{{ $t('Stop Loss') }}</label>
+ <input v-model="tpSlStopLoss" type="number" class="tpsl-input" :placeholder="$t('Please enter') || 'Please enter'" />
+ </div>
+ <div class="tpsl-submit" @click="submitTpSl">{{ $t('Submit') }}</div>
+ </div>
+ </van-popup>
+
+ <!-- 分享弹框：按参考图样式，背景 share-order.jpg，居中圆角卡片 -->
+ <van-popup v-model:show="showShare" position="bottom" round class="share-popup-wrap" :style="{ height: '100%', backgroundColor: 'transparent' }" @click.self="showShare = false">
+ <div class="share-mask" :style="{ backgroundColor: 'transparent' }" @click="showShare = false"></div>
+ <div class="share-popup-body">
+ <div ref="shareCardRef" class="share-card" :style="shareCardBgStyle" @click.stop>
+ <div class="share-card-close" @click="showShare = false">×</div>
+ <div class="share-card-top" :style="{ marginTop: '20%' }">
+ <div class="share-card-pair">{{ shareItem.name || 'BTC USDT' }}</div>
+ <div class="share-card-pos">{{ shareItem.direction == 'buy' ? $t('Long') : $t('Short') }} / {{ shareItem.lever_rate }}X</div>
+ </div>
+ <div class="share-card-pnl" :class="(shareItem.profit != null && shareItem.profit >= 0) ? 'share-pnl-green' : 'share-pnl-red'">{{ shareItem.change_ratio != null ? shareItem.change_ratio : 0 }}%</div>
+ <div class="share-card-entry" :style="{ marginTop: '60px' }">{{ $t('Entry Price') }}: {{ shareItem.trade_avg_price || '-' }}</div>
+ <div class="share-card-pnl-usdt">{{ $t('PnL(USDT)') }}: {{ shareItem.profit != null ? shareItem.profit.toFixed(4) : '-' }}</div>
+ <div class="share-card-ref-row">
+ <div class="share-card-ref-left">
+ <div class="share-card-ref">{{ $t('Referral Code') }}</div>
+ <div class="share-card-code">{{ userInfo.usercode || '91872511' }}</div>
+ </div>
+ <div class="share-card-qr"><canvas ref="shareQrRef" width="160" height="160"></canvas></div>
+ </div>
+ <button type="button" class="share-card-copy" @click="copyShareLink">{{ $t('复制链接') }}</button>
+ <!-- <div class="share-card-save-link" @click="saveShareImage">{{ $t('保存图片') }}</div> -->
+ </div>
+ </div>
+ </van-popup>
</div>
</template>
<script>
-import { _orderSellBatch, _contractOrderClose } from "@/service/trade.api";
+import { _orderSellBatch, _contractOrderClose, _addDepositOpen, _setStopPrice } from "@/service/trade.api";
import { showConfirmDialog, showToast } from 'vant';
import { reserve } from "@/utils/utis";
-//import { i18n } from "@/i18n";
+import { mapGetters } from 'vuex';
+import QRCode from 'qrcode';
+import html2canvas from 'html2canvas';
+import shareOrderBg from '@/assets/imgs/new/share-order.jpg';
+
export default {
name: "perpetualPositionList",
data() {
return {
iconShow: false,
- routeType: 'cryptos'
+ routeType: 'cryptos',
+ showQuickAdd: false,
+ quickAddAmount: 0,
+ quickAddPercent: 0,
+ quickAddBalance: '0',
+ _skipQuickAddSync: false,
+ quickAddItem: null,
+ showShare: false,
+ shareItem: {},
+ showTpSl: false,
+ tpSlItem: {},
+ tpSlTakeProfit: '',
+ tpSlStopLoss: ''
}
},
props: {
- type: {
- type: String,
- default: '2' // 2 永续合约历史持仓，3交割合约持仓
+ type: { type: String, default: '2' },
+ listData: { type: Array, default: () => [] },
+ futuresBalance: { type: [String, Number], default: '0' }
+ },
+ computed: {
+ ...mapGetters('user', ['userInfo']),
+ quickAddBalanceNum() {
+ return Math.max(0, parseFloat(this.quickAddBalance) || 0);
},
- listData: {
- type: Array,
- default() {
- return []
- }
+ shareCardBgStyle() {
+ return {
+ backgroundImage: `url(${shareOrderBg})`,
+ backgroundSize: 'cover',
+ backgroundRepeat: 'no-repeat',
+ backgroundPosition: 'center'
+ };
}
},
mounted() {
- this.routeType = this.$route.query.type
+ this.routeType = this.$route.query.type || 'cryptos';
+ },
+ watch: {
+ showShare(val) {
+ if (val && this.shareItem && this.$refs.shareQrRef) {
+ this.$nextTick(() => this.drawShareQr());
+ }
+ },
+ quickAddPercent(val) {
+ if (this._skipQuickAddSync) return;
+ this._skipQuickAddSync = true;
+ const num = this.quickAddBalanceNum;
+ const amount = num <= 0 ? 0 : Math.min(num, (num * val) / 100);
+ this.quickAddAmount = Math.round(amount * 100) / 100;
+ this.$nextTick(() => { this._skipQuickAddSync = false; });
+ },
+ quickAddAmount(val) {
+ if (this._skipQuickAddSync) return;
+ const num = this.quickAddBalanceNum;
+ if (num <= 0) {
+ this._skipQuickAddSync = true;
+ this.quickAddPercent = 0;
+ this.$nextTick(() => { this._skipQuickAddSync = false; });
+ return;
+ }
+ this._skipQuickAddSync = true;
+ const pct = Math.min(100, Math.max(0, (Number(val) || 0) / num * 100));
+ this.quickAddPercent = Math.round(pct * 100) / 100;
+ this.$nextTick(() => { this._skipQuickAddSync = false; });
+ }
},
methods: {
reserve,
- changeIcon() {
- this.iconShow = !this.iconShow;
+ formatTime(t) {
+ if (!t) return '-';
+ const d = new Date(typeof t === 'number' ? t * 1000 : t);
+ const pad = n => (n + '').padStart(2, '0');
+ return `${pad(d.getDate())}-${pad(d.getMonth() + 1)}-${d.getFullYear()} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
},
goDetail(item) {
this.$router.push({ path: "/cryptos/orderDetail", query: { order_no: item.order_no } });
},
- onSell(order_no) { // 平仓单个
+ goTpSl(item) {
+ this.tpSlItem = { ...item };
+ this.tpSlTakeProfit = item.take_profit_price != null ? String(item.take_profit_price) : (item.profit_price != null ? String(item.profit_price) : '');
+ this.tpSlStopLoss = item.stop_loss_price != null ? String(item.stop_loss_price) : (item.loss_price != null ? String(item.loss_price) : '');
+ this.showTpSl = true;
+ },
+ submitTpSl() {
+ if (!this.tpSlItem || !this.tpSlItem.order_no) {
+ showToast(this.$t('请选择仓位'));
+ return;
+ }
+ const stopPriceProfit = String(this.tpSlTakeProfit || '').trim();
+ const stopPriceLoss = String(this.tpSlStopLoss || '').trim();
+ if (!stopPriceProfit && !stopPriceLoss) {
+ showToast(this.$t('请输入止盈或止损价格'));
+ return;
+ }
+ _setStopPrice({
+ orderNo: this.tpSlItem.order_no,
+ stopPriceProfit: stopPriceProfit || undefined,
+ stopPriceLoss: stopPriceLoss || undefined
+ }).then(() => {
+ showToast(this.$t('提交成功'));
+ this.showTpSl = false;
+ this.$emit('sell');
+ }).catch(() => {});
+ },
+ onSell(order_no) {
showConfirmDialog({
confirmButtonText: this.$t('确定'),
cancelButtonText: this.$t('取消'),
@@ -132,16 +288,63 @@
message: this.$t('是否平仓?'),
}).then(() => {
_contractOrderClose({ order_no }).then(() => {
- showToast(this.$t('平仓成功'))
- this.$emit('sell', order_no)
- })
- }).catch(() => { });
+ showToast(this.$t('平仓成功'));
+ this.$emit('sell', order_no);
+ });
+ }).catch(() => {});
},
- onSellAll() { // 平仓全部
- _orderSellBatch().then(() => {
- this.showToast(this.$t('平仓成功'))
- this.$emit('sell')
- })
+ openQuickAdd(item) {
+ this.quickAddItem = item;
+ this.quickAddBalance = (this.userInfo && this.userInfo.balance) || '0';
+ this.quickAddAmount = 0;
+ this.quickAddPercent = 0;
+ this.showQuickAdd = true;
+ },
+ submitQuickAdd() {
+ if (!this.quickAddItem || !this.quickAddItem.order_no) {
+ showToast(this.$t('请选择仓位'));
+ return;
+ }
+ const amount = Number(this.quickAddAmount);
+ if (isNaN(amount) || amount <= 0) {
+ showToast(this.$t('请输入有效追加金额'));
+ return;
+ }
+ _addDepositOpen({
+ orderNo: this.quickAddItem.order_no,
+ addDepositOpen: amount
+ }).then(() => {
+ showToast(this.$t('提交成功'));
+ this.showQuickAdd = false;
+ this.$emit('sell'); // 刷新持仓列表
+ }).catch(() => {});
+ },
+ openShare(item) {
+ this.shareItem = { ...item };
+ this.showShare = true;
+ },
+ drawShareQr() {
+ const url = (this.userInfo && this.userInfo.url) || window.location.origin + '/#/register?code=' + (this.userInfo && this.userInfo.usercode);
+ const canvas = this.$refs.shareQrRef;
+ if (canvas) QRCode.toCanvas(canvas, url, { width: 160, margin: 2 });
+ },
+ copyShareLink() {
+ const url = (this.userInfo && this.userInfo.url) || window.location.origin + '/#/register?code=' + (this.userInfo && this.userInfo.usercode);
+ navigator.clipboard.writeText(url).then(() => showToast(this.$t('复制成功')));
+ },
+ async saveShareImage() {
+ const el = this.$refs.shareCardRef;
+ if (!el) return;
+ try {
+ const canvas = await html2canvas(el, { useCORS: true, backgroundColor: '#1e1e2e', scale: 2 });
+ const link = document.createElement('a');
+ link.download = 'share-position.png';
+ link.href = canvas.toDataURL('image/png');
+ link.click();
+ showToast(this.$t('保存成功'));
+ } catch (e) {
+ showToast(this.$t('保存失败'));
+ }
}
}
}
@@ -149,20 +352,231 @@
<style lang="scss" scoped>
@import "@/assets/init.scss";
+/* 与参考图一致：细浅灰分隔线 */
+.border-b-color {
+ border-bottom: 1px solid #e8e8e8;
+}
+.position-card-border {
+ border-bottom: 1px solid #e8e8e8;
+ margin: 0 -20px;
+}
+.position-tag {
+ padding: 4px 12px;
+ border-radius: 6px;
+ color: #fff;
+ font-weight: 600;
+}
+.bg-green { background: #0ecb81; }
+.bg-red { background: #f6465d; }
+.position-icon { cursor: pointer; }
+.position-plus {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ background: linear-gradient(135deg, #7c3aed, #5b21b6);
+ color: #fff;
+ font-size: 18px;
+ line-height: 1;
+ cursor: pointer;
+}
+.position-bottom-btn {
+ padding: 8px 20px;
+ font-size: 24px;
+ color: #333;
+ background: #fff;
+ border: 1px solid #e8e8e8;
+ border-radius: 8px;
+ cursor: pointer;
+}
+
+/* Quick addition 弹框 图三样式（字体放大1倍，上下左右边距加一倍） */
+.quick-add-popup.van-popup { background: #fff; border-radius: 16px 16px 0 0; }
+.quick-add-wrap { padding: 48px 40px 64px; }
+.quick-add-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 48px; }
+.quick-add-title { font-size: 36px; font-weight: 600; color: #1e1e1e; }
+.quick-add-close { font-size: 56px; color: #999; cursor: pointer; }
+.quick-add-row { display: flex; align-items: center; margin-bottom: 40px; }
+.quick-add-label { font-size: 28px; color: #333; margin-right: 24px; flex-shrink: 0; }
+.quick-add-input { flex: 1; height: 88px; border: 1px solid #e8e8e8; border-radius: 8px; padding: 0 24px; font-size: 28px; }
+.quick-add-unit { margin-left: 24px; font-size: 28px; color: #666; }
+.quick-add-slider-wrap { margin-bottom: 24px; position: relative; }
+.quick-add-slider-wrap .van-slider { margin: 0;width: 85%; }
+.quick-add-percent { position: absolute; right: 0; top: -8px; font-size: 24px; color: #999; }
+.quick-add-balance { font-size: 24px; color: #999; margin-bottom: 48px; }
+.quick-add-submit {
+ height: 96px; line-height: 96px; text-align: center; font-size: 32px; font-weight: 600; color: #fff;
+ background: linear-gradient(90deg, #7c3aed, #5b21b6); border-radius: 10px; cursor: pointer;
+}
+
+/* TP/SL 止盈止损弹框：白底、数据一排、输入框 F6F5FA */
+.tpsl-popup.van-popup { background: #fff; border-radius: 16px 16px 0 0; }
+.tpsl-wrap { padding: 48px 40px 64px; background: #fff; }
+.tpsl-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; }
+.tpsl-title { font-size: 32px; font-weight: 600; color: #1e1e1e; line-height: 1.4; margin: 0; flex: 1; padding-right: 16px; }
+.tpsl-close { font-size: 56px; color: #999; cursor: pointer; flex-shrink: 0; }
+.tpsl-info-grid { display: flex; flex-wrap: nowrap; gap: 16px; margin-bottom: 40px; }
+.tpsl-info-item { flex: 1; min-width: 0; }
+.tpsl-info-label { font-size: 22px; color: #999; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.tpsl-info-value { font-size: 24px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.tpsl-info-value.tpsl-liq { color: #7c3aed; }
+.tpsl-row { display: flex; align-items: center; margin-bottom: 32px; }
+.tpsl-row-label { font-size: 28px; color: #333; margin-right: 24px; flex-shrink: 0; width: 140px; }
+.tpsl-input { flex: 1; height: 88px; background: #F6F5FA; border: none; border-radius: 8px; padding: 0 24px; font-size: 28px; }
+.tpsl-submit {
+ height: 96px; line-height: 96px; text-align: center; font-size: 32px; font-weight: 600; color: #fff;
+ background: linear-gradient(90deg, #7c3aed, #5b21b6); border-radius: 10px; cursor: pointer; margin-top: 48px;
+}
+
+/* 分享弹框：弹层与内容区透明，自管遮罩半透明，背后露出页面 */
+.share-popup-wrap.van-popup { background: transparent !important; }
+.share-popup-wrap :deep(.van-popup__content) {
+ background: transparent !important;
+ min-height: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+/* 自管遮罩：铺满、半透明黑，点击关闭 */
+.share-mask {
+ position: absolute;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.5);
+ z-index: 0;
+}
+.share-popup-body {
+ position: relative;
+ z-index: 1;
+ min-height: 100vh;
+ height: 100%;
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 40px 20px 60px;
+ box-sizing: border-box;
+ background: transparent !important;
+ pointer-events: none;
+}
+.share-popup-body .share-card { pointer-events: auto; }
+.share-popup-body .share-card {
+ max-width: 90vw;
+ width: 85%;
+ flex-shrink: 0;
+}
+/* 卡片：背景 share-order.jpg，宽高由外层控制，内部用相对单位响应 */
+.share-card {
+ position: relative;
+ width: 100%;
+ min-height: 40%;
+ padding: 5% 6% 5%;
+ border-radius: 16px;
+ overflow: hidden;
+ color: #fff;
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
+ font-size: clamp(12px, 2.2vw, 20px);
+}
+.share-card-close {
+ position: absolute;
+ top: 3%;
+ right: 3%;
+ width: 2.2em;
+ height: 2.2em;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 3em;
+ line-height: 1;
+ color: #fff;
+ cursor: pointer;
+ z-index: 2;
+}
+.share-card-top {
+ margin-bottom: 0.3em;
+}
+.share-card-pair {
+ font-size: 1.5em;
+ font-weight: 700;
+ color: #fff;
+ line-height: 1.3;
+}
+.share-card-pos {
+ font-size: 1.15em;
+ color: rgba(255,255,255,0.9);
+ margin-top: 0.2em;
+}
+.share-card-pnl {
+ font-size: 2.2em;
+ font-weight: 700;
+ margin: 0.5em 0 0.6em;
+ line-height: 1.2;
+}
+.share-pnl-green { color: #0ecb81; }
+.share-pnl-red { color: #f6465d; }
+.share-card-entry,
+.share-card-pnl-usdt {
+ font-size: 1.1em;
+ color: #fff;
+ margin-bottom: 0.25em;
+}
+.share-card-ref-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: 1em;
+ margin-bottom: 0.8em;
+ gap: 0.5em;
+}
+.share-card-ref-left { flex: 1; min-width: 0; }
+.share-card-ref {
+ font-size: 1em;
+ color: rgba(255,255,255,0.9);
+ margin-bottom: 0.2em;
+}
+.share-card-code {
+ font-size: 1.35em;
+ font-weight: 700;
+ color: #fff;
+}
+.share-card-qr {
+ width: 22%;
+ max-width: 110px;
+ aspect-ratio: 1;
+ flex-shrink: 0;
+ background: #fff;
+ padding: 4%;
+ border-radius: 8px;
+}
+.share-card-qr canvas { width: 100% !important; height: 100% !important; display: block; }
+.share-card-copy {
+ width: 100%;
+ height: 2.8em;
+ line-height: 2.8em;
+ text-align: center;
+ font-size: 1em;
+ font-weight: 600;
+ color: #fff;
+ background: linear-gradient(90deg, #7c3aed, #5b21b6);
+ border: none;
+ border-radius: 10px;
+ cursor: pointer;
+ z-index: 2;
+ margin-top: auto;
+}
+.share-card-save-link {
+ text-align: center;
+ font-size: 0.85em;
+ color: rgba(255,255,255,0.8);
+ margin-top: 0.6em;
+ cursor: pointer;
+ z-index: 2;
+}
+
#cryptos {
- .open-btn {
- border-radius: 5px;
- }
-
- .detail-btn {
- border: 1px solid;
- border-radius: 2.5rem;
- background: $US_tabActice_background;
- color: $color_main;
- }
-
- .text-green {
- color: #06AD95;
- }
+ .text-green { color: #06AD95; }
}
</style>
diff --git a/src/components/Transform/trade-head/index.vue b/src/components/Transform/trade-head/index.vue
index b8e7794..7061643 100644
--- a/src/components/Transform/trade-head/index.vue
+++ b/src/components/Transform/trade-head/index.vue
@@ -3,16 +3,16 @@
<div>
<div class="contract-header font-28">
<div class="pl-30 pr-30">
- <div class="flex justify-between pt-45">
+ <div class="flex justify-between" style="padding:9px 0 ">
<div class="flex items-center">
<!-- 没有切换模式的 -->
<!-- <img v-if="isReturn" src="@/assets/image/icon_back_1.png" @click="backPath()" class="w-40 h-40 back mr-50"
alt=""> -->
- <img v-if="isReturn" src="@/assets/image/icon_back.png" @click="goBack()" class="w-40 h-40 back mr-50"
- alt="">
+ <!-- <img v-if="isReturn" src="@/assets/image/icon_back.png" @click="goBack()" class="w-40 h-40 back mr-50"
+ alt=""> -->
<template v-if="!isChange">
- <img src="../../../assets/theme/dark/image/black-convert.png" alt="convert-img" class="w-35 h-35"
+ <img src="../../../assets/theme/dark/image/black-convert.png" alt="convert-img" class="w-45 h-45"
@click="onSidebar" />
<!-- <img src="../../../assets/theme/white/image/black-convert.png" alt="convert-img" class="w-35 h-35"
@click="onSidebar" /> -->
@@ -25,7 +25,7 @@
<img src="./white-convert.png" alt="convert-img" class="w-35 h-35" @click="onSidebar" />
</template>
<template v-else>
- <img src="../../../assets/image/icon_back.png" class="w-40 h-40 back mr-50" alt="" @click="backPath()">
+ <img src="../../../assets/image/icon_back_1.png" class="w-40 h-40 back mr-50" alt="" @click="backPath()">
<img src="../../../assets/theme/dark/image/black-convert.png" alt="convert-img" class="w-35 h-35"
@click="onSidebar" />
<!-- <img src="../../../assets/theme/white/image/black-convert.png" alt="convert-img" class="w-35 h-35"
@@ -34,15 +34,15 @@
</template>
<div class="flex flex-col pl-21" @click="onSidebar">
<template v-if="!isChange">
- <div class="font-35 textColor">{{ symbolName.toUpperCase() || '--' }}</div>
+ <div class="font-35 textColor " style="font-weight: bold;">{{ symbolName.toUpperCase() || '--' }}</div>
</template>
<template v-if="isChange">
<div class="font-35" :class="isNight ? 'text-white' : 'text-black'">{{ symbolName &&
symbolName.toUpperCase() || '--' }}</div>
</template>
</div>
- <div v-if="range" class="pl-30" :class="{ 'text-green': range > 0, 'text-red': range <= 0 }">{{
- range > 0 ? '+' : '' }}{{ range || '--' }}%</div>
+ <!-- <div v-if="range" class="pl-30" :class="{ 'text-green': range > 0, 'text-red': range <= 0 }">{{
+ range > 0 ? '+' : '' }}{{ range || '--' }}%</div> -->
</div>
<div class="flex items-center" v-if="islevel">
<!-- <img src="../../../assets/image/icon-star_active.png" class="w-30 h-30 mr-10 ml-20" @click="openCurrency"
diff --git a/src/components/Transform/trade-order-area/index.vue b/src/components/Transform/trade-order-area/index.vue
index c543156..82cd039 100644
--- a/src/components/Transform/trade-order-area/index.vue
+++ b/src/components/Transform/trade-order-area/index.vue
@@ -1,85 +1,72 @@
<template>
- <div class="flex flex-col flex-1 font-28">
- <div class="flex items-center h-66 tabBackground text-grey area_tabs">
- <p class="font-28 flex-1 flex items-center justify-center h-66 buy-item"
- :class="currentType == 'open' ? 'open' : ''" @click="changeTab('open')">{{ $t('买入') }}</p>
- <p class="font-28 flex-1 flex items-center justify-center h-66 buy-item"
- :class="currentType == 'close' ? 'close' : ''" @click="changeTab('close')">{{ $t('卖出') }}</p>
+ <div class="order-area order-area-wrap flex flex-col flex-1 font-28">
+ <!-- 父：order-area_tabs；子1：两个按钮的 div；子2：中间图片 div（父相子绝，图片在中间） -->
+ <div class="order-area_tabs">
+ <div class="order-tabs-buttons">
+ <p class="order-tab order-tab--left font-28 flex items-center justify-center"
+ :class="currentType == 'open' ? 'order-tab--buy' : 'order-tab-buy'" @click="changeTab('open')">{{ $t('买入') }}</p>
+ <p class="order-tab order-tab--right font-28 flex items-center justify-center"
+ :class="currentType == 'close' ? 'order-tab--sell' : 'order-tab-sell'" @click="changeTab('close')">{{ $t('卖出') }}</p>
+ </div>
+ <div class="order-tabs-bg">
+ <img src="@/assets/imgs/new/contract-slash.png" alt="" class="order-tabs-bg-img" />
+ </div>
</div>
- <div class="mt-22 mb-22 inputBackground" style="position:relative;">
- <div class=" flex justify-between items-center w-full h-70" @click="selectBtn">
- <!-- <img src="@/assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20"/> -->
- <div class="pl-16 textColor" style="width:80%;">{{ title }}</div>
- <img src="@/assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 pr-20" />
+ <!-- Limit 下拉 -->
+ <div class="order-field order-field--select mt-18 mb-18" style="position:relative;">
+ <div class="order-field-inner flex justify-between items-center w-full h-70 px-16" @click="selectBtn">
+ <div class="order-field-label">{{ title }}</div>
+ <img src="@/assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11" />
</div>
<div class="option-box" v-if="isShow">
- <div class="font-30" v-for="item in selectData" :key="item.type" @click="selectItem(item)">{{ item.title }}
- </div>
+ <div class="font-30" v-for="item in selectData" :key="item.type" @click="selectItem(item)">{{ item.title }}</div>
</div>
</div>
- <div class="h-70 lh-70 inputBackground mb-25 flex justify-center px-16 textColor2">
- <input placeholder="" class="targetPrice w-full h-70 border-none" v-model="form.price"
- :disabled="type / 1 === 1" />
- <span>USDT</span>
+ <!-- 价格 -->
+ <div class="order-field h-70 lh-70 mb-18 flex items-center px-16">
+ <input placeholder="" class="order-input flex-1 border-none" v-model="form.price" :disabled="type / 1 === 1" />
+ <span class="order-unit">USDT</span>
</div>
- <div class="h-70 lh-70 inputBackground mb-25 flex justify-center px-16 textColor2">
+ <!-- 数量/总额 标题行 -->
+ <div class="order-field h-70 lh-70 mb-18 flex items-center px-16 textColor2">
<span>{{ title }}</span>
</div>
- <!-- <template v-if="initClose.status / 1 === 0">
- <div class="flex justify-center items-center h-66 buy-item">{{ $t('停牌中,禁止交易') }}</div>
- </template> -->
- <!-- <template v-else> -->
<div class="flex total-list">
- <div class="total-div" :class="[!isTotal ? 'active-bg' : '']" @click="checkIsTotal(false)">
- {{ $t('数量') }}
- </div>
- <div class="total-div" :class="[isTotal ? 'active-bg' : '']" @click="checkIsTotal(true)">
- {{ $t('总额') }}
- </div>
+ <div class="total-div" :class="[!isTotal ? 'active-bg' : '']" @click="checkIsTotal(false)">{{ $t('数量') }}</div>
+ <div class="total-div" :class="[isTotal ? 'active-bg' : '']" @click="checkIsTotal(true)">{{ $t('总额') }}</div>
</div>
- <div v-if="!isTotal" class="h-70 lh-70 inputBackground mb-36 flex justify-center px-16">
- <input :placeholder="$t('数量')" class=" w-full h-70 border-none textColor font-28" v-model="form.volume"
- @input="onInput" />
- <span class="textColor font-28">{{ strToArr(symbolName.toLocaleUpperCase(), '/')[0] }}</span>
+ <div v-if="!isTotal" class="order-field h-70 lh-70 mb-18 flex items-center px-16">
+ <input :placeholder="$t('数量')" class="order-input flex-1 border-none textColor font-28" v-model="form.volume" @input="onInput" />
+ <span class="order-unit textColor font-28">{{ strToArr(symbolName.toLocaleUpperCase(), '/')[0] }}</span>
</div>
- <div v-if="isTotal" class="h-70 lh-70 inputBackground mb-36 flex justify-center px-16">
- <input :placeholder="$t('总额')" class=" w-full h-70 border-none textColor font-28" v-model="form.total"
- @input="onInputTotal" />
- <span class="textColor font-28">{{ 'USDT' }}</span>
+ <div v-if="isTotal" class="order-field h-70 lh-70 mb-18 flex items-center px-16">
+ <input :placeholder="$t('总额')" class="order-input flex-1 border-none textColor font-28" v-model="form.total" @input="onInputTotal" />
+ <span class="order-unit textColor font-28">USDT</span>
</div>
- <div class="font-24 w-full flex justify-between items-center textColor1">
- <!-- <span class="flex-1 text-left">0%</span> -->
- <span class="flex-1 tab-item" :class="[percentageVal == 25 ? 'select-active' : '']"
- @click="exchangeVal(25)">25%</span>
- <span class="flex-1 tab-item" :class="[percentageVal == 50 ? 'select-active' : '']"
- @click="exchangeVal(50)">50%</span>
- <span class="flex-1 tab-item" :class="[percentageVal == 75 ? 'select-active' : '']"
- @click="exchangeVal(75)">75%</span>
- <span class="flex-1 tab-item" :class="[percentageVal == 100 ? 'select-active' : '']"
- @click="exchangeVal(100)">100%</span>
+ <!-- 25% 50% 75% 100% -->
+ <div class="order-percent-row w-full flex justify-between items-center gap-8">
+ <span class="order-percent-btn" :class="{ 'order-percent-btn--active': percentageVal == 25 }" @click="exchangeVal(25)">25%</span>
+ <span class="order-percent-btn" :class="{ 'order-percent-btn--active': percentageVal == 50 }" @click="exchangeVal(50)">50%</span>
+ <span class="order-percent-btn" :class="{ 'order-percent-btn--active': percentageVal == 75 }" @click="exchangeVal(75)">75%</span>
+ <span class="order-percent-btn" :class="{ 'order-percent-btn--active': percentageVal == 100 }" @click="exchangeVal(100)">100%</span>
</div>
- <div class="flex justify-between items-center mt-40">
+ <!-- 可用 + 加号 -->
+ <div class="flex justify-between items-center mt-20 order-available-row">
<div class="flex flex-col font-24">
- <p class="text-grey" v-if="this.currentType === 'open'">{{ $t('可用') }}<span class="textColor ml-8">
- {{ initOpen.volume }} USDT</span>
- </p>
- <p class="text-grey" v-else>{{ $t('可卖') }}
- <span class="textColor ml-8">
- {{ initClose.volume }} {{ strToArr(symbolName.toLocaleUpperCase(), '/')[0] }}
- </span>
- </p>
+ <p v-if="currentType === 'open'"><span class="order-available-label">{{ $t('可用') }}</span><span class="order-available-value ml-8">{{ initOpen.volume }} USDT</span></p>
+ <p v-else><span class="order-available-label">{{ $t('可卖') }}</span><span class="order-available-value ml-8">{{ initClose.volume }} {{ strToArr(symbolName.toLocaleUpperCase(), '/')[0] }}</span></p>
</div>
- <van-icon name="add-o" @click="$router.push('/cryptos/exchangePage')" class="font-30 add-icon" />
- <!-- <img @click="$router.push('/exchange/exchangePage')" src="@/assets/image/public/switch.png" class="w-24 h-24" /> -->
+ <div class="order-add-btn" @click="$router.push('/cryptos/exchangePage')">
+ <van-icon name="add-o" class="font-30" />
+ </div>
</div>
- <div style="border-radius: 3.5rem;"
- class="w-full h-90 lh-90 flex justify-center text-white text-center rounded buyandSell mt-70"
- :class="currentType === 'open' ? 'bg-green' : 'bg-red'" @click="order()">
+ <!-- 买入/卖出 主按钮 -->
+ <div class="order-submit-btn w-full h-68 lh-90 flex justify-center items-center text-white text-center font-28 mt-10"
+ :class="currentType === 'open' ? 'order-submit-btn--buy' : 'order-submit-btn--sell'" @click="order()">
{{ currentType == 'open' ? $t('买入') : $t('卖出') }}
</div>
- <!-- </template> -->
</div>
</template>
@@ -206,19 +193,29 @@
return
}
this.percentageVal = val
+ const isFull = (val === 100)
if (!this.isTotal) {
if (this.currentType == 'open') {
let sum = (parseFloat(this.initOpen.volume) * (val / 100) / parseFloat(this.form.price))
- this.form.volume = Math.floor(sum * 100000) / 100000
+ this.form.volume = isFull ? sum : (Math.floor(sum * 100000) / 100000)
} else {
- let sum = parseFloat(this.initClose.volume)
- this.form.volume = (Math.floor(sum * (val / 100) * 100000)) / 100000
+ let sum = parseFloat(this.initClose.volume) * (val / 100)
+ if (isFull) {
+ this.form.volume = this.initClose.volume != null ? String(this.initClose.volume) : sum
+ } else {
+ this.form.volume = Math.floor(sum * 100000) / 100000
+ }
}
} else {
if (this.currentType == 'open') {
- this.form.total = this.initOpen.volume * (val / 100)
+ if (isFull) {
+ this.form.total = this.initOpen.volume != null ? String(this.initOpen.volume) : (this.initOpen.volume * (val / 100))
+ } else {
+ this.form.total = this.initOpen.volume * (val / 100)
+ }
} else {
- this.form.total = Math.floor((this.initClose.volume * (val / 100) * parseFloat(this.form.price)) * 1000) / 1000
+ const total = this.initClose.volume * (val / 100) * parseFloat(this.form.price)
+ this.form.total = isFull ? total : (Math.floor(total * 1000) / 1000)
}
}
},
@@ -315,11 +312,12 @@
showFailToast(this.$t('请输入总额'))
return
}
+ const noDecimalLimit = (this.percentageVal === 100)
if (this.currentType === 'open') {
- this.form.volume = parseFloat(this.form.total).toFixed(5)
+ this.form.volume = noDecimalLimit ? parseFloat(this.form.total) : parseFloat(this.form.total).toFixed(5)
} else {
- this.form.volume = (parseFloat(this.form.total) / parseFloat(this.form.price))
- this.form.volume = this.form.volume.toFixed(5)
+ this.form.volume = parseFloat(this.form.total) / parseFloat(this.form.price)
+ this.form.volume = noDecimalLimit ? this.form.volume : this.form.volume.toFixed(5)
}
volume = this.form.volume
} else {
@@ -373,22 +371,145 @@
<style lang="scss">
@import "@/assets/init.scss";
-.area_tabs {
- border-radius: 2.5rem;
+/* 一比一还原图片样式：白底容器 + 绿/红标签 + 浅灰输入框 + 蓝字百分比 + 绿/红主按钮 */
+$order-input-bg: #f5f5f5;
+$order-input-border: #dcdcdc;
+$order-text: #333333;
+$order-unit: #666666;
+$order-placeholder: #999999;
+$order-buy: #38c172;
+$order-sell: #f4374b;
+$order-percent: #3b82f6;
+$order-add-border: #8a2be2;
- .open,
- .close {
- border-radius: 2.5rem;
+.order-area-wrap {
+ background: #fff;
+ border-radius: 12px;
+ padding: 0 0 0 0;
+ overflow: hidden;
+}
+
+.order-area_tabs {
+ position: relative; /* 父相 */
+ height: 66px;
+ border-radius: 8px 8px 0 0;
+ overflow: hidden;
+ /* 子1：两个按钮的 div，flex 左右分布，中间留缝 */
+ .order-tabs-buttons {
+ display: flex;
+ justify-content: space-between;
+ align-items: stretch;
+ width: 100%;
+ height: 100%;
+ position: relative;
+ z-index: 0;
}
-
- .open {
- background: #06CDA5;
+ .order-tab {
+ flex: 0 0 calc(50% );
+ width: calc(50% );
+ font-weight: 500;
+ transition: background 0.2s, color 0.2s;
+ cursor: pointer;
}
-
- .close {
- background: #f43368;
+ .order-tab--left {
+ border-radius: 8px 0 0 0;
+ }
+ .order-tab--right {
+ border-radius: 0 8px 0 0;
+ }
+ .order-tab--buy {
+ background: $order-buy;
+ color: #fff;
+ }
+ .order-tab-buy {
+ background: #e8e8e8;
+ color: #000;
+ }
+ .order-tab--sell {
+ background: $order-sell;
+ color: #fff;
+ }
+ .order-tab-sell {
+ background: #e8e8e8;
+ color: #000;
+ }
+ /* 子2：中间图片 div，父相子绝，居中在两按钮中间，直接显示 img */
+ .order-tabs-bg {
+ position: absolute;
+ left: 49.3%;
+ transform: translateX(-50%);
+ width: 90px;
+ height: 130%;
+ top: -5px;
+ bottom: 0;
+ z-index: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ .order-tabs-bg-img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
}
}
+
+.order-field {
+ background: $order-input-bg;
+ border: none;
+ border-radius: 8px;
+ color: $order-text;
+ .order-field-inner { color: $order-text; }
+ .order-field-label { color: $order-text; flex: 1; }
+ .order-input { background: transparent !important; color: $order-text; font-size: 28px; }
+ .order-unit { color: $order-unit; margin-left: 8px; font-size: 26px; }
+ input::placeholder { color: $order-placeholder; }
+}
+
+.order-field--select .order-field-inner {
+ min-height: 70px;
+}
+
+.order-percent-row {
+ margin-bottom: 4px;
+}
+.order-percent-btn {
+ flex: 1;
+ text-align: center;
+ padding: 2px 0;
+ background: $order-input-bg;
+ border: none;
+ border-radius: 8px;
+ color: $order-text;
+ font-size: 24px;
+ margin-right: 8px;
+ &:last-child { margin-right: 0; }
+}
+.order-percent-btn--active {
+ color: $order-text;
+ font-weight: 500;
+}
+
+.order-available-label { color: $order-placeholder; }
+.order-available-value { color: $order-unit; }
+.order-add-btn {
+ width: 44px;
+ height: 44px;
+ border-radius: 10px;
+ border: none;
+ background: #fff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: $order-add-border;
+}
+
+.order-submit-btn {
+ border-radius: 10px;
+ font-weight: 700;
+}
+.order-submit-btn--buy { background: $order-buy; }
+.order-submit-btn--sell { background: $order-sell; }
.bg-f3 {
background: $border-grey;
@@ -497,41 +618,30 @@
cursor: pointer;
}
-.open {
- background-color: $green;
- background: url(@/assets/image/public/open-bg.png) no-repeat right center;
- background-size: 100% 100%;
- color: white;
-}
+/* .open / .close 已由 .order-tab--buy / .order-tab--sell 替代 */
-.close {
- background-color: $green;
- background: url(@/assets/image/public/close-bg.png) no-repeat left center;
- background-size: 100% 100%;
- color: white;
-}
-
-// 下拉
.option-box {
position: absolute;
left: 0;
right: 0;
- top: 90px;
+ top: 100%;
+ margin-top: 4px;
width: 100%;
- background-color: $grey_bg;
+ background: #fff;
+ border: none;
+ border-radius: 8px;
text-align: center;
- box-shadow: 0px 0px 3px 3px $grey_bg;
- border-radius: 4px;
- color: $text-color;
+ color: $order-text;
z-index: 10;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
-.option-box>div {
- padding: 30px 0;
+.option-box > div {
+ padding: 24px 0;
}
-.option-box>div:hover {
- background-color: rgba($color: $bg_yellow, $alpha: 0.6);
+.option-box > div:hover {
+ background: $order-input-bg;
}
.num-text-color {
@@ -564,56 +674,32 @@
opacity: 1;
}
-.inputBackground {
- border-radius: 2.5rem;
-
- input {
- background: transparent !important;
- }
-}
-
-.tab-item {
- display: flex;
- align-items: center;
- justify-content: center;
- background: $input_background;
- border-radius: 2.5rem;
- margin-right: 10px !important;
- padding: 10px 0;
-}
+/* 输入框样式已统一到 .order-field */
.total-list {
- background: transparent;
-
display: flex;
-
- color: $text_color3;
-
+ color: $order-text;
font-size: 26px;
align-items: center;
justify-content: center;
margin-bottom: 20px !important;
- position: relative;
+ gap: 8px;
.total-div {
flex: 1;
text-align: center;
- padding: 20px 0 !important;
+ padding: 8px 0 !important;
+ background: $order-input-bg;
+ border: none;
+ border-radius: 8px;
+ color: $order-unit;
}
}
.active-bg {
- background: $input_background;
- border-radius: 2.5rem;
- color: $text_color;
-}
-
-.buyandSell {
- position: relative;
- z-index: 100;
-}
-
-.select-active {
- color: $text_color;
+ background: #fff !important;
+ border: none;
+ color: $order-text !important;
+ font-weight: 500;
}
</style>
diff --git a/src/components/application/application.vue b/src/components/application/application.vue
index 64b0173..d0a18a1 100644
--- a/src/components/application/application.vue
+++ b/src/components/application/application.vue
@@ -36,7 +36,6 @@
<script>
import { Image as VanImage } from 'vant';
import assetsHead from "@/components/Transform/assets-head/index.vue";
-import { customerServiceUrl } from "@/config";
import { dataTimeEx } from '@/utils/utis'
export default {
name: 'rechargeSubmit',
@@ -71,11 +70,7 @@
this.time = dataTimeEx(Date.parse(new Date()), true);
},
tokefu() {
- if (customerServiceUrl()) {
- window.location.href = customerServiceUrl();
- } else {
- this.$router.push('/customerService')
- }
+ this.$router.push('/customerService');
}
}
}
diff --git a/src/components/fx-footer/index.vue b/src/components/fx-footer/index.vue
index ab54bc0..76e7e6f 100644
--- a/src/components/fx-footer/index.vue
+++ b/src/components/fx-footer/index.vue
@@ -21,26 +21,27 @@
</template>
</van-tabbar-item>
- <van-tabbar-item name="STO" to="/ICO/ico">
+ <!-- <van-tabbar-item name="STO" to="/ICO/ico">
<span :class="[active === 'STO' ? 'active' : '']">STO</span>
+ <template #icon="props">
+ <img :src="props.active ? icon.sto.active : icon.sto.inactive" />
+ </template>
+ </van-tabbar-item> -->
+
+ <van-tabbar-item name="btcusdt" to="/cryptos/trade/btcusdt">
+ <span :class="[active === 'btcusdt' ? 'active' : '']">{{ $t('现货') }}</span>
+ <template #icon>
+ <img :src="active === 'btcusdt' ? icon.btcusdt.active : icon.btcusdt.inactive" />
+ </template>
+ </van-tabbar-item>
+ <van-tabbar-item name="trade" to="/trade">
+ <span :class="[active === 'trade' ? 'active' : '']">{{ $t('trade') }}</span>
<template #icon="props">
<img :src="props.active ? icon.sto.active : icon.sto.inactive" />
</template>
</van-tabbar-item>
- <van-tabbar-item name="btcusdt" to="/cryptos/trade/btcusdt">
- <span :class="[active === 'btcusdt' ? 'active' : '']">{{ $t('现货') }}</span>
- <template #icon="props">
- <img :src="props.active ? icon.btcusdt.active : icon.btcusdt.inactive" />
- </template>
- </van-tabbar-item>
-
- <!-- <van-tabbar-item name="trade" to="/trade">
- <span :class="[active === 'trade' ? 'active' : '']">{{ $t('trade') }}</span>
- <template #icon="props">
- <img :src="props.active ? icon.trade.active : icon.trade.inactive" />
- </template>
- </van-tabbar-item> -->
+
<!-- <van-tabbar-item name="funds" to="/cryptos/funds">
<span>{{ $t('资金') }}</span>
@@ -70,19 +71,19 @@
</template>
</van-tabbar-item> -->
- <!-- <van-tabbar-item name="mine" to="/my">
+ <van-tabbar-item name="mine" to="/my">
<span :class="[active === 'mine' ? 'active' : '']">{{ $t('my') }}</span>
- <template #icon="props">
- <img :src="props.active ? icon.mine.active : icon.mine.inactive" />
- </template>
- </van-tabbar-item> -->
-
- <van-tabbar-item name="assets" to="/my/assets">
- <span :class="[active === 'assets' ? 'active' : '']">{{ $t('资产') }}</span>
<template #icon="props">
<img :src="props.active ? icon.assets.active : icon.assets.inactive" />
</template>
</van-tabbar-item>
+
+ <!-- <van-tabbar-item name="assets" to="/my/assets">
+ <span :class="[active === 'assets' ? 'active' : '']">{{ $t('资产') }}</span>
+ <template #icon="props">
+ <img :src="props.active ? icon.assets.active : icon.assets.inactive" />
+ </template>
+ </van-tabbar-item> -->
</van-tabbar>
</div>
</template>
@@ -115,7 +116,9 @@
} else if (route.path == "/documentation/index") {
active.value = 'documentation'
} else if (route.path == "/ICO/ico") {
- active.value = 'sto'
+ active.value = 'STO'
+} else if (route.path.indexOf('/cryptos/trade') !== -1) {
+ active.value = 'btcusdt'
}
let quotesStore = useQuotesStore()
@@ -137,7 +140,9 @@
} else if (route.path == "/documentation/index") {
active.value = 'documentation'
} else if (route.path == "/ICO/ico") {
- active.value = 'sto'
+ active.value = 'STO'
+ } else if (route.path.indexOf('/cryptos/trade') !== -1) {
+ active.value = 'btcusdt'
}
})
// 底部列表
diff --git a/src/components/fx-kline/index.vue b/src/components/fx-kline/index.vue
index 8b6c323..e29c838 100644
--- a/src/components/fx-kline/index.vue
+++ b/src/components/fx-kline/index.vue
@@ -1,5 +1,5 @@
<template>
- <div id="kline" class="boxDisplay" :style="{ height: `${props.height || defaultH}px`, position: 'relative' }"
+ <div :id="props.chartId" class="boxDisplay" :style="{ height: `${props.height || defaultH}px`, position: 'relative' }"
v-if="defaultH">
</div>
<ul class="flex px-4 py-4 box-border justify-between indicator-box" v-if="showBottom"
@@ -49,6 +49,10 @@
const props = defineProps({
symbol: {
type: String
+ },
+ chartId: {
+ type: String,
+ default: 'kline'
},
height: {
type: Number
@@ -137,7 +141,7 @@
}
const initData = async () => {
- chart = init('kline', config);
+ chart = init(props.chartId, config);
chart.setOffsetRightSpace(15)
chart.setDataSpace(10)
if (props.isShowsolid) {
@@ -172,30 +176,24 @@
length = 2
}
chart.setPriceVolumePrecision(length, 2)
- localStorage.setItem('kline', JSON.stringify(data.value))
+ localStorage.setItem(`kline_${props.chartId}`, JSON.stringify(data.value))
nextTick(() => {
chart.applyNewData(data.value);
})
}
const initData1 = async () => {
- chart = init('kline', config);
+ chart = init(props.chartId, config);
chart.setOffsetRightSpace(15)
chart.setDataSpace(10)
let length = 2
- data.value = JSON.parse(localStorage.getItem('kline'))
+ data.value = JSON.parse(localStorage.getItem(`kline_${props.chartId}`))
try {
- length = data.value[data.value.length - 1].decimals
+ length = data.value && data.value.length ? data.value[data.value.length - 1].decimals : 2
} catch (e) {
length = 2
}
chart.setPriceVolumePrecision(length, 2)
- // if (props.type === 'candle_solid') {
- // chart.createTechnicalIndicator('MA', false, { id: 'candle_pane' });
- // paneId.value = chart.createTechnicalIndicator('VOL');
- // }
-
- // this.fetchData()
chart.setStyleOptions({
candle: {
type: props.chartType
@@ -204,10 +202,8 @@
if (!quotesStore.stage) {
quotesStore[SET_STAGE]({ stage: '1min', seconds: 1 * 60 * 1000 })
}
- // console.log(data.value)
-
nextTick(() => {
- chart.applyNewData(data.value);
+ if (data.value && data.value.length) chart.applyNewData(data.value);
})
}
const choiceType = (type) => { // 选择副线
diff --git a/src/components/trade-deep-data/index.vue b/src/components/trade-deep-data/index.vue
index 4276dc7..29e3add 100644
--- a/src/components/trade-deep-data/index.vue
+++ b/src/components/trade-deep-data/index.vue
@@ -39,8 +39,8 @@
<script>
import { WS_URL } from '@/config'
import { fixDate, formatMoney } from "@/utils";
+import { THEME } from '@/config/theme'
const DEEP_LENGTH = 5
-const THEME = 'dark'
export default {
name: 'TradeDeepData',
diff --git a/src/config/index.js b/src/config/index.js
index 0042b3c..b66edae 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -35,12 +35,12 @@
// const ENV_DEV = 'zhapi.coinbtcs.com' // dev
// const ENV_DEV = 'openapi.yanshiz.com' // dev
-const ENV_DEV = 'ddapi.fractionx-ex.com' // dev
+const ENV_DEV = 'blueapi.shenliankeji.top' // dev
// const ENV_DEV = '192.168.10.6:8086' // dev
// const ENV_PRO = 'qheufhj.site' // app域名
// const ENV_PRO = window.location.hostname // 接口域名跟随 H5zhapi.coinbtcs.com
-const ENV_PRO = 'ddapi.fractionx-ex.com' // 接口域名跟随 H5zhapi.coinbtcs.com
+const ENV_PRO = 'blueapi.shenliankeji.top' // 接口域名跟随 H5zhapi.coinbtcs.com
// const ENV_PRO = '192.168.10.6:8086' // 接口域名跟随 H5zhapi.coinbtcs.com
let base_url = ''
@@ -56,7 +56,7 @@
ws_url = 'wss://' + ENV_PRO + '/api/websocket'
}
-let imgUrl = 'https://ddimg.fractionx-ex.com' // 暂时的 单独的图片地址
+let imgUrl = 'https://blueimg.shenliankeji.top' // 暂时的 单独的图片地址
export const BASE_URL = base_url
export const WS_URL = ws_url
diff --git a/src/config/theme.js b/src/config/theme.js
index bfece70..9daf75e 100644
--- a/src/config/theme.js
+++ b/src/config/theme.js
@@ -1,4 +1,4 @@
-let theme = 'dark'
-// let theme = 'light'
+// let theme = 'dark'
+let theme = 'light'
export const THEME = theme
\ No newline at end of file
diff --git a/src/i18n/Deutsch.js b/src/i18n/Deutsch.js
index 19ed091..9ebbddf 100644
--- a/src/i18n/Deutsch.js
+++ b/src/i18n/Deutsch.js
@@ -2868,4 +2868,59 @@
Bitte stellen Sie sicher, dass Ihr Computer und Ihr Browser sicher sind, um Manipulationen oder Datenlecks zu verhindern.
Bei Fragen wenden Sie sich bitte an unseren Online-Kundenservice.`,
"DXCN白皮书":'DXCN-Whitepaper',
+ "documentType": "Dokumenttyp",
+ "lastName": "Nachname",
+ "firstName": "Vorname",
+ "idNumber": "Ausweisnummer",
+ "birth": "Geburtsdatum",
+ "pleaseSelectDocumentType": "Bitte Dokumenttyp wählen",
+ "pleaseEnterLastName": "Bitte Nachname eingeben",
+ "pleaseEnterFirstName": "Bitte Vorname eingeben",
+ "pleaseEnterIdNumber": "Bitte Ausweisnummer eingeben",
+ "pleaseSelectBirth": "Bitte Geburtsdatum wählen",
+ "Primary": "Primär",
+ "Senior": "Erweitert",
+ "kycPrimaryDesc": "Erhöhen Sie das Auszahlungslimit innerhalb von 24 Stunden auf 80 BTC",
+ "kycSeniorDesc": "Erhöhen Sie das Auszahlungslimit innerhalb von 24 Stunden auf 200 BTC",
+ "kycCompletePrimaryFirst": "Bitte schließen Sie zuerst die Primärprüfung ab",
+ "underReview": "In Prüfung",
+ "kycLotteryBroadcast": "KYC Lotterie-Broadcast!",
+ "kycLotterySubtitle": "Transaktionen sofort monetarisieren und einfach Geld verdienen!",
+ "favorites": "Favoriten",
+ "markets": "Märkte",
+ "trend": "Trend",
+ "follow": "Folgen",
+ "news": "Nachrichten",
+ "ipo": "IPO",
+ "trendSubtitle": "24-Stunden-Höchste Handelsänderung",
+ "networkTimeout": "Netzwerk-Timeout",
+ "apiNotFound": "API nicht gefunden",
+ "httpMismatch": "HTTP-Protokoll stimmt nicht überein, bitte bestätigen",
+ "invalidVerifyCode": "Ungültiger Bestätigungscode",
+ "serviceError": "Serverfehler",
+ "Size": "Größe",
+ "Margin Ratio": "Margenverhältnis",
+ "Mark Price": "Marktpreis",
+ "Liq. Price": "Liq.-Preis",
+ "TP/SL": "TP/SL",
+ "来自用户钱包": "Vom Benutzer-Wallet",
+ "期货钱包": "Futures-Wallet",
+ "Bonus": "Spot",
+ "My assets": "Meine Vermögenswerte",
+ "Asset list": "Vermögensliste",
+ "Usable": "Verfügbar",
+ "Locked": "Gesperrt",
+ "BTC Price": "BTC-Preis",
+ "ETH Price": "ETH-Preis",
+ "展示更多": "Mehr anzeigen",
+ "资金明细": "Fondsdetails",
+ "airdropOfficialEcology": "WHALE Offizielle Ökologie",
+ "airdropActivityInProgress": "Air-Drop-Aktivität läuft",
+ "airdropPlatformDesc": "Token-Startplattform für innovative und fortschrittliche Projekte",
+ "airdropParticipateTip": "Mit einem Klick teilnehmen und kostenlose Airdrops erhalten",
+ "airdropAccumulated": "Kumulierte Airdrops $111,587,379",
+ "airdropInProgress": "In Bearbeitung",
+ "airdropMostPotential": "Das vielversprechendste und wertvollste...",
+ "airdropGiftRecord": "Geschenkaufzeichnung",
+ "aiStrategyDesc": "KI-Roboter führen Big-Data-Analysen durch und empfehlen intelligent Vertragshandelsaufträge, um Händlern intelligentere Handelsentscheidungen und profitablere Transaktionen zu ermöglichen.",
}
\ No newline at end of file
diff --git a/src/i18n/Italy.js b/src/i18n/Italy.js
index c975b43..1112027 100644
--- a/src/i18n/Italy.js
+++ b/src/i18n/Italy.js
@@ -2958,4 +2958,88 @@
Assicurati che il tuo computer e il tuo browser siano sicuri per evitare manomissioni o fughe di informazioni.
Per qualsiasi domanda, contatta il nostro servizio clienti online.`,
"DXCN白皮书":'Libro bianco DXCN',
+ "documentType": "Tipo di documento",
+ "lastName": "Cognome",
+ "firstName": "Nome",
+ "idNumber": "Numero documento",
+ "birth": "Data di nascita",
+ "pleaseSelectDocumentType": "Seleziona tipo di documento",
+ "pleaseEnterLastName": "Inserisci cognome",
+ "pleaseEnterFirstName": "Inserisci nome",
+ "pleaseEnterIdNumber": "Inserisci numero documento",
+ "pleaseSelectBirth": "Seleziona data di nascita",
+ "Primary": "Primario",
+ "Senior": "Superiore",
+ "kycPrimaryDesc": "Aumenta il limite di prelievo a 80 BTC entro 24 ore",
+ "kycSeniorDesc": "Aumenta il limite di prelievo a 200 BTC entro 24 ore",
+ "kycCompletePrimaryFirst": "Completa prima la verifica primaria",
+ "underReview": "In revisione",
+ "kycLotteryBroadcast": "Trasmissione lotteria KYC!",
+ "kycLotterySubtitle": "Monetizza le transazioni e guadagna facilmente!",
+ "favorites": "Preferiti",
+ "markets": "Mercati",
+ "trend": "Tendenza",
+ "follow": "Segui",
+ "news": "Notizie",
+ "ipo": "IPO",
+ "trendSubtitle": "Massima variazione di trading 24 ore",
+ "networkTimeout": "Timeout di rete",
+ "apiNotFound": "API non trovata",
+ "httpMismatch": "Protocollo HTTP non corrispondente, conferma",
+ "invalidVerifyCode": "Codice di verifica non valido",
+ "serviceError": "Errore del server",
+ "推荐码": "Codice referral",
+ "订金": "Deposito",
+ "提取": "Preleva",
+ "人工智能交易": "Trading AI",
+ "贸易竞争": "Competizione",
+ "空投": "Airdrop",
+ "加密货币交易": "Trading crypto",
+ "申请成为交易员": "Diventa trader",
+ "不适用": "N/A",
+ "期货订单": "Ordini futures",
+ "现货订单": "Ordini spot",
+ "当日成交": "Scambi giornalieri",
+ "当日成交汇总": "Riepilogo scambi",
+ "请向卖家付款": "Paga il venditore",
+ "订单将在": "Ordine annullato in",
+ "后取消": "",
+ "联系卖家": "Contatta venditore",
+ "银行卡": "Carta bancaria",
+ "姓名": "Nome",
+ "银行卡号": "Numero carta",
+ "请点击右上角按钮联系商家索取": "Contatta il venditore per i dettagli",
+ "银行名称": "Banca",
+ "请仔细阅读下方交易条款": "Leggi i termini sotto",
+ "开户支行": "Filiale",
+ "请按照下方交易条款提供相关资料": "Fornisci i dati come da termini",
+ "离开APP,登录您与APP上的验证姓名相匹配的银行账户或其他支付方式，转到卖家的以下账户。": "Esci dall'app, accedi al conto bancario e trasferisci al venditore.",
+ "付款后，返回 XX APP，务必点击下方按钮“我已付款”通知卖家。": "Dopo il pagamento, torna nell'app e clicca \"Ho pagato\".",
+ "遇到问题？": "Problemi?",
+ "我已付款，通知卖家": "Ho pagato, notifica venditore",
+ "Size": "Dimensione",
+ "Margin Ratio": "Rapporto margine",
+ "Mark Price": "Prezzo di mercato",
+ "Liq. Price": "Prezzo liq.",
+ "TP/SL": "TP/SL",
+ "来自用户钱包": "Dal portafoglio utente",
+ "期货钱包": "Portafoglio futures",
+ "Bonus": "Spot",
+ "My assets": "I miei asset",
+ "Asset list": "Elenco asset",
+ "Usable": "Utilizzabile",
+ "Locked": "Bloccato",
+ "BTC Price": "Prezzo BTC",
+ "ETH Price": "Prezzo ETH",
+ "展示更多": "Mostra di più",
+ "资金明细": "Dettaglio fondi",
+ "airdropOfficialEcology": "Ecosistema ufficiale WHALE",
+ "airdropActivityInProgress": "Attività airdrop in corso",
+ "airdropPlatformDesc": "Piattaforma di lancio token per progetti innovativi e avanzati",
+ "airdropParticipateTip": "Partecipa con un clic e ricevi airdrop gratuiti",
+ "airdropAccumulated": "Airdrop accumulato $111,587,379",
+ "airdropInProgress": "In corso",
+ "airdropMostPotential": "Il più potenziale e prezioso...",
+ "airdropGiftRecord": "Registro regali",
+ "aiStrategyDesc": "I robot AI eseguono analisi di big data e raccomandano intelligentemente ordini di trading contrattuali per aiutare i trader a prendere decisioni più intelligenti e transazioni più redditizie.",
}
\ No newline at end of file
diff --git a/src/i18n/Japanese.js b/src/i18n/Japanese.js
index fe8649e..4d7a12b 100644
--- a/src/i18n/Japanese.js
+++ b/src/i18n/Japanese.js
@@ -2726,4 +2726,88 @@
情報の改ざんや漏洩を防ぐため、お使いのコンピューターとブラウザが安全であることをご確認ください。
ご質問がございましたら、オンラインカスタマーサービスまでお問い合わせください。`,
"DXCN白皮书":'DXCNホワイトペーパー',
+ "documentType": "証明書の種類",
+ "lastName": "姓",
+ "firstName": "名",
+ "idNumber": "証明書番号",
+ "birth": "生年月日",
+ "pleaseSelectDocumentType": "証明書の種類を選択",
+ "pleaseEnterLastName": "姓を入力",
+ "pleaseEnterFirstName": "名を入力",
+ "pleaseEnterIdNumber": "証明書番号を入力",
+ "pleaseSelectBirth": "生年月日を選択",
+ "Primary": "初級",
+ "Senior": "高級",
+ "kycPrimaryDesc": "24時間以内に出金限度額を80BTCに引き上げ",
+ "kycSeniorDesc": "24時間以内に出金限度額を200BTCに引き上げ",
+ "kycCompletePrimaryFirst": "初級認証を先に完了してください",
+ "underReview": "審査中",
+ "kycLotteryBroadcast": "KYC抽選放送！",
+ "kycLotterySubtitle": "取引を即座に換金し、簡単に稼ごう！",
+ "favorites": "お気に入り",
+ "markets": "マーケット",
+ "trend": "トレンド",
+ "follow": "フォロー",
+ "news": "ニュース",
+ "ipo": "IPO",
+ "trendSubtitle": "24時間最高取引変動",
+ "networkTimeout": "ネットワークタイムアウト",
+ "apiNotFound": "APIが見つかりません",
+ "httpMismatch": "HTTPプロトコルが一致しません、確認してください",
+ "invalidVerifyCode": "認証コードが無効です",
+ "serviceError": "サーバーエラー",
+ "推荐码": "紹介コード",
+ "订金": "入金",
+ "提取": "出金",
+ "人工智能交易": "AI取引",
+ "贸易竞争": "トレード競争",
+ "空投": "エアドロップ",
+ "加密货币交易": "暗号資産取引",
+ "申请成为交易员": "トレーダーに応募",
+ "不适用": "N/A",
+ "期货订单": "先物注文",
+ "现货订单": "現物注文",
+ "当日成交": "当日約定",
+ "当日成交汇总": "当日約定まとめ",
+ "请向卖家付款": "売り手に支払い",
+ "订单将在": "注文は",
+ "后取消": "後にキャンセル",
+ "联系卖家": "売り手に連絡",
+ "银行卡": "銀行カード",
+ "姓名": "氏名",
+ "银行卡号": "カード番号",
+ "请点击右上角按钮联系商家索取": "詳細は売り手に連絡",
+ "银行名称": "銀行名",
+ "请仔细阅读下方交易条款": "下記取引条項をお読みください",
+ "开户支行": "支店",
+ "请按照下方交易条款提供相关资料": "条項に従い情報を提供",
+ "离开APP,登录您与APP上的验证姓名相匹配的银行账户或其他支付方式，转到卖家的以下账户。": "APPを離れ、本人確認済みの銀行情報で売り手に振込ください。",
+ "付款后，返回 XX APP，务必点击下方按钮“我已付款”通知卖家。": "支払い後、APPに戻り「支払い済み」を押して売り手に通知。",
+ "遇到问题？": "問題が発生しましたか？",
+ "我已付款，通知卖家": "支払い済み、売り手に通知",
+ "Size": "数量",
+ "Margin Ratio": "証拠金率",
+ "Mark Price": "マーク価格",
+ "Liq. Price": "強制決済価格",
+ "TP/SL": "TP/SL",
+ "来自用户钱包": "ユーザーウォレットから",
+ "期货钱包": "先物ウォレット",
+ "Bonus": "現物",
+ "My assets": "マイ資産",
+ "Asset list": "資産リスト",
+ "Usable": "利用可能",
+ "Locked": "ロック",
+ "BTC Price": "BTC価格",
+ "ETH Price": "ETH価格",
+ "展示更多": "もっと見る",
+ "资金明细": "資金明細",
+ "airdropOfficialEcology": "WHALE公式エコシステム",
+ "airdropActivityInProgress": "エアドロップ活動進行中",
+ "airdropPlatformDesc": "革新的で先進的なプロジェクトのためのトークンローンチプラットフォーム",
+ "airdropParticipateTip": "ワンクリックで参加、無料エアドロップを受け取る",
+ "airdropAccumulated": "累計エアドロップ $111,587,379",
+ "airdropInProgress": "進行中",
+ "airdropMostPotential": "最も可能性と価値のある...",
+ "airdropGiftRecord": "ギフト記録",
+ "aiStrategyDesc": "AIロボットがビッグデータ分析を行い、契約取引注文をインテリジェントに推奨し、トレーダーがよりスマートな取引判断を下し、より収益性の高い取引を実現します。",
}
\ No newline at end of file
diff --git a/src/i18n/Portuguese.js b/src/i18n/Portuguese.js
index e16d25b..c13b33f 100644
--- a/src/i18n/Portuguese.js
+++ b/src/i18n/Portuguese.js
@@ -677,4 +677,50 @@
Certifique-se de que o seu computador e o seu navegador estão seguros para evitar a adulteração ou fuga de informação.
Em caso de dúvidas, contacte o nosso serviço de apoio ao cliente online.`,
"DXCN白皮书":'Livro Branco do DXCN',
+ "documentType": "Tipo de documento",
+ "lastName": "Sobrenome",
+ "firstName": "Nome",
+ "idNumber": "Número do documento",
+ "birth": "Data de nascimento",
+ "pleaseSelectDocumentType": "Selecione o tipo de documento",
+ "pleaseEnterLastName": "Digite o sobrenome",
+ "pleaseEnterFirstName": "Digite o nome",
+ "pleaseEnterIdNumber": "Digite o número do documento",
+ "pleaseSelectBirth": "Selecione a data de nascimento",
+ "Primary": "Primário",
+ "Senior": "Avançado",
+ "kycPrimaryDesc": "Aumente o limite de saque para 80 BTC em 24 horas",
+ "kycSeniorDesc": "Aumente o limite de saque para 200 BTC em 24 horas",
+ "kycCompletePrimaryFirst": "Conclua primeiro a verificação primária",
+ "underReview": "Em análise",
+ "kycLotteryBroadcast": "Transmissão da loteria KYC!",
+ "kycLotterySubtitle": "Monetize transações e ganhe dinheiro facilmente!",
+ "favorites": "Favoritos",
+ "markets": "Mercados",
+ "trend": "Tendência",
+ "follow": "Seguir",
+ "news": "Notícias",
+ "ipo": "IPO",
+ "trendSubtitle": "Maior variação de negociação em 24 horas",
+ "networkTimeout": "Tempo limite de rede",
+ "apiNotFound": "API não encontrada",
+ "httpMismatch": "Protocolo HTTP incompatível, confirme",
+ "invalidVerifyCode": "Código de verificação inválido",
+ "serviceError": "Erro do servidor",
+ "Size": "Tamanho",
+ "Margin Ratio": "Rácio de margem",
+ "Mark Price": "Preço de marca",
+ "Liq. Price": "Preço liq.",
+ "TP/SL": "TP/SL",
+ "来自用户钱包": "Da carteira do usuário",
+ "期货钱包": "Carteira de futuros",
+ "Bonus": "Spot",
+ "My assets": "Meus ativos",
+ "Asset list": "Lista de ativos",
+ "Usable": "Utilizável",
+ "Locked": "Bloqueado",
+ "BTC Price": "Preço BTC",
+ "ETH Price": "Preço ETH",
+ "展示更多": "Mostrar mais",
+ "资金明细": "Detalhes do fundo",
}
\ No newline at end of file
diff --git a/src/i18n/Spanish.js b/src/i18n/Spanish.js
index ce06bb0..16af5fe 100644
--- a/src/i18n/Spanish.js
+++ b/src/i18n/Spanish.js
@@ -2641,4 +2641,50 @@
Asegúrese de que su ordenador y navegador sean seguros para evitar la manipulación o filtración de información.
Si tiene alguna pregunta, póngase en contacto con nuestro servicio de atención al cliente en línea.`,
"DXCN白皮书":'Libro blanco de DXCN',
+ "documentType": "Tipo de documento",
+ "lastName": "Apellido",
+ "firstName": "Nombre",
+ "idNumber": "Número de documento",
+ "birth": "Fecha de nacimiento",
+ "pleaseSelectDocumentType": "Seleccione tipo de documento",
+ "pleaseEnterLastName": "Ingrese apellido",
+ "pleaseEnterFirstName": "Ingrese nombre",
+ "pleaseEnterIdNumber": "Ingrese número de documento",
+ "pleaseSelectBirth": "Seleccione fecha de nacimiento",
+ "Primary": "Primario",
+ "Senior": "Superior",
+ "kycPrimaryDesc": "Aumente el límite de retiro a 80 BTC en 24 horas",
+ "kycSeniorDesc": "Aumente el límite de retiro a 200 BTC en 24 horas",
+ "kycCompletePrimaryFirst": "Complete primero la verificación primaria",
+ "underReview": "En revisión",
+ "kycLotteryBroadcast": "¡Transmisión de lotería KYC!",
+ "kycLotterySubtitle": "¡Monetiza transacciones y gana dinero fácilmente!",
+ "favorites": "Favoritos",
+ "markets": "Mercados",
+ "trend": "Tendencia",
+ "follow": "Seguir",
+ "news": "Noticias",
+ "ipo": "IPO",
+ "trendSubtitle": "Mayor cambio de trading en 24 horas",
+ "networkTimeout": "Tiempo de red agotado",
+ "apiNotFound": "API no encontrada",
+ "httpMismatch": "Protocolo HTTP no coincide, confirme",
+ "invalidVerifyCode": "Código de verificación no válido",
+ "serviceError": "Error del servidor",
+ "Size": "Tamaño",
+ "Margin Ratio": "Ratio de margen",
+ "Mark Price": "Precio de marca",
+ "Liq. Price": "Precio liq.",
+ "TP/SL": "TP/SL",
+ "来自用户钱包": "Desde billetera de usuario",
+ "期货钱包": "Billetera de futuros",
+ "Bonus": "Spot",
+ "My assets": "Mis activos",
+ "Asset list": "Lista de activos",
+ "Usable": "Disponible",
+ "Locked": "Bloqueado",
+ "BTC Price": "Precio BTC",
+ "ETH Price": "Precio ETH",
+ "展示更多": "Mostrar más",
+ "资金明细": "Detalle de fondos",
}
\ No newline at end of file
diff --git a/src/i18n/cn.js b/src/i18n/cn.js
index c5b1f57..93dd725 100644
--- a/src/i18n/cn.js
+++ b/src/i18n/cn.js
@@ -2847,4 +2847,102 @@
請務必確認電腦及瀏覽器安全，防止信息被篡改或泄漏。
有任何問題可聯繫在線客服服務。`,
"DXCN白皮书":'DXCN白皮書',
+ "Long": "多",
+ "Short": "空",
+ "Entry Price": "入場價格",
+ "PnL(USDT)": "盈虧(USDT)",
+ "Size": "數量",
+ "Margin Ratio": "保證金率",
+ "Mark Price": "標記價格",
+ "Liq. Price": "強平價格",
+ "TP/SL": "止盈/止損",
+ "Referral Code": "推薦碼",
+ "Futures asset balance": "合約資產餘額",
+ "Quick addition": "快速追加",
+ "来自用户钱包": "來自用戶錢包",
+ "期货钱包": "期貨錢包",
+ "Bonus": "現貨",
+ "请选择仓位": "請選擇倉位",
+ "请输入有效追加金额": "請輸入有效追加金額",
+ "复制链接": "複製連結",
+ "保存图片": "保存圖片",
+ "保存成功": "保存成功",
+ "保存失败": "保存失敗",
+ "kycLotteryBroadcast": "KYC抽獎廣播！",
+ "kycLotterySubtitle": "即時變現交易，輕鬆賺取現金！",
+ "favorites": "收藏",
+ "markets": "市場",
+ "trend": "趨勢",
+ "follow": "關注",
+ "news": "資訊",
+ "ipo": "IPO",
+ "trendSubtitle": "24小時最高交易漲跌幅",
+ "networkTimeout": "網絡超時",
+ "apiNotFound": "接口未找到",
+ "httpMismatch": "HTTP協議不匹配，請確認",
+ "invalidVerifyCode": "驗證碼不合法",
+ "serviceError": "服務錯誤",
+ "Primary": "初級",
+ "Senior": "高級",
+ "kycPrimaryDesc": "24小時內提現限額提升至80BTC",
+ "kycSeniorDesc": "24小時內提現限額提升至200BTC",
+ "kycCompletePrimaryFirst": "請先完成初級認證",
+ "underReview": "審核中",
+ "documentType": "證件類型",
+ "lastName": "姓",
+ "firstName": "名",
+ "idNumber": "證件號碼",
+ "birth": "生日",
+ "pleaseSelectDocumentType": "請選擇證件類型",
+ "pleaseEnterLastName": "請輸入姓",
+ "pleaseEnterFirstName": "請輸入名",
+ "pleaseEnterIdNumber": "請輸入證件號碼",
+ "pleaseSelectBirth": "請選擇生日",
+ "notOpenYet": "暫未開放",
+ "推荐码": "推薦碼",
+ "订金": "訂金",
+ "提取": "提取",
+ "人工智能交易": "人工智能交易",
+ "贸易竞争": "貿易競爭",
+ "空投": "空投",
+ "加密货币交易": "加密貨幣交易",
+ "申请成为交易员": "申請成為交易員",
+ "不适用": "不適用",
+ "期货订单": "期貨訂單",
+ "现货订单": "現貨訂單",
+ "当日成交": "當日成交",
+ "当日成交汇总": "當日成交匯總",
+ "请向卖家付款": "請向賣家付款",
+ "订单将在": "訂單將在",
+ "后取消": "後取消",
+ "联系卖家": "聯繫賣家",
+ "银行卡": "銀行卡",
+ "姓名": "姓名",
+ "银行卡号": "銀行卡號",
+ "请点击右上角按钮联系商家索取": "請點擊右上角按鈕聯繫商家索取",
+ "银行名称": "銀行名稱",
+ "请仔细阅读下方交易条款": "請仔細閱讀下方交易條款",
+ "开户支行": "開戶支行",
+ "请按照下方交易条款提供相关资料": "請按照下方交易條款提供相關資料",
+ "离开APP,登录您与APP上的验证姓名相匹配的银行账户或其他支付方式，转到卖家的以下账户。": "離開APP，登入您與APP上的驗證姓名相符的銀行賬戶或其他支付方式，轉到賣家的以下賬戶。",
+ "付款后，返回 XX APP，务必点击下方按钮“我已付款”通知卖家。": "付款後，返回 XX APP，務必點擊下方按鈕「我已付款」通知賣家。",
+ "遇到问题？": "遇到問題？",
+ "我已付款，通知卖家": "我已付款，通知賣家",
+ "My assets": "我的資產",
+ "Asset list": "資產列表",
+ "Usable": "可用",
+ "Locked": "鎖定",
+ "BTC Price": "BTC 價格",
+ "ETH Price": "ETH 價格",
+ "展示更多": "展示更多",
+ "资金明细": "資金明細",
+ "airdropOfficialEcology": "WHALE 官方生態",
+ "airdropActivityInProgress": "空投活動進行中",
+ "airdropPlatformDesc": "創新與先進項目的代幣發行平台",
+ "airdropParticipateTip": "一鍵參與，領取免費空投",
+ "airdropAccumulated": "累計空投 $111,587,379",
+ "airdropInProgress": "進行中",
+ "airdropMostPotential": "最具潛力與價值...",
+ "airdropGiftRecord": "贈送記錄",
+ "aiStrategyDesc": "AI 機器人進行大數據分析並智能推薦合約交易訂單，幫助交易者做出更明智的交易決策，從而帶來更智能、更盈利的交易。",
}
diff --git a/src/i18n/en.js b/src/i18n/en.js
index 383ed16..6f4b606 100644
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -25,8 +25,9 @@
readAgree: "I have read and agree",
serviceConf: "Terms of Service",
hasAccount: "Already have an account?",
- goLogin: "To log in",
+ goLogin: "Log in",
goRegister: "To register",
+ downloadAPP: "Download APP",
selectArea: "Select area code",
vertifyPass: "Verification passed",
vertifuFail: "Verification failed, please try again",
@@ -55,8 +56,11 @@
verifyPhoneTips: "Please enter your mobile numberPlease enter your mobile number{account}The 6-digit verification code received is valid for 30 minutes",
verifyGoogleTips: "Please enter your 6-digit verification code in Google Authenticator",
forgetPassword: "Forgot password?",
- login: "Login",
- noAccount: "No account yet",
+ login: "Log In",
+ noAccount: "Don't have an account",
+ "Welcome Back": "Welcome Back",
+ "Sign up": "Sign up",
+ "Remember me": "Remember me",
bindSuccess: "Bind successfully",
setFundPassword: "Set fund password",
funpasswordTips: "Fund password (6 digits)",
@@ -170,6 +174,13 @@
success: "Success",
fail: "Fail",
recharge: "Deposit",
+ Deposit: "Deposit",
+ search: "Search",
+ "Popular coins": "Popular coins",
+ "List of coins": "List of coins",
+ "Deposit network": "Deposit network",
+ "Choice Network": "Choice Network",
+ "Tip: choose a network consistent with the withdraw platform to top up, otherwise you will lose this funds": "Tip: choose a network consistent with the withdraw platform to top up, otherwise you will lose this funds",
withdraw: "Withdraw",
foreignCurrency: "Bank card",
digitalCurrency: "DigitalCurrency",
@@ -1707,6 +1718,7 @@
"链名称": "Chain name",
"保存二维码": "Save QR code",
"复制地址": "Copy address",
+ "Deposit address": "Deposit address",
"重要提示": "IMPORTANT",
"数量大于0": "Amount greater than 0",
"请输入数字": "Please enter numerical value",
@@ -1876,6 +1888,7 @@
"合约 ": "Contract ",
"U本位永续": "DerIvatives",
"可提现": "Withdrawable",
+ "忘记资金密码?": "Forgot payment password?",
"活动奖励未到账": "Bonus yet to credit",
// "-----------------------------server txt------------------------------------",
"充值数量输入错误，请输入浮点数": "The recharge amount is entered incorrectly, please enter a floating point number",
@@ -1972,6 +1985,7 @@
"角色不存在": "No character.",
"持有币种不足": "Insufficient holding Crypto types.",
"提交失败，当前有未处理订单": "Submission Failed. There are currently open orders.",
+ "充值链": "Deposit network",
"充值链错误": "Charging link error.",
"充值价值不得小于最小限额": "The recharge amount must be greater than or equal to the minimum limit.",
"充值价值不得大于最大限额": "The recharge amount must be less than or equal to the maximum limit.",
@@ -2010,6 +2024,10 @@
"平仓金额不得小于平仓最小限额": "Liquidation amount must not be less than Min. liquidation limit.",
"平仓金额不得大于平仓最大限额": "Liquidation amount must not be less than Max. liquidation limit.",
"请输入数量": "Please enter quantity",
+ "from user wallet": "from user wallet",
+ "to futures wallet": "to futures wallet",
+ "to user wallet": "to user wallet",
+ "balance": "balance",
"开仓成功": "Position Opened",
"平仓成功": "Position Closed",
"充值数量必填": "Deposit amount required.",
@@ -2822,4 +2840,106 @@
Please ensure that your computer and browser are secure to prevent information tampering or leakage.
If you have any questions, please contact our online customer service.`,
"DXCN白皮书":'DXCN White Paper',
+ "Long": "Long",
+ "Short": "Short",
+ "Entry Price": "Entry Price",
+ "PnL(USDT)": "PnL(USDT)",
+ "Size": "Size",
+ "Margin Ratio": "Margin Ratio",
+ "Mark Price": "Mark Price",
+ "Liq. Price": "Liq. Price",
+ "TP/SL": "TP/SL",
+ "Referral Code": "Referral Code",
+ "Futures asset balance": "Futures asset balance",
+ "Quick addition": "Quick addition",
+ "请选择仓位": "Please select a position",
+ "请输入有效追加金额": "Please enter a valid amount to add",
+ "复制链接": "Copy Link",
+ "保存图片": "Save Image",
+ "保存成功": "Saved successfully",
+ "保存失败": "Save failed",
+ "Take Profit": "Take Profit",
+ "Stop Loss": "Stop Loss",
+ "请输入止盈或止损价格": "Please enter take profit or stop loss price",
+ "来自用户钱包": "From User Wallet",
+ "期货钱包": "Futures Wallet",
+ "Bonus": "Bonus",
+ "客服": "Service",
+ "Primary": "Primary",
+ "Senior": "Senior",
+ "kycPrimaryDesc": "Increase the withdraw limit to 80BTC within 24 hours",
+ "kycSeniorDesc": "Increase the withdraw limit to 200BTC within 24 hours",
+ "kycCompletePrimaryFirst": "Please complete the primary task first",
+ "underReview": "Under Review",
+ "documentType": "document type",
+ "lastName": "last name",
+ "firstName": "first name",
+ "idNumber": "ID number",
+ "birth": "birth",
+ "pleaseSelectDocumentType": "Please select document type",
+ "pleaseEnterLastName": "Please enter last name",
+ "pleaseEnterFirstName": "Please enter first name",
+ "pleaseEnterIdNumber": "Please enter ID number",
+ "pleaseSelectBirth": "Please select birth",
+ "kycLotteryBroadcast": "KYC Lottery Broadcast!",
+ "kycLotterySubtitle": "Instantly monetize transactions and easily earn cash!",
+ "favorites": "Favorites",
+ "markets": "Markets",
+ "trend": "Trend",
+ "follow": "Follow",
+ "news": "News",
+ "ipo": "IPO",
+ "trendSubtitle": "24-hour highest trading change",
+ "networkTimeout": "Network timeout",
+ "apiNotFound": "API not found",
+ "httpMismatch": "HTTP protocol mismatch, please confirm",
+ "invalidVerifyCode": "Invalid verification code",
+ "serviceError": "Service error",
+ "notOpenYet": "Not available yet",
+ "推荐码": "Referral Code",
+ "订金": "Deposit",
+ "提取": "Withdraw",
+ "人工智能交易": "AI Trading",
+ "贸易竞争": "Trade Competition",
+ "空投": "Airdrop",
+ "加密货币交易": "Crypto Trading",
+ "申请成为交易员": "Apply as Trader",
+ "不适用": "N/A",
+ "期货订单": "Futures Orders",
+ "现货订单": "Spot Orders",
+ "当日成交": "Daily Deal",
+ "当日成交汇总": "Daily Deal Summary",
+ "请向卖家付款": "Please pay the seller",
+ "订单将在": "Order will be cancelled in",
+ "后取消": " to cancel",
+ "联系卖家": "Contact seller",
+ "银行卡": "Bank card",
+ "姓名": "Name",
+ "银行卡号": "Bank card number",
+ "请点击右上角按钮联系商家索取": "Contact merchant for details",
+ "银行名称": "Bank name",
+ "请仔细阅读下方交易条款": "Please read the terms below",
+ "开户支行": "Branch",
+ "请按照下方交易条款提供相关资料": "Provide details as per terms below",
+ "离开APP,登录您与APP上的验证姓名相匹配的银行账户或其他支付方式，转到卖家的以下账户。": "Leave the APP, log in to your bank account matching the verified name and transfer to the seller's account below.",
+ "付款后，返回 XX APP，务必点击下方按钮“我已付款”通知卖家。": "After payment, return to the APP and click \"I have paid\" to notify the seller.",
+ "遇到问题？": "Having issues?",
+ "我已付款，通知卖家": "I have paid, notify seller",
+ "My assets": "My assets",
+ "Asset list": "Asset list",
+ "Usable": "Usable",
+ "Locked": "Locked",
+ "BTC Price": "BTC Price",
+ "ETH Price": "ETH Price",
+ "展示更多": "Show more",
+ "资金明细": "Fund Details",
+ "airdropOfficialEcology": "WHALE Official Ecology",
+ "airdropActivityInProgress": "Air drop activity in progress",
+ "airdropPlatformDesc": "Token Launch Platform for Innovative & Advanced Projects",
+ "airdropParticipateTip": "Participate with one click and receive free airdrops",
+ "airdropAccumulated": "Accumulated airdrop $111,587,379",
+ "airdropInProgress": "In Progress",
+ "airdropMostPotential": "The most potential and valuab...",
+ "airdropGiftRecord": "Gift Record",
+ "aiStrategyDesc": "AI robots perform big data analysis and intelligently recommend contract trading orders to help traders make smarter trading decisions, thereby leading to smarter and more profitable transactions.",
}
\ No newline at end of file
diff --git a/src/i18n/fa.js b/src/i18n/fa.js
index fd854d4..977401a 100644
--- a/src/i18n/fa.js
+++ b/src/i18n/fa.js
@@ -2765,4 +2765,59 @@
Veuillez vous assurer que votre ordinateur et votre navigateur sont sécurisés afin d’éviter toute altération ou fuite d’informations.
Pour toute question, veuillez contacter notre service client en ligne.`,
"DXCN白皮书":'Livre blanc du DXCN',
+ "documentType": "Type de document",
+ "lastName": "Nom de famille",
+ "firstName": "Prénom",
+ "idNumber": "Numéro de document",
+ "birth": "Date de naissance",
+ "pleaseSelectDocumentType": "Veuillez sélectionner le type de document",
+ "pleaseEnterLastName": "Veuillez entrer le nom de famille",
+ "pleaseEnterFirstName": "Veuillez entrer le prénom",
+ "pleaseEnterIdNumber": "Veuillez entrer le numéro de document",
+ "pleaseSelectBirth": "Veuillez sélectionner la date de naissance",
+ "Primary": "Primaire",
+ "Senior": "Supérieur",
+ "kycPrimaryDesc": "Augmentez la limite de retrait à 80 BTC sous 24 heures",
+ "kycSeniorDesc": "Augmentez la limite de retrait à 200 BTC sous 24 heures",
+ "kycCompletePrimaryFirst": "Veuillez d'abord terminer la vérification primaire",
+ "underReview": "En cours d'examen",
+ "kycLotteryBroadcast": "Diffusion loterie KYC !",
+ "kycLotterySubtitle": "Monétisez les transactions et gagnez facilement de l'argent !",
+ "favorites": "Favoris",
+ "markets": "Marchés",
+ "trend": "Tendance",
+ "follow": "Suivre",
+ "news": "Actualités",
+ "ipo": "IPO",
+ "trendSubtitle": "Plus forte variation de trading sur 24 heures",
+ "networkTimeout": "Délai réseau dépassé",
+ "apiNotFound": "API introuvable",
+ "httpMismatch": "Protocole HTTP incompatible, veuillez confirmer",
+ "invalidVerifyCode": "Code de vérification invalide",
+ "serviceError": "Erreur du serveur",
+ "Size": "Taille",
+ "Margin Ratio": "Ratio de marge",
+ "Mark Price": "Prix du marché",
+ "Liq. Price": "Prix liq.",
+ "TP/SL": "TP/SL",
+ "来自用户钱包": "Depuis le portefeuille utilisateur",
+ "期货钱包": "Portefeuille futures",
+ "Bonus": "Spot",
+ "My assets": "Mes actifs",
+ "Asset list": "Liste des actifs",
+ "Usable": "Disponible",
+ "Locked": "Verrouillé",
+ "BTC Price": "Prix BTC",
+ "ETH Price": "Prix ETH",
+ "展示更多": "Afficher plus",
+ "资金明细": "Détail des fonds",
+ "airdropOfficialEcology": "Écosystème officiel WHALE",
+ "airdropActivityInProgress": "Activité airdrop en cours",
+ "airdropPlatformDesc": "Plateforme de lancement de jetons pour des projets innovants et avancés",
+ "airdropParticipateTip": "Participez en un clic et recevez des airdrops gratuits",
+ "airdropAccumulated": "Airdrop cumulé 111 587 379 $",
+ "airdropInProgress": "En cours",
+ "airdropMostPotential": "Le plus potentiel et précieux...",
+ "airdropGiftRecord": "Historique des cadeaux",
+ "aiStrategyDesc": "Les robots IA effectuent une analyse de mégadonnées et recommandent intelligemment des ordres de trading de contrats pour aider les traders à prendre des décisions plus intelligentes et plus rentables.",
}
\ No newline at end of file
diff --git a/src/i18n/korean.js b/src/i18n/korean.js
index e6b683b..61222c7 100644
--- a/src/i18n/korean.js
+++ b/src/i18n/korean.js
@@ -2862,4 +2862,59 @@
정보 변조 또는 유출을 방지하기 위해 컴퓨터와 브라우저의 보안을 확인하십시오.
문의 사항이 있으시면 온라인 고객 서비스로 문의해 주십시오.`,
"DXCN白皮书":'DXCN 백서',
+ "documentType": "서류 유형",
+ "lastName": "성",
+ "firstName": "이름",
+ "idNumber": "신분증 번호",
+ "birth": "생년월일",
+ "pleaseSelectDocumentType": "서류 유형을 선택하세요",
+ "pleaseEnterLastName": "성을 입력하세요",
+ "pleaseEnterFirstName": "이름을 입력하세요",
+ "pleaseEnterIdNumber": "신분증 번호를 입력하세요",
+ "pleaseSelectBirth": "생년월일을 선택하세요",
+ "Primary": "초급",
+ "Senior": "고급",
+ "kycPrimaryDesc": "24시간 내 출금 한도를 80BTC로 인상",
+ "kycSeniorDesc": "24시간 내 출금 한도를 200BTC로 인상",
+ "kycCompletePrimaryFirst": "먼저 초급 인증을 완료해 주세요",
+ "underReview": "검토 중",
+ "kycLotteryBroadcast": "KYC 추첨 방송!",
+ "kycLotterySubtitle": "거래를 즉시 현금화하고 쉽게 수익을 창출하세요!",
+ "favorites": "즐겨찾기",
+ "markets": "마켓",
+ "trend": "트렌드",
+ "follow": "팔로우",
+ "news": "뉴스",
+ "ipo": "IPO",
+ "trendSubtitle": "24시간 최고 거래 변동",
+ "networkTimeout": "네트워크 시간 초과",
+ "apiNotFound": "API를 찾을 수 없습니다",
+ "httpMismatch": "HTTP 프로토콜이 일치하지 않습니다. 확인해 주세요",
+ "invalidVerifyCode": "인증 코드가 올바르지 않습니다",
+ "serviceError": "서버 오류",
+ "Size": "수량",
+ "Margin Ratio": "증거금률",
+ "Mark Price": "마킹 가격",
+ "Liq. Price": "청산 가격",
+ "TP/SL": "TP/SL",
+ "来自用户钱包": "사용자 지갑에서",
+ "期货钱包": "선물 지갑",
+ "Bonus": "현물",
+ "My assets": "내 자산",
+ "Asset list": "자산 목록",
+ "Usable": "사용 가능",
+ "Locked": "잠금",
+ "BTC Price": "BTC 가격",
+ "ETH Price": "ETH 가격",
+ "展示更多": "더 보기",
+ "资金明细": "자금 명세",
+ "airdropOfficialEcology": "WHALE 공식 생태",
+ "airdropActivityInProgress": "에어드롭 활동 진행 중",
+ "airdropPlatformDesc": "혁신적이고 선진적인 프로젝트를 위한 토큰 런칭 플랫폼",
+ "airdropParticipateTip": "원클릭 참여, 무료 에어드롭 수령",
+ "airdropAccumulated": "누적 에어드롭 $111,587,379",
+ "airdropInProgress": "진행 중",
+ "airdropMostPotential": "가장 잠재력 있고 가치 있는...",
+ "airdropGiftRecord": "선물 기록",
+ "aiStrategyDesc": "AI 로봇이 빅데이터 분석을 수행하고 계약 거래 주문을 지능적으로 추천하여 거래자가 더 스마트한 거래 결정을 내리고 더 수익성 있는 거래를 할 수 있도록 합니다.",
}
\ No newline at end of file
diff --git a/src/i18n/th.js b/src/i18n/th.js
index 989d850..855e876 100644
--- a/src/i18n/th.js
+++ b/src/i18n/th.js
@@ -2832,4 +2832,59 @@
โปรดตรวจสอบให้แน่ใจว่าคอมพิวเตอร์และเบราว์เซอร์ของคุณปลอดภัยเพื่อป้องกันการปลอมแปลงหรือการรั่วไหลของข้อมูล
หากมีข้อสงสัย โปรดติดต่อฝ่ายบริการลูกค้าออนไลน์ของเรา`,
"DXCN白皮书":'เอกสารไวท์เปเปอร์ของ DXCN',
+ "documentType": "ประเภทเอกสาร",
+ "lastName": "นามสกุล",
+ "firstName": "ชื่อ",
+ "idNumber": "เลขที่เอกสาร",
+ "birth": "วันเกิด",
+ "pleaseSelectDocumentType": "กรุณาเลือกประเภทเอกสาร",
+ "pleaseEnterLastName": "กรุณากรอกนามสกุล",
+ "pleaseEnterFirstName": "กรุณากรอกชื่อ",
+ "pleaseEnterIdNumber": "กรุณากรอกเลขที่เอกสาร",
+ "pleaseSelectBirth": "กรุณาเลือกวันเกิด",
+ "Primary": "ขั้นต้น",
+ "Senior": "ขั้นสูง",
+ "kycPrimaryDesc": "เพิ่มวงเงินถอนเป็น 80 BTC ภายใน 24 ชั่วโมง",
+ "kycSeniorDesc": "เพิ่มวงเงินถอนเป็น 200 BTC ภายใน 24 ชั่วโมง",
+ "kycCompletePrimaryFirst": "กรุณาทำการยืนยันขั้นต้นให้เสร็จก่อน",
+ "underReview": "กำลังตรวจสอบ",
+ "kycLotteryBroadcast": "KYC Lottery Broadcast!",
+ "kycLotterySubtitle": "Instantly monetize transactions and easily earn cash!",
+ "favorites": "รายการโปรด",
+ "markets": "ตลาด",
+ "trend": "เทรนด์",
+ "follow": "ติดตาม",
+ "news": "ข่าว",
+ "ipo": "IPO",
+ "trendSubtitle": "24-hour highest trading change",
+ "networkTimeout": "หมดเวลาการเชื่อมต่อเครือข่าย",
+ "apiNotFound": "ไม่พบ API",
+ "httpMismatch": "โปรโตคอล HTTP ไม่ตรงกัน",
+ "invalidVerifyCode": "รหัสยืนยันไม่ถูกต้อง",
+ "serviceError": "ข้อผิดพลาดของเซิร์ฟเวอร์",
+ "Size": "ขนาด",
+ "Margin Ratio": "อัตรามาร์จิ้น",
+ "Mark Price": "ราคามาร์ก",
+ "Liq. Price": "ราคาล้าง",
+ "TP/SL": "TP/SL",
+ "来自用户钱包": "จากกระเป๋าเงินผู้ใช้",
+ "期货钱包": "กระเป๋าเงินฟิวเจอร์ส",
+ "Bonus": "สปอต",
+ "My assets": "ทรัพย์สินของฉัน",
+ "Asset list": "รายการสินทรัพย์",
+ "Usable": "ใช้ได้",
+ "Locked": "ล็อค",
+ "BTC Price": "ราคา BTC",
+ "ETH Price": "ราคา ETH",
+ "展示更多": "แสดงเพิ่มเติม",
+ "资金明细": "รายละเอียดกองทุน",
+ "airdropOfficialEcology": "ระบบนิเวศอย่างเป็นทางการ WHALE",
+ "airdropActivityInProgress": "กิจกรรมแอร์ดรอปกำลังดำเนินการ",
+ "airdropPlatformDesc": "แพลตฟอร์มเปิดตัวโทเค็นสำหรับโครงการที่เป็นนวัตกรรมและก้าวหน้า",
+ "airdropParticipateTip": "เข้าร่วมด้วยคลิกเดียวและรับแอร์ดรอปฟรี",
+ "airdropAccumulated": "แอร์ดรอปสะสม $111,587,379",
+ "airdropInProgress": "กำลังดำเนินการ",
+ "airdropMostPotential": "ที่มีศักยภาพและมีค่าที่สุด...",
+ "airdropGiftRecord": "บันทึกของขวัญ",
+ "aiStrategyDesc": "หุ่นยนต์ AI ทำการวิเคราะห์ข้อมูลขนาดใหญ่และแนะนำคำสั่งซื้อขายสัญญาอย่างชาญฉลาด เพื่อช่วยผู้ค้าตัดสินใจซื้อขายอย่างชาญฉลาดและทำธุรกรรมที่มีกำไรมากขึ้น",
}
\ No newline at end of file
diff --git a/src/i18n/vi.js b/src/i18n/vi.js
index c39e1a4..ebd3662 100644
--- a/src/i18n/vi.js
+++ b/src/i18n/vi.js
@@ -2812,4 +2812,59 @@
Vui lòng đảm bảo máy tính và trình duyệt của bạn được bảo mật để ngăn chặn việc giả mạo hoặc rò rỉ thông tin.
Nếu bạn có bất kỳ câu hỏi nào, vui lòng liên hệ với bộ phận chăm sóc khách hàng trực tuyến của chúng tôi.`,
"DXCN白皮书":'Sách trắng DXCN',
+ "documentType": "Loại giấy tờ",
+ "lastName": "Họ",
+ "firstName": "Tên",
+ "idNumber": "Số giấy tờ",
+ "birth": "Ngày sinh",
+ "pleaseSelectDocumentType": "Vui lòng chọn loại giấy tờ",
+ "pleaseEnterLastName": "Vui lòng nhập họ",
+ "pleaseEnterFirstName": "Vui lòng nhập tên",
+ "pleaseEnterIdNumber": "Vui lòng nhập số giấy tờ",
+ "pleaseSelectBirth": "Vui lòng chọn ngày sinh",
+ "Primary": "Sơ cấp",
+ "Senior": "Cao cấp",
+ "kycPrimaryDesc": "Tăng hạn mức rút tiền lên 80 BTC trong 24 giờ",
+ "kycSeniorDesc": "Tăng hạn mức rút tiền lên 200 BTC trong 24 giờ",
+ "kycCompletePrimaryFirst": "Vui lòng hoàn thành xác minh sơ cấp trước",
+ "underReview": "Đang xem xét",
+ "kycLotteryBroadcast": "Phát sóng xổ số KYC!",
+ "kycLotterySubtitle": "Kiếm tiền từ giao dịch ngay lập tức và dễ dàng!",
+ "favorites": "Yêu thích",
+ "markets": "Thị trường",
+ "trend": "Xu hướng",
+ "follow": "Theo dõi",
+ "news": "Tin tức",
+ "ipo": "IPO",
+ "trendSubtitle": "Biến động giao dịch cao nhất 24 giờ",
+ "networkTimeout": "Hết thời gian mạng",
+ "apiNotFound": "Không tìm thấy API",
+ "httpMismatch": "Giao thức HTTP không khớp, vui lòng xác nhận",
+ "invalidVerifyCode": "Mã xác minh không hợp lệ",
+ "serviceError": "Lỗi máy chủ",
+ "Size": "Khối lượng",
+ "Margin Ratio": "Tỷ lệ ký quỹ",
+ "Mark Price": "Giá đánh dấu",
+ "Liq. Price": "Giá thanh lý",
+ "TP/SL": "TP/SL",
+ "来自用户钱包": "Từ ví người dùng",
+ "期货钱包": "Ví tương lai",
+ "Bonus": "Giao ngay",
+ "My assets": "Tài sản của tôi",
+ "Asset list": "Danh sách tài sản",
+ "Usable": "Có thể dùng",
+ "Locked": "Khóa",
+ "BTC Price": "Giá BTC",
+ "ETH Price": "Giá ETH",
+ "展示更多": "Hiển thị thêm",
+ "资金明细": "Chi tiết quỹ",
+ "airdropOfficialEcology": "Hệ sinh thái chính thức WHALE",
+ "airdropActivityInProgress": "Hoạt động airdrop đang diễn ra",
+ "airdropPlatformDesc": "Nền tảng phát hành token cho các dự án đổi mới và tiên tiến",
+ "airdropParticipateTip": "Tham gia một cú nhấp chuột và nhận airdrop miễn phí",
+ "airdropAccumulated": "Tổng airdrop $111,587,379",
+ "airdropInProgress": "Đang tiến hành",
+ "airdropMostPotential": "Tiềm năng và giá trị nhất...",
+ "airdropGiftRecord": "Lịch sử quà tặng",
+ "aiStrategyDesc": "Robot AI thực hiện phân tích dữ liệu lớn và thông minh đề xuất lệnh giao dịch hợp đồng để giúp nhà giao dịch đưa ra quyết định thông minh hơn và giao dịch sinh lời hơn.",
}
\ No newline at end of file
diff --git a/src/i18n/zhcn.js b/src/i18n/zhcn.js
index 3a99e7e..0f3d428 100644
--- a/src/i18n/zhcn.js
+++ b/src/i18n/zhcn.js
@@ -27,6 +27,7 @@
hasAccount: "已有账号?",
goLogin: "去登录",
goRegister: "去注册",
+ downloadAPP: "下载APP",
selectArea: "选择区域码",
vertifyPass: "验证通过",
vertifuFail: "验证失败,请重试",
@@ -57,6 +58,9 @@
forgetPassword: "忘记密码?",
login: "登录",
noAccount: "还没有账号",
+ "Welcome Back": "欢迎回来",
+ "Sign up": "注册",
+ "Remember me": "记住我",
bindSuccess: "绑定成功",
setFundPassword: "设置资金密码",
funpasswordTips: "资金密码(6位数字)",
@@ -170,6 +174,13 @@
success: "成功",
fail: "失败",
recharge: "充值",
+ Deposit: "充值",
+ search: "搜索",
+ "Popular coins": "热门币种",
+ "List of coins": "币种列表",
+ "Deposit network": "充值网络",
+ "Choice Network": "选择网络",
+ "Tip: choose a network consistent with the withdraw platform to top up, otherwise you will lose this funds": "提示：请选择与提币平台一致的网络进行充值，否则将导致资产丢失",
withdraw: "提现",
foreignCurrency: "银行卡",
digitalCurrency: "数字货币",
@@ -1715,6 +1726,7 @@
"链名称": "链名称",
"保存二维码": "保存二维码",
"复制地址": "复制地址",
+ "Deposit address": "充值地址",
"重要提示": "重要提示",
"数量大于0": "数量大于0",
"请输入数字": "请输入数字",
@@ -1784,6 +1796,10 @@
"返回首页": "返回首页",
"查看历史": "查看历史",
"闪兑": "闪兑",
+ "from user wallet": "从用户钱包",
+ "to futures wallet": "至期货钱包",
+ "to user wallet": "至用户钱包",
+ "balance": "余额",
"询价": "询价",
"持有币不足": "持有币不足",
"中输入的内容": "中输入的内容",
@@ -1852,6 +1868,7 @@
"质押": "质押",
"U本位永续": "U本位永续",
"可提现": "可提现",
+ "忘记资金密码?": "忘记资金密码?",
"活动奖励未到账": "活动奖励未到账",
// "-----------------------------server txt------------------------------------"
"充值数量输入错误，请输入浮点数": "充值数量输入错误，请输入浮点数",
@@ -1950,6 +1967,7 @@
"角色不存在": "角色不存在",
"持有币种不足": "持有币种不足",
"提交失败，当前有未处理订单": "提交失败，当前有未处理订单",
+ "充值链": "充值链",
"充值链错误": "充值链错误",
"充值价值不得小于最小限额": "充值价值不得小于最小限额",
"充值价值不得大于最大限额": "充值价值不得大于最大限额",
@@ -2827,4 +2845,106 @@
请务必确认电脑及浏览器安全，防止信息被篡改或泄漏。
有任何问题可联系在线客服服务。`,
"DXCN白皮书":'DXCN白皮书',
+ "Long": "多",
+ "Short": "空",
+ "Entry Price": "入场价格",
+ "PnL(USDT)": "盈亏(USDT)",
+ "Size": "数量",
+ "Margin Ratio": "保证金率",
+ "Mark Price": "标记价格",
+ "Liq. Price": "强平价格",
+ "TP/SL": "止盈/止损",
+ "Referral Code": "推荐码",
+ "Futures asset balance": "合约资产余额",
+ "Quick addition": "快速追加",
+ "请选择仓位": "请选择仓位",
+ "请输入有效追加金额": "请输入有效追加金额",
+ "复制链接": "复制链接",
+ "保存图片": "保存图片",
+ "保存成功": "保存成功",
+ "保存失败": "保存失败",
+ "Take Profit": "止盈",
+ "Stop Loss": "止损",
+ "请输入止盈或止损价格": "请输入止盈或止损价格",
+ "来自用户钱包": "来自用户钱包",
+ "期货钱包": "期货钱包",
+ "Bonus": "现货",
+ "客服": "客服",
+ "Primary": "初级",
+ "Senior": "高级",
+ "kycPrimaryDesc": "24小时内提现限额提升至80BTC",
+ "kycSeniorDesc": "24小时内提现限额提升至200BTC",
+ "kycCompletePrimaryFirst": "请先完成初级认证",
+ "underReview": "审核中",
+ "documentType": "证件类型",
+ "lastName": "姓",
+ "firstName": "名",
+ "idNumber": "证件号码",
+ "birth": "生日",
+ "pleaseSelectDocumentType": "请选择证件类型",
+ "pleaseEnterLastName": "请输入姓",
+ "pleaseEnterFirstName": "请输入名",
+ "pleaseEnterIdNumber": "请输入证件号码",
+ "pleaseSelectBirth": "请选择生日",
+ "kycLotteryBroadcast": "KYC抽奖广播！",
+ "kycLotterySubtitle": "即时变现交易，轻松赚取现金！",
+ "favorites": "收藏",
+ "markets": "市场",
+ "trend": "趋势",
+ "follow": "关注",
+ "news": "资讯",
+ "ipo": "IPO",
+ "trendSubtitle": "24小时最高交易涨跌幅",
+ "networkTimeout": "网络超时",
+ "apiNotFound": "接口未找到",
+ "httpMismatch": "HTTP协议不匹配，请确认",
+ "invalidVerifyCode": "验证码不合法",
+ "serviceError": "服务错误",
+ "notOpenYet": "暂未开放",
+ "推荐码": "推荐码",
+ "订金": "订金",
+ "提取": "提取",
+ "人工智能交易": "人工智能交易",
+ "贸易竞争": "贸易竞争",
+ "空投": "空投",
+ "加密货币交易": "加密货币交易",
+ "申请成为交易员": "申请成为交易员",
+ "不适用": "不适用",
+ "期货订单": "期货订单",
+ "现货订单": "现货订单",
+ "当日成交": "当日成交",
+ "当日成交汇总": "当日成交汇总",
+ "请向卖家付款": "请向卖家付款",
+ "订单将在": "订单将在",
+ "后取消": "后取消",
+ "联系卖家": "联系卖家",
+ "银行卡": "银行卡",
+ "姓名": "姓名",
+ "银行卡号": "银行卡号",
+ "请点击右上角按钮联系商家索取": "请点击右上角按钮联系商家索取",
+ "银行名称": "银行名称",
+ "请仔细阅读下方交易条款": "请仔细阅读下方交易条款",
+ "开户支行": "开户支行",
+ "请按照下方交易条款提供相关资料": "请按照下方交易条款提供相关资料",
+ "离开APP,登录您与APP上的验证姓名相匹配的银行账户或其他支付方式，转到卖家的以下账户。": "离开APP,登录您与APP上的验证姓名相匹配的银行账户或其他支付方式，转到卖家的以下账户。",
+ "付款后，返回 XX APP，务必点击下方按钮“我已付款”通知卖家。": "付款后，返回 XX APP，务必点击下方按钮“我已付款”通知卖家。",
+ "遇到问题？": "遇到问题？",
+ "我已付款，通知卖家": "我已付款，通知卖家",
+ "My assets": "我的资产",
+ "Asset list": "资产列表",
+ "Usable": "可用",
+ "Locked": "锁定",
+ "BTC Price": "BTC 价格",
+ "ETH Price": "ETH 价格",
+ "展示更多": "展示更多",
+ "资金明细": "资金明细",
+ "airdropOfficialEcology": "WHALE 官方生态",
+ "airdropActivityInProgress": "空投活动进行中",
+ "airdropPlatformDesc": "创新与先进项目的代币发行平台",
+ "airdropParticipateTip": "一键参与，领取免费空投",
+ "airdropAccumulated": "累计空投 $111,587,379",
+ "airdropInProgress": "进行中",
+ "airdropMostPotential": "最具潜力与价值...",
+ "airdropGiftRecord": "赠送记录",
+ "aiStrategyDesc": "AI 机器人进行大数据分析并智能推荐合约交易订单，帮助交易者做出更明智的交易决策，从而带来更智能、更盈利的交易。",
}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 063cd07..2f84512 100644
--- a/src/main.js
+++ b/src/main.js
@@ -17,8 +17,8 @@
import { getStorage } from '@/utils/utis'
pinia.use(piniaPluginPersistedstate)
-// 初始化主题为黑夜模式
-const theme = getStorage('theme') || 'dark'
+// 初始化主题：白色背景 + 黑灰字体（参考 BlueWhale）
+const theme = getStorage('theme') || 'light'
window.document.documentElement.setAttribute('data-theme', theme)
const app = createApp(App)
diff --git a/src/router/index.js b/src/router/index.js
index 7a7ef15..814337d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -662,7 +662,7 @@
path: 'trade/:symbol',
name: 'trade',
meta: {
- tarbar: false,
+ tarbar: true,
keepAlive: true
},
component: () => import('@/views/cryptos/Trade/index.vue')
@@ -1306,7 +1306,7 @@
children: [{
path: 'index',
meta: {
- tarbar: false,
+ tarbar: true,
},
component: () => import( /* webpackChunkName: "my" */ /* webpackPrefetch: true */
'@/views/my/index.vue')
@@ -1336,6 +1336,16 @@
component: () =>
import( /* webpackChunkName: "transfer" */ /* webpackPrefetch: true */
'@/views/my/transfer.vue')
+ },
+ {
+ path: 'aiDetail',
+ meta: { tarbar: false },
+ component: () => import( /* webpackChunkName: "myAiDetail" */ /* webpackPrefetch: true */ '@/views/my/aiDetail.vue')
+ },
+ {
+ path: 'airdrop',
+ meta: { tarbar: false },
+ component: () => import( /* webpackChunkName: "myAirdrop" */ /* webpackPrefetch: true */ '@/views/my/airdrop.vue')
}
]
},
diff --git a/src/service/news.api.js b/src/service/news.api.js
new file mode 100644
index 0000000..e090816
--- /dev/null
+++ b/src/service/news.api.js
@@ -0,0 +1,19 @@
+/**
+ * NewsAPI.org 头条新闻（直接请求 newsapi.org 完整地址）
+ */
+const NEWS_API_KEY = 'f39cfa8922534af295491f38f664ea3d'
+
+export function fetchNewsHeadlines(params = {}) {
+ const country = params.country || 'us'
+ const category = params.category || 'business'
+ const url = `https://newsapi.org/v2/top-headlines?country=${country}&category=${category}&apiKey=${NEWS_API_KEY}`
+ return fetch(url)
+ .then((res) => res.json())
+ .then((data) => {
+ if (data.status === 'ok' && Array.isArray(data.articles)) {
+ return data.articles
+ }
+ return []
+ })
+ .catch(() => [])
+}
diff --git a/src/service/request.js b/src/service/request.js
index d7bf2ea..77bb6c4 100644
--- a/src/service/request.js
+++ b/src/service/request.js
@@ -101,13 +101,13 @@
logout()
break
case 404:
- showToast({ message: '接口未找到', type: 'fail', duration: 2000 })
+ showToast({ message: i18n.global.t('apiNotFound'), type: 'fail', duration: 2000 })
break
case 415:
- showToast({ message: 'HTTP协议不匹配，请确认', type: 'fail', duration: 2000 })
+ showToast({ message: i18n.global.t('httpMismatch'), type: 'fail', duration: 2000 })
break
case 428:
- showToast({ message: '验证码不合法', type: 'fail', duration: 2000 })
+ showToast({ message: i18n.global.t('invalidVerifyCode'), type: 'fail', duration: 2000 })
break
// case 500:
// showToast({ message: '服务未启动', type: 'fail', duration: 2000 })
@@ -118,11 +118,11 @@
default:
// console.log(error)
if (error.config.url != '/api/api/hobi!getRealtime.action') {
- showToast({ message: i18n.global.t(error.message) || '服务错误', type: 'fail', duration: 2000 })
+ showToast({ message: i18n.global.t(error.message) || i18n.global.t('serviceError'), type: 'fail', duration: 2000 })
}
}
} else {
- showToast({ message: i18n.global.t(error.message) || '服务错误', type: 'fail', duration: 2000 })
+ showToast({ message: i18n.global.t(error.message) || i18n.global.t('serviceError'), type: 'fail', duration: 2000 })
}
return Promise.reject(error)
diff --git a/src/service/trade.api.js b/src/service/trade.api.js
index e2c888c..3c6278a 100644
--- a/src/service/trade.api.js
+++ b/src/service/trade.api.js
@@ -185,6 +185,43 @@
})
}
+/**
+ * 追加保证金
+ * @param {Object} params
+ * @param {string} params.orderNo 订单号
+ * @param {string|number} params.addDepositOpen 追加保证金金额
+ */
+export const _addDepositOpen = (params) => {
+ return request({
+ url: `${API_PREFIX}/contractOrder!addDepositOpen.action`,
+ method: METHODS.GET,
+ loading: true,
+ params: {
+ orderNo: params.orderNo,
+ addDepositOpen: params.addDepositOpen
+ }
+ });
+};
+
+/**
+ * 设置止盈止损
+ * @param {Object} params
+ * @param {string} params.orderNo 订单号
+ * @param {string|number} params.stopPriceProfit 止盈触发价格
+ * @param {string|number} params.stopPriceLoss 止损触发价格
+ */
+export const _setStopPrice = (params) => {
+ return request({
+ url: `${API_PREFIX}/contractOrder!setStopPrice.action`,
+ method: METHODS.GET,
+ loading: true,
+ params: {
+ orderNo: params.orderNo,
+ stopPriceProfit: params.stopPriceProfit,
+ stopPriceLoss: params.stopPriceLoss
+ }
+ });
+};
export const _exchangeratelist = (params) => {
return request({
diff --git a/src/service/user.api.js b/src/service/user.api.js
index cb52a64..ae97f51 100644
--- a/src/service/user.api.js
+++ b/src/service/user.api.js
@@ -211,12 +211,13 @@
duration: 0,
params: {
nationality: data.countryName, // 国籍
- idName: data.idname || 'id/passpost', // 证件名称
+ idName: data.idname || 'id/passport', // 证件类型
idNumber: data.idnumber, // 证件号码
- name: data.name, // 姓名
+ name: data.name, // 姓 last name
+ firstName: data.firstName, // 名
+ birth: data.birth, // 生日
idFrontImg: data.frontFile.length && data.frontFile[0].resURL || '',
idBackImg: data.reverseFile.length && data.reverseFile[0].resURL || '',
- // handheldPhoto: data.fileList.length && data.fileList[0].resURL || ''
}
})
}
@@ -278,6 +279,25 @@
data: params,
})
};
+
+// 首页新闻 Tab：美国头条，返回 articles 数组（兼容多种后端返回结构）
+export const _getUsHeadNews = () => {
+ return request({
+ url: `${API_PREFIX}/news!getUsHeadNews.action`,
+ method: METHODS.GET,
+ returnType: 'origin', // 拿原始 res.data，避免拦截器只返回 data 导致取不到 articles
+ }).then((res) => {
+ if (!res) return [];
+ // 标准包装：{ code: 0, data: { articles } } 或 data 为数组
+ const raw = res.data != null ? res.data : res;
+ if (Array.isArray(raw)) return raw;
+ if (raw && Array.isArray(raw.articles)) return raw.articles;
+ if (raw && Array.isArray(raw.list)) return raw.list;
+ if (Array.isArray(res.articles)) return res.articles;
+ if (Array.isArray(res.list)) return res.list;
+ return [];
+ }).catch(() => []);
+};
//首页弹出新闻
export const _getPopupNews = (params) => {
return request({
diff --git a/src/views/C2C/c2c-order-list/Unread.vue b/src/views/C2C/c2c-order-list/Unread.vue
index 5d0ef3e..7ab1506 100644
--- a/src/views/C2C/c2c-order-list/Unread.vue
+++ b/src/views/C2C/c2c-order-list/Unread.vue
@@ -56,6 +56,6 @@
}
</script>
-<style scoped>
+<style lang="scss" scoped>
@import "@/assets/css/copy2.scss";
</style>
\ No newline at end of file
diff --git a/src/views/C2C/c2c-order-list/components/TradeSuccessDetail.vue b/src/views/C2C/c2c-order-list/components/TradeSuccessDetail.vue
index 9609209..001ca1f 100644
--- a/src/views/C2C/c2c-order-list/components/TradeSuccessDetail.vue
+++ b/src/views/C2C/c2c-order-list/components/TradeSuccessDetail.vue
@@ -92,7 +92,6 @@
import OrderData from "./OrderData.vue";
import Evaluation from "./Evaluation.vue";
import otcApi from "@/service/otc";
-import { customerServiceUrl } from "@/config";
export default {
name: "TradeSuccessDetail",
props: ['title', 'back'],
@@ -146,11 +145,7 @@
return str
},
tokefu() {
- if (customerServiceUrl()) {
- window.location.href = customerServiceUrl();
- } else {
- this.$router.push('/customerService')
- }
+ this.$router.push('/customerService');
}
}
}
diff --git a/src/views/C2C/c2c-trade/components/TradeSuccessDetail.vue b/src/views/C2C/c2c-trade/components/TradeSuccessDetail.vue
index d0e3472..c9436a9 100644
--- a/src/views/C2C/c2c-trade/components/TradeSuccessDetail.vue
+++ b/src/views/C2C/c2c-trade/components/TradeSuccessDetail.vue
@@ -92,7 +92,6 @@
import OrderData from "../../c2cOrder/components/order-data/OrderData.vue";
import Evaluation from "../../c2cOrder/payment/components/Evaluation.vue";
import otcApi from "@/service/otc";
-import { customerServiceUrl } from "@/config";
export default {
name: "TradeSuccessDetail",
props: ['title', 'back'],
@@ -146,11 +145,7 @@
return str
},
tokefu() {
- if (customerServiceUrl()) {
- window.location.href = customerServiceUrl();
- } else {
- this.$router.push('/customerService')
- }
+ this.$router.push('/customerService');
}
}
}
diff --git a/src/views/C2C/c2c-trade/page/SellGenerate.vue b/src/views/C2C/c2c-trade/page/SellGenerate.vue
index 9fcb477..8929e68 100644
--- a/src/views/C2C/c2c-trade/page/SellGenerate.vue
+++ b/src/views/C2C/c2c-trade/page/SellGenerate.vue
@@ -111,7 +111,6 @@
import otcApi from "@/service/otc";
import { formatTime } from "@/utils/utis";
-import { customerServiceUrl } from "@/config";
import { SET_ORDER_INFO } from "@/store/const.store";
export default {
@@ -216,11 +215,7 @@
return formatTime(new Date(time), 'yyyy-MM-dd hh:mm:ss')
},
tokefu() {
- if (customerServiceUrl()) {
- window.location.href = customerServiceUrl();
- } else {
- this.$router.push('/customerService')
- }
+ this.$router.push('/customerService');
}
},
watch: {
diff --git a/src/views/C2C/c2c-trade/page/TradeSuccessSell.vue b/src/views/C2C/c2c-trade/page/TradeSuccessSell.vue
index 2cc0b93..0c7a3df 100644
--- a/src/views/C2C/c2c-trade/page/TradeSuccessSell.vue
+++ b/src/views/C2C/c2c-trade/page/TradeSuccessSell.vue
@@ -47,7 +47,7 @@
}
</script>
-<style scoped>
+<style lang="scss" scoped>
@import "@/assets/css/copy2.scss";
</style>
\ No newline at end of file
diff --git a/src/views/C2C/c2cOrder/components/appeal/AppealWaiting.vue b/src/views/C2C/c2cOrder/components/appeal/AppealWaiting.vue
index 3b0f4f9..6fce531 100644
--- a/src/views/C2C/c2cOrder/components/appeal/AppealWaiting.vue
+++ b/src/views/C2C/c2cOrder/components/appeal/AppealWaiting.vue
@@ -22,7 +22,6 @@
<script>
import { Button } from "vant";
import OrderNav from "@/components/order-nav/OrderNav.vue";
-import { customerServiceUrl } from "@/config";
export default {
name: "AppealWaiting",
components: {
@@ -31,11 +30,7 @@
},
methods: {
tokefu() {
- if (customerServiceUrl()) {
- window.location.href = customerServiceUrl();
- } else {
- this.$router.push('/customerService')
- }
+ this.$router.push('/customerService');
},
hide() {
console.log(213)
diff --git a/src/views/C2C/c2cOrder/order-generation/orderGeneration.vue b/src/views/C2C/c2cOrder/order-generation/orderGeneration.vue
index 3d6ed94..9d8c40d 100644
--- a/src/views/C2C/c2cOrder/order-generation/orderGeneration.vue
+++ b/src/views/C2C/c2cOrder/order-generation/orderGeneration.vue
@@ -79,7 +79,6 @@
import OrderNav from "@/components/order-nav/OrderNav.vue";
import OrderData from "../components/order-data/OrderData.vue";
import otcApi from "@/service/otc";
-import { customerServiceUrl } from "@/config";
export default {
name: "orderGeneration",
@@ -120,11 +119,7 @@
this.$router.push({ path: '/chat' })
},
tokefu() {
- if (customerServiceUrl()) {
- window.location.href = customerServiceUrl();
- } else {
- this.$router.push('/customerService')
- }
+ this.$router.push('/customerService');
}
},
computed: {
diff --git a/src/views/C2C/c2cOrder/payment/components/Question.vue b/src/views/C2C/c2cOrder/payment/components/Question.vue
index 8038a0d..bde06b3 100644
--- a/src/views/C2C/c2cOrder/payment/components/Question.vue
+++ b/src/views/C2C/c2cOrder/payment/components/Question.vue
@@ -65,7 +65,7 @@
}
</script>
-<style scoped>
+<style lang="scss" scoped>
@import "@/assets/css/copy2.scss";
.c2cPay-page{
color: #333;
diff --git a/src/views/C2C/c2cOrder/payment/index.vue b/src/views/C2C/c2cOrder/payment/index.vue
index ee9582c..2b539cf 100644
--- a/src/views/C2C/c2cOrder/payment/index.vue
+++ b/src/views/C2C/c2cOrder/payment/index.vue
@@ -3,9 +3,9 @@
<order-nav/>
<div class="mt-10 text-center tabBackground text-black">
<div>
- <h1 class="font-700 font-40">请向卖家付款</h1>
+ <h1 class="font-700 font-40">{{ $t('请向卖家付款') }}</h1>
<div class="flex justify-center items-center mt-18 font-30 font-700">
- <span>订单将在</span>
+ <span>{{ $t('订单将在') }}</span>
<van-count-down class="flex font-700" :time="time">
<template #default="timeData">
<span class="block">{{ timeData.hours }}</span>
@@ -13,7 +13,7 @@
<span class="block">{{ timeData.minutes }}</span>
</template>
</van-count-down>
- <span>后取消</span>
+ <span>{{ $t('后取消') }}</span>
</div>
<div class="flex justify-center items-end mt-42 font-64 font-700">
<span class="relative bottom-5 font-48">￥</span>
@@ -22,7 +22,7 @@
</div>
<div class="flex justify-center items-center mt-44">
<img class="w-36 h-34 mr-22" src="@/assets/image/c2c/Vector.png" alt="">
- <span class=" font-32">联系卖家</span>
+ <span class=" font-32">{{ $t('联系卖家') }}</span>
</div>
</div>
@@ -36,14 +36,14 @@
class="circle absolute bottom-28 left-0 z-10 w-45 h-45 flex justify-center items-center bg-blue text-white font-26"
style="border-radius: 50%">2
</div>
- <div class="font-28">离开APP,登录您与APP上的验证姓名相匹配的银行账户或其他支付方式，转到卖家的以下账户。</div>
+ <div class="font-28">{{ $t('离开APP,登录您与APP上的验证姓名相匹配的银行账户或其他支付方式，转到卖家的以下账户。') }}</div>
<div class="mt-50 pt-32 px-22 pb-38 bg-white rounded-2xl msg-wrapper">
<div class="flex items-center">
<div class="w-6 h-28 rounded-xl mr-20" style="background: #E7BB41;"></div>
- <span class="ml-8 font-30 text-black">银行卡</span>
+ <span class="ml-8 font-30 text-black">{{ $t('银行卡') }}</span>
</div>
<van-cell-group>
- <van-cell class="order-number" title="姓名">
+ <van-cell class="order-number" :title="$t('姓名')">
<template #default>
<div class="flex justify-end">
<span class="mr-14">鸿运当头</span>
@@ -51,33 +51,33 @@
</div>
</template>
</van-cell>
- <van-cell class="order-number" title="银行卡号">
+ <van-cell class="order-number" :title="$t('银行卡号')">
<template #default>
<div class="flex justify-end">
- <span class="mr-14">请点击右上角按钮联系商家索取</span>
+ <span class="mr-14">{{ $t('请点击右上角按钮联系商家索取') }}</span>
<img class="relative top-8 w-25 h-29" src="@/assets/image/c2c/Group1168.png" alt="">
</div>
</template>
</van-cell>
- <van-cell class="order-number" title="银行名称">
+ <van-cell class="order-number" :title="$t('银行名称')">
<template #default>
<div class="flex justify-end">
- <span class="mr-14">请仔细阅读下方交易条款</span>
+ <span class="mr-14">{{ $t('请仔细阅读下方交易条款') }}</span>
<img class="relative top-8 w-25 h-29" src="@/assets/image/c2c/Group1168.png" alt="">
</div>
</template>
</van-cell>
- <van-cell class="order-number" title="开户支行">
+ <van-cell class="order-number" :title="$t('开户支行')">
<template #default>
<div class="flex justify-end">
- <span class="mr-14">请按照下方交易条款提供相关资料</span>
+ <span class="mr-14">{{ $t('请按照下方交易条款提供相关资料') }}</span>
<img class="relative top-8 w-25 h-29" src="@/assets/image/c2c/Group1168.png" alt="">
</div>
</template>
</van-cell>
</van-cell-group>
</div>
- <div class="mt-39 font-28">付款后，返回 XX APP，务必点击下方按钮“我已付款”通知卖家。</div>
+ <div class="mt-39 font-28">{{ $t('付款后，返回 XX APP，务必点击下方按钮“我已付款”通知卖家。') }}</div>
</div>
</div>
<div class="mt-92 px-40 flex font-30">
@@ -85,12 +85,12 @@
class="w-244 h-80 mr-16 rounded-2xl text-black bg-grey border-none"
type="primary"
@click="show = true"
- >遇到问题？</van-button>
+ >{{ $t('遇到问题？') }}</van-button>
<van-button
class="flex-1 h-80 rounded-2xl bg-blue text-white border-none"
type="primary"
@click="onPayed"
- >我已付款，通知卖家</van-button>
+ >{{ $t('我已付款，通知卖家') }}</van-button>
</div>
<!-- 遇到问题 -->
<div>
diff --git a/src/views/authentication/index.vue b/src/views/authentication/index.vue
index 5d7f9f7..51ced38 100644
--- a/src/views/authentication/index.vue
+++ b/src/views/authentication/index.vue
@@ -1,304 +1,334 @@
<template>
- <!-- 申请身份认证 -->
- <div style="padding-bottom: 30px" class="font-26 authentication">
- <fx-header @back="loginOut">
+ <div class="authentication">
+ <fx-header :back="false" @back="loginOut">
<template #title>
- <!-- {{ $t('primaryCertification') }} -->
- {{ $t('realNameVertify') }}
+ <span>{{ $t('Primary') }}</span>
</template>
</fx-header>
- <!-- <country-list /> -->
- <div v-if="show">
- <div class=" pt-58 pb-54 box-border border-b-color" v-if="disabled() || status === 3">
- <div class="flex justify-between items-center px-30 textColor">
- <div class="font-20">{{ $t('authVerify') }}</div>
- <div class="flex items-center" v-if="resultArr[status]">
- <!-- <img
- :src="require(`@/assets/image/assets-center/${resultArr[status] && resultArr[status].split('_')[0]}.png`)"
- alt="success img" class="w-36 h-36" /> -->
- <img src="@/assets/image/assets-center/identifing.png" v-if="status == 1" class="w-20 h-20" />
- <img src="@/assets/image/assets-center/small-success.png" v-if="status == 0 || status == 2"
- class="w-20 h-20" />
- <img src="@/assets/image/assets-center/icon-close.png" v-if="status == 3" class="w-20 h-20" />
- <div class="font-10 ml-18">{{ resultArr[status] && resultArr[status].split('_')[1] }}</div>
+
+ <div class="auth-body">
+ <!-- nationality -->
+ <div class="auth-field">
+ <label class="auth-label">{{ $t('nationality') }}</label>
+ <div class="auth-input auth-input--select" @click="openNationality">
+ <span class="auth-placeholder" :class="{ 'auth-placeholder--filled': countryName && countryName !== $t('selectNation') }">{{ countryName }}</span>
+ <van-icon name="arrow" class="auth-chevron" />
+ </div>
+ </div>
+
+ <!-- document type -->
+ <div class="auth-field">
+ <label class="auth-label">{{ $t('documentType') }}</label>
+ <div class="auth-input auth-input--select" @click="showDocType = true">
+ <span class="auth-placeholder" :class="{ 'auth-placeholder--filled': idname }">{{ idname || $t('pleaseSelectDocumentType') }}</span>
+ <van-icon name="arrow" class="auth-chevron" />
+ </div>
+ </div>
+
+ <!-- last name -->
+ <div class="auth-field">
+ <label class="auth-label">{{ $t('lastName') }}</label>
+ <input v-model="name" type="text" class="auth-input auth-input--text" :placeholder="$t('pleaseEnterLastName')" />
+ </div>
+
+ <!-- first name -->
+ <div class="auth-field">
+ <label class="auth-label">{{ $t('firstName') }}</label>
+ <input v-model="firstName" type="text" class="auth-input auth-input--text" :placeholder="$t('pleaseEnterFirstName')" />
+ </div>
+
+ <!-- ID number -->
+ <div class="auth-field">
+ <label class="auth-label">{{ $t('idNumber') }}</label>
+ <input v-model="idnumber" type="text" class="auth-input auth-input--text" :placeholder="$t('pleaseEnterIdNumber')" />
+ </div>
+
+ <!-- birth -->
+ <div class="auth-field">
+ <label class="auth-label">{{ $t('birth') }}</label>
+ <input v-model="birth" type="date" class="auth-input auth-input--text auth-input--date" :placeholder="$t('pleaseSelectBirth')" />
+ </div>
+
+ <!-- 证件上传（保留接口） -->
+ <div class="auth-upload-section" v-if="!disabled()">
+ <div class="auth-label">{{ $t('uploadCredentPassport') }}</div>
+ <div class="auth-upload-row">
+ <div class="auth-upload-item">
+ <van-uploader v-model="frontFile" :max-count="1" :deletable="!disabled()" :after-read="afterRead" />
+ <div class="auth-upload-tip">{{ $t('credentFront') }}</div>
+ </div>
+ <div class="auth-upload-item">
+ <van-uploader v-model="reverseFile" :max-count="1" :deletable="!disabled()" :after-read="afterRead" />
+ <div class="auth-upload-tip">{{ $t('credentObverse') }}</div>
</div>
</div>
</div>
- <div class="pl-30 pr-30">
- <div class="">
- <div class=" mb-25 font-14 textColor">{{ $t('nationality') }}</div>
- <div class="pt-28 pb-28 pl-38 pr-38 flex justify-between items-center rounded inputBackground textColor box"
- @click="openBtn">
- <div class="flex items-center ml-2">
- <!-- <div class="iti-flag" :class="key" style="transform: scale(2.1)"></div> -->
- <div class="iti-flag mr-20 " :class="countryCode" style="transform: scale(2.1)"></div>
- <div>{{ countryName }}</div>
- </div>
- <img src="@/assets/image/down-arrow.png" class="w-20 h-10" alt="arrow" />
- </div>
- </div>
- <ExInput :label="$t('realName')" :disabled="disabled()" :clearBtn="!disabled()"
- :placeholderText="$t('entryRealName')" v-model="name" />
- <ExInput :label="$t('credentPassport')" :disabled="disabled()" :clearBtn="!disabled()"
- :placeholderText="$t('entryCredentPassport')" v-model="idnumber" />
- <div>
- <div v-if="resultArr.length > 0" class="mt-4 mb-25 textColor">{{ $t('uploadCredentPassport') }} </div>
- <div v-else class="mt-4 mb-25 textColor">{{ $t('uploadPicCredentPassport') }}</div>
- <div class="flex mb-80 justify-between">
- <div class="flex-1 flex flex-col text-center justify-center items-center">
- <div class="upload-wrap">
- <img src="../../assets/image/kyc/0.png" alt="" class="w-full"
- v-if="[1, 2].includes(status) && frontFile.length === 0" />
- <van-uploader v-model="frontFile" multiple :max-count="1" :deletable="!disabled()"
- :after-read="afterRead" @click-upload="onClickUpload('frontFile')" v-else />
-
- </div>
- <div class=" font-26 h-20 textColor1">{{ $t('credentFront') }}</div>
- </div>
- <div class="flex-1 flex flex-col text-center justify-center items-center">
- <div class="upload-wrap">
- <img src="../../assets/image/kyc/1.png" alt="" class="w-full"
- v-if="[1, 2].includes(status) && reverseFile.length === 0" />
- <van-uploader v-model="reverseFile" multiple :max-count="1" :disabled="disabled()"
- :deletable="!disabled()" :after-read="afterRead" @click-upload="onClickUpload('reverseFile')"
- v-else />
- </div>
- <div class=" font-26 h-20 textColor1">{{ $t('credentObverse') }}</div>
- </div>
- <!-- <div class="flex-1 flex flex-col text-center justify-center items-center">
- <div class="upload-wrap">
- <img src="../../assets/image/kyc/2.png" alt="" class="w-full"
- v-if="[1, 2].includes(status) && fileList.length === 0" />
- <van-uploader v-model="fileList" multiple :max-count="1" :disabled="disabled()" :deletable="!disabled()"
- :after-read="afterRead" @click-upload="onClickUpload('fileList')" v-else />
- </div>
- <div class="font-26 h-20" style="color:#868D9A;">{{ $t('handCredent') }}</div>
- </div> -->
- </div>
- </div>
- <template v-if="!disabled()">
- <div class="font-35 mb-32 textColor">{{ $t('photoExample') }}</div>
- <!-- <img src="@/assets/image/kyc/kyc-demo.png" alt="" style="width:100%;height:auto;" class="w-756 h-220 mb-100"> -->
- <div class="mb-100 flex justify-center">
- <div class="flex flex-1 justify-center">
- <img src="../../assets/image/kyc/1.png" alt="" class="w-120 h-120" />
- </div>
- <div class="flex flex-1 justify-center">
- <img src="../../assets/image/kyc/0.png" alt="" class="w-120 h-120" />
- </div>
- </div>
- </template>
- <button class="apply-btn btnMain text-white font-35 h-100 rounded" @click="onSubmit" v-if="!disabled()">{{
- $t('Apply')
- }}</button>
- <div class="pt-35 pb-60 font-30" v-if="!disabled() || status === 3">
- <span class="text-grey">{{ $t('uploadTitle1') }} {{ $t('photoExample') }}</span>
- <span class="text-blue service-text" @click="tokefu"> {{ $t('ContactService') }}</span>
- </div>
- <nationality-list ref='controlChild' :title="$t('selectNation')" @getName="getName" v-if="!disabled()">
- </nationality-list>
- </div>
+ <button type="button" class="auth-submit" @click="onSubmit">{{ $t('Submit') }}</button>
</div>
+
+ <nationality-list ref="controlChild" :title="$t('selectNation')" @getName="getName" />
+ <van-action-sheet v-model:show="showDocType" :actions="docTypeActions" @select="onSelectDocType" />
</div>
</template>
<script setup>
-import { _getIdentify, _info, _applyIdentify } from "@/service/user.api.js";
+import { _getIdentify, _applyIdentify } from "@/service/user.api.js";
import { _uploadImage } from "@/service/upload.api.js";
import { onMounted, ref } from 'vue';
-import nationalityList from './components/nationalityList.vue'
+import nationalityList from './components/nationalityList.vue';
import { useRouter } from "vue-router";
-import { showToast, Uploader } from "vant"
-// import ExInput from "@/components/ex-input";
+import { showToast } from "vant";
import countries from "./components/countryList";
-import { getCurrentInstance } from 'vue';
import { useI18n } from "vue-i18n";
-import { customerServiceUrl } from '@/config'
-const { t } = useI18n()
-const router = useRouter()
-const countryName = ref(t('selectNation'))
-const countryCode = ref('af')
-const idnumber = ref('')
-const name = ref('')
-const frontFile = ref([])
-const reverseFile = ref([])
-const fileList = ref([])
-const curFile = ref('frontFile')
-const status = ref('')
-const imgs = ref([])
-const idcard_path_front_path = ref('')
-const idcard_path_back_path = ref('')
-const idcard_path_hold_path = ref('')
-const resultArr = ref(['small-success_' + t('applynoView'), 'identifing_' + t('reviewing'), 'small-success_' + t('passView'), 'icon-close_' + t('noPassView')])
-const show = ref(false)
-const language = ref('en')
-const controlChild = ref(null)
-const { proxy } = getCurrentInstance();
+
+const { t } = useI18n();
+const router = useRouter();
+
+const countryName = ref(t('selectNation'));
+const countryCode = ref('af');
+const idname = ref('');
+const idnumber = ref('');
+const name = ref('');
+const firstName = ref('');
+const birth = ref('');
+const frontFile = ref([]);
+const reverseFile = ref([]);
+const status = ref('');
+const show = ref(false);
+const showDocType = ref(false);
+const controlChild = ref(null);
+
+const docTypeActions = [
+ { name: 'ID Card', value: 'id/passport' },
+ { name: 'Passport', value: 'passport' }
+];
+
+const disabled = () => ![0, 3, ''].includes(status.value);
onMounted(() => {
fetchInfo();
- language.value = (localStorage.getItem('lang')).substring(0, 2)
-})
+});
+
const loginOut = () => {
- router.push('/certificationCenter')
-}
-const fetchInfo = () => { // 获取状态
- _getIdentify().then(data => {
-
- show.value = true
- status.value = data.status
- if (data.id != null) {
- countryName.value = countries[data.nationality.toLowerCase()].name
- countryCode.value = data.nationality.toLowerCase()
-
- idnumber.value = data.idnumber
- name.value = data.name
- frontFile.value = data.idimg_1 ? [{ url: data.idimg_1_path, resURL: data.idimg_1 }] : []
- reverseFile.value = data.idimg_2 ? [{ url: data.idimg_2_path, resURL: data.idimg_2 }] : []
- fileList.value = data.idimg_3 ? [{ url: data.idimg_3_path, resURL: data.idimg_3 }] : []
- }
- })
-}
-const onClickUpload = (type) => {
- console.log(type)
- curFile.value = type
-}
-const disabled = () => { // 是否禁用按钮
- return ![0, 3, ''].includes(status.value)
-}
-const afterRead = (file) => {
- file.status = 'uploading'
- file.message = t('uploading')
-
- _uploadImage(file).then(data => {
- file.status = 'success'
- file.message = t('uploadSuccess')
- file.resURL = data
- }).catch(err => {
- file.status = 'failed'
- file.message = t('uploadFailed')
- })
+ router.push('/certificationCenter');
};
+const fetchInfo = () => {
+ _getIdentify().then(data => {
+ show.value = true;
+ status.value = data.status ?? '';
+ if (data.id != null || data.nationality) {
+ const code = (data.nationality || 'af').toLowerCase();
+ countryName.value = countries[code] ? countries[code].name : t('selectNation');
+ countryCode.value = code;
+ idnumber.value = data.idnumber || data.idNumber || '';
+ name.value = data.name || '';
+ firstName.value = data.firstName || data.firstname || '';
+ birth.value = data.birth || '';
+ frontFile.value = data.idimg_1 || data.idFrontImg ? [{ url: data.idimg_1_path || data.idFrontImg, resURL: data.idimg_1 || data.idFrontImg }] : [];
+ reverseFile.value = data.idimg_2 || data.idBackImg ? [{ url: data.idimg_2_path || data.idBackImg, resURL: data.idimg_2 || data.idBackImg }] : [];
+ }
+ }).catch(() => {});
+};
+const openNationality = () => {
+ if (!disabled() && controlChild.value) controlChild.value.open();
+};
-//打开国家列表底部弹窗
-const openBtn = () => {
- if (!disabled()) {
- proxy.$refs.controlChild.open()
- }
-}
-//获取到当前选中国家的code值
const getName = (params) => {
countryName.value = params.name;
countryCode.value = params.code;
-}
+};
+
+const onSelectDocType = (item) => {
+ idname.value = item.value || item.name;
+ showDocType.value = false;
+};
+
+const afterRead = (file) => {
+ file.status = 'uploading';
+ file.message = t('uploading');
+ _uploadImage(file).then(data => {
+ file.status = 'success';
+ file.message = t('uploadSuccess');
+ file.resURL = data;
+ }).catch(() => {
+ file.status = 'failed';
+ file.message = t('uploadFailed');
+ });
+};
const onSubmit = () => {
- if (!countryName.value) {
- showToast(t('selectNation'))
- return
+ if (!countryName.value || countryName.value === t('selectNation')) {
+ showToast(t('selectNation'));
+ return;
}
if (!name.value) {
- showToast(t('entryName'))
- return
+ showToast(t('pleaseEnterLastName'));
+ return;
+ }
+ if (!firstName.value) {
+ showToast(t('pleaseEnterFirstName'));
+ return;
}
if (!idnumber.value) {
- showToast(t('entryCredent'))
- return
+ showToast(t('pleaseEnterIdNumber'));
+ return;
}
+ if (!birth.value) {
+ showToast(t('pleaseSelectBirth'));
+ return;
+ }
+ // 证件照非必填，不校验 frontFile/reverseFile
- // if (frontFile.value.length == 0 || reverseFile.value.length == 0 || fileList.value.length == 0) { // 需要手持身份证
- if (frontFile.value.length == 0 || reverseFile.value.length == 0) { // 不需要手持身份证
- showToast(t('uploadComplete'))
- return
- }
-
_applyIdentify({
+ countryName: countryCode.value,
+ idname: idname.value || 'id/passport',
name: name.value,
+ firstName: firstName.value,
idnumber: idnumber.value,
+ birth: birth.value,
frontFile: frontFile.value,
reverseFile: reverseFile.value,
- // fileList: fileList.value,
- countryName: countryCode.value // this.countryName 存储的 code, 回来再遍历
}).then(() => {
- showToast(t('submitSuccess'))
- router.push('/verified')
- // this.fetchInfo()
+ showToast(t('submitSuccess'));
+ router.push('/certificationCenter');
}).catch(err => {
- if (err.code === 'ECONNABORTED') { showToast('网络超时！'); }
- else if (err.msg !== undefined) { showToast(err.msg); }
- })
-}
-const tokefu = () => {
- if (customerServiceUrl()) {
- window.location.href = customerServiceUrl();
- } else {
- router.push('/customerService')
- }
-}
-
+ if (err.code === 'ECONNABORTED') showToast(t('networkTimeout'));
+ else if (err.msg) showToast(err.msg);
+ });
+};
</script>
-<style lang="scss" scoped>
-@import '../../assets/css/copy.scss';
-@import "@/views/authentication/components/intl.css";
-.box {
- padding: 1.5rem !important;
+<style lang="scss" scoped>
+.authentication {
+ min-height: 100vh;
+ background: #fff;
+ padding-bottom: 2rem;
+ font-size: 14px;
}
-.authentication {
+:deep(.van-nav-bar) {
+ background: #fff !important;
+}
+:deep(.van-nav-bar__title) {
+ color: #333;
+ font-weight: 700;
+ font-size: 16px;
+}
+:deep(.van-icon) {
+ color: #333;
+}
+
+.auth-body {
+ padding: 0 1.25rem;
+}
+
+.auth-field {
+ margin-bottom: 1.25rem;
+}
+
+.auth-label {
+ display: block;
+ font-size: 14px;
+ color: #333;
+ margin-bottom: 0.5rem;
+ font-weight: 500;
+}
+
+.auth-input {
width: 100%;
box-sizing: border-box;
+ height: 48px;
+ line-height: 48px;
+ padding: 0 1rem;
+ background: #f8f8f8;
+ border-radius: 8px;
+ border: none;
+ font-size: 14px;
+ color: #333;
}
-.upload-wrap {
- // width: 220px;
- // height: 220px;
+.auth-input--text {
+ display: block;
+}
+.auth-input--text::placeholder {
+ color: #999;
+}
+
+.auth-input--date {
+ color-scheme: light;
+}
+.auth-input--date::-webkit-calendar-picker-indicator {
+ opacity: 0.6;
+ cursor: pointer;
+}
+
+.auth-input--select {
display: flex;
- justify-content: center;
align-items: center;
+ justify-content: space-between;
+ cursor: pointer;
}
-input {
- font-size: 35px;
+.auth-placeholder {
+ color: #999;
+ font-size: 14px;
+}
+.auth-placeholder--filled {
+ color: #333;
}
-input:disabled {
- background: $mainbgWhiteColor;
+.auth-chevron {
+ font-size: 14px;
+ color: #999;
+ flex-shrink: 0;
+ margin-left: 8px;
}
-.list-view {
- overflow-y: scroll;
- border-bottom: 1px solid $border_color;
+.auth-upload-section {
+ margin-top: 1.5rem;
+ margin-bottom: 1.5rem;
}
-.kyc-input {
+.auth-upload-row {
+ display: flex;
+ gap: 1rem;
+ margin-top: 0.5rem;
+}
+
+.auth-upload-item {
+ flex: 1;
+ text-align: center;
+ background-color: #F7F8FA;
+}
+.auth-upload-item :deep(.van-uploader__upload),
+.auth-upload-item :deep(.van-uploader__preview) {
width: 100%;
- border: none;
+ height: 100px;
+ margin: 0;
+}
+.auth-upload-item :deep(.van-uploader__upload-icon) {
+ font-size: 24px;
+}
+.auth-upload-tip {
+ font-size: 12px;
+ color: #999;
+ margin-top: 6px;
}
-.apply-btn {
- border: none;
- outline: none;
+.auth-submit {
width: 100%;
height: 50px;
-}
-
-.service-text {
- text-decoration: underline;
-}
-
-.rounded {
- padding: 0.6rem;
-}
-
-.mb-32 {
- margin-bottom: 16px;
-}
-
-.pt-35 {
- padding-top: 16px;
+ line-height: 50px;
+ font-size: 14px;
+ font-weight: 700;
+ color: #fff;
+ background: linear-gradient(90deg, #7c3aed, #5b21b6);
+ border: none;
+ border-radius: 12px;
+ margin-top: 1rem;
+ cursor: pointer;
}
</style>
diff --git a/src/views/certificationCenter/advancedCtf.vue b/src/views/certificationCenter/advancedCtf.vue
index 1cf348b..de71424 100644
--- a/src/views/certificationCenter/advancedCtf.vue
+++ b/src/views/certificationCenter/advancedCtf.vue
@@ -132,8 +132,8 @@
router.push('/verified')
showToast(t('submitSuccess'));
}).catch(err => {
- if (err.code === 'ECONNABORTED') { showToast('网络超时！'); }
- else if (err.msg !== undefined) { showToast(this.err.msg); }
+ if (err.code === 'ECONNABORTED') { showToast(t('networkTimeout')); }
+ else if (err.msg !== undefined) { showToast(err.msg); }
})
}
</script>
diff --git a/src/views/certificationCenter/index.vue b/src/views/certificationCenter/index.vue
index 7962e56..db8360a 100644
--- a/src/views/certificationCenter/index.vue
+++ b/src/views/certificationCenter/index.vue
@@ -1,651 +1,198 @@
<template>
<div class="certificationCenter">
- <fx-header @back="loginOut">
+ <fx-header :back="false" @back="loginOut">
<template #title>
- {{ $t('certificationCenter') }}
+ <span>{{$t('实名认证')}}</span>
</template>
</fx-header>
- <div class="box">
- <div class="justify-between1 flex user-info">
- <div>{{ $t('personalCenter') }}</div>
- <div v-if="nationality" class="iti-flag" :class="nationality" style="transform: scale(2.1)"></div>
+
+ <div class="kyc-body">
+ <!-- 用户信息卡片：邮箱 + personal -->
+ <div class="kyc-user-card">
+ <div class="kyc-user-email">{{ userEmail || '–' }}</div>
+ <div class="kyc-user-label">{{ $t('personalCenter') }}</div>
</div>
- <div class="flex">
- <div class="gn flex">
- <img src="../../assets/image/idImg/cftIcon.png" alt="" class="w-64 h-64">
- <span class="gn-span" @click="showClick">{{ $t('viewCurrentFeatures') }}</span>
+
+ <!-- Primary 认证卡片 -->
+ <div class="kyc-card">
+ <div class="kyc-card-title-row">
+ <span class="kyc-card-title">{{ $t('Primary') }}</span>
+ <span v-if="kyc_status === 1" class="kyc-card-title-status">{{ $t('underReview') }}</span>
+ </div>
+ <div class="kyc-card-desc">{{ $t('kycPrimaryDesc') }}</div>
+ <div
+ class="kyc-btn"
+ :class="kyc_status === 1 ? 'kyc-btn--disabled' : 'kyc-btn--active'"
+ @click="kyc_status !== 1 && openUlr(1)"
+ >
+ {{ fixBtnState(kyc_status) }}
+ </div>
+ </div>
+
+ <!-- Senior 认证卡片 -->
+ <div class="kyc-card">
+ <div class="kyc-card-title">{{ $t('Senior') }}</div>
+ <div class="kyc-card-desc">{{ $t('kycSeniorDesc') }}</div>
+ <div
+ class="kyc-btn"
+ :class="primaryVerified ? 'kyc-btn--active' : 'kyc-btn--disabled'"
+ @click="primaryVerified && openUlr(2)"
+ >
+ {{ primaryVerified ? fixBtnState(advStatus) : $t('kycCompletePrimaryFirst') }}
</div>
</div>
</div>
- <div class="contentBox pt-5 tabBackground pb-5">
- <!-- <div class="btnBox2">
- <div class="textColor4 textColor5 flex" style="justify-content: center;align-items: center;"
- :class="{ 'activeStyle': active == 0 }" @click="changeTab(0)">
- <img v-if="identityverif" src="../../assets/image/idImg/finishIcon.png" alt="" class="w-10 h-10 mr-2" />
- <img v-else src="../../assets/image/idImg/finishIcon1.png" alt="" class="w-10 h-10 mr-2" />
- <span>{{ $t('primaryCertification') }}</span>
- </div>
- <div class="textColor4 flex" style="justify-content: center;align-items: center;"
- :class="{ 'activeStyle': active == 1 }" @click="changeTab(1)">
- <img v-if="identityverif" src="../../assets/image/idImg/finishIcon.png" alt="" class="w-10 h-10 mr-2" />
- <img v-else src="../../assets/image/idImg/finishIcon1.png" alt="" class="w-10 h-10 mr-2" />
- <span>{{ $t('advancedCertification') }}</span>
- </div>
- </div> -->
- <div v-show="active == 0">
- <div class="justify-between23">
- <div class="textColor1">{{ $t('require') }}</div>
- <div class="border-radius-left textColor2 yaoqu flex"
- :class="{ 'status0': kyc_status == 0 || kyc_status == 3, 'status1': kyc_status == 1, 'status2': kyc_status == 2 }">
- <img :src="handImg(`status${kyc_status}`)" alt="" />
- <span class="textColor-span font-28 flex items-center">{{
- fixState(kyc_status)
- }}</span>
- </div>
- </div>
- <div class="px-32-1">
- <div class="flex items-center textColor span2">
- <img src="../../assets/image/idImg/info.png" alt="" />
- <span class="textColor textColor666">{{ $t('information') }}</span>
- </div>
- <div class="flex items-center textColor span2">
- <img src="../../assets/image/idImg/identity.png" alt="" />
- <span class="textColor textColor666">{{ $t('governmentIssuedID') }}</span>
- </div>
- </div>
- <div class="px-32-1 px-32-2">
- <!-- <div class="font-36 textColor mt-82 span32">{{ $t('featuresAndLimitations') }}</div>
- <content-com class="mt-40" :contentObj="coinObj" :state="identityverif"></content-com>
- <content-com class="mt-40" :contentObj="c2cObj" :state="identityverif"></content-com>
- <content-com class="mt-40" :contentObj="currencyObj" :state="identityverif"></content-com>
- <div class="flex text-grey font-30 mt-64">
- <img src="../../assets/image/idImg/suditIcon.png" alt="" />
- <span class="ml-24">{{ $t('reviewTime') }}:{{ $t('thereDays') }}</span>
- </div>
- <div class=" text-red font-20">
- <p v-show="(kyc_status == 3)">{{ $t('certificationRefusal') }}:{{ turnDownMsg }}</p>
- </div> -->
- <div class="rounded-lg py-26 text-center btn"
- :class="kyc_status == 0 || kyc_status == 3 ? 'btnMain text-white' : 'bgDark text-grey'" @click="openUlr(1)">
- {{
- fixBtnState(kyc_status) }}</div>
- </div>
-
- </div>
- <div v-show="active == 1">
- <div class="justify-between23">
- <div class="textColor1">{{ $t('require') }}</div>
- <div class="border-radius-left textColor2 flex yaoqu"
- :class="{ 'status0': advStatus == 0 || advStatus == 3, 'status1': advStatus == 1, 'status2': advStatus == 2 }">
- <img :src="handImg(`status${advStatus}`)" alt="" />
- <span class="textColor-span font-28 flex items-center">{{ fixState(advStatus) }}</span>
- </div>
- </div>
- <div class="px-32-1">
- <div class="flex items-center textColor span2">
- <img src="../../assets/image/idImg/address.png" alt="" />
- <span class="textColor textColor666">{{ $t('familyAddress') }}</span>
- </div>
- <div class="flex items-center textColor span2">
- <img src="../../assets/image/idImg/address.png" alt="" />
- <span class="textColor textColor666">{{ $t('workAddress') }}</span>
- </div>
- <div class="flex items-center textColor span2">
- <img src="../../assets/image/idImg/connect.png" alt="" />
- <span class=" textColor textColor666">{{ $t('contactRelatives') }}</span>
- </div>
- </div>
- <div class="px-32-1 px-32-2">
- <div class="font-36 textColor mt-82">{{ $t('featuresAndLimitations') }}</div>
- <content-com class="mt-40" :contentObj="advCoinObj" :state="advancedverif"></content-com>
- <content-com class="mt-40" :contentObj="advC2cObj" :state="advancedverif"></content-com>
- <content-com class="mt-40" :contentObj="advCurrencyObj" :state="advancedverif"></content-com>
- <div class="flex text-grey font-30 mt-64">
- <img class="img3" src="../../assets/image/idImg/suditIcon.png" alt="" />
- <span class="ml-24 fs">{{ $t('notaryTime') }}</span>
- </div>
- <div class="btnMain btnMain1 rounded-lg py-26 text-center mt-16"
- :class="advStatus == 0 || advStatus == 3 ? 'btnMain text-black' : 'bgDark'" @click="openUlr(2)">
- {{ fixBtnState(advStatus) }}
- </div>
-
- </div>
- </div>
- </div>
- <van-popup round v-model:show="show" position="bottom" :close-on-click-overlay="false" @close="onClose">
- <div class="pop-box relative mainBackground">
- <img :src="handImg('icon-close')" class=" absolute h-10 w-10 top-46" @click="onClose" />
- <div class="pt-46 textColor font-40 textColor9">{{ $t('hasTheFunction') }}</div>
- <div class=" border-b-color" v-for="(item, index) in currentList" :key="index">
- <div class="font-32 text-grey flex items-center">
- <img :src="handImg(item.icon)" class="tk-img" alt="" />
- <span class="textColor mr-10">{{ item.title }}</span>
- <span>{{ item.des }}</span>
- </div>
- <div class="text-grey text-grey1 font-30 " v-for="(str, index) in item.arr"
- :class="{ 'colorMain': index == 1 }" :key="index">{{ str }}</div>
- </div>
- <div class="btnMain btnMain1 text-white font-34 py-26 rounded-lg text-center mt-68" @click="onClose">{{
- $t('confirm')
- }}</div>
- </div>
- </van-popup>
</div>
</template>
<script setup>
import { _getIdentify, _info } from "@/service/user.api.js";
-import { reactive, onMounted, ref } from 'vue';
-import contentCom from "./contentCom.vue";
-import { useRoute, useRouter } from "vue-router";
+import { onMounted, ref, computed } from 'vue';
+import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
-const { t } = useI18n()
-const route = useRoute()
-const router = useRouter()
-const turnDownMsg = ref('')
-const show = ref(false)
-const active = ref(0)
-const kyc_status = ref(0)
-const advStatus = ref(0)
-const identityverif = ref(false)
-const advancedverif = ref(false)
-const nationality = ref('')
-const coinObj = ref({
- title: t('fiatCurrencyLimit'),
- list: [
- {
- left: t('recharge'),
- right: t('unlimited')
- },
- {
- left: t('withdraw'),
- right: t('unlimited')
- }
- ]
-})
-const c2cObj = ref({
- title: t('c2cTradeLimit'),
- list: [
- {
- left: 'C2C',
- right: t('unlimited')
- },
- ]
-})
-const currencyObj = ref({
- title: t('cryptoCurrencyLimit'),
- list: [
- {
- left: t('recharge'),
- right: t('unlimited')
- },
- {
- left: t('withdraw'),
- right: t('unlimited')
- }
- ]
-})
-const advCoinObj = ref({
- title: t('fiatCurrencyLimit'),
- list: [
- {
- left: t('recharge'),
- right: t('unlimited')
- },
- {
- left: t('withdraw'),
- right: t('unlimited')
- }
- ]
-})
-const advC2cObj = ref({
- title: t('c2cTradeLimit'),
- list: [
- {
- left: 'C2C',
- right: t('unlimited')
- },
- ]
-})
-const advCurrencyObj = ref({
- title: t('cryptoCurrencyLimit'),
- list: [
- {
- left: t('recharge'),
- right: t('unlimited')
- },
- {
- left: t('withdraw'),
- right: t('unlimited')
- }
- ]
-})
+const { t } = useI18n();
+const router = useRouter();
-const currentList = ref([])
-const ownList = ref([
- {
- icon: '1',
- title: t('unlimited'),
- des: t('daily'),
- arr: [t('fiatDepositAndWithdrawalLimit')]
- },
- {
- icon: '2',
- title: t('unlimited'),
- des: '',
- arr: [t('digitalCurrencyRecharge'), t('increaseTheLimit')]
- },
- {
- icon: '3',
- title: t('unlimited'),
- des: t('daily'),
- arr: [t('digitalCurrencyWithdrawalLimit')]
- },
- // {
- // icon: '4',
- // title: t('unlimited'),
- // des: '',
- // arr: [t('c2cTradeLimit')]
- // },
- // {
- // icon: '5',
- // title: 'OTC',
- // des: '',
- // arr: [t('otherFunctions')]
- // }
-])
-const advOwnList = ref([
- {
- icon: '1',
- title: t('unlimited'),
- des: t('daily'),
- arr: [t('fiatDepositAndWithdrawalLimit')]
- },
- {
- icon: '2',
- title: t('unlimited'),
- des: '',
- arr: [t('digitalCurrencyRecharge'), t('increaseTheLimit')]
- },
- {
- icon: '3',
- title: t('unlimited'),
- des: t('daily'),
- arr: [t('digitalCurrencyWithdrawalLimit')]
- },
- {
- icon: '4',
- title: t('unlimited'),
- des: '',
- arr: [t('c2cTradeLimit')]
- },
- {
- icon: '5',
- title: 'OTC',
- des: '',
- arr: [t('otherFunctions')]
- }
-])
-onMounted(() => {
- currentList.value = ownList.value
- getLocaluserAction();
- getIdentify();
-})
-const handImg = (url) => {
- return new URL(`../../assets/image/idImg/${url}.png`, import.meta.url).href
-}
+const userEmail = ref('');
+const kyc_status = ref(0);
+const advStatus = ref(0);
+const turnDownMsg = ref('');
+
+const primaryVerified = computed(() => kyc_status.value === 2);
+
const loginOut = () => {
- router.push('/my/index')
-}
-const changeTab = (index) => {
- active.value = index
- if (index == 0) {
- currentList.value = ownList.value
- } else {
- currentList.value = advOwnList.value
- }
- console.log(currentList);
- console.log(currentList.value);
-}
-const showClick = () => {
- show.value = true
- console.log(show.value);
-}
+ router.push('/my/index');
+};
-const onClose = () => {
- show.value = false
-}
const getLocaluserAction = () => {
_info().then(res => {
- identityverif.value = res.identityverif
- advancedverif.value = res.advancedverif
- nationality.value = res.nationality
- kyc_status.value = res.kyc_status || 0
- advStatus.value = res.kyc_high_level_status || 0
- console.log(advStatus.value);
- })
-}
+ userEmail.value = res.email || res.username || '';
+ kyc_status.value = res.kyc_status ?? 0;
+ advStatus.value = res.kyc_high_level_status ?? 0;
+ }).catch(() => {});
+};
+
const getIdentify = () => {
_getIdentify().then(data => {
- turnDownMsg.value = data.msg;
- })
-}
-const fixState = (kyc_status) => {
- let str = ''
- if (kyc_status == 0) {
- str = t('notCertified')
- } else if (kyc_status == 1) {
- str = t('reviewing')
- } else if (kyc_status == 2) {
- str = t('verified')
- } else {
- str = t('notCertified')
- }
- return str;
-}
-const fixBtnState = (kyc_status) => {
- let str = ''
- if (kyc_status == 0) {
- str = t('authentication')
- } else if (kyc_status == 1) {
- str = t('auditDetails')
- } else if (kyc_status == 2) {
- str = t('certificationDetails')
- } else {
- str = t('authentication')
- }
- return str;
-}
+ turnDownMsg.value = data.msg || '';
+ }).catch(() => {});
+};
+
+const fixBtnState = (status) => {
+ if (status === 0) return t('authentication');
+ if (status === 1) return t('auditDetails');
+ if (status === 2) return t('verified');
+ return t('authentication');
+};
+
const openUlr = (index) => {
- if (index == 1) {
- router.push('/authentication')
- } else {
- router.push('/advancedCtf')
- }
-}
+ if (index === 1) router.push('/authentication');
+ else router.push('/advancedCtf');
+};
+
+onMounted(() => {
+ getLocaluserAction();
+ getIdentify();
+});
</script>
+
<style lang="scss" scoped>
-@import "@/views/authentication/components/intl.css";
-@import '@/assets/theme/index.scss';
-
.certificationCenter {
- width: 100%;
- box-sizing: border-box;
+ min-height: 100vh;
+ background: #f5f5f5;
+ padding-bottom: 2rem;
font-size: 14px;
}
-.btnMain {
- height: 45px !important;
- line-height: 45px !important;
+:deep(.van-nav-bar) {
+ background: #fff !important;
+}
+:deep(.van-nav-bar__title) {
+ color: #333;
+ font-weight: 700;
+}
+:deep(.van-icon) {
+ color: #333;
+}
+
+.kyc-body {
+ padding: 0 1.25rem;
+}
+
+/* 用户信息卡片：白底、圆角、内边距、邮箱加粗、personal 灰色 */
+.kyc-user-card {
+ border-radius: 12px;
+ padding: 1.5rem 1.25rem;
+ margin-bottom: 1rem;
+}
+
+.kyc-user-email {
+ font-size: 16px;
+ font-weight: 700;
+ color: #333;
+ margin-bottom: 0.35rem;
+}
+
+.kyc-user-label {
font-size: 14px;
+ color: #999;
}
-.box {
- padding-left: 2rem;
- padding-right: 2rem;
- padding-bottom: 2.625rem;
-
- @include themify() {
- background-color: themed("c2c_background1");
- }
-
- .user-info {
- overflow: hidden;
- padding: 30px 10px 10px;
- font-size: 16px;
- }
-
+/* 认证卡片：白底、圆角、阴影 */
+.kyc-card {
+ background: #fff;
+ border-radius: 12px;
+ padding: 1.5rem 1.25rem;
+ margin-bottom: 1rem;
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
-.justify-between1 {
- height: 2rem;
- line-height: 2rem;
- font-size: 1.5rem;
- padding-top: 1rem;
-}
-
-.gn {
- background: #565b69;
- border-radius: 3rem;
- margin-top: 2rem;
+.kyc-card-title-row {
display: flex;
align-items: center;
- padding-left: 1.75rem;
- padding-right: 1.75rem;
- height: 50px;
- line-height: 50px;
-}
-
-.btnBox2 {
- padding-left: 2rem;
- padding-right: 2rem;
- display: flex;
-}
-
-.textColor4 {
- margin-top: 2rem;
- // background: $light-grey;
- color: $text_color;
- padding: 2px 20px;
- text-align: center;
- height: 40px;
- padding: 10px;
- border-radius: 2.5rem;
- box-sizing: border-box;
- line-height: normal;
-}
-
-.textColor5 {
- margin-right: 2rem;
-}
-
-.justify-between23 {
- padding-left: 2rem;
- padding-right: 2rem;
- margin-top: 2rem;
- display: flex;
-}
-
-.textColor1 {
- height: 3rem;
- line-height: 3rem;
-}
-
-.textColor2 {
- position: absolute;
- right: 0;
- // width: 27%;
-}
-
-.textColor666 {
- margin-left: 1rem;
-}
-
-.px-32-1 {
- padding-left: 2rem;
- padding-right: 2rem;
-}
-
-.contentBox {}
-
-.btnMain {
- background: $btn_main !important;
- border-radius: 0.5rem;
- line-height: 3.4rem;
- height: 3.4rem;
- margin-top: 2rem;
- color: $text_color;
-}
-
-.gn img {
- width: 20px;
- height: 20px;
-}
-
-.textColor-span {
- margin-left: 0;
-}
-
-.span2 {
- font-size: 14px;
- height: 5rem;
- line-height: 2rem;
- margin: 1.5rem 0rem;
-}
-
-.span32 {
- padding-right: 2rem;
- margin-top: 2rem;
-}
-
-.px-32-2 .textColor img {
- width: 2rem;
- height: 2rem;
-}
-
-.btn {
- margin-top: 2rem;
- background: $btn_main;
- border-radius: 0.5rem;
- line-height: 45px;
- height: 45px;
- color: $text_color;
-}
-
-.text-red {
- color: $red;
-}
-
-.mt-64 {
- margin-top: 2rem;
-}
-
-.mt-40-1 {
- height: 2rem;
- line-height: 2rem;
-}
-
-.ml-24 {
- margin-left: 5px;
-}
-
-.px-32-1 img {
- width: 20px;
- height: 20px;
-}
-
-.px-32-2 .mt-40 {
- margin-top: 0;
-}
-
-
-.activeStyle {
- background: $btn_main;
- color: $text_color;
-}
-
-.status0 {
- background: $cont_background;
- color: $red;
-}
-
-.status1 {
- background: $cont_background;
- color: #DBAE18;
-}
-
-.status2 {
- background: #E6F6F0;
- color: #03A66D;
-}
-
-.status3 {
- background: $cont_background;
- color: $red;
-}
-
-.fs {
- font-size: 14px;
- margin-left: 10px;
- color: $text_color1;
- ;
-}
-
-.text-grey .img3 {
- width: 20px;
- height: 20px;
-}
-
-.border-radius-left {
- border-top-left-radius: 40px;
- border-bottom-left-radius: 40px;
-}
-
-.van-popup.van-popup--bottom {
- border-top-left-radius: 30px;
- border-top-right-radius: 30px;
-}
-
-.yaoqu {
- height: 40px;
- line-height: 40px;
- padding: 0 10px;
-}
-
-.yaoqu img {
- width: 20px;
- height: 20px;
- margin-top: 10px;
- margin-right: 5px;
-}
-
-.tk-img {
- width: 20px;
- height: 20px;
-}
-
-.mainBackground {
- padding: 1rem 1rem;
-}
-
-.text-grey {
- margin-top: 15px;
-}
-
-.textColor9 {
- height: 4rem;
- line-height: 4rem;
-}
-
-.absolute {
- margin-top: 0.9rem;
- right: 1rem;
-}
-
-.text-grey1 {
- margin-left: 3rem;
- font-size: 14px;
- color: $text_color1 !important;
-
-}
-
-.colorMain {
- color: $color_main !important;
-}
-
-.mr-10 {
- margin-right: 0.5rem;
- margin-left: 1rem;
-}
-
-.user-info {
justify-content: space-between;
- align-items: center;
+ margin-bottom: 0.5rem;
+}
+.kyc-card-title {
+ font-size: 16px;
+ font-weight: 700;
+ color: #333;
+}
+.kyc-card-title-status {
+ font-size: 14px;
+ font-weight: 600;
+ color: #f97316;
}
-.border-b-color {
- padding-bottom: 10px;
- border-bottom: 1px solid $border_color;
+.kyc-card-desc {
+ font-size: 14px;
+ color: #999;
+ margin-bottom: 1.25rem;
+ line-height: 1.4;
}
-</style>
\ No newline at end of file
+
+/* 按钮：圆角、全宽、字体 14px */
+.kyc-btn {
+ height: 45px;
+ line-height: 45px;
+ text-align: center;
+ font-size: 14px;
+ font-weight: 600;
+ border-radius: 999px;
+ border: none;
+ width: 100%;
+}
+
+.kyc-btn--active {
+ color: #fff;
+ background: linear-gradient(90deg, #7c3aed, #b855d4);
+ cursor: pointer;
+}
+
+.kyc-btn--disabled {
+ color: rgba(255, 255, 255, 0.85);
+ background: linear-gradient(90deg, #d4c5f0, #e8c8e8);
+ cursor: not-allowed;
+}
+</style>
diff --git a/src/views/changeFundsPassword/index.vue b/src/views/changeFundsPassword/index.vue
index 7ce2865..a931f1a 100644
--- a/src/views/changeFundsPassword/index.vue
+++ b/src/views/changeFundsPassword/index.vue
@@ -1,191 +1,129 @@
<template>
- <div class="changePassword">
- <fx-header>
- <template #title>
- {{ $t('changeFunsPassword') }}
- </template>
- </fx-header>
- <div class="content">
- <ExInput :label="$t('newPassword')" :placeholderText="$t('entryPassword')" :tips="$t('funsPasswordTips')"
- v-model="password" typeText="password" />
- <ExInput :label="$t('sureNewPassword')" :placeholderText="$t('entryPassword')" :tips="$t('funsPasswordTips')"
- v-model="rePassword" typeText="password" />
- <ExChecked class="mb-42" :list="list" @checkedSelect="onChecked"></ExChecked>
- <p class="label mt-14 textColor">{{ $t('verificationCode') }}</p>
- <div class="iptbox inputBackground">
- <input class="inputBackground textColor" type="text" :placeholder="$t('entryVerifyCode')" v-model="verifyCode">
- <span v-if="currentType != 3" @click="senCode">{{ $t('sendVerifyCode') }}<template v-if="time">
- ({{ time }})s</template></span>
+ <div class="change-funds-password">
+ <assets-head :title="''" :show-left="true" />
+ <div class="edit-content">
+ <div class="edit-input-wrap">
+ <input
+ v-model="oldPassword"
+ type="password"
+ class="edit-input"
+ :placeholder="$t('oldPassword')"
+ />
</div>
- <van-button class="w-full" style="margin-top:10px;" @click="submit" type="primary">
- {{ $t('sure') }}
- </van-button>
+ <div class="edit-input-wrap">
+ <input
+ v-model="newPassword"
+ type="password"
+ class="edit-input"
+ :placeholder="$t('newPassword')"
+ />
+ </div>
+ <div class="edit-input-wrap">
+ <input
+ v-model="confirmPassword"
+ type="password"
+ class="edit-input"
+ :placeholder="$t('sureNewPassword')"
+ />
+ </div>
+ <button class="edit-submit" @click="submit">{{ $t('sure') }}</button>
</div>
</div>
</template>
<script setup>
-import ExInput from "@/components/ex-input/index.vue";
-import ExChecked from "@/components/ex-checked/index.vue";
-import { _setSafeword, _getVerifTarget } from '@/service/user.api.js'
-import { _sendVerifyCode } from "@/service/login.api";
-import { ref, onMounted, onUnmounted } from "vue";
+import { ref } from "vue";
import { showToast } from "vant";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
-const { t } = useI18n()
-const router = useRouter()
+import { _changeFundsPassword } from "@/service/user.api.js";
+import AssetsHead from "@/components/Transform/assets-head/index.vue";
-const password = ref('')//密码
-const rePassword = ref('')//确认密码
-const verifyCode = ref('') //验证码
-let currentType = ref(1) //默认选中手机验证1/手机；2/邮箱；3/谷歌验证器；
-const list = ref([
- {
- name: t('phoneVerify'),
- type: 1
- },
- {
- name: t('emailVerify'),
- type: 2
- },
- {
- name: t('googleVerify'),
- type: 3
- },
-])
-const email_authority = ref(false) //是否绑定邮箱
-const google_auth_bind = ref(false)//是否绑定谷歌
-const phone_authority = ref(false)//是否绑定手机
-const email = ref('')
-const phone = ref('')
-const google_auth_secret = ref('')
-const account = ref('')
-const timer = ref(null)
-const time = ref(0)
+const { t } = useI18n();
+const router = useRouter();
-onMounted(() => {
- getVerifTarget();
- clearTimer()
-})
+const oldPassword = ref("");
+const newPassword = ref("");
+const confirmPassword = ref("");
-const onChecked = (type) => {
- currentType.value = type;
- if (currentType.value == 3 && !google_auth_bind.value) {
- console.log('sd')
- showToast(t('bindGoogleTips'))
- }
- if (currentType.value == 1) {
- account.value = phone.value;
- } else if (currentType.value == 2) {
- account.value = email.value;
- } else if (currentType.value == 3) {
- account.value = google_auth_secret.value;
- }
-}
const submit = () => {
- if (password.value.length < 6) {
- showToast(t('funpasswordTips'))
- return false
+ if (!oldPassword.value) {
+ showToast(t("旧密码不能为空"));
+ return;
}
- _setSafeword({
- safeword: password.value,
- verifcode_type: currentType.value,
- verifcode: verifyCode.value
- }).then((res) => {
- showToast(t('changeSuccess'))
- setTimeout(() => {
- router.push('/my/index')
- }, 1000)
+ if (newPassword.value.length < 6) {
+ showToast(t("funpasswordTips"));
+ return;
+ }
+ if (newPassword.value !== confirmPassword.value) {
+ showToast(t("两次输入的资金密码不相同"));
+ return;
+ }
+ _changeFundsPassword({
+ old_safeword: oldPassword.value,
+ safeword: newPassword.value,
+ safeword_confirm: confirmPassword.value,
})
-}
-const getVerifTarget = async () => {
- _getVerifTarget({
-
- }).then((res) => {
- email_authority.value = res.email_authority
- google_auth_bind.value = res.google_auth_bind
- phone_authority.value = res.phone_authority
- email.value = res.email
- phone.value = res.phone
- google_auth_secret.value = res.google_auth_secret
- })
-
-}
-const senCode = () => {
- if (currentType.value == 1 && !phone_authority.value) {
- showToast(t('bindPhoneTips'));
- return false
- }
- if (currentType.value == 2 && !email_authority.value) {
- showToast(t('bindEmailTips'));
- return false
- }
- onChecked(currentType.value)
- if (time.value > 0) {
- return false
- }
- _sendVerifyCode({
- target: account.value,
- }).then((res) => {
- showToast(t('sendSuccess'));
- time.value = 30;
- timer.value = setInterval(() => {
- if (time.value > 0) {
- time.value = time.value - 1
+ .then(() => {
+ showToast(t("changeSuccess"));
+ setTimeout(() => router.push("/my/index"), 1000);
+ })
+ .catch((err) => {
+ const msg = err?.message || err?.msg;
+ if (msg && (msg.includes("旧密码") || msg.includes("incorrect") || msg.includes("wrong"))) {
+ showToast(t("旧密码不正确"));
} else {
- time.value = 0;
- clearTimer()
+ showToast(msg || t("fail"));
}
- }, 1000);
- })
-}
-
-const clearTimer = () => {
- clearInterval(timer.value)
- timer.value = null
-}
-
-onUnmounted(() => {
- clearTimer()
-})
-
+ });
+};
</script>
<style lang="scss" scoped>
-.changePassword {
- width: 100%;
+.change-funds-password {
+ min-height: 100vh;
+ background: #fff;
box-sizing: border-box;
}
-.line {
- width: 100%;
- height: 1px;
- background: $light-grey;
+.edit-content {
+ padding: 24px 16px;
}
-.content {
- padding: 16px;
- font-size: 13px;
-}
-
-.iptbox {
- height: 44px;
- margin-top: 8px;
- padding: 0 10px;
+.edit-input-wrap {
+ height: 48px;
+ margin-bottom: 20px;
+ padding: 0 16px;
+ background: #f5f5f5;
+ border-radius: 10px;
display: flex;
- justify-content: space-between;
align-items: center;
- border-radius: 3px;
+}
- input {
- flex: 1;
- height: 100%;
- border: none;
- }
+.edit-input {
+ flex: 1;
+ height: 100%;
+ border: none;
+ background: transparent;
+ font-size: 16px;
+ color: #333;
+ outline: none;
+}
- span {
- color: $color_main;
- }
+.edit-input::placeholder {
+ color: #999;
+}
+
+.edit-submit {
+ width: 100%;
+ margin-top: 40px;
+ padding: 16px 0;
+ border: none;
+ border-radius: 12px;
+ background: linear-gradient(90deg, #5e2bc8, #a443cf);
+ color: #fff;
+ font-size: 16px;
+ font-weight: 600;
+ cursor: pointer;
}
</style>
diff --git a/src/views/changePassword/index.vue b/src/views/changePassword/index.vue
index c5a2c79..8b29dee 100644
--- a/src/views/changePassword/index.vue
+++ b/src/views/changePassword/index.vue
@@ -1,70 +1,129 @@
<template>
- <div class="changePassword">
- <fx-header>
- <template #title>
- {{ $t('changeLoginPassword') }}
- </template>
- </fx-header>
- <div class="content">
- <ExInput :label="$t('oldPassword')" :placeholderText="$t('entryPassword')" v-model="oldPassword"
- typeText="password" />
- <ExInput :label="$t('newPassword')" :placeholderText="$t('entryPassword')" :tips="$t('setPasswordTips')"
- v-model="newPassword" typeText="password" />
- <ExInput :label="$t('sureNewPassword')" :placeholderText="$t('entryPassword')" :tips="$t('setPasswordTips')"
- v-model="rePassword" typeText="password" />
- <van-button class="w-full" style="margin-top:10px;" type="primary" @click="submit">{{ $t('sure') }}
- </van-button>
- </div>
+ <div class="change-password">
+ <assets-head :title="''" :show-left="true" />
+ <div class="edit-content">
+ <div class="edit-input-wrap">
+ <input
+ v-model="oldPassword"
+ type="password"
+ class="edit-input"
+ :placeholder="$t('oldPassword')"
+ />
+ </div>
+ <div class="edit-input-wrap">
+ <input
+ v-model="newPassword"
+ type="password"
+ class="edit-input"
+ :placeholder="$t('newPassword')"
+ />
+ </div>
+ <div class="edit-input-wrap">
+ <input
+ v-model="rePassword"
+ type="password"
+ class="edit-input"
+ :placeholder="$t('sureNewPassword')"
+ />
+ </div>
+ <button class="edit-submit" @click="submit">{{ $t('sure') }}</button>
</div>
+ </div>
</template>
<script setup>
-import ExInput from "@/components/ex-input/index.vue";
-import { _changePassword } from '@/service/user.api.js'
import { ref } from "vue";
import { showToast } from "vant";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
-const { t } = useI18n()
-const router = useRouter()
+import { _changePassword } from "@/service/user.api.js";
+import AssetsHead from "@/components/Transform/assets-head/index.vue";
-const oldPassword = ref('')
-const newPassword = ref('')
-const rePassword = ref('')
+const { t } = useI18n();
+const router = useRouter();
+
+const oldPassword = ref("");
+const newPassword = ref("");
+const rePassword = ref("");
const submit = () => {
- _changePassword({
- old_password: oldPassword.value,
- password: newPassword.value,
- re_password: rePassword.value,
- }).then((res) => {
- showToast(t('changeSuccess'))
- setTimeout(() => {
- router.push('/my/index')
- }, 1000);
+ if (!oldPassword.value) {
+ showToast(t("旧密码不能为空"));
+ return;
+ }
+ if (!newPassword.value || newPassword.value.length < 6) {
+ showToast(t("setPasswordTips"));
+ return;
+ }
+ if (newPassword.value !== rePassword.value) {
+ showToast(t("noSamePassword"));
+ return;
+ }
+ _changePassword({
+ old_password: oldPassword.value,
+ password: newPassword.value,
+ re_password: rePassword.value,
+ })
+ .then(() => {
+ showToast(t("changeSuccess"));
+ setTimeout(() => router.push("/my/index"), 1000);
})
-}
+ .catch((err) => {
+ const msg = err?.message || err?.msg;
+ if (msg && (msg.includes("旧密码") || msg.includes("incorrect") || msg.includes("wrong"))) {
+ showToast(t("旧密码不正确"));
+ } else {
+ showToast(msg || t("fail"));
+ }
+ });
+};
</script>
<style lang="scss" scoped>
-.changePassword {
- width: 100%;
- box-sizing: border-box;
+.change-password {
+ min-height: 100vh;
+ background: #fff;
+ box-sizing: border-box;
}
-.line {
- width: 100%;
- height: 2px;
- background: $light-grey;
+.edit-content {
+ padding: 24px 16px;
}
-.content {
- padding: 16px;
- font-size: 13px;
+.edit-input-wrap {
+ height: 48px;
+ margin-bottom: 20px;
+ padding: 0 16px;
+ background: #f5f5f5;
+ border-radius: 10px;
+ display: flex;
+ align-items: center;
}
-.hightLight {
- background: $btn_main;
- color: $text_color;
+.edit-input {
+ flex: 1;
+ height: 100%;
+ border: none;
+ background: transparent;
+ font-size: 16px;
+ color: #333;
+ outline: none;
+}
+
+.edit-input::placeholder {
+ color: #999;
+}
+
+.edit-submit {
+ width: 100%;
+ margin-top: 40px;
+ padding: 16px 0;
+ border: none;
+ border-radius: 12px;
+ background: linear-gradient(90deg, #5e2bc8, #a443cf);
+ color: #fff;
+ font-size: 16px;
+ font-weight: 600;
+ cursor: pointer;
}
</style>
diff --git a/src/views/cryptos/AccountChange/index.vue b/src/views/cryptos/AccountChange/index.vue
index 0a994a8..8c9f300 100644
--- a/src/views/cryptos/AccountChange/index.vue
+++ b/src/views/cryptos/AccountChange/index.vue
@@ -182,8 +182,14 @@
</script>
<style lang="scss" scoped>
@import "@/assets/init.scss";
-
+:deep(.app-content-wrap){
+ background-color: #F6F5FA !important;
+}
+.app-root{
+ background-color: #fff !important;
+}
#cryptos {
+ // background-color: #fff;
:deep(.van-tabs__wrap) {
// height: 88px !important;
border-bottom: 1px solid $icon-bg;
@@ -200,7 +206,7 @@
.accountChange {
width: 100%;
box-sizing: border-box;
-
+ background-color: #F6F5FA !important;
:deep(.van-tab--active .van-tab__text) {
@include themify() {
color: themed("text_color");
diff --git a/src/views/cryptos/AssetsCenter/components/history.css b/src/views/cryptos/AssetsCenter/components/history.css
index 3b41d34..60638b4 100644
--- a/src/views/cryptos/AssetsCenter/components/history.css
+++ b/src/views/cryptos/AssetsCenter/components/history.css
@@ -22,7 +22,7 @@
background-color: #F5D658; }
.green-round {
- background-color: #06CDA5; }
+ background-color: #06c16a; }
.red-round {
background-color: red; }
diff --git a/src/views/cryptos/Exchange/exchangePage.vue b/src/views/cryptos/Exchange/exchangePage.vue
index efdf765..d05beab 100644
--- a/src/views/cryptos/Exchange/exchangePage.vue
+++ b/src/views/cryptos/Exchange/exchangePage.vue
@@ -1,20 +1,8 @@
<template>
- <div id="cryptos">
- <van-nav-bar left-arrow @click-left="onClickLeft">
-
- <!-- <template #right>
- <van-icon class="exchange-icon" @click="$router.push('/cryptos/exchangeHistory')" name="clock-o" />
- </template> -->
- <template #title>
- <div class="flex items-center">
- {{ $t('闪兑') }}
- <div class="fee ex-bg"> {{ $t('0手续费') }}</div>
- </div>
-
- </template>
- </van-nav-bar>
+ <div id="cryptos" class="exchange-page-wrap">
+ <assets-head :title="$t('闪兑')" :show-left="true" :back-func="onClickLeft" />
<div class="exchange-page">
- <list-account show class="mt-94" type="exchange" @exchange="onPopup" ref="exchange" />
+ <list-account show type="exchange" @exchange="onPopup" ref="exchange" />
<van-popup class="tabBackground" v-model:show="show" position="bottom" :close-on-click-overlay="false"
@close="onClose">
<div class="pop-box relative">
@@ -79,7 +67,7 @@
<script>
import assetsHead from "@/components/Transform/assets-head/index.vue";
-import ListAccount from '@/components/Transform/mining-account/index.vue'
+import ListAccount from '@/components/Transform/mining-account/index.vue';
import { _initExchange, _exchange } from "@/service/fund.api";
import { Popup, showToast } from "vant"
import { HOST_URL } from '@/config'
@@ -164,61 +152,27 @@
}
</script>
+<style lang="scss" scoped>
+@import "@/assets/init.scss";
+
+.exchange-page-wrap {
+ min-height: 100vh;
+ background: #f9f9f9;
+}
+.exchange-page {
+ padding: 29px 24px 38px;
+ width: 100%;
+ box-sizing: border-box;
+}
+</style>
<style lang="scss">
@import "@/assets/init.scss";
-#cryptos {
- :deep(.van-icon) {
- color: red;
- }
-
- .exchange-page {
- height: 100vh - 6vh;
-
- background: $selectSymbol_background;
-
- :deep(.van-tab--active) {
- background: $selectSymbol_background;
- color: $text_color;
- }
-
- :deep(.van-nav-bar) {
- // background: $selectSymbol_background;
- }
-
- :deep(.van-tabs__nav) {
- background: $selectSymbol_background;
- }
-
- :deep(.van-nav-bar__title) {
- color: $text_color;
- }
-
- :deep(.van-hairline--bottom::after) {
- border-bottom-width: 0px;
- }
-
- :deep(.van-nav-bar .van-icon) {
- color: $text_color;
-
- font-size: 40px;
- }
- }
-
- .bg-grey-light {
- background: $light-grey;
- }
-
- .bg-grey-dark {
- background: $light-grey;
- }
-
-
+#cryptos.exchange-page-wrap {
.fee {
- // background: #21353A;
border-radius: 4px;
color: #00B087;
- font-size: 24px;
+ font-size: 1.6rem;
padding: 5px 10px;
margin-left: 10px;
}
diff --git a/src/views/cryptos/Funds/components/history.css b/src/views/cryptos/Funds/components/history.css
index 3b41d34..60638b4 100644
--- a/src/views/cryptos/Funds/components/history.css
+++ b/src/views/cryptos/Funds/components/history.css
@@ -22,7 +22,7 @@
background-color: #F5D658; }
.green-round {
- background-color: #06CDA5; }
+ background-color: #06c16a; }
.red-round {
background-color: red; }
diff --git a/src/views/cryptos/PerpetualContract/index.vue b/src/views/cryptos/PerpetualContract/index.vue
index 80a0a23..34bcedb 100644
--- a/src/views/cryptos/PerpetualContract/index.vue
+++ b/src/views/cryptos/PerpetualContract/index.vue
@@ -717,7 +717,6 @@
.trade_new {
color: $log-c;
- background: $mainbgWhiteColor;
min-height: 100vh;
padding: 1.4rem 1.4rem 7rem 1.4rem;
diff --git a/src/views/cryptos/Recharge/rechargeList.vue b/src/views/cryptos/Recharge/rechargeList.vue
index 467d775..3880072 100644
--- a/src/views/cryptos/Recharge/rechargeList.vue
+++ b/src/views/cryptos/Recharge/rechargeList.vue
@@ -1,162 +1,466 @@
<template>
- <div id="cryptos">
- <div class="recharge box-border">
- <assets-head :title="$t('充值通道')" v-if="!isForeign" :back-func="backFunc">
- <img src="../../../assets/image/assets-center/exchange.png" alt="exchange-img" class="w-44 h-38"
- @click="goRouter('/cryptos/assetsCenter/rechargeWithdrawRecord')" />
- </assets-head>
- <assets-head v-else :title="$t('充值通道')">
- <img src="../../../assets/image/assets-center/exchange.png" alt="exchange-img" class="w-44 h-38"
- @click="goRouter('/cryptos/assetsCenter/rechargeWithdrawRecord')" />
- </assets-head>
- <div class="pl-36 pr-36">
- <div class="recharge-title font-35 textColor">{{ $t('请选择充值币种') }}</div>
- <div class="recharge-list flex justify-between">
- <div class="item-view flex flex-col items-center justify-center text-center w-189 h-220 box-border"
- @click="selectSymbol('usdt')">
- <img :src="`${HOST_URL}/symbol/usdt.png`" class="w-92 h-92" />
- <div class="text-grey font-26 mt-32">{{ $t('USDT充值') }}</div>
- </div>
- <div class="item-view flex flex-col items-center justify-center text-center w-189 h-220 box-border"
- @click="selectSymbol('usdc')">
- <img :src="`${HOST_URL}/symbol/usdc.png`" class="w-92 h-92" />
- <div class="text-grey font-26 mt-32">{{ $t('USDC充值') }}</div>
- </div>
- <div class="item-view flex flex-col items-center justify-center text-center w-189 h-220 box-border"
- @click="selectSymbol('btc')">
- <img :src="`${HOST_URL}/symbol/btc.png`" class="w-92 h-92" />
- <div class="text-grey font-26 mt-32">{{ $t('BTC充值') }}</div>
- </div>
- <div class="item-view flex flex-col items-center justify-center text-center w-189 h-220 box-border"
- @click="selectSymbol('eth')">
- <img :src="`${HOST_URL}/symbol/eth.png`" class="w-92 h-92" />
- <div class="text-grey font-26 mt-32">{{ $t('ETH充值') }}</div>
+ <div id="cryptos" class="deposit-page">
+ <assets-head :title="$t('订金')" :show-left="true" :back-func="onBack">
+ <template v-if="step === 'list'">
+ <img
+ src="../../../assets/image/assets-center/exchange.png"
+ alt=""
+ class="deposit-head-icon"
+ @click="goRouter('/cryptos/assetsCenter/rechargeWithdrawRecord')"
+ />
+ </template>
+ </assets-head>
+
+ <!-- 图一：列表 -->
+ <template v-if="step === 'list'">
+ <div class="deposit-body">
+ <div class="deposit-search-wrap">
+ <van-icon name="search" class="deposit-search-icon" />
+ <input
+ v-model="searchKeyword"
+ type="text"
+ class="deposit-search-input"
+ :placeholder="$t('search')"
+ />
+ </div>
+ <div class="deposit-section-title">{{ $t('Popular coins') }}</div>
+ <div class="deposit-popular">
+ <div class="deposit-coin-btn" @click="selectCoin('usdt')">USDT</div>
+ </div>
+ <div class="deposit-section-title">{{ $t('List of coins') }}</div>
+ <div class="deposit-coin-list">
+ <div
+ v-for="item in filteredCoins"
+ :key="item.symbol"
+ class="deposit-coin-item"
+ @click="selectCoin(item.symbol)"
+ >
+ <img :src="`${HOST_URL}/symbol/${item.symbol}.png`" alt="" class="deposit-coin-icon" />
+ <span class="deposit-coin-symbol">{{ item.symbol.toUpperCase() }}</span>
</div>
</div>
</div>
+ </template>
- <div class="reminder">{{ $t('充值提示') }}</div>
-
- <!-- <div class="textColor mt-40">
- <div class="pl-36 pr-36 h-90 lh-90 border-b-color flex justify-between font-28" v-for="(item, index) in list"
- :key="index" @click="toPath(item.url)">
- <div class="flex items-center">
- <img :src="handleImage(item.imgPath)" class="w-44 h-44 rounded-full mr-20" />
- <span class="textColor">{{ item.name }} {{ $t('官方充值通道') }}</span>
- </div>
- <div>
- <van-icon class="textColor" name="arrow" />
+ <!-- 图二：已选币种 + 选择网络 -->
+ <template v-else>
+ <div class="deposit-body deposit-body-selected">
+ <div class="deposit-card" @click="step = 'list'">
+ <img :src="`${HOST_URL}/symbol/${selectedSymbol}.png`" alt="" class="deposit-card-icon" />
+ <span class="deposit-card-symbol">{{ selectedSymbol.toUpperCase() }}</span>
+ <van-icon name="arrow" class="deposit-card-arrow" />
+ </div>
+ <div class="deposit-card deposit-card-network">
+ <div class="deposit-network-label">{{ $t('Deposit network') }}</div>
+ <div class="deposit-choice-btn" @click="showNetworkSheet = true">
+ <span class="deposit-choice-text">{{ selectedChain ? selectedChain.blockchain_name : $t('Choice Network') }}</span>
+ <van-icon name="arrow-down" class="deposit-choice-arrow" />
</div>
</div>
- </div> -->
- </div>
+
+ <!-- 选中网络后下方显示充值详情 -->
+ <div v-if="selectedChain && selectedChain.address" class="deposit-detail">
+ <div class="deposit-detail-qr-wrap">
+ <canvas ref="qrcodeCanvas" class="deposit-detail-qr"></canvas>
+ </div>
+ <div class="deposit-detail-address-label">{{ $t('Deposit address') }}:</div>
+ <div class="deposit-detail-address-row">
+ <span class="deposit-detail-address-text">{{ selectedChain.address }}</span>
+ <img :src="copyImg" alt="copy" class="deposit-detail-copy-btn" @click="copyAddress" />
+ </div>
+ </div>
+ </div>
+ </template>
+
+ <!-- 图三：底部弹框 选择充值链 -->
+ <van-action-sheet
+ v-model:show="showNetworkSheet"
+ class="deposit-sheet"
+ >
+ <div class="deposit-sheet-content">
+ <div class="deposit-sheet-head">
+ <span class="deposit-sheet-title">{{ $t('Choice Network') }}</span>
+ <van-icon name="cross" class="deposit-sheet-close" @click="showNetworkSheet = false" />
+ </div>
+ <p class="deposit-sheet-tip">
+ {{ $t('Tip: choose a network consistent with the withdraw platform to top up, otherwise you will lose this funds') }}
+ </p>
+ <div
+ v-for="(chain, index) in chainList"
+ :key="index"
+ class="deposit-sheet-item"
+ @click="onSelectChain(chain)"
+ >
+ {{ chain.blockchain_name }}
+ </div>
+ </div>
+ </van-action-sheet>
</div>
</template>
<script>
-import assetsHead from "@/components/Transform/assets-head/index.vue";
-import { HOST_URL } from '@/config'
-import { Icon } from 'vant';
+import QRCode from 'qrcode';
+import { showToast } from 'vant';
+import assetsHead from '@/components/Transform/assets-head/index.vue';
+import { HOST_URL } from '@/config';
+import Axios from '@/service/recharge.js';
+import copyImg from '@/assets/imgs/new/copy.png';
+
+const COINS = [
+ { symbol: 'usdt', name: 'USDT' },
+ { symbol: 'usdc', name: 'USDC' },
+ { symbol: 'btc', name: 'BTC' },
+ { symbol: 'eth', name: 'ETH' },
+];
+
export default {
name: 'rechageList',
- components: {
- assetsHead,
- [Icon.name]: Icon,
- },
+ components: { assetsHead },
data() {
return {
- list: [
- {
- name: 'Huobi',
- url: 'https://www.huobi.com/en-us/',
- imgPath: new URL('@/assets/image/huobi.png', import.meta.url),
- },
- {
- name: 'Binance',
- url: 'https://www.binance.com/en',
- imgPath: new URL('@/assets/image/bian.png', import.meta.url),
- },
- {
- name: 'Coinbase',
- url: 'https://www.coinbase.com/',
- imgPath: new URL('@/assets/image/coinbase.png', import.meta.url),
- },
- {
- name: 'Crypto',
- url: 'https://www.crypto.com/',
- imgPath: new URL('@/assets/image/crypto.png', import.meta.url),
- }
- ],
- isForeign: false,
HOST_URL,
- }
+ step: 'list',
+ searchKeyword: '',
+ selectedSymbol: '',
+ chainList: [],
+ selectedChain: null,
+ showNetworkSheet: false,
+ isForeign: false,
+ copyImg,
+ };
+ },
+ computed: {
+ filteredCoins() {
+ const k = (this.searchKeyword || '').trim().toLowerCase();
+ if (!k) return COINS;
+ return COINS.filter((c) => c.symbol.toLowerCase().includes(k) || c.name.toLowerCase().includes(k));
+ },
},
created() {
if (this.$route.query.isForeign) {
- this.isForeign = this.$route.query.isForeign
+ this.isForeign = this.$route.query.isForeign;
}
},
methods: {
- handleImage(url) {
- return new URL(url, import.meta.url).href
+ onBack() {
+ if (this.step === 'selected') {
+ this.step = 'list';
+ this.selectedSymbol = '';
+ this.selectedChain = null;
+ this.chainList = [];
+ } else {
+ this.$router.push('/quotes/index?tabActive=1');
+ }
},
- toPath(url) {
- const a = document.createElement('a');
- a.href = url;
- a.target = "_bank";
- document.body.append(a);
- a.click();
- document.body.removeChild(a)
- // if (navigator.userAgent.search('Html5Plus') != -1) {
- // plus.runtime.openURL(url)
- // } else {
- // window.open(url)
- // }
+ selectCoin(symbol) {
+ this.selectedSymbol = symbol;
+ this.selectedChain = null;
+ this.chainList = [];
+ Axios.getBlock({ coin: symbol })
+ .then((res) => {
+ this.chainList = Array.isArray(res) ? res : [];
+ this.step = 'selected';
+ })
+ .catch(() => {
+ this.chainList = [];
+ this.step = 'selected';
+ });
},
- backFunc() {
- this.$router.push('/quotes/index?tabActive=1')
+ onSelectChain(chain) {
+ this.selectedChain = chain;
+ this.showNetworkSheet = false;
+ this.$nextTick(() => this.drawQR());
},
- selectSymbol(symbol) {
- this.$router.push({
- path: "/cryptos/recharge/rechargePage",
- query: {
- 'symbol': symbol
- }
- });
+ drawQR() {
+ if (!this.selectedChain || !this.selectedChain.address || !this.$refs.qrcodeCanvas) return;
+ const opts = {
+ errorCorrectionLevel: 'H',
+ width: 200,
+ margin: 4,
+ color: { dark: '#333333', light: '#fff' },
+ };
+ QRCode.toCanvas(this.$refs.qrcodeCanvas, this.selectedChain.address, opts, () => {});
},
- goRouter(params) {
- this.$router.push({
- path: params,
- query: {
- back: "1"
- }
- });
- }
- }
-}
+ copyAddress() {
+ const address = this.selectedChain?.address;
+ if (!address) return;
+ if (typeof navigator !== 'undefined' && navigator.clipboard && navigator.clipboard.writeText) {
+ navigator.clipboard.writeText(address).then(() => showToast(this.$t('复制成功'))).catch(() => this.copyFallback(address));
+ } else {
+ this.copyFallback(address);
+ }
+ },
+ copyAddressFallback(text) {
+ this.copyFallback(text);
+ },
+ copyFallback(text) {
+ const textarea = document.createElement('textarea');
+ textarea.value = text;
+ textarea.style.position = 'fixed';
+ textarea.style.opacity = '0';
+ document.body.appendChild(textarea);
+ textarea.select();
+ try {
+ document.execCommand('copy');
+ showToast(this.$t('复制成功'));
+ } catch (e) {}
+ document.body.removeChild(textarea);
+ },
+ goRouter(path) {
+ this.$router.push({ path, query: { back: '1' } });
+ },
+ },
+};
</script>
+
<style lang="scss" scoped>
-@import "@/assets/init.scss";
+.deposit-page {
+ min-height: 100vh;
+ background: #fff !important;
+ padding-bottom: 2.5rem;
+}
+.deposit-head-icon {
+ width: 1.375rem;
+ height: 1.1875rem;
+}
-#cryptos {
- .recharge {
- width: 100%;
- box-sizing: border-box;
- }
+.deposit-body {
+ padding: 1rem 1.5rem;
+}
+.deposit-body-selected {
+ padding-top: 1.5rem;
+}
- .recharge-title {
- margin: 86px 0 104px 0;
- }
+/* 图一：搜索 */
+.deposit-search-wrap {
+ display: flex;
+ align-items: center;
+ height: 3.25rem;
+ padding: 0 1rem;
+ background: #f5f5f5;
+ border-radius: 0.5rem;
+ margin-bottom: 1.5rem;
+}
+.deposit-search-icon {
+ color: #999;
+ font-size: 28px;
+ margin-right: 0.75rem;
+}
+.deposit-search-input {
+ flex: 1;
+ border: none;
+ background: transparent;
+ font-size: 28px;
+ outline: none;
+}
+.deposit-search-input::placeholder {
+ color: #9b9b9b;
+}
- .recharge-list>div {
- border: 2px solid $bg_dark;
- border-radius: 15px;
- box-sizing: border-box;
- }
+.deposit-section-title {
+ font-size: 26px;
+ color: #9b9b9b;
+ margin-bottom: 0.75rem;
+}
+.deposit-popular {
+ margin-bottom: 1.5rem;
+}
+.deposit-coin-btn {
+ display: inline-block;
+ padding: 0.875rem 1.75rem;
+ background: #f5f5f5;
+ border-radius: 0.5rem;
+ font-size: 28px;
+ color: #333;
+ cursor: pointer;
+}
+.deposit-coin-list {
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+}
+.deposit-coin-item {
+ display: flex;
+ align-items: center;
+ padding: 1.125rem 0;
+ border-bottom: 1px solid #f0f0f0;
+ cursor: pointer;
+}
+.deposit-coin-item:last-child {
+ border-bottom: none;
+}
+.deposit-coin-icon {
+ width: 3rem;
+ height: 3rem;
+ border-radius: 50%;
+ margin-right: 1rem;
+}
+.deposit-coin-symbol {
+ font-size: 28px;
+ color: #333;
+ font-weight: 500;
+}
- .reminder {
- font-size: 2rem;
- padding: 2rem;
- }
+/* 图二：卡片 */
+.deposit-card {
+ background: #f6f6f6;
+ border-radius: 0.5rem;
+ padding: 1.25rem;
+ margin-bottom: 1.5rem;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+}
+/* 第一个卡片：图标+币种+箭头同一行 */
+.deposit-card:first-child {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+}
+.deposit-card:first-child .deposit-card-icon {
+ flex-shrink: 0;
+}
+.deposit-card:first-child .deposit-card-symbol {
+ flex: 1;
+ min-width: 0;
+}
+.deposit-card:first-child .deposit-card-arrow {
+ flex-shrink: 0;
+ margin-top: 0;
+}
+.deposit-card-network {
+ cursor: default;
+}
+.deposit-card-icon {
+ width: 3.25rem;
+ height: 3.25rem;
+ border-radius: 50%;
+ margin-right: 1rem;
+ vertical-align: middle;
+}
+.deposit-card-symbol {
+ font-size: 28px;
+ color: #333;
+ font-weight: 600;
+ vertical-align: middle;
+}
+.deposit-card-arrow {
+ color: #999;
+ font-size: 28px;
+}
+.deposit-network-label {
+ font-size: 26px;
+ color: #9b9b9b;
+ margin-bottom: 0.625rem;
+}
+.deposit-choice-btn {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.875rem 10px;
+ border-radius: 10px;
+ cursor: pointer;
+ background-color: #fff;
+}
+.deposit-choice-text {
+ font-size: 28px;
+ color: #333;
+}
+.deposit-choice-arrow {
+ color: #999;
+ font-size: 28px;
+}
+.deposit-next-btn {
+ width: 100%;
+ height: 3.5rem;
+ margin-top: 1.5rem;
+ border: none;
+ border-radius: 0.5rem;
+ background: linear-gradient(90deg, #a443cf, #5e2bc8);
+ color: #fff;
+ font-size: 28px;
+ font-weight: 600;
+ cursor: pointer;
+}
+
+/* 图三：底部弹框 */
+.deposit-sheet-content {
+ padding: 0 1.5rem 2rem;
+ background-color: #fff;
+}
+.deposit-sheet-head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 2.5rem 0.75rem;
+ margin-bottom: 0.75rem;
+}
+.deposit-sheet-title {
+ font-size: 35px;
+ font-weight: 600;
+ color: #333;
+}
+.deposit-sheet-close {
+ font-size: 28px;
+ color: #999;
+ cursor: pointer;
+}
+.deposit-sheet-tip {
+ font-size: 26px;
+ line-height: 1.5;
+ margin-bottom: 1.75rem;
+ padding: 20px 10px;
+ background-color: #F6F6F6;
+}
+.deposit-sheet-item {
+ padding: 2rem 1.5rem;
+ border-radius: 1rem;
+ margin-bottom: 0.75rem;
+ font-size: 35px;
+ color: #333;
+ cursor: pointer;
+ border: 1px solid #f2f2f2;
+}
+.deposit-sheet-item:last-child {
+ margin-bottom: 0;
+}
+
+/* 充值详情：二维码 + 地址（选中网络后下方显示） */
+.deposit-detail {
+ margin-top: 1.5rem;
+ padding: 1.5rem 0;
+ border-top: 1px solid #f0f0f0;
+ text-align: left;
+}
+.deposit-detail-qr-wrap {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 1.25rem;
+}
+.deposit-detail-qr {
+ display: block;
+}
+.deposit-detail-address-label {
+ font-size: 26px;
+ color: #9b9b9b;
+ margin-bottom: 0.5rem;
+}
+.deposit-detail-address-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.5rem;
+}
+.deposit-detail-address-text {
+ flex: 1;
+ min-width: 0;
+ font-size: 26px;
+ color: #333;
+ word-break: break-all;
+}
+.deposit-detail-copy-btn {
+ width: 2.5rem;
+ height: 2.5rem;
+ cursor: pointer;
+ flex-shrink: 0;
+ object-fit: contain;
}
</style>
diff --git a/src/views/cryptos/Recharge/rechargePage.vue b/src/views/cryptos/Recharge/rechargePage.vue
index e21618e..5c564ff 100644
--- a/src/views/cryptos/Recharge/rechargePage.vue
+++ b/src/views/cryptos/Recharge/rechargePage.vue
@@ -134,8 +134,14 @@
}).then((res) => {
this.chainList = res;
- this.address = res[0].address;
- this.blockchain_name = res[0].blockchain_name;
+ const wantName = this.$route.query.blockchain_name;
+ const idx = wantName && res.length
+ ? res.findIndex((c) => (c.blockchain_name || '').toLowerCase() === (wantName || '').toLowerCase())
+ : -1;
+ const i = idx >= 0 ? idx : 0;
+ this.blockchainIndex = i;
+ this.address = res[i].address;
+ this.blockchain_name = res[i].blockchain_name;
this.getQRCode();
});
diff --git a/src/views/cryptos/Recharge/rechargeSubmit.vue b/src/views/cryptos/Recharge/rechargeSubmit.vue
index 50a843b..277b79d 100644
--- a/src/views/cryptos/Recharge/rechargeSubmit.vue
+++ b/src/views/cryptos/Recharge/rechargeSubmit.vue
@@ -37,7 +37,6 @@
import { Image as VanImage } from 'vant';
import assetsHead from "@/components/Transform/assets-head/index.vue";
import { dataTimeEx } from '@/utils/utis'
-import { customerServiceUrl } from "@/config";
export default {
name: 'rechargeSubmit',
components: {
@@ -74,11 +73,7 @@
this.time = dataTimeEx(Date.parse(new Date()), true);
},
tokefu() {
- if (customerServiceUrl()) {
- window.location.href = customerServiceUrl();
- } else {
- this.$router.push('/customerService')
- }
+ this.$router.push('/customerService');
}
}
}
diff --git a/src/views/cryptos/Trade/index.vue b/src/views/cryptos/Trade/index.vue
index bd101b6..be1dfa8 100644
--- a/src/views/cryptos/Trade/index.vue
+++ b/src/views/cryptos/Trade/index.vue
@@ -15,6 +15,7 @@
<trade-head :isReturn="true" :backFunc="() => $router.push('/')" :symbolName="symbolName" :symbol="symbol"
:price="price" :range="range" :isTrade="true" @update-coin="onUpdate" @data="quote = $event" />
+ <div class="trade-content-bg">
<div class="trade-buy-sell flex justify-between px-30 py-30">
<trade-order-area :symbol="symbol" :symbolName="symbolName" :init-open="initOpen" :init-close="initClose"
:price="price" @ordered="onOrdered" />
@@ -23,10 +24,9 @@
v-if="symbol" :price="price" class="w-290 ml-30" />
</keep-alive>
</div>
- <div class="flex k-select-box">
+ <!-- <div class="flex k-select-box">
<div class="mt-20 mb-22 select-box" style="position:relative;">
<div class=" flex justify-between items-center w-full h-70" @click="selectBtn">
- <!-- <img src="@/assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20"/> -->
<div class="pl-16 font-28 textColor" style="width:80%;">{{ title }}</div>
<img src="../../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 mr-20" />
</div>
@@ -40,7 +40,7 @@
<div class="ml-10" @click="isSelectShow = true">
<img src="../../../assets/image/selectIcon.png" alt="warn-icon" class="w-36 h-30" />
</div>
- </div>
+ </div> -->
<div class="h-16 diviLine"></div>
<div>
<div class="flex justify-between border-b-color items-center">
@@ -140,6 +140,7 @@
</div> -->
<van-action-sheet class="action-sheet" v-model:show="isSelectShow" @select="onSelect" :actions="actions"
:cancel-text="$t('取消')" close-on-click-action @cancel="onCancel" />
+ </div>
</div>
</div>
</template>
@@ -548,6 +549,11 @@
#cryptos {
background-color: $mainbgWhiteColor;
+ .trade-content-bg {
+ background: #fff;
+ border-radius: 15px;
+ }
+
:v-deep(.px-4) {
padding-left: 30px !important;
padding-right: 30px !important;
@@ -608,6 +614,8 @@
border-top-right-radius: 20px;
padding: 0 30px;
box-sizing: border-box;
+ // background-color: #fff !important;
+ border-radius: 10px;
}
.my-swipe {
diff --git a/src/views/cryptos/TrendDetails/index.vue b/src/views/cryptos/TrendDetails/index.vue
index 81cc86b..c66ad13 100644
--- a/src/views/cryptos/TrendDetails/index.vue
+++ b/src/views/cryptos/TrendDetails/index.vue
@@ -1,17 +1,17 @@
<template>
- <div id="cryptos">
- <div class="trend-detail pb-90" :class="isNight ? 'bg-night' : 'bg-white'">
+ <div id="cryptos" :class="{ 'trend-detail-white': kineType === 'trade' }">
+ <div class="trend-detail pb-90" >
<trade-head :backFunc="() => $router.push('/')" :symbol="symbol" :islevel="true" @update-coin="onUpdate"
@data="quote = $event" :title="$t('永续')" @changeLine="onChangeLine" :isNight="isNight" :isChange="isChange"
:kineType="kineType" :tabIndex="tab" @changeNight="OnchangeNight" :symbolName="quote.name" />
- <div class="flex justify-between px-32 pt-40" v-if="!kineType">
+ <!-- <div class="flex justify-between px-32 pt-40" v-if="!kineType">
<div class="w-368 h-80 mr-32 font-28 flex justify-center items-center rounded-ban box-border tabBtn"
:class="tab === '1' ? 'activeBtn' : ''" @click="onTab('1')">{{ $t('永续合约') }}</div>
<div class="w-368 h-80 font-28 flex justify-center items-center rounded-ban box-border tabBtn"
:class="tab === '2' ? 'activeBtn' : ''" @click="onTab('2')">{{ queryType == 'cryptos' ? $t('交割合约') :
$t('期货交易')
}}</div>
- </div>
+ </div> -->
<!-- 数据区 -->
<div :class="{ slide2: animated1, slide1: animated2 }">
<div class="data-index">
@@ -53,13 +53,13 @@
<span>{{ quote.market.time_zone && $t(quote.market.time_zone) }}</span>
</p>
<!-- k line-->
- <div class="mt-35 h-482-px">
+ <div class="mt-35 h-482-px ">
<kline-charts :update-key="updateKey" :update-data="quote" :isChangeLine="isChangeLine" :symbol="symbol"
v-if="symbol" @updataLine="isChangeLine = false" :isNight="isNight" :isChange="isChange" />
</div>
- <div class="w-full h-20 " :class="isNight ? 'bg-black' : 'bg-grey'"></div>
+ <div class="w-full h-20 " ></div>
<!-- tab 区域-->
- <div class="pb-180 tabContent">
+ <div class="pb-180 tabContent" style="background-color: #fff !important;">
<van-tabs v-model:active="active">
<van-tab :title="$t('entrustOrder')" name="1">
<div class="flex px-32 justify-between px-32">
@@ -104,102 +104,12 @@
</ul>
</div>
</van-tab>
- <van-tab :title="$t('最新交易')" name="2">
- <ul class="px-32 font-28 text-grey">
- <li class="flex justify-between mt-30">
- <span class="flex-1">{{ $t('时间') }}</span>
- <span class="flex-1">{{ $t('方向') }}</span>
- <span class="flex-1">{{ $t('价格') }}{{ queryType == 'cryptos' ? '(USDT)' : '(USD)' }}</span>
- <span class="flex-1 flex justify-center buy-title">{{ $t('数量') }}({{ symbolData.toUpperCase()
- }})</span>
- </li>
- <li v-for="(item, index) in deals" :key="item.ts + item.price + item.amount || index"
- class="flex justify-between mt-30">
- <span class="flex-1">{{ item.current_time ? item.current_time : '--' }}</span>
- <span :class="item.direction === 'buy' ? 'text-green' : 'text-red'" class="flex-1">{{
- item.direction === 'buy' ? $t('买入') : $t('卖出') }}</span>
- <span :class="item.direction === 'buy' ? 'text-green' : 'text-red'"
- class="flex-1 flex-justify-center">{{ item.price || '--' }}</span>
- <span class="flex-1 flex justify-center">{{ item.amount || '--' }}</span>
- </li>
- </ul>
- </van-tab>
- <van-tab :title="$t('深度图')" name="3">
- <div class="buy-sell-box">
- <div class="buy-item font-28">
- <div class="bg-line"></div>
- {{ $t('买盘') }}
- </div>
- <div class="sell-item font-28">
- <div class="bg-line"></div>
- {{ $t('卖盘') }}
- </div>
- </div>
- <div class="deep-chart-box">
- <deep-chart :deepBuy="deepBuy" :deepSell="deepSell"></deep-chart>
- </div>
- </van-tab>
- <!-- <van-tab :title="$t('数据分析')" name="4">
- <div class="capital-box">
- <div class="capital-flows">
- <span class="title">资金流向分析</span><van-icon name="warning-o" />
- </div>
- <div class="tab-box">
- <div class="tab-item" v-for="(item, index) in 10">
- 15M
- </div>
- </div>
- <div class="pie-box">
- <pie-chart></pie-chart>
- </div>
- <div class="order-box">
- <div class="order-header">
- <div class="flex-item">订单类型</div>
- <div class="flex-item">买入</div>
- <div class="flex-item">卖出</div>
- <div class="flex-item">净流入</div>
- </div>
- <div class="order-main flex" v-for="(item, index) in 4" :key="index">
- <div class="flex-item">大单</div>
- <div class="flex-item text-red">9.3720</div>
- <div class="flex-item text-red">3.0200</div>
- <div class="flex-item text-green">6.3400</div>
- </div>
- </div>
-
- <div class="capital-title">
- <span class="title">5*24小时大单流入（{{ symbol.toUpperCase() }}）</span>
- <div class="text">5日主力净流入 -348.9411</div>
- </div>
- <div class="cylinder-kline">
- <cylinder-chart></cylinder-chart>
- </div>
- <div class="capital-title">
- <span class="title">24小时资金流入（{{ symbol.toUpperCase() }}）</span>
- </div>
- <div class="inflow-kline">
- <inflow-kline></inflow-kline>
- </div>
- </div>
- </van-tab> -->
- <!-- <van-tab :title="$t('币种简介')" name="3" class="border-t-color" v-if="this.$te(`${symbol}简介`)">-->
- <!-- <div class="px-20 py-20 font-40 text-grey">-->
- <!-- {{ $t('关于名称',{'symbol':symbol.toUpperCase() }) }}-->
- <!-- </div>-->
- <!-- <div class="px-20 py-20 font-32 text-grey">-->
- <!-- {{ $t(`${symbol}简介`,{'symbol':symbol.toUpperCase() }) }}-->
- <!-- </div>-->
- <!-- </van-tab>-->
</van-tabs>
</div>
<!-- 按钮区 -->
<div
class="flex pl-40 pt-20 pb-11 pr-32 text-white justify-between fixed w-full box-border h-90-px z-10 buttonSafe"
- v-if="!kineType" :class="isNight ? 'bg-night1' : 'bg-grey'">
- <!-- <div class="flex flex-col mx-30 items-center" @click="onRoute('/cryptos/exchangeRate')">
- <img src="@/assets/image/icon-rate.png" class="w-38 h-38" />
- <p class="font-25 text-grey mt-8 text-center">{{ $t('汇率') }}</p>
- </div> -->
+ v-if="!kineType" style="background-color: #fff !important;">
<div ref="toBuy" class="w-360 h-70 bg-green flex justify-center items-center rounded-ban font-28"
@click=" onSubmit('buy')">
{{ tab == 1 ? $t('开多') : $t('买多') }}
@@ -538,10 +448,23 @@
<style lang="scss" scoped>
@import "@/assets/init.scss";
+#cryptos.trend-detail-white {
+ background: #fff;
+ min-height: 100%;
+ :deep(.van-tabs__nav) {
+ background-color: #fff !important;
+ }
+ :deep(.van-tabs__content) {
+ background-color: #fff;
+ }
+}
#cryptos {
+ background-color: #fff !important;
:deep(.van-tabs__wrap) {
height: 60px !important;
+ background-color: #fff !important;
+
}
}
@@ -550,7 +473,7 @@
}
:deep(.van-tabs__nav) {
- background-color: $night !important;
+ // background-color: $night !important;
// background-color: $inp-b !important;
}
@@ -623,6 +546,7 @@
}
.pb-180 {
+ background-color: #fff !important;
:deep(.van-tab) {
flex: initial;
padding: 0 2rem !important;
diff --git a/src/views/cryptos/Withdraw/withdrawPage.vue b/src/views/cryptos/Withdraw/withdrawPage.vue
index 8fe9396..dfb9f9d 100644
--- a/src/views/cryptos/Withdraw/withdrawPage.vue
+++ b/src/views/cryptos/Withdraw/withdrawPage.vue
@@ -1,152 +1,99 @@
<template>
- <div id="cryptos">
- <div class="withdrawl-page font-28">
- <assets-head title="">
- <img src="../../../assets/image/assets-center/exchange.png" alt="exchange-img" class="w-44 h-38"
- @click="goRouter('/cryptos/assetsCenter/rechargeWithdrawRecord')" />
- </assets-head>
- <div class="px-32 pb-48">
- <!--<h1 class="font-52 pt-40 textColor">{{ $t('提币') }} USDT</h1>-->
- <h1 class="font-52 pt-40 textColor">{{ $t('提币 ') + value }} </h1>
- <!--<p class="text-grey font-30 mt-26">{{ $t('提币 USDT 到数字币地址') }}</p>-->
- <p class="text-grey font-30 mt-26">{{ $t('提币 ') + value + $t(' 到数字币地址') }}</p>
- <div @click="showSymbol = true"
- class="flex border-grey items-center items-center justify-between rounded-lg mt-42 inputBackground textColor">
- <input disabled v-model="value" class="flex-1 h-100 border-none px-16 inputBackground textColor" />
- <p class="flex items-center">
- <span>{{ $t('选择币种') }}</span>
- <img src="@/assets/image/icon-left_arrow.png" alt="logo" class="w-20 h-33 ml-30 mr-40"
- style="transform: rotate(-90deg)" />
- </p>
+ <div id="cryptos" class="withdraw-wrap">
+ <assets-head :title="$t('提取')" :show-left="true" :back-func="goBack">
+ <img src="../../../assets/image/assets-center/exchange.png" alt="" class="withdraw-head-icon"
+ @click="goRouter('/cryptos/assetsCenter/rechargeWithdrawRecord')" />
+ </assets-head>
+
+ <!-- 第一部分：转账网络 + 选择币种 -->
+ <div class="withdraw-part withdraw-part-1">
+ <div class="withdraw-row" @click="showNetworkSheet = true">
+ <span class="withdraw-label">{{ $t('转账网络') }}</span>
+ <div class="withdraw-row-right">
+ <span class="withdraw-value">{{ blockName || '–' }}</span>
+ <van-icon name="arrow" class="withdraw-arrow" />
</div>
- <p class="font-35 mt-44 textColor">{{ $t('区块链网络') }}</p>
- <ul class="flex mt-22 flex-wrap">
- <li class="w-210 h-96 mb-20 mr-40 rounded rounded-lg border border-solid flex justify-center items-center textColor"
- :class="blockchainIndex == index ? 'active' : ''" v-for="(item, index) in blockList"
- :key="item.id" @click="changeBlockchain(item, index)">{{ item.blockchain_name }}</li>
- </ul>
- <p class="font-35 mt-22 textColor">{{ $t('地址') }}</p>
- <div class="inputBackground flex items-center justify-between h-96 rounded mt-22">
- <input :placeholder="$t('长按粘贴')" class="h-full flex-1 border-none bg-none px-16 textColor"
- v-model="address" />
- <div class="flex items-center">
- <span class="colorMain" @click="pastCont">{{ $t('粘贴') }}</span>
- <div>
- <img @click="clickCode()" src="@/assets/image/public/scan.png" alt="logo"
- class="w-65 h-65 ml-20 mr-30" />
- </div>
+ </div>
+ <div class="withdraw-row" @click="showSymbol = true">
+ <span class="withdraw-label">{{ $t('选择币种') }}</span>
+ <div class="withdraw-row-right">
+ <span class="withdraw-value">{{ value }}</span>
+ <van-icon name="arrow" class="withdraw-arrow" />
+ </div>
+ </div>
+ </div>
+ <!-- 第二部分：地址 + 数量 -->
+ <div class="withdraw-part withdraw-part-2">
+ <div class="withdraw-block">
+ <div class="withdraw-label">{{ $t('地址') }}</div>
+ <div class="withdraw-input-row">
+ <input v-model="address" type="text" class="withdraw-input" :placeholder="$t('长按粘贴')" />
+ <span class="withdraw-paste" @click="pastCont">{{ $t('粘贴') }}</span>
+ <img src="@/assets/image/public/scan.png" alt="scan" class="withdraw-scan" @click="clickCode" />
+ </div>
+ </div>
+ <div class="withdraw-block">
+ <div class="withdraw-label">{{ $t('数量') }}</div>
+ <div class="withdraw-input-row withdraw-quantity-row">
+ <input v-model="amount" type="number" class="withdraw-input" :placeholder="$t('请输入提币数量')"
+ maxlength="10" @input="changeInput" />
+ <span class="withdraw-unit">{{ value }}</span>
+ <span class="withdraw-all" @click="allBtn">{{ $t('全部') }}</span>
+ </div>
+ <div class="withdraw-fee-balance">
+ <span class="withdraw-fee">{{ $t('提现费用') }}: {{ fee || '0' }} {{ value }}</span>
+ <div class="withdraw-balance-col">
+ <span>{{ $t('可用') }}: {{ getwei(usdtBalance * 1, numLenth) || '0' }} {{ value }}</span>
+ <span>Locked: 0 {{ value }}</span>
+ <span>{{ $t('可提现') }}: ≈{{ getwei(usdtBalance * 1, numLenth) || '0' }} {{ value }}</span>
</div>
</div>
- <p class="font-35 mt-44 textColor">{{ $t('数量') }}</p>
- <div class="inputBackground flex items-center justify-between h-96 rounded mt-22">
- <input :placeholder="$t('请输入提币数量')" maxlength="10"
- class="h-full flex-1 border-none bg-none px-16 font-22 textColor" type="number" v-model="amount"
- @input="changeInput" />
- <p class="flex items-center">
- <!--<span class="text-grey">USDT</span>-->
- <span class="text-grey">{{ value }}</span>
- <span class="colorMain ml-20 mr-30" @click="allBtn">{{ $t('全部') }}</span>
- </p>
- </div>
- <p class="flex justify-between text-grey mt-22 font-28">
- <span>{{ $t('可用') }}</span>
- <!--<span>{{ usdtBalance }} USDT</span>-->
- <span>{{ getwei(usdtBalance * 1, numLenth) }} {{ value }}</span>
- </p>
- <p class="text-grey mt-64 font-28">{{ $t('可到账数量') }}</p>
- <div class="font-40 mt-20 fon-bold ">
- <span class="font-40 font-700 textColor"> {{ volume_last || '0.00' }}</span>
- <!--<span class="font-32 ml-5 text-grey">USDT</span>-->
- <span class="font-32 ml-5 text-grey">{{ value }}</span>
- </div>
- <p class="text-grey mt-22 font-28">{{ $t('提现费用') }}：{{ fee || '0.00' }} {{ value }}</p>
- <p class="text-grey mt-10 textColor font-28">{{ $t('提币说明') }}：
- </p>
- <div class="text-grey mt-20 font-28" v-html="tip"></div>
-
- <p class="font-35 mt-2 textColor">{{ $t('fundsPassword') }}</p>
- <div class="inputBackground flex items-center justify-between h-96 rounded mt-22">
- <input :placeholder="$t('fundsPasswordContTips')" maxlength="6"
- class="h-full flex-1 border-none bg-none px-16 font-22 textColor" v-model="safeword" />
- </div>
-
- <van-button
- class="w-768 h-100 rounded flex justify-center items-center mt-56 text-white btnMain border-none"
- @click="showDetail">
- {{ $t('提现') }}</van-button>
-
</div>
- <van-popup v-model:show="show" position="bottom">
- <div class="pop-box relative font-28">
- <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">{{ volume_last }} <span class="text-grey font-35">
- {{ value }}</span></p>
- <ul class="border-b-color px-32 pb-34">
- <li class="flex justify-between font-32 mt-25 items-center">
- <span class="textColor">{{ $t('提币地址') }}</span>
- <span class="text-grey font-26">{{ address }}</span>
- </li>
- <li class="flex justify-between font-32 mt-25">
- <span class="textColor">{{ $t('主网络') }}</span>
- <span class="text-grey">{{ blockName }}</span>
- </li>
- <li class="flex justify-between font-32 mt-25">
- <span class="textColor">{{ $t('提现来源账户') }}</span>
- <span class="text-grey">{{ $t('钱包账户') }}</span>
- </li>
- </ul>
- <ul class="px-32 mt-32">
- <li class="flex justify-between font-32 mt-25">
- <span class="textColor">{{ $t('币种') }}</span>
- <span class="text-grey">{{ value }}</span>
- </li>
- <li class="flex justify-between font-32 mt-25">
- <span class="textColor">{{ $t('金额') }}</span>
- <span class="text-grey">{{ amount }} {{ value }}</span>
- </li>
- <li class="flex justify-between font-32 mt-25">
- <span class="textColor">{{ $t('网络手续费') }}</span>
- <span class="text-grey">{{ fee }} {{ value }}</span>
- </li>
- </ul>
- <p class="px-32 mt-49 font-30 textColor">
- 1. {{ $t('请确保您输入了正确的提币地址并且您选择的转账网络与地址相匹配') }}
- </p>
- <p class="px-32 mt-40 font-30 textColor">2. {{ $t('提币订单创建后不可取消。') }}</p>
- <p class="w-768 h-100 rounded flex justify-center items-center mt-56 mb-48 btnMain text-white ml-32"
- @click="onConfirm">
- {{ $t('确定') }}
- </p>
- </div>
- </van-popup>
- <!-- 币种 -->
- <van-action-sheet v-model:show="showSymbol" :actions="actions.filter(item => item.name !== value)"
- @select="onSelect" />
- <bar-scan v-if="scancode" @ok="getResult"></bar-scan>
</div>
+
+ <div class="withdraw-body-footer">
+ <van-button class="withdraw-submit-btn" @click="onMainSubmit">
+ {{ $t('提交') }}
+ </van-button>
+ </div>
+
+ <!-- Network 选择 -->
+ <van-action-sheet v-model:show="showNetworkSheet" :actions="networkActions" @select="onSelectNetwork" />
+
+ <!-- Currency 选择 -->
+ <van-action-sheet v-model:show="showSymbol" :actions="actions.filter(item => item.name !== value)" @select="onSelect" />
+
+ <!-- Payment Password 弹框 (图二) -->
+ <van-popup v-model:show="showPasswordPopup" position="bottom" round class="withdraw-password-popup">
+ <div class="withdraw-password-box">
+ <div class="withdraw-password-head">
+ <span class="withdraw-password-title">{{ $t('fundsPassword') }}</span>
+ <van-icon name="cross" class="withdraw-password-close" @click="showPasswordPopup = false" />
+ </div>
+ <input v-model="safeword" type="password" class="withdraw-password-input"
+ :placeholder="$t('fundsPasswordContTips')" maxlength="6" />
+ <div class="withdraw-password-forgot-wrap">
+ <span class="withdraw-password-forgot" @click="onForgotPassword">{{ $t('忘记资金密码?') }}</span>
+ </div>
+ <van-button class="withdraw-password-submit" @click="onConfirm">
+ {{ $t('提交') }}
+ </van-button>
+ </div>
+ </van-popup>
+
+ <bar-scan v-if="scancode" @ok="getResult"></bar-scan>
</div>
</template>
<script>
-import {
- Popup,
- ActionSheet,
- showToast
-} from "vant"
-import Axios from "@/service/recharge.js"
-import {
- _withdrawFee,
- _withdrawApply
-} from "@/service/withdraw.api.js"
+import { Popup, ActionSheet, showToast } from "vant";
+import Axios from "@/service/recharge.js";
+import { _widtGetSessionToken, _withdrawFee, _withdrawApply } from "@/service/withdraw.api.js";
import assetsHead from "@/components/Transform/assets-head/index.vue";
import BarScan from '@/components/Transform/scan/scan.vue';
-import {
- _getAllWallet
-} from "@/service/fund.api";
+import { _getAllWallet } from "@/service/fund.api";
import { throttle } from "@/utils/index.js";
+
export default {
name: "withdrawPage",
components: {
@@ -158,325 +105,418 @@
data() {
return {
tip: '',
- value: 'USDT', //选中的币种
- show: false,
+ value: 'USDT',
showSymbol: false,
- actions: [{
- name: 'USDT'
- }, {
- name: 'BTC'
- }, {
- name: 'ETH'
- }, {
- name: 'USDC'
- }],
+ showNetworkSheet: false,
+ showPasswordPopup: false,
+ actions: [{ name: 'USDT' }, { name: 'BTC' }, { name: 'ETH' }, { name: 'USDC' }],
blockList: [],
- blockchainIndex: "",
- usdtBalance: "", //余额
- amount: "", //提现金额
- fee: "", //手续费
- volume_last: "", //到账金额
- blockName: "", //当前链名称
- address: "", // 二维码扫描结果
- scancode: false, //控制是否使用扫一扫功能
+ blockchainIndex: 0,
+ usdtBalance: "",
+ amount: "",
+ fee: "",
+ volume_last: "",
+ blockName: "",
+ address: "",
+ scancode: false,
withdraw_fee_type: '',
percent: 0,
numLenth: 3,
- safeword: '' //资金密码
+ safeword: '',
+ sessionToken: ''
+ };
+ },
+ computed: {
+ networkActions() {
+ return (this.blockList || []).map((item, index) => ({
+ name: item.blockchain_name,
+ index
+ }));
}
},
created() {
+ _widtGetSessionToken().then((res) => {
+ this.sessionToken = (res && res.session_token) ? res.session_token : '';
+ }).catch(() => {});
this.getBlock(this.value);
this.getAvailable(this.actions[0].name);
-
-
Axios.getRechargeTips({
language: this.$i18n.locale,
token: this.$store.state.user.userInfo.token,
content_code: '003',
}).then(res => {
- this.tip = res.content
- }).catch(err => {
- if (err.code === 'ECONNABORTED') {
- showToast(this.$t('网络超时！'));
- } else if (err.msg !== undefined) {
- showToast(this.$t(err.msg));
- }
- })
- _withdrawFee({
- amount: 1,
- channel: this.value + '_' + this.blockName
- }).then((res) => {
- this.withdraw_fee_type = res.withdraw_fee_type
- if (this.withdraw_fee_type == 'rate') {
- this.percent = res.fee
- } else {
- this.fee = res.fee;
- }
- });
+ this.tip = res.content;
+ }).catch(() => {});
+ this.fetchFee();
},
methods: {
- getwei(value, numLenth) {
- console.log(numLenth)
- let str = value.toString();
- let strIndex = str.indexOf('.');
- if (strIndex === -1) return str;
- str = str.substring(0, strIndex + numLenth);
- console.log(str, numLenth)
- return str;
+ goBack() {
+ this.$router.push('/quotes/index?tabActive=1');
},
- // 打开相机
+ fetchFee() {
+ _withdrawFee({
+ amount: 1,
+ channel: this.value + '_' + (this.blockName || (this.blockList[0] && this.blockList[0].blockchain_name))
+ }).then((res) => {
+ this.withdraw_fee_type = res.withdraw_fee_type;
+ if (this.withdraw_fee_type === 'rate') {
+ this.percent = res.fee;
+ } else {
+ this.fee = res.fee;
+ }
+ }).catch(() => {});
+ },
+ getwei(value, numLenth) {
+ let str = (value || 0).toString();
+ const strIndex = str.indexOf('.');
+ if (strIndex === -1) return str;
+ return str.substring(0, strIndex + numLenth);
+ },
clickCode() {
this.scancode = true;
},
- //返回扫描结果并关闭摄像头
getResult(result) {
- this.address = result;
- if (result !== "") {
- this.scancode = false;
- }
+ this.address = result || '';
+ if (result !== "") this.scancode = false;
},
- showDetail() {
- if (this.address.length > 63 || this.address.length == 0) {
- showToast(this.$t('提现地址格式错误'))
- return
+ onMainSubmit() {
+ if (!this.address || this.address.length > 63) {
+ showToast(this.$t('提现地址格式错误'));
+ return;
}
if (!this.amount) {
- showToast(this.$t('请输入正确数量'))
- return
+ showToast(this.$t('请输入正确数量'));
+ return;
}
if (this.amount / 1 > this.usdtBalance / 1) {
- showToast(this.$t('金额不足'))
- return
+ showToast(this.$t('金额不足'));
+ return;
}
- this.show = true;
+ this.showPasswordPopup = true;
+ },
+ onSelectNetwork(item) {
+ this.blockchainIndex = item.index;
+ this.blockName = item.name;
+ this.showNetworkSheet = false;
+ this.fetchFee();
},
goRouter(params) {
- this.$router.push({
- path: params,
- query: {
- type: '2',
- back: "1"
- }
- });
+ this.$router.push({ path: params, query: { type: '2', back: "1" } });
},
- // onConfirm() {
- // this.$router.push('/withdraw/withdrawSumbit')
- // },
- //选中币种
onSelect(item) {
- this.amount = ''
- this.volume_last = ''
- this.fee = ''
+ this.amount = '';
+ this.volume_last = '';
+ this.fee = '';
this.showSymbol = false;
this.value = item.name;
- this.withdraw_fee_type = ''
+ this.withdraw_fee_type = '';
this.getBlock(item.name);
- this.getAvailable(item.name)
- if (item.name == 'BTC' || item.name == 'ETH') {
- this.numLenth = 7
+ this.getAvailable(item.name);
+ if (item.name === 'BTC' || item.name === 'ETH') {
+ this.numLenth = 7;
_withdrawFee({
amount: 1,
channel: this.value + '_' + this.blockName
}).then((res) => {
- this.withdraw_fee_type = res.withdraw_fee_type
- if (this.withdraw_fee_type == 'fixed') {
- this.fee = res.fee;
- } else {
- this.percent = res.fee
- }
+ this.withdraw_fee_type = res.withdraw_fee_type;
+ if (this.withdraw_fee_type === 'fixed') this.fee = res.fee;
+ else this.percent = res.fee;
});
} else {
- this.numLenth = 3
+ this.numLenth = 3;
}
},
- //根据币种获取链地址
getBlock(symbol) {
- Axios.getBlock({
- coin: symbol
- }).then((res) => {
- this.blockList = res;
- this.blockName = res[0].blockchain_name;
+ Axios.getBlock({ coin: symbol }).then((res) => {
+ this.blockList = res || [];
+ this.blockName = this.blockList[0] ? this.blockList[0].blockchain_name : '';
+ this.blockchainIndex = 0;
+ this.fetchFee();
});
},
- //选中链名称
- changeBlockchain(item, index) {
- this.blockchainIndex = index;
- this.blockName = item.blockchain_name;
- },
- //获取钱包余额
getAvailable(symbol) {
_getAllWallet().then((res) => {
- let walletList = res.extends;
- let initObj = walletList.find(item => {
- return item.symbol_data.toLowerCase() == symbol.toLowerCase()
- })
- this.usdtBalance = initObj.volume
+ const walletList = (res.extends || []);
+ const initObj = walletList.find(item => (item.symbol_data || '').toLowerCase() === (symbol || '').toLowerCase());
+ this.usdtBalance = initObj ? initObj.volume : '';
});
},
- //点全部
allBtn() {
this.amount = this.getwei(this.usdtBalance, this.numLenth);
- this.changeInput()
+ this.changeInput();
},
- //输入改变
changeInput() {
if (this.amount === '') {
- this.volume_last = '0.00'
- return
+ this.volume_last = '0.00';
+ return;
}
- if (this.amount.length > 11) {
- this.amount = this.amount.slice(0, 11)
- }
-
- if (this.withdraw_fee_type == 'part') {
+ if (this.amount.length > 11) this.amount = this.amount.slice(0, 11);
+ if (this.withdraw_fee_type === 'part') {
_withdrawFee({
amount: this.amount,
channel: this.value + '_' + this.blockName
}).then((res) => {
- console.log(res)
this.fee = res.fee;
this.volume_last = res.volume_last;
});
- } else if (this.withdraw_fee_type == 'rate') {
- if (this.amount == '') {
- this.volume_last = 0
- } else {
- this.fee = this.getwei(this.percent * this.amount, this.numLenth)
- this.volume_last = this.getwei(this.amount * 1 - this.percent * this.amount, this.numLenth)
- }
+ } else if (this.withdraw_fee_type === 'rate') {
+ this.fee = this.amount ? this.getwei(this.percent * this.amount, this.numLenth) : '0';
+ this.volume_last = this.amount ? this.getwei(this.amount * 1 - this.percent * this.amount, this.numLenth) : '0';
} else {
- if (this.amount * 1 < this.fee * 1) {
- console.log('a')
- this.volume_last = 0
- } else {
- this.volume_last = this.getwei(this.amount * 1 - this.fee * 1, this.numLenth)
- }
+ this.volume_last = (this.amount * 1 < this.fee * 1) ? '0' : this.getwei(this.amount * 1 - this.fee * 1, this.numLenth);
}
-
},
- //提币提交
+ onForgotPassword() {
+ this.showPasswordPopup = false;
+ // 可跳转忘记资金密码页
+ },
onConfirm: throttle(function () {
if (!this.amount) {
showToast(this.$t('请输入数量'));
return;
}
-
- let numReg = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
+ const numReg = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
if (!numReg.test(this.amount)) {
showToast(this.$t('请输入数字'));
return;
}
-
if (!this.address) {
showToast(this.$t('请输入提现地址'));
return;
}
-
if (!this.safeword) {
showToast(this.$t('fundsPasswordContTips'));
return;
}
-
- if (this.amount && this.address) {
- // this.$router.push({
- // path: '/cryptos/withdraw/securityVerification',
- // query: {
- // amount: this.amount,
- // from: this.address,
- // channel: this.value + '_' + this.blockName
- // }
- // })
- // _withdrawApply({
- // session_token:this.sessionToken,
- // amount:this.amount,
- // from:this.address,
- // channel:this.value+'_'+ this.blockName
- // }).then((res)=> {
- // if(res.code==0) {
- // this.$router.push({
- // path:"/withdraw/withdrawSumbit"
- // });
- // }else{
- // showToast(this.$t(res.msg));
- // }
- // });
- _withdrawApply({
- session_token: this.sessionToken,
- amount: this.amount,
- safeword: this.safeword,
- from: this.address,
- channel: this.value + '_' + this.blockName
- }).then((res) => {
-
- this.$router.push({
- path: "/cryptos/withdraw/withdrawSumbit"
- });
-
- }).catch(err => {
- //console.log(err)
- if (err.code == 105) {
- showToast(this.$t('当前还需交易%s,才可提币', {
- 'MONEY': err.msg
- }));
- } else if (err.code === 'ECONNABORTED') {
- showToast(this.$t('网络超时！'))
- } else if (err.msg !== undefined) {
- showToast(this.$t(err.msg))
- }
- // this.getToken()
- })
- } else {
- showToast(this.$t('请输入提币数量'));
- }
+ _withdrawApply({
+ session_token: this.sessionToken,
+ amount: this.amount,
+ safeword: this.safeword,
+ from: this.address,
+ channel: this.value + '_' + this.blockName
+ }).then(() => {
+ this.showPasswordPopup = false;
+ this.$router.push({ path: "/cryptos/withdraw/withdrawSumbit" });
+ }).catch(err => {
+ if (err.code == 105) {
+ showToast(this.$t('当前还需交易%s,才可提币', { 'MONEY': err.msg }));
+ } else if (err.code === 'ECONNABORTED') {
+ showToast(this.$t('网络超时！'));
+ } else if (err.msg !== undefined) {
+ showToast(this.$t(err.msg));
+ }
+ });
}, 1000),
async pastCont() {
- this.address = await navigator.clipboard.readText();
+ try {
+ if (navigator.clipboard && navigator.clipboard.readText) {
+ this.address = await navigator.clipboard.readText();
+ }
+ } catch (e) {}
}
}
-}
+};
</script>
+
<style lang="scss" scoped>
-@import "@/assets/init.scss";
-
-#cryptos {
- .withdrawl-page {
- width: 100%;
- box-sizing: border-box;
- font-size: 26px;
- }
-
- .van-popup.van-popup--bottom {
- border-top-left-radius: 30px;
- border-top-right-radius: 30px;
- }
-
- .pop-box {
- border-top-left-radius: 30px;
- border-top-right-radius: 30px;
- }
-
- .color-blue {
- color: $btn_main;
- }
-
- .bg-grey-light {
- background: $light-grey;
- }
-
- li {
- &.active {
- border-color: $color_main;
- color: $color_main;
- }
- }
-
- .van-button--default {
- color: $text_color;
- }
-
- .btnMain {
- background: $btn_main;
- }
+.withdraw-wrap {
+ min-height: 100vh;
+ background: #f5f5f5;
+ padding-bottom: 2rem;
}
-</style>
\ No newline at end of file
+.withdraw-head-icon {
+ width: 1.375rem;
+ height: 1.1875rem;
+}
+/* 两个独立 div：上下边距各 20px */
+.withdraw-part {
+ margin: 20px 1rem;
+ padding: 0 1.5rem;
+ background: #fff;
+ border-radius: 0.5rem;
+ overflow: hidden;
+}
+.withdraw-body-footer {
+ margin: 20px 1rem 2rem;
+ padding: 20px 0;
+}
+/* 字体加大 */
+.withdraw-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ min-height: 4rem;
+ padding: 40px 0;
+ font-size: 34px;
+}
+.withdraw-label {
+ color: #333;
+ font-weight: 600;
+}
+.withdraw-row-right {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 0.25rem;
+}
+.withdraw-value {
+ color: #333;
+ text-align: right;
+}
+.withdraw-arrow {
+ color: #999;
+ font-size: 34px;
+ flex-shrink: 0;
+}
+.withdraw-block {
+ padding: 1rem 0;
+}
+.withdraw-block .withdraw-label {
+ display: block;
+ margin-bottom: 0.75rem;
+ font-size: 34px;
+ color: #333;
+}
+.withdraw-input-row {
+ display: flex;
+ align-items: center;
+ background: transparent;
+ border-radius: 0.5rem;
+ padding: 0 1rem;
+ height: 4rem;
+}
+.withdraw-input {
+ flex: 1;
+ border: none;
+ background: transparent;
+ font-size: 34px;
+ color: #333;
+ outline: none;
+}
+.withdraw-input::placeholder {
+ color: #9b9b9b;
+}
+.withdraw-paste {
+ font-size: 32px;
+ color: #5e2bc8;
+ margin-left: 0.5rem;
+ cursor: pointer;
+}
+.withdraw-scan {
+ width: 2.25rem;
+ height: 2.25rem;
+ margin-left: 0.75rem;
+ cursor: pointer;
+}
+.withdraw-quantity-row .withdraw-unit {
+ font-size: 28px;
+ color: #9b9b9b;
+ margin-left: 0.5rem;
+}
+.withdraw-all {
+ font-size: 32px;
+ color: #5e2bc8;
+ margin-left: 0.75rem;
+ cursor: pointer;
+}
+.withdraw-fee-balance {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ margin-top: 0.75rem;
+ font-size: 28px;
+ color: #9b9b9b;
+ font-weight: normal;
+}
+.withdraw-balance-col {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ font-weight: normal;
+}
+.withdraw-balance-col span {
+ line-height: 1.5;
+}
+.withdraw-submit-btn {
+ width: 100%;
+ margin: 20px 0;
+ padding: 20px 0;
+ border: none;
+ border-radius: 0.5rem;
+ background: linear-gradient(90deg, #a443cf, #5e2bc8);
+ color: #fff !important;
+ font-size: 38px;
+ font-weight: 600;
+}
+:deep(.withdraw-submit-btn .van-button__text) {
+ color: #fff !important;
+}
+
+/* Payment Password 弹框 - 字体加大 */
+.withdraw-password-popup {
+ border-radius: 1rem 1rem 0 0;
+}
+.withdraw-password-box {
+ padding: 2rem 1.5rem 3rem;
+ background: #fff;
+}
+.withdraw-password-head {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 2.5rem;
+}
+.withdraw-password-title {
+ font-size: 42px;
+ font-weight: 600;
+ color: #333;
+ text-align: center;
+}
+.withdraw-password-close {
+ position: absolute;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 38px;
+ color: #999;
+ cursor: pointer;
+}
+.withdraw-password-input {
+ width: 100%;
+ padding: 2rem 1rem;
+ background: #f6f6f6;
+ border: none;
+ border-radius: 0.5rem;
+ font-size: 34px;
+ color: #333;
+ box-sizing: border-box;
+ outline: none;
+}
+.withdraw-password-input::placeholder {
+ color: #9b9b9b;
+}
+.withdraw-password-forgot-wrap {
+ text-align: right;
+ margin-top: 0.75rem;
+ margin-bottom: 1.5rem;
+}
+.withdraw-password-forgot {
+ font-size: 32px;
+ color: #666;
+ cursor: pointer;
+}
+.withdraw-password-submit {
+ width: 100%;
+ border: none;
+ border-radius: 0.5rem;
+ background: linear-gradient(90deg, #a443cf, #5e2bc8);
+ color: #fff !important;
+ font-size: 38px;
+ font-weight: 600;
+ margin-bottom: 40px;
+}
+:deep(.withdraw-password-submit .van-button__text) {
+ color: #fff !important;
+}
+</style>
diff --git a/src/views/cryptos/Withdraw/withdrawSumbit.vue b/src/views/cryptos/Withdraw/withdrawSumbit.vue
index 0ed561a..30f6916 100644
--- a/src/views/cryptos/Withdraw/withdrawSumbit.vue
+++ b/src/views/cryptos/Withdraw/withdrawSumbit.vue
@@ -37,7 +37,6 @@
import { Image as VanImage } from 'vant';
import assetsHead from "@/components/Transform/assets-head/index.vue";
import { dataTimeEx } from '@/utils/utis'
-import { customerServiceUrl } from "@/config";
export default {
name: 'rechargeSubmit',
components: {
@@ -74,11 +73,7 @@
this.time = dataTimeEx(Date.parse(new Date()), true);
},
tokefu() {
- if (customerServiceUrl()) {
- window.location.href = customerServiceUrl();
- } else {
- this.$router.push('/customerService')
- }
+ this.$router.push('/customerService');
}
}
}
diff --git a/src/views/cryptos/index.vue b/src/views/cryptos/index.vue
index b72cdd5..393b465 100644
--- a/src/views/cryptos/index.vue
+++ b/src/views/cryptos/index.vue
@@ -73,7 +73,7 @@
import { _getUnreadMsg } from '@/service/im.api'
import { _getNewsList1, _getPopupNews } from '@/service/user.api'
import { BASE_URL } from "@/config";
-const THEME = 'dark'
+import { THEME } from '@/config/theme'
export default {
name: "HomePage",
components: {
diff --git a/src/views/cryptos/pledgeLoan/index.vue b/src/views/cryptos/pledgeLoan/index.vue
index 0acabe2..bfacb05 100644
--- a/src/views/cryptos/pledgeLoan/index.vue
+++ b/src/views/cryptos/pledgeLoan/index.vue
@@ -27,7 +27,7 @@
</div>
</div>
</div>
- <div class="errorInfo font-24 h-28 lh-28 mt-20 mb-30" style="color:#F43368;">{{ errorMsg ? errorMsg
+ <div class="errorInfo font-24 h-28 lh-28 mt-20 mb-30" style="color:#f4374b;">{{ errorMsg ? errorMsg
: ''
}}
</div>
diff --git a/src/views/cryptos/promote/init.scss b/src/views/cryptos/promote/init.scss
index 30edd56..50a3c96 100644
--- a/src/views/cryptos/promote/init.scss
+++ b/src/views/cryptos/promote/init.scss
@@ -50,8 +50,8 @@
$border-grey: $border-grey;
$blue: #1194F7;
$light-blue: #1199FA;
- $red: #F43368;
- $green: #06CDA5;
+ $red: #f4374b;
+ $green: #06c16a;
$purple: #9A4DFD;
$night: #131a2e;
diff --git a/src/views/exchangeHistory/DailyDeal.vue b/src/views/exchangeHistory/DailyDeal.vue
index ba3029e..8789bb6 100644
--- a/src/views/exchangeHistory/DailyDeal.vue
+++ b/src/views/exchangeHistory/DailyDeal.vue
@@ -6,7 +6,7 @@
<div class="icon back">
<img src="@/assets/image/back.png" alt="" @click="onRoute('/quotes/openTrade')">
</div>
- <span class="title">当日成交</span>
+ <span class="title">{{ $t('当日成交') }}</span>
</div>
<div class="icon-group">
<div class="icon refresh">
@@ -19,10 +19,10 @@
</header>
<section class="tab-container">
<van-tabs v-model:active="tabActive">
- <van-tab title="当日成交">
+ <van-tab :title="$t('当日成交')">
<DealTab />
</van-tab>
- <van-tab title="当日成交汇总">
+ <van-tab :title="$t('当日成交汇总')">
<DealTab2 />
</van-tab>
</van-tabs>
diff --git a/src/views/homePage/components/head.vue b/src/views/homePage/components/head.vue
index 29ffc8f..ea5ef6d 100644
--- a/src/views/homePage/components/head.vue
+++ b/src/views/homePage/components/head.vue
@@ -1,7 +1,7 @@
<template>
<div class="head flex justify-between items-center pl-5 pr-5">
<div class="more mr-5">
- <img src="@/assets/imgs/home/more.png" alt="" @click="onRoute('/my')">
+ <img src="@/assets/imgs/new/avatar.png" alt="" @click="onRoute('/my')">
</div>
<div class="more_input pl-5 pr-5 flex items-center justify-start mr-5 pt-2">
diff --git a/src/views/homePage/index.vue b/src/views/homePage/index.vue
index b2c73ec..db29886 100644
--- a/src/views/homePage/index.vue
+++ b/src/views/homePage/index.vue
@@ -1,5 +1,5 @@
<template>
- <div class="home_page mainBackground textColor">
+ <div class="home_page textColor" style="background-color: #f6f5fa;">
<Head @search="onSearch"></Head>
<!-- <div class="home_logo flex justify-center"><img src="@/assets/imgs/home/home_logo.png" alt=""></div> -->
@@ -9,10 +9,14 @@
<van-swipe-item><img src="@/assets/imgs/home/Slider-3.jpg" alt=""></van-swipe-item>
<van-swipe-item><img src="@/assets/imgs/home/Slider-4.jpg" alt=""></van-swipe-item>
</van-swipe> -->
-
- <video autoplay loop muted playsinline class="home_logo">
- <source src="@/assets/video/home_1.mp4" type="video/mp4">
- </video>
+ <div class="flex flex-col items-center justify-center home-kyc-block" @click="toPage('/certificationCenter')">
+ <img style="width: 65%;" src="@/assets/imgs/new/kyc-reward.png" alt="">
+ <div style="font-size: 25px;">{{ $t('kycLotteryBroadcast') }}</div>
+ <div style="font-size: 12px;">{{ $t('kycLotterySubtitle') }}</div>
+ </div>
+ <!-- <video autoplay loop muted playsinline class="home_logo"> -->
+ <!-- <source src="@/assets/video/home_1.mp4" type="video/mp4"> -->
+ <!-- </video> -->
<!-- <div class="text-center font-bold mt-8 logo_text">{{ $t('复制财富，從此刻開始') }}</div>
<div class="text-center mt-2 logo_text_small">{{ $t('超6000種熱門交易類別，立即註冊领取5000USDT') }}!</div> -->
@@ -24,29 +28,38 @@
<div class="login_but_d text-center" @click="toPage('/login')">{{ $t('登录') }}</div>
</div>
- <div class="home_grid flex justify-start flex-wrap">
- <div class="grid_item pt-10" v-for="value in tabbers" :key="value.key" @click="toPage(value.path)">
+ <!-- 轮播图：使用本地两张图片，带圆角 -->
+ <div class="home_banner mp-20">
+ <van-swipe
+ class="home_banner_swipe"
+ :autoplay="4000"
+ :show-indicators="false"
+ @change="onBannerChange"
+ >
+ <van-swipe-item
+ v-for="(item, index) in bannerImages"
+ :key="index"
+ class="home_banner_item"
+ @click="onBannerClick(item)"
+ >
+ <img :src="item.img" :alt="item.alt" class="home_banner_img" />
+ </van-swipe-item>
+ </van-swipe>
+ <div class="home_banner_indicator">
+ <span
+ v-for="(_, i) in bannerImages"
+ :key="i"
+ class="home_banner_dot"
+ :class="{ active: currentBanner === i }"
+ />
+ </div>
+ </div>
+ <div class="home_grid flex justify-start flex-wrap home_grid_bg mt-10 pt-8" style="height: 110px;">
+ <div class="grid_item" v-for="value in tabbers" :key="value.key" @click="onGridClick(value)">
<div class="grid_item_img flex justify-center"><img :src="value.icon" alt=""></div>
<div class="text-center mt-2">{{ value.name }}</div>
</div>
</div>
-
- <!-- 新闻 -->
- <van-notice-bar class="font-26 mt-10 index_notice" background="#333" :scrollable="false" wrapable
- color="#333333">
- <van-swipe vertical class="notice-swipe" :autoplay="2000" :show-indicators="false">
- <van-swipe-item v-for="item in announceList" :key="item.id" @click="toAnnounceDetail(item.uuid)">
- <div class="flex justify-start items-center">
- <img :src="item.imgUrl" alt="" class="notice_img mr-5">
- <div class="notice_content">
- <div>{{ item.startTime }}</div>
- <div>{{ item.title }}</div>
- </div>
- </div>
- </van-swipe-item>
- </van-swipe>
- </van-notice-bar>
-
<!-- <div class="flex justify-between mt-10">
<van-swipe class="home_swipe_1" :autoplay="2000">
<van-swipe-item v-for="value in swipe1" :key="value.key" class="flex justify-center items-center">
@@ -78,8 +91,110 @@
</div>
</div> -->
- <div id="cryptos" class="pt-10">
- <list-quatation :listData="qList" :tabShow="false" :tabActive="2" />
+ <!-- 列表区：Favorites / Markets 切换 -->
+ <div id="cryptos" class="pt-10 home-list-section">
+ <div class="home-list-tabs">
+ <span class="home-list-tab" :class="{ active: listMode === 'favorites' }" @click="listMode = 'favorites'">{{ $t('favorites') }}</span>
+ <span class="home-list-tab" :class="{ active: listMode === 'markets' }" @click="listMode = 'markets'">{{ $t('markets') }}</span>
+ </div>
+ <list-quatation :listData="displayedList" :tabShow="false" :tabActive="2" />
+ <div
+ v-if="!showMoreList && currentList.length > listInitialCount"
+ class="home-list-more"
+ @click="showMoreList = true"
+ >
+ {{ $t('展示更多') }}
+ </div>
+
+ <!-- HOT COINS：横向滚动卡片 -->
+ <div class="home-hot-coins">
+ <div class="home-hot-title">{{ $t('HOT COINS') }}</div>
+ <div class="home-hot-subtitle">{{ $t('The popular cryptocurrency') }}</div>
+ <div class="home-hot-scroll">
+ <div
+ v-for="item in hotCoinsList"
+ :key="item.symbol_data"
+ class="home-hot-card"
+ @click="toQuote(item)"
+ >
+ <img :src="item.symbol ? `${HOST_URL}/symbol/${item.symbol_data}.png` : ''" alt="" class="home-hot-logo" />
+ <div class="home-hot-symbol">{{ (item.symbol_data || '').toUpperCase() }}</div>
+ <div class="home-hot-pct" :class="(item.change_ratio || 0) >= 0 ? 'up' : 'down'">
+ {{ (item.change_ratio || 0) >= 0 ? '↗' : '↘' }} {{ (item.change_ratio != null ? item.change_ratio : 0).toFixed(2) }}%
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Trend / Follow / News / IPO 切换 -->
+ <div class="home-trend-tabs">
+ <span class="home-trend-tab" :class="{ active: trendTab === 'trend' }" @click="trendTab = 'trend'">{{ $t('trend') }}</span>
+ <span class="home-trend-tab" :class="{ active: trendTab === 'follow' }" @click="trendTab = 'follow'">{{ $t('follow') }}</span>
+ <span class="home-trend-tab" :class="{ active: trendTab === 'news' }" @click="trendTab = 'news'">{{ $t('news') }}</span>
+ <span class="home-trend-tab" :class="{ active: trendTab === 'ipo' }" @click="trendTab = 'ipo'">{{ $t('ipo') }}</span>
+ </div>
+ <!-- Trend：riseBg.jpg 背景 + 3 条数据 -->
+ <div v-if="trendTab === 'trend'" class="home-trend-card home-trend-card--bg">
+ <div class="home-trend-card-inner">
+ <div class="home-trend-heading">{{ $t('trend') }}</div>
+ <div class="home-trend-subtitle">{{ $t('trendSubtitle') }}</div>
+ <div class="home-trend-list">
+ <div
+ v-for="item in trendList"
+ :key="item.symbol_data"
+ class="home-trend-item"
+ @click="toQuote(item)"
+ >
+ <img :src="item.iconUrl || ''" alt="" class="home-trend-logo" />
+ <div class="home-trend-info">
+ <span class="home-trend-name">{{ item.symbol_data }}</span>
+ </div>
+ <div class="home-trend-right">
+ <span class="home-trend-price">{{ (item.close || 0).toFixed(3) }}</span>
+ <span class="home-trend-pct up">↗ {{ (item.change_ratio != null ? item.change_ratio : 0).toFixed(2) }}%</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- News：news!getUsHeadNews.action -->
+ <div v-else-if="trendTab === 'news'" class="home-trend-card home-trend-card--news">
+ <div class="home-trend-card-inner">
+ <div class="home-trend-heading home-trend-heading--dark">{{ $t('news') }}</div>
+ <div v-if="newsLoading" class="home-trend-card--empty-inner">
+ <van-loading type="spinner" size="24" />
+ <div class="home-empty-text mt-8">{{ $t('加载中...') }}</div>
+ </div>
+ <div v-else-if="newsListForTab.length" class="home-news-list">
+ <div
+ v-for="(item, index) in newsListForTab"
+ :key="(item.url || item.uuid) || index"
+ class="home-news-item"
+ @click="onNewsItemClick(item)"
+ >
+ <div v-if="item.urlToImage" class="home-news-thumb">
+ <img :src="item.urlToImage" alt="" />
+ </div>
+ <div class="home-news-body">
+ <div class="home-news-title textColor">{{ item.title }}</div>
+ <div class="home-news-meta">
+ <div class="home-news-date text-grey">{{ item.author }}</div>
+ <span class="home-news-detail text-grey">{{ $t('详情') }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div v-else class="home-trend-card--empty-inner">
+ <img :src="emptyImg" alt="" class="home-empty-img" />
+ <div class="home-empty-text">{{ $t('暂无数据') }}</div>
+ </div>
+ </div>
+ </div>
+ <!-- Follow / IPO：empty.png 暂无数据 -->
+ <div v-else class="home-trend-card home-trend-card--empty">
+ <img :src="emptyImg" alt="" class="home-empty-img" />
+ <div class="home-empty-text">{{ $t('暂无数据') }}</div>
+ </div>
</div>
<van-popup v-model:show="item.showPopUp" style="border-radius:10px;" :close-on-click-overlay="false"
@@ -94,20 +209,41 @@
</van-button>
</div>
</van-popup>
+
+ <!-- 新闻详情弹层（站内展示，不跳外链） -->
+ <van-popup v-model:show="showNewsDetailPopup" round position="bottom" :style="{ height: '88%' }" class="news-detail-popup">
+ <div class="news-detail-inner" v-if="selectedNewsDetail">
+ <div class="news-detail-drag-bar" />
+ <div class="news-detail-header">
+ <span class="news-detail-source">{{ selectedNewsDetail.sourceName || '' }}</span>
+ </div>
+ <h2 class="news-detail-title textColor">{{ selectedNewsDetail.title }}</h2>
+ <div class="news-detail-img-wrap" v-if="selectedNewsDetail.urlToImage">
+ <img :src="selectedNewsDetail.urlToImage" alt="" class="news-detail-img" />
+ </div>
+ <div class="news-detail-content textColor">
+ {{ selectedNewsDetail.description || selectedNewsDetail.content || '' }}
+ </div>
+ <van-button color="#1194F7" class="news-detail-close" block round @click="showNewsDetailPopup = false">
+ {{ $t('关闭') }}
+ </van-button>
+ </div>
+ </van-popup>
</div>
</template>
<script setup>
import Head from './components/head.vue'
import { useI18n } from "vue-i18n";
-import { ref, computed, onBeforeUnmount } from 'vue';
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';
import ListQuatation from "@/components/Transform/list-quotation/index.vue";
import { _getHomeList } from '@/service/cryptos.api'
-import { _getNewsList1, _getPopupNews } from '@/service/user.api'
+import { _getNewsList1, _getPopupNews, _getUsHeadNews } from '@/service/user.api'
import { useStore } from "vuex";
-import { TIME_OUT, customerServiceUrl } from "@/config";
+import { TIME_OUT, HOST_URL } from "@/config";
import { useUserStore } from '@/store/user';
+import { showToast } from 'vant';
import { setStorage, getStorage } from '@/utils/index.js';
let catchSymbol = getStorage('symbol')
if (!catchSymbol) {
@@ -119,27 +255,26 @@
const store = useStore();
const tabbers = [
- // { key: 1, name: t('跟单'), icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url) },
- // { key: 3, name: `C2C ${t('交易')}`, icon: new URL('@/assets/imgs/home/home_3.png', import.meta.url) },
- // { key: 4, name: t('邀请好友'), icon: new URL('@/assets/imgs/home/home_4.png', import.meta.url) },
- // { key: 5, name: t('合约'), icon: new URL('@/assets/imgs/home/home_5.png', import.meta.url), path: '/trade/index' },
- // { key: 6, name: t('现货'), icon: new URL('@/assets/imgs/home/home_5.png', import.meta.url), path: '/cryptos/trade/btcusdt' },
- { key: 2, name: t('recharge'), icon: new URL('@/assets/imgs/home/home_2.png', import.meta.url), path: '/cryptos/recharge/rechargeList?isForeign=true' },
- // { key: 7, name: t('提现'), icon: new URL('@/assets/imgs/home/home_6.png', import.meta.url), path: '/exchange/withdraw-usdt' }
- { key: 7, name: t('提现'), icon: new URL('@/assets/imgs/home/home_6.png', import.meta.url), path: '/cryptos/Withdraw/withdrawPage' },
- // { key: 8, name: t('卡券中心'), icon: new URL('@/assets/imgs/home/home_7.png', import.meta.url) },
- // { key: 9, name: t('闪兑'), icon: new URL('@/assets/imgs/home/home_8.png', import.meta.url), path: '/cryptos/exchangePage' },
- // { key: 9, name: t('划转'), icon: new URL('@/assets/imgs/home/home_8.png', import.meta.url), path: '/my/transfer' },
- // { key: 10, name: t('更多'), icon: new URL('@/assets/imgs/home/home_9.png', import.meta.url) },
-
- // { key: 11, name: "STO", icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url), path: '/ICO/ico' },
- // { key: 12, name: "C2C", icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url), path: '/wantBuy' },
- // { key: 13, name: t('质押'), icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url), path: '' },
- { key: 14, name: t('onLineService'), icon: new URL('@/assets/imgs/home/home_10.png', import.meta.url), path: '/customerService' },
- { key: 15, name: 'DXCM PDF', icon: new URL('@/assets/imgs/home/home_1.png', import.meta.url), path: 'https://www.dexm-whitepaper.com/' },
+ { key: 2, name: t('recharge'), icon: new URL('@/assets/imgs/new/quick-function2.png', import.meta.url), path: '/cryptos/recharge/rechargeList?isForeign=true' },
+ { key: 7, name: t('提现'), icon: new URL('@/assets/imgs/new/quick-function1.png', import.meta.url), path: '/cryptos/Withdraw/withdrawPage' },
+ { key: 5, name: t('合约'), icon: new URL('@/assets/imgs/new/index-function5.png', import.meta.url), path: '/trade/index' },
+ { key: 14, name: t('客服'), icon: new URL('@/assets/imgs/new/index-function3.png', import.meta.url), path: '/customerService' },
]
-// 获取公告数据
+// 轮播图：使用本地两张图片（swiper_1、swiper_2 放在 src/assets/imgs/new/ 下）
+const bannerImages = [
+ { img: new URL('@/assets/imgs/new/swiper_1.png', import.meta.url).href, alt: 'Banner 1' },
+ { img: new URL('@/assets/imgs/new/swiper_2.png', import.meta.url).href, alt: 'Banner 2' },
+]
+const currentBanner = ref(0)
+const onBannerChange = (index) => {
+ currentBanner.value = index
+}
+const onBannerClick = (item) => {
+ if (item.link) router.push(item.link)
+}
+
+// 获取公告数据（用作轮播图）
const announceList = ref([])
_getNewsList1({
language: useI18n().locale.value,
@@ -168,9 +303,34 @@
// 跳转公告详情
const toAnnounceDetail = (announceId) => {
if (announceId) {
- router.push({ path: '/cryptos/AnnounceDetail', query: { id: announceId } })
+ router.push({ path: '/cryptos/announceDetail', query: { id: announceId } })
}
}
+
+// 新闻项点击：站内弹层展示详情（不跳外链）；公告项仍走公告详情页
+const onNewsItemClick = (item) => {
+ if (item && item.url) {
+ selectedNewsDetail.value = item
+ showNewsDetailPopup.value = true
+ } else if (item && item.uuid) {
+ toAnnounceDetail(item.uuid)
+ }
+}
+
+// 新闻日期展示：ISO 取前 10 位
+const formatNewsDate = (publishedAt) => {
+ if (!publishedAt) return ''
+ return String(publishedAt).substring(0, 10)
+}
+
+// 首页四个按钮点击：无 path 时提示暂未开放
+const onGridClick = (value) => {
+ if (!value.path) {
+ showToast(t('notOpenYet'));
+ return;
+ }
+ toPage(value.path);
+};
// 跳转页面
const toPage = (path) => {
@@ -182,16 +342,7 @@
return;
}
- if (path == '/customerService') {
- // 客服链接,有值的话就会跳转到客服外链
- if (customerServiceUrl()) {
- window.location.href = customerServiceUrl();
- } else {
- router.push(path)
- }
- } else {
- router.push(path)
- }
+ router.push(path)
}
// 轮播图数据
@@ -206,12 +357,76 @@
{ key: 3, img: new URL('@/assets/imgs/home/home_3.png', import.meta.url) },
])
+// 列表区：Favorites / Markets 切换
+const listMode = ref('markets') // 'favorites' | 'markets'
+const listInitialCount = 8 // 竖列表默认展示条数，点击「展示更多」后显示全部
+const showMoreList = ref(false)
+const favoritesList = ref([
+ { symbol: 'btcusdt', symbol_data: 'BTC', name: 'BTC/USDT', close: 43250.5, change_ratio: 2.18, amount: 12345678 },
+ { symbol: 'ethusdt', symbol_data: 'ETH', name: 'ETH/USDT', close: 2280.2, change_ratio: -0.85, amount: 8765432 },
+ { symbol: 'xrpusdt', symbol_data: 'XRP', name: 'XRP/USDT', close: 0.62, change_ratio: 1.25, amount: 5678901 },
+])
+
+// HOT COINS / Trend 数据（HOT 用 qList 前几条，Trend 用 mock 3 条）
+const hotCoinsList = ref([])
+// Trend 三条：使用本地图片 a-DOT / a-APT / a-FIL（放在 src/assets/imgs/new/ 下）
+const trendList = ref([
+ { symbol: 'dotusdt', symbol_data: 'DOT', iconUrl: new URL('@/assets/imgs/new/a-DOT.png', import.meta.url).href, name: 'DOT/USDT', close: 1.589, change_ratio: 25.51 },
+ { symbol: 'aptusdt', symbol_data: 'APT', iconUrl: new URL('@/assets/imgs/new/a-APT.png', import.meta.url).href, name: 'APT/USDT', close: 0.958, change_ratio: 14.18 },
+ { symbol: 'filusdt', symbol_data: 'FIL', iconUrl: new URL('@/assets/imgs/new/a-FIL.png', import.meta.url).href, name: 'FIL/USDT', close: 1.005, change_ratio: 12.54 },
+])
+const trendTab = ref('trend') // 'trend' | 'follow' | 'news' | 'ipo'
+const emptyImg = new URL('@/assets/imgs/new/empty.png', import.meta.url).href
+// 新闻 tab：仅使用 news!getUsHeadNews.action 接口数据
+const newsApiList = ref([])
+const newsLoading = ref(false)
+const newsListForTab = computed(() => {
+ const list = newsApiList.value || []
+ if (list.length === 0) return []
+ return list.map((a) => ({
+ title: a.title || '',
+ author: a.author || '',
+ publishedAt: a.publishedAt || '',
+ url: a.url || '',
+ urlToImage: a.urlToImage || '',
+ description: a.description || '',
+ content: a.content || '',
+ sourceName: (a.source && a.source.name) ? a.source.name : '',
+ source: a.source,
+ }))
+})
+
+// 新闻详情弹层（站内展示，不跳外链）
+const showNewsDetailPopup = ref(false)
+const selectedNewsDetail = ref(null)
+
+// 首页新闻：在 onMounted 中请求，避免重复请求、便于统一管理
+function fetchUsHeadNews() {
+ if (newsLoading.value) return
+ newsLoading.value = true
+ _getUsHeadNews()
+ .then((list) => { newsApiList.value = list || [] })
+ .finally(() => { newsLoading.value = false })
+}
+
+// 跳转行情/交易页
+const toQuote = (item) => {
+ if (item && item.symbol) router.push(`/cryptos/trade/${item.symbol}`)
+}
+
//#region 行情数据----------------------------------------
let qList = ref([])
let qListCope = ref([]) // 备份数据
let key = ref('') // 搜索关键词
let timeout = ref(null)
const coinArr = computed(() => store.getters['home/coinArr']);
+
+// 竖列表：当前数据源与展示条数（展示更多前只显示 5 条）
+const currentList = computed(() => (listMode.value === 'markets' ? qList.value : favoritesList.value))
+const displayedList = computed(() => {
+ const list = currentList.value
+ return showMoreList.value ? list : (list || []).slice(0, listInitialCount)
+})
const fetchQList = async () => { // 获取行情
const list = await _getHomeList(coinArr.value.join(',')).catch(() => {
@@ -230,6 +445,8 @@
qList.value = list
}
qListCope.value = list; // 备份数据
+ // HOT COINS 取前 8 条
+ hotCoinsList.value = (list || []).slice(0, 8)
if (timeout.value) {
clearTimeout(timeout.value)
@@ -254,6 +471,9 @@
qList.value = newList
}
+onMounted(() => {
+ fetchUsHeadNews()
+})
onBeforeUnmount(() => {
if (timeout.value) {
clearTimeout(timeout.value)
@@ -265,7 +485,13 @@
<style lang="scss">
@import '@/assets/theme/index.scss';
-
+.mainBackground{
+ background-color: #f6f5fa !important;
+}
+.home-kyc-block {
+ cursor: pointer;
+ width: 100%;
+}
.home_page {
// background: $white;
min-height: 100vh;
@@ -279,31 +505,58 @@
font-size: 1.8rem;
}
- .index_notice {
- height: 100px;
- border-radius: 10px;
+ /* 首页轮播图（BlueWhale 风格） */
+ .home_banner {
+ position: relative;
+ width: 100%;
+ margin: 12px auto;
+ border-radius: 12px;
+ overflow: hidden;
+ background: $crd-b;
+ }
- .notice-swipe {
- height: 82px;
- }
+ .home_banner_swipe {
+ width: 100%;
+ border-radius: 12px;
+ }
- .notice_img {
- height: 80px;
- width: 100px;
- // background-color: $icon-bg;
- }
+ .home_banner_item {
+ width: 100%;
+ border-radius: 12px;
+ overflow: hidden;
+ }
- .notice_content {
- @include themify() {
- color: themed("text_color");
- }
+ .home_banner_img {
+ width: 100%;
+ height: auto;
+ display: block;
+ vertical-align: top;
+ border-radius: 12px;
+ }
- &>div:first-child {
- @include themify() {
- color: themed("text_color1");
- }
- }
- }
+ .home_banner_indicator {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 12px;
+ display: flex;
+ justify-content: center;
+ gap: 8px;
+ z-index: 2;
+ }
+
+ .home_banner_dot {
+ width: 6px;
+ height: 6px;
+ border-radius: 3px;
+ background: rgba(255, 255, 255, 0.4);
+ transition: all 0.3s;
+ }
+
+ .home_banner_dot.active {
+ width: 16px;
+ border-radius: 3px;
+ background: #fff;
}
.home_logo {
@@ -349,6 +602,12 @@
.home_grid {
width: 100%;
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+
+ &.home_grid_bg {
+ background-image: url('@/assets/imgs/new/index-funbg.png');
+ }
.grid_item {
width: 25%;
@@ -359,7 +618,7 @@
width: 100%;
img {
- width: 6.3rem;
+ width: 5.8rem;
}
}
}
@@ -435,5 +694,349 @@
padding: 1.6rem 1.6rem 2rem 1.6rem;
font-size: 2rem;
}
+
+ /* 列表区 Favorites / Markets 切换（与下方 Trend 等统一样式） */
+ .home-list-section {
+ .home-list-tabs {
+ display: flex;
+ gap: 2.4rem;
+ margin-bottom: 1.2rem;
+ padding: 0 0.8rem;
+ .home-list-tab {
+ font-size: 1.8rem;
+ color: $tab-c;
+ padding: 0.6rem 1.4rem;
+ border-radius: 2rem;
+ &.active {
+ background: #fff;
+ color: #000;
+ font-weight: 600;
+ }
+ }
+ }
+ .home-list-more {
+ text-align: center;
+ padding: 1.2rem;
+ font-size: 2rem;
+ color: #1194F7;
+ margin-top: 0.8rem;
+ }
+ }
+
+ /* HOT COINS 横向滚动卡片：一屏约 3 个，细体 + 色 #29155a */
+ .home-hot-coins {
+ margin-top: 2.4rem;
+ .home-hot-title {
+ font-size: 2.1rem;
+ font-weight: 400;
+ color: #29155a;
+ margin-bottom: 0.4rem;
+ }
+ .home-hot-subtitle {
+ font-size: 1.5rem;
+ font-weight: 400;
+ color: #29155a;
+ margin-bottom: 1rem;
+ opacity: 0.75;
+ }
+ .home-hot-scroll {
+ display: flex;
+ gap: 1.4rem;
+ overflow-x: auto;
+ padding: 0.8rem 0 1.2rem 0;
+ -webkit-overflow-scrolling: touch;
+ &::-webkit-scrollbar { height: 6px; }
+ &::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }
+ }
+ .home-hot-card {
+ flex-shrink: 0;
+ width: calc((100vw ) / 3);
+ min-width: 10rem;
+ padding: 1.4rem 1rem;
+ background: #fff;
+ border-radius: 12px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.6rem;
+ }
+ .home-hot-logo {
+ width: 5rem;
+ height: 5rem;
+ border-radius: 50%;
+ }
+ .home-hot-symbol {
+ font-size: 1.7rem;
+ font-weight: 400;
+ color: #29155a;
+ }
+ .home-hot-pct {
+ font-size: 1.5rem;
+ font-weight: 400;
+ &.up { color: #0ecb81; }
+ &.down { color: #f6465d; }
+ }
+ }
+
+ /* Trend / Follow / News / IPO 切换：左右内外边距加宽 */
+ .home-trend-tabs {
+ display: flex;
+ gap: 3rem;
+ margin-top: 2.4rem;
+ margin-bottom: 1rem;
+ padding: 0 1.8rem;
+ .home-trend-tab {
+ font-size: 1.8rem;
+ color: $tab-c;
+ padding: 0.8rem 2.2rem;
+ border-radius: 2rem;
+ &.active {
+ background: #fff;
+ color: #000;
+ font-weight: 600;
+ }
+ }
+ }
+
+ .home-trend-card {
+ border-radius: 16px;
+ overflow: hidden;
+ min-height: 200px;
+ margin-top: 10px;
+ &.home-trend-card--bg {
+ background: url('@/assets/imgs/new/riseBg.jpg') no-repeat center/cover;
+ background-color: #fff;
+ background-size: 100% 100%;
+ .home-trend-card-inner {
+ padding: 1.6rem;
+ position: relative;
+ z-index: 1;
+ }
+ .home-trend-heading {
+ font-size: 2.8rem;
+ color: #fff;
+ margin-bottom: 0.4rem;
+ margin-top: 30px;
+ padding: 0 2rem;
+
+ }
+ .home-trend-subtitle {
+ padding: 0 2rem;
+ font-size: 1.5rem;
+ color: rgba(255,255,255,0.85);
+ margin-bottom: 1.2rem;
+
+ }
+ .home-trend-list {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ }
+ .home-trend-item {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ padding: 0rem 0rem;
+ margin: 0.5rem 2rem;
+ border-bottom: 1px solid hsla(0, 0%, 100%, .1);
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+ .home-trend-logo {
+ width: 3.6rem;
+ height: 3.6rem;
+ border-radius: 50%;
+ }
+ .home-trend-info {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 0.2rem;
+ }
+ .home-trend-name {
+ font-size: 1.7rem;
+ font-weight: 600;
+ color: #fff;
+ }
+ .home-trend-right {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ gap: 0.3rem;
+ }
+ .home-trend-price {
+ font-size: 1.5rem;
+ color: #fff;
+ }
+ .home-trend-pct {
+ font-size: 1.6rem;
+ font-weight: 600;
+ color: #0ecb81;
+ }
+ }
+ &.home-trend-card--empty {
+ background: #f7f7f7;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 2rem;
+ .home-empty-img {
+ width: 12rem;
+ height: auto;
+ margin-bottom: 1rem;
+ }
+ .home-empty-text {
+ font-size: 1.8rem;
+ color: $tab-c;
+ }
+ }
+ &.home-trend-card--news {
+ background: #fff;
+ .home-trend-card-inner {
+ padding: 1.6rem 1.8rem;
+ }
+ .home-trend-heading--dark {
+ color: #29155a;
+ font-size: 2.2rem;
+ margin-top: 0;
+ padding: 0;
+ }
+ .home-news-list {
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+ }
+ .home-news-item {
+ display: flex;
+ align-items: flex-start;
+ gap: 1rem;
+ padding: 1.2rem 0;
+ border-bottom: 1px solid #eee;
+ cursor: pointer;
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+ .home-news-thumb {
+ flex-shrink: 0;
+ width: 7.2rem;
+ height: 7.2rem;
+ border-radius: 8px;
+ overflow: hidden;
+ background: #f0f0f0;
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+ .home-news-body {
+ flex: 1;
+ min-width: 0;
+ }
+ .home-news-title {
+ font-size: 1.5rem;
+ line-height: 1.4;
+ margin-bottom: 0.4rem;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ }
+ .home-news-meta {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 1.2rem;
+ gap: 0.5rem;
+ }
+ .home-news-date {
+ flex: 1;
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: #999;
+ }
+ .home-news-detail {
+ flex-shrink: 0;
+ color: #999;
+ }
+ .home-trend-card--empty-inner {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 160px;
+ .home-empty-img {
+ width: 10rem;
+ height: 10rem;
+ }
+ .home-empty-text {
+ margin-top: 0.8rem;
+ font-size: 1.4rem;
+ color: #999;
+ }
+ }
+ }
+ }
+}
+
+.news-detail-popup {
+ .news-detail-inner {
+ padding: 0 2rem 2.4rem;
+ overflow-y: auto;
+ max-height: 100%;
+ background: #fff;
+ }
+ .news-detail-drag-bar {
+ width: 3.6rem;
+ height: 4px;
+ margin: 1rem auto 1.2rem;
+ background: #e0e0e0;
+ border-radius: 2px;
+ }
+ .news-detail-header {
+ margin-bottom: 0.6rem;
+ }
+ .news-detail-source {
+ font-size: 1.2rem;
+ color: #999;
+ }
+ .news-detail-title {
+ font-size: 2rem;
+ font-weight: 600;
+ line-height: 1.35;
+ margin: 0 0 1.4rem;
+ color: #1a1a1a;
+ }
+ .news-detail-img-wrap {
+ border-radius: 12px;
+ overflow: hidden;
+ margin-bottom: 1.4rem;
+ background: #f5f5f5;
+ .news-detail-img {
+ width: 100%;
+ display: block;
+ object-fit: cover;
+ max-height: 22rem;
+ }
+ }
+ .news-detail-content {
+ font-size: 1.45rem;
+ line-height: 1.7;
+ color: #333;
+ white-space: pre-wrap;
+ word-break: break-word;
+ margin-bottom: 2rem;
+ }
+ .news-detail-close {
+ margin-top: 0.4rem;
+ height: 4.4rem;
+ font-size: 1.6rem;
+ }
}
</style>
\ No newline at end of file
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 222a692..7833928 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,288 +1,253 @@
<template>
<div class="login">
- <div class="top flex justify-between items-center">
- <img src="../../assets/image/icon-close.png" alt="" @click="onRoute('/homePage/index')" />
- <div @click="onRoute('/customerService')">{{ $t('onLineService') }}</div>
- </div>
- <!-- <div class="divider mt-10"></div> -->
-
- <div class="log flex items-center justify-center flex-col pt-20 mt-10 mb-20 textColor">
- <img :src="LOGO" alt="">
- <span class="font-bold text-5xl mt-10">
- {{ `${$t('欢迎加入')} ${$title}` }}
- </span>
- </div>
-
- <div class="flex re-tab">
- <div class="textColor1" :class="activeIndex == 1 ? 'active' : ''" @click="changeIndex(1)">
- {{ $t('电子邮箱') }}
+ <div class="login-inner">
+ <!-- Logo：紫色渐变圆角方框 -->
+ <div class="login-logo-wrap">
+ <img :src="LOGO" alt="" class="login-logo" />
</div>
- <div class="textColor1" :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)">
- {{ $t('手机号码') }}
+ <h1 class="login-title">{{ $t('Welcome Back') }}</h1>
+ <p class="login-signup">
+ {{ $t('noAccount') }}
+ <router-link to="/register" class="login-signup-link">{{ $t('Sign up') }}</router-link>
+ </p>
+ <p class="login-lang" @click="onRoute('/language')">{{ currentLocaleLabel }}</p>
+
+ <!-- 邮箱 -->
+ <div class="login-field">
+ <input
+ v-model="username"
+ type="text"
+ class="login-input"
+ :placeholder="$t('entryEmail')"
+ autocomplete="email"
+ @keyup.enter="verifyLogin"
+ />
</div>
+ <!-- 密码 + 眼睛 -->
+ <div class="login-field login-field-pwd">
+ <input
+ v-model="password"
+ :type="passwordVisible ? 'text' : 'password'"
+ class="login-input"
+ :placeholder="$t('请输入登录密码')"
+ autocomplete="current-password"
+ @keyup.enter="verifyLogin"
+ />
+ <span class="login-eye" @click="passwordVisible = !passwordVisible">
+ <van-icon :name="passwordVisible ? 'eye-o' : 'closed-eye'" size="20" />
+ </span>
+ </div>
+
+ <div class="login-options">
+ <label class="login-remember" @click.prevent="rememberMe = !rememberMe">
+ <img :src="rememberMe ? checkImgChecked : checkImg" alt="" class="login-remember-icon" />
+ <span>{{ $t('Remember me') }}</span>
+ </label>
+ <span class="login-forgot" @click="onRoute('/forget')">{{ $t('forgetPassword') }}</span>
+ </div>
+
+ <button class="login-btn" @click="verifyLogin">{{ $t('login') }}</button>
+
+ <p class="login-version">{{ versionText }}</p>
</div>
-
- <ExInput style="padding-bottom:16px !important;" :placeholderText="getRegType(activeIndex, false)"
- v-model="username" :dialCode="dialCode" @selectArea="onSelectArea" :area="isArea" :icon="icon"
- @pressEnter="verifyLogin" />
-
- <ExInput style="padding-bottom:0 !important;" :placeholderText="$t('请输入登录密码')" v-model="password"
- typeText="password" @pressEnter="verifyLogin" />
-
- <div class="forget colorMain" @click="$router.push('/forget')">{{ $t('forgetPassword') }}</div>
- <van-button class="w-full" round style="margin-top:50px;" type="primary" @click="verifyLogin">{{ $t('login') }}
- </van-button>
- <div class="noTips textColor">
- {{ $t('noAccount') }}?
- <span class="colorMain" @click="$router.push('/register')">
- {{ $t('goRegister') }}</span>
- </div>
- <nationality-list ref='controlChildRef' :title="$t('selectArea')" @getName="getName"></nationality-list>
</div>
</template>
<script setup>
-import ExInput from "@/components/ex-input/new-input.vue";
import { _loginUser } from "@/service/login.api";
-import { _exchangerateuserconfig } from "@/service/trade.api";
-import { GET_USERINFO } from '@/store/types.store'
+import { GET_USERINFO } from '@/store/types.store';
import { useUserStore } from '@/store/user';
-import { useI18n } from 'vue-i18n'
-import nationalityList from '../authentication/components/nationalityList.vue'
-import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from "vant";
-import store from '@/store/store'
-import { LOGO, customerServiceUrl } from "@/config";
-const { t } = useI18n()
+import store from '@/store/store';
+import { LOGO } from "@/config";
+import checkImg from '@/assets/imgs/new/check.png';
+import checkImgChecked from '@/assets/imgs/new/checked.png';
-const router = useRouter()
+const { t, locale } = useI18n();
+const router = useRouter();
+const userStore = useUserStore();
+
+const versionText = 'Version: 198';
+
+const localeLabels = { en: 'English', cn: '中文', Korean: '한국인', Japanese: 'やまと', de: 'Deutsch', French: 'Français', Italy: 'Italiano' };
+const currentLocaleLabel = computed(() => localeLabels[locale.value] || locale.value || 'English');
+
+const username = ref('');
+const password = ref('');
+const rememberMe = ref(false);
+const passwordVisible = ref(false);
const onRoute = (path) => {
- if (path == 'back') {
- router.go(-1)
- } else {
- if (path == '/customerService') {
- if (customerServiceUrl()) {
- window.location.href = customerServiceUrl();
- } else {
- router.push(path)
- }
- } else {
- router.push(path)
- }
- }
-}
-
-let username = ref('')
-let password = ref('')
-let activeIndex = ref(1)
-let isArea = ref(false)
-let dialCode = ref(0)
-let icon = ref('')
-const type = ref(3)
-
-const getRegType = (activeIndex, bFlag) => {
- switch (activeIndex) {
- case 0:
- return bFlag ? t('account') : t('entryAccount');
- case 1:
- return bFlag ? t('电子邮箱') : t('entryEmail');
- case 2:
- return bFlag ? t('手机号码') : t('请输入手机号码');
- }
-}
-const controlChildRef = ref(null)
-const onSelectArea = () => {
- controlChildRef.value.open();
-}
-
-//获取到当前选中国家的code值
-const getName = (params) => {
- icon.value = params.code;
- dialCode.value = params.dialCode;
-}
-
-const changeIndex = (index) => {
- activeIndex.value = index;
- switch (index) {
- case 0:
- case 1: {
- isArea.value = false;
- break;
- }
- case 2: {
- isArea.value = true;
- break;
- }
- }
-}
+ router.push(path);
+};
const verifyLogin = () => {
- switch (activeIndex.value) {
- case 0:
- {
- type.value = 3;
- break;
- }
- case 1:
- {
- type.value = 2;
- break;
- }
- case 2:
- {
- type.value = 1;
- break;
- }
+ if (!username.value) {
+ showToast(t('entryEmail'));
+ return;
}
- if (username.value == '') {
- switch (activeIndex.value) {
- case 0:
- {
- showToast(t('entryAccount'));
- break;
- }
- case 1:
- {
- showToast(t('entryEmail'));
- break;
- }
- case 2:
- {
- showToast(t('entryPhone'));
- break;
- }
- }
- return false
+ if (!password.value) {
+ showToast(t('请输入登录密码'));
+ return;
}
- if (password.value == '') {
- showToast(t('entryPassword'));
- return false
- }
- loginUser()
-}
+ loginUser();
+};
-const userStore = useUserStore();
const loginUser = () => {
_loginUser({
- userName: (activeIndex.value == 0 || activeIndex.value == 1) ? username.value : `${dialCode.value}${username.value}`,
+ userName: username.value,
passWord: password.value,
- // type: type.value
- type: '3' // 写死, 算所有的登录都是账户登录
+ type: '3'
}).then((res) => {
- userStore[GET_USERINFO](res)
- store.commit('user/SET_USERINFO', res)
- router.push('/')
+ userStore[GET_USERINFO](res);
+ store.commit('user/SET_USERINFO', res);
+ router.push('/');
}).catch((res) => {
- console.log(res)
- })
-}
+ console.log(res);
+ });
+};
</script>
<style lang="scss" scoped>
.login {
- width: 100%;
- padding: 15px;
- font-size: 13px;
- box-sizing: border-box;
- background: $mainbgWhiteColor;
min-height: 100vh;
-
- .re-tab {
- margin-bottom: 22px;
-
- div {
- padding: 0 18px;
- height: 34px;
- line-height: 34px;
- text-align: center;
- border-radius: 4px;
- margin-right: 10px;
- }
-
- .active {
- // background: $US_tabActice_background;
- background: $bg_yellow;
- // color: $color_main;
- color: $text_color4;
- }
- }
-
- :deep(.textColor) {
- color: $log-c;
- }
-
- .divider {
- width: 100%;
- height: 2px;
- border-radius: 1px;
- background: $bg_yellow;
- }
-
- .log {
- width: 100%;
-
- img {
- width: 8.5rem;
- }
- }
-
- .w-full {
- background: $bg_yellow;
- border: none;
- color: $mainBgColor;
- font-size: 16px;
- font-weight: 600;
- }
-
- .colorMain {
- color: $bg_yellow;
- }
+ background: #fff;
+ padding: 40px 24px 24px;
+ box-sizing: border-box;
}
-
-.top {
- padding-left: 9px;
- padding-top: 9px;
-
- img {
- width: 18px;
- height: 18px;
- }
+.login-inner {
+ max-width: 400px;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
}
-.title {
- font-weight: 700;
+/* Logo：紫色渐变圆角方框 */
+.login-logo-wrap {
+ width: 72px;
+ height: 72px;
+ border-radius: 18px;
+ background: linear-gradient(135deg, #2c1a5c 0%, #5a37a5 100%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 24px;
+}
+.login-logo {
+ width: 44px;
+ height: 44px;
+ object-fit: contain;
+}
+
+.login-title {
font-size: 26px;
- margin-top: 27px;
- margin-bottom: 33px;
+ font-weight: 700;
+ color: #000;
+ margin: 0 0 8px;
}
-.login-tab {
+.login-signup {
+ font-size: 14px;
+ color: #4a4a4a;
+ margin: 0 0 6px;
+}
+.login-signup-link {
+ color: #8a2be2;
+ cursor: pointer;
+ text-decoration: none;
+}
+.login-signup-link:hover {
+ color: #7b2be2;
+}
+
+.login-lang {
+ font-size: 13px;
+ color: #9b9b9b;
+ margin: 0 0 32px;
+ cursor: pointer;
+}
+
+/* 输入框 */
+.login-field {
+ width: 100%;
+ margin-bottom: 16px;
+ position: relative;
+}
+.login-field-pwd {
margin-bottom: 20px;
-
- div {
- padding: 0 20px;
- height: 34px;
- line-height: 34px;
- text-align: center;
- border-radius: 4px;
- margin-right: 10px;
- }
-
- .active {
- background: $US_tabActice_background;
- color: $color_main;
- }
+}
+.login-input {
+ width: 100%;
+ height: 48px;
+ padding: 0 16px;
+ box-sizing: border-box;
+ font-size: 15px;
+ color: #333;
+ background: #f6f5fa;
+ border: none;
+ border-radius: 10px;
+ outline: none;
+}
+.login-input::placeholder {
+ color: #9b9b9b;
+}
+.login-eye {
+ position: absolute;
+ right: 16px;
+ top: 50%;
+ transform: translateY(-50%);
+ color: #6e6e6e;
+ cursor: pointer;
}
-.forget {
+/* Remember me + Forgot password */
+.login-options {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 32px;
+}
+.login-remember {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 14px;
+ color: #4a4a4a;
+ cursor: pointer;
+}
+.login-remember-icon {
+ width: 18px;
+ height: 18px;
+ flex-shrink: 0;
+}
+.login-forgot {
+ font-size: 14px;
+ color: #4a4a4a;
+ cursor: pointer;
+}
+
+/* Log In 按钮：紫色渐变 */
+.login-btn {
+ width: 100%;
+ height: 48px;
+ border: none;
+ border-radius: 6px;
+ background: linear-gradient(90deg, #a443cf, #5e2bc8);
+ color: #fff;
+ font-size: 16px;
+ font-weight: 700;
+ cursor: pointer;
+}
+
+/* Version */
+.login-version {
+ margin-top: 48px;
font-size: 12px;
- line-height: 14px;
- margin-top: 30px;
+ color: #9b9b9b;
}
-
-.noTips {
- margin-top: 22px;
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/my/aiDetail.vue b/src/views/my/aiDetail.vue
new file mode 100644
index 0000000..b300c83
--- /dev/null
+++ b/src/views/my/aiDetail.vue
@@ -0,0 +1,66 @@
+<template>
+ <div class="my-detail-page">
+ <assets-head :show-left="true" :back-func="goBack" class="assetsHead" :title="$t('人工智能交易')" />
+ <div class="my-detail-body">
+ <div class="my-detail-placeholder">
+ <img class="ai-strategy-pic" src="@/assets/imgs/new/ai-strategy_pic.png" alt="">
+ <div class="ai-strategy-text">{{ $t('aiStrategyDesc') }}</div>
+ <div class="ai-strategy-empty">
+ <img class="ai-strategy-icon" src="@/assets/imgs/new/empty.png" alt="">
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router';
+import AssetsHead from '@/components/Transform/assets-head/index.vue';
+
+const router = useRouter();
+const goBack = () => router.go(-1);
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/theme/index.scss';
+.ai-strategy-empty{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: 20px;
+}
+.ai-strategy-icon{
+ width: 220px;
+ height: 100%;
+}
+.ai-strategy-text{
+ padding: 0 12px;
+ font-size: 14px;
+ color: #fff;
+ text-align: left;
+}
+:deep(.van-nav-bar) {
+ background-color: #030221 !important;
+}
+
+.ai-strategy-pic {
+ width: 100%;
+ height: 100%;
+}
+
+.my-detail-page {
+ min-height: 100vh;
+ background-color: #030221 !important;
+}
+
+.my-detail-body {}
+
+.my-detail-placeholder {
+ font-size: 2.2rem;
+ text-align: center;
+
+ @include themify() {
+ color: themed("text_color2");
+ }
+}
+</style>
diff --git a/src/views/my/airdrop.vue b/src/views/my/airdrop.vue
new file mode 100644
index 0000000..02d9001
--- /dev/null
+++ b/src/views/my/airdrop.vue
@@ -0,0 +1,106 @@
+<template>
+ <div class="my-detail-page">
+ <assets-head :show-left="true" class="assetsHead" :back-func="goBack" :title="$t('空投')" />
+ <div class="my-detail-body">
+ <div class="my-detail-placeholder">
+ <div class="airdrop-title">{{ $t('airdropOfficialEcology') }}</div>
+ <div class="airdrop-title" style="font-size: 20px;padding: 16px 12px;">{{ $t('airdropActivityInProgress') }}</div>
+ <div class="airdrop-title" style="font-size: 16px;padding: 0 12px;">{{ $t('airdropPlatformDesc') }}</div>
+ </div>
+ <div class="airdrop-content">
+ {{ $t('airdropParticipateTip') }}
+ {{ $t('airdropAccumulated') }}
+ </div>
+ <div class="airdrop-txt">{{ $t('airdropInProgress') }}</div>
+ <div class="airdrop-tps">{{ $t('airdropMostPotential') }}</div>
+ <div class="airdrop-xb">{{ $t('airdropGiftRecord') }}</div>
+ <div class="airdrop-xb-icon">
+ <img class="ai-strategy-icon" src="@/assets/imgs/new/empty.png" alt="">
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router';
+import AssetsHead from '@/components/Transform/assets-head/index.vue';
+
+const router = useRouter();
+const goBack = () => router.go(-1);
+</script>
+
+<style lang="scss" scoped>
+.airdrop-xb-icon{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-top: 10px;
+}
+.ai-strategy-icon{
+ width: 220px;
+ height: 100%;
+}
+.airdrop-xb{
+ color:#fff;
+ font-size: 16px;
+ font-weight: 700;
+ margin-left: 18px;
+ margin-top: 30px;
+}
+.airdrop-tps{
+ text-align: center;
+ color: #737285;
+ font-size: 12px;
+ font-weight: 700;
+}
+.airdrop-txt{
+ padding-bottom: 5px;
+ font-size: 24px;
+ padding-top: 40px;
+ text-align: center;
+ color: #fff;
+ font-weight: 700;
+}
+.airdrop-content{
+ padding-top: 16px;
+ padding: 0 24px;
+ text-align: center;
+ background: linear-gradient(90deg, #bea3fa, #fbfbfb 46%, #adf6fc 71%, #9c9afb);
+ -webkit-background-clip: text;
+ color: transparent;
+ font-size: 12px;
+ font-weight: 700;
+}
+@import '@/assets/theme/index.scss';
+.airdrop-title{
+ padding-top: 16px;
+ text-align: center;
+ background: linear-gradient(90deg, #bea3fa, #fbfbfb 46%, #adf6fc 71%, #9c9afb);
+ -webkit-background-clip: text;
+ color: transparent;
+ font-size: 23px;
+ font-weight: 700;
+}
+:deep(.van-nav-bar) {
+ background-color: #030221 !important;
+}
+
+.my-detail-page {
+ min-height: 100vh;
+ background-image: url('@/assets/imgs/new/airdrop-bg.jpg');
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+}
+
+.my-detail-body {
+}
+
+.my-detail-placeholder {
+ font-size: 2.2rem;
+ text-align: center;
+ margin-bottom: 260px;
+ @include themify() {
+ color: themed("text_color2");
+ }
+}
+</style>
diff --git a/src/views/my/assets.vue b/src/views/my/assets.vue
index ff70892..e9887c1 100644
--- a/src/views/my/assets.vue
+++ b/src/views/my/assets.vue
@@ -1,79 +1,75 @@
<template>
- <div class="assets">
- <div class="assets_title">{{ $t('总资产估值') }}</div>
- <div class="assets_money font-bold mt-5 flex justify-start items-end">
- {{ currency.currency_symbol }}{{ formatWithCommas(forexAssets?.money_contract ?
- (forexAssets?.money_contract * (currency.rate ?? 0)).toFixed(2) : '0.00') }}
+ <div class="assets-page">
+ <assets-head :title="$t('My assets')" :show-left="true" :back-func="goBack">
+ <template #default>
+ <van-icon name="records-o" size="22" class="assets-head-menu"
+ @click="toPage('/cryptos/accountChange')" />
+ </template>
+ </assets-head>
- <div class="pricing_jj ml-5">
- {{ pricing }}
- </div>
- <van-dropdown-menu>
- <van-dropdown-item v-model="pricing" :options="pricingList" @change="changePricing">
- <div @click="toPage('/cryptos/exchangeRate')" class="text-center">{{ $t('更多') }}</div>
- </van-dropdown-item>
- </van-dropdown-menu>
- </div>
- <!-- <div class="assets_revenue mt-5">
- <span>{{ $t('当日') }}</span>
- {{ currency.currency_symbol }}
- <span
- :style="forexAssets?.money_contract_profit_today > 0 ? 'color:green' : forexAssets?.money_contract_profit_today < 0 ? 'color:red' : ''">
- {{ forexAssets?.money_contract_profit_today ?
- (forexAssets?.money_contract_profit_today * (currency.rate ?? 0)).toFixed(2) :
- '--' }}
- </span>
- </div> -->
-
- <div class="tabbers flex justify-between mt-20 pl-1 pr-1">
- <div class="item" v-for="item in tabList" :key="item.key" @click="toPage(item.path)">
- <img :src="item.icon" alt="">
- <div class="mt-3 text-center">{{ item.name }}</div>
- </div>
- </div>
-
- <van-collapse v-model="activeNames" class="mt-10">
- <van-collapse-item :title="$t('分布')" name="1">
- <!-- <div class="divider"></div> -->
- <div class="percentage flex just-between items-center">
- <div :style="`width:${assetObj.capital / (assetObj.capital + assetObj.contract) * 100}%`">
+ <div class="assets-body">
+ <!-- 总资产估值卡片：圆角浅灰 -->
+ <div class="assets-total-card">
+ <div class="assets-total-label">{{ $t('总资产估值') }}</div>
+ <div class="assets-total-value">
+ {{ currency.currency_symbol }}{{ formatWithCommas(totalDisplay) }}
+ </div>
+ <div class="assets-futures-bonus-row">
+ <div class="assets-futures-cell">
+ <div class="assets-cell-label">{{ $t('永续') }}</div>
+ <div class="assets-cell-value">{{ formatWithCommas(futuresDisplay) }}</div>
</div>
- <div class="flex-1">
+ <div class="assets-bonus-cell" @click="toPage('/my/transfer')">
+ <div>
+ <div class="assets-cell-label">{{ $t('Bonus') }}</div>
+ <div class="assets-cell-value">{{ formatWithCommas(bonusDisplay) }}</div>
+ </div>
+ <van-icon name="arrow" class="assets-cell-arrow" />
</div>
</div>
- <div class="assets_item flex justify-start items-center mt-14 font-bold">
- <div class="icon" style="background-color: #8A90FE;"></div>
- <span class="ml-5 flex-1">{{ $t('资金账户') }}</span>
- <span class="mr-5">{{ formatWithCommas(assetObj.capital) }}</span>
- <van-icon name="arrow" />
+
+ <!-- 展开后：BTC Price + ETH Price K 线图 -->
+ <div v-if="expanded" class="assets-chart-section">
+ <div class="assets-chart-title">{{ $t('BTC Price') }}</div>
+ <div class="assets-kline-wrap">
+ <fx-kline chart-id="kline-btc" :height="260" symbol="btcusdt" :show-bottom="false"
+ chart-type="candle_stroke" />
+ </div>
</div>
- <!-- <div class="assets_item flex justify-start items-center mt-14 font-bold">
- <div class="icon" style="background-color: #f7b600;"></div>
- <span class="ml-5 flex-1">{{ $t('交易账户') }}</span>
- <span class="mr-5">{{ formatWithCommas(assetObj.contract) }}</span>
- <van-icon name="arrow" />
- </div> -->
- </van-collapse-item>
- </van-collapse>
-
- <div class="assets_item flex font-bold justify-between items-center mt-14 mb-10">
- <span>{{ $t('资产') }}</span>
- <van-icon name="exchange" size="3rem" />
- </div>
-
- <div class="assets_item flex justify-start items-center mb-10 font-bold" v-for="item in assetList"
- :key="item.id">
- <img :src="`${HOST_URL}/symbol/${item.symbol_data}.png`" />
-
- <span class="ml-5 flex-1">{{ arrGk((item.name || '').toUpperCase())[0] }}</span>
-
- <div class="mr-3">
- <div class="text-right">
- {{ item.volume ? formatWithCommas(Number(item.volume).toFixed(2)) : '0.0' }}
+ <div v-if="expanded" class="assets-chart-section">
+ <div class="assets-chart-title">{{ $t('ETH Price') }}</div>
+ <div class="assets-kline-wrap">
+ <fx-kline chart-id="kline-eth" :height="260" symbol="ethusdt" :show-bottom="false"
+ chart-type="candle_stroke" />
+ </div>
</div>
- <div class="assets_item_light text-right">
- ≈{{ currency.currency_symbol }}
- {{ item.usdt ? formatWithCommas(Number(item.usdt).toFixed(2)) : '0.0' }}
+
+ <div class="assets-expand-btn" @click="expanded = !expanded">
+ <van-icon :name="expanded ? 'arrow-up' : 'arrow-down'" class="assets-chevron" />
+ </div>
+ </div>
+
+
+ <!-- 资产列表 -->
+ <div class="assets-list-head">{{ $t('Asset list') }}</div>
+ <div class="assets-list">
+ <div v-for="item in assetList" :key="item.id || item.symbol_data" class="assets-list-card">
+ <div class="assets-list-top">
+ <img :src="`${HOST_URL}/symbol/${item.symbol_data || item.symbol}.png`" alt=""
+ class="assets-list-icon" onerror="this.style.display='none'" />
+ <span class="assets-list-symbol">{{ (item.name || item.symbol_data || item.symbol ||
+ '').toUpperCase().split('/')[0] }}</span>
+ </div>
+ <div class="assets-list-bottom">
+ <div class="assets-list-cell">
+ <span class="assets-list-label">{{ $t('Usable') }}</span>
+ <span class="assets-list-num">{{ item.volume != null ? item.volume : 0 }}</span>
+ </div>
+ <div class="assets-list-cell">
+ <span class="assets-list-label">{{ $t('Locked') }}</span>
+ <span class="assets-list-num">{{ item.locked != null ? item.locked : 0 }}</span>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -81,263 +77,347 @@
</template>
<script setup>
-import { ref } from "vue";
-import { useI18n } from "vue-i18n";
+import { ref, computed } from "vue";
import { useRouter } from 'vue-router';
import { _getExchangeRate } from '@/service/cryptos.api'
import { _exchangerateuserconfig } from "@/service/trade.api";
import store from '@/store/store'
import { useStore } from "vuex"
-import {
- _getContractBySymbolType
-} from "@/service/etf.api";
+import { _getContractBySymbolType } from "@/service/etf.api";
import { SET_CURRENCY } from "@/store/const.store";
import { _getassets } from "@/service/user.api.js";
import { _getAllWallet } from '@/service/fund.api';
import { HOST_URL } from '@/config';
import { formatWithCommas } from '@/utils';
+import AssetsHead from '@/components/Transform/assets-head/index.vue';
+import fxKline from '@/components/fx-kline/index.vue';
-const router = useRouter()
-const { t } = useI18n()
-const activeNames = ref(['1'])
+const router = useRouter();
const { dispatch } = useStore();
-const tabList = [
- { key: 1, name: t('充值'), icon: new URL('@/assets/imgs/assets/chonbi.png', import.meta.url), path: '/cryptos/recharge/rechargeList?isForeign=true' },
- { key: 2, name: t('提现'), icon: new URL('@/assets/imgs/assets/tibi.png', import.meta.url), path: '/cryptos/Withdraw/withdrawPage' },
- // { key: 3, name: t('划转'), icon: new URL('@/assets/imgs/assets/huazhuan.png', import.meta.url), path: '/my/transfer' },
- { key: 5, name: t('闪兑'), icon: new URL('@/assets/imgs/assets/sd.png', import.meta.url), path: '/cryptos/exchangePage' },
- { key: 4, name: t('账单'), icon: new URL('@/assets/imgs/assets/zd.png', import.meta.url), path: '/cryptos/accountChange' },
-]
+const expanded = ref(false);
-// 处理分隔符
-const arrGk = (str) => {
- if (!str) return ['--'];
- let arr = str.split('/');
- return arr;
-}
+const goBack = () => router.go(-1);
+const toPage = (path) => {
+ if (!path) return;
+ router.push(path);
+};
+
+// 计价与资产
+const currency = ref({});
+const forexAssets = ref({});
+const assetObj = ref({});
+const symbolType = ref('cryptos');
+
+const totalDisplay = computed(() => {
+ const v = forexAssets.value?.money_contract;
+ const rate = currency.value?.rate ?? 0;
+ if (v == null) return '0.00';
+ return (v * rate).toFixed(2);
+});
+
+const futuresDisplay = computed(() => {
+ const v = forexAssets.value?.money_wallet ?? assetObj.value?.contract;
+ if (v == null) return '0';
+ return Number(v).toFixed(2);
+});
+
+const bonusDisplay = computed(() => {
+ const v = assetObj.value?.capitalUSDT ?? 0;
+ return Number(v).toFixed(2);
+});
+
+const getCurrency = async () => {
+ try {
+ const res = await _getExchangeRate({ token: store.state.user.userInfo?.token });
+ currency.value = res;
+ } catch (e) { }
+};
+
+const getContractBySymbolType = () => {
+ _getContractBySymbolType(symbolType.value).then(res => {
+ forexAssets.value = res;
+ });
+};
+
+const getassets = () => {
+ _getassets().then(res => {
+ assetObj.value = res;
+ });
+};
+
+// 资产列表
+const assetList = ref([]);
+const getList = () => {
+ _getAllWallet({ symbolType: 'cryptos' }).then((res) => {
+ assetList.value = res.extends || [];
+ });
+};
// 计价切换
-const pricing = ref('')
+const pricing = ref('');
const pricingList = [
{ text: 'USD', value: 'USD', key: 'USD_in' },
{ text: 'EUR', value: 'EUR', key: 'EUR_in' },
{ text: 'JPY', value: 'JPY', key: 'JPY_in' },
-]
+];
const changePricing = (e) => {
- let item = pricingList.find((item) => item.value == e)
+ const item = pricingList.find((i) => i.value === e);
+ if (item) {
+ _exchangerateuserconfig({ rateId: item.key }).then(() => {
+ dispatch(`home/${SET_CURRENCY}`);
+ getCurrency();
+ getContractBySymbolType();
+ });
+ }
+};
- _exchangerateuserconfig({ rateId: item.key }).then((res) => {
- dispatch(`home/${SET_CURRENCY}`)
- getCurrency()
- getContractBySymbolType()
- })
-}
-
-// 跳转页面
-const toPage = (path) => {
- if (!path) return
- router.push(path)
-}
-
-// 资产信息获取
-const currency = ref({})
-const forexAssets = ref({})
-const symbolType = ref('cryptos') //默认etf
-const getCurrency = async () => {
- _getExchangeRate({
- token: store.state.user.userInfo.token
- }).then(res => {
- currency.value = res
- pricing.value = res.currency
- }).catch(err => Promise.reject(err))
-}
-const getContractBySymbolType = () => {
- _getContractBySymbolType(symbolType.value)
- .then(res => {
- forexAssets.value = res
- })
-}
-const assetObj = ref({})
-const getassets = () => { // 获取资产
- _getassets().then(res => {
- assetObj.value = res
- })
-}
-
-// 获取资产列表
-const assetList = ref([])
-const getList = () => {
- _getAllWallet({
- symbolType: 'cryptos'
- }).then((res) => {
- assetList.value = res.extends
- console.log("资产列表", assetList.value);
-
- });
-}
-
-getList()
-getassets()
-getCurrency()
-getContractBySymbolType()
+getList();
+getassets();
+getCurrency();
+getContractBySymbolType();
</script>
-
<style lang="scss" scoped>
@import '@/assets/theme/index.scss';
-.assets {
+.assets-page {
min-height: 100vh;
- background: $mainbgWhiteColor;
- padding: 2.8rem 2rem 10rem 2rem;
+ padding-bottom: 4rem;
+
+ @include themify() {
+ background-color: #f6f5fa;
+ color: themed("text_color2");
+ }
+}
+
+.assets-head-menu {
+ padding: 0 8px;
@include themify() {
color: themed("text_color2");
}
+}
- :deep(.van-cell) {
- padding-left: 0;
- padding-right: 0;
- }
+.assets-body {
+ padding: 0;
+}
- :deep(.van-cell:after) {
- display: none;
- }
+.assets-total-card {
+ background: #fff;
+ border-radius: 16px;
+ padding: 20px 20px 12px;
+ margin-top: 10px;
- :deep(.van-collapse-item__content) {
- padding-left: 0;
- padding-right: 0;
- }
-
- :deep(.van-cell__title) {
- font-size: 2.1rem;
- font-weight: 600;
- }
-
- .assets_title {
- font-size: 2.1rem;
- }
-
- .assets_money {
- font-size: 3.4rem;
-
- @include themify() {
- color: themed("text_color");
- }
-
- .pricing_jj {
- font-size: 1.6rem;
- margin-right: -8px;
- }
-
- :deep(.van-dropdown-menu__bar) {
- height: auto;
- box-shadow: none;
- }
-
- :deep(.van-dropdown-menu__title--down:after) {
- margin-top: -14px !important;
- }
-
- :deep(.van-dropdown-menu__title:after) {
- margin-top: -16px;
- }
-
- :deep(.van-ellipsis) {
- display: none;
- }
-
- :deep(.van-popup--top) {
- padding: 10px 20px;
- font-size: 2rem;
- }
- }
-
- .assets_revenue {
- font-size: 2rem;
- font-weight: 600;
-
- @include themify() {
- color: themed("text_color1");
- }
-
- span {
- text-decoration: underline dotted;
- font-weight: 400;
-
- @include themify() {
- color: themed("text_color1");
- }
- }
- }
-
- .tabbers {
- .item {
- $item_width: 8.3rem;
- width: $item_width;
- font-size: 1.8rem;
-
- @include themify() {
- color: themed("text_color2");
- }
-
- img {
- height: $item_width;
- border-radius: 50%;
- }
- }
- }
-
- // .divider {
- // height: 1rem;
- // border-radius: 0.5rem;
- // background: $bg_yellow;
- // }
-
- .percentage {
- div {
- height: 1rem;
- border-radius: 0.5rem;
- }
-
- &>div:last-child {
- background: $bg_yellow;
- }
-
- &>div:first-child {
- background: #8A90FE;
- margin-right: 0.2rem;
- }
- }
-
- .assets_item {
- font-size: 2.1rem;
-
- @include themify() {
- color: themed("text_color2");
- }
-
- .icon {
- width: 1.8rem;
- height: 1.8rem;
- border-radius: 50%;
- background: $icon-bg;
- }
-
- img {
- width: 2.8rem;
- height: 2.8rem;
- border-radius: 50%;
- }
-
- .assets_item_light {
- font-weight: 300;
-
- @include themify() {
- color: themed("text_color2");
- }
- }
+ @include themify() {
+ background: themed("card_bg");
}
}
-</style>
\ No newline at end of file
+
+.assets-total-label {
+ font-size: 1.6rem;
+
+ @include themify() {
+ color: themed("text_color2");
+ }
+}
+
+.assets-total-value {
+ font-size: 2.6rem;
+ font-weight: 700;
+ margin-top: 8px;
+
+ @include themify() {
+ color: themed("text_color");
+ }
+}
+
+.assets-futures-bonus-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 16px;
+ padding-top: 12px;
+ border-top: 1px solid rgba(0, 0, 0, 0.06);
+
+ @include themify() {
+ border-top-color: themed("border_color");
+ }
+}
+
+.assets-futures-cell,
+.assets-bonus-cell {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+}
+
+.assets-bonus-cell {
+ width: 50%;
+ flex-direction: row;
+ align-items: center;
+ gap: 6px;
+ cursor: pointer;
+}
+
+.assets-cell-label {
+ font-size: 1.8rem;
+
+ @include themify() {
+ color: themed("text_color2");
+ }
+}
+
+.assets-cell-value {
+ font-size: 2.2rem;
+ font-weight: 600;
+ margin-top: 4px;
+
+ @include themify() {
+ color: themed("text_color");
+ }
+}
+
+.assets-cell-arrow {
+ font-size: 16px;
+ margin-top: 2px;
+
+ @include themify() {
+ color: themed("text_color2");
+ }
+}
+
+.assets-expand-btn {
+ display: flex;
+ justify-content: center;
+ padding: 8px 0 4px;
+}
+
+.assets-chevron {
+ font-size: 20px;
+
+ @include themify() {
+ color: themed("text_color2");
+ }
+}
+
+.assets-chart-section {
+ margin-top: 16px;
+ border-radius: 16px;
+
+ @include themify() {
+ background: themed("card_bg");
+ }
+}
+
+.assets-chart-title {
+ font-size: 1.8rem;
+ margin-bottom: 12px;
+
+ @include themify() {
+ color: themed("text_color2");
+ }
+}
+
+.assets-kline-wrap {
+ border-radius: 8px;
+ overflow: hidden;
+ min-height: 260px;
+}
+
+.assets-list-head {
+ font-size: 2.4rem;
+ font-weight: 700;
+ margin-top: 24px;
+ margin-bottom: 12px;
+ padding-left: 20px;
+
+ @include themify() {
+ color: themed("text_color");
+ }
+}
+
+.assets-list {
+ display: flex;
+ flex-direction: column;
+ padding: 0 20px;
+
+}
+
+.assets-list-card {
+ display: flex;
+ flex-direction: column;
+ margin: 10px 0 0;
+ background-color: #fff;
+ border-radius: 16px;
+ padding: 20px 18px;
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+
+ @include themify() {
+ background: themed("card_bg");
+ color: themed("text_color2");
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+ }
+}
+
+.assets-list-top {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.assets-list-icon {
+ width: 22px;
+ height: 22px;
+ border-radius: 50%;
+ object-fit: cover;
+ flex-shrink: 0;
+}
+
+.assets-list-symbol {
+ font-size: 2rem;
+ font-weight: 500;
+
+ @include themify() {
+ color: themed("text_color");
+ }
+}
+
+.assets-list-bottom {
+ display: flex;
+ justify-content: space-around;
+ align-items: flex-start;
+ padding-top: 12px;
+
+ @include themify() {
+ border-top-color: themed("border_color");
+ }
+}
+
+.assets-list-cell {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 4px;
+}
+
+.assets-list-label {
+ font-size: 1.4rem;
+ font-weight: 400;
+ text-align: center;
+
+ @include themify() {
+ color: themed("text_color2");
+ }
+}
+
+.assets-list-num {
+ font-size: 2.2rem;
+ font-weight: 700;
+ text-align: center;
+
+ @include themify() {
+ color: themed("text_color");
+ }
+}
+</style>
diff --git a/src/views/my/index.vue b/src/views/my/index.vue
index da5c57e..ed10bf5 100644
--- a/src/views/my/index.vue
+++ b/src/views/my/index.vue
@@ -1,414 +1,382 @@
<template>
<section class="my-index">
- <!-- <fx-header :back="false" :title="$t('my')">
- <template v-slot:right>
- <van-icon name="service-o" size="24" @click="$router.push('/customerService')"></van-icon>
- </template>
-</fx-header> -->
- <assets-head title="">
- <!-- <img src="../../../assets/image/assets-center/exchange.png" alt="exchange-img" class="w-44 h-38"
- @click="goRouter('/customerService')" /> -->
- <template v-slot:right>
- <van-icon name="service-o" size="24" @click="$router.push('/customerService')"></van-icon>
+ <!-- 顶部：资产 + 设置图标，浅蓝灰渐变 -->
+ <assets-head :title="$t('资产')" :show-left="false">
+ <template #default>
+ <van-icon name="setting-o" size="22" class="my-header-icon" @click="onRoute('/safety')" />
</template>
</assets-head>
- <div class="px-8 mt-4">
- <h1 class="text-2xl font-bold title" v-if="!(userStore.userInfo && userStore.userInfo.token)">{{
- $t('welcome')
- }} {{ $title }}!
- </h1>
- <p class="sub-text" v-if="!(userStore.userInfo && userStore.userInfo.token)">{{ $t('通往机构机代币化的大门') }}</p>
- <p class="w-full flex mt-4 gap-x-4" v-if="!(userStore.userInfo && userStore.userInfo.token)">
- <van-button class="flex-1" round @click="onRoute('/register')">{{ $t('register') }}</van-button>
- <van-button class="flex-1" type="primary" round color="#f7b600" @click="onRoute('/login')">{{ $t('login')
- }}</van-button>
- </p>
- <div class="mt-4 flex items-start" v-else>
- <img class="w-24 h-24" src="@/assets/image/avatar.png" alt="avatar" />
- <div class="ml-5 pt-1 flex flex-col justify-center">
- <div class="font-bold text-lg name" style="width: 200px;overflow-wrap: break-word;">{{ userStore.userInfo &&
- userStore.userInfo.username }}</div>
- <div class="text-sm text-gray-400 mt-5 flex items-center id-text">
- ID：{{ userStore.userInfo && userStore.userInfo.usercode }}<img class="w-8 h-8 ml-4"
- src="@/assets/image/idcopy.png" alt="id" @click="copy" /></div>
- <div class="flex items-center justify-start mt-5">
- <div class="label pl-2 pr-2"
- :class="{ 'red': status == 0 || status == 3, 'yellow': status == 1, 'green': status == 2 }">
- {{ status == 0 ? $t('notCertified') :
- status == 1 ? $t('reviewing') : status == 2 ? $t('verified') : status == 3 ?
- $t('noPassView') : '' }}
- </div>
- <!-- <div class="label pl-2 pr-2 ml-3" :class="{ 'green': kycHighStatus == 2 }">
- {{ kycHighStatus == 2 ? $t('高级用户') : $t('普通用户') }}
- </div> -->
- <div class="pl-2 pr-2 ml-3" style="font-size: 12px;">{{ $t('信用分') }} : {{ userdata.creditScore }}</div>
+ <div class="my-content">
+ <!-- 用户/账号信息区 -->
+ <div class="my-card my-user-row" @click="!(userStore.userInfo && userStore.userInfo.token) && onRoute('/login')">
+ <div class="my-user-left">
+ <div class="my-avatar">
+ <van-icon name="user-o" size="28" class="my-avatar-icon" />
</div>
+ <div class="my-user-text">
+ <div class="my-user-name">
+ {{ (userStore.userInfo && userStore.userInfo.token) ? (userStore.userInfo.username || '') : $t('请登录') }}
+ <span v-if="!(userStore.userInfo && userStore.userInfo.token)" class="my-user-red-bar"></span>
+ </div>
+ <div class="my-user-ref">
+ {{ $t('推荐码') }}: {{ (userStore.userInfo && userStore.userInfo.usercode) || '91872511' }}
+ <van-icon name="records-o" size="14" class="my-copy-icon" @click.stop="copyRefCode" />
+ </div>
+ </div>
+ </div>
+ <van-icon name="arrow" class="my-arrow" />
+ </div>
+
+ <!-- 总资产估值 -->
+ <div class="my-card my-asset-row" @click="(userStore.userInfo && userStore.userInfo.token) && onRoute('/my/assets')">
+ <div class="my-asset-left">
+ <div class="my-asset-label">{{ $t('总资产估值') }} {{ $t('美元') }}</div>
+ <div class="my-asset-value">{{ totalAsset }}</div>
+ </div>
+ <van-icon name="arrow" class="my-arrow" />
+ </div>
+
+ <!-- 订金 / 提取 / 划转：浅紫底容器，本地图标 index-function1 / quick-function2 / quick-function3 -->
+ <div class="my-actions-card">
+ <div style="padding: 10px 14px;display: flex;width: 100%;
+ background-color: rgb(236, 230, 255);
+ border-radius: 16px;">
+ <div class="my-action-btn" @click="onRoute('/cryptos/recharge/rechargeList')">
+ <div class="my-action-circle">
+ <img :src="actionIcon1" alt="" class="my-action-img" />
+ </div>
+ <span class="my-action-label">{{ $t('订金') }}</span>
+ </div>
+ <div class="my-action-btn" @click="onRoute('/cryptos/Withdraw/withdrawPage')">
+ <div class="my-action-circle">
+ <img :src="actionIcon2" alt="" class="my-action-img" />
+ </div>
+ <span class="my-action-label">{{ $t('提取') }}</span>
+ </div>
+ <div class="my-action-btn" @click="onRoute('/my/transfer')">
+ <div class="my-action-circle">
+ <img :src="actionIcon3" alt="" class="my-action-img" />
+ </div>
+ <span class="my-action-label">{{ $t('划转') }}</span>
+ </div>
+ </div>
+
+ </div>
+
+ <!-- 列表块1：人工智能交易、资金明细、空投 -->
+ <div class="my-list-card">
+ <div class="my-list-item" @click="onRoute('/my/aiDetail')">
+ <van-icon name="cluster-o" size="20" class="my-list-icon" />
+ <span class="my-list-title">{{ $t('人工智能交易') }}</span>
+ <van-icon name="arrow" size="16" class="my-list-arrow" />
+ </div>
+ <div class="my-list-item" @click="onRoute('/cryptos/accountChange')">
+ <van-icon name="chart-trending-o" size="20" class="my-list-icon" />
+ <span class="my-list-title">{{ $t('资金明细') }}</span>
+ <van-icon name="arrow" size="16" class="my-list-arrow" />
+ </div>
+ <div class="my-list-item" @click="onRoute('/my/airdrop')">
+ <van-icon name="gift-o" size="20" class="my-list-icon" />
+ <span class="my-list-title">{{ $t('空投') }}</span>
+ <van-icon name="arrow" size="16" class="my-list-arrow" />
+ </div>
+ </div>
+
+ <!-- 列表块2：加密货币交易、申请成为交易员、期货订单、现货订单 -->
+ <div class="my-list-card">
+ <div class="my-list-item" @click="onRoute('/cryptos/trade/btcusdt')">
+ <van-icon name="friends-o" size="20" class="my-list-icon" />
+ <span class="my-list-title">{{ $t('加密货币交易') }}</span>
+ <van-icon name="arrow" size="16" class="my-list-arrow" />
+ </div>
+ <div class="my-list-item my-list-item--na">
+ <van-icon name="chat-o" size="20" class="my-list-icon" />
+ <span class="my-list-title">{{ $t('申请成为交易员') }}</span>
+ <span class="my-list-na">{{ $t('不适用') }}</span>
+ </div>
+ <div class="my-list-item" @click="onRoute('/trade/index')">
+ <van-icon name="completed" size="20" class="my-list-icon" />
+ <span class="my-list-title">{{ $t('期货订单') }}</span>
+ <van-icon name="arrow" size="16" class="my-list-arrow" />
+ </div>
+ <div class="my-list-item" @click="onRoute('/cryptos/trade/btcusdt')">
+ <van-icon name="description" size="20" class="my-list-icon" />
+ <span class="my-list-title">{{ $t('现货订单') }}</span>
+ <van-icon name="arrow" size="16" class="my-list-arrow" />
+ </div>
+ </div>
+
+ <!-- 列表块3：实名认证、客服 -->
+ <div class="my-list-card">
+ <div class="my-list-item" @click="onRoute('/certificationCenter')">
+ <van-icon name="idcard" size="20" class="my-list-icon" />
+ <span class="my-list-title">{{ $t('实名认证') }}</span>
+ <van-icon name="arrow" size="16" class="my-list-arrow" />
+ </div>
+ <div class="my-list-item" @click="onRoute('/customerService')">
+ <van-icon name="service-o" size="20" class="my-list-icon" />
+ <span class="my-list-title">{{ $t('客服') }}</span>
+ <van-icon name="arrow" size="16" class="my-list-arrow" />
</div>
</div>
</div>
-
- <template v-if="(userStore.userInfo && userStore.userInfo.token)">
- <van-divider :style="{ borderColor: '#ddd' }" hairline />
- <div class="mt-10 px-8" v-if="(userStore.userInfo && userStore.userInfo.token)">
- <div class="title_s font-bold">{{ t('快捷入口') }}</div>
- <div class="flex flex-start items-start">
- <div class="label_item flex flex-col items-center justify-center mt-8" @click="onRoute('/safety')">
- <img src="@/assets/imgs/my/安全.png" alt="">
- <div>{{ t('安全') }}</div>
- </div>
- <!-- <div class="label_item flex flex-col items-center justify-center mt-8" @click="onRoute('/changePassword')">
- <img src="@/assets/imgs/my/密码.png" alt="">
- <div>{{ t('修改密码') }}</div>
- </div> -->
- <div class="label_item flex flex-col items-center justify-center mt-8"
- @click="onRoute('/cryptos/accountChange')">
- <img src="@/assets/imgs/my/记录.png" alt="">
- <div>{{ t('账变记录') }}</div>
- </div>
- <!-- <div class="label_item flex flex-col items-center justify-center mt-8"
- @click="onRoute('/certificationCenter')">
- <img src="@/assets/imgs/my/身份认证.png" alt="">
- <div>{{ t('authVerify') }}</div>
- </div> -->
- </div>
- </div>
- </template>
-
- <template v-for="(item, index) in cellList" :key="index">
- <van-divider :style="{ borderColor: '#ddd' }" hairline />
- <div class="mt-10 px-8">
- <div class="title_s font-bold">{{ item.title }}</div>
- <div class="flex flex-start items-start flex-wrap">
- <div class="label_item flex flex-col items-center justify-center mt-8" v-for="(_item, _index) in item.list"
- :key="_index" @click="onRoute(_item.path)">
- <img :src="_item.icon" alt="">
- <div>{{ _item.title }}</div>
- </div>
- </div>
- </div>
- </template>
-
- <template v-if="userStore.userInfo && userStore.userInfo.token">
- <van-divider :style="{ borderColor: '#ddd' }" hairline />
- <van-cell-group :border="false">
- <van-cell is-link="is-link" center="center" :title="item.title" @click="onRoute(item.path)"
- v-for="(item, index) in tyList" :key="index">
- <template #icon>
- <img class="cell-img" :src="item.icon" />
- </template>
- </van-cell>
- </van-cell-group>
- </template>
-
- <template v-if="userStore.userInfo && userStore.userInfo.token">
- <van-divider :style="{ borderColor: '#ddd' }" hairline />
- <div class="px-4 mt-4">
- <p class="w-full flex mt-4 gap-x-4">
- <van-button type="primary" class="flex-1" round color="#f7b600" @click="loginOut">{{ $t('loginOut')
- }}</van-button>
- </p>
- </div>
- </template>
</section>
</template>
<script setup>
-import { reactive, onMounted, ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
-import { _getIdentify, _getKycHighLevel, _logOut, _info, _customer } from "@/service/user.api.js";
+import { _getIdentify, _getKycHighLevel, _info } from "@/service/user.api.js";
+import { _getContractBySymbolType } from "@/service/etf.api.js";
import { useUserStore } from '@/store/user';
import { useI18n } from "vue-i18n";
import useClipboard from "vue-clipboard3";
import { showToast } from "vant";
-import addBankIcon from '@/assets/image/userCenter/addBank.png'
-import kycHighStatusIcon from '@/assets/image/userCenter/kycHighStatus.png'
-import store from '@/store/store'
-import { customerServiceUrl } from '@/config'
-const { t } = useI18n()
+import AssetsHead from '@/components/Transform/assets-head/index.vue';
+// 订金/提取/转移 三个图标（本地图片，用 import 保证打包后地址正确）
+import actionIcon1 from '@/assets/imgs/new/index-function1.png';
+import actionIcon2 from '@/assets/imgs/new/quick-function2.png';
+import actionIcon3 from '@/assets/imgs/new/quick-function3.png';
+
+const { t } = useI18n();
const { toClipboard } = useClipboard();
+const router = useRouter();
+const userStore = useUserStore();
-const router = useRouter()
-const userStore = useUserStore()
-const status = ref(null)
-const kycHighStatus = ref(null)
-const userdata = ref({})
-// 通用列表
-const tyList = [
- { title: t('关于我们'), icon: new URL('@/assets/image/assets-center/aboutUs.png', import.meta.url), path: '/aboutUs?serviceTerm=20' },
- { title: t('用户协议'), icon: new URL('@/assets/image/assets-center/yhxy.png', import.meta.url), path: '/aboutUs?serviceTerm=23' },
- { title: t('隐私政策'), icon: new URL('@/assets/image/assets-center/yszc.png', import.meta.url), path: '/aboutUs?serviceTerm=24' },
- { title: t('安全规定'), icon: new URL('@/assets/image/assets-center/aqzc.png', import.meta.url), path: '/aboutUs?serviceTerm=21' },
- { title: t('反洗钱协议'), icon: new URL('@/assets/image/assets-center/yhxy.png', import.meta.url), path: '/aboutUs?serviceTerm=25' },
- { title: t('法律声明'), icon: new URL('@/assets/image/assets-center/aqzc.png', import.meta.url), path: '/aboutUs?serviceTerm=22' },
- { title: t('金融服务牌照'), icon: new URL('@/assets/image/assets-center/yhxy.png', import.meta.url), path: '/aboutUs?serviceTerm=26' },
-]
-const state = reactive({
- cellList: [
- {
- title: t('safe'), list: [
- { icon: 'shield-o', title: t('safe'), path: '/safety' },
- { icon: 'setting-o', title: t('changePassword'), path: '/changePassword' },
- { icon: addBankIcon, title: t('AddPaymentMethod'), path: '/payMentMethod/list' }
- ]
- },
- {
- title: t('universal'), list: [
- { icon: 'font-o', title: t('language'), path: '/language' },
- { icon: 'service-o', title: t('onLineService'), path: '/customerService' },
- { icon: 'idcard', title: t('authVerify'), path: '/certificationCenter', show: true },
- { icon: 'todo-list-o', title: t('账变记录'), path: '/cryptos/accountChange' },
- { icon: 'gold-coin-o', title: t('计价方式'), path: '/cryptos/exchangeRate' },
- ]
- }
- ]
-})
+const status = ref(null);
+const kycHighStatus = ref(null);
+const userdata = ref({});
+const moneyContract = ref(null); // assets!getContractBySymbolType.action 的 money_contract
+
+const totalAsset = computed(() => {
+ if (!(userStore.userInfo && userStore.userInfo.token)) return '0';
+ if (moneyContract.value != null && moneyContract.value !== '') {
+ return Number(moneyContract.value).toFixed(2);
+ }
+ const balance = userStore.userInfo.balance ?? userdata.value?.money ?? 0;
+ return Number(balance).toFixed(2);
+});
+
const onRoute = (path) => {
- if (path == '/customerService') {
- if (customerServiceUrl()) {
- window.location.href = customerServiceUrl();
- } else {
- router.push(path)
- }
- } else {
- router.push(path)
- }
-}
-onMounted(() => {
- if (userStore.userInfo && userStore.userInfo.token) {
- getIdentify()
- getKycHighLevel()
- getinfo()
- // getcustomer()
- }
-})
-const cellList = computed(() => {
- if (userStore.userInfo && userStore.userInfo.token) {
- return [
- // {
- // title: t('safe'), list: [
- // // { icon: 'shield-o', title: t('safe'), path: '/safety' },
- // // { icon: 'setting-o', title: t('changePassword'), path: '/changePassword' },
- // { icon: addBankIcon, title: t('AddPaymentMethod'), path: '/payMentMethod/list' }
- // ]
- // },
- {
- title: t('universal'), list: [
- { icon: new URL('../../assets/image/assets-center/language.png', import.meta.url), title: t('language'), path: '/language' },
- { icon: new URL('../../assets/image/assets-center/onLineService.png', import.meta.url), title: t('onLineService'), path: '/customerService' },
- { icon: new URL('../../assets/image/assets-center/authVerify.png', import.meta.url), title: t('authVerify'), path: '/certificationCenter', show: true },
- // { icon: new URL('../../assets/image/assets-center/AdvancedCertification.png', import.meta.url), title: t('高级认证'), path: '/advancedCtf', show: true },
- // { icon: 'todo-list-o', title: t('账变记录'), path: '/cryptos/accountChange' },
- { icon: new URL('../../assets/image/assets-center/valuation.png', import.meta.url), title: t('计价方式'), path: '/cryptos/exchangeRate' },
- // { icon: new URL('../../assets/image/assets-center/AddPaymentMethod.png', import.meta.url), title: t('AddPaymentMethod'), path: '/payMentMethod/list' },
- // { icon: new URL('../../assets/image/assets-center/help.png', import.meta.url), title: t('帮助中心'), path: '/helpCenter' }, // 原帮助中心页面
- { icon: new URL('../../assets/image/assets-center/help.png', import.meta.url), title: t('帮助中心'), path: '/aboutUs?serviceTerm=27' }, // 现跳转关于我们通过后台编辑获取的页面
- ]
- }
- ]
- } else {
- return [
- {
- title: t('universal'), list: [
- { icon: new URL('../../assets/image/assets-center/language.png', import.meta.url), title: t('language'), path: '/language' },
- // { icon: 'gold-coin-o', title: t('计价方式'), path: '/cryptos/exchangeRate' },
- { icon: new URL('../../assets/image/assets-center/aboutUs.png', import.meta.url), title: t('onLineService'), path: '/customerService' },
-
- ]
- },
- // {
- // title: t('更多'), list: [
- // { icon: 'question-o', title: t('帮助中心'), path: '/helpCenter' },
- // { icon: 'user-o', title: t('关于我们'), path: '/aboutUs' }
- // ]
- // }
- ]
- }
-
-})
-const loginOut = () => {
- _logOut({
- token: userStore.userInfo.token
- }).then(res => {
- userStore.userInfo = {}
- store.state.user.userInfo = {}
- })
-}
-const getinfo = () => {
- _info().then((data) => {
- userdata.value = data; // 确保 userdata 被正确声明
- }).catch(error => {
- console.error('Error fetching data:', error);
- });
+ router.push(path);
};
-const getIdentify = () => {
- _getIdentify().then(data => {
- status.value = data.status
- })
-}
-const getKycHighLevel = () => {
- _getKycHighLevel().then((data) => {
- kycHighStatus.value = data.status
- })
-}
-const copy = async () => {
+
+const copyRefCode = async () => {
+ const code = (userStore.userInfo && userStore.userInfo.usercode) || '91872511';
try {
- await toClipboard(userStore.userInfo && userStore.userInfo.usercode);
+ await toClipboard(code);
showToast(t('copySuccess'));
} catch (e) {
console.error(e);
}
-}
+};
+
+onMounted(() => {
+ if (userStore.userInfo && userStore.userInfo.token) {
+ getIdentify();
+ getKycHighLevel();
+ getinfo();
+ getContractAsset();
+ }
+});
+
+const getinfo = () => {
+ _info().then((data) => {
+ userdata.value = data;
+ }).catch(() => {});
+};
+
+const getContractAsset = () => {
+ _getContractBySymbolType('cryptos').then((res) => {
+ moneyContract.value = res?.money_contract ?? null;
+ }).catch(() => {});
+};
+const getIdentify = () => {
+ _getIdentify().then(data => { status.value = data.status; });
+};
+const getKycHighLevel = () => {
+ _getKycHighLevel().then(data => { kycHighStatus.value = data.status; });
+};
</script>
<style lang="scss" scoped>
@import '@/assets/theme/index.scss';
-:deep(.van-cell-group__title) {
- // background: $main2_background !important;
- background: $inp-b !important;
- padding: 12px 16px;
-}
+/* 一比一还原图片：扁平、浅紫容器、紫色圆图标+下方深色文字 */
+$my-bg: #f8f8f8;
+$my-card-bg: #ffffff;
+$my-text: #333333;
+$my-text-secondary: #666666;
+$my-text-light: #999999;
+$my-purple: #7b3be2;
+$my-actions-bg: #f9f5ff;
+/* 顶部渐变：蓝透明 → 页面底，--bgoppose 可在外层定义 */
+$my-header-bg: linear-gradient(-180deg, rgba(2, 149, 253, 0.1), var(--bgoppose, #fff));
-:deep(.van-cell-group) {
- .van-icon {
- display: flex;
- align-items: center;
+.my-index {
+ min-height: 100vh;
+ background: $my-bg;
+ padding-bottom: 80px;
+ position: relative;
+ /* 顶部渐变向下延伸一块区域 */
+ &::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ height: 130px;
+ background: $my-header-bg;
+ z-index: 0;
+ pointer-events: none;
}
}
-
-:deep(.van-cell) {
- // background: $mainBgColor;
- // border-bottom: 1px solid $border_color;
-
- &:hover {
- // background: $mainBgColor;
- }
+.my-content {
+ position: relative;
+ z-index: 1;
}
-:deep(.van-cell-group__title) {
- background: $mainBgColor;
+:deep(#assetsHead .van-nav-bar) {
+ background: transparent !important;
+ .van-nav-bar__content { height: 56px; }
+ .van-nav-bar__title { font-size: 22px; font-weight: 700; color: $my-text; }
+ .van-nav-bar__right { padding-right: 16px; }
}
+.my-header-icon { color: $my-text; }
-:deep(.van-nav-bar__content) {
- // background: $mainBgColor;
-}
-
-:deep(.van-icon) {
- @include themify() {
- color: themed("text_color") !important;
- }
-}
-
-:deep(.van-cell__title) {
- @include themify() {
- color: themed("text_color") !important;
- }
-}
-
-:deep(.van-cell:after) {
+.my-card {
+ // background: $my-card-bg;
+ border-radius: 12px;
+ padding: 10px 20px;
+ // margin-bottom: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
border: none;
}
-:deep(.van-grid-item__content) {
- // background: $selectSymbol_background;
+// .my-user-row { margin-bottom: 12px; }
+.my-user-left {
+ display: flex;
+ align-items: center;
+ gap: 12px;
}
-
-:deep(.van-grid-item__text) {
- color: $text_color;
+.my-avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background: $my-purple;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+}
+.my-avatar-icon { color: #fff; }
+.my-user-text { min-width: 0; }
+.my-user-name {
+ font-size: 17px;
+ font-weight: 400;
+ color: $my-text;
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+.my-user-red-bar {
+ width: 2px;
+ height: 12px;
+ background: #ee0a24;
+ border-radius: 1px;
+ flex-shrink: 0;
+}
+.my-user-ref {
font-size: 13px;
- height: 30px;
+ color: $my-text-light;
+ margin-top: 6px;
+ display: flex;
+ align-items: center;
+ gap: 4px;
}
+.my-copy-icon { color: $my-text-light; flex-shrink: 0; }
+.my-arrow { color: $my-text-secondary; font-size: 16px; }
-.my-index {
- padding-bottom: 60px;
- background: $mainbgWhiteColor;
-
- .title_s {
- font-size: 16px;
- }
-
- .label_item {
- width: 33%;
- font-size: 12px;
-
- div {
- text-align: center;
- }
-
- img {
- width: 32%;
- margin-bottom: 3px;
- }
- }
-
- .label {
- line-height: 18px;
- font-size: 12px;
- height: 18px;
- border: $icon-bg solid 1px;
- border-radius: 5px;
- }
-
- .yellow {
- border-color: #F5C421;
- }
-
- .red {
- border-color: $red;
- }
-
- .green {
- border-color: $green;
- }
+.my-asset-row { background-color: #fff; }
+.my-asset-left { min-width: 0; }
+.my-asset-label {
+ font-size: 13px;
+ color: $my-text-light;
+ margin-bottom: 4px;
}
-
-h1.title {
- font-size: 22px;
- line-height: 26px;
-}
-
-.sub-text {
- padding: 10px 0;
- color: $text_color1;
- font-size: 12px;
-}
-
-.name {
- font-size: 16px;
- line-height: 20px;
-}
-
-.yellow {
- color: #F5C421;
-}
-
-.red {
- color: $red;
-}
-
-.green {
- color: $green;
-}
-
-.id-text {
- font-size: 14px;
+.my-asset-value {
+ font-size: 30px;
font-weight: 700;
+ color: $my-text;
}
-.grid-item-img {
- width: 48px;
- height: 48px;
- margin-bottom: 5px;
+/* 三按钮：浅紫底容器无边框，紫色圆+白图标，下方深色文字 */
+.my-actions-card {
+ background-color: #fff;
+ border-radius: 14px;
+ padding: 14px 20px;
+ margin-bottom: 16px;
+ display: flex;
+ justify-content: space-between;
+ gap: 16px;
+ border: none;
+ box-shadow: none;
+}
+.my-action-btn {
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ cursor: pointer;
+}
+.my-action-circle {
+ width: 50px;
+ height: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ .van-icon { color: #fff; }
+ .my-action-img {
+ width: 45px;
+ height: 45px;
+ object-fit: contain;
+ }
+}
+.my-action-label {
+ font-size: 13px;
+ font-weight: 400;
+ color: $my-text;
}
-.van-grid-main {
- padding: 5px 0;
+/* 列表块：白底、无边框、细分割线、扁平 */
+.my-list-card {
+ background: $my-card-bg;
+ border-radius: 12px;
+ margin-bottom: 12px;
+ overflow: hidden;
+ border: none;
+ box-shadow: none;
}
-
-.cell-img {
- width: 20px;
- height: 20px;
- margin-right: 10px;
+.my-list-item {
+ display: flex;
+ align-items: center;
+ padding: 16px 20px;
+ font-size: 15px;
+ color: $my-text;
}
-</style>
\ No newline at end of file
+.my-list-icon { color: $my-text-secondary; margin-right: 12px; flex-shrink: 0; }
+.my-list-title { flex: 1; }
+.my-list-arrow { color: $my-text-secondary; flex-shrink: 0; }
+.my-list-item--na { cursor: default; }
+.my-list-na {
+ font-size: 12px;
+ color: $my-text-secondary;
+ flex-shrink: 0;
+}
+</style>
diff --git a/src/views/my/transfer.vue b/src/views/my/transfer.vue
index 8f8ee07..5983496 100644
--- a/src/views/my/transfer.vue
+++ b/src/views/my/transfer.vue
@@ -6,46 +6,66 @@
</template>
</fx-header>
- <div style="position: relative;">
- <div class="card">
- <!-- <van-field v-model="startValue" :label="$t('从')" type="digit" @blur="getassets" /> -->
- <div>{{ $t('从') }}</div>
- <div class="mt-3">{{ swapValue ? $t('资金账户') : $t('交易账户') }}</div>
- </div>
-
- <div class="card mt-5">
- <!-- <van-field v-model="endValue" :label="$t('至')" type="digit" @blur="getassets" /> -->
- <div>{{ $t('至') }}</div>
- <div class="mt-3">{{ swapValue ? $t('交易账户') : $t('资金账户') }}</div>
- </div>
-
- <img src="@/assets/imgs/my/交换.png" class="swap" @click="onSwap">
- </div>
-
- <div class="mt-10 transfer_label">{{ $t('资产') }}</div>
- <div class="card mt-3">
- <span>USDT</span>
- </div>
-
- <div class="mt-10 transfer_label">{{ $t('数量') }}</div>
- <div class="card mt-3 flex juc-between items-center">
- <van-field v-model="moneyRevise" type="number" :placeholder="$t('输入金额')">
- <template #button>
- <div class="label_but flex flex-end items-center">
- <span class="mr-3">USDT</span>
- <van-button type="default" size="small" round @click="Maximum">{{ $t('最大') }}</van-button>
+ <div class="transfer-body">
+ <!-- 上方卡片：转出账户 -->
+ <div class="transfer-card">
+ <div class="transfer-card-head">
+ <span class="transfer-card-title">{{ swapValue ? $t('来自用户钱包') : $t('期货钱包') }}</span>
+ <span class="transfer-card-balance">{{ $t('balance') }}: {{ fromBalance }}</span>
+ </div>
+ <div class="transfer-card-row">
+ <div class="transfer-currency">
+ <span>USDT</span>
</div>
- </template>
- </van-field>
- </div>
- <div class="hint">
- <span>{{ $t('最多可转') }}</span>
- {{ maxMoneyRevise }} USDT
- </div>
+ <div class="transfer-input-wrap">
+ <van-field
+ v-model="moneyRevise"
+ type="number"
+ :placeholder="$t('请输入数量')"
+ class="transfer-input"
+ >
+ <template #button>
+ <span class="transfer-max" @click="Maximum">{{ $t('最大') }}</span>
+ </template>
+ </van-field>
+ </div>
+ </div>
+ </div>
- <van-button type="primary" round color="#f7b600" @click="submit" size="large" :disabled="!submitThrough">
- {{ $t('确认') }}
- </van-button>
+ <!-- 中间：紫色交换图标 -->
+ <div class="transfer-swap-wrap" @click="onSwap">
+ <div class="transfer-swap-circle">
+ <img src="@/assets/imgs/my/交换.png" alt="" class="transfer-swap-icon" />
+ </div>
+ </div>
+
+ <!-- 下方卡片：转入账户 -->
+ <div class="transfer-card">
+ <div class="transfer-card-head">
+ <span class="transfer-card-title">{{ swapValue ? $t('期货钱包') : $t('来自用户钱包') }}</span>
+ <span class="transfer-card-balance">{{ $t('balance') }}: {{ toBalance }}U</span>
+ </div>
+ <div class="transfer-card-row transfer-card-row--readonly">
+ <div class="transfer-currency">
+ <span>USDT</span>
+ </div>
+ <div class="transfer-approx">≈{{ toBalance }}</div>
+ </div>
+ </div>
+
+ <div class="transfer-hint">
+ <span>{{ $t('最多可转') }}</span> {{ maxMoneyRevise }} USDT
+ </div>
+
+ <van-button
+ type="button"
+ class="transfer-submit"
+ :disabled="!submitThrough"
+ @click="submit"
+ >
+ {{ $t('提交') }}
+ </van-button>
+ </div>
</div>
</template>
@@ -53,113 +73,206 @@
import { ref, computed } from "vue";
import { useI18n } from "vue-i18n";
import { _transfer, _getassets } from "@/service/user.api.js";
-import { showToast } from 'vant'
+import { showToast } from 'vant';
-const { t } = useI18n()
+const { t } = useI18n();
-const moneyRevise = ref(0); // 划转金额
-const maxMoneyRevise = ref(0); // 最大划转金额
-const swapValue = ref(true) // 上下是否有交换
+const moneyRevise = ref('');
+const maxMoneyRevise = ref(0);
+const capitalBalance = ref('0');
+const contractBalance = ref('0');
+const swapValue = ref(true); // true: 资金账户 -> 交易账户
-const Maximum = () => { // 数量选择最大
- moneyRevise.value = maxMoneyRevise.value
-}
+const fromBalance = computed(() => swapValue.value ? capitalBalance.value : contractBalance.value);
+const toBalance = computed(() => swapValue.value ? contractBalance.value : capitalBalance.value);
-const submitThrough = computed(() => { // 判断是否可以提交
- return moneyRevise.value > 0
-})
+const submitThrough = computed(() => {
+ const n = Number(moneyRevise.value);
+ return !isNaN(n) && n > 0;
+});
-const submit = () => { // 提交
+const Maximum = () => {
+ moneyRevise.value = String(maxMoneyRevise.value);
+};
+
+const submit = () => {
+ const amount = Number(moneyRevise.value);
+ if (!submitThrough.value) return;
_transfer({
- deductAccount: swapValue.value ? 'capital' : 'contract', // 划转账户
- receiveAccount: swapValue.value ? 'contract' : 'capital', // 接收账户
- moneyRevise: moneyRevise.value,
- }).then(res => {
- showToast({
- message: t('操作成功'),
- forbidClick: true,
- duration: 2000
- })
- getassets()
- })
-}
+ deductAccount: swapValue.value ? 'capital' : 'contract',
+ receiveAccount: swapValue.value ? 'contract' : 'capital',
+ moneyRevise: amount,
+ }).then(() => {
+ showToast({ message: t('操作成功'), forbidClick: true, duration: 2000 });
+ moneyRevise.value = '';
+ getassets();
+ }).catch(() => {});
+};
-const getassets = () => { // 获取资产
+const getassets = () => {
_getassets().then(res => {
- swapValue.value ? maxMoneyRevise.value = res.capitalUSDT : maxMoneyRevise.value = res.contract // 根据上下是否颠倒来判断取的哪个值
- })
-}
-getassets()
+ capitalBalance.value = res.capitalUSDT != null ? res.capitalUSDT : '0';
+ contractBalance.value = res.contract != null ? res.contract : '0';
+ maxMoneyRevise.value = swapValue.value ? (res.capitalUSDT ?? 0) : (res.contract ?? 0);
+ }).catch(() => {});
+};
+getassets();
-const onSwap = () => { // 交换
- swapValue.value = !swapValue.value
- getassets()
-}
-
+const onSwap = () => {
+ swapValue.value = !swapValue.value;
+ moneyRevise.value = '';
+ getassets();
+};
</script>
<style lang="scss" scoped>
+@import '@/assets/theme/index.scss';
+
.transfer {
- padding: 0rem 1.2rem 2rem 1.2rem;
+ min-height: 100vh;
+ background: #f6f5fa;
+ padding-bottom: 2rem;
+}
- :deep(.van-cell) {
- background: none;
- padding: 0;
- }
+.transfer-body {
+ padding: 0 1.2rem 2rem;
+ position: relative;
+}
- :deep(.van-cell::after) {
- display: none;
- }
+.transfer-card {
+ background: #fff;
+ border-radius: 1.5rem;
+ padding: 2rem 1.2rem;
+ font-size: 16px;
+}
- :deep(.van-dropdown-menu__bar) {
- background-color: rgba($color: #000000, $alpha: 0);
- box-shadow: none;
- }
+.transfer-card-head {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 2rem;
+ margin-top: 2rem;
+}
- :deep(.van-dropdown-menu__title:after) {
- border-color: transparent transparent #000 #000;
- right: 10px;
- }
+.transfer-card-title {
+ color: #333;
+ font-weight: 500;
+}
- :deep(.van-dropdown-menu__title) {
- width: 100%;
- }
+.transfer-card-balance {
+ color: #333;
+ font-size: 16px;
+}
- :deep(.van-dropdown-item__content) {
- padding: 8px 16px;
- }
+.transfer-card-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1rem;
+ margin-top: 2rem;
+ margin-bottom: 2rem;
- .card {
- background: $input_background;
- padding: 2rem 1.2rem;
- border-radius: 0.5rem;
- font-size: 16px;
- }
-
- .swap {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 4rem;
- }
-
- .hint {
- font-size: 12px;
- margin-bottom: 150px;
-
- span {
- color: $text_color5;
- }
- }
-
- .label_but {
- color: $text_color4;
- }
-
- .transfer_label {
- font-size: 16px;
+ &.transfer-card-row--readonly {
}
}
-</style>
\ No newline at end of file
+
+.transfer-currency {
+ display: flex;
+ align-items: center;
+ color: #333;
+ font-size: 16px;
+}
+
+.transfer-input-wrap {
+ flex: 1;
+ min-width: 0;
+}
+
+.transfer-input {
+ padding: 0;
+ margin: 0;
+ font-size: 16px;
+ background: transparent;
+ text-align: right;
+
+ :deep(.van-field__body) {
+ background: transparent;
+ }
+ :deep(.van-field__control) {
+ text-align: right;
+ &::placeholder {
+ color: #999;
+ }
+ }
+ :deep(.van-field__button) {
+ padding-left: 0.5rem;
+ }
+}
+
+.transfer-max {
+ font-size: 16px;
+ color: #7c3aed;
+ cursor: pointer;
+}
+
+.transfer-approx {
+ font-size: 16px;
+ color: #333;
+}
+
+/* 中间交换按钮：紫色渐变圆 */
+.transfer-swap-wrap {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 0.8rem 0;
+ position: relative;
+ z-index: 1;
+}
+
+.transfer-swap-circle {
+ width: 4rem;
+ height: 4rem;
+ border-radius: 50%;
+ background: linear-gradient(135deg, #7c3aed, #5b21b6);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 2px 12px rgba(124, 58, 237, 0.4);
+ cursor: pointer;
+}
+
+.transfer-swap-icon {
+ width: 2rem;
+ height: 2rem;
+ filter: brightness(0) invert(1);
+}
+
+.transfer-hint {
+ font-size: 12px;
+ margin-top: 1rem;
+ margin-bottom: 2rem;
+ color: #999;
+
+ span {
+ color: #999;
+ }
+}
+
+.transfer-submit {
+ width: 100%;
+ height: 48px;
+ line-height: 48px;
+ font-size: 16px;
+ font-weight: 600;
+ color: #fff;
+ background: linear-gradient(90deg, #7c3aed, #5b21b6);
+ border: none;
+ border-radius: 0.5rem;
+
+ &:disabled {
+ opacity: 0.5;
+ }
+}
+</style>
diff --git a/src/views/order/order-submit.vue b/src/views/order/order-submit.vue
index 3e9afee..f399844 100644
--- a/src/views/order/order-submit.vue
+++ b/src/views/order/order-submit.vue
@@ -112,7 +112,6 @@
showToast
} from 'vant';
import useClipboard from "vue-clipboard3";
-import { customerServiceUrl } from '@/config'
import { useI18n } from "vue-i18n";
const { toClipboard } = useClipboard();
const { t } = useI18n()
@@ -121,11 +120,7 @@
const showPopup = ref(false)
const orderNo = ref(null)
const onRoute = () => {
- if (customerServiceUrl()) {
- window.location.href = customerServiceUrl();
- } else {
- router.push('/customerService?order_no=' + orderNo.value)
- }
+ router.push('/customerService?order_no=' + orderNo.value);
}
const onClickLeft = () => {
// router.push('/exchange/channel-in')
diff --git a/src/views/quotes/List.vue b/src/views/quotes/List.vue
index 2e8010a..58d092a 100644
--- a/src/views/quotes/List.vue
+++ b/src/views/quotes/List.vue
@@ -1,20 +1,47 @@
<template>
- <div class="quotes-list pt-5 pb-60 pl-5 pr-5" id="cryptos">
-
- <Head @search="onSearch"></Head>
- <list-quatation :listData="qList" :tabActive="2" />
+ <div class="quotes-list-wrap">
+ <!-- 头部：All / Spot / Futures + 搜索图标 -->
+ <div class="quotes-header">
+ <div class="quotes-header-tabs">
+ <span
+ v-for="(tab, idx) in headerTabs"
+ :key="idx"
+ class="quotes-header-tab"
+ :class="{ 'quotes-header-tab--active': headerActive === idx }"
+ @click="headerActive = idx"
+ >
+ {{ tab }}
+ </span>
+ </div>
+ <div class="quotes-header-search" @click="onSearchClick">
+ <van-icon name="search" size="22" />
+ </div>
+ </div>
+ <div class="quotes-list pb-60 pl-5 pr-5" id="cryptos">
+ <list-quatation :listData="qList" :tabActive="2" :tabShow="false" />
+ </div>
</div>
</template>
<script setup>
import { ref, computed, onBeforeUnmount } from 'vue';
import { useStore } from "vuex";
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
import { _getHomeList } from '@/service/cryptos.api'
import { TIME_OUT } from "@/config";
import ListQuatation from "@/components/Transform/list-quotation/index.vue";
-import Head from './components/head.vue'
+const { t } = useI18n();
+const router = useRouter();
const store = useStore();
+
+const headerActive = ref(2);
+const headerTabs = computed(() => [t('全部'), t('现货'), t('永续')]);
+
+const onSearchClick = () => {
+ router.push('/optional/search');
+};
//#region 行情数据----------------------------------------
let qList = ref([])
@@ -72,8 +99,39 @@
}
</script>
<style lang="scss" scoped>
+.quotes-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 20px 16px 16px;
+ background: #f0f0f0;
+}
+
+.quotes-header-tabs {
+ display: flex;
+ align-items: center;
+ gap: 24px;
+}
+
+.quotes-header-tab {
+ font-size: 16px;
+ color: #999;
+ cursor: pointer;
+ font-weight: 500;
+}
+
+.quotes-header-tab--active {
+ color: #5e2bc8;
+ font-weight: 600;
+}
+
+.quotes-header-search {
+ color: #999;
+ cursor: pointer;
+ padding: 4px;
+}
+
.quotes-list {
- background: $mainbgWhiteColor;
min-height: 100vh;
:deep(.active) {
diff --git a/src/views/register/index.vue b/src/views/register/index.vue
index 82d1791..7fe4147 100644
--- a/src/views/register/index.vue
+++ b/src/views/register/index.vue
@@ -1,438 +1,410 @@
<template>
<div class="register">
- <div class="top flex justify-between items-center">
- <img src="../../assets/image/icon-close.png" alt="" @click="router.go(-1)">
- <div @click="onRoute('/customerService')">{{ $t('onLineService') }}</div>
- </div>
- <!-- <Step :step="1"></Step> -->
- <div class="title textColor">{{ $t('register') }}</div>
- <div class="flex re-tab">
- <!-- <div class="textColor1" :class="activeIndex == 0 ? 'active' : ''" @click="changeIndex(0)">{{
- $t('account')
- }}</div> -->
- <div class="textColor1" :class="activeIndex == 1 ? 'active' : ''" @click="changeIndex(1)">
- {{ $t('电子邮箱') }}
+ <div class="reg-inner">
+ <div class="reg-back" @click="router.go(-1)">
+ <van-icon name="arrow-left" size="22" />
</div>
- <div class="textColor1" :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)">
- {{ $t('手机号码') }}
+
+ <div class="reg-logo-wrap">
+ <img :src="LOGO" alt="" class="reg-logo" />
</div>
- </div>
- <ExInput :label="getRegType(activeIndex, true)" :placeholderText="getRegType(activeIndex, false)"
- v-model="username" :area="isArea" :dialCode="dialCode" @selectArea="onSelectArea" :icon="icon" />
+ <h1 class="reg-title">{{ $t('register') }}</h1>
+ <p class="reg-login">
+ {{ $t('hasAccount') }}
+ <span class="reg-login-link" @click="router.push('/login')">{{ $t('goLogin') }}</span>
+ </p>
+ <p class="reg-lang" @click="onRoute('/language')">{{ currentLocaleLabel }}</p>
- <ExInput :label="$t('设置登录密码')" :placeholderText="$t('请输入8-16位字符,必须包含大写字母、和特殊字符')" v-model="password"
- typeText="password" />
- <ExInput :label="$t('确认登录密码')" :placeholderText="$t('surePassword')" v-model="repassword" typeText="password" />
- <ExInput :label="$t('setSafeword')" :placeholderText="$t('请输入6位阿拉伯数字的资金密码')" v-model="safeword"
- typeText="password" v-if="activeIndex === 1 || activeIndex === 2" />
- <div class="inputCom" v-if="activeIndex === 1 || activeIndex === 2">
- <p class="label textColor" v-if="activeIndex == 1">{{ $t('邮箱验证码') }}</p>
- <p class="label textColor" v-else-if="activeIndex == 2">{{ $t('手机验证码') }}</p>
- <p class="label textColor" v-else>{{ $t('验证码') }}</p>
- <div class="iptbox inputBackground">
-
- <input class="inputBackground textColor" type="text"
- :placeholder="activeIndex == 1 ? $t('请输入邮箱验证码') : activeIndex == 2 ? $t('请输入手机验证码') : $t('entryVerifyCode')"
- v-model="verifyCode">
-
- <span v-if="type !== 3" @click="senCode">
- <span v-if="activeIndex == 1">{{ $t('发送邮箱验证码') }}</span>
- <span v-else-if="activeIndex == 2">{{ $t('发送手机验证码') }}</span>
- <span v-else>{{ $t('sendVerifyCode') }}</span>
- <template v-if="time">({{ time }})s</template>
+ <!-- Email -->
+ <div class="reg-field">
+ <input
+ v-model="username"
+ type="text"
+ class="reg-input"
+ :placeholder="$t('entryEmail')"
+ autocomplete="email"
+ />
+ </div>
+ <!-- Verification Code -->
+ <div class="reg-field reg-field-code">
+ <input
+ v-model="verifyCode"
+ type="text"
+ class="reg-input"
+ :placeholder="$t('entryVerifyCode')"
+ maxlength="6"
+ />
+ <span class="reg-send-code" @click="senCode">
+ {{ time > 0 ? `(${time})s` : $t('sendVerifyCode') }}
</span>
</div>
- </div>
- <ExInput :label="$t('金融机构代码')" :placeholderText="$t('请输入金融机构识别码')" v-model="invitCode" :clearBtn="false" />
- <div class="protocol textColor">
- <i @click="agreeProt">
- <img v-show="agree" src="../../assets/image/login/prot2.png" alt="" />
- <img v-show="!agree" src="../../assets/image/login/prot1.png" alt="" />
- </i>
- <!-- {{ $t('readAgree') }}<span class="colorMain" @click="router.push('/TermsOfService')">{{
- $t('serviceConf')
- }}</span> -->
- {{ $t('readAgree') }}<span class="colorMain" @click="router.push('/aboutUs?serviceTerm=23')">{{
- $t('serviceConf')
- }}</span>
- </div>
- <van-button class="w-full" style="margin-top:10px;" type="primary" @click="register">{{ $t('register') }}
- </van-button>
- <div class="noTips textColor">{{ $t('hasAccount') }}<span class="colorMain" @click="router.push('/login')">
- {{ $t('goLogin') }}</span>
- </div>
- <nationality-list ref='controlChildRef' :title="$t('selectArea')" @getName="getName"></nationality-list>
+ <!-- Password -->
+ <div class="reg-field reg-field-pwd">
+ <input
+ v-model="password"
+ :type="pwdVisible ? 'text' : 'password'"
+ class="reg-input"
+ :placeholder="$t('entryPassword')"
+ autocomplete="new-password"
+ />
+ <span class="reg-eye" @click="pwdVisible = !pwdVisible">
+ <van-icon :name="pwdVisible ? 'eye-o' : 'closed-eye'" size="20" />
+ </span>
+ </div>
+ <!-- Confirm Password -->
+ <div class="reg-field reg-field-pwd">
+ <input
+ v-model="repassword"
+ :type="repwdVisible ? 'text' : 'password'"
+ class="reg-input"
+ :placeholder="$t('surePassword')"
+ autocomplete="new-password"
+ />
+ <span class="reg-eye" @click="repwdVisible = !repwdVisible">
+ <van-icon :name="repwdVisible ? 'eye-o' : 'closed-eye'" size="20" />
+ </span>
+ </div>
+ <!-- Referral Code (optional) -->
+ <div class="reg-field">
+ <input
+ v-model="invitCode"
+ type="text"
+ class="reg-input"
+ :placeholder="`${$t('entryInvitCode')} (optional)`"
+ />
+ </div>
- <Vcode :imgs="[img1, img2]" :show="show" @success="onSuccess" :canvasHeight="200" @fail="onFail"
- @close="show = false;" sliderText='' :successText="$t('vertifyPass')" :failText="$t('vertifuFail')" />
+ <div class="reg-protocol">
+ <span class="reg-protocol-check" :class="{ checked: agree }" @click="agree = !agree"></span>
+ <span>{{ $t('readAgree') }}</span>
+ <span class="reg-protocol-link" @click.stop="router.push('/aboutUs?serviceTerm=23')">{{ $t('serviceConf') }}</span>
+ </div>
- <div>{{ msg }}</div>
+ <button class="reg-btn reg-btn-primary" @click="register">{{ $t('register') }}</button>
+ </div>
+
+ <nationality-list ref="controlChildRef" :title="$t('selectArea')" @getName="getName" />
</div>
</template>
<script setup>
-import ExInput from "@/components/ex-input/index.vue";
-import Step from "./step.vue";
-import { _registerUser, _sendVerifyCode } from "@/service/login.api";
+import { _sendVerifyCode } from "@/service/login.api";
import { _bindEmailRegister } from "@/service/user.api.js";
import { useUserStore } from '@/store/user';
-import { GET_USERINFO } from '@/store/types.store'
-import nationalityList from '../authentication/components/nationalityList.vue'
-import Vcode from "vue3-puzzle-vcode";
-import img1 from "../../assets/image/slider/1.png";
-import img2 from "../../assets/image/slider/2.png";
-import { getStorage } from '@/utils/index'
-import { useI18n } from 'vue-i18n'
-import { customerServiceUrl } from "@/config";
+import { GET_USERINFO } from '@/store/types.store';
+import nationalityList from '../authentication/components/nationalityList.vue';
+import { getStorage } from '@/utils/index';
+import { useI18n } from 'vue-i18n';
+import { LOGO } from "@/config";
import { useRouter } from 'vue-router';
-import { ref, onMounted, reactive, onUnmounted } from 'vue';
+import { ref, computed, onMounted, onUnmounted, reactive } from 'vue';
import { showToast } from "vant";
-import store from '@/store/store'
-const { t } = useI18n()
-const router = useRouter()
-const onRoute = (path) => {
- if (path == 'back') {
- router.go(-1)
- } else {
- if (path == '/customerService') {
- if (customerServiceUrl()) {
- window.location.href = customerServiceUrl();
- } else {
- router.push(path)
- }
- } else {
- router.push(path)
- }
- }
-}
+import store from '@/store/store';
+
+const { t, locale } = useI18n();
+const router = useRouter();
const userStore = useUserStore();
-let show = ref(false)
-const msg = ref('')
-const type = ref(1)
-const time = ref(0)
-let agree = ref(false)
-const username = ref('')
-const password = ref('')
-const repassword = ref('')
-const verifyCode = ref('')
-const safeword = ref('')
-const fundPassword = ref('')
-const refundPassword = ref('')
-const activeIndex = ref(1)
-const typeText = ref('password')
-let isArea = ref(false)
-let dialCode = ref(0)
-let icon = ref('')
-const state = reactive({
- timer: null
-})
+const localeLabels = { en: 'English', cn: '中文', Korean: '한국인', Japanese: 'やまと', de: 'Deutsch', French: 'Français', Italy: 'Italiano' };
+const currentLocaleLabel = computed(() => localeLabels[locale.value] || locale.value || 'English');
-let invitCode = ref('')
+const username = ref('');
+const password = ref('');
+const agree = ref(false);
+const repassword = ref('');
+const verifyCode = ref('');
+const invitCode = ref('');
+const pwdVisible = ref(false);
+const repwdVisible = ref(false);
+const time = ref(0);
+const dialCode = ref(0);
+const icon = ref('');
+const controlChildRef = ref(null);
+const state = reactive({ timer: null });
+
onMounted(() => {
- console.log(store)
- let usercode = getStorage('usercode')
- if (usercode) {
- invitCode = usercode;
- }
- clearInterval(state.timer)
- state.timer = null
-})
-
+ const usercode = getStorage('usercode');
+ if (usercode) invitCode.value = usercode;
+});
onUnmounted(() => {
- clearInterval(state.timer)
- state.timer = null
-})
+ if (state.timer) clearInterval(state.timer);
+});
-const getRegType = (activeIndex, bFlag) => {
- switch (activeIndex) {
- case 0:
- return bFlag ? t('account') : t('entryAccount');
- case 1:
- return bFlag ? t('电子邮箱') : t('entryEmail');
- case 2:
- return bFlag ? t('手机号码') : t('请输入手机号码');
- }
-}
+const onRoute = (path) => {
+ router.push(path);
+};
const senCode = () => {
- if (time.value > 0) {
- return false
+ if (time.value > 0) return;
+ const email = username.value.trim();
+ if (!email || !/@/.test(email)) {
+ showToast(t('entryCorrectEmail'));
+ return;
}
- _sendVerifyCode({
- target: activeIndex.value === 1 ? username.value : dialCode.value + username.value,
- }).then((res) => {
+ _sendVerifyCode({ target: email }).then(() => {
time.value = 30;
state.timer = setInterval(() => {
- if (time.value > 0) {
- time.value = time.value - 1
- } else {
- time.value = 0;
- clearInterval(state.timer)
- state.timer = null
+ if (time.value > 0) time.value--;
+ else {
+ clearInterval(state.timer);
+ state.timer = null;
}
}, 1000);
- }).catch((error) => {
- showToast(t(error.msg));
+ }).catch((err) => {
+ showToast(err?.msg || t('sendVerifyCode'));
});
-}
+};
-const onSuccess = () => {
- console.log('onSuccess')
+const validatePassword = (pwd) => {
+ return /^(?=.*[A-Z])(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).{8,16}$/.test(pwd);
+};
+
+const register = () => {
+ const email = username.value.trim();
+ if (!email || !/@/.test(email)) {
+ showToast(t('entryCorrectEmail'));
+ return;
+ }
+ if (!verifyCode.value || verifyCode.value.length < 6) {
+ showToast(t('entryVerifyTips'));
+ return;
+ }
+ if (!password.value) {
+ showToast(t('entryPassword'));
+ return;
+ }
+ if (!validatePassword(password.value)) {
+ showToast(t('passwordTips'));
+ return;
+ }
+ if (repassword.value !== password.value) {
+ showToast(t('noSamePassword'));
+ if (!agree.value) {
+ showToast(t('agreeServiceCond'));
+ return;
+ }
+ return;
+ }
+ // 推荐码可选，无则传空
registerApi();
- show.value = false;
-}
-const onFail = () => {
- msg.value = ''
-}
-const onRefresh = () => {
- msg.value = ''
-}
+};
-const controlChildRef = ref(null)
-const onSelectArea = () => {
- controlChildRef.value.open();
-}
+const registerApi = () => {
+ _bindEmailRegister({
+ username: username.value.trim(),
+ password: password.value,
+ type: '2',
+ verifcode: verifyCode.value,
+ usercode: invitCode.value.trim() || '',
+ safeword: password.value
+ }).then((res) => {
+ userStore[GET_USERINFO](res);
+ store.state.user.userInfo = res;
+ router.push('/login');
+ }).catch((err) => {
+ showToast(err?.msg || t('register'));
+ });
+};
+
+const onDownloadApp = () => {
+ // 可配置 APP 下载链接
+ const url = 'https://your-app-download-url.com';
+ if (url && (url.startsWith('http://') || url.startsWith('https://'))) {
+ window.open(url, '_blank');
+ } else {
+ showToast(t('downloadAPP'));
+ }
+};
const getName = (params) => {
icon.value = params.code;
dialCode.value = params.dialCode;
-}
-const agreeProt = () => {
- agree.value = !agree.value
-}
-
-// 密码验证
-const validatePassword = (password) => {
- const passwordRegex = /^(?=.*[A-Z])(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).{8,16}$/;
- return passwordRegex.test(password);
-}
-
-const register = () => {
- console.log(activeIndex.value, 'activeIndex.value')
- if (activeIndex.value == 0) {
- if (username.value == '') {
- showToast(t('entryAccount'));
- return
- }
- if (username.value.length < 6 || username.value.length > 30) {
- showToast(t('accountLength'));
- return
- }
- } else if (activeIndex.value == 1) {
- let match = username.value.search(/@/);
- if (username.value == '' || match.value == -1) {
- showToast(t('entryCorrectEmail'));
- return
- }
- if (safeword.value == '') {
- showToast(t('safewordTips'));
- return
- }
- if (verifyCode.value.length < 6) {
- showToast(t('entryVerifyTips'));
- return
- }
- } else if (activeIndex.value == 2) {
- if (!(/(^[1-9]\d*$)/.test(username.value))) {
- showToast(t('entryPhone'));
- return
- }
- if (username.value == '') {
- showToast(t('entryPhone'));
- return
- }
- }
- if (password.value == '') {
- showToast(t('entryPassword'));
- return
- }
-
- if (!validatePassword(password.value)) {
- showToast(t('passwordTips'));
- return
- }
- if (repassword.value !== password.value) {
- showToast(t('noSamePassword'));
- return
- }
- if (invitCode.value.length == '') {
- showToast(t('请输入金融机构代码'));
- return
- }
- if (!agree.value) {
- showToast(t('agreeServiceCond'));
- return
- }
- show.value = true
-}
-const changeIndex = (index) => {
- activeIndex.value = index;
- if (index == 0 || index == 1) {
- isArea.value = false
- } else {
- isArea.value = true
- }
-}
-const registerApi = () => {
- switch (activeIndex.value) {
- case 0:
- {
- type.value = 3;
- break;
- }
- case 1:
- {
- type.value = 2;
- break;
- }
- case 2:
- {
- type.value = 1;
- break;
- }
- }
-
- if (activeIndex.value === 1 || activeIndex.value === 2) {
- _bindEmailRegister({
- username: activeIndex.value === 1 ? username.value : dialCode.value + username.value,
- password: password.value,
- type: activeIndex.value === 1 ? '2' : '1', // 2邮箱,1手机
- verifcode: verifyCode.value,
- usercode: invitCode.value,
- safeword: safeword.value
- }).then((res) => {
- userStore[GET_USERINFO](res)
- store.state.user.userInfo = res
- // 其他操作？？
- // router.push('/identity')
- router.push('/login')
- })
- } else {
- _registerUser({
- userName: (activeIndex.value === 0 || activeIndex.value === 1) ? username.value : `${dialCode.value}${username.value}`,
- password: password.value,
- // re_password: repassword.value,
- type: type.value,
- userCode: invitCode.value,
- }).then((res) => {
- userStore[GET_USERINFO](res)
- store.state.user.userInfo = res
- if (activeIndex.value == 0) {
- router.push('/setFond')
- } else {
- router.push({ name: 'verify', query: { type: activeIndex.value, account: activeIndex.value == 1 ? username.value : `${dialCode.value}${username.value}` } })
- }
- });
- }
-}
+};
</script>
<style lang="scss" scoped>
-.activeBKClick {
- &:active {
- background: $tab_background;
- opacity: 0.5;
- }
-}
-
-.activeClick {
- &:active {
- background: $mainbgWhiteColor;
- opacity: 0.5;
- }
-}
-
.register {
- width: 100%;
+ position: relative;
+ min-height: 100vh;
+ background: #fff;
+ padding: 56px 24px 48px;
box-sizing: border-box;
- padding: 16px;
- font-size: 13px;
- background-color: $mainbgWhiteColor;
+}
+.reg-inner {
+ max-width: 400px;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
}
-.top {
- padding-left: 9px;
- padding-top: 9px;
-
- img {
- width: 18px;
- height: 18px;
- }
+.reg-back {
+ position: absolute;
+ left: 24px;
+ top: 24px;
+ color: #000;
+ cursor: pointer;
}
-.title {
- font-weight: 700;
- font-size: 26px;
- margin-top: 27px;
- margin-bottom: 33px;
-}
-
-.re-tab {
- margin-bottom: 22px;
-
- div {
- padding: 0 18px;
- height: 34px;
- line-height: 34px;
- text-align: center;
- border-radius: 4px;
- margin-right: 10px;
- }
-
- .active {
- // background: $US_tabActice_background;
- background: $bg_yellow;
- // color: $color_main;
- color: $text_color4;
- }
-}
-
-.forget {
- color: $color_main;
- font-size: 12px;
- line-height: 14px;
-}
-
-.noTips {
- margin-top: 24px;
-}
-
-.protocol {
+.reg-logo-wrap {
+ width: 72px;
+ height: 72px;
+ border-radius: 18px;
+ background: linear-gradient(135deg, #2c1a5c 0%, #5a37a5 100%);
display: flex;
align-items: center;
- height: 15px;
-
- i {
- width: 15px;
- height: 15px;
- margin-right: 9px;
-
- img {
- width: 100%;
- height: 100%;
- }
- }
+ justify-content: center;
+ margin-bottom: 24px;
}
-
-.iptbox {
+.reg-logo {
+ width: 44px;
height: 44px;
- margin-top: 8px;
- margin-bottom: 18px;
- padding: 0 20px;
- display: flex;
- justify-content: space-between;
- align-items: center;
+ object-fit: contain;
+}
+
+.reg-title {
+ font-size: 26px;
+ font-weight: 700;
+ color: #000;
+ margin: 0 0 8px;
+}
+.reg-login {
+ font-size: 14px;
+ color: #4a4a4a;
+ margin: 0 0 6px;
+}
+.reg-login-link {
+ color: #8a2be2;
+ cursor: pointer;
+}
+.reg-lang {
+ font-size: 13px;
+ color: #9b9b9b;
+ margin: 0 0 28px;
+ cursor: pointer;
+}
+
+/* 输入框：与登录页一致 */
+.reg-field {
+ width: 100%;
+ margin-bottom: 16px;
+ position: relative;
+}
+.reg-field-code {
+ .reg-input { padding-right: 90px; }
+}
+.reg-field-pwd {
+ .reg-input { padding-right: 44px; }
+}
+.reg-input {
+ width: 100%;
+ height: 48px;
+ padding: 0 16px;
+ box-sizing: border-box;
+ font-size: 15px;
+ color: #333;
+ background: #f6f5fa;
+ border: none;
border-radius: 6px;
+ outline: none;
+}
+.reg-input::placeholder {
+ color: #9b9b9b;
+}
+.reg-send-code {
+ position: absolute;
+ right: 12px;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 14px;
+ color: #8a2be2;
+ cursor: pointer;
+}
+.reg-eye {
+ position: absolute;
+ right: 16px;
+ top: 50%;
+ transform: translateY(-50%);
+ color: #6e6e6e;
+.reg-protocol {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 8px;
+ margin-bottom: 24px;
+ font-size: 13px;
+ color: #4a4a4a;
+}
+.reg-protocol-check {
+ width: 16px;
+ height: 16px;
+ flex-shrink: 0;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ cursor: pointer;
+ background: #fff;
+ display: inline-block;
+}
+.reg-protocol-check.checked {
+ background: #8a2be2;
+ border-color: #8a2be2;
+}
+.reg-protocol-link {
+ color: #8a2be2;
+ cursor: pointer;
+}
- input {
- flex: 1;
- height: 100%;
- border: none;
- }
+ cursor: pointer;
+}
- span {
- color: $color_main;
- }
+.reg-protocol {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 8px;
+ margin-bottom: 24px;
+ font-size: 13px;
+ color: #4a4a4a;
+}
+.reg-protocol-check {
+ width: 16px;
+ height: 16px;
+ flex-shrink: 0;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ cursor: pointer;
+ background: #fff;
+ display: inline-block;
+}
+.reg-protocol-check.checked {
+ background: #8a2be2;
+ border-color: #8a2be2;
+}
+.reg-protocol-link {
+ color: #8a2be2;
+ cursor: pointer;
+}
+
+/* 主按钮：渐变，圆角 6px */
+.reg-btn {
+ width: 100%;
+ height: 48px;
+ border: none;
+ border-radius: 6px;
+ font-size: 16px;
+ font-weight: 700;
+ cursor: pointer;
+}
+.reg-btn-primary {
+ background: linear-gradient(90deg, #a443cf, #5e2bc8);
+ color: #fff;
+ margin-bottom: 12px;
+}
+.reg-btn-outline {
+ background: #fff;
+ border: 1px solid #8a2be2;
+ color: #8a2be2;
}
</style>
diff --git a/src/views/safety/index.vue b/src/views/safety/index.vue
index 0a43914..3fcd00f 100644
--- a/src/views/safety/index.vue
+++ b/src/views/safety/index.vue
@@ -1,222 +1,144 @@
<template>
<div class="safety">
- <fx-header>
- </fx-header>
- <div class="content">
- <div class="title textColor">{{ $t('safe') }}</div>
- <div class="tit1 textColor">{{ $t('twoFactorAuthentication') }}</div>
- <div class="tit2">{{ $t('twoAuthenticationTips') }}</div>
- </div>
- <van-grid :column-num="2" :gutter="12" class="verify">
- <!-- <van-grid-item v-for="(item, index) in verifyList" :key="index"
- @click="gotoVerify(item.url, item.isVerify, item.type)">
- <div class="verifyBox">
- <div class="left">
- <div class="imgBox">
- <img v-if="item.isVerify" :src="item.icon.verify" alt="">
- <img v-else :src="item.icon.verifyno" alt="">
- </div>
- </div>
- <div class="right icon">
- <img src="@/assets/image/userCenter/more.png" alt="">
- </div>
+ <assets-head :title="''" :show-left="true" />
+ <div class="safety-content">
+ <!-- 第一组：修改登录密码、修改资金密码 -->
+ <div class="safety-list safety-list--white">
+ <div
+ v-for="(item, index) in list"
+ :key="index"
+ class="safety-item"
+ @click="$router.push(item.url)"
+ >
+ <span class="safety-item-name" v-text="item.name"></span>
+ <van-icon name="arrow" class="safety-item-arrow" />
</div>
- <div class="name textColor">{{ item.title }}</div>
- </van-grid-item> -->
- </van-grid>
- <div class="content">
- <div v-for="(obj, index) in list" :key="index" @click="$router.push(obj.url)"
- class="flex justify-between items-center h-50">
- <div class="textColor">{{ obj.name }}</div>
- <div class="icon"><img src="@/assets/image/userCenter/more.png" alt=""></div>
+ </div>
+ <!-- 第二组：语言 -->
+ <div class="safety-list safety-list--gray">
+ <div class="safety-item" @click="$router.push('/language')">
+ <span class="safety-item-name">{{ $t('language') }}</span>
+ <span class="safety-item-extra">{{ localeLabel }}</span>
+ <van-icon name="arrow" class="safety-item-arrow" />
+ </div>
</div>
</div>
+ <!-- 退出登录按钮 -->
+ <button class="safety-logout" @click="loginOut">{{ $t('loginOut') }}</button>
</div>
</template>
<script setup>
-import { Grid, GridItem, showToast } from 'vant'
-import { _getVerifTarget } from '@/service/user.api.js'
-import { ref, onMounted } from "vue";
+import { computed } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
-const router = useRouter()
-const { t } = useI18n()
+import { _logOut } from "@/service/user.api.js";
+import { useUserStore } from "@/store/user";
+import { localeLabels } from "./locale-labels.js";
+import AssetsHead from "@/components/Transform/assets-head/index.vue";
-const verifyList = ref([
- {
- title: t('googleAuthenticator'),
- name: "google",
- icon: {
- verifyno: new URL('@/assets/image/userCenter/gooleVerifyno.png', import.meta.url),
- verify: new URL('@/assets/image/userCenter/gooleVerify.png', import.meta.url)
- },
- isVerify: false,
- url: '/bindVerify?type=3',
- type: 3
- },
- {
- title: t('phoneVerify'),
- name: "phone",
- icon: {
- verifyno: new URL('@/assets/image/userCenter/phoneVerifyno.png', import.meta.url),
- verify: new URL('@/assets/image/userCenter/phoneVerify.png', import.meta.url)
- },
- isVerify: false,
- url: '/bindVerify?type=1',
- type: 1
- },
- {
- title: t('emailVerify'),
- name: "email",
- icon: {
- verifyno: new URL('@/assets/image/userCenter/emialVerifyno.png', import.meta.url),
- verify: new URL('@/assets/image/userCenter/emialVerify.png', import.meta.url)
- },
- isVerify: false,
- url: '/bindVerify?type=2',
- type: 2
+const router = useRouter();
+const { t, locale } = useI18n();
+const userStore = useUserStore();
+
+const localeLabel = computed(() => {
+ const loc = locale && typeof locale === "object" && "value" in locale ? locale.value : locale;
+ return localeLabels[loc] || loc || "English";
+});
+
+const list = computed(() => [
+ { name: t("changeLoginPassword"), url: "/changePassword" },
+ { name: t("changeFunsPassword"), url: "/changeFundsPassword" },
+]);
+
+const loginOut = () => {
+ const token = userStore.userInfo?.token;
+ if (token) {
+ _logOut({ token }).catch(() => {});
}
-])
-
-const list = ref([
- {
- name: t('changeLoginPassword'),
- url: "/changePassword"
- },
- {
- name: t('changeFunsPassword'),
- url: "/changeFundsPassword"
- },
- {
- name: t('manualReset'),
- url: "/resetVerify?type=0"
- },
- {
- name: `${t('bind')}`,
- url: "/resetPhoneEmail"
- },
-])
-
-onMounted(() => {
- getVerifTarget()
-})
-
-const getVerifTarget = () => {
- _getVerifTarget({
- }).then((res) => {
- dataRest(res)
- })
-}
-const dataRest = (data) => {
- verifyList.value.forEach(item => {
- if (item.name == 'google') {
- item.isVerify = data.google_auth_bind;
- } else if (item.name == 'phone') {
- item.isVerify = data.phone_authority;
- } else if (item.name == 'email') {
- item.isVerify = data.email_authority;
- }
- })
-}
-const gotoVerify = (url, isVerify, type) => {
- if (isVerify) {
- router.push(`/changeVerify?type=${type}`);
- } else {
- router.push(url)
- }
-}
+ userStore.$patch({ userInfo: { token: "" } });
+ router.replace("/login");
+};
</script>
<style lang="scss" scoped>
-:deep(.van-nav-bar) {
- // background-color: $mainBgColor;
-}
-
-:deep(.van-grid-item__content) {
- // background: $main2_background !important;
- color: $text_color;
-}
+@import "@/assets/init.scss";
.safety {
- font-size: 12px;
- width: 100%;
+ min-height: 100vh;
+ background: #fff;
box-sizing: border-box;
-
- :deep(.van-grid-item__content) {
- background: $cont_background;
- }
+ padding-bottom: 40px;
}
-.title {
- font-weight: 700;
- font-size: 26px;
- margin-top: 12px;
- margin-bottom: 12px;
-}
-
-.content {
+.safety-content {
padding: 0 16px;
}
-.tit1 {
- font-size: 15px;
+.safety-list {
+ border-radius: 12px;
+ overflow: hidden;
+ margin-top: 20px;
+
+ &:first-of-type {
+ margin-top: 16px;
+ }
+}
+
+.safety-list--white {
+ background: #fff;
+ box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.06);
+}
+
+.safety-list--gray {
+ background: #f5f5f5;
+}
+
+.safety-item {
+ display: flex;
+ align-items: center;
+ height: 50px;
+ padding: 0 4px 0 0;
+ font-size: 16px;
+ color: #333;
+ background: transparent;
+
+ &:not(:last-child) {
+ border-bottom: 1px solid #eee;
+ }
+}
+
+.safety-list--gray .safety-item:not(:last-child) {
+ border-bottom-color: #ebebeb;
+}
+
+.safety-item-name {
+ flex: 1;
font-weight: 400;
}
-.tit2 {
- color: $text_color1;
- font-size: 12px;
- margin-top: 5px;
+.safety-item-extra {
+ margin-right: 8px;
+ font-size: 14px;
+ color: #999;
}
-.verify {
- font-size: 12px;
- color: #222832;
- margin-top: 21px;
- font-weight: 700;
-
- .verifyBox {
- display: flex;
- justify-content: space-between;
- padding-left: 14px;
- padding-right: 27px;
- box-sizing: border-box;
- align-items: center;
- width: 100%;
-
- .left {
- .imgBox {
- width: 45px;
- height: 34px;
-
- img {
- width: 100%;
- height: 100%;
- }
- }
- }
- }
-
- .name {
- width: 100%;
- padding-left: 14px;
- margin-top: 10px;
- }
+.safety-item-arrow {
+ font-size: 14px;
+ color: #c8c9cc;
}
-.icon {
- width: 14px;
- height: 14px;
-
- img {
- width: 100%;
- height: 100%;
- }
+.safety-logout {
+ display: block;
+ width: calc(100% - 32px);
+ margin: 32px 16px 0;
+ padding: 16px 0;
+ border: none;
+ border-radius: 12px;
+ background: linear-gradient(90deg, #a443cf, #5e2bc8);
+ color: #fff;
+ font-size: 16px;
+ font-weight: 600;
+ cursor: pointer;
}
-
-.h-50 {
- height: 50px;
- ;
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/safety/locale-labels.js b/src/views/safety/locale-labels.js
new file mode 100644
index 0000000..cf29925
--- /dev/null
+++ b/src/views/safety/locale-labels.js
@@ -0,0 +1,17 @@
+export const localeLabels = {
+ en: "English",
+ "zh-CN": "简体中文",
+ zhcn: "简体中文",
+ CN: "繁体中文",
+ Korean: "한국인",
+ Japanese: "やまと",
+ de: "Deutsch",
+ fr: "Français",
+ Italy: "Italiano",
+ vi: "Tiếng Việt",
+ th: "ไทย",
+ fa: "Français",
+ Spanish: "Spanish",
+ Portuguese: "Portuguese",
+ Deutsch: "Deutsch",
+};
diff --git a/src/views/safety/resetPhoneEmail.vue b/src/views/safety/resetPhoneEmail.vue
index e528724..9e45287 100644
--- a/src/views/safety/resetPhoneEmail.vue
+++ b/src/views/safety/resetPhoneEmail.vue
@@ -63,7 +63,6 @@
import img1 from "@/assets/image/slider/1.png";
import img2 from "@/assets/image/slider/2.png";
import { useI18n } from 'vue-i18n'
-import { customerServiceUrl } from "@/config";
import { useRouter } from 'vue-router';
import { ref, onMounted, reactive, onUnmounted } from 'vue';
import { showToast } from "vant";
@@ -74,15 +73,7 @@
if (path == 'back') {
router.go(-1)
} else {
- if (path == '/customerService') {
- if (customerServiceUrl()) {
- window.location.href = customerServiceUrl();
- } else {
- router.push(path)
- }
- } else {
- router.push(path)
- }
+ router.push(path)
}
}
const userStore = useUserStore();
diff --git a/src/views/trade/index.vue b/src/views/trade/index.vue
index 9201c55..6bcd312 100644
--- a/src/views/trade/index.vue
+++ b/src/views/trade/index.vue
@@ -1,5 +1,6 @@
<template>
<div id="cryptos" class="trade_new">
+ <!-- 顶部导航与选择条已去掉 -->
<!-- <div class="flex justify-start items-center">
<img src="@/assets/image/icon_back.png" alt="" class="back mr-20" @click="$router.go(-1)">
@@ -15,14 +16,14 @@
</ContractHeader>
<!-- <Head :symbolObj="symbolObj"></Head> -->
- <div :key="symbol" class="pb-108 no_touch">
+ <div :key="symbol" class="pb-108 no_touch ">
<p class="status-info" v-if="chartData.market && chartData.market.status">
<span>{{ chartData.market.status && $t(chartData.market.status) }},</span>
<span class="time">{{ chartData.market.time_str }}</span>
<span>{{ chartData.market.time_zone && $t(chartData.market.time_zone) }}</span>
</p>
<div :class="{ slide2: animated1 }" v-if="selectIndex === 1">
- <section class="value-container" v-if="showMore">
+ <section class="value-container trade-hide-stats" v-if="showMore">
<div class="flex-l">
<p class="first-line red">{{ formatMoney(chartData?.close) }}</p>
<p class="second-line">
@@ -76,21 +77,21 @@
</div>
</section>
<div class=" rounded-view" key="x">
- <PerpetualOpen class="pl-30 pr-30" :key="keyIndex + 'a'" :selectIndex="selectIndex" :symbol="symbol"
+ <PerpetualOpen class="pl-30 pr-30" style="background-color: #fff;border-radius: 20px;" :key="keyIndex + 'a'" :selectIndex="selectIndex" :symbol="symbol"
:green-data="bids" :red-data="asks" :price="price" :init-open="initOpen" :init-close="initClose"
:init-futrue="initFutrue" :currentType="currentType" @changeValueBack="changeValueBack"
@changeCurrentType="changeCurrentType" @ordered="onOrdered">
</PerpetualOpen>
<!-- <div class="line"></div> -->
<!-- 委托/持仓-->
- <PerpetualOrder class="pl-30 pr-30" :key="keyIndex + 'b'" :symbol="symbol" :order-cur="orderCur"
+ <PerpetualOrder class="pl-30 pr-30" style="background-color: #fff;" :key="keyIndex + 'b'" :symbol="symbol" :order-cur="orderCur"
:order-hold="orderHold" :topIndex="selectIndex" :futrue-hold="futrueHold" :futrue-histroy="futrueHistroy"
@tab="onTab" @recall="onRecall">
</PerpetualOrder>
</div>
</div>
<div :class="{ slide1: animated2 }" v-else>
- <section class="value-container" v-if="showMore">
+ <section class="value-container trade-hide-stats" v-if="showMore">
<div class="flex-l">
<p class="first-line red">{{ formatMoney(chartData?.close) }}</p>
<p class="second-line">
@@ -236,6 +237,7 @@
})
}
return {
+ leverRate: 100,
quote: {},
initTimer: null,
keyIndex: 0,
@@ -368,6 +370,10 @@
this[this.curTab](this.symbol)
_initOpen({ symbol: this.symbol }).then(data => {
this.initOpen = data
+ })
+ // 平仓/撤单后刷新永续余额
+ _futrueOrderInit(this.symbol).then(data => {
+ this.initFutrue = data
})
},
handleClickShowMore() {
@@ -541,7 +547,8 @@
initFun()
}, 600);
}
- if (type === 'futrue' || !type) {
+ // 购买/开仓/平仓后都刷新永续余额 initFutrue.amount
+ if (type === 'futrue' || type === 'close' || type === 'open' || type === 'long' || type === 'short' || !type) {
_futrueOrderInit(symbol).then(data => {
console.log(data, '数据9999')
this.initFutrue = data
@@ -718,11 +725,15 @@
<style lang="scss" scoped>
@import "@/assets/init.scss";
+.trade-hide-stats.value-container {
+ display: none;
+}
+
.trade_new {
color: $log-c;
background: $mainbgWhiteColor;
min-height: 100vh;
- padding: 1.4rem 1.4rem 7rem 1.4rem;
+ // padding: 1.4rem 1.4rem 7rem 1.4rem;
.back {
width: 2rem;
@@ -752,6 +763,10 @@
#cryptos {
background: $mainbgWhiteColor;
$inp-b: #f7f7f7;
+
+ .trade-content-bg {
+ background: #fff;
+ }
:deep(.textColor) {
color: $log-c;
@@ -848,6 +863,7 @@
border-top-left-radius: 20px;
border-top-right-radius: 20px;
box-sizing: border-box;
+ background-color: #fff;
}
@@ -911,8 +927,6 @@
.my-swipe {
width: 100%;
}
-
- .my-swipe .van-swipe-item {}
.line {
height: 13px;
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index ec64e40..317d6ce 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -14,8 +14,8 @@
gray: '#878A96', // 文字颜色
'btn-gray': '#F1F3F9', // 背景灰
'bd-gray': '#C3C4CD', // 下单border
- up: '#06CDA5', // 升
- down: '#F43368' // 降
+ up: '#06c16a', // 升
+ down: '#f4374b' // 降
}
},
},
diff --git a/vite.config.js b/vite.config.js
index 615b577..5f0dfd3 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -44,6 +44,12 @@
// rewrite: (path) => path.replace(/^\/wap/, ""),
secure: false
},
+ "/newsapi-api": {
+ target: "https://newsapi.org",
+ changeOrigin: true,
+ rewrite: (path) => path.replace(/^\/newsapi-api/, ''),
+ secure: true
+ },
},
},
resolve: {
--
Gitblit v1.9.3