mohadese namavar
105 lines
2.8 KiB
Vue
105 lines
2.8 KiB
Vue
<template>
|
|
<div class="product-reminder">
|
|
<div>
|
|
<div>
|
|
<h2>{{ $t('notices') }}</h2>
|
|
<Button v-bind="btns.close.props" @click="dialog.close()" />
|
|
</div>
|
|
<p>{{ $t('howToInformAboutAmazingPrice') }}</p>
|
|
</div>
|
|
<ul>
|
|
<li v-for="key in checkboxes.reminder" :key="key">
|
|
<Checkbox v-model="form[key]" binary :input-id="key" />
|
|
<label :for="key"> {{ $t(key + 'Notice') }} </label>
|
|
</li>
|
|
</ul>
|
|
<Button :label="$t('submit')" :loading="loading" @click="submit()" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { meta } = useRoute()
|
|
const { btns, checkboxes } = meta.init
|
|
const { toast, t } = inject('service')
|
|
const dialog = inject('dialogRef')
|
|
const { reminder, _id: id } = dialog.value.data
|
|
|
|
const form = reactive(reminder[0] || {})
|
|
const store = useProductsStore()
|
|
const loading = ref(false)
|
|
|
|
const submit = async () => {
|
|
loading.value = true
|
|
const { status, data } = await store.addReminder(id, form)
|
|
loading.value = false
|
|
|
|
if (status.value == 'success') {
|
|
dialog.value.data.reminder = data.value.reminder
|
|
toast.add({
|
|
life: 3000, severity: 'success', summary: t('success'), detail: t('submitedSuccessfully')
|
|
})
|
|
dialog.value.close()
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.product-reminder {
|
|
@apply w-full lg:w-[40.3rem] lg:h-[25.2rem] bg-white rounded-t-[0.6rem] lg:rounded-[0.6rem] flex flex-col gap-8 lg:gap-10 p-6 lg:p-10 lg:pt-8 relative;
|
|
|
|
&::after {
|
|
@apply max-lg:content-['_'] absolute inset-x-0 bottom-[4.5rem] h-3 shadow-[0px_-2px_5px_#0000000a];
|
|
}
|
|
|
|
&>div:nth-of-type(1) {
|
|
@apply flex flex-col gap-1.5 lg:gap-2;
|
|
|
|
&>div {
|
|
@apply flex justify-between items-center;
|
|
|
|
h2 {
|
|
@apply text-zinc-800 text-sm lg:text-xl font-bold font-vazir;
|
|
}
|
|
|
|
button {
|
|
@apply -mx-4 -my-3;
|
|
|
|
.p-button-icon {
|
|
@apply text-[1.4em] lg:text-3xl text-[#191919];
|
|
}
|
|
}
|
|
}
|
|
|
|
p {
|
|
@apply text-[#7F7F7F] text-[0.7em] lg:text-lg font-normal font-vazir;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
@apply flex flex-col gap-[1.1rem] lg:gap-6 max-lg:mt-1;
|
|
|
|
li {
|
|
@apply flex items-center gap-4 cursor-pointer w-max select-none;
|
|
|
|
.p-checkbox,
|
|
.p-checkbox-box {
|
|
@apply w-4 lg:w-6 h-4 lg:h-6;
|
|
}
|
|
|
|
label {
|
|
@apply text-[#4C4C4C] text-xs lg:text-xl font-medium font-vazir cursor-pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
&>button {
|
|
@apply h-[2.9rem] lg:h-14 #{!important};
|
|
|
|
.p-button-label {
|
|
@apply font-bold font-iran-sans leading-tight text-sm lg:text-base;
|
|
}
|
|
}
|
|
}
|
|
</style>
|