Skip to content

activities / web-lottery

Go to a project
Commit 8a6a8356 by 施嘉伟
Options

合并分支 'test' 到 'dev' 

Test



查看合并请求 !18
parents 13a086ed 803cfd34
Showing with 120 additions and 21 deletions
assets/styles/main.less
...@@ -19,3 +19,8 @@ body { ...@@ -19,3 +19,8 @@ body {
opacity: 0; opacity: 0;
transform: translate(-30px, 0); transform: translate(-30px, 0);
} }
.sidebar-hidden-scroll {
right: -0.2rem !important;
opacity: 0.7;
}
\ No newline at end of file
components/Common/ComplaintsDeal.vue
...@@ -7,15 +7,31 @@ import CONFIG from '@/config' ...@@ -7,15 +7,31 @@ import CONFIG from '@/config'
import { mapGetters, mapActions } from 'vuex' import { mapGetters, mapActions } from 'vuex'
import { CUSTOM_SOURCE_TYPE } from '@/utils/constant' import { CUSTOM_SOURCE_TYPE } from '@/utils/constant'
import Bus from '@/utils/Bus'
export default { export default {
name: 'ComplaintsDeal', name: 'ComplaintsDeal',
data() {
return {
color: '',
entry: null,
body: null
}
},
computed: { computed: {
...mapGetters({ ...mapGetters({
isLogin: 'users/isLogin' isLogin: 'users/isLogin'
}) })
}, },
mounted() { mounted() {
this.init() Bus.$on('initDeal', color => {
this.color = color
this.init()
this.dealAnimation()
})
},
destroyed() {
Bus.$off('initDeal')
}, },
methods: { methods: {
...mapActions({ jumpToLogin: 'users/jumpToLogin' }), ...mapActions({ jumpToLogin: 'users/jumpToLogin' }),
...@@ -24,20 +40,26 @@ export default { ...@@ -24,20 +40,26 @@ export default {
if (typeof complaintsDeal === 'undefined') { if (typeof complaintsDeal === 'undefined') {
return null return null
} }
const defaultEntryStyle = {
width: '0.62667rem',
height: '0.62667rem',
right: '0.13333rem',
bottom: '0.33333rem',
zIndex: 6,
background: '#fff',
iconColor: '#80411a',
transition: 'all 0.25s cubic-bezier(0.55, 0, 0.1, 1)'
}
if (this.color) {
Object.assign(defaultEntryStyle, { iconColor: this.color })
}
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
complaintsDeal({ complaintsDeal({
target: document.body, target: document.body,
props: { props: {
// rootFontSize: '.62667rem', // rootFontSize: '.62667rem',
defaultEntryStyle: { defaultEntryStyle,
width: '0.62667rem',
height: '0.62667rem',
right: '0.13333rem',
bottom: '0.13333rem',
zIndex: 6,
background: '#fff',
iconColor: '#80411a'
},
zIndex: 999, zIndex: 999,
uin, uin,
url: window.location.href, url: window.location.href,
...@@ -69,10 +91,35 @@ export default { ...@@ -69,10 +91,35 @@ export default {
} }
} }
}) })
},
dealAnimation() {
setTimeout(() => {
this.entry = document.querySelector('.entry')
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()
})
}, 500)
},
dealScrollOn() {
if (this.entry && !this.entry.classList.contains('sidebar-hidden-scroll')) {
this.entry.classList.add('sidebar-hidden-scroll')
}
},
dealScrollOff() {
if (this.entry && this.entry.classList.contains('sidebar-hidden-scroll')) {
setTimeout(() => {
this.entry.classList.remove('sidebar-hidden-scroll')
}, 500)
}
} }
} }
} }
</script> </script>
<style lang='less' scoped> <style lang="less" scoped></style>
</style>
components/Lottery/Instant/Main.vue
...@@ -333,13 +333,13 @@ export default { ...@@ -333,13 +333,13 @@ export default {
this.isLottering = true this.isLottering = true
this.isLoading = false this.isLoading = false
// TODO // TODO
if (this.lotteryInfo.showType === 3) { if (this.lotteryInfo.showType === LOTTERY_STYLE.scratch) {
this.$refs.typeScratchRef.drawAnimation() this.$refs.typeScratchRef.drawAnimation()
} }
if (this.lotteryInfo.showType === 4) { if (this.lotteryInfo.showType === LOTTERY_STYLE.gashapon) {
this.$refs.typeGashaponRef.drawAnimation() this.$refs.typeGashaponRef.drawAnimation()
} }
if (this.lotteryInfo.showType === 5) { if (this.lotteryInfo.showType === LOTTERY_STYLE.guess) {
this.$refs.typeGuessRef.drawAnimation() this.$refs.typeGuessRef.drawAnimation()
} }
/* 开奖信息 */ /* 开奖信息 */
......
components/Lottery/Instant/MiniMain.vue
...@@ -334,13 +334,13 @@ export default { ...@@ -334,13 +334,13 @@ export default {
this.isLottering = true this.isLottering = true
this.isLoading = false this.isLoading = false
// TODO // TODO
if (this.lotteryInfo.showType === 3) { if (this.lotteryInfo.showType === LOTTERY_STYLE.scratch) {
this.$refs.typeScratchRef.drawAnimation() this.$refs.typeScratchRef.drawAnimation()
} }
if (this.lotteryInfo.showType === 4) { if (this.lotteryInfo.showType === LOTTERY_STYLE.gashapon) {
this.$refs.typeGashaponRef.drawAnimation() this.$refs.typeGashaponRef.drawAnimation()
} }
if (this.lotteryInfo.showType === 5) { if (this.lotteryInfo.showType === LOTTERY_STYLE.guess) {
this.$refs.typeGuessRef.drawAnimation() this.$refs.typeGuessRef.drawAnimation()
} }
/* 开奖信息 */ /* 开奖信息 */
......
components/Lottery/Instant/Records.vue
<template> <template>
<div class="records"> <div class="records">
<div class="records__layouts"> <div ref="recordsLayouts" class="records__layouts">
<div class="records__entry" @click="openRecord"> <div class="records__entry" @click="openRecord">
<div class="records__entry-wrap"> <div class="records__entry-wrap">
<p :style="textColor">抽奖</p> <p :style="textColor">抽奖</p>
...@@ -35,6 +35,8 @@ import { mapGetters, mapActions } from 'vuex' ...@@ -35,6 +35,8 @@ import { mapGetters, mapActions } from 'vuex'
import RecordsPupup from '@/components/Lottery/Instant/RecordsPupup' import RecordsPupup from '@/components/Lottery/Instant/RecordsPupup'
import RecordsPupupNew from '@/components/Lottery/Instant/RecordsPupupNew' import RecordsPupupNew from '@/components/Lottery/Instant/RecordsPupupNew'
import Bus from '@/utils/Bus'
export default { export default {
name: 'Records', name: 'Records',
components: { components: {
...@@ -52,7 +54,9 @@ export default { ...@@ -52,7 +54,9 @@ export default {
data() { data() {
return { return {
isShowRecordsPopup: false, isShowRecordsPopup: false,
activeTab: 'personal' activeTab: 'personal',
recordsLayouts: null,
body: null
} }
}, },
computed: { computed: {
...@@ -77,6 +81,19 @@ export default { ...@@ -77,6 +81,19 @@ export default {
} }
} }
}, },
watch: {
'recordsConfig.textColor': {
handler(val) {
val ? Bus.$emit('initDeal', val) : Bus.$emit('initDeal', '')
},
immediate: true
}
},
mounted() {
this.recordsLayouts = this.$refs.recordsLayouts
this.body = document.body
this.recordsAnimation()
},
methods: { methods: {
...mapActions({ jumpToLogin: 'users/jumpToLogin' }), ...mapActions({ jumpToLogin: 'users/jumpToLogin' }),
openRecord() { openRecord() {
...@@ -98,6 +115,30 @@ export default { ...@@ -98,6 +115,30 @@ export default {
}, },
setIsShowRecordsPopup(val) { setIsShowRecordsPopup(val) {
this.isShowRecordsPopup = val this.isShowRecordsPopup = val
},
recordsAnimation() {
setTimeout(() => {
this.body.addEventListener('touchstart', () => {
this.body.addEventListener('touchmove', this.recordsScrollOn)
})
this.body.addEventListener('touchend', () => {
this.body.removeEventListener('touchmove', this.recordsScrollOn)
this.recordsScrollOff()
})
}, 500)
},
recordsScrollOn() {
if (this.recordsLayouts && !this.recordsLayouts.classList.contains('sidebar-hidden-scroll')) {
this.recordsLayouts.classList.add('sidebar-hidden-scroll')
}
},
recordsScrollOff() {
if (this.recordsLayouts && this.recordsLayouts.classList.contains('sidebar-hidden-scroll')) {
setTimeout(() => {
this.recordsLayouts.classList.remove('sidebar-hidden-scroll')
}, 500)
}
} }
} }
} }
...@@ -109,7 +150,8 @@ export default { ...@@ -109,7 +150,8 @@ export default {
position: fixed; position: fixed;
z-index: 50; z-index: 50;
right: 10px; right: 10px;
bottom: 75px; bottom: 90px;
transition: all 0.25s cubic-bezier(0.55, 0, 0.1, 1);
} }
&__entry { &__entry {
width: 47px; width: 47px;
......
components/Lottery/Instant/type/TypeGuess.vue
...@@ -214,6 +214,7 @@ export default { ...@@ -214,6 +214,7 @@ export default {
padding: 2px 6px; padding: 2px 6px;
white-space: nowrap; white-space: nowrap;
border-radius: 9px; border-radius: 9px;
z-index: -1;
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
...@@ -251,5 +252,6 @@ export default { ...@@ -251,5 +252,6 @@ export default {
.choose-fade-enter, .choose-fade-enter,
.choose-fade-leave-to { .choose-fade-leave-to {
opacity: 0; opacity: 0;
top: 0 !important;
} }
</style> </style>
components/Lottery/Instant/type/TypeGuessMini.vue
...@@ -221,6 +221,7 @@ export default { ...@@ -221,6 +221,7 @@ export default {
padding: 2px 6px; padding: 2px 6px;
white-space: nowrap; white-space: nowrap;
border-radius: 9px; border-radius: 9px;
z-index: -1;
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
...@@ -274,5 +275,6 @@ export default { ...@@ -274,5 +275,6 @@ export default {
.choose-fade-enter, .choose-fade-enter,
.choose-fade-leave-to { .choose-fade-leave-to {
opacity: 0; opacity: 0;
top: 0 !important;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment