superstar-dice/_src/components/popup/charge/charge.vue

<template>
  <transition name="msgbox-fade">
    <div class="popup-wrap" v-if="showCharge">
      <div class="popup-modal"></div>
      <div class="popup-box">
        <div class="popup-hd">
          <div class="popup-hd-title"><em>{{$t('popupCharge.title1')}}</em></div>
          <span class="popup-close" @click="showCharge = false"></span>
        </div>
        <div class="popup-bd">
          <div class="charge-wrap">
            <h3>{{$t('popupCharge.title1')}}EOS</h3>
            <div class="c-input">
              <input type="text" v-model="amount" @input="onInput">
              <span>EOS</span>
            </div>
            <p class="c-tips1">
              1. {{$t('popupCharge.content1')}}.<br/>
              2. {{$t('popupCharge.content2')}}.
            </p>
            <div class="c-ctrl">
              <span class="btn-confirm" @click="confirmCharge()">{{$t('popupCharge.btn1')}}</span>
            </div>
            <p class="c-tips2">
              <span @click="showDetail()">{{$t('popupCharge.btn2')}}</span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="popup-wrap" v-if="showWallet">
      <div class="popup-modal"></div>
      <div class="popup-box">
        <div class="popup-hd">
          <div class="popup-hd-title"><em>{{$t('popupCharge.text1')}}</em></div>
          <span class="popup-close" @click="showWallet = false"></span>
        </div>
        <div class="popup-bd">
          <div class="wallet-wrap">
            <div class="wallet-hd">
              <p>{{account.name}}</p>
            </div>
            <div class="wallet-bd">
              <div class="bd-con">
                <h4>{{$t('popupCharge.text1')}}</h4>
                <p><i></i>{{money}}</p>
              </div>
              <p class="bd-tips">{{$t('popupCharge.content3')}}{{leftTimes}}</p>
            </div>
            <div class="wallet-ft">
              <div class="ft-row1">
                <span class="btn-out" @click="handleWithDraw()">{{$t('popupCharge.btn3')}}</span>
                <span class="btn-in" @click="handleCharge()">{{$t('popupCharge.title1')}}</span>
              </div>
              <div class="ft-row2">
                <span @click="showDetail()">{{$t('popupCharge.btn2')}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { mapState } from 'vuex'
import API from '@/api'
import Detail from '@/components/popup/detail'
// import NP from 'number-precision'
import { MessageBox } from 'element-ui'
// import { showError } from '@/util/util.js'
// import { deposit } from '@/util/contract.js'

export default {
  name: 'popupCharge',
  data () {
    return {
      amount: null, // 用户输入的充值金额
      leftTimes: null, // 用户每天剩余的提现次数
      showWallet: false,
      showCharge: false
    }
  },
  computed: {
    ...mapState({
      eos: state => state.eos,
      account: state => state.account,
      balance: state => state.balance / 10000,
      money: state => state.money / 10000,
      gt: state => state.gt,
      toAccount: state => state.toAccount
    })
  },
  created () {
    API.eos.getLeftTimes({ player: this.account.name }).then(({ data }) => {
      if (data.code === 0) {
        this.leftTimes = data.data
      }
    })
  },
  methods: {
    onInput (e) {
      let bet = (e.target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || ''
      bet = bet ? Number(bet) : ''
      this.amount = bet > this.balance ? this.balance : bet
    },
    confirmCharge () {
      if (this.amount > this.balance) {
        return
      }
      this.$showLoading()
      this.$store.dispatch('doDeposit', {
        amount: this.amount,
        callback: () => {
          this.$hideLoading()
          this.amount = null
          this.handleWallet()
          localStorage.setItem('showFTips', 0)
        },
        cancel: () => {
          this.$hideLoading()
        }
      })
    },
    handleWithDraw () {
      if (!this.money) {
        return
      }
      let that = this
      this.$showLoading()
      API.game.getBalance({
        player: this.account.name
      }).then(({ data }) => {
        this.$store.commit('setMoney', data.data.balance)
        // let amount = this.money
        // this.$store.dispatch('doWithDraw', {
        //   callback: () => {
        //     this.$hideLoading()
        //     MessageBox.confirm(`成功提现 ${amount} EOS`, '提示', {
        //         showCancelButton: false,
        //         showConfirmButton: true,
        //         center: true,
        //         callback () {
        //         }
        //     })
        //     this.leftTimes -= 1
        //     localStorage.setItem('showFTips', 0)
        //   },
        //   cancel: () => {
        //     this.$hideLoading()
        //   }
        // })
        let tranFormAmount = data.data.balance
        let param = {
          player: this.account.name,
          amount: tranFormAmount,
          appid: this.$store.state.appid
        }

        this.$showLoading()
        API.eos.withDraw(param).then(({ data }) => {
          this.$hideLoading()
          console.log(data.code)
          if (data.code === 0) {
            MessageBox.confirm(`成功提现 ${this.money} EOS`, '提示', {
              showCancelButton: false,
              showConfirmButton: true,
              center: true,
              callback () {
                that.$store.commit('updateBalance', tranFormAmount)
                that.$store.commit('updateMoney', -tranFormAmount)
                that.leftTimes -= 1
              }
            })

            localStorage.setItem('showFTips', 0)
          } else if (data.code === -90001) {
            // 用户未关闭自动下注，弹窗提示
            that.showWarn()
          }
        }).catch(() => {
          this.$hideLoading()
        })
      })
    },
    /**
     * 显示充值界面
     */
    handleCharge () {
      this.showWallet = false
      this.showCharge = true
    },
    /**
     * 显示余额界面
     */
    handleWallet () {
      this.showWallet = true
      this.showCharge = false
    },
    /**
     * 隐藏所有
     */
    hide () {
      this.showWallet = false
      this.showCharge = false
    },
    /**
     * 显示明细列表
     */
    showDetail () {
      this.hide()
      Detail.show()
    }
  }
}

</script>

<style lang="scss">
@import "./style.scss";
</style>