Skip to content

activities / web-lottery

Go to a project
Commit 7ca4ae2c by 赖慧粮
Options

feat(timing): 定时抽奖更新

parent 4682927e
Showing with 35 additions and 96 deletions
components/Lottery/Instant/MiniMain.vue
......@@ -61,7 +61,7 @@
</div>
<div class="lottery-instant__prize-img">
<img v-if="rows.id" src="@/assets/images/lottery/gift.png" alt="">
<img v-else src="@/assets/images/lottery/free.png" alt="" />
<img v-else src="@/assets/images/lottery/smile.png" alt="" />
</div>
</div>
</template>
......@@ -193,11 +193,6 @@ export default {
},
// 开始抽奖
startLottery() {
this.isLottering = !this.isLottering
if (this.isLogin) {
return
}
// 抽奖不在活动日期内
if (this.isNotStart) {
this.$toast(`抽奖活动${LOTTERY_STATUS_TXT[+this.lotteryInfo.status].label}`)
......@@ -279,7 +274,7 @@ export default {
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
padding: 18px 15px 22px;
padding: 0px 15px 22px;
overflow: hidden auto;
-webkit-overflow-scrolling: touch;
&__layout-grid {
......
components/Lottery/Timing/JoinButton.vue
<template>
<section class="join-button">
<div class="btn-box">
<template v-if="parseInt(lotteryInfo.status, 10) === LOTTERY_STATUS.teaser">
<template v-if="+lotteryInfo.status === LOTTERY_STATUS.teaser">
<button v-if="lotteryInfo.condition === 1" class="join-btn pre">未开始</button>
<button v-if="lotteryInfo.condition === 2" class="join-btn pre countdown">
<template v-if="hours > 0">{{ hours | filterNum }}:</template>
{{ minutes | filterNum }}:{{ seconds | filterNum }}后开始
</button>
</template>
<template v-if="parseInt(lotteryInfo.status, 10) === LOTTERY_STATUS.start">
<template v-if="+lotteryInfo.status === LOTTERY_STATUS.start">
<template v-if="lotteryInfo.userTimes === 0 && lotteryInfo.isDraw">
<button class="join-btn pre">待开奖</button>
</template>
......@@ -17,27 +17,15 @@
<button class="join-btn" @click="lottery">点击参加</button>
</template>
</template>
<template v-if="parseInt(lotteryInfo.status, 10) === LOTTERY_STATUS.end">
<template v-if="+lotteryInfo.status === LOTTERY_STATUS.end">
<template v-if="isLogin && lotteryInfo.isDraw && lotteryInfo.isWin">
<div class="win-result-box">
<p class="win-result">恭喜您中奖！</p>
<a v-if="isBindPhone" class="blue-text" @click="jumpToBinding">
点击绑定手机号
<i class="iconfont icon-zhankai"></i>
</a>
<span v-if="lotteryInfo.showResult" class="blue-text win-list" @click="$emit('openWiner')">
查看中奖名单
<i class="iconfont icon-zhankai"></i>
</span>
</div>
</template>
<template v-if="isLogin && lotteryInfo.isDraw && !lotteryInfo.isWin">
<div class="win-result-box">
<p class="win-result">很遗憾，您没有中奖</p>
<span v-if="lotteryInfo.showResult" class="blue-text win-list" @click="$emit('openWiner')">
查看中奖名单
<i class="iconfont icon-zhankai"></i>
</span>
</div>
</template>
<template v-if="!isLogin || !lotteryInfo.isDraw">
......@@ -45,16 +33,13 @@
</template>
</template>
</div>
<div
v-if="parseInt(lotteryInfo.status, 10) !== LOTTERY_STATUS.end ? true : !isLogin || !lotteryInfo.isDraw"
class="join-num"
>
<div v-if="+lotteryInfo.status !== LOTTERY_STATUS.end ? true : !isLogin || !lotteryInfo.isDraw" class="join-num">
已有 {{ lotteryInfo.activeNum }} 人参与
</div>
</section>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { mapGetters } from 'vuex'
import { LOTTERY_STATUS } from '@/utils/constant'
// 倒计时逻辑处理
import CountDown from '@/mixins/CountDown'
......@@ -75,8 +60,7 @@ export default {
computed: {
...mapGetters({
isLogin: 'users/isLogin',
lotteryInfo: 'lottery/lotteryInfo',
isBindPhone: 'users/isBindPhone'
lotteryInfo: 'lottery/lotteryInfo'
})
},
watch: {
......@@ -91,7 +75,6 @@ export default {
this.dateInit()
},
methods: {
...mapActions({ jumpToBinding: 'users/jumpToBinding' }),
dateInit() {
// 倒计时开始
if (this.lotteryInfo.status === 0) {
......@@ -112,6 +95,9 @@ export default {
}
</script>
<style lang="less">
@--box-width: 100px;
@--box-height: @--box-width;
@keyframes wave {
0% {
opacity: 0.5;
......@@ -131,7 +117,8 @@ export default {
}
.join-button {
.btn-box {
width: 158px;
width: @--box-width;
min-height: @--box-height;
height: 100%;
margin: 0 auto;
display: flex;
......@@ -148,8 +135,8 @@ export default {
bottom: 0;
right: 0;
margin: auto;
width: 142px;
height: 142px;
width: @--box-width - 16px;
height: @--box-height - 16px;
&::before {
content: '';
border-radius: 50%;
......@@ -169,8 +156,8 @@ export default {
position: absolute;
top: 0;
left: 0;
width: 142px;
height: 142px;
width: @--box-width - 16px;
height: @--box-height - 16px;
background-color: #fbaca6;
transform: scale(1.1);
animation: wavetwo 1s ease-out infinite;
......@@ -183,9 +170,9 @@ export default {
color: #fff;
font-size: 18px;
text-align: center;
width: 142px;
height: 142px;
line-height: 142px;
width: @--box-width - 16px;
height: @--box-height - 16px;
line-height: @--box-height - 16px;
border-radius: 50%;
background-color: #e85c52;
outline: none;
......@@ -198,7 +185,7 @@ export default {
background-color: #999;
}
&.countdown {
font-size: 16px;
font-size: 12px;
}
}
.win-result-box {
......@@ -231,54 +218,5 @@ export default {
line-height: 20px;
text-align: center;
}
// .test {
// opacity: 1;
// display: block;
// background: none;
// position: relative;
// border-radius: 50%;
// width: 24px;
// height: 24px;
// margin: 0 0 0 80px !important;
// background: rgba(255, 255, 255, 0.1);
// transition: 0.6s;
// &::before {
// position: absolute;
// width: 18px;
// height: 18px;
// border-radius: 50%;
// content: "";
// border: 1px solid #fff;
// left: 50%;
// top: 50%;
// transition: 0.4s;
// transform: translate(-50%, -50%);
// }
// &:after {
// position: absolute;
// width: 8px;
// height: 8px;
// border-radius: 50%;
// content: "";
// background: #fff;
// left: 50%;
// top: 50%;
// transition: 0.5s;
// transform: translate(-50%, -50%);
// }
// &:hover {
// &:before {
// background: #fff;
// width: 10px;
// height: 10px;
// border: 0px solid #00c0ff;
// }
// &:after {
// width: 24px;
// height: 24px;
// background: none;
// }
// }
// }
}
</style>
components/Lottery/Timing/Main.vue
......@@ -9,9 +9,9 @@
</p>
</div>
<TimingStatus class="timing-status-box"></TimingStatus>
<JoinButton class="join-button-box" @lottery="lotteryCallback" @openWiner="isShowWinner = true"></JoinButton>
<JoinButton class="join-button-box" @lottery="lotteryCallback"></JoinButton>
<BackButton v-if="backUrl" class="back-box" :url="backUrl"></BackButton>
<WinnersPopup v-model="isShowWinner"></WinnersPopup>
<Records></Records>
</section>
</template>
<script>
......@@ -26,8 +26,6 @@ import TimingStatus from '@/components/Lottery/Timing/TimingStatus'
import JoinButton from '@/components/Lottery/Timing/JoinButton'
// 返回直播间按钮
import BackButton from '@/components/Lottery/Timing/BackButton'
// 中奖名单
import WinnersPopup from '@/components/Common/WinnersPopup'
export default {
components: {
......@@ -35,12 +33,11 @@ export default {
TimingStatus,
JoinButton,
BackButton,
WinnersPopup
Records: () => import('@/components/Lottery/Instant/Records'),
},
data() {
return {
isBtnLoading: false,
isShowWinner: false,
id: this.$route.query.id,
playId: this.$route.query.sessionId
}
......@@ -123,7 +120,7 @@ export default {
height: 100%;
position: relative;
.timing-banner {
padding-top: 9 / 16 * 100%;
padding-top: 115 / 330 * 100%;
position: relative;
}
.prize-info {
......@@ -158,7 +155,6 @@ export default {
}
.join-button-box {
margin-top: 50px;
min-height: 158px;
}
.back-box {
position: absolute;
......
utils/constant.js
......@@ -46,6 +46,16 @@ export const LOTTERY_STYLE_TXT = {
[LOTTERY_STYLE.wheel]: '大转盘'
}
/* 定时抽奖 场次开奖条件 */
export const LOTTERY_INSTANT_RULES = {
time: 1,
people: 2
}
export const LOTTERY_INSTANT_RULES_TXT = {
[LOTTERY_INSTANT_RULES.time]: '倒计时',
[LOTTERY_INSTANT_RULES.people]: '参与人数'
}
/* 留言抽奖兑换方式 */
export const LOTTERY_EXCHANGE_TYPE = {
offline: 1,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment