superstar-dice/_src/components/popup/vip/vip.vue

<template>
  <transition name="msgbox-fade">
    <div class="popup-wrap" v-if="visible">
      <div class="popup-modal"></div>
      <div class="popup-box">
        <div class="popup-hd">
          <div class="popup-hd-title"><em>{{$t('vip.title')}}</em></div>
          <span class="popup-close" @click="visible = false"></span>
        </div>
        <div class="popup-bd">
          <div class="vip-wrap">
            <div class="vip-hd">
              <div class="level-current">
                <i :class="`icon-level${vipLevel}`" v-if="vipLevel !== null"></i>
              </div>
              <div class="level-progress">
                <div class="level-comming">
                  <p>{{$t('vip.text1')}} {{needMore}} EOS {{$t('vip.text2')}}</p>
                  <i :class="`icon-level${vipLevel + 1}`"  v-if="vipLevel !== null"></i>
                </div>
                <div class="progress-wrap">
                  <div class="progress-bar" :style="{ width: progress}"></div>
                </div>
              </div>
              <div class="level-next">
                <i :class="`icon-level${vipLevel + 1}`" v-if="vipLevel !== null"></i>
              </div>
            </div>
            <div class="vip-bd">
              <p class="vip-introtips">
                {{$t('vip.intro')}}<br />
                {{$t('vip.tips')}}
              </p>
              <table class="vip-level">
                <thead>
                  <tr>
                    <th>{{$t('vip.tab1')}}</th>
                    <th>{{$t('vip.tab2')}}(EOS)</th>
                    <th>{{$t('vip.tab3')}}(EOS)</th>
                    <th>{{$t('vip.tab4')}}(GT)</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in vipList" :key="index">
                    <td class="t1"><i :class="`icon-level${index + 1}`"></i></td>
                    <td class="t2"><span>{{item.need}}</span></td>
                    <td class="t3"><span>{{item.return}}</span></td>
                    <td class="t4"><span>{{item.airdrop}}</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import API from '@/api/'
import NP from 'number-precision'
import $store from '@/store/index'

export default {
  name: 'vipPopup',
  data () {
    return {
      vipLevel: null,
      nextVipNeed: '',
      needMore: '',
      progress: 0,
      vipList: []
    }
  },
  async created () {
    while (this.vipList.length < 10) {
      this.vipList.push({})
    }

    await $store.dispatch('doScatterLogin')

    this.$showLoading()
    API.user.getVipInfo({}).then(({ data }) => {
      this.$hideLoading()
      if (data.code === 0) {
        data.data.vip_list.forEach(n => {
          n.return = NP.times(n.return, 100) + '%'
        })

        this.vipList = data.data.vip_list
        this.needMore = data.data.need_more
        this.nextVipNeed = data.data.next_vip_need
        this.vipLevel = data.data.vip_level
        this.progress = (this.nextVipNeed - this.needMore) / this.nextVipNeed * 100 + '%'
      }
    }).catch(() => {
      this.$hideLoading()
    })
  }
}
</script>

<style lang="scss">
  @import "./style.scss";
</style>