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

<template>
  <div>
    <table class="live-table" :class="{'en-lang': $i18n.locale == 'en'}">
      <thead>
        <th>{{$t('validate.text3')}}</th>
        <th>{{$t('table.col2')}}</th>
        <th>{{$t('table.col4')}}</th>
        <th>{{$t('table.col5')}}</th>
        <th>{{$t('table.col3')}}</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>
            <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 > 0">
              <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>
          <td class="left enable result" @click="$showValidate(item)" v-if="item.status == '1'">
            <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">{{belMap(item.result.split('|')[0])}}</span>
            <span class="type">{{belMap(item.result.split('|')[1])}}</span>
            <span class="type">{{belMap(item.result.split('|')[2])}}</span>
          </td>
          <td v-else>
            <span class="dice dice-round-1"></span>
            <span class="dice dice-round-2"></span>
            <span class="dice dice-round-3"></span>
          </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">
          <template v-if="item.status == '1'">
            <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">{{belMap(item.result.split('|')[0])}}</span>
            <span class="type">{{belMap(item.result.split('|')[1])}}</span>
            <span class="type">{{belMap(item.result.split('|')[2])}}</span>
          </template>
          <template v-else>
            <div class="dice dice-round-1"></div>
            <div class="dice dice-round-2"></div>
            <div class="dice dice-round-3"></div>
          </template>
          <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 { mapState } from 'vuex'
import API from '@/api'

export default {
  data () {
    return {
      list: []
    }
  },
  props: ['bot'],
  computed: {
    ...mapState({
      newOpen: state => state.newOpen,
      newOffer: state => state.newOffer
    }),
    belMap (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 value > 3 ? value / 1 - 1 : map[value]
      }
    }
  },
  mounted () {
    this.getLiveHistory()
  },
  methods: {
    getLiveHistory (limit = 50, page = this.bot) {
      API.table.getLiveHistory({ 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(',')
    }
  },
  watch: {
    newOpen (to, from) {
      let open = to
      let id = open.id
      let index = this.list.findIndex(item => Number(item.id) === id)
      let item = Object.assign(this.list[index], to)
      item.status = '1'
      this.$set(this.list, index, item)
    },
    newOffer (to, from) {
      let item = to
      item.status = '0'
      this.list.unshift(item)
    },
    bot () {
      this.getLiveHistory()
    }
  }
}
</script>