superstar-dice/_src/components/game/notice.vue

<template>
  <div>
    <div v-if="langMsg" @click="noticeShow = true" class="game-notice">
      {{langMsg['title']}}：{{langMsg['msg']}}
    </div>
    <transition name="msgbox-fade">
      <div class="popup-wrap" v-if="noticeShow && langMsg">
        <div class="popup-modal"></div>
        <div class="popup-box">
          <div class="popup-hd">
            <div class="popup-hd-title"><em>{{langMsg['title']}}</em></div>
            <span class="popup-close" @click="noticeShow = false"></span>
          </div>
          <div class="popup-bd">
            <div class="rules-text" v-html="langMsg['msg']"></div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import API from '@/api'

export default {
  name: 'notice',
  data () {
    return {
      noticeMap: {},
      langMsg: null,
      noticeShow: false
    }
  },
  watch: {
    '$i18n.locale' (to, form) {
      if (this.langMsg) {
        let lang = this.$i18n.locale
        this.langMsg = this.noticeMap[lang]
      }
    }
  },
  methods: {
    getNitice () {
      API.game.getNewMsg().then(({ data }) => {
        if (data.data) {
          this.noticeMap['zh'] = {
            'title': data.data.zh_title,
            'msg': data.data.zh_msg
          }
          this.noticeMap['en'] = {
            'title': data.data.en_title,
            'msg': data.data.en_msg
          }
          this.noticeMap['kr'] = {
            'title': data.data.kr_title,
            'msg': data.data.kr_msg
          }
          let lang = this.$i18n.locale
          this.langMsg = this.noticeMap[lang]

          // 是否展示弹窗
          let noticeId = data.data.id
          if (!localStorage.getItem('dice_game_notice_id')) {
            this.noticeShow = true
            localStorage.setItem('dice_game_notice_id', noticeId)
            return
          }
          let localId = localStorage.getItem('dice_game_notice_id')
          if (noticeId !== Number(localId)) {
            this.noticeShow = true
            localStorage.setItem('dice_game_notice_id', noticeId)
          }
        }
      })
    }
  },
  mounted () {
    this.getNitice()
  }
}
</script>
<style lang="scss">
.game-notice{
  width: px2rem(1300);
  margin: px2rem(12) auto;
  height: px2rem(32);
  line-height: px2rem(32);
  background-color: rgba($color: #000000, $alpha: .6);
  font-size: px2rem(12);
  padding: 0 px2rem(20);
  border-radius: px2rem(16);
  color: #ffffff;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  @media #{$phone} {
    position: static;
    top: auto;
    left: auto;
    margin: px2rem(10) auto;
    width: 100%;
    font-size: px2rem(24);
    height: px2rem(38);
    line-height: px2rem(38);
  }
}
.rules-text{
  padding: px2rem(20);
  background-color: rgba(0, 0, 0, 0.2);
  text-align: left;
  font-size: px2rem(16);
  line-height: px2rem(28);
  @include wrap;
  @media #{$phone} {
    font-size: px2rem(24);
    line-height: px2rem(44);
  }
}
</style>