asan-service/pages/admin/lotteryPopUp/index.vue

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="primary" class="mr-auto" @click="$router.go(-1)">برگشت به صفحه قبل</CButton>
      <CButton size="sm" color="success" class="mr-1" @click="update">بروزرسانی</CButton>
    </CustomSubHeader>

    <CRow>
      <CCol sm="12">
        <CCard>
          <CCardBody>
            <CRow>
              <CCol>
                <h6>موقعیت و ابعاد دکمه در صفحه</h6>
                <el-divider></el-divider>
                <el-switch v-model="lotteryPopUp.visible" style="direction: ltr" active-text="نمایش دکمه روی صفحه" />
                <el-divider></el-divider>
                <CForm>
                  <CInput
                    v-model="lotteryPopUp.x"
                    label="موقعیت افقی از سمت چپ صفحه (به پیکسل)"
                    horizontal
                    :class="validation.x && 'err'"
                    :description="validation.x && validation.x.msg"
                  />

                  <CInput
                    v-model="lotteryPopUp.y"
                    label="موقعیت عمودی از سمت پایین صفحه (به پیکسل)"
                    horizontal
                    :class="validation.y && 'err'"
                    :description="validation.y && validation.y.msg"
                  />
                </CForm>
              </CCol>
              <CCol>
                <h6>تغییر عکس بکگراند دکمه</h6>
                <el-divider></el-divider>
                <CRow>
                  <CCol col="12">
                    <el-alert type="warning" class="mb-3">
                      توجه داشته باشید طول و عرض دکمه به اندازه ی طول و عرض عکسی که آپلود میکنید نمایش داده میشود. ابعاد
                      توصیه شده 100*100 پیکسل میباشد.
                    </el-alert>
                  </CCol>
                  <CCol col="12" class="mb-3">
                    <img :src="lotteryPopUp.bgImg" alt="" :style="imgStyle" />
                  </CCol>
                  <CCol col="auto">
                    <span>بکگراند</span>
                  </CCol>
                  <CCol col="auto">
                    <input ref="image" type="file" @change="imagePreview" />
                  </CCol>
                  <CCol col="12" class="mt-3">
                    <small v-if="validation.bgImg" class="form-text alert-danger w-100">
                      {{ validation.bgImg.msg }}
                    </small>
                    <small v-else class="form-text text-muted w-100">
                      بهتر است تصویر با فرمت png و پسزمینه شفاف باشد.
                    </small>
                  </CCol>
                </CRow>
              </CCol>
            </CRow>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  </div>
</template>

<script>
export default {
  name: 'AdminLotterPopUp',
  layout: 'admin',
  async asyncData({ $axios, params, error }) {
    try {
      const lotteryPopUp = await $axios.get(`/api/public/lotteryPopup`)
      return {
        lotteryPopUp: lotteryPopUp.data
      }
    } catch (e) {
      error({ status: 404, message: 'Page not found' })
    }
  },
  data() {
    return {
      title: 'تغییر وضعیت ظاهری دکمه قرعه کشی',
      lotteryPopUp: null,
      validation: {}
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  computed: {
    imgStyle() {
      return {
        width: this.lotteryPopUp.w,
        height: this.lotteryPopUp.h
      }
    }
  },
  methods: {
    update() {
      this.validation = {}
      const popup = this.lotteryPopUp
      const data = new FormData()
      data.append('visible', popup.visible)
      data.append('x', popup.x)
      data.append('y', popup.y)
      if (this.$refs.image.files[0]) data.append('bgImg', this.$refs.image.files[0])

      this.$axios
        .put('/api/admin/lotteryPopUp', data)
        .then(res => {
          this.$message({
            type: 'success',
            message: res.data.message
          })
          this.$refs.image.value = null
          this.$nuxt.refresh()
        })
        .catch(err => {
          if (err.response.status === 422) {
            this.validation = err.response.data.validation
            this.$message({
              type: 'warning',
              message: 'پارامترها را بررسی و دوباره تلاش کنید'
            })
          } else
            this.$message({
              type: 'error',
              message: 'مشکلی در ثبت اطلاعات پیش آمده'
            })
        })
    },
    imagePreview(event) {
      this.lotteryPopUp.bgImg = URL.createObjectURL(event.target.files[0])
    }
  }
}
</script>