Swift
119 lines
3.5 KiB
Vue
119 lines
3.5 KiB
Vue
<template>
|
|
<div class="lottery">
|
|
<div
|
|
v-if="!lotteryPopUpBtn || lotteryPopUpBtn.visible"
|
|
class="lottery-popup-button"
|
|
:style="[buttonStyle, { transform: btnScale }]"
|
|
@click="showPopup"
|
|
></div>
|
|
|
|
<div class="lottery-popup">
|
|
<div class="relatevePos">
|
|
<div class="bg" @click="closePopup"></div>
|
|
<div class="content" :style="[popUpStyle]">
|
|
<div class="relativePos">
|
|
<i class="closeBtn far fa-times-circle" @click="closePopup"></i>
|
|
<div class="btnBox" @click="closePopup">
|
|
<nuxt-link
|
|
v-if="lastLottery && lastLottery.expired"
|
|
:to="{ name: 'lottery', query: { mode: 'result' } }"
|
|
class="btn btn-primary"
|
|
>مشاهده نتایج قرعه کشی</nuxt-link
|
|
>
|
|
<nuxt-link v-else :to="{ name: 'lottery', query: { mode: 'enroll' } }" class="btn btn-primary"
|
|
>شرکت در قرعه کشی</nuxt-link
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'LotteryPopUp',
|
|
data() {
|
|
return {
|
|
lotteryPopUpBtn: null,
|
|
lastLottery: null,
|
|
btnScale: 'scale(0)',
|
|
isPopupOpen: false
|
|
}
|
|
},
|
|
computed: {
|
|
buttonStyle() {
|
|
const btn = this.lotteryPopUpBtn
|
|
const data = {
|
|
bottom: btn?.y.toString().concat('px') || 0,
|
|
left: btn?.x.toString().concat('px') || 0,
|
|
width: btn?.w.toString().concat('px') || 0,
|
|
height: btn?.h.toString().concat('px') || 0
|
|
}
|
|
if (btn) data.backgroundImage = `url(${btn?.bgImg})`
|
|
return data
|
|
},
|
|
popUpStyle() {
|
|
const popup = this.lastLottery
|
|
const data = {}
|
|
|
|
if (popup) {
|
|
if (!popup.expired) {
|
|
data.backgroundImage = `url(${popup?.entryBgImg})`
|
|
data.width = popup.entryWidth.toString().concat('px')
|
|
data.height = popup.entryHeight.toString().concat('px')
|
|
} else {
|
|
data.backgroundImage = `url(${popup?.resultBgImg})`
|
|
data.width = popup.resultWidth.toString().concat('px')
|
|
data.height = popup.resultHeight.toString().concat('px')
|
|
}
|
|
}
|
|
|
|
return data
|
|
}
|
|
},
|
|
watch: {
|
|
buttonStyle(neVal, oldVal) {
|
|
setTimeout(() => (this.btnScale = 'scale(1)'), 1 * 1000)
|
|
}
|
|
},
|
|
async mounted() {
|
|
// attach esc key to window
|
|
$(document).keyup(e => {
|
|
if (e.key === 'Escape' && this.isPopupOpen) this.closePopup()
|
|
})
|
|
|
|
// fetch data
|
|
try {
|
|
const lotteryPopUpBtn = await this.$axios.get('/api/public/lotteryPopUp')
|
|
if (lotteryPopUpBtn.data.visible) {
|
|
const lastLottery = await this.$axios.get('/api/public/lastLottery')
|
|
this.lastLottery = lastLottery.data
|
|
}
|
|
setTimeout(() => (this.lotteryPopUpBtn = lotteryPopUpBtn.data), 2 * 1000)
|
|
} catch (e) {
|
|
console.log('LotteryPopUp button fetch problem ---- ', e.response.data)
|
|
}
|
|
},
|
|
methods: {
|
|
showPopup() {
|
|
this.$gsap
|
|
.timeline({
|
|
onComplete: () => (this.isPopupOpen = true)
|
|
})
|
|
.to($('.lottery-popup'), { autoAlpha: 1, duration: 0.04 })
|
|
.to($('.lottery-popup .content'), { opacity: 1, scale: 1, duration: 0.2, ease: 'power3.out' })
|
|
},
|
|
closePopup() {
|
|
this.$gsap
|
|
.timeline({
|
|
onComplete: () => (this.isPopupOpen = false)
|
|
})
|
|
.to($('.lottery-popup .content'), { opacity: 0, scale: 0, duration: 0.1 })
|
|
.to($('.lottery-popup'), { autoAlpha: 0, duration: 0.04 })
|
|
}
|
|
}
|
|
}
|
|
</script>
|