asan-service/pages/admin/lottery/_lottery.vue

<template>
  <div>
    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0">{{ title }}</CBreadcrumb>
      <CButton size="sm" color="primary" class="mr-auto" :to="{ name: 'admin-lottery' }">برگشت به صفحه قبل</CButton>
      <CButton v-if="$route.params.lottery === 'new'" size="sm" color="success" style="margin-right: 10px" @click="add"
        >افزودن</CButton
      >
      <CButton
        v-if="$route.params.lottery !== 'new' && !lottery.expired"
        size="sm"
        color="success"
        style="margin-right: 10px"
        @click="update"
        >بروزرسانی</CButton
      >
    </CustomSubHeader>
    <CRow>
      <CCol xl="12">
        <CCard>
          <CCardBody>
            <CForm>
              <CInput
                v-model="lottery.title"
                label="عنوان قرعه کشی"
                horizontal
                :description="validation.title ? validation.title.msg : null"
                :disabled="lottery.expired"
                :class="validation.title ? 'err' : null"
              />
              <CInput
                v-model="lottery.winnersCount"
                label="تعداد شانس برنده شدن"
                horizontal
                :disabled="lottery.expired"
                :description="validation.winnersCount ? validation.winnersCount.msg : null"
                :class="validation.winnersCount ? 'err' : null"
              />
            </CForm>
            <el-divider></el-divider>
            <h6>تاریخ اتمام قرعه کشی</h6>
            <persian-date-picker
              v-model="expireDate"
              display-format="jYYYY-jMM-jDD"
              :min="today"
              format="x"
              :disabled="lottery.expired"
              placeholder="تاریخ را انتخاب کنید"
              color="#065495"
            />
            <p v-if="validation.expireDate" class="text-danger">{{ validation.expireDate.msg }}</p>
          </CCardBody>
        </CCard>
      </CCol>

      <CCol xl="12">
        <CCard>
          <CCardBody>
            <CRow>
              <CCol>
                <h6>عکس بکگراند صفحه شرکت در قرعه کشی</h6>
                <el-divider></el-divider>
                <CRow>
                  <CCol col="12">
                    <el-alert v-if="!lottery.expired" type="warning" class="mb-3">
                      توجه داشته باشید طول و عرض صفحه قرعه کشی به اندازه ی طول و عرض عکسی که آپلود میکنید نمایش داده
                      میشود. ابعاد توصیه شده 400*700 پیکسل میباشد.
                    </el-alert>
                  </CCol>
                  <CCol col="12" class="mb-3">
                    <img :src="lottery.entryBgImg" alt="" style="width: 100%" />
                  </CCol>
                  <template v-if="!lottery.expired">
                    <CCol col="auto">
                      <span>بکگراند</span>
                    </CCol>
                    <CCol col="auto">
                      <input ref="entryBgImg" type="file" @change="imagePreview1" />
                    </CCol>
                    <CCol col="12" class="mt-3">
                      <small v-if="validation.entryBgImg" class="form-text alert-danger w-100">
                        {{ validation.entryBgImg.msg }}
                      </small>
                    </CCol>
                  </template>
                </CRow>
              </CCol>

              <CCol>
                <h6>عکس بکگراند صفحه نتایج قرعه کشی</h6>
                <el-divider></el-divider>
                <CRow>
                  <CCol col="12">
                    <el-alert v-if="!lottery.expired" type="warning" class="mb-3">
                      توجه داشته باشید طول و عرض صفحه نتایج قرعه کشی به اندازه ی طول و عرض عکسی که آپلود میکنید نمایش
                      داده میشود. ابعاد توصیه شده 400*700 پیکسل میباشد.
                    </el-alert>
                  </CCol>
                  <CCol col="12" class="mb-3">
                    <img :src="lottery.resultBgImg" alt="" style="width: 100%" />
                  </CCol>

                  <template v-if="!lottery.expired">
                    <CCol col="auto">
                      <span>بکگراند</span>
                    </CCol>
                    <CCol col="auto">
                      <input ref="resultBgImg" type="file" @change="imagePreview2" />
                    </CCol>
                    <CCol col="12" class="mt-3">
                      <small v-if="validation.resultBgImg" class="form-text alert-danger w-100">
                        {{ validation.resultBgImg.msg }}
                      </small>
                    </CCol>
                  </template>
                </CRow>
              </CCol>
            </CRow>
          </CCardBody>
        </CCard>
      </CCol>

      <CCol v-if="lottery.expired" xl="12">
        <CCard>
          <CCardBody>
            <h3>لیست برندگان قرعه کشی</h3>
            <el-divider></el-divider>
            <el-table :data="lottery.winnersList" style="width: 100%">
              <el-table-column type="index" label="#"> </el-table-column>

              <el-table-column prop="fullName" label="نام و نام خانوادگی" width=""> </el-table-column>

              <el-table-column prop="mobile" label="شماره تلفن همراه" width="">
                <template slot-scope="scope">
                  <a :href="'tel:' + scope.row.mobile" style="display: inline-block; direction: ltr">{{
                    scope.row.mobile
                  }}</a>
                </template>
              </el-table-column>

              <el-table-column prop="serial" label="شماره سریال گارانتی" width=""> </el-table-column>

              <el-table-column prop="enrollCode" label="کد پیگیری قرعه کشی" width=""> </el-table-column>
            </el-table>
          </CCardBody>
        </CCard>
      </CCol>

      <CCol v-if="$route.params.lottery !== 'new'" xl="12">
        <CCard>
          <CCardBody>
            <h3 style="color: #000">
              <span>لیست شرکت کنندگان: </span>
              <span>(</span>
              <span> {{ lottery.participants.length }} </span>
              <span>شرکت کننده</span>
              <span>)</span>
            </h3>
            <el-divider></el-divider>
            <el-table :data="lottery.participants" style="width: 100%">
              <el-table-column type="index" label="#"> </el-table-column>

              <el-table-column prop="fullName" label="نام و نام خانوادگی" width=""> </el-table-column>

              <el-table-column prop="mobile" label="شماره تلفن همراه" width="">
                <template slot-scope="scope">
                  <a :href="'tel:' + scope.row.mobile" style="display: inline-block; direction: ltr">{{
                    scope.row.mobile
                  }}</a>
                </template>
              </el-table-column>

              <el-table-column prop="serial" label="شماره سریال گارانتی" width=""> </el-table-column>

              <el-table-column prop="enrollCode" label="کد پیگیری قرعه کشی" width=""> </el-table-column>
            </el-table>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>
  </div>
