2804 lines
70 KiB
Vue
2804 lines
70 KiB
Vue
<template>
|
||
<v-container class="wallet-container">
|
||
<div class="wallet-mobile-frame">
|
||
<div class="wallet-mobile-header">{{ t('wallet.walletTitle') }}</div>
|
||
<v-card class="wallet-card portfolio-card design-tu-asset" elevation="0" rounded="lg">
|
||
<div class="card-header">
|
||
<span class="card-title">{{ t('wallet.portfolio') }}</span>
|
||
</div>
|
||
<div class="card-value">${{ portfolioBalance }}</div>
|
||
</v-card>
|
||
<div class="card-actions design-tu-actions">
|
||
<v-btn
|
||
color="default"
|
||
variant="outlined"
|
||
class="action-btn design-tu-action"
|
||
@click="depositDialogOpen = true"
|
||
>
|
||
{{ t('wallet.deposit') }}
|
||
</v-btn>
|
||
<v-btn
|
||
color="default"
|
||
variant="outlined"
|
||
class="action-btn design-tu-action"
|
||
@click="withdrawDialogOpen = true"
|
||
>
|
||
{{ t('wallet.withdraw') }}
|
||
</v-btn>
|
||
</div>
|
||
|
||
<v-card
|
||
v-if="unsettledCount > 0"
|
||
class="settlement-card design-tu-settlement"
|
||
elevation="0"
|
||
rounded="lg"
|
||
>
|
||
<div class="settlement-inner">
|
||
<div class="settlement-label">
|
||
{{ t('wallet.youWon', { amount: unsettledTotalText }) }}
|
||
<span v-if="unsettledCount > 1" class="settlement-plus-n"
|
||
>+{{ unsettledCount - 1 }}</span
|
||
>
|
||
</div>
|
||
<v-btn
|
||
color="primary"
|
||
variant="flat"
|
||
class="settlement-claim-btn design-tu-claim-btn"
|
||
:loading="claimLoading"
|
||
:disabled="claimLoading"
|
||
@click="onClaimSettlement"
|
||
>
|
||
{{ t('wallet.claim') }}
|
||
</v-btn>
|
||
</div>
|
||
</v-card>
|
||
|
||
<!-- 下方：Positions / Open orders / History -->
|
||
<div class="wallet-section">
|
||
<v-tabs v-model="activeTab" class="wallet-tabs" density="comfortable">
|
||
<v-tab value="positions">{{ t('wallet.positions') }}</v-tab>
|
||
<v-tab value="orders">{{ t('wallet.openOrders') }}</v-tab>
|
||
<v-tab value="history">{{ t('wallet.history') }}</v-tab>
|
||
<v-tab value="withdrawals">{{ t('wallet.withdrawals') }}</v-tab>
|
||
</v-tabs>
|
||
<v-card class="table-card wallet-design-card" elevation="0" rounded="lg">
|
||
<template v-if="activeTab === 'positions'">
|
||
<div class="positions-mobile-list">
|
||
<div v-if="positionLoading" class="empty-cell">{{ t('common.loading') }}</div>
|
||
<div v-else-if="filteredPositions.length === 0" class="empty-cell">
|
||
{{ t('wallet.noPositionsFound') }}
|
||
</div>
|
||
<div
|
||
v-for="pos in paginatedPositions"
|
||
:key="pos.id"
|
||
class="position-mobile-card design-pos-card"
|
||
>
|
||
<div class="design-pos-top">
|
||
<div class="design-pos-left">
|
||
<div class="position-icon" :class="pos.iconClass">
|
||
<img
|
||
v-if="pos.imageUrl"
|
||
:src="pos.imageUrl"
|
||
alt=""
|
||
class="position-icon-img"
|
||
/>
|
||
<v-icon v-else-if="pos.icon" size="20" class="position-icon-svg">{{
|
||
pos.icon
|
||
}}</v-icon>
|
||
<span v-else class="position-icon-char">{{ pos.iconChar || '•' }}</span>
|
||
</div>
|
||
<div class="design-pos-title-col">
|
||
<div class="position-mobile-title marquee-container">
|
||
<div class="marquee-track">
|
||
<span>{{ pos.market }}</span>
|
||
<span aria-hidden="true">{{ pos.market }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="design-pos-tags">
|
||
<span
|
||
v-if="pos.outcomeTag"
|
||
class="position-outcome-pill"
|
||
:class="getOutcomeClass(pos.outcomeTag, pos.outcomePillClass)"
|
||
>
|
||
{{ pos.outcomeTag }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="design-pos-right">
|
||
<div class="position-value">{{ pos.value }}</div>
|
||
<div
|
||
v-if="pos.valueChange != null"
|
||
:class="[
|
||
'position-value-change',
|
||
pos.valueChangeLoss ? 'value-loss' : 'value-gain',
|
||
]"
|
||
>
|
||
{{ pos.valueChange
|
||
}}{{ pos.valueChangePct != null ? ` (${pos.valueChangePct})` : '' }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="design-pos-stats">
|
||
<div class="design-pos-stat">
|
||
<div class="design-pos-stat-label">{{ t('wallet.sharesLabel') }}</div>
|
||
<div class="design-pos-stat-value">{{ pos.shares }}</div>
|
||
</div>
|
||
<div class="design-pos-stat">
|
||
<div class="design-pos-stat-label">{{ t('wallet.avgPriceLabel') }}</div>
|
||
<div class="design-pos-stat-value">{{ parseAvgNow(pos.avgNow)[0] }}</div>
|
||
</div>
|
||
<div class="design-pos-stat">
|
||
<div class="design-pos-stat-label">{{ t('wallet.currentPriceLabel') }}</div>
|
||
<div class="design-pos-stat-value">
|
||
{{ parseAvgNow(pos.avgNow)[1] || parseAvgNow(pos.avgNow)[0] }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template v-else-if="activeTab === 'orders'">
|
||
<div class="orders-mobile-list">
|
||
<div v-if="openOrderLoading" class="empty-cell">{{ t('common.loading') }}</div>
|
||
<div v-else-if="filteredOpenOrders.length === 0" class="empty-cell">
|
||
{{ t('wallet.noOpenOrdersFound') }}
|
||
</div>
|
||
<div v-for="ord in paginatedOpenOrders" :key="ord.id" class="order-mobile-card design-order-card">
|
||
<div class="design-order-top">
|
||
<div class="order-mobile-icon" :class="ord.iconClass">
|
||
<span class="position-icon-char">{{ ord.iconChar || '•' }}</span>
|
||
</div>
|
||
<div class="order-mobile-main design-order-title-col">
|
||
<div class="order-mobile-title marquee-container order-title-marquee">
|
||
<div class="marquee-track">
|
||
<span>{{ getOrderDisplayTitle(ord) }}</span>
|
||
<span aria-hidden="true">{{ getOrderDisplayTitle(ord) }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="design-order-tags">
|
||
<span class="order-side-pill" :class="getOrderSideClass(ord)">{{
|
||
getOrderActionLabel(ord)
|
||
}}</span>
|
||
<span class="order-outcome-pill" :class="ord.side === 'Yes' ? 'outcome-yes' : 'outcome-no'">{{
|
||
ord.side
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<v-btn
|
||
icon
|
||
variant="text"
|
||
size="small"
|
||
class="order-cancel-icon"
|
||
:disabled="cancelOrderLoading || ord.fullyFilled"
|
||
@click.stop="cancelOrder(ord)"
|
||
>
|
||
<v-icon size="20">mdi-close</v-icon>
|
||
</v-btn>
|
||
</div>
|
||
<div class="design-order-stats">
|
||
<div class="design-order-stat">
|
||
<div class="design-order-stat-label">{{ t('wallet.openOrderPriceLabel') }}</div>
|
||
<div class="design-order-stat-value">{{ ord.price }}</div>
|
||
</div>
|
||
<div class="design-order-stat">
|
||
<div class="design-order-stat-label">{{ t('wallet.filledTotalLabel') }}</div>
|
||
<div class="design-order-stat-value">
|
||
{{ ord.filledDisplay || `${ord.filled}/${ord.total}` }}
|
||
</div>
|
||
</div>
|
||
<div class="design-order-stat">
|
||
<div class="design-order-stat-label">{{ t('wallet.orderValueLabel') }}</div>
|
||
<div class="design-order-stat-value" :class="getOrderValueClass(ord)">
|
||
{{ getOrderValueDisplay(ord) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template v-else-if="activeTab === 'history'">
|
||
<div class="history-mobile-list">
|
||
<div v-if="historyLoading" class="empty-cell">{{ t('common.loading') }}</div>
|
||
<div v-else-if="filteredHistory.length === 0" class="empty-cell">
|
||
{{ t('wallet.noHistoryFound') }}
|
||
</div>
|
||
<div
|
||
v-for="h in paginatedHistory"
|
||
:key="h.id"
|
||
class="history-mobile-card"
|
||
:class="isFundingHistory(h) ? 'design-funding-card' : 'design-trade-card'"
|
||
>
|
||
<template v-if="!isFundingHistory(h)">
|
||
<div class="design-history-top">
|
||
<div class="design-history-left">
|
||
<div class="history-mobile-icon" :class="h.iconClass">
|
||
<img v-if="h.imageUrl" :src="h.imageUrl" alt="" class="position-icon-img" />
|
||
<span v-else class="position-icon-char">{{ h.iconChar || '•' }}</span>
|
||
</div>
|
||
<div class="history-mobile-main">
|
||
<div class="history-mobile-title marquee-container history-title-marquee">
|
||
<div class="marquee-track">
|
||
<span>{{ h.market }}</span>
|
||
<span aria-hidden="true">{{ h.market }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="history-mobile-activity">
|
||
{{ h.timeAgo || h.activityDetail || h.activity }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span
|
||
:class="['history-mobile-pl', h.profitLossNegative ? 'pl-loss' : 'pl-gain']"
|
||
>
|
||
{{ h.profitLoss ?? h.value }}
|
||
</span>
|
||
</div>
|
||
<div class="design-history-bottom">
|
||
<span class="order-side-pill" :class="getHistoryTagClass(h)">
|
||
{{ getHistoryTagLabel(h) }}
|
||
</span>
|
||
<span class="design-history-meta"
|
||
>{{ t('wallet.priceLabel') }}: {{ h.avgPrice || '—' }} · {{ t('wallet.sharesLabel') }}: {{
|
||
h.shares || '—'
|
||
}}</span
|
||
>
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<div class="design-funding-left">
|
||
<div class="history-mobile-icon" :class="getFundingIconClass(h)">
|
||
<img v-if="h.imageUrl" :src="h.imageUrl" alt="" class="position-icon-img" />
|
||
<span v-else class="position-icon-char">{{ getFundingIconText(h) }}</span>
|
||
</div>
|
||
<div class="history-mobile-main">
|
||
<div class="history-mobile-title marquee-container history-title-marquee">
|
||
<div class="marquee-track">
|
||
<span>{{ getFundingTitle(h) }}</span>
|
||
<span aria-hidden="true">{{ getFundingTitle(h) }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="history-mobile-activity">{{ h.timeAgo || '—' }}</div>
|
||
</div>
|
||
</div>
|
||
<span
|
||
:class="[
|
||
'history-mobile-pl',
|
||
isWithdrawalHistory(h) || h.profitLossNegative ? 'pl-loss' : 'pl-gain',
|
||
]"
|
||
>
|
||
{{ h.profitLoss ?? h.value }}
|
||
</span>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template v-else-if="activeTab === 'withdrawals'">
|
||
<div class="withdrawals-mobile-list">
|
||
<div v-if="withdrawalsLoading" class="empty-cell">{{ t('common.loading') }}</div>
|
||
<div v-else-if="displayedWithdrawals.length === 0" class="empty-cell">
|
||
{{ t('wallet.noWithdrawalsFound') }}
|
||
</div>
|
||
<div
|
||
v-for="w in displayedWithdrawals"
|
||
:key="String(w.ID ?? w.requestNo ?? '')"
|
||
class="withdrawal-mobile-card design-withdraw-card"
|
||
>
|
||
<div class="design-withdraw-top">
|
||
<div class="design-withdraw-head">
|
||
<div class="design-withdraw-date">
|
||
{{ formatWithdrawTime(w.CreatedAt ?? w.createdAt) }}
|
||
</div>
|
||
<div class="design-withdraw-chain">{{ w.chain || '—' }}</div>
|
||
</div>
|
||
<span :class="['withdrawal-status-pill', getWithdrawStatusClass(w.status)]">
|
||
{{ getWithdrawStatusLabel(w.status) }}
|
||
</span>
|
||
</div>
|
||
<div class="design-withdraw-mid">
|
||
<div class="design-withdraw-col">
|
||
<div class="design-withdraw-label">{{ t('wallet.withdrawAmountLabel') }}</div>
|
||
<div class="design-withdraw-value">{{ getWithdrawAmountText(w) }}</div>
|
||
</div>
|
||
<div class="design-withdraw-col right">
|
||
<div class="design-withdraw-label">{{ t('wallet.feeLabel') }}</div>
|
||
<div class="design-withdraw-value">{{ getWithdrawFeeText(w) }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="design-withdraw-bottom">
|
||
<div class="design-withdraw-label">{{ t('wallet.withdrawAddressLabel') }}</div>
|
||
<div class="withdrawal-mobile-address">
|
||
{{ shortAddress(w.tokenAddress ?? w.walletAddress) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<div class="empty-cell">{{ t('common.noData') }}</div>
|
||
</template>
|
||
<div v-if="false && currentListTotal > 0" class="pagination-bar">
|
||
<span class="pagination-info">
|
||
{{ currentPageStart }}–{{ currentPageEnd }} of {{ currentListTotal }}
|
||
</span>
|
||
<div class="pagination-controls">
|
||
<v-select
|
||
v-model="itemsPerPage"
|
||
:items="pageSizeOptions"
|
||
density="compact"
|
||
hide-details
|
||
variant="outlined"
|
||
class="page-size-select"
|
||
@update:model-value="page = 1"
|
||
/>
|
||
<v-pagination
|
||
v-model="page"
|
||
:length="currentTotalPages"
|
||
:total-visible="5"
|
||
density="comfortable"
|
||
class="pagination"
|
||
@update:model-value="onPageChange"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</v-card>
|
||
</div>
|
||
</div>
|
||
|
||
<DepositDialog v-model="depositDialogOpen" :balance="portfolioBalance" />
|
||
<WithdrawDialog
|
||
v-model="withdrawDialogOpen"
|
||
:balance="portfolioBalance"
|
||
@success="onWithdrawSuccess"
|
||
/>
|
||
|
||
<!-- 授权弹窗 -->
|
||
<v-dialog
|
||
v-model="authorizeDialogOpen"
|
||
max-width="420"
|
||
persistent
|
||
transition="dialog-transition"
|
||
>
|
||
<v-card rounded="lg">
|
||
<v-card-title class="d-flex align-center">
|
||
<v-icon class="mr-2">mdi-shield-check-outline</v-icon>
|
||
{{ t('wallet.authorize') }}
|
||
</v-card-title>
|
||
<v-card-text>
|
||
{{ t('wallet.authorizeDesc') }}
|
||
</v-card-text>
|
||
<v-card-actions>
|
||
<v-spacer />
|
||
<v-btn variant="text" @click="authorizeDialogOpen = false">
|
||
{{ t('deposit.close') }}
|
||
</v-btn>
|
||
<v-btn color="primary" variant="flat" @click="submitAuthorize">
|
||
{{ t('wallet.authorize') }}
|
||
</v-btn>
|
||
</v-card-actions>
|
||
</v-card>
|
||
</v-dialog>
|
||
|
||
<!-- Sell position dialog -->
|
||
<v-dialog
|
||
v-model="sellDialogOpen"
|
||
max-width="440"
|
||
persistent
|
||
content-class="sell-dialog"
|
||
transition="dialog-transition"
|
||
>
|
||
<v-card v-if="sellPositionItem" class="sell-dialog-card" rounded="lg">
|
||
<div class="sell-dialog-header">
|
||
<v-btn
|
||
icon
|
||
variant="text"
|
||
size="small"
|
||
class="sell-dialog-close"
|
||
@click="closeSellDialog"
|
||
>
|
||
<v-icon>mdi-close</v-icon>
|
||
</v-btn>
|
||
</div>
|
||
<v-card-text class="sell-dialog-body">
|
||
<div class="sell-dialog-icon-wrap">
|
||
<div class="position-icon" :class="sellPositionItem.iconClass">
|
||
<img
|
||
v-if="sellPositionItem.imageUrl"
|
||
:src="sellPositionItem.imageUrl"
|
||
alt=""
|
||
class="position-icon-img"
|
||
/>
|
||
<v-icon v-else-if="sellPositionItem.icon" size="20" class="position-icon-svg">{{
|
||
sellPositionItem.icon
|
||
}}</v-icon>
|
||
<span v-else class="position-icon-char">{{ sellPositionItem.iconChar || '•' }}</span>
|
||
</div>
|
||
</div>
|
||
<h3 class="sell-dialog-title">
|
||
{{ t('wallet.sellDialogTitle', { outcome: sellPositionItem.sellOutcome || t('wallet.position') }) }}
|
||
</h3>
|
||
<p class="sell-dialog-market">{{ sellPositionItem.market }}</p>
|
||
<div class="sell-receive-box">
|
||
<div class="sell-receive-label">
|
||
<v-icon size="20" color="success">mdi-sack</v-icon>
|
||
<span>{{ t('wallet.sellDialogReceive') }}</span>
|
||
</div>
|
||
<div class="sell-receive-value">{{ sellReceiveAmount }}</div>
|
||
</div>
|
||
</v-card-text>
|
||
<v-card-actions class="sell-dialog-actions">
|
||
<v-btn color="success" variant="flat" block class="sell-redeem-btn" @click="redeemSell">
|
||
{{ t('wallet.sellDialogRedeem') }}
|
||
</v-btn>
|
||
<a href="#" class="sell-edit-link" @click.prevent="editSellOrder">{{ t('wallet.sellDialogEditOrder') }}</a>
|
||
</v-card-actions>
|
||
</v-card>
|
||
</v-dialog>
|
||
|
||
<v-snackbar v-model="showCancelError" color="error" :timeout="4000">
|
||
{{ cancelOrderError }}
|
||
</v-snackbar>
|
||
</v-container>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
|
||
import { useI18n } from 'vue-i18n'
|
||
import { useDisplay } from 'vuetify'
|
||
|
||
const { t } = useI18n()
|
||
import { createChart, AreaSeries, LineType, LastPriceAnimationMode } from 'lightweight-charts'
|
||
import { toLwcData } from '../composables/useLightweightChart'
|
||
import DepositDialog from '../components/DepositDialog.vue'
|
||
import WithdrawDialog from '../components/WithdrawDialog.vue'
|
||
import { useUserStore } from '../stores/user'
|
||
import { useLocaleStore } from '../stores/locale'
|
||
import { useAuthError } from '../composables/useAuthError'
|
||
import { cancelOrder as apiCancelOrder } from '../api/order'
|
||
import { getOrderList, mapOrderToOpenOrderItem, OrderStatus } from '../api/order'
|
||
import { getHistoryRecordListClient, getHistoryRecordList } from '../api/historyRecord'
|
||
import { getPositionList, mapPositionToDisplayItem, claimPosition } from '../api/position'
|
||
import {
|
||
getSettlementRequestsListClient,
|
||
amountToUsdcDisplay,
|
||
WITHDRAW_STATUS,
|
||
type SettlementRequestClientItem,
|
||
} from '../api/pmset'
|
||
import {
|
||
MOCK_TOKEN_ID,
|
||
MOCK_WALLET_POSITIONS,
|
||
MOCK_WALLET_ORDERS,
|
||
MOCK_WALLET_HISTORY,
|
||
} from '../api/mockData'
|
||
import { USE_MOCK_WALLET } from '../config/mock'
|
||
import { CrossChainUSDTAuth } from '../../sdk/approve'
|
||
import { useToastStore } from '../stores/toast'
|
||
|
||
const { mobile } = useDisplay()
|
||
const userStore = useUserStore()
|
||
const { formatAuthError } = useAuthError()
|
||
const localeStore = useLocaleStore()
|
||
const portfolioBalance = computed(() => userStore.balance)
|
||
const profitLoss = ref('0.00')
|
||
const plRange = ref('ALL')
|
||
const plTimeRanges = computed(() => [
|
||
{ label: t('wallet.pl1D'), value: '1D' },
|
||
{ label: t('wallet.pl1W'), value: '1W' },
|
||
{ label: t('wallet.pl1M'), value: '1M' },
|
||
{ label: t('wallet.plAll'), value: 'ALL' },
|
||
])
|
||
const activeTab = ref<'positions' | 'orders' | 'history' | 'withdrawals'>('positions')
|
||
const search = ref('')
|
||
const withdrawStatusFilter = ref<string>('')
|
||
const withdrawStatusOptions = computed(() => [
|
||
{ label: t('wallet.withdrawStatusAll'), value: '' },
|
||
{ label: t('wallet.withdrawStatusPending'), value: WITHDRAW_STATUS.PENDING },
|
||
{ label: t('wallet.withdrawStatusSuccess'), value: WITHDRAW_STATUS.SUCCESS },
|
||
{ label: t('wallet.withdrawStatusRejected'), value: WITHDRAW_STATUS.REJECTED },
|
||
{ label: t('wallet.withdrawStatusFailed'), value: WITHDRAW_STATUS.FAILED },
|
||
])
|
||
/** 当前展示的持仓列表（mock 或 API） */
|
||
const currentPositionList = computed(() => (USE_MOCK_WALLET ? positions.value : positionList.value))
|
||
/** 未结算项：从持仓列表中筛出可领取的（有 marketID+tokenID，且所属市场已关闭 market.closed=true） */
|
||
const unsettledItems = computed(() => {
|
||
const list = currentPositionList.value
|
||
return list
|
||
.filter((p) => p.marketID && p.tokenID && p.marketClosed === true)
|
||
.map((p) => {
|
||
const amount = parseFloat(String(p.value).replace(/[^0-9.-]/g, '')) || 0
|
||
return { marketID: p.marketID!, tokenID: p.tokenID!, amount }
|
||
})
|
||
})
|
||
const unsettledCount = computed(() => unsettledItems.value.length)
|
||
const unsettledTotalText = computed(() => {
|
||
const sum = unsettledItems.value.reduce((a, b) => a + b.amount, 0)
|
||
return sum.toFixed(2)
|
||
})
|
||
const claimLoading = ref(false)
|
||
const toastStore = useToastStore()
|
||
async function onClaimSettlement() {
|
||
const items = unsettledItems.value
|
||
if (items.length === 0) return
|
||
const headers = userStore.getAuthHeaders()
|
||
if (!headers) {
|
||
toastStore.show(t('trade.pleaseLogin'), 'error')
|
||
return
|
||
}
|
||
claimLoading.value = true
|
||
try {
|
||
const res = await claimPosition(
|
||
{ marketID: items.map((i) => i.marketID), tokenID: items.map((i) => i.tokenID) },
|
||
{ headers },
|
||
)
|
||
if (res.code === 0 || res.code === 200) {
|
||
toastStore.show(t('toast.claimSuccess'))
|
||
userStore.fetchUsdcBalance()
|
||
if (activeTab.value === 'positions') loadPositionList()
|
||
} else {
|
||
toastStore.show(res.msg || t('error.requestFailed'), 'error')
|
||
}
|
||
} catch (e) {
|
||
toastStore.show(formatAuthError(e, t('error.requestFailed')), 'error')
|
||
} finally {
|
||
claimLoading.value = false
|
||
}
|
||
}
|
||
const depositDialogOpen = ref(false)
|
||
const withdrawDialogOpen = ref(false)
|
||
const authorizeDialogOpen = ref(false)
|
||
const sellDialogOpen = ref(false)
|
||
const sellPositionItem = ref<Position | null>(null)
|
||
/** 移动端展开的持仓 id，null 表示全部折叠 */
|
||
const expandedPositionId = ref<string | null>(null)
|
||
/** 移动端展开的历史记录 id */
|
||
const expandedHistoryId = ref<string | null>(null)
|
||
|
||
function togglePositionExpanded(id: string) {
|
||
expandedPositionId.value = expandedPositionId.value === id ? null : id
|
||
}
|
||
|
||
function toggleHistoryExpanded(id: string) {
|
||
expandedHistoryId.value = expandedHistoryId.value === id ? null : id
|
||
}
|
||
|
||
interface Position {
|
||
id: string
|
||
market: string
|
||
icon?: string
|
||
iconChar?: string
|
||
iconClass?: string
|
||
imageUrl?: string
|
||
outcomeTag?: string
|
||
outcomePillClass?: string
|
||
shares: string
|
||
avgNow: string
|
||
bet: string
|
||
toWin: string
|
||
value: string
|
||
valueChange?: string
|
||
valueChangePct?: string
|
||
valueChangeLoss?: boolean
|
||
/** 用于 Sell 弹窗标题，如 "Down" | "Yes" | "No" */
|
||
sellOutcome?: string
|
||
/** 移动端副标题 "on Up/Down to win" 中的词 */
|
||
outcomeWord?: string
|
||
/** 市场 ID（从持仓列表来，用于领取结算） */
|
||
marketID?: string
|
||
/** Token ID（从持仓列表来，用于领取结算） */
|
||
tokenID?: string
|
||
/** 所属市场是否已关闭，marketClosed=true 表示可结算/可领取 */
|
||
marketClosed?: boolean
|
||
}
|
||
|
||
/** 从 avgNow "72¢ → 0.5¢" 解析出 [avg, now] */
|
||
function parseAvgNow(avgNow: string): [string, string] {
|
||
const parts = avgNow.split(' → ')
|
||
return parts.length >= 2 ? [parts[0]!.trim(), parts[1]!.trim()] : [avgNow, '']
|
||
}
|
||
interface OpenOrder {
|
||
id: string
|
||
market: string
|
||
side: 'Yes' | 'No'
|
||
outcome: string
|
||
price: string
|
||
filled: string
|
||
total: string
|
||
expiration: string
|
||
/** 移动端展示：如 "Buy Up" */
|
||
actionLabel?: string
|
||
/** 移动端展示：如 "0/5" */
|
||
filledDisplay?: string
|
||
iconChar?: string
|
||
iconClass?: string
|
||
/** 取消订单 API 用 */
|
||
orderID?: number
|
||
tokenID?: string
|
||
/** 已成交数量达到原始总数量，不可撤单 */
|
||
fullyFilled?: boolean
|
||
}
|
||
interface HistoryItem {
|
||
id: string
|
||
market: string
|
||
side: 'Yes' | 'No'
|
||
activity: string
|
||
value: string
|
||
/** 移动端：如 "Sold 1 Down at 50¢" */
|
||
activityDetail?: string
|
||
/** 移动端：盈亏展示如 "+$0.50" */
|
||
profitLoss?: string
|
||
profitLossNegative?: boolean
|
||
/** 移动端：如 "3 minutes ago" */
|
||
timeAgo?: string
|
||
avgPrice?: string
|
||
shares?: string
|
||
iconChar?: string
|
||
iconClass?: string
|
||
/** 图标 URL（来自 record.icon） */
|
||
imageUrl?: string
|
||
}
|
||
|
||
function getOutcomeClass(outcomeTag?: string, fallback?: string): string {
|
||
if (fallback) return fallback
|
||
const normalized = (outcomeTag ?? '').toLowerCase()
|
||
return normalized.includes('yes') ? 'outcome-yes' : 'outcome-no'
|
||
}
|
||
|
||
function getOrderActionLabel(ord: OpenOrder): string {
|
||
const action = (ord.actionLabel ?? '').toLowerCase()
|
||
if (action.includes('sell')) return 'SELL'
|
||
return 'BUY'
|
||
}
|
||
|
||
function getOrderSideClass(ord: OpenOrder): string {
|
||
return getOrderActionLabel(ord) === 'SELL' ? 'side-sell' : 'side-buy'
|
||
}
|
||
|
||
function getOrderValueDisplay(ord: OpenOrder): string {
|
||
return `${ord.price} × ${ord.total}`
|
||
}
|
||
|
||
function getOrderValueClass(ord: OpenOrder): string {
|
||
return getOrderActionLabel(ord) === 'BUY' ? 'order-value-primary' : 'order-value-secondary'
|
||
}
|
||
|
||
function getOrderDisplayTitle(ord: OpenOrder): string {
|
||
const title = ord.market?.trim()
|
||
if (title) return title
|
||
return ord.outcome?.trim() ? `Market · ${ord.outcome}` : 'Untitled Market'
|
||
}
|
||
|
||
function isWithdrawalHistory(h: HistoryItem): boolean {
|
||
const text = `${h.activity} ${h.activityDetail ?? ''} ${h.market}`.toLowerCase()
|
||
return text.includes('withdraw') || text.includes('提现')
|
||
}
|
||
|
||
function isFundingHistory(h: HistoryItem): boolean {
|
||
const text = `${h.activity} ${h.activityDetail ?? ''} ${h.market}`.toLowerCase()
|
||
return (
|
||
text.includes('deposit') ||
|
||
text.includes('充值') ||
|
||
text.includes('withdraw') ||
|
||
text.includes('提现')
|
||
)
|
||
}
|
||
|
||
function getFundingTitle(h: HistoryItem): string {
|
||
if (h.market?.trim()) return h.market
|
||
return isWithdrawalHistory(h) ? t('wallet.btcWithdrawHistoryLabel') : t('wallet.usdtDepositHistoryLabel')
|
||
}
|
||
|
||
function getFundingIconText(h: HistoryItem): string {
|
||
return isWithdrawalHistory(h) ? t('wallet.withdrawIconText') : t('wallet.depositIconText')
|
||
}
|
||
|
||
function getFundingIconClass(h: HistoryItem): string {
|
||
return isWithdrawalHistory(h) ? 'funding-icon-withdraw' : 'funding-icon-deposit'
|
||
}
|
||
|
||
function getHistoryTagLabel(h: HistoryItem): 'BUY' | 'SELL' {
|
||
return h.profitLossNegative ? 'BUY' : 'SELL'
|
||
}
|
||
|
||
function getHistoryTagClass(h: HistoryItem): string {
|
||
return h.profitLossNegative ? 'history-tag-buy' : 'history-tag-sell'
|
||
}
|
||
|
||
const positions = ref<Position[]>(USE_MOCK_WALLET ? [...MOCK_WALLET_POSITIONS] : [])
|
||
/** 提现记录列表 */
|
||
const withdrawalsList = ref<SettlementRequestClientItem[]>([])
|
||
const withdrawalsTotal = ref(0)
|
||
const withdrawalsLoading = ref(false)
|
||
const previewWithdrawals = ref<SettlementRequestClientItem[]>([
|
||
{
|
||
ID: -1,
|
||
CreatedAt: '2024-01-15T14:30:25Z',
|
||
chain: 'Polygon',
|
||
amount: 2500000000,
|
||
fee: '0.00',
|
||
status: WITHDRAW_STATUS.PENDING,
|
||
tokenAddress: '0x27fa...79ab',
|
||
tokenSymbol: 'USDT',
|
||
},
|
||
{
|
||
ID: -2,
|
||
CreatedAt: '2024-01-14T09:16:53Z',
|
||
chain: 'Bitcoin',
|
||
amount: 850000000,
|
||
fee: '0.0065',
|
||
status: WITHDRAW_STATUS.SUCCESS,
|
||
tokenAddress: 'bc1q...49x7n',
|
||
tokenSymbol: 'BTC',
|
||
},
|
||
{
|
||
ID: -3,
|
||
CreatedAt: '2024-01-12T11:26:03Z',
|
||
chain: 'Ethereum',
|
||
amount: 5260000000,
|
||
fee: '0.05',
|
||
status: WITHDRAW_STATUS.REJECTED,
|
||
tokenAddress: '0x7f42...f9d9',
|
||
tokenSymbol: 'ETH',
|
||
},
|
||
])
|
||
|
||
/** 持仓列表（API 数据，非 mock 时使用） */
|
||
const positionList = ref<Position[]>([])
|
||
const positionTotal = ref(0)
|
||
const positionLoading = ref(false)
|
||
|
||
async function loadPositionList() {
|
||
if (USE_MOCK_WALLET) return
|
||
const headers = userStore.getAuthHeaders()
|
||
if (!headers) {
|
||
positionList.value = []
|
||
positionTotal.value = 0
|
||
return
|
||
}
|
||
const uid = userStore.user?.id ?? userStore.user?.ID
|
||
const userID = uid != null ? Number(uid) : undefined
|
||
if (!userID || !Number.isFinite(userID)) {
|
||
positionList.value = []
|
||
positionTotal.value = 0
|
||
return
|
||
}
|
||
positionLoading.value = true
|
||
try {
|
||
const res = await getPositionList(
|
||
{ page: page.value, pageSize: itemsPerPage.value, userID },
|
||
{ headers },
|
||
)
|
||
if (res.code === 0 || res.code === 200) {
|
||
const list = res.data?.list ?? []
|
||
positionList.value = list.map(mapPositionToDisplayItem)
|
||
positionTotal.value = res.data?.total ?? 0
|
||
} else {
|
||
positionList.value = []
|
||
positionTotal.value = 0
|
||
}
|
||
} catch {
|
||
positionList.value = []
|
||
positionTotal.value = 0
|
||
} finally {
|
||
positionLoading.value = false
|
||
}
|
||
}
|
||
|
||
const openOrders = ref<OpenOrder[]>(USE_MOCK_WALLET ? [...MOCK_WALLET_ORDERS] : [])
|
||
/** 未成交订单（API 数据，非 mock 时使用） */
|
||
const openOrderList = ref<OpenOrder[]>([])
|
||
const openOrderTotal = ref(0)
|
||
const openOrderLoading = ref(false)
|
||
|
||
async function loadOpenOrders() {
|
||
if (USE_MOCK_WALLET) return
|
||
const headers = userStore.getAuthHeaders()
|
||
if (!headers) {
|
||
openOrderList.value = []
|
||
openOrderTotal.value = 0
|
||
return
|
||
}
|
||
const uid = userStore.user?.id ?? userStore.user?.ID
|
||
const userID = uid != null ? Number(uid) : undefined
|
||
if (!userID || !Number.isFinite(userID)) {
|
||
openOrderList.value = []
|
||
openOrderTotal.value = 0
|
||
return
|
||
}
|
||
openOrderLoading.value = true
|
||
try {
|
||
const res = await getOrderList(
|
||
{
|
||
page: page.value,
|
||
pageSize: itemsPerPage.value,
|
||
userID,
|
||
status: OrderStatus.Live,
|
||
},
|
||
{ headers },
|
||
)
|
||
if (res.code === 0 || res.code === 200) {
|
||
const list = res.data?.list ?? []
|
||
const openOnly = list.filter((o) => (o.status ?? 1) === OrderStatus.Live)
|
||
openOrderList.value = openOnly.map(mapOrderToOpenOrderItem)
|
||
openOrderTotal.value = openOnly.length
|
||
} else {
|
||
openOrderList.value = []
|
||
openOrderTotal.value = 0
|
||
}
|
||
} catch {
|
||
openOrderList.value = []
|
||
openOrderTotal.value = 0
|
||
} finally {
|
||
openOrderLoading.value = false
|
||
}
|
||
}
|
||
|
||
const history = ref<HistoryItem[]>(USE_MOCK_WALLET ? [...MOCK_WALLET_HISTORY] : [])
|
||
/** 订单历史（API 数据，非 mock 时使用） */
|
||
const historyList = ref<HistoryItem[]>([])
|
||
const historyTotal = ref(0)
|
||
const historyLoading = ref(false)
|
||
|
||
/** 历史记录来自 GET /hr/getHistoryRecordListClient（需鉴权，按当前用户分页） */
|
||
async function loadHistoryOrders() {
|
||
if (USE_MOCK_WALLET) return
|
||
const headers = userStore.getAuthHeaders()
|
||
if (!headers) {
|
||
historyList.value = []
|
||
historyTotal.value = 0
|
||
return
|
||
}
|
||
const uid = userStore.user?.id ?? userStore.user?.ID
|
||
const userID = uid != null ? Number(uid) : undefined
|
||
if (!userID || !Number.isFinite(userID)) {
|
||
historyList.value = []
|
||
historyTotal.value = 0
|
||
return
|
||
}
|
||
historyLoading.value = true
|
||
try {
|
||
const res = await getHistoryRecordListClient(
|
||
{
|
||
page: page.value,
|
||
pageSize: itemsPerPage.value,
|
||
userId: userID,
|
||
},
|
||
{ headers },
|
||
)
|
||
if (res.code === 0 || res.code === 200) {
|
||
const { list, total } = getHistoryRecordList(res.data)
|
||
historyList.value = list
|
||
historyTotal.value = total
|
||
} else {
|
||
historyList.value = []
|
||
historyTotal.value = 0
|
||
}
|
||
} catch {
|
||
historyList.value = []
|
||
historyTotal.value = 0
|
||
} finally {
|
||
historyLoading.value = false
|
||
}
|
||
}
|
||
|
||
async function loadWithdrawals() {
|
||
const headers = userStore.getAuthHeaders()
|
||
if (!headers) {
|
||
withdrawalsList.value = []
|
||
withdrawalsTotal.value = 0
|
||
return
|
||
}
|
||
withdrawalsLoading.value = true
|
||
try {
|
||
const res = await getSettlementRequestsListClient(
|
||
{
|
||
page: page.value,
|
||
pageSize: itemsPerPage.value,
|
||
status: withdrawStatusFilter.value || undefined,
|
||
},
|
||
{ headers },
|
||
)
|
||
if (res.code === 0 || res.code === 200) {
|
||
withdrawalsList.value = res.data?.list ?? []
|
||
withdrawalsTotal.value = res.data?.total ?? 0
|
||
} else {
|
||
withdrawalsList.value = []
|
||
withdrawalsTotal.value = 0
|
||
}
|
||
} catch {
|
||
withdrawalsList.value = []
|
||
withdrawalsTotal.value = 0
|
||
} finally {
|
||
withdrawalsLoading.value = false
|
||
}
|
||
}
|
||
|
||
const displayedWithdrawals = computed(() =>
|
||
withdrawalsList.value.length > 0 ? withdrawalsList.value : previewWithdrawals.value,
|
||
)
|
||
|
||
function formatWithdrawAmount(amount: number | undefined): string {
|
||
return amountToUsdcDisplay(amount)
|
||
}
|
||
|
||
function shortAddress(addr: string | undefined): string {
|
||
if (!addr) return '—'
|
||
return addr.length > 12 ? `${addr.slice(0, 6)}...${addr.slice(-4)}` : addr
|
||
}
|
||
|
||
function formatWithdrawTime(iso: string | undefined): string {
|
||
if (!iso) return '—'
|
||
try {
|
||
const d = new Date(iso)
|
||
return d.toLocaleString()
|
||
} catch {
|
||
return iso
|
||
}
|
||
}
|
||
|
||
function getWithdrawFeeDisplay(w: SettlementRequestClientItem): string {
|
||
const fee = (w as { fee?: number; gasFee?: number; serviceFee?: number }).fee
|
||
const gasFee = (w as { fee?: number; gasFee?: number; serviceFee?: number }).gasFee
|
||
const serviceFee = (w as { fee?: number; gasFee?: number; serviceFee?: number }).serviceFee
|
||
const value = fee ?? gasFee ?? serviceFee
|
||
return value == null ? '—' : `$${amountToUsdcDisplay(value)}`
|
||
}
|
||
|
||
function getWithdrawTokenSymbol(w: SettlementRequestClientItem): string {
|
||
const symbol = (w as { tokenSymbol?: string }).tokenSymbol
|
||
if (symbol && symbol.trim()) return symbol.toUpperCase()
|
||
const chain = (w.chain ?? '').toLowerCase()
|
||
if (chain.includes('btc') || chain.includes('bitcoin')) return 'BTC'
|
||
if (chain.includes('eth') || chain.includes('ethereum')) return 'ETH'
|
||
return 'USDT'
|
||
}
|
||
|
||
function getWithdrawAmountText(w: SettlementRequestClientItem): string {
|
||
const amount = Number(amountToUsdcDisplay(w.amount))
|
||
const amountText = Number.isFinite(amount)
|
||
? amount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
||
: '0.00'
|
||
return `${amountText} ${getWithdrawTokenSymbol(w)}`
|
||
}
|
||
|
||
function getWithdrawFeeText(w: SettlementRequestClientItem): string {
|
||
const feeRaw = Number(
|
||
(w as { fee?: string | number; gasFee?: string | number; serviceFee?: string | number }).fee ??
|
||
(w as { fee?: string | number; gasFee?: string | number; serviceFee?: string | number }).gasFee ??
|
||
(w as { fee?: string | number; gasFee?: string | number; serviceFee?: string | number }).serviceFee ??
|
||
0,
|
||
)
|
||
const feeText = Number.isFinite(feeRaw)
|
||
? feeRaw.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 4 })
|
||
: '0.00'
|
||
return `${feeText} ${getWithdrawTokenSymbol(w)}`
|
||
}
|
||
|
||
function getWithdrawStatusLabel(status: string | undefined): string {
|
||
const s = (status ?? '').toLowerCase()
|
||
if (s === WITHDRAW_STATUS.PENDING || s === '0' || s === 'pending')
|
||
return t('wallet.withdrawStatusPending')
|
||
if (s === WITHDRAW_STATUS.SUCCESS || s === '1' || s === 'success')
|
||
return t('wallet.withdrawStatusSuccess')
|
||
if (s === WITHDRAW_STATUS.REJECTED || s === '2' || s === 'rejected')
|
||
return t('wallet.withdrawStatusRejected')
|
||
if (s === WITHDRAW_STATUS.FAILED || s === '3' || s === 'failed')
|
||
return t('wallet.withdrawStatusFailed')
|
||
return status ?? '—'
|
||
}
|
||
|
||
function getWithdrawStatusClass(status: string | undefined): string {
|
||
const s = (status ?? '').toLowerCase()
|
||
if (s === WITHDRAW_STATUS.PENDING || s === '0' || s === 'pending') return 'status-pending'
|
||
if (s === WITHDRAW_STATUS.SUCCESS || s === '1' || s === 'success') return 'status-success'
|
||
if (s === WITHDRAW_STATUS.REJECTED || s === '2' || s === 'rejected') return 'status-rejected'
|
||
if (s === WITHDRAW_STATUS.FAILED || s === '3' || s === 'failed') return 'status-failed'
|
||
return ''
|
||
}
|
||
|
||
function matchSearch(text: string): boolean {
|
||
const q = search.value.trim().toLowerCase()
|
||
return !q || text.toLowerCase().includes(q)
|
||
}
|
||
const filteredPositions = computed(() => {
|
||
const list = USE_MOCK_WALLET ? positions.value : positionList.value
|
||
return list.filter((p) => matchSearch(p.market))
|
||
})
|
||
const filteredOpenOrders = computed(() => {
|
||
const list = USE_MOCK_WALLET ? openOrders.value : openOrderList.value
|
||
return list.filter((o) => matchSearch(o.market))
|
||
})
|
||
const filteredHistory = computed(() => {
|
||
const list = USE_MOCK_WALLET ? history.value : historyList.value
|
||
return list.filter((h) => matchSearch(h.market))
|
||
})
|
||
|
||
const page = ref(1)
|
||
const itemsPerPage = ref(10)
|
||
const pageSizeOptions = [5, 10, 25, 50]
|
||
|
||
function paginate<T>(list: T[]) {
|
||
const start = (page.value - 1) * itemsPerPage.value
|
||
return list.slice(start, start + itemsPerPage.value)
|
||
}
|
||
const paginatedPositions = computed(() => {
|
||
if (USE_MOCK_WALLET) return paginate(filteredPositions.value)
|
||
return filteredPositions.value
|
||
})
|
||
const paginatedOpenOrders = computed(() => {
|
||
if (USE_MOCK_WALLET) return paginate(filteredOpenOrders.value)
|
||
return filteredOpenOrders.value
|
||
})
|
||
const paginatedHistory = computed(() => {
|
||
if (USE_MOCK_WALLET) return paginate(filteredHistory.value)
|
||
return filteredHistory.value
|
||
})
|
||
|
||
const totalPagesPositions = computed(() => {
|
||
const total = USE_MOCK_WALLET ? filteredPositions.value.length : positionTotal.value
|
||
return Math.max(1, Math.ceil(total / itemsPerPage.value))
|
||
})
|
||
const totalPagesOrders = computed(() => {
|
||
const total = USE_MOCK_WALLET ? filteredOpenOrders.value.length : openOrderTotal.value
|
||
return Math.max(1, Math.ceil(total / itemsPerPage.value))
|
||
})
|
||
const totalPagesHistory = computed(() => {
|
||
const total = USE_MOCK_WALLET ? filteredHistory.value.length : historyTotal.value
|
||
return Math.max(1, Math.ceil(total / itemsPerPage.value))
|
||
})
|
||
const totalPagesWithdrawals = computed(() =>
|
||
Math.max(1, Math.ceil(withdrawalsTotal.value / itemsPerPage.value)),
|
||
)
|
||
|
||
const currentListTotal = computed(() => {
|
||
if (activeTab.value === 'positions')
|
||
return USE_MOCK_WALLET ? filteredPositions.value.length : positionTotal.value
|
||
if (activeTab.value === 'orders')
|
||
return USE_MOCK_WALLET ? filteredOpenOrders.value.length : openOrderTotal.value
|
||
if (activeTab.value === 'withdrawals') return withdrawalsTotal.value
|
||
return USE_MOCK_WALLET ? filteredHistory.value.length : historyTotal.value
|
||
})
|
||
const currentTotalPages = computed(() => {
|
||
if (activeTab.value === 'positions') return totalPagesPositions.value
|
||
if (activeTab.value === 'orders') return totalPagesOrders.value
|
||
if (activeTab.value === 'withdrawals') return totalPagesWithdrawals.value
|
||
return totalPagesHistory.value
|
||
})
|
||
const currentPageStart = computed(() =>
|
||
currentListTotal.value === 0 ? 0 : (page.value - 1) * itemsPerPage.value + 1,
|
||
)
|
||
const currentPageEnd = computed(() =>
|
||
Math.min(page.value * itemsPerPage.value, currentListTotal.value),
|
||
)
|
||
|
||
watch(activeTab, (tab) => {
|
||
page.value = 1
|
||
if (tab === 'positions' && !USE_MOCK_WALLET) loadPositionList()
|
||
if (tab === 'orders' && !USE_MOCK_WALLET) loadOpenOrders()
|
||
if (tab === 'history' && !USE_MOCK_WALLET) loadHistoryOrders()
|
||
if (tab === 'withdrawals') loadWithdrawals()
|
||
})
|
||
watch([page, itemsPerPage], () => {
|
||
if (activeTab.value === 'positions' && !USE_MOCK_WALLET) loadPositionList()
|
||
if (activeTab.value === 'orders' && !USE_MOCK_WALLET) loadOpenOrders()
|
||
if (activeTab.value === 'history' && !USE_MOCK_WALLET) loadHistoryOrders()
|
||
if (activeTab.value === 'withdrawals') loadWithdrawals()
|
||
})
|
||
watch(withdrawStatusFilter, () => {
|
||
page.value = 1
|
||
if (activeTab.value === 'withdrawals') loadWithdrawals()
|
||
})
|
||
watch([currentListTotal, itemsPerPage], () => {
|
||
const maxPage = currentTotalPages.value
|
||
if (page.value > maxPage) page.value = Math.max(1, maxPage)
|
||
})
|
||
|
||
function onPageChange() {
|
||
// 可选：翻页后滚动到表格顶部
|
||
}
|
||
|
||
const cancelOrderLoading = ref(false)
|
||
const cancelOrderError = ref('')
|
||
const showCancelError = ref(false)
|
||
async function cancelOrder(ord: OpenOrder) {
|
||
if (ord.fullyFilled) return
|
||
const orderID = ord.orderID ?? 5
|
||
const tokenID = ord.tokenID ?? MOCK_TOKEN_ID
|
||
const uid = userStore.user?.id ?? userStore.user?.ID
|
||
const userID = uid != null ? Number(uid) : 0
|
||
if (!Number.isFinite(userID) || userID <= 0) {
|
||
cancelOrderError.value = t('error.pleaseLogin')
|
||
showCancelError.value = true
|
||
return
|
||
}
|
||
const headers = userStore.getAuthHeaders()
|
||
if (!headers) {
|
||
cancelOrderError.value = t('error.pleaseLogin')
|
||
showCancelError.value = true
|
||
return
|
||
}
|
||
cancelOrderLoading.value = true
|
||
cancelOrderError.value = ''
|
||
try {
|
||
const res = await apiCancelOrder({ orderID, tokenID, userID }, { headers })
|
||
if (res.code === 0 || res.code === 200) {
|
||
if (USE_MOCK_WALLET) {
|
||
openOrders.value = openOrders.value.filter((o) => o.id !== ord.id)
|
||
} else {
|
||
openOrderList.value = openOrderList.value.filter((o) => o.id !== ord.id)
|
||
openOrderTotal.value = openOrderList.value.length
|
||
}
|
||
userStore.fetchUsdcBalance()
|
||
} else {
|
||
cancelOrderError.value = res.msg || t('wallet.cancelFailed')
|
||
showCancelError.value = true
|
||
}
|
||
} catch (e) {
|
||
cancelOrderError.value = formatAuthError(e, t('error.requestFailed'))
|
||
showCancelError.value = true
|
||
} finally {
|
||
cancelOrderLoading.value = false
|
||
}
|
||
}
|
||
|
||
function cancelAllOrders() {
|
||
if (USE_MOCK_WALLET) {
|
||
openOrders.value = []
|
||
} else {
|
||
openOrderList.value = []
|
||
openOrderTotal.value = 0
|
||
}
|
||
}
|
||
|
||
const sellReceiveAmount = computed(() => {
|
||
const pos = sellPositionItem.value
|
||
return pos ? pos.value : '$0.00'
|
||
})
|
||
|
||
function openSellDialog(pos: Position) {
|
||
sellPositionItem.value = pos
|
||
sellDialogOpen.value = true
|
||
}
|
||
|
||
function closeSellDialog() {
|
||
sellDialogOpen.value = false
|
||
sellPositionItem.value = null
|
||
}
|
||
|
||
function sellPosition(id: string) {
|
||
const pos = positions.value.find((p) => p.id === id)
|
||
if (pos) openSellDialog(pos)
|
||
}
|
||
|
||
function redeemSell() {
|
||
if (sellPositionItem.value) {
|
||
// TODO: 调用赎回接口，成功后从持仓移除
|
||
positions.value = positions.value.filter((p) => p.id !== sellPositionItem.value!.id)
|
||
closeSellDialog()
|
||
}
|
||
}
|
||
|
||
function editSellOrder() {
|
||
// TODO: 跳转交易页或打开限价单
|
||
closeSellDialog()
|
||
}
|
||
|
||
function sharePosition(id: string) {
|
||
// TODO: 分享或复制链接
|
||
}
|
||
|
||
function closeLosses() {
|
||
// TODO: 关闭亏损仓位或筛选
|
||
}
|
||
|
||
function viewHistory(id: string) {
|
||
// TODO: 跳转交易详情或订单详情
|
||
}
|
||
|
||
function shareHistory(id: string) {
|
||
// TODO: 分享或复制链接
|
||
}
|
||
|
||
const plChartRef = ref<HTMLElement | null>(null)
|
||
let plChartInstance: ReturnType<typeof createChart> | null = null
|
||
let plChartSeries: ReturnType<ReturnType<typeof createChart>['addSeries']> | null = null
|
||
|
||
/**
|
||
* 资产变化折线图数据 [timestamp_ms, pnl]
|
||
* 暂无接口时返回真实格式的时间序列，数值均为 0；有接口后改为从 API 拉取并在此处做分时过滤
|
||
*/
|
||
function getPlChartData(range: string): [number, number][] {
|
||
const now = Date.now()
|
||
let stepMs: number
|
||
let count: number
|
||
switch (range) {
|
||
case '1D':
|
||
stepMs = 60 * 60 * 1000
|
||
count = 24
|
||
break
|
||
case '1W':
|
||
stepMs = 24 * 60 * 60 * 1000
|
||
count = 7
|
||
break
|
||
case '1M':
|
||
stepMs = 24 * 60 * 60 * 1000
|
||
count = 30
|
||
break
|
||
case 'ALL':
|
||
default:
|
||
stepMs = 24 * 60 * 60 * 1000
|
||
count = 30
|
||
break
|
||
}
|
||
const data: [number, number][] = []
|
||
for (let i = count; i >= 0; i--) {
|
||
const t = now - i * stepMs
|
||
data.push([t, 0])
|
||
}
|
||
return data
|
||
}
|
||
|
||
const plChartData = ref<[number, number][]>([])
|
||
|
||
function updatePlChart() {
|
||
plChartData.value = getPlChartData(plRange.value)
|
||
const last = plChartData.value[plChartData.value.length - 1]
|
||
if (last != null) profitLoss.value = last[1].toFixed(2)
|
||
if (plChartSeries) plChartSeries.setData(toLwcData(plChartData.value))
|
||
}
|
||
|
||
function initPlChart() {
|
||
if (!plChartRef.value) return
|
||
plChartData.value = getPlChartData(plRange.value)
|
||
const last = plChartData.value[plChartData.value.length - 1]
|
||
if (last != null) profitLoss.value = last[1].toFixed(2)
|
||
const el = plChartRef.value
|
||
plChartInstance = createChart(el, {
|
||
width: el.clientWidth,
|
||
height: 160,
|
||
layout: {
|
||
background: { color: '#ffffff' },
|
||
textColor: '#9ca3af',
|
||
fontFamily: 'inherit',
|
||
fontSize: 9,
|
||
attributionLogo: false,
|
||
},
|
||
grid: { vertLines: { visible: false }, horzLines: { color: '#f3f4f6' } },
|
||
rightPriceScale: { borderVisible: false },
|
||
timeScale: { borderVisible: false },
|
||
crosshair: { vertLine: { labelVisible: false }, horzLine: { labelVisible: true } },
|
||
})
|
||
const lastVal = last != null ? last[1] : 0
|
||
const color = lastVal >= 0 ? '#059669' : '#dc2626'
|
||
plChartSeries = plChartInstance.addSeries(AreaSeries, {
|
||
topColor: color + '40',
|
||
bottomColor: color + '08',
|
||
lineColor: color,
|
||
lineWidth: 2,
|
||
lineType: LineType.Curved,
|
||
lastPriceAnimation: LastPriceAnimationMode.OnDataUpdate,
|
||
priceFormat: { type: 'price', precision: 2 },
|
||
})
|
||
plChartSeries.setData(toLwcData(plChartData.value))
|
||
}
|
||
|
||
const handleResize = () => {
|
||
if (plChartInstance && plChartRef.value) plChartInstance.resize(plChartRef.value.clientWidth, 160)
|
||
}
|
||
|
||
watch(plRange, () => updatePlChart())
|
||
|
||
// 监听语言切换，语言变化时重新加载数据
|
||
watch(
|
||
() => localeStore.currentLocale,
|
||
() => {
|
||
loadPositionList()
|
||
loadOpenOrders()
|
||
},
|
||
)
|
||
|
||
onMounted(() => {
|
||
if (!USE_MOCK_WALLET && activeTab.value === 'positions') loadPositionList()
|
||
nextTick(() => {
|
||
initPlChart()
|
||
})
|
||
window.addEventListener('resize', handleResize)
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
window.removeEventListener('resize', handleResize)
|
||
plChartInstance?.remove()
|
||
plChartInstance = null
|
||
plChartSeries = null
|
||
})
|
||
|
||
function onWithdrawSuccess() {
|
||
withdrawDialogOpen.value = false
|
||
userStore.fetchUsdcBalance()
|
||
if (activeTab.value === 'withdrawals') loadWithdrawals()
|
||
}
|
||
|
||
function onAuthorizeClick() {
|
||
authorizeDialogOpen.value = true
|
||
}
|
||
|
||
async function submitAuthorize() {
|
||
// TODO: 对接 USDC 授权接口（approve CLOB 合约）
|
||
// authorizeDialogOpen.value = false
|
||
await CrossChainUSDTAuth.authorizeUSDT('eth', '0x024b7270Ee9c0Fc0de2E00a979d146255E0e9C00', '100')
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.wallet-container {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
margin: 0 auto;
|
||
padding: 16px;
|
||
background: #fcfcfc;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.wallet-mobile-frame {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.wallet-mobile-header {
|
||
color: #111827;
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.wallet-cards {
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.wallet-card {
|
||
padding: 16px;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 16px;
|
||
height: auto;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.design-tu-asset {
|
||
background: #5b5bd6;
|
||
border: 0;
|
||
}
|
||
|
||
.design-tu-asset .card-title,
|
||
.design-tu-asset .card-value {
|
||
color: #fff;
|
||
}
|
||
|
||
.design-tu-asset .card-title {
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.design-tu-actions {
|
||
gap: 10px;
|
||
}
|
||
|
||
.design-tu-action {
|
||
flex: 1;
|
||
height: 72px;
|
||
border-radius: 12px;
|
||
border: 1px solid #e5e7eb;
|
||
background: #fff;
|
||
color: #111827;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.design-tu-settlement {
|
||
padding: 12px 14px;
|
||
border-radius: 16px;
|
||
background: #fff;
|
||
}
|
||
|
||
.design-tu-claim-btn {
|
||
min-width: 0;
|
||
height: 30px;
|
||
border-radius: 999px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
padding: 0 12px;
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #111827;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.title-icon {
|
||
color: #9ca3af;
|
||
}
|
||
|
||
.balance-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
font-size: 12px;
|
||
color: #059669;
|
||
background-color: #d1fae5;
|
||
padding: 4px 8px;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.card-value {
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
color: #111827;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.card-value-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.card-value-row .card-value {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.info-icon {
|
||
color: #9ca3af;
|
||
}
|
||
|
||
.card-timeframe {
|
||
font-size: 12px;
|
||
color: #6b7280;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.card-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-wrap: nowrap;
|
||
}
|
||
|
||
.action-btn {
|
||
text-transform: none;
|
||
}
|
||
|
||
.pl-tabs {
|
||
display: flex;
|
||
gap: 4px;
|
||
}
|
||
|
||
.pl-tab {
|
||
min-width: 40px;
|
||
text-transform: none;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.pl-chart {
|
||
height: 120px;
|
||
width: 100%;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* 未结算汇总：单条 item，多条 +N，领取按钮无图标 */
|
||
.wallet-settlement-row {
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.settlement-card {
|
||
border: 1px solid #e5e7eb;
|
||
padding: 12px 14px;
|
||
}
|
||
|
||
.settlement-inner {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
flex-wrap: nowrap;
|
||
}
|
||
|
||
.settlement-label {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: #111827;
|
||
}
|
||
|
||
.settlement-plus-n {
|
||
display: inline-block;
|
||
margin-left: 6px;
|
||
padding: 2px 8px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: #6b7280;
|
||
background: #f3f4f6;
|
||
border-radius: 999px;
|
||
}
|
||
|
||
.settlement-claim-btn {
|
||
text-transform: none;
|
||
font-weight: 600;
|
||
min-width: 64px;
|
||
}
|
||
|
||
.wallet-section {
|
||
margin-top: 0;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 16px;
|
||
background: #fff;
|
||
padding: 16px;
|
||
}
|
||
|
||
.wallet-tabs {
|
||
margin-bottom: 12px;
|
||
min-height: 30px;
|
||
}
|
||
|
||
.wallet-tabs :deep(.v-slide-group__content) {
|
||
gap: 8px;
|
||
}
|
||
|
||
.wallet-tabs :deep(.v-tab) {
|
||
min-width: auto;
|
||
height: 30px;
|
||
padding: 0 12px;
|
||
border-radius: 999px;
|
||
text-transform: none;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
background: #f8fafc;
|
||
color: #6b7280;
|
||
border: 1px solid #e5e7eb;
|
||
}
|
||
|
||
.wallet-tabs :deep(.v-tab--selected) {
|
||
background: #5b5bd6;
|
||
color: #fff;
|
||
border-color: #5b5bd6;
|
||
}
|
||
|
||
.wallet-tabs :deep(.v-tab__slider) {
|
||
display: none;
|
||
}
|
||
|
||
.toolbar {
|
||
display: flex;
|
||
gap: 12px;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.search-field {
|
||
max-width: 280px;
|
||
}
|
||
|
||
.search-field :deep(.v-field) {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.filter-btn {
|
||
text-transform: none;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.table-card {
|
||
border: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.wallet-design-card {
|
||
border: 0;
|
||
box-shadow: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.design-pos-card,
|
||
.design-order-card,
|
||
.design-trade-card,
|
||
.design-funding-card,
|
||
.design-withdraw-card {
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 16px;
|
||
padding: 14px;
|
||
background: #fff;
|
||
}
|
||
|
||
.positions-mobile-list .position-mobile-card.design-pos-card,
|
||
.orders-mobile-list .order-mobile-card.design-order-card,
|
||
.history-mobile-list .history-mobile-card.design-trade-card,
|
||
.history-mobile-list .history-mobile-card.design-funding-card,
|
||
.withdrawals-mobile-list .withdrawal-mobile-card.design-withdraw-card {
|
||
padding: 14px;
|
||
margin-bottom: 12px;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
background: #fff;
|
||
cursor: default;
|
||
transition: none;
|
||
}
|
||
|
||
.positions-mobile-list .position-mobile-card.design-pos-card:last-child,
|
||
.orders-mobile-list .order-mobile-card.design-order-card:last-child,
|
||
.history-mobile-list .history-mobile-card:last-child,
|
||
.withdrawals-mobile-list .withdrawal-mobile-card:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.positions-mobile-list .position-mobile-card.design-pos-card:hover,
|
||
.orders-mobile-list .order-mobile-card.design-order-card:hover,
|
||
.history-mobile-list .history-mobile-card.design-trade-card:hover,
|
||
.history-mobile-list .history-mobile-card.design-funding-card:hover,
|
||
.withdrawals-mobile-list .withdrawal-mobile-card.design-withdraw-card:hover {
|
||
background: #fff;
|
||
}
|
||
|
||
.design-pos-top,
|
||
.design-order-top,
|
||
.design-history-top,
|
||
.design-withdraw-top,
|
||
.design-withdraw-mid {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
}
|
||
|
||
.design-pos-left,
|
||
.design-order-left,
|
||
.design-history-left,
|
||
.design-funding-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
min-width: 0;
|
||
flex: 1;
|
||
}
|
||
|
||
.design-order-top {
|
||
display: grid;
|
||
grid-template-columns: 44px minmax(0, 1fr) 32px;
|
||
column-gap: 12px;
|
||
align-items: start;
|
||
}
|
||
|
||
.design-pos-title-col,
|
||
.design-order-tags,
|
||
.design-pos-tags,
|
||
.design-history-bottom,
|
||
.design-withdraw-tags {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.design-order-title-col {
|
||
grid-column: 2;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.design-pos-right {
|
||
text-align: right;
|
||
flex-shrink: 0;
|
||
max-width: 45%;
|
||
}
|
||
|
||
.design-pos-card .position-icon {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.design-pos-card .position-mobile-title {
|
||
margin-bottom: 0;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.design-pos-card .design-pos-title-col {
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
width: 0;
|
||
}
|
||
|
||
.marquee-container {
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
}
|
||
|
||
.marquee-track {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
min-width: max-content;
|
||
gap: 40px;
|
||
animation: wallet-title-marquee 10s linear infinite;
|
||
}
|
||
|
||
.marquee-track > span {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
@keyframes wallet-title-marquee {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
100% {
|
||
transform: translateX(calc(-50% - 20px));
|
||
}
|
||
}
|
||
|
||
.design-pos-card .position-value {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.design-pos-card .position-value-change {
|
||
font-size: 13px;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.order-title-marquee {
|
||
width: 100%;
|
||
}
|
||
|
||
.order-title-marquee .marquee-track {
|
||
animation-duration: 9s;
|
||
}
|
||
|
||
.history-title-marquee {
|
||
width: 100%;
|
||
}
|
||
|
||
.history-title-marquee .marquee-track {
|
||
animation-duration: 9s;
|
||
}
|
||
|
||
.design-order-card .design-order-tags {
|
||
flex-wrap: nowrap;
|
||
gap: 6px;
|
||
}
|
||
|
||
.design-order-card .design-order-stats {
|
||
margin-top: 8px;
|
||
padding-top: 4px;
|
||
width: 100%;
|
||
}
|
||
|
||
.order-value-primary {
|
||
color: #5b5bd6;
|
||
}
|
||
|
||
.order-value-secondary {
|
||
color: #6b7280;
|
||
}
|
||
|
||
.design-pos-stats,
|
||
.design-order-stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 8px;
|
||
margin-top: 4px;
|
||
padding-top: 4px;
|
||
}
|
||
|
||
.design-pos-stat,
|
||
.design-order-stat,
|
||
.design-withdraw-col {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.design-pos-stat-label,
|
||
.design-order-stat-label,
|
||
.design-withdraw-label {
|
||
font-size: 11px;
|
||
color: #9ca3af;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.design-pos-stat-value,
|
||
.design-order-stat-value,
|
||
.design-withdraw-value {
|
||
font-size: 13px;
|
||
color: #111827;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.order-side-pill,
|
||
.order-outcome-pill,
|
||
.withdraw-chain-pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.order-side-pill {
|
||
height: 22px;
|
||
border-radius: 6px;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.order-outcome-pill {
|
||
height: 20px;
|
||
border-radius: 999px;
|
||
padding: 0 8px;
|
||
}
|
||
|
||
.withdraw-chain-pill {
|
||
height: 22px;
|
||
border-radius: 8px;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.side-buy {
|
||
color: #2563eb;
|
||
border: 1.5px solid #2563eb;
|
||
background: transparent;
|
||
}
|
||
|
||
.side-sell {
|
||
color: #dc2626;
|
||
border: 1.5px solid #dc2626;
|
||
background: transparent;
|
||
}
|
||
|
||
.outcome-yes {
|
||
color: #16a34a;
|
||
background: #dcfce7;
|
||
}
|
||
|
||
.outcome-no {
|
||
color: #dc2626;
|
||
background: #fee2e2;
|
||
}
|
||
|
||
.design-history-bottom {
|
||
justify-content: space-between;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.history-mobile-card.design-trade-card,
|
||
.history-mobile-card.design-funding-card {
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 16px;
|
||
padding: 14px;
|
||
background: #fff;
|
||
}
|
||
|
||
.history-mobile-card.design-trade-card .history-mobile-icon,
|
||
.history-mobile-card.design-funding-card .history-mobile-icon {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.history-mobile-card.design-trade-card .history-mobile-title,
|
||
.history-mobile-card.design-funding-card .history-mobile-title {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.history-mobile-card.design-trade-card .history-mobile-activity,
|
||
.history-mobile-card.design-funding-card .history-mobile-activity {
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
color: #9ca3af;
|
||
}
|
||
|
||
.history-mobile-card.design-trade-card .history-mobile-pl {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.history-mobile-card.design-funding-card .history-mobile-pl {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.history-mobile-card.design-funding-card {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
|
||
.history-tag-sell {
|
||
color: #2563eb;
|
||
border: 1.5px solid #2563eb;
|
||
background: transparent;
|
||
}
|
||
|
||
.history-tag-buy {
|
||
color: #dc2626;
|
||
border: 1.5px solid #dc2626;
|
||
background: transparent;
|
||
}
|
||
|
||
.funding-icon-deposit {
|
||
background: #dcfce7;
|
||
color: #16a34a;
|
||
}
|
||
|
||
.funding-icon-withdraw {
|
||
background: #fee2e2;
|
||
color: #dc2626;
|
||
}
|
||
|
||
.design-history-meta {
|
||
font-size: 12px;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.design-funding-card {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
|
||
.withdraw-chain-pill {
|
||
background: #f8fafc;
|
||
color: #334155;
|
||
}
|
||
|
||
.design-withdraw-date {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #111827;
|
||
}
|
||
|
||
.design-withdraw-mid {
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.design-withdraw-col.right {
|
||
text-align: right;
|
||
}
|
||
|
||
.design-withdraw-bottom {
|
||
margin-top: 8px;
|
||
padding-top: 6px;
|
||
}
|
||
|
||
.positions-table,
|
||
.wallet-table {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.wallet-table th,
|
||
.positions-table th {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: #6b7280;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.02em;
|
||
padding: 12px 16px;
|
||
}
|
||
|
||
.th-icon {
|
||
vertical-align: middle;
|
||
margin-left: 2px;
|
||
color: #9ca3af;
|
||
}
|
||
|
||
.positions-table td,
|
||
.wallet-table td {
|
||
padding: 12px 16px;
|
||
color: #374151;
|
||
}
|
||
|
||
.cell-market {
|
||
max-width: 320px;
|
||
word-break: break-word;
|
||
}
|
||
|
||
/* 持仓行：市场图标 + 标题 + 标签 + 份额 */
|
||
.position-market-cell {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
}
|
||
|
||
.position-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
color: #fff;
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.position-icon-btc {
|
||
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
|
||
}
|
||
|
||
.position-icon-eth {
|
||
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
|
||
}
|
||
|
||
.position-icon-svg {
|
||
color: inherit;
|
||
}
|
||
|
||
.position-icon-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
border-radius: inherit;
|
||
}
|
||
|
||
.position-market-info {
|
||
min-width: 0;
|
||
}
|
||
|
||
.position-market-title {
|
||
display: block;
|
||
font-weight: 500;
|
||
color: #111827;
|
||
margin-bottom: 6px;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.position-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.position-outcome-pill {
|
||
font-size: 12px;
|
||
padding: 2px 8px;
|
||
border-radius: 999px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.pill-down {
|
||
background-color: #fee2e2;
|
||
color: #dc2626;
|
||
}
|
||
|
||
.pill-yes {
|
||
background-color: #dcfce7;
|
||
color: #059669;
|
||
}
|
||
|
||
.position-shares {
|
||
font-size: 12px;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.cell-avg-now {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.cell-value {
|
||
vertical-align: top;
|
||
}
|
||
|
||
.position-value {
|
||
font-weight: 500;
|
||
color: #111827;
|
||
}
|
||
|
||
.position-value-change {
|
||
font-size: 12px;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.value-loss {
|
||
color: #dc2626;
|
||
}
|
||
|
||
.value-gain {
|
||
color: #059669;
|
||
}
|
||
|
||
.cell-actions {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.position-row .cell-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
gap: 4px;
|
||
}
|
||
|
||
.position-sell-btn {
|
||
text-transform: none;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.position-share-btn {
|
||
color: #6b7280;
|
||
}
|
||
|
||
/* 移动端持仓可折叠列表 */
|
||
.positions-mobile-list {
|
||
padding: 0;
|
||
}
|
||
|
||
.positions-mobile-list .empty-cell {
|
||
padding: 48px 16px;
|
||
text-align: center;
|
||
color: #6b7280;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.position-mobile-card {
|
||
border-bottom: 1px solid #f3f4f6;
|
||
padding: 14px 16px;
|
||
cursor: pointer;
|
||
transition: background-color 0.15s ease;
|
||
}
|
||
|
||
.position-mobile-card:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.position-mobile-card:hover {
|
||
background-color: #fafafa;
|
||
}
|
||
|
||
.position-mobile-card.expanded {
|
||
background-color: #f9fafb;
|
||
}
|
||
|
||
.position-mobile-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
}
|
||
|
||
.position-mobile-card .position-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 8px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.position-mobile-main {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.position-mobile-title {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #111827;
|
||
line-height: 1.35;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.position-mobile-sub {
|
||
font-size: 12px;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.position-mobile-right {
|
||
text-align: right;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.position-mobile-right .position-value {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: #111827;
|
||
}
|
||
|
||
.position-mobile-right .position-value-change {
|
||
font-size: 12px;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.position-mobile-expanded {
|
||
margin-top: 14px;
|
||
padding-top: 14px;
|
||
border-top: 1px solid #e5e7eb;
|
||
}
|
||
|
||
.position-mobile-avg-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 13px;
|
||
color: #6b7280;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.avg-now-label {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.avg-now-values {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.avg-now-arrow {
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.position-mobile-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.position-mobile-actions .position-sell-btn {
|
||
text-transform: none;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 移动端挂单列表 */
|
||
.orders-mobile-list {
|
||
padding: 0;
|
||
}
|
||
|
||
.orders-mobile-list .empty-cell {
|
||
padding: 48px 16px;
|
||
text-align: center;
|
||
color: #6b7280;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.order-mobile-card {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
padding: 14px 16px;
|
||
border-bottom: 1px solid #f3f4f6;
|
||
}
|
||
|
||
.order-mobile-card.design-order-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 10px;
|
||
}
|
||
|
||
.order-mobile-card:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.order-mobile-icon {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
color: #fff;
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.order-mobile-main {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.order-mobile-title {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: #111827;
|
||
line-height: 1.35;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.order-mobile-action {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.order-mobile-price {
|
||
font-size: 12px;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.order-mobile-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: 4px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.order-cancel-icon {
|
||
grid-column: 3;
|
||
justify-self: end;
|
||
align-self: start;
|
||
width: 32px;
|
||
height: 32px;
|
||
min-width: 32px;
|
||
border-radius: 999px;
|
||
border: 1px solid #e5e7eb;
|
||
background: #f8fafc;
|
||
color: #6b7280;
|
||
padding: 0;
|
||
}
|
||
|
||
.order-mobile-filled {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: #111827;
|
||
}
|
||
|
||
.order-mobile-expiry {
|
||
font-size: 11px;
|
||
color: #9ca3af;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.filter-btn-cancel {
|
||
color: #dc2626;
|
||
}
|
||
|
||
.filter-btn-cancel .v-icon {
|
||
color: inherit;
|
||
}
|
||
|
||
/* 移动端历史列表 */
|
||
.history-mobile-list {
|
||
padding: 0;
|
||
}
|
||
|
||
.history-mobile-list .empty-cell {
|
||
padding: 48px 16px;
|
||
text-align: center;
|
||
color: #6b7280;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.history-mobile-card {
|
||
border-bottom: 1px solid #f3f4f6;
|
||
padding: 14px 16px;
|
||
cursor: pointer;
|
||
transition: background-color 0.15s ease;
|
||
}
|
||
|
||
.history-mobile-card:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.history-mobile-card:hover {
|
||
background-color: #fafafa;
|
||
}
|
||
|
||
.history-mobile-card.expanded {
|
||
background-color: #f9fafb;
|
||
}
|
||
|
||
.history-mobile-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
}
|
||
|
||
.history-mobile-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
color: #fff;
|
||
font-weight: 700;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.history-mobile-main {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.history-mobile-title {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #111827;
|
||
line-height: 1.35;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.history-mobile-activity {
|
||
font-size: 13px;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.history-mobile-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: 2px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.history-mobile-pl {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.pl-gain {
|
||
color: #059669;
|
||
}
|
||
|
||
.pl-loss {
|
||
color: #dc2626;
|
||
}
|
||
|
||
.history-mobile-time {
|
||
font-size: 12px;
|
||
color: #9ca3af;
|
||
}
|
||
|
||
.history-chevron {
|
||
color: #9ca3af;
|
||
flex-shrink: 0;
|
||
align-self: center;
|
||
}
|
||
|
||
.history-mobile-expanded {
|
||
margin-top: 12px;
|
||
padding-top: 12px;
|
||
border-top: 1px solid #e5e7eb;
|
||
}
|
||
|
||
.history-mobile-detail-row {
|
||
display: flex;
|
||
gap: 16px;
|
||
font-size: 13px;
|
||
color: #6b7280;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.history-detail-label {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.history-mobile-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.history-view-btn {
|
||
text-transform: none;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.filter-btn-close-losses {
|
||
color: #6b7280;
|
||
}
|
||
|
||
.side-yes {
|
||
color: #059669;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.side-no {
|
||
color: #dc2626;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.empty-cell {
|
||
text-align: center;
|
||
color: #6b7280;
|
||
padding: 48px 16px !important;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 提现记录 */
|
||
.withdrawals-mobile-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
padding: 16px;
|
||
}
|
||
.withdrawal-mobile-card {
|
||
padding: 12px 16px;
|
||
border-radius: 8px;
|
||
background: #f9fafb;
|
||
border: 1px solid #e5e7eb;
|
||
}
|
||
.withdrawal-mobile-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
.withdrawal-mobile-main {
|
||
min-width: 0;
|
||
}
|
||
.withdrawal-mobile-amount {
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
color: #111827;
|
||
}
|
||
.withdrawal-mobile-meta {
|
||
font-size: 12px;
|
||
color: #6b7280;
|
||
margin-top: 4px;
|
||
}
|
||
.withdrawal-mobile-reason {
|
||
font-size: 12px;
|
||
color: #dc2626;
|
||
margin-top: 8px;
|
||
}
|
||
.withdrawal-status-pill {
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
padding: 2px 8px;
|
||
border-radius: 999px;
|
||
flex-shrink: 0;
|
||
}
|
||
.withdrawal-status-pill.status-pending {
|
||
background: #fef3c7;
|
||
color: #b45309;
|
||
}
|
||
.withdrawal-status-pill.status-success {
|
||
background: #dcfce7;
|
||
color: #166534;
|
||
}
|
||
.withdrawal-status-pill.status-rejected {
|
||
background: #fee2e2;
|
||
color: #991b1b;
|
||
}
|
||
.withdrawal-status-pill.status-failed {
|
||
background: #fee2e2;
|
||
color: #991b1b;
|
||
}
|
||
.withdrawal-reason {
|
||
font-size: 12px;
|
||
color: #6b7280;
|
||
margin-top: 4px;
|
||
}
|
||
.withdrawal-mobile-address {
|
||
font-size: 12px;
|
||
color: #6b7280;
|
||
font-family: monospace;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* 1:1 overrides for UjOKn withdraw cards */
|
||
.withdrawal-mobile-card.design-withdraw-card {
|
||
background: #fff;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 16px;
|
||
padding: 10px 12px;
|
||
}
|
||
|
||
.withdrawal-mobile-card.design-withdraw-card .design-withdraw-top {
|
||
align-items: flex-start;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.withdrawal-mobile-card.design-withdraw-card .design-withdraw-head {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.withdrawal-mobile-card.design-withdraw-card .design-withdraw-date {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.withdrawal-mobile-card.design-withdraw-card .design-withdraw-chain {
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
color: #9ca3af;
|
||
}
|
||
|
||
.withdrawal-mobile-card.design-withdraw-card .design-withdraw-mid {
|
||
margin-top: 4px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.withdrawal-mobile-card.design-withdraw-card .design-withdraw-value {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #111827;
|
||
}
|
||
|
||
.withdrawal-mobile-card.design-withdraw-card .design-withdraw-label {
|
||
font-size: 10px;
|
||
font-weight: 500;
|
||
color: #9ca3af;
|
||
}
|
||
|
||
.withdrawal-mobile-card.design-withdraw-card .withdrawal-mobile-address {
|
||
margin-top: 0;
|
||
font-family: Inter, sans-serif;
|
||
font-size: 13px;
|
||
color: #111827;
|
||
}
|
||
|
||
.withdrawal-mobile-card.design-withdraw-card .withdrawal-status-pill {
|
||
height: 26px;
|
||
padding: 0 12px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.wallet-design-card .withdrawals-mobile-list {
|
||
padding: 0;
|
||
gap: 10px;
|
||
}
|
||
.cell-address {
|
||
font-family: monospace;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.pagination-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
padding: 12px 16px;
|
||
border-top: 1px solid #e5e7eb;
|
||
font-size: 14px;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.pagination-info {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.pagination-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.page-size-select {
|
||
min-width: 88px;
|
||
width: 88px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.page-size-select :deep(.v-field) {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.page-size-select :deep(.v-field__input) {
|
||
min-width: 2ch;
|
||
}
|
||
|
||
.pagination :deep(.v-pagination__item),
|
||
.pagination :deep(.v-pagination__prev),
|
||
.pagination :deep(.v-pagination__next) {
|
||
min-width: 32px;
|
||
height: 32px;
|
||
}
|
||
|
||
/* Sell position dialog */
|
||
.sell-dialog-card {
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.sell-dialog-header {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
padding: 12px 16px 0;
|
||
}
|
||
|
||
.sell-dialog-close {
|
||
color: #6b7280;
|
||
}
|
||
|
||
.sell-dialog-body {
|
||
padding: 0 24px 16px;
|
||
text-align: center;
|
||
}
|
||
|
||
.sell-dialog-icon-wrap {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.sell-dialog-body .position-icon {
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.sell-dialog-title {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #111827;
|
||
margin: 0 0 8px;
|
||
}
|
||
|
||
.sell-dialog-market {
|
||
font-size: 14px;
|
||
color: #6b7280;
|
||
line-height: 1.4;
|
||
margin: 0 0 20px;
|
||
}
|
||
|
||
.sell-receive-box {
|
||
background-color: #dcfce7;
|
||
border-radius: 12px;
|
||
padding: 16px;
|
||
text-align: left;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
|
||
.sell-receive-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #166534;
|
||
}
|
||
|
||
.sell-receive-value {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
color: #166534;
|
||
}
|
||
|
||
.sell-dialog-actions {
|
||
flex-direction: column;
|
||
padding: 8px 24px 24px;
|
||
gap: 12px;
|
||
}
|
||
|
||
.sell-redeem-btn {
|
||
text-transform: none;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.sell-edit-link {
|
||
font-size: 14px;
|
||
color: #2563eb;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.sell-edit-link:hover {
|
||
text-decoration: underline;
|
||
}
|
||
</style>
|