mohadese namavar
78 lines
2.2 KiB
Vue
78 lines
2.2 KiB
Vue
<template>
|
|
<section class="cart-tabs">
|
|
<ul>
|
|
<li v-for="(item, i) in tabs" :key="i">
|
|
<div :active="select == i" @click="select = i" v-ripple>
|
|
<h2>{{ $t(item) }}</h2>
|
|
<span>{{ i < 1 ? data.length : 0 }}</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<Button v-if="device == 'desktop' && data.length > 0" :label="$t('removeAllFromCart')" icon="isax isax-trash"
|
|
iconPos="right" text raised severity="danger" :loading="loading" @click="clear()" />
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
const select = ref(0);
|
|
const data = inject('data')
|
|
const tabs = reactive(["cart", "previousPurchase"])
|
|
const { device } = inject('service')
|
|
|
|
const loading = ref(false)
|
|
const cart = useCartStore()
|
|
|
|
const clear = async () => {
|
|
loading.value = true
|
|
await cart.clear()
|
|
loading.value = false
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.cart-tabs {
|
|
@apply container w-full h-max max-lg:sticky top-0 flex justify-center lg:justify-start items-center pr-6 lg:pr-0 lg:border-b-2 border-[#E5E5E5];
|
|
@apply bg-white max-lg:z-[1];
|
|
ul {
|
|
@apply flex items-center lg:ml-[33.8rem];
|
|
|
|
li {
|
|
@apply whitespace-nowrap;
|
|
|
|
div {
|
|
@apply px-8 py-2.5 lg:px-6 lg:pb-6 flex items-center gap-3 hover:bg-gray-50 rounded-md cursor-pointer;
|
|
|
|
h2 {
|
|
@apply text-[#999999] text-lg font-normal lg:text-2xl lg:font-medium font-vazir;
|
|
}
|
|
|
|
span {
|
|
@apply w-[1.4rem] h-[1.4rem] lg:w-8 lg:h-8 bg-[#F2F2F2] rounded flex items-center justify-center;
|
|
@apply text-xs lg:text-lg font-medium font-vazir text-[#999999];
|
|
}
|
|
}
|
|
}
|
|
|
|
li:has([active="true"]) {
|
|
@apply relative;
|
|
|
|
* {
|
|
@apply text-primary-600;
|
|
}
|
|
|
|
&::after {
|
|
@apply content-['_'] inset-x-0 -bottom-[0.2rem] rounded-full h-0.5 lg:h-1 bg-primary-600 absolute;
|
|
}
|
|
}
|
|
}
|
|
|
|
button {
|
|
@apply h-[3.6rem] mb-3.5 text-[#AD3434];
|
|
|
|
.p-button-label {
|
|
@apply text-sm font-medium font-vazir
|
|
}
|
|
}
|
|
}
|
|
</style>
|