init git
This commit is contained in:
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="product-report">
|
||||
<div>
|
||||
<div>
|
||||
<h2>{{ $t("reportIncorrectSpecs") }}</h2>
|
||||
<Button v-bind="btns.close.props" @click="dialog.close()" />
|
||||
</div>
|
||||
<p>{{ title }}</p>
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="key in checkboxes.report" :key="key">
|
||||
<Checkbox v-model="form.items[key]" binary :input-id="key" />
|
||||
<label :for="key">{{ $t(key + "Product") }}</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>{{ $t("description") }}</label>
|
||||
<Textarea v-model="form.content" :placeholder="$t('writeDesc')" />
|
||||
</li>
|
||||
</ul>
|
||||
<Button :label="$t('send')" :loading="loading" @click="send()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { meta } = useRoute()
|
||||
const { btns, checkboxes } = meta.init
|
||||
const { toast, t } = inject('service')
|
||||
const dialog = inject('dialogRef')
|
||||
const { title, id, report } = dialog.value.data
|
||||
|
||||
const form = reactive(report ?? { items: {}, content: '' });
|
||||
const store = useProductsStore();
|
||||
const loading = ref(false)
|
||||
|
||||
const send = async () => {
|
||||
if (Object.keys(form.items).length > 0 && form.content.length > 0) {
|
||||
loading.value = true
|
||||
const { status, data } = await store.addReport(id, form);
|
||||
loading.value = false
|
||||
|
||||
if (status.value == 'success') {
|
||||
toast.add({
|
||||
life: 3000, severity: 'success', summary: t('success'), detail: t('submitedSuccessfully')
|
||||
})
|
||||
dialog.value.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.product-report {
|
||||
@apply w-full lg:w-[40.1rem] lg:h-[48.6rem] bg-white rounded-t-[0.6rem] lg:rounded-[0.6rem] flex flex-col 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 border-b lg:border-b-2 border-[#E5E5E5] p-6 lg:px-10 lg:pt-8 pb-6;
|
||||
|
||||
&>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] px-6 pt-9 lg:gap-5 lg:pt-6 lg:px-10;
|
||||
|
||||
li {
|
||||
@apply flex items-center gap-4 cursor-pointer w-max select-none;
|
||||
|
||||
.p-checkbox,
|
||||
.p-checkbox-box {
|
||||
@apply w-4 h-4 lg:w-6 lg:h-6;
|
||||
}
|
||||
|
||||
label {
|
||||
@apply text-[#4C4C4C] text-xs lg:text-xl font-medium font-vazir cursor-pointer;
|
||||
}
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
@apply w-full lg:w-[35.1rem] flex flex-col items-start gap-4 mt-3 lg:mt-4;
|
||||
|
||||
label {
|
||||
@apply text-[#7F7F7F] text-xs lg:text-xl font-medium font-vazir max-lg:mr-2.5;
|
||||
}
|
||||
|
||||
textarea {
|
||||
@apply w-full h-[9.6rem] lg:w-[35.1rem] lg:h-[9.6rem] p-4 rounded-[0.6rem] border border-[#E5E5E5];
|
||||
|
||||
&::placeholder {
|
||||
@apply text-[#999999] text-[0.7em] lg:text-lg font-normal font-vazir;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>button {
|
||||
@apply h-[2.9rem] m-6 mt-8 lg:h-14 lg:m-10 lg:mt-9 #{!important};
|
||||
|
||||
.p-button-label {
|
||||
@apply font-bold font-iran-sans text-sm lg:text-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user