| | |
| | | <div class="flex-l"> |
| | | <span class="title">{{ t("trade") }}</span> |
| | | </div> |
| | | <div class="flex-r"> |
| | | <van-icon name="service-o" size="26" @click="$router.push('/customerService')" /> |
| | | </div> |
| | | </header> |
| | | <section class="trade-tab-container"> |
| | | <van-tabs v-model:active="tabActive" shrink @click-tab="onClickTab"> |
| | | <van-tab v-for="(item) in listTab" :key="item.tabIndex" :name="item.tabIndex" :title="item.title"> |
| | | <van-tab v-for="(item, index) in listTab" :key="item.tabIndex" :name="item.tabIndex" :title="item.title"> |
| | | <div class="content-container"> |
| | | <div class="user-info px-4 mt-4"> |
| | | <div class="mt-8 flex"> |
| | |
| | | }} |
| | | {{ |
| | | assetsObj.totalAssets |
| | | ? formatNumberWithComma(assetsObj.totalAssets * (currency.rate ?? 0)) |
| | | ? (assetsObj.totalAssets * (currency.rate ?? 0)).toFixed(2) |
| | | : "0" |
| | | }} |
| | | </p> |
| | |
| | | }} |
| | | {{ |
| | | assetsObj.profit |
| | | ? formatNumberWithComma(assetsObj.profit * (currency.rate ?? 0)) |
| | | ? (assetsObj.profit * (currency.rate ?? 0)).toFixed(2) |
| | | : "0" |
| | | }} |
| | | </p> |
| | |
| | | }} |
| | | {{ |
| | | assetsObj.usdtBalance |
| | | ? formatNumberWithComma(assetsObj.usdtBalance * (currency.rate ?? 0)) |
| | | ? (assetsObj.usdtBalance * (currency.rate ?? 0)).toFixed(2) |
| | | : "0" |
| | | }} |
| | | </p> |
| | |
| | | }} |
| | | {{ |
| | | assetsObj.profitToday |
| | | ? formatNumberWithComma(assetsObj.profitToday * (currency.rate ?? 0)) |
| | | ? (assetsObj.profitToday * (currency.rate ?? 0)).toFixed(2) |
| | | : "0" |
| | | }} |
| | | </p> |
| | |
| | | </van-tabs> |
| | | </section> |
| | | <section class="content-container"> |
| | | <ex-nav :symbolType="symbolType" v-if="tabActive != 3" /> |
| | | <ex-nav :symbolType="symbolType" /> |
| | | <div class="quickly"> |
| | | <div class="quickBox chongbi" :class="[thStore.theme == 'dark' ? 'dark' : 'white']" |
| | | @click="$router.push('/exchange/channel-in')"> |
| | |
| | | </div> |
| | | <div class="flex-r"> |
| | | <div class="flex-r-item"> |
| | | <p :class="item.profitLoss < 0 ? 'text-down' : 'text-up'"> |
| | | <p :class="item.profitLoss < 1 ? 'text-up' : 'text-down'"> |
| | | {{ item.profitLoss }} |
| | | </p> |
| | | <p :class="item.profitLossPercentage < 0 ? 'text-down' : 'text-up'"> |
| | | <p :class="item.profitLossPercentage < 1 ? 'text-up' : 'text-down'"> |
| | | {{ |
| | | item.profitLossPercentage && item.profitLossPercentage !== 0 |
| | | ? `${item.profitLossPercentage}%` |
| | |
| | | </p> |
| | | </div> |
| | | <div class="flex-r-item"> |
| | | <p :class="item.profitLoss < 0 ? 'text-down' : 'text-up'"> |
| | | <p :class="item.close < 1 ? 'text-up' : 'text-down'"> |
| | | {{ item.price }} |
| | | </p> |
| | | <p :class="item.profitLoss < 0 ? 'text-down' : 'text-up'"> |
| | | <p :class="item.close < 1 ? 'text-up' : 'text-down'"> |
| | | {{ item.currentPrice }} |
| | | </p> |
| | | </div> |
| | |
| | | </div> |
| | | <div class="flex-r-item"> |
| | | <p> |
| | | {{ item.state === "created" ? t("委托完成") : t(item.state) }} |
| | | {{ item.state === "created" ? t("createdNew") : t(item.state) }} |
| | | </p> |
| | | </div> |
| | | <div class="flex-r-item operate-btn" @click="cancelSingle(item.order_no)" |
| | | v-if="item.state == 'submitted'"> |
| | | <div class="flex-r-item operate-btn" @click="cancelSingle(item.order_no)"> |
| | | <span>{{ t("撤单") }}</span> |
| | | </div> |
| | | <div class="flex-r-item" v-else> |
| | | <span></span> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | import dayjs from "dayjs"; |
| | | import { themeStore } from "@/store/theme"; |
| | | import { useStore } from 'vuex'; |
| | | import { formatNumberWithComma } from '@/utils/utis'; |
| | | |
| | | const thStore = themeStore(); |
| | | const store = useStore() |
| | |
| | | const { toClipboard } = useClipboard(); |
| | | const router = useRouter(); |
| | | const route = useRoute(); |
| | | const defaultTabActive = +route.query.tabActive || 3; |
| | | const defaultTabActive = +route.query.tabActive || 0; |
| | | const tabActive = ref(defaultTabActive); |
| | | const navActive = ref(0); |
| | | const userStore = useUserStore(); |
| | |
| | | const isLoading = ref(false); |
| | | const assetsObj = ref({}) |
| | | const assets = ref({}) |
| | | const navTabV0 = ref([ |
| | | { |
| | | text: t("持仓"), |
| | | index: 0, |
| | | }, |
| | | { |
| | | text: t("entrust"), |
| | | index: 1, |
| | | }, |
| | | ]); |
| | | const navTabV1 = ref([ |
| | | { |
| | | text: t("持仓"), |
| | |
| | | |
| | | const listTab = ref([ |
| | | { |
| | | title: t('UsStocks'), |
| | | type: 'UsStock', |
| | | urlMatch: 'stock', |
| | | symbolType: 'US-stocks', |
| | | tabIndex: 3 |
| | | title: 'ETF', |
| | | type: 'Etf', |
| | | urlMatch: 'etf', |
| | | symbolType: 'indices', |
| | | tabIndex: 0 |
| | | }, |
| | | { |
| | | title: t('加密货币'), |
| | |
| | | symbolType: 'cryptos', |
| | | tabIndex: 1 |
| | | }, |
| | | { |
| | | title: 'ETF', |
| | | type: 'Etf', |
| | | urlMatch: 'etf', |
| | | symbolType: 'indices', |
| | | tabIndex: 0 |
| | | }, |
| | | |
| | | { |
| | | title: t('外汇'), |
| | | type: 'Foreign', |
| | |
| | | // symbolType: 'INDIA-stocks', |
| | | // tabIndex: 8 |
| | | // }, |
| | | |
| | | // { |
| | | // title: t('港股'), |
| | | // type: 'HkStock', |
| | | // urlMatch: 'HK-stocks', |
| | | // symbolType: 'HK-stocks', |
| | | // tabIndex: 4 |
| | | // }, |
| | | { |
| | | title: t('UsStocks'), |
| | | type: 'UsStock', |
| | | urlMatch: 'stock', |
| | | symbolType: 'US-stocks', |
| | | tabIndex: 3 |
| | | }, |
| | | { |
| | | title: t('港股'), |
| | | type: 'HkStock', |
| | | urlMatch: 'HK-stocks', |
| | | symbolType: 'HK-stocks', |
| | | tabIndex: 4 |
| | | }, |
| | | // { |
| | | // title: t('台股'), |
| | | // type: 'TWStock', |
| | |
| | | ]) |
| | | |
| | | const navTabList = computed(() => { |
| | | return [1, 2].includes(tabActive.value) ? navTabV2.value : (tabActive.value == '3' ? navTabV0.value : navTabV1.value); |
| | | return [1, 2].includes(tabActive.value) ? navTabV2.value : navTabV1.value; |
| | | }); |
| | | |
| | | const getCurrency = async () => { |
| | |
| | | ); |
| | | break; |
| | | case "US-stocks": |
| | | // 跳转到对应的查询列表 |
| | | // if (item.state == 'submitted') { |
| | | // router.push( |
| | | // `/quotes/openTrade?tabActive=4&symbol=${item.symbol}&from=trade&type=US-stocks&tradeTabActive=3&navActive=1` |
| | | // ); |
| | | // } else { |
| | | // router.push( |
| | | // `/quotes/openTrade?tabActive=4&symbol=${item.symbol}&from=trade&type=US-stocks&tradeTabActive=3&navActive=1&invalidState=1` |
| | | // ); |
| | | // } |
| | | |
| | | // 直接跳转到详情,不再跳列表 |
| | | router.push( |
| | | `/cryptos/symbolOrderDetail?order_no=${item.order_no}` |
| | | `/quotes/openTrade?tabActive=4&symbol=${item.symbol}&from=trade&type=US-stocks&tradeTabActive=3&navActive=1` |
| | | ); |
| | | break; |
| | | case 'HK-stocks': |
| | |
| | | const itemClickSecondOrFourth = (item) => { |
| | | // 加密货币 |
| | | if (tabActive.value === 1) { |
| | | |
| | | switch (navActive.value) { |
| | | case 0: |
| | | router.push( |