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 1625 additions and 227 deletions
CHANGELOG.md
......@@ -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.
### [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)
......
components/Common/ComplaintsDeal.vue
......@@ -13,6 +13,7 @@ export default {
data() {
return {
color: '',
bgColor: '',
entry: null,
body: null
}
......@@ -23,8 +24,9 @@ export default {
})
},
mounted() {
Bus.$on('initDeal', color => {
Bus.$on('initDeal', (color, bgColor) => {
this.color = color
this.bgColor = bgColor
this.init()
this.dealAnimation()
})
......@@ -44,7 +46,7 @@ export default {
height: '0.62667rem',
right: '0.13333rem',
bottom: '0.33333rem',
zIndex: 6,
zIndex: 51,
background: '#fff',
iconColor: '#80411a',
transition: 'all 0.25s cubic-bezier(0.55, 0, 0.1, 1)'
......@@ -52,6 +54,9 @@ export default {
if (this.color) {
Object.assign(defaultEntryStyle, { iconColor: this.color })
}
if (this.bgColor) {
Object.assign(defaultEntryStyle, { background: this.bgColor })
}
// eslint-disable-next-line no-undef
complaintsDeal({
......@@ -59,7 +64,7 @@ export default {
props: {
// rootFontSize: '.62667rem',
defaultEntryStyle,
zIndex: 999,
zIndex: 51,
uin,
url: window.location.href,
company: '管理员',
......@@ -94,14 +99,20 @@ export default {
dealAnimation() {
setTimeout(() => {
this.entry = document.querySelector('.entry')
this.entry.classList.add('sidebar-hidden-scroll')
this.body = document.body
this.body.addEventListener('touchstart', () => {
this.body.addEventListener('touchmove', this.dealScrollOn)
})
this.body.addEventListener('touchend', () => {
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)
},
......
components/Lottery/Instant/Main.vue
......@@ -269,7 +269,7 @@ export default {
methods: {
...mapActions({ jumpToLogin: 'users/jumpToLogin', updateInfo: 'lottery/updateInfo' }),
// 中奖后， 关闭窗口回调
winCloseCallback(){
winCloseCallback() {
this.isShowWin = false
if (this.winInfo.id !== 0 && !this.isBindPhone) {
this.isShowBindPhone = true
......
components/Lottery/Instant/Records.vue
......@@ -58,6 +58,10 @@ export default {
methods: {
...mapActions({ jumpToLogin: 'users/jumpToLogin' }),
openRecord() {
if (this.recordsLayouts && this.recordsLayouts.classList.contains('sidebar-hidden-scroll')) {
this.recordsLayouts.classList.remove('sidebar-hidden-scroll')
return false
}
if (!this.isLogin) {
this.$toast({
message: '请先登录，正在为您转跳',
......@@ -71,6 +75,10 @@ export default {
}
},
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.isShowRecordsPopup = true
},
......@@ -79,12 +87,13 @@ export default {
},
recordsAnimation() {
setTimeout(() => {
this.recordsLayouts.classList.add('sidebar-hidden-scroll')
this.body.addEventListener('touchstart', () => {
this.body.addEventListener('touchmove', this.recordsScrollOn)
// this.recordsScrollOff()
})
this.body.addEventListener('touchend', () => {
this.body.removeEventListener('touchmove', this.recordsScrollOn)
this.recordsScrollOff()
})
}, 500)
},
......@@ -108,7 +117,7 @@ export default {
.records {
&__layouts {
position: fixed;
z-index: 50;
z-index: 51;
right: 10px;
bottom: 90px;
transition: all 0.25s cubic-bezier(0.55, 0, 0.1, 1);
......
components/Lottery/Instant/RecordsPupup.vue
......@@ -13,23 +13,26 @@
<div class="records-popup__list-wrapper">
<div class="records-popup__personal-record">
<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-else class="records-popup__bind-phone" @click="bindMobile">绑定手机号</span>
</div>
</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__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 style="display: flex; align-items: center">
<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__prize-name">{{ session.prizeName }}</div>
</div>
<div class="records-popup__prize-name">{{ item.prizeName }}</div>
</div>
</li>
</ul>
......@@ -47,7 +50,16 @@
<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">
{{ 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 v-if="winnersList.length === 0" class="records-popup__no-data">暂无数据</div>
</div>
......@@ -95,7 +107,8 @@ export default {
...mapGetters({
uin: 'users/uin',
userInfo: 'users/userInfo',
isBindPhone: 'users/isBindPhone'
isBindPhone: 'users/isBindPhone',
lotteryInfo: 'lottery/lotteryInfo',
}),
visible: {
get() {
......@@ -177,8 +190,8 @@ export default {
<style lang='less' scoped>
.records-popup {
width: 258px;
height: 291px;
width: 251.5px;
height: 292px;
background: #ffe9d8;
border-radius: 15px;
overflow: visible;
......@@ -249,7 +262,7 @@ export default {
.van-tab__pane {
width: 100%;
height: 100%;
padding: 15px 0;
padding: 5px 0;
}
}
}
......@@ -278,6 +291,7 @@ export default {
color: #ff0024;
font-size: 12px;
margin-top: 10px;
margin-bottom: 8px;
}
&__phone {
color: #666;
......@@ -287,6 +301,7 @@ export default {
color: #f57641;
}
&__record-list {
margin-top: 12px;
li {
margin-bottom: 15px;
&:last-child {
......@@ -306,21 +321,43 @@ export default {
&__info-wrap {
display: flex;
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 {
margin-right: 5px;
margin-left: 20px;
font-size: 13px;
color: #333;
}
&__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 {
margin: 8px 0 15px;
color: #666;
margin: 0 0 15px;
font-size: 13px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #fe3924;
line-height: 18.5px;
}
&__item {
margin-bottom: 8px;
&-user {
display: flex;
font-size: 13px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
line-height: 18.5px;
}
}
&__winners-record {
width: 100%;
......@@ -334,7 +371,7 @@ export default {
&__no-data {
color: #999;
text-align: center;
padding-top: 40px;
padding-top: 100px;
}
}
</style>
components/Lottery/Timing/JoinButton.vue
<template>
<section class="join-button">
<div class="btn-box">
<section class="join-button" :class="lotteryInfo.showType === 7 ? 'treasure' : 'luckybag'">
<div class="btn-box" :style="{ '--btnBottom': btnBottom }">
<template v-if="+lotteryInfo.status === LOTTERY_STATUS.teaser">
<button v-if="lotteryInfo.condition === 1" class="join-btn pre">未开始</button>
<button v-if="lotteryInfo.condition === 2" class="join-btn pre countdown">
<template v-if="hours > 0">{{ hours | filterNum }}:</template>
{{ minutes | filterNum }}:{{ seconds | filterNum }}后开始
</button>
<button v-if="lotteryInfo.condition === 2" class="join-btn pre">未开始</button>
<button v-if="lotteryInfo.condition === 3" class="join-btn pre">未开始</button>
</template>
<template v-if="+lotteryInfo.status === LOTTERY_STATUS.start">
<template v-if="lotteryInfo.userTimes === 0 && lotteryInfo.isDraw">
<button class="join-btn pre">待开奖</button>
<button class="join-btn pre">等待开奖</button>
</template>
<template v-else>
<div class="btn-mask"></div>
<button class="join-btn" @click="lottery">点击参加</button>
<button class="join-btn" @click="lottery">立即参与</button>
</template>
</template>
<template v-if="+lotteryInfo.status === LOTTERY_STATUS.end">
<template v-if="isLogin && lotteryInfo.isDraw && lotteryInfo.isWin">
<div class="win-result-box">
<p class="win-result">恭喜您中奖！</p>
<button class="join-btn">恭喜您中奖！</button>
</div>
</template>
<template v-if="isLogin && lotteryInfo.isDraw && !lotteryInfo.isWin">
<div class="win-result-box">
<p class="win-result">很遗憾，您没有中奖</p>
<button class="join-btn end">很遗憾，您未中奖</button>
</div>
</template>
<template v-if="!isLogin || !lotteryInfo.isDraw">
......@@ -33,9 +31,9 @@
</template>
</template>
</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 }} 人参与
</div>
</div> -->
</section>
</template>
<script>
......@@ -54,13 +52,14 @@ export default {
data() {
return {
LOTTERY_STATUS,
timer: null
timer: null,
btnBottom: '' // 按钮下边距 为适应不同背景图
}
},
computed: {
...mapGetters({
isLogin: 'users/isLogin',
lotteryInfo: 'lottery/lotteryInfo'
lotteryInfo: 'lottery/lotteryInfo',
})
},
watch: {
......@@ -73,6 +72,11 @@ export default {
},
mounted() {
this.dateInit()
if (this.lotteryInfo.showType === 6) {
this.btnBottom = '-10px'
} else {
this.btnBottom = '20px'
}
},
methods: {
dateInit() {
......@@ -94,28 +98,29 @@ export default {
}
}
</script>
<style lang="less">
@--box-width: 100px;
@--box-height: @--box-width;
<style lang="less" scoped>
@--box-width: 194px;
@--box-height: 78px;
@keyframes wave {
0% {
opacity: 0.5;
}
100% {
opacity: 1;
transform: scale(1.1);
}
}
@keyframes wavetwo {
0% {
opacity: 1;
}
100% {
opacity: 0.5;
}
}
// @keyframes wave {
// 0% {
// opacity: 0.5;
// }
// 100% {
// opacity: 1;
// transform: scale(1.1);
// }
// }
// @keyframes wavetwo {
// 0% {
// opacity: 1;
// }
// 100% {
// opacity: 0.5;
// }
// }
.join-button {
height: 310px;
.btn-box {
width: @--box-width;
min-height: @--box-height;
......@@ -123,7 +128,7 @@ export default {
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
align-items: flex-end;
position: relative;
flex-wrap: wrap;
.btn-mask {
......@@ -137,32 +142,6 @@ export default {
margin: auto;
width: @--box-width - 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 {
border: 0;
......@@ -173,16 +152,22 @@ export default {
width: @--box-width - 16px;
height: @--box-height - 16px;
line-height: @--box-height - 16px;
border-radius: 50%;
background-color: #e85c52;
margin-bottom: var(--btnBottom);
background: url(./img/button-light.png) no-repeat top;
outline: none;
position: relative;
z-index: 1;
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #db0000;
// line-height: 70px;
&.pre {
background-color: #e77e7b;
color: #ffffff;
background: url(./img/button-dark.png) no-repeat top;
}
&.end {
background-color: #999;
color: #ffffff;
background: url(./img/button-dark.png) no-repeat top;
}
&.countdown {
font-size: 12px;
......@@ -219,4 +204,12 @@ export default {
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>
components/Lottery/Timing/Main.vue
<template>
<section class="main-timing">
<TimingBanner class="timing-banner" :info="config[0]"></TimingBanner>
<div class="prize-info">
<label>奖品：</label>
<p>
<span class="text-name">{{ config[0].name }}</span>
<span class="text-num">x {{ config[0].sum }}</span>
</p>
</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>
<div class="main-timing">
<LuckyBag
v-if="lotteryInfo.showType === 6 || lotteryInfo.showType === 1"
:is-btn-loading="isBtnLoading"
:is-show-win="isShowWin"
:is-show-bind-phone="isShowBindPhone"
:win-info="winInfo"
@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>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { setLottery, getUserRecord } from '@/api/modules/lottery'
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 {
components: {
TimingBanner,
TimingStatus,
JoinButton,
BackButton,
WinPopup,
BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
Records: () => import('@/components/Lottery/Instant/Records')
LuckyBag: () => import('@/components/Lottery/Timing/type/LuckyBag'),
Treasure: () => import('@/components/Lottery/Timing/type/Treasure'),
// Records: () => import('@/components/Lottery/Instant/Records')
},
data() {
return {
......@@ -50,7 +37,8 @@ export default {
playId: this.$route.query.sessionId,
isShowWin: false,
isShowBindPhone: false, // 是否显示绑定手机号提示
winInfo: this.winInfoTranslator()
winInfo: this.winInfoTranslator(),
isShowIntro: false
}
},
computed: {
......@@ -98,7 +86,7 @@ export default {
})
},
// 中奖后， 关闭窗口回调
winCloseCallback(){
winCloseCallback() {
this.isShowWin = false
if (this.winInfo.id !== 0 && !this.isBindPhone) {
this.isShowBindPhone = true
......@@ -159,6 +147,7 @@ export default {
this.isBtnLoading = false
} else {
this.$toast.fail(errorMessage)
this.isBtnLoading = false
}
})
}
......@@ -167,7 +156,7 @@ export default {
getUserRecord({
id: this.$route?.query?.id || '',
uin: this.$route?.query?.uin || '',
nowPlay: 1
nowPlay: this.lotteryInfo.nowPlay
}).then(res => {
const { code, errorCode, errorMessage, data } = res
if (code === 200 && errorCode === 0) {
......@@ -184,57 +173,16 @@ export default {
id: data?.prizeId || '',
name: data?.prizeName || ''
}
},
goRule() {
this.isShowIntro = true
}
}
}
</script>
<style lang="less">
<style lang="less" scoped>
.main-timing {
height: 100%;
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>
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 {
}
}
</script>
<style lang="less">
<style lang="less" scoped>
.banner-box {
padding: 10px;
position: absolute;
......
components/Lottery/Timing/TimingStatus.vue
<template>
<section class="timing-status">
<template v-if="type === 1">
<div v-if="state !== 2" class="countdown-box">
<label>倒计时：</label>
<p>
<span class="text-time">
<template v-if="hours > 0">{{ hours | filterNum }} : </template>{{ minutes | filterNum }} :
{{ seconds | filterNum }}
<template v-if="state === 0">后开始</template>
<template v-else-if="state === 1">后结束</template>
<div class="countdown-box">
<div v-if="state !== 2" class="countdown-box__time">
<label v-if="state === 0">抽奖倒计时：</label>
<label v-else-if="state === 1">开奖倒计时：</label>
<span v-if="lotteryInfo.startModel === 'manual' && state === 0">
00:{{ lotteryInfo.countDown | filterNum }}:00
</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>
<span v-else class="end-lottery">抽奖已结束</span>
</template>
<template v-if="type === 2">
<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>
</template>
</section>
......@@ -72,7 +80,7 @@ export default {
methods: {
dateInit() {
// 倒计时开始
if (this.state === 0) {
if (this.state === 0 && this.lotteryInfo.startModel !== 'manual') {
this.lotteryInfo.startTime && this.reloadTime(this.lotteryInfo.startTime * 1000)
} else if (this.state === 1) {
this.lotteryInfo.endTime && this.reloadTime(this.lotteryInfo.endTime * 1000)
......@@ -89,14 +97,30 @@ export default {
}
</script>
<style lang="less">
<style lang="less" scoped>
.timing-status {
position: relative;
z-index: 2;
.countdown-box {
display: flex;
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 {
color: #999999;
// color: #999999;
min-width: 58px;
}
p {
......@@ -115,9 +139,22 @@ export default {
color: #999;
}
.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 {
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 @@
<span v-if="detailInfo.drawTime">{{ (detailInfo.drawTime * 1000) | formatDate('YYYY-MM-DD HH:mm') }}</span>
</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>
<div>
<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>
</li>
<li>
......
nuxt.config.js
......@@ -61,7 +61,11 @@ const gtagConfig = IS_USE_OSS
export default {
buildDir: 'nuxt-dist',
env,
env: {
...env,
UPLOADER_ACCESS: '',
STATIC_OSS_ACCESS: ''
},
router: {
base: BASE_URL,
middleware: ['device'],
......
package.json
{
"name": "web-lottery",
"version": "1.3.0",
"version": "1.3.6",
"private": true,
"license": "UNLICENSED",
"scripts": {
"release": "standard-version",
"release:minor": "standard-version -r minor",
"release:patch": "standard-version -r patch",
"serve:dev": "cross-env mode=test nuxt",
"serve:pre": "cross-env mode=preview nuxt",
"serve:prod": "cross-env mode=production nuxt",
......@@ -47,7 +50,7 @@
},
"dependencies": {
"@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/rop-client": "1.1.10",
"@nuxtjs/axios": "^5.13.6",
......
pages/list/index.vue
......@@ -7,10 +7,12 @@
{{ getStatus(item).label }}
</div>
<div class="session-list__time">
第{{ index + 1 }}场：
{{ (item.startTime * 1000) | formatDate('MM/DD HH:mm') }}
—
{{ (item.endTime * 1000) | formatDate('MM/DD HH:mm') }}
第{{ index + 1 }}场<span v-if="getStatus(item).label === '已结束'"
>：
{{ (item.startTime * 1000) | formatDate('MM/DD HH:mm') }}
—
{{ (item.endTime * 1000) | formatDate('MM/DD HH:mm') }}</span
>
</div>
</div>
</li>
......
pages/message/index.vue
......@@ -43,15 +43,30 @@
<template v-if="winInfo.exchangeType === LOTTERY_EXCHANGE_TYPE.offline">
前往<span @click="openRecordHandler">抽奖记录</span>使用兑换码进行兑换
</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"
>已进入您<span @click="openWalletHandler">个人中心-钱包</span>请查收</template
> -->
</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">
<p class="lottery-message__rules-title">中奖说明：</p>
<div class="lottery-message__rules-content">{{ lotteryInfo.winningInstructions }}</div>
......@@ -137,6 +152,11 @@ export default {
contactPhone: addressInfo?.mobile || '',
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 => {
const { code, errorCode, errorMessage } = res
if (code === 200 && errorCode === 0) {
......@@ -214,6 +234,9 @@ export default {
})
},
openAddressHandler() {
if (this.winInfo.address) {
return
}
// 触发打开编辑地址
this.connection.emit('openAddressHandler', this.lotteryInfo)
},
......@@ -305,8 +328,8 @@ export default {
color: #ff2a2a;
}
&__rules {
width: 100%;
margin-top: 20px;
width: 90%;
margin-top: 8px;
max-height: 100px;
overflow: hidden;
overflow-y: auto;
......@@ -315,13 +338,41 @@ export default {
padding: 10px;
font-size: 12px;
color: #666;
font-family: PingFangSC-Regular, PingFang SC;
color: #666666;
line-height: 18px;
span {
color: #0091ff;
}
}
&__rules-title {
color: #333;
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
&__rules-content {
margin-top: 5px;
line-height: 16px;
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;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
}
}
&__keywords {
color: #0091ff;
......
pages/mini/index/index.vue
<template>
<section class="lottery-box">
<component
:is="lotteryComponents[+lotteryInfo.type]"
v-if="'type' in lotteryInfo && lotteryInfo.type"
></component>
<component :is="lotteryComponents[+lotteryInfo.type]" v-if="'type' in lotteryInfo && lotteryInfo.type"></component>
<ComplaintsDeal></ComplaintsDeal>
<Loading v-model="isLoading" class="lottery-box__loading"></Loading>
</section>
</template>
......@@ -14,9 +12,11 @@ import { LOTTERY_TYPE } from '@/utils/constant'
import Bus from '@/utils/Bus'
import UserAgents from '@/utils/UserAgents'
import CONFIG from '@/config'
import ComplaintsDeal from '@/components/Common/ComplaintsDeal'
export default {
components: {
ComplaintsDeal,
Loading: () => import('@/components/Loading')
},
layout: 'miniNavBar',
......@@ -25,7 +25,7 @@ export default {
isLoading: true,
lotteryComponents: {
[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
sessionId: this.$route.query.sessionId || null, // 接收抽奖场次id
......@@ -71,7 +71,7 @@ export default {
}, 1000)
}
},
connectionListener() {},
connectionListener() { },
// 页面进入初始化
dataInit() {
const { id, sessionId: playId, uin } = this.$route.query
......@@ -115,6 +115,7 @@ export default {
const { id, playId } = data
const { sessionId: currentPlayId, id: currentId } = this
if (+id === +currentId && +playId === +currentPlayId) {
// eslint-disable-next-line no-unused-vars
const { status, startTime, endTime, userTimes } = data
// 状态
this.updateInfo({
......
pages/mini/list/index.vue
......@@ -7,10 +7,12 @@
{{ getStatus(item).label }}
</div>
<div class="session-list__time">
第{{ index + 1 }}场：
{{ (item.startTime * 1000) | formatDate('MM/DD HH:mm') }}
—
{{ (item.endTime * 1000) | formatDate('MM/DD HH:mm') }}
第{{ index + 1 }}场<span v-if="getStatus(item).label === '已结束'"
>：
{{ (item.startTime * 1000) | formatDate('MM/DD HH:mm') }}
—
{{ (item.endTime * 1000) | formatDate('MM/DD HH:mm') }}</span
>
</div>
</div>
</li>
......
pages/recordDetail/index.vue
......@@ -17,10 +17,16 @@
<span v-if="detailInfo.drawTime">{{ (detailInfo.drawTime * 1000) | formatDate('YYYY-MM-DD HH:mm') }}</span>
</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>
<div>
<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>
</li>
<li>
......
pages/records/index.vue
......@@ -207,6 +207,7 @@ export default {
white-space: nowrap;
min-height: 15px;
line-height: 15px;
margin-bottom: 2px
}
&__item-subs {
flex: 1;
......
utils/Dms.js
......@@ -64,8 +64,12 @@ class Dms {
Bus.$emit('LotteryInfoUpdate', data)
}
// 抽奖时间更新
if (data.cmd === 'draw_time_start') {
Bus.$emit('LotteryInfoUpdate', data)
// if (data.cmd === 'draw_time_start') {
// Bus.$emit('LotteryInfoUpdate', data)
// }
// 中奖结果
if (data.cmd === 'draw_result') {
Bus.$emit('LotteryResult', data)
}
break
default:
......
yarn.lock
......@@ -964,10 +964,10 @@
dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.35"
"@gdyfe/config@^1.2.0":
version "1.2.0"
resolved "https://registry.yarnpkg.com/@gdyfe/config/-/config-1.2.0.tgz#4974616c9684c94247bab3c77984928415229935"
integrity sha512-ixF2ulLb8zWtRIJIh1vgpdI5/+ayNr7/OA012oAxAiCVAIwfqrEYCsAJhJ08aON+8U8DyXCO3q8LwK2x6Bzr3Q==
"@gdyfe/config@^1.2.8":
version "1.2.8"
resolved "https://registry.npmmirror.com/@gdyfe/config/-/config-1.2.8.tgz#f93b04ce74579af6249f28dfb992c72818f46d8a"
integrity sha512-IEg9Pb/UAJqwOjIlNx05OFrWXjw+Ci6pDk0HdgdjDzqhI6RMpoNGAjCiDfA9UA1oQpMG/KUNlKyJnDCXmCj3gA==
dependencies:
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