Skip to content

activities / web-lottery

Go to a project
Commit 1192c6a1 by Lays-lzq
Options

Merge branch 'feature/miniBanner'

parents dce2fdbc 9cc97d2f
Showing with 128 additions and 20 deletions
components/Lottery/Instant/Banner.vue
......@@ -41,7 +41,7 @@ export default {
display: block;
width: 100%;
height: 0;
padding-top: 115 / 330 * 100%;
padding-top: 110 / 330 * 100%;
position: relative;
}
&__content {
......
components/Lottery/Instant/MiniMain.vue
......@@ -59,6 +59,7 @@
v-if="+lotteryInfo.showType === LOTTERY_STYLE.grid || +lotteryInfo.showType === LOTTERY_STYLE.wheel"
class="lottery-instant"
>
<Banner v-if="isShowBanner" class="lottery-instant__banner"></Banner>
<div v-if="+lotteryInfo.showType === LOTTERY_STYLE.grid" class="lottery-instant__layout-grid">
<div class="lottery-instant__content-grid">
<CountdownBar class="lottery-instant__countdown"></CountdownBar>
......@@ -172,6 +173,7 @@ import Bus from '@/utils/Bus'
export default {
name: 'MiniMain',
components: {
Banner: () => import('@/components/Lottery/Instant/Banner'),
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
Records: () => import('@/components/Lottery/Instant/Records'),
IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup'),
......@@ -219,7 +221,8 @@ export default {
id: 0, // 中奖等级
name: '谢谢参与' // 中奖等级
}, // 中奖信息
randomType: Math.floor(Math.random() * (2 - 1 + 1)) + 1 // 部分抽奖类型随机进1或2
randomType: Math.floor(Math.random() * (2 - 1 + 1)) + 1, // 部分抽奖类型随机进1或2
isShowBanner: true
}
},
computed: {
......@@ -412,7 +415,7 @@ export default {
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
padding: 0px 15px 22px;
padding: 12px 15px 22px;
overflow: hidden auto;
-webkit-overflow-scrolling: touch;
&__layout-grid {
......@@ -434,7 +437,7 @@ export default {
height: 100%;
}
&__countdown {
padding-top: 18px;
padding-top: 8px;
}
&__times {
margin: 65px 0 5px;
......
components/Lottery/Instant/type/TypeGashaponMini.vue
<template>
<section class="lottery-instant">
<div class="lottery-instant__main">
<Banner v-if="isShowBanner" class="lottery-instant__banner"></Banner>
<CountdownBar class="lottery-instant__countdown"></CountdownBar>
<div class="lottery-instant__layout-gashapon">
<div class="content-main">
......@@ -51,6 +52,7 @@ import { ballListGashapon } from './config'
export default {
components: {
Banner: () => import('@/components/Lottery/Instant/Banner'),
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
......@@ -90,7 +92,8 @@ export default {
playId: this.$route.query.sessionId || null, // 场次id
sid: this.$route.query.sid || null, // 引用id
stype: this.$route.query.stype || null, // 引用类型
ballListGashapon // 扭蛋球图片
ballListGashapon, // 扭蛋球图片
isShowBanner: true
}
},
computed: {
......@@ -155,6 +158,10 @@ export default {
padding: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
&__banner {
margin-top: 10px;
padding: 0 25px;
}
&__countdown {
padding-top: 18px;
}
......
components/Lottery/Instant/type/TypeGuessMini.vue
<template>
<section class="lottery-instant">
<div class="lottery-instant__main">
<Banner v-if="isShowBanner" class="lottery-instant__banner"></Banner>
<img class="lottery-instant__title" src="@/assets/images/lottery/guess/game-title.png" />
<CountdownBar class="lottery-instant__countdown"></CountdownBar>
<div class="lottery-instant__layout-guess">
......@@ -55,6 +56,7 @@ import { blindBoxListGuess, starConfig } from './config'
export default {
components: {
Banner: () => import('@/components/Lottery/Instant/Banner'),
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
PrizeGuess,
WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
......@@ -97,7 +99,8 @@ export default {
chooseIndex: 0,
timer: null,
blindBoxList: blindBoxListGuess,
starConfig
starConfig,
isShowBanner: true
}
},
computed: {
......@@ -162,6 +165,10 @@ export default {
&__main {
text-align: center;
}
&__banner {
margin-top: 10px;
padding: 0 10px;
}
&__title {
width: 66.7%;
object-fit: cover;
......
components/Lottery/Instant/type/TypeGuessMini2.vue
<template>
<section class="lottery-instant">
<div class="lottery-instant__main">
<Banner v-if="isShowBanner" class="lottery-instant__banner"></Banner>
<img class="lottery-instant__title" src="@/assets/images/lottery/guess/game-title.png" />
<CountdownBar class="lottery-instant__countdown"></CountdownBar>
<div class="lottery-instant__layout-guess">
......@@ -55,6 +56,7 @@ import { blindBoxListGuess2 as blindBoxListGuess, starConfig } from './config'
export default {
components: {
Banner: () => import('@/components/Lottery/Instant/Banner'),
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
PrizeGuess,
WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
......@@ -97,7 +99,8 @@ export default {
chooseIndex: 0,
timer: null,
blindBoxList: blindBoxListGuess,
starConfig
starConfig,
isShowBanner: true
}
},
computed: {
......@@ -164,19 +167,23 @@ export default {
&__main {
text-align: center;
}
&__banner {
margin-top: 10px;
padding: 0 10px;
}
&__title {
width: 66.7%;
object-fit: cover;
margin-top: 28px;
margin-top: 6px;
}
&__countdown {
padding-top: 6px;
padding-top: 0px;
}
&__layout-guess {
.content-img {
position: relative;
width: 218px;
height: 205px;
height: 200px;
margin: -10px auto 0 auto;
img {
width: 100%;
......@@ -193,7 +200,7 @@ export default {
width: 100%;
height: 0;
padding-top: 156 / 367 * 100%;
margin-top: 16px;
margin-top: 6px;
&-box {
position: absolute;
bottom: 20%;
......
components/Lottery/Instant/type/TypeScratchMini.vue
<template>
<section class="lottery-instant">
<div class="lottery-instant__main">
<Banner v-if="isShowBanner" class="lottery-instant__banner"></Banner>
<CountdownBar class="lottery-instant__countdown"></CountdownBar>
<div class="lottery-instant__layout-scratch">
<div class="lottery-instant__content-scratch">
......@@ -77,6 +78,7 @@ import Bus from '@/utils/Bus'
export default {
components: {
Banner: () => import('@/components/Lottery/Instant/Banner'),
WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
Records: () => import('@/components/Lottery/Instant/Records'),
......@@ -116,7 +118,8 @@ export default {
id: this.$route.query.id || null, // 抽奖id
playId: this.$route.query.sessionId || null, // 场次id
sid: this.$route.query.sid || null, // 引用id
stype: this.$route.query.stype || null // 引用类型
stype: this.$route.query.stype || null, // 引用类型
isShowBanner: true
}
},
computed: {
......@@ -201,6 +204,10 @@ export default {
&__main {
padding: 0 0.13rem;
}
&__banner {
margin-top: 10px;
padding: 0 15px;
}
&__layout-scratch {
position: relative;
background-image: url('~@/assets/images/lottery/scratch/game-bg.png');
......
components/Lottery/Timing/Banner.vue 0 → 100644
<template>
<section v-if="isShowBanner" class="banner">
<a class="banner__wrap" target="_blank" :href="bannerLink">
<div class="banner__content" :style="`background-image:url('${bannerImg}')`"></div>
</a>
</section>
</template>
<script>
// 默认背景图
import CONFIG from '@/config'
import { mapGetters } from 'vuex'
export default {
name: 'Banner',
computed: {
...mapGetters({
lotteryInfo: 'lottery/lotteryInfo'
}),
isShowBanner() {
const { isShowBanner } = this.lotteryInfo
return !!isShowBanner
},
bannerImg() {
const { banner } = this.lotteryInfo
const img = banner || CONFIG.defBanner
return `${img}${CONFIG.ossImageServe}`
},
bannerLink() {
return this.lotteryInfo.url || false
}
}
}
</script>
<style lang="less" scoped>
.banner {
width: 100%;
display: flex;
&__wrap {
display: block;
width: 100%;
height: 0;
padding-top: 110 / 330 * 100%;
position: relative;
}
&__content {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 4px;
background-size: cover;
background-position: center;
font-size: 0;
}
}
</style>
components/Lottery/Timing/type/LuckyBag.vue
<template>
<section class="main-timing" :style="{ backgroundPosition: isMini ? '0 0' : '' }">
<section class="main-timing" :style="{ backgroundPosition: isMini ? isShowBanner ? isIframe ? '0 100px' : '0 120px' : '0 0' : '' }">
<div v-if="isMini" class="main-link" @click="goRule">活动介绍</div>
<Banner v-show="isShowBanner"></Banner>
<TimingStatus class="timing-status-box"></TimingStatus>
<JoinButton
class="join-button-box"
:style="{ bottom: isMini ? '26%' : '51%' }"
:style="{ bottom: isMini ? isShowBanner ? isIframe ? '20%' : '35%' : '26%' : '51%' }"
@lottery="lotteryCallback"
></JoinButton>
<Rewards v-if="!isMini" :style="{ height: isMini ? '65.5vh' : '40.5vh' }" class="reward-box"></Rewards>
......@@ -30,6 +31,8 @@ import Rewards from '@/components/Lottery/Timing/Rewards'
import BackButton from '@/components/Lottery/Timing/BackButton'
// 中奖弹窗
import WinPopup from '@/components/Lottery/Timing/WinPopup'
// banner
import Banner from '../Banner.vue'
export default {
......@@ -40,6 +43,7 @@ export default {
Rewards,
BackButton,
WinPopup,
Banner,
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
RulePopup: () => import('@/components/Lottery/Timing/RulePopup'),
Records: () => import('@/components/Lottery/Instant/Records')
......@@ -74,6 +78,7 @@ export default {
},
data() {
return {
isShowBanner: true
}
},
computed: {
......@@ -92,6 +97,9 @@ export default {
? Object.values(this.lotteryInfo.prizeConfigs)
: this.lotteryInfo.prizeConfigs
return list
},
isIframe() {
return self !== top
}
},
methods: {
......@@ -109,9 +117,10 @@ export default {
.main-timing {
height: 100%;
position: relative;
padding-top: 20px;
padding: 20px 24px 0;
background: url(../img/background-luckybag.png) no-repeat center;
background-size: cover;
background-color: #FD6F3C;
.main-link {
width: 24px;
height: 74px;
......@@ -131,7 +140,7 @@ export default {
}
.timing-status-box {
// padding-left: 16px;
// margin-top: 10px;
margin-top: 10px;
height: 20px;
line-height: 20px;
font-size: 14px;
......
components/Lottery/Timing/type/Treasure.vue
<template>
<section class="main-timing" :style="{ backgroundPosition: isMini ? '0 0' : '' }">
<section class="main-timing" :style="{ backgroundPosition: isMini ? isShowBanner ? isIframe ? '0 -190%' : '0 140px' : '0 30px' : '' }">
<div v-if="isMini" class="main-link" @click="goRule">活动介绍</div>
<Banner v-show="isShowBanner"></Banner>
<TimingStatus class="timing-status-box"></TimingStatus>
<JoinButton
class="join-button-box"
:style="{ bottom: isMini ? '32%' : '49%' }"
:style="{ bottom: isMini ? isShowBanner ? isIframe ? '22%' : '32%' : '26%' : '49%' }"
@lottery="lotteryCallback"
></JoinButton>
<Rewards v-if="!isMini" :style="{ height: isMini ? '65.5vh' : '46.5vh' }" class="reward-box"></Rewards>
......@@ -30,6 +31,8 @@ import Rewards from '@/components/Lottery/Timing/Rewards'
import BackButton from '@/components/Lottery/Timing/BackButton'
// 中奖弹窗
import WinPopup from '@/components/Lottery/Timing/WinPopup'
// banner
import Banner from '../Banner.vue'
export default {
components: {
......@@ -39,6 +42,7 @@ export default {
Rewards,
BackButton,
WinPopup,
Banner,
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
RulePopup: () => import('@/components/Lottery/Timing/RulePopup'),
Records: () => import('@/components/Lottery/Instant/Records')
......@@ -73,6 +77,7 @@ export default {
},
data() {
return {
isShowBanner: true
}
},
computed: {
......@@ -91,6 +96,9 @@ export default {
? Object.values(this.lotteryInfo.prizeConfigs)
: this.lotteryInfo.prizeConfigs
return list
},
isIframe() {
return self !== top
}
},
methods: {
......@@ -107,9 +115,10 @@ export default {
.main-timing {
height: 100%;
position: relative;
padding-top: 20px;
padding: 20px 24px 0;
background: url(../img/background-treasure.png) no-repeat center;
background-size: cover;
background-color: #FD2216;
.main-link {
width: 24px;
height: 74px;
......@@ -129,7 +138,7 @@ export default {
}
.timing-status-box {
// padding-left: 16px;
// margin-top: 10px;
margin-top: 10px;
height: 20px;
line-height: 20px;
font-size: 14px;
......
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