Kalista Payne
106 lines
2.0 KiB
Vue
106 lines
2.0 KiB
Vue
<template>
|
|
<base-banner
|
|
banner-id="gift-promo"
|
|
class="gift-promo-banner"
|
|
:show="showGiftPromoBanner"
|
|
height="3rem"
|
|
>
|
|
<div
|
|
slot="content"
|
|
:aria-label="$t('subscription')"
|
|
class="content d-flex justify-content-around align-items-center ml-auto mr-auto"
|
|
@click="showSelectUser"
|
|
>
|
|
<div
|
|
v-once
|
|
class="svg-icon svg-gifts left-gift"
|
|
v-html="icons.gifts"
|
|
>
|
|
</div>
|
|
<div
|
|
v-once
|
|
class="announce-text"
|
|
v-html="$t('g1g1Announcement')"
|
|
>
|
|
</div>
|
|
<div
|
|
v-once
|
|
class="svg-icon svg-gifts right-gift"
|
|
v-html="icons.gifts"
|
|
>
|
|
</div>
|
|
</div>
|
|
</base-banner>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/assets/scss/colors.scss';
|
|
|
|
.announce-text {
|
|
color: $white;
|
|
}
|
|
|
|
.gift-promo-banner {
|
|
width: 100%;
|
|
min-height: 3rem;
|
|
background-image: linear-gradient(90deg, $teal-50 0%, $purple-400 100%);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.left-gift {
|
|
margin: auto 1rem auto auto;
|
|
}
|
|
|
|
.right-gift {
|
|
margin: auto auto auto 1rem;
|
|
filter: flipH;
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.svg-gifts {
|
|
width: 4.6rem;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import find from 'lodash/find';
|
|
import { mapState } from '@/libs/store';
|
|
import BaseBanner from './base';
|
|
|
|
import gifts from '@/assets/svg/gifts.svg?raw';
|
|
|
|
export default {
|
|
components: {
|
|
BaseBanner,
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
currentEventList: 'worldState.data.currentEventList',
|
|
}),
|
|
currentEvent () {
|
|
return find(this.currentEventList, event => Boolean(event.promo));
|
|
},
|
|
eventName () {
|
|
return this.currentEvent && this.currentEvent.event;
|
|
},
|
|
showGiftPromoBanner () {
|
|
const currEvt = this.currentEvent;
|
|
if (!currEvt) return false;
|
|
return currEvt && currEvt.promo === 'g1g1';
|
|
},
|
|
},
|
|
data () {
|
|
return {
|
|
icons: Object.freeze({
|
|
gifts,
|
|
}),
|
|
};
|
|
},
|
|
methods: {
|
|
showSelectUser () {
|
|
this.$root.$emit('bv::show::modal', 'select-user-modal');
|
|
},
|
|
},
|
|
};
|
|
</script>
|