schon/storefront/components/skeletons/cards/order.vue
Alexandr SaVBaD Waltz 52b32bd608 Features: 1) Introduce useUserBaseData composable to fetch and manage user's wishlist, orders, and promocodes; 2) Add reusable useOrders and useOrderOverwrite composables with advanced filtering and pagination; 3) Implement order.vue component for detailed order displays with UI enhancements;
Fixes: 1) Replace deprecated context usage in `useAvatarUpload` mutation; 2) Resolve incorrect locale parsing in `useDate` utility and fix non-reactive cart state in `profile/cart.vue`; 3) Update stale imports and standardize type naming across composables;

Extra: 1) Refactor i18n strings including order status and search-related texts; 2) Replace temporary workarounds with `apollo-upload-client` configuration and add `apollo-upload-link.ts` plugin; 3) Cleanup redundant files, comments, and improve SCSS structure with new variables and placeholders.
2025-07-11 18:39:13 +03:00

88 lines
No EOL
1.5 KiB
Vue

<template>
<el-skeleton
class="sk"
animated
>
<template #template>
<div class="sk__main">
<el-skeleton-item
variant="p"
class="sk__text"
/>
<el-skeleton-item
variant="p"
class="sk__text"
/>
</div>
<div class="sk__bottom">
<div class="sk__bottom-images">
<el-skeleton-item
variant="image"
class="sk__image"
v-for="idx in 3"
:key="idx"
/>
</div>
<el-skeleton-item
variant="p"
class="sk__price"
/>
</div>
</template>
</el-skeleton>
</template>
<script setup lang="ts">
</script>
<style lang="scss" scoped>
.sk {
width: 100%;
border-radius: $default_border_radius;
background-color: rgba(255, 255, 255, 0.61);
border: 1px solid $accent;
display: flex;
flex-direction: column;
align-items: stretch;
padding: 10px 8px;
&__main {
width: 100%;
display: flex;
align-items: center;
gap: 25px;
padding-bottom: 5px;
}
&__text {
width: 100px;
height: 20px;
border-radius: $default_border_radius;
}
&__bottom {
border-top: 1px solid $accent;
padding-top: 10px;
display: flex;
justify-content: space-between;
&-images {
display: flex;
align-items: center;
gap: 10px;
}
}
&__image {
width: 52px;
height: 65px;
border-radius: $default_border_radius;
}
&__price {
width: 60px;
height: 20px;
}
}
</style>