</template>

<script>
export default {
  name: 'AddminLotteryDetails',
  layout: 'admin',
  async asyncData({ $axios, params, error }) {
    try {
      if (params.lottery !== 'new') {
        const lottery = await $axios.get(`/api/admin/lottery/${params.lottery}`)
        return {
          lottery: lottery.data
        }
      } else {
        return {
          lottery: {
            entryBgImg: '',
            resultBgImg: '',
            title: '',
            resultTxt: '',
            winnersCount: 1,
            expireDate: Date.now()
          }
        }
      }
    } catch (e) {
      error({ status: 404, message: 'Page not found' })
    }
  },
  data() {
    return {
      lottery: null,
      validation: {}
    }
  },
  head() {
    return {
      title: this.title
    }
  },
  computed: {
    title() {
      if (this.$route.params.lottery === 'new') {
        return 'افزودن قرعه کشی'
      } else if (this.$route.params.lottery !== 'new' && this.lottery.expired) {
        return 'مشاهده نتیجه قرعه کشی'
      } else {
        return 'ویرایش قرعه کشی'
      }
    },
    today() {
      return Date.now().toString()
    },
    expireDate: {
      get() {
        return this.lottery.expireDate.toString()
      },
      set(val) {
        this.lottery.expireDate = val
      }
    }
  },
  methods: {
    add() {
      this.validation = {}
      const data = new FormData()
      data.append('title', this.lottery.title)
      data.append('winnersCount', this.lottery.winnersCount)
      data.append('resultTxt', this.lottery.resultTxt)
      data.append('expireDate', this.lottery.expireDate)
      if (this.$refs.entryBgImg.files[0]) data.append('entryBgImg', this.$refs.entryBgImg.files[0])
      if (this.$refs.resultBgImg.files[0]) data.append('resultBgImg', this.$refs.resultBgImg.files[0])

      this.$axios
        .post(`/api/admin/lottery`, data)
        .then(response => {
          if (response.data) {
            this.$message({
              message: 'قرعه کشی با موفقیت ثبت شد.',
              type: 'success'
            })
            this.$router.push({ name: 'admin-lottery' })
          }
        })
        .catch(error => {
          if (error.response.status === 422) {
            this.validation = error.response.data.validation
            this.$message({
              type: 'error',
              message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
            })
          } else {
            this.$alert(error.response.data.message, 'خطا', {
              confirmButtonText: 'باشه'
            })
          }
        })
    },
    update() {
      this.validation = {}
      const data = new FormData()
      data.append('title', this.lottery.title)
      data.append('winnersCount', this.lottery.winnersCount)
      data.append('expireDate', this.lottery.expireDate)
      if (this.$refs.entryBgImg.files[0]) data.append('entryBgImg', this.$refs.entryBgImg.files[0])
      if (this.$refs.resultBgImg.files[0]) data.append('resultBgImg', this.$refs.resultBgImg.files[0])

      this.$axios
        .put(`/api/admin/lottery/${this.lottery._id}`, data)
        .then(response => {
          if (response.data) {
            this.$message({
              message: 'قرعه کشی با موفقیت بروزرسانی شد.',
              type: 'success'
            })
            this.$nuxt.refresh()
            this.$refs.entryBgImg.value = null
            this.$refs.resultBgImg.value = null
          }
        })
        .catch(error => {
          if (error.response.status === 422) {
            this.validation = error.response.data.validation
            this.$message({
              type: 'error',
              message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
            })
          } else {
            this.$alert(error.response.data.message, 'خطا', {
              confirmButtonText: 'باشه'
            })
          }
        })
    },
    imagePreview1(event) {
      this.lottery.entryBgImg = URL.createObjectURL(event.target.files[0])
    },
    imagePreview2(event) {
      this.lottery.resultBgImg = URL.createObjectURL(event.target.files[0])
    }
  }
}
</script>