You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

AppAds.vue 2.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <template>
  2. <div v-show="ready" class="ads">
  3. <div v-show="isAd" ref="adContainer" />
  4. <HelpLesson v-if="isLesson"
  5. :lesson="lesson"
  6. :small="true"
  7. @click="$router.push({ path: '/help', hash: lesson.photo })" />
  8. </div>
  9. </template>
  10. <script>
  11. import { sample } from 'lodash'
  12. import { settings } from '~/modules/system'
  13. import { dreamtrack } from '~/modules/services'
  14. import { Help, events } from '~/modules'
  15. const CHANGE_INTERVAL = process.env.NODE_ENV === 'development' ? 60 * 1000 : 15 * 60 * 1000
  16. export default {
  17. data: () => ({
  18. type: null,
  19. ready: false,
  20. interval: null,
  21. lesson: null,
  22. }),
  23. computed: {
  24. isAd() {
  25. return this.type === 'ad'
  26. },
  27. isLesson() {
  28. return this.type === 'lesson'
  29. },
  30. },
  31. mounted() {
  32. this.init()
  33. this.interval = setInterval(this.init.bind(this), CHANGE_INTERVAL)
  34. events.on('settings:ads', this.init.bind(this))
  35. },
  36. beforeDestroy() {
  37. if (this.interval) {
  38. clearInterval(this.interval)
  39. }
  40. },
  41. methods: {
  42. init() {
  43. this.ready = false
  44. this.chooseType()
  45. if (this.isAd) {
  46. this.refreshAd()
  47. } else if (this.isLesson) {
  48. this.refreshLesson()
  49. }
  50. },
  51. chooseType() {
  52. const types = []
  53. if (settings.app.showAds) {
  54. types.push('ad')
  55. }
  56. if (settings.app.showTips) {
  57. types.push('lesson')
  58. }
  59. if (types.length === 0) {
  60. this.type = null
  61. } else if (types.length === 1) {
  62. // eslint-disable-next-line prefer-destructuring
  63. this.type = types[0]
  64. } else {
  65. this.type = sample(types)
  66. }
  67. },
  68. refreshAd() {
  69. if (!window.reviveAsync) {
  70. return
  71. }
  72. const id = dreamtrack.get('ads.id', '3fe087377ab3999f9bd455cef8976f0b')
  73. if (!window.reviveAsync[id]) {
  74. return
  75. }
  76. const ins = document.createElement('ins')
  77. ins.setAttribute('data-revive-zoneid', dreamtrack.get('ads.zoneid', '1'))
  78. ins.setAttribute('data-revive-id', id)
  79. this.$refs.adContainer.innerHTML = ''
  80. this.$refs.adContainer.appendChild(ins)
  81. this.$nextTick(() => {
  82. window.reviveAsync[id].refresh()
  83. this.ready = true
  84. })
  85. },
  86. refreshLesson() {
  87. this.lesson = Help.pickRandom()
  88. this.ready = true
  89. },
  90. },
  91. }
  92. </script>
  93. <style lang="scss" scoped>
  94. .ads {
  95. @apply border-t border-menus-light;
  96. height: 250px;
  97. &::v-deep .lesson {
  98. @apply rounded-none cursor-pointer;
  99. @include transition('background-color', 0.2s);
  100. &:hover {
  101. @apply bg-menus-light;
  102. }
  103. .box__photo {
  104. @apply rounded-none;
  105. }
  106. }
  107. .lesson {
  108. height: inherit;
  109. }
  110. }
  111. </style>