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

<template>
  <div class="jingpai-toast-mask">
    <div class="jingpai-toast z100" v-if="rewardRec">
      <p>{{$t('auction.text6')}}#{{rewardRec.actId}}{{$t('auction.text9')}}</p>
      <p>{{$t('auction.text10')}} {{rewardRec.return_eos / 10000}} EOS</p>
      <button @click="handleReward">{{$t('auction.takeBtn')}}</button>
    </div>
    <div class="jingpai-toast" v-if="rewardGt">
      <p>{{$t('auction.text5')}}#{{rewardGt.act_id}}{{$t('auction.text7')}}</p>
      <p>{{$t('auction.text8')}} {{rewardGt.return_gt / 10000}} GT</p>
      <button @click="handleRewardGt">{{$t('auction.confirmBtn')}}</button>
    </div>
  </div>
</template>
<script>
import API from '@/api'
import NP from 'number-precision'

export default {
  name: 'takeReward',
  props: ['rewardRec', 'rewardGt'],
  data () {
    return {
    }
  },
  computed: {
    auctionInfo () {
      return this.$store.state.auctionInfo
    },
    account () {
      return this.$store.state.account
    },
    eos () {
      return this.$store.state.eos
    }
  },
  methods: {
    // 领取奖励
    handleReward () {
      var takeReward = () => {
        let params = {
          actId: this.rewardRec.actId
        }
        this.$showLoading()
        API.auction.takeReward(params).then(({ data }) => {
          this.$hideLoading()
          if (data.code === 0) {
            this.$emit('closeEosReward')
            if (this.rewardRec.return_eos) {
              let amount = this.rewardRec.return_eos
              this.$store.commit('updateBalance', amount)
            }
            this.$showTips(this.$t('auction.reward'))
          }
        }).catch(() => {
          this.$emit('closeEosReward')
          this.$hideLoading()
        })
      }

      this.$store.dispatch('doGameLogin').then(data => {
        takeReward()
      })
    },
    handleRewardGt () {
      this.$showLoading()
      let params = {
        tipType: 'auction_loser_gt_return',
        player: this.account.name || null
      }
      API.auction.toggleReadTip(params).then(({ data }) => {
        let amount = this.rewardGt.return_gt
        this.$store.commit('updateGt', NP.divide(amount, 10000))
        this.$emit('closeGtReward')
        this.$hideLoading()
      }).catch(() => {
        this.$hideLoading()
        this.$emit('closeGtReward')
      })
    }
  },
  created () {
  }
}
</script>
<style lang="scss">
.jingpai-toast-mask{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba($color: #000000, $alpha: .5);
  z-index: 200;
  .z100{
    z-index: 100;
  }
}
.jingpai-toast{
  position: absolute;
  background: url('img/jingpai-tip-bg.png') no-repeat;
  background-size: 100%;
  width: px2rem(506);
  height: px2rem(260);
  left: 50%;
  top: px2rem(300);
  margin-left: -px2rem(253);
  font-size: px2rem(26);
  color: #fff;
  padding: px2rem(60) 0 px2rem(40) 0;
  p{
    text-align: center;
    margin-bottom: px2rem(20);
    &:nth-child(2) {
      margin-bottom: px2rem(40);
    }
  }
  >button{
    display: block;
    background-color: #e98d2b;
    width: px2rem(180);
    height: px2rem(50);
    line-height: px2rem(50);
    margin: 0 auto;
    text-align: center;
    color: #ffffff;
    border: none;
    outline: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: px2rem(22);
    &:hover{
      background-color: #dd9c56;
    }
  }
}
</style>