ostandari/pages/admin/socialLinks/index.vue

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="success" class="mr-auto" @click="update">بروزرسانی</CButton>
    </CustomSubHeader>
    <CCard>
      <CCardBody>
        <CRow>
          <CCol xxl="3">
            <h4>ایمیل</h4>
            <el-divider></el-divider>
            <el-checkbox label="نمایش آیکون ایمیل در فوتر سایت" v-model="yearBanner.hasEmail"/>
            <br>
            <el-input v-model="yearBanner.email" placeholder="آدرس ایمیل را وارد کنید"/>
          </CCol>

          <CCol xxl="3" class="mt-5 mt-xxl-0">
            <h4>گوگل پلاس</h4>
            <el-divider></el-divider>
            <el-checkbox label="نمایش آیکون گوگل پلاس در فوتر سایت" v-model="yearBanner.hasGPlus"/>
            <br>
            <el-input v-model="yearBanner.gPlus" placeholder="url گوگل پلاس را وارد کنید"/>
          </CCol>

          <CCol xxl="3" class="mt-5 mt-xxl-0">
            <h4>توییتر</h4>
            <el-divider></el-divider>
            <el-checkbox label="نمایش آیکون توییتر در فوتر سایت" v-model="yearBanner.hasTweeter"/>
            <br>
            <el-input v-model="yearBanner.tweeter" placeholder="url توییتر را وارد کنید"/>
          </CCol>

          <CCol xxl="3" class="mt-5 mt-xxl-0">
            <h4>اینستاگرام</h4>
            <el-divider></el-divider>
            <el-checkbox label="نمایش آیکون اینستاگرام در فوتر سایت" v-model="yearBanner.hasInstagram"/>
            <br>
            <el-input v-model="yearBanner.instagram" placeholder="url اینستاگرام را وارد کنید"/>
          </CCol>

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

<script>
export default {
  data() {
    return {
      title: 'مدیریت آدرس ایمیل و شبکه های اجتماعی',
      yearBanner: null,
    }
  },
  methods: {
    update() {
      this.validation = {}
      const data = {
        iranFlag: this.yearBanner.iranFlag,
        electionBtn: this.yearBanner.electionBtn,
        // socialLinks
        hasEmail: this.yearBanner.hasEmail,
        hasGPlus: this.yearBanner.hasGPlus,
        hasTweeter: this.yearBanner.hasTweeter,
        hasInstagram: this.yearBanner.hasInstagram,
        email: this.yearBanner.email,
        gPlus: this.yearBanner.gPlus,
        tweeter: this.yearBanner.tweeter,
        instagram: this.yearBanner.instagram,
      }

      this.$axios.post('/api/admin/yearBanner', data)
          .then(res => {
            this.$message({
              type: 'success',
              message: 'تغییرات با موفقیت انجام شد'
            })
          })
          .catch(err => {
            if (err.response?.status === 422) {
              this.validations = err.response.data.validation
              this.$message({
                type: 'warning',
                message: 'پارامترها را بررسی کنید'
              })
            } else console.log(e)
          })
    }
  },
  head() {
    return {
      title: this.title,
    };
  },
  layout: "admin",
  async asyncData({$axios, error}) {
    try {
      const yearBanner = await $axios.get('/api/public/yearBanner')
      return {
        yearBanner: yearBanner.data
      }
    } catch (e) {
      if (e?.response?.status === 401) {
        error({
          status: 401,
          message: "لطفا دوباره وارد سیستم شوید.",
        });
      }
      if (e?.response?.status === 403) {
        error({
          status: 403,
          message: e?.response?.data?.message,
        });
      }
      if (e?.response?.status === 500) {
        error({
          status: 500,
          message: "مشکلی در گرفتن اطلاعات پیش آمده",
        });
      } else
        error({
          status: 404,
          message: "اسلایدر مورد نظر پیدا نشد",
        });
    }
  },
}
</script>