Portal/pages/withdraw.vue

<template>
  <view class="withdraw">
    <u-navbar
      title=""
      bgColor="#000"
      :placeholder="true"
      :fixed="true"
      leftIcon=""
      height="60"
    >
      <view slot="left">
        <text class="navbar-lab">{{ $lang.withdraw }}</text>
      </view>
    </u-navbar>
    <view class="content">
      <view class="list">
        <view class="lable money"
          >{{ $lang.balance }}：{{ userInfo.money }}</view
        >
      </view>
      <view class="picker-view" @click="show = true">
        <u-input
          readonly
          :placeholder="$lang.pleaseChoose"
          color="#93979b"
          v-model="type"
          border="none"
        >
          <u--text
            :text="$lang.chooseWithdraw"
            slot="prefix"
            margin="0 3px 0 0"
            type="tips"
          ></u--text>
          <u-icon
            slot="suffix"
            name="arrow-down-fill"
            color="#757272"
            size="16"
          ></u-icon>
        </u-input>
      </view>
      <u-picker
        :title="$lang.pleaseChooseWithdraw"
        closeOnClickOverlay
        :show="show"
        :columns="columns"
        :cancelText="$lang.cancel"
        :confirmText="$lang.confirm"
        @cancel="close"
        @close="close"
        @confirm="confirm"
      ></u-picker>
      <view class="list">
        <view class="lable">{{ $lang.walletAddress }}</view>
        <u-input
          class="input"
          color="#947b2b"
          clearable
          :placeholder="$lang.enterWithdrawalAddress"
          border="surround"
          v-model="address"
        ></u-input>
      </view>
      <view class="list">
        <view class="lable">{{ $lang.amount }}</view>
        <u-input
          class="input"
          color="#947b2b"
          clearable
          :placeholder="$lang.enterWithdrawalamount"
          border="surround"
          v-model="money"
        ></u-input>
      </view>
      <view class="list">
        <view class="lab">{{ $lang.rechargeWithdrawNetwork }}</view>
        <view class="type">TRC20</view>
      </view>
      <view class="list">
        <u-button
          @tap="applyWithdraw"
          class="button"
          color="#e5b932"
          :text="$lang.submit"
        ></u-button>
      </view>
      <view class="list">
        <view class="tip">{{ $lang.withdrawTip }}</view>
        <view class="tip">{{ $lang.commission }}:1 USDT</view>
      </view>
    </view>
    <view class="mb60"></view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      address: "",
      money: "",
      type: "USDT",
      show: false,
      columns: [["USDT"]],
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.app.userInfo,
      $lang: (state) => state.app.lang[state.app.language],
    }),
  },
  onLoad() {},
  methods: {
    confirm(chose) {
      this.type = chose.value[0];
      this.close();
    },
    close() {
      this.show = false;
    },
    applyWithdraw() {
      const params = {
        user_id: this.userInfo.id,
        to_addr: this.address,
        amount: this.money,
      };
      if (!params.to_addr) {
        this.$toast({
          message: this.$lang.enterWithdrawalAddress,
          duration: 2000,
        });
      } else if (!params.amount) {
        this.$toast({
          message: this.$lang.amountCannotBe0,
          duration: 2000,
        });
      } else {
        this.$toast({
          type: "loading",
          message: this.$lang.submittingApplication,
          duration: 200000,
        });
        this.$api
          .applyWithdraw(params)
          .then((res) => {
            if (res.Success) {
              this.$toast({
                type: "success",
                message: res.Msg,
                duration: 2000,
              });
              this.address = "";
              this.money = "";
            } else {
              this.$toast({
                message: res.Msg,
                duration: 2000,
              });
            }
          })
          .catch((err) => {
            console.log(err);
          })
          .finally(() => {
            this.$toastHide();
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.withdraw {
  background: #0b1520;
  width: 100%;
  min-height: 100vh;
  .navbar-lab {
    color: #fff;
    font-weight: 500;
    font-size: 18px;
  }
  .content {
    margin: 5px 5px;
    border: 2px solid #947b2b;
    background: #222222;
    box-sizing: border-box;
    padding: 15px;
    min-height: 400px;

    .picker-view {
      border: 2px solid #947b2b;
      padding: 8px;
      border-radius: 5px;
    }
    .list {
      font-size: 14px;
      text-align: center;
      .lab {
        color: #757272;
        margin: 10px 0;
      }
      .lable {
        text-align: left;
        color: #ddd;
        margin-top: 20px;
        font-size: 16px;
        margin-bottom: 10px;
      }
      .money {
        font-size: 16px;
        margin-top: 0;
        padding: 15px 0;
        color: #e5b932;
      }
      .btn {
        height: 30px;
        font-weight: 600;
        color: #0b1520 !important;
      }
      .type {
        width: 70px;
        height: 35px;
        background: #e5b932;
        border-radius: 40px;
        text-align: center;
        line-height: 35px;
        font-weight: 600;
        margin: 10px auto;
      }
      .input {
        line-height: 30px;
        height: 30px;
      }
      .button {
        line-height: 45px;
        height: 45px;
        color: #0b1520 !important;
        font-weight: bold;
        margin-top: 30px;
        margin-bottom: 10px;
      }
      .tip {
        color: #cc4c0e;
        font-size: 13px;
        text-align: justify;
      }
    }
  }
}
</style>