superstar-dice/_src/components/nav/gameNav.vue

<template>
  <div>
    <!-- 桌面 -->
    <div class="game-top-nav">
      <div class="top-nav-container">
        <div class="left-side">
          <a class="logo-link" target="_blank" href="https://www.eosget.io/">
            <img class="logo" src="../../assets/dice-logo.png" alt="">
            <span class="game-title">EOS GET</span>
          </a>
          <div class="game-link">
            <a :href="diceUrl" class="link-item">
              <i class="sicbo-icon"></i>SICBO
            </a>
            <!-- <a :href="boxUrl" class="link-item">
              <i class="box-icon"></i>BOX
            </a> -->
            <a class="link-item current">
              <i class="k3-icon"></i>K3
            </a>
            <a :href="baccaratUrl" class="link-item">
              <i class="baccarat-icon"></i>BACCARAT
            </a>
          </div>
        </div>
        <div class="right-side">
          <a class="doughnut-link" v-if="account.name && doughnutData.cpu !== null" target="_blank" :href="`https://eospark.com/MainNet/account/${account.name}`">
            <div class="nav-doughnut">
              <doughnut
                :chart-data="doughnutData.cpu"
                :width="46"
                :height="46">
              </doughnut>
              <span>{{doughnutData.cpu.showText}}</span>
              <em>CPU</em>
            </div>
          </a>
          <a target="_blank" v-if="$i18n.locale == 'zh'" href="https://t.me/eosgetdice" class="nav-icon help-icon"></a>
          <a target="_blank" v-else href="https://t.me/eosgetsicboen" class="nav-icon help-icon"></a>
          <a href="javascript:" @click="lotteryShow = true" class="game-router-link">{{$t('nav.nav5')}}</a>
          <a href="javascript:" @click="showVip" class="game-router-link">VIP</a>
          <a class="game-router-link" href="https://dice.eosget.io/#/bonus">{{$t('nav.nav2')}}</a>
          <a class="game-router-link" href="https://dice.eosget.io/#/reward/k3">{{$t('nav.nav3')}}</a>
          <a class="game-router-link" target="_blank" :href="$i18n.locale == 'zh' ? `https://dice.eosget.io/whitePaper/whitePaper_zh.pdf` : `https://dice.eosget.io/whitePaper/whitePaper_en.pdf`">{{$t('nav.nav4')}}</a>
          <div class="lang">
            <template v-if="lang == 'zh'">
              <img src="../../assets/zh-logo.png" alt="" class="flag">
              <span>中文</span>
            </template>
            <template v-if="lang == 'en'">
              <img src="../../assets/en-logo.png" alt="" class="flag">
              <span>ENG</span>
            </template>
            <template v-if="lang == 'kr'">
              <img src="../../assets/kr-logo.png" alt="" class="flag">
              <span>한글</span>
            </template>
            <i class="arrow-down"></i>
            <div class="lang-change">
              <div class="lang-item" @click="changeLocale(item)" v-for="(item, key) in langArr" :key="key">
                <i class="zh-logo" :class="`${item}-logo`"></i>
                <template v-if="item == 'zh'">中文</template>
                <template v-if="item == 'en'">ENG</template>
                <template v-if="item == 'kr'">한글</template>
              </div>
            </div>
          </div>
          <new-work v-if="account.name"></new-work>
          <div class="login-btn" @click="doScatterLogin" v-if="account == 'NO_LOGINING' || account == ''"><i class="login-circle"></i>{{$t('header.login')}}</div>
          <div class="login-user-name" v-else>
            {{account.name}}<i class="arrow-down"></i>
            <span class="loginout-btn" @click="doScatterLoginOut">{{$t('header.loginOut')}}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 手机 -->
    <div class="game-moblie-nav">
      <i class="moblie-nav-icon nav-icon" @click="mobNavShow = true"></i>
      <i class="moblie-nav-close nav-icon" v-show="mobNavShow" @click="mobNavShow = false"></i>
      <div class="game-select-list">
        <div class="title" @click="gameListShow = !gameListShow">
          <img src="./img/k3-logo.png" alt="" class="k3-logo">
          <i class="white-arrow-down"></i>
        </div>
        <transition name="msgbox-fade">
          <div class="game-list" v-show="gameListShow">
            <a :href="diceUrl" class="select-list-item">
              <img src="./img/sicbo-logo.png" alt="" class="sicbo-logo">
            </a>
            <!-- <a :href="boxUrl" class="select-list-item">
              <img src="./img/box-logo.png" alt="" class="box-logo">
            </a> -->
            <a :href="baccaratUrl" class="select-list-item">
              <img src="./img/baccarat-logo.png" alt="" class="baccarat-logo">
            </a>
          </div>
        </transition>
      </div>
      <div class="login-btn" @click="doScatterLogin" v-if="account == 'NO_LOGINING' || account == ''"><i class="login-circle"></i>{{$t('header.login')}}</div>
      <div class="login-user-name" v-else>
        <span @click.stop="logoutShow = !logoutShow">{{account.name}}<i class="arrow-down"></i></span>
        <span class="loginout-btn" v-if="logoutShow">
          <em @click="doScatterLoginOut">{{$t('header.loginOut')}}</em>
        </span>
      </div>
      <transition name="msgbox-fade">
        <div class="nav-list" v-show="mobNavShow">
          <a href="https://www.eosget.io/" class="list-item">
            <img src="../../assets/dice-logo.png" class="eos-get-icon">EOS GET
          </a>
          <a href="javascript:" @click="lotteryShow = true"  class="list-item">
            {{$t('nav.nav5')}}
          </a>
          <a href="javascript:" @click="showVip" class="list-item">
            VIP
          </a>
          <a href="https://dice.eosget.io/#/bonus" class="list-item">
            {{$t('nav.nav2')}}
          </a>
          <a href="https://dice.eosget.io/#/reward/k3" class="list-item">
            {{$t('nav.nav3')}}
          </a>
          <a :href="$i18n.locale == 'zh' ? `https://dice.eosget.io/whitePaper/whitePaper_zh.pdf` : `https://dice.eosget.io/whitePaper/whitePaper_en.pdf`" class="list-item">
            {{$t('nav.nav4')}}
          </a>
          <div class="list-item" :class="{'current' : item == lang}" @click="changeLocale(item)" v-for="(item, key) in langArr" :key="key">
            <i class="zh-logo" :class="`${item}-logo`"></i>
            <template v-if="item == 'zh'"><img src="../../assets/zh-logo.png" alt="" class="flag">中文</template>
            <template v-if="item == 'en'"><img src="../../assets/en-logo.png" alt="" class="flag">ENG</template>
            <template v-if="item == 'kr'"><img src="../../assets/kr-logo.png" alt="" class="flag">한글</template>
          </div>
          <div class="list-item">
            <img class="tel-icon" src="./img/tel-icon.png" alt="">
          </div>
        </div>
      </transition>
    </div>
    <!-- 幸运抽奖 -->
    <mod-lottery v-if="lotteryShow" @visible:lottery="lotteryShow = false"></mod-lottery>
  </div>
