asan-service/pages/lottery/index.vue

<template>
  <div class="lottery--page page">
    <div class="contentBox">
      <div class="container">
        <div class="row justify-content-center">
          <!-- <div class="col-12 mb-5" v-if="!lastLottery.expired">
					<div class="row justify-content-center p-3">
						<div class="col-auto">
							<nuxt-link :to="{ name: 'lottery', query: { mode: 'enroll' } }">
								<button class="btn btn-primary" :disabled="mode === 'enroll'">شرکت در قرعه کشی</button>
							</nuxt-link>
						</div>
						<div class="col-auto">
							<nuxt-link :to="{ name: 'lottery', query: { mode: 'result' } }">
								<button class="btn btn-primary" :disabled="mode === 'result'">مشاهده نتایج</button>
							</nuxt-link>
						</div>
					</div>
				</div> -->

          <div v-if="mode === 'enroll' && !lastLottery.expired" class="col-12 col-lg-6">
            <form class="form form_3" @submit.prevent="enrollLottery">
              <div class="content">
                <div class="remain-days">
                  <h1 v-if="remainDays === 0">
                    <span>فقط تا پایان امروز فرصت باقیست</span>
                  </h1>

                  <h1 v-else>
                    <span>فقط </span>
                    <span> {{ remainDays }} </span>
                    <span>روز زمان باقیست</span>
                  </h1>
                </div>

                <h3>{{ lastLottery.title }}</h3>
                <p>
                  <span>تاریخ پایان قرعه کشی:</span>
                  <span style="direction: ltr !important; display: inline-block">{{
                    $jDate(lastLottery.expireDate)
                  }}</span>
                </p>
              </div>

              <div class="formRow" :class="validation.fullName && 'err'">
                <input v-model="enrollData.fullName" type="text" placeholder="نام و نام خانوادگی" />
                <p v-if="validation.fullName">{{ validation.fullName.msg }}</p>
              </div>
              <div class="formRow" :class="validation.mobile && 'err'">
                <input v-model="enrollData.mobile" type="text" placeholder="شماره تلفن همراه" />
                <p v-if="validation.mobile">{{ validation.mobile.msg }}</p>
              </div>
              <div class="formRow" :class="validation.serial && 'err'">
                <input v-model="enrollData.serial" type="text" placeholder="شماره سریال گارانتی" />
                <p v-if="validation.serial">{{ validation.serial.msg }}</p>
              </div>
              <div class="formRow">
                <button class="btn btn-primary" type="submit">ثبت</button>
              </div>
            </form>
          </div>

          <div v-else-if="mode === 'enroll' && lastLottery.expired" class="col-12 col-lg-6">
            <h1 style="text-align: center">مهلت شرکت در قرعه کشی به پایان رسیده</h1>
          </div>

          <div v-else-if="mode === 'result' && lastLottery.expired" class="col-12 col-lg-6">
            <!-- <form class="form form_3" @submit.prevent="checkLottery">
						<div class="content">
							<h3>کد پیگیری خود را برای اطلاع از وضعیت قرعه کشی وارد کنید</h3>
						</div>
						<div class="formRow">
							<input type="text" placeholder="کد پیگیری" v-model="checkData" />
						</div>
						<div class="formRow">
							<button class="btn btn-primary" type="submit">بررسی</button>
						</div>
					</form> -->
            <div class="winners-list">
              <div class="title">
                <h2>لیست برندگان قرعه کشی:</h2>
              </div>
              <div class="tableBox">
                <table class="lotteryWinners">
                  <thead>
                    <tr>
                      <th class="index">ردیف</th>
                      <th class="name">نام و نام خانوادگی</th>
                      <th class="mobile">شماره تلفن همراه</th>
                    </tr>
                  </thead>
                  <tBody>
                    <tr v-for="(item, index) in lastLottery.winnersList" :key="index + item.serial">
                      <td class="index">
                        <span> {{ index + 1 }} </span>
                      </td>
                      <td class="name">
                        <span>{{ item.fullName }}</span>
                      </td>
                      <td class="mobile">
                        <span style="direction: ltr">{{ coverPhoneNumber(item.mobile) }}</span>
                      </td>
                    </tr>
                  </tBody>
                </table>
              </div>
            </div>
          </div>

          <div v-else class="col-12">
            <h1 style="text-align: center">اطلاعاتی برای نمایش در این صفحه موجود نمیباشد</h1>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment-jalaali'
export default {
  name: 'LotteryPage',
  async asyncData({ $axios, error }) {
    try {
      const lastLottery = await $axios.get('/api/public/lastLottery')
      return {
        lastLottery: lastLottery.data
      }
    } catch (e) {
      error({ status: 500, message: 'There is a problem here' })
    }
  },
  data() {
    return {
      lastLottery: null,
      validation: {},
      enrollData: {
        fullName: '',
        mobile: '',
        serial: ''
      }
      // checkData: ''
    }
  },
  head() {
    return {
      title: 'آسان سرویس | قرعه کشی'
    }
  },
  computed: {
    mode() {
      return this.$route.query?.mode
    },
    remainDays() {
      return moment(this.lastLottery.expireDate).diff(Date.now(), 'days')
    }
  },
  methods: {
    enrollLottery() {
      this.validation = {}
      const data = { ...this.enrollData, lotteryId: this.lastLottery._id }
      const responseTitle = 'شرکت در قرعه کشی'

      const loading = this.$loading({
        lock: true,
        text: 'در حال بررسی اطلاعات شما',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      this.$axios
        .post('/api/public/enrollParticipant', data)
        .then(res => {
          loading.close()
          this.$alert(res.data.message, responseTitle, {
            confirmButtonText: 'بستن',
            type: 'success'
          })
          this.enrollData.fullName = ''
          this.enrollData.mobile = ''
          this.enrollData.serial = ''
        })
        .catch(err => {
          loading.close()
          if (err.response.status === 422) {
            this.validation = err.response.data.validation
            return this.$message({
              type: 'warning',
              message: 'اطلاعات را بررسی و دوباره تلاش کنید'
            })
          }
          let errMsg
          if (err.response.status === 404) errMsg = err.response.data.message
          else if (err.response.status === 500) errMsg = 'مشکلی در ثبت اطلاعات پیش آمده'
          this.$alert(errMsg, responseTitle, {
            confirmButtonText: 'بستن',
            type: 'error'
          })
        })
    },
    coverPhoneNumber(input) {
      const numbersArray = input.split('')
      numbersArray.reverse()
      numbersArray.splice(4, 3, '***')
      numbersArray.reverse()
      const str = numbersArray.join('')
      return str
    },
    checkLottery() {}
  }
}
</script>