From fd66f3c47027795370f363d74f2258491dd38542 Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Fri, 11 Jul 2025 11:56:19 +0800
Subject: [PATCH] Merge branch 'dev6.19' of http://124.156.157.155:8060/r/composite_h5-main into dev6.19
---
src/assets/img/icon-foldline.png | 0
src/views/news/index.vue | 2
src/views/optional/index.vue | 3
src/components/Transform/trade-order-area/index.vue | 20
src/views/cryptos/PerpetualContract/index.vue | 169 ++++
src/views/cryptos/Trade/index.vue | 1646 ++++++++++++++++++++++++++++---------------------
src/components/Transform/trade-head/index.vue | 14
src/components/Transform/kline-charts/index.vue | 6
src/service/trade.api.js | 5
src/assets/img/icon-dollar.png | 0
src/assets/init.scss | 1
src/components/Transform/assetsCenter/overview.vue | 17
yarn.lock | 11
src/config/index.js | 2
src/assets/img/icon-arrow-up.png | 0
src/assets/img/icon-arrow-down.png | 0
src/components/Transform/contract-futrue/index.vue | 6
src/components/Transform/contract-header/index.vue | 17
src/components/Transform/assetsCenter/assets.vue | 19
src/components/Transform/popup-delivery/index.vue | 4
src/components/Transform/perpetual-open/index.vue | 15
src/views/cryptos/Funds/index.vue | 20
22 files changed, 1,182 insertions(+), 795 deletions(-)
diff --git a/src/assets/img/icon-arrow-down.png b/src/assets/img/icon-arrow-down.png
new file mode 100644
index 0000000..d126190
--- /dev/null
+++ b/src/assets/img/icon-arrow-down.png
Binary files differ
diff --git a/src/assets/img/icon-arrow-up.png b/src/assets/img/icon-arrow-up.png
new file mode 100644
index 0000000..7d505f0
--- /dev/null
+++ b/src/assets/img/icon-arrow-up.png
Binary files differ
diff --git a/src/assets/img/icon-dollar.png b/src/assets/img/icon-dollar.png
new file mode 100644
index 0000000..eee15e4
--- /dev/null
+++ b/src/assets/img/icon-dollar.png
Binary files differ
diff --git a/src/assets/img/icon-foldline.png b/src/assets/img/icon-foldline.png
new file mode 100644
index 0000000..9e72746
--- /dev/null
+++ b/src/assets/img/icon-foldline.png
Binary files differ
diff --git a/src/assets/init.scss b/src/assets/init.scss
index 3a67205..66a1231 100644
--- a/src/assets/init.scss
+++ b/src/assets/init.scss
@@ -502,6 +502,7 @@
.rounded-2xl {
border-radius: 16px;
+ // width: 100%;
}
.rounded-full {
diff --git a/src/components/Transform/assetsCenter/assets.vue b/src/components/Transform/assetsCenter/assets.vue
index 7c80dfc..40553a1 100644
--- a/src/components/Transform/assetsCenter/assets.vue
+++ b/src/components/Transform/assetsCenter/assets.vue
@@ -15,32 +15,27 @@
</div>
<div class="font-700 font-66 mt-18 textColor" v-if="!eyetel">
{{ funds.money_all_coin || '--' }}
- <span class="font-40 text-grey">≈{{ currency.currency_symbol
- }}{{
- funds.money_all_coin
- ? Number(funds.money_all_coin * currency.rate).toFixed(2)
- : ' --'
-}}</span>
+
</div>
<div class="font-70 font-66 mt-18 textColor" v-else>********</div>
</div>
<div class="pl-33 pr-33 btn-box flex justify-between">
<div class="text-white font-25 textColor tabBackground" @click="goRouter('/cryptos/recharge/rechargeList')">
<div class="word-wrap">
- <img :src="handImg(`../../../assets/theme/${THEME}/image/assets/up.png`)" alt="" />
- <span> {{ $t('充币') }}</span>
+ <img :src="handImg(`../../../assets/theme/white/image/assets/up.png`)" alt="" />
+ <span style="color: #000;"> {{ $t('充币') }}</span>
</div>
</div>
<div class="text-white font-25 textColor tabBackground" @click="withdrawBtn">
<div class="word-wrap">
- <img :src="handImg(`../../../assets/theme/${THEME}/image/assets/down.png`)" alt="" />
- <span>{{ $t('提币') }}</span>
+ <img :src="handImg(`../../../assets/theme/white/image/assets/down.png`)" alt="" />
+ <span style="color: #000;">{{ $t('提币') }}</span>
</div>
</div>
<div class="text-white font-25 textColor tabBackground" @click="goRouter('/cryptos/exchangePage')">
<div class="word-wrap">
- <img :src="handImg(`../../../assets/theme/${THEME}/image/assets/l_r.png`)" alt="" />
- <span>{{ $t('闪兑') }}</span>
+ <img :src="handImg(`../../../assets/theme/white/image/assets/l_r.png`)" alt="" />
+ <span style="color: #000;">{{ $t('闪兑') }}</span>
</div>
</div>
</div>
diff --git a/src/components/Transform/assetsCenter/overview.vue b/src/components/Transform/assetsCenter/overview.vue
index d9b9cc2..ae49734 100644
--- a/src/components/Transform/assetsCenter/overview.vue
+++ b/src/components/Transform/assetsCenter/overview.vue
@@ -24,20 +24,20 @@
<div class="pl-33 pr-33 btn-box flex justify-between">
<div class="text-white font-25 textColor tabBackground" @click="goRouter('/cryptos/recharge/rechargeList')">
<div class="word-wrap">
- <img :src="handleImage(`../../../assets/theme/dark/image/assets/up.png`)" alt="">
- <span> {{ $t('充币') }}</span>
+ <img :src="handImg(`../../../assets/theme/white/image/assets/up.png`)" alt="" />
+ <span style="color: #000;"> {{ $t('充币') }}</span>
</div>
</div>
<div class="text-white font-25 textColor tabBackground" @click="withdrawBtn">
<div class="word-wrap">
- <img :src="handleImage(`../../../assets/theme/dark/image/assets/down.png`)" alt="">
- <span>{{ $t('提币') }}</span>
+ <img :src="handImg(`../../../assets/theme/white/image/assets/down.png`)" alt="" />
+ <span style="color: #000;">{{ $t('提币') }}</span>
</div>
</div>
<div class="text-white font-25 textColor tabBackground" @click="goRouter('/cryptos/exchangePage')">
<div class="word-wrap">
- <img :src="handleImage(`../../../assets/theme/dark/image/assets/l_r.png`)" alt="">
- <span>{{ $t('闪兑') }}</span>
+ <img :src="handImg(`../../../assets/theme/white/image/assets/l_r.png`)" alt="" />
+ <span style="color: #000;">{{ $t('闪兑') }}</span>
</div>
</div>
</div>
@@ -90,7 +90,7 @@
{ id: 1, text: this.$t('现货账户'), icon: 'spot', key: 'money_all_coin' },
{ id: 2, text: this.$t('合约账户 (U本位)'), icon: 'contract_u', key: 'money_contract' },
{ id: 3, text: this.$t('交割合约账户'), icon: 'contract_d', key: 'money_futures' },
- { id: 4, text: this.$t('理财账户'), icon: 'invest', key: 'money_finance' },
+ // { id: 4, text: this.$t('理财账户'), icon: 'invest', key: 'money_finance' },
{ id: 5, text: this.$t('矿机资产'), icon: 'mining', key: 'money_miner' },
]
},
@@ -100,6 +100,9 @@
// this.getList();
},
methods: {
+ handImg(url) {
+ return new URL(url, import.meta.url).href
+ },
handleImage(url) {
return new URL(url, import.meta.url).href
},
diff --git a/src/components/Transform/contract-futrue/index.vue b/src/components/Transform/contract-futrue/index.vue
index 2383058..7e776a5 100644
--- a/src/components/Transform/contract-futrue/index.vue
+++ b/src/components/Transform/contract-futrue/index.vue
@@ -7,14 +7,14 @@
<!-- initFutrue: {{ initFutrue.para }} -->
<li v-for="(item, index) in initFutrue.para" :key="index"
class="h-92 flex items-center mb-22" @click="onSelect(item, index)">
- <p class="w-95 h-full flex justify-center items-center font-22 flex-1"
+ <p class="w-280 h-full flex justify-center items-center font-22 flex-1"
:class="active === item.para_id ? 'bg-light-blue text-white' : 'delivery_left_tab_background textColor'"
>{{ item.time_num +
item.time_unit.substr(0, 1) }}</p>
- <p class="w-125 h-full flex justify-center items-center font-22 flex-1"
+ <!-- <p class="w-140 h-full flex justify-center items-center font-22 flex-1"
:class="active === item.para_id ? 'bg-dark-blue text-white' : 'delivery_tab_background textColor'"
>{{
- item.profit_ratio }}%</p>
+ item.profit_ratio }}%</p> -->
</li>
</ul>
</div>
diff --git a/src/components/Transform/contract-header/index.vue b/src/components/Transform/contract-header/index.vue
index 28d2b42..6058049 100644
--- a/src/components/Transform/contract-header/index.vue
+++ b/src/components/Transform/contract-header/index.vue
@@ -14,6 +14,8 @@
<div class="pl-10 w-160 font-28" :class="{ 'text-green': range > 0, 'text-red': range <= 0 }">{{ range || '--' }}%</div>
<!-- 右上角小图标 -->
<img src="@/assets/image/kline.png" class="w-44 h-44 right" alt="" @click="klineJump()">
+ <img src="../../../assets/image/public/record.png" alt="record-img" class="w-64 h-35 pr-30 record-img"
+ @click="goHistory" />
</div>
<!-- <div class="flex items-center">
<img src="../../assets/image/public/k-line.png" alt="line-img" class="w-38 h-35"
@@ -144,6 +146,21 @@
}
},
methods: {
+ goHistory() {
+ if (this.$store.state.user.userInfo.token) {
+ let type = 'cryptos'
+ if (this.$route.query.type) {
+ type = this.$route.query.type
+ }
+ const url = this.topIndex / 1 === 1 ? '/cryptos/perpetualHistory' : '/cryptos/deliveryContractHistory'
+ this.$router.push({
+ path: url, query: { symbol: this.symbol, type: type }
+ });
+ } else {
+ this.$router.push('/login')
+ }
+
+ },
onRoute(item) {
if (this.$route.params.symbol !== item.symbol) {
this.$router.push(`/cryptos/perpetualContract/${item.symbol}?selectIndex=${this.selectIndex}`)
diff --git a/src/components/Transform/kline-charts/index.vue b/src/components/Transform/kline-charts/index.vue
index f98f2c3..ca2e157 100644
--- a/src/components/Transform/kline-charts/index.vue
+++ b/src/components/Transform/kline-charts/index.vue
@@ -26,7 +26,7 @@
<van-loading type="spinner"></van-loading>
</div>
</div>
- <ul class="flex px-32 py-20 box-border justify-between text-grey font-26" v-if="showBottom"
+ <!-- <ul class="flex px-32 py-20 box-border justify-between text-grey font-26" v-if="showBottom"
style="border-top:1px solid rgba(68,75,88,0.2);">
<template v-if="!isChange">
<li v-for="item in subTechnicalIndicatorTypes" :key="item" class="mr-20"
@@ -42,7 +42,7 @@
:class="{ 'text-black': typeValue === item }" @click="choiceType(item)">{{ item }}</li>
</template>
</template>
- </ul>
+ </ul> -->
</div>
</div>
</template>
@@ -164,7 +164,7 @@
},
methods: {
initData() {
- this.timeValue = this.timeList[0]
+ this.timeValue = this.timeList[1]
chart = init('kline', config);
chart.setOffsetRightSpace(25)
chart.setDataSpace(10)
diff --git a/src/components/Transform/perpetual-open/index.vue b/src/components/Transform/perpetual-open/index.vue
index 5c53bf9..2f6bb21 100644
--- a/src/components/Transform/perpetual-open/index.vue
+++ b/src/components/Transform/perpetual-open/index.vue
@@ -1,7 +1,7 @@
<template>
<!-- 永续合约开仓页 -->
<div id="cryptos">
- <div class="perpetual-open">
+ <div class="perpetual-open" style="width: 280px;">
<div class="flex pt-34 ">
<div class="w-180 h-60 lh-60 text-center rounded tabBackground textColor">{{ $t('全仓') }} </div>
<div class="w-140 h-60 lh-60 ml-29 rounded tabBackground textColor" v-if="selectIndex / 1 === 1">
@@ -21,7 +21,7 @@
</div>
<div class="pt-30 pb-20">
<div class="flex">
- <div class="w-440 flex flex-col">
+ <div class=" flex flex-col">
<template v-if="selectIndex == 1">
<div class="flex items-center h-66 rounded-lg text-grey">
<p class="font-28 flex-1 flex items-center justify-center h-66 "
@@ -53,7 +53,7 @@
<span class="ml-20">{{ queryType === 'cryptos' ? 'USDT' : 'USD' }}</span>
</div>
- <div class="w-440 flex items-center greyBg h-76 lh-76 rounded-lg" style="background-color:#f5f5f5;" v-if="initFutrue" >
+ <div class=" flex items-center greyBg h-76 lh-76 rounded-lg" style="background-color:#f5f5f5;" v-if="initFutrue" >
<!-- <div v-if="selectIndex == 1 && initFutrue.para && initFutrue.para.length > 0"
class="w-80 flex items-center justify-center" style="height:100%;" @click="onReduce">
<img src="../../../assets/image/public/reduce.png" alt="add" class="w-30 h-6" />
@@ -62,7 +62,7 @@
style="width: 156px;" 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 : '')"
- class="border-none greyBg text-center textColor" style="width: 156px;background-color:#f5f5f5;" v-model="form.amount" type="number"
+ class="border-none greyBg text-center textColor" style="width: 226px;background-color:#f5f5f5;" v-model="form.amount" type="number"
@input="onInput" />
<div class="w-80 flex items-center justify-center" style="height:100%;background-color:#f5f5f5;">
<template v-if="selectIndex == 1">
@@ -198,7 +198,7 @@
@click="$router.push('/login')">{{ $t('logIn') }}</div>
</div>
</div>
- <div class="ml-30">
+ <!-- <div class="ml-30">
<div class="w-290 flex justify-between text-grey font-22">
<div>
<div>{{ $t("价格") }}</div>
@@ -267,7 +267,6 @@
<div class="flex k-select-box">
<div class="mt-22 mb-22 select-box" style="position: relative">
<div class="flex justify-between items-center w-full h-70" @click="selectArryBtn">
- <!-- <img src="@/assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20"/> -->
<div class="pl-16 font-28 textColor" style="width: 80%">
{{ dataArrTitle }}
</div>
@@ -283,11 +282,11 @@
<img src="../../../assets/image/selectIcon.png" alt="warn-icon" class="w-36 h-30 ml-10" />
</div>
</div>
- </div>
+ </div> -->
</div>
</div>
<van-popup v-model:show="show" class="rounded-2xl">
- <popup-delivery showBtns :detailData="detailData" :key="detailData.order_no" @close="onClose"
+ <popup-delivery style="padding: 10px;" showBtns :detailData="detailData" :key="detailData.order_no" @close="onClose"
@continueToBuy="continueTobuy" @timeEnd="handleTimeEnd" :price="price" />
</van-popup>
<van-action-sheet v-model:show="isSelectShow" @select="onSelect" :actions="actions" :cancel-text="$t('取消')"
diff --git a/src/components/Transform/popup-delivery/index.vue b/src/components/Transform/popup-delivery/index.vue
index 657ee0f..011ab84 100644
--- a/src/components/Transform/popup-delivery/index.vue
+++ b/src/components/Transform/popup-delivery/index.vue
@@ -1,9 +1,9 @@
<template>
<div id="cryptos">
- <div class="popup-delivery w-700 font-28 rounded-2xl overflow-hidden">
+ <div class="popup-delivery w-500 font-28 rounded-2xl overflow-hidden" style="padding: 10px;height: 90%;">
<div class="border-b-color pt-54 pb-36 relative textColor">
<h1 class="font-38 px-32">{{ detailData.name }} {{ $t('交割') }}</h1>
- <img src="@/assets/image/icon-close.png" class="w-38 h-38 absolute right-10 top-10" @click="onClose" />
+ <!-- <img src="@/assets/image/icon-close.png" class="w-38 h-38 absolute right-10 top-10" @click="onClose" /> -->
</div>
<div class="flex justify-center mt-45" v-if="!(detailData.state === 'created')">
<!-- {{detailData.time_num}} -->
diff --git a/src/components/Transform/trade-head/index.vue b/src/components/Transform/trade-head/index.vue
index 3c42e03..bc0e79d 100644
--- a/src/components/Transform/trade-head/index.vue
+++ b/src/components/Transform/trade-head/index.vue
@@ -42,6 +42,9 @@
v-if="isCollect" />
<img v-else src="../../../assets/image/icon-star.png" class="w-30 h-30 mr-10 ml-20" @click="openCurrency" />
</div>
+ <img src="../../../assets/image/public/record.png" alt="record-img" class="w-44 h-44 "
+ @click="goHistory" />
+
<img v-if="isTrade" src="../../../assets/image/kline.png" class="w-44 h-44 right" alt=""
@click="$router.push(`/cryptos/trendDetails/${symbol}?kineType=trade`)">
</div>
@@ -223,6 +226,17 @@
}
this.show = false
},
+ goHistory() {
+ if (this.$store.state.user.userInfo.token) {
+ let type = 'cryptos'
+ if (this.$route.query.type) {
+ type = this.$route.query.type
+ }
+ this.$router.push(`/cryptos/tradeRecord/${this.symbol}/?type=${type}`)
+ } else {
+ this.$router.push('/login')
+ }
+ },
async onSidebar() { // 侧边栏打开
// console.log(this.userInfo)
// 优先用本地缓存的 coins
diff --git a/src/components/Transform/trade-order-area/index.vue b/src/components/Transform/trade-order-area/index.vue
index 013aca2..55b5346 100644
--- a/src/components/Transform/trade-order-area/index.vue
+++ b/src/components/Transform/trade-order-area/index.vue
@@ -1,5 +1,5 @@
<template>
- <div class="flex flex-col flex-1 font-28">
+ <div class="flex flex-col flex-1 font-28" style="width: 280px;">
<div class="flex items-center h-66 tabBackground text-grey">
<p class="font-28 flex-1 flex items-center justify-center h-66 buy-item"
:class="currentType == 'open' ? 'open' : ''" @click="changeTab('open')">{{ $t('买入') }}</p>
@@ -30,9 +30,9 @@
<div class="total-div" :class="[!isTotal ? 'active-bg' : '']" @click="checkIsTotal(false)">
{{ $t('数量') }}
</div>
- <div class="total-div" :class="[isTotal ? 'active-bg' : '']" @click="checkIsTotal(true)">
+ <!-- <div class="total-div" :class="[isTotal ? 'active-bg' : '']" @click="checkIsTotal(true)">
{{ $t('总额') }}
- </div>
+ </div> -->
</div>
<div v-if="!isTotal" class="h-70 lh-70 inputBackground mb-36 flex justify-center px-16">
<input :placeholder="$t('数量')" class=" w-full h-70 border-none textColor font-28" v-model="form.volume"
@@ -90,6 +90,7 @@
[Tab.name]: Tab
},
props: {
+
symbol: {
type: String,
default: ''
@@ -166,7 +167,7 @@
order_price_type: 'opponent', // 市价or限价
},
type: "1",//选中市价或限价类型
- currentType: "open", //开仓类型
+ // currentType: "close", //开仓类型
interval: 0.001,
marks: (val) => val % 25 === 0,
isTotal: false,
@@ -180,6 +181,7 @@
]
this.title = this.selectData[0].title
this.type = this.selectData[0].type
+ // this.currentType = this.currentTypes
this.form.order_price_type = 'opponent'
},
methods: {
@@ -470,15 +472,17 @@
}
.open {
- background-color: $green;
- background: url(@/assets/image/public/open-bg.png) no-repeat right center;
+ // background-color: $green;
+ background-color: #2EBD85;
+ // background: url(@/assets/image/public/open-bg.png) no-repeat right center;
background-size: 100% 100%;
color: white;
}
.close {
- background-color: $green;
- background: url(@/assets/image/public/close-bg.png) no-repeat left center;
+ background-color: #DE5D56;
+ // background: url(@/assets/image/public/close-bg.png) no-repeat left center;
+
background-size: 100% 100%;
color: white;
}
diff --git a/src/config/index.js b/src/config/index.js
index 2dd6213..f7cf438 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -35,8 +35,8 @@
// const ENV_DEV = 'zhapi.coinbtcs.com' // dev
// const ENV_DEV = 'openapi.yanshiz.com' // dev
-// const ENV_DEV = '192.168.10.24:8086' // dev
const ENV_DEV = 'aa.yanshiz.com' // dev
+// const ENV_DEV = 'aa.yanshiz.com' // dev
// const ENV_PRO = 'qheufhj.site' // app域名
diff --git a/src/service/trade.api.js b/src/service/trade.api.js
index e2c888c..5eae8d2 100644
--- a/src/service/trade.api.js
+++ b/src/service/trade.api.js
@@ -1,7 +1,7 @@
import request from './request';
import { METHODS } from '@/config';
import { API_PREFIX } from '@/config';
-
+import { getStorage, setStorage, handleImage } from '@/utils/utis.js'
/**
* 获取 支付币种（法币） 列表
* @returns {*}
@@ -306,6 +306,9 @@
// 获取k线
export const _getKline = (symbol, line) => { // 1min, 5min, 15min, 30min, 60min, 4hour, 1day, 1mon, 1week, 1分钟,5分钟,1天,1月
+ if (!symbol) {
+ symbol = getStorage('symbol')
+ }
return request({
url: `${API_PREFIX}/hobi!getKline.action`,
method: 'GET',
diff --git a/src/views/cryptos/Funds/index.vue b/src/views/cryptos/Funds/index.vue
index 58d8fad..70be053 100644
--- a/src/views/cryptos/Funds/index.vue
+++ b/src/views/cryptos/Funds/index.vue
@@ -12,13 +12,13 @@
<div class="flex mt-17">
<span class="flex-1 border-b-color " :class="{ active_color: tab === 0 }"></span>
<span class="flex-1 border-b-color" :class="{ active_color: tab === 1 }"></span>
- <span class="flex-1 border-b-color" :class="{ active_color: tab === 2 }"></span>
- <span class="flex-1 border-b-color" :class="{ active_color: tab === 3 }"></span>
+ <!-- <span class="flex-1 border-b-color" :class="{ active_color: tab === 2 }"></span> -->
+ <!-- <span class="flex-1 border-b-color" :class="{ active_color: tab === 3 }"></span> -->
</div>
<over-view v-if="tab === 0" :funds="funds" :key="tab"></over-view>
<as-sets v-if="tab === 1" :funds="funds" :key="tab"></as-sets>
- <contract v-if="tab === 2" :funds="funds" :index="index" :key="tab"></contract>
- <financial v-if="tab === 3" :funds="funds" :index="index" :key="tab"></financial>
+ <!-- <contract v-if="tab === 2" :funds="funds" :index="index" :key="tab"></contract> -->
+ <!-- <financial v-if="tab === 3" :funds="funds" :index="index" :key="tab"></financial> -->
</div>
</div>
</template>
@@ -53,13 +53,13 @@
{
type: this.$t('现货账户'),
},
- {
- type: this.$t('合约'),
+ // {
+ // type: this.$t('合约'),
- },
- {
- type: this.$t('理财'),
- },
+ // },
+ // {
+ // type: this.$t('理财'),
+ // },
]
}
},
diff --git a/src/views/cryptos/PerpetualContract/index.vue b/src/views/cryptos/PerpetualContract/index.vue
index c8faae1..f4ea10c 100644
--- a/src/views/cryptos/PerpetualContract/index.vue
+++ b/src/views/cryptos/PerpetualContract/index.vue
@@ -5,6 +5,7 @@
<ContractHeader :symbol="symbol" :range="range" :selectIndex="selectIndex" :symbolName="symbolName"
:balance="userInfo.balance" @tab="onTopTab" @update-coin="onUpdate">
</ContractHeader>
+ <k-line-charts :update-key="updateKey" :update-data="quote" :symbol="symbol" :showBottom="true" />
<p class="status-info" v-if="chartData.market && chartData.market.status">
<span>{{ chartData.market.status && $t(chartData.market.status) }},</span>
<span class="time">{{ chartData.market.time_str }}</span>
@@ -171,55 +172,81 @@
</div>
</div>
</section>
- <div class="mainBackground rounded-view" key="y">
+ <div class="btns" style="margin-top:20px;">
+ <div class="tbns_mc" @click="showPopupclick('close')">{{$t('卖出')}}</div>
+ <div class="tbns_mr" @click="showPopupclick('open')">{{$t('买入')}}</div>
+ </div>
+
+ <div class="ws_box">
+ <div class="ws_box_box">
+ <div class="ws_box_box_box">
+ <div class="ws_box_box_box_top">
+ <img class="ws_box_box_box_top_img" src="../../../assets/img/icon-dollar.png"/>
+ <div class="ws_box_box_box_top_txt">{{$t('开')}}</div>
+ </div>
+ <div class="ws_box_box_box_btn">{{quote.open}}</div>
+ </div>
+ <div class="ws_box_box_box">
+ <div class="ws_box_box_box_top">
+ <img class="ws_box_box_box_top_img" src="../../../assets/img/icon-arrow-up.png"/>
+ <div class="ws_box_box_box_top_txt">{{$t('高')}}</div>
+ </div>
+ <div class="ws_box_box_box_btn">{{quote.high}}</div>
+ </div>
+ </div>
+ <div class="ws_box_box" style="padding-bottom: 10px;">
+ <div class="ws_box_box_box">
+ <div class="ws_box_box_box_top">
+ <img class="ws_box_box_box_top_img" src="../../../assets/img/icon-arrow-down.png"/>
+ <div class="ws_box_box_box_top_txt">{{$t('低')}}</div>
+ </div>
+ <div class="ws_box_box_box_btn">{{quote.low}}</div>
+ </div>
+ <div class="ws_box_box_box">
+ <div class="ws_box_box_box_top">
+ <img class="ws_box_box_box_top_img" src="../../../assets/img/icon-foldline.png"/>
+ <div class="ws_box_box_box_top_txt">{{$t('24h成交量')}}</div>
+ </div>
+ <div class="ws_box_box_box_btn">{{quote.amount}}</div>
+ </div>
+ </div>
+ </div>
+ <van-popup v-model:show="showPopup" :round="true">
+ <div class="popup-content" >
+ <PerpetualOpen class="pl-30 pr-30" :key="symbol" :selectIndex="selectIndex" :symbol="symbol"
+ :green-data="bids" :red-data="asks" :price="price" :init-open="initOpen" :init-close="initClose"
+ :init-futrue="initFutrue" @ordered="onOrdered" @changeValueBack="changeValueBack">
+ </PerpetualOpen>
+ <!-- <van-button @click="showPopup = false">关闭</van-button> -->
+ </div>
+ </van-popup>
+ <!-- <div class="mainBackground rounded-view" key="y">
<PerpetualOpen class="pl-30 pr-30" :key="symbol" :selectIndex="selectIndex" :symbol="symbol"
:green-data="bids" :red-data="asks" :price="price" :init-open="initOpen" :init-close="initClose"
:init-futrue="initFutrue" @ordered="onOrdered" @changeValueBack="changeValueBack">
</PerpetualOpen>
<div class="line"></div>
- <!-- 委托/持仓-->
<PerpetualOrder class="pl-30 pr-30" :key="keyIndex + 'd'" :symbol="symbol" :order-cur="orderCur"
:order-hold="orderHold" :price="price" :topIndex="selectIndex" :futrue-hold="futrueHold"
:futrue-histroy="futrueHistroy" @tab="onTab" @recall="onRecall">
</PerpetualOrder>
- </div>
+ </div> -->
</div>
</div>
- <div class="fixed-box">
+ <!-- <div class="fixed-box">
<div class="flex justify-between items-center px-30 py-20" @click.stop="handleClickShowKlineChart()">
<span class="font-30 textColor2" style="color:#fff;">{{ symbol.toUpperCase() }} {{ $t('k线图表') }}</span>
<van-icon class="font-30" style="color:#fff;" :name="showCharts ? 'arrow-down' : 'arrow-up'"></van-icon>
</div>
- <!-- <section class="indicator-index-container" v-if="showKlineChart">
- <div class="indicator-index-box">
- <div class="flex-l">
- <ul>
- <li v-for="(item, index) in filterOne" :key="item" @click="handleClickSelectTime(item, index)"
- :class="[item.index === timeLabelActive ? 'active' : '']">{{
- item.name
- }}</li>
- <li @click="handleClickMoreBtn">{{ $t('更多') }}</li>
- </ul>
- </div>
- </div>
- <div class="indicator-index-box-second" v-if="showMore">
- <ul>
- <li v-for="(item, index) in filterTwo" :key="item" @click="handleClickSelectTime(item, index)"
- :class="[item.index === timeLabelActive ? 'active' : '']">{{
- item.name
- }}</li>
- </ul>
- </div>
- </section> -->
+
<div class="kline-container flex" v-if="showKlineChart">
<div class="chart-index">
- <!-- <fx-kline :height="500" :symbol="symbol" :isShowsolid="true" :chartType="chartType" v-if="symbol" @data="onData"
- :key="`${symbol}-${timeValue}`" /> -->
+
<k-line-charts :update-key="updateKey" :update-data="quote" :symbol="symbol" :showBottom="true" />
</div>
</div>
- </div>
+ </div> -->
</div>
</template>
@@ -296,6 +323,7 @@
return {
quote: {},
initTimer: null,
+ showPopup:false,
keyIndex: 0,
timeout: null,
timer: null, // 底部持仓等的公用定时器
@@ -322,6 +350,7 @@
show: false, // popup
animated1: false,
animated2: false,
+ _symbol:'',
currentType: 'open',
showCharts: false,
type: 'cryptos',
@@ -380,6 +409,10 @@
this.symbol = symbol
this.init(symbol)
},
+ showPopupclick(e){
+ this.showPopup = !this.showPopup
+ // this.$refs.TradeOrderArea.changeTab(e);
+ },
changeCurrentType(type) {
this.currentType = type
},
@@ -464,6 +497,7 @@
// this.clearTimeout()
this.initParam(this.symbol, evt) // 重新初始化
// 判断方法是否存在
+ this.showPopup = false
const fn = this[this.curTab];
if (typeof fn === 'function') {
fn.call(this, this.symbol);
@@ -474,7 +508,7 @@
//console.log('下单后更新数据')
},
onTab(evt) { // 点击tab后的回调
- console.log('evt2', evt)
+ // console.log('evt2', evt)
this.clearTimer()
// this.clearTimeout()
this.curTab = evt
@@ -483,13 +517,13 @@
fetchQoutes(symbol) { // 获取当前行情
_getHomeList(symbol).then(data => { // 获取行情
this.symbolName = data[0].name
- console.log(data[0].name)
+ // console.log(data[0].name)
this.handleQoutes(data)
this.startQuoteSocket() // socket
})
},
handleQoutes(data) {
- console.log('handleQoutes: ', data);
+ // console.log('handleQoutes: ', data);
if (data && data.length) {
const cur = data[0]
this.price = cur.close
@@ -688,9 +722,15 @@
this.clearTimer()
const _symbol = symbol || this.symbol
+
+ if(this.symbol){
+ this._symbol = this.symbol
+ }else{
+ this._symbol = symbol
+ }
console.log('init: ',this.symbol, symbol)
this.fetchQoutes(_symbol)
- this.fetchDeepData(_symbol)
+ // this.fetchDeepData(_symbol)
this.initParam(_symbol) // 'open'
// this.clearTimer()
//if (this.curTab === 'fetchOrderListCur') {
@@ -779,6 +819,71 @@
</script>
<style lang="scss">
+ .ws_box_box_box_btn{
+ font-size: 35px;
+ font-weight: bold;
+ padding-bottom: 20px;
+ }
+ .ws_box_box_box_top_img{
+ width: 30px;
+ height: 30px;
+ margin-right: 10px;
+ }
+ .ws_box_box_box_top{
+ display: flex;
+ align-items: center;
+ font-size: 30px;
+ font-weight: bold;
+ color: #8c8883;
+ }
+ .ws_box_box_box{
+ width: 50%;
+ display: flex;
+ flex-direction: column;
+ padding-top: 40px;
+ padding-left: 40px;
+ }
+ .ws_box_box{
+ display: flex;
+ }
+ .ws_box{
+ display: flex;
+ flex-direction: column;
+ background-color: #F6F7F9;
+ border-radius:24px;
+ color:#333;
+ margin:30px;
+ }
+ .tbns_mr {
+ font-weight: bold;
+ font-size: 35px;
+ text-align:center;
+ background-color: #3A7FF6;
+ color: #fff;
+ width: 350px;
+ line-height: 100px;
+ height: 100px;
+ border-radius: 50px;
+ }
+ .tbns_mc {
+ font-weight: bold;
+ font-size: 35px;
+ text-align:center;
+ background-color: #DE5D57;
+ color: #fff;
+ width: 350px;
+ line-height: 100px;
+ height: 100px;
+ border-radius: 50px;
+ }
+
+ .btns {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin: 0 20px;
+ // width: 100%;
+ }
//.list-enter-active, .list-leave-active {
// transition: all .5s;
// transform: translateY(30px)
diff --git a/src/views/cryptos/Trade/index.vue b/src/views/cryptos/Trade/index.vue
index 2a47c74..805d63f 100644
--- a/src/views/cryptos/Trade/index.vue
+++ b/src/views/cryptos/Trade/index.vue
@@ -1,8 +1,8 @@
<template>
- <div id="cryptos">
- <!-- 调节跳动深度 -->
- <div class="pb-108 no_touch">
- <!-- <div class="px-30 pt-20">
+ <div id="cryptos">
+ <!-- 调节跳动深度 -->
+ <div class="pb-108 no_touch">
+ <!-- <div class="px-30 pt-20">
<div class="flex h-88 w-full box-border border-solid-grey rounded-lg">
<div @click="$router.push('/cryptos/exchangePage')"
class="font-bold font-32 flex justify-center items-center flex-1">
@@ -13,112 +13,162 @@
</div>
</div>
</div> -->
- <trade-head :isReturn="true" :backFunc="() => $router.push('/')" :symbolName="symbolName" :symbol="symbol"
- :price="price" :range="range" :isTrade="true" @update-coin="onUpdate" @data="quote = $event" />
-
- <div class="trade-buy-sell flex justify-between px-30 py-30">
- <trade-order-area :symbol="symbol" :symbolName="symbolName" :init-open="initOpen" :init-close="initClose"
+ <trade-head :isReturn="true" :backFunc="() => $router.push('/')" :symbolName="symbolName" :symbol="symbol"
+ :price="price" :range="range" :isTrade="true" @update-coin="onUpdate" @data="quote = $event" />
+ <div class="chart-index" style="margin-top: 30px;">
+ <k-line-charts v-if="symbol" :update-key="updateKey" :update-data="quote" :symbol="symbol"
+ :showBottom="true" />
+ </div>
+ <div class="trade-buy-sell flex justify-between px-30 py-30">
+ <!-- <trade-order-area :symbol="symbol" :symbolName="symbolName" :init-open="initOpen" :init-close="initClose"
:price="price" @ordered="onOrdered" />
<keep-alive>
<cryptos-trade-deep-data :selectValue="selectValue" @getList="getList" :showType="showType" :symbol="symbol"
v-if="symbol" :price="price" class="w-290 ml-30" />
- </keep-alive>
- </div>
- <div class="flex k-select-box">
- <div class="mt-20 mb-22 select-box" style="position:relative;">
- <div class=" flex justify-between items-center w-full h-70" @click="selectBtn">
- <!-- <img src="@/assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20"/> -->
- <div class="pl-16 font-28 textColor" style="width:80%;color: #333;">{{ title }}</div>
- <img src="../../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 mr-20" />
- </div>
- <div class="option-box" v-show="isShow">
- <div class="font-28" v-for="(item, index) in sortList" :key="index" @click="selectItem(item)">{{
+ </keep-alive> -->
+ <!-- <trade-order-area :symbol="symbol" :symbolName="symbolName" :init-open="initOpen" :init-close="initClose"
+ :price="price" @ordered="onOrdered" /> -->
+ <div class="btns" style="margin-top:20px;">
+ <div class="tbns_mc" @click="showPopupclick('close')">{{$t('卖出')}}</div>
+ <div class="tbns_mr" @click="showPopupclick('open')">{{$t('买入')}}</div>
+ </div>
+
+ </div>
+
+ <van-popup v-model:show="showPopup" :round="true">
+ <div class="popup-content" style="padding: 20px;">
+ <trade-order-area ref="TradeOrderArea" :symbol="symbol" :symbolName="symbolName" :init-open="initOpen" :init-close="initClose"
+ :price="price" @ordered="onOrdered" />
+ </div>
+ </van-popup>
+ <div class="ws_box">
+ <div class="ws_box_box">
+ <div class="ws_box_box_box">
+ <div class="ws_box_box_box_top">
+ <img class="ws_box_box_box_top_img" src="../../../assets/img/icon-dollar.png"/>
+ <div class="ws_box_box_box_top_txt">{{$t('开')}}</div>
+ </div>
+ <div class="ws_box_box_box_btn">{{quote.open}}</div>
+ </div>
+ <div class="ws_box_box_box">
+ <div class="ws_box_box_box_top">
+ <img class="ws_box_box_box_top_img" src="../../../assets/img/icon-arrow-up.png"/>
+ <div class="ws_box_box_box_top_txt">{{$t('高')}}</div>
+ </div>
+ <div class="ws_box_box_box_btn">{{quote.high}}</div>
+ </div>
+ </div>
+ <div class="ws_box_box" style="padding-bottom: 10px;">
+ <div class="ws_box_box_box">
+ <div class="ws_box_box_box_top">
+ <img class="ws_box_box_box_top_img" src="../../../assets/img/icon-arrow-down.png"/>
+ <div class="ws_box_box_box_top_txt">{{$t('低')}}</div>
+ </div>
+ <div class="ws_box_box_box_btn">{{quote.low}}</div>
+ </div>
+ <div class="ws_box_box_box">
+ <div class="ws_box_box_box_top">
+ <img class="ws_box_box_box_top_img" src="../../../assets/img/icon-foldline.png"/>
+ <div class="ws_box_box_box_top_txt">{{$t('24h成交量')}}</div>
+ </div>
+ <div class="ws_box_box_box_btn">{{quote.amount}}</div>
+ </div>
+ </div>
+ </div>
+
+ <!-- <div class="flex k-select-box">
+ <div class="mt-20 mb-22 select-box" style="position:relative;">
+ <div class=" flex justify-between items-center w-full h-70" @click="selectBtn">
+ <div class="pl-16 font-28 textColor" style="width:80%;color: #333;">{{ title }}</div>
+ <img src="../../../assets/image/public/grey-select.png" alt="select-icon"
+ class="w-22 h-11 mr-20" />
+ </div>
+ <div class="option-box" v-show="isShow">
+ <div class="font-28" v-for="(item, index) in sortList" :key="index" @click="selectItem(item)">{{
item.name
}}
- </div>
- </div>
- </div>
- <div class="ml-10" @click="isSelectShow = true">
- <img src="../../../assets/image/selectIcon.png" alt="warn-icon" class="w-36 h-30" />
- </div>
- </div>
- <div class="h-16 diviLine"></div>
- <div>
- <div class="flex justify-between border-b-color items-center">
- <div class="flex pl-30">
+ </div>
+ </div>
+ </div>
+ <div class="ml-10" @click="isSelectShow = true">
+ <img src="../../../assets/image/selectIcon.png" alt="warn-icon" class="w-36 h-30" />
+ </div>
+ </div> -->
+ <!-- <div class="h-16 diviLine"></div>
+ <div>
+ <div class="flex justify-between border-b-color items-center">
+ <div class="flex pl-30">
- <div class="px-10 py-10 flex items-center text-grey font-28" @click="tabClick('1')"
- :class="tabType == '1' ? 'active-line' : ''">{{ $t('当前委托') }}<span v-if="tabType == '1'">({{
+ <div class="px-10 py-10 flex items-center text-grey font-28" @click="tabClick('1')"
+ :class="tabType == '1' ? 'active-line' : ''">{{ $t('当前委托') }}<span v-if="tabType == '1'">({{
entrustList.length }})</span></div>
- <div class="px-10 ml-50 py-10 flex items-center text-grey font-28" @click="tabClick('2')"
- :class="tabType == '2' ? 'active-line' : ''">{{ $t('历史委托') }}</div>
- <div class="px-10 py-10 flex items-center ml-50 text-grey font-28" @click="tabClick('3')"
- :class="tabType == '3' ? 'active-line' : ''">{{ $t('资产') }}</div>
- </div>
- <img src="../../../assets/image/public/record.png" alt="record-img" class="w-64 h-35 pr-30 "
- @click="goHistory" />
- </div>
- </div>
- <div class="py-20 px-20" v-if="tabType == '1'">
- <entrust-item v-for="item in entrustList" :key="item.order_no" :entrust="item" state="submitted"
- @cancelOrder="cancelOrder" />
- </div>
- <div class="py-20 px-20" v-else-if="tabType == '2'">
- <history-item unit="USDT" v-for="item in entrustList" :key="item.order_no" :coinPrice="coinPrice" :entrust="item"
- :state="item.state" @cancelOrder="cancelOrder" />
- </div>
- <div class="py-20 px-20" v-else>
- <div class="mb-20 border-b">
- <p class="font-28 text-grey mt-24 mb-22">{{ $t('当前币对资产') }}</p>
- <ul>
- <li v-for="item in pairsList" :key="item.symbol" class="flex justify-between py-10">
- <div class="flex items-center">
- <img
- :src="item.symbol ? `${HOST_URL}/symbol/${item.symbol_data}.png` : handleImage('../../../assets/loading-default.png')"
- class="w-52 h-52 rounded-full mr-16" />
- <p class="flex flex-col">
- <strong class="font-28 textColor mb-6">{{ item.symbol.toUpperCase() }}</strong>
- <span class="font-20 text-grey">{{ item.full_name }}</span>
- </p>
- </div>
- <div class="flex flex-col items-end">
- <strong class="font-28 textColor mb-6">{{ item.volume }}</strong>
- <span class="font-20 text-grey">{{ currency.currency_symbol }} {{ (item.usdt ? (currency.rate *
+ <div class="px-10 ml-50 py-10 flex items-center text-grey font-28" @click="tabClick('2')"
+ :class="tabType == '2' ? 'active-line' : ''">{{ $t('历史委托') }}</div>
+ <div class="px-10 py-10 flex items-center ml-50 text-grey font-28" @click="tabClick('3')"
+ :class="tabType == '3' ? 'active-line' : ''">{{ $t('资产') }}</div>
+ </div>
+ <img src="../../../assets/image/public/record.png" alt="record-img" class="w-64 h-35 pr-30 "
+ @click="goHistory" />
+ </div>
+ </div> -->
+ <div class="py-20 px-20" v-if="tabType == '1'">
+ <entrust-item v-for="item in entrustList" :key="item.order_no" :entrust="item" state="submitted"
+ @cancelOrder="cancelOrder" />
+ </div>
+ <div class="py-20 px-20" v-else-if="tabType == '2'">
+ <history-item unit="USDT" v-for="item in entrustList" :key="item.order_no" :coinPrice="coinPrice"
+ :entrust="item" :state="item.state" @cancelOrder="cancelOrder" />
+ </div>
+ <div class="py-20 px-20" v-else>
+ <div class="mb-20 border-b">
+ <p class="font-28 text-grey mt-24 mb-22">{{ $t('当前币对资产') }}</p>
+ <ul>
+ <li v-for="item in pairsList" :key="item.symbol" class="flex justify-between py-10">
+ <div class="flex items-center">
+ <img :src="item.symbol ? `${HOST_URL}/symbol/${item.symbol_data}.png` : handleImage('../../../assets/loading-default.png')"
+ class="w-52 h-52 rounded-full mr-16" />
+ <p class="flex flex-col">
+ <strong class="font-28 textColor mb-6">{{ item.symbol.toUpperCase() }}</strong>
+ <span class="font-20 text-grey">{{ item.full_name }}</span>
+ </p>
+ </div>
+ <div class="flex flex-col items-end">
+ <strong class="font-28 textColor mb-6">{{ item.volume }}</strong>
+ <span class="font-20 text-grey">{{ currency.currency_symbol }} {{ (item.usdt ? (currency.rate *
item.usdt).toFixed(2) :
'--') }}</span>
- </div>
- </li>
- </ul>
- </div>
- <div class="mb-20 border-b">
- <p class="font-28 text-grey mt-14 mb-42">{{ $t('其他非0资产') }}</p>
- <ul>
- <li v-for="item in no_zeroList" :key="item.symbol" class="flex justify-between py-10">
- <div class="flex items-center">
- <img
- :src="item.symbol ? `${HOST_URL}/symbol/${item.symbol_data}.png` : handleImage('../../../assets/loading-default.png')"
- class="w-52 h-52 rounded-full mr-16" />
- <p class="flex flex-col">
- <strong class="font-28 textColor mb-6">{{ item.symbol.toUpperCase() }}</strong>
- <span class="font-20 text-grey">{{ item.full_name }}</span>
- </p>
- </div>
- <div class="flex flex-col items-end">
- <strong class="font-28 textColor mb-6">{{ item.volume }}</strong>
- <span class="font-20 text-grey">{{ currency.currency_symbol }} {{ (item.usdt ? (currency.rate *
+ </div>
+ </li>
+ </ul>
+ </div>
+ <div class="mb-20 border-b">
+ <p class="font-28 text-grey mt-14 mb-42">{{ $t('其他非0资产') }}</p>
+ <ul>
+ <li v-for="item in no_zeroList" :key="item.symbol" class="flex justify-between py-10">
+ <div class="flex items-center">
+ <img :src="item.symbol ? `${HOST_URL}/symbol/${item.symbol_data}.png` : handleImage('../../../assets/loading-default.png')"
+ class="w-52 h-52 rounded-full mr-16" />
+ <p class="flex flex-col">
+ <strong class="font-28 textColor mb-6">{{ item.symbol.toUpperCase() }}</strong>
+ <span class="font-20 text-grey">{{ item.full_name }}</span>
+ </p>
+ </div>
+ <div class="flex flex-col items-end">
+ <strong class="font-28 textColor mb-6">{{ item.volume }}</strong>
+ <span class="font-20 text-grey">{{ currency.currency_symbol }} {{ (item.usdt ? (currency.rate *
item.usdt).toFixed(2) :
'--') }}</span>
- </div>
- </li>
- </ul>
- </div>
- </div>
- <!-- <div v-if="tabType == '1' && entrustList.length === 0"
+ </div>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <!-- <div v-if="tabType == '1' && entrustList.length === 0"
class="flex flex-col justify-center items-center pt-185 pb-100">
<img src="../../../assets/image/assets-center/no-data.png" alt="no-date" class="w-120 h-120" />
<p class="textColor">{{ $t('暂无数据') }}</p>
</div> -->
- <!-- <div class="fixed w-full shadow-box z-100 inputBackground">
+ <!-- <div class="fixed w-full shadow-box z-100 inputBackground">
<div class="flex justify-between px-30 py-10">
<span class="font-24 textColor2">{{ symbol.toUpperCase() }}/USDT {{ $t('k线图表') }}</span>
<van-icon class="textColor" :name="showCharts ? 'arrow-down' : 'arrow-up'"
@@ -127,12 +177,15 @@
<k-line-charts :update-key="updateKey" :update-data="quote" :symbol="symbol" v-if="symbol && showCharts"
:showBottom="false" />
</div> -->
- <div class="fixed-box">
+ <!-- <div class="fixed-box">
<div class="flex justify-between items-center px-30 py-20" @click.stop="handleClickShowKlineChart()">
<span class="font-30 textColor2" style="">{{ symbol.toUpperCase() }} {{ $t('k线图表') }}</span>
<van-icon class="textColor font-28" :name="showCharts ? 'arrow-down' : 'arrow-up'"></van-icon>
</div>
- <!-- <section class="indicator-index-container" v-if="showKlineChart">
+ <div class="kline-container flex" v-if="showKlineChart">
+
+ </div> -->
+ <!-- <section class="indicator-index-container" v-if="showKlineChart">
<div class="indicator-index-box">
<div class="flex-l">
<ul>
@@ -153,668 +206,863 @@
</ul>
</div>
</section> -->
- <div class="kline-container flex" v-if="showKlineChart">
- <div class="chart-index">
- <!-- <fx-kline :height="500" :symbol="symbol" :isShowsolid="true" :chartType="chartType" v-if="symbol" @data="onData"
- :key="`${symbol}-${timeValue}`" /> -->
- <k-line-charts :update-key="updateKey" :update-data="quote" :symbol="symbol" :showBottom="true" />
- </div>
- </div>
- </div>
- <van-action-sheet class="action-sheet" v-model:show="isSelectShow" @select="onSelect" :actions="actions"
- :cancel-text="$t('取消')" close-on-click-action @cancel="onCancel" />
- </div>
+ <!-- </div> -->
+ <van-action-sheet class="action-sheet" v-model:show="isSelectShow" @select="onSelect" :actions="actions"
+ :cancel-text="$t('取消')" close-on-click-action @cancel="onCancel" />
- </div>
+ </div>
+
+ </div>
</template>
<script>
-import TradeHead from '@/components/Transform/trade-head/index.vue'
-import TradeOrderArea from '@/components/Transform/trade-order-area/index.vue'
-import CryptosTradeDeepData from '@/components/Transform/cryptos-trade-deep-data/index.vue'
-import EntrustItem from '@/components/Transform/entrust-item/index.vue'
-import KLineCharts from '@/components/Transform/kline-charts/index.vue'
-import historyItem from '@/components/Transform/history-item/index.vue'
-import fxKline from '@/components/fx-kline/index.vue'
+ import TradeHead from '@/components/Transform/trade-head/index.vue'
+ import TradeOrderArea from '@/components/Transform/trade-order-area/index.vue'
+ import CryptosTradeDeepData from '@/components/Transform/cryptos-trade-deep-data/index.vue'
+ import EntrustItem from '@/components/Transform/entrust-item/index.vue'
+ import KLineCharts from '@/components/Transform/kline-charts/index.vue'
+ import historyItem from '@/components/Transform/history-item/index.vue'
+ import fxKline from '@/components/fx-kline/index.vue'
-import Axios from '@/service/trading'
-import { _getHomeList } from '@/service/home.api'
-import { Popup, Swipe, SwipeItem, Circle, Icon, showSuccessToast, showFailToast } from 'vant';
-import { mapActions, mapGetters } from 'vuex'
-import { SET_COIN_LIST } from '@/store/const.store'
-import { WS_URL, HOST_URL } from '@/config'
-import TradeApi from "@/service/trading.js";
-import { getStorage, handleImage } from '@/utils/utis'
-import { useQuotesStore } from '@/store/quotes.store'
-import { SET_STAGE } from '@/store/types.store';
-import { _getExchangeRate } from '@/service/cryptos.api'
-const quotesStore = useQuotesStore()
-export default {
- name: "TradePage",
- components: {
- TradeHead,
- TradeOrderArea,
- CryptosTradeDeepData,
- [Popup.name]: Popup,
- [Swipe.name]: Swipe,
- [SwipeItem.name]: SwipeItem,
- [Circle.name]: Circle,
- [Icon.name]: Icon,
- EntrustItem,
- KLineCharts,
- historyItem,
- fxKline,
- KLineCharts
- },
- computed: {
- ...mapGetters('user', ['userInfo']),
- ...mapGetters({
- coinList: 'home/coinList',
- }),
- },
- data() {
- const initArr = []
- for (let i = 0; i < 8; i++) {
- initArr.push({
- volume: '--',
- price: '--'
- })
- }
- return {
- HOST_URL,
- quote: {},
- showCharts: false,
- updateKey: 1,
- initTimer: null,
- keyIndex: 0,
- timeout: null,
- timer: null, // 底部持仓等的公用定时器
- timer2: null, // 交割合约底部持仓等的公用定时器
- symbol: '',
- price: '',
- range: '',
- initOpen: {},
- initClose: {},
- asks: initArr, // 卖单
- bids: initArr, // 买单
- orderCur: [], // 当前委托
- orderHold: [], // 持有仓位
- futrueHold: [], // 交割持仓
- futrueHistroy: [], // 交割历史
- socket: null, // 行情
- sockets: {
- quotes: null, // 行情
- deep: null /// 深度
- },
- curTab: '', // 当前委托还是持有仓位
- selectIndex: 1, // 当前tab
- initFutrue: {}, /// 交割合约
- show: false, // popup
- entrustList: [], //当前委托订单
- tabType: 1,
- no_zeroList: [], //其他非0资产数组
- pairsList: {}, //当前资产
- // curRequest: [], //
- isShow: false,
- title: 1,
- isSelectShow: false,
- actions: [{ name: this.$t('默认'), value: 0, className: 'actions-active' }, { name: this.$t('展示买单'), value: 1, className: "" }, { name: this.$t('展示卖单'), value: 2, className: '' }],
- showType: 0,
- sortList: [],
- selectValue: 0,
- coinPrice: 0,
- type: 'cryptos',
- filterOne: [
- { name: this.$t('分时'), paramsValue: 'timeSharing', seconds: 1 * 60 * 1000, index: 0, },
- { name: '1' + this.$t('天'), paramsValue: '1day', seconds: 1 * 24 * 60 * 60 * 1000, index: 1, },
- { name: '1' + this.$t('周'), paramsValue: '1week', seconds: 7 * 24 * 60 * 60 * 1000, index: 2, },
- { name: '1' + this.$t('月'), paramsValue: '1mon', seconds: 30 * 24 * 60 * 60 * 1000, index: 3, },
- { name: '5' + this.$t('天'), paramsValue: '5day', seconds: 5 * 24 * 60 * 60 * 1000, index: 4, },
- { name: this.$t('season'), paramsValue: '1quarter', seconds: 3 * 30 * 24 * 60 * 60 * 1000, index: 5, },
- { name: this.$t('Year'), paramsValue: '1year', seconds: 12 * 30 * 24 * 60 * 60 * 1000, index: 6, },
- ],
- filterTwo: [
- { name: '120' + this.$t('分'), paramsValue: '120min', seconds: 2 * 60 * 60 * 1000, index: 7, },
- { name: '60' + this.$t('分'), paramsValue: '60min', seconds: 1 * 60 * 60 * 1000, index: 8, },
- { name: '30' + this.$t('分'), paramsValue: '30min', seconds: 30 * 60 * 1000, index: 9, },
- { name: '15' + this.$t('分'), paramsValue: '15min', seconds: 15 * 60 * 1000, index: 10, },
- { name: '5' + this.$t('分'), paramsValue: '5min', seconds: 5 * 60 * 1000, index: 11, },
- { name: '1' + this.$t('分'), paramsValue: '1min', seconds: 1 * 60 * 1000, index: 12, },
- ],
- showKlineChart: false,
- chartType: '',
- timeValue: '',
- chartData: {},
- timeLabelActive: 1,
- showMore: false,
- symbolName: '',
- updateKey: 1,
- currency: {},
- timer3: null
- }
- },
- async created() {
- if (this.$route.query.type) {
- this.type = this.$route.query.type
- }
- await this.SET_COIN_LIST(this.type)
- this.getExchangeRate()
- },
- methods: {
- handleImage,
- ...mapActions('home', [SET_COIN_LIST]),
- onUpdate(symbol) { // 更新
- this.symbol = symbol
- this.closeSocket()
- this.init(symbol)
- },
- getExchangeRate() {
- _getExchangeRate({}).then((res) => {
- this.currency = res
- })
- },
- handleClickShowKlineChart() {
- this.showKlineChart = !this.showKlineChart
- },
- handleClickSelectTime(params) {
- const { paramsValue, seconds, index } = params;
- this.timeLabelActive = index;
- quotesStore[SET_STAGE]({ stage: paramsValue, seconds })
- this.onSelectTime(paramsValue)
- },
- onSelectTime(evt) {
- this.timeValue = evt
- if (evt == 'timeSharing') {
- this.chartType = 'area'
- } else {
- this.chartType = 'candle_solid'
- }
- },
- // 事件
- onData(data) {
- this.chartData = data
- },
- handleClickMoreBtn() {
- this.showMore = !this.showMore
- },
- getCoinPrce(val) {
- _getHomeList(val).then((res) => {
- this.symbolName = res[0].name
- this.coinPrice = res[0].close
- })
- },
- tabClick(type) {
- this.tabType = type;
- this.entrustList = []
- if (type == 3) {
- if (!this.userInfo.token) {
- this.$router.push('/login')
- } else {
- this.getWallet()
- }
- } else {
- if (!this.userInfo.token) {
- this.$router.push('/login')
- } else {
- this.getOrderList()
- }
- }
- },
- onOrdered(evt) { // 下单过后的回调
- this.clearTimer()
- // this.clearTimeout()
- this.initParam(this.symbol, evt) // 重新初始化
- //console.log('下单后更新数据')
- },
- onTab(evt) { // 点击tab后的回调
- // console.log('evt', evt)
- this.clearTimer()
- // this.clearTimeout()
- this.curTab = evt
- this[evt](this.symbol)
- },
- handleQoutes(data) {
- if (data && data.length) {
- const cur = data[0]
- this.price = cur.close
- this.range = cur.change_ratio_str || cur.changeRatioStr
- this.quote = cur
- this.updateKey++
- }
- },
- startQuoteSocket() { // 行情socket
- // console.log('symbol', this.symbol)
- if (!this.symbol) {
- return
- }
- this.socket = new WebSocket(`${WS_URL}/1/${this.symbol}`)
- this.socket.onmessage = (evt) => {
- const { data } = evt
- const { code, data: _data } = JSON.parse(data)
- if (code / 1 === 0) {
- this.handleQoutes(_data)
- }
- }
- },
- initParam(symbol, type) { // 初始化参数
- if (this.userInfo.token) {
- if (type === 'open' || !type) {
- //console.log('开仓数据')
- Axios.tradeBuyToken({})
- .then(res => {
- this.initOpen = res
- // console.log(this.initOpen.volume, res.data.volume, type)
- })
- }
- if (type === 'close' || !type) {
- Axios.tradeSellToken({
- symbol
- }).then(res => {
- this.initClose = res
- })
- }
+ import Axios from '@/service/trading'
+ import {
+ _getHomeList
+ } from '@/service/home.api'
+ import {
+ Popup,
+ Swipe,
+ SwipeItem,
+ Circle,
+ Icon,
+ showSuccessToast,
+ showFailToast
+ } from 'vant';
+ import {
+ mapActions,
+ mapGetters
+ } from 'vuex'
+ import { ref } from 'vue';
+ import {
+ SET_COIN_LIST
+ } from '@/store/const.store'
+ import {
+ WS_URL,
+ HOST_URL
+ } from '@/config'
+ import TradeApi from "@/service/trading.js";
+ import {
+ getStorage,
+ handleImage
+ } from '@/utils/utis'
+ import {
+ useQuotesStore
+ } from '@/store/quotes.store'
+ import {
+ SET_STAGE
+ } from '@/store/types.store';
+ import {
+ _getExchangeRate
+ } from '@/service/cryptos.api'
+ const quotesStore = useQuotesStore()
+ export default {
+ name: "TradePage",
+ components: {
+ TradeHead,
+ TradeOrderArea,
+ CryptosTradeDeepData,
+ [Popup.name]: Popup,
+ [Swipe.name]: Swipe,
+ [SwipeItem.name]: SwipeItem,
+ [Circle.name]: Circle,
+ [Icon.name]: Icon,
+ EntrustItem,
+ KLineCharts,
+ historyItem,
+ fxKline,
+ KLineCharts
+ },
+ computed: {
+ ...mapGetters('user', ['userInfo']),
+ ...mapGetters({
+ coinList: 'home/coinList',
+ }),
+ },
+ data() {
+ const initArr = []
+ for (let i = 0; i < 8; i++) {
+ initArr.push({
+ volume: '--',
+ price: '--'
+ })
+ }
+ return {
+ HOST_URL,
+ showPopup:false,
+ quote: {},
+ showCharts: false,
+ updateKey: 1,
+ initTimer: null,
+ currentType:null,
+ keyIndex: 0,
+ timeout: null,
+ timer: null, // 底部持仓等的公用定时器
+ timer2: null, // 交割合约底部持仓等的公用定时器
+ symbol: '',
+ price: '',
+ range: '',
+ initOpen: {},
+ initClose: {},
+ asks: initArr, // 卖单
+ bids: initArr, // 买单
+ orderCur: [], // 当前委托
+ orderHold: [], // 持有仓位
+ futrueHold: [], // 交割持仓
+ futrueHistroy: [], // 交割历史
+ socket: null, // 行情
+ sockets: {
+ quotes: null, // 行情
+ deep: null /// 深度
+ },
+ curTab: '', // 当前委托还是持有仓位
+ selectIndex: 1, // 当前tab
+ initFutrue: {}, /// 交割合约
+ show: true, // popup
+ entrustList: [], //当前委托订单
+ tabType: 1,
+ no_zeroList: [], //其他非0资产数组
+ pairsList: {}, //当前资产
+ // curRequest: [], //
+ isShow: false,
+ title: 1,
+ isSelectShow: false,
+ actions: [{
+ name: this.$t('默认'),
+ value: 0,
+ className: 'actions-active'
+ }, {
+ name: this.$t('展示买单'),
+ value: 1,
+ className: ""
+ }, {
+ name: this.$t('展示卖单'),
+ value: 2,
+ className: ''
+ }],
+ showType: 0,
+ sortList: [],
+ selectValue: 0,
+ coinPrice: 0,
+ type: 'cryptos',
+ filterOne: [{
+ name: this.$t('分时'),
+ paramsValue: 'timeSharing',
+ seconds: 1 * 60 * 1000,
+ index: 0,
+ },
+ {
+ name: '1' + this.$t('天'),
+ paramsValue: '1day',
+ seconds: 1 * 24 * 60 * 60 * 1000,
+ index: 1,
+ },
+ {
+ name: '1' + this.$t('周'),
+ paramsValue: '1week',
+ seconds: 7 * 24 * 60 * 60 * 1000,
+ index: 2,
+ },
+ {
+ name: '1' + this.$t('月'),
+ paramsValue: '1mon',
+ seconds: 30 * 24 * 60 * 60 * 1000,
+ index: 3,
+ },
+ {
+ name: '5' + this.$t('天'),
+ paramsValue: '5day',
+ seconds: 5 * 24 * 60 * 60 * 1000,
+ index: 4,
+ },
+ {
+ name: this.$t('season'),
+ paramsValue: '1quarter',
+ seconds: 3 * 30 * 24 * 60 * 60 * 1000,
+ index: 5,
+ },
+ {
+ name: this.$t('Year'),
+ paramsValue: '1year',
+ seconds: 12 * 30 * 24 * 60 * 60 * 1000,
+ index: 6,
+ },
+ ],
+ filterTwo: [{
+ name: '120' + this.$t('分'),
+ paramsValue: '120min',
+ seconds: 2 * 60 * 60 * 1000,
+ index: 7,
+ },
+ {
+ name: '60' + this.$t('分'),
+ paramsValue: '60min',
+ seconds: 1 * 60 * 60 * 1000,
+ index: 8,
+ },
+ {
+ name: '30' + this.$t('分'),
+ paramsValue: '30min',
+ seconds: 30 * 60 * 1000,
+ index: 9,
+ },
+ {
+ name: '15' + this.$t('分'),
+ paramsValue: '15min',
+ seconds: 15 * 60 * 1000,
+ index: 10,
+ },
+ {
+ name: '5' + this.$t('分'),
+ paramsValue: '5min',
+ seconds: 5 * 60 * 1000,
+ index: 11,
+ },
+ {
+ name: '1' + this.$t('分'),
+ paramsValue: '1min',
+ seconds: 1 * 60 * 1000,
+ index: 12,
+ },
+ ],
+ showKlineChart: false,
+ chartType: '',
+ timeValue: '',
+ chartData: {},
+ timeLabelActive: 1,
+ showMore: false,
+ symbolName: '',
+ updateKey: 1,
+ currency: {},
+ timer3: null
+ }
+ },
+
+ async created() {
+ if (this.$route.query.type) {
+ this.type = this.$route.query.type
+ }
+ await this.SET_COIN_LIST(this.type)
+ this.getExchangeRate()
+ },
+ methods: {
+ onReady(){
+ if (this.$refs.TradeOrderArea) {
+ this.$refs.TradeOrderArea.changeTab();
+ }
+ },
+ handleImage,
+ ...mapActions('home', [SET_COIN_LIST]),
+ onUpdate(symbol) { // 更新
+ this.symbol = symbol
+ this.closeSocket()
+ this.init(symbol)
+ },
+ showPopupclick(e){
+ this.showPopup = !this.showPopup
+ // this.currentType = e
+ this.$refs.TradeOrderArea.changeTab(e);
+ },
+ getExchangeRate() {
+ _getExchangeRate({}).then((res) => {
+ this.currency = res
+ })
+ },
+ handleClickShowKlineChart() {
+ this.showKlineChart = !this.showKlineChart
+ },
+ handleClickSelectTime(params) {
+ const {
+ paramsValue,
+ seconds,
+ index
+ } = params;
+ this.timeLabelActive = index;
+ quotesStore[SET_STAGE]({
+ stage: paramsValue,
+ seconds
+ })
+ this.onSelectTime(paramsValue)
+ },
+ onSelectTime(evt) {
+ this.timeValue = evt
+ if (evt == 'timeSharing') {
+ this.chartType = 'area'
+ } else {
+ this.chartType = 'candle_solid'
+ }
+ },
+ // 事件
+ onData(data) {
+ this.chartData = data
+ },
+ handleClickMoreBtn() {
+ this.showMore = !this.showMore
+ },
+ getCoinPrce(val) {
+ _getHomeList(val).then((res) => {
+ this.symbolName = res[0].name
+ this.coinPrice = res[0].close
+ })
+ },
+ tabClick(type) {
+ this.tabType = type;
+ this.entrustList = []
+ if (type == 3) {
+ if (!this.userInfo.token) {
+ this.$router.push('/login')
+ } else {
+ this.getWallet()
+ }
+ } else {
+ if (!this.userInfo.token) {
+ this.$router.push('/login')
+ } else {
+ this.getOrderList()
+ }
+ }
+ },
+ onOrdered(evt) { // 下单过后的回调
+ this.clearTimer()
+ // this.clearTimeout()
+ this.initParam(this.symbol, evt) // 重新初始化
+ //console.log('下单后更新数据')
+ },
+ onTab(evt) { // 点击tab后的回调
+ // console.log('evt', evt)
+ this.clearTimer()
+ // this.clearTimeout()
+ this.curTab = evt
+ this[evt](this.symbol)
+ },
+ handleQoutes(data) {
+ if (data && data.length) {
+ const cur = data[0]
+ this.price = cur.close
+ this.range = cur.change_ratio_str || cur.changeRatioStr
+ this.quote = cur
+ this.updateKey++
+ }
+ },
+ startQuoteSocket() { // 行情socket
+ // console.log('symbol', this.symbol)
+ if (!this.symbol) {
+ return
+ }
+ this.socket = new WebSocket(`${WS_URL}/1/${this.symbol}`)
+ this.socket.onmessage = (evt) => {
+ const {
+ data
+ } = evt
+ const {
+ code,
+ data: _data
+ } = JSON.parse(data)
+ if (code / 1 === 0) {
+ this.handleQoutes(_data)
+ }
+ }
+ },
+ initParam(symbol, type) { // 初始化参数
+ if (this.userInfo.token) {
+ if (type === 'open' || !type) {
+ //console.log('开仓数据')
+ Axios.tradeBuyToken({})
+ .then(res => {
+ this.initOpen = res
+ // console.log(this.initOpen.volume, res.data.volume, type)
+ })
+ }
+ if (type === 'close' || !type) {
+ Axios.tradeSellToken({
+ symbol
+ }).then(res => {
+ this.initClose = res
+ })
+ }
- if (this.userInfo.token) {
- this.getWallet()
- this.timer3 = setInterval(() => {
- this.getOrderList();
- }, 2000)
- }
- }
- },
- init(symbol) { // 初始化页面
- this.symbol = symbol
- if (!this.socket) {
- this.startQuoteSocket()
- }
- this.initParam(symbol) // 'open'
- this.clearTimer()
- this.getCoinPrce(symbol)
- },
- closeSocket() {
- this.socket && this.socket.close()
- this.socket = null
- },
- clearTimer() {
- clearInterval(this.timer)
- clearInterval(this.timer3)
- this.timer = null
- },
- tradeBuy() {
- Axios.tradeBuy({
- volume: 1,
- session_token: '',
- symbol: '',
- price: 1,
- order_price_type: '' //limit限价 opponent市价
- }).then((res) => {
- console.log(res);
- }).catch((error) => {
- if (error.code === 'ECONNABORTED') { showFailToast(this.$t('网络超时！')); }
- else if (error.msg !== undefined) { showFailToast(this.$t(error.msg)); }
- });
- },
- getOrderList() {
- TradeApi.tradeRecord({
- page_no: 1,
- symbol: this.$route.params.symbol,
- type: this.tabType == 1 ? 'orders' : 'hisorders'
- }).then(res => {
- console.log(res);
- this.entrustList = res
- }).catch(() => {
+ if (this.userInfo.token) {
+ this.getWallet()
+ this.timer3 = setInterval(() => {
+ this.getOrderList();
+ }, 2000)
+ }
+ }
+ },
+ init(symbol) { // 初始化页面
+ this.symbol = symbol
+ if (!this.socket) {
+ this.startQuoteSocket()
+ }
+ this.initParam(symbol) // 'open'
+ this.clearTimer()
+ this.getCoinPrce(symbol)
+ },
+ closeSocket() {
+ this.socket && this.socket.close()
+ this.socket = null
+ },
+ clearTimer() {
+ clearInterval(this.timer)
+ clearInterval(this.timer3)
+ this.timer = null
+ },
+ tradeBuy() {
+ Axios.tradeBuy({
+ volume: 1,
+ session_token: '',
+ symbol: '',
+ price: 1,
+ order_price_type: '' //limit限价 opponent市价
+ }).then((res) => {
+ console.log(res);
+ }).catch((error) => {
+ if (error.code === 'ECONNABORTED') {
+ showFailToast(this.$t('网络超时！'));
+ } else if (error.msg !== undefined) {
+ showFailToast(this.$t(error.msg));
+ }
+ });
+ },
+ getOrderList() {
+ TradeApi.tradeRecord({
+ page_no: 1,
+ symbol: this.$route.params.symbol,
+ type: this.tabType == 1 ? 'orders' : 'hisorders'
+ }).then(res => {
+ console.log(res);
+ this.entrustList = res
+ }).catch(() => {
- })
- },
- cancelOrder(order) {
- TradeApi.tradeCancel({
- order_no: order,
- }).then(res => {
- this.initParam(this.symbol)
- showSuccessToast(this.$t('成功'))
- }).catch(() => {
+ })
+ },
+ cancelOrder(order) {
+ TradeApi.tradeCancel({
+ order_no: order,
+ }).then(res => {
+ this.initParam(this.symbol)
+ showSuccessToast(this.$t('成功'))
+ }).catch(() => {
- })
- },
- getWallet() {
- TradeApi.getPairs({
- pairs: `${this.symbol}/usdt`,
- symbolType: 'cryptos'
- })
- .then(res => {
- this.pairsList = res.pairs;
- this.no_zeroList = res.no_zero;
- })
- },
- goHistory() {
- if (this.userInfo.token) {
- let type = 'cryptos'
- if (this.$route.query.type) {
- type = this.$route.query.type
- }
- this.$router.push(`/cryptos/tradeRecord/${this.symbol}/?type=${type}`)
- } else {
- this.$router.push('/login')
- }
- },
- //价格类型下拉框切换
- selectBtn() {
- this.isShow = !this.isShow;
- },
- //选择价格类型
- selectItem(item) {
- this.title = item.name;
- this.isShow = false;
- this.selectValue = item.value
- },
- onSelect(item) {
- this.showType = item.value
- this.actions.map((item) => {
- item.className = ''
- })
- item.className = 'actions-active'
- },
- onCancel() {
- this.isSelectShow = false
- },
- getList(val) {
- if (val.numberLength <= 2) {
- this.title = val.arry[0].name
- } else {
- this.title = val.arry[val.arry.length - 1].name
- }
- this.sortList = val.arry
- }
- },
- beforeRouteEnter(to, from, next) {
- let { params: { symbol } } = to
- // console.log('to', to)
- // let catchTradeSymbol = getStorage('tradeSymbol') || null
- // if (catchTradeSymbol != null) {
- // symbol = catchTradeSymbol
- // }
- if (symbol) {
- next(vm => {
- vm.symbol = symbol
- vm.init(symbol)
- })
- } else {
- next()
- }
- },
- activated() {
- // if (!this.socket) {
- // this.startQuoteSocket()
- // }
- },
- deactivated() {
- this.closeSocket()
- this.clearTimer()
- },
- beforeUnmount() {
- this.closeSocket()
- // this.clearTimeout(true)
- this.clearTimer()
- }
-}
-
+ })
+ },
+ getWallet() {
+ TradeApi.getPairs({
+ pairs: `${this.symbol}/usdt`,
+ symbolType: 'cryptos'
+ })
+ .then(res => {
+ this.pairsList = res.pairs;
+ this.no_zeroList = res.no_zero;
+ })
+ },
+ goHistory() {
+ if (this.userInfo.token) {
+ let type = 'cryptos'
+ if (this.$route.query.type) {
+ type = this.$route.query.type
+ }
+ this.$router.push(`/cryptos/tradeRecord/${this.symbol}/?type=${type}`)
+ } else {
+ this.$router.push('/login')
+ }
+ },
+ //价格类型下拉框切换
+ selectBtn() {
+ this.isShow = !this.isShow;
+ },
+ //选择价格类型
+ selectItem(item) {
+ this.title = item.name;
+ this.isShow = false;
+ this.selectValue = item.value
+ },
+ onSelect(item) {
+ this.showType = item.value
+ this.actions.map((item) => {
+ item.className = ''
+ })
+ item.className = 'actions-active'
+ },
+ onCancel() {
+ this.isSelectShow = false
+ },
+ getList(val) {
+ if (val.numberLength <= 2) {
+ this.title = val.arry[0].name
+ } else {
+ this.title = val.arry[val.arry.length - 1].name
+ }
+ this.sortList = val.arry
+ }
+ },
+ beforeRouteEnter(to, from, next) {
+ let {
+ params: {
+ symbol
+ }
+ } = to
+ // console.log('to', to)
+ // let catchTradeSymbol = getStorage('tradeSymbol') || null
+ // if (catchTradeSymbol != null) {
+ // symbol = catchTradeSymbol
+ // }
+ if (symbol) {
+ next(vm => {
+ vm.symbol = symbol
+ vm.init(symbol)
+ })
+ } else {
+ next()
+ }
+ },
+ activated() {
+ // if (!this.socket) {
+ // this.startQuoteSocket()
+ // }
+ },
+ deactivated() {
+ this.closeSocket()
+ this.clearTimer()
+ },
+ beforeUnmount() {
+ this.closeSocket()
+ // this.clearTimeout(true)
+ this.clearTimer()
+ }
+ }
</script>
<style lang="scss" scoped>
-@import "@/assets/init.scss";
+ .ws_box_box_box_btn{
+ font-size: 35px;
+ font-weight: bold;
+ padding-bottom: 20px;
+ }
+ .ws_box_box_box_top_img{
+ width: 30px;
+ height: 30px;
+ margin-right: 10px;
+ }
+ .ws_box_box_box_top{
+ display: flex;
+ align-items: center;
+ font-size: 30px;
+ font-weight: bold;
+ color: #8c8883;
+ }
+ .ws_box_box_box{
+ width: 50%;
+ display: flex;
+ flex-direction: column;
+ padding-top: 40px;
+ padding-left: 40px;
+ }
+ .ws_box_box{
+ display: flex;
+ }
+ .ws_box{
+ display: flex;
+ flex-direction: column;
+ background-color: #F6F7F9;
+ border-radius:24px;
+ color:#333;
+ margin:30px;
+ }
+ @import "@/assets/init.scss";
+ .tbns_mr {
+ font-weight: bold;
+ font-size: 35px;
+ text-align:center;
+ background-color: #3A7FF6;
+ color: #fff;
+ width: 350px;
+ line-height: 100px;
+ height: 100px;
+ border-radius: 50px;
+ }
+ .tbns_mc {
+ font-weight: bold;
+ font-size: 35px;
+ text-align:center;
+ background-color: #DE5D57;
+ color: #fff;
+ width: 350px;
+ line-height: 100px;
+ height: 100px;
+ border-radius: 50px;
+ }
-#cryptos {
- :v-deep(.px-4) {
- padding-left: 30px !important;
- padding-right: 30px !important;
- }
+ .btns {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ // margin: 10px;
+ width: 100%;
+ }
- :v-deep(.py-4) {
- padding-top: 30px !important;
- padding-bottom: 30px !important;
- }
+ #cryptos {
+ :v-deep(.px-4) {
+ padding-left: 30px !important;
+ padding-right: 30px !important;
+ }
+
+ :v-deep(.py-4) {
+ padding-top: 30px !important;
+ padding-bottom: 30px !important;
+ }
- //.list-enter-active, .list-leave-active {
- // transition: all .5s;
- // transform: translateY(30px)
- //}
- //.list-enter, .list-leave-to
- // /* .list-leave-active for below version 2.1.8 */ {
- // transform: translateY(0)
- //}
- :deep(.action-sheet .van-popup) {
- height: 100%;
- width: 670px;
- }
+ //.list-enter-active, .list-leave-active {
+ // transition: all .5s;
+ // transform: translateY(30px)
+ //}
+ //.list-enter, .list-leave-to
+ // /* .list-leave-active for below version 2.1.8 */ {
+ // transform: translateY(0)
+ //}
+ :deep(.action-sheet .van-popup) {
+ height: 100%;
+ width: 770px;
+ }
- .no_touch {
- -webkit-user-select: none;
- user-select: none;
- -ms-user-select: none;
- -moz-user-select: none;
- }
+ .no_touch {
+ -webkit-user-select: none;
+ user-select: none;
+ -ms-user-select: none;
+ -moz-user-select: none;
+ }
- .list-enter-active,
- .list-leave-active {
- will-change: transform;
- transition: all 250ms;
- }
+ .list-enter-active,
+ .list-leave-active {
+ will-change: transform;
+ transition: all 250ms;
+ }
- .list-enter {
- opacity: 0;
- transform: translate3d(-100%, 0, 0);
- }
+ .list-enter {
+ opacity: 0;
+ transform: translate3d(-100%, 0, 0);
+ }
- .list-leave {
- opacity: 0;
- transform: translate3d(100%, 0, 0);
- }
+ .list-leave {
+ opacity: 0;
+ transform: translate3d(100%, 0, 0);
+ }
- .rounded-view {
- border-top-left-radius: 20px;
- border-top-right-radius: 20px;
- padding: 0 30px;
- box-sizing: border-box;
- }
+ .rounded-view {
+ border-top-left-radius: 20px;
+ border-top-right-radius: 20px;
+ padding: 0 30px;
+ box-sizing: border-box;
+ }
- .my-swipe {
- width: 100%;
- }
+ .my-swipe {
+ width: 100%;
+ }
- .active-line {
- position: relative;
- // padding-bottom: 18px;
- color: #fff;
- background-color: $btn_main;
- }
+ .active-line {
+ position: relative;
+ // padding-bottom: 18px;
+ color: #fff;
+ background-color: $btn_main;
+ }
- .active-line::after {
- content: '';
- position: absolute;
- left: 0px;
- bottom: 0;
- right: 0;
- width: 100%;
- height: 4px;
- background-color: $btn_main;
- }
+ .active-line::after {
+ content: '';
+ position: absolute;
+ left: 0px;
+ bottom: 0;
+ right: 0;
+ width: 100%;
+ height: 4px;
+ background-color: $btn_main;
+ }
- .shadow-box {
- bottom: 0;
- }
-}
+ .shadow-box {
+ bottom: 0;
+ }
+ }
-.border-b {
- border-color: $border_color;
-}
+ .border-b {
+ border-color: $border_color;
+ }
-.k-select-box {
- position: relative;
- top: -30px;
- justify-content: flex-end;
- padding: 0 30px !important;
- align-items: center;
+ .k-select-box {
+ position: relative;
+ top: -30px;
+ justify-content: flex-end;
+ padding: 0 30px !important;
+ align-items: center;
- .select-box {
- width: 220px;
+ .select-box {
+ width: 220px;
- background: #f5f5f5;
+ background: #f5f5f5;
- margin-right: 20px;
- }
+ margin-right: 20px;
+ }
-}
+ }
-.z-100 {
- z-index: 100;
-}
+ .z-100 {
+ z-index: 100;
+ }
-.option-box {
- z-index: 99;
- background-color: #f5f5f5;
- box-shadow: 0px 0px 0.1875rem 0.1875rem #f5f5f5;
-}
+ .option-box {
+ z-index: 99;
+ background-color: #f5f5f5;
+ box-shadow: 0px 0px 0.1875rem 0.1875rem #f5f5f5;
+ }
-:deep(.van-action-sheet__content) {
- background: transparent;
+ :deep(.van-action-sheet__content) {
+ background: transparent;
- .van-action-sheet__item {
- background: transparent;
- color: $text_color;
- }
+ .van-action-sheet__item {
+ background: transparent;
+ color: $text_color;
+ }
-}
+ }
-:deep(.van-action-sheet__gap) {
- background: transparent;
-}
+ :deep(.van-action-sheet__gap) {
+ background: transparent;
+ }
-:deep(.van-action-sheet__cancel) {
- background: transparent;
-}
+ :deep(.van-action-sheet__cancel) {
+ background: transparent;
+ }
-.fixed-box {
- position: fixed;
- width: 100%;
- bottom: 0;
- left: 0;
- z-index: 1000;
- background: #141417;
-}
+ .fixed-box {
+ position: fixed;
+ width: 100%;
+ bottom: 0;
+ left: 0;
+ z-index: 1000;
+ background: #141417;
+ }
-.indicator-index-container {
- .indicator-index-box {
- padding: 24px;
- display: flex;
- // justify-content: space-between;
- align-items: center;
+ .indicator-index-container {
+ .indicator-index-box {
+ padding: 24px;
+ display: flex;
+ // justify-content: space-between;
+ align-items: center;
- ul {
- display: flex;
- flex-wrap: wrap;
+ ul {
+ display: flex;
+ flex-wrap: wrap;
- li {
- text-align: center;
- margin: 0 8px;
- padding: 0px 8px;
- font-size: 24px;
- border-radius: 8px;
- }
- }
+ li {
+ text-align: center;
+ margin: 0 8px;
+ padding: 0px 8px;
+ font-size: 24px;
+ border-radius: 8px;
+ }
+ }
- .flex-r {
- display: flex;
- justify-content: flex-end;
- width: 80px;
+ .flex-r {
+ display: flex;
+ justify-content: flex-end;
+ width: 80px;
- img {
- width: 12px;
- height: 16px;
- }
+ img {
+ width: 12px;
+ height: 16px;
+ }
- }
- }
+ }
+ }
- .active {
- background: $btn_main;
- }
-}
+ .active {
+ background: $btn_main;
+ }
+ }
-.indicator-index-box-second {
- ul {
- display: flex;
- border: 1px solid $border_color;
- align-items: center;
- border-right: none;
- }
+ .indicator-index-box-second {
+ ul {
+ display: flex;
+ border: 1px solid $border_color;
+ align-items: center;
+ border-right: none;
+ }
- li {
- flex: 1;
- height: 64px;
- line-height: 64px;
- text-align: center;
- font-size: 12px;
- border-right: 1px solid $border_color;
- }
-}
+ li {
+ flex: 1;
+ height: 64px;
+ line-height: 64px;
+ text-align: center;
+ font-size: 12px;
+ border-right: 1px solid $border_color;
+ }
+ }
-.kline-container {
- margin-top: 10px;
+ .kline-container {
+ margin-top: 10px;
- .order-book-container {
- padding: 100px 2px 0 6px;
- width: 130px;
- border-left: 1px solid $border_color;
- }
+ .order-book-container {
+ padding: 100px 2px 0 6px;
+ width: 130px;
+ border-left: 1px solid $border_color;
+ }
- .chart-index {
- flex: 1;
- min-width: 200px;
- }
+ .chart-index {
+ flex: 1;
+ min-width: 200px;
+ }
- .text-sm {
- position: relative;
- }
+ .text-sm {
+ position: relative;
+ }
- .select-div {
- width: 100px;
- position: absolute;
- top: 30px;
- left: 0;
- z-index: 100;
+ .select-div {
+ width: 100px;
+ position: absolute;
+ top: 30px;
+ left: 0;
+ z-index: 100;
- ul {
- box-shadow: 0px 3px 11px 0px rgb(0 0 0 / 10%);
+ ul {
+ box-shadow: 0px 3px 11px 0px rgb(0 0 0 / 10%);
- li {
- background: $mainbgWhiteColor;
- text-align: center;
- padding: 10px 0;
- font-size: 16px;
- }
+ li {
+ background: $mainbgWhiteColor;
+ text-align: center;
+ padding: 10px 0;
+ font-size: 16px;
+ }
- li:not(:last-child) {
- border-bottom: 1px solid $border-grey;
- }
- }
- }
+ li:not(:last-child) {
+ border-bottom: 1px solid $border-grey;
+ }
+ }
+ }
- .active {
- background: $btn_main !important;
- color: $text_color;
- }
-}
+ .active {
+ background: $btn_main !important;
+ color: $text_color;
+ }
+ }
-.diviLine{
- background-color: #f5f5f5;
-}
-.textColor2, .textColor{
- color: #fff;
-}
-</style>
+ .diviLine {
+ background-color: #f5f5f5;
+ }
+
+ .textColor2,
+ .textColor {
+ color: #fff;
+ }
+</style>
\ No newline at end of file
diff --git a/src/views/news/index.vue b/src/views/news/index.vue
index 0c70e77..019bc15 100644
--- a/src/views/news/index.vue
+++ b/src/views/news/index.vue
@@ -62,7 +62,7 @@
<div class="w-40 h-40 rounded-full flex items-center justify-center">
<img class="w-33 h-33" src="@/assets/a.jpg" draggable="false">
</div>
- <div class="text-center">{{ t('理财') }}</div>
+ <div class="text-center">{{t('理财')}}</div>
</div>
<div class="flex-1 flex flex-col items-center" @click="goToPage('/cryptos/trade/USDSGD')">
<div class="w-40 h-40 rounded-full flex items-center justify-center">
diff --git a/src/views/optional/index.vue b/src/views/optional/index.vue
index 3628f0a..558d1cf 100644
--- a/src/views/optional/index.vue
+++ b/src/views/optional/index.vue
@@ -13,6 +13,9 @@
<div class="flex items-center rounded-14 bg-#3640f0 px-10 ml-10" @click="goTo('/cryptos/exchangePage')">
<div class="text-13 font-bold">{{ t('兑换') }}</div>
</div>
+ <div class="flex items-center rounded-14 bg-#3640f0 px-10 ml-10" @click="goTo('/cryptos/funds')">
+ <div class="text-13 font-bold">{{ t('资产') }}</div>
+ </div>
<div class="flex flex-1 justify-end">
<!-- <img src="@/assets/imgs/icon-order.png" class="w-14 h-15" draggable="false"> -->
</div>
diff --git a/yarn.lock b/yarn.lock
index 9560802..c7444f1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1128,9 +1128,9 @@
dependencies:
"is-arrayish" "^0.2.1"
-"esbuild-darwin-64@0.15.18":
- "integrity" "sha512-2WAvs95uPnVJPuYKP0Eqx+Dl/jaYseZEUUT1sjg97TJa4oBtbAKnPnl3b5M9l51/nbx7+QAEtuummJZW0sBEmg=="
- "resolved" "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.15.18.tgz"
+"esbuild-windows-64@0.15.18":
+ "integrity" "sha512-qinug1iTTaIIrCorAUjR0fcBk24fjzEedFYhhispP8Oc7SFvs+XeW3YpAKiKp8dRpizl4YYAhxMjlftAMJiaUw=="
+ "resolved" "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.15.18.tgz"
"version" "0.15.18"
"esbuild@^0.15.9":
@@ -1420,11 +1420,6 @@
"integrity" "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
"resolved" "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
"version" "1.0.0"
-
-"fsevents@~2.3.2":
- "integrity" "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="
- "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
- "version" "2.3.2"
"function-bind@^1.1.1":
"integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
--
Gitblit v1.9.3