de-net/src/view/popup/withdraw/info.vue

<template>
  <!-- 公共组件 -->
  <div class="info">
    <v-head :title="'Withdraw'" :show_more="true"></v-head>
    <!-- 内容 -->
    <div class="content">
      <div class="area-input-1">
        <div class="token">
          <div class="title">Crypto</div>
          <div class="box">
            <img :src="withdraw_info.icon_token" alt="">
            <span>{{ withdraw_info.token_symbol }}</span>
          </div>
        </div>

        <div class="net">
          <div class="title">Withdrawal Network</div>
          <div class="box">
            <img :src="withdraw_info.icon_net" alt="">
            <!-- <span>{{ withdraw_info.token_chain }}</span> -->
            <span>BNB Smart Chain (BEP20)</span>
            <!-- <img :src="require('@/assets/svg/icon-botton-up.svg')" alt="" class="up"> -->
          </div>
        </div>
      </div>

      <div class="area-input-2">
        <div class="title">Wallet Address</div>
        <div class="box">
          <input type="text" placeholder="Click to enter" v-model="state.input_address" @input="inputText">
        </div>
      </div>

      <div class="area-input-3">
        <div class="title">
          <span>Withdrawal Amount</span>
          <span>Balance: {{ state.balance || 0 }}</span>
        </div>
        <div class="box">
          <input type="number" placeholder="0" @input="inputText" v-model="state.input_amount" :max="state.balance">
          <span @click="clickWithdrawalAll">Withdrawal All</span>
        </div>
        <div class="error">{{ state.error_msg }}</div>
      </div>

      <div class="tips">
        <div class="tips-icon">
          <img :src="require('@/assets/svg/icon-top-up-tips-warning.svg')" alt="">
        </div>
        <div class="tips-content">
          <p>Select the same network on the platform where you are depositing funds to. Otherwise, you'll lose your
            assets.</p>
          <p>As the withdrawal is transferred out, you can check the transaction history.</p>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <div class="left">
        <div class="txt">Receive Amount</div>
        <div class="money">{{ state.amount || 0 }} {{ state.currency_code }}</div>
        <div class="txt"> Network Fee: {{ state.fee_amount }} {{ withdraw_info.token_symbol }} </div>
      </div>
      <div class="right">
        <div class="btn" @click="clickBtn" :class="{ enter: state.is_enter_state }">Confirm</div>
      </div>
    </div>
  </div>

</template>

<script setup>
import VHead from '@/view/popup/components/head.vue'
import router from "@/router/popup.js";
import { reactive, onMounted, inject } from 'vue'
import { getWithdrawConfig } from "@/http/account";
import { withdrawCalcFee } from "@/http/pay";
import Report from "@/log-center/log";

let withdraw_info = inject('withdraw_info')

let state = reactive({
  input_address: '',
  input_amount: '',
  is_enter_state: false,
  error_msg: 'Please enter wallet address'
})

const inputWithdrawCalcFee = () => {
  withdrawCalcFee({
    params: {
      "amountValue": state.input_amount,
      "currencyCode": withdraw_info.currency_code,
      "withdrawNetwork": withdraw_info.token_chain
    }
  }).then((res) => {
    if (res.code == 0) {
      if (res.data) {
        state.currency_code = res.data.currencyCode || ''
        state.fee_amount = res.data.feeAmountValue || 0
        state.amount = res.data.finalAmountValue || 111
        state.is_enter_state = true
        inputText()
      }
    }

  })
}

const inputText = () => {
  if (!state.withdraw_switch) {
    return
  }
  if (!state.input_amount == undefined || state.input_amount < 0) {
    state.input_amount = 0
  }
  if (state.input_address.trim().length == 0) {
    state.error_msg = 'Please enter wallet address'
    state.is_enter_state = false
    return
  }
  console.log(state.input_address.trim().length)
  if (state.input_address.trim().length != 42 || state.input_address.trim().substring(0, 2).toLowerCase() != '0x') {
    state.error_msg = 'Incorrect wallet address input'
    state.is_enter_state = false
    return
  }
  if (Number(state.input_amount) > Number(state.balance)) {
    state.error_msg = `Insufficient ${withdraw_info.token_symbol} balance`
    state.is_enter_state = false
    state.amount = 0
    return
  }
  if (Number(state.input_amount) < Number(state.min_amount)) {
    state.error_msg = `Minimum amount: ${state.min_amount} ${withdraw_info.token_symbol}`
    state.is_enter_state = false
    state.amount = 0
    return
  } else {
    state.error_msg = ''
    inputWithdrawCalcFee()
  }
}

const clickBtn = () => {
  if (state.is_enter_state) {
    withdraw_info.data = state
    router.push('/withdraw/confirm')
  }
}

