Skip to content

activities / web-lottery

Go to a project
Commit 1ef033ec by 施嘉伟
Options

合并分支 'feature/newUI_20220120' 到 'test' 

Feature/new ui 20220120



查看合并请求 !13
parents 7fa8f464 56ad4cf5
Showing with 3260 additions and 41 deletions
components/Common/BindPhoneDialog.vue
......@@ -10,6 +10,7 @@
<script>
import { mapActions } from 'vuex'
import Bus from '@/utils/Bus'
export default {
name: 'BindPhoneDialog',
props: {
......@@ -24,7 +25,7 @@ export default {
return this.value
},
set (val) {
this.$emit('input', val)
Bus.$emit('updateMain', { isShowBindPhone: val })
}
}
},
......
components/Lottery/Instant/CountdownBar.vue
<template>
<section v-if="'startTime' in lotteryInfo" class="countdown-bar">
<div class="countdown-bar__status">
<div
class="countdown-bar__status"
:class="{ 'mini-width-version': version === 'mini', 'none-width-version': version === 'none' }"
>
<template v-if="parseInt(status, 10) !== LOTTERY_STATUS.end">
<div class="countdown-bar__text">{{ LOTTERY_STATUS_TXT[parseInt(status, 10)].actionLabel }}倒计时：</div>
<van-count-down millisecond :time="time">
......@@ -51,6 +54,12 @@ export default {
return value
}
},
props: {
version: {
type: String,
default: 'normal'
}
},
data() {
return {
LOTTERY_STATUS,
......@@ -95,7 +104,7 @@ export default {
font-size: 13px;
// text-align: center;
display: flex;
// justify-content: center;
justify-content: center;
align-items: center;
color: #fff;
font-weight: 400;
......@@ -113,9 +122,19 @@ export default {
font-size: 13px;
font-weight: 400;
}
&__end{
&__end {
width: 100%;
text-align: center;
}
.mini-width-version {
min-width: 160px;
padding: 0 6px;
border: none;
}
.none-width-version {
background-color: transparent;
padding: 0;
border: none;
}
}
</style>
components/Lottery/Instant/Introduction.vue
<template>
<div class="introduction">
<div class="introduction__sec-title"></div>
<div class="introduction__wrap">
<div class="introduction__content">
<p class="introduction__intro">{{ lotteryInfo.intro }}</p>
<div class="introduction" :style="introBoxStyle">
<div class="introduction__sec-title" :style="titleStyle">{{ titleText }}</div>
<div class="introduction__wrap" :style="wrapStyle">
<div class="introduction__content" :style="contentStyle">
<p v-if="rule.position === 'top'" class="introduction__intro" :style="rule.style">{{ lotteryInfo.intro }}</p>
<template v-if="!!lotteryInfo.isShowPrize">
<div class="introduction__title">本场活动奖品：</div>
<div class="introduction__prize">
......@@ -19,6 +19,10 @@
</ul>
</div>
</template>
<div v-if="rule.position === 'bottom'" class="introduction__intro" :style="rule.style">
<p class="introduction__intro-rule">活动规则</p>
<p>{{ lotteryInfo.intro }}</p>
</div>
</div>
</div>
</div>
......@@ -30,6 +34,35 @@ import img from '@/assets/images/lottery/gift.png'
export default {
name: 'Introduction',
props: {
rule: {
type: Object,
default: () => ({
position: 'top',
style: {}
})
},
titleStyle: {
type: Object,
default: () => ({})
},
titleText: {
type: String,
default: ''
},
wrapStyle: {
type: Object,
default: () => ({})
},
contentStyle: {
type: Object,
default: () => ({})
},
introBoxStyle: {
type: Object,
default: () => ({})
}
},
data() {
return {
img
......@@ -79,6 +112,11 @@ export default {
font-size: 12px;
line-height: 18px;
white-space: pre-line;
&-rule {
text-align: center;
margin-top: 30px;
}
}
&__title {
margin: 14px 0 10px;
......
components/Lottery/Instant/IntroductionPopup.vue
<template>
<van-popup v-model="visible" :overlay="false" position="bottom" transition="van-fade" class="introduction-popup">
<van-popup
v-model="visible"
:overlay="false"
position="bottom"
transition="van-fade"
class="introduction-popup"
:style="popupStyle"
>
<div class="introduction-popup__main">
<div class="introduction-popup__sec-title">活动介绍</div>
<div class="introduction-popup__wrap">
<div class="introduction-popup__content">
<p class="introduction-popup__intro">{{ lotteryInfo.intro }}</p>
<div class="introduction-popup__sec-title" :style="titleStyle">活动介绍</div>
<div class="introduction-popup__wrap" :style="wrapStyle">
<div class="introduction-popup__content" :style="contentStyle">
<p v-if="rule.position === 'top'" class="introduction-popup__intro" :style="rule.style">{{ lotteryInfo.intro }}</p>
<template v-if="!!lotteryInfo.isShowPrize">
<div class="introduction-popup__title">本场活动奖品：</div>
<div class="introduction-popup__prize">
<ul
class="introduction-popup__list"
:class="{ 'introduction-popup__list--center': lotteryInfo.prizeConfigs.length < 3 }"
>
<li v-for="(item, index) in lotteryInfo.prizeConfigs" :key="index">
<img v-lazy="item.icon || img" class="introduction-popup__item-img" alt />
<p v-if="item.prizeAlias" class="introduction-popup__item-level">{{ item.prizeAlias }}</p>
<p class="introduction-popup__item-name">{{ item.name }}</p>
</li>
</ul>
<div class="introduction-popup__box" :style="contentBoxStyle">
<div class="introduction-popup__title">本场活动奖品：</div>
<div class="introduction-popup__prize">
<ul
class="introduction-popup__list"
:class="{ 'introduction-popup__list--center': lotteryInfo.prizeConfigs.length < 3 }"
>
<li v-for="(item, index) in lotteryInfo.prizeConfigs" :key="index">
<img v-lazy="item.icon || img" class="introduction-popup__item-img" alt />
<p v-if="item.prizeAlias" class="introduction-popup__item-level">{{ item.prizeAlias }}</p>
<p class="introduction-popup__item-name">{{ item.name }}</p>
</li>
</ul>
</div>
</div>
</template>
<div v-if="rule.position === 'bottom'" class="introduction-popup__intro" :style="rule.style">
<p class="introduction-popup__intro-rule">活动规则</p>
<p>{{ lotteryInfo.intro }}</p>
</div>
</div>
</div>
<div class="introduction-popup__back" @click="visible = false">返回活动</div>
<div class="introduction-popup__back" :style="backStyle" @click="visible = false">返回活动</div>
</div>
</van-popup>
</template>
......@@ -30,6 +43,7 @@
<script>
import { mapGetters } from 'vuex'
import img from '@/assets/images/lottery/gift.png'
import Bus from '@/utils/Bus'
export default {
name: 'Introduction',
......@@ -37,6 +51,37 @@ export default {
value: {
type: Boolean,
default: false
},
rule: {
type: Object,
default: () => ({
position: 'top',
style: {}
})
},
contentBoxStyle: {
type: Object,
default: () => ({})
},
titleStyle: {
type: Object,
default: () => ({})
},
wrapStyle: {
type: Object,
default: () => ({})
},
contentStyle: {
type: Object,
default: () => ({})
},
popupStyle: {
type: Object,
default: () => ({})
},
backStyle: {
type: Object,
default: () => ({})
}
},
data() {
......@@ -51,13 +96,13 @@ export default {
return this.value
},
set(val) {
this.$emit('input', val)
Bus.$emit('updateMain', { isShowIntro: val })
}
}
},
methods: {
getContainer(){
return document.querySelector('.lottery-instant');
getContainer() {
return document.querySelector('.lottery-instant')
}
}
}
......@@ -123,6 +168,10 @@ export default {
font-size: 12px;
line-height: 18px;
white-space: pre-line;
&-rule {
text-align: center;
margin-top: 30px;
}
}
&__title {
margin: 14px 0 10px;
......
components/Lottery/Instant/Records.vue
......@@ -3,29 +3,51 @@
<div class="records__layouts">
<div class="records__entry" @click="openRecord">
<div class="records__entry-wrap">
<p>抽奖</p>
<p>记录</p>
<p :style="textColor">抽奖</p>
<p :style="textColor">记录</p>
</div>
</div>
<div v-if="isShowWinnersList" class="records__entry records__entry--winners" @click="openRecordPopup('winners')">
<div class="records__entry-wrap">
<p>中奖</p>
<p>名单</p>
<p :style="textColor">中奖</p>
<p :style="textColor">名单</p>
</div>
</div>
</div>
<RecordsPupup v-model="isShowRecordsPopup" :active-tab="activeTab" :is-show-winners-list="isShowWinnersList"></RecordsPupup>
<RecordsPupup
v-model="pupupVisible"
:active-tab="activeTab"
:is-show-winners-list="isShowWinnersList"
@setIsShowRecordsPopup="setIsShowRecordsPopup"
></RecordsPupup>
<RecordsPupupNew
v-model="pupupNewVisible"
:active-tab="activeTab"
:is-show-winners-list="isShowWinnersList"
:records-config="recordsConfig"
@setIsShowRecordsPopup="setIsShowRecordsPopup"
></RecordsPupupNew>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import RecordsPupup from '@/components/Lottery/Instant/RecordsPupup'
import RecordsPupupNew from '@/components/Lottery/Instant/RecordsPupupNew'
export default {
name: 'Records',
components: {
RecordsPupup
RecordsPupup,
RecordsPupupNew
},
props: {
recordsConfig: {
type: Object,
default: () => ({
mode: 'old'
})
}
},
data() {
return {
......@@ -38,6 +60,21 @@ export default {
isShowWinnersList() {
const { lotteryInfo } = this
return !!lotteryInfo.showResult
},
pupupVisible() {
return this.isShowRecordsPopup && this.recordsConfig.mode === 'old'
},
pupupNewVisible() {
return this.isShowRecordsPopup && this.recordsConfig.mode === 'new'
},
textColor() {
if (this.recordsConfig.mode === 'new') {
return {
color: this.recordsConfig.textColor
}
} else {
return {}
}
}
},
methods: {
......@@ -55,9 +92,12 @@ export default {
this.openRecordPopup('personal')
}
},
openRecordPopup(type){
openRecordPopup(type) {
this.activeTab = type
this.isShowRecordsPopup = true
},
setIsShowRecordsPopup(val) {
this.isShowRecordsPopup = val
}
}
}
......@@ -67,7 +107,7 @@ export default {
.records {
&__layouts {
position: fixed;
z-index: 5;
z-index: 50;
right: 10px;
bottom: 75px;
}
......
components/Lottery/Instant/RecordsPupup.vue
......@@ -84,7 +84,7 @@ export default {
return this.value
},
set(val) {
this.$emit('input', val)
this.$emit('setIsShowRecordsPopup', val)
}
}
},
......
components/Lottery/Instant/RecordsPupupNew.vue 0 → 100644
<template>
<van-popup v-model="visible" class="records-popup" swipeable close-icon="close">
<div class="records-popup__title">
<div class="records-popup__title-personal" :style="personalBg" @click="changeActive('personal')"></div>
<div class="records-popup__title-winners" :style="winnersBg" @click="changeActive('winners')"></div>
</div>
<div class="records-popup__main" :style="mainBg">
<div v-show="active === 'personal'" class="records-popup__personal-record">
<div class="records-popup__record-content">
<div class="records-popup__phone">
领奖手机号：
<span v-if="isBindPhone">{{ userInfo.phone }}</span>
<span v-else class="records-popup__bind-phone" @click="bindMobile">绑定手机号</span>
</div>
<ul v-if="Object.keys(recordList).length !== 0" class="records-popup__record-list">
<li v-for="(session, key, index) in recordList" :key="index">
<div v-for="(item, itemIndex) in session" :key="itemIndex" class="records-popup__session-info">
<div class="records-popup__info-wrap">
<div v-if="session.length > 1" class="records-popup__session">第{{ NUMBER_LIST[index + 1] }}场次</div>
<div class="records-popup__time">
<span>{{ (item.drawTime * 1000) | formatDate('MM-DD HH:mm:ss') }}</span>
</div>
</div>
<div class="records-popup__prize-name">{{ item.prizeName }}</div>
</div>
</li>
</ul>
<div v-if="Object.keys(recordList).length === 0" class="records-popup__no-data">暂无记录</div>
</div>
</div>
<div v-show="active === 'winners' && isShowWinnersList" class="records-popup__winners-record">
<div class="records-popup__record-content">
<div class="records-popup__winners-list">
<div v-for="(item, index) in winnersList" :key="index" class="records-popup__item">
{{ item.userNick }} 获得 <span class="records-popup__prize-name">{{ item.prizeName }}</span>
</div>
<div v-if="winnersList.length === 0" class="records-popup__no-data">暂无数据</div>
</div>
</div>
</div>
</div>
</van-popup>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { getLotteryRecordList, getWinnersList } from '@/api/modules/lottery'
import { NUMBER_LIST } from '@/utils/constant'
export default {
name: 'RecordsPupup',
props: {
value: {
type: Boolean,
default: false
},
isShowWinnersList: {
type: Boolean,
default: false
},
activeTab: {
type: String,
default: 'personal'
},
recordsConfig: {
type: Object,
default: () => ({
mode: 'old'
})
}
},
data() {
return {
NUMBER_LIST,
recordList: {},
winnersList: [],
active: ''
}
},
computed: {
...mapGetters({
uin: 'users/uin',
userInfo: 'users/userInfo',
isBindPhone: 'users/isBindPhone'
}),
visible: {
get() {
return this.value
},
set(val) {
this.$emit('setIsShowRecordsPopup', val)
}
},
mainBg() {
return {
backgroundImage: `url(${this.recordsConfig.bg})`
}
},
personalBg() {
return {
backgroundImage:
this.active === 'personal'
? `url(${this.recordsConfig.personalBg})`
: `url(${this.recordsConfig.personalBgDisabled})`
}
},
winnersBg() {
return {
backgroundImage:
this.active === 'winners'
? `url(${this.recordsConfig.winnersBg})`
: `url(${this.recordsConfig.winnersBgDisabled})`
}
}
},
watch: {
visible: {
handler(val) {
if (val) {
this.active = this.activeTab
this.dataInit()
}
},
immediate: true
}
},
methods: {
...mapActions({ jumpToBinding: 'users/jumpToBinding' }),
dataInit() {
if (this.active === 'personal') {
getLotteryRecordList({
id: this.$route.query.id,
uin: this.uin,
playId: this.$route.query.sessionId
}).then(res => {
const { code, errorCode, errorMessage, data } = res
if (code === 200 && errorCode === 0) {
this.recordList = data
} else {
this.$toast(errorMessage)
}
})
}
if (this.active === 'winners') {
getWinnersList({
id: this.$route.query.id,
uin: this.$route.query.uin
}).then(res => {
const { code, errorCode, errorMessage, data } = res
if (code === 200 && errorCode === 0) {
this.winnersList = data
} else {
this.$toast(errorMessage)
}
})
}
},
onChange() {
if (!Object.keys(this.recordList).length || !this.winnersList.length) {
this.dataInit()
}
},
bindMobile() {
this.$toast({
message: '正在为您转跳，请完成绑定手机操作',
duration: 1500,
onClose: () => {
this.jumpToBinding()
}
})
},
changeActive(val) {
this.active = val
this.onChange()
}
}
}
</script>
<style lang="less" scoped>
.records-popup {
width: 258px;
height: 291px;
background-color: transparent;
border-radius: 15px;
overflow: visible;
font-size: 12px;
&__main {
height: 100%;
background-size: 100% 100%;
padding: 24px 16px;
transition: all 0.2s;
}
&__title {
color: #fff;
display: flex;
justify-content: center;
&-personal,
&-winners {
width: 83px;
height: 29px;
background-size: 100% 100%;
margin: 0 3px;
transition: all 0.2s;
}
}
/deep/ .van-popup__close-icon {
right: -22px;
top: -20px;
font-size: 22px;
color: #fff;
}
&__tabs {
padding: 8px 0 0;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
::v-deep .van-tabs__wrap {
display: flex;
justify-content: center;
height: 34px;
}
::v-deep .van-tabs__nav {
background-color: transparent;
justify-content: center;
width: 160px;
.van-tab--active {
.van-tab__text {
color: #333;
font-weight: 500;
font-size: 14px;
}
}
}
::v-deep .van-tabs__line {
background-color: #d92e32;
border-radius: 1px;
}
::v-deep .van-tabs__content {
flex: 1;
overflow: hidden;
.van-tab__pane {
width: 100%;
height: 100%;
padding: 15px 0;
}
}
}
&__personal-record {
width: 100%;
height: 100%;
overflow: hidden auto;
padding: 0 15px;
}
&__phone {
color: #000;
margin-bottom: 12px;
}
&__bind-phone {
color: #d92e32;
}
&__record-list {
li {
margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
}
}
}
&__session-info {
display: flex;
flex-direction: column;
&:last-child {
.records-popup__prize-name {
margin-bottom: 0;
}
}
}
&__info-wrap {
display: flex;
align-items: center;
}
&__session {
margin-right: 5px;
font-size: 13px;
color: #000;
}
&__time {
color: #000;
}
&__prize-name {
margin: 8px 0 15px;
color: #000;
}
&__item {
margin-bottom: 8px;
}
&__winners-record {
width: 100%;
height: 100%;
overflow: hidden auto;
padding: 0 15px;
.records-popup__prize-name {
color: #d92e32;
}
}
&__no-data {
color: #999;
text-align: center;
padding-top: 40px;
}
}
</style>
components/Lottery/Instant/WinPopup.vue
......@@ -28,6 +28,8 @@
</template>
<script>
import Bus from '@/utils/Bus'
export default {
name: 'WinPopup',
components: {},
......@@ -47,7 +49,7 @@ export default {
return this.value
},
set(val) {
this.$emit('input', val)
Bus.$emit('updateMain', { isShowWin: val })
}
},
isWin() {
......@@ -56,7 +58,7 @@ export default {
},
methods: {
know() {
this.$emit('winCallback')
Bus.$emit('updateMain', { func: 'winCallback' })
}
}
}
......
components/Lottery/Instant/WinPopupNew.vue 0 → 100644
<template>
<van-popup v-model="visible" class="win-popup" :style="{ background: 'transparent' }">
<div class="win-popup__container">
<div class="win-popup__close" :style="closeBg" @click="closePopup"></div>
<div class="win-popup__wrap" :style="wrapBg">
<div class="win-popup__content">
<div v-if="isWin" class="win-popup__header">
<img :src="winConfig.winTitle" />
</div>
<div v-if="isWin" class="win-popup__win-info">
<div class="win-popup__title">恭喜获得</div>
<div class="win-popup__prize-img" :style="prizeBg">
<img src="@/assets/images/lottery/gift.png" alt="" />
</div>
<div class="win-popup__prize-name">
{{ info.name }}
</div>
</div>
<div v-else class="win-popup__thanks">
<p>很遗憾</p>
<slot name="thanks"></slot>
</div>
</div>
<div class="win-popup__footer" @click="know">
<img :src="winConfig.winKnow" />
</div>
</div>
</div>
</van-popup>
</template>
<script>
import Bus from '@/utils/Bus'
export default {
name: 'WinPopup',
components: {},
props: {
value: {
type: Boolean,
default: false
},
info: {
type: Object,
default: () => ({})
},
winConfig: {
type: Object,
default: () => ({})
}
},
computed: {
visible: {
get() {
return this.value
},
set(val) {
Bus.$emit('updateMain', { isShowWin: val })
}
},
isWin() {
return !!+this.info.id
},
wrapBg() {
return {
backgroundImage: `url(${this.winConfig.bg})`
}
},
closeBg() {
return {
backgroundImage: `url(${this.winConfig.winClose})`
}
},
prizeBg() {
return {
backgroundImage: `url(${this.winConfig.winPrizeBg})`
}
}
},
methods: {
know() {
Bus.$emit('updateMain', { func: 'winCallback' })
},
closePopup() {
Bus.$emit('updateMain', { isShowWin: false })
}
}
}
</script>
<style lang="less" scoped>
@containerWidth: 326px;
@wrapWidth: 275px;
@wrapHeight: 292px;
.win-popup {
width: 263px;
height: 309px;
overflow: visible;
&__close {
position: absolute;
right: -20px;
top: -10px;
width: 25px;
height: 25px;
background-size: 100% 100%;
}
&__container {
width: 100%;
height: 100%;
position: relative;
}
&__wrap {
position: relative;
margin: 0 auto;
width: 100%;
height: 100%;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
&__content {
color: #fff;
font-size: 16px;
width: 100%;
overflow: hidden;
}
&__win-info {
position: absolute;
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #0000001a;
width: 80%;
margin: 0 auto;
border-radius: 20px;
padding: 12px 0;
z-index: 20;
}
&__title {
width: 100%;
text-align: center;
color: #fff;
font-weight: 500;
font-size: 14px;
height: 18px;
margin-bottom: 7px;
}
&__prize-img {
margin-bottom: 7px;
background-size: 100% 100%;
width: 65px;
height: 65px;
display: flex;
justify-content: center;
align-items: center;
img {
display: block;
width: 60%;
height: 60%;
}
}
&__prize-name {
width: 100%;
padding: 0 10px;
font-size: 12px;
color: #fff;
margin-top: 11px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
}
&__thanks {
position: absolute;
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
p {
margin-bottom: 10px;
font-size: 18px;
}
}
&__footer {
position: absolute;
bottom: 14%;
left: 50%;
transform: translateX(-50%);
width: 157px;
height: 49px;
img {
width: 100%;
height: 100%;
}
}
&__header {
position: absolute;
top: 12%;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 27px;
text-align: center;
img {
height: 100%;
}
}
&__sure {
width: 126px;
height: 33px;
line-height: 33px;
border: 0;
outline: none;
/deep/ .van-button__text {
font-size: 13px;
color: #fb1f34;
font-weight: 500;
}
}
&__win-msg {
margin: 13px 0 20px;
font-size: 12px;
color: #fff;
}
}
</style>
components/Lottery/Instant/type/TypeGashapon.vue 0 → 100644
<template>
<section class="lottery-instant">
<div class="lottery-instant__times">
抽奖次数：<span>{{ lotteryInfo.userTimes }}</span
>次
</div>
<div class="lottery-instant__main">
<CountdownBar version="mini" class="lottery-instant__countdown"></CountdownBar>
<div class="lottery-instant__layout-gashapon">
<div class="content-main">
<PrizeGashapon ref="prizeGashaponRef" :ball-list-gashapon="ballListGashapon" @endCallBack="endCallBack" />
</div>
<div class="lottery-instant__content-gashapon">
<div class="game-bg">
<img src="@/assets/images/lottery/gashapon/game-bg.png" />
</div>
<div class="on-start" @click="startLottery">
<img :src="buttonImg" />
</div>
</div>
</div>
</div>
<WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
<template #thanks>
<div class="slot-thanks">你没有扭到奖品</div>
</template>
</WinPopupNew>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<Introduction
class="lottery-instant__intro"
:title-text="introConfig.titleText"
:rule="introConfig.rule"
:title-style="introConfig.introTitleStyle"
:wrap-style="introConfig.introWrapStyle"
:content-style="introConfig.introContentStyle"
:intro-box-style="introConfig.introBoxStyle"
></Introduction>
</section>
</template>
<script>
import { PrizeGashapon } from 'lotteries'
import onStartImg from '@/assets/images/lottery/gashapon/on-start.png'
import onStartDidabledImg from '@/assets/images/lottery/gashapon/on-start-disabled.png'
import { mapGetters } from 'vuex'
import { LOTTERY_STATUS } from '@/utils/constant'
import Bus from '@/utils/Bus'
import { introductionConfigGashapon, winConfigGashapon, recordsConfigGashapon, ballListGashapon } from './config'
export default {
components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Introduction: () => import('@/components/Lottery/Instant/Introduction'),
Records: () => import('@/components/Lottery/Instant/Records'),
PrizeGashapon
},
props: {
winInfo: {
type: Object,
default: () => ({})
},
isShowWin: {
type: Boolean,
default: false
},
isShowBindPhone: {
type: Boolean,
default: false
},
isLottering: {
type: Boolean,
default: false
},
isLoading: {
type: Boolean,
default: false
}
},
data() {
return {
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, // 引用类型
recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
winConfig: winConfigGashapon, // 开奖样式
introConfig: introductionConfigGashapon,
ballListGashapon // 扭蛋球图片
}
},
computed: {
...mapGetters({
uin: 'users/uin',
isLogin: 'users/isLogin',
lotteryInfo: 'lottery/lotteryInfo',
isBindPhone: 'users/isBindPhone'
}),
isNotStart() {
// 抽奖不在活动日期内
const { status } = this.lotteryInfo
return +status !== LOTTERY_STATUS.start
},
// 按钮图片样式
buttonImg() {
if (!this.lotteryInfo.userTimes || this.isNotStart) {
return onStartDidabledImg
}
return onStartImg
}
},
methods: {
startLottery() {
Bus.$emit('updateMain', { func: 'startLottery' })
},
drawAnimation() {
this.$refs.prizeGashaponRef.onStart()
},
endCallBack() {
Bus.$emit('updateMain', { isLottering: false })
setTimeout(() => {
Bus.$emit('updateMain', { isShowWin: true })
}, 400)
}
}
}
</script>
<style lang="less" scoped>
.lottery-instant {
position: relative;
height: 100%;
background-color: #631e88 !important;
background-image: url('@/assets/images/lottery/gashapon/page-bg.png') !important;
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
padding: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
&__countdown {
padding-top: 18px;
}
&__layout-gashapon {
position: relative;
// background-image: url('@/assets/images/lottery/gashapon/game-bg.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 398 / 375 * 100%;
margin-top: 7px;
.content-main {
position: absolute;
top: 2%;
left: 52%;
width: 210px;
height: 210px;
transform: translateX(-50%);
z-index: 10;
}
}
&__content-gashapon {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 20px;
text-align: center;
z-index: 20;
.game-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
img {
width: 100%;
object-fit: cover;
}
}
.on-start {
position: absolute;
right: 20%;
bottom: 3.5%;
width: 32%;
height: 19%;
img {
width: 100%;
object-fit: cover;
}
}
}
&__times {
position: absolute;
top: 0;
left: 0;
font-size: 13px;
color: #fff;
padding: 25px 15px;
}
}
</style>
components/Lottery/Instant/type/TypeGashapon2.vue 0 → 100644
<template>
<section class="lottery-instant">
<div class="lottery-instant__title">
<img src="@/assets/images/lottery/gashapon2/page-title.png" />
</div>
<div class="lottery-instant__main">
<div class="lottery-instant__countdown">
<CountdownBar version="none"></CountdownBar>
</div>
<div class="lottery-instant__layout-gashapon">
<div class="content-main">
<PrizeGashapon ref="prizeGashaponRef" :ball-list-gashapon="ballListGashapon" @endCallBack="endCallBack" />
</div>
<div class="lottery-instant__content-gashapon">
<div class="on-start" @click="startLottery">
<div class="lottery-instant__times">
抽奖次数：<span>{{ lotteryInfo.userTimes }}</span
>次
</div>
<img :src="buttonImg" />
</div>
</div>
</div>
</div>
<WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
<template #thanks>
<div class="slot-thanks">你没有扭到奖品</div>
</template>
</WinPopupNew>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<Introduction
class="lottery-instant__intro"
:title-text="introConfig.titleText"
:rule="introConfig.rule"
:title-style="introConfig.introTitleStyle"
:wrap-style="introConfig.introWrapStyle"
:content-style="introConfig.introContentStyle"
:intro-box-style="introConfig.introBoxStyle"
></Introduction>
</section>
</template>
<script>
import { PrizeGashapon } from 'lotteries'
import onStartImg from '@/assets/images/lottery/gashapon2/on-start.png'
import onStartDidabledImg from '@/assets/images/lottery/gashapon2/on-start-disabled.png'
import { mapGetters } from 'vuex'
import { LOTTERY_STATUS } from '@/utils/constant'
import Bus from '@/utils/Bus'
import {
introductionConfigGashapon2 as introductionConfigGashapon,
winConfigGashapon2 as winConfigGashapon,
recordsConfigGashapon2 as recordsConfigGashapon,
ballListGashapon
} from './config'
export default {
components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Introduction: () => import('@/components/Lottery/Instant/Introduction'),
Records: () => import('@/components/Lottery/Instant/Records'),
PrizeGashapon
},
props: {
winInfo: {
type: Object,
default: () => ({})
},
isShowWin: {
type: Boolean,
default: false
},
isShowBindPhone: {
type: Boolean,
default: false
},
isLottering: {
type: Boolean,
default: false
},
isLoading: {
type: Boolean,
default: false
}
},
data() {
return {
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, // 引用类型
recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
winConfig: winConfigGashapon, // 开奖样式
introConfig: introductionConfigGashapon,
ballListGashapon // 扭蛋球图片
}
},
computed: {
...mapGetters({
uin: 'users/uin',
isLogin: 'users/isLogin',
lotteryInfo: 'lottery/lotteryInfo',
isBindPhone: 'users/isBindPhone'
}),
isNotStart() {
// 抽奖不在活动日期内
const { status } = this.lotteryInfo
return +status !== LOTTERY_STATUS.start
},
// 按钮图片样式
buttonImg() {
if (!this.lotteryInfo.userTimes || this.isNotStart) {
return onStartDidabledImg
}
return onStartImg
}
},
methods: {
startLottery() {
Bus.$emit('updateMain', { func: 'startLottery' })
},
drawAnimation() {
this.$refs.prizeGashaponRef.onStart()
},
endCallBack() {
Bus.$emit('updateMain', { isLottering: false })
setTimeout(() => {
Bus.$emit('updateMain', { isShowWin: true })
}, 400)
}
}
}
</script>
<style lang="less" scoped>
.lottery-instant {
position: relative;
height: 100%;
background-color: #631e88 !important;
background-image: url('@/assets/images/lottery/gashapon2/page-bg.png') !important;
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
padding: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
&__countdown {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
&__times {
position: absolute;
bottom: 12%;
left: 50%;
transform: translateX(-50%);
font-size: 13px;
color: #fff;
}
&__layout-gashapon {
position: relative;
background-image: url('@/assets/images/lottery/gashapon2/game-bg.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 416 / 375 * 100%;
margin-top: 7px;
.content-main {
position: absolute;
top: 11.5%;
left: 50%;
width: 180px;
height: 180px;
transform: translateX(-50%);
z-index: 10;
}
}
&__content-gashapon {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 20px;
text-align: center;
z-index: 20;
.on-start {
position: absolute;
left: 50%;
bottom: 34%;
transform: translateX(-50%);
width: 51%;
height: 17.6%;
img {
width: 100%;
object-fit: cover;
}
}
}
&__main {
position: relative;
}
&__title {
width: 80%;
height: 6%;
margin: 32px auto 26px auto;
line-height: 0;
img {
width: 100%;
height: 100%;
}
}
}
</style>
components/Lottery/Instant/type/TypeGashaponMini.vue 0 → 100644
<template>
<section class="lottery-instant">
<div class="lottery-instant__times">
抽奖次数：<span>{{ lotteryInfo.userTimes }}</span
>次
</div>
<div class="lottery-instant__main">
<CountdownBar version="mini" class="lottery-instant__countdown"></CountdownBar>
<div class="lottery-instant__layout-gashapon">
<div class="content-main">
<PrizeGashapon ref="prizeGashaponRef" :ball-list-gashapon="ballListGashapon" @endCallBack="endCallBack" />
</div>
<div class="lottery-instant__content-gashapon">
<div class="game-bg">
<img src="@/assets/images/lottery/gashapon/game-bg.png" />
</div>
<div class="on-start" @click="startLottery">
<img :src="buttonImg" />
</div>
</div>
</div>
</div>
<div class="lottery-instant__intro-entry" @click="changeIsShowIntro">活动介绍</div>
<WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
<template #thanks>
<div class="slot-thanks">你没有扭到奖品</div>
</template>
</WinPopupNew>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<IntroductionPopup
:value="isShowIntro"
:wrap-style="introConfig.introWrapStyle"
:content-style="introConfig.introContentStyle"
:popup-style="introConfig.introPopupStyle"
:content-box-style="introConfig.contentBoxStyle"
:back-style="introConfig.backStyle"
:rule="introConfig.rule"
></IntroductionPopup>
</section>
</template>
<script>
import { PrizeGashapon } from 'lotteries'
import onStartImg from '@/assets/images/lottery/gashapon/on-start.png'
import onStartDidabledImg from '@/assets/images/lottery/gashapon/on-start-disabled.png'
import { mapGetters } from 'vuex'
import { LOTTERY_STATUS } from '@/utils/constant'
import Bus from '@/utils/Bus'
import { introductionConfigGashaponMini, winConfigGashapon, recordsConfigGashapon, ballListGashapon } from './config'
export default {
components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Records: () => import('@/components/Lottery/Instant/Records'),
IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup'),
PrizeGashapon
},
props: {
winInfo: {
type: Object,
default: () => ({})
},
isShowWin: {
type: Boolean,
default: false
},
isShowBindPhone: {
type: Boolean,
default: false
},
isLottering: {
type: Boolean,
default: false
},
isLoading: {
type: Boolean,
default: false
},
isShowIntro: {
type: Boolean,
default: false
}
},
data() {
return {
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, // 引用类型
recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
winConfig: winConfigGashapon, // 开奖样式
introConfig: introductionConfigGashaponMini,
ballListGashapon // 扭蛋球图片
}
},
computed: {
...mapGetters({
uin: 'users/uin',
isLogin: 'users/isLogin',
lotteryInfo: 'lottery/lotteryInfo',
isBindPhone: 'users/isBindPhone'
}),
isNotStart() {
// 抽奖不在活动日期内
const { status } = this.lotteryInfo
return +status !== LOTTERY_STATUS.start
},
// 按钮图片样式
buttonImg() {
if (!this.lotteryInfo.userTimes || this.isNotStart) {
return onStartDidabledImg
}
return onStartImg
}
},
methods: {
startLottery() {
Bus.$emit('updateMain', { func: 'startLottery' })
},
drawAnimation() {
this.$refs.prizeGashaponRef.onStart()
},
endCallBack() {
Bus.$emit('updateMain', { isLottering: false })
setTimeout(() => {
Bus.$emit('updateMain', { isShowWin: true })
}, 400)
},
changeIsShowIntro() {
Bus.$emit('updateMain', { isShowIntro: true })
}
}
}
</script>
<style lang="less" scoped>
.lottery-instant {
position: relative;
height: 100%;
background-color: #631e88 !important;
background-image: url('@/assets/images/lottery/gashapon/page-bg.png') !important;
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
padding: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
&__countdown {
padding-top: 18px;
}
&__layout-gashapon {
position: relative;
// background-image: url('@/assets/images/lottery/gashapon/game-bg.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 398 / 375 * 100%;
margin-top: 7px;
.content-main {
position: absolute;
top: 4%;
left: 52%;
width: 210px;
height: 210px;
transform: translateX(-50%);
z-index: 10;
}
}
&__content-gashapon {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 20px;
text-align: center;
z-index: 20;
.game-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
img {
width: 100%;
object-fit: cover;
}
}
.on-start {
position: absolute;
right: 20%;
bottom: 3.5%;
width: 32%;
height: 19%;
img {
width: 100%;
object-fit: cover;
}
}
}
&__times {
position: absolute;
top: 0;
left: 0;
font-size: 13px;
color: #fff;
padding: 25px 15px;
}
&__intro-entry {
position: fixed;
top: 56px;
right: 0;
background: linear-gradient(180deg, #ffd63e 0%, #fca60d 100%);
box-shadow: 0px 1px 2px 0px rgba(202, 146, 46, 1);
color: #9c5c00;
font-size: 12px;
writing-mode: vertical-lr;
padding: 6px 3px;
border-radius: 10px 0 0 10px;
}
}
</style>
components/Lottery/Instant/type/TypeGashaponMini2.vue 0 → 100644
<template>
<section class="lottery-instant">
<div class="lottery-instant__countdown">
<CountdownBar version="mini"></CountdownBar>
</div>
<div class="lottery-instant__main">
<div class="lottery-instant__layout-gashapon">
<div class="content-main">
<PrizeGashapon ref="prizeGashaponRef" :ball-list-gashapon="ballListGashapon" @endCallBack="endCallBack" />
</div>
<div class="lottery-instant__content-gashapon">
<div class="on-start" @click="startLottery">
<div class="lottery-instant__times">
抽奖次数：<span>{{ lotteryInfo.userTimes }}</span
>次
</div>
<img :src="buttonImg" />
</div>
</div>
</div>
</div>
<div class="lottery-instant__intro-entry" @click="changeIsShowIntro">活动介绍</div>
<WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
<template #thanks>
<div class="slot-thanks">你没有扭到奖品</div>
</template>
</WinPopupNew>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<IntroductionPopup
:value="isShowIntro"
:wrap-style="introConfig.introWrapStyle"
:content-style="introConfig.introContentStyle"
:popup-style="introConfig.introPopupStyle"
:content-box-style="introConfig.contentBoxStyle"
:back-style="introConfig.backStyle"
:rule="introConfig.rule"
></IntroductionPopup>
</section>
</template>
<script>
import { PrizeGashapon } from 'lotteries'
import onStartImg from '@/assets/images/lottery/gashapon2/on-start.png'
import onStartDidabledImg from '@/assets/images/lottery/gashapon2/on-start-disabled.png'
import { mapGetters } from 'vuex'
import { LOTTERY_STATUS } from '@/utils/constant'
import Bus from '@/utils/Bus'
import {
introductionConfigGashaponMini2 as introductionConfigGashaponMini,
winConfigGashapon2 as winConfigGashapon,
recordsConfigGashapon2 as recordsConfigGashapon,
ballListGashapon
} from './config'
export default {
components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Records: () => import('@/components/Lottery/Instant/Records'),
IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup'),
PrizeGashapon,
},
props: {
winInfo: {
type: Object,
default: () => ({})
},
isShowWin: {
type: Boolean,
default: false
},
isShowBindPhone: {
type: Boolean,
default: false
},
isLottering: {
type: Boolean,
default: false
},
isLoading: {
type: Boolean,
default: false
},
isShowIntro: {
type: Boolean,
default: false
}
},
data() {
return {
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, // 引用类型
recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
winConfig: winConfigGashapon, // 开奖样式
introConfig: introductionConfigGashaponMini,
ballListGashapon // 扭蛋球图片
}
},
computed: {
...mapGetters({
uin: 'users/uin',
isLogin: 'users/isLogin',
lotteryInfo: 'lottery/lotteryInfo',
isBindPhone: 'users/isBindPhone'
}),
isNotStart() {
// 抽奖不在活动日期内
const { status } = this.lotteryInfo
return +status !== LOTTERY_STATUS.start
},
// 按钮图片样式
buttonImg() {
if (!this.lotteryInfo.userTimes || this.isNotStart) {
return onStartDidabledImg
}
return onStartImg
}
},
methods: {
startLottery() {
Bus.$emit('updateMain', { func: 'startLottery' })
},
drawAnimation() {
this.$refs.prizeGashaponRef.onStart()
},
endCallBack() {
Bus.$emit('updateMain', { isLottering: false })
setTimeout(() => {
Bus.$emit('updateMain', { isShowWin: true })
}, 400)
},
changeIsShowIntro() {
Bus.$emit('updateMain', { isShowIntro: true })
}
}
}
</script>
<style lang="less" scoped>
.lottery-instant {
position: relative;
height: 100%;
background-color: #631e88 !important;
background-image: url('@/assets/images/lottery/gashapon2/page-bg.png') !important;
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
padding: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
&__countdown {
padding-top: 14px;
}
&__times {
position: absolute;
bottom: 12%;
left: 50%;
transform: translateX(-50%);
font-size: 13px;
color: #fff;
}
&__layout-gashapon {
position: relative;
background-image: url('@/assets/images/lottery/gashapon2/game-bg.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 416 / 375 * 100%;
margin-top: 7px;
.content-main {
position: absolute;
top: 11.5%;
left: 50%;
width: 180px;
height: 180px;
transform: translateX(-50%);
z-index: 10;
}
}
&__content-gashapon {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 20px;
text-align: center;
z-index: 20;
.on-start {
position: absolute;
left: 50%;
bottom: 34%;
transform: translateX(-50%);
width: 51%;
height: 17.6%;
img {
width: 100%;
object-fit: cover;
}
}
}
&__main {
position: relative;
}
&__intro-entry {
position: fixed;
top: 56px;
right: 0;
background: linear-gradient(180deg, #ffd63e 0%, #fca60d 100%);
box-shadow: 0px 1px 2px 0px rgba(202, 146, 46, 1);
color: #9c5c00;
font-size: 12px;
writing-mode: vertical-lr;
padding: 6px 3px;
border-radius: 10px 0 0 10px;
}
}
</style>
components/Lottery/Instant/type/TypeGuess.vue 0 → 100644
<template>
<section class="lottery-instant">
<div class="lottery-instant__main">
<img class="lottery-instant__title" src="@/assets/images/lottery/guess/game-title.png" />
<CountdownBar version="mini" class="lottery-instant__countdown"></CountdownBar>
<div class="lottery-instant__layout-guess">
<div class="content-img">
<img src="@/assets/images/lottery/guess/gift-main.png" />
</div>
<div class="content-main">
<div class="content-main-times">
抽奖次数：<span>{{ lotteryInfo.userTimes }}</span
>次
</div>
<div class="content-main-box">
<PrizeGuess :blind-box-list="blindBoxList" @startLottery="startLottery">
<template #choose="{ index }">
<transition name="choose-fade">
<div v-show="chooseIndex === index" class="choose">选我</div>
</transition>
</template>
</PrizeGuess>
</div>
</div>
</div>
</div>
<WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
<template #thanks>
<div class="slot-thanks">你没有猜中</div>
</template>
</WinPopupNew>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<Introduction
class="lottery-instant__intro"
:title-text="introConfig.titleText"
:rule="introConfig.rule"
:title-style="introConfig.introTitleStyle"
:wrap-style="introConfig.introWrapStyle"
:content-style="introConfig.introContentStyle"
:intro-box-style="introConfig.introBoxStyle"
></Introduction>
</section>
</template>
<script>
import { PrizeGuess } from 'lotteries'
import { mapGetters } from 'vuex'
import Bus from '@/utils/Bus'
import { blindBoxListGuess, recordsConfigGuess, winConfigGuess, introductionConfigGuess } from './config'
export default {
components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
PrizeGuess,
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Introduction: () => import('@/components/Lottery/Instant/Introduction'),
Records: () => import('@/components/Lottery/Instant/Records')
},
props: {
winInfo: {
type: Object,
default: () => ({})
},
isShowWin: {
type: Boolean,
default: false
},
isShowBindPhone: {
type: Boolean,
default: false
},
isLottering: {
type: Boolean,
default: false
},
isLoading: {
type: Boolean,
default: false
}
},
data() {
return {
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, // 引用类型
chooseIndex: 0,
timer: null,
blindBoxList: blindBoxListGuess,
recordsConfig: recordsConfigGuess, // 中奖记录样式配置
winConfig: winConfigGuess, // 开奖样式
introConfig: introductionConfigGuess
}
},
computed: {
...mapGetters({
uin: 'users/uin',
isLogin: 'users/isLogin',
lotteryInfo: 'lottery/lotteryInfo',
isBindPhone: 'users/isBindPhone'
})
},
mounted() {
this.startChooseScroll()
},
beforeDestroy() {
this.endChooseScroll()
},
methods: {
startChooseScroll() {
this.chooseIndex = 0
this.timer = setInterval(() => {
const indexTemp = Math.floor(Math.random() * (3 - 0 + 1)) + 0
if (indexTemp === this.chooseIndex && this.chooseIndex === 3) {
this.chooseIndex = 0
} else if (indexTemp === this.chooseIndex && this.chooseIndex !== 3) {
this.chooseIndex = indexTemp + 1
} else {
this.chooseIndex = indexTemp
}
}, 1000)
},
endChooseScroll() {
clearInterval(this.timer)
},
startLottery() {
Bus.$emit('updateMain', { func: 'startLottery' })
},
drawAnimation() {
Bus.$emit('updateMain', { isLottering: false })
setTimeout(() => {
Bus.$emit('updateMain', { isShowWin: true })
}, 400)
}
}
}
</script>
<style lang="less" scoped>
.lottery-instant {
position: relative;
height: 100%;
background-color: #631e88 !important;
background-image: url('@/assets/images/lottery/gashapon/page-bg.png') !important;
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
padding: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
&__main {
text-align: center;
}
&__title {
width: 66.7%;
object-fit: cover;
margin-top: 28px;
}
&__countdown {
padding-top: 6px;
}
&__layout-guess {
padding: 0 15px;
.content-img {
width: 152px;
height: 154px;
margin: 10px auto 0 auto;
img {
width: 100%;
}
}
.content-main {
position: relative;
background-image: url('@/assets/images/lottery/guess/game-bg.png');
background-size: 100% 100%;
background-position: center;
width: 100%;
height: 0;
padding-top: 156 / 367 * 100%;
margin-top: 16px;
&-box {
position: absolute;
bottom: 20%;
left: 50%;
transform: translateX(-50%);
width: 90%;
height: 38%;
z-index: 20;
.choose {
position: absolute;
top: -40%;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
background-color: #ffffffcc;
padding: 2px 6px;
white-space: nowrap;
border-radius: 9px;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 100%);
width: 0;
height: 0;
border-top: 4px solid #ffffffcc;
border-bottom: 4px solid transparent;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
}
}
}
&-times {
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
color: #fff;
z-index: 10;
}
}
}
}
.choose-fade-enter-active {
transition: all 0.1s ease-in;
}
.choose-fade-leave-active {
transition: all 0.1s ease-out;
}
.choose-fade-enter,
.choose-fade-leave-to {
opacity: 0;
}
</style>
components/Lottery/Instant/type/TypeGuess2.vue 0 → 100644
<template>
<section class="lottery-instant">
<div class="lottery-instant__main">
<img class="lottery-instant__title" src="@/assets/images/lottery/guess/game-title.png" />
<CountdownBar version="mini" class="lottery-instant__countdown"></CountdownBar>
<div class="lottery-instant__layout-guess">
<div class="content-img">
<img src="@/assets/images/lottery/guess2/gift-main.png" />
</div>
<div class="content-main">
<div class="content-main-times">
抽奖次数：<span>{{ lotteryInfo.userTimes }}</span
>次
</div>
<div class="content-main-box">
<PrizeGuess :blind-box-list="blindBoxList" @startLottery="startLottery">
<!-- <template #choose="{ index }">
<transition name="choose-fade">
<div v-show="chooseIndex === index" class="choose">选我</div>
</transition>
</template> -->
</PrizeGuess>
</div>
</div>
</div>
</div>
<WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
<template #thanks>
<div class="slot-thanks">你没有猜中</div>
</template>
</WinPopupNew>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<Introduction
class="lottery-instant__intro"
:title-text="introConfig.titleText"
:rule="introConfig.rule"
:title-style="introConfig.introTitleStyle"
:wrap-style="introConfig.introWrapStyle"
:content-style="introConfig.introContentStyle"
:intro-box-style="introConfig.introBoxStyle"
></Introduction>
</section>
</template>
<script>
import { PrizeGuess } from 'lotteries'
import { mapGetters } from 'vuex'
import Bus from '@/utils/Bus'
import { blindBoxListGuess2, recordsConfigGuess, winConfigGuess, introductionConfigGuess2 as introductionConfigGuess } from './config'
export default {
components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
PrizeGuess,
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Introduction: () => import('@/components/Lottery/Instant/Introduction'),
Records: () => import('@/components/Lottery/Instant/Records')
},
props: {
winInfo: {
type: Object,
default: () => ({})
},
isShowWin: {
type: Boolean,
default: false
},
isShowBindPhone: {
type: Boolean,
default: false
},
isLottering: {
type: Boolean,
default: false
},
isLoading: {
type: Boolean,
default: false
}
},
data() {
return {
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, // 引用类型
chooseIndex: 0,
timer: null,
blindBoxList: blindBoxListGuess2,
recordsConfig: recordsConfigGuess, // 中奖记录样式配置
winConfig: winConfigGuess, // 开奖样式
introConfig: introductionConfigGuess
}
},
computed: {
...mapGetters({
uin: 'users/uin',
isLogin: 'users/isLogin',
lotteryInfo: 'lottery/lotteryInfo',
isBindPhone: 'users/isBindPhone'
})
},
// mounted() {
// this.startChooseScroll()
// },
// beforeDestroy() {
// this.endChooseScroll()
// },
methods: {
startChooseScroll() {
this.chooseIndex = 0
this.timer = setInterval(() => {
const indexTemp = Math.floor(Math.random() * (3 - 0 + 1)) + 0
if (indexTemp === this.chooseIndex && this.chooseIndex === 3) {
this.chooseIndex = 0
} else if (indexTemp === this.chooseIndex && this.chooseIndex !== 3) {
this.chooseIndex = indexTemp + 1
} else {
this.chooseIndex = indexTemp
}
}, 1000)
},
endChooseScroll() {
clearInterval(this.timer)
},
startLottery() {
Bus.$emit('updateMain', { func: 'startLottery' })
},
drawAnimation() {
Bus.$emit('updateMain', { isLottering: false })
setTimeout(() => {
Bus.$emit('updateMain', { isShowWin: true })
}, 400)
}
}
}
</script>
<style lang="less" scoped>
.lottery-instant {
position: relative;
height: 100%;
background-color: #631e88 !important;
background-image: url('@/assets/images/lottery/gashapon/page-bg.png') !important;
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
padding: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
&__main {
text-align: center;
}
&__title {
width: 66.7%;
object-fit: cover;
margin-top: 28px;
}
&__countdown {
padding-top: 6px;
}
&__layout-guess {
padding: 0 15px;
.content-img {
width: 218px;
height: 205px;
margin: -10px auto 0 auto;
img {
width: 100%;
}
}
.content-main {
position: relative;
background-image: url('@/assets/images/lottery/guess/game-bg.png');
background-size: 100% 100%;
background-position: center;
width: 100%;
height: 0;
padding-top: 156 / 367 * 100%;
margin-top: 16px;
&-box {
position: absolute;
bottom: 20%;
left: 50%;
transform: translateX(-50%);
width: 90%;
height: 47%;
z-index: 20;
.choose {
position: absolute;
top: -40%;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
background-color: #ffffffcc;
padding: 2px 6px;
white-space: nowrap;
border-radius: 9px;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 100%);
width: 0;
height: 0;
border-top: 4px solid #ffffffcc;
border-bottom: 4px solid transparent;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
}
}
}
&-times {
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
color: #fff;
z-index: 10;
}
}
}
}
.choose-fade-enter-active {
transition: all 0.1s ease-in;
}
.choose-fade-leave-active {
transition: all 0.1s ease-out;
}
.choose-fade-enter,
.choose-fade-leave-to {
opacity: 0;
}
</style>
components/Lottery/Instant/type/TypeGuessMini.vue 0 → 100644
<template>
<section class="lottery-instant">
<div class="lottery-instant__main">
<img class="lottery-instant__title" src="@/assets/images/lottery/guess/game-title.png" />
<CountdownBar version="mini" class="lottery-instant__countdown"></CountdownBar>
<div class="lottery-instant__layout-guess">
<div class="content-img">
<img src="@/assets/images/lottery/guess/gift-main.png" />
</div>
<div class="content-main">
<div class="content-main-times">
抽奖次数：<span>{{ lotteryInfo.userTimes }}</span
>次
</div>
<div class="content-main-box">
<PrizeGuess :blind-box-list="blindBoxList" @startLottery="startLottery">
<template #choose="{ index }">
<transition name="choose-fade">
<div v-show="chooseIndex === index" class="choose">选我</div>
</transition>
</template>
</PrizeGuess>
</div>
</div>
</div>
</div>
<div class="lottery-instant__intro-entry" @click="changeIsShowIntro">活动介绍</div>
<WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
<template #thanks>
<div class="slot-thanks">你没有猜中</div>
</template>
</WinPopupNew>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<IntroductionPopup
:value="isShowIntro"
:wrap-style="introConfig.introWrapStyle"
:content-style="introConfig.introContentStyle"
:popup-style="introConfig.introPopupStyle"
:content-box-style="introConfig.contentBoxStyle"
:back-style="introConfig.backStyle"
:rule="introConfig.rule"
></IntroductionPopup>
</section>
</template>
<script>
import { PrizeGuess } from 'lotteries'
import { mapGetters } from 'vuex'
import Bus from '@/utils/Bus'
import {
blindBoxListGuess,
recordsConfigGuess,
winConfigGuess,
introductionConfigGuessMini
} from './config'
export default {
components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
PrizeGuess,
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Records: () => import('@/components/Lottery/Instant/Records'),
IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup')
},
props: {
winInfo: {
type: Object,
default: () => ({})
},
isShowWin: {
type: Boolean,
default: false
},
isShowBindPhone: {
type: Boolean,
default: false
},
isLottering: {
type: Boolean,
default: false
},
isLoading: {
type: Boolean,
default: false
},
isShowIntro: {
type: Boolean,
default: false
}
},
data() {
return {
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, // 引用类型
chooseIndex: 0,
timer: null,
blindBoxList: blindBoxListGuess,
recordsConfig: recordsConfigGuess, // 中奖记录样式配置
winConfig: winConfigGuess, // 开奖样式
introConfig: introductionConfigGuessMini
}
},
computed: {
...mapGetters({
uin: 'users/uin',
isLogin: 'users/isLogin',
lotteryInfo: 'lottery/lotteryInfo',
isBindPhone: 'users/isBindPhone'
})
},
mounted() {
this.startChooseScroll()
},
beforeDestroy() {
this.endChooseScroll()
},
methods: {
startChooseScroll() {
this.chooseIndex = 0
this.timer = setInterval(() => {
const indexTemp = Math.floor(Math.random() * (3 - 0 + 1)) + 0
if (indexTemp === this.chooseIndex && this.chooseIndex === 3) {
this.chooseIndex = 0
} else if (indexTemp === this.chooseIndex && this.chooseIndex !== 3) {
this.chooseIndex = indexTemp + 1
} else {
this.chooseIndex = indexTemp
}
}, 1000)
},
endChooseScroll() {
clearInterval(this.timer)
},
startLottery() {
Bus.$emit('updateMain', { func: 'startLottery' })
},
drawAnimation() {
Bus.$emit('updateMain', { isLottering: false })
setTimeout(() => {
Bus.$emit('updateMain', { isShowWin: true })
}, 400)
},
changeIsShowIntro() {
Bus.$emit('updateMain', { isShowIntro: true })
}
}
}
</script>
<style lang="less" scoped>
.lottery-instant {
position: relative;
height: 100%;
background-color: #631e88 !important;
background-image: url('@/assets/images/lottery/guess/page-bg-mini.png') !important;
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
padding: 0 15px 22px;
overflow: auto;
-webkit-overflow-scrolling: touch;
&__main {
text-align: center;
}
&__title {
width: 66.7%;
object-fit: cover;
margin-top: 28px;
}
&__countdown {
padding-top: 6px;
}
&__layout-guess {
.content-img {
width: 152px;
height: 154px;
margin: 10px auto 0 auto;
img {
width: 100%;
}
}
.content-main {
position: relative;
background-image: url('@/assets/images/lottery/guess/game-bg.png');
background-size: 100% 100%;
background-position: center;
width: 100%;
height: 0;
padding-top: 156 / 367 * 100%;
margin-top: 16px;
&-box {
position: absolute;
bottom: 20%;
left: 50%;
transform: translateX(-50%);
width: 90%;
height: 38%;
z-index: 20;
.choose {
position: absolute;
top: -40%;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
background-color: #ffffffcc;
padding: 2px 6px;
white-space: nowrap;
border-radius: 9px;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 100%);
width: 0;
height: 0;
border-top: 4px solid #ffffffcc;
border-bottom: 4px solid transparent;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
}
}
}
&-times {
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
color: #fff;
z-index: 10;
}
}
}
&__intro-entry {
position: fixed;
top: 56px;
right: 0;
background: linear-gradient(180deg, #ffd63e 0%, #fca60d 100%);
box-shadow: 0px 1px 2px 0px rgba(202, 146, 46, 1);
color: #9c5c00;
font-size: 12px;
writing-mode: vertical-lr;
padding: 6px 3px;
border-radius: 10px 0 0 10px;
}
}
.slot-thanks {
font-size: 14px;
}
.choose-fade-enter-active {
transition: all 0.1s ease-in;
}
.choose-fade-leave-active {
transition: all 0.1s ease-out;
}
.choose-fade-enter,
.choose-fade-leave-to {
opacity: 0;
}
</style>
components/Lottery/Instant/type/TypeGuessMini2.vue 0 → 100644
<template>
<section class="lottery-instant">
<div class="lottery-instant__main">
<img class="lottery-instant__title" src="@/assets/images/lottery/guess/game-title.png" />
<CountdownBar version="mini" class="lottery-instant__countdown"></CountdownBar>
<div class="lottery-instant__layout-guess">
<div class="content-img">
<img src="@/assets/images/lottery/guess2/gift-main.png" />
</div>
<div class="content-main">
<div class="content-main-times">
抽奖次数：<span>{{ lotteryInfo.userTimes }}</span
>次
</div>
<div class="content-main-box">
<PrizeGuess :blind-box-list="blindBoxList" @startLottery="startLottery">
<!-- <template #choose="{ index }">
<transition name="choose-fade">
<div v-show="chooseIndex === index" class="choose">选我</div>
</transition>
</template> -->
</PrizeGuess>
</div>
</div>
</div>
</div>
<div class="lottery-instant__intro-entry" @click="changeIsShowIntro">活动介绍</div>
<WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
<template #thanks>
<div class="slot-thanks">你没有猜中</div>
</template>
</WinPopupNew>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<IntroductionPopup
:value="isShowIntro"
:wrap-style="introConfig.introWrapStyle"
:content-style="introConfig.introContentStyle"
:popup-style="introConfig.introPopupStyle"
:content-box-style="introConfig.contentBoxStyle"
:back-style="introConfig.backStyle"
:rule="introConfig.rule"
></IntroductionPopup>
</section>
</template>
<script>
import { PrizeGuess } from 'lotteries'
import { mapGetters } from 'vuex'
import Bus from '@/utils/Bus'
import {
blindBoxListGuess2 as blindBoxListGuess,
recordsConfigGuess,
winConfigGuess,
introductionConfigGuessMini
} from './config'
export default {
components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
PrizeGuess,
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Records: () => import('@/components/Lottery/Instant/Records'),
IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup')
},
props: {
winInfo: {
type: Object,
default: () => ({})
},
isShowWin: {
type: Boolean,
default: false
},
isShowBindPhone: {
type: Boolean,
default: false
},
isLottering: {
type: Boolean,
default: false
},
isLoading: {
type: Boolean,
default: false
},
isShowIntro: {
type: Boolean,
default: false
}
},
data() {
return {
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, // 引用类型
chooseIndex: 0,
timer: null,
blindBoxList: blindBoxListGuess,
recordsConfig: recordsConfigGuess, // 中奖记录样式配置
winConfig: winConfigGuess, // 开奖样式
introConfig: introductionConfigGuessMini
}
},
computed: {
...mapGetters({
uin: 'users/uin',
isLogin: 'users/isLogin',
lotteryInfo: 'lottery/lotteryInfo',
isBindPhone: 'users/isBindPhone'
})
},
// mounted() {
// this.startChooseScroll()
// },
// beforeDestroy() {
// this.endChooseScroll()
// },
methods: {
startChooseScroll() {
this.chooseIndex = 0
this.timer = setInterval(() => {
const indexTemp = Math.floor(Math.random() * (3 - 0 + 1)) + 0
if (indexTemp === this.chooseIndex && this.chooseIndex === 3) {
this.chooseIndex = 0
} else if (indexTemp === this.chooseIndex && this.chooseIndex !== 3) {
this.chooseIndex = indexTemp + 1
} else {
this.chooseIndex = indexTemp
}
}, 1000)
},
endChooseScroll() {
clearInterval(this.timer)
},
startLottery() {
Bus.$emit('updateMain', { func: 'startLottery' })
},
drawAnimation() {
Bus.$emit('updateMain', { isLottering: false })
setTimeout(() => {
Bus.$emit('updateMain', { isShowWin: true })
}, 400)
},
changeIsShowIntro() {
Bus.$emit('updateMain', { isShowIntro: true })
}
}
}
</script>
<style lang="less" scoped>
.lottery-instant {
position: relative;
height: 100%;
background-color: #631e88 !important;
background-image: url('@/assets/images/lottery/guess/page-bg-mini.png') !important;
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
padding: 0 15px 22px;
overflow: auto;
-webkit-overflow-scrolling: touch;
&__main {
text-align: center;
}
&__title {
width: 66.7%;
object-fit: cover;
margin-top: 28px;
}
&__countdown {
padding-top: 6px;
}
&__layout-guess {
.content-img {
width: 218px;
height: 205px;
margin: -10px auto 0 auto;
img {
width: 100%;
}
}
.content-main {
position: relative;
background-image: url('@/assets/images/lottery/guess/game-bg.png');
background-size: 100% 100%;
background-position: center;
width: 100%;
height: 0;
padding-top: 156 / 367 * 100%;
margin-top: 16px;
&-box {
position: absolute;
bottom: 20%;
left: 50%;
transform: translateX(-50%);
width: 90%;
height: 47%;
z-index: 20;
.choose {
position: absolute;
top: -40%;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
background-color: #ffffffcc;
padding: 2px 6px;
white-space: nowrap;
border-radius: 9px;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 100%);
width: 0;
height: 0;
border-top: 4px solid #ffffffcc;
border-bottom: 4px solid transparent;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
}
}
}
&-times {
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
color: #fff;
z-index: 10;
}
}
}
&__intro-entry {
position: fixed;
top: 56px;
right: 0;
background: linear-gradient(180deg, #ffd63e 0%, #fca60d 100%);
box-shadow: 0px 1px 2px 0px rgba(202, 146, 46, 1);
color: #9c5c00;
font-size: 12px;
writing-mode: vertical-lr;
padding: 6px 3px;
border-radius: 10px 0 0 10px;
}
}
.slot-thanks {
font-size: 14px;
}
.choose-fade-enter-active {
transition: all 0.1s ease-in;
}
.choose-fade-leave-active {
transition: all 0.1s ease-out;
}
.choose-fade-enter,
.choose-fade-leave-to {
opacity: 0;
}
</style>
components/Lottery/Instant/type/TypeScratch.vue 0 → 100644
<template>
<section class="lottery-instant">
<div class="lottery-instant__main">
<CountdownBar version="mini" class="lottery-instant__countdown"></CountdownBar>
<div class="lottery-instant__layout-scratch">
<div class="lottery-instant__content-scratch">
<img class="content-title" src="@/assets/images/lottery/scratch/game-title.png" alt="" />
<div class="content-main">
<PrizeScratch ref="prizeScratchRef" :cover-img="coverImg" @endCallBack="endCallBack">
<template #item>
<div class="win__wrap">
<div class="win__content">
<div v-if="isWin" class="win__content-win">
<div class="win__content-win-title">恭喜获得</div>
<div class="win__content-win-img">
<img src="@/assets/images/lottery/gift.png" alt="" />
</div>
<div class="win__content-win-name">
{{ winInfo.name }}
</div>
</div>
<div v-else class="win__content-thanks">谢谢参与，再接再厉</div>
</div>
</div>
</template>
<template #button>
<div v-show="!isLottering" class="lottery-instant__button-wrap">
<div class="lottery-instant__button-mask">
<div v-show="firstTimeLottering" class="lottery-instant__button-img">
<img :src="buttonImg" @click="startLottery" />
<div class="times">
今日次数<span>{{ lotteryInfo.userTimes }}</span
>次
</div>
</div>
<div v-show="!firstTimeLottering" class="lottery-instant__button-continue">
<span @click="continueScratch"
>今日次数<span>{{ lotteryInfo.userTimes }}</span
>次，继续刮奖</span
>
</div>
</div>
</div>
</template>
</PrizeScratch>
</div>
</div>
</div>
</div>
<Records :records-config="recordsConfig"></Records>
<Introduction
class="lottery-instant__intro"
:rule="introConfig.rule"
:title-style="introConfig.introTitleStyle"
:wrap-style="introConfig.introWrapStyle"
:content-style="introConfig.introContentStyle"
:intro-box-style="introConfig.introBoxStyle"
></Introduction>
</section>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { PrizeScratch } from 'lotteries'
import { LOTTERY_STATUS } from '@/utils/constant'
import coverImg from '@/assets/images/lottery/scratch/mask.png'
import onStartImg from '@/assets/images/lottery/scratch/on-start.png'
import onStartDidabledImg from '@/assets/images/lottery/scratch/on-start-disabled.png'
import Bus from '@/utils/Bus'
import { introductionConfigScratch, recordsConfigScratch } from './config'
export default {
components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
Introduction: () => import('@/components/Lottery/Instant/Introduction'),
Records: () => import('@/components/Lottery/Instant/Records'),
PrizeScratch
},
props: {
winInfo: {
type: Object,
default: () => ({})
},
isShowWin: {
type: Boolean,
default: false
},
isShowBindPhone: {
type: Boolean,
default: false
},
isLottering: {
type: Boolean,
default: false
},
isLoading: {
type: Boolean,
default: false
}
},
data() {
return {
coverImg,
firstTimeLottering: true,
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, // 引用类型
recordsConfig: recordsConfigScratch, // 中奖记录样式配置
introConfig: introductionConfigScratch
}
},
computed: {
...mapGetters({
uin: 'users/uin',
isLogin: 'users/isLogin',
lotteryInfo: 'lottery/lotteryInfo',
isBindPhone: 'users/isBindPhone'
}),
isNotStart() {
// 抽奖不在活动日期内
const { status } = this.lotteryInfo
return +status !== LOTTERY_STATUS.start
},
// 按钮图片样式
buttonImg() {
if (!this.lotteryInfo.userTimes || this.isNotStart) {
return onStartDidabledImg
}
return onStartImg
},
isWin() {
return !!+this.winInfo.id
}
},
methods: {
...mapActions({ jumpToLogin: 'users/jumpToLogin', updateInfo: 'lottery/updateInfo' }),
// 开始抽奖
startLottery() {
Bus.$emit('updateMain', { func: 'startLottery' })
},
drawAnimation() {
//
},
// 刮奖结束回调
endCallBack() {
this.$toast({
message: '刮奖结束',
duration: 1500
})
Bus.$emit('updateMain', { isLottering: false })
if (this.lotteryInfo.userTimes === 0) {
this.$refs.prizeScratchRef.tryAgain()
this.firstTimeLottering = true
} else {
this.firstTimeLottering = false
}
},
// 继续刮奖
continueScratch() {
this.$refs.prizeScratchRef.tryAgain()
this.startLottery()
}
}
}
</script>
<style lang="less" scoped>
.lottery-instant {
position: relative;
height: 100%;
background-color: #83d4fd !important;
background-image: url('@/assets/images/lottery/scratch/page-bg.png') !important;
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
padding: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
&__countdown {
padding-top: 18px;
}
&__main {
padding: 0 0.13rem;
}
&__layout-scratch {
position: relative;
background-image: url('@/assets/images/lottery/scratch/game-bg.png');
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 363 / 355 * 100%;
margin-top: 7px;
}
&__content-scratch {
position: absolute;
left: 0;
top: 0;
padding: 90px 20px 30px 20px;
width: 100%;
height: 100%;
font-size: 20px;
text-align: center;
.content-title {
width: 74%;
object-fit: cover;
}
.content-prize {
font-size: 12px;
}
}
&__button {
&-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 40;
}
&-mask {
width: 100%;
height: 100%;
}
&-img {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
img {
width: 40%;
object-fit: cover;
}
.times {
position: absolute;
top: 70%;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
color: #666;
}
}
&-continue {
position: absolute;
bottom: 6%;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
color: #666;
}
}
.win {
&__wrap {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
&__content {
width: 90%;
height: 90%;
display: flex;
flex-direction: column;
justify-content: center;
background-color: #fff;
&-win {
&-title {
font-size: 16px;
margin-bottom: 3px;
color: #333;
}
&-img {
margin-bottom: 3px;
img {
width: 60px;
}
}
&-name {
font-size: 12px;
color: #666;
}
}
&-thanks {
font-size: 16px;
}
}
}
}
</style>
components/Lottery/Instant/type/TypeScratchMini.vue 0 → 100644
<template>
<section class="lottery-instant">
<div class="lottery-instant__times">
抽奖次数：<span>{{ lotteryInfo.userTimes }}</span
>次
</div>
<div class="lottery-instant__main">
<CountdownBar version="mini" class="lottery-instant__countdown"></CountdownBar>
<div class="lottery-instant__layout-scratch">
<div class="lottery-instant__content-scratch">
<img class="content-title" src="@/assets/images/lottery/scratch/game-title.png" alt="" />
<div class="content-main">
<PrizeScratch ref="prizeScratchRef" :cover-img="coverImg" @endCallBack="endCallBack">
<template #item>
<div class="win__wrap">
<div class="win__content">
<div v-if="isWin" class="win__content-win">
<div class="win__content-win-title">恭喜获得</div>
<div class="win__content-win-img">
<img src="@/assets/images/lottery/gift.png" alt="" />
</div>
<div class="win__content-win-name">
{{ winInfo.name }}
</div>
</div>
<div v-else class="win__content-thanks">谢谢参与，再接再厉</div>
</div>
</div>
</template>
<template #button>
<div v-show="!isLottering" class="lottery-instant__button-wrap">
<div class="lottery-instant__button-mask">
<div v-show="firstTimeLottering" class="lottery-instant__button-img">
<img :src="buttonImg" @click="startLottery" />
</div>
<div v-show="!firstTimeLottering" class="lottery-instant__button-continue">
<span @click="continueScratch"
>继续刮奖</span
>
</div>
</div>
</div>
</template>
</PrizeScratch>
</div>
</div>
</div>
</div>
<div class="lottery-instant__intro-entry" @click="changeIsShowIntro">活动介绍</div>
<Records :records-config="recordsConfig"></Records>
<IntroductionPopup
:value="isShowIntro"
:wrap-style="introConfig.introWrapStyle"
:content-style="introConfig.introContentStyle"
:popup-style="introConfig.introPopupStyle"
:content-box-style="introConfig.contentBoxStyle"
:back-style="introConfig.backStyle"
:rule="introConfig.rule"
></IntroductionPopup>
</section>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { PrizeScratch } from 'lotteries'
import { LOTTERY_STATUS } from '@/utils/constant'
import coverImg from '@/assets/images/lottery/scratch/mask.png'
import onStartImg from '@/assets/images/lottery/scratch/on-start.png'
import onStartDidabledImg from '@/assets/images/lottery/scratch/on-start-disabled.png'
import Bus from '@/utils/Bus'
import { introductionConfigScratchMini2, recordsConfigScratch } from './config'
export default {
components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
Records: () => import('@/components/Lottery/Instant/Records'),
IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup'),
PrizeScratch
},
props: {
winInfo: {
type: Object,
default: () => ({})
},
isShowWin: {
type: Boolean,
default: false
},
isShowBindPhone: {
type: Boolean,
default: false
},
isLottering: {
type: Boolean,
default: false
},
isLoading: {
type: Boolean,
default: false
},
isShowIntro: {
type: Boolean,
default: false
}
},
data() {
return {
coverImg,
firstTimeLottering: true,
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, // 引用类型
recordsConfig: recordsConfigScratch, // 中奖记录样式配置
introConfig: introductionConfigScratchMini2
}
},
computed: {
...mapGetters({
uin: 'users/uin',
isLogin: 'users/isLogin',
lotteryInfo: 'lottery/lotteryInfo',
isBindPhone: 'users/isBindPhone'
}),
isNotStart() {
// 抽奖不在活动日期内
const { status } = this.lotteryInfo
return +status !== LOTTERY_STATUS.start
},
// 按钮图片样式
buttonImg() {
if (!this.lotteryInfo.userTimes || this.isNotStart) {
return onStartDidabledImg
}
return onStartImg
},
isWin() {
return !!+this.winInfo.id
}
},
methods: {
...mapActions({ jumpToLogin: 'users/jumpToLogin', updateInfo: 'lottery/updateInfo' }),
// 开始抽奖
startLottery() {
Bus.$emit('updateMain', { func: 'startLottery' })
},
// 刮奖结束回调
endCallBack() {
this.$toast({
message: '刮奖结束',
duration: 1500
})
Bus.$emit('updateMain', { isLottering: false })
if (this.lotteryInfo.userTimes === 0) {
this.$refs.prizeScratchRef.tryAgain()
this.firstTimeLottering = true
} else {
this.firstTimeLottering = false
}
},
// 继续刮奖
continueScratch() {
this.$refs.prizeScratchRef.tryAgain()
this.startLottery()
},
changeIsShowIntro() {
Bus.$emit('updateMain', { isShowIntro: true })
}
}
}
</script>
<style lang="less" scoped>
.lottery-instant {
position: relative;
height: 100%;
background-color: #83d4fd !important;
background-image: none !important;
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
padding: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
&__countdown {
padding-top: 18px;
}
&__main {
padding: 0 0.13rem;
}
&__layout-scratch {
position: relative;
background-image: url('~@/assets/images/lottery/scratch/game-bg.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 363 / 355 * 100%;
margin-top: 7px;
}
&__content-scratch {
position: absolute;
left: 0;
top: 0;
padding: 90px 20px 30px 20px;
width: 100%;
height: 100%;
font-size: 20px;
text-align: center;
.content-title {
width: 74%;
object-fit: cover;
}
.content-prize {
font-size: 12px;
}
}
&__button {
&-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 40;
}
&-mask {
width: 100%;
height: 100%;
}
&-img {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
img {
width: 40%;
object-fit: cover;
}
.times {
position: absolute;
top: 70%;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
color: #666;
}
}
&-continue {
position: absolute;
bottom: 6%;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
color: #666;
}
}
.win {
&__wrap {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
&__content {
width: 90%;
height: 90%;
display: flex;
flex-direction: column;
justify-content: center;
background-color: #fff;
&-win {
&-title {
font-size: 16px;
margin-bottom: 3px;
color: #333;
}
&-img {
margin-bottom: 3px;
img {
width: 60px;
}
}
&-name {
font-size: 12px;
color: #666;
}
}
&-thanks {
font-size: 16px;
}
}
}
&__times {
position: absolute;
top: 0;
left: 0;
font-size: 13px;
padding: 25px 15px;
}
&__intro-entry {
position: fixed;
top: 56px;
right: 0;
background: linear-gradient(180deg, #ffd63e 0%, #fca60d 100%);
box-shadow: 0px 1px 2px 0px rgba(202, 146, 46, 1);
color: #9c5c00;
font-size: 12px;
writing-mode: vertical-lr;
padding: 6px 3px;
border-radius: 10px 0 0 10px;
}
}
</style>
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