47 lines
2.0 KiB
Vue
47 lines
2.0 KiB
Vue
<script setup lang="ts">
|
||
import { useQuery } from '@vue/apollo-composable';
|
||
import OrderStatusBadge from '~/components/orders/OrderStatusBadge.vue';
|
||
import { MyCurrentOrdersDocument, MyOrdersDocument } from '~/composables/graphql/generated';
|
||
|
||
const currentOrders = useQuery(MyCurrentOrdersDocument);
|
||
const allOrders = useQuery(MyOrdersDocument);
|
||
</script>
|
||
|
||
<template>
|
||
<section class="space-y-8">
|
||
<h1 class="text-2xl font-bold">Мои заказы</h1>
|
||
|
||
<div class="space-y-3">
|
||
<h2 class="text-xl font-semibold">Текущие</h2>
|
||
<div v-if="currentOrders.loading.value" class="alert">Загрузка...</div>
|
||
<div v-else class="space-y-3">
|
||
<article v-for="order in currentOrders.result.value?.myCurrentOrders ?? []" :key="order.id" class="card bg-base-100 border border-base-300">
|
||
<div class="card-body gap-2">
|
||
<div class="flex items-center justify-between">
|
||
<h3 class="font-semibold">{{ order.code }}</h3>
|
||
<OrderStatusBadge :status="order.status" />
|
||
</div>
|
||
<ul class="text-sm">
|
||
<li v-for="item in order.items" :key="item.id">{{ item.productName }} × {{ item.quantity }}</li>
|
||
</ul>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="space-y-3">
|
||
<h2 class="text-xl font-semibold">Все</h2>
|
||
<article v-for="order in allOrders.result.value?.myOrders ?? []" :key="order.id" class="card bg-base-100 border border-base-300">
|
||
<div class="card-body gap-2">
|
||
<div class="flex items-center justify-between">
|
||
<h3 class="font-semibold">{{ order.code }}</h3>
|
||
<OrderStatusBadge :status="order.status" />
|
||
</div>
|
||
<p class="text-sm">Условия доставки: {{ order.deliveryTerms || 'ожидает обработки менеджером' }}</p>
|
||
<p class="text-sm">Итого: {{ order.totalPrice ?? 'после обработки менеджером' }}</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
</template>
|