const initConfig = () => {
  state.balance = withdraw_info.balance
  if (withdraw_info.source == 'confirm') {
    state.withdraw_switch = withdraw_info.data.withdraw_switch
    state.input_address = withdraw_info.data.input_address
    state.input_amount = withdraw_info.data.input_amount
    state.amount = withdraw_info.data.amount
    state.withdraw_fee_desc = withdraw_info.data.withdraw_fee_desc
    inputText()
  } else {
    getWithdrawConfig({
      params: {
        "currencyCode": withdraw_info.currency_code,
        "withdrawNetwork": withdraw_info.token_chain
      }
    }).then((res) => {
      switch (res.code.toString()) {
        case '0':
          state.withdraw_switch = res.data.withdrawSwitch
          // 关闭提现功能
          if (!res.data.withdrawSwitch) {
            state.error_msg = 'Withdrawal function temporarily closed'
            return
          }

          state.fee_amount = res.data.withdrawFee
          // 单次提现最小金额
          state.min_amount = res.data.withdrawPerMinAmount

          state.withdraw_fee_desc = res.data.withdrawFeeDesc
          break;

        default:
          break;
      }
    })
  }
}

onMounted(() => {
  initConfig();
  Report.reportLog({
    pageSource: Report.pageSource.denetWithdrawForm,
    businessType: Report.businessType.pageView,
  });
  withdraw_info.enter_state = false
})

const clickWithdrawalAll = () => {
  state.input_amount = state.balance
  inputText()
}
</script>


<style lang='scss' scoped>
.info {
  position: relative;
  height: 100%;

  .content {
    height: calc(100% - 48px - 80px);
    overflow: auto;
    padding: 13px 16px 0 13px;

    .area-input-1 {


      .token {
        // padding-right: 7px;
      }

      .net {
        // padding-left: 7px;
        margin-top: 16px;
      }

      .token,
      .net {

        .title {
          font-weight: 500;
          font-size: 12px;
          margin-bottom: 6px;
          color: #8B8B8B;
        }

        .box {
          border: 1px solid #DBDBDB;
          border-radius: 8px;
          height: 44px;
          display: flex;
          align-items: center;
          padding: 0 15px 0 10px;
          display: flex;
          flex-wrap: nowrap;
          justify-content: space-between;

          img {
            width: 20px;
            height: 20px;
          }

          .up {
            width: 13px;
            height: 12px;
            cursor: pointer;
          }

          span {
            flex: 1;
            margin-left: 6px;
            font-size: 14px;
            font-weight: 500;
          }
        }
      }
    }

    .area-input-2,
    .area-input-3 {
      margin-top: 16px;

      .title {
        font-weight: 500;
        font-size: 12px;
        color: #8B8B8B;
        margin-bottom: 6px;
        display: flex;
        justify-content: space-between;
      }

      .box {
        border: 1px solid #DBDBDB;
        border-radius: 8px;
        height: 44px;
        display: flex;
        align-items: center;

        input {
          outline: none;
          border: 0;
          flex: 1;
          height: 18px;
          padding: 0 16px;
          font-weight: 500;
          font-size: 15px;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
          -webkit-appearance: none;
        }

        input[type="number"] {
          -moz-appearance: textfield;
        }

        span {
          display: block;
          color: #1D9BF0;
          font-size: 13px;
          cursor: pointer;
          margin-right: 16px;
        }
      }

      .error {
        margin-top: 10px;
        color: #FFA621;
        font-weight: 400;
        font-size: 12px;
      }
    }

    .tips {
      margin-top: 12px;
      font-size: 13px;
      height: 118;
      overflow: auto;
      background: #FCF5E5;
      display: flex;
      padding: 10px;
      border-radius: 10px;

      .tips-icon {

        width: 30px;

        img {
          width: 20px;
          height: 20px;
        }
      }

      .tips-content {
        flex: 1;
      }

      p {
        margin: 0;
        padding: 0;
      }
    }

  }

  .footer {
    z-index: 11;
    background: #fff;
    border-top: 1px solid #DBDBDB;
    bottom: 0;
    height: 80px;
    display: flex;
    position: absolute;
    justify-content: space-between;
    width: 100%;
    bottom: 0;
    align-items: center;

    .left {
      margin-left: 16px;

      .txt {
        color: #9D9D9D;
        font-weight: 400;
        font-size: 12px;
      }

      .money {
        color: #000000;
        font-weight: 500;
        font-size: 15px;
      }
    }

    .right {
      margin-right: 16px;

      .btn {
        cursor: pointer;
        width: 140px;
        height: 46px;
        line-height: 46px;
        text-align: center;
        font-weight: 600;
        font-size: 18px;
        color: #FFFFFF;
        background: #D2D2D2;
        border-radius: 100px;

      }

      .enter {
        background: #1D9BF0;
      }
    }
  }
}
</style>