Skip to content

activities / web-lottery

Go to a project
Commit 6635d7bb by 赖慧粮
Options

合并分支 'dev' 到 'master' 

Publisher 自动合并请求 [ICubsLYSxwcLtSLTU0Qtu]

## chore(release): 1.2.1


------

## feat(optimization): 冗余代码删除 & 代码优化 & bug修复


------

## feat(records): 完善抽奖记录列表及详情 & 改变留言抽奖转跳抽奖记录的方式:由直播间转跳变更为当前页转跳


------

## refactor: 优化活动介绍组件样式逻辑


------

## Merge branch 'feature/lottery_20220419' into feature/lottery_20220322

# Conflicts:
#	components/Lottery/Instant/Main.vue


------

## Merge branch 'feature/lottery_20220322' into test


------

## Merge branch 'test' of gitlab.aodianyun.com:activities/web-lottery into test


------

## feat(cert): remove local cert


------

## feature: 刮刮乐等三种抽奖修改开奖及详情逻辑


------

## 合并分支 'feature/lottery_20220322' 到 'test'

Feature/lottery 20220322



查看合并请求 !30

------

## feature: 优化开奖框样式


------

## 合并分支 'feature/lottery_20220322' 到 'test'

feature: 优化开奖框样式



查看合并请求 !31

------

## feat(timing): 定时抽奖增加中奖弹窗,引导进入中奖详情


------

## Merge branch 'test' of gitlab.aodianyun.com:activities/web-lottery into test


------

## feat(timing): 即时抽奖修复取值报错


------

## feat(timing): 修复中奖弹窗


------

## 合并分支 'test' 到 'dev'

Publisher 自动合并请求 [53xJv8aCdmkV5EZBMoml0]

## 合并分支 'dev' 到 'master'

Publisher 自动合并请求 [znM9lZ_8UMcDYV4Blh7nh]

## feat(cbnclouds): private config


------

## Merge branch 'private/cbnclouds' into test


------

## feat(config): pm2


------

## Merge branch 'private/cbnclouds' into test


------

## fix(source): 修复因nuxt进程重启导致time取当前值最终导致资源引入地址错误的问题,更换为版本号替代时间


------

## chore(release): 1.1.1


------

## 合并分支 'test' 到 'dev'

Publisher 自动合并请求 [JmgfUaPvxgur5RcwC3Cx1]

## 合并分支 'dev' 到 'master'

Publisher 自动合并请求 [47JL_FalRs9CwYzv24cWm]

## chore(release): 1.1.0


------

## feat(report): 集成一键举报功能


------

## Merge branch 'feature/report_1018' into test


------

## feat(style): 更新icon样式


------

## feat(style): 图标适配


------

## auto deploy


------

## 合并分支 'test' 到 'dev'

Publisher 自动合并请求 [HJDQHsPXi3VwAdGrxUSy_]

## 合并分支 'dev' 到 'master'

Publisher 自动合并请求 [pmZFqzhC8u_KMGzkHNxd3]

## feat(mini): 抽奖工具封装 & ui更新 & mini版本


------

## Merge branch 'feature/lottery_0826' into test


------

## feat(lottery): 补充跳转通信 & 补充转盘谢谢参与图片


------

## 合并分支 'test' 到 'dev'

Publisher 自动合并请求 [lRya5NC5IAXXhIY5uLcsq]

## Merge branch 'dev'


------

## feat(mini): 抽奖工具封装 & ui更新 & mini版本


------

## Merge branch 'feature/lottery_0826' into test


------



查看合并请求 !4

------



查看合并请求 !5

------

## chore(release): 1.1.0


------

## feat(report): 集成一键举报功能


------

## Merge branch 'feature/report_1018' into test


------



查看合并请求 !6

------



查看合并请求 !7

------

## 合并分支 'dev' 到 'master'

Publisher 自动合并请求 [-rYVfuSqDLSXUWnUwpZyj]

## fix(main): 修复抽奖mini版九宫格组件实例取值错误的问题


------

## 合并分支 'test' 到 'dev'

Publisher 自动合并请求 [8wkDL14v9huVvOa-feUGe]

## fix(main): 修复抽奖mini版九宫格组件实例取值错误的问题


------



查看合并请求 !8

------



查看合并请求 !9

------

## feat(cbnclouds): private config


------

## Merge branch 'private/cbnclouds' into test


------

## feat(config): pm2


------

## Merge branch 'private/cbnclouds' into test


------

## fix(source): 修复因nuxt进程重启导致time取当前值最终导致资源引入地址错误的问题,更换为版本号替代时间


------



查看合并请求 !10

------

## 合并分支 'test' 到 'dev'

chore(release): 1.1.1



查看合并请求 !11

------



查看合并请求 !12

------

## 合并分支 'dev' 到 'master'

Dev



查看合并请求 !23

------

## chore(release): 1.2.1


------

## 合并分支 'dev' 到 'master'

Publisher 自动合并请求 [HjcKzHJTOsI8kSKRDfaQY]

## fix(api): 网关地址修复


------

## Merge branch 'private/cbnclouds' into test


------

## Merge branch 'test' of gitlab.aodianyun.com:activities/web-lottery into test


------

## feat(sentry): 增加sentry,记录开奖接口日志


------

## chore(release): 1.2.1


------

## auto deploy


------

## 合并分支 'test' 到 'dev'

Publisher 自动合并请求 [H_yixw8lchnJUkOM_QFnY]

## fix(api): 网关地址修复


------

## Merge branch 'private/cbnclouds' into test


------

## Merge branch 'test' of gitlab.aodianyun.com:activities/web-lottery into test


------

## feat(sentry): 增加sentry,记录开奖接口日志


------



查看合并请求 !24

------



查看合并请求 !25

------

## chore(release): 1.2.1


------

## feat(optimization): 冗余代码删除 & 代码优化 & bug修复


------

## feat(records): 完善抽奖记录列表及详情 & 改变留言抽奖转跳抽奖记录的方式:由直播间转跳变更为当前页转跳


------

## Merge branch 'feature/lottery_20220322' into test


------

## Merge branch 'test' of gitlab.aodianyun.com:activities/web-lottery into test


------



查看合并请求 !29

------