</template>
<script>
import { getLanguage, Cookie } from '../../util/util.js'
import { mapState, mapActions } from 'vuex'
import modLottery from './lottery'

export default {
  name: 'gameNav',
  data () {
    return {
      lang: '',
      langArr: ['zh', 'en', 'kr'],
      isMoblie: /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent),
      refreshTimer: null, // 数据刷新计时器
      refreshInterval: 3000, // 默认数据刷新间隔为3秒
      doughnutData: {
        cpu: null,
        net: null
      },
      mobNavShow: false,
      lotteryShow: false,
      logoutShow: false,
      gameListShow: false
    }
  },
  components: {
    doughnut: () => import('./doughnut'),
    newWork: () => import('./newWork'),
    modLottery
  },
  computed: {
    ...mapState({
      account: state => state.account,
      limit: state => state.limit,
      invitee: state => state.invitee
    }),
    diceUrl: function () {
      return this.invitee
        ? `https://dice.eosget.io/?a=${this.invitee}`
        : 'https://dice.eosget.io/'
    },
    boxUrl: function () {
      return this.invitee
        ? `https://box.eosget.io/?a=${this.invitee}`
        : 'https://box.eosget.io/'
    },
    k3Url: function () {
      return this.invitee
        ? `https://k3.eosget.io/?a=${this.invitee}`
        : 'https://k3.eosget.io/'
    },
    baccaratUrl: function () {
      return this.invitee
        ? `https://baccarat.eosget.io/?a=${this.invitee}`
        : 'https://baccarat.eosget.io/'
    }
  },
  watch: {
    limit (obj) {
      if (obj.cpu && obj.net) {
        this.initDoughnut(obj.cpu.toFixed(2), obj.net.toFixed(2))
      }
    }
  },
  methods: {
    ...mapActions([
      'doScatterLogin',
      'doScatterLoginOut',
      'getUserEOS',
      'getUserGT'
    ]),
    changeLocale (lang) {
      this.$i18n.locale = lang
      Cookie.setLangCookie('eosget_lang', lang)
      this.lang = lang
      document.title = this.$t('pageTitle')
    },
    /**
     * 设置用户CPU、NET 使用率数据
     */
    initDoughnut (cpu, net) {
      let color = ['#39cd6d', '#ff3434']
      cpu = cpu * 100
      if (cpu < 80) {
        this.doughnutData.cpu = null
        return
      }
      net = net * 100
      this.doughnutData.cpu = {
        datasets: [{
          data: cpu > 100 ? [100, 0] : [cpu, 100 - cpu],
          backgroundColor: [cpu >= 80 ? color[1] : color[0], '#e5e9f2'],
          borderWidth: 0
        }],
        labels: ['Point', 'Other'],
        showText: cpu.toFixed(0) + '%'
      }
    },
    showVip () {
      this.$showVip()
    }
  },
  created () {
    document.body.addEventListener('click', (e) => {
      if (this.logoutShow) {
        this.logoutShow = false
      }
    })

    this.lang = Cookie.getCookie('eosget_lang') || getLanguage()
  }
}
</script>
<style lang="scss">
  @import './gameNav.scss';
  @import './gameNavMoblie.scss';
</style>