Skip to content

activities / web-lottery

Go to a project
Commit 44d832c4 by Lays-lzq
Options

Merge branch 'master' of gitlab.aodianyun.com:activities/web-lottery into feature/cuc

parents 12025fa8 8604d8bf
Showing with 1618 additions and 220 deletions
CHANGELOG.md
...@@ -2,6 +2,78 @@ ...@@ -2,6 +2,78 @@
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
### [1.3.6](https://gitlab.aodianyun.com/activities/web-lottery/compare/v1.3.5...v1.3.6) (2023-04-12)
### Features
* 交互优化 ([eed16ee](https://gitlab.aodianyun.com/activities/web-lottery/commit/eed16eeec34a80771f7979c857b7cc0a7b48c117))
* 交互优化 ([017c6b1](https://gitlab.aodianyun.com/activities/web-lottery/commit/017c6b196ff435fdcca29da9b928bff5a5f0961e))
* 优化中奖信息 ([1cb519b](https://gitlab.aodianyun.com/activities/web-lottery/commit/1cb519b8619c8d8a679f8fc0fa148da1faf1048d))
### [1.3.5](https://gitlab.aodianyun.com/activities/web-lottery/compare/v1.3.4...v1.3.5) (2023-01-10)
### Features
* 样式优化 ([64b16bf](https://gitlab.aodianyun.com/activities/web-lottery/commit/64b16bf64ba0a15caa8380325bd84d1af7ae3757))
### [1.3.4](https://gitlab.aodianyun.com/activities/web-lottery/compare/v1.3.3...v1.3.4) (2023-01-10)
### Features
* 抽奖信息同步后台 ([8cf648e](https://gitlab.aodianyun.com/activities/web-lottery/commit/8cf648e306266ab63364f726c63a94658f477d4a))
* 更新config ([d3349d0](https://gitlab.aodianyun.com/activities/web-lottery/commit/d3349d0235c5534b79a9a9574f25c842a9174e87))
* 新增中奖说明 ([0c98f18](https://gitlab.aodianyun.com/activities/web-lottery/commit/0c98f182496df0712dbabde268b4157a27dd7ef3))
* 新增中奖说明 ([a00f565](https://gitlab.aodianyun.com/activities/web-lottery/commit/a00f565c0ce4997d01ecdeda8148635836e66367))
* 展示优化 ([0514277](https://gitlab.aodianyun.com/activities/web-lottery/commit/0514277e5911c61b1e3f5feadbdbcfbb03167134))
* 中奖详情优化 ([17edb7d](https://gitlab.aodianyun.com/activities/web-lottery/commit/17edb7d525e39b6901b64a41b92f3145e32a70fb))
### [1.3.3](https://gitlab.aodianyun.com/activities/web-lottery/compare/v1.3.2...v1.3.3) (2022-11-03)
### Features
* 抽奖新增福袋、宝箱 ([d155896](https://gitlab.aodianyun.com/activities/web-lottery/commit/d15589639500d3154a9c97af634125bd76f9891a))
* 更改滚动条布局 ([9783b6e](https://gitlab.aodianyun.com/activities/web-lottery/commit/9783b6efa73ca7e472c2c819273f6ab85927c56b))
* 更新config版本 ([ff054ff](https://gitlab.aodianyun.com/activities/web-lottery/commit/ff054ffe479e21d9575eefe2e490bba8a25d3bce))
* 修复参与人数模式下的错误 ([ce6f971](https://gitlab.aodianyun.com/activities/web-lottery/commit/ce6f971aa4532a852953e6df1e51f7291e1af195))
* 修复抽奖记录、手动上线时间显示问题 ([901a041](https://gitlab.aodianyun.com/activities/web-lottery/commit/901a0414843b137a8e4555045f192cf6d2c89042))
* 修复抽奖记录、手动上线时间显示问题 ([42fbe75](https://gitlab.aodianyun.com/activities/web-lottery/commit/42fbe75f9eedb1d5484275c5e6a60486a89a0e89))
* 修复toast只弹一次的问题 ([f506751](https://gitlab.aodianyun.com/activities/web-lottery/commit/f506751e5d3ba80df43c907da849b5d30ba36425))
* 样式调整 ([3aefc40](https://gitlab.aodianyun.com/activities/web-lottery/commit/3aefc40986b882e382e85f34a35be0d438be8676))
* 样式调整 ([683e8ac](https://gitlab.aodianyun.com/activities/web-lottery/commit/683e8ac6339bba1630f302dd4114f2e03f644fe6))
* 样式更改 ([e91fcc9](https://gitlab.aodianyun.com/activities/web-lottery/commit/e91fcc9b6dd6b1bd84256180e27e12b0d7494ad9))
* **cbnclouds:** 私有环境接口统一线上接口规则 ([34d1a64](https://gitlab.aodianyun.com/activities/web-lottery/commit/34d1a64ab3eaa50f65880d7bb1ea3695a81a217f))
* **config:** 集成配置中心 & 统一全局变量名 & 统一工程命令 ([c66ea3c](https://gitlab.aodianyun.com/activities/web-lottery/commit/c66ea3c2b21ac08cba9cae196d8a509be8a2e83a))
* **config:** update config ([a3d0778](https://gitlab.aodianyun.com/activities/web-lottery/commit/a3d0778dab0d6cb97b687565b7a88dfe55a3331d))
### Bug Fixes
* **login:** 修复登录逻辑中错误未捕获的问题 ([5ab4349](https://gitlab.aodianyun.com/activities/web-lottery/commit/5ab4349b03d91db816a26705617d696467c7fb63))
* **nuxtconfgi:** 修复webpack-define-plugin挂载数据暴露ak的问题 ([86d1aa3](https://gitlab.aodianyun.com/activities/web-lottery/commit/86d1aa33e78985385f5a7186584bf233b466d16f))
### [1.3.2](http://gitlab.aodianyun.com/activities/web-lottery/compare/v1.3.0...v1.3.2) (2022-10-07)
### Features
* 新增手动设置抽奖 ([12bae56](http://gitlab.aodianyun.com/activities/web-lottery/commit/12bae567615aad29ef744b78cccf9f23cd2ea0af))
### Bug Fixes
* **nuxtconfgi:** 修复webpack-define-plugin挂载数据暴露ak的问题 ([f71855a](http://gitlab.aodianyun.com/activities/web-lottery/commit/f71855a3c1c22139eaf7dd3e6852c86b078ab7a1))
### [1.3.1](https://gitlab.aodianyun.com/activities/web-lottery/compare/v1.3.0...v1.3.1) (2022-08-04)
### Features
* 新增手动设置抽奖 ([12bae56](https://gitlab.aodianyun.com/activities/web-lottery/commit/12bae567615aad29ef744b78cccf9f23cd2ea0af))
## [1.3.0](https://gitlab.aodianyun.com/activities/web-lottery/compare/v1.2.2...v1.3.0) (2022-04-26) ## [1.3.0](https://gitlab.aodianyun.com/activities/web-lottery/compare/v1.2.2...v1.3.0) (2022-04-26)
......
components/Common/ComplaintsDeal.vue
...@@ -13,6 +13,7 @@ export default { ...@@ -13,6 +13,7 @@ export default {
data() { data() {
return { return {
color: '', color: '',
bgColor: '',
entry: null, entry: null,
body: null body: null
} }
...@@ -23,8 +24,9 @@ export default { ...@@ -23,8 +24,9 @@ export default {
}) })
}, },
mounted() { mounted() {
Bus.$on('initDeal', color => { Bus.$on('initDeal', (color, bgColor) => {
this.color = color this.color = color
this.bgColor = bgColor
this.init() this.init()
this.dealAnimation() this.dealAnimation()
}) })
...@@ -44,7 +46,7 @@ export default { ...@@ -44,7 +46,7 @@ export default {
height: '0.62667rem', height: '0.62667rem',
right: '0.13333rem', right: '0.13333rem',
bottom: '0.33333rem', bottom: '0.33333rem',
zIndex: 6, zIndex: 51,
background: '#fff', background: '#fff',
iconColor: '#80411a', iconColor: '#80411a',
transition: 'all 0.25s cubic-bezier(0.55, 0, 0.1, 1)' transition: 'all 0.25s cubic-bezier(0.55, 0, 0.1, 1)'
...@@ -52,6 +54,9 @@ export default { ...@@ -52,6 +54,9 @@ export default {
if (this.color) { if (this.color) {
Object.assign(defaultEntryStyle, { iconColor: this.color }) Object.assign(defaultEntryStyle, { iconColor: this.color })
} }
if (this.bgColor) {
Object.assign(defaultEntryStyle, { background: this.bgColor })
}
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
complaintsDeal({ complaintsDeal({
...@@ -59,7 +64,7 @@ export default { ...@@ -59,7 +64,7 @@ export default {
props: { props: {
// rootFontSize: '.62667rem', // rootFontSize: '.62667rem',
defaultEntryStyle, defaultEntryStyle,
zIndex: 999, zIndex: 51,
uin, uin,
url: window.location.href, url: window.location.href,
company: '管理员', company: '管理员',
...@@ -94,14 +99,20 @@ export default { ...@@ -94,14 +99,20 @@ export default {
dealAnimation() { dealAnimation() {
setTimeout(() => { setTimeout(() => {
this.entry = document.querySelector('.entry') this.entry = document.querySelector('.entry')
this.entry.classList.add('sidebar-hidden-scroll')
this.body = document.body this.body = document.body
this.body.addEventListener('touchstart', () => { this.body.addEventListener('touchstart', () => {
this.body.addEventListener('touchmove', this.dealScrollOn) this.body.addEventListener('touchmove', this.dealScrollOn)
}) })
this.body.addEventListener('touchend', () => { this.body.addEventListener('touchend', () => {
this.body.removeEventListener('touchmove', this.dealScrollOn) this.body.removeEventListener('touchmove', this.dealScrollOn)
this.dealScrollOff() // this.dealScrollOff()
})
this.entry.addEventListener('click', () => {
if (this.entry && this.entry.classList.contains('sidebar-hidden-scroll')) {
this.entry.classList.remove('sidebar-hidden-scroll')
return false
}
}) })
}, 500) }, 500)
}, },
......
components/Lottery/Instant/Main.vue
...@@ -269,7 +269,7 @@ export default { ...@@ -269,7 +269,7 @@ export default {
methods: { methods: {
...mapActions({ jumpToLogin: 'users/jumpToLogin', updateInfo: 'lottery/updateInfo' }), ...mapActions({ jumpToLogin: 'users/jumpToLogin', updateInfo: 'lottery/updateInfo' }),
// 中奖后， 关闭窗口回调 // 中奖后， 关闭窗口回调
winCloseCallback(){ winCloseCallback() {
this.isShowWin = false this.isShowWin = false
if (this.winInfo.id !== 0 && !this.isBindPhone) { if (this.winInfo.id !== 0 && !this.isBindPhone) {
this.isShowBindPhone = true this.isShowBindPhone = true
......
components/Lottery/Instant/Records.vue
...@@ -58,6 +58,10 @@ export default { ...@@ -58,6 +58,10 @@ export default {
methods: { methods: {
...mapActions({ jumpToLogin: 'users/jumpToLogin' }), ...mapActions({ jumpToLogin: 'users/jumpToLogin' }),
openRecord() { openRecord() {
if (this.recordsLayouts && this.recordsLayouts.classList.contains('sidebar-hidden-scroll')) {
this.recordsLayouts.classList.remove('sidebar-hidden-scroll')
return false
}
if (!this.isLogin) { if (!this.isLogin) {
this.$toast({ this.$toast({
message: '请先登录，正在为您转跳', message: '请先登录，正在为您转跳',
...@@ -71,6 +75,10 @@ export default { ...@@ -71,6 +75,10 @@ export default {
} }
}, },
openRecordPopup(type) { openRecordPopup(type) {
if (this.recordsLayouts && this.recordsLayouts.classList.contains('sidebar-hidden-scroll')) {
this.recordsLayouts.classList.remove('sidebar-hidden-scroll')
return false
}
this.activeTab = type this.activeTab = type
this.isShowRecordsPopup = true this.isShowRecordsPopup = true
}, },
...@@ -79,12 +87,13 @@ export default { ...@@ -79,12 +87,13 @@ export default {
}, },
recordsAnimation() { recordsAnimation() {
setTimeout(() => { setTimeout(() => {
this.recordsLayouts.classList.add('sidebar-hidden-scroll')
this.body.addEventListener('touchstart', () => { this.body.addEventListener('touchstart', () => {
this.body.addEventListener('touchmove', this.recordsScrollOn) this.body.addEventListener('touchmove', this.recordsScrollOn)
// this.recordsScrollOff()
}) })
this.body.addEventListener('touchend', () => { this.body.addEventListener('touchend', () => {
this.body.removeEventListener('touchmove', this.recordsScrollOn) this.body.removeEventListener('touchmove', this.recordsScrollOn)
this.recordsScrollOff()
}) })
}, 500) }, 500)
}, },
...@@ -108,7 +117,7 @@ export default { ...@@ -108,7 +117,7 @@ export default {
.records { .records {
&__layouts { &__layouts {
position: fixed; position: fixed;
z-index: 50; z-index: 51;
right: 10px; right: 10px;
bottom: 90px; bottom: 90px;
transition: all 0.25s cubic-bezier(0.55, 0, 0.1, 1); transition: all 0.25s cubic-bezier(0.55, 0, 0.1, 1);
......
components/Lottery/Instant/RecordsPupup.vue
...@@ -13,23 +13,26 @@ ...@@ -13,23 +13,26 @@
<div class="records-popup__list-wrapper"> <div class="records-popup__list-wrapper">
<div class="records-popup__personal-record"> <div class="records-popup__personal-record">
<div class="records-popup__record-content"> <div class="records-popup__record-content">
<div class="records-popup__phone"> <!-- <div class="records-popup__phone">
领奖手机号： 领奖手机号：
<span v-if="isBindPhone">{{ userInfo.phone }}</span> <span v-if="isBindPhone">{{ userInfo.phone }}</span>
<span v-else class="records-popup__bind-phone" @click="bindMobile">绑定手机号</span> <span v-else class="records-popup__bind-phone" @click="bindMobile">绑定手机号</span>
</div> </div> -->
<ul v-if="Object.keys(recordList).length !== 0" class="records-popup__record-list"> <ul v-if="Object.keys(recordList).length !== 0" class="records-popup__record-list">
<li v-for="(session, key, index) in recordList" :key="index"> <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__session-info">
<div class="records-popup__info-wrap"> <div class="records-popup__info-wrap">
<div v-if="session.length > 1" class="records-popup__session"> <div style="display: flex; align-items: center">
第{{ NUMBER_LIST[index + 1] }}场次 <div style="margin: 0" class="records-popup__time">
{{ (session.drawTime * 1000) | formatDate('MM-DD') }}
</div>
<div class="records-popup__session">
第{{ session.drawPlay }}场 <span v-if="session.showType === 6">直播福袋</span>
<span v-if="session.showType === 7">直播宝箱</span>
</div> </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">{{ session.prizeName }}</div>
</div> </div>
<div class="records-popup__prize-name">{{ item.prizeName }}</div>
</div> </div>
</li> </li>
</ul> </ul>
...@@ -47,7 +50,16 @@ ...@@ -47,7 +50,16 @@
<div class="records-popup__record-content"> <div class="records-popup__record-content">
<div class="records-popup__winners-list"> <div class="records-popup__winners-list">
<div v-for="(item, index) in winnersList" :key="index" class="records-popup__item"> <div v-for="(item, index) in winnersList" :key="index" class="records-popup__item">
{{ item.userNick }} 获得 <span class="records-popup__prize-name">{{ item.prizeName }}</span> <div class="records-popup__time">
{{ (item.startTime * 1000) | formatDate('MM-DD HH:mm') }}
<span v-if="item.showType === 6">福袋</span>
<span v-if="item.showType === 7">宝箱</span>
</div>
<div v-for="(i, ind) in item.data" :key="ind" class="records-popup__item-user">
<div style="margin-bottom: 13px; width: 84.5px">{{ i.userNick }}</div>
<div style="margin-bottom: 13px; margin-left: 16px">获得了</div>
<div style="margin-bottom: 13px; margin-left: 16px; color: #fe3924">{{ i.prizeName }}</div>
</div>
</div> </div>
<div v-if="winnersList.length === 0" class="records-popup__no-data">暂无数据</div> <div v-if="winnersList.length === 0" class="records-popup__no-data">暂无数据</div>
</div> </div>
...@@ -95,7 +107,8 @@ export default { ...@@ -95,7 +107,8 @@ export default {
...mapGetters({ ...mapGetters({
uin: 'users/uin', uin: 'users/uin',
userInfo: 'users/userInfo', userInfo: 'users/userInfo',
isBindPhone: 'users/isBindPhone' isBindPhone: 'users/isBindPhone',
lotteryInfo: 'lottery/lotteryInfo',
}), }),
visible: { visible: {
get() { get() {
...@@ -177,8 +190,8 @@ export default { ...@@ -177,8 +190,8 @@ export default {
<style lang='less' scoped> <style lang='less' scoped>
.records-popup { .records-popup {
width: 258px; width: 251.5px;
height: 291px; height: 292px;
background: #ffe9d8; background: #ffe9d8;
border-radius: 15px; border-radius: 15px;
overflow: visible; overflow: visible;
...@@ -249,7 +262,7 @@ export default { ...@@ -249,7 +262,7 @@ export default {
.van-tab__pane { .van-tab__pane {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 15px 0; padding: 5px 0;
} }
} }
} }
...@@ -278,6 +291,7 @@ export default { ...@@ -278,6 +291,7 @@ export default {
color: #ff0024; color: #ff0024;
font-size: 12px; font-size: 12px;
margin-top: 10px; margin-top: 10px;
margin-bottom: 8px;
} }
&__phone { &__phone {
color: #666; color: #666;
...@@ -287,6 +301,7 @@ export default { ...@@ -287,6 +301,7 @@ export default {
color: #f57641; color: #f57641;
} }
&__record-list { &__record-list {
margin-top: 12px;
li { li {
margin-bottom: 15px; margin-bottom: 15px;
&:last-child { &:last-child {
...@@ -306,21 +321,43 @@ export default { ...@@ -306,21 +321,43 @@ export default {
&__info-wrap { &__info-wrap {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 13px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 18.5px;
justify-content: space-between;
} }
&__session { &__session {
margin-right: 5px; margin-left: 20px;
font-size: 13px; font-size: 13px;
color: #333; color: #333;
} }
&__time { &__time {
color: #666; font-size: 13px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 18.5px;
margin-bottom: 13px;
} }
&__prize-name { &__prize-name {
margin: 8px 0 15px; margin: 0 0 15px;
color: #666; font-size: 13px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #fe3924;
line-height: 18.5px;
} }
&__item { &__item {
margin-bottom: 8px; margin-bottom: 8px;
&-user {
display: flex;
font-size: 13px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
line-height: 18.5px;
}
} }
&__winners-record { &__winners-record {
width: 100%; width: 100%;
...@@ -334,7 +371,7 @@ export default { ...@@ -334,7 +371,7 @@ export default {
&__no-data { &__no-data {
color: #999; color: #999;
text-align: center; text-align: center;
padding-top: 40px; padding-top: 100px;
} }
} }
</style> </style>
components/Lottery/Timing/JoinButton.vue
<template> <template>
<section class="join-button"> <section class="join-button" :class="lotteryInfo.showType === 7 ? 'treasure' : 'luckybag'">
<div class="btn-box"> <div class="btn-box" :style="{ '--btnBottom': btnBottom }">
<template v-if="+lotteryInfo.status === LOTTERY_STATUS.teaser"> <template v-if="+lotteryInfo.status === LOTTERY_STATUS.teaser">
<button v-if="lotteryInfo.condition === 1" class="join-btn pre">未开始</button> <button v-if="lotteryInfo.condition === 1" class="join-btn pre">未开始</button>
<button v-if="lotteryInfo.condition === 2" class="join-btn pre countdown"> <button v-if="lotteryInfo.condition === 2" class="join-btn pre">未开始</button>
<template v-if="hours > 0">{{ hours | filterNum }}:</template> <button v-if="lotteryInfo.condition === 3" class="join-btn pre">未开始</button>
{{ minutes | filterNum }}:{{ seconds | filterNum }}后开始
</button>
</template> </template>
<template v-if="+lotteryInfo.status === LOTTERY_STATUS.start"> <template v-if="+lotteryInfo.status === LOTTERY_STATUS.start">
<template v-if="lotteryInfo.userTimes === 0 && lotteryInfo.isDraw"> <template v-if="lotteryInfo.userTimes === 0 && lotteryInfo.isDraw">
<button class="join-btn pre">待开奖</button> <button class="join-btn pre">等待开奖</button>
</template> </template>
<template v-else> <template v-else>
<div class="btn-mask"></div> <div class="btn-mask"></div>
<button class="join-btn" @click="lottery">点击参加</button> <button class="join-btn" @click="lottery">立即参与</button>
</template> </template>
</template> </template>
<template v-if="+lotteryInfo.status === LOTTERY_STATUS.end"> <template v-if="+lotteryInfo.status === LOTTERY_STATUS.end">
<template v-if="isLogin && lotteryInfo.isDraw && lotteryInfo.isWin"> <template v-if="isLogin && lotteryInfo.isDraw && lotteryInfo.isWin">
<div class="win-result-box"> <div class="win-result-box">
<p class="win-result">恭喜您中奖！</p> <button class="join-btn">恭喜您中奖！</button>
</div> </div>
</template> </template>
<template v-if="isLogin && lotteryInfo.isDraw && !lotteryInfo.isWin"> <template v-if="isLogin && lotteryInfo.isDraw && !lotteryInfo.isWin">
<div class="win-result-box"> <div class="win-result-box">
<p class="win-result">很遗憾，您没有中奖</p> <button class="join-btn end">很遗憾，您未中奖</button>
</div> </div>
</template> </template>
<template v-if="!isLogin || !lotteryInfo.isDraw"> <template v-if="!isLogin || !lotteryInfo.isDraw">
...@@ -33,9 +31,9 @@ ...@@ -33,9 +31,9 @@
</template> </template>
</template> </template>
</div> </div>
<div v-if="+lotteryInfo.status !== LOTTERY_STATUS.end ? true : !isLogin || !lotteryInfo.isDraw" class="join-num"> <!-- <div v-if="+lotteryInfo.status !== LOTTERY_STATUS.end ? true : !isLogin || !lotteryInfo.isDraw" class="join-num">
已有 {{ lotteryInfo.activeNum }} 人参与 已有 {{ lotteryInfo.activeNum }} 人参与
</div> </div> -->
</section> </section>
</template> </template>
<script> <script>
...@@ -54,13 +52,14 @@ export default { ...@@ -54,13 +52,14 @@ export default {
data() { data() {
return { return {
LOTTERY_STATUS, LOTTERY_STATUS,
timer: null timer: null,
btnBottom: '' // 按钮下边距 为适应不同背景图
} }
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({
isLogin: 'users/isLogin', isLogin: 'users/isLogin',
lotteryInfo: 'lottery/lotteryInfo' lotteryInfo: 'lottery/lotteryInfo',
}) })
}, },
watch: { watch: {
...@@ -73,6 +72,11 @@ export default { ...@@ -73,6 +72,11 @@ export default {
}, },
mounted() { mounted() {
this.dateInit() this.dateInit()
if (this.lotteryInfo.showType === 6) {
this.btnBottom = '-10px'
} else {
this.btnBottom = '20px'
}
}, },
methods: { methods: {
dateInit() { dateInit() {
...@@ -94,28 +98,29 @@ export default { ...@@ -94,28 +98,29 @@ export default {
} }
} }
</script> </script>
<style lang="less"> <style lang="less" scoped>
@--box-width: 100px; @--box-width: 194px;
@--box-height: @--box-width; @--box-height: 78px;
@keyframes wave { // @keyframes wave {
0% { // 0% {
opacity: 0.5; // opacity: 0.5;
} // }
100% { // 100% {
opacity: 1; // opacity: 1;
transform: scale(1.1); // transform: scale(1.1);
} // }
} // }
@keyframes wavetwo { // @keyframes wavetwo {
0% { // 0% {
opacity: 1; // opacity: 1;
} // }
100% { // 100% {
opacity: 0.5; // opacity: 0.5;
} // }
} // }
.join-button { .join-button {
height: 310px;
.btn-box { .btn-box {
width: @--box-width; width: @--box-width;
min-height: @--box-height; min-height: @--box-height;
...@@ -123,7 +128,7 @@ export default { ...@@ -123,7 +128,7 @@ export default {
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: flex-end;
position: relative; position: relative;
flex-wrap: wrap; flex-wrap: wrap;
.btn-mask { .btn-mask {
...@@ -137,32 +142,6 @@ export default { ...@@ -137,32 +142,6 @@ export default {
margin: auto; margin: auto;
width: @--box-width - 16px; width: @--box-width - 16px;
height: @--box-height - 16px; height: @--box-height - 16px;
&::before {
content: '';
border-radius: 50%;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fbaca6;
animation: wave 1s ease-out infinite;
}
&:after {
content: '';
border-radius: 50%;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
width: @--box-width - 16px;
height: @--box-height - 16px;
background-color: #fbaca6;
transform: scale(1.1);
animation: wavetwo 1s ease-out infinite;
// animation-delay: 0.5s;
}
} }
.join-btn { .join-btn {
border: 0; border: 0;
...@@ -173,16 +152,22 @@ export default { ...@@ -173,16 +152,22 @@ export default {
width: @--box-width - 16px; width: @--box-width - 16px;
height: @--box-height - 16px; height: @--box-height - 16px;
line-height: @--box-height - 16px; line-height: @--box-height - 16px;
border-radius: 50%; margin-bottom: var(--btnBottom);
background-color: #e85c52; background: url(./img/button-light.png) no-repeat top;
outline: none; outline: none;
position: relative;
z-index: 1; z-index: 1;
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #db0000;
// line-height: 70px;
&.pre { &.pre {
background-color: #e77e7b; color: #ffffff;
background: url(./img/button-dark.png) no-repeat top;
} }
&.end { &.end {
background-color: #999; color: #ffffff;
background: url(./img/button-dark.png) no-repeat top;
} }
&.countdown { &.countdown {
font-size: 12px; font-size: 12px;
...@@ -219,4 +204,12 @@ export default { ...@@ -219,4 +204,12 @@ export default {
text-align: center; text-align: center;
} }
} }
.treasure {
background: url(img/treasure.png) no-repeat center;
background-size: contain;
}
.luckybag {
background: url(img/luckybag.png) no-repeat center;
background-size: contain;
}
</style> </style>
components/Lottery/Timing/Main.vue
<template> <template>
<section class="main-timing"> <div class="main-timing">
<TimingBanner class="timing-banner" :info="config[0]"></TimingBanner> <LuckyBag
<div class="prize-info"> v-if="lotteryInfo.showType === 6 || lotteryInfo.showType === 1"
<label>奖品：</label> :is-btn-loading="isBtnLoading"
<p> :is-show-win="isShowWin"
<span class="text-name">{{ config[0].name }}</span> :is-show-bind-phone="isShowBindPhone"
<span class="text-num">x {{ config[0].sum }}</span> :win-info="winInfo"
</p> @lotteryCallback="lotteryCallback"
></LuckyBag>
<Treasure
v-if="lotteryInfo.showType === 7"
:is-btn-loading="isBtnLoading"
:is-show-win="isShowWin"
:is-show-bind-phone="isShowBindPhone"
:win-info="winInfo"
@lotteryCallback="lotteryCallback"
></Treasure>
</div> </div>
<TimingStatus class="timing-status-box"></TimingStatus>
<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> </template>
<script> <script>
import { mapGetters, mapActions } from 'vuex' import { mapGetters, mapActions } from 'vuex'
import { setLottery, getUserRecord } from '@/api/modules/lottery' import { setLottery, getUserRecord } from '@/api/modules/lottery'
import Bus from '@/utils/Bus' import Bus from '@/utils/Bus'
// banner
import TimingBanner from '@/components/Lottery/Timing/TimingBanner'
// 状态信息
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 { export default {
components: { components: {
TimingBanner, LuckyBag: () => import('@/components/Lottery/Timing/type/LuckyBag'),
TimingStatus, Treasure: () => import('@/components/Lottery/Timing/type/Treasure'),
JoinButton, // Records: () => import('@/components/Lottery/Instant/Records')
BackButton,
WinPopup,
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Records: () => import('@/components/Lottery/Instant/Records')
}, },
data() { data() {
return { return {
...@@ -50,7 +37,8 @@ export default { ...@@ -50,7 +37,8 @@ export default {
playId: this.$route.query.sessionId, playId: this.$route.query.sessionId,
isShowWin: false, isShowWin: false,
isShowBindPhone: false, // 是否显示绑定手机号提示 isShowBindPhone: false, // 是否显示绑定手机号提示
winInfo: this.winInfoTranslator() winInfo: this.winInfoTranslator(),
isShowIntro: false
} }
}, },
computed: { computed: {
...@@ -98,7 +86,7 @@ export default { ...@@ -98,7 +86,7 @@ export default {
}) })
}, },
// 中奖后， 关闭窗口回调 // 中奖后， 关闭窗口回调
winCloseCallback(){ winCloseCallback() {
this.isShowWin = false this.isShowWin = false
if (this.winInfo.id !== 0 && !this.isBindPhone) { if (this.winInfo.id !== 0 && !this.isBindPhone) {
this.isShowBindPhone = true this.isShowBindPhone = true
...@@ -159,6 +147,7 @@ export default { ...@@ -159,6 +147,7 @@ export default {
this.isBtnLoading = false this.isBtnLoading = false
} else { } else {
this.$toast.fail(errorMessage) this.$toast.fail(errorMessage)
this.isBtnLoading = false
} }
}) })
} }
...@@ -167,7 +156,7 @@ export default { ...@@ -167,7 +156,7 @@ export default {
getUserRecord({ getUserRecord({
id: this.$route?.query?.id || '', id: this.$route?.query?.id || '',
uin: this.$route?.query?.uin || '', uin: this.$route?.query?.uin || '',
nowPlay: 1 nowPlay: this.lotteryInfo.nowPlay
}).then(res => { }).then(res => {
const { code, errorCode, errorMessage, data } = res const { code, errorCode, errorMessage, data } = res
if (code === 200 && errorCode === 0) { if (code === 200 && errorCode === 0) {
...@@ -184,57 +173,16 @@ export default { ...@@ -184,57 +173,16 @@ export default {
id: data?.prizeId || '', id: data?.prizeId || '',
name: data?.prizeName || '' name: data?.prizeName || ''
} }
},
goRule() {
this.isShowIntro = true
} }
} }
} }
</script> </script>
<style lang="less"> <style lang="less" scoped>
.main-timing { .main-timing {
height: 100%; height: 100%;
position: relative; position: relative;
.timing-banner {
padding-top: 115 / 330 * 100%;
position: relative;
}
.prize-info {
margin-top: 10px;
padding-left: 16px;
min-height: 20px;
line-height: 20px;
font-size: 16px;
display: flex;
align-items: center;
justify-content: left;
label {
min-width: 50px;
}
p {
flex: 1;
span {
color: #000;
&.text-num {
margin-left: 4px;
color: #999;
}
}
}
}
.timing-status-box {
padding-left: 16px;
margin-top: 10px;
height: 20px;
line-height: 20px;
font-size: 14px;
}
.join-button-box {
margin-top: 50px;
}
.back-box {
position: absolute;
bottom: 16px;
left: 0;
width: 100%;
border-radius: 22px;
}
} }
</style> </style>
components/Lottery/Timing/MiniMain.vue 0 → 100644
<template>
<div class="main-timing">
<LuckyBag
v-if="lotteryInfo.showType === 6 || lotteryInfo.showType === 1"
:is-mini="true"
:is-btn-loading="isBtnLoading"
:is-show-win="isShowWin"
:is-show-bind-phone="isShowBindPhone"
:win-info="winInfo"
:is-show-intro="isShowIntro"
class="bgluckybag"
@lotteryCallback="lotteryCallback"
@goRule="goRule"
></LuckyBag>
<Treasure
v-if="lotteryInfo.showType === 7"
:is-mini="true"
:is-btn-loading="isBtnLoading"
:is-show-win="isShowWin"
:is-show-bind-phone="isShowBindPhone"
:win-info="winInfo"
:is-show-intro="isShowIntro"
class="bgtreasure"
@lotteryCallback="lotteryCallback"
@goRule="goRule"
></Treasure>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { setLottery, getUserRecord } from '@/api/modules/lottery'
import Bus from '@/utils/Bus'
export default {
components: {
LuckyBag: () => import('@/components/Lottery/Timing/type/LuckyBag'),
Treasure: () => import('@/components/Lottery/Timing/type/Treasure'),
},
data() {
return {
isBtnLoading: false,
id: this.$route.query.id || '',
stype: this.$route.query.stype || null, // 引用类型
playId: this.$route.query.sessionId,
isShowWin: false,
isShowBindPhone: false, // 是否显示绑定手机号提示
winInfo: this.winInfoTranslator(),
isShowIntro: false
}
},
computed: {
...mapGetters({
uin: 'users/uin',
isLogin: 'users/isLogin',
lotteryInfo: 'lottery/lotteryInfo',
isBindPhone: 'users/isBindPhone',
userInfo: 'users/userInfo',
}),
backUrl() {
return this.$route.query.backUrl || ''
},
config() {
const list =
typeof this.lotteryInfo.prizeConfigs === 'object'
? Object.values(this.lotteryInfo.prizeConfigs)
: this.lotteryInfo.prizeConfigs
return list
}
},
// watch: {
// 'lotteryInfo.status': {
// handler(newVal, oldVal) {
// if (newVal === 2 && oldVal === 2 && this.lotteryInfo.isDraw === 1) {
// this.loadWinInfo()
// }
// },
// deep: true
// }
// },
mounted() {
this.eventHubInit()
Bus.$emit('initDeal', '#db0000', '#ffdccb')
// this.loadWinInfo()
// 抽奖结果通知
Bus.$on('LotteryResult', data => {
if (data.userId === this.userInfo.id && data.isPrize === 1) {
this.updateInfo({
isWin: 1
})
}
if (this.lotteryInfo.isDraw === 1) {
this.loadWinInfo()
}
})
},
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() {
// 抽奖点击事件
if (!this.isLogin) {
this.$toast({
message: '请先登录',
duration: 1500,
onClose: () => {
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 = {
id: this.id,
uin: this.uin,
playId: this.playId,
type: this.stype || 'link',
sourceId: this.sid || this.id
}
setLottery(params).then(res => {
const { code, errorCode, errorMessage } = res
if (code === 200 && errorCode === 0) {
let times = this.lotteryInfo.userTimes
times--
let num = this.lotteryInfo.activeNum
num++
this.updateInfo({
userTimes: times,
isDraw: 1,
activeNum: num
})
this.$toast.success('参与成功')
this.isBtnLoading = false
} else {
this.$toast.fail(errorMessage)
this.isBtnLoading = false
}
})
}
},
loadWinInfo() {
getUserRecord({
id: this.$route?.query?.id || '',
uin: this.$route?.query?.uin || '',
nowPlay: this.lotteryInfo.nowPlay
}).then(res => {
const { code, errorCode, errorMessage, data } = res
if (code === 200 && errorCode === 0) {
this.winInfo = this.winInfoTranslator(data)
console.log(this.winInfo);
this.isShowWin = true
} else {
this.$toast(errorMessage)
}
})
},
winInfoTranslator(data) {
return {
...data,
id: data?.prizeId || '',
name: data?.prizeName || ''
}
},
goRule() {
this.isShowIntro = true
}
}
}
</script>
<style lang="less" scoped>
.main-timing {
height: 100%;
position: relative;
}
</style>
components/Lottery/Timing/Rewards.vue 0 → 100644
<template>
<div class="main">
<div
:style="{
height: this.$route.path === '/mini/index' ? '65.5vh' : lotteryInfo.showType === 7 ? '46.5vh' : '37.5vh'
}"
>
<div class="intro">
<div class="intro__title">活动介绍</div>
<div class="intro__detail">{{ lotteryInfo.intro }}</div>
</div>
<div class="rule">
<div class="rule__sub">本场活动奖品:</div>
<div class="intro__rewards">
<div v-for="item in lotteryInfo.prizeConfigs" :key="item.id" class="intro__rewards-item">
<img v-if="item.icon" :src="item.icon" alt="" />
<img v-else src="./img/gift.png" alt="" />
<div>{{ item.name }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { LOTTERY_STATUS } from '@/utils/constant'
// 倒计时逻辑处理
import CountDown from '@/mixins/CountDown'
export default {
mixins: [CountDown],
data() {
return {
LOTTERY_STATUS,
timer: null
}
},
computed: {
...mapGetters({
isLogin: 'users/isLogin',
lotteryInfo: 'lottery/lotteryInfo'
})
},
}
</script>
<style lang="less" scoped>
.main {
width: 100%;
height: 100%;
padding: 0 13px;
overflow-x: scroll;
display: flex;
flex-direction: column;
.intro {
// margin-bottom: 24px;
// height: 30%;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: 30px;
&__title {
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #fff6da;
line-height: 22.5px;
text-align: center;
}
// &__sub {
// font-size: 14px;
// font-family: PingFangSC-Regular, PingFang SC;
// font-weight: 400;
// color: #fff6da;
// // line-height: 20px;
// // margin-top: 4%;
// margin-left: 16px;
// }
&__detail {
width: 335px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #fff6da;
line-height: 20px;
// margin-top: 15px;
margin-left: 16px;
margin-top: 16px;
white-space: pre-wrap;
word-wrap: break-word;
}
&__rewards {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
// margin-top: 15px;
&-item {
width: 33%;
display: inline-block;
font-size: 13px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #fff6da;
line-height: 18.5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 12px;
img {
width: 48px;
height: 48px;
border-radius: 2px;
}
div {
width: 100%;
margin-top: 4px;
text-align: center;
height: 38.5px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
white-space: pre-wrap;
word-wrap: break-word;
}
}
}
}
.rule {
height: 44%;
display: flex;
flex-direction: column;
&__sub {
// font-size: 16px;
// font-family: PingFangSC-Medium, PingFang SC;
// font-weight: 500;
// color: #fff6da;
// line-height: 22.5px;
// text-align: center;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #fff6da;
line-height: 20px;
// margin-top: 4%;
margin-left: 16px;
margin-bottom: 15px;
}
&__detail {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #fff6da;
line-height: 20px;
// margin-top: 15px;
margin-left: 16px;
}
}
}
</style>
components/Lottery/Timing/RulePopup.vue 0 → 100644
<template>
<van-popup
v-model="visible"
:overlay="false"
position="bottom"
transition="van-fade"
class="introduction-popup"
z-index="49"
:class="lotteryInfo.showType === 7 ? 'bgtreasureColor' : 'bgluckybagColor'"
>
<div class="introduction-popup__main">
<Rewards></Rewards>
<div class="main-link" @click="visible = false">返回活动</div>
</div>
</van-popup>
</template>
<script>
import { mapGetters } from 'vuex'
import img from '@/assets/images/lottery/gift.png'
import Bus from '@/utils/Bus'
// 奖品介绍
import Rewards from '@/components/Lottery/Timing/Rewards'
export default {
name: 'Introduction',
components: {
Rewards
},
props: {
value: {
type: Boolean,
default: false
},
rulePosition: {
type: String,
default: 'top'
},
},
data() {
return {
img
}
},
computed: {
...mapGetters({ lotteryInfo: 'lottery/lotteryInfo' }),
visible: {
get() {
return this.value
},
set(val) {
Bus.$emit('updateMain', { isShowIntro: val })
}
}
},
methods: {
getContainer() {
return document.querySelector('.lottery-instant')
}
}
}
</script>
<style lang="less" scoped>
.introduction-popup {
width: 100%;
height: calc(100% - 46px);
&__main {
width: 100%;
height: 100%;
border-radius: 6px;
padding-bottom: 13px;
padding-top: 38px;
position: relative;
.main-link {
width: 24px;
height: 74px;
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #db0000;
line-height: 13px;
writing-mode: tb-rl;
text-align: center;
background: url(img/link.png) no-repeat center;
background-size: cover;
position: absolute;
right: 0;
top: 20px;
padding-right: 3px;
}
}
}
.bgtreasureColor {
background-color: #ed112f;
}
.bgluckybagColor {
background-color: #fb3f42;
}
</style>
components/Lottery/Timing/TimingBanner.vue
...@@ -30,7 +30,7 @@ export default { ...@@ -30,7 +30,7 @@ export default {
} }
} }
</script> </script>
<style lang="less"> <style lang="less" scoped>
.banner-box { .banner-box {
padding: 10px; padding: 10px;
position: absolute; position: absolute;
......
components/Lottery/Timing/TimingStatus.vue
<template> <template>
<section class="timing-status"> <section class="timing-status">
<template v-if="type === 1"> <template v-if="type === 1">
<div v-if="state !== 2" class="countdown-box"> <div class="countdown-box">
<label>倒计时：</label> <div v-if="state !== 2" class="countdown-box__time">
<p> <label v-if="state === 0">抽奖倒计时：</label>
<span class="text-time"> <label v-else-if="state === 1">开奖倒计时：</label>
<template v-if="hours > 0">{{ hours | filterNum }} : </template>{{ minutes | filterNum }} : <span v-if="lotteryInfo.startModel === 'manual' && state === 0">
{{ seconds | filterNum }} 00:{{ lotteryInfo.countDown | filterNum }}:00
<template v-if="state === 0">后开始</template>
<template v-else-if="state === 1">后结束</template>
</span> </span>
</p> <span v-else>
<template v-if="hours > 0">{{ hours | filterNum }}:</template>{{ minutes | filterNum }}:{{
seconds | filterNum
}}
</span>
</div>
<div v-else class="countdown-box__time">抽奖已结束</div>
</div> </div>
<span v-else class="end-lottery">抽奖已结束</span>
</template> </template>
<template v-if="type === 2"> <template v-if="type === 2">
<div class="joinnum-box"> <div class="joinnum-box">
<p>参与人数满 {{ lotteryInfo.joinNum }} 人自动开奖（当前参与 {{ lotteryInfo.activeNum }} 人）</p> <p>参与人数满 {{ lotteryInfo.joinNum }} 人自动开奖 ( 当前参与 {{ lotteryInfo.activeNum }} 人 )</p>
</div>
</template>
<template v-if="type === 3">
<div class="joinnum-box">
<p>当前参与 {{ lotteryInfo.activeNum }} 人 </p>
</div> </div>
</template> </template>
</section> </section>
...@@ -72,7 +80,7 @@ export default { ...@@ -72,7 +80,7 @@ export default {
methods: { methods: {
dateInit() { dateInit() {
// 倒计时开始 // 倒计时开始
if (this.state === 0) { if (this.state === 0 && this.lotteryInfo.startModel !== 'manual') {
this.lotteryInfo.startTime && this.reloadTime(this.lotteryInfo.startTime * 1000) this.lotteryInfo.startTime && this.reloadTime(this.lotteryInfo.startTime * 1000)
} else if (this.state === 1) { } else if (this.state === 1) {
this.lotteryInfo.endTime && this.reloadTime(this.lotteryInfo.endTime * 1000) this.lotteryInfo.endTime && this.reloadTime(this.lotteryInfo.endTime * 1000)
...@@ -89,14 +97,30 @@ export default { ...@@ -89,14 +97,30 @@ export default {
} }
</script> </script>
<style lang="less"> <style lang="less" scoped>
.timing-status { .timing-status {
position: relative;
z-index: 2;
.countdown-box { .countdown-box {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: left; justify-content: center;
font-size: 13px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #fff6da;
line-height: 18.5px;
&__time {
display: flex;
align-items: center;
justify-content: center;
width: 144px;
height: 23px;
background: rgba(0, 0, 0, 0.21);
border-radius: 11.5px;
}
label { label {
color: #999999; // color: #999999;
min-width: 58px; min-width: 58px;
} }
p { p {
...@@ -115,9 +139,22 @@ export default { ...@@ -115,9 +139,22 @@ export default {
color: #999; color: #999;
} }
.joinnum-box { .joinnum-box {
font-size: 14px; display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #fff6da;
line-height: 18.5px;
p { p {
color: #999999; display: flex;
align-items: center;
justify-content: center;
padding: 0 9px;
height: 23px;
background: rgba(0, 0, 0, 0.21);
border-radius: 11.5px;
} }
} }
} }
......
components/Lottery/Timing/WinPopup.vue 0 → 100644
<template>
<van-popup
v-model="visible"
class="win-popup"
closeable
close-icon="close"
:style="{ background: 'transparent' }"
@click-close-icon="onClose"
>
<div v-if="type === 'luckybag'" class="lucky-popup__container">
<div class="lucky-popup__wrap">
<div class="lucky-popup__content">
<slot v-if="isWin" name="title-bg"></slot>
<div v-if="isWin" class="lucky-popup__win-info">
<div class="lucky-popup__title">恭喜获得</div>
<div class="lucky-popup__prize-img">
<img v-if="info.prizeIcon" :src="info.prizeIcon" alt="" />
<img v-else src="@/assets/images/lottery/gift.png" alt="" />
</div>
<div class="lucky-popup__prize-name">
{{ info.name }}
</div>
</div>
<div v-else class="lucky-popup__thanks">
<slot name="thanks">
<div
style="
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #fd0c2a;
line-height: 25px;
margin-bottom: 10px;
"
>
很遗憾
</div>
<div
style="
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #fd0c2a;
line-height: 20px;
"
>
您未抽中福袋
</div>
</slot>
</div>
</div>
<div class="lucky-popup__footer">
<van-button
class="lucky-popup__sure"
color="linear-gradient(180deg, #FEDF96, #FF8A42)"
round
@click="visible = false"
>我知道了</van-button
>
</div>
</div>
</div>
<div v-if="type === 'treasure'" class="treasure-popup__container">
<div class="treasure-popup__wrap">
<div class="treasure-popup__content">
<slot v-if="isWin" name="title-bg"></slot>
<div v-if="isWin" class="treasure-popup__win-info">
<div class="treasure-popup__title">恭喜获得</div>
<div class="treasure-popup__prize-img">
<img v-if="info.prizeIcon" :src="info.prizeIcon" alt="" />
<img v-else src="@/assets/images/lottery/gift.png" alt="" />
</div>
<div class="treasure-popup__prize-name">
{{ info.name }}
</div>
</div>
<div v-else class="treasure-popup__thanks">
<slot name="thanks">
<div
style="
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #fd0c2a;
line-height: 25px;
margin-bottom: 10px;
"
>
很遗憾
</div>
<div
style="
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #fd0c2a;
line-height: 20px;
"
>
您未抽中宝箱
</div>
</slot>
</div>
</div>
<div class="treasure-popup__footer">
<van-button
class="treasure-popup__sure"
color="linear-gradient(180deg, #FEDF96, #FF8A42)"
round
@click="visible = false"
>我知道了</van-button
>
</div>
</div>
</div>
</van-popup>
</template>
<script>
import Bus from '@/utils/Bus'
export default {
name: 'WinPopup',
components: {},
props: {
value: {
type: Boolean,
default: false
},
info: {
type: Object,
default: () => ({})
},
type: {
type: String,
default: ''
}
},
computed: {
visible: {
get() {
return this.value
},
set(val) {
Bus.$emit('updateMain', { isShowWin: val })
}
},
isWin() {
return !!+this.info.id
}
},
methods: {
know() {
Bus.$emit('updateMain', { func: 'winCallback' })
},
onClose() {
Bus.$emit('updateMain', { func: 'winCloseCallback' })
}
}
}
</script>
<style lang="less" scoped>
@containerWidth: 326px;
@wrapWidth: 275px;
@wrapHeight: 292px;
.win-popup {
overflow: visible;
/deep/ .van-popup__close-icon {
right: 10px;
top: -16px;
font-size: 22px;
color: #fff;
}
}
.lucky-popup {
&__container {
width: 100%;
height: 100%;
position: relative;
width: @containerWidth;
}
&__wrap {
margin: 0 auto;
width: 275px;
height: 321px;
overflow: hidden;
background-image: url('img/luckybag-popup.png');
background-size: cover;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
&__content {
color: #fff;
font-size: 16px;
height: 175px;
width: 100%;
overflow: hidden;
}
&__win-info {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
&__title {
width: 100%;
text-align: center;
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #fd0c2a;
line-height: 25px;
height: 18px;
margin: 7px 0 13px;
}
&__prize-img {
img {
display: block;
width: 65px;
}
}
&__prize-name {
width: 100%;
padding: 0 10px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #fd0c2a;
line-height: 16.5px;
margin-top: 11px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
}
&__thanks {
margin-top: -24px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
&__footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 65px;
}
&__sure {
width: 126px;
height: 33px;
line-height: 33px;
border: 0;
outline: none;
/deep/ .van-button__text {
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #c10000;
line-height: 20px;
}
}
&__win-msg {
margin: 13px 0 20px;
font-size: 12px;
color: #fff;
}
}
.treasure-popup {
overflow: visible;
/deep/ .van-popup__close-icon {
right: 10px;
top: -16px;
font-size: 22px;
color: #fff;
}
&__container {
width: 100%;
height: 100%;
position: relative;
width: @containerWidth;
}
&__wrap {
margin: 0 auto;
width: 275px;
height: 321px;
overflow: hidden;
background-image: url('img/treasure-popup.png');
background-size: cover;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
&__content {
color: #fff;
font-size: 16px;
height: 142px;
width: 100%;
overflow: hidden;
}
&__win-info {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
&__title {
width: 100%;
text-align: center;
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #fd0c2a;
line-height: 25px;
height: 18px;
margin: 7px 0 13px;
}
&__prize-img {
img {
display: block;
width: 65px;
}
}
&__prize-name {
width: 100%;
padding: 0 10px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #fd0c2a;
line-height: 16.5px;
margin-top: 11px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
}
&__thanks {
margin-top: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
&__footer {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
min-height: 65px;
}
&__sure {
width: 126px;
height: 33px;
line-height: 33px;
border: 0;
outline: none;
/deep/ .van-button__text {
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #c10000;
line-height: 20px;
}
}
&__win-msg {
margin: 13px 0 20px;
font-size: 12px;
color: #fff;
}
}
</style>
components/Lottery/Timing/type/LuckyBag.vue 0 → 100644
<template>
<section class="main-timing" :style="{ backgroundPosition: isMini ? '0 0' : '' }">
<div v-if="isMini" class="main-link" @click="goRule">活动介绍</div>
<TimingStatus class="timing-status-box"></TimingStatus>
<JoinButton
class="join-button-box"
:style="{ bottom: isMini ? '26%' : '51%' }"
@lottery="lotteryCallback"
></JoinButton>
<Rewards v-if="!isMini" :style="{ height: isMini ? '65.5vh' : '40.5vh' }" class="reward-box"></Rewards>
<BackButton v-if="backUrl" class="back-box" :url="backUrl"></BackButton>
<Records v-if="isMini"></Records>
<RulePopup :value="isShowIntro"></RulePopup>
<WinPopup :value="isShowWin" :info="winInfo" type="luckybag"></WinPopup>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
</section>
</template>
<script>
import { mapGetters } from 'vuex'
// banner
// import TimingBanner from '@/components/Lottery/Timing/TimingBanner'
// 状态信息
import TimingStatus from '@/components/Lottery/Timing/TimingStatus'
// 参加按钮
import JoinButton from '@/components/Lottery/Timing/JoinButton'
// 奖品介绍
import Rewards from '@/components/Lottery/Timing/Rewards'
// 返回直播间按钮
import BackButton from '@/components/Lottery/Timing/BackButton'
// 中奖弹窗
import WinPopup from '@/components/Lottery/Timing/WinPopup'
export default {
components: {
// TimingBanner,
TimingStatus,
JoinButton,
Rewards,
BackButton,
WinPopup,
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
RulePopup: () => import('@/components/Lottery/Timing/RulePopup'),
Records: () => import('@/components/Lottery/Instant/Records')
},
props: {
isMini: {
type: Boolean,
default: false
},
isBtnLoading: {
type: Boolean,
default: false
},
isShowWin: {
type: Boolean,
default: false
},
isShowBindPhone: {
type: Boolean,
default: false
},
winInfo: {
type: Object,
default: () => {
return {}
}
},
isShowIntro: {
type: Boolean,
default: false
}
},
data() {
return {
}
},
computed: {
...mapGetters({
uin: 'users/uin',
isLogin: 'users/isLogin',
lotteryInfo: 'lottery/lotteryInfo',
isBindPhone: 'users/isBindPhone'
}),
backUrl() {
return this.$route.query.backUrl || ''
},
config() {
const list =
typeof this.lotteryInfo.prizeConfigs === 'object'
? Object.values(this.lotteryInfo.prizeConfigs)
: this.lotteryInfo.prizeConfigs
return list
}
},
methods: {
lotteryCallback() {
this.$emit('lotteryCallback')
},
goRule() {
this.$emit('goRule')
// this.isShowIntro = true
}
}
}
</script>
<style lang="less" scoped>
.main-timing {
height: 100%;
position: relative;
padding-top: 20px;
background: url(../img/background-luckybag.png) no-repeat center;
background-size: cover;
.main-link {
width: 24px;
height: 74px;
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #db0000;
line-height: 13px;
writing-mode: tb-rl;
text-align: center;
background: url(../img/link.png) no-repeat center;
background-size: cover;
position: absolute;
right: 0;
top: 20px;
padding-right: 3px;
}
.timing-status-box {
// padding-left: 16px;
// margin-top: 10px;
height: 20px;
line-height: 20px;
font-size: 14px;
}
.join-button-box {
position: absolute;
width: 92%;
left: 50%;
transform: translateX(-50%);
bottom: 51%;
}
.back-box {
position: absolute;
bottom: 16px;
left: 0;
width: 100%;
border-radius: 22px;
}
.reward-box {
width: 100%;
position: absolute;
bottom: 3%;
}
}
// 样式穿透
.main-timing {
// records
/deep/ .records {
&__entry {
width: 48px;
height: 48px;
background: #ffdccb;
box-shadow: 0px 2px 8px 0px rgba(254, 35, 23, 0.5);
}
&__entry-wrap p {
font-size: 13px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #db0000;
line-height: 17px;
}
}
}
</style>
components/Lottery/Timing/type/Treasure.vue 0 → 100644
<template>
<section class="main-timing" :style="{ backgroundPosition: isMini ? '0 0' : '' }">
<div v-if="isMini" class="main-link" @click="goRule">活动介绍</div>
<TimingStatus class="timing-status-box"></TimingStatus>
<JoinButton
class="join-button-box"
:style="{ bottom: isMini ? '32%' : '49%' }"
@lottery="lotteryCallback"
></JoinButton>
<Rewards v-if="!isMini" :style="{ height: isMini ? '65.5vh' : '46.5vh' }" class="reward-box"></Rewards>
<BackButton v-if="backUrl" class="back-box" :url="backUrl"></BackButton>
<Records v-if="isMini"></Records>
<RulePopup :value="isShowIntro"></RulePopup>
<WinPopup :value="isShowWin" :info="winInfo" type="treasure"></WinPopup>
<BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
</section>
</template>
<script>
import { mapGetters } from 'vuex'
// banner
// import TimingBanner from '@/components/Lottery/Timing/TimingBanner'
// 状态信息
import TimingStatus from '@/components/Lottery/Timing/TimingStatus'
// 参加按钮
import JoinButton from '@/components/Lottery/Timing/JoinButton'
// 奖品介绍
import Rewards from '@/components/Lottery/Timing/Rewards'
// 返回直播间按钮
import BackButton from '@/components/Lottery/Timing/BackButton'
// 中奖弹窗
import WinPopup from '@/components/Lottery/Timing/WinPopup'
export default {
components: {
// TimingBanner,
TimingStatus,
JoinButton,
Rewards,
BackButton,
WinPopup,
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
RulePopup: () => import('@/components/Lottery/Timing/RulePopup'),
Records: () => import('@/components/Lottery/Instant/Records')
},
props: {
isMini: {
type: Boolean,
default: false
},
isBtnLoading: {
type: Boolean,
default: false
},
isShowWin: {
type: Boolean,
default: false
},
isShowBindPhone: {
type: Boolean,
default: false
},
winInfo: {
type: Object,
default: () => {
return {}
}
},
isShowIntro: {
type: Boolean,
default: false
}
},
data() {
return {
}
},
computed: {
...mapGetters({
uin: 'users/uin',
isLogin: 'users/isLogin',
lotteryInfo: 'lottery/lotteryInfo',
isBindPhone: 'users/isBindPhone'
}),
backUrl() {
return this.$route.query.backUrl || ''
},
config() {
const list =
typeof this.lotteryInfo.prizeConfigs === 'object'
? Object.values(this.lotteryInfo.prizeConfigs)
: this.lotteryInfo.prizeConfigs
return list
}
},
methods: {
lotteryCallback() {
this.$emit('lotteryCallback')
},
goRule() {
this.$emit('goRule')
}
}
}
</script>
<style lang="less" scoped>
.main-timing {
height: 100%;
position: relative;
padding-top: 20px;
background: url(../img/background-treasure.png) no-repeat center;
background-size: cover;
.main-link {
width: 24px;
height: 74px;
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #db0000;
line-height: 13px;
writing-mode: tb-rl;
text-align: center;
background: url(../img/link.png) no-repeat center;
background-size: cover;
position: absolute;
right: 0;
top: 20px;
padding-right: 3px;
}
.timing-status-box {
// padding-left: 16px;
// margin-top: 10px;
height: 20px;
line-height: 20px;
font-size: 14px;
}
.join-button-box {
position: absolute;
width: 92%;
left: 50%;
bottom: 49%;
transform: translateX(-50%);
}
.back-box {
position: absolute;
bottom: 16px;
left: 0;
width: 100%;
border-radius: 22px;
}
.reward-box {
width: 100%;
position: absolute;
bottom: 3%;
}
}
// 样式穿透
.main-timing {
// records
/deep/ .records {
&__entry {
width: 48px;
height: 48px;
background: #ffdccb;
box-shadow: 0px 2px 8px 0px rgba(254, 35, 23, 0.5);
}
&__entry-wrap p {
font-size: 13px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #db0000;
line-height: 17px;
}
}
}
</style>
components/Records/DetailPopup.vue
...@@ -23,10 +23,16 @@ ...@@ -23,10 +23,16 @@
<span v-if="detailInfo.drawTime">{{ (detailInfo.drawTime * 1000) | formatDate('YYYY-MM-DD HH:mm') }}</span> <span v-if="detailInfo.drawTime">{{ (detailInfo.drawTime * 1000) | formatDate('YYYY-MM-DD HH:mm') }}</span>
</li> </li>
<li> <li>
<label v-if="detailInfo.drawIntro">抽奖介绍：</label>
<label v-if="detailInfo.winningInstructions">中奖说明：</label>
<span v-if="detailInfo.drawIntro">{{ detailInfo.drawIntro }}</span>
<span v-if="detailInfo.winningInstructions">{{ detailInfo.winningInstructions }}</span>
</li>
<li>
<label>获得奖品：</label> <label>获得奖品：</label>
<div> <div>
<p>{{ detailInfo.prizeName }}</p> <p>{{ detailInfo.prizeName }}</p>
<img v-lazy="detailInfo.prizeIcon" class="detail-popup__info-img" alt="" /> <img v-if="detailInfo.prizeIcon" v-lazy="detailInfo.prizeIcon" class="detail-popup__info-img" alt="" />
</div> </div>
</li> </li>
<li> <li>
......
nuxt.config.js
...@@ -61,7 +61,11 @@ const gtagConfig = IS_USE_OSS ...@@ -61,7 +61,11 @@ const gtagConfig = IS_USE_OSS
export default { export default {
buildDir: 'nuxt-dist', buildDir: 'nuxt-dist',
env, env: {
...env,
UPLOADER_ACCESS: '',
STATIC_OSS_ACCESS: ''
},
router: { router: {
base: BASE_URL, base: BASE_URL,
middleware: ['device'], middleware: ['device'],
......
package.json
{ {
"name": "web-lottery", "name": "web-lottery",
"version": "1.3.0", "version": "1.3.6",
"private": true, "private": true,
"license": "UNLICENSED", "license": "UNLICENSED",
"scripts": { "scripts": {
"release": "standard-version",
"release:minor": "standard-version -r minor",
"release:patch": "standard-version -r patch",
"serve:dev": "cross-env mode=test nuxt", "serve:dev": "cross-env mode=test nuxt",
"serve:pre": "cross-env mode=preview nuxt", "serve:pre": "cross-env mode=preview nuxt",
"serve:prod": "cross-env mode=production nuxt", "serve:prod": "cross-env mode=production nuxt",
...@@ -47,7 +50,7 @@ ...@@ -47,7 +50,7 @@
}, },
"dependencies": { "dependencies": {
"@easy-messenger/client-connection": "^1.0.3", "@easy-messenger/client-connection": "^1.0.3",
"@gdyfe/config": "^1.2.0", "@gdyfe/config": "^1.2.8",
"@gdyfe/gdy-component-lib": "^0.4.1", "@gdyfe/gdy-component-lib": "^0.4.1",
"@gdyfe/rop-client": "1.1.10", "@gdyfe/rop-client": "1.1.10",
"@nuxtjs/axios": "^5.13.6", "@nuxtjs/axios": "^5.13.6",
......
pages/list/index.vue
...@@ -7,10 +7,12 @@ ...@@ -7,10 +7,12 @@
{{ getStatus(item).label }} {{ getStatus(item).label }}
</div> </div>
<div class="session-list__time"> <div class="session-list__time">
第{{ index + 1 }}场： 第{{ index + 1 }}场<span v-if="getStatus(item).label === '已结束'"
>：
{{ (item.startTime * 1000) | formatDate('MM/DD HH:mm') }} {{ (item.startTime * 1000) | formatDate('MM/DD HH:mm') }}
— —
{{ (item.endTime * 1000) | formatDate('MM/DD HH:mm') }} {{ (item.endTime * 1000) | formatDate('MM/DD HH:mm') }}</span
>
</div> </div>
</div> </div>
</li> </li>
......
pages/message/index.vue
...@@ -43,15 +43,30 @@ ...@@ -43,15 +43,30 @@
<template v-if="winInfo.exchangeType === LOTTERY_EXCHANGE_TYPE.offline"> <template v-if="winInfo.exchangeType === LOTTERY_EXCHANGE_TYPE.offline">
前往<span @click="openRecordHandler">抽奖记录</span>使用兑换码进行兑换 前往<span @click="openRecordHandler">抽奖记录</span>使用兑换码进行兑换
</template> </template>
<!-- 实物 邮寄 -->
<template v-if="winInfo.exchangeType === LOTTERY_EXCHANGE_TYPE.mailing && !winInfo.address">
填写<span @click="openAddressHandler">收货地址</span>等待官方邮寄
</template>
<!-- 虚拟物品 --> <!-- 虚拟物品 -->
<!-- <template v-if="lotteryInfo.prizeType === LOTTERY_MESSAGE_PRIZE_TYPE.online" <!-- <template v-if="lotteryInfo.prizeType === LOTTERY_MESSAGE_PRIZE_TYPE.online"
>已进入您<span @click="openWalletHandler">个人中心-钱包</span>请查收</template >已进入您<span @click="openWalletHandler">个人中心-钱包</span>请查收</template
> --> > -->
</div> </div>
<div
v-if="winInfo.exchangeType === LOTTERY_EXCHANGE_TYPE.mailing"
class="lottery-message__rules"
@click="openAddressHandler"
>
<p class="lottery-message__rules-title">收货地址：</p>
<div class="lottery-message__rules-content">
<div>
<div v-if="!winInfo.address">请填写<span> 收货地址 </span>等待官方邮寄</div>
<div v-else>
<div class="title">{{ winInfo.name }} {{ winInfo.contactPhone }}</div>
<div class="adress">{{ winInfo.address }}</div>
</div>
</div>
<!-- <div class="img"> -->
<img v-if="!winInfo.address" src="./img/right.png" alt="" />
<!-- </div> -->
</div>
</div>
<div class="lottery-message__rules"> <div class="lottery-message__rules">
<p class="lottery-message__rules-title">中奖说明：</p> <p class="lottery-message__rules-title">中奖说明：</p>
<div class="lottery-message__rules-content">{{ lotteryInfo.winningInstructions }}</div> <div class="lottery-message__rules-content">{{ lotteryInfo.winningInstructions }}</div>
...@@ -137,6 +152,11 @@ export default { ...@@ -137,6 +152,11 @@ export default {
contactPhone: addressInfo?.mobile || '', contactPhone: addressInfo?.mobile || '',
name: addressInfo?.name || '' name: addressInfo?.name || ''
} }
this.winInfo = { ...this.winInfo,
address: `${addressInfo?.province || ''}-${addressInfo?.city || ''}-${addressInfo?.area || ''}-${addressInfo?.detail}`,
contactPhone: addressInfo?.mobile || '',
name: addressInfo?.name || ''
}
setLotteryAddress(params).then(res => { setLotteryAddress(params).then(res => {
const { code, errorCode, errorMessage } = res const { code, errorCode, errorMessage } = res
if (code === 200 && errorCode === 0) { if (code === 200 && errorCode === 0) {
...@@ -214,6 +234,9 @@ export default { ...@@ -214,6 +234,9 @@ export default {
}) })
}, },
openAddressHandler() { openAddressHandler() {
if (this.winInfo.address) {
return
}
// 触发打开编辑地址 // 触发打开编辑地址
this.connection.emit('openAddressHandler', this.lotteryInfo) this.connection.emit('openAddressHandler', this.lotteryInfo)
}, },
...@@ -305,8 +328,8 @@ export default { ...@@ -305,8 +328,8 @@ export default {
color: #ff2a2a; color: #ff2a2a;
} }
&__rules { &__rules {
width: 100%; width: 90%;
margin-top: 20px; margin-top: 8px;
max-height: 100px; max-height: 100px;
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
...@@ -315,13 +338,41 @@ export default { ...@@ -315,13 +338,41 @@ export default {
padding: 10px; padding: 10px;
font-size: 12px; font-size: 12px;
color: #666; color: #666;
font-family: PingFangSC-Regular, PingFang SC;
color: #666666;
line-height: 18px;
span {
color: #0091ff;
}
} }
&__rules-title { &__rules-title {
color: #333; font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
} }
&__rules-content { &__rules-content {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
img {
width: 16px;
height: 16px;
}
.title {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
.adress {
margin-top: 5px; margin-top: 5px;
line-height: 16px; font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
} }
&__keywords { &__keywords {
color: #0091ff; color: #0091ff;
......
pages/mini/index/index.vue
<template> <template>
<section class="lottery-box"> <section class="lottery-box">
<component <component :is="lotteryComponents[+lotteryInfo.type]" v-if="'type' in lotteryInfo && lotteryInfo.type"></component>
:is="lotteryComponents[+lotteryInfo.type]" <ComplaintsDeal></ComplaintsDeal>
v-if="'type' in lotteryInfo && lotteryInfo.type"
></component>
<Loading v-model="isLoading" class="lottery-box__loading"></Loading> <Loading v-model="isLoading" class="lottery-box__loading"></Loading>
</section> </section>
</template> </template>
...@@ -14,9 +12,11 @@ import { LOTTERY_TYPE } from '@/utils/constant' ...@@ -14,9 +12,11 @@ import { LOTTERY_TYPE } from '@/utils/constant'
import Bus from '@/utils/Bus' import Bus from '@/utils/Bus'
import UserAgents from '@/utils/UserAgents' import UserAgents from '@/utils/UserAgents'
import CONFIG from '@/config' import CONFIG from '@/config'
import ComplaintsDeal from '@/components/Common/ComplaintsDeal'
export default { export default {
components: { components: {
ComplaintsDeal,
Loading: () => import('@/components/Loading') Loading: () => import('@/components/Loading')
}, },
layout: 'miniNavBar', layout: 'miniNavBar',
...@@ -25,7 +25,7 @@ export default { ...@@ -25,7 +25,7 @@ export default {
isLoading: true, isLoading: true,
lotteryComponents: { lotteryComponents: {
[LOTTERY_TYPE.instant]: () => import('@/components/Lottery/Instant/MiniMain'), [LOTTERY_TYPE.instant]: () => import('@/components/Lottery/Instant/MiniMain'),
[LOTTERY_TYPE.timing]: () => import('@/components/Lottery/Timing/Main') [LOTTERY_TYPE.timing]: () => import('@/components/Lottery/Timing/MiniMain')
}, },
id: this.$route.query.id || null, // 接收抽奖id id: this.$route.query.id || null, // 接收抽奖id
sessionId: this.$route.query.sessionId || null, // 接收抽奖场次id sessionId: this.$route.query.sessionId || null, // 接收抽奖场次id
...@@ -71,7 +71,7 @@ export default { ...@@ -71,7 +71,7 @@ export default {
}, 1000) }, 1000)
} }
}, },
connectionListener() {}, connectionListener() { },
// 页面进入初始化 // 页面进入初始化
dataInit() { dataInit() {
const { id, sessionId: playId, uin } = this.$route.query const { id, sessionId: playId, uin } = this.$route.query
...@@ -115,6 +115,7 @@ export default { ...@@ -115,6 +115,7 @@ export default {
const { id, playId } = data const { id, playId } = data
const { sessionId: currentPlayId, id: currentId } = this const { sessionId: currentPlayId, id: currentId } = this
if (+id === +currentId && +playId === +currentPlayId) { if (+id === +currentId && +playId === +currentPlayId) {
// eslint-disable-next-line no-unused-vars
const { status, startTime, endTime, userTimes } = data const { status, startTime, endTime, userTimes } = data
// 状态 // 状态
this.updateInfo({ this.updateInfo({
......
pages/mini/list/index.vue
...@@ -7,10 +7,12 @@ ...@@ -7,10 +7,12 @@
{{ getStatus(item).label }} {{ getStatus(item).label }}
</div> </div>
<div class="session-list__time"> <div class="session-list__time">
第{{ index + 1 }}场： 第{{ index + 1 }}场<span v-if="getStatus(item).label === '已结束'"
>：
{{ (item.startTime * 1000) | formatDate('MM/DD HH:mm') }} {{ (item.startTime * 1000) | formatDate('MM/DD HH:mm') }}
— —
{{ (item.endTime * 1000) | formatDate('MM/DD HH:mm') }} {{ (item.endTime * 1000) | formatDate('MM/DD HH:mm') }}</span
>
</div> </div>
</div> </div>
</li> </li>
......
pages/recordDetail/index.vue
...@@ -17,10 +17,16 @@ ...@@ -17,10 +17,16 @@
<span v-if="detailInfo.drawTime">{{ (detailInfo.drawTime * 1000) | formatDate('YYYY-MM-DD HH:mm') }}</span> <span v-if="detailInfo.drawTime">{{ (detailInfo.drawTime * 1000) | formatDate('YYYY-MM-DD HH:mm') }}</span>
</li> </li>
<li> <li>
<label v-if="detailInfo.drawIntro">抽奖介绍：</label>
<label v-if="detailInfo.winningInstructions">中奖说明：</label>
<span v-if="detailInfo.drawIntro">{{ detailInfo.drawIntro }}</span>
<span v-if="detailInfo.winningInstructions">{{ detailInfo.winningInstructions }}</span>
</li>
<li>
<label>获得奖品：</label> <label>获得奖品：</label>
<div> <div>
<p>{{ detailInfo.prizeName }}</p> <p>{{ detailInfo.prizeName }}</p>
<img v-lazy="detailInfo.prizeIcon" class="record-detail__info-img" alt="" /> <img v-if="detailInfo.prizeIcon" v-lazy="detailInfo.prizeIcon" class="record-detail__info-img" alt="" />
</div> </div>
</li> </li>
<li> <li>
......
pages/records/index.vue
...@@ -207,6 +207,7 @@ export default { ...@@ -207,6 +207,7 @@ export default {
white-space: nowrap; white-space: nowrap;
min-height: 15px; min-height: 15px;
line-height: 15px; line-height: 15px;
margin-bottom: 2px
} }
&__item-subs { &__item-subs {
flex: 1; flex: 1;
......
utils/Dms.js
...@@ -64,8 +64,12 @@ class Dms { ...@@ -64,8 +64,12 @@ class Dms {
Bus.$emit('LotteryInfoUpdate', data) Bus.$emit('LotteryInfoUpdate', data)
} }
// 抽奖时间更新 // 抽奖时间更新
if (data.cmd === 'draw_time_start') { // if (data.cmd === 'draw_time_start') {
Bus.$emit('LotteryInfoUpdate', data) // Bus.$emit('LotteryInfoUpdate', data)
// }
// 中奖结果
if (data.cmd === 'draw_result') {
Bus.$emit('LotteryResult', data)
} }
break break
default: default:
......
yarn.lock
...@@ -964,10 +964,10 @@ ...@@ -964,10 +964,10 @@
dependencies: dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.35" "@fortawesome/fontawesome-common-types" "^0.2.35"
"@gdyfe/config@^1.2.0": "@gdyfe/config@^1.2.8":
version "1.2.0" version "1.2.8"
resolved "https://registry.yarnpkg.com/@gdyfe/config/-/config-1.2.0.tgz#4974616c9684c94247bab3c77984928415229935" resolved "https://registry.npmmirror.com/@gdyfe/config/-/config-1.2.8.tgz#f93b04ce74579af6249f28dfb992c72818f46d8a"
integrity sha512-ixF2ulLb8zWtRIJIh1vgpdI5/+ayNr7/OA012oAxAiCVAIwfqrEYCsAJhJ08aON+8U8DyXCO3q8LwK2x6Bzr3Q== integrity sha512-IEg9Pb/UAJqwOjIlNx05OFrWXjw+Ci6pDk0HdgdjDzqhI6RMpoNGAjCiDfA9UA1oQpMG/KUNlKyJnDCXmCj3gA==
dependencies: dependencies:
node-rsa "^1.1.1" node-rsa "^1.1.1"
......
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