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

<template>
  <div class="game-nav-newwork" @mouseenter="testMainNet">
    <i class="wifi-icon" :class="wifiColor"></i>
    <div class="newwork-list">
      <p class="newwork-item" @click="changeMainnet(item.host, item.delay)" :class="getCurClass(item.host)" v-for="(item, key) in newWorkData" :key="key">
        <span class="name">{{item.mainnet}}</span>
        <span class="time" :class="stateMap[item.state]">{{item.delay}}</span>
      </p>
    </div>
  </div>
</template>
<script>
import { mainNetMap, changeNewWork } from '../../util/contract.js'
import Eos from 'eosjs'

export default {
  name: 'gameNetWork',
  data () {
    return {
      newWorkData: [],
      stateMap: ['test', 'green', 'yellow', 'red'],
      currentDelay: 0
    }
  },
  computed: {
    mainnet () {
      return this.$store.state.mainnet
    },
    scatter () {
      return this.$store.state.scatter
    },
    wifiColor () {
      let deyTime = this.currentDelay
      let className = 'green'
      if (deyTime >= 1e3) {
        className = 'red'
      } else if (deyTime > 500 && deyTime < 1e3) {
        className = 'yellow'
      } else if (deyTime <= 500) {
        className = 'green'
      }
      return className
    }
  },
  methods: {
    testMainNet () {
      for (let i in mainNetMap) {
        let ind = Object.keys(mainNetMap).indexOf(i)
        let mainnet = mainNetMap[i]
        let curTime = new Date().getTime()
        fetch(`https://${mainnet}/v1/chain/get_info`)
          .then(res => {
            if (res.ok) {
              let deyTime = new Date().getTime() - curTime
              let state = 0
              if (deyTime >= 1e3) {
                state = 3
              } else if (deyTime > 500 && deyTime < 1e3) {
                state = 2
              } else if (deyTime <= 500) {
                state = 1
              }
              this.newWorkData[ind].state = state
              this.newWorkData[ind].delay = deyTime + 'ms'
            } else {
              return Promise.reject(new Error(`${mainnet} request fail`))
            }
          })
          .catch(error => {
            Promise.reject(error)
          })
      }
    },
    getCurClass (host) {
      if (this.mainnet === host) {
        return 'current'
      }
    },
    changeMainnet (host, delay) {
      if (window.location.port === '8080' || /^test-|\.webdev2\./.test(window.location.host)) {
        return
      }
      window.EOS = this.scatter.eos(changeNewWork(host), Eos, {})
      this.$store.commit('setMainnet', host)
      this.currentDelay = delay.replace(/ms/, '')
    }
  },
  created () {
    for (let i in mainNetMap) {
      this.newWorkData.push({
        mainnet: i,
        delay: 'connecting',
        state: 0,
        host: mainNetMap[i]
      })
    }
  }
}
</script>
<style lang="scss">
.game-nav-newwork{
  display: inline-block;
  height: px2rem(58);
  line-height: px2rem(58);
  width: px2rem(60);
  text-align: center;
  margin: 0 px2rem(10);
  position: relative;
  &:hover{
    .newwork-list{
      display: block;
    }
  }
  .wifi-icon{
    display: inline-block;
    width: px2rem(50);
    height: px2rem(50);
    cursor: pointer;
    margin-top: px2rem(6);
    &.green{
      background: url('../../assets/wifi-green.png') center center no-repeat;
      background-size: px2rem(30) px2rem(20);
    }
    &.yellow{
      background: url('../../assets/wifi-yellow.png') center center no-repeat;
      background-size: px2rem(30) px2rem(20);
    }
    &.red{
      background: url('../../assets/wifi-red.png') center center no-repeat;
      background-size: px2rem(30) px2rem(20);
    }
  }
  .newwork-list{
    position: absolute;
    display: none;
    top: px2rem(58);
    left: -px2rem(100);
    width: px2rem(245);
    border: 2px solid #9f87eb;
    background-color: #282475;
    border-radius: 6px;
    overflow: hidden;
    .close-icon{
      background: url('../../assets/newwork-close-icon.png');
      width: px2rem(16);
      height: px2rem(16);
      background-size: 100%;
      position: absolute;
      right: px2rem(10);
      top: px2rem(8);
      cursor: pointer;
    }
  }
  .newwork-item{
    height: px2rem(38);
    line-height: px2rem(38);
    text-align: left;
    padding: 0 px2rem(10);
    cursor: pointer;
    &.current{
      .name{
        color: #ffffff;
        position: relative;
        padding-left: px2rem(18);
        &::after{
          content: '';
          position: absolute;
          left: px2rem(4);
          top: px2rem(6);
          width: 0;
          height: 0;
          border-width:px2rem(6) 0 px2rem(6) px2rem(6);
          border-style:solid;
          border-color:transparent transparent transparent #ffffff;
        }
      }
    }
    &:nth-child(even) {
      background-color: #1b166c;
    }
    .name{
      font-size: px2rem(14);
      color: #b9b5ff;
    }
    .time{
      float: right;
      font-size: px2rem(14);
      &.green{
        color: #39cd6d;
      }
      &.yellow{
        color: #ffff00;
      }
      &.red{
        color: #ff3434;
      }
      &.test{
        color: #b9b5ff;
      }
    }
  }
}
// 手机兼容
.moblie-nav{
  .game-nav-newwork{
    .newwork-list{
      top: 20px;
      left: -40px;
      width: 140px;
      padding-top: 20px;
      .close-icon{
        width: 16px;
        height: 16px;
        right: 4px;
        top: 2px;
      }
    }
    .newwork-item{
      height: 20px;
      line-height: 20px;
      padding: 0 4px;
      &.current{
        .name{
          padding-left: 10px;
          &::after{
            left: 2px;
            top: 5px;
            border-width:4px 0 4px 4px;
          }
        }
      }
      .name{
        font-size: 12px;
      }
      .time{
        font-size: 12px;
      }
    }
  }
}
</style>