mohadese namavar
162 lines
4.1 KiB
Vue
162 lines
4.1 KiB
Vue
<template>
|
|
<NuxtLayout :name="device" :config="config">
|
|
<main class="seller-new-product">
|
|
<aside v-if="device == 'desktop'">
|
|
<PanelSellerProfile />
|
|
<PanelSellerScore />
|
|
</aside>
|
|
<section>
|
|
<div>
|
|
<template v-for="i in 3" :key="i">
|
|
<span v-text="i" :class="{ 'active': i == step, 'past': i < step }" />
|
|
<hr :class="{ 'past': i < step }" />
|
|
</template>
|
|
</div>
|
|
<Transition name="fade" mode="out-in">
|
|
<PanelSellerStepFirst v-if="step == 1" />
|
|
<PanelSellerStepSecond v-else-if="step == 2" />
|
|
<PanelSellerStepThirdy v-else-if="step == 3" />
|
|
</Transition>
|
|
</section>
|
|
</main>
|
|
</NuxtLayout>
|
|
</template>
|
|
|
|
<script setup>
|
|
import init from '../../../initialize/new-product.js'
|
|
provide('init', init())
|
|
|
|
const { device, t } = inject('service')
|
|
const config = reactive({
|
|
desktop: { toolbar: true, seller: true },
|
|
mobile: { header: { back: true, toolbar: true, title: t('userPanel') }, navigation: false },
|
|
})
|
|
|
|
const { query } = useRoute()
|
|
|
|
const step = ref(1)
|
|
provide('step', step)
|
|
|
|
const { status, data, error } = await useFetch('/api/shop/newProduct', {
|
|
headers: {
|
|
Authorization: useCookie('token')
|
|
},
|
|
})
|
|
|
|
if (status.value == 'success')
|
|
provide('data', data.value)
|
|
else throw createError(error.value)
|
|
|
|
const form = ref({
|
|
specs: {
|
|
[t("weight")]: "",
|
|
[t("dimensions")]: "",
|
|
[t("color")]: "",
|
|
},
|
|
images: [null]
|
|
})
|
|
|
|
if (query.id) {
|
|
const { status, data } = await useFetch(`/api/products/id/${query.id}`, {
|
|
headers: {
|
|
Authorization: useCookie('token')
|
|
},
|
|
})
|
|
|
|
if (status.value == 'success') {
|
|
form.value = data.value
|
|
form.value.subCategory =
|
|
form.value.category.length > 1 ? form.value.category.slice(-1)[0] : null
|
|
form.value.category =
|
|
form.value.category.length > 2 ? form.value.category[1] : form.value.category[0]
|
|
}
|
|
}
|
|
|
|
provide('form', form.value)
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.seller-new-product {
|
|
@apply container flex pt-[1.9rem] pb-4 lg:pt-14 max-lg:px-6 gap-6 relative;
|
|
|
|
aside {
|
|
@apply flex flex-col gap-3 lg:gap-5;
|
|
}
|
|
|
|
&>section {
|
|
@apply flex flex-col gap-9 grow;
|
|
|
|
&>div:not([class]) {
|
|
@apply w-full h-max flex justify-between items-center gap-2;
|
|
|
|
hr {
|
|
@apply grow h-0.5 bg-[#333333] last:hidden;
|
|
}
|
|
|
|
hr.past {
|
|
@apply bg-[#47B556];
|
|
}
|
|
|
|
span {
|
|
@apply w-6 h-6 lg:w-[1.9rem] lg:h-[1.9rem] rounded-full flex justify-center items-center;
|
|
@apply text-xs lg:text-base font-medium font-vazir border border-[#333333];
|
|
}
|
|
|
|
span.past {
|
|
@apply text-white bg-[#47B556] border-[#47B556];
|
|
|
|
}
|
|
|
|
span.active {
|
|
@apply border-[#47B556] text-[#47B556];
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
body:has(.seller-new-product) {
|
|
|
|
.p-dropdown-panel:has(.p-dropdown-filter-container) {
|
|
@apply w-[18.3rem] translate-y-3 pb-4 pt-[0.6rem] rounded-[0.6rem];
|
|
|
|
.p-dropdown-header {
|
|
@apply py-0 px-2.5;
|
|
|
|
.p-dropdown-filter-container {
|
|
@apply w-full h-[3.1rem];
|
|
|
|
input {
|
|
@apply m-0 h-full w-full rtl;
|
|
}
|
|
|
|
svg {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
.p-dropdown-items-wrapper {
|
|
@apply h-[19rem] mt-3 ml-3;
|
|
|
|
.p-dropdown-item-group {
|
|
@apply text-[#47B556] text-xs font-medium font-vazir p-2.5;
|
|
}
|
|
|
|
.p-dropdown-item {
|
|
@apply h-[2.4rem] px-2.5 text-[#333333] text-base font-medium font-vazir;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
@apply bg-[#47B556];
|
|
}
|
|
|
|
&::-webkit-scrollbar {
|
|
@apply w-1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|