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

<template>
  <div>
    <table :class="{'en-lang': $i18n.locale == 'en'}">
      <thead>
        <th>{{$t('validate.text3')}}</th>
        <th>{{$t('table.col8')}}</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 class="my-belt">
            <span v-for="(_item ,_index) in item.offertype.split('|')"
              :key="_index">
              {{belMap(_item)}}
              <em v-if="item.offertype.split('|').length != _index + 1">,</em>
            </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]}}</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" v-if="item.status == '1'" @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">{{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">
          <span v-for="(_item ,_index) in item.offertype.split('|')"
            :key="_index">
            {{belMap(_item)}}
            <em v-if="item.offertype.split('|').length != _index + 1">,</em>
          </span>
          <span class="amount">
            {{$t('table.col4')}}：<i class="game-eos-icon"></i>
            {{item.offerall.split(" ")[0]}}
          </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({
      account: state => state.account,
      newOpen: state => state.newOpen
    }),
    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]
      }
    }
  },
  watch: {
    account (to, from) {
      if (to.name) {
        this.getMyBet()
      }
    },
    bot () {
      this.getMyBet()
    },
    newOpen (to) {
      if (to.player === this.account.name) {
        let open = to
        let id = open.id
        let index = this.list.findIndex(item => Number(item.id) === id)
        if (index >= 0) {
          let item = Object.assign(this.list[index], to)
          item.status = '1'
          this.$set(this.list, index, item)
        } else {
          to.status = '1'
          this.list.unshift(to)
        }
      }
    }
  },
  methods: {
    getMyBet (limit = 50, page = this.bot) {
      let player = this.account.name
      API.table.getMyBet({ player, limit, page }).then(({ data }) => {
        this.list = this.list.concat(data.data.list)
        this.$emit('endloading')
      })
    }
  }
}
</script>