查看合并请求 !32
parents 0d0a121d 30907f37
Showing with 2771 additions and 1413 deletions
CHANGELOG.md
...@@ -63,6 +63,18 @@ All notable changes to this project will be documented in this file. See [standa ...@@ -63,6 +63,18 @@ All notable changes to this project will be documented in this file. See [standa
* **api:** 网关地址修复 ([04c3955](https://gitlab.aodianyun.com/activities/web-lottery/commit/04c39556c7e66e0d341ba04ee1679fa7c03c9fc7)) * **api:** 网关地址修复 ([04c3955](https://gitlab.aodianyun.com/activities/web-lottery/commit/04c39556c7e66e0d341ba04ee1679fa7c03c9fc7))
### [1.2.1](https://gitlab.aodianyun.com/activities/web-lottery/compare/v1.1.1...v1.2.1) (2022-03-14)
### Features
* **sentry:** 增加sentry,记录开奖接口日志 ([afbd994](https://gitlab.aodianyun.com/activities/web-lottery/commit/afbd994f9694a1c26598cfe9045460d96ed378c6))
### Bug Fixes
* **api:** 网关地址修复 ([04c3955](https://gitlab.aodianyun.com/activities/web-lottery/commit/04c39556c7e66e0d341ba04ee1679fa7c03c9fc7))
### [1.1.1](https://gitlab.aodianyun.com/activities/web-lottery/compare/v1.1.0...v1.1.1) (2022-01-13) ### [1.1.1](https://gitlab.aodianyun.com/activities/web-lottery/compare/v1.1.0...v1.1.1) (2022-01-13)
......
components/Common/WinnersPopup.vue deleted 100644 → 0
<template>
<van-popup v-model="visible" class="winners-popup" closeable position="left">
<div class="winners-popup__container">
<div class="winners-popup__container__head">中奖名单</div>
<div class="winners-popup__container__content">
<div class="winners-popup__container__content__list">
<div v-for="(item, index) in winnersList" :key="index" class="item">
<span class="item__prize">{{ item.userNick }}获得{{ item.prizeName }}</span>
</div>
<div v-if="winnersList.length === 0" class="winners-popup__container__content__list__no-data">暂无数据</div>
</div>
</div>
</div>
</van-popup>
</template>
<script>
import { getWinnersList } from '@/api/modules/lottery'
export default {
name: 'WinnersPopup',
props: {
value: {
type: Boolean,
default: false
}
},
data() {
return {
winnersList: []
}
},
computed: {
visible: {
get () {
return this.value
},
set (val) {
this.$emit('input', val)
}
}
},
watch: {
visible(nVal) {
if (nVal) {
this.dataInit()
}
}
},
methods: {
dataInit() {
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)
}
})
}
}
}
</script>
<style lang="less" scoped>
@titleHeight: 46px;
.winners-popup {
height: 100%;
width: 300px;
box-shadow: 0 -1px 1px 0px #fff;
/deep/ .van-popup__close-icon {
color: #fc5147;
}
&__container {
background-color: #ff8e5e;
width: 100%;
height: 100%;
padding: 6px;
&__head {
height: @titleHeight;
line-height: @titleHeight;
text-align: center;
font-size: 16px;
font-weight: 600;
color: #fc5147;
background-color: #fcf7d5;
border-radius: 6px 6px 0 0;
}
&__content {
height: calc(100% - @titleHeight);
overflow: auto;
background-color: #fcf7d5;
border-radius: 0 0 6px 6px;
&__list {
font-size: 14px;
color: #f76b5f;
width: 90%;
margin: 0 auto;
padding: 10px 0;
line-height: 18px;
.item {
display: flex;
justify-content: center;
margin-top: 6px;
&:first-child {
margin-top: 0;
}
}
&__no-data {
color: #aaa;
text-align: center;
}
}
}
}
}
</style>
components/Lottery/Instant/CountdownBar.vue
<template> <template>
<section v-if="'startTime' in lotteryInfo" class="countdown-bar"> <section v-if="'startTime' in lotteryInfo" class="countdown-bar">
<div <div class="countdown-bar__status">
class="countdown-bar__status" <template v-if="+status !== LOTTERY_STATUS.end">
:style="barStyle" <div class="countdown-bar__text">{{ LOTTERY_STATUS_TXT[+status].actionLabel }}倒计时：</div>
> <van-count-down millisecond :time="time">
<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" :style="{ color: barStyle.color }">
<template #default="timeData"> <template #default="timeData">
<span v-if="timeData.days" class="time-item"> <span v-if="timeData.days" class="time-item">
{{ timeData.days | limitNum }} {{ timeData.days | limitNum }}
...@@ -27,7 +24,7 @@ ...@@ -27,7 +24,7 @@
</template> </template>
</van-count-down> </van-count-down>
</template> </template>
<div v-if="parseInt(status, 10) === LOTTERY_STATUS.end" class="countdown-bar__end">抽奖已结束</div> <div v-if="+status === LOTTERY_STATUS.end" class="countdown-bar__end">抽奖已结束</div>
</div> </div>
</section> </section>
</template> </template>
...@@ -54,12 +51,6 @@ export default { ...@@ -54,12 +51,6 @@ export default {
return value return value
} }
}, },
props: {
barStyle: {
type: Object,
default: () => ({})
}
},
data() { data() {
return { return {
LOTTERY_STATUS, LOTTERY_STATUS,
......
components/Lottery/Instant/Introduction.vue
<template> <template>
<div class="introduction" :style="introBoxStyle"> <div class="introduction">
<div class="introduction__sec-title" :style="titleStyle">{{ titleText }}</div> <div class="introduction__sec-title">活动介绍</div>
<div class="introduction__wrap" :style="wrapStyle"> <div class="introduction__wrap">
<div class="introduction__content" :style="contentStyle"> <div class="introduction__content">
<p v-if="rule.position === 'top'" class="introduction__intro" :style="rule.style">{{ lotteryInfo.intro }}</p> <p v-if="rulePosition === 'top'" class="introduction__intro">{{ lotteryInfo.intro }}</p>
<template v-if="!!lotteryInfo.isShowPrize"> <template v-if="!!lotteryInfo.isShowPrize">
<div class="introduction__title">本场活动奖品：</div> <div class="introduction__title">本场活动奖品：</div>
<div class="introduction__prize"> <div class="introduction__prize">
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
</ul> </ul>
</div> </div>
</template> </template>
<div v-if="rule.position === 'bottom'" class="introduction__intro" :style="rule.style"> <div v-if="rulePosition === 'bottom'" class="introduction__intro">
<p class="introduction__intro-rule">活动规则</p> <p class="introduction__intro-rule">活动规则</p>
<p>{{ lotteryInfo.intro }}</p> <p>{{ lotteryInfo.intro }}</p>
</div> </div>
...@@ -35,33 +35,10 @@ import img from '@/assets/images/lottery/gift.png' ...@@ -35,33 +35,10 @@ import img from '@/assets/images/lottery/gift.png'
export default { export default {
name: 'Introduction', name: 'Introduction',
props: { props: {
rule: { rulePosition: {
type: Object,
default: () => ({
position: 'top',
style: {}
})
},
titleStyle: {
type: Object,
default: () => ({})
},
titleText: {
type: String, type: String,
default: '' default: 'top'
},
wrapStyle: {
type: Object,
default: () => ({})
}, },
contentStyle: {
type: Object,
default: () => ({})
},
introBoxStyle: {
type: Object,
default: () => ({})
}
}, },
data() { data() {
return { return {
...@@ -91,6 +68,7 @@ export default { ...@@ -91,6 +68,7 @@ export default {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
font-size: 0;
} }
&__wrap { &__wrap {
width: 100%; width: 100%;
......
components/Lottery/Instant/IntroductionPopup.vue
...@@ -5,15 +5,14 @@ ...@@ -5,15 +5,14 @@
position="bottom" position="bottom"
transition="van-fade" transition="van-fade"
class="introduction-popup" class="introduction-popup"
:style="popupStyle"
> >
<div class="introduction-popup__main"> <div class="introduction-popup__main">
<div class="introduction-popup__sec-title" :style="titleStyle">活动介绍</div> <div class="introduction-popup__sec-title">活动介绍</div>
<div class="introduction-popup__wrap" :style="wrapStyle"> <div class="introduction-popup__wrap">
<div class="introduction-popup__content" :style="contentStyle"> <div class="introduction-popup__content">
<p v-if="rule.position === 'top'" class="introduction-popup__intro" :style="rule.style">{{ lotteryInfo.intro }}</p> <p v-if="rulePosition === 'top'" class="introduction-popup__intro">{{ lotteryInfo.intro }}</p>
<template v-if="!!lotteryInfo.isShowPrize"> <template v-if="!!lotteryInfo.isShowPrize">
<div class="introduction-popup__box" :style="contentBoxStyle"> <div class="introduction-popup__box">
<div class="introduction-popup__title">本场活动奖品：</div> <div class="introduction-popup__title">本场活动奖品：</div>
<div class="introduction-popup__prize"> <div class="introduction-popup__prize">
<ul <ul
...@@ -29,13 +28,13 @@ ...@@ -29,13 +28,13 @@
</div> </div>
</div> </div>
</template> </template>
<div v-if="rule.position === 'bottom'" class="introduction-popup__intro" :style="rule.style"> <div v-if="rulePosition === 'bottom'" class="introduction-popup__intro">
<p class="introduction-popup__intro-rule">活动规则</p> <p class="introduction-popup__intro-rule">活动规则</p>
<p>{{ lotteryInfo.intro }}</p> <p>{{ lotteryInfo.intro }}</p>
</div> </div>
</div> </div>
</div> </div>
<div class="introduction-popup__back" :style="backStyle" @click="visible = false">返回活动</div> <div class="introduction-popup__back" @click="visible = false">返回活动</div>
</div> </div>
</van-popup> </van-popup>
</template> </template>
...@@ -52,37 +51,10 @@ export default { ...@@ -52,37 +51,10 @@ export default {
type: Boolean, type: Boolean,
default: false default: false
}, },
rule: { rulePosition: {
type: Object, type: String,
default: () => ({ default: 'top'
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() { data() {
return { return {
......
components/Lottery/Instant/Main.vue
...@@ -150,8 +150,8 @@ ...@@ -150,8 +150,8 @@
</div> </div>
</div> </div>
<Records></Records> <Records></Records>
<Introduction class="lottery-instant__intro" :title-style="wheelIntroductionTitleStyle"></Introduction> <Introduction class="lottery-instant__intro"></Introduction>
<WinPopup v-model="isShowWin" :info="winInfo" @winCallback="winCallback"></WinPopup> <WinPopup v-model="isShowWin" :info="winInfo"></WinPopup>
<BindPhoneDialog v-model="isShowBindPhone"></BindPhoneDialog> <BindPhoneDialog v-model="isShowBindPhone"></BindPhoneDialog>
</section> </section>
</div> </div>
...@@ -162,7 +162,6 @@ import { setLottery } from '@/api/modules/lottery' ...@@ -162,7 +162,6 @@ import { setLottery } from '@/api/modules/lottery'
import { LOTTERY_STATUS, LOTTERY_STATUS_TXT, LOTTERY_STYLE } from '@/utils/constant' import { LOTTERY_STATUS, LOTTERY_STATUS_TXT, LOTTERY_STYLE } from '@/utils/constant'
import { PrizeGrid, PrizeWheel } from 'lotteries' import { PrizeGrid, PrizeWheel } from 'lotteries'
import 'lotteries/lib/index.css' import 'lotteries/lib/index.css'
import wheelIntroductionTitleImg from '@/assets/images/lottery/intro_title.png'
import Bus from '@/utils/Bus' import Bus from '@/utils/Bus'
export default { export default {
...@@ -251,11 +250,6 @@ export default { ...@@ -251,11 +250,6 @@ export default {
} }
return '' return ''
}, },
wheelIntroductionTitleStyle() {
return {
backgroundImage: `url(${wheelIntroductionTitleImg})`
}
}
}, },
mounted() { mounted() {
// this.lotteryInfo.showType = 4 // this.lotteryInfo.showType = 4
...@@ -274,13 +268,26 @@ export default { ...@@ -274,13 +268,26 @@ export default {
}, },
methods: { methods: {
...mapActions({ jumpToLogin: 'users/jumpToLogin', updateInfo: 'lottery/updateInfo' }), ...mapActions({ jumpToLogin: 'users/jumpToLogin', updateInfo: 'lottery/updateInfo' }),
// 中奖后， "我知道了"回调 // 中奖后， 关闭窗口回调
winCallback() { winCloseCallback(){
this.isShowWin = false this.isShowWin = false
if (this.winInfo.id !== 0 && !this.isBindPhone) { if (this.winInfo.id !== 0 && !this.isBindPhone) {
this.isShowBindPhone = true this.isShowBindPhone = true
} }
}, },
// 中奖后， "查看奖品详情"回调
winCallback() {
this.isShowWin = false
if (this.winInfo.id !== 0) {
this.$router.push({
path: '/recordDetail',
query: {
tempId: this.winInfo.tempId,
uin: this.uin
}
})
}
},
// 开始抽奖 // 开始抽奖
startLottery() { startLottery() {
// 抽奖不在活动日期内 // 抽奖不在活动日期内
...@@ -381,11 +388,6 @@ export default { ...@@ -381,11 +388,6 @@ export default {
setTimeout(() => { setTimeout(() => {
this.isShowWin = true this.isShowWin = true
}, 400) }, 400)
},
updateData(data) {
for (const [key, value] of Object.entries(data)) {
this[key] = value
}
} }
} }
} }
......
components/Lottery/Instant/MiniMain.vue
...@@ -119,7 +119,7 @@ ...@@ -119,7 +119,7 @@
<div class="lottery-instant__wheel" :class="{ 'lottery-instant__wheel--no-lightning': !isLottering }"> <div class="lottery-instant__wheel" :class="{ 'lottery-instant__wheel--no-lightning': !isLottering }">
<PrizeWheel <PrizeWheel
ref="prizeWheel" ref="prizeWheel"
:list="formatedPrizeList" :list="formattedPrizeList"
:light-num="16" :light-num="16"
:container-border="24" :container-border="24"
@onEnd="runEnd" @onEnd="runEnd"
...@@ -232,7 +232,7 @@ export default { ...@@ -232,7 +232,7 @@ export default {
prizeList() { prizeList() {
return this.lotteryInfo.prizeConfigs return this.lotteryInfo.prizeConfigs
}, },
formatedPrizeList() { formattedPrizeList() {
const prizeLen = this.lotteryInfo?.prizeConfigs?.length || 0 const prizeLen = this.lotteryInfo?.prizeConfigs?.length || 0
if (prizeLen >= 6 && prizeLen % 2 === 0) { if (prizeLen >= 6 && prizeLen % 2 === 0) {
const freePrizes = new Array(2).fill({ id: 0, name: '谢谢参与' }) const freePrizes = new Array(2).fill({ id: 0, name: '谢谢参与' })
...@@ -256,7 +256,6 @@ export default { ...@@ -256,7 +256,6 @@ export default {
} }
}, },
mounted() { mounted() {
// this.lotteryInfo.showType = 4
Bus.$on('updateMain', data => { Bus.$on('updateMain', data => {
for (const [key, value] of Object.entries(data)) { for (const [key, value] of Object.entries(data)) {
if (key === 'func') { if (key === 'func') {
...@@ -272,13 +271,26 @@ export default { ...@@ -272,13 +271,26 @@ export default {
}, },
methods: { methods: {
...mapActions({ jumpToLogin: 'users/jumpToLogin', updateInfo: 'lottery/updateInfo' }), ...mapActions({ jumpToLogin: 'users/jumpToLogin', updateInfo: 'lottery/updateInfo' }),
// 中奖后， "我知道了"回调 // 中奖后， 关闭窗口回调
winCallback() { winCloseCallback(){
this.isShowWin = false this.isShowWin = false
if (this.winInfo.id !== 0 && !this.isBindPhone) { if (this.winInfo.id !== 0 && !this.isBindPhone) {
this.isShowBindPhone = true this.isShowBindPhone = true
} }
}, },
// 中奖后， "查看奖品详情"回调
winCallback() {
this.isShowWin = false
if (this.winInfo.id !== 0) {
this.$router.push({
path: '/recordDetail',
query: {
tempId: this.winInfo.tempId,
uin: this.uin
}
})
}
},
// 开始抽奖 // 开始抽奖
startLottery() { startLottery() {
// 抽奖不在活动日期内 // 抽奖不在活动日期内
...@@ -380,11 +392,6 @@ export default { ...@@ -380,11 +392,6 @@ export default {
this.isShowWin = true this.isShowWin = true
}, 400) }, 400)
}, },
updateData(data) {
for (const [key, value] of Object.entries(data)) {
this[key] = value
}
}
} }
} }
</script> </script>
......
components/Lottery/Instant/Records.vue
...@@ -20,36 +20,17 @@ ...@@ -20,36 +20,17 @@
:is-show-winners-list="isShowWinnersList" :is-show-winners-list="isShowWinnersList"
@setIsShowRecordsPopup="setIsShowRecordsPopup" @setIsShowRecordsPopup="setIsShowRecordsPopup"
></RecordsPupup> ></RecordsPupup>
<RecordsPupupNew
v-model="pupupNewVisible"
:active-tab="activeTab"
:is-show-winners-list="isShowWinnersList"
:records-config="recordsConfig"
@setIsShowRecordsPopup="setIsShowRecordsPopup"
></RecordsPupupNew>
</div> </div>
</template> </template>
<script> <script>
import { mapGetters, mapActions } from 'vuex' import { mapGetters, mapActions } from 'vuex'
import RecordsPupup from '@/components/Lottery/Instant/RecordsPupup' import RecordsPupup from '@/components/Lottery/Instant/RecordsPupup'
import RecordsPupupNew from '@/components/Lottery/Instant/RecordsPupupNew'
import Bus from '@/utils/Bus'
export default { export default {
name: 'Records', name: 'Records',
components: { components: {
RecordsPupup, RecordsPupup
RecordsPupupNew
},
props: {
recordsConfig: {
type: Object,
default: () => ({
mode: 'old'
})
}
}, },
data() { data() {
return { return {
...@@ -66,28 +47,8 @@ export default { ...@@ -66,28 +47,8 @@ export default {
return !!lotteryInfo.showResult return !!lotteryInfo.showResult
}, },
pupupVisible() { 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() { mounted() {
this.recordsLayouts = this.$refs.recordsLayouts this.recordsLayouts = this.$refs.recordsLayouts
...@@ -122,7 +83,6 @@ export default { ...@@ -122,7 +83,6 @@ export default {
this.body.addEventListener('touchmove', this.recordsScrollOn) this.body.addEventListener('touchmove', this.recordsScrollOn)
}) })
this.body.addEventListener('touchend', () => { this.body.addEventListener('touchend', () => {
this.body.removeEventListener('touchmove', this.recordsScrollOn) this.body.removeEventListener('touchmove', this.recordsScrollOn)
this.recordsScrollOff() this.recordsScrollOff()
}) })
......
components/Lottery/Instant/RecordsPupup.vue
<template> <template>
<van-popup v-model="visible" class="records-popup" closeable swipeable close-icon="close"> <van-popup
v-model="visible"
class="records-popup"
:class="`records-popup--${theme}`"
closeable
swipeable
close-icon="close"
>
<van-tabs v-model="active" class="records-popup__tabs" :line-width="16" @change="onChange"> <van-tabs v-model="active" class="records-popup__tabs" :line-width="16" @change="onChange">
<van-tab title="抽奖记录" name="personal"> <van-tab title="抽奖记录" name="personal">
<div class="records-popup__content">
<div class="records-popup__list-wrapper">
<div class="records-popup__personal-record"> <div class="records-popup__personal-record">
<div class="records-popup__record-content"> <div class="records-popup__record-content">
<div class="records-popup__phone"> <div class="records-popup__phone">
...@@ -27,6 +36,11 @@ ...@@ -27,6 +36,11 @@
<div v-if="Object.keys(recordList).length === 0" class="records-popup__no-data">暂无记录</div> <div v-if="Object.keys(recordList).length === 0" class="records-popup__no-data">暂无记录</div>
</div> </div>
</div> </div>
</div>
<div class="records-popup__jump-detail">
<span @click="jumpDetail">查看奖品详情</span>
</div>
</div>
</van-tab> </van-tab>
<van-tab v-if="isShowWinnersList" title="中奖名单" name="winners"> <van-tab v-if="isShowWinnersList" title="中奖名单" name="winners">
<div class="records-popup__winners-record"> <div class="records-popup__winners-record">
...@@ -50,7 +64,7 @@ import { getLotteryRecordList, getWinnersList } from '@/api/modules/lottery' ...@@ -50,7 +64,7 @@ import { getLotteryRecordList, getWinnersList } from '@/api/modules/lottery'
import { NUMBER_LIST } from '@/utils/constant' import { NUMBER_LIST } from '@/utils/constant'
export default { export default {
name: 'RecordsPupup', name: 'RecordsPopup',
props: { props: {
value: { value: {
type: Boolean, type: Boolean,
...@@ -63,6 +77,10 @@ export default { ...@@ -63,6 +77,10 @@ export default {
activeTab: { activeTab: {
type: String, type: String,
default: 'personal' default: 'personal'
},
theme: {
type: String,
default: 'normal'
} }
}, },
data() { data() {
...@@ -144,6 +162,14 @@ export default { ...@@ -144,6 +162,14 @@ export default {
this.jumpToBinding() this.jumpToBinding()
} }
}) })
},
jumpDetail() {
this.$router.push({
path: '/records',
query: {
uin: this.uin
}
})
} }
} }
} }
...@@ -157,12 +183,39 @@ export default { ...@@ -157,12 +183,39 @@ export default {
border-radius: 15px; border-radius: 15px;
overflow: visible; overflow: visible;
font-size: 12px; font-size: 12px;
/deep/ .van-popup__close-icon { ::v-deep .van-popup__close-icon {
right: -22px; right: -22px;
top: -20px; top: -20px;
font-size: 22px; font-size: 22px;
color: #fff; color: #fff;
} }
// &--blue {
// background: transparent;
// ::v-deep .van-tabs__content {
// background-image: url('~@/assets/images/lottery/records-new/bg-blue.png');
// background-size: 100% 100%;
// background-repeat: no-repeat;
// }
// ::v-deep .van-tab {
// border-radius: 16px 16px 0 0;
// background-image: radial-gradient(at center bottom, #9ed5fc 30%, #fefeff);
// &:first-child{
// margin-right: 6px;
// }
// &__text {
// color: #93b6df;
// }
// &--active {
// background: #fff;
// .van-tab__text {
// color: #4787d2 !important;
// }
// }
// }
// ::v-deep .van-tabs__line {
// display: none;
// }
// }
&__tabs { &__tabs {
padding: 8px 0 0; padding: 8px 0 0;
height: 100%; height: 100%;
...@@ -200,12 +253,32 @@ export default { ...@@ -200,12 +253,32 @@ export default {
} }
} }
} }
&__content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-content: center;
}
&__list-wrapper {
flex: 1;
overflow: hidden;
}
&__personal-record { &__personal-record {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden auto; overflow: hidden auto;
padding: 0 15px; padding: 0 15px;
} }
&__jump-detail {
width: 100%;
height: 18px;
line-height: 18px;
text-align: center;
color: #ff0024;
font-size: 12px;
margin-top: 10px;
}
&__phone { &__phone {
color: #666; color: #666;
margin-bottom: 12px; margin-bottom: 12px;
......
components/Lottery/Instant/RecordsPupupNew.vue deleted 100644 → 0
<template>
<van-popup v-model="visible" class="records-popup" swipeable>
<div class="records-popup__close" :style="closeBg" @click="closePopup"></div>
<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" :style="normalTextColor">
领奖手机号：
<span v-if="isBindPhone" :style="normalTextColor">{{ userInfo.phone }}</span>
<span v-else class="records-popup__bind-phone" :style="prizebindTextColor" @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" :style="normalTextColor">第{{ NUMBER_LIST[index + 1] }}场次</div>
<div class="records-popup__time" :style="normalTextColor">
<span>{{ (item.drawTime * 1000) | formatDate('MM-DD HH:mm:ss') }}</span>
</div>
</div>
<div class="records-popup__prize-name" :style="normalTextColor">{{ item.prizeName }}</div>
</div>
</li>
</ul>
<div v-if="Object.keys(recordList).length === 0" class="records-popup__no-data" :style="noDataColor">暂无记录</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" :style="normalTextColor">
{{ item.userNick }} 获得 <span class="records-popup__prize-name">{{ item.prizeName }}</span>
</div>
<div v-if="winnersList.length === 0" class="records-popup__no-data" :style="noDataColor">暂无数据</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})`
}
},
closeBg() {
return {
backgroundImage: `url(${this.recordsConfig.closeIcon})`
}
},
noDataColor() {
return {
color: this.recordsConfig.noDataColor
}
},
normalTextColor() {
return {
color: this.recordsConfig.normalTextColor
}
},
prizebindTextColor() {
return {
color: this.recordsConfig.prizebindTextColor
}
}
},
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()
},
closePopup() {
this.$emit('setIsShowRecordsPopup', false)
}
}
}
</script>
<style lang="less" scoped>
.records-popup {
top: 48%;
width: 258px;
height: 291px;
background-color: transparent;
border-radius: 15px;
overflow: visible;
font-size: 12px;
&__close {
position: absolute;
right: -8px;
top: 15px;
width: 25px;
height: 25px;
background-size: 100% 100%;
}
&__main {
position: relative;
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 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #999;
text-align: center;
// padding-top: 40px;
}
}
</style>
components/Lottery/Instant/WinPopup.vue
<template> <template>
<van-popup v-model="visible" class="win-popup" closeable close-icon="close" :style="{ background: 'transparent' }"> <van-popup
v-model="visible"
class="win-popup"
closeable
close-icon="close"
:style="{ background: 'transparent' }"
@click-close-icon="onClose"
>
<div class="win-popup__container"> <div class="win-popup__container">
<div class="win-popup__wrap"> <div class="win-popup__wrap">
<div class="win-popup__content"> <div class="win-popup__content">
<slot v-if="isWin" name="title-bg"></slot>
<div v-if="isWin" class="win-popup__win-info"> <div v-if="isWin" class="win-popup__win-info">
<div class="win-popup__title">恭喜获得</div> <div class="win-popup__title">恭喜获得</div>
<div class="win-popup__prize-img"> <div class="win-popup__prize-img">
...@@ -12,15 +20,25 @@ ...@@ -12,15 +20,25 @@
{{ info.name }} {{ info.name }}
</div> </div>
</div> </div>
<div v-else class="win-popup__thanks">谢谢参与，再接再厉</div> <div v-else class="win-popup__thanks">
<slot name="thanks">谢谢参与，再接再厉</slot>
</div>
</div> </div>
<div class="win-popup__footer"> <div class="win-popup__footer">
<template v-if="isWin">
<van-button class="win-popup__sure" color="linear-gradient(to right, #ffde9d, #ffdbb3)" round @click="know" <van-button class="win-popup__sure" color="linear-gradient(to right, #ffde9d, #ffdbb3)" round @click="know"
>我知道了</van-button >查看奖品详情</van-button
> >
<template v-if="isWin">
<p class="win-popup__win-msg">根据活动说明进行领取</p> <p class="win-popup__win-msg">根据活动说明进行领取</p>
</template> </template>
<van-button
v-else
class="win-popup__sure"
color="linear-gradient(to right, #ffde9d, #ffdbb3)"
round
@click="visible = false"
>我知道了</van-button
>
</div> </div>
</div> </div>
</div> </div>
...@@ -59,6 +77,9 @@ export default { ...@@ -59,6 +77,9 @@ export default {
methods: { methods: {
know() { know() {
Bus.$emit('updateMain', { func: 'winCallback' }) Bus.$emit('updateMain', { func: 'winCallback' })
},
onClose() {
Bus.$emit('updateMain', { func: 'winCloseCallback' })
} }
} }
} }
...@@ -101,7 +122,7 @@ export default { ...@@ -101,7 +122,7 @@ export default {
font-size: 16px; font-size: 16px;
flex: 1; flex: 1;
width: 100%; width: 100%;
overflow: hidden overflow: hidden;
} }
&__win-info { &__win-info {
display: flex; display: flex;
......
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="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
<template> <template>
<section class="lottery-instant"> <section class="lottery-instant">
<div class="lottery-instant__main"> <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="lottery-instant__layout-gashapon">
<div class="content-main"> <div class="content-main">
<PrizeGashapon ref="prizeGashaponRef" :ball-list-gashapon="ballListGashapon" @endCallBack="endCallBack" /> <PrizeGashapon ref="prizeGashaponRef" :ball-list-gashapon="ballListGashapon" @endCallBack="endCallBack" />
...@@ -20,22 +20,22 @@ ...@@ -20,22 +20,22 @@
</div> </div>
</div> </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> <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> </template>
</WinPopupNew> </WinPopup>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog> <BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records> <Records></Records>
<Introduction <Introduction class="lottery-instant__intro" rule-position="bottom"></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> </section>
</template> </template>
...@@ -46,18 +46,12 @@ import onStartDidabledImg from '@/assets/images/lottery/gashapon/on-start-disabl ...@@ -46,18 +46,12 @@ import onStartDidabledImg from '@/assets/images/lottery/gashapon/on-start-disabl
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { LOTTERY_STATUS } from '@/utils/constant' import { LOTTERY_STATUS } from '@/utils/constant'
import Bus from '@/utils/Bus' import Bus from '@/utils/Bus'
import { import { ballListGashapon } from './config'
introductionConfigGashapon,
winConfigGashapon,
recordsConfigGashapon,
ballListGashapon,
countDownBarPurple
} from './config'
export default { export default {
components: { components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'), CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'), WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'), BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Introduction: () => import('@/components/Lottery/Instant/Introduction'), Introduction: () => import('@/components/Lottery/Instant/Introduction'),
Records: () => import('@/components/Lottery/Instant/Records'), Records: () => import('@/components/Lottery/Instant/Records'),
...@@ -91,10 +85,6 @@ export default { ...@@ -91,10 +85,6 @@ export default {
playId: this.$route.query.sessionId || null, // 场次id playId: this.$route.query.sessionId || null, // 场次id
sid: this.$route.query.sid || null, // 引用id sid: this.$route.query.sid || null, // 引用id
stype: this.$route.query.stype || null, // 引用类型 stype: this.$route.query.stype || null, // 引用类型
recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
winConfig: winConfigGashapon, // 开奖样式
introConfig: introductionConfigGashapon,
barStyle: countDownBarPurple,
ballListGashapon // 扭蛋球图片 ballListGashapon // 扭蛋球图片
} }
}, },
...@@ -128,6 +118,9 @@ export default { ...@@ -128,6 +118,9 @@ export default {
} }
} }
}, },
mounted() {
Bus.$emit('initDeal', '#6f19d1')
},
methods: { methods: {
startLottery() { startLottery() {
Bus.$emit('updateMain', { func: 'startLottery' }) Bus.$emit('updateMain', { func: 'startLottery' })
...@@ -138,7 +131,8 @@ export default { ...@@ -138,7 +131,8 @@ export default {
endCallBack() { endCallBack() {
Bus.$emit('updateMain', { func: 'runEnd' }) Bus.$emit('updateMain', { func: 'runEnd' })
} }
} },
} }
</script> </script>
...@@ -220,4 +214,196 @@ export default { ...@@ -220,4 +214,196 @@ export default {
white-space: nowrap; white-space: nowrap;
} }
} }
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction {
background-color: #7826a9;
padding: 8px 15px 30px 15px;
border-radius: 0;
&__sec-title {
background-image: none;
font-size: 16px;
font-weight: 700;
text-align: center;
width: 22%;
height: auto;
padding: 4px 0;
left: 50%;
color: #fff;
transform: translate(-50%, 50%);
background-color: #ffffff63;
border-radius: 2px;
}
&__wrap {
background-color: #7826a9;
padding: 2px;
}
&__content {
background: #7826a9;
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> </style>
components/Lottery/Instant/type/TypeGashapon2.vue
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
</div> </div>
<div class="lottery-instant__main"> <div class="lottery-instant__main">
<div class="lottery-instant__countdown"> <div class="lottery-instant__countdown">
<CountdownBar :bar-style="barStyle"></CountdownBar> <CountdownBar></CountdownBar>
</div> </div>
<div class="lottery-instant__layout-gashapon"> <div class="lottery-instant__layout-gashapon">
<div class="content-main"> <div class="content-main">
...@@ -22,22 +22,22 @@ ...@@ -22,22 +22,22 @@
</div> </div>
</div> </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> <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> </template>
</WinPopupNew> </WinPopup>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog> <BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records> <Records></Records>
<Introduction <Introduction class="lottery-instant__intro" rule-position="bottom"></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> </section>
</template> </template>
...@@ -48,18 +48,12 @@ import onStartDidabledImg from '@/assets/images/lottery/gashapon2/on-start-disab ...@@ -48,18 +48,12 @@ import onStartDidabledImg from '@/assets/images/lottery/gashapon2/on-start-disab
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { LOTTERY_STATUS } from '@/utils/constant' import { LOTTERY_STATUS } from '@/utils/constant'
import Bus from '@/utils/Bus' import Bus from '@/utils/Bus'
import { import { ballListGashapon } from './config'
introductionConfigGashapon2 as introductionConfigGashapon,
winConfigGashapon2 as winConfigGashapon,
recordsConfigGashapon2 as recordsConfigGashapon,
ballListGashapon,
countDownBarNone
} from './config'
export default { export default {
components: { components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'), CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'), WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'), BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Introduction: () => import('@/components/Lottery/Instant/Introduction'), Introduction: () => import('@/components/Lottery/Instant/Introduction'),
Records: () => import('@/components/Lottery/Instant/Records'), Records: () => import('@/components/Lottery/Instant/Records'),
...@@ -93,10 +87,6 @@ export default { ...@@ -93,10 +87,6 @@ export default {
playId: this.$route.query.sessionId || null, // 场次id playId: this.$route.query.sessionId || null, // 场次id
sid: this.$route.query.sid || null, // 引用id sid: this.$route.query.sid || null, // 引用id
stype: this.$route.query.stype || null, // 引用类型 stype: this.$route.query.stype || null, // 引用类型
recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
winConfig: winConfigGashapon, // 开奖样式
introConfig: introductionConfigGashapon,
barStyle: countDownBarNone,
ballListGashapon // 扭蛋球图片 ballListGashapon // 扭蛋球图片
} }
}, },
...@@ -120,6 +110,9 @@ export default { ...@@ -120,6 +110,9 @@ export default {
return onStartImg return onStartImg
} }
}, },
mounted() {
Bus.$emit('initDeal', '#6f4800')
},
methods: { methods: {
startLottery() { startLottery() {
Bus.$emit('updateMain', { func: 'startLottery' }) Bus.$emit('updateMain', { func: 'startLottery' })
...@@ -218,4 +211,193 @@ export default { ...@@ -218,4 +211,193 @@ export default {
} }
} }
} }
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction {
background-color: #ffbd33;
padding: 75px 11px 8px 11px;
border-radius: 0;
&__sec-title {
background-image: url('@/assets/images/lottery/gashapon2/intro-wrap-title.png');
width: 95%;
padding: 4px 0;
color: #fff;
font-size: 18px;
text-align: center;
line-height: 2;
top: -7%;
left: 50%;
transform: translate(-50%, 50%);
}
&__wrap {
background-image: url('@/assets/images/lottery/gashapon2/intro-wrap-bg.png');
background-size: 100% 100%;
padding: 15px 18px 25px 18px;
background-color: transparent;
}
&__content {
background: #fff9e9;
border-radius: 2px;
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> </style>
components/Lottery/Instant/type/TypeGashaponMini.vue
<template> <template>
<section class="lottery-instant"> <section class="lottery-instant">
<div class="lottery-instant__main"> <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="lottery-instant__layout-gashapon">
<div class="content-main"> <div class="content-main">
<PrizeGashapon ref="prizeGashaponRef" :ball-list-gashapon="ballListGashapon" @endCallBack="endCallBack" /> <PrizeGashapon ref="prizeGashaponRef" :ball-list-gashapon="ballListGashapon" @endCallBack="endCallBack" />
...@@ -21,22 +21,22 @@ ...@@ -21,22 +21,22 @@
</div> </div>
</div> </div>
<div class="lottery-instant__intro-entry" @click="changeIsShowIntro">活动介绍</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> <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> </template>
</WinPopupNew> </WinPopup>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog> <BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records> <Records></Records>
<IntroductionPopup <IntroductionPopup :value="isShowIntro" rule-position="bottom"></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> </section>
</template> </template>
...@@ -47,18 +47,12 @@ import onStartDidabledImg from '@/assets/images/lottery/gashapon/on-start-disabl ...@@ -47,18 +47,12 @@ import onStartDidabledImg from '@/assets/images/lottery/gashapon/on-start-disabl
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { LOTTERY_STATUS } from '@/utils/constant' import { LOTTERY_STATUS } from '@/utils/constant'
import Bus from '@/utils/Bus' import Bus from '@/utils/Bus'
import { import { ballListGashapon } from './config'
introductionConfigGashaponMini,
winConfigGashapon,
recordsConfigGashapon,
ballListGashapon,
countDownBarPurple
} from './config'
export default { export default {
components: { components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'), CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'), WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'), BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Records: () => import('@/components/Lottery/Instant/Records'), Records: () => import('@/components/Lottery/Instant/Records'),
IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup'), IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup'),
...@@ -96,10 +90,6 @@ export default { ...@@ -96,10 +90,6 @@ export default {
playId: this.$route.query.sessionId || null, // 场次id playId: this.$route.query.sessionId || null, // 场次id
sid: this.$route.query.sid || null, // 引用id sid: this.$route.query.sid || null, // 引用id
stype: this.$route.query.stype || null, // 引用类型 stype: this.$route.query.stype || null, // 引用类型
recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
winConfig: winConfigGashapon, // 开奖样式
introConfig: introductionConfigGashaponMini,
barStyle: countDownBarPurple,
ballListGashapon // 扭蛋球图片 ballListGashapon // 扭蛋球图片
} }
}, },
...@@ -133,6 +123,9 @@ export default { ...@@ -133,6 +123,9 @@ export default {
} }
} }
}, },
mounted() {
Bus.$emit('initDeal', '#6f19d1')
},
methods: { methods: {
startLottery() { startLottery() {
Bus.$emit('updateMain', { func: 'startLottery' }) Bus.$emit('updateMain', { func: 'startLottery' })
...@@ -239,4 +232,199 @@ export default { ...@@ -239,4 +232,199 @@ export default {
border-radius: 10px 0 0 10px; border-radius: 10px 0 0 10px;
} }
} }
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction-popup {
background: url('@/assets/images/lottery/guess/intro-bg-mini.png');
&__wrap {
background-color: transparent;
padding: 2px;
}
&__content {
background-color: transparent;
color: #fff;
padding: 0;
}
&__box {
background-color: #00000030;
padding: 1px 15px 15px 15px;
border-radius: 22px;
}
&__back {
top: 10px;
right: 0;
background: linear-gradient(180deg, #ffd63e 0%, #fca60d 100%);
box-shadow: 0 1px 2px 0 rgba(202, 146, 46, 1);
border-radius: 10px 0 0 10px;
padding: 6px 3px;
border: 0;
}
&__intro {
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> </style>
components/Lottery/Instant/type/TypeGashaponMini2.vue
<template> <template>
<section class="lottery-instant"> <section class="lottery-instant">
<div class="lottery-instant__countdown"> <div class="lottery-instant__countdown">
<CountdownBar :bar-style="barStyle"></CountdownBar> <CountdownBar></CountdownBar>
</div> </div>
<div class="lottery-instant__main"> <div class="lottery-instant__main">
<div class="lottery-instant__layout-gashapon"> <div class="lottery-instant__layout-gashapon">
...@@ -20,22 +20,22 @@ ...@@ -20,22 +20,22 @@
</div> </div>
</div> </div>
<div class="lottery-instant__intro-entry" @click="changeIsShowIntro">活动介绍</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> <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> </template>
</WinPopupNew> </WinPopup>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog> <BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records> <Records></Records>
<IntroductionPopup <IntroductionPopup :value="isShowIntro" rule-position="bottom"></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> </section>
</template> </template>
...@@ -46,22 +46,16 @@ import onStartDidabledImg from '@/assets/images/lottery/gashapon2/on-start-disab ...@@ -46,22 +46,16 @@ import onStartDidabledImg from '@/assets/images/lottery/gashapon2/on-start-disab
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { LOTTERY_STATUS } from '@/utils/constant' import { LOTTERY_STATUS } from '@/utils/constant'
import Bus from '@/utils/Bus' import Bus from '@/utils/Bus'
import { import { ballListGashapon } from './config'
introductionConfigGashaponMini2 as introductionConfigGashaponMini,
winConfigGashapon2 as winConfigGashapon,
recordsConfigGashapon2 as recordsConfigGashapon,
ballListGashapon,
countDownBarWhite
} from './config'
export default { export default {
components: { components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'), CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'), WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'), BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Records: () => import('@/components/Lottery/Instant/Records'), Records: () => import('@/components/Lottery/Instant/Records'),
IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup'), IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup'),
PrizeGashapon, PrizeGashapon
}, },
props: { props: {
winInfo: { winInfo: {
...@@ -95,10 +89,6 @@ export default { ...@@ -95,10 +89,6 @@ export default {
playId: this.$route.query.sessionId || null, // 场次id playId: this.$route.query.sessionId || null, // 场次id
sid: this.$route.query.sid || null, // 引用id sid: this.$route.query.sid || null, // 引用id
stype: this.$route.query.stype || null, // 引用类型 stype: this.$route.query.stype || null, // 引用类型
recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
winConfig: winConfigGashapon, // 开奖样式
introConfig: introductionConfigGashaponMini,
barStyle: countDownBarWhite,
ballListGashapon // 扭蛋球图片 ballListGashapon // 扭蛋球图片
} }
}, },
...@@ -122,6 +112,9 @@ export default { ...@@ -122,6 +112,9 @@ export default {
return onStartImg return onStartImg
} }
}, },
mounted() {
Bus.$emit('initDeal', '#6f4800')
},
methods: { methods: {
startLottery() { startLottery() {
Bus.$emit('updateMain', { func: 'startLottery' }) Bus.$emit('updateMain', { func: 'startLottery' })
...@@ -221,4 +214,199 @@ export default { ...@@ -221,4 +214,199 @@ export default {
border-radius: 10px 0 0 10px; border-radius: 10px 0 0 10px;
} }
} }
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction-popup {
background: url('@/assets/images/lottery/gashapon2/intro-bg-mini.png');
&__wrap {
background-color: transparent;
padding: 2px;
}
&__content {
background-color: transparent;
color: #fff;
padding: 0;
}
&__box {
background-color: #00000030;
padding: 1px 15px 15px 15px;
border-radius: 22px;
}
&__back {
top: 10px;
right: 0;
background: linear-gradient(180deg, #ffd63e 0%, #fca60d 100%);
box-shadow: 0 1px 2px 0 rgba(202, 146, 46, 1);
border-radius: 10px 0 0 10px;
padding: 6px 3px;
border: 0;
}
&__intro {
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> </style>
components/Lottery/Instant/type/TypeGuess.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<section class="lottery-instant"> <section class="lottery-instant">
<div class="lottery-instant__main"> <div class="lottery-instant__main">
<img class="lottery-instant__title" src="@/assets/images/lottery/guess/game-title.png" /> <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="lottery-instant__layout-guess">
<div class="content-img"> <div class="content-img">
<div v-for="(item, index) in starConfig" :key="index" class="content-img--star" :style="item"> <div v-for="(item, index) in starConfig" :key="index" class="content-img--star" :style="item">
...@@ -27,22 +27,22 @@ ...@@ -27,22 +27,22 @@
</div> </div>
</div> </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> <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> </template>
</WinPopupNew> </WinPopup>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog> <BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records> <Records></Records>
<Introduction <Introduction class="lottery-instant__intro" rule-position="bottom"></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> </section>
</template> </template>
...@@ -50,20 +50,13 @@ ...@@ -50,20 +50,13 @@
import { PrizeGuess } from 'lotteries' import { PrizeGuess } from 'lotteries'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import Bus from '@/utils/Bus' import Bus from '@/utils/Bus'
import { import { blindBoxListGuess, starConfig } from './config'
blindBoxListGuess,
recordsConfigGuess,
winConfigGuess,
introductionConfigGuess,
countDownBarDeepPurple,
starConfig
} from './config'
export default { export default {
components: { components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'), CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
PrizeGuess, PrizeGuess,
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'), WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'), BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Introduction: () => import('@/components/Lottery/Instant/Introduction'), Introduction: () => import('@/components/Lottery/Instant/Introduction'),
Records: () => import('@/components/Lottery/Instant/Records') Records: () => import('@/components/Lottery/Instant/Records')
...@@ -99,10 +92,6 @@ export default { ...@@ -99,10 +92,6 @@ export default {
chooseIndex: 0, chooseIndex: 0,
timer: null, timer: null,
blindBoxList: blindBoxListGuess, blindBoxList: blindBoxListGuess,
recordsConfig: recordsConfigGuess, // 中奖记录样式配置
winConfig: winConfigGuess, // 开奖样式
introConfig: introductionConfigGuess,
barStyle: countDownBarDeepPurple,
starConfig starConfig
} }
}, },
...@@ -116,6 +105,7 @@ export default { ...@@ -116,6 +105,7 @@ export default {
}, },
mounted() { mounted() {
this.startChooseScroll() this.startChooseScroll()
Bus.$emit('initDeal', '#6f19d1')
}, },
beforeDestroy() { beforeDestroy() {
this.endChooseScroll() this.endChooseScroll()
...@@ -141,7 +131,9 @@ export default { ...@@ -141,7 +131,9 @@ export default {
Bus.$emit('updateMain', { func: 'startLottery' }) Bus.$emit('updateMain', { func: 'startLottery' })
}, },
drawAnimation() { drawAnimation() {
setTimeout(() => {
Bus.$emit('updateMain', { func: 'runEnd' }) Bus.$emit('updateMain', { func: 'runEnd' })
}, 0)
} }
} }
} }
...@@ -251,4 +243,190 @@ export default { ...@@ -251,4 +243,190 @@ export default {
opacity: 0; opacity: 0;
top: 0 !important; top: 0 !important;
} }
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction {
background: linear-gradient(180deg, #682ca1 0%, #a649d8 100%);
padding: 30px 15px;
border-radius: 0;
&__sec-title {
background-image: none;
font-size: 16px;
font-weight: 700;
text-align: center;
color: #fff;
padding-top: 8px;
}
&__wrap {
background-color: #7f17e3;
padding: 2px;
}
&__content {
background: linear-gradient(180deg, #7b07c5 0%, #450393 100%);
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> </style>
components/Lottery/Instant/type/TypeGuess2.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<section class="lottery-instant"> <section class="lottery-instant">
<div class="lottery-instant__main"> <div class="lottery-instant__main">
<img class="lottery-instant__title" src="@/assets/images/lottery/guess/game-title.png" /> <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="lottery-instant__layout-guess">
<div class="content-img"> <div class="content-img">
<div v-for="(item, index) in starConfig" :key="index" class="content-img--star" :style="item"> <div v-for="(item, index) in starConfig" :key="index" class="content-img--star" :style="item">
...@@ -27,22 +27,22 @@ ...@@ -27,22 +27,22 @@
</div> </div>
</div> </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> <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> </template>
</WinPopupNew> </WinPopup>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog> <BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records> <Records></Records>
<Introduction <Introduction class="lottery-instant__intro" rule-position="bottom"></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> </section>
</template> </template>
...@@ -50,20 +50,13 @@ ...@@ -50,20 +50,13 @@
import { PrizeGuess } from 'lotteries' import { PrizeGuess } from 'lotteries'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import Bus from '@/utils/Bus' import Bus from '@/utils/Bus'
import { import { blindBoxListGuess2, starConfig } from './config'
blindBoxListGuess2,
recordsConfigGuess,
winConfigGuess,
introductionConfigGuess2 as introductionConfigGuess,
countDownBarDeepPurple,
starConfig
} from './config'
export default { export default {
components: { components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'), CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
PrizeGuess, PrizeGuess,
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'), WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'), BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Introduction: () => import('@/components/Lottery/Instant/Introduction'), Introduction: () => import('@/components/Lottery/Instant/Introduction'),
Records: () => import('@/components/Lottery/Instant/Records') Records: () => import('@/components/Lottery/Instant/Records')
...@@ -99,10 +92,6 @@ export default { ...@@ -99,10 +92,6 @@ export default {
chooseIndex: 0, chooseIndex: 0,
timer: null, timer: null,
blindBoxList: blindBoxListGuess2, blindBoxList: blindBoxListGuess2,
recordsConfig: recordsConfigGuess, // 中奖记录样式配置
winConfig: winConfigGuess, // 开奖样式
introConfig: introductionConfigGuess,
barStyle: countDownBarDeepPurple,
starConfig starConfig
} }
}, },
...@@ -114,6 +103,9 @@ export default { ...@@ -114,6 +103,9 @@ export default {
isBindPhone: 'users/isBindPhone' isBindPhone: 'users/isBindPhone'
}) })
}, },
mounted() {
Bus.$emit('initDeal', '#6f19d1')
},
// mounted() { // mounted() {
// this.startChooseScroll() // this.startChooseScroll()
// }, // },
...@@ -141,7 +133,9 @@ export default { ...@@ -141,7 +133,9 @@ export default {
Bus.$emit('updateMain', { func: 'startLottery' }) Bus.$emit('updateMain', { func: 'startLottery' })
}, },
drawAnimation() { drawAnimation() {
setTimeout(() => {
Bus.$emit('updateMain', { func: 'runEnd' }) Bus.$emit('updateMain', { func: 'runEnd' })
}, 0)
} }
} }
} }
...@@ -249,4 +243,192 @@ export default { ...@@ -249,4 +243,192 @@ export default {
.choose-fade-leave-to { .choose-fade-leave-to {
opacity: 0; opacity: 0;
} }
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction {
background: linear-gradient(180deg, #682ca1 0%, #a649d8 100%);
padding: 30px 15px;
border-radius: 0;
&__sec-title {
width: 97px;
height: 20px;
left: 50%;
transform: translate(-50%, 12px);
font-size: 0;
font-weight: 700;
text-align: center;
color: #fff;
background-image: url('@/assets/images/lottery/guess2/intro-title.png');
background-size: 100% 100%;
}
&__wrap {
background-color: #7f17e3;
padding: 2px;
}
&__content {
background: linear-gradient(180deg, #7b07c5 0%, #450393 100%);
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> </style>
components/Lottery/Instant/type/TypeGuessMini.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<section class="lottery-instant"> <section class="lottery-instant">
<div class="lottery-instant__main"> <div class="lottery-instant__main">
<img class="lottery-instant__title" src="@/assets/images/lottery/guess/game-title.png" /> <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="lottery-instant__layout-guess">
<div class="content-img"> <div class="content-img">
<div v-for="(item, index) in starConfig" :key="index" class="content-img--star" :style="item"> <div v-for="(item, index) in starConfig" :key="index" class="content-img--star" :style="item">
...@@ -28,22 +28,22 @@ ...@@ -28,22 +28,22 @@
</div> </div>
</div> </div>
<div class="lottery-instant__intro-entry" @click="changeIsShowIntro">活动介绍</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> <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> </template>
</WinPopupNew> </WinPopup>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog> <BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records> <Records></Records>
<IntroductionPopup <IntroductionPopup :value="isShowIntro" rule-position="bottom"></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> </section>
</template> </template>
...@@ -51,20 +51,13 @@ ...@@ -51,20 +51,13 @@
import { PrizeGuess } from 'lotteries' import { PrizeGuess } from 'lotteries'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import Bus from '@/utils/Bus' import Bus from '@/utils/Bus'
import { import { blindBoxListGuess, starConfig } from './config'
blindBoxListGuess,
recordsConfigGuess,
winConfigGuess,
introductionConfigGuessMini,
countDownBarDeepPurple,
starConfig
} from './config'
export default { export default {
components: { components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'), CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
PrizeGuess, PrizeGuess,
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'), WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'), BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Records: () => import('@/components/Lottery/Instant/Records'), Records: () => import('@/components/Lottery/Instant/Records'),
IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup') IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup')
...@@ -104,10 +97,6 @@ export default { ...@@ -104,10 +97,6 @@ export default {
chooseIndex: 0, chooseIndex: 0,
timer: null, timer: null,
blindBoxList: blindBoxListGuess, blindBoxList: blindBoxListGuess,
recordsConfig: recordsConfigGuess, // 中奖记录样式配置
winConfig: winConfigGuess, // 开奖样式
introConfig: introductionConfigGuessMini,
barStyle: countDownBarDeepPurple,
starConfig starConfig
} }
}, },
...@@ -121,6 +110,7 @@ export default { ...@@ -121,6 +110,7 @@ export default {
}, },
mounted() { mounted() {
this.startChooseScroll() this.startChooseScroll()
Bus.$emit('initDeal', '#6f19d1')
}, },
beforeDestroy() { beforeDestroy() {
this.endChooseScroll() this.endChooseScroll()
...@@ -146,7 +136,9 @@ export default { ...@@ -146,7 +136,9 @@ export default {
Bus.$emit('updateMain', { func: 'startLottery' }) Bus.$emit('updateMain', { func: 'startLottery' })
}, },
drawAnimation() { drawAnimation() {
setTimeout(() => {
Bus.$emit('updateMain', { func: 'runEnd' }) Bus.$emit('updateMain', { func: 'runEnd' })
}, 0)
}, },
changeIsShowIntro() { changeIsShowIntro() {
Bus.$emit('updateMain', { isShowIntro: true }) Bus.$emit('updateMain', { isShowIntro: true })
...@@ -274,4 +266,197 @@ export default { ...@@ -274,4 +266,197 @@ export default {
opacity: 0; opacity: 0;
top: 0 !important; top: 0 !important;
} }
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction-popup {
background: url('@/assets/images/lottery/guess/intro-bg-mini.png');
&__wrap {
background-color: transparent;
padding: 2px;
}
&__content {
background-color: transparent;
color: #fff;
padding: 0;
}
&__box {
background-color: #00000030;
padding: 1px 15px 15px 15px;
border-radius: 22px;
}
&__back {
top: 10px;
right: 0;
background: linear-gradient(180deg, #ffd63e 0%, #fca60d 100%);
box-shadow: 0 1px 2px 0 rgba(202, 146, 46, 1);
border-radius: 10px 0 0 10px;
padding: 6px 3px;
border: 0;
}
&__intro {
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> </style>
components/Lottery/Instant/type/TypeGuessMini2.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<section class="lottery-instant"> <section class="lottery-instant">
<div class="lottery-instant__main"> <div class="lottery-instant__main">
<img class="lottery-instant__title" src="@/assets/images/lottery/guess/game-title.png" /> <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="lottery-instant__layout-guess">
<div class="content-img"> <div class="content-img">
<div v-for="(item, index) in starConfig" :key="index" class="content-img--star" :style="item"> <div v-for="(item, index) in starConfig" :key="index" class="content-img--star" :style="item">
...@@ -28,22 +28,22 @@ ...@@ -28,22 +28,22 @@
</div> </div>
</div> </div>
<div class="lottery-instant__intro-entry" @click="changeIsShowIntro">活动介绍</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> <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> </template>
</WinPopupNew> </WinPopup>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog> <BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
<Records :records-config="recordsConfig"></Records> <Records></Records>
<IntroductionPopup <IntroductionPopup :value="isShowIntro" rule-position="bottom"></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> </section>
</template> </template>
...@@ -51,20 +51,13 @@ ...@@ -51,20 +51,13 @@
import { PrizeGuess } from 'lotteries' import { PrizeGuess } from 'lotteries'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import Bus from '@/utils/Bus' import Bus from '@/utils/Bus'
import { import { blindBoxListGuess2 as blindBoxListGuess, starConfig } from './config'
blindBoxListGuess2 as blindBoxListGuess,
recordsConfigGuess,
winConfigGuess,
introductionConfigGuessMini,
countDownBarDeepPurple,
starConfig
} from './config'
export default { export default {
components: { components: {
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'), CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
PrizeGuess, PrizeGuess,
WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'), WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'), BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Records: () => import('@/components/Lottery/Instant/Records'), Records: () => import('@/components/Lottery/Instant/Records'),
IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup') IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup')
...@@ -104,10 +97,6 @@ export default { ...@@ -104,10 +97,6 @@ export default {
chooseIndex: 0, chooseIndex: 0,
timer: null, timer: null,
blindBoxList: blindBoxListGuess, blindBoxList: blindBoxListGuess,
recordsConfig: recordsConfigGuess, // 中奖记录样式配置
winConfig: winConfigGuess, // 开奖样式
introConfig: introductionConfigGuessMini,
barStyle: countDownBarDeepPurple,
starConfig starConfig
} }
}, },
...@@ -119,6 +108,9 @@ export default { ...@@ -119,6 +108,9 @@ export default {
isBindPhone: 'users/isBindPhone' isBindPhone: 'users/isBindPhone'
}) })
}, },
mounted() {
Bus.$emit('initDeal', '#6f19d1')
},
// mounted() { // mounted() {
// this.startChooseScroll() // this.startChooseScroll()
// }, // },
...@@ -149,7 +141,9 @@ export default { ...@@ -149,7 +141,9 @@ export default {
Bus.$emit('updateMain', { func: 'runEnd' }) Bus.$emit('updateMain', { func: 'runEnd' })
}, },
changeIsShowIntro() { changeIsShowIntro() {
Bus.$emit('updateMain', { isShowIntro: true }) setTimeout(() => {
Bus.$emit('updateMain', { func: 'runEnd' })
}, 0)
} }
} }
} }
...@@ -272,4 +266,198 @@ export default { ...@@ -272,4 +266,198 @@ export default {
.choose-fade-leave-to { .choose-fade-leave-to {
opacity: 0; opacity: 0;
} }
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction-popup {
background: url('@/assets/images/lottery/guess/intro-bg-mini.png');
&__wrap {
background-color: transparent;
padding: 2px;
}
&__content {
background-color: transparent;
color: #fff;
padding: 0;
}
&__box {
background-color: #00000030;
padding: 1px 15px 15px 15px;
border-radius: 22px;
}
&__back {
top: 10px;
right: 0;
background: linear-gradient(180deg, #ffd63e 0%, #fca60d 100%);
box-shadow: 0 1px 2px 0 rgba(202, 146, 46, 1);
border-radius: 10px 0 0 10px;
padding: 6px 3px;
border: 0;
}
&__intro {
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> </style>
components/Lottery/Instant/type/TypeScratch.vue
<template> <template>
<section class="lottery-instant"> <section class="lottery-instant">
<div class="lottery-instant__main"> <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__layout-scratch">
<div class="lottery-instant__content-scratch"> <div class="lottery-instant__content-scratch">
<img class="content-title" src="@/assets/images/lottery/scratch/game-title.png" alt="" /> <img class="content-title" src="@/assets/images/lottery/scratch/game-title.png" alt="" />
...@@ -47,15 +47,21 @@ ...@@ -47,15 +47,21 @@
</div> </div>
</div> </div>
</div> </div>
<Records :records-config="recordsConfig"></Records> <WinPopup :value="isShowWin" :info="winInfo">
<Introduction <template #title-bg>
class="lottery-instant__intro" <div class="slot-title-bg">
:rule="introConfig.rule" <img src="@/assets/images/lottery/win-new/title-scratch.png" alt="" />
:title-style="introConfig.introTitleStyle" </div>
:wrap-style="introConfig.introWrapStyle" </template>
:content-style="introConfig.introContentStyle" <template #thanks>
:intro-box-style="introConfig.introBoxStyle" <div class="slot-thanks">
></Introduction> <p class="slot-thanks-p1">很遗憾</p>
<p class="slot-thanks-p2">你没有刮到奖品</p>
</div>
</template>
</WinPopup>
<Records></Records>
<Introduction class="lottery-instant__intro" rule-position="bottom"></Introduction>
</section> </section>
</template> </template>
...@@ -67,10 +73,10 @@ import coverImg from '@/assets/images/lottery/scratch/mask.png' ...@@ -67,10 +73,10 @@ import coverImg from '@/assets/images/lottery/scratch/mask.png'
import onStartImg from '@/assets/images/lottery/scratch/on-start.png' import onStartImg from '@/assets/images/lottery/scratch/on-start.png'
import onStartDidabledImg from '@/assets/images/lottery/scratch/on-start-disabled.png' import onStartDidabledImg from '@/assets/images/lottery/scratch/on-start-disabled.png'
import Bus from '@/utils/Bus' import Bus from '@/utils/Bus'
import { introductionConfigScratch, recordsConfigScratch, countDownBarBlue } from './config'
export default { export default {
components: { components: {
WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'), CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
Introduction: () => import('@/components/Lottery/Instant/Introduction'), Introduction: () => import('@/components/Lottery/Instant/Introduction'),
Records: () => import('@/components/Lottery/Instant/Records'), Records: () => import('@/components/Lottery/Instant/Records'),
...@@ -105,10 +111,7 @@ export default { ...@@ -105,10 +111,7 @@ export default {
id: this.$route.query.id || null, // 抽奖id id: this.$route.query.id || null, // 抽奖id
playId: this.$route.query.sessionId || null, // 场次id playId: this.$route.query.sessionId || null, // 场次id
sid: this.$route.query.sid || null, // 引用id sid: this.$route.query.sid || null, // 引用id
stype: this.$route.query.stype || null, // 引用类型 stype: this.$route.query.stype || null // 引用类型
recordsConfig: recordsConfigScratch, // 中奖记录样式配置
introConfig: introductionConfigScratch,
barStyle: countDownBarBlue
} }
}, },
computed: { computed: {
...@@ -134,6 +137,9 @@ export default { ...@@ -134,6 +137,9 @@ export default {
return !!+this.winInfo.id return !!+this.winInfo.id
} }
}, },
mounted() {
Bus.$emit('initDeal', '#093c85')
},
methods: { methods: {
...mapActions({ jumpToLogin: 'users/jumpToLogin', updateInfo: 'lottery/updateInfo' }), ...mapActions({ jumpToLogin: 'users/jumpToLogin', updateInfo: 'lottery/updateInfo' }),
// 开始抽奖 // 开始抽奖
...@@ -150,6 +156,9 @@ export default { ...@@ -150,6 +156,9 @@ export default {
duration: 1500 duration: 1500
}) })
Bus.$emit('updateMain', { isLottering: false }) Bus.$emit('updateMain', { isLottering: false })
setTimeout(() => {
Bus.$emit('updateMain', { isShowWin: true })
}, 400)
if (this.lotteryInfo.userTimes === 0) { if (this.lotteryInfo.userTimes === 0) {
this.$refs.prizeScratchRef.tryAgain() this.$refs.prizeScratchRef.tryAgain()
this.firstTimeLottering = true this.firstTimeLottering = true
...@@ -297,4 +306,184 @@ export default { ...@@ -297,4 +306,184 @@ export default {
} }
} }
} }
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction {
padding: 38px 15px;
&__sec-title {
background-image: url('@/assets/images/lottery/scratch/introduction.png');
width: 38%;
left: 50%;
transform: translateX(-50%);
}
&__wrap {
background-color: #0000001a;
border-radius: 22px;
}
&__content {
background-color: transparent;
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> </style>
components/Lottery/Instant/type/TypeScratchMini.vue
<template> <template>
<section class="lottery-instant"> <section class="lottery-instant">
<div class="lottery-instant__main"> <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__layout-scratch">
<div class="lottery-instant__content-scratch"> <div class="lottery-instant__content-scratch">
<img class="content-title" src="@/assets/images/lottery/scratch/game-title.png" alt="" /> <img class="content-title" src="@/assets/images/lottery/scratch/game-title.png" alt="" />
...@@ -48,16 +48,21 @@ ...@@ -48,16 +48,21 @@
</div> </div>
</div> </div>
<div class="lottery-instant__intro-entry" @click="changeIsShowIntro">活动介绍</div> <div class="lottery-instant__intro-entry" @click="changeIsShowIntro">活动介绍</div>
<Records :records-config="recordsConfig"></Records> <WinPopup :value="isShowWin" :info="winInfo">
<IntroductionPopup <template #title-bg>
:value="isShowIntro" <div class="slot-title-bg">
:wrap-style="introConfig.introWrapStyle" <img src="@/assets/images/lottery/win-new/title-scratch.png" alt="" />
:content-style="introConfig.introContentStyle" </div>
:popup-style="introConfig.introPopupStyle" </template>
:content-box-style="introConfig.contentBoxStyle" <template #thanks>
:back-style="introConfig.backStyle" <div class="slot-thanks">
:rule="introConfig.rule" <p class="slot-thanks-p1">很遗憾</p>
></IntroductionPopup> <p class="slot-thanks-p2">你没有刮到奖品</p>
</div>
</template>
</WinPopup>
<Records></Records>
<IntroductionPopup :value="isShowIntro" rule-position="bottom"></IntroductionPopup>
</section> </section>
</template> </template>
...@@ -69,10 +74,10 @@ import coverImg from '@/assets/images/lottery/scratch/mask.png' ...@@ -69,10 +74,10 @@ import coverImg from '@/assets/images/lottery/scratch/mask.png'
import onStartImg from '@/assets/images/lottery/scratch/on-start.png' import onStartImg from '@/assets/images/lottery/scratch/on-start.png'
import onStartDidabledImg from '@/assets/images/lottery/scratch/on-start-disabled.png' import onStartDidabledImg from '@/assets/images/lottery/scratch/on-start-disabled.png'
import Bus from '@/utils/Bus' import Bus from '@/utils/Bus'
import { introductionConfigScratchMini2, recordsConfigScratch, countDownBarBlue } from './config'
export default { export default {
components: { components: {
WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'), CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
Records: () => import('@/components/Lottery/Instant/Records'), Records: () => import('@/components/Lottery/Instant/Records'),
IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup'), IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup'),
...@@ -111,10 +116,7 @@ export default { ...@@ -111,10 +116,7 @@ export default {
id: this.$route.query.id || null, // 抽奖id id: this.$route.query.id || null, // 抽奖id
playId: this.$route.query.sessionId || null, // 场次id playId: this.$route.query.sessionId || null, // 场次id
sid: this.$route.query.sid || null, // 引用id sid: this.$route.query.sid || null, // 引用id
stype: this.$route.query.stype || null, // 引用类型 stype: this.$route.query.stype || null // 引用类型
recordsConfig: recordsConfigScratch, // 中奖记录样式配置
introConfig: introductionConfigScratchMini2,
barStyle: countDownBarBlue
} }
}, },
computed: { computed: {
...@@ -140,6 +142,9 @@ export default { ...@@ -140,6 +142,9 @@ export default {
return !!+this.winInfo.id return !!+this.winInfo.id
} }
}, },
mounted() {
Bus.$emit('initDeal', '#093c85')
},
methods: { methods: {
...mapActions({ jumpToLogin: 'users/jumpToLogin', updateInfo: 'lottery/updateInfo' }), ...mapActions({ jumpToLogin: 'users/jumpToLogin', updateInfo: 'lottery/updateInfo' }),
// 开始抽奖 // 开始抽奖
...@@ -156,6 +161,9 @@ export default { ...@@ -156,6 +161,9 @@ export default {
duration: 1500 duration: 1500
}) })
Bus.$emit('updateMain', { isLottering: false }) Bus.$emit('updateMain', { isLottering: false })
setTimeout(() => {
Bus.$emit('updateMain', { isShowWin: true })
}, 400)
if (this.lotteryInfo.userTimes === 0) { if (this.lotteryInfo.userTimes === 0) {
this.$refs.prizeScratchRef.tryAgain() this.$refs.prizeScratchRef.tryAgain()
this.firstTimeLottering = true this.firstTimeLottering = true
...@@ -324,4 +332,195 @@ export default { ...@@ -324,4 +332,195 @@ export default {
border-radius: 10px 0 0 10px; border-radius: 10px 0 0 10px;
} }
} }
// 样式穿透
.lottery-instant {
// 介绍
/deep/ .introduction-popup {
background: linear-gradient(180deg, #60bdff 0%, #aaeefb 100%);
&__wrap {
background-color: transparent;
padding: 2px;
}
&__content {
background-color: transparent;
color: #fff;
padding: 0;
}
&__box {
background-color: #00000030;
padding: 1px 15px 15px 15px;
border-radius: 22px;
}
&__back {
top: 10px;
right: 0;
background: linear-gradient(180deg, #ffd63e 0%, #fca60d 100%);
box-shadow: 0 1px 2px 0 rgba(202, 146, 46, 1);
border-radius: 10px 0 0 10px;
padding: 6px 3px;
border: 0;
}
&__intro {
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> </style>
components/Lottery/PubModal.vue deleted 100644 → 0
<!-- 公共模态框 -->
<template>
<transition name="modal-fade">
<div v-if="isOpen" class="detail-modal">
<div class="modal-body">
<div class="modal-decorations"></div>
<div class="detail-content">
<div class="modal-title">
<slot name="title"></slot>
</div>
<div class="scroll-container">
<vue-scroll :ops="scrollOpt">
<slot name="content"></slot>
</vue-scroll>
</div>
</div>
<div v-if="close" class="modal-close" @click="isOpen = false">
<i class="iconfont icon-X"></i>
</div>
</div>
</div>
</transition>
</template>
<script>
// 展开收起组件
export default {
name: 'PubModal',
props: {
close: {
default: true,
type: Boolean
},
isShow: {
default: false,
type: Boolean
}
},
data() {
return {
scrollOpt: {
bar: {
background: '#eda431',
keepShow: true,
size: '6px',
minSize: 0
},
scrollPanel: {
scrollingX: false
}
}
}
},
computed: {
isOpen: {
get() {
// if (val) {
// this.autoClose();
// }
return this.isShow
},
set(val) {
this.$emit('changeVisible', val)
}
}
},
methods: {
// autoClose() {
// time && clearTimeout(time);
// const time = setTimeout(() => {
// this.isShow = false;
// }, 1200);
// }
}
}
</script>
<style lang="less" scoped>
.modal-fade-enter-active,
.modal-fade-leave-active {
transition: 0.3s all ease-in-out;
}
.modal-fade-enter,
.modal-fade-leave-to {
opacity: 0;
}
.detail-modal {
top: 0;
left: 0;
position: absolute;
z-index: 9;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
.modal-body {
width: 275px;
height: 292px;
background-image: url('~@/assets/images/lottery/detail_bg.png');
background-size: cover;
background-repeat: no-repeat;
border-radius: 10px;
position: relative;
padding: 10px;
.detail-content {
width: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
.modal-title {
padding: 0 42px;
// height: 48px;
// line-height: 48px;
width: 100%;
text-align: center;
color: #eda431;
font-weight: 700;
font-size: 16px;
height: 18px;
// line-height: 16px;
margin: 16px 0 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.scroll-container {
flex: 1;
padding: 0 16px 16px;
overflow: hidden;
}
}
.modal-decorations {
position: absolute;
width: 326px;
height: 136px;
top: 41px;
left: -24px;
background-image: url('~@/assets/images/lottery/bulinbulin.png');
background-size: cover;
background-repeat: no-repeat;
}
.modal-close {
position: absolute;
cursor: pointer;
right: 0px;
width: 38px;
height: 38px;
// line-height: 35px;
text-align: center;
color: #fff;
border: 1px solid #fff;
opacity: 0.5;
border-radius: 50%;
top: -48px;
display: flex;
justify-content: center;
align-items: center;
.icon-X {
font-size: 14px;
}
}
}
}
</style>
components/Lottery/Timing/Main.vue
...@@ -12,11 +12,14 @@ ...@@ -12,11 +12,14 @@
<JoinButton class="join-button-box" @lottery="lotteryCallback"></JoinButton> <JoinButton class="join-button-box" @lottery="lotteryCallback"></JoinButton>
<BackButton v-if="backUrl" class="back-box" :url="backUrl"></BackButton> <BackButton v-if="backUrl" class="back-box" :url="backUrl"></BackButton>
<Records></Records> <Records></Records>
<WinPopup v-model="isShowWin" :info="winInfo"></WinPopup>
<BindPhoneDialog v-model="isShowBindPhone"></BindPhoneDialog>
</section> </section>
</template> </template>
<script> <script>
import { mapGetters, mapActions } from 'vuex' import { mapGetters, mapActions } from 'vuex'
import { setLottery } from '@/api/modules/lottery' import { setLottery, getUserRecord } from '@/api/modules/lottery'
import Bus from '@/utils/Bus'
// banner // banner
import TimingBanner from '@/components/Lottery/Timing/TimingBanner' import TimingBanner from '@/components/Lottery/Timing/TimingBanner'
...@@ -26,6 +29,8 @@ import TimingStatus from '@/components/Lottery/Timing/TimingStatus' ...@@ -26,6 +29,8 @@ import TimingStatus from '@/components/Lottery/Timing/TimingStatus'
import JoinButton from '@/components/Lottery/Timing/JoinButton' import JoinButton from '@/components/Lottery/Timing/JoinButton'
// 返回直播间按钮 // 返回直播间按钮
import BackButton from '@/components/Lottery/Timing/BackButton' import BackButton from '@/components/Lottery/Timing/BackButton'
// 中奖弹窗
import WinPopup from '@/components/Lottery/Instant/WinPopup'
export default { export default {
components: { components: {
...@@ -33,13 +38,19 @@ export default { ...@@ -33,13 +38,19 @@ export default {
TimingStatus, TimingStatus,
JoinButton, JoinButton,
BackButton, BackButton,
Records: () => import('@/components/Lottery/Instant/Records'), WinPopup,
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Records: () => import('@/components/Lottery/Instant/Records')
}, },
data() { data() {
return { return {
isBtnLoading: false, isBtnLoading: false,
id: this.$route.query.id, id: this.$route.query.id || '',
playId: this.$route.query.sessionId stype: this.$route.query.stype || null, // 引用类型
playId: this.$route.query.sessionId,
isShowWin: false,
isShowBindPhone: false, // 是否显示绑定手机号提示
winInfo: this.winInfoTranslator()
} }
}, },
computed: { computed: {
...@@ -60,8 +71,52 @@ export default { ...@@ -60,8 +71,52 @@ export default {
return list return list
} }
}, },
watch: {
'lotteryInfo.isWin': {
handler(val) {
if (val) {
this.loadWinInfo()
}
},
deep: true
}
},
mounted() {
this.eventHubInit()
},
methods: { methods: {
...mapActions({ jumpToLogin: 'users/jumpToLogin', updateInfo: 'lottery/updateInfo' }), ...mapActions({ jumpToLogin: 'users/jumpToLogin', updateInfo: 'lottery/updateInfo' }),
eventHubInit() {
Bus.$on('updateMain', data => {
for (const [key, value] of Object.entries(data)) {
if (key === 'func') {
this[value]()
} else {
this[key] = value
}
}
})
},
// 中奖后， 关闭窗口回调
winCloseCallback(){
this.isShowWin = false
if (this.winInfo.id !== 0 && !this.isBindPhone) {
this.isShowBindPhone = true
}
},
// 中奖后， "查看奖品详情"回调
winCallback() {
this.isShowWin = false
if (this.winInfo.id !== 0) {
this.$router.push({
path: '/recordDetail',
query: {
tempId: this.winInfo.tempId,
uin: this.uin
}
})
}
},
// 抽奖回调 // 抽奖回调
lotteryCallback() { lotteryCallback() {
// 抽奖点击事件 // 抽奖点击事件
...@@ -73,16 +128,12 @@ export default { ...@@ -73,16 +128,12 @@ export default {
this.jumpToLogin() this.jumpToLogin()
} }
}) })
} else if (this.lotteryInfo.status !== 1) { } else if (this.lotteryInfo.status !== 1) {
// 抽奖不在活动日期内 // 抽奖不在活动日期内
} else if (this.isBtnLoading) { } else if (this.isBtnLoading) {
// 正在抽奖动画过程中或正在加载数据 // 正在抽奖动画过程中或正在加载数据
} else if (this.lotteryInfo.userTimes <= 0) { } else if (this.lotteryInfo.userTimes <= 0) {
this.$toast('抽奖次数已用完') this.$toast('抽奖次数已用完')
} else { } else {
this.isBtnLoading = true this.isBtnLoading = true
const params = { const params = {
...@@ -111,6 +162,28 @@ export default { ...@@ -111,6 +162,28 @@ export default {
} }
}) })
} }
},
loadWinInfo() {
getUserRecord({
id: this.$route?.query?.id || '',
uin: this.$route?.query?.uin || '',
nowPlay: 1
}).then(res => {
const { code, errorCode, errorMessage, data } = res
if (code === 200 && errorCode === 0) {
this.winInfo = this.winInfoTranslator(data)
this.isShowWin = true
} else {
this.$toast(errorMessage)
}
})
},
winInfoTranslator(data) {
return {
...data,
id: data?.prizeId || '',
name: data?.prizeName || ''
}
} }
} }
} }
......
components/Lottery/Timing/WinnerModal.vue deleted 100644 → 0
<!-- 绑定手机号 -->
<template>
<PubModal :is-show="isOpen" @changeVisible="changeVisible">
<template slot="title">中奖名单</template>
<div slot="content" class="winner-info">
<ul>
<li v-for="(item, index) in winnersList" :key="index">
<span>{{ item | omitPhone }}</span>
<span class="prize-name">{{ item.prizeName }} x 1</span>
</li>
</ul>
</div>
</PubModal>
</template>
<script>
import PubModal from '@/components/Lottery/PubModal'
import { mapGetters } from 'vuex'
import { getWinnersList } from '@/api/modules/lottery'
export default {
name: 'BindModal',
components: {
PubModal
},
filters: {
omitPhone(item) {
if (item.phone) {
return item.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
} else {
return item.userNick
}
}
},
props: {
isShow: {
default: true,
type: Boolean
}
},
data() {
return {
winnersList: []
}
},
computed: {
...mapGetters({ lotteryInfo: 'lottery/lotteryInfo' }),
isOpen: {
get () {
return this.isShow
},
set (val) {
this.$emit('changeVisible', val)
}
}
},
watch: {
isOpen(nVal) {
if (nVal) {
this.dataInit()
}
}
},
methods: {
changeVisible(val) {
this.isOpen = val
},
dataInit() {
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)
}
})
}
}
}
</script>
<style lang="less" scoped>
.winner-info {
color: #eda431;
overflow: hidden;
ul {
padding: 10px 5px;
li {
display: flex;
justify-content: space-between;
span {
font-size: 12px;
&.prize-name {
padding-left: 6px;
}
}
}
}
}
</style>
mixins/connection.js 0 → 100644
import { setLotteryAddress } from '@/api/modules/records'
export default {
data() {
return {
connection: null,
timer: null
}
},
computed: {
isInIframe() {
return process.client ? window.self !== window.top : false
}
},
mounted() {
this.connectionInit()
},
methods: {
connectionInit() {
if (process.client && this.isInIframe && !this.connection) {
const { ClientConnection } = require('@easy-messenger/client-connection/dist/clientConnection.cjs.js')
this.connection = new ClientConnection()
let counter = 0
this.timer = setInterval(() => {
this.connection.init()
counter++
if (this.connection.connected || counter > 60) {
clearInterval(this.timer)
this.connectionListener()
}
}, 1000)
}
},
connectionListener() {
this.connection.on('onSaveLotteryAddress', addressInfo => {
const params = {
id: this.winInfo.id,
tempId: this.winInfo?.tempId || '',
uin: this.$route?.query?.uin || '',
address: `${addressInfo?.province || ''}-${addressInfo?.city || ''}-${addressInfo?.area || ''}-${
addressInfo?.detail
}`,
contactPhone: addressInfo?.mobile || '',
name: addressInfo?.name || ''
}
setLotteryAddress(params).then(res => {
const { code, errorCode, errorMessage } = res
if (code === 200 && errorCode === 0) {
this.$toast({
message: '保存成功，具体详情请前往个人中心查看',
duration: 3000,
onClose: () => {
this.connection.emit('onClose', { type: 'lottery' })
}
})
} else {
this.$toast(errorMessage)
}
})
})
},
connectionEmit(type, data){
this.connection.emit(type, data)
}
}
}
nuxt.config.js
...@@ -23,7 +23,7 @@ const plugins = IS_USE_OSS ...@@ -23,7 +23,7 @@ const plugins = IS_USE_OSS
region: 'oss-cn-hangzhou', region: 'oss-cn-hangzhou',
bucket: `guangdianyun-static-${env.run_server}`, bucket: `guangdianyun-static-${env.run_server}`,
prefix: PROJECT_NAME, prefix: PROJECT_NAME,
limit: 10, // 备份最近 3 个版本的 oss 文件 limit: 10, // 备份最近 10 个版本的 oss 文件
format: version, format: version,
exclude: [/.*\.html$/], // 或者 /.*\.html$/,排除.html文件的上传 exclude: [/.*\.html$/], // 或者 /.*\.html$/,排除.html文件的上传
deleteAll: false, // 优先匹配 format 配置项 deleteAll: false, // 优先匹配 format 配置项
...@@ -166,6 +166,7 @@ export default { ...@@ -166,6 +166,7 @@ export default {
...gtagConfig, ...gtagConfig,
axios: {}, axios: {},
server: { server: {
https: !process.env.NODE_ENV === 'production',
port: env.run_port, // default: 3000 port: env.run_port, // default: 3000
host: '0.0.0.0' // default: localhost host: '0.0.0.0' // default: localhost
}, },
......
package.json
...@@ -58,7 +58,6 @@ ...@@ -58,7 +58,6 @@
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"nuxt": "^2.15.8", "nuxt": "^2.15.8",
"qrcode": "^1.4.4", "qrcode": "^1.4.4",
"tippy.js": "^6.3.1",
"uuid": "^8.3.2", "uuid": "^8.3.2",
"vant": "^2.12.22", "vant": "^2.12.22",
"vconsole": "^3.9.1", "vconsole": "^3.9.1",
......
pages/index/index.vue
<template> <template>
<section class="lottery-box"> <section class="lottery-box">
<component <component
:is="lotteryComponents[parseInt(lotteryInfo.type, 10)]" :is="lotteryComponents[+lotteryInfo.type]"
v-if="'type' in lotteryInfo && lotteryInfo.type" v-if="'type' in lotteryInfo && lotteryInfo.type"
></component> ></component>
<ComplaintsDeal></ComplaintsDeal> <ComplaintsDeal></ComplaintsDeal>
...@@ -32,8 +32,6 @@ export default { ...@@ -32,8 +32,6 @@ export default {
}, },
id: this.$route.query.id || null, // 接收抽奖id id: this.$route.query.id || null, // 接收抽奖id
sessionId: this.$route.query.sessionId || null // 接收抽奖场次id sessionId: this.$route.query.sessionId || null // 接收抽奖场次id
// sid: this.$route.query.sid || null, // 引用id
// stype: this.$route.query.stype || null, // 引用类型
} }
}, },
computed: { computed: {
...@@ -91,7 +89,7 @@ export default { ...@@ -91,7 +89,7 @@ export default {
Bus.$on('LotteryInfoUpdate', data => { Bus.$on('LotteryInfoUpdate', data => {
const { id } = data const { id } = data
const { uin, id: currentId, sessionId: currentPlayId } = this const { uin, id: currentId, sessionId: currentPlayId } = this
if (parseInt(id, 10) === parseInt(currentId, 10)) { if (+id === +currentId) {
this.getLotteryDetail({ id, playId: currentPlayId, uin }) this.getLotteryDetail({ id, playId: currentPlayId, uin })
} }
}) })
...@@ -99,7 +97,7 @@ export default { ...@@ -99,7 +97,7 @@ export default {
Bus.$on('LotteryStateUpdate', data => { Bus.$on('LotteryStateUpdate', data => {
const { id, playId } = data const { id, playId } = data
const { sessionId: currentPlayId, id: currentId } = this const { sessionId: currentPlayId, id: currentId } = this
if (parseInt(id, 10) === parseInt(currentId, 10) && parseInt(playId, 10) === parseInt(currentPlayId, 10)) { if (+id === +currentId && +playId === +currentPlayId) {
const { status, startTime, endTime, userTimes } = data const { status, startTime, endTime, userTimes } = data
// 状态 // 状态
this.updateInfo({ this.updateInfo({
......
pages/list/index.vue
...@@ -100,7 +100,7 @@ export default { ...@@ -100,7 +100,7 @@ export default {
Bus.$on('LotteryInfoUpdate', data => { Bus.$on('LotteryInfoUpdate', data => {
const { id } = data const { id } = data
const { uin, id: currentId } = this.$route.query const { uin, id: currentId } = this.$route.query
if (parseInt(id, 10) === parseInt(currentId, 10)) { if (+id === +currentId) {
this.getSessionList({ id, uin }) this.getSessionList({ id, uin })
} }
}) })
......
pages/message/index.vue
...@@ -205,7 +205,13 @@ export default { ...@@ -205,7 +205,13 @@ export default {
}, },
openRecordHandler() { openRecordHandler() {
// 触发打开抽奖记录 // 触发打开抽奖记录
this.connection.emit('openRecordHandler', this.lotteryInfo) // this.connection.emit('openRecordHandler', this.lotteryInfo)
this.$router.push({
path: '/records',
query: {
uin: this.$route?.query?.uin || ''
}
})
}, },
openAddressHandler() { openAddressHandler() {
// 触发打开编辑地址 // 触发打开编辑地址
...@@ -228,14 +234,14 @@ export default { ...@@ -228,14 +234,14 @@ export default {
Bus.$on('LotteryInfoUpdate', data => { Bus.$on('LotteryInfoUpdate', data => {
const { id } = data const { id } = data
const { id: currentId } = this.$route.query const { id: currentId } = this.$route.query
if (parseInt(id, 10) === parseInt(currentId, 10)) { if (+id === +currentId) {
this.loadData() this.loadData()
} }
}) })
Bus.$on('LotteryStateUpdate', data => { Bus.$on('LotteryStateUpdate', data => {
const { id } = data const { id } = data
const { id: currentId } = this.$route.query const { id: currentId } = this.$route.query
if (parseInt(id, 10) === parseInt(currentId, 10)) { if (+id === +currentId) {
this.loadData() this.loadData()
} }
}) })
......
pages/mini/index/index.vue
<template> <template>
<section class="lottery-box"> <section class="lottery-box">
<component <component
:is="lotteryComponents[parseInt(lotteryInfo.type, 10)]" :is="lotteryComponents[+lotteryInfo.type]"
v-if="'type' in lotteryInfo && lotteryInfo.type" v-if="'type' in lotteryInfo && lotteryInfo.type"
></component> ></component>
<Loading v-model="isLoading" class="lottery-box__loading"></Loading> <Loading v-model="isLoading" class="lottery-box__loading"></Loading>
...@@ -31,8 +31,6 @@ export default { ...@@ -31,8 +31,6 @@ export default {
sessionId: this.$route.query.sessionId || null, // 接收抽奖场次id sessionId: this.$route.query.sessionId || null, // 接收抽奖场次id
connection: null, connection: null,
timer: null timer: null
// sid: this.$route.query.sid || null, // 引用id
// stype: this.$route.query.stype || null, // 引用类型
} }
}, },
computed: { computed: {
...@@ -109,7 +107,7 @@ export default { ...@@ -109,7 +107,7 @@ export default {
Bus.$on('LotteryInfoUpdate', data => { Bus.$on('LotteryInfoUpdate', data => {
const { id } = data const { id } = data
const { uin, id: currentId, sessionId: currentPlayId } = this const { uin, id: currentId, sessionId: currentPlayId } = this
if (parseInt(id, 10) === parseInt(currentId, 10)) { if (+id === +currentId) {
this.getLotteryDetail({ id, playId: currentPlayId, uin }) this.getLotteryDetail({ id, playId: currentPlayId, uin })
} }
}) })
...@@ -117,7 +115,7 @@ export default { ...@@ -117,7 +115,7 @@ export default {
Bus.$on('LotteryStateUpdate', data => { Bus.$on('LotteryStateUpdate', data => {
const { id, playId } = data const { id, playId } = data
const { sessionId: currentPlayId, id: currentId } = this const { sessionId: currentPlayId, id: currentId } = this
if (parseInt(id, 10) === parseInt(currentId, 10) && parseInt(playId, 10) === parseInt(currentPlayId, 10)) { if (+id === +currentId && +playId === +currentPlayId) {
const { status, startTime, endTime, userTimes } = data const { status, startTime, endTime, userTimes } = data
// 状态 // 状态
this.updateInfo({ this.updateInfo({
......
pages/mini/list/index.vue
...@@ -86,7 +86,7 @@ export default { ...@@ -86,7 +86,7 @@ export default {
Bus.$on('LotteryInfoUpdate', data => { Bus.$on('LotteryInfoUpdate', data => {
const { id } = data const { id } = data
const { uin, id: currentId } = this.$route.query const { uin, id: currentId } = this.$route.query
if (parseInt(id, 10) === parseInt(currentId, 10)) { if (+id === +currentId) {
this.getSessionList({ id, uin }) this.getSessionList({ id, uin })
} }
}) })
......
pages/recordDetail/index.vue 0 → 100644
<template>
<div class="record-detail">
<van-nav-bar fixed title="奖品详情" left-arrow @click-left="onClickLeft" />
<div class="record-detail__content">
<div class="record-detail__info">
<ul class="record-detail__info-wrapper">
<li>
<label>活动名称：</label>
<span>{{ detailInfo.title }}</span>
</li>
<li>
<label>中奖场次：</label>
<span v-if="detailInfo.drawPlay">{{ `第 ${detailInfo.drawPlay} 场` }}</span>
</li>
<li>
<label>参与时间：</label>
<span v-if="detailInfo.drawTime">{{ (detailInfo.drawTime * 1000) | formatDate('YYYY-MM-DD HH:mm') }}</span>
</li>
<li>
<label>获得奖品：</label>
<div>
<p>{{ detailInfo.prizeName }}</p>
<img v-lazy="detailInfo.prizeIcon" class="record-detail__info-img" alt="" />
</div>
</li>
<li>
<label>领奖方式：</label>
<span>{{ LOTTERY_EXCHANGE_TYPE_TXT[detailInfo.exchangeType] }}</span>
</li>
</ul>
</div>
<div v-if="+detailInfo.exchangeType === +LOTTERY_EXCHANGE_TYPE.offline" class="record-detail__code-info">
<QRCode :url="detailInfo.code" :width="70" :height="70"></QRCode>
<p class="record-detail__code-text">
<label>兑换码：</label>
<template v-if="detailInfo.code">
{{ detailInfo.code }}
<span class="record-detail__copy-btn" @click="onCopy(detailInfo.code)"
><i class="iconfont icon-fuzhi"></i>复制
</span>
</template>
</p>
<p class="record-detail__notice">*兑换信息请勿泄露给他人，以防冒充代领</p>
</div>
<div v-if="+detailInfo.exchangeType === +LOTTERY_EXCHANGE_TYPE.mailing" class="record-detail__addressee-info">
<span v-if="!detailInfo.name" class="record-detail__edit-btn" @click="isShowAddressPopup = true"
>填写收货地址</span
>
<template v-else>
<span class="record-detail__addressee-title">收货信息</span>
<ul class="record-detail__info-wrapper">
<li>
<label>收货人：</label>
<span>{{ detailInfo.name }}</span>
</li>
<li>
<label>手机号码：</label>
<span>{{ detailInfo.contactPhone }}</span>
</li>
<li>
<label>收货地址：</label>
<span v-if="detailInfo.address">{{ detailInfo.address }}</span>
</li>
<li>
<label>运单信息：</label>
<div class="record-detail__tracking-info">
<p>{{ detailInfo.trackingCompany }}</p>
<span v-if="detailInfo.trackingNo">
{{ detailInfo.trackingNo }}
<span class="record-detail__copy-btn" @click="onCopy(detailInfo.trackingNo)"
><i class="iconfont icon-fuzhi"></i>复制
</span>
</span>
<span v-else class="record-detail__tracking-msg">您的收货信息已提交，稍后可查看运单号</span>
</div>
</li>
</ul>
</template>
</div>
</div>
<AddressListPopup
v-model="isShowAddressPopup"
left-text="保存"
:uin="uin"
:create-api="addAddress"
:update-api="setAddress"
:retrieve-api="getAddressList"
:delete-api="removeAddress"
@onBackHandler="onSaveAddress"
></AddressListPopup>
</div>
</template>
<script>
import { getRecordDetail, setLotteryAddress } from '@/api/modules/records'
import { LOTTERY_EXCHANGE_TYPE, LOTTERY_EXCHANGE_TYPE_TXT } from '@/utils/constant'
import { AddressListPopup } from '@gdyfe/gdy-component-lib'
import '@gdyfe/gdy-component-lib/lib/index.css'
import { getAddressList, removeAddress, setAddress, addAddress } from '@/api/modules/address'
export default {
name: 'Index',
components: {
QRCode: () => import('@/components/Common/QRCode'),
AddressListPopup
},
data() {
return {
uin: +this.$route?.query?.uin || '',
id: this.$route?.query?.detailId || '',
tempId: this.$route?.query?.tempId || '',
getAddressList,
removeAddress,
setAddress,
addAddress,
LOTTERY_EXCHANGE_TYPE,
LOTTERY_EXCHANGE_TYPE_TXT,
detailInfo: this.detailInfoTranslator(),
isShowAddressPopup: false
}
},
computed: {
isInIframe() {
return process.client ? window.self !== window.top : false
}
},
watch: {
$route: {
handler() {
this.loadData()
},
immediate: true
}
},
methods: {
loadData() {
getRecordDetail({ uin: this.$route?.query?.uin || '', id: this.id, tempId: this.tempId }).then(res => {
const { code, errorCode, errorMessage, data } = res
if (code === 200 && errorCode === 0) {
this.detailInfo = this.detailInfoTranslator(data)
} else {
this.$toast(errorMessage)
}
})
},
onSaveAddress(val) {
if (!val) {
this.$toast('未选择地址')
return
}
const params = {
id: this.id,
tempId: this.tempId,
uin: this.$route?.query?.uin || '',
address: `${val?.province || ''}-${val?.city || ''}-${val?.area || ''}-${val?.detail}`,
contactPhone: val?.mobile || '',
name: val?.name || ''
}
setLotteryAddress(params).then(res => {
const { code, errorCode, errorMessage } = res
if (code === 200 && errorCode === 0) {
this.$toast('保存成功')
this.isShowAddressPopup = false
this.loadData()
} else {
this.$toast(errorMessage)
}
})
},
onCopy(content) {
this.$copyText(content).then(
() => {
this.$toast('复制成功')
},
() => {
this.$toast('您的浏览器不支持一键复制，请手动从地址栏复制')
}
)
},
onClickLeft() {
window.history.back()
},
detailInfoTranslator(data) {
return {
...data,
title: data?.title || '',
drawPlay: data?.drawPlay || '',
drawTime: data?.drawTime || '',
prizeName: data?.prizeName || '',
prizeIcon: data?.prizeIcon || '',
exchangeType: +data?.exchangeType || 1,
address: data?.address || '',
contactPhone: data?.contactPhone || '',
code: data?.code || ''
}
}
}
}
</script>
<style lang="less" scoped>
.record-detail {
height: 100%;
width: 100%;
padding: 16px 28px 36px;
background-color: #fff;
overflow: auto;
label {
font-size: 13px;
font-weight: 500;
color: #666;
white-space: nowrap;
line-height: 19px;
min-width: 65px;
}
&__content {
display: flex;
flex-direction: column;
margin-top: 46px;
}
&__info {
padding: 20px;
box-shadow: 0px 1px 8px 1px rgba(200, 200, 200, 0.3);
border-radius: 8px;
}
&__info-wrapper {
li {
display: flex;
margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
}
span,
p {
color: #333;
font-size: 14px;
font-weight: 500;
line-height: 19px;
}
}
}
&__tracking-info {
display: flex;
flex-direction: column;
p{
margin-bottom: 15px;
}
}
&__info-img {
width: 84px;
height: 84px;
display: block;
border: 1px solid #dddddd;
margin-top: 15px;
border-radius: 6px;
}
&__code-info {
margin-top: 10px;
padding: 20px;
box-shadow: 0px 1px 8px 1px rgba(200, 200, 200, 0.3);
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
}
&__addressee-info {
margin-top: 10px;
padding: 20px;
box-shadow: 0px 1px 8px 1px rgba(200, 200, 200, 0.3);
border-radius: 8px;
display: flex;
flex-direction: column;
}
&
&__code-text {
height: 18px;
font-size: 12px;
font-weight: 500;
line-height: 18px;
display: flex;
align-items: center;
margin: 10px 0;
}
&__notice {
color: #ff1111;
font-size: 12px;
}
&__edit-btn {
color: #2e7ff9;
font-size: 14px;
}
&__copy-btn {
background-color: #f2f2f2;
border-radius: 12px;
color: #999 !important;
font-size: 13px !important;
width: 52px;
height: 24px;
line-height: 1;
padding: 5px;
margin-left: 12px;
cursor: pointer;
i {
font-size: 13px;
margin-right: 2px;
}
}
&__addressee-title {
color: #333;
font-size: 14px;
font-weight: 500;
line-height: 19px;
margin-bottom: 15px;
}
&__tracking-msg {
color: #999 !important;
font-size: 13px !important;
}
}
</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