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