OpenIsle/frontend_nuxt/components/GlobalPopups.vue

<template>
  <div>
    <ActivityPopup
      :visible="showMilkTeaPopup"
      :icon="milkTeaIcon"
      text="建站送奶茶活动火热进行中，快来参与吧！"
      @close="closeMilkTeaPopup"
    />
    <MedalPopup
      :visible="showMedalPopup"
      :medals="newMedals"
      @close="closeMedalPopup"
    />
  </div>
</template>

<script>
import ActivityPopup from '~/components/ActivityPopup.vue'
import MedalPopup from '~/components/MedalPopup.vue'
import { API_BASE_URL } from '~/main'
import { authState } from '~/utils/auth'

export default {
  name: 'GlobalPopups',
  components: { ActivityPopup, MedalPopup },
  data () {
    return {
      showMilkTeaPopup: false,
      milkTeaIcon: '',
      showMedalPopup: false,
      newMedals: []
    }
  },
  async mounted () {
    await this.checkMilkTeaActivity()
    if (!this.showMilkTeaPopup) {
      await this.checkNewMedals()
    }
  },
  methods: {
    async checkMilkTeaActivity () {
      if (!process.client) return
      if (localStorage.getItem('milkTeaActivityPopupShown')) return
      try {
        const res = await fetch(`${API_BASE_URL}/api/activities`)
        if (res.ok) {
          const list = await res.json()
          const a = list.find(i => i.type === 'MILK_TEA' && !i.ended)
          if (a) {
            this.milkTeaIcon = a.icon
            this.showMilkTeaPopup = true
          }
        }
      } catch (e) {
        // ignore network errors
      }
    },
    closeMilkTeaPopup () {
      if (!process.client) return
      localStorage.setItem('milkTeaActivityPopupShown', 'true')
      this.showMilkTeaPopup = false
      this.checkNewMedals()
    },
    async checkNewMedals () {
      if (!process.client) return
      if (!authState.loggedIn || !authState.userId) return
      try {
        const res = await fetch(`${API_BASE_URL}/api/medals?userId=${authState.userId}`)
        if (res.ok) {
          const medals = await res.json()
          const seen = JSON.parse(localStorage.getItem('seenMedals') || '[]')
          const m = medals.filter(i => i.completed && !seen.includes(i.type))
          if (m.length > 0) {
            this.newMedals = m
            this.showMedalPopup = true
          }
        }
      } catch (e) {
        // ignore errors
      }
    },
    closeMedalPopup () {
      if (!process.client) return
      const seen = new Set(JSON.parse(localStorage.getItem('seenMedals') || '[]'))
      this.newMedals.forEach(m => seen.add(m.type))
      localStorage.setItem('seenMedals', JSON.stringify([...seen]))
      this.showMedalPopup = false
    }
  }
}
</script>