superstar-dice/_src/components/table/hugePrize.vue

<template>
  <div>
    <table class="huge-table" :class="{'en-lang': $i18n.locale == 'en'}">
      <thead>
        <th>{{$t('validate.text3')}}</th>
        <th>{{$t('table.col2')}}</th>
        <th>{{$t('table.col3')}}</th>
        <th>{{$t('table.col4')}}</th>
        <th>{{$t('table.col5')}}</th>
      </thead>
      <tbody>
        <tr v-for="(item, index) in list" :key="index">
          <td>
            <a class="link" target="_blank" :href="`https://eospark.com/block/${item.result_block_num}`" v-if="item.result_block_num">{{item.result_block_num}}</a>
          </td>
          <td>
            <i class="vip-level" :class="`icon-level${item.vip_level}`"></i>
            <span class="player-name"><a :href="`https://eospark.com/MainNet/account/${item.player}`" target="_blank" class="link">{{item.player}}</a></span>
          </td>
          <td class="left enable result" @click="$showValidate(item)">
            <span class="dice" :class="`dice-${item.num1}`"></span>
            <span class="dice" :class="`dice-${item.num2}`"></span>
            <span class="dice" :class="`dice-${item.num3}`"></span>
            <span class="type">{{resultMap(item.result.split('|')[0])}}</span>
            <span class="type">{{resultMap(item.result.split('|')[1])}}</span>
            <span class="type">{{item.result.split('|')[2]/1 - 1}}</span>
          </td>
          <td>
            <i class="money-icon"></i>
            <a class="link" target="_blank" :href="`https://eospark.com/tx/${item.transfer_trx_id}`">
              {{item.offerall.split(" ")[0]}} ({{getOffer(item.offertype)}})
            </a>
          </td>
          <td>
            <template v-if="item.win_int">
              <a target="_blank" class="link win-amount" :href="`https://eospark.com/tx/${item.result_trx_id}`">
                <i class="money-icon"></i>{{item.win_int / 10000}}
              </a>
            </template>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="moblie-list">
      <div class="list-item" v-for="(item, index) in list" :key="index" @click="$showValidate(item)">
        <div class="top">
           <i class="vip-level" :class="`icon-level${item.vip_level}`"></i>{{item.player}}
            <span class="amount">
              {{$t('table.col4')}}：<i class="game-eos-icon"></i>
              {{item.offerall.split(" ")[0]}} ({{getOffer(item.offertype)}})
           </span>
        </div>
        <div class="content">
          <div class="m-dice-item" :class="`dice-${item.num1}`"></div>
          <div class="m-dice-item" :class="`dice-${item.num2}`"></div>
          <div class="m-dice-item" :class="`dice-${item.num3}`"></div>
          <span class="type">{{resultMap(item.result.split('|')[0])}}</span>
          <span class="type">{{resultMap(item.result.split('|')[1])}}</span>
          <span class="type">{{resultMap(item.result.split('|')[2])}}</span>
          <div class="right" v-if="item.win_int > 0">
            {{$t('table.col5')}}<i class="game-eos-icon"></i><em>{{item.win_int / 10000}}</em>
          </div>
        </div>
        <div class="bottom">
          <div class="time" v-if="item.result_block_num">{{item.result_block_num}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import API from '@/api'

export default {
  data () {
    return {
      list: []
    }
  },
  props: ['bot'],
  watch: {
    bot () {
      this.getHugePeize()
    }
  },
  mounted () {
    this.getHugePeize()
  },
  methods: {
    getHugePeize (limit = 50, page = this.bot) {
      API.table.getHugePeize({ limit, page }).then(({ data }) => {
        this.list = this.list.concat(data.data.list)
        this.$emit('endloading')
      })
    },
    getOffer (offertype) {
      var belMap = (value) => {
        let map = {
          '0': this.$t('game.small.title'),
          '1': this.$t('game.big.title'),
          '3': this.$t('game.single.title'),
          '2': this.$t('game.double.title')
        }
        return value > 3 ? value / 1 - 1 : map[value]
      }

      let arr = offertype.split('|')
      arr.map((e, i) => {
        arr[i] = belMap(arr[i])
      })
      return arr.join(',')
    }
  },
  computed: {
    /**
     * 对应关系 0 小 1 大 2 双 3 单
     */
    resultMap (value) {
      return (value) => {
        let map = {
          '0': this.$t('game.small.title'),
          '1': this.$t('game.big.title'),
          '3': this.$t('game.single.title'),
          '2': this.$t('game.double.title')
        }
        return map[value]
      }
    }
  }
}
</script>