ostandari/pages/admin/contactus/index.vue

<template>
    <div>
        <CustomSubHeader>
            <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
            <CButton size="sm" color="primary" class="mr-auto" :to="{ name: 'admin-contact' }">برگشت به صفحه قبل
            </CButton>
            <CButton size="sm" color="success" class="mr-1" @click="update">بروزرسانی</CButton>
        </CustomSubHeader>
        <CRow style="display : flex ; flex-direction: column">
            <CRow>
                <CCol lg="6">
                    <CCard>
                        <CCardBody>
                            <CCol sm="12">
                                <CInput :class="validation.email ? 'err' : null" label="ایمیل" :description="
                                    validation.email ? validation.email.msg : null
                                    " v-model="contact.email" />
                            </CCol>
                            <el-divider></el-divider>
                            <CCol sm="12">
                                <CInput :class="validation.phone ? 'err' : null" label="شماره تماس" :description="
                                    validation.phone ? validation.phone.msg : null
                                    " v-model="contact.phone" />
                            </CCol>
                            <el-divider></el-divider>
                            <CCol sm="12">
                                <CTextarea :class="validation.address ? 'err' : null" label="آدرس" :description="
                                    validation.address ? validation.address.msg : null
                                    " v-model="contact.address" />
                            </CCol>
                        </CCardBody>
                    </CCard>
                </CCol>

                <CCol lg="6">
                    <CCard>
                        <CCardBody>

                        </CCardBody>
                    </CCard>
                </CCol>
            </CRow>
        </CRow>
    </div>
</template>

<script>
    import axiosUploadProcess from "@/mixins/axiosUploadProcess";

    export default {
        data() {
            return {
                contact: null,
                validation: {},
                editorConfig: {
                    language: "en",
                    extraPlugins: ["bidi", "justify"],
                }
            };
        },
        mixins: [axiosUploadProcess],
        computed: {
            title() {
                return 'مشاهده صفحه ارتباط با ما'
            },
        },
        methods: {
            imagePreview(e) {
                this.contact.cover = URL.createObjectURL(e.target.files[0]);
            },
            update() {
                this.validation = {};

                const data = new FormData();
                data.append("title", this.contact.title);
                data.append("summaryTitle", this.contact.summaryTitle);
                data.append("catId", this.contact.catId);
                data.append("priority", this.contact.priority);
                data.append("allowComment", this.contact.allowComment);
                data.append("showInHome", this.contact.showInHome);
                data.append("slider", this.contact.slider);
                data.append("publish", this.contact.publish);
                data.append("pageContent", this.contact.pageContent);
                data.append("special", this.contact.special);
                data.append("notifications", this.contact.notifications);
                data.append("keywords", JSON.stringify(this.contact.keywords));
                data.append("metaTagDesc", this.contact.summaryTitle);
                data.append("modelType", this.contact.modelType);

                this.$axios
                    .put(`/api/admin/contact/${this.contact._id}`, data, this.axiosConfig)
                    .then((response) => {
                        this.$message({
                            type: "success",
                            message: "اطلاعات بروزرسانی شد.",
                        });
                        this.$nuxt.refresh();
                    })
                    .catch((err) => {
                        if (err.response.status === 401) {
                            return this.$message({
                                type: "error",
                                message: "لطفا دوباره وارد سیستم شوید.",
                            });
                        }
                        if (err.response.status === 403) {
                            return this.$message({
                                type: "error",
                                message: err.response.data.message,
                            });
                        }
                        if (err.response.status === 500) {
                            return this.$message({
                                type: "error",
                                message: "مشکلی در ارسال درخواست پیش آمده",
                            });
                        }
                        if (err.response.status === 422)
                            this.validation = err.response.data.validation;
                        else console.log(err.response.data);
                    });
            },
        },
        head() {
            return {
                title: this.title,
            };
        },
        layout: "admin",
        async asyncData({
            $axios,
            $auth,
            params,
            query,
            error
        }) {
            try {
                const contact = await $axios.get(`/api/admin/contactUs`);

                return {
                    contact: contact.data
                };
            } catch (e) {
                console.log(e);
                error({
                    status: 404,
                    message: "contact not found",
                });
            }
        },
    };
</script>