<template>
|
<section class="pb-fix">
|
<div class="container-box">
|
<header class="header">
|
<div class="flex-l">
|
<span class="title">{{ t('trade') }}</span>
|
</div>
|
</header>
|
<section class="tab-container">
|
<van-tabs v-model:active="tabActive" shrink @click-tab="onClickTab">
|
<!-- <van-tab title="ETF">
|
<div class="content-container">
|
<div class="user-info px-4 mt-4">
|
<div class="mt-8 flex"><img class="w-24 h-24" src="../../assets/image/avatar.png" alt="avatar" />
|
<div class="ml-2 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 ID mt-1 flex items-center">
|
ID：{{ userStore.userInfo && userStore.userInfo.usercode }}<img class="w-8 h-8 ml-4"
|
src="../../assets/image/idcopy.png" alt="id" @click="copy" /></div>
|
</div>
|
</div>
|
</div>
|
<div class="asset">
|
<div class="line">
|
<div class="flex-l">
|
<p>{{ t('ETFTotalAssets') }}</p>
|
<p class="value">{{ currency.currency_symbol }}{{ assets.sumPrice ? (assets.sumPrice *
|
(currency.rate ?? 0)).toFixed(2) : '0.00' }}</p>
|
</div>
|
<div class="flex-r">
|
<p>{{ t('ETFFloatingProfitAndLoss') }}</p>
|
<p class="profit red">{{ currency.currency_symbol }}{{ assets.profitLoss ? (assets.profitLoss *
|
(currency.rate ?? 0)).toFixed(2) : '0.00' }}</p>
|
</div>
|
</div>
|
<div class="line">
|
<div class="flex-l">
|
<p>{{ t('ETFAvailableBalance') }}</p>
|
<p class="value">{{ currency.currency_symbol }}{{ assets.sumVolume ? (assets.sumVolume *
|
(currency.rate ?? 0)).toFixed(2) : '0.00' }}</p>
|
</div>
|
<div class="flex-r">
|
<p>{{ t('ETFTheDay') }}</p>
|
<p class="profit red">{{ currency.currency_symbol }}{{ assets.toDayProfitLoss ?
|
(assets.toDayProfitLoss *
|
(currency.rate ?? 0)).toFixed(2) : '0.00' }}</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</van-tab> -->
|
<van-tab :title="t('加密货币')">
|
<div class="content-container">
|
<div class="user-info px-4 mt-4">
|
<div class="mt-8 flex"><img class="w-24 h-24" src="../../assets/image/avatar.png" alt="avatar" />
|
<div class="ml-2 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 ID mt-1 flex items-center">
|
ID：{{ userStore.userInfo && userStore.userInfo.usercode }}<img class="w-8 h-8 ml-4"
|
src="../../assets/image/idcopy.png" alt="id" @click="copy" /></div>
|
</div>
|
</div>
|
</div>
|
<div class="asset">
|
<div class="line">
|
<div class="flex-l">
|
<p>{{ t('TotalCryptocurrencyAssets') }}</p>
|
<p class="value">{{ currency.currency_symbol }}{{ forexAssets?.money_contract ?
|
(forexAssets?.money_contract * (currency.rate ?? 0)).toFixed(2) : '0.00' }}</p>
|
</div>
|
<div class="flex-r">
|
<p>{{ t('AmoCryptoLssunt') }}</p>
|
<p class="profit red">{{ currency.currency_symbol }}{{ forexAssets?.money_contract_profit ?
|
(forexAssets?.money_contract_profit * (currency.rate ?? 0)).toFixed(2) : '0.00' }}
|
</p>
|
</div>
|
</div>
|
<div class="line">
|
<div class="flex-l">
|
<p>{{ t('CryptocurrenciesBalance') }}</p>
|
<p class="value">{{ currency.currency_symbol }}{{ forexAssets?.money_wallet ?
|
(forexAssets?.money_wallet * (currency.rate ?? 0)).toFixed(2) : '0.00' }}</p>
|
</div>
|
<div class="flex-r">
|
<p>{{ t('Cryptocurrencyday') }}</p>
|
<p class="profit red">{{ currency.currency_symbol }}{{ forexAssets?.money_contract_profit_today ?
|
(forexAssets?.money_contract_profit_today * (currency.rate ?? 0)).toFixed(2) :
|
'--' }}</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</van-tab>
|
<!-- <van-tab :title="t('外汇')">
|
<div class="content-container">
|
<div class="user-info px-4 mt-4">
|
<div class="mt-8 flex"><img class="w-24 h-24" src="../../assets/image/avatar.png" alt="avatar" />
|
<div class="ml-2 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 ID mt-1 flex items-center">
|
ID：{{ userStore.userInfo && userStore.userInfo.usercode }}<img class="w-8 h-8 ml-4"
|
src="../../assets/image/idcopy.png" alt="id" @click="copy" /></div>
|
</div>
|
</div>
|
</div>
|
<div class="asset">
|
<div class="line">
|
<div class="flex-l">
|
<p>{{ t('TotalForeignExchangeAssets') }}</p>
|
<p class="value">{{ currency.currency_symbol }}{{ forexAssets?.money_contract ?
|
(forexAssets?.money_contract * (currency.rate ?? 0)).toFixed(2) : '0.00' }}</p>
|
</div>
|
<div class="flex-r">
|
<p>{{ t('ForeignExchangeLoss') }}</p>
|
<p class="profit red">{{ currency.currency_symbol }}{{ forexAssets?.money_contract_profit ?
|
(forexAssets?.money_contract_profit * (currency.rate ?? 0)).toFixed(2) : '0.00' }}</p>
|
</div>
|
</div>
|
<div class="line">
|
<div class="flex-l">
|
<p>{{ t('foreignBlance') }}</p>
|
<p class="value">{{ currency.currency_symbol }}{{ forexAssets?.money_wallet ?
|
(forexAssets?.money_wallet * (currency.rate ?? 0)).toFixed(2) : '0.00' }}</p>
|
</div>
|
<div class="flex-r">
|
<p>{{ t('ForeignDay') }}</p>
|
<p class="profit red">{{ currency.currency_symbol }}{{ forexAssets?.money_contract_profit_today ?
|
(forexAssets?.money_contract_profit_today * (currency.rate ?? 0)).toFixed(2) : '0.00' }}</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</van-tab> -->
|
<!-- <van-tab :title="t('UsStocks')">
|
<div class="content-container">
|
<div class="user-info px-4 mt-4">
|
<div class="mt-8 flex"><img class="w-24 h-24" src="../../assets/image/avatar.png" alt="avatar" />
|
<div class="ml-2 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 ID mt-1 flex items-center">
|
ID：{{ userStore.userInfo && userStore.userInfo.usercode }}<img class="w-8 h-8 ml-4"
|
src="../../assets/image/idcopy.png" alt="id" @click="copy" /></div>
|
</div>
|
</div>
|
</div>
|
<div class="asset">
|
<div class="line">
|
<div class="flex-l">
|
<p>{{ t('USStockTotalAssets') }}</p>
|
<p class="value">{{ currency.currency_symbol }}{{ assets.sumPrice ? (assets.sumPrice *
|
(currency.rate ?? 0)).toFixed(2) : '0.00' }}</p>
|
</div>
|
<div class="flex-r">
|
<p>{{ t('USStockLoss') }}</p>
|
<p class="profit red">{{ currency.currency_symbol }}{{ assets.profitLoss ? (assets.profitLoss *
|
(currency.rate ?? 0)).toFixed(2) : '0.00' }}</p>
|
</div>
|
</div>
|
<div class="line">
|
<div class="flex-l">
|
<p>{{ t('USStockBalance') }}</p>
|
<p class="value">{{ currency.currency_symbol }}{{ assets.sumVolume ? (assets.sumVolume *
|
(currency.rate ?? 0)).toFixed(2) : '0.00' }}</p>
|
</div>
|
<div class="flex-r">
|
<p>{{ t('USStockProfitDay') }}</p>
|
<p class="profit red">{{ currency.currency_symbol }}{{ assets.toDayProfitLoss ?
|
(assets.toDayProfitLoss * (currency.rate ?? 0)).toFixed(2) : '0.00' }}</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</van-tab> -->
|
<!-- <van-tab :title="t('期权')"></van-tab> -->
|
</van-tabs>
|
</section>
|
<section class="content-container">
|
<ex-nav :symbolType="symbolType" />
|
<div class="quickly">
|
<div class="quickBox chongbi dark" @click="$router.push('/exchange/channel-in')">
|
<div class="left">
|
<div class="leftBox"><img src="@/assets/theme/dark/image/chongicon.png" alt=""></div>
|
<div class="leftCont">
|
<p style="max-width:100px;">{{ $t("快捷充值") }}</p>
|
</div>
|
</div>
|
<div class="right"><img src="@/assets/theme/dark/image/goto.png" alt=""></div>
|
</div>
|
<div class="quickBox tibi ml-10 dark" @click="$router.push('/exchange/channel-out')">
|
<div class="left">
|
<div class="leftBox"><img src="@/assets/theme/dark/image/tiicon.png" alt=""></div>
|
<div class="leftCont">
|
<p style="max-width:100px;">{{ $t("FastWithdrawal") }}</p>
|
</div>
|
</div>
|
<div class="right"><img src="@/assets/theme/dark/image/goto.png" alt=""></div>
|
</div>
|
</div>
|
</section>
|
<div class="indicator-index-container">
|
<div class="indicator-index-box">
|
<div class="flex-l">
|
<ul>
|
<li :class="{ 'active': navActive === index }" v-for="(item, index) in navTabList" :key="index"
|
@click="handleChangeNav(index)">{{ item.text }}</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
<!-- <section class="etf-container"> -->
|
<!-- <div class="all-etf-ranking" v-if="tabActive === 0 || tabActive === 3">
|
<div class="etf-table">
|
<ul v-if="navActive === 0">
|
<li class="title-line">
|
<div class="flex-l">
|
<p>{{ t('marketValue') }}</p>
|
</div>
|
<div class="flex-r">
|
<div class="flex-r-item">
|
<p>{{ t('盈亏') }}</p>
|
</div>
|
<div class="flex-r-item">
|
<p>{{ t('openAvailable') }}</p>
|
</div>
|
<div class="flex-r-item">
|
<p>{{ t('costCurrentPrice') }}</p>
|
</div>
|
</div>
|
</li>
|
</ul>
|
<ul v-if="navActive === 1">
|
<li class="title-line">
|
<div class="flex-l">
|
<p>{{ t('委托时间') }}</p>
|
</div>
|
<div class="flex-r">
|
<div class="flex-r-item">
|
<p>{{ t('EntrustmentTransactionPrice') }}</p>
|
</div>
|
<div class="flex-r-item">
|
<p>{{ t('OrderQuantity') }}</p>
|
</div>
|
<div class="flex-r-item">
|
<p>{{ t('状态') }}</p>
|
</div>
|
<div class="flex-r-item">
|
<p>{{ t('操作') }}</p>
|
</div>
|
</div>
|
</li> -->
|
<!-- <div class="flex flex-col justify-center pt-50 pb-20 items-center" v-if="etfList.length === 0">
|
<img src="@/assets/image/assets-center/no-data.png" alt="" class="no-data-img" />
|
<p class="text-grey mt-10">{{ $t('暂无记录') }}</p>
|
</div>
|
<li v-for="(item) in etfList" :key="item.symbol" @click="itemClickOneOrThirdly(item, 1)" v-else>
|
<div class="flex-l">
|
<p>{{ item.symbol }}</p>
|
<p class="gray-text">
|
<span class="tip-text" :class="item.open === 'close' ? 'text-down' : 'text-up'">{{ item.offset ===
|
'open' ? t('买') : t('卖')
|
}}</span>
|
{{ item.create_time_ts ? dayjs(item.create_time_ts * 1000).format('YYYY-MM-DD HH:mm:ss').slice(11) :
|
'--' }}
|
</p>
|
</div>
|
<div class="flex-r">
|
<div class="flex-r-item">
|
<p :class="item.open < 1 ? 'text-up' : 'text-down'">{{
|
item.price
|
}}</p>
|
<p :class="item.open < 1 ? 'text-up' : 'text-down'">{{
|
item.closePrice
|
}}</p>
|
</div>
|
<div class="flex-r-item">
|
<p :class="item.close < 1 ? 'text-up' : 'text-down'">{{
|
item.volume
|
}}</p>
|
</div>
|
<div class="flex-r-item">
|
<p>{{ item.state === 'created' ? t('createdNew') : t(`${item.state}`) }}</p>
|
</div>
|
<div class="flex-r-item operate-btn" @click="cancelSingle(item.order_no)">
|
<span>{{
|
t('撤单')
|
}}</span>
|
</div>
|
</div>
|
</li> -->
|
<!-- </ul>
|
<ul v-if="navActive === 2">
|
<li class="title-line">
|
<div class="flex-l">
|
<p>{{ t('成交时间') }}</p>
|
</div>
|
<div class="flex-r">
|
<div class="flex-r-item">
|
<p>{{ t('成交价格') }}</p>
|
</div>
|
<div class="flex-r-item">
|
<p>{{ t('成交量') }}</p>
|
</div>
|
<div class="flex-r-item">
|
<p>{{ t('状态') }}</p>
|
</div>
|
</div>
|
</li>
|
</ul>
|
<ul v-if="navActive === 3">
|
<li class="title-line">
|
<div class="flex-l flex items-center">
|
<p>{{ t('stockCode') }}</p>
|
</div>
|
<div class="flex-r">
|
<div class="flex-r-item">
|
<p>{{ t('现价') }}</p>
|
</div>
|
<div class="flex-r-item">
|
<p>{{ t('涨跌幅') }}</p>
|
</div>
|
<div class="flex-r-item">
|
<p>{{ t('changeHands') }}</p>
|
</div>
|
<div class="flex-r-item">
|
<p>{{ t('aavolumeRatioa') }}</p>
|
</div>
|
</div>
|
</li>
|
</ul>
|
<ul v-if="etfList.length !== 0">
|
<li v-for="(item) in etfList" :key="item.symbol" @click="itemClickOneOrThirdly(item, navActive)">
|
<template v-if="navActive == 0">
|
<div class="flex-l">
|
<p>{{ item.symbol }}</p>
|
<p class="gray-text">{{ item.marketValue }}</p>
|
</div>
|
<div class="flex-r">
|
<div class="flex-r-item">
|
<p :class="item.profitLoss < 1 ? 'text-up' : 'text-down'">{{
|
item.profitLoss
|
}}</p>
|
<p :class="item.profitLossPercentage < 1 ? 'text-up' : 'text-down'">{{
|
item.profitLossPercentage && item.profitLossPercentage !== 0 ? `${item.profitLossPercentage}%` : 0
|
}}</p>
|
</div>
|
<div class="flex-r-item">
|
<p :class="item.close < 1 ? 'text-up' : 'text-down'">{{
|
item.positionVolume
|
}}</p>
|
<p :class="item.close < 1 ? 'text-up' : 'text-down'">{{
|
item.volume
|
}}</p>
|
</div>
|
<div class="flex-r-item">
|
<p :class="item.close < 1 ? 'text-up' : 'text-down'">{{
|
item.price
|
}}</p>
|
<p :class="item.close < 1 ? 'text-up' : 'text-down'">{{
|
item.currentPrice
|
}}</p>
|
</div>
|
</div>
|
</template>
|
<template v-if="navActive == 1">
|
<div class="flex-l">
|
<p>{{ item.symbol }}</p>
|
<p class="gray-text">
|
<span class="tip-text" :class="item.open === 'close' ? 'text-down' : 'text-up'">{{ item.offset ===
|
'open' ? t('买') : t('卖')
|
}}</span>
|
{{ item.create_time_ts ? dayjs(item.create_time_ts * 1000).format('YYYY-MM-DD HH:mm:ss').slice(11) :
|
'--' }}
|
</p>
|
</div>
|
<div class="flex-r">
|
<div class="flex-r-item">
|
<p :class="item.open < 1 ? 'text-up' : 'text-down'">{{
|
item.price
|
}}</p>
|
<p :class="item.open < 1 ? 'text-up' : 'text-down'">{{
|
item.closePrice
|
}}</p>
|
</div>
|
<div class="flex-r-item">
|
<p :class="item.close < 1 ? 'text-up' : 'text-down'">{{
|
item.volume
|
}}</p>
|
</div>
|
<div class="flex-r-item">
|
<p>{{ item.state === 'created' ? t('createdNew') : t(item.state) }}</p>
|
</div>
|
<div class="flex-r-item operate-btn" @click="cancelSingle(item.order_no)">
|
<span>{{
|
t('撤单')
|
}}</span>
|
</div>
|
</div>
|
</template>
|
<template v-if="navActive == 2">
|
<div class="flex-l">
|
<p>{{ item.symbol }}</p>
|
<p class="gray-text">
|
<span class="tip-text" :class="item.open === 'close' ? 'text-down' : 'text-up'">{{ item.offset ===
|
'open' ? t('买') : t('卖')
|
}}</span>
|
{{ item.create_time_ts ? dayjs(item.create_time_ts * 1000).format('YYYY-MM-DD HH:mm:ss').slice(11) :
|
'--' }}
|
</p>
|
</div>
|
<div class="flex-r">
|
<div class="flex-r-item">
|
<p :class="item.open < 1 ? 'text-up' : 'text-down'">{{
|
item.price
|
}}</p>
|
</div>
|
<div class="flex-r-item">
|
<p :class="item.close < 1 ? 'text-up' : 'text-down'">{{
|
item.volume
|
}}</p>
|
</div>
|
<div class="flex-r-item">
|
<p>{{ item.state === 'created' ? t('委托完成') : t(item.state) }}</p>
|
</div>
|
</div>
|
</template>
|
<template v-if="navActive == 3">
|
<div class="flex-l">
|
<p>{{ item.name }}</p>
|
<p class="gray-text">{{ item.symbol }}</p>
|
</div>
|
<div class="flex-r">
|
<div class="flex-r-item">
|
<p :class="item.close < 200 ? 'text-up' : 'text-down'">{{
|
item.close
|
}}</p>
|
</div>
|
<div class="flex-r-item">
|
<p :class="item.changeRatio < 1 ? 'text-up' : 'text-down'">{{
|
item.changeRatio === 0 ? 0 : item.changeRatio ? item.changeRatio + '%' : '--'
|
}}</p>
|
</div>
|
<div class="flex-r-item">
|
<p>{{
|
item.turnoverRate === 0 ? 0 : item.turnoverRate ? item.turnoverRate + '%' : '--'
|
}}</p>
|
</div>
|
<div class="flex-r-item" :class="item.volumeRatio < 0.5 ? 'text-up' : 'text-down'">
|
<p>{{
|
item.volumeRatio === 0 ? 0 : item.volumeRatio ? item.volumeRatio + '%' : '--'
|
}}</p>
|
</div>
|
</div>
|
</template>
|
</li>
|
</ul>
|
<div class="flex flex-col justify-center pt-50 pb-20 items-center" v-else>
|
<img src="@/assets/image/assets-center/no-data.png" alt="" class="no-data-img" />
|
<p class="text-grey mt-10">{{ $t('暂无记录') }}</p>
|
</div>
|
</div>
|
</div>
|
</section> -->
|
<div class="symbol-list">
|
<div class="flex flex-col justify-center pt-50 pb-20 items-center" v-if="symbolList.length === 0">
|
<img src="@/assets/image/assets-center/no-data.png" alt="" class="no-data-img" />
|
<p class="text-grey mt-10">{{ $t('暂无记录') }}123</p>
|
</div>
|
<ul v-else>
|
<li class="symbol-list-item" v-for="item in symbolList" :key="item" @click="itemClickSecondOrFourth(item)">
|
<div class="symbol-list-top">
|
<div class="item-l flex-1">
|
<p class="symbol-name">{{ item.symbol }}</p>
|
<p class="price-change" v-if="navActive !== 1">
|
<span class="price-l">{{ item.trade_avg_price }}</span>
|
<span class="arrow">→</span>
|
<span
|
:class="{ 'price-r': true, 'green': (item.mark_price - item.trade_avg_price) > 0, 'red': (item.mark_price - item.trade_avg_price) < 0 }">{{
|
item.mark_price }}</span>
|
</p>
|
<p class="price-change" v-else>
|
<span class="price-l">{{ item.price }}</span>
|
<span class="arrow">→</span>
|
<span
|
:class="{ 'price-r': true, 'green': (item.mark_price - item.price) > 0, 'red': (item.mark_price - item.price) < 0 }">{{
|
item.mark_price ?? '--' }}</span>
|
</p>
|
</div>
|
<div class="item-r flex-1">
|
<p class="tile">{{ item?.order_price_type === 'opponent' ? t('市价') : t("限价") }}</p>
|
<div class="volume-box">
|
<div
|
:class="{ 'volume': true, 'green-border': item.direction === 'buy', 'red-border': item.direction !== 'buy' }">
|
<span
|
:class="{ 'volume-l': true, 'green-bg': item.direction === 'buy', 'red-bg': item.direction !== 'buy' }">{{
|
item.direction == 'buy' ? t('Buy') : t('Sell') }}</span>
|
<span
|
:class="{ 'volume-r': true, 'green': item.direction === 'buy', 'red': item.direction !== 'buy' }">
|
{{ `${item.volume_open / (item.lever_rate ?? 1)} * ${(item.lever_rate ?? 1)} x` }} {{ t('volume')
|
}}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="symbol-list-bottom">
|
<div class="bottom-l flex-1">
|
<div class="order-info">
|
<p class="margin">{{ t('margin') }}: {{ item.deposit }}</p>
|
<p class="id">{{ t('orderId') }}: #{{ item.order_no }}</p>
|
<p class="date">{{ item.create_time }}</p>
|
</div>
|
</div>
|
<div class="bottom-r">
|
<p :class="{ 'profit-num': true, 'green': item.profit > 0, 'red': item.profit < 0 }">{{ item.profit }}
|
</p>
|
</div>
|
</div>
|
</li>
|
</ul>
|
</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 {
|
_getETFList,
|
_getETFSum,
|
_contractOrder,
|
_contractApplyOrder,
|
getExchangeApplyHisList,
|
getExchangeApplyOrderList,
|
_getOptionalList,
|
_getContractBySymbolType
|
} from "@/service/etf.api";
|
import { watch } from 'vue';
|
import TradeApi from "@/service/trading.js";
|
import { _getExchangeRate } from '@/service/cryptos.api'
|
import dayjs from 'dayjs'
|
import store from '@/store/store'
|
|
const { t } = useI18n()
|
const { toClipboard } = useClipboard();
|
const router = useRouter()
|
const route = useRoute()
|
const defaultTabActive = +route.query.tabActive || 0
|
const tabActive = ref(defaultTabActive)
|
const navActive = ref(0)
|
const userStore = useUserStore()
|
const symbolType = ref('cryptos') //默认etf
|
const etfList = ref([])
|
const symbolList = ref([])
|
const assets = ref({})
|
const forexAssets = ref({})
|
const currency = ref({})
|
|
const navTabV1 = ref([{
|
text: t('持仓'), index: 0,
|
}, {
|
text: t('entrust'), index: 1,
|
}, {
|
text: t('成交'), index: 2,
|
}, {
|
text: t('自选'), index: 3,
|
}
|
])
|
|
const navTabV2 = ref([{
|
text: t('持仓'), index: 0,
|
}, {
|
text: t('entrustOrder'), index: 1,
|
}, {
|
text: t('历史记录'), index: 2,
|
}
|
])
|
const navTabList = computed(() => {
|
// return [1, 2].includes(tabActive.value) ? navTabV2.value : navTabV1.value
|
return [1, 2].includes(tabActive.value) ? navTabV2.value : navTabV2.value
|
})
|
|
const getCurrency = async () => {
|
_getExchangeRate({
|
token: store.state.user.userInfo.token
|
}).then(res => {
|
currency.value = res
|
}).catch(err => Promise.reject(err))
|
}
|
|
onMounted(async () => {
|
console.log(store)
|
setSomeBackParams()
|
getETFList()
|
getETFSum()
|
getCurrency()
|
getContractOrder()
|
getContractBySymbolType()
|
// interval.value = setInterval(() => {
|
// getETFItemList()
|
// }, 1000)
|
})
|
|
onBeforeUnmount(() => {
|
// if (interval.value) {
|
// clearInterval(interval.value)
|
// }
|
})
|
|
watch(symbolType, (newVal, oldVal) => {
|
if (newVal === 'indices' || newVal === 'US-stocks') {
|
getETFList()
|
getETFSum()
|
} else {
|
// getContractOrder()
|
// getContractBySymbolType()
|
}
|
})
|
|
const handleChangeNav = (index) => {
|
navActive.value = index
|
etfList.value = []
|
console.log(index);
|
// getContractOrder()
|
if(index==0){
|
getContractOrder()
|
}else if(index==1){
|
getContractApplyOrder()
|
}else{
|
getHisContractOrder()
|
}
|
// 加密货币&外汇
|
// if ([1, 2].includes(tabActive.value)) {
|
// switch (index) {
|
// case 0:
|
// getContractOrder()
|
// break;
|
// case 1:
|
// getContractApplyOrder()
|
// break;
|
// case 2:
|
// getHisContractOrder()
|
// break;
|
// default:
|
// break;
|
// }
|
// } else {
|
// switch (index) {
|
// case 0:
|
// getETFList()
|
// break;
|
// case 1:
|
// getETFOrderList()
|
// break;
|
// case 2:
|
// getETFHisList()
|
// break;
|
// case 3:
|
// getOptionalList()
|
// break;
|
// default:
|
// break;
|
// }
|
// }
|
}
|
|
const getETFList = () => {
|
_getETFList(symbolType.value).then(data => {
|
etfList.value = data ?? []
|
})
|
}
|
|
// 成交列表
|
const getETFHisList = () => {
|
getExchangeApplyHisList(symbolType.value).then(data => {
|
etfList.value = data ?? []
|
})
|
}
|
|
// 委托列表
|
const getETFOrderList = () => {
|
getExchangeApplyOrderList(symbolType.value).then(data => {
|
etfList.value = data ?? []
|
})
|
}
|
|
const getETFSum = () => {
|
_getETFSum(symbolType.value).then(data => {
|
assets.value = data
|
})
|
}
|
|
const getOptionalList = () => {
|
_getOptionalList(symbolType.value).then(data => {
|
etfList.value = data ?? []
|
})
|
}
|
|
|
const getContractOrder = () => {
|
let obj = {
|
type: 'orders',
|
page_no: 1,
|
page_size: 'all',
|
symbolType: symbolType.value,
|
}
|
_contractOrder(obj).then((res) => {
|
symbolList.value = res ?? []
|
})
|
}
|
|
// 历史
|
const getHisContractOrder = () => {
|
let obj = {
|
type: 'hisorders',
|
page_no: 1,
|
page_size: 'all',
|
symbolType: symbolType.value,
|
}
|
_contractOrder(obj).then((res) => {
|
symbolList.value = res ?? []
|
})
|
}
|
|
// 委托列表
|
const getContractApplyOrder = () => {
|
let obj = {
|
type: 'orders',
|
page_no: 1,
|
page_size: 'all',
|
symbolType: symbolType.value,
|
}
|
_contractApplyOrder(obj).then((res) => {
|
symbolList.value = res ?? []
|
})
|
}
|
|
// 获取资产
|
const getContractBySymbolType = () => {
|
_getContractBySymbolType(symbolType.value)
|
.then(res => {
|
forexAssets.value = res
|
})
|
}
|
|
const copy = async () => {
|
try {
|
await toClipboard(userStore.userInfo && userStore.userInfo.usercode);
|
showToast(t('copySuccess'));
|
} catch (e) {
|
console.error(e);
|
}
|
}
|
|
// 跳转回来的一些反显参数
|
//标记
|
const setSomeBackParams = () => {
|
switch (tabActive.value) {
|
case 0:
|
// symbolType.value = 'indices';
|
symbolType.value = 'cryptos';
|
break;
|
case 1:
|
symbolType.value = 'cryptos';
|
break;
|
case 2:
|
symbolType.value = 'forex';
|
break;
|
case 3:
|
symbolType.value = 'US-stocks';
|
break;
|
default:
|
break
|
}
|
}
|
|
const onClickTab = ({ name }) => {
|
tabActive.value = name
|
navActive.value = 0
|
switch (name) {
|
case 0:
|
symbolType.value = 'indices';
|
break;
|
case 1:
|
symbolType.value = 'cryptos';
|
break;
|
case 2:
|
symbolType.value = 'forex';
|
break;
|
case 3:
|
symbolType.value = 'US-stocks';
|
break;
|
default:
|
break
|
}
|
};
|
|
const itemClickOneOrThirdly = (item, index) => {
|
switch (index) {
|
case 0:
|
switch (symbolType.value) {
|
case 'indices':
|
router.push(`/quotes/openTrade?tabActive=3&symbol=${item.symbol}&from=trade&type=indices&tradeTabActive=0&navActive=0`)
|
break;
|
case 'US-stocks':
|
router.push(`/quotes/openTrade?tabActive=3&symbol=${item.symbol}&from=trade&type=US-stocks&tradeTabActive=3&navActive=0`)
|
break;
|
}
|
break;
|
case 1:
|
switch (symbolType.value) {
|
case 'indices':
|
router.push(`/quotes/openTrade?tabActive=4&symbol=${item.symbol}&from=trade&type=indices&tradeTabActive=0&navActive=1`)
|
break;
|
case 'US-stocks':
|
router.push(`/quotes/openTrade?tabActive=4&symbol=${item.symbol}&from=trade&type=US-stocks&tradeTabActive=3&navActive=1`)
|
break;
|
}
|
break;
|
case 2:
|
switch (symbolType.value) {
|
case 'indices':
|
router.push(`/quotes/openTrade?tabActive=4&symbol=${item.symbol}&from=trade&type=indices&tradeTabActive=0&navActive=2&selectIndex=2`)
|
break;
|
case 'US-stocks':
|
router.push(`/quotes/openTrade?tabActive=4&symbol=${item.symbol}&from=trade&type=US-stocks&tradeTabActive=3&navActive=2&selectIndex=2`)
|
break;
|
}
|
break;
|
case 3:
|
switch (symbolType.value) {
|
case 'indices':
|
router.push(`/quotes/detail?symbol=${item.symbol}&from=trade&type=indices&tradeTabActive=0&navActive=3`)
|
break;
|
case 'US-stocks':
|
router.push(`/quotes/usStockDetail?symbol=${item.symbol}&from=trade&type=US-stocks&tradeTabActive=3&navActive=3`)
|
break;
|
}
|
break;
|
}
|
}
|
|
const itemClickSecondOrFourth = (item) => {
|
console.log(tabActive.value);
|
tabActive.value = 1
|
// 加密货币
|
if (tabActive.value === 1) {
|
switch (navActive.value) {
|
case 0:
|
router.push(`/cryptos/perpetualContract/${item.symbol}?from=trade&type=cryptos&tradeTabActive=1&navActive=0`)
|
break;
|
case 1:
|
router.push(`/cryptos/perpetualContract/${item.symbol}?from=trade&type=cryptos&tradeTabActive=1&navActive=1`)
|
break;
|
case 2:
|
router.push(`/cryptos/perpetualHistory?symbol=${item.symbol}&type=cryptos&from=trade&tradeTabActive=1&navActive=2`)
|
break;
|
}
|
} else if (tabActive.value === 2) {
|
// 外汇
|
switch (navActive.value) {
|
case 0:
|
router.push(`/position/index?symbol=${item.symbol}&from=trade&type=forex&tabIndex=0&tradeTabActive=2&navActive=0`)
|
break;
|
case 1:
|
router.push(`/position/index?symbol=${item.symbol}&from=trade&type=forex&tabIndex=1&tradeTabActive=2&navActive=1`)
|
break;
|
case 2:
|
router.push(`/history/list?symbol=${item.symbol}&from=trade&type=forex&tradeTabActive=2&navActive=2`)
|
break;
|
}
|
}
|
}
|
|
const cancelSingle = (order) => {
|
console.log('order:', order)
|
TradeApi.tradeCancel({
|
order_no: order,
|
}).then(res => {
|
console.log(res, 'res')
|
showToast(this.$t('成功'))
|
}).catch(() => {
|
|
})
|
}
|
|
</script>
|
<style lang="scss" scoped>
|
:deep(.van-tabs__nav) {
|
background: $selectSymbol_background;
|
}
|
|
:deep(.van-tab) {
|
font-size: 14px;
|
color: $text_color;
|
font-weight: 400;
|
}
|
|
:deep(.van-tab.van-tab--active) {
|
font-weight: 700;
|
}
|
|
.operate-btn {
|
width: 49px;
|
height: 20px;
|
line-height: 20px;
|
background: #1B2134;
|
text-align: center;
|
color: #818181;
|
font-family: 'Helvetica';
|
font-style: normal;
|
font-weight: 400;
|
font-size: 11px;
|
}
|
|
.container-box {
|
.green {
|
color: $green;
|
}
|
|
.red {
|
color: $red;
|
}
|
|
.header {
|
display: flex;
|
height: 28px;
|
padding: 0 12px;
|
|
.flex-l {
|
flex: 1;
|
display: inline-flex;
|
|
.icon {
|
display: inline-block;
|
width: 24px;
|
height: 28px;
|
padding: 6px 4px;
|
|
img {
|
height: 16px;
|
width: 12px;
|
}
|
}
|
}
|
|
.title {
|
font-weight: 700;
|
font-size: 20px;
|
line-height: 28px;
|
color: $mainTextColor;
|
}
|
}
|
|
.tab-container {
|
margin-top: 18px;
|
}
|
|
.no-data-img {
|
margin-top: 20px;
|
width: 100px;
|
height: 100px;
|
}
|
|
.content-container {
|
padding: 0 12px;
|
|
.name {
|
font-size: 14px;
|
}
|
|
.ID {
|
font-size: 12px;
|
}
|
|
.line {
|
padding: 14px 12px;
|
display: flex;
|
align-items: center;
|
font-size: 12px;
|
line-height: 18px;
|
|
.gray-text {
|
color: #BCBDC2;
|
font-size: 12px;
|
}
|
|
.value {
|
margin-top: 10px;
|
font-weight: 700;
|
font-size: 20px;
|
line-height: 24x;
|
color: $text_color;
|
}
|
|
.profit {
|
margin-top: 10px;
|
font-size: 14px;
|
}
|
|
.flex-l {
|
flex: 1;
|
}
|
|
.flex-r {
|
flex: 1;
|
text-align: right;
|
}
|
}
|
}
|
}
|
|
.indicator-index-container {
|
.indicator-index-box {
|
padding: 12px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.flex-l {
|
flex: 1;
|
|
ul {
|
display: flex;
|
|
li {
|
flex: 1;
|
text-align: center;
|
margin: 0 4px;
|
font-size: 12px;
|
border-radius: 4px;
|
}
|
}
|
}
|
|
.flex-r {
|
display: flex;
|
justify-content: flex-end;
|
width: 80px;
|
|
img {
|
width: 12px;
|
height: 16px;
|
}
|
|
}
|
}
|
|
.active {
|
background: $btn_main;
|
}
|
}
|
|
.quickly {
|
width: 100%;
|
height: 72px;
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 32px;
|
|
.quickBox {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 8px;
|
border-radius: 6px;
|
border: 1px solid $color_main;
|
|
.left {
|
display: flex;
|
align-items: center;
|
flex: 1;
|
|
|
.leftBox {
|
width: 50px;
|
height: 50px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
|
.leftCont {
|
margin-left: 12px;
|
|
p {
|
font-size: 12px;
|
color: $text_color;
|
line-height: 18px;
|
}
|
}
|
|
.right {
|
width: 16px;
|
height: 16px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
|
.chongbi {
|
background: url('@/assets/theme/white/image/chongb.png');
|
background-size: cover;
|
|
&.dark {
|
background: url('@/assets/theme/dark/image/chongb.png');
|
background-size: cover;
|
}
|
}
|
|
.tibi {
|
background: url('@/assets/theme/white/image/tib.png');
|
background-size: cover;
|
|
&.dark {
|
background: url('@/assets/theme/dark/image/tib.png');
|
background-size: cover;
|
}
|
}
|
}
|
|
.etf-container {
|
padding: 0;
|
|
.hot-container {
|
margin: 20px 0;
|
padding: 0 8px;
|
|
.header-box {
|
display: flex;
|
|
.title {
|
flex: 1;
|
font-size: 16px;
|
padding: 0 8px;
|
font-weight: 700;
|
}
|
|
.icon-group {
|
display: flex;
|
align-items: center;
|
|
.icon.arrow {
|
margin-left: 10px;
|
width: 7px;
|
height: 9px;
|
}
|
}
|
|
}
|
|
.hot-box {
|
display: grid;
|
grid-template-columns: 33.33% 33.33% 33.33%;
|
grid-template-rows: repeat(2, 100px);
|
}
|
|
.hot-item {
|
padding: 6px 2px;
|
margin: 4px;
|
text-align: center;
|
font-size: 12px;
|
line-height: 18px;
|
color: #B8BDD1;
|
background: #1B2134;
|
border-radius: 4px;
|
|
.value {
|
font-weight: 700;
|
color: $text_color;
|
line-height: 24px;
|
}
|
|
.num {
|
.num-left {
|
margin-right: 6px;
|
}
|
}
|
}
|
}
|
|
.all-etf-ranking,
|
.other-etf-ranking {
|
margin-top: 10px;
|
|
.title {
|
font-weight: 700;
|
padding: 0 12px;
|
}
|
|
.tabs {
|
padding: 0 12px;
|
margin-top: 10px;
|
height: 40px;
|
line-height: 24px;
|
color: #BBBCBD;
|
|
.tab-item {
|
margin: 4px;
|
text-align: center;
|
padding: 4px 6px;
|
font-size: 12px;
|
color: $text_color5;
|
background: $US_tab_background;
|
border-radius: 10px;
|
background-size: cover;
|
}
|
|
.active {
|
font-weight: 700;
|
color: $color_main !important;
|
background: $US_tabActice_background;
|
border-radius: 10px;
|
background-size: cover;
|
}
|
}
|
|
.etf-table {
|
.right {
|
text-align: right;
|
}
|
|
ul {
|
margin-top: 10px;
|
}
|
|
.title-line {
|
color: #747A8F;
|
font-size: 12px;
|
font-weight: 400;
|
padding: 0 12px;
|
border: none;
|
}
|
|
li {
|
padding: 14px 12px;
|
display: flex;
|
font-size: 12px;
|
line-height: 18px;
|
border-bottom: 1px solid $border_color;
|
|
.gray-text {
|
color: #BCBDC2;
|
font-size: 12px;
|
|
.tip-text {
|
width: 27px;
|
height: 16px;
|
line-height: 16px;
|
text-align: center;
|
border-radius: 4px;
|
color: $text_color;
|
display: inline-block;
|
|
&.text-up {
|
background: $red;
|
}
|
|
&.text-down {
|
background: $green;
|
}
|
}
|
}
|
|
.flex-l {
|
width: 100px;
|
}
|
|
.flex-r {
|
display: inline-flex;
|
flex: 1;
|
|
.flex-r-item {
|
flex: 1;
|
align-self: center;
|
text-align: center;
|
}
|
}
|
}
|
}
|
}
|
|
}
|
|
.symbol-list {
|
display: flex;
|
flex-direction: column;
|
margin-top: 10px;
|
|
.symbol-list-item {
|
margin: 0 0 10px;
|
justify-content: space-between;
|
padding: 10px;
|
font-size: 12px;
|
color: #989899;
|
font-weight: 600;
|
border-bottom: 1px solid #393E49;
|
}
|
|
|
.symbol-list-top {
|
display: flex;
|
|
.item-l {
|
text-align: left;
|
|
.symbol-name {
|
font-size: 16px;
|
color: $text_color;
|
}
|
|
.price-change {
|
color: $text_color;
|
|
.price-l {
|
font-weight: 600;
|
}
|
|
.arrow {
|
margin: 0 6px;
|
}
|
}
|
|
}
|
|
.item-r {
|
text-align: right;
|
|
.volume-box {
|
.volume {
|
display: inline-flex;
|
border: 1px solid $green;
|
border-radius: 5px;
|
|
.volume-l {
|
width: 40px;
|
background-color: $green;
|
color: $text_color;
|
font-size: 12px;
|
text-align: center;
|
}
|
|
.volume-r {
|
padding: 0 6px;
|
// color: $green;
|
font-weight: 400;
|
}
|
|
.red {
|
color: $red;
|
}
|
}
|
|
.red-bg {
|
background-color: $red !important;
|
}
|
|
.green-bg {
|
background-color: $green !important;
|
}
|
|
.green-border {
|
border: 1px solid $green !important;
|
}
|
|
.red-border {
|
border: 1px solid $red !important;
|
}
|
}
|
}
|
}
|
|
.symbol-list-bottom {
|
display: flex;
|
margin-top: 4px;
|
|
.order-info {
|
line-height: 18px;
|
}
|
|
.bottom-r {
|
text-align: right;
|
display: flex;
|
|
.profit-num {
|
line-height: 54px;
|
font-weight: 600;
|
font-size: 20px;
|
}
|
}
|
}
|
|
.no-data {
|
margin: 20px auto;
|
width: 200px;
|
height: 200px;
|
}
|
}</style>
|
