<template>
  <div class="page-body">

    <div class="module-block">
      <div>
        充值金额
      </div>
      <div class="input-box">
        <span>￥</span>
        <input type="digit" @input="bindKeyInput($event,'amout')" maxlength="6" :value="amout" placeholder="0.00">
      </div>
      <div class="tip-text" v-show="!amout">请输入整数的充值金额。</div>
    </div>
    <!-- <image :src="pic_url" mode="aspectFit"></image> -->
    <!-- <div> -->
    <button class="module-btn" id="pushMoney" @tap="toPay">
      充值
    </button>

    <!-- </div> -->

  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    data () {
      return {
        url: '',
        orderCode: '',
        amout: '',
        pic_url: ' '
      }
    },
    computed: {
      ...mapGetters(['user'])

    },
    methods: {
      bindKeyInput (event, val) {
        this[val] = event.mp.detail.value
      },
      toPay () {
        let _this = this
        this.$api.mpPost({
          action_type: 'GetMember_RechargeTicket',
          Membership_VipId: this.user.Membership_VipId,
          WeChat_MiniProToken: this.user.WeChat_MiniProToken,
          Recharge_Amount: this.amout
        }).then(res => {
          if (res.Result_Code === 100) {
            _this.orderCode = res.Result_Data.TICKET_CODE
            var backData = res.Result_Data.pay_info

            mpvue.navigateTo({url: '/pages/webview/main?name=url&url=' + encodeURIComponent(backData.link_url)})
          } else {
            mpvue.showModal({
              title: '温馨提示',
              content: res.Result_Desc,
              showCancel: false,
              confirmText: '确定',
              confirmColor: '#3CC51F'

            })
          }
        })
      }
    },
    onLoad (option) {

      this.$utils.addUserBehaviorNew();
    }
  }
</script>
<style scoped>
  input:focus {
    border: none;
  }

  .page-body {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    height: calc(100vh);
    padding: 64rpx 32rpx;
    font-size: 24rpx;
    box-sizing: border-box;
    background: #fff;
  }

  .module-block {
    height: 50%;
    width: 100%;

  }

  .input-box {
    margin-top: 32rpx;
    display: flex;
    width: 100%;
    border-bottom: 2rpx solid #f0f0f0;

  }

  .tip-text {
    margin-top: 32rpx;
    color: #ea3323;
  }

  .input-box span {
    font-size: 40rpx;
    font-weight: bolder;
    margin-right: 8rpx;
    line-height: 96rpx;
  }

  .input-box input {
    height: 100rpx;
    width: 100%;
    border: none;
    font-size: 56rpx;
    outline: none;
    font-weight: bolder;
  }

  .module-btn {
    height: 100rpx;
    line-height: 100rpx;
    width: 600rpx;
    text-align: center;
    background-color: #06C05F;
    border: 0;
    color: #fff;
    font-size: 26rpx;
    border-radius: 8rpx;
    margin: 0 auto;
  }
</style>