100 lines
3.7 KiB
Vue
100 lines
3.7 KiB
Vue
<script lang='ts' setup>
|
|
import type { Treaty } from "@elysiajs/eden";
|
|
import { alertController, toastController } from "@ionic/vue";
|
|
import { client, safeClient } from "@/api";
|
|
import { orderStatusMap, tradeWayConfig } from "../config";
|
|
|
|
type Item = Treaty.Data<typeof client.api.spot_order.list.get>["data"][number];
|
|
|
|
const props = defineProps<{ item: Item; showCancel?: boolean }>();
|
|
const emit = defineEmits<{ refresh: [] }>();
|
|
const { t } = useI18n();
|
|
|
|
const currentTradeWay = computed(() => {
|
|
return tradeWayConfig.find(item => item.value === props.item.orderType);
|
|
});
|
|
|
|
async function cancelOrder(orderId: string) {
|
|
const alert = await alertController.create({
|
|
header: t("trade.orders.cancelConfirm"),
|
|
message: t("trade.orders.cancelMessage"),
|
|
buttons: [
|
|
{
|
|
text: t("trade.orders.cancel"),
|
|
role: "cancel",
|
|
},
|
|
{
|
|
text: t("common.confirm"),
|
|
role: "destructive",
|
|
handler: async () => {
|
|
await safeClient(client.api.spot_order.cancel.post({ orderId }));
|
|
emit("refresh");
|
|
await alert.dismiss();
|
|
const toast = await toastController
|
|
.create({
|
|
message: t("trade.orders.cancelSuccess"),
|
|
duration: 2000,
|
|
position: "bottom",
|
|
color: "success",
|
|
});
|
|
await toast.present();
|
|
},
|
|
},
|
|
],
|
|
});
|
|
|
|
await alert.present();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex justify-between items-center mb-3">
|
|
<div class="flex items-center gap-2">
|
|
<span
|
|
class="px-2 py-0.5 rounded text-[11px] font-semibold"
|
|
:class="item.side === 'buy'
|
|
? 'bg-success/10 text-(--ion-color-success)'
|
|
: 'bg-danger/10 text-(--ion-color-danger)'"
|
|
>
|
|
{{ item.side === 'buy' ? t('trade.buy') : t('trade.sell') }}
|
|
</span>
|
|
<span class="text-sm font-medium">{{ item.symbol }}</span>
|
|
<ion-badge :color="orderStatusMap[item.status]?.color" class="text-[10px] px-1.5 py-0.5">
|
|
{{ t(`trade.status.${item.status === 'partial_filled' ? 'partialFilled' : item.status}`) }}
|
|
</ion-badge>
|
|
</div>
|
|
<button
|
|
v-if="showCancel && item.status !== 'filled'"
|
|
class="px-3 py-1 bg-transparent border border-(--ion-color-danger) text-(--ion-color-danger) rounded-md text-xs transition-all active:bg-(--ion-color-danger) active:text-white"
|
|
@click="cancelOrder(item.id)"
|
|
>
|
|
{{ t('trade.orders.cancel') }}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-2 mb-2">
|
|
<div class="flex justify-between text-xs">
|
|
<span class="text-(--ion-text-color-step-400)">{{ t(`trade.orderType.${currentTradeWay?.value}`) }}</span>
|
|
<span class="text-(--ion-text-color) font-medium">{{ item.orderType === 'limit' ? Number(item.price).toString() : '-' }}</span>
|
|
</div>
|
|
<div class="flex justify-between text-xs">
|
|
<span class="text-(--ion-text-color-step-400)">{{ t('trade.confirm.quantity') }}</span>
|
|
<span class="text-(--ion-text-color) font-medium">{{ Number(item.quantity).toString() }}</span>
|
|
</div>
|
|
<div class="flex justify-between text-xs">
|
|
<span class="text-(--ion-text-color-step-400)">{{ t('trade.orders.filled') }}</span>
|
|
<span class="text-(--ion-text-color) font-medium">{{ Number(item.price).toString() }}</span>
|
|
</div>
|
|
<div class="flex justify-between text-xs">
|
|
<span class="text-(--ion-text-color-step-400)">{{ t('trade.orders.total') }}</span>
|
|
<span class="text-(--ion-text-color) font-medium">{{ Number(item.totalAmount).toString() }} USDT</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pt-2">
|
|
<span class="text-[11px] text-(--ion-text-color-step-500)">{{ useDateFormat(item.createdAt, 'YYYY/MM/DD HH:mm:ss') }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang='css' scoped></style>
|