From 0dbc7465447164fef24327b5d494870832d798dd Mon Sep 17 00:00:00 2001
From: 李 <344137771@qq.com>
Date: Tue, 26 May 2026 11:15:18 +0800
Subject: [PATCH] 1
---
src/assets/image/fund/banner3.jpg | 0
src/components/Transform/deliveryContract/position.vue | 244
src/components/MiniKlineChart/index.vue | 78
src/assets/imgs/footer/ft_5_a.png | 0
src/assets/imgs/footer/ft_2_a.png | 0
src/components/fx-footer/index.vue | 247
src/assets/image/userCenter/user_8.png | 0
src/assets/imgs/footer/ft_2.png | 0
src/views/quotes/List.vue | 14
src/views/trade/components/OptionsContract.vue | 982 +++++
src/assets/css/index.scss | 1
src/components/Transform/assetsCenter/financialList.vue | 9
src/i18n/modules/Korean.js | 49
src/i18n/modules/en.js | 51
src/views/customerService/index - 副本2.vue | 40
src/i18n/modules/de.js | 49
src/views/cryptos/financialManagement/fundHome.vue | 321 +
src/assets/imgs/footer/ft_4.png | 0
src/assets/image/userCenter/user_6.png | 0
src/views/home/index.vue | 2006 +++++++----
src/components/Transform/contract-header/index.vue | 2
src/i18n/modules/ro.js | 43
src/assets/image/fund/banner3_e.jpg | 0
src/components/ex-input/index.vue | 55
src/i18n/modules/gr.js | 49
src/assets/image/fund/banner2_e.jpg | 0
src/views/login/index.vue | 235
src/views/cryptos/PerpetualContract/index.vue | 17
src/assets/image/home/banner_1.png | 0
src/i18n/modules/Japanese.js | 49
src/assets/image/tx.png | 0
src/assets/image/but_to.png | 0
src/assets/imgs/footer/ft_3_a.png | 0
src/i18n/modules/zh-CN.js | 53
src/config/index.js | 6
src/views/cryptos/AboutUs/index.vue | 8
src/assets/image/userCenter/user_3.png | 0
src/service/upload.api.js | 6
src/assets/image/userCenter/user_1.png | 0
src/assets/video/home_video.mp4 | 0
src/assets/image/fund/banner1_e.jpg | 0
src/assets/image/home/banner_3.png | 0
src/store/modules/home.store.js | 21
src/views/forget/index.vue | 280 +
src/assets/css/variable.scss | 2
src/views/cryptos/Recharge/rechargeList.vue | 4
src/i18n/modules/pt.js | 49
src/assets/image/fund/banner2.jpg | 0
src/views/cryptos/financialManagement/fundBuy.vue | 31
src/assets/image/kong.png | 0
src/assets/image/customer.png | 0
src/assets/image/lxkf.png | 0
src/views/trade/Options.vue | 594 +++
src/assets/image/home/download.b711f9a.png | 0
src/assets/remNew.js | 11
index.html | 6
vite.config.js | 4
src/assets/image/userCenter/user_7.png | 0
src/assets/imgs/footer/ft_1.png | 0
src/assets/image/icon_back2.png | 0
src/views/cryptos/Exchange/exchangeSubmit.vue | 2
src/views/cryptos/financialManagement/FinancialManagementConfirm.vue | 9
src/assets/imgs/footer/ft_1_a.png | 0
src/router/index.js | 29
src/i18n/modules/Italy.js | 49
src/views/cryptos/financialManagement/orderSuccess.vue | 7
src/main.js | 32
src/assets/imgs/footer/ft_3.png | 0
src/views/register/index.vue | 422 -
src/components/Transform/contract-futrue/index.vue | 12
src/i18n/modules/th.js | 49
src/assets/image/userCenter/user_5.png | 0
src/assets/imgs/footer/ft_4_a.png | 0
src/i18n/modules/vi.js | 49
src/assets/image/dh.png | 0
src/components/Transform/perpetual-open/index.vue | 129
src/views/news/index.vue | 46
src/assets/image/dk.png | 0
src/assets/image/userCenter/user_4.png | 0
favicon.ico | 0
src/i18n/modules/CN.js | 51
src/assets/imgs/footer/ft_5.png | 0
src/assets/image/userCenter/user_2.png | 0
src/i18n/modules/fr.js | 49
src/views/my/creditScore.vue | 112
src/assets/image/login_logo.png | 0
src/views/customerService/index.vue | 410 ++
src/service/user.api.js | 24
src/views/personal/index.vue | 726 ++--
src/views/quotes/Market.vue | 634 +++
src/views/my/index.vue | 815 ++--
src/store/theme.js | 2
src/assets/image/fund/banner1.jpg | 0
src/assets/image/home/hezuo@3x.fcc1aa7.png | 0
src/components/Transform/perpetual-open/amountSlider.vue | 23
/dev/null | 396 --
src/i18n/modules/tur.js | 43
src/assets/image/cz.png | 0
src/views/cryptos/financialManagement/fundOrders.vue | 280 +
src/components/Transform/assets-head/index.vue | 37
src/assets/image/home/banner_2.png | 0
src/i18n/modules/es.js | 49
src/App.vue | 16
103 files changed, 7,072 insertions(+), 3,046 deletions(-)
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..a8f1eaf
--- /dev/null
+++ b/favicon.ico
Binary files differ
diff --git a/index.html b/index.html
index c5996a6..c0cd44f 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,9 @@
<!DOCTYPE html>
-<html lang="en" theme="dark">
+<html lang="en" theme="white">
<head>
<meta charset="UTF-8" />
- <link rel="icon" type="image/svg+xml" href="/relicon.png" />
+ <link rel="icon" type="image/svg+xml" href="./favicon.ico" />
<link rel="manifest" href="./public/desk/manifest.json">
<meta name="package" content="20231125T0359">
<meta name="viewport"
@@ -11,7 +11,7 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="theme-color" content="#131A2E">
<meta name="apple-mobile-web-app-status-bar-style" content="#131A2E" />
- <link rel="apple-touch-icon" href="./public/img/App.png">
+ <link rel="apple-touch-icon" href="./favicon.ico">
<title>Crypto</title>
</head>
diff --git a/src/App.vue b/src/App.vue
index 0e1990e..09a8079 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -35,9 +35,9 @@
if (usercode) {
setStorage("usercode", usercode);
}
-//设置主题 - 默认使用黑夜模式
+//设置主题 - 默认使用白天模式
if (!getStorage("theme")) {
- thStore[SET_THEME]("dark", false); // 默认使用黑夜模式
+ thStore[SET_THEME]("white", false); // 默认使用白天模式
} else {
thStore[SET_THEME](thStore.theme, false);
}
@@ -341,20 +341,20 @@
border: 1px solid rgba(118, 128, 143, 0.2);
border-radius: 12px;
transition: all 0.2s ease;
-
+
&:hover {
background: rgba(146, 209, 255, 0.05);
border-color: rgba(146, 209, 255, 0.3);
}
}
-
+
.van-button--primary {
background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
border: none;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(146, 209, 255, 0.3);
transition: all 0.3s ease;
-
+
&:hover {
background: linear-gradient(135deg, #7BB8FF 0%, #6BA8FF 100%);
box-shadow: 0 6px 16px rgba(146, 209, 255, 0.4);
@@ -370,7 +370,7 @@
}
.van-dropdown-menu__title {
- color: $text_color !important;
+ color: $text_color;
}
.van-nav-bar__right {
@@ -379,10 +379,10 @@
}
.van-nav-bar__left {
- padding: 0 16px !important;
+ padding: 0 16px;
}
.header {
- padding-top: 8px !important;
+ padding-top: 8px;
}
</style>
diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss
index 9d3afaf..3f73e7a 100644
--- a/src/assets/css/index.scss
+++ b/src/assets/css/index.scss
@@ -109,7 +109,6 @@
.inputBackground {
background: $input_background;
border-radius: 12px;
- border: 1px solid rgba(118, 128, 143, 0.1);
transition: all 0.2s ease;
&:focus {
diff --git a/src/assets/css/variable.scss b/src/assets/css/variable.scss
index 2a65afb..57f48b6 100644
--- a/src/assets/css/variable.scss
+++ b/src/assets/css/variable.scss
@@ -23,7 +23,7 @@
--cont_background1: #f5f5f5;
--title_color: #B8BDC5;
--line_color: #F5F5F5;
- --bg_dark: #f5f5f5;
+ --bg_dark: #ccc;
--border_color: #F5F5F5;
--divi_line: #F5F5F5;
--bg_step: #868D9A;
diff --git a/src/assets/image/but_to.png b/src/assets/image/but_to.png
new file mode 100644
index 0000000..1fdf7f2
--- /dev/null
+++ b/src/assets/image/but_to.png
Binary files differ
diff --git a/src/assets/image/customer.png b/src/assets/image/customer.png
index a16e640..924d412 100644
--- a/src/assets/image/customer.png
+++ b/src/assets/image/customer.png
Binary files differ
diff --git a/src/assets/image/cz.png b/src/assets/image/cz.png
new file mode 100644
index 0000000..24cc424
--- /dev/null
+++ b/src/assets/image/cz.png
Binary files differ
diff --git a/src/assets/image/dh.png b/src/assets/image/dh.png
new file mode 100644
index 0000000..3058354
--- /dev/null
+++ b/src/assets/image/dh.png
Binary files differ
diff --git a/src/assets/image/dk.png b/src/assets/image/dk.png
new file mode 100644
index 0000000..7e5ff90
--- /dev/null
+++ b/src/assets/image/dk.png
Binary files differ
diff --git a/src/assets/image/fund/banner1.jpg b/src/assets/image/fund/banner1.jpg
new file mode 100644
index 0000000..3b12d4e
--- /dev/null
+++ b/src/assets/image/fund/banner1.jpg
Binary files differ
diff --git a/src/assets/image/fund/banner1_e.jpg b/src/assets/image/fund/banner1_e.jpg
new file mode 100644
index 0000000..02db019
--- /dev/null
+++ b/src/assets/image/fund/banner1_e.jpg
Binary files differ
diff --git a/src/assets/image/fund/banner2.jpg b/src/assets/image/fund/banner2.jpg
new file mode 100644
index 0000000..d8fbe61
--- /dev/null
+++ b/src/assets/image/fund/banner2.jpg
Binary files differ
diff --git a/src/assets/image/fund/banner2_e.jpg b/src/assets/image/fund/banner2_e.jpg
new file mode 100644
index 0000000..aac7d40
--- /dev/null
+++ b/src/assets/image/fund/banner2_e.jpg
Binary files differ
diff --git a/src/assets/image/fund/banner3.jpg b/src/assets/image/fund/banner3.jpg
new file mode 100644
index 0000000..55e3008
--- /dev/null
+++ b/src/assets/image/fund/banner3.jpg
Binary files differ
diff --git a/src/assets/image/fund/banner3_e.jpg b/src/assets/image/fund/banner3_e.jpg
new file mode 100644
index 0000000..bd1313a
--- /dev/null
+++ b/src/assets/image/fund/banner3_e.jpg
Binary files differ
diff --git a/src/assets/image/home/banner_1.png b/src/assets/image/home/banner_1.png
new file mode 100644
index 0000000..0af85b3
--- /dev/null
+++ b/src/assets/image/home/banner_1.png
Binary files differ
diff --git a/src/assets/image/home/banner_2.png b/src/assets/image/home/banner_2.png
new file mode 100644
index 0000000..aaa36c3
--- /dev/null
+++ b/src/assets/image/home/banner_2.png
Binary files differ
diff --git a/src/assets/image/home/banner_3.png b/src/assets/image/home/banner_3.png
new file mode 100644
index 0000000..cbe77d5
--- /dev/null
+++ b/src/assets/image/home/banner_3.png
Binary files differ
diff --git a/src/assets/image/home/download.b711f9a.png b/src/assets/image/home/download.b711f9a.png
new file mode 100644
index 0000000..90d0bf5
--- /dev/null
+++ b/src/assets/image/home/download.b711f9a.png
Binary files differ
diff --git a/src/assets/image/home/hezuo@3x.fcc1aa7.png b/src/assets/image/home/hezuo@3x.fcc1aa7.png
new file mode 100644
index 0000000..e5813fc
--- /dev/null
+++ b/src/assets/image/home/hezuo@3x.fcc1aa7.png
Binary files differ
diff --git a/src/assets/image/icon_back2.png b/src/assets/image/icon_back2.png
new file mode 100644
index 0000000..b899444
--- /dev/null
+++ b/src/assets/image/icon_back2.png
Binary files differ
diff --git a/src/assets/image/kong.png b/src/assets/image/kong.png
new file mode 100644
index 0000000..d3f681e
--- /dev/null
+++ b/src/assets/image/kong.png
Binary files differ
diff --git a/src/assets/image/login_logo.png b/src/assets/image/login_logo.png
new file mode 100644
index 0000000..765f938
--- /dev/null
+++ b/src/assets/image/login_logo.png
Binary files differ
diff --git a/src/assets/image/lxkf.png b/src/assets/image/lxkf.png
new file mode 100644
index 0000000..8541f45
--- /dev/null
+++ b/src/assets/image/lxkf.png
Binary files differ
diff --git a/src/assets/image/tx.png b/src/assets/image/tx.png
new file mode 100644
index 0000000..8cf66c0
--- /dev/null
+++ b/src/assets/image/tx.png
Binary files differ
diff --git a/src/assets/image/userCenter/user_1.png b/src/assets/image/userCenter/user_1.png
new file mode 100644
index 0000000..37c4a6a
--- /dev/null
+++ b/src/assets/image/userCenter/user_1.png
Binary files differ
diff --git a/src/assets/image/userCenter/user_2.png b/src/assets/image/userCenter/user_2.png
new file mode 100644
index 0000000..f3d4825
--- /dev/null
+++ b/src/assets/image/userCenter/user_2.png
Binary files differ
diff --git a/src/assets/image/userCenter/user_3.png b/src/assets/image/userCenter/user_3.png
new file mode 100644
index 0000000..7e5ff90
--- /dev/null
+++ b/src/assets/image/userCenter/user_3.png
Binary files differ
diff --git a/src/assets/image/userCenter/user_4.png b/src/assets/image/userCenter/user_4.png
new file mode 100644
index 0000000..34b5547
--- /dev/null
+++ b/src/assets/image/userCenter/user_4.png
Binary files differ
diff --git a/src/assets/image/userCenter/user_5.png b/src/assets/image/userCenter/user_5.png
new file mode 100644
index 0000000..51a2504
--- /dev/null
+++ b/src/assets/image/userCenter/user_5.png
Binary files differ
diff --git a/src/assets/image/userCenter/user_6.png b/src/assets/image/userCenter/user_6.png
new file mode 100644
index 0000000..7208558
--- /dev/null
+++ b/src/assets/image/userCenter/user_6.png
Binary files differ
diff --git a/src/assets/image/userCenter/user_7.png b/src/assets/image/userCenter/user_7.png
new file mode 100644
index 0000000..8124431
--- /dev/null
+++ b/src/assets/image/userCenter/user_7.png
Binary files differ
diff --git a/src/assets/image/userCenter/user_8.png b/src/assets/image/userCenter/user_8.png
new file mode 100644
index 0000000..bb17073
--- /dev/null
+++ b/src/assets/image/userCenter/user_8.png
Binary files differ
diff --git a/src/assets/imgs/footer/chart-active.png b/src/assets/imgs/footer/chart-active.png
deleted file mode 100644
index 8c71bc2..0000000
--- a/src/assets/imgs/footer/chart-active.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/imgs/footer/chart.png b/src/assets/imgs/footer/chart.png
deleted file mode 100644
index 34b9362..0000000
--- a/src/assets/imgs/footer/chart.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/imgs/footer/ft_1.png b/src/assets/imgs/footer/ft_1.png
new file mode 100644
index 0000000..8a15ff5
--- /dev/null
+++ b/src/assets/imgs/footer/ft_1.png
Binary files differ
diff --git a/src/assets/imgs/footer/ft_1_a.png b/src/assets/imgs/footer/ft_1_a.png
new file mode 100644
index 0000000..c049400
--- /dev/null
+++ b/src/assets/imgs/footer/ft_1_a.png
Binary files differ
diff --git a/src/assets/imgs/footer/ft_2.png b/src/assets/imgs/footer/ft_2.png
new file mode 100644
index 0000000..7f56741
--- /dev/null
+++ b/src/assets/imgs/footer/ft_2.png
Binary files differ
diff --git a/src/assets/imgs/footer/ft_2_a.png b/src/assets/imgs/footer/ft_2_a.png
new file mode 100644
index 0000000..232cc80
--- /dev/null
+++ b/src/assets/imgs/footer/ft_2_a.png
Binary files differ
diff --git a/src/assets/imgs/footer/ft_3.png b/src/assets/imgs/footer/ft_3.png
new file mode 100644
index 0000000..bd74792
--- /dev/null
+++ b/src/assets/imgs/footer/ft_3.png
Binary files differ
diff --git a/src/assets/imgs/footer/ft_3_a.png b/src/assets/imgs/footer/ft_3_a.png
new file mode 100644
index 0000000..02a5dea
--- /dev/null
+++ b/src/assets/imgs/footer/ft_3_a.png
Binary files differ
diff --git a/src/assets/imgs/footer/ft_4.png b/src/assets/imgs/footer/ft_4.png
new file mode 100644
index 0000000..bee5f04
--- /dev/null
+++ b/src/assets/imgs/footer/ft_4.png
Binary files differ
diff --git a/src/assets/imgs/footer/ft_4_a.png b/src/assets/imgs/footer/ft_4_a.png
new file mode 100644
index 0000000..c2c3412
--- /dev/null
+++ b/src/assets/imgs/footer/ft_4_a.png
Binary files differ
diff --git a/src/assets/imgs/footer/ft_5.png b/src/assets/imgs/footer/ft_5.png
new file mode 100644
index 0000000..062f018
--- /dev/null
+++ b/src/assets/imgs/footer/ft_5.png
Binary files differ
diff --git a/src/assets/imgs/footer/ft_5_a.png b/src/assets/imgs/footer/ft_5_a.png
new file mode 100644
index 0000000..f155b9e
--- /dev/null
+++ b/src/assets/imgs/footer/ft_5_a.png
Binary files differ
diff --git a/src/assets/imgs/footer/funds-active.png b/src/assets/imgs/footer/funds-active.png
deleted file mode 100644
index 673fffb..0000000
--- a/src/assets/imgs/footer/funds-active.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/imgs/footer/funds.png b/src/assets/imgs/footer/funds.png
deleted file mode 100644
index 0beec31..0000000
--- a/src/assets/imgs/footer/funds.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/imgs/footer/history-active.png b/src/assets/imgs/footer/history-active.png
deleted file mode 100644
index 6e1dedc..0000000
--- a/src/assets/imgs/footer/history-active.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/imgs/footer/history.png b/src/assets/imgs/footer/history.png
deleted file mode 100644
index be72578..0000000
--- a/src/assets/imgs/footer/history.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/imgs/footer/menu-active.png b/src/assets/imgs/footer/menu-active.png
deleted file mode 100644
index 5f8d4c7..0000000
--- a/src/assets/imgs/footer/menu-active.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/imgs/footer/menu.png b/src/assets/imgs/footer/menu.png
deleted file mode 100644
index 809efea..0000000
--- a/src/assets/imgs/footer/menu.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/imgs/footer/mine.png b/src/assets/imgs/footer/mine.png
deleted file mode 100644
index 06fc448..0000000
--- a/src/assets/imgs/footer/mine.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/imgs/footer/news-active.png b/src/assets/imgs/footer/news-active.png
deleted file mode 100644
index 34b0405..0000000
--- a/src/assets/imgs/footer/news-active.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/imgs/footer/news.png b/src/assets/imgs/footer/news.png
deleted file mode 100644
index 34e61f5..0000000
--- a/src/assets/imgs/footer/news.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/imgs/footer/optional-active.png b/src/assets/imgs/footer/optional-active.png
deleted file mode 100644
index 0322da8..0000000
--- a/src/assets/imgs/footer/optional-active.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/imgs/footer/optional.png b/src/assets/imgs/footer/optional.png
deleted file mode 100644
index 2c6a3e8..0000000
--- a/src/assets/imgs/footer/optional.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/imgs/footer/quotes-active.png b/src/assets/imgs/footer/quotes-active.png
deleted file mode 100644
index cda9988..0000000
--- a/src/assets/imgs/footer/quotes-active.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/imgs/footer/quotes.png b/src/assets/imgs/footer/quotes.png
deleted file mode 100644
index a33c58c..0000000
--- a/src/assets/imgs/footer/quotes.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/imgs/footer/trade-active.png b/src/assets/imgs/footer/trade-active.png
deleted file mode 100644
index 7e5f2fe..0000000
--- a/src/assets/imgs/footer/trade-active.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/imgs/footer/trade.png b/src/assets/imgs/footer/trade.png
deleted file mode 100644
index 290317d..0000000
--- a/src/assets/imgs/footer/trade.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/remNew.js b/src/assets/remNew.js
index fb66663..e31af01 100644
--- a/src/assets/remNew.js
+++ b/src/assets/remNew.js
@@ -1,9 +1,18 @@
const baseSize = 16
function setRem() {
- const scale = document.documentElement.clientWidth / 828
+ const scale = document.documentElement.clientWidth / 900
document.documentElement.style.fontSize = baseSize * scale + 'px'
}
setRem()
window.onresize = function () {
setRem()
}
+
+
+// 固定设置 html font-size 为 16px
+// function setRem() {
+// document.documentElement.style.fontSize = '16px'
+// }
+// setRem()
+// 移除动态缩放，保持固定 16px
+
diff --git a/src/assets/video/home_video.mp4 b/src/assets/video/home_video.mp4
new file mode 100644
index 0000000..dff1dbc
--- /dev/null
+++ b/src/assets/video/home_video.mp4
Binary files differ
diff --git a/src/components/MiniKlineChart/index.vue b/src/components/MiniKlineChart/index.vue
new file mode 100644
index 0000000..2ba289c
--- /dev/null
+++ b/src/components/MiniKlineChart/index.vue
@@ -0,0 +1,78 @@
+<template>
+ <div class="mini-kline-chart">
+ <svg
+ v-if="linePoints"
+ class="mini-kline-svg"
+ viewBox="0 0 100 40"
+ preserveAspectRatio="none"
+ >
+ <!-- 折线：用收盘价连成线 -->{{ linePoints }}
+ <polyline
+ :points="linePoints"
+ fill="none"
+ :stroke="lineColor"
+ stroke-width="1.2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+ </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+ /** K线/行情数据，每项 [open, close, low, high]，折线取 close */
+ data: {
+ type: Array,
+ default: () => []
+ },
+ /** 涨跌，用于颜色：true 红涨绿跌，false 绿涨红跌 */
+ up: {
+ type: Boolean,
+ default: true
+ }
+})
+
+const upColor = '#E35561'
+const downColor = '#11caa1'
+
+const lineColor = computed(() => (props.up ? upColor : downColor))
+
+const linePoints = computed(() => {
+ const list = props.data || []
+ if (!list.length) return ''
+ const closes = list.map((d) => d[1])
+ const min = Math.min(...closes)
+ const max = Math.max(...closes)
+ const range = max - min || 1
+ const n = list.length
+ const pad = 2
+ const chartH = 40 - pad * 2
+ const stepX = n > 1 ? 100 / (n - 1) : 0
+
+ return list
+ .map((d, i) => {
+ const close = d[1]
+ const x = n === 1 ? 50 : stepX * i
+ const y = pad + (1 - (close - min) / range) * chartH
+ return `${x},${y}`
+ })
+ .join(' ')
+})
+</script>
+
+<style lang="scss" scoped>
+.mini-kline-chart {
+ width: 100%;
+ height: 2.5rem;
+ min-height: 2rem;
+}
+
+.mini-kline-svg {
+ width: 100%;
+ height: 100%;
+ display: block;
+}
+</style>
diff --git a/src/components/Transform/assets-head/index.vue b/src/components/Transform/assets-head/index.vue
index a42693f..86b6adf 100644
--- a/src/components/Transform/assets-head/index.vue
+++ b/src/components/Transform/assets-head/index.vue
@@ -1,8 +1,13 @@
<template>
<div id="assetsHead">
<van-nav-bar :border="false" :title="title" :left-arrow="showLeft" @click-left="onClickLeft">
+ <template #left>
+ <div class="back-btn">
+ <img src="@/assets/image/icon_back2.png" alt="" />
+ </div>
+ </template>
+
<template #right>
-
<slot></slot>
</template>
</van-nav-bar>
@@ -61,14 +66,30 @@
</script>
<style lang="scss" scoped>
+.back-btn {
+ width: 4rem;
+ height: 4rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+
+ img {
+ width: 100%;
+ height: 100%;
+ }
+}
+
:deep(.van-nav-bar) {
+ box-shadow: none !important;
+ border-bottom: none !important;
// background-color: $selectSymbol_background !important;
.van-nav-bar__content {
- height: 96px;
+ height: 7.5rem;
}
.van-nav-bar__left {
- padding-left: 30px;
+ // padding-left: 1.875rem;
}
.van-nav-bar-icon {
@@ -76,17 +97,13 @@
}
.van-nav-bar__arrow {
- font-size: 48px !important;
+ font-size: 6rem !important;
color: $dark-grey;
}
- .van-nav-bar__right{
- // margin-right: 30px !important;
- }
-
.van-nav-bar__title {
- font-size: 36px;
- font-weight: 400;
+ font-size: 3rem;
+ font-weight: 700;
color: $text_color;
max-width: 100% !important;
margin: 0 auto !important;
diff --git a/src/components/Transform/assetsCenter/financialList.vue b/src/components/Transform/assetsCenter/financialList.vue
index 7493ab0..a4e7d2f 100644
--- a/src/components/Transform/assetsCenter/financialList.vue
+++ b/src/components/Transform/assetsCenter/financialList.vue
@@ -16,13 +16,16 @@
item.miner_name_en }}
</div>
<!-- <div v-if="tapIndex === 1" class="text-36 font-6">体验矿机3天</div> -->
- <div class="text-26 cl-33 mt-6 mb-4 textColor1">{{ $t('数量') }}
+ <div class="text-26 cl-33 mb-4 textColor1">{{ $t('数量') }}
<span class="ml-2 mr-2 textColor">{{ item.amount }}</span>{{ item.buyCurrency ?
- item.buyCurrency.toUpperCase() : 'USDT' }}
+ item.outputCurrency.toUpperCase() : 'USDT' }}
</div>
- <div class="text-26 cl-33 textColor1">{{ $t('周期') }} <span class="textColor">{{ item.cycle == 0 ?
+ <div class="text-26 cl-33 textColor1 mb-4">{{ $t('周期') }} <span class="textColor">{{ item.cycle == 0 ?
$t('无限期') : item.cycle + $t('天') }}</span>
</div>
+ <div class="text-26 cl-33 textColor1">{{ $t('币种') }} <span class="textColor">{{
+ item.buyCurrency.toUpperCase() }}</span>
+ </div>
</div>
</div>
<div class="flex justify-center align-center text-center h-36 ">
diff --git a/src/components/Transform/contract-futrue/index.vue b/src/components/Transform/contract-futrue/index.vue
index a4efed4..b90c753 100644
--- a/src/components/Transform/contract-futrue/index.vue
+++ b/src/components/Transform/contract-futrue/index.vue
@@ -3,7 +3,7 @@
<div class="contact-futrue">
<div class="text-24 text-grey mb-6">{{ $t('交割时间') }}</div>
<ul class="flex flex-wrap w-full">
- <li v-for="(item, index) in initFutrue.para" v-if="initFutrue.para" :key="item.uuid"
+ <li v-for="(item, index) in paraList" :key="item.uuid"
class="h-24 flex items-center mb-6" @click="onSelect(item, index)">
<p class="w-24 h-full flex justify-center items-center text-22 flex-1"
:class="active === item.para_id ? 'bg-light-blue text-white' : 'delivery_left_tab_background textColor'">{{
@@ -29,6 +29,12 @@
}
}
},
+ computed: {
+ paraList() {
+ const para = this.initFutrue && this.initFutrue.para
+ return Array.isArray(para) ? para : []
+ }
+ },
data() {
return {
active: '',
@@ -36,8 +42,8 @@
}
},
created() {
- if (this.initFutrue.para.length > 0) {
- this.active = this.initFutrue.para[0].para_id || ''
+ if (this.paraList.length > 0) {
+ this.active = this.paraList[0].para_id || ''
this.$emit('paraId', { id: this.active, index: 0 })
}
},
diff --git a/src/components/Transform/contract-header/index.vue b/src/components/Transform/contract-header/index.vue
index 321d916..3d068af 100644
--- a/src/components/Transform/contract-header/index.vue
+++ b/src/components/Transform/contract-header/index.vue
@@ -139,8 +139,6 @@
}
},
created() {
- // this.coins = this.coinList.map(item => item.symbol)
- // console.log('this.coins', this.coins)
if (this.$route.query.type) {
this.queryType = this.$route.query.type
}
diff --git a/src/components/Transform/deliveryContract/position.vue b/src/components/Transform/deliveryContract/position.vue
index f6a1097..a13a92d 100644
--- a/src/components/Transform/deliveryContract/position.vue
+++ b/src/components/Transform/deliveryContract/position.vue
@@ -1,52 +1,52 @@
<template>
- <div id="#cryptos">
+ <div class="delivery-history-position">
<div class="position text-28">
<div class="position-padding" v-for="item in listData" :key="item.order_no">
- <div class="position-tag ">
+ <div class="position-tag">
<div class="position-tag-style" :class="item.direction === 'buy' ? 'green' : 'red'">
- {{ item.direction === 'buy' ? $t('开多') : $t('开空') }}</div>
+ {{ item.direction === 'buy' ? $t('开多') : $t('开空') }}
+ </div>
<div class="position-tag-title textColor">{{ item.name }} {{ $t('交割') }}</div>
<div class="position-tag-title2">{{ $t('全仓') }}</div>
- <img class="position-tag-img" src="@/assets/image/deliveryContract/Group1042.png" />
+ <img class="position-tag-img" src="@/assets/image/deliveryContract/Group1042.png" alt="" />
</div>
- <div class="position-div1">
- <span class="position-text1">{{ $t('数量') }}</span>
- <span class="position-text2 textColor">{{ item.volume }}</span>
+ <div class="position-row">
+ <span class="position-label">{{ $t('数量') }}</span>
+ <span class="position-value textColor">{{ item.volume }}</span>
</div>
- <div class="position-div1">
- <span class="position-text1">{{ $t('方向') }}</span>
- <span class="position-text2" :class="item.direction === 'buy' ? 'color-green' : 'color-red'">
- {{ item.direction === 'buy' ? $t('开多') : $t('开空') }}</span>
+ <div class="position-row">
+ <span class="position-label">{{ $t('方向') }}</span>
+ <span class="position-value" :class="item.direction === 'buy' ? 'color-green' : 'color-red'">
+ {{ item.direction === 'buy' ? $t('开多') : $t('开空') }}
+ </span>
</div>
- <div class="position-div1">
- <span class="position-text1">{{ $t('交割时间') }}</span>
- <span class="position-text2 textColor">{{ item.time_num + item.time_unit }}</span>
+ <div class="position-row">
+ <span class="position-label">{{ $t('交割时间') }}</span>
+ <span class="position-value textColor">{{ item.time_num + item.time_unit }}</span>
</div>
- <div class="position-div1">
- <span class="position-text1">{{ $t('购买价') }}( {{ routeType == 'cryptos' ? 'USDT' : 'USD' }})</span>
- <span class="position-text2 textColor">{{ item.open_price }}</span>
+ <div class="position-row">
+ <span class="position-label">{{ $t('购买价') }}({{ routeType == 'cryptos' ? 'USDT' : 'USD' }})</span>
+ <span class="position-value textColor">{{ item.open_price }}</span>
</div>
- <div class="position-div1">
- <span class="position-text1">{{ $t('结算价') }}( {{ routeType == 'cryptos' ? 'USDT' : 'USD' }})</span>
- <span class="position-text2 textColor">{{ item.close_price }}</span>
+ <div class="position-row">
+ <span class="position-label">{{ $t('结算价') }}({{ routeType == 'cryptos' ? 'USDT' : 'USD' }})</span>
+ <span class="position-value textColor">{{ item.close_price }}</span>
</div>
- <div class="position-div1">
- <span class="position-text1">{{ $t('盈亏') }}</span>
- <span class="position-text2" :class="item.profit > 0 ? 'color-green' : 'color-red'">
+ <div class="position-row">
+ <span class="position-label">{{ $t('盈亏') }}</span>
+ <span class="position-value" :class="item.profit > 0 ? 'color-green' : 'color-red'">
{{ item.profit > 0 ? '+' + item.profit : item.profit }}
</span>
</div>
- <div class="position-div1">
- <span class="position-text1">{{ $t('到期时间') }}</span>
- <span class="position-text2 textColor"> {{ dayjs(item.close_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
+ <div class="position-row">
+ <span class="position-label">{{ $t('到期时间') }}</span>
+ <span class="position-value textColor">{{ dayjs(item.close_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
</div>
- <div class="position-div1">
- <span class="position-text1">{{ $t('操作') }}</span>
- <span class="position-text2 colorMain" @click="onDetail(item)">{{ $t('详情') }}</span>
+ <div class="position-row">
+ <span class="position-label">{{ $t('操作') }}</span>
+ <span class="position-value colorMain" @click="onDetail(item)">{{ $t('详情') }}</span>
</div>
- <div style="margin-top: 33px;width: 100%;height: 1px;float: left;" class="bgDark"></div>
</div>
-
</div>
<van-popup v-model:show="show">
<popup-delivery showBtns :detailData="detailData" :key="detailData.order_no" @close="show = false" :disabled="true"
@@ -97,126 +97,100 @@
}
}
</script>
-<style lang="scss" scoped >
-#cryptos {
- font-size: 40px;
+<style lang="scss" scoped>
+@import '@/assets/css/variable.scss';
- // .van-popup {
- // position: fixed;
- // top: 30%;
- // z-index: 10000;
- // }
+.delivery-history-position {
+ width: 100%;
+ font-size: 1.75rem;
.position {
width: 100%;
- overflow: auto;
+ }
- .position-tab-flex {
- width: 100%;
- display: flex;
+ .position-padding {
+ padding: 2rem 0;
+ box-sizing: border-box;
+ width: 100%;
+ border-bottom: 2px solid $border_color;
- .position-tab {
- flex: 1;
- }
+ &:last-child {
+ border-bottom: none;
+ }
+ }
- .position-tab-icon {
- width: 38px;
- height: 38px;
- margin-right: 30px;
- margin-top: 22px;
- }
+ .position-tag {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 0.5rem 1rem;
+
+ .position-tag-style {
+ padding: 0.5rem 1.2rem;
+ font-size: 1.6rem;
+ font-weight: 500;
+ color: #fff;
+ border-radius: 8px;
}
- .position-padding {
- //border-bottom: 1px solid #F2F4F9;
- padding: 42px 0 0 0;
- box-sizing: border-box;
- width: 100%;
- overflow: auto;
-
- .position-tag {
- display: flex;
- align-items: center;
-
- .position-tag-style {
- padding: 11px 28px;
- margin-right: 22px;
- font-style: normal;
- font-weight: 400;
- font-size: 26.4981px;
- color: $main-btn-color;
- }
-
- .position-tag-title {
- font-style: normal;
- font-weight: 600;
- font-size: 30.9145px;
- margin-right: 13px;
- }
-
- .position-tag-title2 {
- font-style: normal;
- font-weight: 400;
- font-size: 30.9145px;
- color: $text_color5;
- }
-
- .position-tag-img {
- margin-left: 11px;
- width: 40px;
- height: 31px;
- }
- }
-
- .red {
- background: $red;
- border-radius: 6.6266px;
- }
-
- .green {
- background: $green;
- border-radius: 6.62453px;
- }
-
- .position-div1 {
- margin-top: 20px;
- width: 100%;
- float: left;
-
- .position-text1 {
- float: left;
- font-style: normal;
- font-weight: 400;
- font-size: 30px;
- color: $text_color5;
- }
-
- .position-text2 {
- float: right;
- font-style: normal;
- font-weight: 400;
- font-size: 30px;
- }
-
- .position-text3 {
- font-style: normal;
- font-weight: 400;
- font-size: 30px;
- }
- }
+ .position-tag-title {
+ font-weight: 600;
+ font-size: 1.9rem;
+ color: $text_color;
}
- .color-red {
- color: $red !important;
+ .position-tag-title2 {
+ font-size: 1.7rem;
+ color: $text_color5;
}
- .color-green {
- color: $green !important;
+ .position-tag-img {
+ margin-left: auto;
+ width: 2.5rem;
+ height: 2rem;
+ object-fit: contain;
+ }
+ }
+
+ .green {
+ background: $green;
+ }
+
+ .red {
+ background: $red;
+ }
+
+ .position-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 1rem;
+ min-height: 2.5rem;
+
+ .position-label {
+ font-size: 1.6rem;
+ color: $text_color5;
+ flex-shrink: 0;
}
- .color-blue {
- color: $color_main !important;
+ .position-value {
+ font-size: 1.7rem;
+ text-align: right;
+ word-break: break-all;
+ margin-left: 1rem;
}
}
+
+ .color-red {
+ color: $red !important;
+ }
+
+ .color-green {
+ color: $green !important;
+ }
+
+ .colorMain {
+ color: $color_main !important;
+ }
}
</style>
diff --git a/src/components/Transform/perpetual-open/amountSlider.vue b/src/components/Transform/perpetual-open/amountSlider.vue
index e31936e..4c29a53 100644
--- a/src/components/Transform/perpetual-open/amountSlider.vue
+++ b/src/components/Transform/perpetual-open/amountSlider.vue
@@ -3,15 +3,15 @@
<div class="slider-index">
<div class="amount-slider">
<div class="amount-slider-clickable">
- <!-- 本地报错 调试时候注释掉 yyhh-->
- <!-- <vue-slider @change="sliderAmountChange" class="mainBox" :marks="marks" v-model="sliderAmount"
- :hide-label="true" width="92%" tooltip="hover" :tooltip-formatter="'{value}%'"
- :railStyle="{ background: '#404040', height: '2px' }"
- :processStyle="{ background: '#266BFF', height: '2px' }">
- <template v-slot:step="{ active }">
- <div :class="['custom-step', { active }]"></div>
- </template>
- </vue-slider> -->
+ <!-- 本地报错 调试时候注释掉 yyhh-->
+ <vue-slider @change="sliderAmountChange" class="mainBox" :marks="marks" v-model="sliderAmount"
+ :hide-label="true" width="92%" tooltip="hover" :tooltip-formatter="'{value}%'"
+ :railStyle="{ background: '#404040', height: '2px' }"
+ :processStyle="{ background: '#266BFF', height: '2px' }">
+ <template v-slot:step="{ active }">
+ <div :class="['custom-step', { active }]"></div>
+ </template>
+ </vue-slider>
</div>
<div class="poecs">
<span>0%</span>
@@ -40,7 +40,7 @@
data() {
return {
amount: undefined, //用户输入的张数
- sliderAmount:0 , //滑块的数量
+ sliderAmount: 0, //滑块的数量
marks: (val) => val % 25 === 0,
};
},
@@ -123,5 +123,4 @@
width: 22%;
text-align: right;
}
-</style>
-
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/components/Transform/perpetual-open/index.vue b/src/components/Transform/perpetual-open/index.vue
index a7dd675..677c61f 100644
--- a/src/components/Transform/perpetual-open/index.vue
+++ b/src/components/Transform/perpetual-open/index.vue
@@ -3,7 +3,7 @@
<div id="cryptos">
<div class="perpetual-open">
<div class="flex pt-8">
- <div class="w-40 h-16 text-center rounded tabBackground textColor">{{ $t('全仓') }}</div>
+ <div class="w-40 h-16 flex items-center justify-center rounded tabBackground textColor">{{ $t('全仓') }}</div>
<div class="w-36 h-16 ml-8 rounded tabBackground textColor" v-if="selectIndex / 1 === 1">
<div @click="showOptions = !showOptions" style="height:100%; box-sizing: border-box"
class="relative word-30 pl-7 pr-2 w-36 h-16 tabBackground select-wrap flex justify-between items-center">
@@ -48,7 +48,7 @@
</div>
</div>
</template>
- <contract-futrue v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'" class="mb-5"
+ <contract-futrue v-if="selectIndex == 2 && Array.isArray(initFutrue.para) && initFutrue.para.length" class="mb-5"
:initFutrue="initFutrue" @paraId="onParaId" />
<div class="h-18 greyBg mb-8 flex pr-5 justify-center rounded-lg textColor items-center"
v-if="selectIndex == 1">
@@ -66,8 +66,8 @@
<input v-if="selectIndex == 1" :placeholder="$t('张数')" class="border-none greyBg text-center textColor"
:class="['HK-stocks', 'JP-stocks','UK-stocks','DE-stocks','BZ-stocks'].includes(queryType) ? 'full-input' : 'half-input'"
v-model="form.amount" type="number" @input="onInput" />
- <input v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'"
- :placeholder="($t('最少') + initFutrue && initFutrue.para ? $t('最小金额') + initFutrue.para[paraIndex].buy_min : '')"
+ <input v-if="selectIndex == 2 && Array.isArray(initFutrue.para) && initFutrue.para.length"
+ :placeholder="($t('最少') + (initFutrue && Array.isArray(initFutrue.para) && initFutrue.para[paraIndex] ? $t('最小金额') + initFutrue.para[paraIndex].buy_min : ''))"
class="border-none greyBg text-center textColor"
:class="['HK-stocks', 'JP-stocks','UK-stocks','DE-stocks','BZ-stocks'].includes(queryType) ? 'full-input' : 'half-input'"
v-model="form.amount" type="number" @input="onInput" />
@@ -106,7 +106,7 @@
<!-- 张数输入 -->
<amount-slider ref="sliderRef" :maxAmount="getVolumnByLever()" @getAmount="getAmount"></amount-slider>
</template>
- <template v-if="selectIndex == 1 && userInfo.token">
+ <template v-if="selectIndex == 1 && userInfo && userInfo.token">
<div class="flex justify-between mt-8">
<div class="text-grey">{{ $t('合约金额') }}</div>
<div class="textColor">{{ initData.amount * (form.amount / 1) * form.lever_rate }}
@@ -133,8 +133,8 @@
<div>{{ $t("可用") }}</div>
<div class="textColor">{{ initFutrue.amount }} {{ getCurrentUnit() }}</div>
</div>
- <div class="flex text-24 text-grey justify-between mt-5"
- v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'">
+ <div class="flex text-24 text-grey justify-between mt-5"
+ v-if="selectIndex == 2 && Array.isArray(initFutrue.para) && initFutrue.para.length">
<div>{{ $t("手续费") }}</div>
<div class="textColor">
{{
@@ -149,7 +149,7 @@
</div>
</div>
- <template v-if="userInfo.token">
+ <template v-if="userInfo && userInfo.token">
<template v-if="selectIndex == 1">
<div class="w-full h-20 bg-green flex text-white rounded-md mt-16 justify-center items-center"
v-if="currentType == 'long'" @click="throttleFn('long')">
@@ -178,7 +178,7 @@
</template>
<template v-if="selectIndex == 2">
<div class="w-full h-20 bg-green flex text-white rounded-md mt-2 justify-center items-center"
- @click="throttleFn('open')" v-if="userInfo.token">
+ @click="throttleFn('open')" v-if="userInfo && userInfo.token">
<div class="text-34 relative text-center" style="flex-grow: 1">
{{ $t("开多") }}
<span class="right-word text-22 text-center">{{
@@ -188,7 +188,7 @@
</div>
<div class="w-full h-20 bg-red flex text-white rounded-md mt-5 mb-2 justify-center items-center"
style="position: relative;" :class="{ 'mt-22': selectIndex == 2 }" @click="throttleFn('close')"
- v-if="userInfo.token">
+ v-if="userInfo && userInfo.token">
<div class="relative text-34 text-center" style="flex-grow: 1">
{{ $t("开空") }}
<span class="right-word text-22 text-center">{{
@@ -224,26 +224,28 @@
</div>
</div>
<div class="deep-div">
- <div v-if="showType == 0 || showType == 2" class="w-72 flex justify-between pt-1 text-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) || "--" }}
+ <template v-if="showType == 0 || showType == 2">
+ <div class="w-72 flex justify-between pt-1 text-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 class="text-right textColor" v-else>
- {{ item.amount || "--" }}
- </div>
- </div>
+ </template>
</div>
<div class="w-72 text-red pt-1 text-34 font-bold text-center">
{{ price || '--' }}
@@ -256,28 +258,28 @@
}}
</div>
<div class="deep-div">
-
-
- <div v-if="showType == 0 || showType == 1" class="w-72 flex justify-between pt-1 text-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 == 'shib'">
- {{ fixDate(item.amount, $i18n) || "--" }}
+ <template v-if="showType == 0 || showType == 1">
+ <div class="w-72 flex justify-between pt-1 text-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 == 'shib'">
+ {{ fixDate(item.amount, $i18n) || "--" }}
+ </div>
+ <div class="text-right textColor" v-else>
+ {{ item.amount || "--" }}
+ </div>
</div>
- <div class="text-right textColor" v-else>
- {{ item.amount || "--" }}
- </div>
- </div>
+ </template>
</div>
<div class="flex k-select-box">
<div class="mt-2 mb-2 select-box" style="position: relative">
@@ -341,6 +343,11 @@
[Popup.name]: Popup,
},
props: {
+ // 非路由场景（例如嵌入到其它页面）用于指定品种类型
+ queryTypeProp: {
+ type: String,
+ default: ''
+ },
greenData: { // 买单
type: Array,
default() {
@@ -452,10 +459,14 @@
}
},
symbol(val) {
- // this.getHomeList(val);
+ if (val) {
+ this.getHomeList(val);
+ }
},
'$route'(val) {
- this.getHomeList(val.params.symbol);
+ if (val && val.params && val.params.symbol) {
+ this.getHomeList(val.params.symbol);
+ }
},
initData(val) {
if (this.selectIndex / 1 === 1) {
@@ -538,7 +549,10 @@
}
},
created() {
- if (this.$route.query.type) {
+ // 优先使用外部传入的 type，其次才从路由读取
+ if (this.queryTypeProp) {
+ this.queryType = this.queryTypeProp
+ } else if (this.$route && this.$route.query && this.$route.query.type) {
this.queryType = this.$route.query.type
}
},
@@ -550,7 +564,8 @@
this.title = this.$t('市价');
},
mounted() {
- this.getHomeList(this.$route.params.symbol);
+ // trade/options 等页面没有 params.symbol，优先使用 props.symbol
+ this.getHomeList(this.symbol || (this.$route && this.$route.params && this.$route.params.symbol));
this.form.price = this.price
},
beforeUnmount() {
@@ -597,7 +612,9 @@
this.arryIsShow = !this.arryIsShow;
},
getHomeList(symbol) {
+ if (!symbol) return
_getHomeList(symbol).then((res) => {
+ if (!res || !res[0] || res[0].close == null) return
let numberText = res[0].close.toString();
let numberLength = numberText.substring(numberText.indexOf(".") + 1, numberText.length).length;
let arry = [];
@@ -780,7 +797,7 @@
this.order(type)
}, 500),
order(type) {
- if (!this.userInfo.token) {
+ if (!this.userInfo || !this.userInfo.token) {
this.$router.push('/login')
return false;
}
@@ -801,7 +818,7 @@
// this.form.direction = type
- this.form.symbol = this.$route.params.symbol
+ this.form.symbol = this.symbol || (this.$route && this.$route.params && this.$route.params.symbol) || ''
// this.form.direction = type === 'open' ? 'buy' : 'sell'
if (type == 'long' || type == 'open') {
this.form.direction = 'buy'
diff --git a/src/components/ex-input/index.vue b/src/components/ex-input/index.vue
index 70d8e1a..2b30fa2 100644
--- a/src/components/ex-input/index.vue
+++ b/src/components/ex-input/index.vue
@@ -1,6 +1,6 @@
<template>
<div class="inputCom">
- <span class="label textColor">{{ label }}</span>
+ <span class="label textColor1">{{ label }}</span>
<form class="iptbox inputBackground">
<div class="areaCode" v-if="area" @click="selectArea">
<span class="icon iti-flag" :class="icon"></span>
@@ -8,13 +8,13 @@
<img src="../../assets/image/login/more.png" alt="">
</div>
<!-- <p>{{ passwordType }} {{ props.value }}</p> -->
- <input autocomplete="off" name="username" class="inputBackground" v-if="typeText == 'password'" :type="passwordType"
- :placeholder="placeholderText" :value="modelValue" @input="onInput" :disabled="disabled" />
+ <input autocomplete="off" name="username" class="inputBackground" v-if="typeText == 'password'"
+ :type="passwordType" :placeholder="placeholderText" :value="modelValue" @input="onInput" :disabled="disabled" />
<div class="max-input" v-else>
- <input autocomplete="off" v-if="max > 0" :maxlength="max" class="inputBackground" type="text" :disabled="disabled"
- :placeholder="placeholderText" :value="modelValue" @input="onInput" />
- <input autocomplete="off" v-else class="inputBackground" type="text" :disabled="disabled"
- :placeholder="placeholderText" :value="modelValue" @input="onInput" />
+ <input autocomplete="off" v-if="max > 0" :maxlength="max" class="inputBackground" type="text"
+ :disabled="disabled" :placeholder="placeholderText" :value="modelValue" @input="onInput" />
+ <input autocomplete="off" v-else class="inputBackground" type="text" :disabled="disabled"
+ :placeholder="placeholderText" :value="modelValue" @input="onInput" />
</div>
<div class="rightCon">
<div class="closeBox" v-if="clearBtn" @click="clear"><img src="../../assets/image/login/clear.png" alt="" />
@@ -111,34 +111,35 @@
<style lang="scss" scoped>
@import "@/views/authentication/components/intl.css";
-.textColor{
+.textColor {
color: $text_color;
}
+
.inputCom {
color: $text_color;
- padding-bottom: 22px;
- font-size: 14px;
+ padding-bottom: 2.75rem;
+ font-size: 2rem;
.iptbox {
- height: 44px;
- margin-top: 9px;
- padding: 0 11px;
+ height: 6.25rem;
+ margin-top: 1.125rem;
+ padding: 0 1.375rem;
display: flex;
justify-content: space-between;
align-items: center;
- border-radius: 3px;
+ border-radius: 0.75rem;
}
.areaCode {
- width: 100px;
+ width: 12.5rem;
display: flex;
align-items: center;
- padding-left: 10px;
+ padding-left: 1.25rem;
justify-content: space-between;
height: 100%;
img {
- width: 10px;
+ width: 1.25rem;
}
}
@@ -146,7 +147,7 @@
flex: 1;
height: 100%;
border: none;
- padding-left: 10px;
+ padding-left: 1.25rem;
color: $text_color;
}
@@ -156,8 +157,8 @@
.closeBox,
.eyeBox {
- width: 17px;
- height: 17px;
+ width: 2.125rem;
+ height: 2.125rem;
img {
width: 100%;
@@ -166,18 +167,18 @@
}
.eyeBox {
- margin-left: 14px;
+ margin-left: 1.75rem;
}
}
.tips {
- font-size: 13px;
+ font-size: 1.625rem;
color: $text_color1;
- margin-top: 9px;
+ margin-top: 1.125rem;
}
input:-webkit-autofill {
- -webkit-box-shadow: 0 0 0 200px $light-grey inset;
+ -webkit-box-shadow: 0 0 0 25rem $light-grey inset;
}
input::-webkit-input-placeholder {
@@ -188,9 +189,11 @@
transform: scale(1.3);
display: inline-block;
}
-.max-input{
+
+.max-input {
width: 100%;
- input{
+
+ input {
width: 100%;
}
}
diff --git a/src/components/fx-footer/index.vue b/src/components/fx-footer/index.vue
index 40f1887..a383518 100644
--- a/src/components/fx-footer/index.vue
+++ b/src/components/fx-footer/index.vue
@@ -1,159 +1,133 @@
<template>
<div class="relative z-30 footer">
<van-tabbar route v-model="active" active-color="#92D1FF" @change="changeIndex" fixed safe-area-inset-bottom>
- <!-- <van-tabbar-item name="optional" to="/optional">
- <span :class="[active === 'optional' ? 'active' : '']">{{ $t("Optional") }}</span>
- <template #icon="props">
- <img :src="active == 'optional' ? icon.optional.active : icon.optional.inactive" alt="optional" />
+ <van-tabbar-item name="home" to="/home">
+ <template #icon>
+ <img :src="active == 'home' ? icon.home.active : icon.home.inactive" alt="home" />
</template>
- </van-tabbar-item> -->
- <van-tabbar-item name="quotes" to="/quotes/index?tabActive=1">
- <span :class="[active === 'quotes' ? 'active' : '']">{{ $t("首页") }}</span>
+ </van-tabbar-item>
+
+ <van-tabbar-item name="quotes" to="/quotes/market">
<template #icon>
<img :src="active == 'quotes' ? icon.quotes.active : icon.quotes.inactive" alt="quotes" />
</template>
</van-tabbar-item>
+
+ <van-tabbar-item name="options" to="/trade/options">
+ <template #icon>
+ <img :src="active == 'options' ? icon.options.active : icon.options.inactive" alt="options" />
+ </template>
+ </van-tabbar-item>
+
+ <van-tabbar-item name="fund" to="/cryptos/fund">
+ <template #icon>
+ <img :src="active == 'fund' ? icon.fund.active : icon.fund.inactive" alt="fund" />
+ </template>
+ </van-tabbar-item>
+
+ <van-tabbar-item name="personal" to="/personal">
+ <template #icon>
+ <img :src="active == 'personal' ? icon.personal.active : icon.personal.inactive" alt="personal" />
+ </template>
+ </van-tabbar-item>
+
+ <!-- <van-tabbar-item name="quotes" to="/quotes/index?tabActive=1">
+ <template #icon>
+ <img :src="active == 'quotes' ? icon.quotes.active : icon.quotes.inactive" alt="quotes" />
+ </template>
+ </van-tabbar-item>
+
<van-tabbar-item name="trade" to="/trade">
- <span :class="[active === 'trade' ? 'active' : '']">{{ $t("trade") }}</span>
<template #icon>
<img :src="active == 'trade' ? icon.trade.active : icon.trade.inactive" alt="trade" />
</template>
</van-tabbar-item>
- <!-- <van-tabbar-item name="funds" to="/funds"> -->
- <!-- <span :class="[active === 'funds' ? 'active' : '']">{{ $t('资金') }}</span> -->
- <!-- <template #icon="props"> -->
- <!-- <img :src="props.active ? icon.funds.active : icon.funds.inactive" alt="funds" /> -->
- <!-- </template> -->
- <!-- </van-tabbar-item> -->
- <!-- <van-tabbar-item name="news" to="/news">
- <span :class="[active === 'news' ? 'active' : '']">{{ $t("news") }}</span>
- <template #icon>
- <img :src="active == 'news' ? icon.news.active : icon.news.inactive" alt="news" />
- </template>
- </van-tabbar-item> -->
- <!-- <van-tabbar-item name="trade" to="/exchange">
- <span>{{ $t('trade') }}</span>
- <template #icon="props">
- <img :src="props.active ? icon.trade.active : icon.trade.inactive" alt="exchange"/>
- </template>
- </van-tabbar-item> -->
-
- <van-tabbar-item name="personal" to="/personal">
- <span :class="[active === 'personal' ? 'active' : '']">{{ $t('资产') }}</span>
- <template #icon="props">
- <img :src="props.active ? icon.personal.active : icon.personal.inactive" alt="personal" />
- </template>
- </van-tabbar-item>
<van-tabbar-item name="mine" to="/my">
- <span :class="[active === 'mine' ? 'active' : '']">{{ $t("my") }}</span>
<template #icon>
<img :src="active == 'mine' ? icon.mine.active : icon.mine.inactive" alt="mine" />
</template>
- </van-tabbar-item>
+ </van-tabbar-item> -->
</van-tabbar>
+
+ <!-- 全局悬浮客服按钮 -->
+ <div class="floating-customer-service" @click="$router.push('/customerService')">
+ <img src="@/assets/image/customer.png" alt="customer service" />
+ </div>
</div>
</template>
<script setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";
import { useQuotesStore } from "@/store/quotes.store.js";
import { useI18n } from "vue-i18n";
-import { useRoute } from "vue-router";
-import { watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
import { themeStore } from "@/store/theme";
-const thStore = themeStore();
+
+const router = useRouter();
const { t } = useI18n();
-const active = ref("home");
const route = useRoute();
-if (route.path == "/trade/index") {
- active.value = "trade";
-} else if (route.path.indexOf("/quotes") != -1) {
- active.value = "quotes";
-} else if (route.path == "/news/index") {
- active.value = "news";
-} else if (route.path == "/my/index") {
- active.value = "mine";
-} else if (route.path == "/optional/index") {
- active.value = "optional";
-} else if (route.path == "/funds/index") {
- active.value = "funds";
+
+/** 根据当前 path 自动判断选中的 tab name */
+function getActiveFromPath(path) {
+ const p = path.replace(/\/$/, "") || "/";
+ if (p === "/home") return "home";
+ if (p === "/trade/options" || p.startsWith("/trade/options")) return "options";
+ if (p === "/trade/index" || p === "/trade") return "trade";
+ if (p.startsWith("/quotes")) return "quotes";
+ if (p.startsWith("/cryptos/fund")) return "fund";
+ if (p.startsWith("/personal") || p === "/personal/index") return "personal";
+ if (p === "/news/index") return "news";
+ if (p.startsWith("/my") || p === "/my/index") return "mine";
+ if (p.startsWith("/optional")) return "optional";
+ if (p.startsWith("/funds")) return "funds";
+ return "home";
}
-let quotesStore = useQuotesStore();
+
+const active = ref(getActiveFromPath(route.path));
watch(
() => route.path,
- (nv) => {
- if (route.path == "/trade/index") {
- active.value = "trade";
- } else if (route.path.indexOf("/quotes") != -1) {
- active.value = "quotes";
- } else if (route.path == "/news/index") {
- active.value = "news";
- } else if (route.path == "/my/index") {
- active.value = "mine";
- } else if (route.path == "/optional/index") {
- active.value = "optional";
- } else if (route.path == "/funds/index") {
- active.value = "funds";
- }
- }
+ (path) => {
+ active.value = getActiveFromPath(path);
+ },
+ { immediate: false }
);
-// 底部列表
+
+let quotesStore = useQuotesStore();
+
+// 底部图标列表
const icon = {
- optional: {
- active: new URL(
- "@/assets/theme/dark/image/footer/optional-active.png",
- import.meta.url
- ),
- inactive: new URL(
- `../../assets/theme/${thStore.theme}/image/footer/optional.png`,
- import.meta.url
- ),
+ home: {
+ active: new URL("@/assets/imgs/footer/ft_1_a.png", import.meta.url),
+ inactive: new URL(`@/assets/imgs/footer/ft_1.png`, import.meta.url),
},
quotes: {
- active: new URL(
- "@/assets/theme/dark/image/footer/quotes-active.png",
- import.meta.url
- ),
- inactive: new URL(
- `../../assets/theme/${thStore.theme}/image/footer/quotes.png`,
- import.meta.url
- ),
+ active: new URL("@/assets/imgs/footer/ft_2_a.png", import.meta.url),
+ inactive: new URL(`@/assets/imgs/footer/ft_2.png`, import.meta.url),
},
- news: {
- active: new URL("@/assets/theme/dark/image/footer/news-active.png", import.meta.url),
- inactive: new URL(
- `../../assets/theme/${thStore.theme}/image/footer/news.png`,
- import.meta.url
- ),
+ options: {
+ active: new URL("@/assets/imgs/footer/ft_3_a.png", import.meta.url),
+ inactive: new URL(`@/assets/imgs/footer/ft_3.png`, import.meta.url),
+ },
+ fund: {
+ active: new URL("@/assets/imgs/footer/ft_4_a.png", import.meta.url),
+ inactive: new URL("@/assets/imgs/footer/ft_4.png", import.meta.url),
},
trade: {
- active: new URL("@/assets/theme/dark/image/footer/trade-active.png", import.meta.url),
- inactive: new URL(
- `../../assets/theme/${thStore.theme}/image/footer/trade.png`,
- import.meta.url
- ),
- },
- funds: {
- active: new URL('@/assets/theme/dark/image/footer/funds-active.png', import.meta.url),
- inactive: new URL(`../../assets/theme/${thStore.theme}/image/footer/funds.png`, import.meta.url),
+ active: new URL("@/assets/imgs/footer/ft_2_a.png", import.meta.url),
+ inactive: new URL(`@/assets/imgs/footer/ft_2.png`, import.meta.url),
},
mine: {
- active: new URL("@/assets/theme/dark/image/footer/menu-active.png", import.meta.url),
- inactive: new URL(
- `../../assets/theme/${thStore.theme}/image/footer/menu.png`,
- import.meta.url
- ),
+ active: new URL("@/assets/imgs/footer/ft_3_a.png", import.meta.url),
+ inactive: new URL(`@/assets/imgs/footer/ft_3.png`, import.meta.url),
},
personal: {
- active: new URL("@/assets/theme/dark/image/footer/funds-active.png", import.meta.url),
- inactive: new URL(
- `../../assets/theme/${thStore.theme}/image/footer/funds.png`,
- import.meta.url
- ),
+ active: new URL("@/assets/imgs/footer/ft_5_a.png", import.meta.url),
+ inactive: new URL(`@/assets/imgs/footer/ft_5.png`, import.meta.url),
},
};
+
const changeIndex = (index) => {
// console.log(index)
};
@@ -161,23 +135,28 @@
<style lang="scss" scoped>
:deep(.van-tabbar-item__text) {
- font-size: 12px;
+ font-size: 1.5rem;
color: $footer_color !important;
}
:deep(.van-tabbar-item--active) {
background-color: $footer_bg;
color: $color_main !important;
+ border-radius: 1.6rem;
}
.van-tabbar--fixed {
z-index: 10;
- padding-bottom: constant(safe-area-inset-bottom);
- padding-bottom: env(safe-area-inset-bottom);
+ position: fixed !important;
+ bottom: 3rem !important;
+ left: 2.4rem !important;
+ right: 2.4rem !important;
+ width: auto !important;
background-color: $footer_bg;
- box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
+ box-shadow: 0rem 1.6rem 4.8rem 0.8rem rgba(24, 11, 0, 0.14);
border-top: 1px solid rgba(118, 128, 143, 0.1);
- backdrop-filter: blur(10px);
+ backdrop-filter: blur(1.25rem);
+ border-radius: 1.6rem;
}
.van-hairline--top-bottom::after {
@@ -194,8 +173,40 @@
.footer {
img {
- width: 20px;
- height: 20px;
+ width: 3.5rem;
+ height: 3.5rem;
+ }
+}
+
+/* 全局悬浮客服按钮 */
+.floating-customer-service {
+ position: fixed;
+ top: 60%;
+ left: 83%;
+ width: 6.5rem;
+ height: 6.5rem;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ box-shadow: 0 0.25rem 1.5rem rgba(146, 209, 255, 0.4);
+ z-index: 998;
+ transition: all 0.3s ease;
+
+ &:hover {
+ transform: scale(1.1);
+ box-shadow: 0 0.5rem 2rem rgba(146, 209, 255, 0.6);
+ }
+
+ &:active {
+ transform: scale(0.95);
+ }
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
}
}
</style>
diff --git a/src/config/index.js b/src/config/index.js
index 3d99de0..49687ca 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -43,12 +43,12 @@
// const ENV_DEV = '127.0.0.1' // dev
// const ENV_DEV = '127.0.0.1:8086' // dev
-const ENV_DEV = 'api.crypt.bond' // dev
+const ENV_DEV = 'api.eledrink.com' // dev
// const ENV_PRO = window.location.hostname // 接口域名跟随 H5
// const ENV_PRO = "127.0.0.1"
// const ENV_PRO = "127.0.0.1:8086"
-const ENV_PRO = "api.crypt.bond"
+const ENV_PRO = "api.eledrink.com"
// 避免打包出错务必把 app域名的注释要放在在本地ENV_PRO的下面
// const ENV_PRO = 'foilwm.com' // app域名
@@ -66,7 +66,7 @@
}
export const BASE_URL = base_url
export const WS_URL = ws_url
-export const IMG_PATH = 'https://api.crypt.bond'
+export const IMG_PATH = 'https://img.eledrink.com'
export const HOST_URL = host_url
export default {
diff --git a/src/i18n/modules/CN.js b/src/i18n/modules/CN.js
index 5866a71..cce30ed 100644
--- a/src/i18n/modules/CN.js
+++ b/src/i18n/modules/CN.js
@@ -25,6 +25,7 @@
register: "註冊",
email: "郵箱",
phoneNum: "手機號",
+ mobile: "手機",
entryEmail: "請輸入郵箱",
entryPhone: "請輸入手機號",
entryAccount: "請輸入賬號",
@@ -35,6 +36,7 @@
invitCode: "邀請碼(選填)",
entryInvitCode: "請輸入邀請碼",
readAgree: "我已閱讀並同意",
+ agree: "同意",
serviceConf: "服務條款",
hasAccount: "已有賬號?",
goLogin: "去登錄",
@@ -65,6 +67,11 @@
entryVerifyTips: "請輸入6位驗證碼",
forgetPassword: "忘記密碼?",
login: "登錄",
+ letsStartLogin: "開始登錄吧！",
+ loginByWallet: "錢包登錄",
+ forgot: "忘記",
+ verifyCodeLabel: "驗證碼",
+ codeSent: "已發送",
noAccount: "還沒有賬號",
bindSuccess: "綁定成功",
setFundPassword: "設置資金密碼",
@@ -1261,6 +1268,7 @@
"加载中": "加載中",
"今日（日收益）": "今日（日收益）",
"托管订单": "託管訂單",
+ "我的投资": "我的投資",
"矿机规则": "礦機規則",
"剩余天数": "剩余天數",
"已获收益": "已獲收益",
@@ -1576,6 +1584,10 @@
"审核未通过,请进行身份KYC认证": "審核未通過,請進行身份KYC認證",
"审核中，前往身份KYC认证?": "審核中，前往身份KYC認證?",
"合约交易": "合約交易",
+ "期权交易": "期權交易",
+ "选择周期": "選擇週期",
+ "选择类型": "選擇類型",
+ "搜索交易种类": "搜索交易種類",
"矿池大厅": "礦池大廳",
"邀请推广": "邀請推廣",
"身份认证": "身份認證",
@@ -2003,6 +2015,8 @@
"法币交易": "法幣交易",
"币币交易": "幣幣交易",
"账变记录": "賬變記錄",
+ "信用分": "信用分",
+ "评估时间": "評估時間",
"选择账户类型": "選擇賬戶類型",
"查询": "查詢",
"永续合约": "永續合約",
@@ -2172,6 +2186,14 @@
"昨日收益": "昨日收益",
"托管中总订单": "託管中總訂單",
"托管金额": "託管金額",
+ "AI理财": "AI理財",
+ "收益率": "收益率",
+ "认购价格": "認購價格",
+ "立即参与": "立即參與",
+ "总投入": "總投入",
+ "累计收入": "累計收入",
+ "每日收益": "每日收益",
+ "前往平台观看": "前往平台觀看",
"赎回成功": "贖回成功",
"利息": "利息",
"利息数量": "利息數量",
@@ -2298,6 +2320,9 @@
"审核中": "審核中",
"开": "開",
"多": "多",
+ "兑换": "兌換",
+ "模拟账户": "模擬賬戶",
+ "真实账户": "真實賬戶",
"平": "平",
"空": "空",
"币种简介": "幣種簡介",
@@ -2910,4 +2935,30 @@
"三级返佣": "三級返傭",
"币种手续费值不合理": "幣種手續費值不合理",
"首日涨幅": "首日漲幅",
+ "home.heroTitle": "您可以信賴的經濟人?",
+ "home.heroDesc": "卓越的客戶服務、透明的定價和最先進的平台方面建立了卓越的聲譽",
+ "home.loan": "貸款",
+ "home.aboutDesc": "我們創建了技術領先且人性化的交易平台, 為您提供貼心完善的交易體驗",
+ "home.feature1": "直觀易用的界面",
+ "home.feature2": "定期提供 3,000多個市場的實時更新和價格警報",
+ "home.feature3": "各種技術指標分析工具和高級圖表",
+ "home.feature4": "套期保值模式和風險管理工具",
+ "home.news": "新聞",
+ "home.tradeGlobalMarkets": "交易全球金融市場",
+ "home.downloadDesc": "支持桌面端與移動端多種方式,您可隨時隨地開展交易",
+ "home.downloadNow": "立即下載",
+ "home.company": "公司",
+ "home.teamIntro": "團隊介紹",
+ "home.emailSupport": "郵箱聯繫支持",
+ "home.policy": "政策",
+ "home.userAgreement": "用戶服務協議",
+ "home.riskDisclosure": "風險提示",
+ "home.amlPolicy": "反洗錢政策",
+ "home.regulatoryLicense": "監管許可證",
+ "home.statement": "聲明",
+ "home.privacyStatement": "隱私聲明",
+ "home.heroTitle1": "一應俱全的金融交易體驗",
+ "home.heroFeatures1": "強大平台,超低點差,快速執行,專屬支持",
+ "home.heroTitle2": "頂尖交易技術",
+ "home.heroDesc2": "通過我們的先進交易系統,您可以精準把握市場動態,高效執行每一筆交易!",
}
diff --git a/src/i18n/modules/Italy.js b/src/i18n/modules/Italy.js
index e5c8bbc..baff1d1 100644
--- a/src/i18n/modules/Italy.js
+++ b/src/i18n/modules/Italy.js
@@ -25,6 +25,7 @@
register: "Registrati",
email: "e-mail",
phoneNum: "Numero di cellulare",
+ mobile: "Mobile",
entryEmail: "Inserisci la tua email",
entryPhone: "Inserisci il tuo numero di telefono",
entryAccount: "Inserisci il numero di conto",
@@ -35,6 +36,7 @@
invitCode: "Codice di invito (facoltativo)",
entryInvitCode: "Inserisci il codice di invito",
readAgree: "Ho letto e sono d'accordo",
+ agree: "Accetto",
serviceConf: "Termini di servizio",
hasAccount: "Hai già un account?",
goLogin: "Vai al login",
@@ -65,6 +67,11 @@
entryVerifyTips: "Inserisci un codice di verifica a 6 cifre",
forgetPassword: "Hai dimenticato la password?",
login: "Entra",
+ letsStartLogin: "Iniziamo con il login!",
+ loginByWallet: "Accedi con il portafoglio",
+ forgot: "Dimenticato",
+ verifyCodeLabel: "Codice di verifica",
+ codeSent: "Inviato",
noAccount: "Ancora nessun account",
bindSuccess: "Bind riuscito",
setFundPassword: "Imposta la password del fondo",
@@ -1261,6 +1268,7 @@
"加载中": "Loading",
"今日（日收益）": "Oggi (guadagni giornalieri)",
"托管订单": "Ordine di deposito a garanzia",
+ "我的投资": "Il mio investimento",
"矿机规则": "Regole del minatore",
"剩余天数": "Il numero rimanente di giorni",
"已获收益": "reddito guadagnato",
@@ -1576,6 +1584,10 @@
"审核未通过,请进行身份KYC认证": "Verifica fallita, si prega di eseguire la verifica KYC.",
"审核中，前往身份KYC认证?": "In fase di revisione, passare alla verifica KYC?",
"合约交易": "Contratto",
+ "期权交易": "Trading di opzioni",
+ "选择周期": "Seleziona periodo",
+ "选择类型": "Seleziona tipo",
+ "搜索交易种类": "Cerca tipi di trading",
"矿池大厅": "Pool minerario",
"邀请推广": "Programma di riferimento",
"身份认证": "Autenticazione",
@@ -2172,6 +2184,14 @@
"昨日收益": "Ricavi di ieri",
"托管中总订单": "Tutte le partecipazioni",
"托管金额": "Titoli Importo",
+ "AI理财": "AI Gestione patrimoniale",
+ "收益率": "Tasso di rendimento",
+ "认购价格": "Prezzo di sottoscrizione",
+ "立即参与": "Partecipa ora",
+ "总投入": "Investimento totale",
+ "累计收入": "Entrate accumulate",
+ "每日收益": "Profitto giornaliero",
+ "前往平台观看": "Guarda sulla piattaforma",
"赎回成功": "Redemption succeeded",
"利息": "Interesse",
"利息数量": "Importo degli interessi",
@@ -2298,6 +2318,9 @@
"审核中": "In fase di revisione",
"开": "Aperto",
"多": " Lungo",
+ "兑换": "Scambio",
+ "模拟账户": "Conto demo",
+ "真实账户": "Conto reale",
"平": "Chiudere",
"空": "Breve",
"币种简介": "Introduzione alla valuta",
@@ -2910,4 +2933,30 @@
"三级返佣": "Sconto di terzo livello",
"币种手续费值不合理": "La commissione per la gestione della valuta è irragionevole",
"首日涨幅": "Aumento del primo giorno",
+ "home.heroTitle": "Un broker di cui puoi fidarti?",
+ "home.heroDesc": "Servizio clienti eccellente, prezzi trasparenti e la piattaforma più avanzata hanno stabilito un'eccellente reputazione",
+ "home.loan": "Prestito",
+ "home.aboutDesc": "Abbiamo creato una piattaforma di trading tecnologicamente all'avanguardia e user-friendly per offrirti un'esperienza di trading attenta e completa",
+ "home.feature1": "Interfaccia intuitiva e facile da usare",
+ "home.feature2": "Fornire regolarmente aggiornamenti in tempo reale e avvisi sui prezzi per oltre 3.000 mercati",
+ "home.feature3": "Vari indicatori tecnici, strumenti di analisi e grafici avanzati",
+ "home.feature4": "Modalità di copertura e strumenti di gestione del rischio",
+ "home.news": "Notizie",
+ "home.tradeGlobalMarkets": "Operare sui mercati finanziari globali",
+ "home.downloadDesc": "Supporta vari metodi su desktop e mobile, permettendoti di operare in qualsiasi momento e ovunque",
+ "home.downloadNow": "Scarica ora",
+ "home.company": "Azienda",
+ "home.teamIntro": "Presentazione del team",
+ "home.emailSupport": "Supporto contatto email",
+ "home.policy": "Politica",
+ "home.userAgreement": "Accordo di servizio utente",
+ "home.riskDisclosure": "Divulgazione del rischio",
+ "home.amlPolicy": "Politica antiriciclaggio",
+ "home.regulatoryLicense": "Licenza normativa",
+ "home.statement": "Dichiarazione",
+ "home.privacyStatement": "Informativa sulla privacy",
+ "home.heroTitle1": "Un'esperienza completa di trading finanziario",
+ "home.heroFeatures1": "Piattaforma potente, spread ultra-bassi, esecuzione rapida, supporto esclusivo",
+ "home.heroTitle2": "Tecnologia di trading all'avanguardia",
+ "home.heroDesc2": "Attraverso il nostro sistema di trading avanzato, puoi cogliere con precisione le dinamiche di mercato ed eseguire ogni transazione in modo efficiente!",
}
diff --git a/src/i18n/modules/Japanese.js b/src/i18n/modules/Japanese.js
index 67f42d9..984bd40 100644
--- a/src/i18n/modules/Japanese.js
+++ b/src/i18n/modules/Japanese.js
@@ -25,6 +25,7 @@
register: "登録",
email: "Email",
phoneNum: "携帯電話番号",
+ mobile: "モバイル",
entryEmail: "メールアドレスを入力してください、",
entryPhone: "携帯電話番号を入力してください",
entryAccount: "アカウントを入力してください、",
@@ -35,6 +36,7 @@
invitCode: "招待状、",
entryInvitCode: "招待状を入力してください、",
readAgree: "読んで同意しました",
+ agree: "同意",
serviceConf: "サービス条件",
hasAccount: "アカウントはすでにありますか？",
goLogin: "ログインしに行く",
@@ -65,6 +67,11 @@
entryVerifyTips: "Please enter the 6-digit verification code",
forgetPassword: "パスワードを忘れましたか？",
login: "ログイン",
+ letsStartLogin: "ログインを始めましょう！",
+ loginByWallet: "ウォレットでログイン",
+ forgot: "忘れた",
+ verifyCodeLabel: "確認コード",
+ codeSent: "送信済み",
noAccount: "まだアカウントがありません",
bindSuccess: "バインド成功",
setFundPassword: "資金パスワードの設定",
@@ -1261,6 +1268,7 @@
"加载中": "ローディング中",
"今日（日收益）": "今日（毎日の収益）",
"托管订单": "エスクロー注文",
+ "我的投资": "マイ投資",
"矿机规则": "マイナールール",
"剩余天数": "残り日数",
"已获收益": "獲得した利益",
@@ -1576,6 +1584,10 @@
"审核未通过,请进行身份KYC认证": "Verification failed, please perform KYC vertification.",
"审核中，前往身份KYC认证?": "Under review, go to KYC verification?",
"合约交易": "契約取引",
+ "期权交易": "オプション取引",
+ "选择周期": "期間を選択",
+ "选择类型": "タイプを選択",
+ "搜索交易种类": "取引種類を検索",
"矿池大厅": "Mining Pool",
"邀请推广": "プロモーションへの招待",
"身份认证": "認証",
@@ -2172,6 +2184,14 @@
"昨日收益": "昨日の収益",
"托管中总订单": "マネージドトータルオーダー",
"托管金额": "エスクロー金額",
+ "AI理财": "AI資産運用",
+ "收益率": "収益率",
+ "认购价格": "申込価格",
+ "立即参与": "今すぐ参加",
+ "总投入": "総投入",
+ "累计收入": "累計収入",
+ "每日收益": "毎日収益",
+ "前往平台观看": "プラットフォームで視聴",
"赎回成功": "引き換えが成功しました",
"利息": "利息",
"利息数量": "利息額",
@@ -2298,6 +2318,9 @@
"审核中": "審査中",
"开": "オープン",
"多": " ロング",
+ "兑换": "両替",
+ "模拟账户": "デモ口座",
+ "真实账户": "リアル口座",
"平": "クローズ",
"空": " ショート",
"币种简介": "通貨の紹介",
@@ -2910,4 +2933,30 @@
"三级返佣": "レベル 3 リベート",
"币种手续费值不合理": "通貨手数料が法外です",
"首日涨幅": "初日の増加",
+ "home.heroTitle": "信頼できるブローカー？",
+ "home.heroDesc": "優れたカスタマーサービス、透明な価格設定、そして最も先進的なプラットフォームが優れた評判を確立しています",
+ "home.loan": "ローン",
+ "home.aboutDesc": "技術的に最先端で使いやすい取引プラットフォームを作成し、思いやりのある完全な取引体験を提供します",
+ "home.feature1": "直感的で使いやすいインターフェース",
+ "home.feature2": "3,000以上の市場のリアルタイム更新と価格アラートを定期的に提供",
+ "home.feature3": "さまざまなテクニカル指標、分析ツール、高度なチャート",
+ "home.feature4": "ヘッジモードとリスク管理ツール",
+ "home.news": "ニュース",
+ "home.tradeGlobalMarkets": "グローバル金融市場で取引",
+ "home.downloadDesc": "デスクトップとモバイルでさまざまな方法をサポートし、いつでもどこでも取引できます",
+ "home.downloadNow": "今すぐダウンロード",
+ "home.company": "会社",
+ "home.teamIntro": "チーム紹介",
+ "home.emailSupport": "メール連絡サポート",
+ "home.policy": "ポリシー",
+ "home.userAgreement": "ユーザーサービス契約",
+ "home.riskDisclosure": "リスク開示",
+ "home.amlPolicy": "マネーロンダリング防止ポリシー",
+ "home.regulatoryLicense": "規制ライセンス",
+ "home.statement": "声明",
+ "home.privacyStatement": "プライバシー声明",
+ "home.heroTitle1": "包括的な金融取引体験",
+ "home.heroFeatures1": "強力なプラットフォーム、超低スプレッド、高速実行、専属サポート",
+ "home.heroTitle2": "最先端の取引技術",
+ "home.heroDesc2": "当社の高度な取引システムを通じて、市場の動きを正確に把握し、すべての取引を効率的に実行できます！",
}
diff --git a/src/i18n/modules/Korean.js b/src/i18n/modules/Korean.js
index b326c77..42006aa 100644
--- a/src/i18n/modules/Korean.js
+++ b/src/i18n/modules/Korean.js
@@ -25,6 +25,7 @@
register: "등록하다",
email: "우편",
phoneNum: "전화 번호",
+ mobile: "모바일",
entryEmail: "이메일을 입력해주세요",
entryPhone: "전화번호를 입력하세요.",
entryAccount: "계정을 입력하십시오",
@@ -35,6 +36,7 @@
invitCode: "초대 코드(선택사항)",
entryInvitCode: "초대코드를 입력해주세요",
readAgree: "읽었으며 동의합니다",
+ agree: "동의",
serviceConf: "서비스 약관",
hasAccount: "이미 계정이 있습니까?",
goLogin: "로그인하기",
@@ -65,6 +67,11 @@
entryVerifyTips: "인증번호 6자리를 입력해주세요",
forgetPassword: "비밀번호를 잊으 셨나요?",
login: "로그인",
+ letsStartLogin: "로그인을 시작해봐요!",
+ loginByWallet: "지갑으로 로그인",
+ forgot: "잊었나요",
+ verifyCodeLabel: "인증 코드",
+ codeSent: "전송됨",
noAccount: "아직 계정이 없습니다",
bindSuccess: "성공적으로 묶다",
setFundPassword: "펀드 비밀번호 설정",
@@ -1261,6 +1268,7 @@
"加载中": "로드 중 ",
"今日（日收益）": "오늘(일 수익) ",
"托管订单": "주문 맡기 ",
+ "我的投资": "내 투자",
"矿机规则": "광기 규칙",
"剩余天数": "남은 일수예요 ",
"已获收益": "수익을 얻었습니다 ",
@@ -1576,6 +1584,10 @@
"审核未通过,请进行身份KYC认证": "심사가 통과되지 않았으니 들어오십시오. KYC 인증한다 ",
"审核中，前往身份KYC认证?": "신분 확인 중. KYC 인증이요? ",
"合约交易": "계약 거래",
+ "期权交易": "옵션 거래",
+ "选择周期": "주기 선택",
+ "选择类型": "유형 선택",
+ "搜索交易种类": "거래 종류 검색",
"矿池大厅": "광지홀 ",
"邀请推广": "초대 프로모션 ",
"身份认证": "본인인증한다 ",
@@ -2172,6 +2184,14 @@
"昨日收益": "어제 수익 ",
"托管中总订单": "주문한 총 주문. ",
"托管金额": "예탁금액 ",
+ "AI理财": "AI 재산 관리",
+ "收益率": "수익률",
+ "认购价格": "청약 가격",
+ "立即参与": "지금 참여",
+ "总投入": "총 투자",
+ "累计收入": "누적 수입",
+ "每日收益": "일일 수익",
+ "前往平台观看": "플랫폼에서 시청",
"赎回成功": "환매 성공했습니다 ",
"利息": "이자 ",
"利息数量": "이자 수량 ",
@@ -2298,6 +2318,9 @@
"审核中": "심사 중 ",
"开": "시 ",
"多": "많이 ",
+ "兑换": "환전",
+ "模拟账户": "데모 계정",
+ "真实账户": "실계정",
"平": "핑 ",
"空": "빈 ",
"币种简介": "통화 소개",
@@ -2910,4 +2933,30 @@
"三级返佣": "레벨 3 리베이트",
"币种手续费值不合理": "화폐 취급 수수료가 불합리하다",
"首日涨幅": "첫날 증가",
+ "home.heroTitle": "신뢰할 수 있는 브로커?",
+ "home.heroDesc": "우수한 고객 서비스, 투명한 가격 책정 및 가장 진보된 플랫폼이 우수한 평판을 구축했습니다",
+ "home.loan": "대출",
+ "home.aboutDesc": "기술적으로 선도적이고 사용자 친화적인 거래 플랫폼을 만들어 신중하고 완전한 거래 경험을 제공합니다",
+ "home.feature1": "직관적이고 사용하기 쉬운 인터페이스",
+ "home.feature2": "3,000개 이상의 시장에 대한 실시간 업데이트 및 가격 알림을 정기적으로 제공",
+ "home.feature3": "다양한 기술 지표, 분석 도구 및 고급 차트",
+ "home.feature4": "헤징 모드 및 위험 관리 도구",
+ "home.news": "뉴스",
+ "home.tradeGlobalMarkets": "글로벌 금융 시장 거래",
+ "home.downloadDesc": "데스크톱 및 모바일에서 다양한 방법을 지원하여 언제 어디서나 거래할 수 있습니다",
+ "home.downloadNow": "지금 다운로드",
+ "home.company": "회사",
+ "home.teamIntro": "팀 소개",
+ "home.emailSupport": "이메일 연락 지원",
+ "home.policy": "정책",
+ "home.userAgreement": "사용자 서비스 계약",
+ "home.riskDisclosure": "위험 공개",
+ "home.amlPolicy": "자금 세탁 방지 정책",
+ "home.regulatoryLicense": "규제 라이선스",
+ "home.statement": "성명",
+ "home.privacyStatement": "개인정보 보호 성명",
+ "home.heroTitle1": "포괄적인 금융 거래 경험",
+ "home.heroFeatures1": "강력한 플랫폼, 초저 스프레드, 빠른 실행, 독점 지원",
+ "home.heroTitle2": "최첨단 거래 기술",
+ "home.heroDesc2": "당사의 고급 거래 시스템을 통해 시장 역학을 정확하게 파악하고 모든 거래를 효율적으로 실행할 수 있습니다!",
}
diff --git a/src/i18n/modules/de.js b/src/i18n/modules/de.js
index 7a23a6c..5be74b1 100644
--- a/src/i18n/modules/de.js
+++ b/src/i18n/modules/de.js
@@ -25,6 +25,7 @@
register: "Registrieren",
email: "Email",
phoneNum: "Handynummer",
+ mobile: "Mobil",
entryEmail: "Bitte geben Sie Ihre E-Mail-Adresse ein",
entryPhone: "Bitte geben Sie Ihre Telefonnummer ein",
entryAccount: "Bitte Kontonummer eingeben",
@@ -35,6 +36,7 @@
invitCode: "Invitation Code (optional)",
entryInvitCode: "Bitte den Einladungscode eingeben",
readAgree: "Ich habe gelesen und stimme zu",
+ agree: "Zustimmen",
serviceConf: "Service Terms",
hasAccount: "Existing account?",
goLogin: "Go log in",
@@ -65,6 +67,11 @@
entryVerifyTips: "Bitte geben Sie einen 6-stelligen Verifizierungscode ein",
forgetPassword: "Passwort vergessen",
login: "Login",
+ letsStartLogin: "Beginnen wir mit der Anmeldung!",
+ loginByWallet: "Mit Wallet anmelden",
+ forgot: "Vergessen",
+ verifyCodeLabel: "Bestätigungscode",
+ codeSent: "Gesendet",
noAccount: "No account yet",
bindSuccess: "Binding success",
setFundPassword: "Set Fund Password",
@@ -1261,6 +1268,7 @@
"加载中": "Wird geladen",
"今日（日收益）": "Heute (Tagesgewinn) ",
"托管订单": "Bestellung für die Verwahrung",
+ "我的投资": "Meine Investition",
"矿机规则": "Regel für Bergbaumaschine",
"剩余天数": "Anzahl der verbleibenden Tage",
"已获收益": "erhaltene Rendite",
@@ -1576,6 +1584,10 @@
"审核未通过,请进行身份KYC认证": "Audit nicht bestanden, Bitte führen Sie die KYC-Identitätsauthentifizierung durch",
"审核中，前往身份KYC认证?": "Sind Sie sicher, dass Sie während des Audits zur KYC-Identitätsauthentifizierung gehen? ",
"合约交易": "VERTRAGSVERKEHR",
+ "期权交易": "OPTIONSHANDEL",
+ "选择周期": "Zeitraum wählen",
+ "选择类型": "Typ auswählen",
+ "搜索交易种类": "Handelsarten suchen",
"矿池大厅": "Halle des Minenbeckens",
"邀请推广": "Referral Program",
"身份认证": "Identifizierung",
@@ -2172,6 +2184,14 @@
"昨日收益": "gestrige Rendite",
"托管中总订单": "gesamte Aufträge der Treuhandschaft ",
"托管金额": "Treuhandbetrag",
+ "AI理财": "AI Vermögensverwaltung",
+ "收益率": "Rendite",
+ "认购价格": "Zeichnungspreis",
+ "立即参与": "Jetzt teilnehmen",
+ "总投入": "Gesamtinvestition",
+ "累计收入": "Kumulierte Einnahmen",
+ "每日收益": "Täglicher Gewinn",
+ "前往平台观看": "Auf der Plattform ansehen",
"赎回成功": "erfolgreiche einlösung",
"利息": "Zinsen",
"利息数量": "Menge der Zinsen",
@@ -2298,6 +2318,9 @@
"审核中": "unter Überprüfung",
"开": "öffnen",
"多": "mehr",
+ "兑换": "Umtausch",
+ "模拟账户": "Demokonto",
+ "真实账户": "Echtkonto",
"平": "gleich",
"空": "leer",
"币种简介": "Währungseinführung",
@@ -2910,4 +2933,30 @@
"三级返佣": "Rabatt der Stufe drei",
"币种手续费值不合理": "Die Währungsbearbeitungsgebühr ist unangemessen",
"首日涨幅": "Erhöhung am ersten Tag",
+ "home.heroTitle": "Ein Broker, dem Sie vertrauen können?",
+ "home.heroDesc": "Exzellenter Kundenservice, transparente Preisgestaltung und die modernste Plattform haben einen exzellenten Ruf etabliert",
+ "home.loan": "Darlehen",
+ "home.aboutDesc": "Wir haben eine technologisch führende und benutzerfreundliche Handelsplattform geschaffen, um Ihnen ein durchdachtes und vollständiges Handelserlebnis zu bieten",
+ "home.feature1": "Intuitive und benutzerfreundliche Oberfläche",
+ "home.feature2": "Regelmäßige Bereitstellung von Echtzeit-Updates und Preisalarmen für über 3.000 Märkte",
+ "home.feature3": "Verschiedene technische Indikatoren, Analysetools und erweiterte Diagramme",
+ "home.feature4": "Absicherungsmodus und Risikomanagement-Tools",
+ "home.news": "Nachrichten",
+ "home.tradeGlobalMarkets": "Handel mit globalen Finanzmärkten",
+ "home.downloadDesc": "Unterstützt verschiedene Methoden auf Desktop und Mobilgeräten, sodass Sie jederzeit und überall handeln können",
+ "home.downloadNow": "Jetzt herunterladen",
+ "home.company": "Unternehmen",
+ "home.teamIntro": "Team-Vorstellung",
+ "home.emailSupport": "E-Mail-Kontakt-Support",
+ "home.policy": "Richtlinie",
+ "home.userAgreement": "Nutzerservicevereinbarung",
+ "home.riskDisclosure": "Risikohinweis",
+ "home.amlPolicy": "Geldwäschebekämpfungspolitik",
+ "home.regulatoryLicense": "Regulierungslizenz",
+ "home.statement": "Erklärung",
+ "home.privacyStatement": "Datenschutzerklärung",
+ "home.heroTitle1": "Ein umfassendes Finanzhandelserlebnis",
+ "home.heroFeatures1": "Leistungsstarke Plattform, ultra-niedrige Spreads, schnelle Ausführung, exklusiver Support",
+ "home.heroTitle2": "Hochmoderne Handelstechnologie",
+ "home.heroDesc2": "Durch unser fortschrittliches Handelssystem können Sie Marktdynamiken genau erfassen und jede Transaktion effizient ausführen!",
}
diff --git a/src/i18n/modules/en.js b/src/i18n/modules/en.js
index f2ac822..69635c9 100644
--- a/src/i18n/modules/en.js
+++ b/src/i18n/modules/en.js
@@ -25,6 +25,7 @@
register: "Register",
email: "Email",
phoneNum: "Phone number",
+ mobile: "Mobile",
entryEmail: "Please input your email",
entryPhone: "Please enter phone number",
entryAccount: "Please enter account",
@@ -35,6 +36,7 @@
invitCode: "Invitation code (optional)",
entryInvitCode: "Please enter the invitation code",
readAgree: "I have read and agree",
+ agree: "Agree",
serviceConf: "Terms of Service",
hasAccount: "Already have an account?",
goLogin: "To log in",
@@ -65,6 +67,11 @@
entryVerifyTips: "Please enter the 6-digit verification code",
forgetPassword: "Forgot password?",
login: "Login",
+ letsStartLogin: "Let's start with login!",
+ loginByWallet: "Login by Wallet",
+ forgot: "Forgot",
+ verifyCodeLabel: "Verification Code",
+ codeSent: "Code Sent",
noAccount: "No account yet",
bindSuccess: "Bind successfully",
setFundPassword: "Set fund password",
@@ -1265,6 +1272,7 @@
'释放即可刷新': 'Release to refresh',
'加载中': 'Loading',
'今日（日收益）': 'Today (Daily earnings)',
+ '我的投资': 'My Investment',
'托管订单': 'Escrow order',
"矿机规则": "Miner rules",
"剩余天数": "Left days",
@@ -1587,6 +1595,10 @@
"审核未通过,请进行身份KYC认证": "Verification failed, please perform KYC vertification.",
"审核中，前往身份KYC认证?": "Under review, go to KYC verification?",
"合约交易": "Contract",
+ "期权交易": "Options Trading",
+ "选择周期": "Select period",
+ "选择类型": "Select type",
+ "搜索交易种类": "Search trading types",
"矿池大厅": "Mining Pool",
"邀请推广": "Referral Program",
"身份认证": "Authentication",
@@ -2023,6 +2035,8 @@
"法币交易": "Legal",
"币币交易": "Currency",
"账变记录": "Record",
+ "信用分": "Credit Score",
+ "评估时间": "Assessment Time",
"选择账户类型": "Select account type",
"查询": "Search",
"永续合约": "Perpetual",
@@ -2192,6 +2206,14 @@
"昨日收益": "Yesterday's revenue",
"托管中总订单": "All holdings",
"托管金额": "Holdings amount",
+ "AI理财": "AI Wealth Management",
+ "收益率": "Yield rate",
+ "认购价格": "Subscription price",
+ "立即参与": "Participate now",
+ "总投入": "Total investment",
+ "累计收入": "Accumulated income",
+ "每日收益": "Daily profit",
+ "前往平台观看": "Watch on platform",
"赎回成功": "Redemption succeeded",
"利息": "Interest",
@@ -2319,6 +2341,9 @@
"审核中": "Under review",
"开": "Open",
"多": " Long",
+ "兑换": "Exchange",
+ "模拟账户": "Demo Account",
+ "真实账户": "Real Account",
"平": "Close",
"空": " Short",
"币种简介": "Currency introduction",
@@ -2961,4 +2986,30 @@
'三级返佣': "Level three rebate",
'币种手续费值不合理':'The currency handling fee is unreasonable',
'首日涨幅': "First day increase",
+ 'home.heroTitle': "A broker you can trust?",
+ 'home.heroDesc': "Excellent customer service, transparent pricing, and the most advanced platform have established an excellent reputation",
+ 'home.loan': "Loan",
+ 'home.aboutDesc': "We have created a technologically leading and user-friendly trading platform to provide you with a thoughtful and complete trading experience",
+ 'home.feature1': "Intuitive and easy-to-use interface",
+ 'home.feature2': "Regularly provide real-time updates and price alerts for over 3,000 markets",
+ 'home.feature3': "Various technical indicators, analysis tools, and advanced charts",
+ 'home.feature4': "Hedging mode and risk management tools",
+ 'home.news': "News",
+ 'home.tradeGlobalMarkets': "Trade Global Financial Markets",
+ 'home.downloadDesc': "Supports various methods on desktop and mobile, allowing you to trade anytime, anywhere",
+ 'home.downloadNow': "Download Now",
+ 'home.company': "Company",
+ 'home.teamIntro': "Team Introduction",
+ 'home.emailSupport': "Email Contact Support",
+ 'home.policy': "Policy",
+ 'home.userAgreement': "User Service Agreement",
+ 'home.riskDisclosure': "Risk Disclosure",
+ 'home.amlPolicy': "Anti-Money Laundering Policy",
+ 'home.regulatoryLicense': "Regulatory License",
+ 'home.statement': "Statement",
+ 'home.privacyStatement': "Privacy Statement",
+ 'home.heroTitle1': "A Comprehensive Financial Trading Experience",
+ 'home.heroFeatures1': "Powerful platform, ultra-low spreads, fast execution, exclusive support",
+ 'home.heroTitle2': "Cutting-edge Trading Technology",
+ 'home.heroDesc2': "Through our advanced trading system, you can accurately grasp market dynamics and efficiently execute every transaction!",
}
\ No newline at end of file
diff --git a/src/i18n/modules/es.js b/src/i18n/modules/es.js
index 21a8db0..9a39bbd 100644
--- a/src/i18n/modules/es.js
+++ b/src/i18n/modules/es.js
@@ -25,6 +25,7 @@
register: "Registrar",
email: "E-mail",
phoneNum: "Número de telefone celular",
+ mobile: "Móvil",
entryEmail: "Por favor, digite seu e-mail",
entryPhone: "Por favor, digite seu número de telefone",
entryAccount: "Por favor, digite o número da conta",
@@ -35,6 +36,7 @@
invitCode: "Código de convite (opcional)",
entryInvitCode: "Por favor, digite o código de convite",
readAgree: "Li e concordo",
+ agree: "Aceptar",
serviceConf: "Termos de Serviço",
hasAccount: "Já tem uma conta?",
goLogin: "Ir para login",
@@ -65,6 +67,11 @@
entryVerifyTips: "Insira um código de verificação de 6 dígitos",
forgetPassword: "Esqueceu sua senha?",
login: "entrar",
+ letsStartLogin: "¡Comencemos con el inicio de sesión!",
+ loginByWallet: "Iniciar sesión con billetera",
+ forgot: "Olvidé",
+ verifyCodeLabel: "Código de verificación",
+ codeSent: "Enviado",
noAccount: "Sem conta ainda",
bindSuccess: "Ligação com sucesso",
setFundPassword: "Definir senha do fundo",
@@ -1261,6 +1268,7 @@
"加载中": "Cargando",
"今日（日收益）": "Hoy (ganancias diarias) ",
"托管订单": "Órdenes de custodia",
+ "我的投资": "Mi inversión",
"矿机规则": "Reglas de la máquina minera",
"剩余天数": "Los días restantes",
"已获收益": "Ganado",
@@ -1576,6 +1584,10 @@
"审核未通过,请进行身份KYC认证": "Auditoría no aprobada, por favor vaya a la verificación KYC",
"审核中，前往身份KYC认证?": "Auditoría en curso, vaya a Verificación de Identidad KYC? ",
"合约交易": "Comercio por contrato",
+ "期权交易": "Trading de opciones",
+ "选择周期": "Seleccionar período",
+ "选择类型": "Seleccionar tipo",
+ "搜索交易种类": "Buscar tipos de trading",
"矿池大厅": "Vestíbulo del fondo de minería",
"邀请推广": "Invitación a la promoción",
"身份认证": "Verificación de la identidad",
@@ -2172,6 +2184,14 @@
"昨日收益": "Las ganancias de ayer",
"托管中总订单": "Total de pedidos en custodia",
"托管金额": "Monto de alojamiento",
+ "AI理财": "AI Gestión financiera",
+ "收益率": "Tasa de rendimiento",
+ "认购价格": "Precio de suscripción",
+ "立即参与": "Participar ahora",
+ "总投入": "Inversión total",
+ "累计收入": "Ingresos acumulados",
+ "每日收益": "Beneficio diario",
+ "前往平台观看": "Ver en la plataforma",
"赎回成功": "Redención exitosa",
"利息": "Interés",
"利息数量": "Número de interés",
@@ -2298,6 +2318,9 @@
"审核中": "Revisando",
"开": "Abierto",
"多": "Más",
+ "兑换": "Cambiar",
+ "模拟账户": "Cuenta demo",
+ "真实账户": "Cuenta real",
"平": "Plano",
"空": "Vacío",
"币种简介": "Introducción a la moneda",
@@ -2910,4 +2933,30 @@
"三级返佣": "Reembolso de nivel tres",
"币种手续费值不合理": "La tarifa por manejo de moneda no es razonable.",
"首日涨幅": "Aumento del primer día",
+ "home.heroTitle": "¿Un corredor en el que puede confiar?",
+ "home.heroDesc": "Excelente servicio al cliente, precios transparentes y la plataforma más avanzada han establecido una excelente reputación",
+ "home.loan": "Préstamo",
+ "home.aboutDesc": "Hemos creado una plataforma de trading tecnológicamente líder y fácil de usar para brindarle una experiencia de trading reflexiva y completa",
+ "home.feature1": "Interfaz intuitiva y fácil de usar",
+ "home.feature2": "Proporcionar regularmente actualizaciones en tiempo real y alertas de precios para más de 3,000 mercados",
+ "home.feature3": "Varios indicadores técnicos, herramientas de análisis y gráficos avanzados",
+ "home.feature4": "Modo de cobertura y herramientas de gestión de riesgos",
+ "home.news": "Noticias",
+ "home.tradeGlobalMarkets": "Operar en los mercados financieros globales",
+ "home.downloadDesc": "Admite varios métodos en escritorio y móvil, lo que le permite operar en cualquier momento y lugar",
+ "home.downloadNow": "Descargar ahora",
+ "home.company": "Empresa",
+ "home.teamIntro": "Presentación del equipo",
+ "home.emailSupport": "Soporte de contacto por correo electrónico",
+ "home.policy": "Política",
+ "home.userAgreement": "Acuerdo de servicio al usuario",
+ "home.riskDisclosure": "Divulgación de riesgos",
+ "home.amlPolicy": "Política contra el lavado de dinero",
+ "home.regulatoryLicense": "Licencia regulatoria",
+ "home.statement": "Declaración",
+ "home.privacyStatement": "Declaración de privacidad",
+ "home.heroTitle1": "Una experiencia integral de trading financiero",
+ "home.heroFeatures1": "Plataforma potente, spreads ultra bajos, ejecución rápida, soporte exclusivo",
+ "home.heroTitle2": "Tecnología de trading de vanguardia",
+ "home.heroDesc2": "¡A través de nuestro sistema de trading avanzado, puede captar con precisión la dinámica del mercado y ejecutar cada transacción de manera eficiente!",
}
diff --git a/src/i18n/modules/fr.js b/src/i18n/modules/fr.js
index 07942dd..60d2660 100644
--- a/src/i18n/modules/fr.js
+++ b/src/i18n/modules/fr.js
@@ -25,6 +25,7 @@
register: "S'inscrire",
email: "E-mail",
phoneNum: "Numéro de téléphone portable",
+ mobile: "Mobile",
entryEmail: "Veuillez saisir votre e-mail",
entryPhone: "Veuillez saisir votre numéro de téléphone",
entryAccount: "Veuillez entrer le numéro de compte",
@@ -35,6 +36,7 @@
invitCode: "Code d'invitation (facultatif)",
entryInvitCode: "Veuillez saisir le code d'invitation",
readAgree: "J'ai lu et j'accepte",
+ agree: "Accepter",
serviceConf: "Conditions d'utilisation",
hasAccount: "Vous avez déjà un compte ?",
goLogin: "Aller à la connexion",
@@ -65,6 +67,11 @@
entryVerifyTips: "Veuillez saisir un code de vérification à 6 chiffres",
forgetPassword: "Mot de passe oublié ?",
login: "Connexion",
+ letsStartLogin: "Commençons par se connecter !",
+ loginByWallet: "Se connecter avec un portefeuille",
+ forgot: "Oublié",
+ verifyCodeLabel: "Code de vérification",
+ codeSent: "Envoyé",
noAccount: "Pas encore de compte",
bindSuccess: "Liaison réussie",
setFundPassword: "Définir le mot de passe du fonds",
@@ -1261,6 +1268,7 @@
"加载中": "Chargement",
"今日（日收益）": "Aujourd'hui (gains quotidiens)",
"托管订单": "Ordres de séquestre",
+ "我的投资": "Mon investissement",
"矿机规则": "Règles de mineur",
"剩余天数": "Nombre de jours restants",
"已获收益": "Prestations reçues",
@@ -1576,6 +1584,10 @@
"审核未通过,请进行身份KYC认证": "La vérification a échoué, veuillez effectuer une vérification KYC.",
"审核中，前往身份KYC认证?": "En cours de révision, aller à la vérification KYC?",
"合约交易": "Contrats",
+ "期权交易": "Trading d'options",
+ "选择周期": "Choisir la période",
+ "选择类型": "Choisir le type",
+ "搜索交易种类": "Rechercher des types de trading",
"矿池大厅": "Pool minier",
"邀请推广": "Plan recommandé",
"身份认证": "Authentification",
@@ -2172,6 +2184,14 @@
"昨日收益": "Revenus d'hier",
"托管中总订单": "Toutes les sociétés holdings",
"托管金额": "Montant de la participation",
+ "AI理财": "AI Gestion financière",
+ "收益率": "Taux de rendement",
+ "认购价格": "Prix d'abonnement",
+ "立即参与": "Participer maintenant",
+ "总投入": "Investissement total",
+ "累计收入": "Revenus accumulés",
+ "每日收益": "Profit quotidien",
+ "前往平台观看": "Regarder sur la plateforme",
"赎回成功": "Rachat réussi",
"利息": "Intérêts",
"利息数量": "Montant des intérêts",
@@ -2298,6 +2318,9 @@
"审核中": "En cours de révision",
"开": "Ouvrir",
"多": "Longues",
+ "兑换": "Échanger",
+ "模拟账户": "Compte démo",
+ "真实账户": "Compte réel",
"平": "Fermer",
"空": " Courte",
"币种简介": "Présentation de la devise",
@@ -2910,4 +2933,30 @@
"三级返佣": "Remise de niveau trois",
"币种手续费值不合理": "Les frais de traitement des devises sont déraisonnables",
"首日涨幅": "Augmentation du premier jour",
+ "home.heroTitle": "Un courtier en qui vous pouvez avoir confiance?",
+ "home.heroDesc": "Un excellent service client, des prix transparents et la plateforme la plus avancée ont établi une excellente réputation",
+ "home.loan": "Prêt",
+ "home.aboutDesc": "Nous avons créé une plateforme de trading technologiquement leader et conviviale pour vous offrir une expérience de trading réfléchie et complète",
+ "home.feature1": "Interface intuitive et facile à utiliser",
+ "home.feature2": "Fournir régulièrement des mises à jour en temps réel et des alertes de prix pour plus de 3 000 marchés",
+ "home.feature3": "Divers indicateurs techniques, outils d'analyse et graphiques avancés",
+ "home.feature4": "Mode de couverture et outils de gestion des risques",
+ "home.news": "Actualités",
+ "home.tradeGlobalMarkets": "Trader sur les marchés financiers mondiaux",
+ "home.downloadDesc": "Prend en charge diverses méthodes sur ordinateur et mobile, vous permettant de trader à tout moment et n'importe où",
+ "home.downloadNow": "Télécharger maintenant",
+ "home.company": "Entreprise",
+ "home.teamIntro": "Présentation de l'équipe",
+ "home.emailSupport": "Support de contact par e-mail",
+ "home.policy": "Politique",
+ "home.userAgreement": "Accord de service utilisateur",
+ "home.riskDisclosure": "Divulgation des risques",
+ "home.amlPolicy": "Politique de lutte contre le blanchiment d'argent",
+ "home.regulatoryLicense": "Licence réglementaire",
+ "home.statement": "Déclaration",
+ "home.privacyStatement": "Déclaration de confidentialité",
+ "home.heroTitle1": "Une expérience complète de trading financier",
+ "home.heroFeatures1": "Plateforme puissante, spreads ultra-faibles, exécution rapide, support exclusif",
+ "home.heroTitle2": "Technologie de trading de pointe",
+ "home.heroDesc2": "Grâce à notre système de trading avancé, vous pouvez saisir avec précision la dynamique du marché et exécuter chaque transaction efficacement!",
}
diff --git a/src/i18n/modules/gr.js b/src/i18n/modules/gr.js
index 4d65c4e..fa9df27 100644
--- a/src/i18n/modules/gr.js
+++ b/src/i18n/modules/gr.js
@@ -25,6 +25,7 @@
register: "Εγγραφή",
email: "Ηλεκτρονικό ταχυδρομείο",
phoneNum: "Αριθμός τηλεφώνου",
+ mobile: "Κινητό",
entryEmail: "Παρακαλώ εισάγετε το ηλεκτρονικό ταχυδρομείο",
entryPhone: "Παρακαλώ εισάγετε τον αριθμό τηλεφώνου",
entryAccount: "Παρακαλώ εισάγετε τον αριθμό λογαριασμού",
@@ -35,6 +36,7 @@
invitCode: "Κωδικός πρόσκλησης (προαιρετικό)",
entryInvitCode: "Παρακαλώ εισάγετε τον κωδικό πρόσκλησης",
readAgree: "Έχω διαβάσει και συμφωνώ με τους",
+ agree: "Συμφωνώ",
serviceConf: "Όροι υπηρεσίας",
hasAccount: "Έχετε ήδη λογαριασμό?",
goLogin: "Πηγαίνετε στην είσοδο",
@@ -65,6 +67,11 @@
entryVerifyTips: "Παρακαλώ εισάγετε τον κωδικό επαλήθευσης",
forgetPassword: "Ξεχάσατε τον κωδικό πρόσβασης;",
login: "Σύνδεση",
+ letsStartLogin: "Ας ξεκινήσουμε με τη σύνδεση!",
+ loginByWallet: "Σύνδεση με πορτοφόλι",
+ forgot: "Ξεχάσατε",
+ verifyCodeLabel: "Κωδικός επαλήθευσης",
+ codeSent: "Στάλθηκε",
noAccount: "Δεν έχετε λογαριασμό;",
bindSuccess: "Επιτυχής δέσμευση",
setFundPassword: "Ορίστε τον κωδικό πρόσβασης του ταμείου",
@@ -1261,6 +1268,7 @@
"加载中": "Φόρτωση",
"今日（日收益）": "Σήμερα (ημερήσιο κέρδος)",
"托管订单": "Παραγγελίες καταβολής",
+ "我的投资": "Η επένδυσή μου",
"矿机规则": "Κανόνες μηχανής",
"剩余天数": "Υπολειπόμενες ημέρες",
"已获收益": "Ήδη αποκτηθέντα έσοδα",
@@ -1576,6 +1584,10 @@
"审核未通过,请进行身份KYC认证": "Η αξιολόγηση δεν πέρασε, παρακαλώ εκτελέστε την ταυτοποίηση ταυτότητας KYC",
"审核中，前往身份KYC认证?": "Σε εξέλιξη αξιολόγηση, πηγαίνετε για ταυτοποίηση ταυτότητας KYC;",
"合约交易": "Συναλλαγές συμβολαίου",
+ "期权交易": "Συναλλαγές επιλογών",
+ "选择周期": "Επιλέξτε περίοδο",
+ "选择类型": "Επιλέξτε τύπο",
+ "搜索交易种类": "Αναζήτηση τύπων συναλλαγών",
"矿池大厅": "Αίθουσα ορυχείου",
"邀请推广": "Προσκλήσεις Προώθησης",
"身份认证": "Πιστοποίηση ταυτότητας",
@@ -2172,6 +2184,14 @@
"昨日收益": "Κέρδη χθες",
"托管中总订单": "Συνολικές ενεργές παραγγελίες",
"托管金额": "Ποσό κατάθεσης",
+ "AI理财": "AI Διαχείριση οικονομικών",
+ "收益率": "Απόδοση",
+ "认购价格": "Τιμή εγγραφής",
+ "立即参与": "Συμμετοχή τώρα",
+ "总投入": "Συνολική επένδυση",
+ "累计收入": "Σωρευτικά έσοδα",
+ "每日收益": "Ημερήσιο κέρδος",
+ "前往平台观看": "Παρακολούθηση στην πλατφόρμα",
"赎回成功": "Επιτυχής εξαργύρωση",
"利息": "Τόκος",
"利息数量": "Ποσότητα τόκου",
@@ -2298,6 +2318,9 @@
"审核中": "Σε εξέλιξη αξιολόγηση",
"开": "Άνοιγμα",
"多": "Πολλαπλό",
+ "兑换": "Ανταλλαγή",
+ "模拟账户": "Δοκιμαστικός λογαριασμός",
+ "真实账户": "Πραγματικός λογαριασμός",
"平": "Ισορροπία",
"空": "Κενό",
"币种简介": "Εισαγωγή στο νόμισμα",
@@ -2910,4 +2933,30 @@
"三级返佣": "Έκπτωση επιπέδου τρίτου",
"币种手续费值不合理": "Η χρέωση διαχείρισης νομίσματος είναι παράλογη",
"首日涨幅": "Αύξηση πρώτης ημέρας",
+ "home.heroTitle": "Ένας χρηματιστής στον οποίο μπορείτε να εμπιστευτείτε;",
+ "home.heroDesc": "Εξαιρετική εξυπηρέτηση πελατών, διαφανείς τιμές και η πιο προηγμένη πλατφόρμα έχουν δημιουργήσει εξαιρετική φήμη",
+ "home.loan": "Δάνειο",
+ "home.aboutDesc": "Δημιουργήσαμε μια τεχνολογικά πρωτοπόρα και φιλική προς τον χρήστη πλατφόρμα συναλλαγών για να σας προσφέρουμε μια προσεκτική και πλήρη εμπειρία συναλλαγών",
+ "home.feature1": "Διαισθητική και εύκολη στη χρήση διεπαφή",
+ "home.feature2": "Παροχή τακτικών ενημερώσεων σε πραγματικό χρόνο και ειδοποιήσεων τιμών για περισσότερες από 3.000 αγορές",
+ "home.feature3": "Διάφοροι τεχνικοί δείκτες, εργαλεία ανάλυσης και προηγμένα γραφήματα",
+ "home.feature4": "Λειτουργία αντιστάθμισης και εργαλεία διαχείρισης κινδύνου",
+ "home.news": "Νέα",
+ "home.tradeGlobalMarkets": "Συναλλαγή στις παγκόσμιες χρηματοπιστωτικές αγορές",
+ "home.downloadDesc": "Υποστηρίζει διάφορες μεθόδους σε επιτραπέζιο υπολογιστή και κινητό, επιτρέποντάς σας να συναλλάγεσθε ανά πάσα στιγμή και οπουδήποτε",
+ "home.downloadNow": "Λήψη τώρα",
+ "home.company": "Εταιρεία",
+ "home.teamIntro": "Εισαγωγή της ομάδας",
+ "home.emailSupport": "Υποστήριξη επικοινωνίας μέσω email",
+ "home.policy": "Πολιτική",
+ "home.userAgreement": "Συμφωνία εξυπηρέτησης χρήστη",
+ "home.riskDisclosure": "Αποκάλυψη κινδύνου",
+ "home.amlPolicy": "Πολιτική καταπολέμησης της νομιμοποίησης εσόδων από παράνομες δραστηριότητες",
+ "home.regulatoryLicense": "Ρυθμιστική άδεια",
+ "home.statement": "Δήλωση",
+ "home.privacyStatement": "Δήλωση απορρήτου",
+ "home.heroTitle1": "Μια ολοκληρωμένη εμπειρία χρηματοοικονομικών συναλλαγών",
+ "home.heroFeatures1": "Ισχυρή πλατφόρμα, εξαιρετικά χαμηλά spreads, γρήγορη εκτέλεση, αποκλειστική υποστήριξη",
+ "home.heroTitle2": "Σύγχρονη τεχνολογία συναλλαγών",
+ "home.heroDesc2": "Μέσω του προηγμένου συστήματος συναλλαγών μας, μπορείτε να κατανοήσετε με ακρίβεια τη δυναμική της αγοράς και να εκτελέσετε αποτελεσματικά κάθε συναλλαγή!",
}
diff --git a/src/i18n/modules/pt.js b/src/i18n/modules/pt.js
index 49ef8af..f3c6bd8 100644
--- a/src/i18n/modules/pt.js
+++ b/src/i18n/modules/pt.js
@@ -25,6 +25,7 @@
register: "Registrar",
email: "E-mail",
phoneNum: "Número de telefone",
+ mobile: "Móvel",
entryEmail: "Digite o e-mail",
entryPhone: "Digite o número de telefone",
entryAccount: "Digite a conta",
@@ -35,6 +36,7 @@
invitCode: "Código de convite (opcional)",
entryInvitCode: "Digite o código de convite",
readAgree: "Li e concordo com",
+ agree: "Concordar",
serviceConf: "Termos de Serviço",
hasAccount: "Já tem uma conta?",
goLogin: "Fazer login",
@@ -65,6 +67,11 @@
entryVerifyTips: "Digite um código de verificação de 6 dígitos",
forgetPassword: "Esqueceu a senha?",
login: "Entrar",
+ letsStartLogin: "Vamos começar com o login!",
+ loginByWallet: "Login com carteira",
+ forgot: "Esqueci",
+ verifyCodeLabel: "Código de verificação",
+ codeSent: "Enviado",
noAccount: "Ainda não tem uma conta",
bindSuccess: "Vínculo bem-sucedido",
setFundPassword: "Definir senha de fundos",
@@ -1261,6 +1268,7 @@
"加载中": "Carregando",
"今日（日收益）": "Hoje (lucro diário)",
"托管订单": "Ordem de hospedagem",
+ "我的投资": "Meu investimento",
"矿机规则": "Regras de mineração",
"剩余天数": "Dias restantes",
"已获收益": "Lucro obtido",
@@ -1576,6 +1584,10 @@
"审核未通过,请进行身份KYC认证": "Não aprovado, por favor, faça a autenticação KYC de identidade",
"审核中，前往身份KYC认证?": "Em revisão, ir para autenticação KYC de identidade?",
"合约交易": "Negociação de contrato",
+ "期权交易": "Negociação de opções",
+ "选择周期": "Selecionar período",
+ "选择类型": "Selecionar tipo",
+ "搜索交易种类": "Pesquisar tipos de negociação",
"矿池大厅": "Sala de mineração",
"邀请推广": "Convite e promoção",
"身份认证": "Autenticação de identidade",
@@ -2172,6 +2184,14 @@
"昨日收益": "Lucro de ontem",
"托管中总订单": "Total de pedidos em depósito",
"托管金额": "Montante de depósito",
+ "AI理财": "AI Gestão financeira",
+ "收益率": "Taxa de retorno",
+ "认购价格": "Preço de subscrição",
+ "立即参与": "Participar agora",
+ "总投入": "Investimento total",
+ "累计收入": "Receita acumulada",
+ "每日收益": "Lucro diário",
+ "前往平台观看": "Assistir na plataforma",
"赎回成功": "Resgate bem-sucedido",
"利息": "Juros",
"利息数量": "Quantidade de juros",
@@ -2298,6 +2318,9 @@
"审核中": "Em Revisão",
"开": "Abrir",
"多": "Long",
+ "兑换": "Trocar",
+ "模拟账户": "Conta demo",
+ "真实账户": "Conta real",
"平": "Encerrar",
"空": "Curto",
"币种简介": "Introdução da moeda",
@@ -2910,4 +2933,30 @@
"三级返佣": "Desconto de nível três",
"币种手续费值不合理": "A taxa de manuseio de moeda não é razoável",
"首日涨幅": "Aumento no primeiro dia",
+ "home.heroTitle": "Um corretor em quem você pode confiar?",
+ "home.heroDesc": "Excelente atendimento ao cliente, preços transparentes e a plataforma mais avançada estabeleceram uma excelente reputação",
+ "home.loan": "Empréstimo",
+ "home.aboutDesc": "Criamos uma plataforma de negociação tecnologicamente líder e fácil de usar para oferecer uma experiência de negociação cuidadosa e completa",
+ "home.feature1": "Interface intuitiva e fácil de usar",
+ "home.feature2": "Fornecer regularmente atualizações em tempo real e alertas de preços para mais de 3.000 mercados",
+ "home.feature3": "Vários indicadores técnicos, ferramentas de análise e gráficos avançados",
+ "home.feature4": "Modo de hedge e ferramentas de gerenciamento de risco",
+ "home.news": "Notícias",
+ "home.tradeGlobalMarkets": "Negociar nos mercados financeiros globais",
+ "home.downloadDesc": "Suporta vários métodos em desktop e mobile, permitindo que você negocie a qualquer hora e em qualquer lugar",
+ "home.downloadNow": "Baixar agora",
+ "home.company": "Empresa",
+ "home.teamIntro": "Apresentação da equipe",
+ "home.emailSupport": "Suporte de contato por e-mail",
+ "home.policy": "Política",
+ "home.userAgreement": "Acordo de serviço do usuário",
+ "home.riskDisclosure": "Divulgação de risco",
+ "home.amlPolicy": "Política de combate à lavagem de dinheiro",
+ "home.regulatoryLicense": "Licença regulatória",
+ "home.statement": "Declaração",
+ "home.privacyStatement": "Declaração de privacidade",
+ "home.heroTitle1": "Uma experiência completa de negociação financeira",
+ "home.heroFeatures1": "Plataforma poderosa, spreads ultra baixos, execução rápida, suporte exclusivo",
+ "home.heroTitle2": "Tecnologia de negociação de ponta",
+ "home.heroDesc2": "Através do nosso sistema de negociação avançado, você pode captar com precisão a dinâmica do mercado e executar cada transação com eficiência!",
}
diff --git a/src/i18n/modules/ro.js b/src/i18n/modules/ro.js
index 30457d5..fe14650 100644
--- a/src/i18n/modules/ro.js
+++ b/src/i18n/modules/ro.js
@@ -35,6 +35,7 @@
invitCode: "邀请码(选填)",
entryInvitCode: "请输入邀请码",
readAgree: "我已阅读并同意",
+ agree: "同意",
serviceConf: "服务条款",
hasAccount: "已有账号?",
goLogin: "去登录",
@@ -1261,6 +1262,7 @@
"加载中": "加载中",
"今日（日收益）": "今日（日收益）",
"托管订单": "托管订单",
+ "我的投资": "Investiția mea",
"矿机规则": "矿机规则",
"剩余天数": "剩余天数",
"已获收益": "已获收益",
@@ -1576,6 +1578,10 @@
"审核未通过,请进行身份KYC认证": "审核未通过,请进行身份KYC认证",
"审核中，前往身份KYC认证?": "审核中，前往身份KYC认证?",
"合约交易": "合约交易",
+ "期权交易": "Tranzacții cu opțiuni",
+ "选择周期": "Selectați perioada",
+ "选择类型": "Selectați tipul",
+ "搜索交易种类": "Căutare tipuri de tranzacții",
"矿池大厅": "矿池大厅",
"邀请推广": "邀请推广",
"身份认证": "身份认证",
@@ -2172,6 +2178,14 @@
"昨日收益": "昨日收益",
"托管中总订单": "托管中总订单",
"托管金额": "托管金额",
+ "AI理财": "AI Management financiar",
+ "收益率": "Rata randament",
+ "认购价格": "Preț subscriere",
+ "立即参与": "Participa acum",
+ "总投入": "Investiție totală",
+ "累计收入": "Venit acumulat",
+ "每日收益": "Profit zilnic",
+ "前往平台观看": "Vizionați pe platformă",
"赎回成功": "赎回成功",
"利息": "利息",
"利息数量": "利息数量",
@@ -2298,6 +2312,9 @@
"审核中": "审核中",
"开": "开",
"多": "多",
+ "兑换": "Schimb",
+ "模拟账户": "Cont demo",
+ "真实账户": "Cont real",
"平": "平",
"空": "空",
"币种简介": "币种简介",
@@ -2910,4 +2927,30 @@
"三级返佣": "Rabat de nivel trei",
"币种手续费值不合理": "Taxa de gestionare a valutei este nerezonabilă",
"首日涨幅": "Creștere în prima zi",
+ "home.heroTitle": "Un broker în care poți avea încredere?",
+ "home.heroDesc": "Serviciu excelent pentru clienți, prețuri transparente și cea mai avansată platformă au stabilit o reputație excelentă",
+ "home.loan": "Împrumut",
+ "home.aboutDesc": "Am creat o platformă de tranzacționare tehnologic de vârf și ușor de utilizat pentru a vă oferi o experiență de tranzacționare grijulie și completă",
+ "home.feature1": "Interfață intuitivă și ușor de utilizat",
+ "home.feature2": "Oferirea regulată de actualizări în timp real și alerte de preț pentru peste 3.000 de piețe",
+ "home.feature3": "Diverși indicatori tehnici, instrumente de analiză și grafice avansate",
+ "home.feature4": "Mod de acoperire și instrumente de gestionare a riscului",
+ "home.news": "Știri",
+ "home.tradeGlobalMarkets": "Tranzacționare pe piețele financiare globale",
+ "home.downloadDesc": "Suportă diverse metode pe desktop și mobil, permițându-vă să tranzacționați oricând și oriunde",
+ "home.downloadNow": "Descarcă acum",
+ "home.company": "Companie",
+ "home.teamIntro": "Prezentarea echipei",
+ "home.emailSupport": "Suport contact email",
+ "home.policy": "Politică",
+ "home.userAgreement": "Acord de serviciu utilizator",
+ "home.riskDisclosure": "Dezvăluirea riscului",
+ "home.amlPolicy": "Politica de combatere a spălării banilor",
+ "home.regulatoryLicense": "Licență de reglementare",
+ "home.statement": "Declarație",
+ "home.privacyStatement": "Declarație de confidențialitate",
+ "home.heroTitle1": "O experiență completă de tranzacționare financiară",
+ "home.heroFeatures1": "Platformă puternică, spreaduri ultra scăzute, execuție rapidă, suport exclusiv",
+ "home.heroTitle2": "Tehnologie de tranzacționare de ultimă generație",
+ "home.heroDesc2": "Prin sistemul nostru avansat de tranzacționare, puteți înțelege cu precizie dinamica pieței și executa eficient fiecare tranzacție!",
}
diff --git a/src/i18n/modules/th.js b/src/i18n/modules/th.js
index cefe24c..f58c903 100644
--- a/src/i18n/modules/th.js
+++ b/src/i18n/modules/th.js
@@ -25,6 +25,7 @@
register: "ลงทะเบียน",
email: "กล่องจดหมาย",
phoneNum: "หมายเลขโทรศัพท์มือถือ",
+ mobile: "มือถือ",
entryEmail: "โปรดป้อนกล่องจดหมาย",
entryPhone: "โปรดป้อนหมายเลขโทรศัพท์มือถือ",
entryAccount: "กรุณากรอกหมายเลขบัญชี",
@@ -35,6 +36,7 @@
invitCode: "รหัสเชิญ (เลือก)",
entryInvitCode: "กรุณาใส่รหัสเชิญ",
readAgree: "ฉันได้อ่านและเห็นด้วย",
+ agree: "ยอมรับ",
serviceConf: "ข้อกำหนดในการให้บริการ",
hasAccount: "เลขที่บัญชีอยู่แล้ว?",
goLogin: "ไปเข้าสู่ระบบ",
@@ -65,6 +67,11 @@
entryVerifyTips: "โปรดป้อนรหัสยืนยัน 6 หลัก",
forgetPassword: "ลืมรหัสผ่าน?",
login: "เข้าสู่ระบบ",
+ letsStartLogin: "เริ่มต้นเข้าสู่ระบบกันเลย!",
+ loginByWallet: "เข้าสู่ระบบด้วยกระเป๋าเงิน",
+ forgot: "ลืม",
+ verifyCodeLabel: "รหัสยืนยัน",
+ codeSent: "ส่งแล้ว",
noAccount: "ยังไม่มีเลขบัญชี",
bindSuccess: "ผูกสำเร็จ",
setFundPassword: "ตั้งรหัสผ่านกองทุน",
@@ -1261,6 +1268,7 @@
"加载中": "กำลังโหลด",
"今日（日收益）": "วันนี้ (รายได้รายวัน)",
"托管订单": "วันนี้ (รายได้รายวัน）",
+ "我的投资": "การลงทุนของฉัน",
"矿机规则": "กฎการขุดแร่",
"剩余天数": "จำนวนวันที่เหลือ",
"已获收益": "ได้รับรายได้",
@@ -1576,6 +1584,10 @@
"审核未通过,请进行身份KYC认证": "หากการยืนยันล้มเหลว โปรดดำเนินการยืนยันตัวตน KYC ให้เสร็จสิ้น",
"审核中，前往身份KYC认证?": "อยู่ระหว่างการตรวจสอบ ไปที่การยืนยันตัวตน KYC?",
"合约交易": "สัญญา",
+ "期权交易": "การซื้อขายออปชัน",
+ "选择周期": "เลือกระยะเวลา",
+ "选择类型": "เลือกประเภท",
+ "搜索交易种类": "ค้นหาประเภทการซื้อขาย",
"矿池大厅": "ห้องโถงสระน้ำ",
"邀请推广": "คำเชิญเพื่อส่งเสริม",
"身份认证": "การรับรองความถูกต้อง",
@@ -2172,6 +2184,14 @@
"昨日收益": "รายได้เมื่อวาน",
"托管中总订单": "คำสั่งทั้งหมดในการดูแล",
"托管金额": "จำนวนเงินฝาก",
+ "AI理财": "AI การจัดการเงิน",
+ "收益率": "อัตราผลตอบแทน",
+ "认购价格": "ราคาตามใบสมัคร",
+ "立即参与": "เข้าร่วมทันที",
+ "总投入": "การลงทุนทั้งหมด",
+ "累计收入": "รายได้สะสม",
+ "每日收益": "กำไรรายวัน",
+ "前往平台观看": "ชมบนแพลตฟอร์ม",
"赎回成功": "ไถ่ถอนสำเร็จ",
"利息": "ความสนใจ",
"利息数量": "จำนวนดอกเบี้ย",
@@ -2298,6 +2318,9 @@
"审核中": "ภายใต้การทบทวน",
"开": "เปิด",
"多": "มากมาย",
+ "兑换": "แลกเปลี่ยน",
+ "模拟账户": "บัญชีทดลอง",
+ "真实账户": "บัญชีจริง",
"平": "ตัด",
"空": "โมฆะ",
"币种简介": "บทนำสกุลเงิน",
@@ -2910,4 +2933,30 @@
"三级返佣": "ส่วนลดระดับสาม",
"币种手续费值不合理": "ค่าธรรมเนียมการจัดการสกุลเงินไม่สมเหตุสมผล",
"首日涨幅": "วันแรกเพิ่มขึ้น",
+ "home.heroTitle": "โบรกเกอร์ที่คุณสามารถไว้วางใจได้?",
+ "home.heroDesc": "บริการลูกค้าที่ยอดเยี่ยม ราคาที่โปร่งใส และแพลตฟอร์มที่ล้ำสมัยที่สุดได้สร้างชื่อเสียงที่ยอดเยี่ยม",
+ "home.loan": "สินเชื่อ",
+ "home.aboutDesc": "เราได้สร้างแพลตฟอร์มการซื้อขายที่นำเทคโนโลยีและใช้งานง่ายเพื่อมอบประสบการณ์การซื้อขายที่รอบคอบและสมบูรณ์",
+ "home.feature1": "อินเทอร์เฟซที่ใช้งานง่ายและเข้าใจง่าย",
+ "home.feature2": "ให้การอัปเดตแบบเรียลไทม์และการแจ้งเตือนราคาสำหรับตลาดมากกว่า 3,000 แห่งเป็นประจำ",
+ "home.feature3": "ตัวบ่งชี้ทางเทคนิคต่างๆ เครื่องมือวิเคราะห์ และกราฟขั้นสูง",
+ "home.feature4": "โหมดป้องกันความเสี่ยงและเครื่องมือจัดการความเสี่ยง",
+ "home.news": "ข่าว",
+ "home.tradeGlobalMarkets": "ซื้อขายในตลาดการเงินทั่วโลก",
+ "home.downloadDesc": "รองรับวิธีการต่างๆ บนเดสก์ท็อปและมือถือ ช่วยให้คุณสามารถซื้อขายได้ทุกที่ทุกเวลา",
+ "home.downloadNow": "ดาวน์โหลดตอนนี้",
+ "home.company": "บริษัท",
+ "home.teamIntro": "แนะนำทีม",
+ "home.emailSupport": "สนับสนุนการติดต่อทางอีเมล",
+ "home.policy": "นโยบาย",
+ "home.userAgreement": "ข้อตกลงบริการผู้ใช้",
+ "home.riskDisclosure": "การเปิดเผยความเสี่ยง",
+ "home.amlPolicy": "นโยบายต่อต้านการฟอกเงิน",
+ "home.regulatoryLicense": "ใบอนุญาตกำกับดูแล",
+ "home.statement": "คำแถลง",
+ "home.privacyStatement": "คำแถลงความเป็นส่วนตัว",
+ "home.heroTitle1": "ประสบการณ์การซื้อขายทางการเงินที่ครอบคลุม",
+ "home.heroFeatures1": "แพลตฟอร์มที่ทรงพลัง สเปรดต่ำมาก การดำเนินการที่รวดเร็ว การสนับสนุนพิเศษ",
+ "home.heroTitle2": "เทคโนโลยีการซื้อขายที่ล้ำสมัย",
+ "home.heroDesc2": "ผ่านระบบการซื้อขายขั้นสูงของเรา คุณสามารถเข้าใจพลวัตของตลาดได้อย่างแม่นยำและดำเนินการทุกธุรกรรมอย่างมีประสิทธิภาพ!",
}
diff --git a/src/i18n/modules/tur.js b/src/i18n/modules/tur.js
index 442e73b..79a2853 100644
--- a/src/i18n/modules/tur.js
+++ b/src/i18n/modules/tur.js
@@ -35,6 +35,7 @@
invitCode: "邀请码(选填)",
entryInvitCode: "请输入邀请码",
readAgree: "我已阅读并同意",
+ agree: "同意",
serviceConf: "服务条款",
hasAccount: "已有账号?",
goLogin: "去登录",
@@ -1261,6 +1262,7 @@
"加载中": "加载中",
"今日（日收益）": "今日（日收益）",
"托管订单": "托管订单",
+ "我的投资": "Yatırımım",
"矿机规则": "矿机规则",
"剩余天数": "剩余天数",
"已获收益": "已获收益",
@@ -1576,6 +1578,10 @@
"审核未通过,请进行身份KYC认证": "审核未通过,请进行身份KYC认证",
"审核中，前往身份KYC认证?": "审核中，前往身份KYC认证?",
"合约交易": "合约交易",
+ "期权交易": "Opsiyon işlemleri",
+ "选择周期": "Dönem seçin",
+ "选择类型": "Tür seçin",
+ "搜索交易种类": "İşlem türlerini ara",
"矿池大厅": "矿池大厅",
"邀请推广": "邀请推广",
"身份认证": "身份认证",
@@ -2172,6 +2178,14 @@
"昨日收益": "昨日收益",
"托管中总订单": "托管中总订单",
"托管金额": "托管金额",
+ "AI理财": "AI Finansal Yönetim",
+ "收益率": "Getiri oranı",
+ "认购价格": "Abonelik fiyatı",
+ "立即参与": "Hemen katıl",
+ "总投入": "Toplam yatırım",
+ "累计收入": "Birikmiş gelir",
+ "每日收益": "Günlük kâr",
+ "前往平台观看": "Platformda izle",
"赎回成功": "赎回成功",
"利息": "利息",
"利息数量": "利息数量",
@@ -2298,6 +2312,9 @@
"审核中": "审核中",
"开": "开",
"多": "多",
+ "兑换": "Dönüştür",
+ "模拟账户": "Demo hesap",
+ "真实账户": "Gerçek hesap",
"平": "平",
"空": "空",
"币种简介": "币种简介",
@@ -2910,4 +2927,30 @@
"三级返佣": "Üçüncü düzey indirim",
"币种手续费值不合理": "Döviz işlem ücreti makul değil",
"首日涨幅": "İlk gün artış",
+ "home.heroTitle": "Güvenebileceğiniz bir broker?",
+ "home.heroDesc": "Mükemmel müşteri hizmeti, şeffaf fiyatlandırma ve en gelişmiş platform mükemmel bir itibar oluşturdu",
+ "home.loan": "Kredi",
+ "home.aboutDesc": "Size düşünceli ve eksiksiz bir işlem deneyimi sunmak için teknolojik olarak önde gelen ve kullanıcı dostu bir işlem platformu oluşturduk",
+ "home.feature1": "Sezgisel ve kullanımı kolay arayüz",
+ "home.feature2": "3.000'den fazla piyasa için düzenli olarak gerçek zamanlı güncellemeler ve fiyat uyarıları sağlama",
+ "home.feature3": "Çeşitli teknik göstergeler, analiz araçları ve gelişmiş grafikler",
+ "home.feature4": "Hedge modu ve risk yönetimi araçları",
+ "home.news": "Haberler",
+ "home.tradeGlobalMarkets": "Küresel finansal piyasalarda işlem yapın",
+ "home.downloadDesc": "Masaüstü ve mobilde çeşitli yöntemleri destekler, istediğiniz zaman ve yerde işlem yapmanıza olanak tanır",
+ "home.downloadNow": "Şimdi indir",
+ "home.company": "Şirket",
+ "home.teamIntro": "Takım tanıtımı",
+ "home.emailSupport": "E-posta iletişim desteği",
+ "home.policy": "Politika",
+ "home.userAgreement": "Kullanıcı hizmet sözleşmesi",
+ "home.riskDisclosure": "Risk açıklaması",
+ "home.amlPolicy": "Kara para aklamayla mücadele politikası",
+ "home.regulatoryLicense": "Düzenleyici lisans",
+ "home.statement": "Beyan",
+ "home.privacyStatement": "Gizlilik Beyanı",
+ "home.heroTitle1": "Kapsamlı bir finansal işlem deneyimi",
+ "home.heroFeatures1": "Güçlü platform, ultra düşük spreadler, hızlı yürütme, özel destek",
+ "home.heroTitle2": "En son teknoloji işlem teknolojisi",
+ "home.heroDesc2": "Gelişmiş işlem sistemimiz aracılığıyla, piyasa dinamiklerini doğru bir şekilde kavrayabilir ve her işlemi verimli bir şekilde gerçekleştirebilirsiniz!",
}
diff --git a/src/i18n/modules/vi.js b/src/i18n/modules/vi.js
index 490229a..1fe7fbf 100644
--- a/src/i18n/modules/vi.js
+++ b/src/i18n/modules/vi.js
@@ -25,6 +25,7 @@
register: "Đăng ký",
email: "email",
phoneNum: "Số điện thoại di động",
+ mobile: "Di động",
entryEmail: "Vui lòng nhập email của bạn",
entryPhone: "Vui lòng nhập số điện thoại của bạn",
entryAccount: "Vui lòng nhập số tài khoản",
@@ -35,6 +36,7 @@
invitCode: "Mã lời mời (tùy chọn)",
entryInvitCode: "Vui lòng nhập mã thư mời",
readAgree: "Tôi đã đọc và đồng ý",
+ agree: "Đồng ý",
serviceConf: "Điều khoản dịch vụ",
hasAccount: "Đã có tài khoản?",
goLogin: "Đi tới đăng nhập",
@@ -65,6 +67,11 @@
entryVerifyTips: "Vui lòng nhập mã xác minh gồm 6 chữ số",
forgetPassword: "Quên mật khẩu của bạn?",
login: "đăng nhập",
+ letsStartLogin: "Bắt đầu đăng nhập nào!",
+ loginByWallet: "Đăng nhập bằng ví",
+ forgot: "Quên",
+ verifyCodeLabel: "Mã xác minh",
+ codeSent: "Đã gửi",
noAccount: "Chưa có tài khoản",
bindSuccess: "Liên kết thành công",
setFundPassword: "Đặt mật khẩu quỹ",
@@ -1261,6 +1268,7 @@
"加载中": "Đang tải",
"今日（日收益）": "Hôm nay (Thu nhập hàng ngày) ",
"托管订单": "Lệnh giao dịch ký quỹ",
+ "我的投资": "Đầu tư của tôi",
"矿机规则": "Quy tắc máy đào",
"剩余天数": "Số ngày còn lại",
"已获收益": "Thu nhập kiếm được",
@@ -1576,6 +1584,10 @@
"审核未通过,请进行身份KYC认证": "Xác minh không thành công, vui lòng thực hiện xác minh KYC. ",
"审核中，前往身份KYC认证?": "Đang xét duyệt, chuyển sang xác minh KYC? ",
"合约交易": "Hợp đồng",
+ "期权交易": "Giao dịch quyền chọn",
+ "选择周期": "Chọn kỳ hạn",
+ "选择类型": "Chọn loại",
+ "搜索交易种类": "Tìm kiếm loại giao dịch",
"矿池大厅": "Nhóm khai thác",
"邀请推广": "Chương trình giới thiệu",
"身份认证": "Xác thực",
@@ -2172,6 +2184,14 @@
"昨日收益": "Doanh thu ngày hôm qua",
"托管中总订单": "Tất các khoản nắm giữ",
"托管金额": "Số tiền nắm giữ",
+ "AI理财": "Quản lý tài chính AI",
+ "收益率": "Tỷ lệ lợi nhuận",
+ "认购价格": "Giá đăng ký",
+ "立即参与": "Tham gia ngay",
+ "总投入": "Tổng đầu tư",
+ "累计收入": "Thu nhập tích lũy",
+ "每日收益": "Lợi nhuận hàng ngày",
+ "前往平台观看": "Xem trên nền tảng",
"赎回成功": "Hoàn trả thành công",
"利息": "Tiền lãi",
"利息数量": "Số tiền lãi",
@@ -2298,6 +2318,9 @@
"审核中": "Đang xét duyệt",
"开": "Mở",
"多": "Dài",
+ "兑换": "Đổi",
+ "模拟账户": "Tài khoản demo",
+ "真实账户": "Tài khoản thật",
"平": "Tất ",
"空": "Ngắn",
"币种简介": "Giới thiệu tiền tệ",
@@ -2910,4 +2933,30 @@
"三级返佣": "Giảm giá cấp ba",
"币种手续费值不合理": "Phí xử lý tiền tệ là không hợp lý",
"首日涨幅": "Tăng ngày đầu tiên",
+ "home.heroTitle": "Một nhà môi giới mà bạn có thể tin tưởng?",
+ "home.heroDesc": "Dịch vụ khách hàng xuất sắc, giá cả minh bạch và nền tảng tiên tiến nhất đã tạo dựng được danh tiếng xuất sắc",
+ "home.loan": "Khoản vay",
+ "home.aboutDesc": "Chúng tôi đã tạo ra một nền tảng giao dịch dẫn đầu về công nghệ và thân thiện với người dùng để mang đến cho bạn trải nghiệm giao dịch chu đáo và hoàn chỉnh",
+ "home.feature1": "Giao diện trực quan và dễ sử dụng",
+ "home.feature2": "Cung cấp thường xuyên các cập nhật thời gian thực và cảnh báo giá cho hơn 3.000 thị trường",
+ "home.feature3": "Nhiều chỉ báo kỹ thuật, công cụ phân tích và biểu đồ nâng cao",
+ "home.feature4": "Chế độ phòng ngừa rủi ro và công cụ quản lý rủi ro",
+ "home.news": "Tin tức",
+ "home.tradeGlobalMarkets": "Giao dịch trên thị trường tài chính toàn cầu",
+ "home.downloadDesc": "Hỗ trợ nhiều phương thức trên máy tính để bàn và di động, cho phép bạn giao dịch mọi lúc mọi nơi",
+ "home.downloadNow": "Tải xuống ngay",
+ "home.company": "Công ty",
+ "home.teamIntro": "Giới thiệu nhóm",
+ "home.emailSupport": "Hỗ trợ liên hệ qua email",
+ "home.policy": "Chính sách",
+ "home.userAgreement": "Thỏa thuận dịch vụ người dùng",
+ "home.riskDisclosure": "Tiết lộ rủi ro",
+ "home.amlPolicy": "Chính sách chống rửa tiền",
+ "home.regulatoryLicense": "Giấy phép quy định",
+ "home.statement": "Tuyên bố",
+ "home.privacyStatement": "Tuyên bố về quyền riêng tư",
+ "home.heroTitle1": "Trải nghiệm giao dịch tài chính toàn diện",
+ "home.heroFeatures1": "Nền tảng mạnh mẽ, spread siêu thấp, thực thi nhanh, hỗ trợ độc quyền",
+ "home.heroTitle2": "Công nghệ giao dịch tiên tiến",
+ "home.heroDesc2": "Thông qua hệ thống giao dịch tiên tiến của chúng tôi, bạn có thể nắm bắt chính xác động thái thị trường và thực hiện mọi giao dịch một cách hiệu quả!",
}
diff --git a/src/i18n/modules/zh-CN.js b/src/i18n/modules/zh-CN.js
index 92d0ab9..ab0e2ea 100644
--- a/src/i18n/modules/zh-CN.js
+++ b/src/i18n/modules/zh-CN.js
@@ -25,6 +25,7 @@
register: "注册",
email: "邮箱",
phoneNum: "手机号",
+ mobile: "手机",
entryEmail: "请输入邮箱",
entryPhone: "请输入手机号",
entryAccount: "请输入账号",
@@ -35,6 +36,7 @@
invitCode: "邀请码(选填)",
entryInvitCode: "请输入邀请码",
readAgree: "我已阅读并同意",
+ agree: "同意",
serviceConf: "服务条款",
hasAccount: "已有账号?",
goLogin: "去登录",
@@ -65,6 +67,11 @@
entryVerifyTips: "请输入6位验证码",
forgetPassword: "忘记密码?",
login: "登录",
+ letsStartLogin: "开始登录吧！",
+ loginByWallet: "钱包登录",
+ forgot: "忘记",
+ verifyCodeLabel: "验证码",
+ codeSent: "已发送",
noAccount: "还没有账号",
bindSuccess: "绑定成功",
setFundPassword: "设置资金密码",
@@ -1261,6 +1268,7 @@
"加载中": "加载中",
"今日（日收益）": "今日（日收益）",
"托管订单": "托管订单",
+ "我的投资": "我的投资",
"矿机规则": "矿机规则",
"剩余天数": "剩余天数",
"已获收益": "已获收益",
@@ -1576,6 +1584,10 @@
"审核未通过,请进行身份KYC认证": "审核未通过,请进行身份KYC认证",
"审核中，前往身份KYC认证?": "审核中，前往身份KYC认证?",
"合约交易": "合约交易",
+ "期权交易": "期权交易",
+ "选择周期": "选择周期",
+ "选择类型": "选择类型",
+ "搜索交易种类": "搜索交易种类",
"矿池大厅": "矿池大厅",
"邀请推广": "邀请推广",
"身份认证": "身份认证",
@@ -2003,6 +2015,8 @@
"法币交易": "法币交易",
"币币交易": "币币交易",
"账变记录": "账变记录",
+ "信用分": "信用分",
+ "评估时间": "评估时间",
"选择账户类型": "选择账户类型",
"查询": "查询",
"永续合约": "永续合约",
@@ -2172,6 +2186,16 @@
"昨日收益": "昨日收益",
"托管中总订单": "托管中总订单",
"托管金额": "托管金额",
+ "AI理财": "AI理财",
+ "您的每笔交易都是奖励!": "您的每笔交易都是奖励!",
+ "欢迎来到全新数字、贵金属交易平台": "欢迎来到全新数字、贵金属交易平台",
+ "收益率": "收益率",
+ "认购价格": "认购价格",
+ "立即参与": "立即参与",
+ "总投入": "总投入",
+ "累计收入": "累计收入",
+ "每日收益": "每日收益",
+ "前往平台观看": "前往平台观看",
"赎回成功": "赎回成功",
"利息": "利息",
"利息数量": "利息数量",
@@ -2298,6 +2322,9 @@
"审核中": "审核中",
"开": "开",
"多": "多",
+ "兑换": "兑换",
+ "模拟账户": "模拟账户",
+ "真实账户": "真实账户",
"平": "平",
"空": "空",
"币种简介": "币种简介",
@@ -2910,4 +2937,30 @@
"三级返佣": "三级返佣",
"币种手续费值不合理": "币种手续费值不合理",
"首日涨幅": "首日涨幅",
+ "home.heroTitle": "您可以信赖的经济人?",
+ "home.heroDesc": "卓越的客户服务、透明的定价和最先进的平台方面建立了卓越的声誉",
+ "home.loan": "贷款",
+ "home.aboutDesc": "我们创建了技术领先且人性化的交易平台, 为您提供贴心完善的交易体验",
+ "home.feature1": "直观易用的界面",
+ "home.feature2": "定期提供 3,000多个市场的实时更新和价格警报",
+ "home.feature3": "各种技术指标分析工具和高级图表",
+ "home.feature4": "套期保值模式和风险管理工具",
+ "home.news": "新闻",
+ "home.tradeGlobalMarkets": "交易全球金融市场",
+ "home.downloadDesc": "支持桌面端与移动端多种方式,您可随时随地开展交易",
+ "home.downloadNow": "立即下载",
+ "home.company": "公司",
+ "home.teamIntro": "团队介绍",
+ "home.emailSupport": "邮箱联系支持",
+ "home.policy": "政策",
+ "home.userAgreement": "用户服务协议",
+ "home.riskDisclosure": "风险提示",
+ "home.amlPolicy": "反洗钱政策",
+ "home.regulatoryLicense": "监管许可证",
+ "home.statement": "声明",
+ "home.privacyStatement": "隐私声明",
+ "home.heroTitle1": "一应俱全的金融交易体验",
+ "home.heroFeatures1": "强大平台,超低点差,快速执行,专属支持",
+ "home.heroTitle2": "顶尖交易技术",
+ "home.heroDesc2": "通过我们的先进交易系统,您可以精准把握市场动态,高效执行每一笔交易!",
}
diff --git a/src/main.js b/src/main.js
index 5eee785..a854518 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,14 +14,26 @@
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
pinia.use(piniaPluginPersistedstate)
-const app = createApp(App)
-const title = import.meta.env.VITE_APP__TITLE
-app.config.globalProperties.$title = title
-document.title = title
-app.use(fxHeader)
-app.use(i18n)
-app.use(router)
-app.use(pinia)
-app.use(store)
+// 生产环境且为 PC 端时跳转到 PC 站
+const PC_SITE_URL = 'https://wealthinfrapc.eledrink.com'
+function isPc() {
+ if (typeof navigator === 'undefined') return false
+ const ua = navigator.userAgent || ''
+ const mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile/i.test(ua)
+ return !mobile
+}
+if (import.meta.env.PROD && isPc()) {
+ window.location.href = PC_SITE_URL
+} else {
+ const app = createApp(App)
+ const title = import.meta.env.VITE_APP__TITLE
+ app.config.globalProperties.$title = title
+ document.title = title
+ app.use(fxHeader)
+ app.use(i18n)
+ app.use(router)
+ app.use(pinia)
+ app.use(store)
-app.mount('#app')
\ No newline at end of file
+ app.mount('#app')
+}
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index d2802e2..f1ad650 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -6,11 +6,22 @@
{
path: '/',
children: [
- { path: '', redirect: '/quotes' },
+ { path: '', redirect: '/home' },
{
path: '/login',
name: 'Login',
component: () => import(/* webpackChunkName: "login" */ '@/views/login/index.vue'),
+ },
+ {
+ path: '/home',
+ name: 'Home',
+ meta: {
+ tarbar: true,
+ },
+ component: () => import('@/views/Layout.vue'),
+ children: [
+ { path: '', meta: { tarbar: true }, name: 'homeIndex', component: () => import(/* webpackChunkName: "home" */ '@/views/home/index.vue') },
+ ]
},
{
path: '/optional',
@@ -46,6 +57,7 @@
{ path: 'hotModules', meta: { tarbar: true }, component: () => import(/* webpackChunkName: "hotModules" */ '@/views/quotes/HotModules.vue') },
{ path: 'openTrade', meta: { tarbar: false, }, component: () => import(/* webpackChunkName: "openTrade" */ '@/views/quotes/OpenTrade.vue') },
{ path: 'UsStockMore', meta: { tarbar: false }, component: () => import(/* webpackChunkName: "UsStockMore" */ '@/views/quotes/UsStockMore.vue') },
+ { path: 'market', meta: { tarbar: true }, component: () => import(/* webpackChunkName: "market" */ '@/views/quotes/Market.vue') },
]
},
@@ -56,10 +68,11 @@
tarbar: true,
requireAuth: true
},
- redirect: '/trade/index',
+ redirect: '/trade/options',
component: () => import('@/views/Layout.vue'),
children: [
{ path: 'index', meta: { tarbar: true }, name: 'tradeIndex', component: () => import(/* webpackChunkName: "trade" */ /* webpackPrefetch: true */'@/views/trade/index.vue') },
+ { path: 'options', meta: { tarbar: true }, name: 'tradeOptions', component: () => import(/* webpackChunkName: "options" */ '@/views/trade/Options.vue') },
]
},
{
@@ -118,7 +131,7 @@
redirect: '/news/index',
component: () => import('@/views/Layout.vue'),
children: [
- { path: 'index', meta: { tarbar: true }, component: () => import(/* webpackChunkName: "news" */ '@/views/news/index.vue') },
+ { path: 'index', meta: { tarbar: false }, component: () => import(/* webpackChunkName: "news" */ '@/views/news/index.vue') },
]
},
{
@@ -378,6 +391,7 @@
{
path: "fund",
name: "Fund",
+ meta: { tarbar: true },
component: () =>
import(/* webpackChunkName: "Fund" */ "@/views/cryptos/financialManagement/fundHome.vue"),
},
@@ -386,6 +400,12 @@
name: "Fundrule",
component: () =>
import(/* webpackChunkName: "Fundrule" */ "@/views/cryptos/financialManagement/fundRule.vue"),
+ },
+ {
+ path: "fund-orders",
+ name: "FundOrders",
+ component: () =>
+ import(/* webpackChunkName: "FundOrders" */ "@/views/cryptos/financialManagement/fundOrders.vue"),
},
{
path: "fm-home",
@@ -665,7 +685,8 @@
component: () => import('@/views/Layout.vue'),
meta: { tarbar: true },
children: [
- { path: 'index', meta: { tarbar: true, }, component: () => import(/* webpackChunkName: "my" */ /* webpackPrefetch: true */'@/views/my/index.vue') }
+ { path: 'index', meta: { tarbar: false, requireAuth: true }, component: () => import(/* webpackChunkName: "my" */ /* webpackPrefetch: true */'@/views/my/index.vue') },
+ { path: 'creditScore', meta: { tarbar: false, requireAuth: true }, component: () => import(/* webpackChunkName: "my" */'@/views/my/creditScore.vue') }
]
},
{
diff --git a/src/service/upload.api.js b/src/service/upload.api.js
index 684e967..5cec912 100644
--- a/src/service/upload.api.js
+++ b/src/service/upload.api.js
@@ -1,7 +1,7 @@
// 图片上传
import axios from "axios";
import { showFailToast } from "vant";
-import { IMG_PATH } from '@/config'
+import { HOST_URL } from '@/config'
import { compress } from 'image-conversion';
export const _uploadImage = (file, callback) => {
@@ -19,8 +19,8 @@
compress(file.file, comp).then(res => {
const formData = new FormData()
formData.append('file', res)
- console.log(IMG_PATH)
- axios.post(`${IMG_PATH}/api/uploadFile`,
+ console.log(HOST_URL)
+ axios.post(`${HOST_URL}/api/uploadFile`,
formData,
{
timeout: 10000,
diff --git a/src/service/user.api.js b/src/service/user.api.js
index b472c7d..a907c33 100644
--- a/src/service/user.api.js
+++ b/src/service/user.api.js
@@ -1,3 +1,4 @@
+import axios from 'axios'
import request from './request'
import {
METHODS
@@ -260,6 +261,12 @@
})
};
+// 新闻列表：完整域名，直接用 axios 请求（不经过 request 封装）
+const US_HEAD_NEWS_URL = 'https://blueapi.shenliankeji.top/api/news!getUsHeadNews.action'
+export const _getUsHeadNews = (params = {}) => {
+ return axios.get(US_HEAD_NEWS_URL, { params }).then(res => res.data)
+};
+
//获取新闻列表(首页新闻轮播)
export const _getNewsList1 = (params) => {
return request({
@@ -333,6 +340,23 @@
params,
})
}
+
+// 切换模拟账户
+export const _switchAccount = () => {
+ return request({
+ url: `${API_PREFIX}/user/switchAccount`,
+ method: METHODS.GET,
+ })
+}
+
+// 重置模拟资金
+export const _resetSimFunds = () => {
+ return request({
+ url: `${API_PREFIX}/user/resetSimFunds`,
+ method: METHODS.POST,
+ })
+}
+
//判断后台是否开启谷歌验证
export const _getIsGoogleAuth = (params) => {
return request({
diff --git a/src/store/modules/home.store.js b/src/store/modules/home.store.js
index f6626d3..29c05aa 100644
--- a/src/store/modules/home.store.js
+++ b/src/store/modules/home.store.js
@@ -18,15 +18,16 @@
},
mutations: {
[SET_COIN_LIST](state, list) {
- state.coinList = list;
+ state.coinList = list && Array.isArray(list) ? list : [];
},
[SET_CURRENCY](state, currency) {
state.currency = currency;
},
- [SET_COIN_SYMBOL_ARR](state, list = []) {
+ [SET_COIN_SYMBOL_ARR](state, list) {
+ const safeList = list && Array.isArray(list) ? list : []
const arr = []
const hots = []
- list.map(item => {
+ safeList.map(item => {
arr.push(item.symbol)
if (item.isTop === '1') { // 热门
hots.push(item.symbol)
@@ -38,11 +39,15 @@
},
actions: {
async [SET_COIN_LIST]({ commit }, data) { // 获取配置的币种
- const list = await _getCoins({ type: data }).catch(err => { Promise.reject(err) })
- commit(SET_COIN_SYMBOL_ARR, list) // 原数据
- commit(SET_COIN_LIST, list) // 拆分的单个数据
- Promise.resolve(list)
-
+ let list = []
+ try {
+ const res = await _getCoins({ type: data })
+ list = res && Array.isArray(res) ? res : []
+ } catch (err) {
+ list = []
+ }
+ commit(SET_COIN_SYMBOL_ARR, list)
+ commit(SET_COIN_LIST, list)
},
async [SET_CURRENCY]({ commit }) { // 设置汇率
const currency = await _getExchangeRate().catch(err => Promise.reject(err))
diff --git a/src/store/theme.js b/src/store/theme.js
index 1ba52c3..64fc1b5 100644
--- a/src/store/theme.js
+++ b/src/store/theme.js
@@ -5,7 +5,7 @@
// state 持久化
persist: true,
state: () => ('theme', {
- theme: getStorage('theme') || 'dark' // 默认使用黑夜模式
+ theme: getStorage('theme') || 'white' // 默认使用白天模式
}),
getters: {
},
diff --git a/src/views/cryptos/AboutUs/index.vue b/src/views/cryptos/AboutUs/index.vue
index 263d7ef..777d015 100644
--- a/src/views/cryptos/AboutUs/index.vue
+++ b/src/views/cryptos/AboutUs/index.vue
@@ -63,11 +63,11 @@
}
.CommonProblem-padding {
- padding-left: 35px;
- padding-right: 35px;
+ padding-left: 2rem;
+ padding-right: 2rem;
font-weight: 400;
- font-size: 30px;
- line-height: 35px;
+ font-size: 2.4rem;
+ line-height: 3.2rem;
color: $text_color;
}
diff --git a/src/views/cryptos/Exchange/exchangeSubmit.vue b/src/views/cryptos/Exchange/exchangeSubmit.vue
index a3de33d..d396315 100644
--- a/src/views/cryptos/Exchange/exchangeSubmit.vue
+++ b/src/views/cryptos/Exchange/exchangeSubmit.vue
@@ -53,7 +53,7 @@
</p>
<div class="h-24 rounded flex justify-between px-8 box-border items-center mt-24 mb-12 text-white w-full">
<p class="but rounded flex justify-center items-center bgDark"
- @click="route('/quotes/index?tabActive=1')">
+ @click="route('/')">
{{ $t('返回首页') }}</p>
<p class="but rounded btnMain text-white flex justify-center items-center"
@click="route('/cryptos/exchangeHistory')">
diff --git a/src/views/cryptos/PerpetualContract/index.vue b/src/views/cryptos/PerpetualContract/index.vue
index 8d0cf65..a56b5b5 100644
--- a/src/views/cryptos/PerpetualContract/index.vue
+++ b/src/views/cryptos/PerpetualContract/index.vue
@@ -360,11 +360,6 @@
this.type = this.$route.query.type
}
await this.SET_COIN_LIST(this.type)
- // _getBalance().then(data => { // 获取用户余额
- // this.$store.commit('user/SET_USERINFO', { balance: data.money })
- // // const { money } = data
- // // this.balance = money
- // })
if (this.userInfo.token) {
this.getBalance()
this.timerMoeny = setInterval(() => {
@@ -616,10 +611,6 @@
type: 'orders',
page_no: 1
}).then(data => {
- // if (typeof this.timer === 'string') {
- // this.timer = null
- // return
- // }
this.orderCur = data
})
}, 1000)
@@ -639,10 +630,6 @@
})
this.timer = setInterval(() => {
contractOrder(obj).then(data => {
- // if (typeof this.timer === 'string') {
- // this.timer = null
- // return
- // }
// this.orderHold = data
this.orderHold = data.sort(this.sortData);
})
@@ -657,10 +644,6 @@
})
this.timer = setInterval(() => {
_futrueOrderList(symbol, 'orders', 1, 'cryptos').then(data => {
- // if (typeof this.timer === 'string') {
- // this.timer = null
- // return
- // }
// this.futrueHold = data
this.futrueHold = data.sort(this.sortData);
})
diff --git a/src/views/cryptos/Recharge/rechargeList.vue b/src/views/cryptos/Recharge/rechargeList.vue
index c1df49d..29fa6ce 100644
--- a/src/views/cryptos/Recharge/rechargeList.vue
+++ b/src/views/cryptos/Recharge/rechargeList.vue
@@ -29,7 +29,7 @@
</div>
</div>
</div>
- <div class="textColor mt-10">
+ <!-- <div class="textColor mt-10">
<div class="pl-9 pr-9 h-20 border-b-color flex justify-between text-28" v-for="(item, index) in list" :key="index"
@click="toPath(item.url)">
<div class="flex items-center">
@@ -40,7 +40,7 @@
<van-icon class="textColor1" name="arrow" />
</div>
</div>
- </div>
+ </div> -->
</div>
</div>
</template>
diff --git a/src/views/cryptos/financialManagement/FinancialManagementConfirm.vue b/src/views/cryptos/financialManagement/FinancialManagementConfirm.vue
index 7935dee..6ab7ee6 100644
--- a/src/views/cryptos/financialManagement/FinancialManagementConfirm.vue
+++ b/src/views/cryptos/financialManagement/FinancialManagementConfirm.vue
@@ -10,8 +10,12 @@
<div class="flex flex-1 text-28">
<input type="number" v-model="data.amount" disabled
class="disabInput h-24 pl-8 w-full border-none text-grey inputBackground textColor">
- <div class="h-24 w-32 inputBackground textColor flex items-center">USDT </div>
+ <div class="h-24 w-32 inputBackground textColor flex items-center justify-center">USDT </div>
</div>
+ </div>
+ <div class="flex justify-between flex-row items-center h-18">
+ <div class="text-32 font-normal text-grey">{{ $t('币种') }}</div>
+ <div class="text-32 font-normal textColor">{{ data.buyCurrency.toUpperCase() }}</div>
</div>
<div class="flex justify-between flex-row items-center h-18">
<div class="text-32 font-normal text-grey">{{ $t('预期收益') }}</div>
@@ -81,7 +85,8 @@
confirmFundOrder({
session_token: this.data.session_token,
financeId: this.data.financeId,
- amount: this.data.amount
+ amount: this.data.amount,
+ buyCurrency: this.data.buyCurrency
}).then((res) => {
//console.log('订单确认成功', res)
this.$router.push({
diff --git a/src/views/cryptos/financialManagement/fundBuy.vue b/src/views/cryptos/financialManagement/fundBuy.vue
index 990d278..5e762cb 100644
--- a/src/views/cryptos/financialManagement/fundBuy.vue
+++ b/src/views/cryptos/financialManagement/fundBuy.vue
@@ -1,15 +1,17 @@
<template>
<div id="cryptos">
<div id="financialOrder" class="fundBuy">
- <assets-head :title="$i18n.locale === 'CN' || $i18n.locale === 'zh-CN' ? data.name_cn : data.name_en"></assets-head>
+ <assets-head
+ :title="$i18n.locale === 'CN' || $i18n.locale === 'zh-CN' ? data.name_cn : data.name_en"></assets-head>
<div class="box-border ">
<div class="w-full h-1 bgDark"></div>
<div class="mt-12 text-36 font-semibold px-8 textColor">{{ $t('购买金额') }}</div>
<div class="flex justify-center mt-4">
<div class="flex flex-1 px-8">
<input :placeholder="$t('输入金额')" type="number" v-model="form.amount"
- class="h-20 pl-8 w-full border-none inputBackground textColor text-28" @input="debounceFn">
- <div class="h-20 w-48 flex inputBackground textColor text-28 items-center pr-1" @click="form.amount = bal">
+ class="h-20 pl-8 w-full border-none inputBackground textColor text-28 mr-5" @input="debounceFn">
+ <div class="h-20 w-60 flex inputBackground textColor text-28 items-center pr-5 pl-5"
+ @click="form.amount = bal">
USDT <span class="colorMain pl-2" @click="handleAll">{{ $t('全部') }}</span></div>
</div>
</div>
@@ -30,7 +32,21 @@
<div class="text-32 font-normal text-grey">{{ $t('最大可投') }}</div>
<div class="text-32 font-bold textColor">{{ data.investment_max }} USDT</div>
</div>
+
+ <div class="flex justify-between items-center h-18 mb-2">
+ <div class="text-32 font-normal text-grey">{{ $t('币种') }}</div>
+ <select v-model="form.buyCurrency"
+ class="text-32 textColor inputBackground px-4 py-2 rounded border-none focus:outline-none">
+ <option value="btc">BTC</option>
+ <option value="eth">ETH</option>
+ <option value="xaut">XAUT</option>
+ <option value="doge">DOGE</option>
+ <option value="sol">SOL</option>
+ <option value="xrp">XRP</option>
+ </select>
+ </div>
</div>
+
<div class="h-3 px-8 mt-20 mb-5 textColor text-28">{{ $t('概览') }}</div>
<div class="px-8">
<div class="flex justify-between items-center h-20">
@@ -78,7 +94,7 @@
import { fundMakeOrder } from '@/service/financialManagement.api.js'
import dayjs from 'dayjs'
import { showToast } from 'vant';
-import {debounce} from "@/utils/utis.js";
+import { debounce } from "@/utils/utis.js";
export default {
name: "funBuy",
@@ -95,6 +111,7 @@
form: {
financeId: '',
amount: '',
+ buyCurrency: 'btc',
},
}
},
@@ -107,11 +124,11 @@
return
}
if (this.form.amount < this.data.investment_min) {
- showToast(this.$t('最小支付金额不能低于')+this.data.investment_min )
+ showToast(this.$t('最小支付金额不能低于') + this.data.investment_min)
return
}
if (this.form.amount > this.data.investment_max) {
- showToast(this.$t('最大支付金额不能超过')+this.data.investment_max )
+ showToast(this.$t('最大支付金额不能超过') + this.data.investment_max)
return
}
fundMakeOrder(this.form).then(res => {
@@ -124,7 +141,7 @@
return
}
fundMakeOrder(this.form).then(res => {
- //console.log('认购', res)
+ console.log('认购', res)
this.$router.push(
{ path: '/cryptos/financial-confirm', query: { ...res } })
})
diff --git a/src/views/cryptos/financialManagement/fundHome.vue b/src/views/cryptos/financialManagement/fundHome.vue
index d8331e9..b2eb9f4 100644
--- a/src/views/cryptos/financialManagement/fundHome.vue
+++ b/src/views/cryptos/financialManagement/fundHome.vue
@@ -1,68 +1,59 @@
<template>
- <div id="fundHome">
- <div class="fundHome">
- <assets-head :title="$t('基金理财')"></assets-head>
- <div class="box-border px-8 mt-10">
- <div class="flex justify-between text-grey relative">
- <div class="flex flex-col">
- <span class="text-grey text-30">{{ $t('托管金额') }}（USDT）</span>
- <span class="text-66 mt-5 font-bold textColor">{{ statiscis.amount_sum }}</span>
- </div>
- </div>
- <div class="flex mt-11 justify-between text-26 mb-2">
- <div class="flex flex-col ">
- <div class="text-grey text-26">{{ $t('预计日收益') }}（USDT）</div>
- <div class="mt-4 mb-2 text-36 textColor">{{ statiscis.today_profit }}</div>
- </div>
- <div class="flex flex-col">
- <div class="text-grey text-26">{{ $t('累计收益') }}（USDT）</div>
- <div class="mt-4 mb-2 text-36 textColor">{{ statiscis.aready_profit }}</div>
- </div>
- <div class="flex flex-col">
- <div class="text-grey text-26">{{ $t('托管订单') }}（USDT）</div>
- <div class="mt-4 mb-2 text-36 textColor">{{ statiscis.order_sum }}</div>
- </div>
+ <div id="fundHome" class="fund-home-page">
+ <!-- 头部：左侧标题 AI理财，右侧图标跳转托管订单 -->
+ <div class="page-header">
+ <h1 class="header-title">{{ $t('AI理财') }}</h1>
+ <div class="header-right" @click="$router.push('/cryptos/fund-orders')">
+ <div class="order-icon">
+ <span class="line"></span>
+ <span class="line"></span>
+ <span class="line"></span>
</div>
</div>
- <div class="flex justify-between box-border px-8 mt-10">
- <div @click="$router.push('/cryptos/funds?tab=3&index=0&type=cryptos')"
- class="greyBg textColor w-96 py-3 rounded-md text-center text-28 mr-5 active">{{ $t('托管订单') }}
- </div>
- <div @click="$router.push('/cryptos/fund-rule')"
- class="greyBg text-grey w-96 py-3 rounded-md text-center text-28">
- {{ $t('规则') }}</div>
- </div>
- <div class="px-8 mt-10 pb-20">
- <div v-for="(item, index) in list" :key="index"
- class="card flex justify-between items-center relative rounded-md borderColor financialBackground ">
- <div class="title absolute px-4 py-2 text-26 text-white bg-green top-0 left-22">{{ $t('日收益率')
- }} <span class="ml-2">{{ item.daily_rate }}%</span></div>
- <div class="flex justify-center items-center">
- <img class="w-32 h-32 mr-5" :src="item.img" alt="">
- <div class="flex flex-col items-start">
- <span class="text-36 font-semibold textColor">
- <template v-if="$i18n.locale === 'CN'">
- {{ item.name_cn }}
- </template>
- <template v-else-if="$i18n.locale === 'zh-CN'">
- {{ item.name }}
- </template>
- <template v-else>
- {{ item.name_en }}
- </template>
- </span>
- <span class="text-26 mt-6 mb-4 textColor">{{ $t('限额') }} {{ item.investment_min + ' ~ ' +
- item.investment_max }}
- USDT</span>
- <span class="text-26 textColor">{{ $t('周期') }} {{ item.cycle }} {{ $t('天') }}</span>
- </div>
+ </div>
+
+ <!-- 轮播图：简体/繁体用原图，其他语言用 _e 图 -->
+ <div class="banner-swipe">
+ <van-swipe class="banner-swipe__wrap" :autoplay="4000" indicator-color="#92D1FF">
+ <van-swipe-item>
+ <img :src="bannerImgs[0]" alt="" class="banner-img" />
+ </van-swipe-item>
+ <van-swipe-item>
+ <img :src="bannerImgs[1]" alt="" class="banner-img" />
+ </van-swipe-item>
+ <van-swipe-item>
+ <img :src="bannerImgs[2]" alt="" class="banner-img" />
+ </van-swipe-item>
+ </van-swipe>
+ </div>
+
+ <!-- 理财产品卡片列表 -->
+ <div class="product-list">
+ <div v-for="(item, index) in list" :key="index" class="product-card">
+ <div class="card-top">
+ <div class="card-title-row">
+ <img class="product-icon" :src="item.img" alt="" />
+ <span class="product-name textColor">
+ <template v-if="$i18n.locale === 'CN'">{{ item.name_cn }}</template>
+ <template v-else-if="$i18n.locale === 'zh-CN'">{{ item.name }}</template>
+ <template v-else>{{ item.name_en }}</template>
+ </span>
</div>
- <div @click="$router.push({
- path: '/cryptos/fund-buy',
- query: {
- ...item
- }
- })" class="active py-4 px-8 text-30 font-semibold rounded-md">{{ $t('立即买入') }}</div>
+ <div class="cycle-tag">{{ item.cycle }}{{ $t('天') }}</div>
+ </div>
+
+ <div class="card-body">
+ <div class="info-row">
+ <span class="label textColor1">{{ $t('收益率') }}</span>
+ <span class="value textColor">{{ item.daily_rate }}%</span>
+ </div>
+ <div class="info-row">
+ <span class="label textColor1">{{ $t('认购价格') }}</span>
+ <span class="value textColor">{{ item.investment_min }}-{{ item.investment_max }} USD</span>
+ </div>
+ </div>
+ <div class="join-btn" @click="$router.push({ path: '/cryptos/fund-buy', query: { ...item } })">
+ {{ $t('立即参与') }}
</div>
</div>
</div>
@@ -70,79 +61,215 @@
</template>
<script>
-import assetsHead from '@/components/Transform/assets-head/index.vue';
+import { Swipe, SwipeItem } from 'vant'
import { financeStatics, getfinacialProductsList } from "@/service/financialManagement.api.js";
+import banner1 from '@/assets/image/fund/banner1.jpg'
+import banner2 from '@/assets/image/fund/banner2.jpg'
+import banner3 from '@/assets/image/fund/banner3.jpg'
+import banner1E from '@/assets/image/fund/banner1_e.jpg'
+import banner2E from '@/assets/image/fund/banner2_e.jpg'
+import banner3E from '@/assets/image/fund/banner3_e.jpg'
export default {
name: "fundHome",
components: {
- assetsHead,
+ [Swipe.name]: Swipe,
+ [SwipeItem.name]: SwipeItem
},
data() {
return {
statiscis: {},
- list: []
+ list: [],
+ bannerImgsZh: [banner1, banner2, banner3],
+ bannerImgsEn: [banner1E, banner2E, banner3E]
}
},
- methods: {
+ computed: {
+ // 简体中文(zh-CN)或繁体(CN)用原图，其他语言用 _e 图
+ bannerImgs() {
+ const locale = this.$i18n?.locale || ''
+ const isZh = locale === 'zh-CN' || locale === 'CN'
+ return isZh ? this.bannerImgsZh : this.bannerImgsEn
+ }
},
activated() {
getfinacialProductsList().then(res => {
- //console.log('理财列表', res)
- this.list = res
+ this.list = res || []
})
financeStatics().then(res => {
- //console.log('理财统计', res)
- this.statiscis = res
+ this.statiscis = res || {}
})
},
created() {
getfinacialProductsList().then(res => {
- //console.log('理财列表',res)
- this.list = res
+ this.list = res || []
})
financeStatics().then(res => {
- //console.log('理财统计',res)
- this.statiscis = res
+ this.statiscis = res || {}
})
}
}
</script>
<style lang="scss" scoped>
-#fundHome {
+@import '@/assets/css/variable.scss';
- .fundHome {
- width: 100%;
- box-sizing: border-box;
- }
+.fund-home-page {
+ min-height: 100vh;
+ background: $main_background;
+ padding-bottom: 4rem;
+ box-sizing: border-box;
+}
- .active {
+.page-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 8.8rem;
+ padding: 0 2.4rem;
+ background: #fff;
+ box-sizing: border-box;
+
+ .header-title {
+ font-size: 3.4rem;
+ font-weight: 700;
color: $text_color;
-
- // @include themify() {
- // background: themed("btn_main") !important;
- // }
-
- // @include themify() {
- // border-color: themed("btn_main") !important;
- // }
-
+ margin: 0;
}
- .title {
- border-radius: 0 0 8px 8px;
+ .header-right {
+ width: 4rem;
+ height: 4rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
}
- .card {
- padding: 80px 22px 22px 22px;
- margin-bottom: 32px;
+ .order-icon {
+ width: 3.2rem;
+ height: 3.2rem;
+ border: 0.15rem solid $text_color1;
+ border-radius: 0.6rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 0.35rem;
+
+ .line {
+ display: block;
+ width: 1.6rem;
+ height: 0.12rem;
+ background: $text_color1;
+ border-radius: 0.06rem;
+ }
+ }
+}
+
+.banner-swipe {
+ margin: 2rem 2.4rem;
+ border-radius: 1.2rem;
+ overflow: hidden;
+}
+
+.banner-swipe__wrap {
+ border-radius: 1.2rem;
+}
+
+.banner-swipe__wrap :deep(.van-swipe-item) {
+ width: 100%;
+}
+
+.banner-img {
+ width: 100%;
+ height: auto;
+ display: block;
+ object-fit: cover;
+}
+
+.product-list {
+ padding: 0 2.4rem 4rem;
+}
+
+.product-card {
+ background: #fff;
+ border-radius: 1.2rem;
+ padding: 2.2rem 2rem 2rem;
+ margin-bottom: 2rem;
+ box-shadow: 0rem .8rem 3.2rem 0rem rgba(0, 0, 0, .16);
+ border: 0.1rem solid $border_color;
+ box-sizing: border-box;
+}
+
+.card-top {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 2rem;
+}
+
+.card-title-row {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.product-icon {
+ width: 4rem;
+ height: 4rem;
+ border-radius: 0.8rem;
+ object-fit: cover;
+}
+
+.product-name {
+ font-size: 2.4rem;
+ font-weight: 600;
+}
+
+.cycle-tag {
+ background: #0cc38d;
+ color: #fff;
+ font-size: 1.4rem;
+ padding: 0.6rem 4rem;
+ border-radius: .8rem;
+}
+
+.card-body {
+ margin-bottom: 2rem;
+ border-top: solid 1px #f3f3f3;
+ margin-top: 2.4rem;
+ padding-top: 2.4rem;
+}
+
+.info-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem 0;
+ font-size: 2.2rem;
+
+ .label {
+ color: $text_color1;
}
- .active {
- color: $white;
- background: $btn_main;
- border-color: $btn_main;
+ .value {
+ color: $text_color;
}
}
+
+.join-btn {
+ width: 100%;
+ height: 6rem;
+ line-height: 6rem;
+ text-align: center;
+ background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+ color: #fff;
+ font-size: 2.2rem;
+ font-weight: 500;
+ border-radius: 1rem;
+ cursor: pointer;
+ border: none;
+ box-sizing: border-box;
+}
</style>
diff --git a/src/views/cryptos/financialManagement/fundOrders.vue b/src/views/cryptos/financialManagement/fundOrders.vue
new file mode 100644
index 0000000..ee57113
--- /dev/null
+++ b/src/views/cryptos/financialManagement/fundOrders.vue
@@ -0,0 +1,280 @@
+<template>
+ <div id="cryptos" class="fund-orders-page">
+ <assets-head :title="$t('我的投资')" :back-func="backFunc" />
+
+ <!-- 上半部分：数据展示卡片（参照 financial.vue 数据） -->
+ <div class="data-card">
+ <div class="data-row">
+ <span class="data-label">{{ $t('总投入') }}</span>
+ <span class="data-value">{{ formatAmount(statiscis.amount_sum) }} USD</span>
+ </div>
+ <div class="data-row">
+ <span class="data-label">{{ $t('累计收入') }}</span>
+ <span class="data-value">{{ formatAmount(statiscis.aready_profit) }} USD</span>
+ </div>
+ <div class="data-row">
+ <span class="data-label">{{ $t('每日收益') }}</span>
+ <span class="data-value">{{ formatAmount(statiscis.today_profit) }} USD</span>
+ </div>
+ </div>
+
+ <!-- 下半部分：Tab + 列表（参照 FinancialHistory） -->
+ <div class="tabs-wrap">
+ <div class="tabs-bar">
+ <div
+ v-for="(tab, idx) in tabList"
+ :key="idx"
+ class="tab-item"
+ :class="{ active: activeTab === idx }"
+ @click="onTab(idx)"
+ >
+ {{ tab }}
+ </div>
+ </div>
+ <div class="list-wrap">
+ <van-pull-refresh
+ v-model="isLoading"
+ :pulling-text="$t('下拉即可刷新')"
+ :loosing-text="$t('释放即可刷新')"
+ :loading-text="$t('加载中')"
+ @refresh="onRefresh"
+ >
+ <van-list
+ v-model:loading="loading"
+ :finished="finished"
+ :finished-text="$t('没有更多了')"
+ @load="onLoad"
+ >
+ <template v-if="list.length">
+ <financial-list
+ :list="list"
+ :type="0"
+ :btnShow="activeTab === 0"
+ :goBack="true"
+ />
+ </template>
+ <div v-else class="empty-state">
+ <img src="@/assets/image/kong.png" alt="" class="empty-icon" />
+ <div class="empty-text">{{ $t('暂无数据') }}</div>
+ </div>
+ </van-list>
+ </van-pull-refresh>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import assetsHead from '@/components/Transform/assets-head/index.vue'
+import financialList from '@/components/Transform/assetsCenter/financialList.vue'
+import { financeStatics, getfinacialProductsBought } from '@/service/financialManagement.api.js'
+import { _fundRecord } from '@/service/fund.api'
+import { List, PullRefresh } from 'vant'
+
+export default {
+ name: 'FundOrders',
+ components: {
+ assetsHead,
+ financialList,
+ [List.name]: List,
+ [PullRefresh.name]: PullRefresh
+ },
+ data() {
+ return {
+ statiscis: {},
+ activeTab: 0,
+ tabList: [this.$t('购买'), this.$t('赎回'), this.$t('利息')],
+ list: [],
+ page: 1,
+ loading: false,
+ finished: false,
+ isLoading: false
+ }
+ },
+ methods: {
+ formatAmount(v) {
+ if (v == null || v === '') return '0.0000'
+ const n = Number(v)
+ return isNaN(n) ? '0.0000' : n.toFixed(4)
+ },
+ backFunc() {
+ this.$router.push('/cryptos/fund')
+ },
+ onTab(idx) {
+ this.activeTab = idx
+ this.init()
+ },
+ onRefresh() {
+ this.init()
+ },
+ onLoad() {
+ // 防止与 init() 触发的首次加载重复
+ if (this.loading) return
+ this.fetchList()
+ },
+ init() {
+ this.page = 1
+ this.list = []
+ this.finished = false
+ this.fetchStatiscis()
+ this.loading = true
+ this.fetchList()
+ },
+ fetchStatiscis() {
+ financeStatics().then((res) => {
+ this.statiscis = res || {}
+ }).catch(() => {
+ this.statiscis = {}
+ })
+ },
+ fetchList() {
+ // 与 FinancialHistory 一致：0=购买(state 1)，1=赎回(state 2)，2=利息
+ if (this.activeTab === 0) {
+ getfinacialProductsBought({ page_no: this.page, state: '1' }).then((res) => {
+ this.handleListData(res)
+ }).catch(() => {
+ this.isLoading = false
+ this.loading = false
+ this.finished = true
+ })
+ } else if (this.activeTab === 1) {
+ getfinacialProductsBought({ page_no: this.page, state: '2' }).then((res) => {
+ this.handleListData(res)
+ }).catch(() => {
+ this.isLoading = false
+ this.loading = false
+ this.finished = true
+ })
+ } else {
+ _fundRecord('finance', this.page, 'finance_profit').then((res) => {
+ this.handleListData(res)
+ }).catch(() => {
+ this.isLoading = false
+ this.loading = false
+ this.finished = true
+ })
+ }
+ },
+ handleListData(data) {
+ this.isLoading = false
+ const list = Array.isArray(data) ? data : []
+ this.list = this.list.concat(list)
+ this.loading = false
+ if (list.length < 10) this.finished = true
+ this.page++
+ }
+ },
+ created() {
+ this.tabList = [this.$t('购买'), this.$t('赎回'), this.$t('利息')]
+ if (this.$route.query.tab != null) {
+ this.activeTab = Number(this.$route.query.tab) || 0
+ }
+ },
+ mounted() {
+ this.fetchStatiscis()
+ this.init()
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/css/variable.scss';
+
+.fund-orders-page {
+ min-height: 100vh;
+ background: $main_background;
+ padding-bottom: 6rem;
+ box-sizing: border-box;
+}
+
+/* 上半数据卡片：按图片样式 */
+.data-card {
+ margin: 2rem 2.4rem;
+ padding: 2.4rem 2rem;
+ background: #fff;
+ border-radius: 1.2rem;
+ box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.06);
+ border: 0.1rem solid #f0f0f0;
+
+ .data-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1.2rem 0;
+ font-size: 2.8rem;
+ border-bottom: 0.1rem solid #f5f5f5;
+
+ &:last-child {
+ border-bottom: none;
+ }
+
+ .data-label {
+ color: $text_color1;
+ }
+
+ .data-value {
+ font-weight: 600;
+ color: $text_color;
+ font-size: 3rem;
+ }
+ }
+}
+
+/* 下半 Tab 栏：按图片样式 */
+.tabs-wrap {
+ margin: 0 2.4rem;
+ background: #fff;
+ border-radius: 1.2rem;
+ overflow: hidden;
+ box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.06);
+}
+
+.tabs-bar {
+ display: flex;
+ padding: 0.6rem;
+ gap: 0.6rem;
+ background: #fff;
+ border-bottom: 0.1rem solid #f0f0f0;
+
+ .tab-item {
+ flex: 1;
+ text-align: center;
+ padding: 1.2rem 0.8rem;
+ font-size: 2.6rem;
+ color: $text_color1;
+ border-radius: 0.8rem;
+ transition: all 0.2s ease;
+ cursor: pointer;
+
+ &.active {
+ background: #e8e8e8;
+ color: $text_color;
+ font-weight: 500;
+ }
+ }
+}
+
+.list-wrap {
+ min-height: 20rem;
+ padding: 1rem 0;
+}
+
+.empty-state {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 4rem 2rem;
+
+ .empty-icon {
+ margin-bottom: 1.6rem;
+ opacity: 0.5;
+ width: 8rem;
+ }
+
+ .empty-text {
+ font-size: 2.8rem;
+ color: $text_color1;
+ }
+}
+</style>
diff --git a/src/views/cryptos/financialManagement/orderSuccess.vue b/src/views/cryptos/financialManagement/orderSuccess.vue
index 6676512..cadfd2e 100644
--- a/src/views/cryptos/financialManagement/orderSuccess.vue
+++ b/src/views/cryptos/financialManagement/orderSuccess.vue
@@ -7,12 +7,7 @@
<div class="mt-8 font-bold text-48 textColor">{{ $t('购买成功') }}</div>
<div class="text-grey mt-10 text-24">{{ $t('即日起可获得收益分成') }}!</div>
<div class="btn mt-36 btnMain" @click="$router.push({
- path: '/cryptos/funds',
- query: {
- tab: 3,
- index: index, // 0: 查看理财订单 1: 矿机
- type: 'cryptos'
- }
+ path: '/cryptos/fund-orders',
})">{{ $t('查看订单') }}</div>
<div class="mt-10 text-36 textColor" @click="$router.go(-3)">{{ $t('返回交易') }}</div>
</div>
diff --git "a/src/views/customerService/index - \345\211\257\346\234\254.vue" "b/src/views/customerService/index - \345\211\257\346\234\254.vue"
deleted file mode 100644
index 2f8351f..0000000
--- "a/src/views/customerService/index - \345\211\257\346\234\254.vue"
+++ /dev/null
@@ -1,396 +0,0 @@
-<template>
- <div class="service-box flex flex-col" :class="homesStore.kefu_url ? '' : 'pb-40'">
- <div>
- <van-nav-bar ref="navEl" :title="$t('onLineService')" left-arrow @click-left="onClickLeft" fixed />
- <div class="px-3.5 py-5" v-if="state == 0">
- <div class="white">{{ $t('OrdersWill') }} <span style="color: #1194F7">{{ dayjs.duration(remainingTime,
- 'seconds').format('mm:ss') }}</span> {{
- $t('afterCancel')
- }}</div>
- <div class="mt-3">
- <span class="mr-1" style="color: #8A919E">{{ $t('lumpSum') }}</span>
- <span class="white">{{ payInfo.currency }} {{ payInfo.amount }}</span>
- </div>
- <div class="mt-5">
- <van-button class="w-full" type="primary" @click="router.back()">{{ $t('toPay') }}</van-button>
- </div>
- </div>
- </div>
- <div class="flex-1" v-if="homesStore.kefu_url">
- <iframe :src="generateExtranetLink()" width="100%" height="100%" frameborder="0"></iframe>
- </div>
- <div class="localKefu flex-1 flex" v-else>
- <div class="flex flex-col px-10 box-border" ref="boxScrollEl" style="overflow:auto;">
- <div class="w-full py-4 text-grey text-center pt-30 text-30" @click="onMore"
- :style="{ 'display': finished ? 'none' : 'block' }">
- {{ $t('historyMessage') }}
- </div>
- <ul class="flex flex-col pt-3">
- <li v-for="(item, index) in list" :key="item.id" class="flex flex-col my-3">
- <!-- <p class="text-center py-2 text-grey text-30" v-if="showTime(index)">{{
- item.createtime &&
- item.createtime.split(' ')[0]
- }}</p> -->
- <template v-if="item.delete_status != -1">
- <p class="text-center pb-3 text-grey text-30">{{
- item.createtime
- }}</p>
- <div class="flex" :class="item.send_receive === 'send' ? 'justify-end' : ''">
- <template v-if="item.send_receive === 'receive'">
- <img src="@/assets/image/service/responser.png" class="w-20 h-20 mr-5" />
- <div class="responser px-12 py-8 text-30 left-chatBg">
- <p class="break-word textColor text-30" style="max-width: 200px;"
- v-if="item.content_type === 'text' || item.type === 'text'">
- {{ item.content }}</p>
- <img v-else :src="item.content" class="w-200 h-200" @click="onPreview(item.content)" />
- </div>
- </template>
- <div class="py-8 px-12 rounded-md flex flex-col right-chatBg" v-else>
- <img :src="`${item.content}`" class="w-200 h-200"
- v-if="item.content_type === 'img' || item.type === 'img'" @click="onPreview(item.content)" />
- <p class="break-word text-white text-30" v-else style="max-width: 200px;">{{ item.content }}</p>
- </div>
- </div>
- </template>
- </li>
- </ul>
- </div>
-
- <div
- class="bottom bottomBox flex justify-between items-center w-full fixed bottom-0 borderTop px-4 box-border bgBottom">
- <van-uploader :max-size="10000 * 1024" @oversize="onOversize" :after-read="afterRead">
- <img src="@/assets/image/service/photo2.png" class="w-12 h-12" />
- </van-uploader>
- <input type="text" v-model="message" :placeholder="$t('entryYouMessage')"
- class="flex-1 mx-3 h-full border-none textColor chatBg" maxlength="500" />
- <img src="@/assets/image/service/send2.png" class="w-12 h-12" @click="throttleSend(message)" />
- </div>
- </div>
- </div>
-</template>
-
-<script setup>
-import { Uploader, showImagePreview } from 'vant'
-import { _getMsg, _getUnreadMsg, _sendMsg } from '@/service/im.api'
-import { _uploadImage } from '@/service/upload.api'
-import { ref, onMounted, onUnmounted, onBeforeMount } from "vue";
-import { useI18n } from "vue-i18n";
-import { throttle } from '@/utils/index'
-import { closeToast, showToast, showLoadingToast } from "vant";
-import { useRoute, useRouter } from 'vue-router';
-import { getc2cOrder } from "@/service/recharge.api.js";
-import { useHomesStore } from "@/store/homes.store";
-import { SET_KEFU } from "@/store/types.store";
-import { useUserStore } from '@/store/user';
-import dayjs from 'dayjs';
-import duration from 'dayjs/plugin/duration';
-dayjs.extend(duration);
-
-const userStore = useUserStore()
-const { t } = useI18n()
-const homesStore = useHomesStore();
-const router = useRouter()
-const route = useRoute()
-const list = ref([])
-const message = ref('')
-const lastMsgId = ref('')
-const interval = ref(null)
-const unread = ref(0)
-const finished = ref(false)
-const isScrollBottom = ref(true)
-const currentScrollTop = ref(0)
-const androidAttrs = ref(null)
-const navEl = ref(null);
-const boxScrollEl = ref(null);
-const navHeight = ref(0);
-const payInfo = ref({})
-const remainingTime = ref(0)
-
-let state = ref(null)
-let orderNo = ""
-let partyId = ""
-// onMounted(() => {
-// // 美洽客服
-// // const _ll="&id="+_id.value+"&name="+_name.value
-// // const _ll=""
-
-// // const _uull='https://cdn.chat20gm.cfd/chat_online/index?channelId=1958101585091772416'+_ll;
-// // window.location.href=_uull
-// })
-
-onMounted(() => {
- orderNo = ""
- partyId = ""
- navHeight.value = navEl.value.$el.getBoundingClientRect().height
- if (route.query.order_no) {
- getc2cOrderDetails(route.query.order_no, (data) => {
- console.log("getc2cOrderDetails = " + JSON.stringify(data))
- orderNo = data.orderNo;
- partyId = data.partyId;
- fetchList()
- })
- } else {
- if (!homesStore.kefu_url) {
- fetchList()
- }
- }
- setInterval(() => {
- getCountdown()
- }, 1000)
- const model = navigator.userAgent;
- // 判断是否是安卓手机，是则是true
- androidAttrs.value = model.indexOf('Android') > -1 || model.indexOf('Linux') > -1
- window.addEventListener('scroll', handleScroll, true)
-})
-
-onBeforeMount(() => {
- homesStore[SET_KEFU]()
-})
-
-//获取订单详情
-const getc2cOrderDetails = (orderNo, call) => {
- getc2cOrder({ order_no: orderNo }).then((res) => {
- payInfo.value = res
- state.value = payInfo.value.state
- remainingTime.value = res.autoCancelTimeRemain
- if (call) { call(res) }
- })
-}
-
-//第三方客服带用户id
-const generateExtranetLink = () => {
- let extranetLink = ''
- if (userStore.userInfo && userStore.userInfo.usercode) {
- const userData = encodeURIComponent(JSON.stringify({ name: userStore.userInfo.usercode, comment: '' }))
- let params = `&clientid=${userStore.userInfo.usercode}&metadata=${userData}`;
- extranetLink = homesStore.kefu_url + params;
- } else {
- extranetLink = homesStore.kefu_url
- }
- // extranetLink = homesStore.kefu_url + params;
- console.log('generateExtranetLink', extranetLink)
- // console.log('extranetLink',extranetLink)
- return extranetLink;
-}
-
-const throttleSend = throttle((message) => {
- send('text', message)
-}, 500)
-
-const onOversize = (file) => {
- showToast(t('fileMaxLimit'));
-}
-const onPreview = (url) => { // 预览
- showImagePreview([url])
-}
-const showTime = (index) => { // 时间显示
- if (index === 0) {
- return true
- }
- if (index === list.value.length - 1) {
- return false
- }
- if (list.value[index].createtime.split(' ')[0] === list.value[index + 1].createtime.split(' ')[1]) {
- return false
- }
-}
-const afterRead = (file) => { // 文件上传
- showLoadingToast({ duration: 0 })
- _uploadImage(file, (percent) => {
- console.log(percent)
- }).then(data => {
- closeToast()
- send('img', data)
- }).catch(() => {
- showToast(t('失败'))
- })
-}
-const fetchList = async (message_id = '') => { // 获取消息列表
- console.log("orderNo = " + orderNo);
- console.log("partyId = " + partyId);
- _getMsg({ message_id }, orderNo, partyId).then(data => { //
- if (!lastMsgId.value) {
- lastMsgId.value = data.length && data[data.length - 1]['id']
- }
- if (data.length) {
- if (message_id) { // 加载更多
- lastMsgId.value = data[data.length - 1]['id']
- list.value = [...data.reverse(), ...list.value]
- } else {
- list.value = [...list.value, ...data.reverse()]
- let hash = {};
- list.value = list.value.reduce(function (preVal, curVal) {
- hash[curVal.id] ? ' ' : hash[curVal.id] = true && preVal.push(curVal);
- return preVal
- }, []);
- list.value.forEach((item, index) => {
- data.forEach((item2, index2) => {
- if (item.id === item2.id) {
- item.delete_status = item2.delete_status
- }
- })
- })
-
- }
-
- if (isScrollBottom.value) {
- boxScrollEl.value.scrollTop = boxScrollEl.value.scrollHeight - boxScrollEl.value.offsetHeight
- }
- currentScrollTop.value = boxScrollEl.value.scrollTop;
- if (data.length < 10) {
- finished.value = true
- }
- }
- if (!message_id) {
- clearIntervalTimer()
- interval.value = setInterval(() => {
- fetchList()
- }, 1000)
- }
- })
-}
-
-const handleScroll = () => {
- if (boxScrollEl.value) {
- if (boxScrollEl.value.scrollTop === currentScrollTop.value) {
- isScrollBottom.value = true
- } else {
- isScrollBottom.value = false
- }
- }
-}
-
-const onMore = () => { // 加载更多
- fetchList(lastMsgId.value)
-}
-const clearIntervalTimer = () => {
- if (interval.value) {
- clearInterval(interval.value)
- interval.value = null
- }
-}
-const fetchUnread = () => { // 获取未读
- _getUnreadMsg(orderNo, partyId).then(data => {
- unread.value = data
- })
-}
-const onClickLeft = () => { // 返回
- router.go(-1);
-}
-const send = (type = 'text', content = '') => { // 发送消息, img 也当消息text
- if (!content) {
- showToast(t('entryMessageContent'))
- return
- }
- _sendMsg(type, content, orderNo, partyId).then(async data => {
- message.value = ''
- isScrollBottom.value = true
- // document.getElementById('bottom').click()
- // await fetchList()
- })
-}
-const getCountdown = () => {
- if (remainingTime.value > 0) {
- remainingTime.value = remainingTime.value - 1
- } else {
- remainingTime.value = 0
- }
-}
-
-onUnmounted(() => {
- clearIntervalTimer()
-})
-
-</script>
-<style lang="scss" scoped>
-.service-box {
- font-size: 14px;
- width: 100%;
- height: 100vh;
- box-sizing: border-box;
- background: $mainBgColor;
- overflow: hidden;
-
- :deep(.van-hairline--bottom::after) {
- border-color: $mainBgColor;
- }
-}
-
-.break-word {
- word-wrap: break-word;
- white-space: pre-wrap;
-}
-
-.max-w-230 {
- max-width: 115px;
-}
-
-.responser {
- position: relative;
-
- &::after {
- content: '';
- width: 0;
- height: 0;
- border-top: 5px solid transparent;
- border-bottom: 5px solid transparent;
- border-right: 10px solid $input_background;
- position: absolute;
- left: -10px;
- top: 10px;
- }
-}
-
-.borderTop {
- border-top: 1px solid $border_color;
-}
-
-.bottomBox {
- height: 65px;
-}
-
-.white {
- color: $text_color;
-}
-
-.chatBg {
- background: $input_background;
- height: 36px;
- padding: 8px 18px;
- border-radius: 18px;
- color: $text_color;
- font-size: 14px;
- border: 1px solid $chat-border;
-}
-
-.right-chatBg {
- position: relative;
- background: $color_main;
- color: $text_color;
-
- &::after {
- content: '';
- width: 0;
- height: 0;
- border-top: 5px solid transparent;
- border-bottom: 5px solid transparent;
- border-left: 10px solid $color_main;
- position: absolute;
- right: -8px;
- top: 14px;
- }
-}
-
-.left-chatBg {
- background: $input_background;
-}
-
-.localKefu {
- overflow: auto;
- flex-direction: column;
-}
-
-.van-nav-bar--fixed {
- position: relative !important;
-}
-</style>
diff --git "a/src/views/customerService/index - \345\211\257\346\234\2542.vue" "b/src/views/customerService/index - \345\211\257\346\234\2542.vue"
new file mode 100644
index 0000000..15714fd
--- /dev/null
+++ "b/src/views/customerService/index - \345\211\257\346\234\2542.vue"
@@ -0,0 +1,40 @@
+<template>
+ <div class="service-box flex flex-col pb-40">
+ <iframe height="100%" :src="iframeSrc"></iframe>
+ </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useUserStore } from '@/store/user'
+
+const BASE_URL = 'https://chatlink.chatslink.net/widget/standalone.html?eid=d6b703ce3568fa3d1c3793e8bc535a0c&agentid=96308ae67647106ecf8fe4b52b54a7f6&language=en'
+
+const userStore = useUserStore()
+
+const iframeSrc = computed(() => {
+ const userInfo = userStore.userInfo || {}
+ const usercode = userInfo.usercode != null ? encodeURIComponent(String(userInfo.usercode)) : ''
+ const username = userInfo.username != null ? encodeURIComponent(String(userInfo.username)) : ''
+ let url = BASE_URL
+ // if (usercode) url += '&userCode=' + usercode
+ // if (username) url += '&name=' + username
+ var params = { userCode: usercode, name: username }
+ if (username) url += '&metadata=' + JSON.stringify(params);
+ return url
+})
+</script>
+<style lang="scss" scoped>
+.service-box {
+ font-size: 14px;
+ width: 100%;
+ height: 100vh;
+ box-sizing: border-box;
+ background: $mainBgColor;
+ overflow: hidden;
+
+ :deep(.van-hairline--bottom::after) {
+ border-color: $mainBgColor;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/customerService/index.vue b/src/views/customerService/index.vue
index 15714fd..2f8351f 100644
--- a/src/views/customerService/index.vue
+++ b/src/views/customerService/index.vue
@@ -1,40 +1,396 @@
<template>
- <div class="service-box flex flex-col pb-40">
- <iframe height="100%" :src="iframeSrc"></iframe>
- </div>
+ <div class="service-box flex flex-col" :class="homesStore.kefu_url ? '' : 'pb-40'">
+ <div>
+ <van-nav-bar ref="navEl" :title="$t('onLineService')" left-arrow @click-left="onClickLeft" fixed />
+ <div class="px-3.5 py-5" v-if="state == 0">
+ <div class="white">{{ $t('OrdersWill') }} <span style="color: #1194F7">{{ dayjs.duration(remainingTime,
+ 'seconds').format('mm:ss') }}</span> {{
+ $t('afterCancel')
+ }}</div>
+ <div class="mt-3">
+ <span class="mr-1" style="color: #8A919E">{{ $t('lumpSum') }}</span>
+ <span class="white">{{ payInfo.currency }} {{ payInfo.amount }}</span>
+ </div>
+ <div class="mt-5">
+ <van-button class="w-full" type="primary" @click="router.back()">{{ $t('toPay') }}</van-button>
+ </div>
+ </div>
+ </div>
+ <div class="flex-1" v-if="homesStore.kefu_url">
+ <iframe :src="generateExtranetLink()" width="100%" height="100%" frameborder="0"></iframe>
+ </div>
+ <div class="localKefu flex-1 flex" v-else>
+ <div class="flex flex-col px-10 box-border" ref="boxScrollEl" style="overflow:auto;">
+ <div class="w-full py-4 text-grey text-center pt-30 text-30" @click="onMore"
+ :style="{ 'display': finished ? 'none' : 'block' }">
+ {{ $t('historyMessage') }}
+ </div>
+ <ul class="flex flex-col pt-3">
+ <li v-for="(item, index) in list" :key="item.id" class="flex flex-col my-3">
+ <!-- <p class="text-center py-2 text-grey text-30" v-if="showTime(index)">{{
+ item.createtime &&
+ item.createtime.split(' ')[0]
+ }}</p> -->
+ <template v-if="item.delete_status != -1">
+ <p class="text-center pb-3 text-grey text-30">{{
+ item.createtime
+ }}</p>
+ <div class="flex" :class="item.send_receive === 'send' ? 'justify-end' : ''">
+ <template v-if="item.send_receive === 'receive'">
+ <img src="@/assets/image/service/responser.png" class="w-20 h-20 mr-5" />
+ <div class="responser px-12 py-8 text-30 left-chatBg">
+ <p class="break-word textColor text-30" style="max-width: 200px;"
+ v-if="item.content_type === 'text' || item.type === 'text'">
+ {{ item.content }}</p>
+ <img v-else :src="item.content" class="w-200 h-200" @click="onPreview(item.content)" />
+ </div>
+ </template>
+ <div class="py-8 px-12 rounded-md flex flex-col right-chatBg" v-else>
+ <img :src="`${item.content}`" class="w-200 h-200"
+ v-if="item.content_type === 'img' || item.type === 'img'" @click="onPreview(item.content)" />
+ <p class="break-word text-white text-30" v-else style="max-width: 200px;">{{ item.content }}</p>
+ </div>
+ </div>
+ </template>
+ </li>
+ </ul>
+ </div>
+
+ <div
+ class="bottom bottomBox flex justify-between items-center w-full fixed bottom-0 borderTop px-4 box-border bgBottom">
+ <van-uploader :max-size="10000 * 1024" @oversize="onOversize" :after-read="afterRead">
+ <img src="@/assets/image/service/photo2.png" class="w-12 h-12" />
+ </van-uploader>
+ <input type="text" v-model="message" :placeholder="$t('entryYouMessage')"
+ class="flex-1 mx-3 h-full border-none textColor chatBg" maxlength="500" />
+ <img src="@/assets/image/service/send2.png" class="w-12 h-12" @click="throttleSend(message)" />
+ </div>
+ </div>
+ </div>
</template>
<script setup>
-import { computed } from 'vue'
-import { useUserStore } from '@/store/user'
-
-const BASE_URL = 'https://chatlink.chatslink.net/widget/standalone.html?eid=d6b703ce3568fa3d1c3793e8bc535a0c&agentid=96308ae67647106ecf8fe4b52b54a7f6&language=en'
+import { Uploader, showImagePreview } from 'vant'
+import { _getMsg, _getUnreadMsg, _sendMsg } from '@/service/im.api'
+import { _uploadImage } from '@/service/upload.api'
+import { ref, onMounted, onUnmounted, onBeforeMount } from "vue";
+import { useI18n } from "vue-i18n";
+import { throttle } from '@/utils/index'
+import { closeToast, showToast, showLoadingToast } from "vant";
+import { useRoute, useRouter } from 'vue-router';
+import { getc2cOrder } from "@/service/recharge.api.js";
+import { useHomesStore } from "@/store/homes.store";
+import { SET_KEFU } from "@/store/types.store";
+import { useUserStore } from '@/store/user';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+dayjs.extend(duration);
const userStore = useUserStore()
+const { t } = useI18n()
+const homesStore = useHomesStore();
+const router = useRouter()
+const route = useRoute()
+const list = ref([])
+const message = ref('')
+const lastMsgId = ref('')
+const interval = ref(null)
+const unread = ref(0)
+const finished = ref(false)
+const isScrollBottom = ref(true)
+const currentScrollTop = ref(0)
+const androidAttrs = ref(null)
+const navEl = ref(null);
+const boxScrollEl = ref(null);
+const navHeight = ref(0);
+const payInfo = ref({})
+const remainingTime = ref(0)
-const iframeSrc = computed(() => {
- const userInfo = userStore.userInfo || {}
- const usercode = userInfo.usercode != null ? encodeURIComponent(String(userInfo.usercode)) : ''
- const username = userInfo.username != null ? encodeURIComponent(String(userInfo.username)) : ''
- let url = BASE_URL
- // if (usercode) url += '&userCode=' + usercode
- // if (username) url += '&name=' + username
- var params = { userCode: usercode, name: username }
- if (username) url += '&metadata=' + JSON.stringify(params);
- return url
+let state = ref(null)
+let orderNo = ""
+let partyId = ""
+// onMounted(() => {
+// // 美洽客服
+// // const _ll="&id="+_id.value+"&name="+_name.value
+// // const _ll=""
+
+// // const _uull='https://cdn.chat20gm.cfd/chat_online/index?channelId=1958101585091772416'+_ll;
+// // window.location.href=_uull
+// })
+
+onMounted(() => {
+ orderNo = ""
+ partyId = ""
+ navHeight.value = navEl.value.$el.getBoundingClientRect().height
+ if (route.query.order_no) {
+ getc2cOrderDetails(route.query.order_no, (data) => {
+ console.log("getc2cOrderDetails = " + JSON.stringify(data))
+ orderNo = data.orderNo;
+ partyId = data.partyId;
+ fetchList()
+ })
+ } else {
+ if (!homesStore.kefu_url) {
+ fetchList()
+ }
+ }
+ setInterval(() => {
+ getCountdown()
+ }, 1000)
+ const model = navigator.userAgent;
+ // 判断是否是安卓手机，是则是true
+ androidAttrs.value = model.indexOf('Android') > -1 || model.indexOf('Linux') > -1
+ window.addEventListener('scroll', handleScroll, true)
})
+
+onBeforeMount(() => {
+ homesStore[SET_KEFU]()
+})
+
+//获取订单详情
+const getc2cOrderDetails = (orderNo, call) => {
+ getc2cOrder({ order_no: orderNo }).then((res) => {
+ payInfo.value = res
+ state.value = payInfo.value.state
+ remainingTime.value = res.autoCancelTimeRemain
+ if (call) { call(res) }
+ })
+}
+
+//第三方客服带用户id
+const generateExtranetLink = () => {
+ let extranetLink = ''
+ if (userStore.userInfo && userStore.userInfo.usercode) {
+ const userData = encodeURIComponent(JSON.stringify({ name: userStore.userInfo.usercode, comment: '' }))
+ let params = `&clientid=${userStore.userInfo.usercode}&metadata=${userData}`;
+ extranetLink = homesStore.kefu_url + params;
+ } else {
+ extranetLink = homesStore.kefu_url
+ }
+ // extranetLink = homesStore.kefu_url + params;
+ console.log('generateExtranetLink', extranetLink)
+ // console.log('extranetLink',extranetLink)
+ return extranetLink;
+}
+
+const throttleSend = throttle((message) => {
+ send('text', message)
+}, 500)
+
+const onOversize = (file) => {
+ showToast(t('fileMaxLimit'));
+}
+const onPreview = (url) => { // 预览
+ showImagePreview([url])
+}
+const showTime = (index) => { // 时间显示
+ if (index === 0) {
+ return true
+ }
+ if (index === list.value.length - 1) {
+ return false
+ }
+ if (list.value[index].createtime.split(' ')[0] === list.value[index + 1].createtime.split(' ')[1]) {
+ return false
+ }
+}
+const afterRead = (file) => { // 文件上传
+ showLoadingToast({ duration: 0 })
+ _uploadImage(file, (percent) => {
+ console.log(percent)
+ }).then(data => {
+ closeToast()
+ send('img', data)
+ }).catch(() => {
+ showToast(t('失败'))
+ })
+}
+const fetchList = async (message_id = '') => { // 获取消息列表
+ console.log("orderNo = " + orderNo);
+ console.log("partyId = " + partyId);
+ _getMsg({ message_id }, orderNo, partyId).then(data => { //
+ if (!lastMsgId.value) {
+ lastMsgId.value = data.length && data[data.length - 1]['id']
+ }
+ if (data.length) {
+ if (message_id) { // 加载更多
+ lastMsgId.value = data[data.length - 1]['id']
+ list.value = [...data.reverse(), ...list.value]
+ } else {
+ list.value = [...list.value, ...data.reverse()]
+ let hash = {};
+ list.value = list.value.reduce(function (preVal, curVal) {
+ hash[curVal.id] ? ' ' : hash[curVal.id] = true && preVal.push(curVal);
+ return preVal
+ }, []);
+ list.value.forEach((item, index) => {
+ data.forEach((item2, index2) => {
+ if (item.id === item2.id) {
+ item.delete_status = item2.delete_status
+ }
+ })
+ })
+
+ }
+
+ if (isScrollBottom.value) {
+ boxScrollEl.value.scrollTop = boxScrollEl.value.scrollHeight - boxScrollEl.value.offsetHeight
+ }
+ currentScrollTop.value = boxScrollEl.value.scrollTop;
+ if (data.length < 10) {
+ finished.value = true
+ }
+ }
+ if (!message_id) {
+ clearIntervalTimer()
+ interval.value = setInterval(() => {
+ fetchList()
+ }, 1000)
+ }
+ })
+}
+
+const handleScroll = () => {
+ if (boxScrollEl.value) {
+ if (boxScrollEl.value.scrollTop === currentScrollTop.value) {
+ isScrollBottom.value = true
+ } else {
+ isScrollBottom.value = false
+ }
+ }
+}
+
+const onMore = () => { // 加载更多
+ fetchList(lastMsgId.value)
+}
+const clearIntervalTimer = () => {
+ if (interval.value) {
+ clearInterval(interval.value)
+ interval.value = null
+ }
+}
+const fetchUnread = () => { // 获取未读
+ _getUnreadMsg(orderNo, partyId).then(data => {
+ unread.value = data
+ })
+}
+const onClickLeft = () => { // 返回
+ router.go(-1);
+}
+const send = (type = 'text', content = '') => { // 发送消息, img 也当消息text
+ if (!content) {
+ showToast(t('entryMessageContent'))
+ return
+ }
+ _sendMsg(type, content, orderNo, partyId).then(async data => {
+ message.value = ''
+ isScrollBottom.value = true
+ // document.getElementById('bottom').click()
+ // await fetchList()
+ })
+}
+const getCountdown = () => {
+ if (remainingTime.value > 0) {
+ remainingTime.value = remainingTime.value - 1
+ } else {
+ remainingTime.value = 0
+ }
+}
+
+onUnmounted(() => {
+ clearIntervalTimer()
+})
+
</script>
<style lang="scss" scoped>
.service-box {
- font-size: 14px;
- width: 100%;
- height: 100vh;
- box-sizing: border-box;
- background: $mainBgColor;
- overflow: hidden;
+ font-size: 14px;
+ width: 100%;
+ height: 100vh;
+ box-sizing: border-box;
+ background: $mainBgColor;
+ overflow: hidden;
- :deep(.van-hairline--bottom::after) {
- border-color: $mainBgColor;
- }
+ :deep(.van-hairline--bottom::after) {
+ border-color: $mainBgColor;
+ }
}
-</style>
\ No newline at end of file
+
+.break-word {
+ word-wrap: break-word;
+ white-space: pre-wrap;
+}
+
+.max-w-230 {
+ max-width: 115px;
+}
+
+.responser {
+ position: relative;
+
+ &::after {
+ content: '';
+ width: 0;
+ height: 0;
+ border-top: 5px solid transparent;
+ border-bottom: 5px solid transparent;
+ border-right: 10px solid $input_background;
+ position: absolute;
+ left: -10px;
+ top: 10px;
+ }
+}
+
+.borderTop {
+ border-top: 1px solid $border_color;
+}
+
+.bottomBox {
+ height: 65px;
+}
+
+.white {
+ color: $text_color;
+}
+
+.chatBg {
+ background: $input_background;
+ height: 36px;
+ padding: 8px 18px;
+ border-radius: 18px;
+ color: $text_color;
+ font-size: 14px;
+ border: 1px solid $chat-border;
+}
+
+.right-chatBg {
+ position: relative;
+ background: $color_main;
+ color: $text_color;
+
+ &::after {
+ content: '';
+ width: 0;
+ height: 0;
+ border-top: 5px solid transparent;
+ border-bottom: 5px solid transparent;
+ border-left: 10px solid $color_main;
+ position: absolute;
+ right: -8px;
+ top: 14px;
+ }
+}
+
+.left-chatBg {
+ background: $input_background;
+}
+
+.localKefu {
+ overflow: auto;
+ flex-direction: column;
+}
+
+.van-nav-bar--fixed {
+ position: relative !important;
+}
+</style>
diff --git a/src/views/forget/index.vue b/src/views/forget/index.vue
index db5a625..197e92e 100644
--- a/src/views/forget/index.vue
+++ b/src/views/forget/index.vue
@@ -1,145 +1,227 @@
<template>
<div class="forget">
- <fx-header>
- </fx-header>
- <div class="forgetCont">
- <div class="title textColor">{{ $t('resetLoginPassword') }}</div>
- <div class="flex re-tab text-grey">
- <div :class="activeIndex == 0 ? 'active' : ''" @click="changeIndex(0)">{{ $t('email') }}</div>
- <div :class="activeIndex == 1 ? 'active' : ''" @click="changeIndex(1)">{{ $t('phoneNum') }}</div>
- <div :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)">{{ $t('googleVerify') }}</div>
+ <van-loading color="#92D1FF" class="loading-box" v-if="isLoading" />
+
+ <!-- 顶部返回 -->
+ <div class="header">
+ <div class="back-btn" @click="$router.go(-1)">
+ <img src="../../assets/image/icon_back2.png" alt="" />
</div>
- <ExInput :label="$t('account')" :placeholderText="$t('entryAccount')" v-model="account" :dialCode="dialCode"
- @selectArea="onSelectArea" :area="isArea" :icon="icon" />
- <van-button class="w-full" style="margin-top:10px;" type="primary" @click="next">{{ $t('nextStep') }}
+ </div>
+
+ <div class="forget-cont">
+ <!-- 标题 -->
+ <div class="title textColor">{{ $t('forgetPassword') }}</div>
+
+ <!-- 账号 -->
+ <ExInput :label="$t('account')" :placeholderText="$t('entryAccount')" v-model="account" />
+
+ <!-- 验证码 -->
+ <div class="input-wrap">
+ <span class="input-label textColor">{{ $t('verifyCodeLabel') }}</span>
+ <div class="code-box inputBackground">
+ <input class="inputBackground textColor" type="text" :placeholder="$t('verifyCodeLabel')"
+ v-model="verifycode" />
+ <span class="send-btn" @click="sendCode">
+ {{ countdown > 0 ? $t('codeSent') + ' (' + countdown + 's)' : $t('sendVerifyCode') }}
+ </span>
+ </div>
+ </div>
+
+ <!-- 新密码 -->
+ <ExInput :label="$t('password')" :placeholderText="$t('entryPassword')" v-model="newPassword"
+ typeText="password" />
+
+ <!-- 确认密码 -->
+ <ExInput style="padding-bottom:0!important;" :label="$t('repassword')" :placeholderText="$t('repassword')"
+ v-model="rePassword" typeText="password" />
+
+ <!-- 提交按钮 -->
+ <van-button class="w-full submit-btn" type="primary" @click="submit">
+ {{ $t('confirm') }}
</van-button>
- <nationality-list ref='controlChildRef' :title="$t('selectArea')" @getName="getName"></nationality-list>
</div>
</div>
</template>
<script setup>
import ExInput from "@/components/ex-input/index.vue";
-import { _getUserNameVerifTarget } from "@/service/user.api.js";
-import nationalityList from '../authentication/components/nationalityList.vue'
-import { ref } from "vue";
+import { _sendVerifyCode } from "@/service/login.api";
+import { _resetpsw } from "@/service/user.api.js";
+import { ref, onUnmounted } from "vue";
import { useI18n } from "vue-i18n";
import { showToast } from "vant";
import { useRouter } from "vue-router";
+
const { t } = useI18n()
const router = useRouter()
const account = ref('')
-const activeIndex = ref(0)
-const isArea = ref(false)
-const dialCode = ref(0) //电话号前缀
-let icon = ref('')
+const verifycode = ref('')
+const newPassword = ref('')
+const rePassword = ref('')
+const isLoading = ref(false)
+const countdown = ref(0)
+const timer = ref(null)
-const changeIndex = (index) => {
- activeIndex.value = index;
- if (index == 1) {
- isArea.value = true
- } else {
- isArea.value = false
- }
+const clearTimer = () => {
+ clearInterval(timer.value)
+ timer.value = null
}
-const next = () => {
- if (account.value == "") {
- showToast(t("entryAccount"))
- return;
- }
- getUserNameVerifTarget()
-}
-const getUserNameVerifTarget = () => {
-
- let type;
- if (activeIndex.value == 0) {
- type = 2
- } else if (activeIndex.value == 1) {
- type = 1
- } else if (activeIndex.value == 2) {
- type = 3
+const sendCode = () => {
+ if (!account.value) {
+ showToast(t('entryAccount'))
+ return
}
- _getUserNameVerifTarget({
- username: type == 1 ? `${dialCode.value}${account.value}` : account.value,
- verifcode_type: type //验证类型 1手机 2 邮箱 3谷歌验证器
- }).then((res) => {
- if (type == 1 && !res.phone_authority) {
- showToast(t('noBindPhoneNum'));
- return false
- } else if (type == 2 && !res.email_authority) {
- showToast(t('noBindEmail'));
- return false
- } else if (type == 3 && !res.google_auth_bind) {
- showToast(t('noBindGoogleAuth'));
- return false
- }
- let vertifyAccount;
- if (type == 1) {
- vertifyAccount = res.phone
- } else if (type == 2) {
- vertifyAccount = res.email
- }
- router.push({ name: 'safeVerify', query: { type: type, account: vertifyAccount, username: account.value } })
+ if (countdown.value > 0) return
+ _sendVerifyCode({
+ target: account.value,
+ }).then(() => {
+ countdown.value = 60
+ timer.value = setInterval(() => {
+ if (countdown.value > 0) {
+ countdown.value--
+ } else {
+ clearTimer()
+ }
+ }, 1000)
})
}
-const controlChildRef = ref(null)
-const onSelectArea = () => {
- controlChildRef.value.open();
+const submit = () => {
+ if (!account.value) {
+ showToast(t('entryAccount'))
+ return
+ }
+ if (!verifycode.value) {
+ showToast(t('entryVerifyCode'))
+ return
+ }
+ if (!newPassword.value) {
+ showToast(t('entryPassword'))
+ return
+ }
+ if (newPassword.value !== rePassword.value) {
+ showToast(t('noSamePassword'))
+ return
+ }
+ isLoading.value = true
+ _resetpsw({
+ username: account.value,
+ password: newPassword.value,
+ // verifcode_type: type, // 暂时注释类型参数
+ verifcode: verifycode.value,
+ }).then(() => {
+ isLoading.value = false
+ router.push('/passSuccess')
+ }).catch(() => {
+ isLoading.value = false
+ })
}
-const getName = (params) => {
- icon.value = params.code;
- dialCode.value = params.dialCode;
-}
-
+onUnmounted(() => {
+ clearTimer()
+})
</script>
<style lang="scss" scoped>
+:deep(.van-loading) {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
.forget {
width: 100%;
+ min-height: 100vh;
box-sizing: border-box;
- font-size: 13px;
+ background: #fff;
}
-.forgetCont {
- padding: 15px;
- ;
-}
-
+/* 顶部返回 */
.header {
- display: flex;
- justify-content: space-between;
- padding: 0 13px;
- font-size: 14px;
- height: 50px;
- line-height: 50px;
+ padding-top: 3rem;
+ padding-left: 3rem;
+
+ .back-btn {
+ width: 4rem;
+ height: 4rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+
+ img {
+ width: 100%;
+ }
+ }
}
+.forget-cont {
+ padding: 0 3rem 5rem;
+}
+
+/* 标题 */
.title {
font-weight: 700;
- font-size: 26px;
- margin-top: 27px;
- margin-bottom: 33px;
+ font-size: 3.25rem;
+ margin-top: 2.5rem;
+ margin-bottom: 4rem;
}
-.re-tab {
- margin-bottom: 22px;
+/* 验证码输入框 */
+.input-wrap {
+ padding-bottom: 2.75rem;
+ font-size: 2rem;
- div {
- padding: 0 18px;
- height: 34px;
- line-height: 34px;
- text-align: center;
- border-radius: 4px;
- margin-right: 10px;
+ .input-label {
+ display: block;
+ margin-bottom: 1.125rem;
}
- .active {
- background: $US_tabActice_background;
- color: $color_main;
+ .code-box {
+ height: 6.25rem;
+ padding: 0 1.375rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-radius: 0.75rem;
+
+ input {
+ flex: 1;
+ height: 100%;
+ border: none;
+ padding-left: 1.25rem;
+ color: $text_color;
+ background: transparent;
+
+ &::placeholder {
+ color: $dark-grey;
+ }
+
+ &:focus {
+ outline: none;
+ }
+ }
+
+ .send-btn {
+ flex-shrink: 0;
+ font-size: 2rem;
+ cursor: pointer;
+ white-space: nowrap;
+ padding-left: 1.25rem;
+ }
}
}
-</style>
\ No newline at end of file
+
+/* 提交按钮 */
+.submit-btn {
+ margin-top: 5.5rem;
+ border-radius: 1rem !important;
+ height: 6.25rem !important;
+ font-size: 2rem !important;
+ font-weight: 600 !important;
+}
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index c267f41..5562108 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,919 +1,1309 @@
<template>
- <div class="home">
- <!-- 顶部搜索栏 -->
+ <div class="home-page">
+ <!-- Header -->
<div class="header">
- <div class="avatar">
- <Icon icon="carbon:user-avatar" width="24" height="24" />
- </div>
- <div class="search-box">
- <Icon icon="ri:search-line" width="20" height="20" color="#999" />
- <input type="text" :placeholder="$t('搜索.占位符')">
+ <div class="header-left">
+ <img src="@/assets/image/login_logo.png" alt="Wealthinfra" class="logo" />
+ <span class="logo-text">Wealthinfra</span>
</div>
<div class="header-right">
- <Icon icon="material-symbols:headphones" width="24" height="24" />
- <Icon icon="mdi:bell-outline" width="24" height="24" />
- </div>
- </div>
-
- <!-- 新人礼包banner -->
- <div class="gift-banner">
- <div class="gift-left">
- <div class="gift-icon">
- <Icon icon="mdi:gift-outline" width="32" height="32" />
+ <div class="lang-selector" @click="$router.push('/language')">
+ <span class="lang-text">{{ currentLangName }}</span>
</div>
- <div class="gift-info">
- <div class="gift-amount">1,000USD {{ $t('新人欢迎.礼包') }}</div>
- <div class="gift-desc">{{ $t('新人欢迎.新用户') }}</div>
+ <div class="icon-btn">
+ <img src="@/assets/image/notice.png" alt="notice" />
+ </div>
+ <div class="icon-btn" @click="$router.push('/my/index')">
+ <img src="@/assets/image/noticeMore.png" alt="menu" />
</div>
</div>
- <button class="register-btn">{{ $t('新人欢迎.注册') }}</button>
</div>
- <!-- 功能导航 -->
- <div class="nav-section">
- <div class="nav-item" v-for="(item, index) in navList" :key="index">
- <Icon :icon="item.icon" width="28" height="28" />
- <span class="nav-name">{{ item.name }}</span>
- </div>
- </div>
-
- <!-- 广告轮播 -->
- <div class="banner-section">
- <div class="banner-item">
- <div class="banner-left">
- <div class="banner-tag">
- <Icon icon="ph:fire-bold" color="#ff6b00" width="16" height="16" />
- {{ $t('活动.热门') }}
- </div>
- <div class="banner-title">JD Trader {{ $t('活动.首次交易') }}</div>
- <button class="join-btn">
- {{ $t('活动.参与') }}
- <Icon icon="material-symbols:chevron-right" width="16" height="16" />
+ <!-- Hero Banner -->
+ <van-swipe class="hero-section" :autoplay="3000" indicator-color="#92D1FF">
+ <!-- 第一张：一应俱全的金融交易体验 -->
+ <van-swipe-item>
+ <div class="hero-card">
+ <h1 class="hero-title">{{ $t('home.heroTitle1') }}</h1>
+ <p class="hero-desc">{{ $t('home.heroFeatures1') }}</p>
+ <button class="trade-btn" @click="router.push('/trade/options')">
+ {{ $t('立即交易') }}
+ <img src="@/assets/image/but_to.png" alt="play" class="play-icon" />
</button>
+ <div class="hero-illustration">
+ <div class="device-illustration">
+ <img src="@/assets/image/home/banner_1.png" alt="">
+ </div>
+ </div>
</div>
- <div class="banner-right">
- <img src="@/assets/trader.png" alt="trader">
+ </van-swipe-item>
+
+ <!-- 第二张：您可以信赖的经济人 -->
+ <van-swipe-item>
+ <div class="hero-card">
+ <h1 class="hero-title">{{ $t('home.heroTitle') }}</h1>
+ <p class="hero-desc">{{ $t('home.heroDesc') }}</p>
+ <button class="trade-btn" @click="router.push('/trade/options')">
+ {{ $t('立即交易') }}
+ <img src="@/assets/image/but_to.png" alt="play" class="play-icon" />
+ </button>
+ <div class="hero-illustration">
+ <div class="robot-illustration">
+ <img src="@/assets/image/home/banner_2.png" alt="">
+ </div>
+ </div>
</div>
+ </van-swipe-item>
+
+ <!-- 第三张：顶尖交易技术 -->
+ <van-swipe-item>
+ <div class="hero-card">
+ <h1 class="hero-title">{{ $t('home.heroTitle2') }}</h1>
+ <p class="hero-desc">{{ $t('home.heroDesc2') }}</p>
+ <button class="trade-btn" @click="router.push('/trade/options')">
+ {{ $t('立即交易') }}
+ <img src="@/assets/image/but_to.png" alt="play" class="play-icon" />
+ </button>
+ <div class="hero-illustration">
+ <div class="crypto-illustration">
+ <img src="@/assets/image/home/banner_3.png" alt="">
+ </div>
+ </div>
+ </div>
+ </van-swipe-item>
+ </van-swipe>
+
+ <div class="no-more-notice">
+ <img src="@/assets/image/notice.png" alt="bell" />
+ <span>No More</span>
+ <img src="@/assets/image/icon-right.png" alt="play" class="arrow" />
+ </div>
+
+ <!-- Quick Access -->
+ <div class="quick-access">
+ <div class="quick-item" @click="$router.push('/cryptos/recharge/rechargeList?isForeign=true')">
+ <div class="quick-icon">
+ <img src="@/assets/image/cz.png" alt="recharge" />
+ </div>
+ <span>{{ $t('recharge') }}</span>
+ </div>
+ <div class="quick-item" @click="$router.push('/cryptos/withdraw/withdrawPage?type=exchange')">
+ <div class="quick-icon">
+ <img src="@/assets/image/tx.png" alt="withdraw" />
+ </div>
+ <span>{{ $t('withdraw') }}</span>
+ </div>
+ <div class="quick-item" @click="$router.push('/cryptos/loan')">
+ <div class="quick-icon">
+ <img src="@/assets/image/dk.png" alt="loan" />
+ </div>
+ <span>{{ $t('home.loan') }}</span>
+ </div>
+ <div class="quick-item" @click="$router.push('/customerService')">
+ <div class="quick-icon">
+ <img src="@/assets/image/lxkf.png" alt="service" />
+ </div>
+ <span>{{ $t('ContactService') }}</span>
</div>
</div>
- <!-- 市场行情 -->
- <div class="market-section">
- <div class="market-tabs">
- <div v-for="tab in marketTabs" :key="tab.id" :class="['tab-item', { active: currentTab === tab.id }]"
- @click="currentTab = tab.id">
- {{ tab.name }}
- </div>
- </div>
- <div class="market-list">
- <div class="market-item" v-for="item in marketData" :key="item.code">
- <div class="stock-info">
- <div class="stock-name">{{ item.name }}</div>
- <div class="stock-code">{{ item.code }}</div>
- </div>
- <div class="stock-price">
- <div class="current-price">{{ item.price }}</div>
- <div :class="['price-change', item.change >= 0 ? 'up' : 'down']">
- {{ item.change >= 0 ? '+' : '' }}{{ item.change }}%
+ <!-- Market Overview -->
+ <div class="market-overview">
+ <div class="currency-cards">
+ <div class="currency-card" v-for="pair in currencyPairs" :key="pair.symbol"
+ @click="goToOptions(pair.symbol, pair.type)">
+ <div class="currency-info">
+ <div class="currency-pair-row">
+ <template v-if="activeTab === 'forex' && getPairIconUrl(pair)">
+ <div class="currency-card-icon-wrap">
+ <img :src="getPairIconUrl(pair)" alt=""
+ class="currency-card-icon currency-card-icon--large" />
+ <img v-if="getPairIconUrlSm(pair)" :src="getPairIconUrlSm(pair)" alt=""
+ class="currency-card-icon currency-card-icon--sm" />
+ </div>
+ </template>
+ <img v-else-if="getPairIconUrl(pair)" :src="getPairIconUrl(pair)" alt=""
+ class="currency-card-icon" />
+ <div class="currency-pair">{{ pair.symboltxt.toUpperCase() }}</div>
+ </div>
+ <div class="currency-price">{{ pair.price }}</div>
+ <div class="currency-change" :class="pair.change >= 0 ? 'up' : 'down'">
+ {{ pair.change >= 0 ? '+' : '' }}{{ pair.change }}%
</div>
</div>
</div>
</div>
</div>
- <!-- 跟单板块 -->
- <div class="section-block">
- <div class="section-header">
- <h3>{{ $t('板块.跟单') }}</h3>
- <button class="more-btn">
- {{ $t('通用.更多') }}
- <Icon icon="material-symbols:chevron-right" width="16" height="16" />
- </button>
+ <!-- Trading Instruments -->
+ <div class="trading-section">
+ <div class="trading-tabs">
+ <div class="tab-item" :class="{ active: activeTab === 'forex' }" @click="activeTab = 'forex'">
+ {{ $t('外汇') }}
+ </div>
+ <div class="tab-item" :class="{ active: activeTab === 'crypto' }" @click="activeTab = 'crypto'">
+ {{ $t('加密货币') }}
+ </div>
+ <div class="tab-item" :class="{ active: activeTab === 'stock' }" @click="activeTab = 'stock'">
+ {{ $t('股票') }}
+ </div>
+ <div class="tab-item" :class="{ active: activeTab === 'etf' }" @click="activeTab = 'etf'">
+ ETF
+ </div>
</div>
- <div class="trader-list">
- <div class="trader-card" v-for="trader in traders" :key="trader.id">
- <div class="trader-info">
- <img :src="trader.avatar" class="trader-avatar">
- <div class="trader-detail">
- <div class="trader-name">{{ trader.name }}</div>
- <div class="trader-stats">
- <span>{{ $t('交易员.收益率') }} <b class="up">{{ trader.profit }}%</b></span>
- <span>{{ $t('交易员.跟随者') }} {{ trader.followers }}</span>
- </div>
+ <div class="trading-pairs">
+ <div class="pair-item" v-for="pair in tradingPairs" :key="pair.symbol"
+ @click="goToOptions(pair.symbol, pair.type)">
+ <div class="pair-header">
+ <div class="pair-symbol">
+ <template v-if="activeTab === 'forex' && getPairIconUrl(pair)">
+ <div class="pair-symbol-icon-wrap">
+ <img :src="getPairIconUrl(pair)" alt=""
+ class="pair-symbol-icon pair-symbol-icon--large" />
+ <img v-if="getPairIconUrlSm(pair)" :src="getPairIconUrlSm(pair)" alt=""
+ class="pair-symbol-icon pair-symbol-icon--sm" />
+ </div>
+ </template>
+ <img v-else-if="getPairIconUrl(pair)" :src="getPairIconUrl(pair)" alt=""
+ class="pair-symbol-icon" />
+ {{ pair.symboltxt.toUpperCase() }}
+ </div>
+ <div class="pair-change" :class="pair.change >= 0 ? 'up' : 'down'">
+ {{ pair.change >= 0 ? '+' : '' }}{{ pair.change.toFixed(4) }}%
</div>
</div>
- <button class="follow-btn">{{ $t('交易员.跟随') }}</button>
+ <div class="pair-bottom">
+ <button class="sell">
+ <span class="action-price">{{ pair.sellPrice }}</span>
+ <span class="action-label action-btn ">{{ $t('卖出') }}</span>
+ </button>
+ <div class="pair-chart">
+ <MiniKlineChart :key="pair.symbol" :data="pair.klineData || []" :up="pair.change >= 0" />
+ </div>
+ <button class=" buy">
+ <span class="action-price">{{ pair.buyPrice }}</span>
+ <span class="action-label action-btn">{{ $t('买入') }}</span>
+ </button>
+ </div>
</div>
</div>
</div>
- <!-- 理财板块 -->
- <div class="section-block">
- <div class="section-header">
- <h3>{{ $t('板块.理财') }}</h3>
- <button class="more-btn">
- {{ $t('通用.更多') }}
- <Icon icon="material-symbols:chevron-right" width="16" height="16" />
- </button>
+ <!-- About Us -->
+ <div class="about-section">
+ <div class="section-header" @click="router.push('/aboutUs')">
+ <h2>{{ $t('关于我们') }}</h2>
+ <span class="more-link">{{ $t('More') }} ></span>
</div>
- <div class="finance-list">
- <div class="finance-card" v-for="item in financeProducts" :key="item.id">
- <div class="finance-info">
- <div class="finance-name">{{ item.name }}</div>
- <div class="finance-rate">
- <span class="rate-num">{{ item.rate }}%</span>
- <span class="rate-label">{{ $t('理财.年化收益') }}</span>
- </div>
- <div class="finance-desc">{{ item.desc }}</div>
- </div>
- <button class="invest-btn">{{ $t('理财.投资') }}</button>
+ <div class="video-thumbnail" role="button">
+ <div class="video-placeholder">
+ <video class="home-video" :src="homeVideoUrl" controls preload="metadata" @click.stop></video>
</div>
</div>
+ <p class="about-desc">{{ $t('home.aboutDesc') }}</p>
+ <ul class="feature-list">
+ <li v-for="feature in features" :key="feature">{{ feature }}</li>
+ </ul>
</div>
- <!-- 资讯板块 -->
- <div class="section-block">
- <div class="section-header">
- <h3>{{ $t('板块.资讯') }}</h3>
- <button class="more-btn">
- {{ $t('通用.更多') }}
- <Icon icon="material-symbols:chevron-right" width="16" height="16" />
- </button>
+ <!-- News Section -->
+ <div class="news-section">
+ <div class="section-header" @click="router.push('/news')">
+ <h2>{{ $t('home.news') }}</h2>
+ <span class="more-link">{{ $t('More') }} ></span>
</div>
- <div class="news-list">
- <div class="news-item" v-for="news in newsList" :key="news.id">
+ <div class="news-carousel">
+ <div class="news-item" v-for="(item, index) in newsList" :key="item.id || index"
+ @click="router.push('/news')">
+ <img v-if="item.urlToImage" :src="item.urlToImage" alt="" class="news-image" />
<div class="news-content">
- <div class="news-title">{{ news.title }}</div>
- <div class="news-meta">
- <span class="news-source">{{ news.source }}</span>
- <span class="news-time">{{ news.time }}</span>
- </div>
+ <h3 class="news-title">{{ (item.title || stripHtml(item.description || '')).slice(0, 40) }}{{
+ (item.title || stripHtml(item.description || '')).length > 40 ? '...' : '' }}</h3>
+ <p class="news-excerpt">{{ stripHtml(item.description || '').slice(0, 80) }}{{
+ stripHtml(item.description || '').length > 80 ? '...' : '' }}</p>
</div>
- <img v-if="news.image" :src="news.image" class="news-image">
+ </div>
+ <div class="news-item news-item--placeholder" v-if="!newsList.length">
+ <div class="news-content">
+ <h3 class="news-title">{{ $t('home.news') }}</h3>
+ <p class="news-excerpt">--</p>
+ </div>
</div>
</div>
</div>
- <!-- 底部导航 -->
- <div class="bottom-nav">
- <div v-for="item in bottomNavs" :key="item.id" :class="['nav-btn', { active: currentNav === item.id }]"
- @click="currentNav = item.id">
- <Icon :icon="item.icon" width="24" height="24" />
- <span>{{ item.name }}</span>
+ <!-- Download Section -->
+ <div class="download-section">
+ <h2>{{ $t('home.tradeGlobalMarkets') }}</h2>
+ <p class="download-desc">{{ $t('home.downloadDesc') }}</p>
+ <button class="download-btn">
+ {{ $t('home.downloadNow') }}
+ </button>
+ <div class="phone-mockups">
+ <!-- Phone mockups placeholder -->
+ <img src="@/assets/image/home/download.b711f9a.png" alt="phone-mockups" />
+ </div>
+ </div>
+
+ <!-- Partners -->
+ <div class="partners-section">
+ <img src="@/assets/image/home/hezuo@3x.fcc1aa7.png" alt="partners" />
+ </div>
+
+ <!-- Footer Info -->
+ <div class="footer-info">
+ <div class="footer-left">
+ <div class="info-section">
+ <h3>{{ $t('home.company') }}</h3>
+ <ul>
+ <li>{{ $t('关于我们') }}</li>
+ <li>{{ $t('home.teamIntro') }}</li>
+ <li>{{ $t('帮助中心') }}</li>
+ <li>{{ $t('home.emailSupport') }}</li>
+ <li>support@wealthinfra.com</li>
+ </ul>
+ </div>
+ <div class="info-section">
+ <h3>{{ $t('home.statement') }}</h3>
+ <ul>
+ <li>{{ $t('home.riskDisclosure') }}</li>
+ <li>{{ $t('home.privacyStatement') }}</li>
+ <li>{{ $t('home.amlPolicy') }}</li>
+ <li>{{ $t('home.regulatoryLicense') }}</li>
+ </ul>
+ </div>
+ </div>
+ <div class="footer-right">
+ <div class="info-section">
+ <h3>{{ $t('home.policy') }}</h3>
+ <ul>
+ <li>{{ $t('home.userAgreement') }}</li>
+ </ul>
+ </div>
</div>
</div>
</div>
</template>
<script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { IMG_PATH } from '@/config'
+import homeVideoUrl from '@/assets/video/home_video.mp4'
+import { _getRealtimeByType } from '@/service/quotes.api'
+import MiniKlineChart from '@/components/MiniKlineChart/index.vue'
-const i18n = useI18n()
+// 外汇货币代码 -> 国旗图国家/地区代码（用于 flagcdn.com）
+const CURRENCY_TO_FLAG = {
+ eur: 'eu', usd: 'us', gbp: 'gb', jpy: 'jp', chf: 'ch', aud: 'au', cad: 'ca', nzd: 'nz',
+ cny: 'cn', cnh: 'cn', hkd: 'hk', sgd: 'sg', nok: 'no', sek: 'se', dkk: 'dk', mxn: 'mx',
+ zar: 'za', try: 'tr', pln: 'pl', inr: 'in', krw: 'kr', thb: 'th', myr: 'my', idr: 'id',
+ php: 'ph', brl: 'br', rub: 'ru', czk: 'cz', huf: 'hu', ron: 'ro', bgn: 'bg', hrk: 'hr'
+}
+const FLAG_CDN = 'https://flagcdn.com/w40'
+import { _getUsHeadNews } from '@/service/user.api'
+// import newsPlaceholder from '@/assets/image/news-placeholder.png'
-// 使用计算属性来处理动态变化的翻译内容
-const navList = computed(() => [
- { name: i18n.t('导航.期权'), icon: 'icon-park-outline:chart-stock' },
- { name: i18n.t('导航.美股'), icon: 'icon-park-outline:dollar' },
- { name: i18n.t('导航.A股'), icon: 'icon-park-outline:chinese' },
- { name: i18n.t('导航.港股'), icon: 'icon-park-outline:hk' },
- { name: i18n.t('导航.加密货币'), icon: 'cryptocurrency:btc' },
- { name: i18n.t('导航.资讯'), icon: 'icon-park-outline:news' },
- { name: i18n.t('导航.理财'), icon: 'icon-park-outline:finance' },
- { name: i18n.t('导航.下载'), icon: 'icon-park-outline:download' }
-])
+const { t, locale } = useI18n()
+const router = useRouter()
-const marketTabs = computed(() => [
- { id: 'hot', name: i18n.t('市场.热门') },
- { id: 'us', name: i18n.t('市场.美股') },
- { id: 'a', name: i18n.t('市场.A股') },
- { id: 'hk', name: i18n.t('市场.港股') },
- { id: 'crypto', name: i18n.t('市场.加密货币') },
- { id: 'forex', name: i18n.t('市场.现货') }
-])
+function stripHtml(html) {
+ if (!html || typeof html !== 'string') return ''
+ const div = document.createElement('div')
+ div.innerHTML = html
+ return (div.textContent || div.innerText || '').trim()
+}
-const bottomNavs = computed(() => [
- { id: 'home', name: i18n.t('底部导航.首页'), icon: 'material-symbols:home-outline' },
- { id: 'market', name: i18n.t('底部导航.市场'), icon: 'material-symbols:analytics-outline' },
- { id: 'trade', name: i18n.t('底部导航.交易'), icon: 'material-symbols:candlestick-chart-outline' },
- { id: 'discover', name: i18n.t('底部导航.发现'), icon: 'material-symbols:explore-outline' },
- { id: 'mine', name: i18n.t('底部导航.我的'), icon: 'material-symbols:person-outline' }
-])
+// 跳转到交易页 Options，并带上 symbol 与 activeTab
+function goToOptions(symbol, type) {
+ if (!symbol) return
+ router.push({
+ path: '/trade/options',
+ query: { symbol, activeTab: type || 'cryptos' }
+ })
+}
-const traders = computed(() => [
- {
- id: 1,
- name: i18n.t('交易员.达人A'),
- avatar: "/avatars/trader1.png",
- profit: 289.5,
- followers: "12.5万"
- },
- {
- id: 2,
- name: i18n.t('交易员.达人B'),
- avatar: "/avatars/trader2.png",
- profit: 156.8,
- followers: "8.2万"
+const YOUTUBE_LINK = 'https://www.youtube.com/watch?v=eAL5XVQtrxo&source_ve_path=OTY3MTQ&embeds_referring_euri=https%3A%2F%2Fwealthinfra.com%2F'
+function openYouTubeLink() {
+ window.open(YOUTUBE_LINK, '_blank', 'noopener,noreferrer')
+}
+
+// 语言映射表
+const langMap = {
+ 'de': 'Deutsch',
+ 'en': 'English',
+ 'es': 'Español',
+ 'fr': 'Français',
+ 'Italy': 'Italiano',
+ 'Japanese': '日本語',
+ 'Korean': '한국어',
+ 'pt': 'Português',
+ 'vi': 'Tiếng Việt',
+ 'CN': '繁体中文',
+ 'zh-CN': '简体',
+ 'gr': 'Ελληνικά',
+ 'th': 'ไทย'
+}
+
+// 获取当前语言名称
+const currentLangName = computed(() => {
+ return langMap[locale.value] || '简体'
+})
+
+const activeTab = ref('forex')
+
+const tradingPairs = ref([])
+// 新闻列表，用于横向滚动轮播（与 news/index.vue 同源：_getUsHeadNews）
+const newsList = ref([])
+
+// Market Overview 使用 Trading Instruments 的前3条数据（保留完整 pair 用于展示图标）
+const currencyPairs = computed(() => tradingPairs.value.slice(0, 3))
+
+// 从外汇对取基础货币代码，如 EUR/USD -> eur，EURUSD -> eur（无斜杠取前3位）
+function getForexBaseCurrency(symbol) {
+ if (!symbol || typeof symbol !== 'string') return ''
+ const s = symbol.trim()
+ if (s.includes('/')) return s.split('/')[0].trim().toLowerCase()
+ return s.slice(0, 3).toLowerCase()
+}
+
+// 从外汇对取计价货币代码，如 EUR/USD -> usd（右下角小图用）
+function getForexQuoteCurrency(symbol) {
+ if (!symbol || typeof symbol !== 'string') return ''
+ const s = symbol.trim()
+ if (s.includes('/')) return s.split('/')[1]?.trim().toLowerCase() || ''
+ return s.length > 3 ? s.slice(3, 6).toLowerCase() : ''
+}
+
+// 列表项图标地址：外汇用国旗，加密货币用 symbol 图；股票、ETF 不展示图标
+function getPairIconUrl(pair) {
+ if (!pair) return ''
+ if (activeTab.value === 'stock' || activeTab.value === 'etf') return ''
+ if (activeTab.value === 'forex') {
+ const code = CURRENCY_TO_FLAG[getForexBaseCurrency(pair.symbol)]
+ return code ? `${FLAG_CDN}/${code}.png` : ''
}
+ return pair.iconImg ? `${IMG_PATH}/symbol/${pair.iconImg}.png` : ''
+}
+
+// 小图用名字后面3位（计价货币）的国旗，仅外汇有效
+function getPairIconUrlSm(pair) {
+ if (!pair || activeTab.value !== 'forex') return ''
+ const quote = getForexQuoteCurrency(pair.symbol)
+ if (!quote) return ''
+ const code = CURRENCY_TO_FLAG[quote]
+ return code ? `${FLAG_CDN}/${code}.png` : ''
+}
+
+// 获取交易数据
+const fetchTradingData = async () => {
+ let type = ''
+ let category = null
+
+ switch (activeTab.value) {
+ case 'crypto':
+ type = 'cryptos'
+ break
+ case 'etf':
+ type = 'indices'
+ break
+ case 'stock':
+ type = 'US-stocks'
+ break
+ case 'forex':
+ type = 'forex'
+ category = 'forex'
+ break
+ default:
+ type = 'forex'
+ category = 'forex'
+ }
+
+ try {
+ const params = {
+ type: type,
+ pageNo: 1
+ }
+ if (category) {
+ params.category = category
+ }
+
+ const data = await _getRealtimeByType(params)
+
+ if (data && Array.isArray(data)) {
+ // 外汇 tab 只展示指定 symbol：EURUSD GBPUSD AUDUSD XAUUSD NZDUSD
+ const forexAllowedSymbols = ['EURUSD', 'GBPUSD', 'AUDUSD', 'XAUUSD', 'NZDUSD']
+ let list = data
+ if (activeTab.value === 'forex') {
+ list = data.filter(item => {
+ const raw = (item.symbol || item.enName || '').toString().trim()
+ const normalized = raw.replace(/\//g, '').toUpperCase()
+ return forexAllowedSymbols.includes(normalized)
+ })
+ }
+ // 只取前5条数据，并转换为需要的格式
+ tradingPairs.value = list.slice(0, 5).map(item => {
+ const basePrice = parseFloat(item.close || item.lastPrice || 0)
+ const changeRatio = item.changeRatio || 0
+
+ // 生成小型 K 线图数据 [open, close, low, high] 若干根
+ const klineData = generateMiniKlineData(basePrice, changeRatio)
+
+ // 计算买入价和卖出价（买入价略高，卖出价略低）
+ const spread = basePrice * 0.0001 // 很小的价差
+ const sellPrice = (basePrice - spread).toFixed(4)
+ const buyPrice = (basePrice + spread).toFixed(4)
+ const symboltxt = item.enName
+ const symbolStr = item.symbol || '--'
+ const iconImg = item.symbol_data || (symbolStr.includes('/') ? symbolStr.split('/')[0].toLowerCase() : symbolStr.replace(/USDT$/i, '').toLowerCase()) || symbolStr.toLowerCase()
+ return {
+ symboltxt: symboltxt,
+ symbol: symbolStr,
+ type: type,
+ iconImg: iconImg,
+ price: basePrice.toFixed(4),
+ change: changeRatio,
+ sellPrice: sellPrice,
+ buyPrice: buyPrice,
+ klineData: klineData
+ }
+ })
+ } else {
+ tradingPairs.value = []
+ }
+ } catch (error) {
+ console.error('获取交易数据失败:', error)
+ tradingPairs.value = []
+ }
+}
+
+// 监听 tab 切换
+watch(activeTab, () => {
+ fetchTradingData()
+})
+
+// 根据当前价与涨跌幅生成小型 K 线数据，每根 [open, close, low, high]
+function generateMiniKlineData(basePrice, changeRatio) {
+ const candleCount = 12
+ const startPrice = basePrice / (1 + (changeRatio || 0) / 100)
+ const range = basePrice - startPrice
+ const candles = []
+ let prevClose = startPrice
+ for (let i = 0; i < candleCount; i++) {
+ const t = (i + 1) / candleCount
+ const trend = startPrice + range * t
+ const noise = (Math.random() - 0.5) * (Math.abs(range) * 0.15 + basePrice * 0.002)
+ const close = i === candleCount - 1 ? basePrice : Math.max(basePrice * 0.001, trend + noise)
+ const open = prevClose
+ const low = Math.min(open, close) - Math.random() * basePrice * 0.001
+ const high = Math.max(open, close) + Math.random() * basePrice * 0.001
+ candles.push([open, close, low, high])
+ prevClose = close
+ }
+ return candles
+}
+
+// 组件挂载时获取数据
+onMounted(() => {
+ fetchTradingData()
+ _getUsHeadNews().then((data) => {
+ const list = Array.isArray(data) ? data : (data && data.articles) ? data.articles : []
+ newsList.value = list.slice(0, 10)
+ }).catch(() => { })
+})
+
+const features = ref([
+ t('home.feature1'),
+ t('home.feature2'),
+ t('home.feature3'),
+ t('home.feature4')
])
-const financeProducts = computed(() => [
- {
- id: 1,
- name: i18n.t('理财.稳健计划'),
- rate: 12.8,
- desc: i18n.t('理财.稳健描述')
- },
- {
- id: 2,
- name: i18n.t('理财.高收益计划'),
- rate: 25.6,
- desc: i18n.t('理财.高收益描述')
- }
-])
-
-const marketData = ref([
- {
- name: '腾讯控股',
- code: 'HK 00700.HK',
- price: '403.800',
- change: 0.00
- },
- {
- name: '英伟达',
- code: 'US NVDA.US',
- price: '146.990',
- change: -0.88
- }
-])
-
-const currentTab = ref('hot')
-const currentNav = ref('home')
-
-const newsList = ref([
- {
- id: 1,
- title: "比特币突破48000美元，创下年内新高",
- source: "币市快讯",
- time: "10分钟前",
- image: "/news/btc.png"
- },
- {
- id: 2,
- title: "美联储暗示年内可能降息，加密货币市场全线上涨",
- source: "财经日报",
- time: "35分钟前",
- image: "/news/fed.png"
- }
+const partners = ref([
+ 'BINANCE', 'coinbase', 'Stralishit', 'Bitazza',
+ 'Vanguard', 'ETX Capital', 'Coinb', 'Bitbank Global',
+ 'FOREX.com', 'Bitget', 'JFX', 'ICDX'
])
</script>
<style lang="scss" scoped>
-.home {
+.home-page {
min-height: 100vh;
- background: $main_background;
- padding-bottom: 56px;
+ background: #fff;
+ padding-bottom: 12rem;
}
+/* Header */
.header {
display: flex;
+ justify-content: space-between;
align-items: center;
- padding: 16px 20px;
- background: $main_background;
- position: sticky;
- top: 0;
- z-index: 100;
- border-bottom: 1px solid rgba(118, 128, 143, 0.1);
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
-}
+ padding: 1.5rem;
+ background: #fff;
+ box-shadow: 0 1px 3px 1.5px #00000020;
-.avatar {
- width: 40px;
- height: 40px;
- border-radius: 20px;
- background: rgba(146, 209, 255, 0.08);
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- transition: all 0.2s ease;
-
- &:hover {
- background: rgba(146, 209, 255, 0.12);
- transform: scale(1.05);
+ .header-left {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+
+ .logo {
+ width: 4rem;
+ height: 4rem;
+ }
+
+ .logo-text {
+ font-size: 2.25rem;
+ font-weight: 700;
+ color: $text_color;
+ }
}
-}
-.search-box {
- flex: 1;
- display: flex;
- align-items: center;
- background: $input_background;
- border-radius: 12px;
- margin: 0 12px;
- padding: 10px 16px;
- height: 40px;
- border: 1px solid rgba(118, 128, 143, 0.1);
- transition: all 0.2s ease;
-
- &:focus-within {
- border-color: rgba(146, 209, 255, 0.3);
- box-shadow: 0 0 0 3px rgba(146, 209, 255, 0.1);
- }
-}
+ .header-right {
+ display: flex;
+ align-items: center;
+ gap: 1.5rem;
-.search-box input {
- border: none;
- background: transparent;
- margin-left: 8px;
- width: 100%;
- font-size: 14px;
- color: $text_color;
-
- &::placeholder {
- color: $text_color1;
- }
-}
+ .lang-selector {
+ padding: 0.5rem 1rem;
+ background: #f5f5f5;
+ border-radius: 0.5rem;
+ font-size: 1.5rem;
+ cursor: pointer;
+ transition: all 0.2s ease;
-.header-right {
- display: flex;
- gap: 12px;
- color: $text_color1;
-
- svg {
- cursor: pointer;
- transition: all 0.2s ease;
-
- &:hover {
- color: $color_main;
- transform: scale(1.1);
+ &:hover {
+ background: #e8e8e8;
+ }
+
+ .lang-text {
+ color: $text_color;
+ }
+ }
+
+ .icon-btn {
+ width: 4rem;
+ height: 4rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ background: #f5f5f5;
+ cursor: pointer;
+
+ img {
+ width: 2rem;
+ height: 2rem;
+ }
}
}
}
-.gift-banner {
- margin: 16px 20px;
- background: linear-gradient(135deg, rgba(146, 209, 255, 0.1) 0%, rgba(123, 184, 255, 0.05) 100%);
- border-radius: 16px;
- padding: 20px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- box-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
- border: 1px solid rgba(146, 209, 255, 0.15);
- transition: all 0.3s ease;
-
- &:hover {
- box-shadow: 0 4px 20px rgba(146, 209, 255, 0.12);
- transform: translateY(-2px);
- }
-}
-
-.gift-left {
- display: flex;
- align-items: center;
- gap: 16px;
-}
-
-.gift-icon {
- width: 48px;
- height: 48px;
- border-radius: 12px;
- background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
- display: flex;
- align-items: center;
- justify-content: center;
- color: #fff;
- box-shadow: 0 4px 12px rgba(146, 209, 255, 0.3);
-}
-
-.gift-amount {
- font-size: 18px;
- font-weight: 700;
- color: $text_color;
- letter-spacing: -0.3px;
-}
-
-.gift-desc {
- font-size: 13px;
- color: $text_color1;
- margin-top: 6px;
-}
-
-.register-btn {
- background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
- color: #fff;
- border: none;
- padding: 10px 24px;
- border-radius: 12px;
- font-size: 14px;
- font-weight: 600;
- box-shadow: 0 4px 12px rgba(146, 209, 255, 0.3);
- cursor: pointer;
- transition: all 0.3s ease;
-
- &:hover {
- background: linear-gradient(135deg, #7BB8FF 0%, #6BA8FF 100%);
- box-shadow: 0 6px 16px rgba(146, 209, 255, 0.4);
- transform: translateY(-1px);
- }
-
- &:active {
- transform: translateY(0);
- }
-}
-
-.nav-section {
- background: $main_background;
- padding: 24px 20px;
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- gap: 20px 0;
-}
-
-.nav-item {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 8px;
- cursor: pointer;
- padding: 12px;
- border-radius: 12px;
- transition: all 0.2s ease;
-
- &:hover {
- background: rgba(146, 209, 255, 0.05);
- transform: translateY(-2px);
- }
-
- svg {
- transition: all 0.2s ease;
- }
-
- &:hover svg {
- color: $color_main;
- transform: scale(1.1);
- }
-}
-
-.nav-name {
- font-size: 13px;
- color: $text_color;
- font-weight: 500;
-}
-
-.banner-section {
- margin: 0 20px 16px;
-}
-
-.banner-item {
- background: $main_background;
- border-radius: 16px;
- padding: 24px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- box-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
- border: 1px solid rgba(118, 128, 143, 0.1);
- transition: all 0.3s ease;
-
- &:hover {
- box-shadow: 0 4px 20px rgba(146, 209, 255, 0.12);
- transform: translateY(-2px);
- }
-}
-
-.banner-tag {
- display: inline-flex;
- align-items: center;
- gap: 6px;
- background: linear-gradient(135deg, rgba(255, 107, 0, 0.15) 0%, rgba(255, 107, 0, 0.08) 100%);
- color: #ff6b00;
- padding: 6px 12px;
- border-radius: 8px;
- font-size: 12px;
- font-weight: 600;
- border: 1px solid rgba(255, 107, 0, 0.2);
-}
-
-.banner-title {
- margin: 16px 0;
- font-size: 18px;
- font-weight: 700;
- color: $text_color;
- letter-spacing: -0.3px;
-}
-
-.join-btn {
- border: none;
- background: transparent;
- color: $color_main;
- padding: 6px 0;
- display: flex;
- align-items: center;
- gap: 4px;
- font-size: 14px;
- font-weight: 600;
- cursor: pointer;
- transition: all 0.2s ease;
-
- &:hover {
- color: #7BB8FF;
- gap: 8px;
- }
-}
-
-.banner-right img {
- width: 120px;
- height: 120px;
- object-fit: contain;
-}
-
-.market-section {
- background: $main_background;
- margin-top: 0;
- border-radius: 16px;
- margin: 0 20px 16px;
- box-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
- border: 1px solid rgba(118, 128, 143, 0.1);
+/* Hero Section */
+.hero-section {
+ border-radius: 2rem;
overflow: hidden;
-}
+ margin: 0 auto;
+ box-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.08);
+ width: calc(100% - 4rem);
+ margin-top: 3rem;
-.market-tabs {
- display: flex;
- padding: 0 20px;
- border-bottom: 1px solid rgba(118, 128, 143, 0.1);
- overflow-x: auto;
- -webkit-overflow-scrolling: touch;
- background: $main_background;
-}
-
-.market-tabs::-webkit-scrollbar {
- display: none;
-}
-
-.tab-item {
- padding: 16px 20px;
- font-size: 14px;
- color: $text_color1;
- position: relative;
- white-space: nowrap;
- cursor: pointer;
- transition: all 0.2s ease;
- font-weight: 500;
-}
-
-.tab-item.active {
- color: $color_main;
- font-weight: 700;
-}
-
-.tab-item.active::after {
- content: '';
- position: absolute;
- bottom: 0;
- left: 50%;
- transform: translateX(-50%);
- width: 24px;
- height: 3px;
- background: $color_main;
- border-radius: 2px;
-}
-
-.market-item {
- display: flex;
- justify-content: space-between;
- padding: 20px;
- border-bottom: 1px solid rgba(118, 128, 143, 0.1);
- transition: all 0.2s ease;
- cursor: pointer;
-
- &:hover {
- background: rgba(146, 209, 255, 0.03);
+ :deep(.van-swipe) {
+ border-radius: 2rem;
+ overflow: hidden;
}
-
- &:last-child {
- border-bottom: none;
+
+ :deep(.van-swipe-item) {
+ margin: 0 auto;
+ }
+
+ :deep(.van-swipe__indicator) {
+ background-color: rgba(255, 255, 255, 0.5);
+ width: 1rem;
+ height: 1rem;
+ margin: 0 0.5rem;
+ }
+
+ :deep(.van-swipe__indicator--active) {
+ background-color: #92D1FF;
+ }
+
+ .hero-card {
+ background: #fff;
+ border-radius: 2rem;
+ padding: 3rem;
+ min-height: 40rem;
+ display: flex;
+ flex-direction: column;
+
+ .hero-title {
+ font-size: 3.5rem;
+ font-weight: 700;
+ color: $text_color;
+ margin-bottom: 3rem;
+ margin-top: 1rem;
+ }
+
+ .hero-desc {
+ font-size: 2.5rem;
+ color: $text_color;
+ margin-bottom: 3rem;
+ line-height: 1.5;
+ }
+
+ .trade-btn {
+ background: #0a6bfa;
+ color: #fff;
+ border: none;
+ padding: 1rem 3rem;
+ border-radius: 5rem;
+ font-size: 3rem;
+ font-weight: 300;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 1rem;
+ cursor: pointer;
+ margin-bottom: 3rem;
+
+ .play-icon {
+ width: 4.5rem;
+ object-fit: contain;
+ }
+ }
+
+ .hero-illustration {
+ position: relative;
+ margin-bottom: 2rem;
+
+ .robot-illustration,
+ .device-illustration,
+ .crypto-illustration {
+ width: 100%;
+ border-radius: 1rem;
+
+ img {
+ width: 70%;
+ margin: 0 auto;
+ }
+ }
+ }
}
}
-.stock-name {
- font-size: 16px;
+.no-more-notice {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ margin: 2rem 1.5rem;
+ font-size: 2.5rem;
color: $text_color;
- font-weight: 600;
- letter-spacing: -0.2px;
+ padding: 2rem;
+ background-color: #f6f6f6;
+ border-radius: 2rem;
+
+ img {
+ width: 2rem;
+ height: 2rem;
+ }
+
+ .arrow {
+ margin-left: auto;
+ width: 2rem;
+ height: auto;
+ }
}
-.stock-code {
- font-size: 12px;
- color: $text_color1;
- margin-top: 6px;
-}
-
-.current-price {
- font-size: 16px;
- text-align: right;
- color: $text_color;
- font-weight: 600;
- letter-spacing: -0.2px;
-}
-
-.price-change {
- font-size: 13px;
- text-align: right;
- margin-top: 6px;
- font-weight: 600;
-}
-
-.up {
- color: $green;
-}
-
-.down {
- color: $red;
-}
-
-.bottom-nav {
- position: fixed;
- bottom: 0;
- left: 0;
- right: 0;
+/* Quick Access */
+.quick-access {
+ display: flex;
+ justify-content: space-around;
+ padding: 3rem 0;
background: #fff;
- display: flex;
- padding: 6px 0;
- border-top: 1px solid #f0f0f0;
-}
+ box-shadow: 0rem 1rem 4rem 0rem rgba(0, 0, 0, .12);
+ margin: 3rem 1.5rem 4rem;
+ border-radius: 2rem;
-.nav-btn {
- flex: 1;
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 2px;
- font-size: 12px;
- color: #999;
-}
+ .quick-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.5rem;
+ cursor: pointer;
+ width: 25%;
-.nav-btn.active {
- color: #000;
-}
+ .quick-icon {
+ width: 5rem;
+ height: 5rem;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
-.section-block {
- background: $main_background;
- margin: 0 20px 16px;
- padding: 20px;
- border-radius: 16px;
- box-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
- border: 1px solid rgba(118, 128, 143, 0.1);
-}
+ img {
+ width: 100%;
+ object-fit: contain;
+ }
+ }
-.section-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 20px;
-}
-
-.section-header h3 {
- font-size: 18px;
- font-weight: 700;
- color: $text_color;
- letter-spacing: -0.3px;
-}
-
-.more-btn {
- border: none;
- background: transparent;
- color: $text_color1;
- font-size: 14px;
- display: flex;
- align-items: center;
- gap: 4px;
- cursor: pointer;
- transition: all 0.2s ease;
- font-weight: 500;
-
- &:hover {
- color: $color_main;
- gap: 6px;
+ span {
+ font-size: 2rem;
+ color: $text_color;
+ }
}
}
-/* 跟单样式 */
-.trader-list {
- display: flex;
- flex-direction: column;
- gap: 12px;
-}
+/* Market Overview */
+.market-overview {
+ padding: 3rem;
+ background: #fff;
-.trader-card {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 16px;
- background: $main2_background;
- border-radius: 12px;
- border: 1px solid rgba(118, 128, 143, 0.1);
- transition: all 0.3s ease;
- cursor: pointer;
-
- &:hover {
- box-shadow: 0 4px 12px rgba(146, 209, 255, 0.08);
- transform: translateY(-2px);
- border-color: rgba(146, 209, 255, 0.2);
+
+ .currency-cards {
+ display: flex;
+ gap: 1.5rem;
+
+ .currency-card {
+ flex: 1;
+ padding: 2rem;
+ background: #f9f9f9;
+ border-radius: 1rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ text-align: center;
+
+ .currency-pair-row {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ margin-bottom: 0.5rem;
+ }
+
+ .currency-card-icon-wrap {
+ position: relative;
+ flex-shrink: 0;
+ }
+
+ .currency-card-icon {
+ width: 3rem;
+ height: 3rem;
+ border-radius: 50%;
+ object-fit: cover;
+
+ &--large {
+ width: 3rem;
+ height: 3rem;
+ }
+
+ &--sm {
+ position: absolute;
+ right: -0.2rem;
+ bottom: -0.2rem;
+ width: 1.4rem;
+ height: 1.4rem;
+ border-radius: 50%;
+ object-fit: cover;
+ border: 0.15rem solid #fff;
+ box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.2);
+ }
+ }
+
+ .currency-pair {
+ font-size: 2rem;
+ color: $text_color;
+ margin-bottom: 0;
+ }
+
+ .currency-price {
+ font-size: 2.5rem;
+ font-weight: 700;
+ color: $text_color;
+ margin-bottom: 1rem;
+ }
+
+ .currency-change {
+ font-size: 2rem;
+ font-weight: 600;
+
+ &.up {
+ color: $green;
+ }
+
+ &.down {
+ color: $red;
+ }
+ }
+ }
}
}
-.trader-info {
- display: flex;
- align-items: center;
- gap: 12px;
+/* Trading Section */
+.trading-section {
+ padding: 3rem;
+ background: #fff;
+
+ .trading-tabs {
+ display: flex;
+ align-items: center;
+ gap: 1.6rem;
+ margin-bottom: 3rem;
+ overflow-x: auto;
+
+ .tab-item {
+ padding: 1.3rem 1rem;
+ font-size: 2rem;
+ color: $text_color;
+ white-space: nowrap;
+ cursor: pointer;
+ border-radius: 999px;
+ transition: background-color 0.2s, color 0.2s;
+
+ &.active {
+ padding: 1.3rem 3.5rem;
+ background: #3478F6;
+ color: #fff;
+ font-weight: 600;
+ box-shadow: 0 0.2rem 0.6rem rgba(52, 120, 246, 0.35);
+ }
+ }
+ }
+
+ .trading-pairs {
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+
+ .pair-item {
+ display: flex;
+ flex-direction: column;
+ padding: 2rem;
+ background: #fff;
+ border-radius: 1rem;
+ border: 0.1rem solid #f0f0f0;
+
+ .pair-header {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ .pair-symbol {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.6rem;
+ font-size: 2rem;
+ font-weight: 600;
+ color: $text_color;
+
+ .pair-symbol-icon-wrap {
+ position: relative;
+ flex-shrink: 0;
+ }
+
+ .pair-symbol-icon {
+ width: 2.4rem;
+ height: 2.4rem;
+ border-radius: 50%;
+ // object-fit: contain;
+
+ &--large {
+ width: 3rem;
+ height: 3rem;
+ }
+
+ &--sm {
+ position: absolute;
+ right: -0.2rem;
+ bottom: -0.2rem;
+ width: 1.6rem;
+ height: 1.6rem;
+ border-radius: 50%;
+ object-fit: cover;
+ border: 0.15rem solid #fff;
+ box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.2);
+ }
+ }
+ }
+
+ .pair-change {
+ font-size: 1.75rem;
+ font-weight: 600;
+
+ &.up {
+ color: $green;
+ }
+
+ &.down {
+ color: $red;
+ }
+ }
+ }
+
+ .pair-bottom {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ position: relative;
+ top: -2.2rem;
+
+ .action-price {
+ font-size: 2rem;
+ font-weight: 600;
+ }
+
+ .action-btn {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 0.3rem 5rem;
+ border: 0.1rem solid #333;
+ border-radius: 0.2rem;
+ font-size: 1.8rem;
+ background: #fff;
+ cursor: pointer;
+ min-width: 7rem;
+ gap: 0.5rem;
+ flex-shrink: 0;
+
+
+ .action-label {
+ font-size: 1.5rem;
+ }
+
+ &.sell {
+ .action-price {
+ color: $text_color;
+ }
+
+ .action-label {
+ color: $red;
+ }
+ }
+
+ &.buy {
+ .action-price {
+ color: $text_color;
+ }
+
+ .action-label {
+ color: $green;
+ }
+ }
+
+ &:hover {
+ background: #f9f9f9;
+ }
+ }
+
+ .pair-chart {
+ flex: 1;
+ height: 2.5rem;
+ margin: 0 0.5rem;
+ min-width: 6rem;
+ }
+ }
+ }
+ }
}
-.trader-avatar {
- width: 48px;
- height: 48px;
- border-radius: 24px;
- object-fit: cover;
- border: 2px solid rgba(146, 209, 255, 0.1);
+/* About Section */
+.about-section {
+ padding: 3rem;
+ background: #fff;
+
+ .section-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 2rem;
+
+ h2 {
+ font-size: 2.25rem;
+ font-weight: 700;
+ color: $text_color;
+ }
+
+ .more-link {
+ font-size: 1.75rem;
+ cursor: pointer;
+ }
+ }
+
+ .video-thumbnail {
+ margin-bottom: 2rem;
+ cursor: pointer;
+
+ .video-placeholder {
+ width: 100%;
+ background: #1a1a1a;
+ border-radius: 1rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 1rem;
+
+ .home-video {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ border-radius: 1rem;
+ }
+
+ .play-button {
+ width: 6rem;
+ height: 6rem;
+ background: rgba(255, 255, 255, 0.9);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #000;
+ font-size: 2rem;
+ }
+ }
+
+ .video-info {
+ .video-title {
+ font-size: 1.75rem;
+ font-weight: 600;
+ color: $text_color;
+ margin-bottom: 0.5rem;
+ }
+
+ .video-platform {
+ font-size: 1.5rem;
+ color: $text_color1;
+ }
+ }
+ }
+
+ .about-desc {
+ font-size: 1.75rem;
+ color: $text_color1;
+ line-height: 1.5;
+ margin-bottom: 2rem;
+ }
+
+ .feature-list {
+ list-style: none;
+ padding: 0;
+
+ li {
+ font-size: 1.75rem;
+ color: $text_color1;
+ margin-bottom: 1rem;
+ padding-left: 3rem;
+ position: relative;
+
+ &::before {
+ content: '✓';
+ position: absolute;
+ left: 0;
+ color: $green;
+ font-weight: 700;
+ }
+ }
+ }
}
-.trader-name {
- font-size: 16px;
- font-weight: 600;
- color: $text_color;
- letter-spacing: -0.2px;
+/* News Section */
+.news-section {
+ padding: 3rem;
+ background: #fff;
+
+ .section-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 2rem;
+
+ h2 {
+ font-size: 2.25rem;
+ font-weight: 700;
+ color: $text_color;
+ }
+
+ .more-link {
+ font-size: 1.75rem;
+ color: $text-color;
+ cursor: pointer;
+ }
+ }
+
+ .news-carousel {
+ display: flex;
+ gap: 1.5rem;
+ overflow-x: auto;
+ overflow-y: hidden;
+ padding-bottom: 0.5rem;
+ scroll-snap-type: x mandatory;
+ -webkit-overflow-scrolling: touch;
+
+ &::-webkit-scrollbar {
+ height: 0.4rem;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: #ccc;
+ border-radius: 0.2rem;
+ }
+
+ .news-item {
+ flex-shrink: 0;
+ width: 45rem;
+ min-width: 28rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ padding: 1.5rem;
+ background: #f9f9f9;
+ border-radius: 1rem;
+ scroll-snap-align: start;
+ cursor: pointer;
+
+ &.news-item--placeholder {
+ min-width: 100%;
+ }
+
+ .news-image {
+ width: 100%;
+ height: 14rem;
+ border-radius: 0.5rem;
+ object-fit: cover;
+ }
+
+ .news-content {
+ flex: 1;
+ min-width: 0;
+
+ .news-title {
+ font-size: 1.75rem;
+ font-weight: 600;
+ color: $text_color;
+ margin-bottom: 1rem;
+ }
+
+ .news-excerpt {
+ font-size: 1.5rem;
+ color: $text_color1;
+ line-height: 1.4;
+ }
+ }
+ }
+ }
}
-.trader-stats {
- display: flex;
- gap: 16px;
- font-size: 13px;
- color: $text_color1;
- margin-top: 6px;
-
- b {
+/* Download Section */
+.download-section {
+ padding: 3rem;
+ background: #fff;
+ text-align: left;
+ box-shadow: 0rem .8rem 3.2rem 0rem rgba(0, 0, 0, .12);
+ border-radius: 1.6rem;
+ margin: 3rem 3rem;
+
+ h2 {
+ font-size: 3rem;
font-weight: 700;
+ color: $text_color;
+ margin-bottom: 2rem;
+ }
+
+ .download-desc {
+ font-size: 2.2rem;
+ color: $text_color;
+ margin-bottom: 3rem;
+ }
+
+ .download-btn {
+ background: #0a6bfa;
+ color: #fff;
+ border: none;
+ padding: 1.2rem 3rem;
+ border-radius: 1rem;
+ font-size: 2rem;
+ font-weight: 600;
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ cursor: pointer;
+
+ img {
+ width: 2.5rem;
+ height: 2.5rem;
+ }
+ }
+
+ .phone-mockups {
+ margin-top: 4rem;
+ border-radius: 1rem;
+
+ img {
+ width: 80%;
+ margin: 0 auto;
+ }
}
}
-.follow-btn {
- background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
- border: none;
- padding: 8px 20px;
- border-radius: 10px;
- color: #fff;
- font-size: 14px;
- font-weight: 600;
- box-shadow: 0 2px 8px rgba(146, 209, 255, 0.3);
- cursor: pointer;
- transition: all 0.3s ease;
-
- &:hover {
- background: linear-gradient(135deg, #7BB8FF 0%, #6BA8FF 100%);
- box-shadow: 0 4px 12px rgba(146, 209, 255, 0.4);
- transform: translateY(-1px);
- }
-
- &:active {
- transform: translateY(0);
+/* Partners */
+.partners-section {
+ padding: 3rem;
+ background: #fff;
+ text-align: center;
+
+ img {
+ width: 100%;
+ max-width: 100%;
+ height: auto;
+ display: block;
}
}
-/* 理财样式 */
-.finance-list {
- display: flex;
- flex-direction: column;
- gap: 12px;
-}
+/* Footer Info */
+.footer-info {
+ padding: 3rem;
+ background: #fff;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 4rem;
-.finance-card {
- padding: 20px;
- background: $main2_background;
- border-radius: 12px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- border: 1px solid rgba(118, 128, 143, 0.1);
- transition: all 0.3s ease;
- cursor: pointer;
-
- &:hover {
- box-shadow: 0 4px 12px rgba(146, 209, 255, 0.08);
- transform: translateY(-2px);
- border-color: rgba(146, 209, 255, 0.2);
+ .footer-left {
+ display: flex;
+ flex-direction: column;
+ gap: 4rem;
+ }
+
+ .footer-right {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ position: relative;
+ }
+
+ .info-section {
+ h3 {
+ font-size: 2rem;
+ font-weight: 700;
+ color: $text_color;
+ margin-bottom: 2rem;
+ }
+
+ ul {
+ list-style: none;
+ padding: 0;
+
+ li {
+ font-size: 1.75rem;
+ color: $text_color1;
+ margin-bottom: 1rem;
+ cursor: pointer;
+ }
+ }
}
}
-
-.finance-name {
- font-size: 16px;
- font-weight: 600;
- color: $text_color;
- letter-spacing: -0.2px;
-}
-
-.finance-rate {
- margin: 12px 0;
-}
-
-.rate-num {
- font-size: 24px;
- font-weight: 700;
- background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
- letter-spacing: -0.5px;
-}
-
-.rate-label {
- font-size: 13px;
- color: $text_color1;
- margin-left: 6px;
-}
-
-.finance-desc {
- font-size: 13px;
- color: $text_color1;
- margin-top: 4px;
-}
-
-.invest-btn {
- background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
- color: #fff;
- border: none;
- padding: 10px 24px;
- border-radius: 12px;
- font-size: 14px;
- font-weight: 600;
- box-shadow: 0 4px 12px rgba(146, 209, 255, 0.3);
- cursor: pointer;
- transition: all 0.3s ease;
-
- &:hover {
- background: linear-gradient(135deg, #7BB8FF 0%, #6BA8FF 100%);
- box-shadow: 0 6px 16px rgba(146, 209, 255, 0.4);
- transform: translateY(-1px);
- }
-
- &:active {
- transform: translateY(0);
- }
-}
-
-/* 资讯样式 */
-.news-list {
- display: flex;
- flex-direction: column;
- gap: 16px;
-}
-
-.news-item {
- display: flex;
- gap: 16px;
- padding: 16px;
- border-radius: 12px;
- background: $main2_background;
- border: 1px solid rgba(118, 128, 143, 0.1);
- transition: all 0.3s ease;
- cursor: pointer;
-
- &:hover {
- box-shadow: 0 4px 12px rgba(146, 209, 255, 0.08);
- transform: translateY(-2px);
- border-color: rgba(146, 209, 255, 0.2);
- }
-}
-
-.news-content {
- flex: 1;
-}
-
-.news-title {
- font-size: 16px;
- color: $text_color;
- line-height: 1.5;
- font-weight: 600;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- overflow: hidden;
- letter-spacing: -0.2px;
-}
-
-.news-meta {
- margin-top: 10px;
- font-size: 12px;
- color: $text_color1;
- display: flex;
- gap: 16px;
-}
-
-.news-image {
- width: 100px;
- height: 70px;
- border-radius: 10px;
- object-fit: cover;
- border: 1px solid rgba(118, 128, 143, 0.1);
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 37e6a1a..fbf80fc 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,30 +1,46 @@
<template>
<div class="login">
- <van-loading color="#92D1FF" class="loading-box" v-if="isLoading"/>
- <div class="top" @click="onRoute('/my/index')"><img src="../../assets/image/icon-close.png" alt="" /></div>
- <div class="title textColor">{{ $t('login') }}</div>
- <div class="flex login-tab">
- <div class="textColor1" :class="activeIndex == 0 ? 'active' : ''" @click="changeIndex(0)">{{
- $t('account')
- }}
+ <van-loading color="#92D1FF" class="loading-box" v-if="isLoading" />
+
+ <!-- 顶部导航栏 -->
+ <div class="header">
+ <div class="back-btn" @click="onRoute('/')">
+ <img src="../../assets/image/icon_back2.png" alt="" />
</div>
- <div class="textColor1" :class="activeIndex == 1 ? 'active' : ''" @click="changeIndex(1)">{{ $t('email') }}
- </div>
- <div class="textColor1" :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)">{{
- $t('phoneNum')
- }}
- </div>
+ <div class="sign-up " @click="$router.push('/register')">{{ $t('register') }}</div>
</div>
- <ExInput :label="getRegType(activeIndex, true)" :placeholderText="getRegType(activeIndex, false)" v-model="username"
- :dialCode="dialCode" @selectArea="onSelectArea" :area="isArea" :icon="icon" />
+
+ <!-- Logo -->
+ <div class="logo-wrap">
+ <img src="../../assets/image/login_logo.png" alt="logo" />
+ </div>
+
+ <!-- 标题 -->
+ <div class="title textColor">{{ $t('letsStartLogin') }}</div>
+
+ <!-- 账号输入 -->
+ <ExInput :label="$t('account')" :placeholderText="$t('entryAccount')" v-model="username" />
+
+ <!-- 密码输入 -->
<ExInput style="padding-bottom:0!important;" :label="$t('password')" :placeholderText="$t('entryPassword')"
v-model="password" typeText="password" />
- <div class="forget colorMain" @click="$router.push('/forget')">{{ $t('forgetPassword') }}</div>
- <van-button class="w-full" style="margin-top:50px;" type="primary" @click="verifyLogin">{{ $t('login') }}
+
+ <!-- 登录按钮 -->
+ <van-button class="w-full sign-in-btn" type="primary" @click="verifyLogin">
+ {{ $t('login') }}
</van-button>
- <div class="noTips textColor">{{ $t('noAccount') }}<span class="colorMain" @click="$router.push('/register')">
- {{ $t('goRegister') }}</span>
+
+ <!-- 钱包登录按钮 -->
+ <!-- <van-button class="w-full wallet-btn" plain @click="onLoginByWallet">
+ {{ $t('loginByWallet') }}
+ </van-button> -->
+
+ <!-- 忘记密码 -->
+ <div class="forget-wrap textColor" @click="$router.push('/forget')">
+ <span>{{ $t('forgot') }}</span>
+ <span> {{ $t('password') }}</span>
</div>
+
<nationality-list ref='controlChildRef' :title="$t('selectArea')" @getName="getName"></nationality-list>
</div>
</template>
@@ -32,7 +48,6 @@
<script setup>
import ExInput from "@/components/ex-input/index.vue";
import { _loginUser } from "@/service/login.api";
-import { _exchangerateuserconfig } from "@/service/trade.api";
import { GET_USERINFO } from '@/store/types.store'
import { useUserStore } from '@/store/user';
import { useI18n } from 'vue-i18n'
@@ -44,6 +59,7 @@
const router = useRouter()
const { t } = useI18n()
+
const onRoute = (path) => {
if (path == 'back') {
router.go(-1)
@@ -54,86 +70,21 @@
let username = ref('')
let password = ref('')
-let activeIndex = ref(0)
-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('email') : t('entryEmail');
- case 2:
- return bFlag ? t('phoneNum') : t('entryPhone');
- }
-}
const controlChildRef = ref(null)
const isLoading = ref(false)
-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;
- }
- }
-}
-
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 == '') {
- switch (activeIndex.value) {
- case 0:
- {
- showToast(t('entryAccount'));
- break;
- }
- case 1:
- {
- showToast(t('entryEmail'));
- break;
- }
- case 2:
- {
- showToast(t('entryPhone'));
- break;
- }
- }
+ showToast(t('entryAccount'));
return false
}
if (password.value == '') {
@@ -143,16 +94,20 @@
loginUser()
}
+const onLoginByWallet = () => {
+ router.push('/walletLogin')
+}
+
const userStore = useUserStore();
const loginUser = () => {
isLoading.value = true
_loginUser({
- userName: (activeIndex.value == 0 || activeIndex.value == 1) ? username.value : `${dialCode.value}${username.value}`,
+ userName: username.value,
passWord: password.value,
type: type.value
}).then((res) => {
- console.log("reslogin")
- console.log(res)
+ console.log("reslogin")
+ console.log(res)
isLoading.value = false
userStore[GET_USERINFO](res)
store.commit('user/SET_USERINFO', res)
@@ -174,53 +129,89 @@
.login {
width: 100%;
- padding: 15px;
- font-size: 13px;
+ min-height: 100vh;
+ padding: 0 3rem 5rem;
+ font-size: 1.62rem;
box-sizing: border-box;
+ background: #fff;
}
-.top {
- padding-left: 9px;
- padding-top: 9px;
+/* 顶部导航 */
+.header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding-top: 3rem;
+ padding-bottom: 1rem;
+
+ .back-btn {
+ width: 4rem;
+ height: 4rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+
+ img {
+ width: 100%;
+ }
+ }
+
+ .sign-up {
+ font-size: 2.4rem;
+ font-weight: 500;
+ cursor: pointer;
+ }
+}
+
+/* Logo */
+.logo-wrap {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 3rem;
img {
- width: 18px;
- height: 18px;
+ width: 18rem;
+ object-fit: contain;
}
}
+/* 标题 */
.title {
- font-weight: 700;
- font-size: 26px;
- margin-top: 27px;
- margin-bottom: 33px;
+ font-size: 3.6rem;
+ text-align: center;
+ margin-bottom: 4.5rem;
}
-.login-tab {
- margin-bottom: 20px;
+/* 登录按钮 */
+.sign-in-btn {
+ margin-top: 5.5rem;
+ border-radius: 1rem !important;
+ height: 7.5rem !important;
+ font-size: 2.5rem;
+}
- div {
- padding: 0 20px;
- height: 34px;
- line-height: 34px;
- text-align: center;
- border-radius: 4px;
- margin-right: 10px;
- }
+/* 钱包登录按钮 */
+.wallet-btn {
+ margin-top: 1.75rem;
+ border-radius: 1rem !important;
+ height: 6.25rem !important;
+ font-size: 2rem !important;
+ font-weight: 500 !important;
+ color: #333 !important;
+ border-color: #333 !important;
+ background: #fff !important;
- .active {
- background: $US_tabActice_background;
- color: $color_main;
+ :deep(.van-button__text) {
+ color: #333;
}
}
-.forget {
- font-size: 12px;
- line-height: 14px;
- margin-top: 30px;
+/* 忘记密码 */
+.forget-wrap {
+ margin-top: 3rem;
+ text-align: center;
+ font-size: 2rem;
+ cursor: pointer;
}
-
-.noTips {
- margin-top: 22px;
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/my/creditScore.vue b/src/views/my/creditScore.vue
new file mode 100644
index 0000000..7ac7af3
--- /dev/null
+++ b/src/views/my/creditScore.vue
@@ -0,0 +1,112 @@
+<template>
+ <div class="credit-score-page">
+ <assets-head :title="$t('信用分')" />
+
+ <div class="score-wrap">
+ <van-circle
+ v-model:current-rate="currentRate"
+ :rate="score"
+ :speed="50"
+ :color="circleColor"
+ layer-color="#f0f0f0"
+ :stroke-width="50"
+ size="25rem"
+ >
+ <div class="score-inner">
+ <div class="score-label">{{ $t('信用分') }}</div>
+ <div class="score-value">{{ score }}</div>
+ <div class="score-grade">{{ grade }}</div>
+ <div class="score-time-label">{{ $t('评估时间') }}</div>
+ <div class="score-time">{{ assessTime }}</div>
+ </div>
+ </van-circle>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import dayjs from 'dayjs'
+import assetsHead from '@/components/Transform/assets-head/index.vue'
+import { _info } from '@/service/user.api'
+
+const score = ref(0)
+const grade = ref('--')
+const assessTime = ref(dayjs().format('YYYY-MM-DD HH:mm'))
+const currentRate = ref(0)
+const circleColor = '#1989fa'
+
+function scoreToGrade(s) {
+ if (s >= 90) return 'A+'
+ if (s >= 80) return 'A'
+ if (s >= 70) return 'B'
+ if (s >= 60) return 'C'
+ return 'D'
+}
+
+onMounted(() => {
+ _info()
+ .then((data) => {
+ const val = data?.credit_score != null ? Number(data.credit_score) : 0
+ score.value = Math.min(100, Math.max(0, val))
+ grade.value = scoreToGrade(score.value)
+ assessTime.value = dayjs().format('YYYY-MM-DD HH:mm')
+ currentRate.value = score.value
+ })
+ .catch(() => {
+ currentRate.value = score.value
+ })
+})
+</script>
+
+<style lang="scss" scoped>
+.credit-score-page {
+ min-height: 100vh;
+ background: #fff;
+}
+
+.score-wrap {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 4rem 2rem;
+}
+
+.score-inner {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-top: 10px;
+ gap: 0.6rem;
+}
+
+.score-label {
+ font-size: 1.4rem;
+ color: #333;
+}
+
+.score-value {
+ font-size: 5rem;
+ font-weight: 700;
+ color: #1989fa;
+ line-height: 1.2;
+}
+
+.score-grade {
+ font-size: 1.6rem;
+ color: #333;
+}
+
+.score-time-label {
+ font-size: 1.3rem;
+ color: #666;
+ margin-top: 0.4rem;
+}
+
+.score-time {
+ font-size: 1.4rem;
+ color: #333;
+ font-weight: 500;
+}
+</style>
diff --git a/src/views/my/index.vue b/src/views/my/index.vue
index d643daf..7b9074f 100644
--- a/src/views/my/index.vue
+++ b/src/views/my/index.vue
@@ -1,482 +1,449 @@
<template>
- <section class="my-index">
- <fx-header :title="$t('my')" :showLeft="false">
- <template v-slot:right>
- <!-- <van-icon name="service-o" size="18" @click="$router.push('/customerService')"
- :badge="`${unread_num}`"></van-icon> -->
- <van-badge class="w-35 h-33 mr-22" :content="unreadMsg">
- <van-icon name="service-o" size="18" @click="$router.push('/customerService')" />
- </van-badge>
- </template>
- </fx-header>
+ <section class="my-center-page">
+ <!-- 头部：返回 + 个人中心 + 右侧客服 -->
- <div class="px-8 mt-4 mb-10">
- <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" @click="onRoute('/register')">{{
- $t("register")
- }}</van-button>
- <van-button class="flex-1" type="primary" @click="onRoute('/login')">{{
- $t("login")
- }}</van-button>
- </p>
- <div class="mt-4 flex" v-else>
- <img class="w-24 h-24" src="@/assets/image/avatar.png" alt="avatar" />
- <div class="ml-4 flex flex-col justify-center">
- <div class="font-bold text-lg name">
- {{ userStore.userInfo && userStore.userInfo.username }}
- </div>
- <div class="text-sm text-gray-400 mt-1 flex items-center id-text">
- ID：{{ userStore.userInfo && userStore.userInfo.usercode
- }}<img class="w-8 h-8 ml-8" src="@/assets/image/idcopy.png" alt="id" @click="copy" />
- </div>
+ <assets-head :title="$t('个人中心')" :back-func="() => router.push('/')" />
+
+ <!-- 未登录：欢迎 + 登录注册 -->
+ <template v-if="!(userStore.userInfo && userStore.userInfo.token)">
+ <div class="guest-wrap px-8 mt-4">
+ <h1 class="guest-title">{{ $t("welcome") }} {{ $title }}!</h1>
+ <p class="guest-desc">{{ $t("全球最大的区块链资产平台") }}</p>
+ <div class="guest-btns">
+ <van-button class="flex-1" @click="onRoute('/register')">{{ $t("register") }}</van-button>
+ <van-button class="flex-1" type="primary" @click="onRoute('/login')">{{ $t("login") }}</van-button>
</div>
</div>
- </div>
- <!-- <div class="divider"></div> -->
- <div v-if="userStore.userInfo && userStore.userInfo.token">
- <van-cell-group :title="t('快捷入口')" :border="false"></van-cell-group>
- <van-grid class="van-grid-main" :column-num="5" :border="false">
- <van-grid-item v-for="(item, index) in quickList" :key="index" icon="photo-o" :to="item.path"
- :text="t(item.name)">
- <template #icon>
- <img class="grid-item-img" :src="item.icon" />
- </template>
- </van-grid-item>
- </van-grid>
- </div>
- <!-- <div class="divider"></div> -->
- <div class="mt-4">
- <van-cell-group v-for="(item, index) in cellList" :key="index" :title="item.title" :border="false">
- <van-cell v-for="(_item, _index) in item.list" :key="_index" is-link="is-link" center="center"
- :title="_item.title" @click="onRoute(_item.path)">
- <template #icon>
- <img class="cell-img" :src="_item.icon" />
- </template>
- <div v-if="_item.path === '/certificationCenter' && _item.show === true">
- <span :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")
- : ""
- }}</span>
+ </template>
+
+ <!-- 已登录：深色用户卡 + 合并菜单列表 -->
+ <template v-else>
+ <!-- 用户信息卡（深色） + user-row 下方弹出框 -->
+ <div class="user-card">
+ <div class="user-card-inner">
+ <div class="user-avatar flex items-center justify-center">
+ <img src="@/assets/image/login_logo.png" alt="avatar" />
</div>
- <div v-if="_item.path === '/advancedCtf' && _item.show === true">
- <span :class="{
- red: kycHighStatus == 0 || kycHighStatus == 3,
- yellow: kycHighStatus == 1,
- green: kycHighStatus == 2,
- }">{{
- kycHighStatus == 0
- ? $t("notCertified")
- : kycHighStatus == 1
- ? $t("reviewing")
- : kycHighStatus == 2
- ? $t("verified")
- : kycHighStatus == 3
- ? $t("noPassView")
- : ""
- }}</span>
+ <div class="user-info">
+ <div class="user-row" @click.stop="showAccountPopup = !showAccountPopup">
+ <span class="user-account">{{ maskedAccount }}</span>
+ <van-icon name="arrow-down" class="user-arrow" />
+
+ <!-- 当前为模拟账户时显示「真实账户」，否则显示「模拟账户」 -->
+ <div v-show="showAccountPopup" class="account-option-pill" @click="isSimulation ? onSwitchToReal() : onSwitchToSimulation()">
+ {{ isSimulation ? ($t('真实账户') || '真实账户') : ($t('模拟账户') || '模拟账户') }}
+ </div>
+ </div>
+ <div class="user-uid">UID: {{ userStore.userInfo.usercode || '--' }}</div>
</div>
- </van-cell>
- </van-cell-group>
- </div>
- <div class="px-4 mt-4" v-if="userStore.userInfo && userStore.userInfo.token">
- <p class="w-full flex mt-4 gap-x-4">
- <van-button type="primary" class="flex-1" @click="loginOut">{{
- $t("loginOut")
- }}</van-button>
- </p>
- </div>
- <!-- <button style="height: 200px;" @click="changeTheme">哈哈</button> -->
+ <div class="user-vip">VIP 1</div>
+ </div>
+ </div>
+
+ <!-- 合并列表：快捷入口 + 通用 + 更多（单列白卡片） -->
+ <div class="menu-list">
+ <div v-for="(item, index) in mergedMenuList" :key="index" class="menu-item" @click="onMenuItemClick(item)">
+ <img class="menu-icon" :src="item.icon" alt="" />
+ <span class="menu-title">{{ item.title }}</span>
+ <span v-if="item.rightText" class="menu-right-text">{{ item.rightText }}</span>
+ <van-icon name="arrow" class="menu-arrow" />
+ </div>
+ </div>
+
+ <!-- 退出登录 -->
+ <div class="logout-wrap">
+ <span class="logout-btn" @click="loginOut">{{ $t("loginOut") }}</span>
+ </div>
+ </template>
</section>
</template>
<script setup>
-import { reactive, onMounted, ref, computed } from "vue";
-import { useRouter } from "vue-router";
-import { _getIdentify, _getKycHighLevel, _logOut } from "@/service/user.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 { _getUnreadMsg } from '@/service/im.api';
-import { themeStore } from "@/store/theme";
-const { t } = useI18n();
-const { toClipboard } = useClipboard();
+import assetsHead from '@/components/Transform/assets-head/index.vue'
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { _getIdentify, _getKycHighLevel, _logOut, _switchAccount } from '@/service/user.api.js'
+import { useUserStore } from '@/store/user'
+import { _getUnreadMsg } from '@/service/im.api'
+import { themeStore } from '@/store/theme'
+import store from '@/store/store'
+import userIcon1 from '@/assets/image/userCenter/user_1.png'
+import userIcon2 from '@/assets/image/userCenter/user_2.png'
+import userIcon3 from '@/assets/image/userCenter/user_3.png'
+import userIcon4 from '@/assets/image/userCenter/user_4.png'
+import userIcon5 from '@/assets/image/userCenter/user_5.png'
+import userIcon6 from '@/assets/image/userCenter/user_6.png'
+import userIcon7 from '@/assets/image/userCenter/user_7.png'
+import userIcon8 from '@/assets/image/userCenter/user_8.png'
-const thStore = themeStore();
+const { t, locale } = useI18n()
+const router = useRouter()
+const userStore = useUserStore()
+const thStore = themeStore()
-const router = useRouter();
-const userStore = useUserStore();
-const status = ref(null);
-const kycHighStatus = ref(null);
-const unreadMsg = ref('');
-// 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 quickList = reactive([
- {
- name: "安全",
- path: "/safety",
- icon: new URL(
- `../../assets/theme/${thStore.theme}/image/assets-center/fast-icon2.png`,
- import.meta.url
- ),
- },
- {
- name: "修改密码",
- path: "/changePassword",
- icon: new URL(
- `../../assets/theme/${thStore.theme}/image/assets-center/fast-icon3.png`,
- import.meta.url
- ),
- },
- {
- name: "账变记录",
- path: "/cryptos/accountChange",
- icon: new URL(
- `../../assets/theme/${thStore.theme}/image/assets-center/fast-icon1.png`,
- import.meta.url
- ),
- },
- {
- name: "邀请推广",
- path: "/promote",
- icon: new URL(
- `../../assets/theme/${thStore.theme}/image/assets-center/fast-icon4.png`,
- import.meta.url
- ),
- },
- {
- name: "authVerify",
- path: "/certificationCenter",
- icon: new URL(
- `../../assets/theme/${thStore.theme}/image/assets-center/fast-icon5.png`,
- import.meta.url
- ),
- },
-]);
-const onRoute = (path) => {
- console.log(path);
- router.push(path);
-};
+const status = ref(null)
+const kycHighStatus = ref(null)
+const unreadMsg = ref('')
+const showAccountPopup = ref(false)
+
+const REAL_ACCOUNT_BACKUP_KEY = 'REAL_ACCOUNT_BACKUP'
+
+// 当前语言展示文案（与语言设置页一致：简体中文、繁体中文、English 等）
+const languageLabel = computed(() => {
+ const map = {
+ 'zh-CN': '简体中文',
+ 'CN': '繁体中文',
+ 'en': 'English',
+ 'de': 'Deutsch',
+ 'es': 'Español',
+ 'fr': 'Français',
+ 'Italy': 'Italiano',
+ 'Japanese': '日本語',
+ 'Korean': '한국어',
+ 'pt': 'Português',
+ 'vi': 'Tiếng Việt',
+ 'gr': 'Ελληνικά',
+ 'th': 'ไทย',
+ }
+ return map[locale.value] || map['zh-CN'] || '简体中文'
+})
+const themeLabel = computed(() => {
+ const theme = thStore.theme || 'white'
+ return theme === 'white' ? t('浅色模式') || '浅色模式' : t('深色模式') || '深色模式'
+})
+
+// accountType：1 为模拟账户
+const isSimulation = computed(() => userStore.userInfo?.accountType === 1)
+
+// 掩码账号：前几位 + ****
+const maskedAccount = computed(() => {
+ const account = userStore.userInfo?.username || userStore.userInfo?.email || ''
+ if (!account) return '--'
+ if (account.includes('@')) {
+ const [name, domain] = account.split('@')
+ if (name.length <= 3) return name + '****@' + (domain || '')
+ return name.slice(0, 3) + '****@' + (domain || '')
+ }
+ if (account.length <= 4) return account + '****'
+ return account.slice(0, 3) + '****'
+})
+
+// 图标：静态导入以便打包后正确解析（动态 new URL 在生产构建中会失效）
+const userIconUrls = [userIcon1, userIcon2, userIcon3, userIcon4, userIcon5, userIcon6, userIcon7, userIcon8]
+const userIcon = (n) => userIconUrls[n - 1] || userIconUrls[7]
+
+// 完整菜单；模拟账户(accountType===1)只保留语言切换
+const mergedMenuList = computed(() => {
+ const list = [
+ { title: t('authVerify'), path: '/certificationCenter', icon: userIcon(1), rightText: status.value != null ? statusText(status.value) : undefined },
+ { title: t('账变记录'), path: '/cryptos/accountChange', icon: userIcon(2) },
+ { title: t('信用分'), path: '/my/creditScore', icon: userIcon(4) },
+ { title: t('助力贷'), path: '/cryptos/loan', icon: userIcon(3) },
+ { title: t('邀请推广'), path: '/promote', icon: userIcon(5) },
+ { title: t('安全'), path: '/safety', icon: userIcon(6) },
+ { title: t('language'), path: '/language', icon: userIcon(7), rightText: languageLabel.value },
+ ]
+ if (isSimulation.value) {
+ return list.filter((item) => item.path === '/language')
+ }
+ return list
+})
+
+function statusText(s) {
+ if (s === 0 || s === 3) return t('notCertified')
+ if (s === 1) return t('reviewing')
+ if (s === 2) return t('verified')
+ if (s === 3) return t('noPassView')
+ return ''
+}
+
+function onRoute(path) {
+ router.push(path)
+}
+
+function onMenuItemClick(item) {
+ if (item.path === '/theme') {
+ // 主题切换：无独立页则跳转语言页或弹窗，这里简单跳语言页或保持当前
+ router.push('/language')
+ return
+ }
+ router.push(item.path)
+}
+
+function loginOut() {
+ _logOut({ token: userStore.userInfo?.token }).then(() => {
+ userStore.userInfo = {}
+ store.state.user.userInfo = {}
+ router.push('/login')
+ })
+}
+
+// 切换为模拟账户：先保存真实账户信息与 token，再请求并替换
+function onSwitchToSimulation() {
+ const current = userStore.userInfo
+ if (current && current.token && current.accountType !== 1) {
+ try {
+ localStorage.setItem(REAL_ACCOUNT_BACKUP_KEY, JSON.stringify({ ...current }))
+ } catch (e) {}
+ }
+ _switchAccount().then((data) => {
+ const info = data && typeof data === 'object' ? data : {}
+ const token = info.token != null ? info.token : (userStore.userInfo?.token || '')
+ const next = { ...userStore.userInfo, ...info, token }
+ userStore.userInfo = next
+ store.state.user.userInfo = next
+ showAccountPopup.value = false
+ })
+}
+
+// 当前为模拟账户时，点击「真实账户」：用本地保存的真实账户与 token 替换
+function onSwitchToReal() {
+ try {
+ const raw = localStorage.getItem(REAL_ACCOUNT_BACKUP_KEY)
+ if (!raw) return
+ const backup = JSON.parse(raw)
+ if (backup && backup.token) {
+ userStore.userInfo = { ...backup }
+ store.state.user.userInfo = { ...backup }
+ showAccountPopup.value = false
+ }
+ } catch (e) {}
+}
onMounted(() => {
- if (userStore.userInfo && userStore.userInfo.token) {
- getIdentify();
- getKycHighLevel();
- fetchUnread();
+ if (userStore.userInfo?.token) {
+ getIdentify()
+ getKycHighLevel()
+ fetchUnread()
}
-});
+})
-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/theme/dark/image/footer/optional.png",
- import.meta.url
- ),
- title: t("Optional"),
- path: "/optional",
- },
- ],
- },
- // {
- // title: t('用户'), list: [
- // { icon: 'link-o', title: t('邀请推广'), path: '/promote' },
- // ]
- // },
- {
- title: t("更多"),
- list: [
- {
- icon: new URL("../../assets/image/assets-center/help.png", import.meta.url),
- title: t("帮助中心"),
- path: "/helpCenter",
- },
- {
- icon: new URL(
- "../../assets/image/assets-center/aboutUs.png",
- import.meta.url
- ),
- title: t("关于我们"),
- path: "/aboutUs",
- },
- ],
- },
- ];
- } else {
- return [
- {
- title: t("universal"),
- list: [
- {
- icon: new URL("../../assets/image/assets-center/help.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 getIdentify = () => {
- _getIdentify().then((data) => {
- status.value = data.status;
- });
-};
-const getKycHighLevel = () => {
- _getKycHighLevel().then((data) => {
- kycHighStatus.value = data.status;
- });
-};
-const copy = async () => {
- try {
- await toClipboard(userStore.userInfo && userStore.userInfo.usercode);
- showToast(t("copySuccess"));
- } catch (e) {
- console.error(e);
- }
-};
-
-//TODO: 获取未读消息,接口返回数据结构有问题
-const fetchUnread = () => { // 获取未读
- _getUnreadMsg().then(res => {
- unreadMsg.value = (res * 1 > 0) ? res * 1 : '';
- })
+function getIdentify() {
+ _getIdentify().then((data) => { status.value = data?.status })
+}
+function getKycHighLevel() {
+ _getKycHighLevel().then((data) => { kycHighStatus.value = data?.status })
+}
+function fetchUnread() {
+ _getUnreadMsg().then((res) => { unreadMsg.value = (res * 1 > 0) ? res * 1 : '' })
}
</script>
<style lang="scss" scoped>
-:deep(.van-cell-group__title) {
- background: $main2_background !important;
- padding: 12px 16px;
+@import '@/assets/css/variable.scss';
+
+.my-center-page {
+ min-height: 100vh;
+ background: $main_background;
+ padding-bottom: calc(80px + constant(safe-area-inset-bottom));
+ padding-bottom: calc(80px + env(safe-area-inset-bottom));
}
-:deep(.van-cell-group) {
- .van-icon {
+.page-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 5.5rem;
+ padding: 0 2rem;
+ background: #fff;
+ box-sizing: border-box;
+
+ .header-left {
+ width: 4rem;
+ height: 4rem;
display: flex;
align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ }
+
+ .back-icon {
+ font-size: 2.2rem;
+ color: $text_color;
+ }
+
+ .header-title {
+ font-size: 3.2rem;
+ font-weight: 700;
+ color: $text_color;
+ margin: 0;
+ }
+
+ .header-right {
+ cursor: pointer;
+ color: $text_color;
}
}
-:deep(.van-cell) {
- background: $mainBgColor;
- border-bottom: 1px solid $border_color;
+.guest-wrap {
+ .guest-title {
+ font-size: 2.4rem;
+ font-weight: 700;
+ color: $text_color;
+ margin: 0 0 0.8rem;
+ }
- &:hover {
- background: $mainBgColor;
+ .guest-desc {
+ color: $text_color1;
+ font-size: 2.6rem;
+ margin: 0 0 2rem;
+ }
+
+ .guest-btns {
+ display: flex;
+ gap: 1.2rem;
}
}
-:deep(.van-cell-group__title) {
- background: $mainBgColor;
+/* 用户信息卡（深色） */
+.user-card {
+ margin: 2rem 2.4rem;
+ border-radius: 2rem;
+ overflow: visible;
+ background: linear-gradient(-89deg, #5f5f5f 0%, #000000 100%), linear-gradient(#000000, #000000);
+ box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.15);
+ position: relative;
}
-:deep(.van-nav-bar__content) {
- background: $mainBgColor;
+.user-card-inner {
+ padding: 2.4rem 2rem;
+ display: flex;
+ align-items: center;
+ position: relative;
+ border-radius: inherit;
+ // overflow: hidden;
}
-:deep(.van-icon) {
- color: $text_color;
+.user-avatar {
+ width: 7rem;
+ height: 7rem;
+ border-radius: 50%;
+ overflow: hidden;
+ background: $main_background;
+ flex-shrink: 0;
+
+ img {
+ width: 70%;
+ height: 70%;
+ object-fit: cover;
+ }
}
-:deep(.van-cell__title) {
- color: $text_color;
+.user-info {
+ flex: 1;
+ margin-left: 2rem;
+ min-width: 0;
}
-:deep(.van-cell:after) {
- border: none;
+.user-row {
+ display: flex;
+ align-items: center;
+ gap: 0.4rem;
+ cursor: pointer;
+ position: relative;
+
+ .user-account {
+ font-size: 3.2rem;
+ font-weight: 600;
+ color: #fff;
+ }
+
+ .user-arrow {
+ font-size: 2.4rem;
+ color: rgba(255, 255, 255, 0.7);
+ }
}
-:deep(.van-grid-item__content) {
- background: $mainBgColor;
+.user-uid {
+ font-size: 2.6rem;
+ color: rgba(255, 255, 255, 0.75);
+ margin-top: 0.6rem;
}
-:deep(.van-grid-item__text) {
- color: $text_color;
- font-size: 13px;
- height: 30px;
-}
-
-.my-index {
- padding-bottom: calc(80px + constant(safe-area-inset-bottom)) !important;
- padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
-}
-
-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 {
+.user-vip {
+ position: absolute;
+ top: 2rem;
+ right: 2rem;
+ font-size: 2.4rem;
+ font-weight: 600;
color: #f5c421;
}
-.red {
- color: $red;
+/* 合并菜单列表（白卡片） */
+.menu-list {
+ margin: 0 2.4rem;
}
-.green {
- color: $green;
+.menu-item {
+ display: flex;
+ align-items: center;
+ padding: 2.2rem 2rem;
+ background: #fff;
+ border-radius: 2.2rem;
+ margin-bottom: 1.8rem;
+ box-shadow: 0rem 1.2rem 4rem 0rem rgba(0, 0, 0, 0.18);
+ cursor: pointer;
+ box-sizing: border-box;
+
+ &:last-of-type {
+ margin-bottom: 0;
+ }
}
-.id-text {
- font-size: 14px;
- font-weight: 700;
+.menu-icon {
+ width: 3rem;
+ height: 3rem;
+ margin-right: 1.6rem;
+ flex-shrink: 0;
+ object-fit: contain;
}
-.grid-item-img {
- width: 48px;
- height: 48px;
- margin-bottom: 5px;
+.menu-title {
+ flex: 1;
+ font-size: 2.2rem;
+ color: $text_color;
+ text-align: left;
}
-.van-grid-main {
- padding: 5px 0;
+.menu-right-text {
+ font-size: 2.2rem;
+ color: $text_color;
+ margin-right: 0.6rem;
}
-.cell-img {
- width: 20px;
- height: 20px;
- margin-right: 10px;
+.menu-arrow {
+ font-size: 2.8rem;
+ color: $text_color1;
+}
+
+/* user-row 下方弹出框（不用 van-popup） */
+
+.account-option-pill {
+ position: absolute;
+ left: 0;
+ top: 4rem;
+ border: 1px solid $text_color;
+ border-radius: 1.5rem;
+ font-size: 2.8rem;
+ color: $text_color;
+ text-align: center;
+ background: $main_background;
+ padding: 1.5rem 2rem;
+ display: inline;
+ z-index: 10;
+ // width: 20rem;
+ // height:7rem;
+}
+
+.logout-wrap {
+ text-align: center;
+ padding: 3rem 2rem 2rem;
+}
+
+.logout-btn {
+ font-size: 3rem;
+ color: #f2495e;
+ cursor: pointer;
}
</style>
diff --git a/src/views/news/index.vue b/src/views/news/index.vue
index 722915f..a678947 100644
--- a/src/views/news/index.vue
+++ b/src/views/news/index.vue
@@ -1,11 +1,14 @@
<template>
<section class="inner-tab-container">
- <p class="title">{{ t('news') }}</p>
+ <assets-head :title="$t('news')" :back-func="() => router.push('/')" />
+ <!-- <p class="title">{{ t('news') }}</p> -->
<div class="news-container">
<van-steps direction="vertical" :active="0">
- <van-step v-for="(item, index) in list" :key="item.uuid || index">
- <p class="time">{{ item.createdAt }}</p>
- <p class="context" v-html="item.description"></p>
+ <van-step v-for="(item, index) in list" :key="item.url || index">
+ <img v-if="item.urlToImage" :src="item.urlToImage" alt="" class="news-item-img" />
+ <p class="time">{{ item.publishedAt || item.createdAt }}</p>
+ <h3 class="news-item-title">{{ item.title || '' }}</h3>
+ <p class="context" v-html="item.description || item.content || ''"></p>
</van-step>
<!-- <van-step>
<p class="time">2023-06-15 11:30</p>
@@ -24,26 +27,32 @@
</template>
<script setup>
+import assetsHead from '@/components/Transform/assets-head/index.vue'
import { ref, onMounted } from 'vue';
-import { _getInformationList } from '@/service/etf.api'
+import { _getUsHeadNews } from '@/service/user.api'
import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
const { t } = useI18n()
const list = ref([])
const maxTime = ref('')
+const router = useRouter()
onMounted(async () => {
- getInformationList()
+ getNewsList()
})
const onLoadMore = () => {
- maxTime.value = list.value[list.value.length - 1].createdAt
- getInformationList()
+ const last = list.value[list.value.length - 1]
+ maxTime.value = (last && (last.publishedAt || last.createdAt)) || ''
+ getNewsList()
}
-const getInformationList = () => {
- _getInformationList(maxTime.value).then(data => {
- list.value = [...list.value, ...data]
+const getNewsList = () => {
+ const params = maxTime.value ? { maxTime: maxTime.value } : {}
+ _getUsHeadNews(params).then(data => {
+ const arr = Array.isArray(data) ? data : (data && data.articles) ? data.articles : []
+ list.value = maxTime.value ? [...list.value, ...arr] : arr
})
}
@@ -56,11 +65,26 @@
.van-step__title {
color: $text_color !important;
+ .news-item-img {
+ width: 100%;
+ max-height: 18rem;
+ border-radius: 0.5rem;
+ object-fit: cover;
+ margin-bottom: 0.8rem;
+ }
+
.time {
color: #747A8F;
margin: 5px 0;
}
+ .news-item-title {
+ font-size: 1.6rem;
+ font-weight: 600;
+ color: $text_color;
+ margin: 0.8rem 0 0.5rem;
+ line-height: 1.4;
+ }
}
.van-step__line {
diff --git a/src/views/personal/index.vue b/src/views/personal/index.vue
index 66bb85e..60f7376 100644
--- a/src/views/personal/index.vue
+++ b/src/views/personal/index.vue
@@ -1,390 +1,414 @@
<template>
- <section class="my-index">
- <div class="assets">
- <div class="top">
- <div class="title">{{ $t('my') }}{{ $t('资产') }}</div>
- </div>
- <div class="currentAssets">
- <div class="top">
- <div class="amount">
- <div class="amountTop"><img class="nation"
- src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAb7SURBVHgB1Zl7TFNXHMe/t70FSkUqc26gsEJ1OqOWpzp52Kk4XRQhm5sxQTHGOBOnGP3D7Y9RFv9YljlNliz+s6nbsvmYgqBzxsTWBzoRpY4hvkaLwyGicCmPAn3cnXOg0Dp5VNqJn+TknnvOue3vnvs739/vnsthGGi1uUqHA1pAnCs6oOI4xIZHhCkPHvpU2TNEIMXcczSScpYUA8dxAp4RHs+AyVSnLSwsyTvyy7lYctptHEfMJgenKLoPpX2xPXUtKbm0IopiITnsJ4YXwks4bwanpuZmhoWF7FIEB6rk8kDcuvU3aw8NVaC5uY3VXw0Pw+HDeUP9STMp+cTwfUO9YEgzTGZEdbz40t4DB85oa2oe4nFPe3BwEDSaGMxJnobjxRfJDdSy9tZqM4aIipS9QuWtzaYfjmbFff7xoBcOanDKm5s2nzhxWZc2V6Pcs6fYo6+9vQMTJ03AkiWzUFxUwtqstXXQpy+Hl1C3KS+KSczPqC7bPdDAAV0iZc6mPDJCp9GoIQiteNxoQWuLFQpFENraOtiY6OhwdHXZIJPxMJsfINTRifUPr+JZIQbpllaX5ffXL+2vg/hkXlVVja6hQUBdXSPz0a4uOyZPjkR29kIEBsrw4EEjGhqa0dLSzm6IEkTkIrGtDsNAu3JMBH5u+ufs0zolT2v8ZPu3eSEhct306TFwOJwefR0dXZi/IA7JKdPQ2WmDPyA6oyuOSXzqyv2PS1CfjVKN293W3gmiCLhzuxZkFWPUKDmbyZCQYEREvAQpL8GNyhp2zejRwbBY2ll93BgFvv96A3yBQhW5hfz37n4N1uvLVTu/PFxOHq9L+NmjT0qagrg4NQ4eOouH9U2946lKTJoUgZTUGThWWILa2gZvZW0waICJI0abXQ0eLjE2LLTA6RSV7m12uwML0uOx8O0kqm8ev0ZVYtbsqcjMTEaochT8ALVlr3tDr6wtWrQ9Z9/+U7H0sVOCgwOJQZ3Mh0/+epnI1iXiEt3KECQPQIe1i9Wvlt3GpYuVaGqywE9oSRzIdEXFXpdITd5sEiGqaF2tDsfGj7Kwf98pVFSYPBZeZOTLeP+Dt1B6uQrXrt3plTcXYxUy7EgbD1/S1SiY47/6LJrW2Qynpm7MFJ3dxlImRI5DfPwkZiwt7vC8FPPnxyGELMIyMrtPYrO0ovq7n+BjVMUTE7VL75YZmMGiKF0tk3VLss1mh9lUjzU5X0BOHj2dXalUwgIDlTRBaMOW3G9AcwmrtZNdQ/vodf6ELB+6kg0cTREDAwKaFixIAE+M1uuNaHzc548BATLExU9EbKwahQUlqHdTCXpDUVHjkJY2AydPlhKVeDTsSDcAgsNpj+YdDruW5+VYtHgmC7m/nbziMYpIMNLTE4jbTEdBQYlHHw0cVNKyVy1ESUklaXnE2hWvRcIPKGVhoVpeFCVaqgwHD+ghkXJkEVlZL51ZmiNQo+jsGfTX0WLxVBAigSgtvQkSwuFSF/mEcMw7vAd+QsuHhig0lpY2GAzG3lYazbZuW47du46wCHbVbXGRkI2MZXPI+OskiAio+KMa/yMqSbQ6QvlEPEBCwutECeKxYsU8mgt79I0fPxY5OYuwYUMGngMavsXSpqI1iYRjgYwaeO9ePdat28kevctgqiI2mwP37z/Cjh0/wknUw6UMQUEyoiD+SYSeQMmlJG8S6WJLmjkFoaMVOH36Kgu5Lqgv05SSKsXRI+fR2mrt7aPS9sorSpDknuUSNAVVijZsHfUI/oLpsJzM5Nq1ixEUGIALFyo8DKYavGp1OnkVmkiU4E+03u0zmOryu++lkVwihb6Y4vy5CohOJ1rumuAvpFFRs3KJEgRZyCovK7uFykqzxwCa/DjsTpRcrEDVjXvMLdyhLqM/YyTB5gFboD5I4AdC4NxzCF/gx8BBEnvOyH+4/h0jmSQVfESgaMfUzjnwB3arVeBXZi+swYvDdZrAG/DiYODIoqFZPV3WSox8xvB0Y06oqDIS/9BiBCPh+WNh8TMEpsPns7LzRSfbrBu5cJJ97OA6PxaTZOJ8KG++hTNnVF9hr0i9b80c59yCkQqH/L6qG0XqRD1RZy1GECT1Mi6rLotznXvsXr6cmrjmjW255ZxUMiIUQ3Q4BesdUxayFg8wSBRzxZFDLoZ0Z6KoE58/OniD+HyN1vVn14Ab2vXnL+kaL5f7bGdvKCiTNPnhc5N1/fUP+lGGbONTP6JG+3sh0p3K4X0ycFGgmq2SSOwFXN8nLN/CwUB2j9Ysvvm7efChXlCkTsqhW0a+i4hk35fjtmT8VTrk73VeGeyiSJ2QSS5dPSZ2eia8xG7tEDrrHxptzc35dHMPXvJMBrsQu1NTbU/RoNvPVejzdwF9n23pi4IBw/x0+y/fhWOmBxLDmgAAAABJRU5ErkJggg=="
- alt=""><span>US {{ $t('总资产') }}(USDT)</span>
- <div class="eyeBox"><img
- src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMsSURBVHgB7VdNTttAFH7PTuJKLVVuUPcGYQnZxEJEMiwgJwBOUDhByAlKTwCcILCAVGmDsyHZFd+A9AaR2BAaz+s8E9OAZ5w4bIrkT7Jsz5ufz+/fABkyZMiQ4b8GwivQbHpFc8mqmEQlwzA+TcuEEL8DRD+4G3VrNWcICyI1QSZlfczvIppbQFSZaxFiV5A43Vwrn0BKpCL43et9AUGHBFiExTAQQI00ROci2Gp5NuWtJiKUYkKCLqE4xwfzzHVXBjzUbl+XApPnYl2+2ootB/AwclzXGcBrCba8/g4KcfRSawg0FAIbG+urR0nrLzu9fQOoHl8PQzJw33VWTmFRgpJcnU0aX0RDwwCn6pT9aCwKGH7O/xn509phjQoTPJVrEMDBxpr+Iw2d4PJnb1tFjsGamyYXQh6dR2jyBQXrttXpH7NrsKhaLfsCsKHaS2roK1sJNFBqkDfGQuFGEwwDd231s3Jdp3cLz33uma+1rvqeKvJDcz+MllU+qdZgwfJ0kcpRqBqfaMt+MWyD9e44eqEgOFetlWYukmU1VbIYwVbnehfUkfeIAPyIUGTCKMqV86XGmp4XfizmzDPdtkhQ4oCCWQQnqUGLzeqj741zOTv0tStpVnlXpqAJrMCs8F1G7CBpb0mmrhh7QQ8oXRKmBG2nhDR1rCTGCOqiLcJF51dYc8e5sQ9zAs18OPdCppukeSr/jhHknEQI2sNR3Nf4XnNkAyBrLMymdxKZ1jAhieBAVQKVUYyINU7GSpmJW/9eYI83hoRD5QlTWlH7d3iWgY5KpiTIX8wZXiXjqIyiLdSM3JgI4uVK1miWRdoLGw1NdhCEe7oASi51P64P5SF1xaJhEJATRXQ41+vbMB7b/Hyf++DXnOUnC7Tbnix1BXVuFdRw18uHoMHsZkHmRS5HqmIvABpJdZSha9HYrBTAgVtNbr3ma7dYO4I80LROYfTJBB5ptNnq21Yh2NY1tdIlfOnLtVl5cW6CT0TDKqPt8WYi1JqAb0kmja9ZACFRNHbmbvknTe3IeH8y7Zvz4HU/Td5N0QruKkSm8qcJMfBH5lI3LakMGTJkyPCG8BfKSG8/5e6oxAAAAABJRU5ErkJggg=="
- alt=""></div>
- </div>
- <div class="money">${{assetsObj.totalAssets}}</div>
- </div>
- </div>
- <div class="bottom">
- <div class="text-left"><span>{{ $t('可用资产') }}(USDT)</span>
- <span class="value">${{assetsObj.usdtBalance}}</span>
- </div>
- </div>
- <div class="btnGroup">
- <div class="recharge" @click="$router.push('/exchange/channel-in')">{{ $t('recharge') }}</div>
- <div class="withdraw" @click="$router.push('/exchange/channel-out')">{{ $t('withdraw') }}</div>
- </div>
- </div>
- <div class="otherAssets">
- <div class="amountTop">
- <div class="left">
- <!-- <img class="nation"
- src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAWASURBVHgBvVjbbxRVGP+dM7OzvYjdttBKaWGhloAxUh6MlwQpGkKCEsHLk8ZC4oMPEhBi1BgDJMZETBQSYzRGLcYXn9B/QKlEXzRpjQ8QKLJKsdCy3W330l1mznx+M8su3ctsZ7eFX7LZ3XOZ8zvf/RuBOhDrvn8AUmyCTQMg2Q9JIYIIOXMCFIeNCARFeM0ZKAy3Xr04ihoh/C6MhcMh2zIOSsIgCQqjFghEhLCPQqrh1kgk4m+LD0S71x8Vgg6AEEK9IP5IRIjEqfbxC0cXWl6VWCy8IUyWOs0/+1EvGT5BtinIXhPW7w35UyNCM7dVk570mrjR07eXlBqpmxQj+PIMGt+Ooun4JLBMzSfMFw6M3FjZu9trr/Aixbb0TdEg8VJBqBWhv/5mt1Cwfm1C5osQzJ+ai04V0t7b+u+lU6X7ZDmp3t1lpBjGrgTEKgu+wXcI7pthH80dcfOXRthTepkoyJZDsdW9g6Xbi5a5NuWor4KRN30wCXvMQOZrn/bPfGSXBXtcR/Nn15A60AmYniYdF7q5eb7NFUmMlP1zJVIiQDBemIXx4ix8w4ZLykH63RVAtqqfhcgMnJ4/UCDmhARQ5fikb0lDNBK0B7IQK2pQ5y1QTCsSgexQCOxIub+1dSYfQI7u+jlwHyki5qhQCAx6PTjwTLKw2ng+gcXCnpZoPn4dzZ9PIPj6NGDlpMnZ42AsFHY15spaKTUgbYT1R9PlT2lgNT6VKvw1dqagRoJlyyihQV0wCod4Qeu7icY3oxAc24ynk0i/1zF/OoR79AOI45j7lOme9ZcdNRrPJtD0/pTr3rVARQykDnVC5QNoFYgmglzH5A5H+ZZ8oVmJLDtUIfgSIm1XL64VsXBfP1kYyW+U3RZ70QT0zRn4Qfb0vZhj46aERC1wVGj+eC/sK3rZnAJtk+w9W+cPOp6U2NWDuU/aqz6YkhKpw51I7++smZSDm9+3VCTlQIfYpLMKB8qiHv/NfNwGsJgbj0xV3Jx8ZVVO/L7rk2LQlOY9BxqQnO3DXgscW/CC1us9t2iQ6Jd847DXfOCJ215qRzVQ6rbKAjuTWAxku4JotStPCoSkV42lP5yBXGO6v83hZsxsCWN2xxqoS4ECabHMRr3QH0/DeM4zk4Q8rdbYngRxGpn7sB3Jl7oANnD7Hx2z29cg+10L65KgP5lCrdA2ZrkMuo7Gt6Jo2B/Dsm//czNLKRxVxstGOUPIh7JI7O5B5tO2YgPnRJx+pwPJV7ug85paoc4Fkfmy1dWGbLeQGeIYdrapdFlcTK/i4FpSw4sg5YJforrLiRaOOHGtZs/UN2XQwAFWnW8AsbVkPioJTYRRnQu10VLPdFQIH8KgGa2ucGFP6ki91gVK8+amCsUnd1isSm6x7jQMrkw23g4v9oSeI+UgXX4zAXFGt2z6U6s3Si6A4GAcdEOH9shcrqQ+Z/jaZxKGc0m8gp0tBUTIRsvZy+6348nZr0JQYwuQu5XE3XDBzegQ7gD0x+bYQXKxjpSAXG3mWroqEODGGPm6UrdOVgwbi4HI5cPYg70wf+MOiYuC0g6pDCytjFLDBWLcBMQF0QksJVgy1h8NbiGQPtQBml64AuFXD0Mrr+UakiL+0919i2pwF4VbtpX/W3SNrKXtWXKV+kM8q8xt8weKiK28dj7CpvoG7jJsZe/LqzCPMsUvv3JxyBbYh7tFil8RLJ+49EPpeEWLzJGz77Ra4y6pCu8tHFQN+RP3bQgHNe7Olzr4cpJmm9pTqj7fxPKIcocsSO5dAoJxrudPtI+PHVtooe8k6UgvoHFjDHGkZoIcCpwYNZu0Tq6NR3yZR13Ze5J70YCFrXwYvxwWYR5yPvkSnTM3fySNCnIqFxptHR8bRo34H3vkONt3AALNAAAAAElFTkSuQmCC"
- alt=""> -->
- <span> {{ $t('总资产') }}({{currency.currency}})</span></div>
- <div class="right">{{currency.currency_symbol}}</div>
- </div>
- <div class="assetsInfo">
- <div><span>
- {{ $t('总资产') }}(USDT)</span><span>≈
- {{
- assetsObj.totalAssets
- ? (assetsObj.totalAssets * (currency.rate ?? 0)).toFixed(2)
- : "0"
- }}
- </span>
- </div>
- </div>
- </div>
- <!-- <div class="otherAssets">
- <div class="amountTop">
- <div class="left"><img class="nation"
- src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAqMSURBVHgBpVh7dFTFGf/N3d3wSCC8FVGQ8pCnECBBq1IVqEURLdLEWjjpUbC2gLb+UaOc9k+pVqmg0AKCrQIKaNXDUeFUkZii+OApoQoSEJECDZgH2cedx9dv5u5uErIbwnH23Gz23rkzv/kev+83I6LRKOFimlTwKj8HPvoQ3tZtEJWVEGfOQjQ08EMC5ebBXNYbYuAg6B/dABo/Hhg7DvA8XMxEoi3AiAhefR3EP16Et2EjQnt2A1oHAyT/kvtwXyHc7+CvsTdABaPgF88A5jwA6tDRvSS+DzDGg5CWMEufQ7s/PQFRW5e5oxeCye0A/HgS6PZpCA0bDrV+A0LPLIbQKm0p6tkT6sHfgh6cBwqHefZW4Flgma6GaIxin31GsmAMGSHIrv38S9vLE5R4cB6po0dIG01a87XjI5Kel/EdxQaUBWMptm8/ZZvbGSsjqFgDRV9eR7pzZzdQNlAqL4/USy+SUpoMBc0wODXzFxnfSb8rPJJd8im+5kWKsQHaBOxctIFiixaRn9POTZ59cEFy1UoHpGkz/NG/e7hVYGnreWHyn3qaGhouBIwtFVu/lvxwOAlKZAWlSmc5t53fjDEkd+wgyVbRbQCnQx75a9e1Bizm/O6ziXUWQI3AQiSrDqfd5586QUr7ZJRKWo1I3jOTY7MNwPiS+fkU3bWrGTAvnQUyjkhpKUJ1dS75W2s09TZ4V17p/mcQEIv/ChoxGubUSfemzTUadhXaQly2r1dbi8i9syGUakz04KEd/FmIvbvYVq0PxD3h3XRjwFSWTxqiQD5z0xW9QcePB/csp9XVIcVWlttIJL+BFiTmOG/vbnjLljbedKarribZqxdnWS7poqLWA5ah6zded+6ygS737yX/8GGS/z3p6MK5krNUjRjZhCI4JgcPJj1hAukxBaQ6tM84tnVpw4kTjTEWX/i4C2h/2lSSm94kGY60mur6jTdTkU5qzVoX8Kmm+X/DmSaZ31RhEemNG0mdbARtmzpXR/K9f5GcOZNBe80WEH/yCYqeY2DnztWTHDMm4JYFC5wl4h9sI1VSTOpnM0g99BDJR8tIXXOtA294Qr1qlQNj2Utx0KYA+XW1JFcsJz83j/ylSxwY4z4ZGt907x/YR2rQVWkGUIwlWlNLiL//PmeP5ybVCxemU969aUx6YMPU4K9cQYqpRM2dG/SxTP/xjgBk1RHyb7iOfGZ89cyzrr924HVQESwIS74muG9MErDmPkePkSwsDCpJKETR7dsZ2J+fDFjcxs4f/tjMLSYFLDmQ5S3/hZUku3cjXVPDvxXpTz4O7k+a7EpX4oEHuBIoMkeOkvpwO7tyA+nXXiX5z9fYpSfIv/tu0i81d79z75dfkOzNcW5L3KKnCP5ttyb5hIGVlroVpTvb1e3dR5rjUNfXB/diMVJF4ylRVka+UaTefptURQVbHA6wqqoiufU9UpWVgSuTAOyXv2YNJS7rTYkVy5pVDLt4xYuTq1czMCbc26YQ5FVDGgO7a1fSHJipJs9Uk3/rFFLDRlJCy3Qs6dn3keKSJTdtIr15s7OIjZHE9DspseUtUpxZqnI/6bqaFpZJvLPZgWgEzLBOHOdY3Ul+bS3pPn1IXdmPCfbbE42ypKYGtHlLmkpC+Z0hrmOxd/MNwLFvAuKzUuXWqUzIEuKOO2AOHYL+4kvo3FwmxTC8tS8Dfa+AN3wEdNce0I+UMfGeSo+Z85NbEGLRKHgcE49CP7oA+vJ+8MaMg8dyyQweCLDwhGoiaaw71YABJDl+Ujxl2GqKs0SylHGxY7OJV6zunc2SJ0gadfvtJPv2Ze4aQb515+X8f88epDiQHW1MnkTy2+PpJHDfDQ0kf3V/cm6R/g6kVIiEzQKRVKOOsz1eSUkxwn9/ASKnfcDLzOb64CHQkSqIgtHwevSy2hRm9fPwWBCyPACx5dG9G6hvX3jT7wINH8oWGAHa+i7E8pUwW7bAu/56iCGDQWxBsW0bcLYmY/kjtigUa67zi63k3/69vyStEunMTDG63r2L1LZy0u++y4H/Dsl/V5A/Zw6pjh0pcec0l1Vy6lRSnJUJJmIppbOwfHU9qTYIBMdlnTpxVvb/gcuoFuXBZpl165ubSHL2BbQRpJflKGnd+dUhShQXk2+12SWXkirf5sjaLlS+8gopGeeMfT9QtTbzDv6HEj27XQAYu54TMiyGDYU4WtXCnCFr4cOHQXdOAw0dxglwM6hfP6BdO6C6GmLnTmDzO4hwGMj2HSEWPQXU1UJcy7uiXbxZqdyPUEkJzPCrAe7rFRYCg4YAf1kCzJqVLPaZmx40AGE9cSK8t9/KumsRVtYcOAA6UBlswS6/AphwPRD24PG2TBUVwpvJExWNhamoQKh/fxetlBMJBujSBeabY8C4cWBLQ824C5HnV0OUb82oZAzf1DfeCMQqtrvsal0Yst+7dSP/+dXJUpSMOQq0vuQsk+XlxOlPevEzAUnu2ZUmT3/PHvK5JseYnBOJBKnVqyi7OvYoxiHh6auHQ48e7XRW9saWemsTi7nSIHOb3Hcu+foYBFsQnMXmO860SRMRunq066lZ/Gm2nqznDTHPHIlEIO6aAWqX02IWJxN5D2oKmdNEJAe6uDgrJA5kmOnT2VUcO4InNxqm+gwoEWNMBvrQlyAmWe+H1wWu5/iioUMdEUvetcv/VUPNuQ/0xELGHXHESp3yIPr0aTFXiKnKYhE8j+fsNKsU4M6ZmlWq3pQpHFIh99uqVCut1cO/hzn2NZBQiEye7PqZr48CFeWg5MbYswx/+iRy2nVChx49eE0qOSaPk5fbcrKevaBn3+9cEra/ddfOUI8tQPixshYBaV1Mw4YgtTmgWBzUjYk0Px8hW0pCwROOPZhFT3NZq0Oo4gMwQThgOSPZNatWujIV9rzkmAzOSvJmnvGg5s4HOnYIbgS7bpbXNfWUKChwJSQdiFZb3V3CKsM01Xekz55ppki1ldLr1gZCMslF8UWLme9MOgGaqkXDUl5HcprtlPyxBdRQd5Y3wC22b7yn3LmT4vmdSHZlhp47jyQzt+JnLTWoaRQslmhZQFq93pTVVW5HksueI5WIpwGmVUuzRTAorj7RfXsZVEPmDa/drseZsWUkQn7vS0gvX+6Kbbqgp8pTSkDyRiRxT4mzskaW3frAgaT27k4vzlaBROH4dLWx1BJ9ZV3aUqmrxWmP4H2Wt+w5hB95xB0/iQH9YSbcBDFiONCrB0QiAXHkGPQnH0F8+AnHQj08k53FnSjofSm8qqMsCiJQy5cj/OvfOJox4Qho4eOQ8+fbIG3+YubTFt6Vr99AyrpHXLjoXvCyljt0kNS+PaSsLLe1NL8LH6qsc2clmTB4WdbJ51xTIbnESEu+Xhjfp2lLG5/vAybfwlLnO5hRoyG3bgWm/5SzPTOxt35wZz/ah7fkWYSXLIV3+jTcgeXFHY5Ct2ddJzkK8zpAlZUB8+YHB3etFPILHnW6h+x/kYhDrPgbIhtfh9i9k8cU7kBQZBnc8Z99zjynR42CLvk5yBb7Lp3RltamM9hU8yg4ZxWffsoXB375Bwh9dRB23+BZFWuR8uEwuneHZv1OE2+CLroGGMmJw4He6tHmee3/mxQRBdHJ03MAAAAASUVORK5CYII="
- alt=""><span>HK {{ $t('总资产') }}(HKD)</span></div>
- <div class="right">HK$0</div>
- </div>
- <div class="assetsInfo">
- <div><span>{{ $t('总资产') }}(USDT)</span><span>≈$0</span>
- </div>
- </div>
- </div> -->
- <!-- <div class="otherAssets">
- <div class="amountTop">
- <div class="left"><img class="nation"
- src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAATbSURBVHgBzZhbTFxFGMf/M2e37NZWFnrBapXT1hJQLlsM9UoKsQ9eaoMPxpcSoCb6VGl9aQQNPGI09dIW1KjQF0pbI5qYCNUHePCJmqVpI9gCu4mk0suWhbKFsufM+M2BbZZFYGEX4ZdszsycMzP//eab+WaGYUkcLwJ4HiXoKdxb2JhrUFa72NTLAP18DMwHyA5A62QIdWORsNg/bXQBY4cpUUbV9Mg3aWwM12TVfI0pobUTMDudlEYM2BATx2uBYCUJcmFp6BKyKQncZwKnNIjahSosYLEGnTOzdXOa0z00ND7nVzFYLBqyoChm81iPz/Vi+/az5YDpSUl1ut9+5wlwxsC5QLq+DozNWS1WdAHukUAJFifsi/Jjx3Ibt25d5yosfATPPL2BygSqPshH9pPrKW0gXshaLgneKqGVISZhWn0JZ/bGmzfv4auv9yJ4N4jzbdfxWkk6PqzejUuXRiAlR1KSqioRL8r3pDZb3Ey3cHyq/9Ja4unr97vOtFzFoUNPYd++R+Fwcly5EkBNdRfZTaDiYBba2//GiRM9EEIuxceiCZDP7Yr0uRltMXbSm56+Xq+vL8S1f0bx1sGcaZvQZIeJ2/5JNHx5EcGggbq6P6jcTtZLiDBCdnPIXeHc/aHk/PPaLQ859fz8zWhq+hNvvpExLYhNd6ghJdUB/y2Joeuj2F2wBRqPT8pMmDsEXhMlrEF3pTjKDpRm4ejRbDz3QhrWPmCfXZVm5qZNa/BRXSHefS8HObkbqAwJg/7nYRohV4QwUXTbH9I//qQLzz7fip9/GkBf/zCVm9ZQhVHpGzdGUFDQiorS3+Hx3IKM3//vw6QSxSsjhGHKhAKoej8fp1tewrff9WNiIlKUQHPzZeTmpaL9/KtIe1hDImZlNIKh3BIJnHRTBx6VycxMQU52Mn79bRClBzKQnGpDcrITjiQNI6MGNqZyHKnsoiFMwY6d63Hu7CAMI5Qg5w8jYdq0YmWxPeGi3t4Azn0/gJGAgf0ljyM4KhEYvoedO9fi1Dc9eHHvY9B3OHHhgh+nmwdgmpNIPAw2Q+SpIF4UqVaN7sZNTpxp+YuGswcZGQ9iW3oy+r1jeOXlNmRlbkBvzx2rAZn4kZxWIYtImNQRpdjvH6clow9ScPRfvYsffhyAIBV9faPw+u7QTNQsn1s+mFtZTEeUXkF9CmFaOfVsbxucekMWMkISy+H0Ubhs+9nlhfdYyjjzeHaKLUiKGRI4ti5G24+4WwtxDo1E8QQ6nZqVAcSJXYiEiiICKtrFLSzxSB9XUR2rCElxiVxaCWMdWEWovYxhZx3cgLiIVYRUwqyzqJXhXjlrPVsZJINPk2JbeHfRhFUBncTk1Jlz2mLWicWL6U3aSqGcPuQQxc4Jy/ktdXQYwGdYYTSOJiUKiAo0gts8FBzdWAEMDt8aIbaF8zPOlUwYr2MFFlyTy4C5RhRHls0UNnWncAT/EyqI0VYakzZeER7ChSqUq+i3nD+TMTnJuJy0owyLQV14UAPDyyXMYGz4v64GYhVHtzLMm2hRtE3yjMOhI15oL1sjmRaXQNMSpA2b4aNiopDWrSDKTWb3CqbFLMagbye5RiGP18hFLOBLOgrSoc1NFwh7KOAWWTGWMR2qU6lCMAtIa8GW3YzTzkWIbuqkE4vkX9KFiLAUaj7HAAAAAElFTkSuQmCC"
- alt=""><span>TWD {{ $t('总资产') }}(TWD)</span></div>
- <div class="right">NT$0</div>
- </div>
- <div class="assetsInfo">
- <div><span>{{ $t('总资产') }}(USDT)</span><span>≈$0</span>
- </div>
- </div>
- </div>
- -->
- </div>
- </section>
+ <section class="personal-page">
+ <!-- 头部：投资组合 + 右侧菜单图标 -->
+ <div class="page-header">
+ <h1 class="header-title">{{ $t('投资组合') }}</h1>
+ <div class="header-menu" @click="onMenuClick">
+ <div class="menu-icon">
+ <span class="line"></span>
+ <span class="line"></span>
+ <span class="line"></span>
+ </div>
+ </div>
+ </div>
+
+ <!-- 资产卡片 -->
+ <div class="asset-card">
+ <div class="asset-label-row">
+ <span class="asset-label">{{ $t('资产') }}</span>
+ <div class="eye-wrap" @click="assetVisible = !assetVisible">
+ <Icon :name="assetVisible ? 'eye-o' : 'closed-eye'" class="eye-icon" />
+ </div>
+ </div>
+ <div class="asset-amount">
+ {{ assetVisible ? (assetsObj.totalAssets + ' USD') : '******' }}
+ </div>
+
+ <div class="asset-label-row">
+ <span class="asset-label">XAUT</span>
+ </div>
+ <div class="asset-amount">
+ {{ assetVisible ? (assetsObj.xautProfit) : '******' }}
+ </div>
+
+ <!-- 三个圆形按钮：充值、提现、兑换（模拟账户隐藏充值/提现，显示重置资金） -->
+ <div class="action-btns">
+ <template v-if="!isSimulation">
+ <div class="action-btn" @click="$router.push('/cryptos/recharge/rechargeList?isForeign=true')">
+ <div class="btn-icon">
+ <img src="@/assets/image/cz.png" alt="" class="btn-icon-img" />
+ </div>
+ <span class="btn-text">{{ $t('充值') }}</span>
+ </div>
+ <div class="action-btn" @click="$router.push('/cryptos/withdraw/withdrawPage?type=exchange')">
+ <div class="btn-icon">
+ <img src="@/assets/image/tx.png" alt="" class="btn-icon-img" />
+ </div>
+ <span class="btn-text">{{ $t('提现') }}</span>
+ </div>
+ </template>
+ <div v-if="isSimulation" class="action-btn" @click="onResetSimFunds">
+ <div class="btn-icon">
+ <img src="@/assets/image/dk.png" alt="" class="btn-icon-img" />
+ </div>
+ <span class="btn-text">{{ $t('重置') }}{{ $t('资金') }}</span>
+ </div>
+ <div class="action-btn" @click="$router.push('/cryptos/exchangePage')">
+ <div class="btn-icon">
+ <img src="@/assets/image/dh.png" alt="" class="btn-icon-img" />
+ </div>
+ <span class="btn-text">{{ $t('兑换') }}</span>
+ </div>
+ </div>
+ </div>
+
+ <!-- Tab：期权交易 / 合约交易 -->
+ <div class="tabs-wrap">
+ <div class="tabs-bar">
+ <div class="tab-item" :class="{ active: activeTab === 0 }" @click="activeTab = 0">
+ {{ $t('期权交易') }}
+ </div>
+ <div class="tab-item" :class="{ active: activeTab === 1 }" @click="activeTab = 1">
+ {{ $t('合约交易') }}
+ </div>
+ </div>
+ <div class="tab-content">
+ <!-- 期权交易：交割持仓列表 -->
+ <template v-if="activeTab === 0">
+ <delivery-hold-list v-if="optionsPositionList.length" :list-data="optionsPositionList" :price="0" />
+ <div v-else class="empty-state">
+ <img src="@/assets/image/kong.png" alt="" class="empty-icon" />
+ <div class="empty-text">{{ $t('暂无数据') }}</div>
+ </div>
+ </template>
+ <!-- 合约交易：永续持仓列表（平仓成功后刷新列表） -->
+ <template v-else>
+ <perpetual-position-list v-if="contractPositionList.length" :list-data="contractPositionList"
+ @sell="fetchContractHold" />
+ <div v-else class="empty-state">
+ <img src="@/assets/image/kong.png" alt="" class="empty-icon" />
+ <div class="empty-text">{{ $t('暂无数据') }}</div>
+ </div>
+ </template>
+ </div>
+ </div>
+ </section>
</template>
+
<script setup>
- import {
- ref,
- onMounted,
- onBeforeUnmount,
- nextTick,
- computed
- } from "vue";
- import {
- useUserStore
- } from "@/store/user";
- import {
- useRoute,
- useRouter
- } from "vue-router";
- import {
- useI18n
- } from "vue-i18n";
- import ExNav from "@/components/trade/ex-nav/index.vue";
- import useClipboard from "vue-clipboard3";
- import {
- showToast
- } from "vant";
- import {
- watch
- } from "vue";
- import {
- contractOrder
- } from "@/service/trade.api";
- import TradeApi from "@/service/trading.js";
- import {
- _assetsTradeTop
- } from "@/service/user.api";
- import dayjs from "dayjs";
- import {
- themeStore
- } from "@/store/theme";
- import {
- useStore
- } from 'vuex';
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useStore } from 'vuex'
+import { Icon } from 'vant'
+import { showToast } from 'vant'
+import { useI18n } from 'vue-i18n'
+import { useUserStore } from '@/store/user'
+import { _assetsTradeTop, _resetSimFunds } from '@/service/user.api'
+import { contractOrder, _futrueOrderList } from '@/service/trade.api'
+import PerpetualPositionList from '@/components/Transform/perpetual-position-list/index.vue'
+import DeliveryHoldList from '@/components/Transform/deliveryContract/hold.vue'
- const thStore = themeStore();
- const store = useStore()
- const {
- t
- } = useI18n();
- const {
- toClipboard
- } = useClipboard();
- const router = useRouter();
- const route = useRoute();
+const router = useRouter()
+const store = useStore()
+const userStore = useUserStore()
+const { t } = useI18n()
- const isLoading = ref(false);
- const assetsObj = ref({})
- const assets = ref({})
- const symbolType = ref("indices"); //默认etf
- const currency = ref({});
- const getCurrency = async () => {
- _getExchangeRate().then((res) => {
- currency.value = res;
- }).catch((err) => Promise.reject(err));
- };
+const isSimulation = computed(() => userStore.userInfo?.accountType === 1)
- onMounted(async () => {
- await store.dispatch('home/SET_CURRENCY')
- currency.value = store.state.home.currency
- assetsTradeTopFn();
- });
+const assetVisible = ref(true)
+const activeTab = ref(0) // 0 期权交易(交割持仓) 1 合约交易(永续持仓)
+const assetsObj = ref({})
+const symbolType = ref('indices')
+/** 期权交易(交割)持仓、合约交易(永续)持仓分开存，避免 tab 切换时互相覆盖 */
+const optionsPositionList = ref([])
+const contractPositionList = ref([])
+const positionLoading = ref(false)
+function formatAmount(v) {
+ if (v == null || v === '') return '0.0000'
+ const n = Number(v)
+ return isNaN(n) ? '0.0000' : n.toFixed(4)
+}
+function onMenuClick() {
+ router.push('/my/index')
+}
- watch(symbolType, (newVal, oldVal) => {
- assetsTradeTopFn()
- });
+/** 刷新资产与持仓数据 */
+function refreshAssetData() {
+ assetsTradeTopFn()
+ fetchPositionList()
+}
+/** 模拟账户：重置资金，成功后刷新资产 */
+function onResetSimFunds() {
+ _resetSimFunds()
+ .then(() => {
+ showToast(t('操作成功') || '操作成功')
+ refreshAssetData()
+ })
+ .catch(() => { })
+}
+const assetsTradeTopFn = () => {
+ _assetsTradeTop({
+ symbolType: symbolType.value,
+ tradeType: symbolType.value === 'cryptos' ? 'contract' : 'exchange'
+ }).then((res) => {
+ assetsObj.value = res || {}
+ }).catch(() => { })
+}
- const assetsTradeTopFn = (tradeType) => {
- console.log(symbolType.value)
- isLoading.value = true;
- _assetsTradeTop({
- symbolType: symbolType.value,
- tradeType: symbolType.value == 'cryptos' ? 'contract' : 'exchange'
- }).then(res => {
- assetsObj.value = res
- }).catch((e) => {});
- }
+/** 期权交易：交割持仓（与 /trade/options 交割一致） */
+function fetchOptionsHold() {
+ positionLoading.value = true
+ _futrueOrderList('', 'orders', 1, '')
+ .then((data) => {
+ optionsPositionList.value = Array.isArray(data) ? data : []
+ })
+ .catch(() => {
+ optionsPositionList.value = []
+ })
+ .finally(() => {
+ positionLoading.value = false
+ })
+}
+
+/** 合约交易：永续持仓（与 /trade/options 永续一致） */
+function fetchContractHold() {
+ positionLoading.value = true
+ contractOrder({
+ // symbol: '',
+ type: 'orders',
+ page_no: 1,
+ // symbolType: 'cryptos'
+ })
+ .then((data) => {
+ contractPositionList.value = Array.isArray(data) ? data : []
+ })
+ .catch(() => {
+ contractPositionList.value = []
+ })
+ .finally(() => {
+ positionLoading.value = false
+ })
+}
+
+function fetchPositionList() {
+ if (activeTab.value === 0) {
+ fetchOptionsHold()
+ } else {
+ fetchContractHold()
+ }
+}
+
+onMounted(async () => {
+ await store.dispatch('home/SET_CURRENCY')
+ assetsTradeTopFn()
+ fetchPositionList()
+})
+
+watch(symbolType, () => {
+ assetsTradeTopFn()
+})
+
+watch(activeTab, () => {
+ fetchPositionList()
+})
</script>
-<style lang="scss">
- .my-index {
- background-color: var(--main3_background);
- padding-bottom: calc(80px + constant(safe-area-inset-bottom)) !important;
- padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important
- }
- .my-index .assets {
- padding: 10px;
- margin-top: 10px
- }
+<style lang="scss" scoped>
+@import '@/assets/css/variable.scss';
- .my-index .assets .top {
- display: flex;
- justify-content: space-between;
- align-items: center
- }
+.personal-page {
+ min-height: 100vh;
+ background: $main_background;
+ padding-bottom: calc(80px + constant(safe-area-inset-bottom));
+ padding-bottom: calc(80px + env(safe-area-inset-bottom));
+ box-sizing: border-box;
+}
- .my-index .assets .top .title {
- font-size: 20px;
- font-weight: 700;
- color: var(--text_color);
- letter-spacing: -0.3px;
- }
+.page-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 8.8rem;
+ padding: 0 2.4rem;
+ background: #fff;
+ box-sizing: border-box;
- .my-index .currentAssets {
- background-color: var(--inverse);
- border-radius: 16px;
- margin-top: 16px;
- box-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
- border: 1px solid rgba(118, 128, 143, 0.1);
- padding: 24px;
- display: flex;
- flex-direction: column;
- transition: all 0.3s ease;
- }
+ .header-title {
+ font-size: 3.4rem;
+ font-weight: 700;
+ color: $text_color;
+ margin: 0;
+ }
- .my-index .currentAssets:hover {
- box-shadow: 0 4px 20px rgba(146, 209, 255, 0.12);
- }
+ .header-menu {
+ width: 4.4rem;
+ height: 4.4rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ }
- .my-index .currentAssets .top {
- display: flex;
- justify-content: space-between;
- align-items: center
- }
+ .menu-icon {
+ width: 4rem;
+ height: 4rem;
+ border: 0.15rem solid $text_color1;
+ border-radius: 50%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 0.4rem;
- .my-index .currentAssets .top .amount {
- display: flex;
- flex-direction: column
- }
+ .line {
+ display: block;
+ width: 1.6rem;
+ height: 0.12rem;
+ background: $text_color1;
+ border-radius: 0.06rem;
+ }
+ }
+}
- .my-index .currentAssets .top .amount .amountTop {
- display: flex;
- align-items: center;
- gap: 8px;
- font-size: 16px;
- font-weight: 600;
- color: var(--text_color);
- }
+.asset-card {
+ margin: 2rem 2.4rem;
+ padding: 4rem 2rem;
+ background: #fff;
+ border-radius: 1.2rem;
+ box-shadow: 0rem 0.8rem 3.2rem 0rem rgba(0, 0, 0, 0.13);
+ border: 1 solid $border_color;
+ box-sizing: border-box;
+}
- .my-index .currentAssets .top .amount .amountTop .nation {
- width: 19px;
- height: 19px;
- border-radius: 50%
- }
+.asset-label-row {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.6rem;
+ margin-bottom: 1.2rem;
- .my-index .currentAssets .top .amount .amountTop .eye {
- width: 19px
- }
+ .asset-label {
+ font-size: 2.5rem;
+ color: $text_color1;
+ }
- .my-index .currentAssets .top .amount .money {
- font-size: 32px;
- font-weight: 700;
- line-height: 48px;
- color: var(--text_color);
- letter-spacing: -0.5px;
- margin-top: 8px;
- }
+ .eye-wrap {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ }
- .my-index .currentAssets .bottom {
- display: grid;
- grid-template-columns: repeat(2, minmax(0, 1fr));
- margin-top: 10px;
- padding-bottom: 10px;
- border-bottom: 1px solid var(--sec-border)
- }
+ .eye-icon {
+ font-size: 3.2rem;
+ color: $text_color1;
+ }
+}
- .my-index .currentAssets .bottom>div {
- display: flex;
- flex-direction: column;
- font-size: 12px;
- color: var(--tips-color);
- line-height: 18px
- }
+.asset-amount {
+ font-size: 3.4rem;
+ font-weight: 700;
+ color: $text_color;
+ text-align: center;
+ margin-bottom: 2.4rem;
+ letter-spacing: -0.02em;
+}
- .my-index .currentAssets .bottom>div .value {
- font-size: 16px;
- line-height: 24px;
- font-weight: 600;
- color: var(--text_color);
- margin-top: 4px;
- }
+.action-btns {
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ padding-top: 1rem;
+}
- .my-index .currentAssets .btnGroup {
- display: grid;
- grid-template-columns: repeat(2, minmax(0, 1fr));
- gap: 12px;
- margin: 20px 0 0
- }
+.action-btn {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ cursor: pointer;
- .my-index .currentAssets .btnGroup div {
- display: flex;
- align-items: center;
- justify-content: center;
- color: #fff;
- font-size: 16px;
- font-weight: 600;
- border-radius: 12px;
- height: 48px;
- cursor: pointer;
- transition: all 0.3s ease;
- border: none;
- }
+ .btn-icon {
+ width: 5rem;
+ height: 5rem;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 0.8rem;
+ overflow: hidden;
+ }
- .my-index .currentAssets .btnGroup div.recharge {
- background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
- box-shadow: 0 4px 12px rgba(146, 209, 255, 0.3);
- }
+ .btn-icon-img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ }
- .my-index .currentAssets .btnGroup div.recharge:hover {
- background: linear-gradient(135deg, #7BB8FF 0%, #6BA8FF 100%);
- box-shadow: 0 6px 16px rgba(146, 209, 255, 0.4);
- transform: translateY(-1px);
- }
+ .btn-text {
+ font-size: 2.6rem;
+ color: $text_color;
+ }
+}
- .my-index .currentAssets .btnGroup div.recharge:active {
- transform: translateY(0);
- }
+.tabs-wrap {
+ margin: 0 2.4rem;
+ background: #fff;
+ border-radius: 1.2rem;
+ overflow: hidden;
+}
- .my-index .currentAssets .btnGroup div.withdraw {
- background: linear-gradient(135deg, #F2495E 0%, #FF6B7A 100%);
- box-shadow: 0 4px 12px rgba(242, 73, 94, 0.3);
- }
+.tabs-bar {
+ display: flex;
+ padding: 0.6rem;
+ gap: 0.6rem;
+ background: #fff;
+ box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.06);
+ border: 0.1rem solid $border_color;
+ border-radius: 1rem;
- .my-index .currentAssets .btnGroup div.withdraw:hover {
- background: linear-gradient(135deg, #FF6B7A 0%, #FF8A95 100%);
- box-shadow: 0 6px 16px rgba(242, 73, 94, 0.4);
- transform: translateY(-1px);
- }
+ .tab-item {
+ flex: 1;
+ text-align: center;
+ padding: 1.4rem 0.8rem;
+ font-size: 2.8rem;
+ color: $text_color1;
+ border-radius: 0.8rem;
+ transition: all 0.2s ease;
+ cursor: pointer;
- .my-index .currentAssets .btnGroup div.withdraw:active {
- transform: translateY(0);
- }
+ &.active {
+ background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
+ color: #fff;
+ font-weight: 500;
+ }
+ }
+}
- .my-index .otherAssets {
- padding: 20px;
- margin-top: 16px;
- border-radius: 16px;
- background: var(--inverse);
- border: 1px solid rgba(118, 128, 143, 0.1);
- box-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
- display: flex;
- flex-direction: column;
- transition: all 0.3s ease;
- }
+.tab-content {
+ min-height: 24rem;
+ padding: 2rem 0;
+}
- .my-index .otherAssets:hover {
- box-shadow: 0 4px 20px rgba(146, 209, 255, 0.12);
- }
+.empty-state {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 4rem 2rem;
- .my-index .otherAssets .amountTop {
- display: flex;
- justify-content: space-between;
- align-items: center
- }
+ .empty-icon {
+ width: 12rem;
+ margin-bottom: 1.6rem;
+ opacity: 0.5;
+ }
- .my-index .otherAssets .amountTop .left {
- display: flex;
- align-items: center;
- gap: 5px;
- font-size: 13px;
- font-weight: 600
- }
-
- .my-index .otherAssets .amountTop .left .nation {
- width: 19px;
- height: 19px;
- border-radius: 50%
- }
-
- .my-index .otherAssets .amountTop .right {
- font-size: 16px;
- font-weight: 600
- }
-
- .my-index .otherAssets .assetsInfo {
- display: flex;
- flex-direction: column;
- padding: 10px 0
- }
-
- .my-index .otherAssets .assetsInfo div {
- display: flex;
- justify-content: space-between;
- align-items: center;
- font-size: 12px;
- color: var(--tips-color)
- }
-
- .my-index .otherAssets .assetsInfo div span:last-child {
- font-size: 13px
- }
-
- .eyeBox {
- width: 17px;
- height: 17px
- }
-
- .eyeBox img {
- width: 100%;
- height: 100%
- }
-</style>
\ No newline at end of file
+ .empty-text {
+ font-size: 2.8rem;
+ color: $text_color1;
+ }
+}
+</style>
diff --git a/src/views/quotes/List.vue b/src/views/quotes/List.vue
index deaf664..e4b5199 100644
--- a/src/views/quotes/List.vue
+++ b/src/views/quotes/List.vue
@@ -144,13 +144,13 @@
// symbolType: 'INDIA-stocks',
// tabIndex: 0
// },
- // {
- // title: t('UsStocks'),
- // type: 'UsStock',
- // urlMatch: 'stock',
- // symbolType: 'US-stocks',
- // tabIndex: 3
- // },
+ {
+ title: t('UsStocks'),
+ type: 'UsStock',
+ urlMatch: 'stock',
+ symbolType: 'US-stocks',
+ tabIndex: 3
+ },
// {
// title: t('港股'),
// type: 'HkStock',
diff --git a/src/views/quotes/Market.vue b/src/views/quotes/Market.vue
new file mode 100644
index 0000000..2f8b0c6
--- /dev/null
+++ b/src/views/quotes/Market.vue
@@ -0,0 +1,634 @@
+<template>
+ <div class="quotes-market-page">
+ <!-- Top Tabs -->
+ <div class="market-tabs">
+ <!-- <div class="tab-item" :class="{ active: activeTab === 'optional' }" @click="activeTab = 'optional'">
+ {{ $t('自选') }}
+ </div> -->
+ <div class="tab-item" :class="{ active: activeTab === 'forex' }" @click="activeTab = 'forex'">
+ {{ $t('外汇') }}
+ </div>
+ <div class="tab-item" :class="{ active: activeTab === 'crypto' }" @click="activeTab = 'crypto'">
+ {{ $t('加密货币') }}
+ </div>
+ <div class="tab-item" :class="{ active: activeTab === 'stock' }" @click="activeTab = 'stock'">
+ {{ $t('股票') }}
+ </div>
+ <div class="tab-item" :class="{ active: activeTab === 'etf' }" @click="activeTab = 'etf'">
+ ETF
+ </div>
+ </div>
+
+ <!-- Trading Pairs List（上拉加载，需在固定高度滚动容器内并指定 scroll-target） -->
+ <div ref="marketListRef" class="market-list market-list--scroll">
+ <van-list v-model:loading="marketLoading" :finished="marketFinished" :immediate-check="false"
+ :scroll-target="marketListRef" :finished-text="$t('没有更多了') || '没有更多了'" @load="loadMoreMarket">
+ <div class="pair-item" v-for="pair in tradingPairs" :key="pair.symbol"
+ @click="goToOptions(pair.symbol, pair.type)">
+ <div class="pair-header">
+ <div class="pair-symbol">
+ <template v-if="activeTab === 'forex' && getPairIconUrl(pair)">
+ <div class="pair-symbol-icon-wrap">
+ <img :src="getPairIconUrl(pair)" alt=""
+ class="pair-symbol-icon pair-symbol-icon--large" />
+ <img v-if="getPairIconUrlSm(pair)" :src="getPairIconUrlSm(pair)" alt=""
+ class="pair-symbol-icon pair-symbol-icon--sm" />
+ </div>
+ </template>
+ <img v-else-if="getPairIconUrl(pair)" :src="getPairIconUrl(pair)" alt=""
+ class="pair-symbol-icon" />
+ {{ pair.symboltxt.toUpperCase() }}
+ </div>
+ <div class="pair-change" :class="pair.change >= 0 ? 'up' : 'down'">
+ {{ pair.change >= 0 ? '+' : '' }}{{ pair.change.toFixed(4) }}%
+ </div>
+ </div>
+ <div class="pair-bottom">
+ <button class="sell">
+ <span class="action-price">{{ pair.sellPrice }}</span>
+ <span class="action-label action-btn">{{ $t('卖出') }}</span>
+ </button>
+ <div class="pair-chart">
+ <MiniKlineChart :key="pair.symbol" :data="pair.klineData || []" :up="pair.change >= 0" />
+ </div>
+ <button class="buy">
+ <span class="action-price">{{ pair.buyPrice }}</span>
+ <span class="action-label action-btn">{{ $t('买入') }}</span>
+ </button>
+ </div>
+ </div>
+ </van-list>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, onBeforeUnmount, nextTick } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { List as VanList } from 'vant'
+import { _getRealtimeByType } from '@/service/quotes.api'
+import { _listItemsById, _itemUserOptionalList, _getQuotes } from '@/service/quotes.api'
+import { useUserStore } from '@/store/user'
+import { useQuotesStore } from '@/store/quotes.store'
+import { OPCIONA_LIST } from '@/store/types.store'
+import { IMG_PATH } from '@/config'
+import MiniKlineChart from '@/components/MiniKlineChart/index.vue'
+
+// 外汇货币代码 -> 国旗图国家/地区代码（与首页一致）
+const CURRENCY_TO_FLAG = {
+ eur: 'eu', usd: 'us', gbp: 'gb', jpy: 'jp', chf: 'ch', aud: 'au', cad: 'ca', nzd: 'nz',
+ cny: 'cn', cnh: 'cn', hkd: 'hk', sgd: 'sg', nok: 'no', sek: 'se', dkk: 'dk', mxn: 'mx',
+ zar: 'za', try: 'tr', pln: 'pl', inr: 'in', krw: 'kr', thb: 'th', myr: 'my', idr: 'id',
+ php: 'ph', brl: 'br', rub: 'ru', czk: 'cz', huf: 'hu', ron: 'ro', bgn: 'bg', hrk: 'hr'
+}
+const FLAG_CDN = 'https://flagcdn.com/w40'
+
+const { t } = useI18n()
+const router = useRouter()
+const useStore = useUserStore()
+const quotesStore = useQuotesStore()
+
+const activeTab = ref('crypto')
+const tradingPairs = ref([])
+const interval = ref(null)
+const marketPage = ref(1)
+const marketLoading = ref(false)
+const marketFinished = ref(false)
+const marketListRef = ref(null)
+const marketInitialLoading = ref(false) // tab 切换时首屏请求中，避免 @load 重复请求 pageNo=1
+const MARKET_PAGE_SIZE = 10
+
+// 从外汇对取基础货币代码，与首页一致
+function getForexBaseCurrency(symbol) {
+ if (!symbol || typeof symbol !== 'string') return ''
+ const s = symbol.trim()
+ if (s.includes('/')) return s.split('/')[0].trim().toLowerCase()
+ return s.slice(0, 3).toLowerCase()
+}
+
+// 从外汇对取计价货币代码，如 EUR/USD -> usd（右下角小图用）
+function getForexQuoteCurrency(symbol) {
+ if (!symbol || typeof symbol !== 'string') return ''
+ const s = symbol.trim()
+ if (s.includes('/')) return s.split('/')[1]?.trim().toLowerCase() || ''
+ return s.length > 3 ? s.slice(3, 6).toLowerCase() : ''
+}
+
+// 列表项图标地址：外汇用国旗，加密货币用 symbol 图；股票、ETF 不展示图标；自选按 type 判断
+function getPairIconUrl(pair) {
+ if (!pair) return ''
+ const tab = activeTab.value
+ if (tab === 'stock' || tab === 'etf') return ''
+ if (tab === 'optional' && (pair.type === 'US-stocks' || pair.type === 'indices')) return ''
+ if (tab === 'forex') {
+ const code = CURRENCY_TO_FLAG[getForexBaseCurrency(pair.symbol)]
+ return code ? `${FLAG_CDN}/${code}.png` : ''
+ }
+ return pair.iconImg ? `${IMG_PATH}/symbol/${pair.iconImg}.png` : ''
+}
+
+// 小图用名字后面3位（计价货币）的国旗，仅外汇有效
+function getPairIconUrlSm(pair) {
+ if (!pair || activeTab.value !== 'forex') return ''
+ const quote = getForexQuoteCurrency(pair.symbol)
+ if (!quote) return ''
+ const code = CURRENCY_TO_FLAG[quote]
+ return code ? `${FLAG_CDN}/${code}.png` : ''
+}
+
+// 根据当前价与涨跌幅生成小型 K 线数据，与首页一致
+function generateMiniKlineData(basePrice, changeRatio) {
+ const candleCount = 12
+ const startPrice = basePrice / (1 + (changeRatio || 0) / 100)
+ const range = basePrice - startPrice
+ const candles = []
+ let prevClose = startPrice
+ for (let i = 0; i < candleCount; i++) {
+ const t = (i + 1) / candleCount
+ const trend = startPrice + range * t
+ const noise = (Math.random() - 0.5) * (Math.abs(range) * 0.15 + basePrice * 0.002)
+ const close = i === candleCount - 1 ? basePrice : Math.max(basePrice * 0.001, trend + noise)
+ const open = prevClose
+ const low = Math.min(open, close) - Math.random() * basePrice * 0.001
+ const high = Math.max(open, close) + Math.random() * basePrice * 0.001
+ candles.push([open, close, low, high])
+ prevClose = close
+ }
+ return candles
+}
+
+// 获取自选数据
+const fetchOptionalData = async () => {
+ try {
+ // 清除之前的定时器
+ if (interval.value) {
+ clearInterval(interval.value)
+ interval.value = null
+ }
+
+ if (!useStore.userInfo.token) {
+ // 未登录时使用默认列表
+ const defaultSymbols = [
+ { symbol: 'AAPL' },
+ { symbol: 'MSFT' },
+ { symbol: 'btc' },
+ { symbol: 'eth' },
+ { symbol: 'SH518880' },
+ { symbol: '.IXIC' },
+ { symbol: '.DJI' },
+ ]
+ quotesStore[OPCIONA_LIST](defaultSymbols)
+ fetchOptionalQuotes()
+ return
+ }
+
+ // 获取用户自选列表
+ const listData = await _itemUserOptionalList()
+ if (listData && listData.list && listData.list.length > 0) {
+ // 获取第一个自选列表的详情
+ const firstList = listData.list[0]
+ const itemsData = await _listItemsById({ id: firstList.listId })
+
+ if (itemsData && Array.isArray(itemsData)) {
+ // 将symbols放入store
+ const symbols = itemsData.map(item => ({ symbol: item.symbol }))
+ quotesStore[OPCIONA_LIST](symbols)
+ fetchOptionalQuotes()
+ } else {
+ quotesStore[OPCIONA_LIST]([])
+ tradingPairs.value = []
+ }
+ } else {
+ quotesStore[OPCIONA_LIST]([])
+ tradingPairs.value = []
+ }
+ } catch (error) {
+ console.error('获取自选数据失败:', error)
+ tradingPairs.value = []
+ }
+}
+
+// 获取自选实时报价
+const fetchOptionalQuotes = () => {
+ if (quotesStore.$state.opcionalList.length > 0) {
+ _getQuotes(quotesStore.$state.opcionalList).then((data) => {
+ if (data && Array.isArray(data)) {
+ tradingPairs.value = data.map(item => {
+ const basePrice = parseFloat(item.close || 0)
+ const changeRatio = item.changeRatio || item.change_ratio || 0
+ const symbolStr = item.symbol || '--'
+ const iconImg = item.symbol_data || (symbolStr.includes('/') ? symbolStr.split('/')[0].toLowerCase() : symbolStr.replace(/USDT$/i, '').toLowerCase()) || symbolStr.toLowerCase()
+ const klineData = generateMiniKlineData(basePrice, changeRatio)
+ const spread = basePrice * 0.0001
+ const sellPrice = (basePrice - spread).toFixed(4)
+ const buyPrice = (basePrice + spread).toFixed(4)
+
+ return {
+ symbol: symbolStr,
+ price: basePrice.toFixed(4),
+ change: changeRatio,
+ sellPrice: sellPrice,
+ buyPrice: buyPrice,
+ klineData: klineData,
+ iconImg: iconImg,
+ type: item.type
+ }
+ })
+ } else {
+ tradingPairs.value = []
+ }
+ }).catch(error => {
+ console.error('获取自选报价失败:', error)
+ tradingPairs.value = []
+ })
+ } else {
+ tradingPairs.value = []
+ }
+}
+
+// 定时更新自选数据
+const startOptionalInterval = () => {
+ if (interval.value) {
+ clearInterval(interval.value)
+ }
+ interval.value = setInterval(() => {
+ if (activeTab.value === 'optional') {
+ fetchOptionalQuotes()
+ }
+ }, 2000)
+}
+
+// 获取交易数据；pageNo 页码，append 是否追加
+const fetchTradingData = async (pageNo = 1, append = false) => {
+ let type = ''
+ let category = null
+
+ switch (activeTab.value) {
+ case 'crypto':
+ type = 'cryptos'
+ break
+ case 'etf':
+ type = 'indices'
+ break
+ case 'stock':
+ type = 'US-stocks'
+ break
+ case 'forex':
+ type = 'forex'
+ category = 'forex'
+ break
+ default:
+ type = 'forex'
+ category = 'forex'
+ }
+
+ try {
+ const params = {
+ type: type,
+ pageNo: pageNo,
+ pageSize: MARKET_PAGE_SIZE
+ }
+ if (category) {
+ params.category = category
+ }
+
+ const data = await _getRealtimeByType(params)
+
+ if (data && Array.isArray(data)) {
+ const list = data.map(item => {
+ const basePrice = parseFloat(item.close || item.lastPrice || 0)
+ const changeRatio = item.changeRatio || 0
+ const symbolStr = item.symbol || '--'
+ const symboltxt = item.enName
+ const iconImg = item.symbol_data || (symbolStr.includes('/') ? symbolStr.split('/')[0].toLowerCase() : symbolStr.replace(/USDT$/i, '').toLowerCase()) || symbolStr.toLowerCase()
+ const klineData = generateMiniKlineData(basePrice, changeRatio)
+ const spread = basePrice * 0.0001
+ const sellPrice = (basePrice - spread).toFixed(4)
+ const buyPrice = (basePrice + spread).toFixed(4)
+
+ return {
+ symbol: symbolStr,
+ symboltxt: symboltxt,
+ price: basePrice.toFixed(4),
+ change: changeRatio,
+ sellPrice: sellPrice,
+ buyPrice: buyPrice,
+ klineData: klineData,
+ symbol: symbolStr,
+ type: type,
+ iconImg: iconImg,
+ price: basePrice.toFixed(4),
+ change: changeRatio,
+ sellPrice: sellPrice,
+ buyPrice: buyPrice,
+ klineData: klineData
+ }
+ })
+ if (append) {
+ tradingPairs.value = [...tradingPairs.value, ...list]
+ } else {
+ tradingPairs.value = list
+ }
+ marketLoading.value = false
+ if (data.length <= 0) {
+ marketFinished.value = true
+ }
+ } else {
+ if (!append) tradingPairs.value = []
+ marketFinished.value = true
+ }
+ } catch (error) {
+ console.error('获取交易数据失败:', error)
+ if (!append) tradingPairs.value = []
+ marketFinished.value = true
+ }
+}
+
+// 上拉触底加载更多（仅非自选 tab 分页，pageSize=10）
+const loadMoreMarket = async () => {
+ if (activeTab.value === 'optional') {
+ marketFinished.value = true
+ marketLoading.value = false
+ return
+ }
+ if (marketInitialLoading.value) {
+ marketLoading.value = false
+ return
+ }
+ // if (marketLoading.value || marketFinished.value) return
+ // marketLoading.value = true
+ try {
+ await fetchTradingData(marketPage.value, true)
+ marketPage.value += 1
+ } finally {
+ marketLoading.value = false
+ }
+}
+
+// 跳转到交易页 Options，与首页一致：/trade/options?symbol=xxx&activeTab=xxx
+function goToOptions(symbol, type) {
+ if (!symbol) return
+ const tabMap = { crypto: 'cryptos', etf: 'indices', stock: 'US-stocks', forex: 'forex', optional: 'optional' }
+ const activeTabValue = type || tabMap[activeTab.value] || 'cryptos'
+ router.push({
+ path: '/trade/options',
+ query: { symbol, activeTab: activeTabValue }
+ })
+}
+
+// 获取数据
+const fetchData = async () => {
+ if (interval.value) {
+ clearInterval(interval.value)
+ interval.value = null
+ }
+
+ marketPage.value = 1
+ marketFinished.value = false
+ marketInitialLoading.value = true
+ try {
+ if (activeTab.value === 'optional') {
+ await fetchOptionalData()
+ startOptionalInterval()
+ marketFinished.value = true
+ } else {
+ await fetchTradingData(1, false)
+ marketPage.value = 2
+ }
+ // tab 切换后列表滚动回顶部
+ await nextTick()
+ if (marketListRef.value) marketListRef.value.scrollTop = 0
+ } finally {
+ marketInitialLoading.value = false
+ }
+}
+
+// 监听 tab 切换
+watch(activeTab, () => {
+ fetchData()
+})
+
+// 处理列表项点击
+const handleItemClick = (pair) => {
+ // 根据类型跳转到不同的详情页
+ const type = pair.type || activeTab.value
+ if (type === 'cryptos' || type === 'crypto') {
+ router.push(`/cryptos/trendDetails/${pair.symbol}?isOptional=1&type=cryptos`)
+ } else if (type === 'indices' || type === 'etf') {
+ router.push(`/quotes/detail?symbol=${pair.symbol}&isOptional=1&symbolType=indices&type=indices`)
+ } else if (type === 'US-stocks' || type === 'stock') {
+ router.push(`/quotes/usStockDetail?symbol=${pair.symbol}&isOptional=1&symbolType=US-stocks`)
+ } else {
+ router.push(`/foreign/coinChart?symbol=${pair.symbol}&isOptional=1`)
+ }
+}
+
+// 组件挂载时获取数据
+onMounted(() => {
+ fetchData()
+})
+
+// 组件卸载时清除定时器
+onBeforeUnmount(() => {
+ if (interval.value) {
+ clearInterval(interval.value)
+ interval.value = null
+ }
+})
+</script>
+
+<style lang="scss" scoped>
+.quotes-market-page {
+ min-height: 100vh;
+ background: #fff;
+ padding-bottom: 6rem;
+ padding: 3rem 0;
+}
+
+/* Top Tabs */
+.market-tabs {
+ display: flex;
+ border: 0.1rem solid #e0e0e0;
+ background: #fff;
+ border-radius: 1rem;
+ padding: 0.3rem;
+ overflow-x: auto;
+ position: sticky;
+ top: 0;
+ z-index: 10;
+ gap: 0.3rem;
+ margin: 0 2rem 2rem;
+
+ .tab-item {
+ font-size: 2.5rem;
+ padding: 1.5rem 0;
+ color: $text_color1;
+ white-space: nowrap;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ border-radius: 0.8rem;
+ flex: 1;
+ text-align: center;
+ font-weight: 500;
+
+ &.active {
+ color: #fff;
+ background: #0a6bfa;
+ border-color: #0a6bfa;
+ font-weight: 600;
+ padding: 1.5rem 2rem;
+ }
+ }
+}
+
+/* Market List（固定高度 + 内部滚动，供 van-list 触底检测） */
+.market-list {
+ padding: 2rem;
+
+ &.market-list--scroll {
+ overflow-y: auto;
+ max-height: calc(100vh - 18rem);
+ }
+
+ .pair-item {
+ display: flex;
+ flex-direction: column;
+ padding: 2rem;
+ margin-bottom: 2rem;
+ background: #fff;
+ border-radius: 1rem;
+ border: 0.1rem solid #f0f0f0;
+ cursor: pointer;
+ transition: background 0.2s ease;
+ box-shadow: 0rem .8rem 3.2rem 0rem rgba(0, 0, 0, .12);
+
+ &:hover {
+ background: #f9f9f9;
+ }
+
+ .pair-header {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ .pair-symbol {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.6rem;
+ font-size: 2rem;
+ font-weight: 600;
+ color: $text_color;
+
+ .pair-symbol-icon-wrap {
+ position: relative;
+ flex-shrink: 0;
+ }
+
+ .pair-symbol-icon {
+ width: 2.4rem;
+ height: 2.4rem;
+ border-radius: 50%;
+ // object-fit: contain;
+
+ &--large {
+ width: 3rem;
+ height: 3rem;
+ }
+
+ &--sm {
+ position: absolute;
+ right: -0.2rem;
+ bottom: -0.2rem;
+ width: 1.6rem;
+ height: 1.6rem;
+ border-radius: 50%;
+ object-fit: cover;
+ border: 0.15rem solid #fff;
+ box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.2);
+ }
+ }
+ }
+
+ .pair-change {
+ font-size: 1.75rem;
+ font-weight: 600;
+
+ &.up {
+ color: $green;
+ }
+
+ &.down {
+ color: $red;
+ }
+ }
+ }
+
+ .pair-bottom {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ position: relative;
+ top: -2.2rem;
+
+ .action-price {
+ font-size: 2rem;
+ font-weight: 600;
+ }
+
+ .action-btn {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 0.3rem 5rem;
+ border: 0.1rem solid #333;
+ border-radius: 0.2rem;
+ font-size: 1.8rem;
+ background: #fff;
+ cursor: pointer;
+ min-width: 7rem;
+ gap: 0.5rem;
+ flex-shrink: 0;
+
+ .action-label {
+ font-size: 1.5rem;
+ }
+
+ &.sell {
+ .action-price {
+ color: $text_color;
+ }
+
+ .action-label {
+ color: $red;
+ }
+ }
+
+ &.buy {
+ .action-price {
+ color: $text_color;
+ }
+
+ .action-label {
+ color: $green;
+ }
+ }
+
+ &:hover {
+ background: #f9f9f9;
+ }
+ }
+
+ .pair-chart {
+ flex: 1;
+ height: 2.5rem;
+ margin: 0 0.5rem;
+ min-width: 6rem;
+ }
+ }
+ }
+}
+</style>
diff --git a/src/views/register/index.vue b/src/views/register/index.vue
index 08faeac..77a4251 100644
--- a/src/views/register/index.vue
+++ b/src/views/register/index.vue
@@ -1,67 +1,73 @@
<template>
<div class="register">
- <div class="top" @click="router.go(-1)">
- <img src="../../assets/image/icon-close.png" alt="" />
- </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("email") }}
- </div>
- <!-- yyhh -->
- <!-- <div class="textColor1" :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)">
- {{ $t("phoneNum") }}
- </div> -->
- </div>
- <ExInput :label="getRegType(activeIndex, true)" :placeholderText="getRegType(activeIndex, false)" v-model="username"
- :area="isArea" :dialCode="dialCode" @selectArea="onSelectArea" :icon="icon" />
+ <van-loading color="#92D1FF" class="loading-box" v-if="isLoading" />
- <ExInput :label="$t('setPassword')" :placeholderText="$t('passwordTips')" v-model="password" typeText="password" />
- <ExInput :label="$t('repassword')" :placeholderText="$t('surePassword')" v-model="repassword" typeText="password" />
- <ExInput :label="$t('setSafeword')" :placeholderText="$t('safewordTips')" v-model="safeword" typeText="password"
- v-if="activeIndex === 1" />
- <div class="inputCom" v-if="activeIndex === 1">
- <p class="label textColor">{{ $t("验证码") }}</p>
- <div class="iptbox inputBackground">
- <input class="inputBackground textColor" type="text" :placeholder="$t('entryVerifyCode')" v-model="verifyCode" />
- <span v-if="type !== 3" @click="senCode">{{ $t("sendVerifyCode") }}
- <template v-if="time">({{ time }})s</template>
+ <!-- 顶部返回 -->
+ <div class="header">
+ <div class="back-btn" @click="router.go(-1)">
+ <img src="../../assets/image/icon_back2.png" alt="" />
+ </div>
+ </div>
+
+ <div class="register-cont">
+ <!-- 标题 -->
+ <div class="title textColor">{{ activeIndex === 1 ? $t("email") : $t("mobile") }}</div>
+
+ <!-- Email 模式 -->
+ <template v-if="activeIndex === 1">
+ <ExInput :label="$t('email')" :placeholderText="$t('entryEmail')" v-model="username" />
+ <ExInput :label="$t('password')" :placeholderText="$t('entryPassword')" v-model="password"
+ typeText="password" />
+ <ExInput :label="$t('repassword')" :placeholderText="$t('repassword')" v-model="repassword"
+ typeText="password" />
+ <ExInput :label="$t('invitCode')" :placeholderText="$t('entryInvitCode')" v-model="invitCode"
+ :clearBtn="false" />
+ </template>
+
+ <!-- Mobile 模式 -->
+ <template v-else>
+ <ExInput :label="$t('phoneNum')" :placeholderText="$t('phoneNum')" v-model="username" :area="isArea"
+ :dialCode="dialCode" @selectArea="onSelectArea" :icon="icon" />
+ <ExInput :label="$t('password')" :placeholderText="$t('entryPassword')" v-model="password"
+ typeText="password" />
+ <ExInput :label="$t('repassword')" :placeholderText="$t('repassword')" v-model="repassword"
+ typeText="password" />
+ <ExInput :label="$t('invitCode')" :placeholderText="$t('entryInvitCode')" v-model="invitCode"
+ :clearBtn="false" />
+ </template>
+
+ <!-- Sign Up 按钮 -->
+ <van-button class="w-full sign-up-btn" type="primary" @click="register">
+ {{ $t("register") }}
+ </van-button>
+
+ <!-- 切换链接 -->
+ <div class="switch-link textColor" @click="switchMode">
+ {{ activeIndex === 1 ? $t("mobile") : $t("email") }}
+ </div>
+
+ <!-- 协议复选框 -->
+ <div class="protocol textColor mainBackground">
+ <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("agree") }}
+ <span class="colorMain" @click="router.push('/aboutUs?serviceTerm=1')">
+ {{ "<" + $t("serviceConf") + ">" }}
</span>
</div>
</div>
- <ExInput :label="$t('invitCode')" :placeholderText="$t('entryInvitCode')" 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('/aboutUs?serviceTerm=1')">{{
- $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>
- <Vcode :imgs="[img1, img2]" :show="show" @success="onSuccess" :canvasHeight="200" @fail="onFail" @close="show = false"
- sliderText="" :successText="$t('vertifyPass')" :failText="$t('vertifuFail')" />
-
- <div>{{ msg }}</div>
+ <Vcode :imgs="[img1, img2]" :show="show" @success="onSuccess" :canvasHeight="200" @fail="onFail"
+ @close="show = false" sliderText="" :successText="$t('vertifyPass')" :failText="$t('vertifuFail')" />
</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 { _bindEmailRegister } from "@/service/user.api.js";
import { useUserStore } from "@/store/user";
@@ -76,16 +82,14 @@
import { ref, onMounted, reactive, onUnmounted } from "vue";
import { showToast } from "vant";
import store from "@/store/store";
+
const { t } = useI18n();
const router = useRouter();
-const onRoute = (path) => {
- router.push(path);
-};
const userStore = useUserStore();
let show = ref(false);
-const msg = ref("");
-const type = ref(1);
+const isLoading = ref(false);
+const type = ref(2);
const time = ref(0);
let agree = ref(false);
const username = ref("");
@@ -93,10 +97,7 @@
const repassword = ref("");
const verifyCode = ref("");
const safeword = ref("");
-const fundPassword = ref("");
-const refundPassword = ref("");
-const activeIndex = ref(0);
-const typeText = ref("password");
+const activeIndex = ref(1); // 1 = Email, 2 = Mobile
let isArea = ref(false);
let dialCode = ref(0);
let icon = ref("");
@@ -106,7 +107,6 @@
let invitCode = ref("");
onMounted(() => {
- console.log(store);
let usercode = getStorage("usercode");
if (usercode) {
invitCode.value = usercode;
@@ -120,59 +120,17 @@
state.timer = null;
});
-const getRegType = (activeIndex, bFlag) => {
- switch (activeIndex) {
- case 0:
- return bFlag ? t("account") : t("entryAccount");
- case 1:
- return bFlag ? t("email") : t("entryEmail");
- case 2:
- return bFlag ? t("phoneNum") : t("entryPhone");
+const switchMode = () => {
+ activeIndex.value = activeIndex.value === 1 ? 2 : 1;
+ if (activeIndex.value === 2) {
+ isArea.value = true;
+ } else {
+ isArea.value = false;
}
-};
-
-const senCode = () => {
- if (time.value > 0) {
- return false;
- }
- if (activeIndex.value === 1) {
- let match = username.value.search(/@/);
- if (username.value == "" || match == -1) {
- showToast(t("entryCorrectEmail"));
- return;
- }
- }
-
- _sendVerifyCode({
- target: username.value,
- })
- .then((res) => {
- time.value = 60;
- state.timer = setInterval(() => {
- if (time.value > 0) {
- time.value = time.value - 1;
- } else {
- time.value = 0;
- clearInterval(state.timer);
- state.timer = null;
- }
- }, 1000);
- })
- .catch((error) => {
- showToast(t(error.msg));
- });
-};
-
-const onSuccess = () => {
- console.log("onSuccess");
- registerApi();
- show.value = false;
-};
-const onFail = () => {
- msg.value = "";
-};
-const onRefresh = () => {
- msg.value = "";
+ // 清空表单
+ username.value = "";
+ password.value = "";
+ repassword.value = "";
};
const controlChildRef = ref(null);
@@ -184,44 +142,31 @@
icon.value = params.code;
dialCode.value = params.dialCode;
};
+
const agreeProt = () => {
agree.value = !agree.value;
};
+
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) {
+ if (activeIndex.value === 1) {
+ // Email 模式验证
let match = username.value.search(/@/);
- if (username.value == "" || match.value == -1) {
+ if (username.value == "" || match == -1) {
showToast(t("entryCorrectEmail"));
return;
}
- if (safeword.value == "") {
- showToast(t("safewordTips"));
+ } else {
+ // Mobile 模式验证
+ if (username.value == "") {
+ showToast(t("entryPhone"));
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;
@@ -240,178 +185,145 @@
}
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;
- }
- }
+const onSuccess = () => {
+ registerApi();
+ show.value = false;
+};
+
+const onFail = () => {
+ // 验证失败处理
+};
+
+const registerApi = () => {
+ isLoading.value = true;
if (activeIndex.value === 1) {
+ // Email 注册
+ type.value = 2;
_bindEmailRegister({
username: username.value,
password: password.value,
- type: "2", // 2邮箱
- verifcode: verifyCode.value,
+ type: "2",
+ verifcode: verifyCode.value || "",
usercode: invitCode.value,
- safeword: safeword.value,
+ safeword: safeword.value || "",
}).then((res) => {
+ isLoading.value = false;
userStore[GET_USERINFO](res);
store.state.user.userInfo = res;
- // 其他操作？？
router.push("/identity");
+ }).catch(() => {
+ isLoading.value = false;
});
} else {
+ // Mobile 注册
+ type.value = 1;
_registerUser({
- userName:
- activeIndex.value === 0 || activeIndex.value === 1
- ? username.value
- : `${dialCode.value}${username.value}`,
+ userName: `${dialCode.value}${username.value}`,
password: password.value,
- // re_password: repassword.value,
type: type.value,
userCode: invitCode.value,
}).then((res) => {
+ isLoading.value = false;
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}`,
- },
- });
- }
+ router.push({
+ name: "verify",
+ query: {
+ type: activeIndex.value,
+ account: `${dialCode.value}${username.value}`,
+ },
+ });
+ }).catch(() => {
+ isLoading.value = false;
});
}
};
</script>
<style lang="scss" scoped>
-.activeBKClick {
- &:active {
- background: $tab_background;
- opacity: 0.5;
- }
-}
-
-.activeClick {
- &:active {
- background: $mainbgWhiteColor;
- opacity: 0.5;
- }
+:deep(.van-loading) {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
}
.register {
width: 100%;
+ min-height: 100vh;
box-sizing: border-box;
- padding: 16px;
- font-size: 13px;
+ background: #fff;
}
-.top {
- padding-left: 9px;
- padding-top: 9px;
+/* 顶部返回 */
+.header {
+ padding-top: 2rem;
+ padding-left: 3rem;
- img {
- width: 18px;
- height: 18px;
+ .back-btn {
+ width: 4rem;
+ height: 4rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+
+ img {
+ width: 100%;
+ }
}
}
+.register-cont {
+ padding: 0 3rem 5rem;
+}
+
+/* 标题 */
.title {
- font-weight: 700;
- font-size: 26px;
- margin-top: 27px;
- margin-bottom: 33px;
+ font-size: 4rem;
+ margin-top: 2.5rem;
+ margin-bottom: 4rem;
}
-.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;
- color: $color_main;
- }
+/* Sign Up 按钮 */
+.sign-up-btn {
+ margin-top: 2.4rem;
+ border-radius: 1rem !important;
+ height: 7.2rem !important;
+ font-size: 2.8rem !important;
}
-.forget {
- color: $color_main;
- font-size: 12px;
- line-height: 14px;
+/* 切换链接 */
+.switch-link {
+ margin-top: 3rem;
+ text-align: center;
+ font-size: 2.8rem;
+ cursor: pointer;
}
-.noTips {
- margin-top: 24px;
-}
-
+/* 协议复选框 */
.protocol {
display: flex;
align-items: center;
- height: 15px;
+ margin-top: 3rem;
+ font-size: 1.75rem;
+ padding: 2.2rem 2rem;
+ position: fixed;
+ left: 0.84rem;
+ bottom: 0;
i {
- width: 15px;
- height: 15px;
- margin-right: 9px;
+ width: 1.875rem;
+ height: 1.875rem;
+ margin-right: 1.125rem;
+ cursor: pointer;
+ flex-shrink: 0;
img {
width: 100%;
height: 100%;
}
- }
-}
-
-.iptbox {
- height: 44px;
- margin-top: 8px;
- margin-bottom: 18px;
- padding: 0 20px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- border-radius: 6px;
-
- input {
- flex: 1;
- height: 100%;
- border: none;
- }
-
- span {
- color: $color_main;
}
}
</style>
diff --git a/src/views/trade/Options.vue b/src/views/trade/Options.vue
new file mode 100644
index 0000000..6f9291a
--- /dev/null
+++ b/src/views/trade/Options.vue
@@ -0,0 +1,594 @@
+<template>
+ <div class="options-trade-page">
+ <!-- Header -->
+ <div class="trade-header">
+ <div class="header-tabs">
+ <button class="tab-btn" :class="{ active: tradeType === 'options' }" @click="tradeType = 'options'">
+ {{ $t('期权交易') }}
+ </button>
+ <button class="tab-btn" :class="{ active: tradeType === 'contract' }" @click="tradeType = 'contract'">
+ {{ $t('合约交易') }}
+ </button>
+ </div>
+
+ <div class="symbol-row">
+ <div class="symbol-selector" @click="showSymbolModal = true">
+ <span class="symbol-text">{{ currentSymbolName }}</span>
+ <img src="@/assets/image/icon-more.png" alt="arrow" class="down-icon" />
+ </div>
+ <!-- <div class="favorite-icon" @click="toggleFavorite">
+ <img :src="isFavorite ? starActiveIcon : starIcon" alt="favorite" />
+ </div> -->
+ </div>
+ </div>
+
+ <!-- Main Content -->
+ <div class="trade-content">
+ <OptionsContract v-if="currentSymbol" :symbol="currentSymbol" :symbol-display-name="currentSymbolName"
+ :select-index="embedSelectIndex" :type="embedType" @update-symbol="currentSymbol = $event" />
+ </div>
+
+ <!-- Symbol Selection Modal -->
+ <van-popup v-model:show="showSymbolModal" round position="bottom" :style="{ height: '80%' }" closeable
+ close-icon-position="top-right">
+ <div class="symbol-modal">
+ <!-- Modal Tabs：同一 activeTab 的 label 与 value 统一配置 -->
+ <div class="modal-tabs">
+ <div class="tab-item" v-for="tab in modalTabs" :key="tab.value"
+ :class="{ active: activeTab === tab.value }" @click="activeTab = tab.value">
+ {{ $t(tab.label) }}
+ </div>
+ </div>
+
+ <!-- Search Bar -->
+ <div class="search-bar">
+ <van-icon name="search" size="20" class="search-icon" />
+ <input type="text" :placeholder="$t('搜索交易种类')" v-model="searchKeyword" class="search-input" />
+ </div>
+
+ <!-- Symbol List（上拉加载，滚动容器需指定 scroll-target） -->
+ <div ref="symbolListRef" class="symbol-list">
+ <van-list v-model:loading="symbolLoading" :finished="symbolFinished" :immediate-check="false"
+ :scroll-target="symbolListRef" :finished-text="$t('没有更多了') || '没有更多了'" @load="loadMoreSymbols">
+ <div class="symbol-item" v-for="item in filteredList" :key="item.symbol"
+ @click="selectSymbol(item)">
+ <div class="symbol-left">
+ <div class="symbol-info">
+ <div class="symbol-name">{{ (item.symbol).toUpperCase() }}</div>
+ </div>
+ </div>
+ <div class="symbol-change" :class="item.change_ratio >= 0 ? 'up' : 'down'">
+ {{ item.change_ratio >= 0 ? '+' : '' }}{{ item.change_ratio }}%
+ </div>
+ <div class="symbol-price">{{ item.close }}</div>
+ </div>
+ </van-list>
+ </div>
+ </div>
+ </van-popup>
+ </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch, nextTick } from 'vue'
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { Popup, Icon, showToast, List as VanList } from 'vant'
+import OptionsContract from './components/OptionsContract.vue'
+import { _getHomeList } from '@/service/home.api'
+import { _getRealtimeByType, _isItemHasAddGlobal } from '@/service/quotes.api'
+import { _listItemsById, _itemUserOptionalList, _getQuotes } from '@/service/quotes.api'
+import { _collect, _deleteCollect } from '@/service/cryptos.api'
+import { useUserStore } from '@/store/user'
+import { useQuotesStore } from '@/store/quotes.store'
+import { OPCIONA_LIST } from '@/store/types.store'
+import { HOST_URL } from '@/config'
+
+const route = useRoute()
+const { t } = useI18n()
+const useStore = useUserStore()
+const quotesStore = useQuotesStore()
+
+const tradeType = ref('options') // 'options' 期权 / 'contract' 合约，默认期权交易
+const currentSymbol = ref('btc')
+const isFavorite = ref(false)
+const showSymbolModal = ref(false)
+const activeTab = ref('cryptos')
+const searchKeyword = ref('')
+const symbolList = ref([])
+const symbolPage = ref(1)
+const symbolLoading = ref(false)
+const symbolFinished = ref(false)
+const symbolListRef = ref(null)
+const symbolInitialLoading = ref(false) // tab 切换时首屏请求中，避免 @load 重复请求 pageNo=1
+const SYMBOL_PAGE_SIZE = 10
+
+// 允许的 activeTab 值（与 modalTabs.value 一致）
+const VALID_ACTIVE_TABS = ['optional', 'forex', 'cryptos', 'US-stocks', 'indices']
+
+// 从路由 path(params) 或 query 同步 symbol 与 activeTab
+function applyFromRoute() {
+ const p = route.params || {}
+ const q = route.query || {}
+ const symbol = q.symbol ?? p.symbol
+ const tab = q.activeTab ?? q.tab ?? p.activeTab ?? p.tab
+ if (symbol != null && String(symbol).trim()) {
+ currentSymbol.value = String(symbol).trim()
+ }
+ if (tab != null && VALID_ACTIVE_TABS.includes(String(tab))) {
+ activeTab.value = tab
+ }
+}
+
+// 弹窗 Tab：label 为多语言 key，value 与接口类型统一（optional 仅自选列表用）
+const modalTabs = [
+ // { label: '自选', value: 'optional' },
+ { label: '外汇', value: 'forex' },
+ { label: '加密货币', value: 'cryptos' },
+ { label: '股票', value: 'US-stocks' },
+ { label: 'ETF', value: 'indices' }
+]
+
+// 头部显示：关联选择项的 name，无则用 symbol
+const currentSymbolName = computed(() => {
+ const sym = currentSymbol.value
+ if (!sym) return ''
+ const item = symbolList.value.find(i => (i.symbol || '').toLowerCase() === sym.toLowerCase())
+ return (item && item.name) ? item.name : sym
+})
+
+// 嵌入合约：1=永续(合约交易)，2=交割(期权交易)
+const embedSelectIndex = computed(() => tradeType.value === 'contract' ? 1 : 2)
+// 嵌入合约品种类型（value 已与接口类型统一，仅 optional 需映射）
+const embedType = computed(() => {
+ return activeTab.value === 'optional' ? 'forex' : activeTab.value
+})
+
+// 图标路径
+const starIcon = new URL('@/assets/image/icon-star.png', import.meta.url).href
+const starActiveIcon = new URL('@/assets/image/icon-star_active.png', import.meta.url).href
+
+// 获取交易对图标
+const getSymbolIcon = (symbol) => {
+ if (!symbol) return ''
+ const baseSymbol = symbol.split('/')[0] || symbol.split('USDT')[0] || symbol
+ return `${HOST_URL}/symbol/${baseSymbol.toLowerCase()}.png`
+}
+
+// 获取自选数据
+const fetchOptionalData = async () => {
+ try {
+ if (!useStore.userInfo.token) {
+ symbolList.value = []
+ return
+ }
+
+ const listData = await _itemUserOptionalList()
+ if (listData && listData.list && listData.list.length > 0) {
+ const firstList = listData.list[0]
+ const itemsData = await _listItemsById({ id: firstList.listId })
+
+ if (itemsData && Array.isArray(itemsData)) {
+ const symbols = itemsData.map(item => ({ symbol: item.symbol }))
+ quotesStore[OPCIONA_LIST](symbols)
+
+ if (symbols.length > 0) {
+ const symbolStr = symbols.map(s => s.symbol).join(',')
+ const data = await _getHomeList(symbolStr)
+ if (data && Array.isArray(data)) {
+ symbolList.value = data
+ } else {
+ symbolList.value = []
+ }
+ } else {
+ symbolList.value = []
+ }
+ } else {
+ symbolList.value = []
+ }
+ } else {
+ symbolList.value = []
+ }
+ } catch (error) {
+ console.error('获取自选数据失败:', error)
+ symbolList.value = []
+ }
+}
+
+// 获取交易数据（activeTab.value 已与接口 type 统一）；pageNo 页码，append 是否追加
+const fetchTradingData = async (pageNo = 1, append = false) => {
+ const type = activeTab.value === 'optional' ? 'forex' : activeTab.value
+ const category = type === 'forex' ? 'forex' : null
+
+ try {
+ const params = {
+ type: type,
+ pageNo: pageNo,
+ pageSize: SYMBOL_PAGE_SIZE
+ }
+ if (category) {
+ params.category = category
+ }
+
+ const data = await _getRealtimeByType(params)
+
+ if (data && Array.isArray(data)) {
+ const symbols = data.map(item => item.symbol).join(',')
+ if (symbols) {
+ const homeData = await _getHomeList(symbols)
+ if (homeData && Array.isArray(homeData)) {
+ if (append) {
+ symbolList.value = [...symbolList.value, ...homeData]
+ } else {
+ symbolList.value = homeData
+ }
+ } else if (!append) {
+ symbolList.value = []
+ }
+ } else if (!append) {
+ symbolList.value = []
+ }
+ if (data.length <= 0) {
+ symbolFinished.value = true
+ }
+ } else {
+ if (!append) symbolList.value = []
+ symbolFinished.value = true
+ }
+ } catch (error) {
+ console.error('获取交易数据失败:', error)
+ if (!append) symbolList.value = []
+ symbolFinished.value = true
+ }
+}
+
+// 上拉触底加载更多（仅非自选 tab 分页，pageSize=10）
+const loadMoreSymbols = async () => {
+ if (activeTab.value === 'optional') {
+ symbolFinished.value = true
+ symbolLoading.value = false
+ return
+ }
+ if (symbolInitialLoading.value) {
+ symbolLoading.value = false
+ return
+ }
+ // if (symbolLoading.value || symbolFinished.value) return
+ // symbolLoading.value = true
+ try {
+ await fetchTradingData(symbolPage.value, true)
+ symbolPage.value += 1
+ } finally {
+ symbolLoading.value = false
+ }
+}
+
+// 获取数据
+const fetchData = async () => {
+ symbolPage.value = 1
+ symbolFinished.value = false
+ symbolInitialLoading.value = true
+ try {
+ if (activeTab.value === 'optional') {
+ await fetchOptionalData()
+ symbolFinished.value = true
+ } else {
+ await fetchTradingData(1, false)
+ symbolPage.value = 2
+ }
+ // tab 切换后列表滚动回顶部
+ await nextTick()
+ if (symbolListRef.value) symbolListRef.value.scrollTop = 0
+ } finally {
+ symbolInitialLoading.value = false
+ }
+}
+
+// 过滤列表
+const filteredList = computed(() => {
+ if (!searchKeyword.value) {
+ return symbolList.value
+ }
+ const keyword = searchKeyword.value.toLowerCase()
+ return symbolList.value.filter(item =>
+ item.symbol.toLowerCase().includes(keyword) ||
+ (item.name && item.name.toLowerCase().includes(keyword))
+ )
+})
+
+// 选择交易对
+const selectSymbol = (item) => {
+ currentSymbol.value = item.symbol
+ showSymbolModal.value = false
+ searchKeyword.value = ''
+}
+
+// 查询当前交易对是否已收藏（与 add-currency / trade-head 一致）
+function checkFavorite() {
+ if (!useStore.userInfo?.token || !currentSymbol.value) {
+ isFavorite.value = false
+ return
+ }
+ _isItemHasAddGlobal({ symbol: currentSymbol.value }).then((data) => {
+ isFavorite.value = !!data
+ }).catch(() => {
+ isFavorite.value = false
+ })
+}
+
+// 切换收藏：与 add-currency 一致，使用 _collect / _deleteCollect（默认自选列表）
+async function toggleFavorite() {
+ if (!currentSymbol.value) return
+ if (!useStore.userInfo?.token) {
+ showToast(t('请先登录'))
+ return
+ }
+ try {
+ if (isFavorite.value) {
+ await _deleteCollect(currentSymbol.value)
+ isFavorite.value = false
+ showToast(t('successfullyDeleted'))
+ } else {
+ await _collect(currentSymbol.value)
+ isFavorite.value = true
+ showToast(t('添加成功'))
+ }
+ } catch (e) {
+ showToast(e?.msg || t('操作失败'))
+ }
+}
+
+// 监听 tab 切换
+watch(activeTab, () => {
+ fetchData()
+})
+
+// 当前交易对变化时刷新收藏状态
+watch(currentSymbol, () => {
+ checkFavorite()
+})
+
+// 监听路由 query 变化（同一页带不同 query 时同步）
+watch(() => route.query, () => applyFromRoute(), { deep: true })
+
+// 组件挂载时：先从 path/query 取 symbol、activeTab，再拉数据并刷新收藏状态
+onMounted(() => {
+ applyFromRoute()
+ fetchData()
+ checkFavorite()
+})
+</script>
+
+<style lang="scss" scoped>
+.options-trade-page {
+ min-height: 100vh;
+ background: #fff;
+}
+
+/* Header */
+.trade-header {
+ padding: 2rem;
+ background: #fff;
+ border-bottom: 0.1rem solid #f0f0f0;
+
+ .header-tabs {
+ display: flex;
+ background: #fff;
+ border: 0.1rem solid #e0e0e0;
+ border-radius: 1.2rem;
+ padding: 0.4rem;
+ gap: 0.2rem;
+
+ .tab-btn {
+ flex: 1;
+ padding: 1rem 2rem;
+ font-size: 2rem;
+ border: none;
+ border-radius: 0.8rem;
+ background: transparent;
+ color: $text_color;
+ cursor: pointer;
+ transition: all 0.3s ease;
+
+ &.active {
+ background: #0a6bfa;
+ color: #fff;
+ font-weight: 600;
+ }
+ }
+ }
+
+ .symbol-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1rem;
+ margin-top: 2.5rem;
+ }
+
+ .symbol-selector {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ cursor: pointer;
+
+ .symbol-text {
+ font-size: 4rem;
+ color: $text_color;
+ }
+
+ .down-icon {
+ width: 2rem;
+ margin-left: .5rem;
+ }
+ }
+
+ .favorite-icon {
+ width: 2.4rem;
+ height: 2.4rem;
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+}
+
+/* Trade Content */
+.trade-content {
+ padding: 2rem;
+}
+
+/* Symbol Modal */
+.symbol-modal {
+ padding: 2rem 0;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+
+ /* 与 Market.vue 的 market-tabs 样式一致 */
+ .modal-tabs {
+ display: flex;
+ border: 0.1rem solid #e0e0e0;
+ background: #fff;
+ border-radius: 1rem;
+ padding: 0.3rem;
+ overflow-x: auto;
+ gap: 0.3rem;
+ margin-bottom: 2rem;
+ margin-top: 4rem;
+ margin: 4rem 2rem 2rem;
+
+ .tab-item {
+ font-size: 2.5rem;
+ padding: 1.5rem 0;
+ color: $text_color1;
+ white-space: nowrap;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ border-radius: 0.8rem;
+ flex: 1;
+ text-align: center;
+ font-weight: 500;
+
+ &.active {
+ color: #fff;
+ background: #0a6bfa;
+ border-color: #0a6bfa;
+ font-weight: 600;
+ padding: 1.5rem 2rem;
+ }
+ }
+ }
+
+ .search-bar {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ padding: 1.5rem;
+ background: #fff;
+ border-radius: 1rem;
+ margin: 0 2rem 2rem;
+ border: 1px solid #000;
+
+ .search-icon {
+ width: 2rem;
+ height: 2rem;
+ }
+
+ .search-input {
+ flex: 1;
+ border: none;
+ background: transparent;
+ font-size: 2.4rem;
+ color: $text_color;
+ outline: none;
+
+ &::placeholder {
+ color: $text_color1;
+ }
+ }
+ }
+
+ .symbol-list {
+ flex: 1;
+ overflow-y: auto;
+ padding: 2rem 2rem 0;
+
+ .symbol-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 2rem 1rem;
+ background: #fff;
+ border-radius: 1.5rem;
+ border: 0.1rem solid #f0f0f0;
+ margin-bottom: 1rem;
+ cursor: pointer;
+ transition: background 0.2s ease;
+ box-shadow: 0rem .24rem 1.7rem 0rem rgba(0, 0, 0, .22);
+ font-size: 2rem;
+
+ &:hover {
+ background: #f9f9f9;
+ }
+
+ .symbol-left {
+ display: flex;
+ align-items: center;
+ gap: 1.5rem;
+ width: 33%;
+
+ .symbol-icon {
+ width: 4rem;
+ height: 4rem;
+ border-radius: 50%;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #f5f5f5;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+
+ .symbol-info {
+ .symbol-name {
+ font-weight: 600;
+ color: $text_color;
+ }
+ }
+ }
+
+
+ .symbol-change {
+ font-weight: 600;
+
+ &.up {
+ color: $green;
+ }
+
+ &.down {
+ color: $red;
+ }
+ }
+
+ .symbol-price {
+ font-weight: 600;
+ color: $text_color;
+ width: 33%;
+ text-align: right;
+ }
+ }
+ }
+}
+</style>
diff --git a/src/views/trade/components/OptionsContract.vue b/src/views/trade/components/OptionsContract.vue
new file mode 100644
index 0000000..5fef394
--- /dev/null
+++ b/src/views/trade/components/OptionsContract.vue
@@ -0,0 +1,982 @@
+<template>
+ <div class="options-contract no_touch">
+ <div :key="symbol" v-if="symbol">
+ <p class="status-info" v-if="type !== 'cryptos' && 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">
+ <div class="flex-l">
+ <p class="first-line red">{{ chartData?.close ?? '--' }}</p>
+ <p class="second-line">
+ <span class="red">{{ chartData?.netChange }}</span>
+ <span class="red">{{ `${chartData?.change_ratio}%` }}</span>
+ </p>
+ </div>
+ <div class="flex-r">
+ <div class="flex-r-item">
+ <p><span class="label">{{ $t('high') }}</span><span class="value">{{ chartData?.high ?? '--' }}</span></p>
+ <p><span class="label">{{ $t('Low') }}</span><span class="value">{{ chartData?.low ?? '--' }}</span></p>
+ <p><span class="label">{{ $t('open') }}</span><span class="value">{{ chartData?.open ?? '--' }}</span></p>
+ </div>
+ <div class="flex-r-item">
+ <p><span class="label">{{ $t('marketValue') }}</span><span class="value">{{ chartData?.marketCapital ?? '--' }}</span></p>
+ <p><span class="label">{{ $t('share') }}</span><span class="value">{{ chartData?.open ?? '--' }}</span></p>
+ <p><span class="label">{{ $t('amplitude') }}</span><span class="value">{{ chartData?.changeRatio ?? '--' }}</span></p>
+ </div>
+ <div class="flex-r-item">
+ <p><span class="label">{{ $t('quantity') }}</span><span class="value">{{ chartData?.volume ?? '--' }}</span></p>
+ <p><span class="label">{{ $t('Change') }}</span><span class="value">{{ chartData?.turnoverRate ?? '--' }}</span></p>
+ <p><span class="label">{{ $t('Forehead') }}</span><span class="value">{{ chartData?.volume ?? '--' }}</span></p>
+ </div>
+ </div>
+ </section>
+ <div class="mainBackground rounded-view">
+ <PerpetualOpen class="pl-8 pr-8" :key="keyIndex + 'a'" :selectIndex="selectIndex" :symbol="symbol"
+ :query-type-prop="type" :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" />
+ <div class="line"></div>
+ <PerpetualOrder class="pl-8 pr-8" :key="keyIndex + 'b'" :symbol="symbol" :order-cur="orderCur"
+ :order-hold="orderHold" :topIndex="selectIndex" :futrue-hold="futrueHold" :futrue-histroy="futrueHistroy"
+ @tab="onTab" @recall="onRecall" />
+ </div>
+ </div>
+
+ <!-- 交割：图1样式 -->
+ <div :class="{ slide1: animated2 }" class="delivery-section" v-else>
+ <!-- 开收高低 % -->
+ <div class="delivery-chart-header">
+ <div class="delivery-ohlc">
+ <span class="delivery-pct" :class="(chartData?.change_ratio || 0) >= 0 ? 'up' : 'down'">{{ chartData?.close || '--' }}{{
+ chartData?.change_ratio != null ? ` ${chartData.change_ratio}%` : ' --' }}</span>
+ <div class="delivery-ohlc-grid">
+ <div class="delivery-ohlc-row">
+ <span class="label">{{ $t('开') }}</span>
+ <span class="val">{{ chartData?.open || '--' }}</span>
+ <span class="label">{{ $t('收') }}</span>
+ <span class="val">{{ chartData?.close || '--' }}</span>
+ </div>
+ <div class="delivery-ohlc-row">
+ <span class="label">{{ $t('高') }}</span>
+ <span class="val">{{ chartData?.high || '--' }}</span>
+ <span class="label">{{ $t('低') }}</span>
+ <span class="val">{{ chartData?.low || '--' }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- K 线图 -->
+ <div class="delivery-kline-wrap">
+ <k-line-charts v-if="symbol" :update-key="updateKey" :update-data="quote" :symbol="symbol"
+ :showBottom="true" />
+ </div>
+ <!-- 交割 持仓/历史持仓：与永续合约委托区一致样式（修改图一之前） -->
+ <div class="delivery-order-wrap items-center mt-4">
+ <div class="flex justify-between border-b-color">
+ <div class="flex">
+ <div class="px-2 py-2 flex items-center textColor1 text-28" @click="onDeliveryTab('hold')"
+ :class="deliveryPositionTab === 'hold' ? 'active-line' : ''">{{ $t('持有仓位') }}<span
+ v-if="deliveryPositionTab === 'hold'">({{ futrueHold.length }})</span></div>
+ <div class="px-2 ml-12 py-2 flex items-center textColor1 text-28" @click="onDeliveryTab('history')"
+ :class="deliveryPositionTab === 'history' ? 'active-line' : ''">{{ $t('历史仓位') }}</div>
+ </div>
+ <img src="@/assets/image/public/record.png" alt="record-img" class="w-16 h-9 pr-8 record-img"
+ @click="goDeliveryHistory" />
+ </div>
+ <template v-if="deliveryPositionTab === 'hold'">
+ <futrue-hold-list :price="price" :list-data="futrueHold" />
+ <div class="text-grey text-center py-72 text-30" v-if="futrueHold.length === 0">{{ $t('您目前没有持仓') }}</div>
+ </template>
+ <template v-else>
+ <futrue-histroy-position :price="price" :list-data="futrueHistroy" />
+ <div class="text-grey text-center py-72 text-30" v-if="futrueHistroy.length === 0">{{ $t('您目前没有持仓') }}</div>
+ </template>
+ </div>
+ <div class="delivery-actions">
+ <button class="btn-buy btn-up" @click="openOptionsPopup('up')">{{ $t('开多') }}</button>
+ <button class="btn-buy btn-down" @click="openOptionsPopup('down')">{{ $t('开空') }}</button>
+ </div>
+ </div>
+ </div>
+
+ <!-- <div class="fixed-box" v-if="selectIndex === 1">
+ <div class="flex justify-between items-center px-8 py-5" @click.stop="showCharts = !showCharts">
+ <span class="text-30 textColor">
+ {{ type === 'cryptos' ? (symbol_data || symbol).toUpperCase() + '/USDT' : symbol.toUpperCase()
+ }} {{ $t('k线图表') }}
+ </span>
+ <van-icon class="textColor text-28" :name="showCharts ? 'arrow-down' : 'arrow-up'" />
+ </div>
+ <div class="kline-container flex" v-if="showCharts">
+ <div class="chart-index">
+ <k-line-charts v-if="symbol" :update-key="updateKey" :update-data="quote" :symbol="symbol"
+ :showBottom="true" />
+ </div>
+ </div>
+ </div> -->
+
+ <!-- 期权交易弹窗 图2（尺寸放大 1/3） -->
+ <van-popup v-model:show="showOptionsModal" round closeable close-icon-position="top-right">
+ <div class="options-modal">
+ <h2 class="modal-title">{{ $t('期权交易') }}</h2>
+ <div class="modal-symbol">
+ {{ symbolDisplayName != null && symbolDisplayName !== '' ? symbolDisplayName : (type === 'cryptos' ?
+ (symbol_data
+ || symbol) : symbol) || '' }}{{ (symbolDisplayName == null || symbolDisplayName === '') && type === 'cryptos'
+ ?
+ 'USDT' : '' }}
+
+ <span class="pct-badge" :class="(chartData?.change_ratio || 0) >= 0 ? 'up' : 'down'">{{ chartData?.close || '--' }}{{
+ chartData?.change_ratio != null ? ` ${chartData.change_ratio}%` : ' --' }}</span>
+ </div>
+ <div class="modal-section">
+ <div class="section-label">{{ $t('交割时间') }}</div>
+ <div class="period-btns">
+ <button v-for="p in deliveryParaList" :key="p.para_id" class="period-btn"
+ :class="{ active: optionsForm.period === p.para_id }" @click="optionsForm.period = p.para_id">
+ <div>{{ p.time_num }}{{ (p.time_unit || '').substr(0, 1) }}</div>
+ <div>{{ p.profit_ratio }}%</div>
+ </button>
+ </div>
+ </div>
+ <div class="modal-section">
+ <div class="section-label">{{ $t('选择类型') }}</div>
+ <div class="type-btns">
+ <button class="type-btn up" :class="{ active: optionsForm.type === 'up' }"
+ @click="optionsForm.type = 'up'">{{
+ $t('开多') }}</button>
+ <button class="type-btn down" :class="{ active: optionsForm.type === 'down' }"
+ @click="optionsForm.type = 'down'">{{ $t('开空') }}</button>
+ </div>
+ </div>
+ <div class="modal-section">
+ <van-field v-model="optionsForm.qty" type="number" :placeholder="qtyPlaceholder" />
+ </div>
+ <div class="modal-available">
+ {{ $t('可用') }}: <strong>{{ availableBalance }}</strong>
+ </div>
+ <button class="modal-submit" @click="confirmOptionsOrder">{{ $t('确认下单') }}</button>
+ </div>
+ </van-popup>
+
+ <!-- 交割订单详情弹窗（与永续交割下单后一致） -->
+ <van-popup v-model:show="showDeliveryDetailPopup" round position="bottom">
+ <popup-delivery v-if="deliveryOrderDetail.order_no" showBtns :price="price" :detail-data="deliveryOrderDetail"
+ :key="deliveryOrderDetail.order_no" @close="showDeliveryDetailPopup = false" />
+ </van-popup>
+ </div>
+</template>
+
+<script>
+import PerpetualOpen from '@/components/Transform/perpetual-open/index.vue'
+import PerpetualOrder from '@/components/Transform/perpetual-order/index.vue'
+import KLineCharts from '@/components/Transform/kline-charts/index.vue'
+import futrueHoldList from '@/components/Transform/deliveryContract/hold.vue'
+import futrueHistroyPosition from '@/components/Transform/deliveryContract/position.vue'
+import PopupDelivery from '@/components/Transform/popup-delivery/index.vue'
+import { Icon, showToast } from 'vant'
+import { mapActions, mapGetters } from 'vuex'
+import { SET_COIN_LIST } from '@/store/const.store'
+import { _getDeepData, _initOpen, _initClose, _futrueOrderInit, _futrueOrder, _futrueOrderDetail, _contractApplyOrderList, contractOrder, _futrueOrderList } from '@/service/trade.api'
+import { _getBalance } from '@/service/user.api'
+import { _getHomeList } from '@/service/home.api'
+import { WS_URL } from '@/config'
+
+const SHOW_LENGTH = 7
+
+function initDepthArr(len = SHOW_LENGTH) {
+ const arr = []
+ for (let i = 0; i < len; i++) arr.push({ amount: '--', price: '--' })
+ return arr
+}
+
+export default {
+ name: 'OptionsContract',
+ components: { PerpetualOpen, PerpetualOrder, KLineCharts, futrueHoldList, futrueHistroyPosition, PopupDelivery, [Icon.name]: Icon },
+ props: {
+ symbol: { type: String, default: '' },
+ symbolDisplayName: { type: String, default: '' },
+ selectIndex: { type: Number, default: 1 },
+ type: { type: String, default: 'cryptos' }
+ },
+ data() {
+ return {
+ _lastSymbol: '',
+ quote: {},
+ keyIndex: 0,
+ price: '',
+ initOpen: {},
+ initClose: {},
+ asks: initDepthArr(),
+ bids: initDepthArr(),
+ orderCur: [],
+ orderHold: [],
+ futrueHold: [],
+ futrueHistroy: [],
+ curTab: 'fetchOrderListHold',
+ initFutrue: {},
+ animated1: false,
+ animated2: false,
+ currentType: 'long',
+ showCharts: false,
+ chartData: {},
+ showMore: false,
+ updateKey: 1,
+ symbolName: '',
+ symbol_data: '',
+ timer: null,
+ timer1: null,
+ timerMoeny: null,
+ initFunTimer1: null,
+ initFunTimer2: null,
+ sockets: { quotes: null, deep: null },
+ deliveryPeriod: '1m',
+ deliveryTimeTabs: [
+ { id: '1m', text: '1分' },
+ { id: '5m', text: '5分' },
+ { id: '15m', text: '15分' },
+ { id: '30m', text: '30分' },
+ { id: '1h', text: '1时' },
+ { id: '1d', text: '1天' },
+ { id: '1w', text: '1周' }
+ ],
+ deliveryPositionTab: 'hold',
+ showOptionsModal: false,
+ optionsForm: { period: '', type: 'up', qty: '' },
+ deliveryOrderDetail: {},
+ showDeliveryDetailPopup: false
+ }
+ },
+ computed: {
+ ...mapGetters('user', ['userInfo']),
+ ...mapGetters({ coinList: 'home/coinList' }),
+ availableBalance() {
+ return this.userInfo?.balance ?? this.initFutrue?.amount ?? 0
+ },
+ // 交割时间列表（与 PerpetualContract/contract-futrue 一致，来自 initFutrue.para）
+ deliveryParaList() {
+ const para = this.initFutrue && this.initFutrue.para
+ return Array.isArray(para) ? para : []
+ },
+ // 当前选中的交割周期（用于 placeholder 最小金额、下单校验）
+ selectedDeliveryPara() {
+ const id = this.optionsForm.period
+ if (!id) return null
+ return this.deliveryParaList.find(p => p.para_id === id) || null
+ },
+ // 数量占位文案（与 perpetual-open 一致：最少 + 最小金额 + buy_min）
+ qtyPlaceholder() {
+ const para = this.selectedDeliveryPara
+ if (para && para.buy_min != null && para.buy_min !== '') {
+ return (this.$t('最少') || '最少') + (this.$t('最小金额') || '最小金额') + para.buy_min
+ }
+ return this.$t('数量') || '数量'
+ }
+ },
+ watch: {
+ // 交割周期列表有数据时默认选中第一项
+ deliveryParaList(list) {
+ if (list && list.length > 0) {
+ const current = this.optionsForm.period
+ const found = current && list.some(p => p.para_id === current)
+ if (!found) this.optionsForm.period = list[0].para_id
+ }
+ },
+ symbol(val) {
+ if (val && val !== this._lastSymbol) {
+ this._lastSymbol = val
+ this.closeSocket()
+ this.init(val)
+ }
+ },
+ selectIndex(val) {
+ const idx = val ?? 1
+ this.curTab = idx === 2 ? 'fetchFutrueHoldList' : 'fetchOrderListHold'
+ this.clearTimer()
+ if (this.symbol) this[this.curTab](this.symbol)
+ },
+ type(val) {
+ if (val) this.SET_COIN_LIST(val)
+ }
+ },
+ async created() {
+ const type = this.type || 'cryptos'
+ await this.SET_COIN_LIST(type)
+ this._lastSymbol = this.symbol
+ this.curTab = (this.selectIndex ?? 1) === 2 ? 'fetchFutrueHoldList' : 'fetchOrderListHold'
+ if (this.userInfo && this.userInfo.token) {
+ this.getBalance()
+ this.timerMoeny = setInterval(() => this.getBalance(), 3000)
+ }
+ },
+ mounted() {
+ if (this.symbol) this.$nextTick(() => this.init(this.symbol))
+ },
+ beforeUnmount() {
+ this.closeSocket()
+ this.clearTimer()
+ if (this.timerMoeny) {
+ clearInterval(this.timerMoeny)
+ this.timerMoeny = null
+ }
+ },
+ methods: {
+ ...mapActions('home', [SET_COIN_LIST]),
+ getBalance() {
+ _getBalance().then(data => {
+ this.$store.commit('user/SET_USERINFO', { balance: data.money })
+ this.initFutrue.amount = data.money
+ })
+ },
+ changeCurrentType(type) {
+ this.currentType = type
+ },
+ changeValueBack(val) {
+ // 可扩展：切换深度条数时更新 showLength
+ },
+ onRecall() {
+ this.clearTimer()
+ const symbolType = this.type || 'cryptos'
+ contractOrder({ symbol: this.symbol, type: 'orders', page_no: 1, symbolType }).then(data => {
+ this.orderHold = (data || []).sort(this.sortData)
+ })
+ this[this.curTab](this.symbol)
+ _initOpen({ symbol: this.symbol }).then(data => { this.initOpen = data })
+ },
+ onDeliveryTab(tab) {
+ this.deliveryPositionTab = tab
+ if (tab === 'hold') this.fetchFutrueHoldList(this.symbol)
+ else this.fetchFutrueHistory(this.symbol)
+ },
+ goDeliveryHistory() {
+ if (this.userInfo && this.userInfo.token) {
+ const type = this.type || 'cryptos'
+ this.$router.push({ path: '/cryptos/deliveryContractHistory', query: { symbol: this.symbol, type } })
+ } else {
+ this.$router.push('/login')
+ }
+ },
+ onTab(evt) {
+ this.clearTimer()
+ this.curTab = evt
+ this[evt](this.symbol)
+ },
+ onOrdered(evt) {
+ this.clearTimer()
+ this.initParam(this.symbol, evt)
+ this[this.curTab](this.symbol)
+ },
+ fetchQoutes(symbol) {
+ _getHomeList(symbol).then(data => {
+ if (data && data[0]) {
+ this.symbolName = data[0].name
+ this.symbol_data = (data[0].symbol_data || '').trim() || symbol
+ this.handleQoutes(data)
+ this.startQuoteSocket()
+ }
+ })
+ },
+ handleQoutes(data) {
+ if (data && data.length) {
+ const cur = data[0]
+ this.price = cur.close
+ this.quote = cur
+ this.chartData = cur
+ this.updateKey++
+ }
+ },
+ fetchDeepData(symbol) {
+ _getDeepData(symbol).then(data => {
+ this.handleDeep(data)
+ this.startDeepSocket()
+ })
+ },
+ handleDeep(data) {
+ if (!data || !data.asks || !data.bids) return
+ const { asks, bids } = data
+ this.asks = asks.sort((a, b) => b.price - a.price).slice(0, SHOW_LENGTH)
+ this.bids = bids.sort((a, b) => b.price - a.price).slice(0, SHOW_LENGTH)
+ },
+ startQuoteSocket() {
+ if (this.sockets.quotes) return
+ this.sockets.quotes = new WebSocket(`${WS_URL}/1/${this.symbol}`)
+ this.sockets.quotes.onmessage = (evt) => {
+ try {
+ const { code, data: _data } = JSON.parse(evt.data)
+ if (code == 0 && _data) {
+ this.handleQoutes(_data)
+ this.chartData = _data[0] ?? {}
+ }
+ } catch (_) { }
+ }
+ },
+ startDeepSocket() {
+ if (this.sockets.deep) return
+ this.sockets.deep = new WebSocket(`${WS_URL}/3/${this.symbol}`)
+ this.sockets.deep.onmessage = (evt) => {
+ try {
+ const { code, data: _data } = JSON.parse(evt.data)
+ if (code == 0 && _data) {
+ this.handleDeep(_data)
+ }
+ } catch (_) { }
+ }
+ },
+ initParam(symbol, type) {
+ if (type === 'open' || type === 'long' || type === 'short' || !type) {
+ const initFun = () => {
+ _initOpen({ symbol }).then(data => {
+ this.initOpen = data
+ if (this.initFunTimer1) { clearTimeout(this.initFunTimer1); this.initFunTimer1 = null }
+ }).catch(() => {
+ this.initFunTimer1 = setTimeout(initFun, 1000)
+ })
+ }
+ initFun()
+ }
+ if (type === 'close' || !type) {
+ const initFun = () => {
+ _initClose({ symbol }).then(data => {
+ this.initClose = data
+ if (this.initFunTimer2) { clearTimeout(this.initFunTimer2); this.initFunTimer2 = null }
+ }).catch(() => {
+ this.initFunTimer2 = setTimeout(initFun, 1000)
+ })
+ }
+ this.initFunTimer2 = setTimeout(initFun, 600)
+ }
+ if (type === 'futrue' || !type) {
+ _futrueOrderInit(symbol).then(data => { this.initFutrue = data || {} })
+ }
+ },
+ fetchOrderListCur(symbol) {
+ if (!this.userInfo || !this.userInfo.token) return
+ const params = { symbol, type: 'orders', page_no: 1 }
+ _contractApplyOrderList(params).then(data => { this.orderCur = data || [] })
+ this.clearTimer()
+ this.timer = setInterval(() => {
+ _contractApplyOrderList(params).then(data => { this.orderCur = data || [] })
+ }, 1000)
+ },
+ fetchOrderListHold(symbol) {
+ if (!this.userInfo || !this.userInfo.token) return
+ const symbolType = this.type || 'cryptos'
+ const obj = { symbol, type: 'orders', page_no: 1, symbolType }
+ contractOrder(obj).then(data => {
+ this.orderHold = (data || []).sort(this.sortData)
+ })
+ this.clearTimer()
+ this.timer = setInterval(() => {
+ contractOrder(obj).then(data => {
+ this.orderHold = (data || []).sort(this.sortData)
+ })
+ }, 1000)
+ },
+ fetchFutrueHoldList(symbol) {
+ if (!this.userInfo || !this.userInfo.token) return
+ const symbolType = this.type || 'cryptos'
+ _futrueOrderList(symbol, 'orders', 1, symbolType).then(data => {
+ this.futrueHold = (data || []).sort(this.sortData)
+ })
+ this.clearTimer()
+ this.timer = setInterval(() => {
+ _futrueOrderList(symbol, 'orders', 1, symbolType).then(data => {
+ this.futrueHold = (data || []).sort(this.sortData)
+ })
+ }, 1000)
+ },
+ fetchFutrueHistory(symbol) {
+ const symbolType = this.type || 'cryptos'
+ _futrueOrderList(symbol, 'hisorders', 1, symbolType).then(data => {
+ this.futrueHistroy = data || []
+ })
+ },
+ init(symbol) {
+ if (!symbol) return
+ this.fetchQoutes(symbol)
+ this.fetchDeepData(symbol)
+ this.initParam(symbol)
+ this.clearTimer()
+ if (this.curTab === 'fetchOrderListHold') {
+ this.fetchOrderListHold(symbol)
+ } else {
+ this.fetchFutrueHoldList(symbol)
+ }
+ },
+ closeSocket() {
+ if (this.sockets.quotes) { this.sockets.quotes.close(); this.sockets.quotes = null }
+ if (this.sockets.deep) { this.sockets.deep.close(); this.sockets.deep = null }
+ },
+ clearTimer() {
+ if (this.initFunTimer1) { clearTimeout(this.initFunTimer1); this.initFunTimer1 = null }
+ if (this.initFunTimer2) { clearTimeout(this.initFunTimer2); this.initFunTimer2 = null }
+ if (this.timer) { clearInterval(this.timer); this.timer = null }
+ },
+ sortData(a, b) {
+ return new Date(b.open_time).getTime() - new Date(a.open_time).getTime()
+ },
+ openOptionsPopup(type) {
+ this.optionsForm.type = type
+ if (this.deliveryParaList.length && !this.optionsForm.period) {
+ this.optionsForm.period = this.deliveryParaList[0].para_id
+ }
+ this.showOptionsModal = true
+ },
+ confirmOptionsOrder() {
+ if (!this.userInfo || !this.userInfo.token) {
+ this.$router.push('/login')
+ return
+ }
+ const amount = (this.optionsForm.qty || '').toString().trim()
+ if (!amount || Number(amount) <= 0) {
+ showToast(this.$t('请输入金额') || '请输入金额')
+ return
+ }
+ const para = this.selectedDeliveryPara
+ const buyMin = para && para.buy_min != null && para.buy_min !== '' ? Number(para.buy_min) : 0
+ if (buyMin > 0 && Number(amount) < buyMin) {
+ showToast((this.$t('最少') || '最少') + (this.$t('最小金额') || '最小金额') + buyMin)
+ return
+ }
+ const para_id = (this.optionsForm.period || '').toString().trim()
+ if (!para_id) {
+ showToast(this.$t('请选择有效周期') || '请选择有效周期')
+ return
+ }
+ const doOrder = (sessionToken) => {
+ _futrueOrder({
+ symbol: this.symbol,
+ session_token: sessionToken,
+ direction: this.optionsForm.type === 'up' ? 'buy' : 'sell',
+ amount,
+ para_id
+ }).then((res) => {
+ showToast(this.$t('操作成功') || '操作成功')
+ this.showOptionsModal = false
+ this.optionsForm.qty = ''
+ _getBalance().then(data => {
+ this.$store.commit('user/SET_USERINFO', { balance: data.money })
+ })
+ this.initParam(this.symbol, 'futrue')
+ this.fetchFutrueHoldList(this.symbol)
+ if (res && res.order_no) {
+ _futrueOrderDetail(res.order_no).then(data => {
+ this.deliveryOrderDetail = data
+ this.showDeliveryDetailPopup = true
+ })
+ }
+ }).catch((err) => {
+ if (err && err.code === 'ECONNABORTED') {
+ showToast(this.$t('网络超时！') || '网络超时！')
+ } else if (err && err.msg) {
+ showToast(err.msg)
+ }
+ })
+ }
+ const session_token = this.initFutrue.session_token
+ if (!session_token) {
+ _futrueOrderInit(this.symbol).then(data => {
+ this.initFutrue = { ...this.initFutrue, ...(data || {}) }
+ doOrder(data && data.session_token)
+ }).catch(() => {
+ doOrder()
+ })
+ } else {
+ doOrder(session_token)
+ }
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/css/variable.scss';
+
+.options-contract {
+ min-height: 12.5rem;
+ -webkit-user-select: none;
+ user-select: none;
+ padding-bottom: 18rem;
+}
+
+.status-info {
+ margin-top: 1.25rem;
+ padding: 0 1.875rem;
+ font-size: 1.5rem;
+ line-height: 4rem;
+ height: 4rem;
+ border-top: 0.0625rem solid $border_color;
+ border-bottom: 0.0625rem solid $border_color;
+
+ .time {
+ width: 13.75rem;
+ display: inline-block;
+ }
+}
+
+.rounded-view {
+ border-top-left-radius: 1.25rem;
+ border-top-right-radius: 1.25rem;
+ box-sizing: border-box;
+}
+
+.line {
+ height: 0.8125rem;
+ background: $tab_background;
+}
+
+@keyframes animate1 {
+ 0% {
+ opacity: 1;
+ transform: translate3d(100%, 0, 0);
+ }
+
+ 100% {
+ opacity: 1;
+ transform: translate3d(0%, 0, 0);
+ }
+}
+
+@keyframes animate2 {
+ 0% {
+ opacity: 1;
+ transform: translate3d(-100%, 0, 0);
+ }
+
+ 100% {
+ opacity: 1;
+ transform: translate3d(0%, 0, 0);
+ }
+}
+
+.slide1 {
+ animation: animate1 200ms linear;
+}
+
+.slide2 {
+ animation: animate2 200ms linear;
+}
+
+.value-container {
+ padding: 0.625rem 0.75rem;
+ margin-top: 0.25rem;
+ display: flex;
+ justify-content: space-between;
+ font-size: 0.75rem;
+ color: #747A8F;
+ border-bottom: 0.0625rem solid $border_color;
+
+ .flex-l {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ width: 15rem;
+
+ .first-line {
+ font-weight: 700;
+ font-size: 2rem;
+ color: $red;
+ }
+
+ .second-line {
+ margin-top: 0.5rem;
+ text-align: left;
+ }
+ }
+
+ .flex-r {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ color: $text_color;
+ }
+
+ .flex-r-item {
+ flex: 1;
+
+ .label {
+ color: $lable_color;
+ margin-right: 0.625rem;
+ }
+ }
+}
+
+.fixed-box {
+ position: fixed;
+ width: 100%;
+ bottom: 0;
+ left: 0;
+ z-index: 1000;
+ background: $tab_background;
+}
+
+.kline-container {
+ margin-top: 0.625rem;
+
+ .chart-index {
+ flex: 1;
+ min-width: 12.5rem;
+ }
+}
+
+/* 交割 图1（尺寸缩小 1/4） */
+.delivery-section {
+ padding-bottom: 4.6875rem;
+ background: $tab_background;
+}
+
+.delivery-chart-header {
+ padding: 0.5625rem 0.75rem;
+ background: #fff;
+ border-bottom: 0.0625rem solid $border_color;
+}
+
+.delivery-ohlc {
+ display: flex;
+ align-items: flex-start;
+ gap: 0.5625rem;
+
+ .delivery-pct {
+ font-size: 2.2rem;
+ font-weight: 700;
+ width: 40%;
+
+ &.up {
+ color: $green;
+ }
+
+ &.down {
+ color: $red;
+ }
+ }
+
+ .delivery-ohlc-grid {
+ font-size: 2rem;
+ color: $text_color;
+ width: 66%;
+
+ .delivery-ohlc-row {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ margin-bottom: 0.1875rem;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ .label {
+ color: $lable_color;
+ margin-right: 0.25rem;
+ }
+
+ .val {
+ margin-right: 4rem;
+ }
+ }
+}
+
+.delivery-kline-wrap {
+ background: #fff;
+ margin-top: 0.125rem;
+ min-height: 15rem;
+
+ .kline-charts {
+ min-height: 15rem;
+ }
+}
+
+/* 交割 持仓/历史持仓：与 PerpetualOrder 一致样式（尺寸放大一倍） */
+.delivery-order-wrap {
+ background-color: $main_background;
+ padding: 0 1rem 1rem;
+ box-sizing: border-box;
+
+ .active-line {
+ position: relative;
+ color: $white !important;
+ border-radius: 1rem;
+ background-color: $color_main;
+ }
+
+ .record-img {
+ margin-top: 1.25rem;
+ }
+
+ .textColor1 {
+ color: $text_color;
+ }
+}
+
+.delivery-actions {
+ position: fixed;
+ bottom: 12rem;
+ left: 0;
+ right: 0;
+ display: flex;
+ justify-content: space-between;
+ gap: 2rem;
+ padding: 1rem 3rem;
+ background: #fff;
+ border-top: 0.0625rem solid $border_color;
+ z-index: 100;
+
+ .btn-buy {
+ flex: 1;
+ height: 7rem;
+ font-size: 2.2rem;
+ font-weight: 600;
+ color: #fff;
+ border: none;
+ border-radius: 0.5625rem;
+
+ &.btn-up {
+ background: $green;
+ }
+
+ &.btn-down {
+ background: $red;
+ }
+ }
+}
+
+/* 期权弹窗 图2（尺寸放大 1/3） */
+.options-modal {
+ padding: 1.5rem;
+ padding-top: 3rem;
+
+ .modal-title {
+ font-size: 2.4rem;
+ font-weight: 700;
+ color: $text_color;
+ padding-bottom: 1rem;
+ margin-bottom: 2rem;
+ border-bottom: 1px solid $border_color;
+ }
+
+ .modal-symbol {
+ font-size: 2.8rem;
+ font-weight: 700;
+ color: $text_color;
+ margin-bottom: 1.5rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .pct-badge {
+ display: inline-block;
+ margin-left: 0.5rem;
+ padding: 0.167rem 0.5rem;
+ font-size: 2.8rem;
+ color: #fff;
+ border-radius: 0.25rem;
+
+ &.up {
+ color: $green;
+ }
+
+ &.down {
+ color: $red;
+ }
+ }
+ }
+
+ .modal-section {
+ margin-bottom: 1.5rem;
+
+ .section-label {
+ font-size: 2rem;
+ color: $text_color;
+ margin-bottom: 2rem;
+ }
+
+ .period-btns {
+ display: flex;
+ flex-wrap: nowrap;
+ gap: 1rem;
+ overflow-x: auto;
+ overflow-y: hidden;
+ -webkit-overflow-scrolling: touch;
+ padding-bottom: 0.25rem;
+
+ &::-webkit-scrollbar {
+ height: 0.2rem;
+ }
+ &::-webkit-scrollbar-thumb {
+ background: #ddd;
+ border-radius: 0.1rem;
+ }
+
+ .period-btn {
+ flex-shrink: 0;
+ padding: 1.5rem 1.25rem;
+ font-size: 2rem;
+ font-weight: 700;
+ border-radius: 0.5rem;
+ background: #f5f5f5;
+ color: $text_color;
+
+ &.active {
+ background: #0a6bfa;
+ color: #fff;
+ }
+ }
+ }
+
+ .type-btns {
+ display: flex;
+ gap: 1rem;
+
+ .type-btn {
+ flex: 1;
+ padding: 1rem;
+ font-size: 1.75rem;
+ font-weight: 600;
+ border-radius: 0.5rem;
+ border: 0.083rem solid #ddd;
+ background: #fff;
+ color: $text_color;
+
+ &.up.active {
+ background: $green;
+ color: #fff;
+ border-color: $green;
+ }
+
+ &.down.active {
+ background: $red;
+ color: #fff;
+ border-color: $red;
+ }
+ }
+ }
+ }
+
+ .modal-available {
+ font-size: 1.667rem;
+ color: $lable_color;
+ margin-bottom: 1.5rem;
+
+ strong {
+ color: $text_color;
+ }
+ }
+
+ .modal-submit {
+ width: 100%;
+ height: 5.5rem;
+ font-size: 2rem;
+ font-weight: 600;
+ color: #fff;
+ background: #1989fa;
+ border: none;
+ border-radius: 0.75rem;
+ }
+}
+</style>
diff --git a/vite.config.js b/vite.config.js
index a19c14f..8b7c963 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -61,8 +61,8 @@
// 关键：用正则表达式匹配所有含/api的路径（忽略大小写）
'^/api.*': { // 匹配以/api开头的任何路径（如/api、/api/xxx、/api?xx等）
// target: 'http://154.23.189.28:8086',
- target:'https://api.crypt.bond',
- // target:'https://api.crypt.bond',
+ target:'https://api.eledrink.com',
+ // target:'https://api.eledrink.com',
// target: 'https://by2.cccxxx.cc',
changeOrigin: true,
secure: false,
--
Gitblit v1.9.3