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

<template>
  <div class="game-notice-mask">
    <div class="game-auction-modal">
      <div class="auction-boder-wrap">
        <div class="auction-title">
          <!-- <i></i> -->
          {{$t('auction.title')}}
          <i class="auction-help-icon" @click="explainShow = true"></i>
        </div>
        <i class="close-icon" @click="closemodal"></i>
        <div class="game-modal">
          <div class="win-wrap">
            <template v-if="auctionInfo">
              <div class="row" v-if="auctionInfo.lastTrx">{{$t('auction.text1')}}：{{auctionInfo.lastTrx.player}}</div>
              <div class="row" v-else>{{$t('auction.text1')}}：</div>
              <div class="row-bot" v-if="auctionInfo.lastTrx">{{$t('auction.text2')}} {{auctionInfo.lastTrx.gt_amount / 10000}} GT {{$t('auction.text3')}} {{auctionInfo.lastTrx.return_eos / 10000}} EOS</div>
              <div class="row-bot" v-else>{{$t('auction.text2')}} - GT {{$t('auction.text3')}} - EOS</div>
            </template>
          </div>
          <div class="auc-bg">
            <div class="auc-top">
              <span class="acu-top-left">{{$t('auction.title')}} #{{auctionInfo.actId}}</span>
              <span class="auc-top-tips">{{$t('auction.modalTips')}}</span>
              <span class="auc-time-right">
                <i class="time-count-icon"></i>
                {{timeStr}}
              </span>
            </div>
            <div class="auc-mid">
              <img class="eos-icon" src="../../assets/icon_b_eos_mii.png" alt="">
              <p class="amount">{{auctionInfo.prize / 10000}} EOS</p>
            </div>
            <div class="auc-bot">
              <div class="auc-bot-item">
                <p class="auc-bot-title">{{$t('auction.lastPrice')}}：</p>
                <div class="auc-bot-row">
                  <template v-if="lastBid && !firstTime">
                    <p>{{lastBid.player}}</p>
                    <p>{{originAmount}} GT</p>
                    <p>{{lastBid.create_time_human}}</p>
                  </template>
                  <template v-else>
                    <p>---</p>
                    <p>---</p>
                    <p>---</p>
                  </template>
                </div>
              </div>
              <div class="auc-bot-item">
                <p class="auc-bot-title">{{$t('auction.text4')}}：</p>
                <div class="auc-bot-input">
                  <div class="auc-input-box">
                    <input class="input-wrap" readonly @input="handleInput" type="number" v-model.number="gtAmount">
                    <i>GT</i>
                  </div>
                  <button :class="{'current': btn1Click}" @click="changeAmount(1.25, 1)">+25%</button>
                  <!-- <button :class="{'current': btn2Click}" @click="changeAmount(1.5, 2)">+50%</button> -->
                </div>
              </div>
            </div>
            <div class="auc-btn" :class="{'diasble' : disableBtn || auctionInfo.prize < 500000}" @click="confirmBtn">{{$t('auction.confirmBtn')}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 解析弹窗 -->
    <div class="modal-mask" v-show="explainShow">
      <div class="overflow-modal">
        <div class="title">{{$t('auction.title')}}</div>
        <i class="close-icon" @click="explainShow = false"></i>
        <div class="game-modal">
          <div class="list-item">
            <span class="order">*.</span>
            <div class="text-wrap">
              <p class="text">{{$t('auction.explain0')}}</p>
            </div>
          </div>
          <div class="list-item">
            <span class="order">1.</span>
            <div class="text-wrap">
              <p class="text">{{$t('auction.explain1')}}</p>
            </div>
          </div>
          <div class="list-item">
            <span class="order">2.</span>
            <div class="text-wrap">
              <p class="text">{{$t('auction.explain2')}}</p>
            </div>
          </div>
          <div class="list-item">
            <span class="order">3.</span>
            <p class="item-text">{{$t('auction.explain3')}}</p>
          </div>
          <div class="list-item">
            <span class="order">4.</span>
            <p class="item-text">{{$t('auction.explain4')}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import NP from 'number-precision'
import { showError } from '../../util/util.js'
import Bus from '../../js/bus'
import API from '@/api'
import { mapState } from 'vuex'

export default {
  name: 'auction',
  data () {
    return {
      gtAmount: null, // 出价
      originAmount: null, // 原价
      lastBid: null,
      btn1Click: false,
      btn2Click: false,
      timeStr: '',
      rewardShow: false, // 领取奖励提示框
      rewardRec: null, // 用户获奖记录
      explainShow: false, // 说明弹窗
      firstTime: true
    }
  },
  computed: {
    eos () {
      return this.$store.state.eos
    },
    account () {
      return this.$store.state.account
    },
    gt () {
      return this.$store.state.gt
    },
    identity () {
      return { authorization: [`${this.account.name}@${this.account.authority}`] }
    },
    disableBtn () {
      if (!this.firstTime) {
        if (this.originAmount && this.gtAmount) {
          return Number(this.gtAmount) < NP.times(this.originAmount, 1.25)
        } else {
          return true
        }
      } else {
        return false
      }
    },
    ...mapState({
      eos: state => state.eos,
      account: state => state.account,
      gt: state => state.gt,
      auctionInfo: state => state.auctionInfo
    })
  },
  watch: {
    auctionInfo (to, from) {
      this.lastBid = to.lastBid

      let toGtAmount = to.lastBid.gt_amount / 10000
      if (toGtAmount !== this.originAmount) {
        this.gtAmount = toGtAmount
        this.originAmount = Number(toGtAmount)
        this.btn1Click = false
        this.btn2Click = false
      }
      if (!to.lastBid.player) {
        this.firstTime = true
      } else {
        this.firstTime = false
      }
    }
  },
  methods: {
    handleInput (e) {
      let val = e.target.value
      if (val === NP.times(this.originAmount, 1.25)) {
        this.btn1Click = true
        return
      }
      if (val === NP.times(this.originAmount, 1.5)) {
        this.btn2Click = true
        return
      }
      this.btn1Click = false
      this.btn2Click = false
    },
    closemodal () {
      this.$emit('closeaucmodal')
    },
    changeAmount (per, type) {
      if (type === 1) {
        if (!this.btn1Click) {
          this.gtAmount = Math.ceil(NP.times(this.originAmount, per))
          this.btn1Click = true
          this.btn2Click = false
        } else {
          this.gtAmount = this.originAmount
          this.btn1Click = false
        }
      }
      if (type === 2) {
        if (!this.btn2Click) {
          this.gtAmount = Math.ceil(NP.times(this.originAmount, per))
          this.btn2Click = true
          this.btn1Click = false
        } else {
          this.gtAmount = this.originAmount
          this.btn2Click = false
        }
      }
    },
    // 确认竞拍
    confirmBtn () {
      if (!this.account.name) {
        this.$store.dispatch('doScatterLogin')
        return
      }
      if (this.gtAmount > this.gt) {
        this.$showTips(this.$t('noMoney'))
        return
      }

      var doAction = (params) => {
        API.auction.sendTrx(params)
          .then(({ data }) => {
            this.$hideLoading()
            if (data.code === 0) {
              this.$store.commit('updateGt', -this.gtAmount)
              this.$showTips(this.$t('auction.success'))
              this.btn1Click = false
              this.btn2Click = false
              this.getAuctionInfo()
            } else if (data.code === 5) {
              this.$store.dispatch('doGameLogin').then(data => {
                this.confirmBtn()
              })
            }
          }).catch(() => {
            this.$hideLoading()
          })
      }

      this.$showLoading()
      let chargeAmount = this.gtAmount.toFixed(4) + ' GT'
      let memo = 'auction|' + this.lastBid.act_id
      window.EOS.contract('eosgetgtoken').then(contract => {
        contract.transfer(this.account.name, 'eosgetadmin1', chargeAmount, memo, this.identity)
          .then(trx => {
            doAction({
              transaction_id: trx.transaction_id,
              block_num: trx.processed.block_num ? trx.processed.block_num : '',
              player: this.account.name
            })
          })
          .catch(msg => {
            this.$hideLoading()
            if (msg.type === 'signature_rejected') {
              return
            }
            let json = JSON.parse(msg)
            let details = json.error.details
            showError(details[0].message)
          })
      })
    },
    // 获取奖池信息
    getAuctionInfo () {
      let params = {
        player: this.account.name || null
      }
      API.auction.getAuctionInfo(params).then(({ data }) => {
        if (data.code === 0) {
          this.lastBid = data.data.lastBid
          this.gtAmount = data.data.lastBid.gt_amount / 10000
          this.originAmount = Number(this.gtAmount)
          if (data.data.lastBid.player) {
            this.firstTime = false
          }
        } else if (data.code === -5) {
          this.$store.dispatch('doGameLogin').then(data => {
            this.getAuctionInfo()
          })
        }
      })
    }
  },
  created () {
    this.getAuctionInfo()
    // 倒计时
    Bus.$on('update:time', (time, ttl) => {
      this.timeStr = time
      if (ttl < 0) {
        this.timeStr = '结算中'
      }
    })
  },
  beforeDestroy () {
    Bus.$off('update:time')
  }
}
</script>
<style lang="scss">
.game-notice-mask{
  overflow-y: auto;
}
.game-auction-modal{
  background-color: #1b1b1a;
  position: absolute;
  left: 50%;
  margin-left: -px2rem(365);
  // width: px2rem(820);
  width: px2rem(730);
  top: px2rem(60);
  @media #{$phone} {
    top: px2rem(200);
  }
  .auc-btn{
    width: px2rem(112);
    height: px2rem(46);
    background: url('../../assets/but_y01_1.png') no-repeat;
    background-size: 100%;
    line-height: px2rem(50);
    text-align: center;
    color: #50370b;
    font-size: px2rem(24);
    margin: px2rem(20) auto 0 auto;
    border-radius: 6px;
    cursor: pointer;
    &:hover{
      background: url('../../assets/but_y01_2.png') no-repeat;
      background-size: 100%;
    }
    &.diasble{
      pointer-events: none;
      background-color: #a1a1a1;
      background-image: none;
      color: #ffffff;
    }
  }
  .auc-bg{
    background: url('../../assets/bg_gold.png') center bottom no-repeat;
    width: px2rem(730);
    background-size: contain;
    margin: 0 auto px2rem(20) auto;
    overflow: hidden;
    padding: 0 px2rem(30);
    box-sizing: border-box;
    // @media #{$phone} {
    //   padding: 0 px2rem(10);
    // }
    .auc-top{
      font-size: px2rem(18);
      margin-top: px2rem(10);
      height: px2rem(36);
      color: #999999;
      position: relative;
      .auc-top-tips{
        position: absolute;
        left: px2rem(100);
        right: px2rem(100);
        bottom: 0;
        text-align: center;
        height: px2rem(36);
        line-height: px2rem(36);
      }
    }
    .auc-mid{
      text-align: center;
      position: relative;
    }
    .eos-icon{
      display: block;
      width: px2rem(180);
      margin: 0 auto;
    }
    .amount{
      position: absolute;
      bottom: -px2rem(10);
      left: 0;
      right: 0;
      font-size: px2rem(36);
      color: #d7ac68;
    }
  }
  .auc-input-box{
    position: relative;
    display: inline-block;
    vertical-align: top;
    >i{
      position: absolute;
      top: px2rem(14);
      right: px2rem(14);
      font-style: normal;
      font-size: px2rem(24);
      color: #fff;
      line-height: 1;
    }
  }
  .auc-bot{
    // margin-top: px2rem(20);
    &-item{
      font-size: px2rem(18);
      margin-bottom: px2rem(10);
      .auc-bot-title{
        color: #999999;
        margin-bottom: px2rem(6);
      }
      p{
        color: #ffffff;
      }
    }
    &-row{
      background-color: rgba($color: #000000, $alpha: .6);
      border: 1px solid #594a34;
      height: px2rem(44);
      line-height: px2rem(44);
      display: flex;
      padding: 0 px2rem(14);
      margin-top: px2rem(4);
      p{
        flex: 1;
        text-align: center;
        &:first-child{
          text-align: left;
        }
        &:last-child{
          text-align: right;
        }
      }
    }
  }
  .auc-time-right{
    width: px2rem(120);
    height: px2rem(36);
    line-height: px2rem(36);
    text-align: center;
    color: #999999;
    font-size: px2rem(20);
    float: right;
    .time-count-icon{
      display: inline-block;
      vertical-align: middle;
      background: url('../../assets/iocn_time.png') no-repeat;
      background-size: 100%;
      width: px2rem(26);
      height: px2rem(36);
    }
  }
  .acu-top-left{
    display: inline-block;
    height: px2rem(36);
    line-height: px2rem(36);
    // margin-top: px2rem(6);
  }
  .game-modal{
    height: auto;
    margin-top: 0;
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
  }
  .auction-help-icon{
    display: inline-block;
    vertical-align: middle;
    background: url('img/icon_question.png');
    background-size: 100%;
    width: px2rem(24);
    height: px2rem(24);
    right: px2rem(300);
    top: px2rem(30);
    cursor: pointer;
    @media #{$phone} {
      display: none;
    }
  }
  .title{
    font-size: px2rem(30);
    i{
      display: inline-block;
      vertical-align: middle;
      background: url('img/icon_jingpai.png') no-repeat;
      margin-right: px2rem(10);
      background-size: 100%;
      width: px2rem(35);
      height: px2rem(33);
    }
  }
  .win-wrap{
    width: px2rem(666);
    height: px2rem(80);
    line-height: 1;
    margin: 0 auto;
    background-color: #161615;
    border: 1px solid #262625;
    padding: px2rem(18) px2rem(30);
    box-sizing: border-box;
    font-size: px2rem(18);
    .row{
      color: #999999;
      margin-bottom: px2rem(12);
    }
    .row-bot{
      color: #d7ac68;
    }
  }
  .auction-title{
    height: px2rem(50);
    line-height: px2rem(50);
    border-bottom: 1px solid #d7ac68;
    text-align: center;
    font-size: px2rem(24);
    color: #ffffff;
  }
  .auc-bot-input{
    font-size: 0;
    line-height: 1;
    .input-wrap{
      display: inline-block;
      vertical-align: top;
      background-color: rgba($color: #000000, $alpha: .6);
      height: px2rem(44);
      line-height: px2rem(44);
      border: 1px solid #594a34;
      box-sizing: border-box;
      outline: none;
      width: px2rem(440);
      font-size: px2rem(24);
      color: #fff;
      padding-left: px2rem(16);
    }
    button{
      outline: none;
      text-align: center;
      color: #ffffff;
      background-color: rgba($color: #000000, $alpha: .8);
      border: 1px solid #594a34;
      height: px2rem(44);
      line-height: px2rem(44);
      width: px2rem(220);
      font-size: px2rem(24);
      margin-left: px2rem(8);
      cursor: pointer;
      &.current{
        background-color: #a48642;
      }
      // &:last-child{
      //   border-top-right-radius: 6px;
      //   border-bottom-right-radius: 6px;
      // }
    }
  }
}
.auction-boder-wrap{
  // border: 6px solid #19274e;
  // border-radius: 12px;
}

.game-notice-mask{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 199;
  background-color: rgba($color: #000000, $alpha: .8);
  .game-modal{
    padding-top: px2rem(10);
    // margin-top: px2rem(20);
    overflow-y: auto;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    &::-webkit-scrollbar {
      width: 10px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 12px;
      background: rgba(#222222, 0.6);
    }
  }
  .close-icon{
    position: absolute;
    z-index: 10;
    cursor: pointer;
    background: url('../../assets/关闭@2x.png') center center no-repeat;
    background-size: px2rem(20) px2rem(20);
    width: px2rem(40);
    height: px2rem(40);
    background-color: rgba($color: #000000, $alpha: .6);
    top: px2rem(4);
    right: px2rem(4);
    &:hover{
      background-color: rgba($color: #000000, $alpha: .4);
    }
  }
  .title{
    position: absolute;
    width: px2rem(254);
    height: px2rem(70);
    background-size: 100%;
    top: px2rem(6);
    left: 50%;
    margin-left: -px2rem(127);
    font-size: px2rem(24);
    color: #ffffff;
    text-align: center;
    line-height: px2rem(70);
    z-index: 10;
  }
}
.modal-mask{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 199;
  background-color: rgba($color: #000000, $alpha: .8);
  .overflow-modal{
    position: absolute;
    left: 50%;
    top: 50%;
    background: url('img/modal-board.png') no-repeat;
    background-size: 100%;
    width: px2rem(1188);
    height: px2rem(547);
    transform: translate(-50%, -50%);
  }
  .game-modal{
    padding: px2rem(80) px2rem(70);
    height: px2rem(500);
    margin-top: px2rem(20);
    overflow-y: auto;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    &::-webkit-scrollbar {
      width: 10px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 12px;
      background: rgba(#222222, 0.6);
    }
  }
  .close-icon{
    position: absolute;
    z-index: 10;
    cursor: pointer;
    background: url('img/but_closed01_up.png') center center no-repeat;
    background-size: 100%;
    width: px2rem(88);
    height: px2rem(58);
    top: px2rem(33);
    right: -px2rem(78);
    &:hover{
      background: url('img/but_closed01_down.png') center center no-repeat;
      background-size: 100%;
    }
  }
  .title{
    position: absolute;
    background: url('img/tit_01.png');
    width: px2rem(254);
    height: px2rem(70);
    background-size: 100%;
    top: px2rem(6);
    left: 50%;
    margin-left: -px2rem(127);
    font-size: px2rem(30);
    color: #ffffff;
    text-align: center;
    line-height: px2rem(70);
    z-index: 10;
  }
  .counter-title{
    text-align: center;
    color: #ffffff;
    margin-bottom: 20px;
    p{
      font-size: 30px;
      font-weight: bold;
      display: inline-block;
      padding: 0 5px;
      border-bottom: 2px solid #ffffff;
    }
  }
  .list-item{
    display: flex;
    font-size: px2rem(24);
    color: #ffffff;
    margin-bottom: 8px;
    line-height: 1.6;
    text-align: left;
    .order{
      width: 26px;
    }
    .item-text{
      flex: 1;
    }
    .text-wrap{
      flex: 1;
      a{
        color: #f1e000;
      }
    }
  }
}
</style>