superstar-dice/_src/components/auction/auctionIcon.vue

<template>
  <div class="auction-icon-wrap">
    <div @click="handleClick" class="auction-icon" :class="{'moblie-auction-icon' : isMoblie}">
      <span v-if="!isMoblie">{{timeStr}}</span>
    </div>
    <auction-modal @closeaucmodal="auctionShow = false" v-if="auctionShow"></auction-modal>
    <take-reward
      @closeEosReward="rewardRec = null"
      @closeGtReward="rewardGt = null"
      v-if="rewardRec || rewardGt"
      :rewardRec="rewardRec"
      :rewardGt="rewardGt"
    ></take-reward>
  </div>
</template>
<script>
import Bus from '../../js/bus'
import API from '@/api'
import takeReward from './takeReward'

export default {
  name: 'auctionIcon',
  data () {
    return {
      timeStr: '',
      auctionShow: false,
      rewardRec: null, // eos获奖信息
      rewardGt: null, // gt获奖信息1
      ttl: 0,
      timer: null,
      isMoblie: /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)
    }
  },
  components: {
    auctionModal: () => import('../auction/auctionModal'),
    takeReward
  },
  computed: {
    account () {
      return this.$store.state.account
    }
  },
  watch: {
    account (to, from) {
      this.getAuctionInfo()
    }
  },
  methods: {
    updateTime () {
      if (this.ttl > 0 && this.prize >= 500000) {
        this.ttl -= 1
        let ttl = this.ttl
        let M = Math.floor(ttl % 3600 / 60)
        M = M < 10 ? '0' + M : M
        let S = Math.floor(ttl % 3600 % 60)
        S = S < 10 ? '0' + S : S
        this.timeStr = `${M}:${S}`
      }
      if (this.prize < 500000) {
        this.timeStr = this.$t('auction.ready')
      }

      Bus.$emit('update:time', this.timeStr, this.ttl)
      Bus.$emit('update:timeAuction', this.timeStr)
    },
    handleClick () {
      this.auctionShow = true
    },
    // 获取奖池信息
    getAuctionInfo () {
      let params = {
        player: this.account.name || null
      }
      API.auction.getAuctionInfo(params).then(({ data }) => {
        this.ttl = data.data.ttl
        this.prize = data.data.prize

        if (data.data.rewardList.length) {
          this.rewardRec = data.data.rewardList[0]
        }

        if (data.data.lastFailBid) {
          this.rewardGt = data.data.lastFailBid
        }

        this.$store.commit('setAuction', data.data)
      })
    }
  },
  created () {
    setInterval(() => {
      this.updateTime()
    }, 1000)

    // 获取奖池信息
    this.getAuctionInfo()

    Bus.$on('update:auctionShow', (data) => {
      this.auctionShow = true
    })

    // 竞拍接口请求
    Bus.$on('update:auctioninfo', (data) => {
      this.getAuctionInfo()
    })
  }
}
</script>
<style lang="scss">
.auction-icon{
  background: url('img/but_jinpai.png');
  background-size: 100%;
  width: 46px;
  height: 46px;
  margin-right: px2rem(20);
  cursor: pointer;
  position: relative;
  &:hover{
    background: url('img/but_jinpai_down.png');
    background-size: 100%;
  }
  span{
    position: absolute;
    top: 24px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 12px;
    color: #ffffff;
  }
}
.moblie-auction-icon{
  width: px2rem(46);
  height: px2rem(46);
}
</style>