<template>
|
<div class="pb-50">
|
<!-- 顶部导航栏 -->
|
<div class="status_bar fixed w-full top-0 left-0 h-44 flex items-center justify-between bg-white">
|
<div class="i-material-symbols:arrow-back-ios-new-rounded text-black ml-13 text-18" @click="handleBack"></div>
|
<div class="px-17"></div>
|
|
<div class="status_bar absolute top-0 left-0 w-full h-44 flex items-center justify-center z--1">
|
<div class="p-3 bg-#EEE rounded-full flex text-12 font-medium">
|
<span
|
class="block h-24 w-84.5 text-center leading-24 rounded-full cursor-pointer"
|
:class="activeTab === 'position' ? 'bg-#3640f0 text-white' : ''"
|
@click="switchTab('position')"
|
>
|
持倉
|
</span>
|
<span
|
class="block h-24 w-84.5 text-center leading-24 rounded-full cursor-pointer"
|
:class="activeTab === 'history' ? 'bg-#3640f0 text-white' : ''"
|
@click="switchTab('history')"
|
>
|
歷史
|
</span>
|
</div>
|
</div>
|
</div>
|
<div class="h-44"></div>
|
|
<!-- 订单列表 -->
|
<div class="pt-10 px-17">
|
<!-- 历史 -->
|
<div
|
v-for="(order, index) in orders"
|
:key="index"
|
class="py-20 px-15 rounded-15 bg-#f5f7f9 mb-10"
|
>
|
<div class="flex justify-between pb-10" style="border-bottom: 0.5px solid rgb(218, 218, 218);">
|
<span class="font-medium text-15">{{ order.pair }}</span>
|
<div class="text-end">
|
<span class="font-medium">{{ order.price }}<br></span>
|
<span class="text-11 font-medium" :class="order.type === 'sell' ? 'text-red' : 'text-blue'">
|
{{ order.type === 'sell' ? '拋售' : '購買' }}
|
</span>
|
</div>
|
</div>
|
|
<div class="mt-10 text-11 text-#8c8c8c">
|
<div class="flex justify-between">
|
<div class="flex-1 flex justify-between">
|
<span>金額</span>
|
<span class="text-black">{{ order.amount }}</span>
|
</div>
|
<div class="flex-1 flex justify-between ml-30">
|
<span>時長</span>
|
<span class="text-black">{{ order.duration }}</span>
|
</div>
|
</div>
|
|
<div class="flex" v-if="activeTab === 'history'">
|
<div class="flex justify-between mt-10 flex-1">
|
<span>結算價格</span>
|
<span :class="order.profit >= 0 ? 'text-green' : 'text-red'">{{ order.settlePrice }}</span>
|
</div>
|
<div class="flex justify-between mt-10 flex-1 ml-30">
|
<span>服務費</span>
|
<span :class="order.profit >= 0 ? 'text-green' : 'text-red'">{{ order.fee }}</span>
|
</div>
|
</div>
|
|
<div class="flex justify-between mt-10">
|
<span>下單時間</span>
|
<span class="text-black">{{ order.time }}</span>
|
</div>
|
</div>
|
</div>
|
|
|
|
<div class="text-center py-20" style="color: rgb(167, 166, 166);">已全部載入···</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
|
import { showToast } from "vant";
|
import {
|
useRouter,
|
useRoute
|
} from 'vue-router';
|
import { _ItemUserOptionalItemList } from '@/service/quotes.api'
|
import {
|
contractOrder,
|
_contractApplyOrderCancel,
|
_contractOrderClose,
|
_contractApplyOrderList
|
} from "@/service/trade.api.js";
|
import { _getAllAssets, _getContractOrderAssets, _getEntrustOrderAssets } from "@/service/user.api.js";
|
import { useI18n } from "vue-i18n";
|
import { REQUEST_TIMER } from '@/config'
|
|
const { t } = useI18n()
|
const router = useRouter()
|
const route = useRoute()
|
|
const orders = ref([
|
{
|
pair: 'USD/CNH',
|
price: '7.31271',
|
type: 'sell',
|
amount: '10000',
|
duration: '300s',
|
settlePrice: '7.31225',
|
fee: '300',
|
profit: 1,
|
time: '2024-12-23 15:56:57'
|
},
|
{
|
pair: 'USD/CNH',
|
price: '7.29718',
|
type: 'sell',
|
amount: '5000',
|
duration: '300s',
|
settlePrice: '7.29675',
|
fee: '150',
|
profit: 1,
|
time: '2024-12-19 00:17:05'
|
},
|
{
|
pair: 'USD/HKD',
|
price: '7.76941',
|
type: 'buy',
|
amount: '10000',
|
duration: '300s',
|
settlePrice: '7.76899',
|
fee: '-300',
|
profit: -1,
|
time: '2024-12-18 09:25:02'
|
}
|
])
|
const activeTab = ref('position')
|
const switchTab = (tab) => {
|
activeTab.value = tab
|
getHistoryOrders()
|
}
|
const list = ref([])
|
const page = ref(1)
|
// 添加获取历史订单方法
|
const getHistoryOrders = () => {
|
let obj = {
|
type: activeTab.value, // 修改为历史订单类型
|
page_no: page.value,
|
page_size: 'all',
|
symbolType: 'forex'
|
}
|
contractOrder(obj).then((res) => {
|
list.value = res.data
|
// 处理历史订单数据...
|
})
|
}
|
|
// 持仓轮询
|
// const interval = ref(null)
|
onMounted(async () => {
|
switchTab('position') // 默认加载持仓
|
|
// interval.value = setInterval(() => {
|
// if (activeTab.value === 'position') {
|
// getHistoryOrders()
|
// }
|
// }, 2000)
|
})
|
|
// onBeforeUnmount(() => {
|
// if (interval.value) {
|
// clearInterval(interval.value)
|
// }
|
// })
|
|
const handleBack = () => {
|
router.back()
|
}
|
|
|
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/assets/css/deepseek_css_20250625_30ff932.css";
|
|
</style>
|
