anahita-front/pages/main/contact-us.vue

<template>
    <NuxtLayout :name="device" :config="config">
        <main class="contact-us">
            <div>
                <h3>{{ $t("usAccompany") }}</h3>
                <span />
                <ul>
                    <li v-for="(social, i) in socials" :key="i">
                        <router-link :to="social.url">
                            <img :src="`/icons/${social.icon}.svg`" />
                        </router-link>
                    </li>
                </ul>
            </div>
            <section>
                <form @input="clearError()">
                    <h2>{{ $t('contactUs') }}</h2>
                    <p>{{ $t('enterContantAndMessage') }}</p>
                    <ul>
                        <li v-for="(item, key) in fields" :key="key" :error="item.error">
                            <component :is="item.is" :id="key" v-model="form[key]" v-bind="item.props" />
                            <label :for="key">{{ item.label }}</label>
                        </li>
                    </ul>
                    <Button :label="$t('sendMessage')" :loading="loading" @click="send()" />
                </form>
                <div>
                    <ul>
                        <li v-for="(way, i) in ways" :key="i">
                            <i class="isax" :class="way.icon"></i>
                            <label>{{ $t(way.label) }}:</label>
                            <span>{{ way.value }}</span>
                        </li>
                    </ul>
                </div>
                <div>
                    <div>
                        <LMap ref="leaflet" v-bind="map.props">
                            <LTileLayer v-bind="map.layer" />
                        </LMap>
                    </div>
                </div>
            </section>
        </main>
    </NuxtLayout>
</template>

<script setup>
import init from '../../initialize/contact-us.js'
const { socials, fields, ways, map } = init()

definePageMeta({ path: '/contact-us' })

const config = reactive({
    mobile: {
        header: { search: true, menu: true },
        navigation: false
    },
})

const { t, toast, device } = inject('service')

const form = ref({})

const loading = ref(false)

const send = async () => {
    clearError()
    loading.value = true
    const { status, error } = await useFetch('/api/contactus', { method: 'post', body: form.value })
    loading.value = false

    if (status.value == 'success') {
        toast.add({
            life: 3000, severity: 'success', summary: t('success'), detail: t('sendSuccessfully')
        })
        form.value = {}
    } else if (error.value.statusCode == 422) {
        const data = error.value.data
        delete data.phoneNumber
        Object.entries(data).forEach(([key, value]) => {
            fields[key].error = value
            fields[key].props.class = '!border-red-500'
        })
    } else toast.add({
        life: 3000, severity: 'error', summary: t('error'), detail: error.value.message
    })
}

const clearError = () => {
    Object.keys(fields).forEach((key) => {
        delete fields[key].error
        delete fields[key].props.class
    })
}
</script>

<style lang="scss">
.contact-us {
    @apply w-full flex px-6 lg:px-20 my-8 lg:mt-16 lg:pb-[9.4rem] relative;

    &>div {
        @apply hidden lg:w-[1.6rem] lg:h-[20rem] lg:flex flex-col items-center gap-4;

        &>h3 {
            @screen sm {
                writing-mode: vertical-rl;
            }

            @apply whitespace-nowrap text-zinc-400 font-vazir sm:-scale-100;
        }

        &>span {
            @apply h-px w-[4.4rem] sm:w-px sm:h-[4.4rem] bg-[#E5E5E5];
        }

        &>ul {
            @apply flex sm:flex-col gap-4 mt-auto;

            li {
                @apply opacity-60;

                img{
                    @apply brightness-[0.4];
                }
            }
        }
    }

    &>section {
        @apply container flex flex-col flex-wrap lg:flex-row justify-center items-center md:justify-start;
        @apply xl:gap-x-[8.5rem] md:h-[37rem] lg:h-auto lg:justify-center;

        &>form {
            @apply w-[21.4rem] lg:w-[35.3rem] flex flex-col;

            h2 {
                @apply text-[#333333] text-lg lg:text-3xl font-black font-vazir flex flex-col gap-2.5 lg:gap-5;

                &::after {
                    @apply content-['_'] w-10 h-0.5 lg:w-20 lg:h-1 bg-primary-600 rounded-xl;
                }
            }

            p {
                @apply text-[#7F7F7F] text-sm lg:text-xl font-vazir mt-5 lg:mt-4 mb-auto;
            }

            ul {
                @apply flex flex-col gap-6 mt-10 lg:mt-12;

                li {
                    @apply w-full relative flex items-center;

                    label {
                        @apply w-max absolute right-3 top-3.5 px-1 bg-white transition-['top'];
                        @apply text-[#999999] text-base font-medium font-vazir cursor-text;
                    }

                    input {
                        @apply h-14;
                    }

                    textarea {
                        @apply h-[7.6rem] lg:h-[12.6rem];
                    }

                    input,
                    textarea {
                        @apply rtl w-full rounded-[0.6rem] border shadow-none;
                        @apply border-[#F2F2F2] text-zinc-800 font-vazir;
                    }

                    &:has(input:focus),
                    &:has(textarea:focus),
                    &:has(input:not(:placeholder-shown)),
                    &:has(textarea:not(:placeholder-shown)) {
                        label {
                            @apply -top-2 h-4;
                            @apply text-zinc-800 text-xs font-normal font-vazir;
                        }
                    }

                    &::after {
                        content: attr(error);
                        @apply text-red-500 text-sm absolute -bottom-5 left-0 font-vazir;
                    }
                }
            }

            button {
                @apply w-full h-12 lg:h-14 mt-5 #{!important};

                .p-button-label {
                    @apply text-white text-sm font-normal lg:text-xl lg:font-medium font-iran-sans;
                }
            }
        }

        &>div:first-of-type {
            @apply flex md:order-last mt-14 lg:mt-[6.3rem];

            &>ul {
                @apply flex flex-col sm:flex-wrap sm:flex-row;
                @apply w-full h-auto gap-4;
                @apply max-w-[21.4rem] lg:max-w-[80.7rem] lg:h-[5.4rem] lg:gap-x-20 lg:gap-y-8;

                li {
                    i {
                        @apply ml-3 lg:ml-4 text-[1.1em] lg:text-2xl text-[#7F7F7F] align-middle;
                    }

                    label {
                        @apply ml-2 text-[#7F7F7F] text-sm lg:text-[1.1em] font-medium font-vazir whitespace-nowrap;
                    }

                    span {
                        @apply text-[#333333] text-sm lg:text-[1.1em] font-medium font-vazir;
                    }
                }
            }
        }

        &>div:last-of-type {
            @apply flex relative w-[21.4rem] h-[17.3rem] lg:w-[37rem] lg:h-[37rem] max-md:mt-5 lg:mt-20 2xl:mt-0;

            &::before {
                @apply lg:content-['_'] absolute bg-primary-600 rounded-2xl top-0 left-0;
                @apply w-[14.5rem] h-[29rem];
            }

            &>div {
                @apply rounded-[0.6rem] bg-yellow-300 overflow-hidden my-auto;
                @apply w-full h-full lg:w-[33.8rem] lg:h-[33.8rem] z-0;
            }
        }
    }
}
</style>