Skip to content

activities / web-lottery

Go to a project
Commit c8a5ce07 by 施嘉伟
Options

合并分支 'test' 到 'dev' 

Test



查看合并请求 !34
parents c9f899a2 de9f657b
Showing with 1816 additions and 958 deletions
components/Lottery/Instant/CountdownBar.vue
<template>
<section v-if="'startTime' in lotteryInfo" class="countdown-bar">
<div
class="countdown-bar__status"
:style="barStyle"
>
<div class="countdown-bar__status">
<template v-if="+status !== LOTTERY_STATUS.end">
<div class="countdown-bar__text">{{ LOTTERY_STATUS_TXT[+status].actionLabel }}倒计时：</div>
<van-count-down millisecond :time="time" :style="{ color: barStyle.color }">
<van-count-down millisecond :time="time">
<template #default="timeData">
<span v-if="timeData.days" class="time-item">
{{ timeData.days | limitNum }}
......@@ -54,12 +51,6 @@ export default {
return value
}
},
props: {
barStyle: {
type: Object,
default: () => ({})
}
},
data() {
return {
LOTTERY_STATUS,
......
components/Lottery/Instant/Records.vue
......@@ -20,36 +20,17 @@
: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'
import Bus from '@/utils/Bus'
export default {
name: 'Records',
components: {
RecordsPupup,
RecordsPupupNew
},
props: {
recordsConfig: {
type: Object,
default: () => ({
mode: 'old'
})
}
RecordsPupup
},
data() {
return {
......@@ -66,28 +47,8 @@ export default {
return !!lotteryInfo.showResult
},
pupupVisible() {
return this.isShowRecordsPopup && this.recordsConfig.mode === 'old'
return this.isShowRecordsPopup
},
pupupNewVisible() {
return this.isShowRecordsPopup && this.recordsConfig.mode === 'new'
},
textColor() {
if (this.recordsConfig.mode === 'new') {
return {
color: this.recordsConfig.textColor
}
} else {
return {}
}
}
},
watch: {
'recordsConfig.textColor': {
handler(val) {
val ? Bus.$emit('initDeal', val) : Bus.$emit('initDeal', '')
},
immediate: true
}
},
mounted() {
this.recordsLayouts = this.$refs.recordsLayouts
......@@ -122,7 +83,6 @@ export default {
this.body.addEventListener('touchmove', this.recordsScrollOn)
})
this.body.addEventListener('touchend', () => {
this.body.removeEventListener('touchmove', this.recordsScrollOn)
this.recordsScrollOff()
})
......
components/Lottery/Instant/WinPopup.vue
......@@ -10,6 +10,7 @@
<div class="win-popup__container">
<div class="win-popup__wrap">
<div class="win-popup__content">
<slot v-if="isWin" name="title-bg"></slot>
<div v-if="isWin" class="win-popup__win-info">
<div class="win-popup__title">恭喜获得</div>
<div class="win-popup__prize-img">
......@@ -19,7 +20,9 @@
{{ info.name }}
</div>
</div>
<div v-else class="win-popup__thanks">谢谢参与，再接再厉</div>
<div v-else class="win-popup__thanks">
<slot name="thanks">谢谢参与，再接再厉</slot>
</div>
</div>
<div class="win-popup__footer">
<template v-if="isWin">
......
components/Lottery/Instant/WinPopupNew.vue deleted 100644 → 0
<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="onClose"></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 v-if="isWin" class="win-popup__bottom">
<van-button class="win-popup__sure" color="linear-gradient(#fff0cd, #fdbf2c)" round @click="know"
>查看奖品详情</van-button
>
<p class="win-popup__win-msg">根据活动说明进行领取</p>
</div>
<div v-else class="win-popup__bottom">
<van-button class="win-popup__sure" color="linear-gradient(#fff0cd, #fdbf2c)" round @click="visible = false"
>我知道了</van-button
>
</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' })
},
onClose() {
Bus.$emit('updateMain', { func: 'winCloseCallback' })
}
}
}
</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%;
height: 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;
}
}
&__bottom {
height: 120px;
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
}
&__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: 157px;
height: 49px;
line-height: 49px;
border-radius: 20px;
outline: none;
/deep/ .van-button__text {
font-size: 16px;
color: #860300;
font-weight: 600;
text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
}
&__win-msg {
text-align: center;
margin: 5px 0;
font-size: 12px;
color: #fff;
}
}
</style>
components/Lottery/Instant/type/TypeGashapon.vue
<template>
<section class="lottery-instant">
<div class="lottery-instant__main">
<CountdownBar class="lottery-instant__countdown" :bar-style="barStyle"></CountdownBar>
<CountdownBar class="lottery-instant__countdown"></CountdownBar>
<div class="lottery-instant__layout-gashapon">
<div class="content-main">
<PrizeGashapon ref="prizeGashaponRef" :ball-list-gashapon="ballListGashapon" @endCallBack="endCallBack" />
......@@ -20,13 +20,21 @@
</div>
</div>
</div>
<WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
<WinPopup :value="isShowWin" :info="winInfo">
<template #title-bg>
<div class="slot-title-bg">
<img src="@/assets/images/lottery/win-new/title-gashapon.png" alt="" />
</div>
</template>
<template #thanks>
<div class="slot-thanks">你没有扭到奖品</div>
<div class="slot-thanks">
<p class="slot-thanks-p1">很遗憾</p>
<p class="slot-thanks-p2">你没有扭到奖品</p>
</div>
</template>
</WinPopupNew>
</WinPopup>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<Records></Records>
<Introduction class="lottery-instant__intro" rule-position="bottom"></Introduction>
</section>
</template>
......@@ -38,17 +46,12 @@ import onStartDidabledImg from '@/assets/images/lottery/gashapon/on-start-disabl
import { mapGetters } from 'vuex'
import { LOTTERY_STATUS } from '@/utils/constant'
import Bus from '@/utils/Bus'
import {
winConfigGashapon,
recordsConfigGashapon,
ballListGashapon,
countDownBarPurple
} from './config'
import { ballListGashapon } from './config'
export default {
components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Introduction: () => import('@/components/Lottery/Instant/Introduction'),
Records: () => import('@/components/Lottery/Instant/Records'),
......@@ -82,9 +85,6 @@ export default {
playId: this.$route.query.sessionId || null, // 场次id
sid: this.$route.query.sid || null, // 引用id
stype: this.$route.query.stype || null, // 引用类型
recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
winConfig: winConfigGashapon, // 开奖样式
barStyle: countDownBarPurple,
ballListGashapon // 扭蛋球图片
}
},
......@@ -118,6 +118,9 @@ export default {
}
}
},
mounted() {
Bus.$emit('initDeal', '#6f19d1')
},
methods: {
startLottery() {
Bus.$emit('updateMain', { func: 'startLottery' })
......@@ -128,7 +131,8 @@ export default {
endCallBack() {
Bus.$emit('updateMain', { func: 'runEnd' })
}
}
},
}
</script>
......@@ -213,8 +217,9 @@ export default {
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction {
background-color: #7826A9;
background-color: #7826a9;
padding: 8px 15px 30px 15px;
border-radius: 0;
&__sec-title {
......@@ -240,5 +245,165 @@ export default {
color: #fff;
}
}
// 开奖
/deep/ .win-popup {
width: 263px;
height: 309px;
&__container {
width: 100%;
}
&__wrap {
position: relative;
width: 100%;
height: 100%;
background-image: url('@/assets/images/lottery/records-new/bg-purple.png');
}
&__sure {
width: 157px;
height: 49px;
line-height: 49px;
border-radius: 20px;
background: linear-gradient(#fff0cd, #fdbf2c) !important;
.van-button__text {
font-size: 16px;
color: #860300;
font-weight: 600;
text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
}
&__title {
font-size: 14px;
}
&__win-info {
width: 80%;
margin: 0 auto;
background-color: #0000001a;
border-radius: 20px;
margin-top: 15px;
}
&__footer {
width: 100%;
min-height: 80px;
justify-content: flex-start;
}
&__prize-img {
width: 65px;
height: 65px;
background-image: url('@/assets/images/lottery/win-new/prize-bg-purple.png');
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
img {
width: 60%;
}
}
&__prize-name {
margin-bottom: 11px;
font-size: 12px;
}
.slot-title-bg {
text-align: center;
margin-top: 36px;
height: 27px;
img {
height: 100%;
}
}
.slot-thanks {
text-align: center;
&-p1 {
font-size: 18px;
margin-bottom: 10px;
}
}
.van-popup__close-icon {
right: -20px;
top: -10px;
width: 25px;
height: 25px;
font-size: 0;
background-image: url('@/assets/images/lottery/win-new/close-purple.png');
background-size: 100% 100%;
}
}
// countdown
/deep/ .countdown-bar__status {
min-width: 160px;
padding: 0 9px;
border: none;
height: 22.5px !important;
background-color: #8350b299;
}
// records
/deep/ .records {
&__entry-wrap p {
color: #6f19d1;
}
&-popup {
width: 258px;
height: 320px;
background-color: transparent;
&__tabs {
padding-top: 0;
}
&__personal-record,
&__winners-record {
padding: 0 30px;
}
&__phone,
&__prize-name,
&__time,
&__session,
&__item {
color: #fff;
}
}
.van-tabs {
&__wrap {
height: 29px;
}
&__line {
display: none;
}
&__nav--line {
width: 180px;
padding-bottom: 0;
}
&__content {
background-image: url('@/assets/images/lottery/records-new/bg-purple.png');
background-size: 100% 100%;
}
}
.van-tab {
width: 60px;
background: linear-gradient(#fcf9fc, #efd6ed);
border-radius: 12px 12px 0 0;
margin: 0 3px;
span {
color: #b46ed0;
font-weight: 400;
}
&--active {
background: linear-gradient(#fffdfe, #ffd5fd);
span {
color: #752ec8 !important;
}
}
}
.van-popup__close-icon {
display: none;
}
.van-tabs__content .van-tab__pane {
padding: 20px 0;
}
.records-popup__winners-record .records-popup__prize-name {
color: #d92e32;
}
}
}
</style>
components/Lottery/Instant/type/TypeGashapon2.vue
......@@ -5,7 +5,7 @@
</div>
<div class="lottery-instant__main">
<div class="lottery-instant__countdown">
<CountdownBar :bar-style="barStyle"></CountdownBar>
<CountdownBar></CountdownBar>
</div>
<div class="lottery-instant__layout-gashapon">
<div class="content-main">
......@@ -22,13 +22,21 @@
</div>
</div>
</div>
<WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
<WinPopup :value="isShowWin" :info="winInfo">
<template #title-bg>
<div class="slot-title-bg">
<img src="@/assets/images/lottery/win-new/title-gashapon.png" alt="" />
</div>
</template>
<template #thanks>
<div class="slot-thanks">你没有扭到奖品</div>
<div class="slot-thanks">
<p class="slot-thanks-p1">很遗憾</p>
<p class="slot-thanks-p2">你没有扭到奖品</p>
</div>
</template>
</WinPopupNew>
</WinPopup>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<Records></Records>
<Introduction class="lottery-instant__intro" rule-position="bottom"></Introduction>
</section>
</template>
......@@ -40,17 +48,12 @@ import onStartDidabledImg from '@/assets/images/lottery/gashapon2/on-start-disab
import { mapGetters } from 'vuex'
import { LOTTERY_STATUS } from '@/utils/constant'
import Bus from '@/utils/Bus'
import {
winConfigGashapon2 as winConfigGashapon,
recordsConfigGashapon2 as recordsConfigGashapon,
ballListGashapon,
countDownBarNone
} from './config'
import { ballListGashapon } from './config'
export default {
components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Introduction: () => import('@/components/Lottery/Instant/Introduction'),
Records: () => import('@/components/Lottery/Instant/Records'),
......@@ -84,9 +87,6 @@ export default {
playId: this.$route.query.sessionId || null, // 场次id
sid: this.$route.query.sid || null, // 引用id
stype: this.$route.query.stype || null, // 引用类型
recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
winConfig: winConfigGashapon, // 开奖样式
barStyle: countDownBarNone,
ballListGashapon // 扭蛋球图片
}
},
......@@ -110,6 +110,9 @@ export default {
return onStartImg
}
},
mounted() {
Bus.$emit('initDeal', '#6f4800')
},
methods: {
startLottery() {
Bus.$emit('updateMain', { func: 'startLottery' })
......@@ -211,6 +214,7 @@ export default {
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction {
background-color: #ffbd33;
padding: 75px 11px 8px 11px;
......@@ -239,5 +243,161 @@ export default {
color: #000;
}
}
// 开奖
/deep/ .win-popup {
width: 263px;
height: 309px;
&__container {
width: 100%;
}
&__wrap {
position: relative;
width: 100%;
height: 100%;
background-image: url('@/assets/images/lottery/records-new/bg-blue.png');
}
&__sure {
width: 157px;
height: 49px;
line-height: 49px;
border-radius: 20px;
background: linear-gradient(#fff0cd, #fdbf2c) !important;
.van-button__text {
font-size: 16px;
color: #860300;
font-weight: 600;
text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
}
&__title {
font-size: 14px;
}
&__win-info {
width: 80%;
margin: 0 auto;
background-color: #0000001a;
border-radius: 20px;
margin-top: 15px;
}
&__footer {
width: 100%;
min-height: 80px;
justify-content: flex-start;
}
&__prize-img {
width: 65px;
height: 65px;
background-image: url('@/assets/images/lottery/win-new/prize-bg-blue.png');
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
img {
width: 60%;
}
}
&__prize-name {
margin-bottom: 11px;
font-size: 12px;
}
.slot-title-bg {
text-align: center;
margin-top: 36px;
height: 27px;
img {
height: 100%;
}
}
.slot-thanks {
text-align: center;
&-p1 {
font-size: 18px;
margin-bottom: 10px;
}
}
.van-popup__close-icon {
right: -20px;
top: -10px;
width: 25px;
height: 25px;
font-size: 0;
background-image: url('@/assets/images/lottery/win-new/close-blue.png');
background-size: 100% 100%;
}
}
// countdown
/deep/ .countdown-bar__status {
background-color: transparent;
padding: 0;
border: none;
}
// records
/deep/ .records {
&__entry-wrap p {
color: #6f4800;
}
&-popup {
width: 258px;
height: 320px;
background-color: transparent;
&__tabs {
padding-top: 0;
}
&__personal-record,
&__winners-record {
padding: 0 30px;
}
&__phone,
&__prize-name,
&__time {
color: #333;
}
}
.van-tabs {
&__wrap {
height: 29px;
}
&__line {
display: none;
}
&__nav--line {
width: 180px;
padding-bottom: 0;
}
&__content {
background-image: url('@/assets/images/lottery/records-new/bg-blue.png');
background-size: 100% 100%;
}
}
.van-tab {
width: 60px;
background: linear-gradient(#f6fbff, #a8d9fb);
border-radius: 12px 12px 0 0;
margin: 0 3px;
span {
color: #90b4dd;
font-weight: 400;
}
&--active {
background: linear-gradient(#feffff, #dff0ff);
span {
color: #4787d1 !important;
}
}
}
.van-popup__close-icon {
display: none;
}
.van-tabs__content .van-tab__pane {
padding: 20px 0;
}
.records-popup__winners-record .records-popup__prize-name {
color: #d92e32;
}
}
}
</style>
components/Lottery/Instant/type/TypeGashaponMini.vue
<template>
<section class="lottery-instant">
<div class="lottery-instant__main">
<CountdownBar class="lottery-instant__countdown" :bar-style="barStyle"></CountdownBar>
<CountdownBar class="lottery-instant__countdown"></CountdownBar>
<div class="lottery-instant__layout-gashapon">
<div class="content-main">
<PrizeGashapon ref="prizeGashaponRef" :ball-list-gashapon="ballListGashapon" @endCallBack="endCallBack" />
......@@ -21,17 +21,22 @@
</div>
</div>
<div class="lottery-instant__intro-entry" @click="changeIsShowIntro">活动介绍</div>
<WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
<WinPopup :value="isShowWin" :info="winInfo">
<template #title-bg>
<div class="slot-title-bg">
<img src="@/assets/images/lottery/win-new/title-gashapon.png" alt="" />
</div>
</template>
<template #thanks>
<div class="slot-thanks">你没有扭到奖品</div>
<div class="slot-thanks">
<p class="slot-thanks-p1">很遗憾</p>
<p class="slot-thanks-p2">你没有扭到奖品</p>
</div>
</template>
</WinPopupNew>
</WinPopup>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<IntroductionPopup
:value="isShowIntro"
rule-position="bottom"
></IntroductionPopup>
<Records></Records>
<IntroductionPopup :value="isShowIntro" rule-position="bottom"></IntroductionPopup>
</section>
</template>
......@@ -42,17 +47,12 @@ import onStartDidabledImg from '@/assets/images/lottery/gashapon/on-start-disabl
import { mapGetters } from 'vuex'
import { LOTTERY_STATUS } from '@/utils/constant'
import Bus from '@/utils/Bus'
import {
winConfigGashapon,
recordsConfigGashapon,
ballListGashapon,
countDownBarPurple
} from './config'
import { ballListGashapon } from './config'
export default {
components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Records: () => import('@/components/Lottery/Instant/Records'),
IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup'),
......@@ -90,9 +90,6 @@ export default {
playId: this.$route.query.sessionId || null, // 场次id
sid: this.$route.query.sid || null, // 引用id
stype: this.$route.query.stype || null, // 引用类型
recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
winConfig: winConfigGashapon, // 开奖样式
barStyle: countDownBarPurple,
ballListGashapon // 扭蛋球图片
}
},
......@@ -126,6 +123,9 @@ export default {
}
}
},
mounted() {
Bus.$emit('initDeal', '#6f19d1')
},
methods: {
startLottery() {
Bus.$emit('updateMain', { func: 'startLottery' })
......@@ -235,6 +235,7 @@ export default {
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction-popup {
background: url('@/assets/images/lottery/guess/intro-bg-mini.png');
&__wrap {
......@@ -264,5 +265,166 @@ export default {
color: #fff;
}
}
// 开奖
/deep/ .win-popup {
width: 263px;
height: 309px;
&__container {
width: 100%;
}
&__wrap {
position: relative;
width: 100%;
height: 100%;
background-image: url('@/assets/images/lottery/records-new/bg-purple.png');
}
&__sure {
width: 157px;
height: 49px;
line-height: 49px;
border-radius: 20px;
background: linear-gradient(#fff0cd, #fdbf2c) !important;
.van-button__text {
font-size: 16px;
color: #860300;
font-weight: 600;
text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
}
&__title {
font-size: 14px;
}
&__win-info {
width: 80%;
margin: 0 auto;
background-color: #0000001a;
border-radius: 20px;
margin-top: 15px;
}
&__footer {
width: 100%;
min-height: 80px;
justify-content: flex-start;
}
&__prize-img {
width: 65px;
height: 65px;
background-image: url('@/assets/images/lottery/win-new/prize-bg-purple.png');
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
img {
width: 60%;
}
}
&__prize-name {
margin-bottom: 11px;
font-size: 12px;
}
.slot-title-bg {
text-align: center;
margin-top: 36px;
height: 27px;
img {
height: 100%;
}
}
.slot-thanks {
text-align: center;
&-p1 {
font-size: 18px;
margin-bottom: 10px;
}
}
.van-popup__close-icon {
right: -20px;
top: -10px;
width: 25px;
height: 25px;
font-size: 0;
background-image: url('@/assets/images/lottery/win-new/close-purple.png');
background-size: 100% 100%;
}
}
// countdown
/deep/ .countdown-bar__status {
min-width: 160px;
padding: 0 9px;
border: none;
height: 22.5px !important;
background-color: #8350B299;
}
// records
/deep/ .records {
&__entry-wrap p {
color: #6f19d1;
}
&-popup {
width: 258px;
height: 320px;
background-color: transparent;
&__tabs {
padding-top: 0;
}
&__personal-record,
&__winners-record {
padding: 0 30px;
}
&__phone,
&__prize-name,
&__time,
&__session,
&__item {
color: #fff;
}
}
.van-tabs {
&__wrap {
height: 29px;
}
&__line {
display: none;
}
&__nav--line {
width: 180px;
padding-bottom: 0;
}
&__content {
background-image: url('@/assets/images/lottery/records-new/bg-purple.png');
background-size: 100% 100%;
}
}
.van-tab {
width: 60px;
background: linear-gradient(#fcf9fc, #efd6ed);
border-radius: 12px 12px 0 0;
margin: 0 3px;
span {
color: #b46ed0;
font-weight: 400;
}
&--active {
background: linear-gradient(#fffdfe, #ffd5fd);
span {
color: #752ec8 !important;
}
}
}
.van-popup__close-icon {
display: none;
}
.van-tabs__content .van-tab__pane {
padding: 20px 0;
}
.records-popup__winners-record .records-popup__prize-name {
color: #d92e32;
}
}
}
</style>
components/Lottery/Instant/type/TypeGashaponMini2.vue
<template>
<section class="lottery-instant">
<div class="lottery-instant__countdown">
<CountdownBar :bar-style="barStyle"></CountdownBar>
<CountdownBar></CountdownBar>
</div>
<div class="lottery-instant__main">
<div class="lottery-instant__layout-gashapon">
......@@ -20,17 +20,22 @@
</div>
</div>
<div class="lottery-instant__intro-entry" @click="changeIsShowIntro">活动介绍</div>
<WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
<WinPopup :value="isShowWin" :info="winInfo">
<template #title-bg>
<div class="slot-title-bg">
<img src="@/assets/images/lottery/win-new/title-gashapon.png" alt="" />
</div>
</template>
<template #thanks>
<div class="slot-thanks">你没有扭到奖品</div>
<div class="slot-thanks">
<p class="slot-thanks-p1">很遗憾</p>
<p class="slot-thanks-p2">你没有扭到奖品</p>
</div>
</template>
</WinPopupNew>
</WinPopup>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<IntroductionPopup
:value="isShowIntro"
rule-position="bottom"
></IntroductionPopup>
<Records></Records>
<IntroductionPopup :value="isShowIntro" rule-position="bottom"></IntroductionPopup>
</section>
</template>
......@@ -41,21 +46,16 @@ import onStartDidabledImg from '@/assets/images/lottery/gashapon2/on-start-disab
import { mapGetters } from 'vuex'
import { LOTTERY_STATUS } from '@/utils/constant'
import Bus from '@/utils/Bus'
import {
winConfigGashapon2 as winConfigGashapon,
recordsConfigGashapon2 as recordsConfigGashapon,
ballListGashapon,
countDownBarWhite
} from './config'
import { ballListGashapon } from './config'
export default {
components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Records: () => import('@/components/Lottery/Instant/Records'),
IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup'),
PrizeGashapon,
PrizeGashapon
},
props: {
winInfo: {
......@@ -89,9 +89,6 @@ export default {
playId: this.$route.query.sessionId || null, // 场次id
sid: this.$route.query.sid || null, // 引用id
stype: this.$route.query.stype || null, // 引用类型
recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
winConfig: winConfigGashapon, // 开奖样式
barStyle: countDownBarWhite,
ballListGashapon // 扭蛋球图片
}
},
......@@ -115,6 +112,9 @@ export default {
return onStartImg
}
},
mounted() {
Bus.$emit('initDeal', '#6f4800')
},
methods: {
startLottery() {
Bus.$emit('updateMain', { func: 'startLottery' })
......@@ -217,6 +217,7 @@ export default {
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction-popup {
background: url('@/assets/images/lottery/gashapon2/intro-bg-mini.png');
&__wrap {
......@@ -246,5 +247,166 @@ export default {
color: #fff;
}
}
// 开奖
/deep/ .win-popup {
width: 263px;
height: 309px;
&__container {
width: 100%;
}
&__wrap {
position: relative;
width: 100%;
height: 100%;
background-image: url('@/assets/images/lottery/records-new/bg-blue.png');
}
&__sure {
width: 157px;
height: 49px;
line-height: 49px;
border-radius: 20px;
background: linear-gradient(#fff0cd, #fdbf2c) !important;
.van-button__text {
font-size: 16px;
color: #860300;
font-weight: 600;
text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
}
&__title {
font-size: 14px;
}
&__win-info {
width: 80%;
margin: 0 auto;
background-color: #0000001a;
border-radius: 20px;
margin-top: 15px;
}
&__footer {
width: 100%;
min-height: 80px;
justify-content: flex-start;
}
&__prize-img {
width: 65px;
height: 65px;
background-image: url('@/assets/images/lottery/win-new/prize-bg-blue.png');
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
img {
width: 60%;
}
}
&__prize-name {
margin-bottom: 11px;
font-size: 12px;
}
.slot-title-bg {
text-align: center;
margin-top: 36px;
height: 27px;
img {
height: 100%;
}
}
.slot-thanks {
text-align: center;
&-p1 {
font-size: 18px;
margin-bottom: 10px;
}
}
.van-popup__close-icon {
right: -20px;
top: -10px;
width: 25px;
height: 25px;
font-size: 0;
background-image: url('@/assets/images/lottery/win-new/close-blue.png');
background-size: 100% 100%;
}
}
// countdown
/deep/ .countdown-bar__status {
min-width: 160px;
padding: 0 9px;
border: none;
height: 22.5px !important;
background-color: #ffffff99;
color: #000;
.van-count-down {
color: #000;
}
}
// records
/deep/ .records {
&__entry-wrap p {
color: #6f4800;
}
&-popup {
width: 258px;
height: 320px;
background-color: transparent;
&__tabs {
padding-top: 0;
}
&__personal-record,
&__winners-record {
padding: 0 30px;
}
&__phone,
&__prize-name,
&__time {
color: #333;
}
}
.van-tabs {
&__wrap {
height: 29px;
}
&__line {
display: none;
}
&__nav--line {
width: 180px;
padding-bottom: 0;
}
&__content {
background-image: url('@/assets/images/lottery/records-new/bg-blue.png');
background-size: 100% 100%;
}
}
.van-tab {
width: 60px;
background: linear-gradient(#f6fbff, #a8d9fb);
border-radius: 12px 12px 0 0;
margin: 0 3px;
span {
color: #90b4dd;
font-weight: 400;
}
&--active {
background: linear-gradient(#feffff, #dff0ff);
span {
color: #4787d1 !important;
}
}
}
.van-popup__close-icon {
display: none;
}
.van-tabs__content .van-tab__pane {
padding: 20px 0;
}
.records-popup__winners-record .records-popup__prize-name {
color: #d92e32;
}
}
}
</style>
components/Lottery/Instant/type/TypeGuess.vue
......@@ -2,7 +2,7 @@
<section class="lottery-instant">
<div class="lottery-instant__main">
<img class="lottery-instant__title" src="@/assets/images/lottery/guess/game-title.png" />
<CountdownBar class="lottery-instant__countdown" :bar-style="barStyle"></CountdownBar>
<CountdownBar class="lottery-instant__countdown"></CountdownBar>
<div class="lottery-instant__layout-guess">
<div class="content-img">
<div v-for="(item, index) in starConfig" :key="index" class="content-img--star" :style="item">
......@@ -27,13 +27,21 @@
</div>
</div>
</div>
<WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
<WinPopup :value="isShowWin" :info="winInfo">
<template #title-bg>
<div class="slot-title-bg">
<img src="@/assets/images/lottery/win-new/title-guess.png" alt="" />
</div>
</template>
<template #thanks>
<div class="slot-thanks">你没有猜中</div>
<div class="slot-thanks">
<p class="slot-thanks-p1">很遗憾</p>
<p class="slot-thanks-p2">你没有猜中</p>
</div>
</template>
</WinPopupNew>
</WinPopup>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<Records></Records>
<Introduction class="lottery-instant__intro" rule-position="bottom"></Introduction>
</section>
</template>
......@@ -42,19 +50,13 @@
import { PrizeGuess } from 'lotteries'
import { mapGetters } from 'vuex'
import Bus from '@/utils/Bus'
import {
blindBoxListGuess,
recordsConfigGuess,
winConfigGuess,
countDownBarDeepPurple,
starConfig
} from './config'
import { blindBoxListGuess, starConfig } from './config'
export default {
components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
PrizeGuess,
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Introduction: () => import('@/components/Lottery/Instant/Introduction'),
Records: () => import('@/components/Lottery/Instant/Records')
......@@ -90,9 +92,6 @@ export default {
chooseIndex: 0,
timer: null,
blindBoxList: blindBoxListGuess,
recordsConfig: recordsConfigGuess, // 中奖记录样式配置
winConfig: winConfigGuess, // 开奖样式
barStyle: countDownBarDeepPurple,
starConfig
}
},
......@@ -106,6 +105,7 @@ export default {
},
mounted() {
this.startChooseScroll()
Bus.$emit('initDeal', '#6f19d1')
},
beforeDestroy() {
this.endChooseScroll()
......@@ -131,7 +131,9 @@ export default {
Bus.$emit('updateMain', { func: 'startLottery' })
},
drawAnimation() {
Bus.$emit('updateMain', { func: 'runEnd' })
setTimeout(() => {
Bus.$emit('updateMain', { func: 'runEnd' })
}, 0)
}
}
}
......@@ -244,6 +246,7 @@ export default {
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction {
background: linear-gradient(180deg, #682ca1 0%, #a649d8 100%);
padding: 30px 15px;
......@@ -265,5 +268,165 @@ export default {
color: #fff;
}
}
// 开奖
/deep/ .win-popup {
width: 263px;
height: 309px;
&__container {
width: 100%;
}
&__wrap {
position: relative;
width: 100%;
height: 100%;
background-image: url('@/assets/images/lottery/records-new/bg-purple.png');
}
&__sure {
width: 157px;
height: 49px;
line-height: 49px;
border-radius: 20px;
background: linear-gradient(#fff0cd, #fdbf2c) !important;
.van-button__text {
font-size: 16px;
color: #860300;
font-weight: 600;
text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
}
&__title {
font-size: 14px;
}
&__win-info {
width: 80%;
margin: 0 auto;
background-color: #0000001a;
border-radius: 20px;
margin-top: 15px;
}
&__footer {
width: 100%;
min-height: 80px;
justify-content: flex-start;
}
&__prize-img {
width: 65px;
height: 65px;
background-image: url('@/assets/images/lottery/win-new/prize-bg-purple.png');
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
img {
width: 60%;
}
}
&__prize-name {
margin-bottom: 11px;
font-size: 12px;
}
.slot-title-bg {
text-align: center;
margin-top: 36px;
height: 27px;
img {
height: 100%;
}
}
.slot-thanks {
text-align: center;
&-p1 {
font-size: 18px;
margin-bottom: 10px;
}
}
.van-popup__close-icon {
right: -20px;
top: -10px;
width: 25px;
height: 25px;
font-size: 0;
background-image: url('@/assets/images/lottery/win-new/close-purple.png');
background-size: 100% 100%;
}
}
// countdown
/deep/ .countdown-bar__status {
min-width: 160px;
padding: 0 9px;
border: none;
height: 22.5px !important;
background-color: #12121233;
}
// records
/deep/ .records {
&__entry-wrap p {
color: #6f19d1;
}
&-popup {
width: 258px;
height: 320px;
background-color: transparent;
&__tabs {
padding-top: 0;
}
&__personal-record,
&__winners-record {
padding: 0 30px;
}
&__phone,
&__prize-name,
&__time,
&__session,
&__item {
color: #fff;
}
}
.van-tabs {
&__wrap {
height: 29px;
}
&__line {
display: none;
}
&__nav--line {
width: 180px;
padding-bottom: 0;
}
&__content {
background-image: url('@/assets/images/lottery/records-new/bg-purple.png');
background-size: 100% 100%;
}
}
.van-tab {
width: 60px;
background: linear-gradient(#fcf9fc, #efd6ed);
border-radius: 12px 12px 0 0;
margin: 0 3px;
span {
color: #b46ed0;
font-weight: 400;
}
&--active {
background: linear-gradient(#fffdfe, #ffd5fd);
span {
color: #752ec8 !important;
}
}
}
.van-popup__close-icon {
display: none;
}
.van-tabs__content .van-tab__pane {
padding: 20px 0;
}
.records-popup__winners-record .records-popup__prize-name {
color: #d92e32;
}
}
}
</style>
components/Lottery/Instant/type/TypeGuess2.vue
......@@ -2,7 +2,7 @@
<section class="lottery-instant">
<div class="lottery-instant__main">
<img class="lottery-instant__title" src="@/assets/images/lottery/guess/game-title.png" />
<CountdownBar class="lottery-instant__countdown" :bar-style="barStyle"></CountdownBar>
<CountdownBar class="lottery-instant__countdown"></CountdownBar>
<div class="lottery-instant__layout-guess">
<div class="content-img">
<div v-for="(item, index) in starConfig" :key="index" class="content-img--star" :style="item">
......@@ -27,13 +27,21 @@
</div>
</div>
</div>
<WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
<WinPopup :value="isShowWin" :info="winInfo">
<template #title-bg>
<div class="slot-title-bg">
<img src="@/assets/images/lottery/win-new/title-guess.png" alt="" />
</div>
</template>
<template #thanks>
<div class="slot-thanks">你没有猜中</div>
<div class="slot-thanks">
<p class="slot-thanks-p1">很遗憾</p>
<p class="slot-thanks-p2">你没有猜中</p>
</div>
</template>
</WinPopupNew>
</WinPopup>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<Records></Records>
<Introduction class="lottery-instant__intro" rule-position="bottom"></Introduction>
</section>
</template>
......@@ -42,19 +50,13 @@
import { PrizeGuess } from 'lotteries'
import { mapGetters } from 'vuex'
import Bus from '@/utils/Bus'
import {
blindBoxListGuess2,
recordsConfigGuess,
winConfigGuess,
countDownBarDeepPurple,
starConfig
} from './config'
import { blindBoxListGuess2, starConfig } from './config'
export default {
components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
PrizeGuess,
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Introduction: () => import('@/components/Lottery/Instant/Introduction'),
Records: () => import('@/components/Lottery/Instant/Records')
......@@ -90,9 +92,6 @@ export default {
chooseIndex: 0,
timer: null,
blindBoxList: blindBoxListGuess2,
recordsConfig: recordsConfigGuess, // 中奖记录样式配置
winConfig: winConfigGuess, // 开奖样式
barStyle: countDownBarDeepPurple,
starConfig
}
},
......@@ -104,6 +103,9 @@ export default {
isBindPhone: 'users/isBindPhone'
})
},
mounted() {
Bus.$emit('initDeal', '#6f19d1')
},
// mounted() {
// this.startChooseScroll()
// },
......@@ -131,7 +133,9 @@ export default {
Bus.$emit('updateMain', { func: 'startLottery' })
},
drawAnimation() {
Bus.$emit('updateMain', { func: 'runEnd' })
setTimeout(() => {
Bus.$emit('updateMain', { func: 'runEnd' })
}, 0)
}
}
}
......@@ -242,6 +246,7 @@ export default {
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction {
background: linear-gradient(180deg, #682ca1 0%, #a649d8 100%);
padding: 30px 15px;
......@@ -267,5 +272,163 @@ export default {
color: #fff;
}
}
/deep/ .win-popup {
width: 263px;
height: 309px;
&__container {
width: 100%;
}
&__wrap {
position: relative;
width: 100%;
height: 100%;
background-image: url('@/assets/images/lottery/records-new/bg-purple.png');
}
&__sure {
width: 157px;
height: 49px;
line-height: 49px;
border-radius: 20px;
background: linear-gradient(#fff0cd, #fdbf2c) !important;
.van-button__text {
font-size: 16px;
color: #860300;
font-weight: 600;
text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
}
&__title {
font-size: 14px;
}
&__win-info {
width: 80%;
margin: 0 auto;
background-color: #0000001a;
border-radius: 20px;
margin-top: 15px;
}
&__footer {
width: 100%;
min-height: 80px;
justify-content: flex-start;
}
&__prize-img {
width: 65px;
height: 65px;
background-image: url('@/assets/images/lottery/win-new/prize-bg-purple.png');
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
img {
width: 60%;
}
}
&__prize-name {
margin-bottom: 11px;
font-size: 12px;
}
.slot-title-bg {
text-align: center;
margin-top: 36px;
height: 27px;
img {
height: 100%;
}
}
.slot-thanks {
text-align: center;
&-p1 {
font-size: 18px;
margin-bottom: 10px;
}
}
.van-popup__close-icon {
right: -20px;
top: -10px;
width: 25px;
height: 25px;
font-size: 0;
background-image: url('@/assets/images/lottery/win-new/close-purple.png');
background-size: 100% 100%;
}
}
// countdown
/deep/ .countdown-bar__status {
min-width: 160px;
padding: 0 9px;
border: none;
height: 22.5px !important;
background-color: #12121233;
}
// records
/deep/ .records {
&__entry-wrap p {
color: #6f19d1;
}
&-popup {
width: 258px;
height: 320px;
background-color: transparent;
&__tabs {
padding-top: 0;
}
&__personal-record,
&__winners-record {
padding: 0 30px;
}
&__phone,
&__prize-name,
&__time,
&__session,
&__item {
color: #fff;
}
}
.van-tabs {
&__wrap {
height: 29px;
}
&__line {
display: none;
}
&__nav--line {
width: 180px;
padding-bottom: 0;
}
&__content {
background-image: url('@/assets/images/lottery/records-new/bg-purple.png');
background-size: 100% 100%;
}
}
.van-tab {
width: 60px;
background: linear-gradient(#fcf9fc, #efd6ed);
border-radius: 12px 12px 0 0;
margin: 0 3px;
span {
color: #b46ed0;
font-weight: 400;
}
&--active {
background: linear-gradient(#fffdfe, #ffd5fd);
span {
color: #752ec8 !important;
}
}
}
.van-popup__close-icon {
display: none;
}
.van-tabs__content .van-tab__pane {
padding: 20px 0;
}
.records-popup__winners-record .records-popup__prize-name {
color: #d92e32;
}
}
}
</style>
components/Lottery/Instant/type/TypeGuessMini.vue
......@@ -2,7 +2,7 @@
<section class="lottery-instant">
<div class="lottery-instant__main">
<img class="lottery-instant__title" src="@/assets/images/lottery/guess/game-title.png" />
<CountdownBar class="lottery-instant__countdown" :bar-style="barStyle"></CountdownBar>
<CountdownBar class="lottery-instant__countdown"></CountdownBar>
<div class="lottery-instant__layout-guess">
<div class="content-img">
<div v-for="(item, index) in starConfig" :key="index" class="content-img--star" :style="item">
......@@ -28,13 +28,21 @@
</div>
</div>
<div class="lottery-instant__intro-entry" @click="changeIsShowIntro">活动介绍</div>
<WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
<WinPopup :value="isShowWin" :info="winInfo">
<template #title-bg>
<div class="slot-title-bg">
<img src="@/assets/images/lottery/win-new/title-guess.png" alt="" />
</div>
</template>
<template #thanks>
<div class="slot-thanks">你没有猜中</div>
<div class="slot-thanks">
<p class="slot-thanks-p1">很遗憾</p>
<p class="slot-thanks-p2">你没有猜中</p>
</div>
</template>
</WinPopupNew>
</WinPopup>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<Records></Records>
<IntroductionPopup :value="isShowIntro" rule-position="bottom"></IntroductionPopup>
</section>
</template>
......@@ -43,13 +51,13 @@
import { PrizeGuess } from 'lotteries'
import { mapGetters } from 'vuex'
import Bus from '@/utils/Bus'
import { blindBoxListGuess, recordsConfigGuess, winConfigGuess, countDownBarDeepPurple, starConfig } from './config'
import { blindBoxListGuess, starConfig } from './config'
export default {
components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
PrizeGuess,
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Records: () => import('@/components/Lottery/Instant/Records'),
IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup')
......@@ -89,9 +97,6 @@ export default {
chooseIndex: 0,
timer: null,
blindBoxList: blindBoxListGuess,
recordsConfig: recordsConfigGuess, // 中奖记录样式配置
winConfig: winConfigGuess, // 开奖样式
barStyle: countDownBarDeepPurple,
starConfig
}
},
......@@ -105,6 +110,7 @@ export default {
},
mounted() {
this.startChooseScroll()
Bus.$emit('initDeal', '#6f19d1')
},
beforeDestroy() {
this.endChooseScroll()
......@@ -130,7 +136,9 @@ export default {
Bus.$emit('updateMain', { func: 'startLottery' })
},
drawAnimation() {
Bus.$emit('updateMain', { func: 'runEnd' })
setTimeout(() => {
Bus.$emit('updateMain', { func: 'runEnd' })
}, 0)
},
changeIsShowIntro() {
Bus.$emit('updateMain', { isShowIntro: true })
......@@ -261,6 +269,7 @@ export default {
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction-popup {
background: url('@/assets/images/lottery/guess/intro-bg-mini.png');
&__wrap {
......@@ -290,5 +299,164 @@ export default {
color: #fff;
}
}
/deep/ .win-popup {
width: 263px;
height: 309px;
&__container {
width: 100%;
}
&__wrap {
position: relative;
width: 100%;
height: 100%;
background-image: url('@/assets/images/lottery/records-new/bg-purple.png');
}
&__sure {
width: 157px;
height: 49px;
line-height: 49px;
border-radius: 20px;
background: linear-gradient(#fff0cd, #fdbf2c) !important;
.van-button__text {
font-size: 16px;
color: #860300;
font-weight: 600;
text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
}
&__title {
font-size: 14px;
}
&__win-info {
width: 80%;
margin: 0 auto;
background-color: #0000001a;
border-radius: 20px;
margin-top: 15px;
}
&__footer {
width: 100%;
min-height: 80px;
justify-content: flex-start;
}
&__prize-img {
width: 65px;
height: 65px;
background-image: url('@/assets/images/lottery/win-new/prize-bg-purple.png');
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
img {
width: 60%;
}
}
&__prize-name {
margin-bottom: 11px;
font-size: 12px;
}
.slot-title-bg {
text-align: center;
margin-top: 36px;
height: 27px;
img {
height: 100%;
}
}
.slot-thanks {
text-align: center;
&-p1 {
font-size: 18px;
margin-bottom: 10px;
}
}
.van-popup__close-icon {
right: -20px;
top: -10px;
width: 25px;
height: 25px;
font-size: 0;
background-image: url('@/assets/images/lottery/win-new/close-purple.png');
background-size: 100% 100%;
}
}
// countdown
/deep/ .countdown-bar__status {
min-width: 160px;
padding: 0 9px;
border: none;
height: 22.5px !important;
background-color: #12121233;
}
// records
/deep/ .records {
&__entry-wrap p {
color: #6f19d1;
}
&-popup {
width: 258px;
height: 320px;
background-color: transparent;
&__tabs {
padding-top: 0;
}
&__personal-record,
&__winners-record {
padding: 0 30px;
}
&__phone,
&__prize-name,
&__time,
&__session,
&__item {
color: #fff;
}
}
.van-tabs {
&__wrap {
height: 29px;
}
&__line {
display: none;
}
&__nav--line {
width: 180px;
padding-bottom: 0;
}
&__content {
background-image: url('@/assets/images/lottery/records-new/bg-purple.png');
background-size: 100% 100%;
}
}
.van-tab {
width: 60px;
background: linear-gradient(#fcf9fc, #efd6ed);
border-radius: 12px 12px 0 0;
margin: 0 3px;
span {
color: #b46ed0;
font-weight: 400;
}
&--active {
background: linear-gradient(#fffdfe, #ffd5fd);
span {
color: #752ec8 !important;
}
}
}
.van-popup__close-icon {
display: none;
}
.van-tabs__content .van-tab__pane {
padding: 20px 0;
}
.records-popup__winners-record .records-popup__prize-name {
color: #d92e32;
}
}
}
</style>
components/Lottery/Instant/type/TypeGuessMini2.vue
......@@ -2,7 +2,7 @@
<section class="lottery-instant">
<div class="lottery-instant__main">
<img class="lottery-instant__title" src="@/assets/images/lottery/guess/game-title.png" />
<CountdownBar class="lottery-instant__countdown" :bar-style="barStyle"></CountdownBar>
<CountdownBar class="lottery-instant__countdown"></CountdownBar>
<div class="lottery-instant__layout-guess">
<div class="content-img">
<div v-for="(item, index) in starConfig" :key="index" class="content-img--star" :style="item">
......@@ -28,17 +28,22 @@
</div>
</div>
<div class="lottery-instant__intro-entry" @click="changeIsShowIntro">活动介绍</div>
<WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
<WinPopup :value="isShowWin" :info="winInfo">
<template #title-bg>
<div class="slot-title-bg">
<img src="@/assets/images/lottery/win-new/title-guess.png" alt="" />
</div>
</template>
<template #thanks>
<div class="slot-thanks">你没有猜中</div>
<div class="slot-thanks">
<p class="slot-thanks-p1">很遗憾</p>
<p class="slot-thanks-p2">你没有猜中</p>
</div>
</template>
</WinPopupNew>
</WinPopup>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records>
<IntroductionPopup
:value="isShowIntro"
rule-position="bottom"
></IntroductionPopup>
<Records></Records>
<IntroductionPopup :value="isShowIntro" rule-position="bottom"></IntroductionPopup>
</section>
</template>
......@@ -46,19 +51,13 @@
import { PrizeGuess } from 'lotteries'
import { mapGetters } from 'vuex'
import Bus from '@/utils/Bus'
import {
blindBoxListGuess2 as blindBoxListGuess,
recordsConfigGuess,
winConfigGuess,
countDownBarDeepPurple,
starConfig
} from './config'
import { blindBoxListGuess2 as blindBoxListGuess, starConfig } from './config'
export default {
components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
PrizeGuess,
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Records: () => import('@/components/Lottery/Instant/Records'),
IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup')
......@@ -98,9 +97,6 @@ export default {
chooseIndex: 0,
timer: null,
blindBoxList: blindBoxListGuess,
recordsConfig: recordsConfigGuess, // 中奖记录样式配置
winConfig: winConfigGuess, // 开奖样式
barStyle: countDownBarDeepPurple,
starConfig
}
},
......@@ -112,6 +108,9 @@ export default {
isBindPhone: 'users/isBindPhone'
})
},
mounted() {
Bus.$emit('initDeal', '#6f19d1')
},
// mounted() {
// this.startChooseScroll()
// },
......@@ -142,7 +141,9 @@ export default {
Bus.$emit('updateMain', { func: 'runEnd' })
},
changeIsShowIntro() {
Bus.$emit('updateMain', { isShowIntro: true })
setTimeout(() => {
Bus.$emit('updateMain', { func: 'runEnd' })
}, 0)
}
}
}
......@@ -268,6 +269,7 @@ export default {
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction-popup {
background: url('@/assets/images/lottery/guess/intro-bg-mini.png');
&__wrap {
......@@ -297,5 +299,165 @@ export default {
color: #fff;
}
}
// 开奖
/deep/ .win-popup {
width: 263px;
height: 309px;
&__container {
width: 100%;
}
&__wrap {
position: relative;
width: 100%;
height: 100%;
background-image: url('@/assets/images/lottery/records-new/bg-purple.png');
}
&__sure {
width: 157px;
height: 49px;
line-height: 49px;
border-radius: 20px;
background: linear-gradient(#fff0cd, #fdbf2c) !important;
.van-button__text {
font-size: 16px;
color: #860300;
font-weight: 600;
text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
}
&__title {
font-size: 14px;
}
&__win-info {
width: 80%;
margin: 0 auto;
background-color: #0000001a;
border-radius: 20px;
margin-top: 15px;
}
&__footer {
width: 100%;
min-height: 80px;
justify-content: flex-start;
}
&__prize-img {
width: 65px;
height: 65px;
background-image: url('@/assets/images/lottery/win-new/prize-bg-purple.png');
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
img {
width: 60%;
}
}
&__prize-name {
margin-bottom: 11px;
font-size: 12px;
}
.slot-title-bg {
text-align: center;
margin-top: 36px;
height: 27px;
img {
height: 100%;
}
}
.slot-thanks {
text-align: center;
&-p1 {
font-size: 18px;
margin-bottom: 10px;
}
}
.van-popup__close-icon {
right: -20px;
top: -10px;
width: 25px;
height: 25px;
font-size: 0;
background-image: url('@/assets/images/lottery/win-new/close-purple.png');
background-size: 100% 100%;
}
}
// countdown
/deep/ .countdown-bar__status {
min-width: 160px;
padding: 0 9px;
border: none;
height: 22.5px !important;
background-color: #12121233;
}
// records
/deep/ .records {
&__entry-wrap p {
color: #6f19d1;
}
&-popup {
width: 258px;
height: 320px;
background-color: transparent;
&__tabs {
padding-top: 0;
}
&__personal-record,
&__winners-record {
padding: 0 30px;
}
&__phone,
&__prize-name,
&__time,
&__session,
&__item {
color: #fff;
}
}
.van-tabs {
&__wrap {
height: 29px;
}
&__line {
display: none;
}
&__nav--line {
width: 180px;
padding-bottom: 0;
}
&__content {
background-image: url('@/assets/images/lottery/records-new/bg-purple.png');
background-size: 100% 100%;
}
}
.van-tab {
width: 60px;
background: linear-gradient(#fcf9fc, #efd6ed);
border-radius: 12px 12px 0 0;
margin: 0 3px;
span {
color: #b46ed0;
font-weight: 400;
}
&--active {
background: linear-gradient(#fffdfe, #ffd5fd);
span {
color: #752ec8 !important;
}
}
}
.van-popup__close-icon {
display: none;
}
.van-tabs__content .van-tab__pane {
padding: 20px 0;
}
.records-popup__winners-record .records-popup__prize-name {
color: #d92e32;
}
}
}
</style>
components/Lottery/Instant/type/TypeScratch.vue
<template>
<section class="lottery-instant">
<div class="lottery-instant__main">
<CountdownBar class="lottery-instant__countdown" :bar-style="barStyle"></CountdownBar>
<CountdownBar 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="" />
......@@ -47,12 +47,20 @@
</div>
</div>
</div>
<WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
<WinPopup :value="isShowWin" :info="winInfo">
<template #title-bg>
<div class="slot-title-bg">
<img src="@/assets/images/lottery/win-new/title-scratch.png" alt="" />
</div>
</template>
<template #thanks>
<div class="slot-thanks">你没有刮到奖品</div>
<div class="slot-thanks">
<p class="slot-thanks-p1">很遗憾</p>
<p class="slot-thanks-p2">你没有刮到奖品</p>
</div>
</template>
</WinPopupNew>
<Records :records-config="recordsConfig"></Records>
</WinPopup>
<Records></Records>
<Introduction class="lottery-instant__intro" rule-position="bottom"></Introduction>
</section>
</template>
......@@ -65,11 +73,10 @@ 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 { recordsConfigScratch, countDownBarBlue, winConfigGashapon2 as winConfigScratch } from './config'
export default {
components: {
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
Introduction: () => import('@/components/Lottery/Instant/Introduction'),
Records: () => import('@/components/Lottery/Instant/Records'),
......@@ -104,10 +111,7 @@ 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, // 引用类型
recordsConfig: recordsConfigScratch, // 中奖记录样式配置
winConfig: winConfigScratch, // 开奖样式
barStyle: countDownBarBlue
stype: this.$route.query.stype || null // 引用类型
}
},
computed: {
......@@ -133,6 +137,9 @@ export default {
return !!+this.winInfo.id
}
},
mounted() {
Bus.$emit('initDeal', '#093c85')
},
methods: {
...mapActions({ jumpToLogin: 'users/jumpToLogin', updateInfo: 'lottery/updateInfo' }),
// 开始抽奖
......@@ -302,6 +309,7 @@ export default {
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction {
padding: 38px 15px;
&__sec-title {
......@@ -319,5 +327,163 @@ export default {
color: #000;
}
}
// 开奖
/deep/ .win-popup {
width: 263px;
height: 309px;
&__container {
width: 100%;
}
&__wrap {
position: relative;
width: 100%;
height: 100%;
background-image: url('@/assets/images/lottery/records-new/bg-blue.png');
}
&__sure {
width: 157px;
height: 49px;
line-height: 49px;
border-radius: 20px;
background: linear-gradient(#fff0cd, #fdbf2c) !important;
.van-button__text {
font-size: 16px;
color: #860300;
font-weight: 600;
text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
}
&__title {
font-size: 14px;
}
&__win-info {
width: 80%;
margin: 0 auto;
background-color: #0000001a;
border-radius: 20px;
margin-top: 15px;
}
&__footer {
width: 100%;
min-height: 80px;
justify-content: flex-start;
}
&__prize-img {
width: 65px;
height: 65px;
background-image: url('@/assets/images/lottery/win-new/prize-bg-blue.png');
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
img {
width: 60%;
}
}
&__prize-name {
margin-bottom: 11px;
font-size: 12px;
}
.slot-title-bg {
text-align: center;
margin-top: 36px;
height: 27px;
img {
height: 100%;
}
}
.slot-thanks {
text-align: center;
&-p1 {
font-size: 18px;
margin-bottom: 10px;
}
}
.van-popup__close-icon {
right: -20px;
top: -10px;
width: 25px;
height: 25px;
font-size: 0;
background-image: url('@/assets/images/lottery/win-new/close-blue.png');
background-size: 100% 100%;
}
}
// countdown
/deep/ .countdown-bar__status {
min-width: 160px;
padding: 0 9px;
border: none;
height: 22.5px !important;
background-color: #2452bb99;
}
// records
/deep/ .records {
&__entry-wrap p {
color: #093c85;
}
&-popup {
width: 258px;
height: 320px;
background-color: transparent;
&__tabs {
padding-top: 0;
}
&__personal-record,
&__winners-record {
padding: 0 30px;
}
&__phone,
&__prize-name,
&__time {
color: #333;
}
}
.van-tabs {
&__wrap {
height: 29px;
}
&__line {
display: none;
}
&__nav--line {
width: 180px;
padding-bottom: 0;
}
&__content {
background-image: url('@/assets/images/lottery/records-new/bg-blue.png');
background-size: 100% 100%;
}
}
.van-tab {
width: 60px;
background: linear-gradient(#f6fbff, #a8d9fb);
border-radius: 12px 12px 0 0;
margin: 0 3px;
span {
color: #90b4dd;
font-weight: 400;
}
&--active {
background: linear-gradient(#feffff, #dff0ff);
span {
color: #4787d1 !important;
}
}
}
.van-popup__close-icon {
display: none;
}
.van-tabs__content .van-tab__pane {
padding: 20px 0;
}
.records-popup__winners-record .records-popup__prize-name {
color: #d92e32;
}
}
}
</style>
components/Lottery/Instant/type/TypeScratchMini.vue
<template>
<section class="lottery-instant">
<div class="lottery-instant__main">
<CountdownBar class="lottery-instant__countdown" :bar-style="barStyle"></CountdownBar>
<CountdownBar 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="" />
......@@ -48,7 +48,20 @@
</div>
</div>
<div class="lottery-instant__intro-entry" @click="changeIsShowIntro">活动介绍</div>
<Records :records-config="recordsConfig"></Records>
<WinPopup :value="isShowWin" :info="winInfo">
<template #title-bg>
<div class="slot-title-bg">
<img src="@/assets/images/lottery/win-new/title-scratch.png" alt="" />
</div>
</template>
<template #thanks>
<div class="slot-thanks">
<p class="slot-thanks-p1">很遗憾</p>
<p class="slot-thanks-p2">你没有刮到奖品</p>
</div>
</template>
</WinPopup>
<Records></Records>
<IntroductionPopup :value="isShowIntro" rule-position="bottom"></IntroductionPopup>
</section>
</template>
......@@ -61,10 +74,10 @@ 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 { recordsConfigScratch, countDownBarBlue } from './config'
export default {
components: {
WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
Records: () => import('@/components/Lottery/Instant/Records'),
IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup'),
......@@ -103,9 +116,7 @@ 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, // 引用类型
recordsConfig: recordsConfigScratch, // 中奖记录样式配置
barStyle: countDownBarBlue
stype: this.$route.query.stype || null // 引用类型
}
},
computed: {
......@@ -131,6 +142,9 @@ export default {
return !!+this.winInfo.id
}
},
mounted() {
Bus.$emit('initDeal', '#093c85')
},
methods: {
...mapActions({ jumpToLogin: 'users/jumpToLogin', updateInfo: 'lottery/updateInfo' }),
// 开始抽奖
......@@ -147,6 +161,9 @@ export default {
duration: 1500
})
Bus.$emit('updateMain', { isLottering: false })
setTimeout(() => {
Bus.$emit('updateMain', { isShowWin: true })
}, 400)
if (this.lotteryInfo.userTimes === 0) {
this.$refs.prizeScratchRef.tryAgain()
this.firstTimeLottering = true
......@@ -318,6 +335,7 @@ export default {
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction-popup {
background: linear-gradient(180deg, #60bdff 0%, #aaeefb 100%);
&__wrap {
......@@ -347,5 +365,162 @@ export default {
color: #000;
}
}
// 开奖
/deep/ .win-popup {
width: 263px;
height: 309px;
&__container {
width: 100%;
}
&__wrap {
position: relative;
width: 100%;
height: 100%;
background-image: url('@/assets/images/lottery/records-new/bg-blue.png');
}
&__sure {
width: 157px;
height: 49px;
line-height: 49px;
border-radius: 20px;
background: linear-gradient(#fff0cd, #fdbf2c) !important;
.van-button__text {
font-size: 16px;
color: #860300;
font-weight: 600;
text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
}
&__title {
font-size: 14px;
}
&__win-info {
width: 80%;
margin: 0 auto;
background-color: #0000001a;
border-radius: 20px;
margin-top: 15px;
}
&__footer {
width: 100%;
min-height: 80px;
justify-content: flex-start;
}
&__prize-img {
width: 65px;
height: 65px;
background-image: url('@/assets/images/lottery/win-new/prize-bg-blue.png');
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
img {
width: 60%;
}
}
&__prize-name {
margin-bottom: 11px;
font-size: 12px;
}
.slot-title-bg {
text-align: center;
margin-top: 36px;
height: 27px;
img {
height: 100%;
}
}
.slot-thanks {
text-align: center;
&-p1 {
font-size: 18px;
margin-bottom: 10px;
}
}
.van-popup__close-icon {
right: -20px;
top: -10px;
width: 25px;
height: 25px;
font-size: 0;
background-image: url('@/assets/images/lottery/win-new/close-blue.png');
background-size: 100% 100%;
}
}
// countdown
/deep/ .countdown-bar__status {
min-width: 160px;
padding: 0 9px;
border: none;
height: 22.5px !important;
background-color: #2452bb99;
}
// records
/deep/ .records {
&__entry-wrap p {
color: #093c85;
}
&-popup {
width: 258px;
height: 320px;
background-color: transparent;
&__tabs {
padding-top: 0;
}
&__personal-record,
&__winners-record {
padding: 0 30px;
}
&__phone,
&__prize-name,
&__time {
color: #333;
}
}
.van-tabs {
&__wrap {
height: 29px;
}
&__line {
display: none;
}
&__nav--line {
width: 180px;
padding-bottom: 0;
}
&__content {
background-image: url('@/assets/images/lottery/records-new/bg-blue.png');
background-size: 100% 100%;
}
}
.van-tab {
width: 60px;
background: linear-gradient(#f6fbff, #a8d9fb);
border-radius: 12px 12px 0 0;
margin: 0 3px;
span {
color: #90b4dd;
font-weight: 400;
}
&--active {
background: linear-gradient(#feffff, #dff0ff);
span {
color: #4787d1 !important;
}
}
}
.van-popup__close-icon {
display: none;
}
.van-tabs__content .van-tab__pane {
padding: 20px 0;
}
.records-popup__winners-record .records-popup__prize-name {
color: #d92e32;
}
}
}
</style>
components/Lottery/Instant/type/config.js
......@@ -20,109 +20,31 @@ import ballGashapon3 from '@/assets/images/lottery/gashapon-ball/phone.png'
import ballGashapon4 from '@/assets/images/lottery/gashapon-ball/gift.png'
import ballGashapon5 from '@/assets/images/lottery/gashapon-ball/egg-red.png'
// 记录样式
import recordsBgPurple from '@/assets/images/lottery/records-new/bg-purple.png'
import personalBgPurple from '@/assets/images/lottery/records-new/personal-purple.png'
import personalBgDisabledPurple from '@/assets/images/lottery/records-new/personal-disabled-purple.png'
import winnersBgPurple from '@/assets/images/lottery/records-new/winners-purple.png'
import winnersBgDisabledPurple from '@/assets/images/lottery/records-new/winners-disabled-purple.png'
import recordsBgBlue from '@/assets/images/lottery/records-new/bg-blue.png'
import personalBgBlue from '@/assets/images/lottery/records-new/personal-blue.png'
import personalBgDisabledBlue from '@/assets/images/lottery/records-new/personal-disabled-blue.png'
import winnersBgBlue from '@/assets/images/lottery/records-new/winners-blue.png'
import winnersBgDisabledBlue from '@/assets/images/lottery/records-new/winners-disabled-blue.png'
// 开奖样式
import winKnow from '@/assets/images/lottery/win-new/know.png'
import winTitleGuess from '@/assets/images/lottery/win-new/title-guess.png'
import winTitleGashapon from '@/assets/images/lottery/win-new/title-gashapon.png'
import winClosePurple from '@/assets/images/lottery/win-new/close-purple.png'
import winPrizeBgPurple from '@/assets/images/lottery/win-new/prize-bg-purple.png'
import winCloseBlue from '@/assets/images/lottery/win-new/close-blue.png'
import winPrizeBgBlue from '@/assets/images/lottery/win-new/prize-bg-blue.png'
const recordsConfigPurple = {
mode: 'new',
textColor: '#6F19D1',
bg: recordsBgPurple,
personalBg: personalBgPurple,
personalBgDisabled: personalBgDisabledPurple,
winnersBg: winnersBgPurple,
winnersBgDisabled: winnersBgDisabledPurple,
closeIcon: winClosePurple,
noDataColor: '#fff',
normalTextColor: '#fff',
prizebindTextColor: '#ffc800'
}
const winConfigPurple = {
winKnow,
bg: recordsBgPurple,
winClose: winClosePurple,
winPrizeBg: winPrizeBgPurple
}
const recordsConfigBlue = {
mode: 'new',
textColor: '#6F4800',
bg: recordsBgBlue,
personalBg: personalBgBlue,
personalBgDisabled: personalBgDisabledBlue,
winnersBg: winnersBgBlue,
winnersBgDisabled: winnersBgDisabledBlue,
closeIcon: winCloseBlue,
noDataColor: '#8fb3dc'
}
const winConfigBlue = {
winKnow,
bg: recordsBgBlue,
winClose: winCloseBlue,
winPrizeBg: winPrizeBgBlue
}
const countDownBarBlue = {
minWidth: '2.13rem',
padding: '0 0.12rem',
border: 'none',
height: '0.3rem !important',
backgroundColor: '#2452bb99'
}
const countDownBarPurple = Object.assign({}, countDownBarBlue, { backgroundColor: '#8350B299' })
const countDownBarWhite = Object.assign({}, countDownBarBlue, { backgroundColor: '#ffffff99', color: '#000' })
const countDownBarDeepPurple = Object.assign({}, countDownBarBlue, { backgroundColor: '#12121233' })
const countDownBarNone = {
backgroundColor: 'transparent',
padding: '0',
border: 'none'
}
/* 猜盲盒 */
const recordsConfigGuess = recordsConfigPurple
const winConfigGuess = Object.assign({}, winConfigPurple, { winTitle: winTitleGuess })
const starConfig = [
{
width: '0.3rem',
height: '0.3rem',
top: "10%",
left: "-30%"
top: '10%',
left: '-30%'
},
{
width: '0.4rem',
height: '0.3rem',
top: "-15%",
left: "-25%"
top: '-15%',
left: '-25%'
},
{
width: '0.6rem',
height: '0.3rem',
top: "-25%",
right: "-25%"
top: '-25%',
right: '-25%'
},
{
width: '0.4rem',
height: '0.3rem',
top: "20%",
right: "-35%"
top: '20%',
right: '-35%'
}
]
......@@ -162,8 +84,6 @@ const blindBoxListGuess2 = [
]
/* 扭蛋机 */
const recordsConfigGashapon = recordsConfigPurple
const winConfigGashapon = Object.assign({}, winConfigPurple, { winTitle: winTitleGashapon })
const ballListGashapon = [
{
img: ballGashapon1,
......@@ -203,36 +123,13 @@ const ballListGashapon = [
}
]
// 扭蛋机1
// 扭蛋机2
const recordsConfigGashapon2 = recordsConfigBlue
const winConfigGashapon2 = Object.assign({}, winConfigBlue, { winTitle: winTitleGashapon })
const recordsConfigScratch = Object.assign({}, recordsConfigBlue, { textColor: '#093C85' })
export {
// 猜盲盒
blindBoxListGuess,
recordsConfigGuess,
winConfigGuess,
// 猜盲盒2
blindBoxListGuess2,
// 扭蛋机
ballListGashapon,
recordsConfigGashapon,
winConfigGashapon,
// 扭蛋机2
recordsConfigGashapon2,
winConfigGashapon2,
// 刮刮乐
recordsConfigScratch,
// countDown
countDownBarBlue,
countDownBarPurple,
countDownBarWhite,
countDownBarNone,
countDownBarDeepPurple,
starConfig
}
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