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 2856 additions and 2417 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__personal-record"> <div class="records-popup__content">
<div class="records-popup__record-content"> <div class="records-popup__list-wrapper">
<div class="records-popup__phone"> <div class="records-popup__personal-record">
领奖手机号： <div class="records-popup__record-content">
<span v-if="isBindPhone">{{ userInfo.phone }}</span> <div class="records-popup__phone">
<span v-else class="records-popup__bind-phone" @click="bindMobile">绑定手机号</span> 领奖手机号：
</div> <span v-if="isBindPhone">{{ userInfo.phone }}</span>
<ul v-if="Object.keys(recordList).length !== 0" class="records-popup__record-list"> <span v-else class="records-popup__bind-phone" @click="bindMobile">绑定手机号</span>
<li v-for="(session, key, index) in recordList" :key="index">
<div v-for="(item, itemIndex) in session" :key="itemIndex" class="records-popup__session-info">
<div class="records-popup__info-wrap">
<div v-if="session.length > 1" class="records-popup__session">
第{{ NUMBER_LIST[index + 1] }}场次
</div>
<div class="records-popup__time">
<span>{{ (item.drawTime * 1000) | formatDate('MM-DD HH:mm:ss') }}</span>
</div>
</div>
<div class="records-popup__prize-name">{{ item.prizeName }}</div>
</div> </div>
</li> <ul v-if="Object.keys(recordList).length !== 0" class="records-popup__record-list">
</ul> <li v-for="(session, key, index) in recordList" :key="index">
<div v-if="Object.keys(recordList).length === 0" class="records-popup__no-data">暂无记录</div> <div v-for="(item, itemIndex) in session" :key="itemIndex" class="records-popup__session-info">
<div class="records-popup__info-wrap">
<div v-if="session.length > 1" class="records-popup__session">
第{{ NUMBER_LIST[index + 1] }}场次
</div>
<div class="records-popup__time">
<span>{{ (item.drawTime * 1000) | formatDate('MM-DD HH:mm:ss') }}</span>
</div>
</div>
<div class="records-popup__prize-name">{{ item.prizeName }}</div>
</div>
</li>
</ul>
<div v-if="Object.keys(recordList).length === 0" class="records-popup__no-data">暂无记录</div>
</div>
</div>
</div>
<div class="records-popup__jump-detail">
<span @click="jumpDetail">查看奖品详情</span>
</div> </div>
</div> </div>
</van-tab> </van-tab>
...@@ -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">
<van-button class="win-popup__sure" color="linear-gradient(to right, #ffde9d, #ffdbb3)" round @click="know"
>我知道了</van-button
>
<template v-if="isWin"> <template v-if="isWin">
<van-button class="win-popup__sure" color="linear-gradient(to right, #ffde9d, #ffdbb3)" round @click="know"
>查看奖品详情</van-button
>
<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() {
Bus.$emit('updateMain', { func: 'runEnd' }) setTimeout(() => {
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() {
Bus.$emit('updateMain', { func: 'runEnd' }) setTimeout(() => {
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() {
Bus.$emit('updateMain', { func: 'runEnd' }) setTimeout(() => {
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/Instant/type/config.js
...@@ -5,10 +5,6 @@ import gift2 from '@/assets/images/lottery/guess/gift_2.png' ...@@ -5,10 +5,6 @@ import gift2 from '@/assets/images/lottery/guess/gift_2.png'
import gift3 from '@/assets/images/lottery/guess/gift_3.png' import gift3 from '@/assets/images/lottery/guess/gift_3.png'
import gift4 from '@/assets/images/lottery/guess/gift_4.png' import gift4 from '@/assets/images/lottery/guess/gift_4.png'
// 介绍背景图
import introBgMiniPurple from '@/assets/images/lottery/guess/intro-bg-mini.png'
import introBgMiniYellow from '@/assets/images/lottery/gashapon2/intro-bg-mini.png'
/* 猜盲盒2 */ /* 猜盲盒2 */
// 游戏礼物样式 // 游戏礼物样式
import gift1Guess2 from '@/assets/images/lottery/guess2/gift_1.png' import gift1Guess2 from '@/assets/images/lottery/guess2/gift_1.png'
...@@ -16,7 +12,6 @@ import gift2Guess2 from '@/assets/images/lottery/guess2/gift_2.png' ...@@ -16,7 +12,6 @@ import gift2Guess2 from '@/assets/images/lottery/guess2/gift_2.png'
import gift3Guess2 from '@/assets/images/lottery/guess2/gift_3.png' import gift3Guess2 from '@/assets/images/lottery/guess2/gift_3.png'
import gift4Guess2 from '@/assets/images/lottery/guess2/gift_4.png' import gift4Guess2 from '@/assets/images/lottery/guess2/gift_4.png'
import gift5Guess2 from '@/assets/images/lottery/guess2/gift_5.png' import gift5Guess2 from '@/assets/images/lottery/guess2/gift_5.png'
import introTitleBg from '@/assets/images/lottery/guess2/intro-title.png'
/* 扭蛋机 */ /* 扭蛋机 */
import ballGashapon1 from '@/assets/images/lottery/gashapon-ball/red-blue.png' import ballGashapon1 from '@/assets/images/lottery/gashapon-ball/red-blue.png'
...@@ -25,215 +20,31 @@ import ballGashapon3 from '@/assets/images/lottery/gashapon-ball/phone.png' ...@@ -25,215 +20,31 @@ import ballGashapon3 from '@/assets/images/lottery/gashapon-ball/phone.png'
import ballGashapon4 from '@/assets/images/lottery/gashapon-ball/gift.png' import ballGashapon4 from '@/assets/images/lottery/gashapon-ball/gift.png'
import ballGashapon5 from '@/assets/images/lottery/gashapon-ball/egg-red.png' import ballGashapon5 from '@/assets/images/lottery/gashapon-ball/egg-red.png'
/* 扭蛋机2 */
import introTitleGashapon2 from '@/assets/images/lottery/gashapon2/intro-wrap-title.png'
import introWrapBgGashapon2 from '@/assets/images/lottery/gashapon2/intro-wrap-bg.png'
/* 刮刮乐 */
import IntroTitleScratch from '@/assets/images/lottery/scratch/introduction.png'
// 记录样式
import recordsBgPurple from '@/assets/images/lottery/records-new/bg-purple.png'
import personalBgPurple from '@/assets/images/lottery/records-new/personal-purple.png'
import personalBgDisabledPurple from '@/assets/images/lottery/records-new/personal-disabled-purple.png'
import winnersBgPurple from '@/assets/images/lottery/records-new/winners-purple.png'
import winnersBgDisabledPurple from '@/assets/images/lottery/records-new/winners-disabled-purple.png'
import recordsBgBlue from '@/assets/images/lottery/records-new/bg-blue.png'
import personalBgBlue from '@/assets/images/lottery/records-new/personal-blue.png'
import personalBgDisabledBlue from '@/assets/images/lottery/records-new/personal-disabled-blue.png'
import winnersBgBlue from '@/assets/images/lottery/records-new/winners-blue.png'
import winnersBgDisabledBlue from '@/assets/images/lottery/records-new/winners-disabled-blue.png'
// 开奖样式
import winKnow from '@/assets/images/lottery/win-new/know.png'
import winTitleGuess from '@/assets/images/lottery/win-new/title-guess.png'
import winTitleGashapon from '@/assets/images/lottery/win-new/title-gashapon.png'
import winClosePurple from '@/assets/images/lottery/win-new/close-purple.png'
import winPrizeBgPurple from '@/assets/images/lottery/win-new/prize-bg-purple.png'
import winCloseBlue from '@/assets/images/lottery/win-new/close-blue.png'
import winPrizeBgBlue from '@/assets/images/lottery/win-new/prize-bg-blue.png'
const recordsConfigPurple = {
mode: 'new',
textColor: '#6F19D1',
bg: recordsBgPurple,
personalBg: personalBgPurple,
personalBgDisabled: personalBgDisabledPurple,
winnersBg: winnersBgPurple,
winnersBgDisabled: winnersBgDisabledPurple,
closeIcon: winClosePurple,
noDataColor: '#fff',
normalTextColor: '#fff',
prizebindTextColor: '#ffc800'
}
const winConfigPurple = {
winKnow,
bg: recordsBgPurple,
winClose: winClosePurple,
winPrizeBg: winPrizeBgPurple
}
const recordsConfigBlue = {
mode: 'new',
textColor: '#6F4800',
bg: recordsBgBlue,
personalBg: personalBgBlue,
personalBgDisabled: personalBgDisabledBlue,
winnersBg: winnersBgBlue,
winnersBgDisabled: winnersBgDisabledBlue,
closeIcon: winCloseBlue,
noDataColor: '#8fb3dc'
}
const winConfigBlue = {
winKnow,
bg: recordsBgBlue,
winClose: winCloseBlue,
winPrizeBg: winPrizeBgBlue
}
const introductionConfigMiniPurple = {
introWrapStyle: {
backgroundColor: 'transparent',
padding: '0.03rem'
},
introContentStyle: {
backgroundColor: 'transparent',
color: '#fff',
padding: 0
},
introPopupStyle: {
backgroundImage: `url(${introBgMiniPurple})`
},
contentBoxStyle: {
backgroundColor: '#00000030',
padding: '0.01rem 0.2rem 0.2rem 0.2rem',
borderRadius: '0.3rem'
},
backStyle: {
top: '0.12667rem',
right: 0,
background: 'linear-gradient(180deg, #ffd63e 0%, #fca60d 100%)',
boxShadow: '0 0.01333rem 0.02667rem 0 rgba(202, 146, 46, 1)',
borderRadius: '0.13333rem 0 0 0.13333rem',
padding: '0.08rem 0.04rem',
border: 0
},
rule: {
position: 'bottom',
style: {}
}
}
const introductionConfigMiniYellow = {
introWrapStyle: {
backgroundColor: 'transparent',
padding: '0.03rem'
},
introContentStyle: {
backgroundColor: 'transparent',
color: '#fff',
padding: 0
},
introPopupStyle: {
background: `url(${introBgMiniYellow})`
},
contentBoxStyle: {
backgroundColor: '#00000030',
padding: '0.01rem 0.2rem 0.2rem 0.2rem',
borderRadius: '0.3rem'
},
backStyle: {
top: '0.12667rem',
right: 0,
background: 'linear-gradient(180deg, #ffd63e 0%, #fca60d 100%)',
boxShadow: '0 0.01333rem 0.02667rem 0 rgba(202, 146, 46, 1)',
borderRadius: '0.13333rem 0 0 0.13333rem',
padding: '0.08rem 0.04rem',
border: 0
},
rule: {
position: 'bottom',
style: {}
}
}
const introductionConfigMiniBlue = {
introWrapStyle: {
backgroundColor: 'transparent',
padding: '0.03rem'
},
introContentStyle: {
backgroundColor: 'transparent',
color: '#fff',
padding: 0
},
introPopupStyle: {
background: 'linear-gradient(180deg, #60BDFF 0%, #AAEEFB 100%)'
},
contentBoxStyle: {
backgroundColor: '#00000030',
padding: '0.01rem 0.2rem 0.2rem 0.2rem',
borderRadius: '0.3rem'
},
backStyle: {
top: '0.12667rem',
right: 0,
background: 'linear-gradient(180deg, #ffd63e 0%, #fca60d 100%)',
boxShadow: '0 0.01333rem 0.02667rem 0 rgba(202, 146, 46, 1)',
borderRadius: '0.13333rem 0 0 0.13333rem',
padding: '0.08rem 0.04rem',
border: 0
},
rule: {
position: 'bottom',
style: {
color: '#000'
}
}
}
const countDownBarBlue = {
minWidth: '2.13rem',
padding: '0 0.12rem',
border: 'none',
height: '0.3rem !important',
backgroundColor: '#2452bb99'
}
const countDownBarPurple = Object.assign({}, countDownBarBlue, { backgroundColor: '#8350B299' })
const countDownBarWhite = Object.assign({}, countDownBarBlue, { backgroundColor: '#ffffff99', color: '#000' })
const countDownBarDeepPurple = Object.assign({}, countDownBarBlue, { backgroundColor: '#12121233' })
const countDownBarNone = {
backgroundColor: 'transparent',
padding: '0',
border: 'none'
}
/* 猜盲盒 */ /* 猜盲盒 */
const recordsConfigGuess = recordsConfigPurple
const winConfigGuess = Object.assign({}, winConfigPurple, { winTitle: winTitleGuess })
const introductionConfigGuessMini = introductionConfigMiniPurple
const starConfig = [ const starConfig = [
{ {
width: '0.3rem', width: '0.3rem',
height: '0.3rem', height: '0.3rem',
top: "10%", top: '10%',
left: "-30%" left: '-30%'
}, },
{ {
width: '0.4rem', width: '0.4rem',
height: '0.3rem', height: '0.3rem',
top: "-15%", top: '-15%',
left: "-25%" left: '-25%'
}, },
{ {
width: '0.6rem', width: '0.6rem',
height: '0.3rem', height: '0.3rem',
top: "-25%", top: '-25%',
right: "-25%" right: '-25%'
}, },
{ {
width: '0.4rem', width: '0.4rem',
height: '0.3rem', height: '0.3rem',
top: "20%", top: '20%',
right: "-35%" right: '-35%'
} }
] ]
...@@ -252,37 +63,6 @@ const blindBoxListGuess = [ ...@@ -252,37 +63,6 @@ const blindBoxListGuess = [
img: gift4 img: gift4
} }
] ]
const introductionConfigGuess = {
// 标题
introTitleStyle: {
backgroundImage: 'none',
fontSize: '0.22rem',
fontWeight: '700',
textAlign: 'center',
color: '#fff',
paddingTop: '0.1rem'
},
titleText: '活动介绍',
// 外框
introWrapStyle: {
backgroundColor: '#7F17E3',
padding: '0.03rem'
},
// 内容
introContentStyle: {
background: 'linear-gradient(180deg, #7B07C5 0%, #450393 100%)',
color: '#fff'
},
introBoxStyle: {
background: 'linear-gradient(180deg, #682CA1 0%, #A649D8 100%)',
padding: '0.4rem 0.2rem',
borderRadius: 0
},
rule: {
position: 'bottom',
style: {}
}
}
// 猜盲盒2 // 猜盲盒2
const blindBoxListGuess2 = [ const blindBoxListGuess2 = [
...@@ -302,31 +82,8 @@ const blindBoxListGuess2 = [ ...@@ -302,31 +82,8 @@ const blindBoxListGuess2 = [
img: gift5Guess2 img: gift5Guess2
} }
] ]
const introductionConfigGuess2 = Object.assign({}, introductionConfigGuess, {
introTitleStyle: {
backgroundImage: `url(${introTitleBg})`,
backgroundSize: '100% 100%',
width: '1.3rem',
height: '0.27rem',
left: '50%',
transform: 'translate(-50%, 0.16rem)'
},
titleText: '',
introContentStyle: {
background: '#450393',
color: '#fff'
},
introBoxStyle: {
background: 'linear-gradient(180deg, #682CA1 0%, #A649D8 100%)',
padding: '0.4rem 0.2rem',
borderRadius: 0
}
})
/* 扭蛋机 */ /* 扭蛋机 */
const recordsConfigGashapon = recordsConfigPurple
const winConfigGashapon = Object.assign({}, winConfigPurple, { winTitle: winTitleGashapon })
const introductionConfigGashaponMini = introductionConfigMiniPurple
const ballListGashapon = [ const ballListGashapon = [
{ {
img: ballGashapon1, img: ballGashapon1,
...@@ -366,150 +123,13 @@ const ballListGashapon = [ ...@@ -366,150 +123,13 @@ const ballListGashapon = [
} }
] ]
// 扭蛋机1
const introductionConfigGashapon = {
// 标题
introTitleStyle: {
backgroundImage: 'none',
fontSize: '0.22rem',
fontWeight: '700',
textAlign: 'center',
width: '22%',
height: 'auto',
padding: '0.05rem 0',
left: '50%',
color: '#fff',
transform: 'translate(-50%, 50%)',
backgroundColor: '#ffffff63',
borderRadius: '0.03rem'
},
titleText: '活动介绍',
// 外框
introWrapStyle: {
backgroundColor: '#7826A9',
padding: '0.03rem'
},
// 内容
introContentStyle: {
background: '#7826A9',
color: '#fff'
},
// 外框颜色
introBoxStyle: {
backgroundColor: '#7826A9',
padding: '0.10667rem 0.2rem 0.4rem 0.2rem',
borderRadius: 0
},
rule: {
position: 'bottom',
style: {}
}
}
// 扭蛋机2
const introductionConfigGashapon2 = {
// 标题
introTitleStyle: {
backgroundImage: `url(${introTitleGashapon2})`,
width: '95%',
padding: '0.05rem 0',
color: '#fff',
fontSize: '0.25rem',
textAlign: 'center',
lineHeight: '2',
top: '-7%',
left: '50%',
transform: 'translate(-50%, 50%)'
},
titleText: '活动介绍',
// 内框
introWrapStyle: {
backgroundImage: `url(${introWrapBgGashapon2})`,
backgroundSize: '100% 100%',
padding: '0.2rem 0.24rem 0.34rem',
backgroundColor: 'transparent'
},
// 内容
introContentStyle: {
background: '#FFF9E9',
borderRadius: '0.03rem',
color: '#000'
},
// 外框
introBoxStyle: {
backgroundColor: '#FFBD33',
padding: '1rem 0.15rem 0.1rem',
borderRadius: 0
},
rule: {
position: 'bottom',
style: {}
}
}
const recordsConfigGashapon2 = recordsConfigBlue
const winConfigGashapon2 = Object.assign({}, winConfigBlue, { winTitle: winTitleGashapon })
const introductionConfigGashaponMini2 = introductionConfigMiniYellow
// 刮刮乐
const introductionConfigScratch = {
// 介绍组件样式
introTitleStyle: {
backgroundImage: `url(${IntroTitleScratch})`,
width: '38%',
left: '50%',
transform: 'translateX(-50%)'
},
// 介绍组件外框样式
introWrapStyle: {
backgroundColor: '#0000001a',
borderRadius: '0.3rem'
},
// 介绍组件内容样式
introContentStyle: {
backgroundColor: 'transparent',
color: '#000'
},
introBoxStyle: {
padding: '0.5rem 0.2rem'
},
rule: {
position: 'bottom',
style: {}
}
}
const recordsConfigScratch = Object.assign({}, recordsConfigBlue, { textColor: '#093C85' })
const introductionConfigScratchMini2 = introductionConfigMiniBlue
export { export {
// 猜盲盒 // 猜盲盒
blindBoxListGuess, blindBoxListGuess,
recordsConfigGuess,
winConfigGuess,
introductionConfigGuess,
introductionConfigGuessMini,
// 猜盲盒2 // 猜盲盒2
blindBoxListGuess2, blindBoxListGuess2,
introductionConfigGuess2,
// 扭蛋机 // 扭蛋机
ballListGashapon, ballListGashapon,
introductionConfigGashapon,
recordsConfigGashapon,
winConfigGashapon,
introductionConfigGashaponMini,
// 扭蛋机2
introductionConfigGashapon2,
recordsConfigGashapon2,
winConfigGashapon2,
introductionConfigGashaponMini2,
// 刮刮乐 // 刮刮乐
introductionConfigScratch,
recordsConfigScratch,
introductionConfigScratchMini2,
// countDown
countDownBarBlue,
countDownBarPurple,
countDownBarWhite,
countDownBarNone,
countDownBarDeepPurple,
starConfig starConfig
} }
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>
components/LotteryEntry/index.vue deleted 100644 → 0
<template>
<div class="lottery-entry">
<div v-if="!isLoading" ref="lotteryEntryIcon" class="lottery-entry__icon">
<span
class="lottery-entry__status"
:class="`lottery-entry__status--${SESSION_STATUS_TXT[sessionStatus].className}`"
>
{{ sessionStatus === SESSION_STATUS.drawing ? '开奖中' : SESSION_STATUS_TXT[sessionStatus].label }}
</span>
</div>
<div v-show="isInitialized" ref="lotteryEntryContent" class="lottery-entry__main">
<div class="lottery-entry__content">
<div class="lottery-entry__info">
<div class="lottery-entry__info-top">
<div v-if="sessionStatus !== SESSION_STATUS.drawing" class="lottery-entry__type">
{{ LOTTERY_TYPE_TXT[lotteryType] }}
</div>
<div class="lottery-entry__status-text">
<template v-if="sessionStatus === SESSION_STATUS.drawing">
{{ SESSION_STATUS_TXT[sessionStatus].label }}
</template>
<template v-else>
{{ JOIN_STATUS_TXT[isDraw] }}
</template>
</div>
</div>
<div class="lottery-entry__info-bottom">
<div class="lottery-entry__draw-info">
<template v-if="isShowCountDown">
还剩
<span>{{ timeText }}</span>
{{ joinText[sessionStatus] }}
</template>
<!-- 活动已开始 & 待开奖 + 人数条件 + 留言抽奖 -->
<template
v-if="
lotteryType === LOTTERY_TYPE.message &&
sessionStatus === SESSION_STATUS.start &&
sessionCondition === LOTTERY_MESSAGE_RULES.people
"
>
还剩<span>{{ surplusJoin }}位</span>停止参与
</template>
<!-- 活动已结束 & 已开奖 -->
<template v-if="sessionStatus === SESSION_STATUS.end">
<p @click.self.stop="openResult">查看中奖纪录</p>
</template>
</div>
</div>
</div>
<div
v-if="sessionStatus === SESSION_STATUS.start && isDraw === JOIN_STATUS.no"
class="lottery-entry__operate"
@click.self="onJoinHandler"
>
立即参与
</div>
</div>
</div>
</div>
</template>
<script>
import {
LOTTERY_TYPE,
LOTTERY_TYPE_TXT,
LOTTERY_STATUS,
SESSION_STATUS,
SESSION_STATUS_TXT,
LOTTERY_MESSAGE_RULES,
JOIN_STATUS,
JOIN_STATUS_TXT
} from '@/utils/constant'
// import { getLiveLottery } from '@/api/modules/lottery'
import tippy from 'tippy.js'
import 'tippy.js/dist/tippy.css'
import 'tippy.js/animations/shift-away.css'
export default {
name: 'Index',
props: {
theme: {
type: String,
default: 'dark' // light | dark
},
liveId: {
type: [String, Number],
default: null
},
userId: {
type: [String, Number],
default: null
},
includeType: {
type: String,
default: 'live'
},
zIndex: {
type: Number,
default: 1000
},
autoClose: {
type: Boolean,
default: true
},
autoCloseDuration: {
type: Number,
default: 15000
},
retrieveApi: {
type: Function,
default: null // getLiveLottery
}
},
data() {
return {
LOTTERY_TYPE,
LOTTERY_TYPE_TXT,
SESSION_STATUS,
SESSION_STATUS_TXT,
LOTTERY_MESSAGE_RULES,
JOIN_STATUS,
JOIN_STATUS_TXT,
lotteryInfo: this.lotteryInfoTranslator(),
isInitialized: false,
isLoading: true,
timer: null,
closeTimer: null,
timeText: '',
joinText: {
[SESSION_STATUS.teaser]: '活动开始',
[SESSION_STATUS.start]: '停止参与'
},
popInstance: null
}
},
computed: {
lotteryType() {
// 默认为消息抽奖
return this.lotteryInfo.type
},
lotteryStatus() {
return this.lotteryInfo.status
},
sessionCondition() {
// 默认为时间
return this.lotteryInfo.playConfig.condition
},
sessionStatus() {
// 默认为未开始
return this.lotteryInfo.playConfig.status
},
isDraw() {
// 默认为已参与
return this.lotteryInfo.playConfig.isDraw
},
sessionStartTime() {
return this.lotteryInfo.playConfig.startTime
},
sessionEndTime() {
return this.lotteryInfo.playConfig.endTime
},
surplusJoin() {
// 剩余参与人数
const { joinNum: sum, activeNum } = this.lotteryInfo.playConfig
const surplus = sum - activeNum
return surplus < 0 ? 0 : surplus
},
isShowCountDown() {
const { sessionStatus, lotteryType, sessionCondition } = this
// 活动未开始
if (sessionStatus === SESSION_STATUS.teaser) {
return true
}
// 活动已开始(待开奖) + 时间条件 + 留言抽奖 || 非留言抽奖 + 活动已开始
const otherRules = lotteryType === LOTTERY_TYPE.message ? sessionCondition === LOTTERY_MESSAGE_RULES.time : true
if (sessionStatus === SESSION_STATUS.start && otherRules) {
return true
}
return false
}
},
mounted() {
if (this.liveId && this.includeType && this.retrieveApi) {
this.loadData()
} else {
// eslint-disable-next-line no-console
console.error('组件参数缺少')
}
},
methods: {
popoverInit() {
this.$nextTick(() => {
const self = this
const triggerDom = this.$refs?.lotteryEntryIcon
const contentDom = this.$refs?.lotteryEntryContent
this.popInstance = tippy(triggerDom, {
trigger: 'click',
interactive: true,
placement: 'left',
appendTo: document.body,
content: contentDom,
zIndex: this.zIndex,
theme: this.theme,
animation: 'shift-away',
onCreate() {
self.isInitialized = true
},
onShow(instance) {
if (self.autoClose) {
self.closeTimer = setTimeout(() => {
instance.popper.firstElementChild.classList.remove('tippy--open')
requestAnimationFrame(() => {
instance.hide()
})
}, self.autoCloseDuration)
}
},
onHide(instance) {
self.closeTimer && clearInterval(self.closeTimer)
instance.popper.firstElementChild.classList.remove('tippy--open')
},
onShown(instance) {
requestAnimationFrame(() => {
instance.popper.firstElementChild.classList.add('tippy--open')
})
}
// onHidden(instance) {
// if (!self.autoClose) {
// instance.popper.firstElementChild.classList.remove('tippy--open')
// }
// }
})
})
},
showPopover() {
if (this.popInstance?.show) {
this.popInstance.show()
}
},
hidePopover() {
if (this.popInstance?.hide) {
this.popInstance.hide()
}
},
popoverUpdate() {
if (this.popInstance?.popperInstance?.update) {
this.popInstance.popperInstance.update()
}
},
loadData() {
const { liveId: channelId, includeType, retrieveApi } = this
this.isLoading = true
retrieveApi({ channelId, type: includeType })
.then(res => {
const { code, errorCode, data } = res
if (code === 200 && errorCode === 0) {
this.lotteryInfo = this.lotteryInfoTranslator(data)
this.isLoading = false
this.runCountDown()
} else {
this.isLoading = false
}
this.popoverInit()
})
.catch(() => {
this.isLoading = false
})
},
// 打开中奖结果
openResult() {
this.$emit('openResult', this.lotteryInfo)
},
// 参与的动作
onJoinHandler() {
this.$emit('onJoin', this.lotteryInfo)
},
runCountDown() {
this.timer && clearInterval(this.timer)
const { sessionStatus, sessionStartTime, sessionEndTime } = this
const now = new Date().getTime()
let endTime = 0
if (sessionStatus === SESSION_STATUS.teaser) {
endTime = sessionStartTime * 1000
}
if (sessionStatus === SESSION_STATUS.start) {
endTime = sessionEndTime * 1000
}
let diff = parseInt(endTime - now, 10) / 1000
this.timer = setInterval(() => {
if (diff <= 0) {
clearInterval(this.timer)
return
}
diff -= 1
this.timeText = this.formatDiffTime(diff)
}, 1000)
},
formatClockNum(i) {
return i < 10 ? `0${i}` : i
},
formatDiffTime(diff) {
const { formatClockNum } = this
const d = parseInt(diff / (24 * 60 * 60), 10)
const h = parseInt((diff / (60 * 60)) % 24, 10)
const m = parseInt((diff / 60) % 60, 10)
const s = parseInt(diff % 60, 10)
if (d > 0) {
return `${formatClockNum(d)}天`
}
if (h > 0) {
return `${formatClockNum(h)}小时`
}
if (m >= 0 && s >= 0) {
return `${formatClockNum(m)}:${formatClockNum(s)}`
}
return ''
},
// 处理dms消息 数据更新
dmsListener(data) {
const { lotteryInfo, userId } = this
switch (data.cmd) {
// 参与成功
case 'draw_join_success':
if (+data.id === lotteryInfo.id && +data.playId === lotteryInfo.playConfig.id) {
// 更新参与人数
this.$set(this.lotteryInfo, 'playConfig', {
...lotteryInfo.playConfig,
activeNum: lotteryInfo.playConfig.activeNum + 1
})
if (+data.userId === +userId) {
// 更新用户是否参与
this.$set(this.lotteryInfo, 'playConfig', { ...lotteryInfo.playConfig, isDraw: 1 })
}
}
break
case 'draw_service':
if (+data.id === lotteryInfo.id) {
// 更新场次信息
if ('nextPlayConfig' in data) {
this.$set(this.lotteryInfo, 'playConfig', { ...lotteryInfo.playConfig, ...data.nextPlayConfig })
}
// 更新符合当前场次的状态
if (+data.playId === lotteryInfo.playConfig.id) {
this.$set(this.lotteryInfo, 'playConfig', { ...lotteryInfo.playConfig, status: +data.status })
}
// 重新运行倒计时
this.runCountDown()
}
break
case 'draw_bind':
// 1绑定 0解绑
if (+data.status === 1) {
this.lotteryInfo = this.lotteryInfoTranslator(data.drawInfo)
this.runCountDown()
}
break
default:
break
}
},
lotteryInfoTranslator(data) {
const playConfig = data?.playConfig || {}
return {
...data,
id: data?.id || '',
type: +data?.type || LOTTERY_TYPE.message,
status: +data?.status || LOTTERY_STATUS.teaser,
playConfig: {
...playConfig,
id: +playConfig?.id || '',
status: +playConfig?.status || SESSION_STATUS.teaser,
condition: +playConfig?.condition || LOTTERY_MESSAGE_RULES.time,
isDraw: +playConfig?.isDraw || JOIN_STATUS.no,
startTime: playConfig?.startTime || 0,
endTime: playConfig?.endTime || 0,
joinNum: +playConfig?.joinNum || 0,
activeNum: +playConfig?.activeNum || 0
}
}
}
}
}
</script>
<style lang="less">
@--baseSize: 12em; // 1px
/* tippy animation */
@keyframes pulsating {
0%,
72% {
transform: translateX(0px);
}
79% {
transform: translateX(5 / @--baseSize);
}
86% {
transform: translateX(0px);
}
93% {
transform: translateX(5 / @--baseSize);
}
100% {
transform: translateX(0px);
}
}
.tippy {
&--open {
animation: pulsating 6s infinite linear;
animation-delay: 0.5s;
}
}
/* tippy reset */
.tippy-content {
padding: 0;
}
/* tippy theme */
.tippy-box[data-theme~='light'] {
background-color: rgba(255, 255, 255, 0.89);
.tippy-arrow {
color: rgba(255, 255, 255, 0.89);
}
&.tippy-box[data-placement^='left'] {
.tippy-arrow:before {
right: -7 / @--baseSize;
}
}
.lottery-entry__info {
color: #333;
}
.lottery-entry__status-text {
color: #fa6400;
}
.lottery-entry__operate {
color: #578df0;
border-left: 1 / @--baseSize solid #cfcfcf;
}
}
.tippy-box[data-theme~='dark'] {
background-color: rgba(67, 67, 67, 0.87);
.tippy-arrow {
color: rgba(67, 67, 67, 0.87);
}
&.tippy-box[data-placement^='left'] {
.tippy-arrow:before {
right: -7 / @--baseSize;
}
}
.lottery-entry__info {
color: #fff;
}
.lottery-entry__status-text {
color: #fa6400;
}
.lottery-entry__operate {
color: #fff798;
border-left: 1 / @--baseSize solid #656565;
}
}
</style>
<style lang="less" scoped>
@--baseSize: 12em; // 1px
.lottery-entry {
font-size: 12px;
display: flex;
justify-content: flex-end;
&__icon {
position: relative;
display: flex;
justify-content: center;
align-items: flex-end;
width: 48 / @--baseSize;
height: 48 / @--baseSize;
background-image: url(https://guangdianyun.oss-cn-hangzhou.aliyuncs.com/common/img/lottery_entry_icon.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
&__status {
transform: translateY(4 / @--baseSize) scale(0.8);
display: flex;
align-items: center;
justify-content: center;
padding: 0 4 / @--baseSize;
height: 16 / @--baseSize;
line-height: 16 / @--baseSize;
font-size: 12 / @--baseSize;
background-color: #fff;
border-radius: 10 / @--baseSize;
&--teaser {
color: #f90;
}
&--start {
color: #0091ff;
}
&--end {
color: #999;
}
}
&__main {
font-size: 12px;
}
&__content {
transform: translateX(0);
border-radius: 6 / @--baseSize;
padding: 5 / @--baseSize;
font-size: 12 / @--baseSize;
display: flex;
min-width: 100 / @--baseSize;
}
&__info {
flex: 1;
white-space: nowrap;
display: flex;
flex-direction: column;
padding-right: 4 / @--baseSize;
}
&__info-top {
display: flex;
justify-content: space-between;
align-items: center;
}
&__type {
font-size: 12 / @--baseSize;
display: flex;
align-items: center;
height: 14 / @--baseSize;
line-height: 14 / @--baseSize;
}
&__status-text {
font-size: 12 / @--baseSize;
display: flex;
align-items: center;
height: 14 / @--baseSize;
line-height: 14 / @--baseSize;
}
&__info-bottom {
margin-top: 2 / @--baseSize;
}
&__draw-info {
span {
color: #578df0;
margin: 0 4 / @--baseSize;
}
p {
min-width: 90 / @--baseSize;
text-align: center;
}
}
&__operate {
width: 30 / @--baseSize;
color: #578df0;
font-weight: 500;
padding-left: 4 / @--baseSize;
border-left: 1 / @--baseSize solid #cfcfcf;
font-size: 12 / @--baseSize;
display: flex;
align-items: center;
}
}
</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>
pages/records/index.vue
<template> <template>
<div class="records" :class="{ 'records--scale': isShowDetail }"> <div class="records">
<van-nav-bar fixed title="抽奖记录" left-arrow @click-left="onClickLeft" />
<van-pull-refresh v-model="isRefreshing" class="records__refresh" @refresh="onRefresh"> <van-pull-refresh v-model="isRefreshing" class="records__refresh" @refresh="onRefresh">
<van-list <van-list
v-model="isLoading" v-model="isLoading"
...@@ -38,7 +39,6 @@ ...@@ -38,7 +39,6 @@
/> />
您还没有抽奖记录 您还没有抽奖记录
</div> </div>
<DetailPopup :id="detailId" v-model="isShowDetail"></DetailPopup>
</div> </div>
</template> </template>
...@@ -48,9 +48,7 @@ import { WRITEOFF_STATUS_TXT } from '@/utils/constant' ...@@ -48,9 +48,7 @@ import { WRITEOFF_STATUS_TXT } from '@/utils/constant'
export default { export default {
name: 'Records', name: 'Records',
components: { components: {},
DetailPopup: () => import('@/components/Records/DetailPopup')
},
data() { data() {
return { return {
WRITEOFF_STATUS_TXT, WRITEOFF_STATUS_TXT,
...@@ -60,9 +58,7 @@ export default { ...@@ -60,9 +58,7 @@ export default {
isError: false, isError: false,
hasMore: true, hasMore: true,
page: 1, page: 1,
pageSize: 10, pageSize: 10
isShowDetail: false,
detailId: null
} }
}, },
computed: { computed: {
...@@ -70,6 +66,21 @@ export default { ...@@ -70,6 +66,21 @@ export default {
return !this.isLoading && !this.hasMore && this.recordList.length === 0 return !this.isLoading && !this.hasMore && this.recordList.length === 0
} }
}, },
watch: {
// isShowDetail(val) {
// if (val) {
// const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
// this.scrollTop = scrollTop
// return
// }
// if (!val && this.scrollTop) {
// this.$nextTick(() => {
// document.documentElement.scrollTop = document.body.scrollTop = this.scrollTop
// this.scrollTop = null
// })
// }
// }
},
methods: { methods: {
loadData() { loadData() {
const { page: currentPage, pageSize: num, recordList: currentList } = this const { page: currentPage, pageSize: num, recordList: currentList } = this
...@@ -108,8 +119,16 @@ export default { ...@@ -108,8 +119,16 @@ export default {
this.loadData() this.loadData()
}, },
openPopup(item) { openPopup(item) {
this.isShowDetail = true this.$router.push({
this.detailId = item.id path: '/recordDetail',
query: {
uin: this.$route?.query?.uin || '',
detailId: item.id
}
})
},
onClickLeft() {
window.history.back()
} }
} }
} }
...@@ -121,11 +140,23 @@ export default { ...@@ -121,11 +140,23 @@ export default {
height: 100%; height: 100%;
transition: all 0.5s; transition: all 0.5s;
background-color: #fff; background-color: #fff;
// &--scale {
&--scale { // border-radius: 10px;
border-radius: 10px; // overflow: hidden;
overflow: hidden; // transform: scale(0.96);
transform: scale(0.96); // }
.van-nav-bar {
background: url('https://static-production.guangdianyun.tv/my/2.2.0/img/top-bg.bc50fdc.png');
background-size: 100% auto;
}
::v-deep .van-nav-bar__title {
color: #fff;
}
::v-deep .van-icon-arrow-left {
color: #fff;
}
&__refresh {
padding-top: 46px;
} }
&__list { &__list {
padding: 0 16px; padding: 0 16px;
......
yarn.lock
...@@ -1431,7 +1431,7 @@ ...@@ -1431,7 +1431,7 @@
resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.15.tgz#6a9d143f7f4f49db2d782f9e1c8839a29b43ae23" resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.15.tgz#6a9d143f7f4f49db2d782f9e1c8839a29b43ae23"
integrity sha512-15spi3V28QdevleWBNXE4pIls3nFZmBbUGrW9IVPwiQczuSb9n76TCB4bsk8TSel+I1OkHEdPhu5QKMfY6rQHA== integrity sha512-15spi3V28QdevleWBNXE4pIls3nFZmBbUGrW9IVPwiQczuSb9n76TCB4bsk8TSel+I1OkHEdPhu5QKMfY6rQHA==
"@popperjs/core@^2.8.3", "@popperjs/core@^2.9.2": "@popperjs/core@^2.9.2":
version "2.9.2" version "2.9.2"
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.2.tgz#adea7b6953cbb34651766b0548468e743c6a2353" resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.2.tgz#adea7b6953cbb34651766b0548468e743c6a2353"
integrity sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q== integrity sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==
...@@ -5945,10 +5945,10 @@ lodash@^4.15.0, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17. ...@@ -5945,10 +5945,10 @@ lodash@^4.15.0, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
lotteries@^1.2.0: lotteries@^1.2.1:
version "1.2.0" version "1.2.1"
resolved "https://registry.npmmirror.com/lotteries/-/lotteries-1.2.0.tgz#3618790ebcedaaa15d301c06a4eca21af08f0152" resolved "https://registry.yarnpkg.com/lotteries/-/lotteries-1.2.1.tgz#be7646516184c1afb7eaa7706a3f2fdc28977db8"
integrity sha512-61UppC/jWn1oj8svSr4Uq+5sbTeFaQeRmteSJDwvsub79wdt9B3dRDqjLOiBUpW6pqW/giyVlKXclPFnQPiNbQ== integrity sha512-etHCCqwfCK3NW54p7TdyqwoMOIcJG6clDDzzEeROS7zgJ5xpKqe33UxeTf4R7SmDyQVm+ecex1gkz0+XOagfIQ==
dependencies: dependencies:
core-js "^3.6.5" core-js "^3.6.5"
matter-js "^0.18.0" matter-js "^0.18.0"
...@@ -9229,13 +9229,6 @@ tiny-emitter@^2.0.0: ...@@ -9229,13 +9229,6 @@ tiny-emitter@^2.0.0:
resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423" resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q== integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
tippy.js@^6.3.1:
version "6.3.1"
resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.1.tgz#3788a007be7015eee0fd589a66b98fb3f8f10181"
integrity sha512-JnFncCq+rF1dTURupoJ4yPie5Cof978inW6/4S6kmWV7LL9YOSEVMifED3KdrVPEG+Z/TFH2CDNJcQEfaeuQww==
dependencies:
"@popperjs/core" "^2.8.3"
tmp@^0.0.33: tmp@^0.0.33:
version "0.0.33" version "0.0.33"
resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9" resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
......
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