RWACha-DAPP/src/views/mine/recharge.vue

<template>
  <div class="assets">
    <div class="head">
      <img @click="back" src="@/assets/images/back.png" class="arrow_img" />
      <span>{{ $t('lang138') }}</span>
    </div>
    <div class="pd">
      <div class="">
        <div class="total_box">
          <div>
            <span class="text">{{ $t('lang147') }}</span>
          </div>
          <div class="total">
            <span>{{ Math.floor(assets * 100) / 100 || 0 }}</span>
          </div>
          <div class="bo">
            <!-- <img src="@/assets/images/chance.png" class="icon" />
            <span>{{ $t('lang121') }}</span> -->
          </div>
          <div @click="navigation('rechargeRecord')" class="mx">{{ $t('lang122') }}</div>
        </div>

        <div class="list">
          <div class="box">
            <div class="box_item">
              <span class="left">{{ $t('lang124') }}</span>
              <span>{{ $t('lang126') }}(BEP20)</span>
            </div>
            <div class="box_item">
              <span class="left">{{ $t('lang477') }}</span>
              <span class="walletbalance">{{ walletBalance }}</span>
            </div>
            <div class="box_item">
              <span class="left">{{ $t('lang148') }}</span>
              <van-field v-model="amount" :placeholder="$t('lang119')" type="number" class="input" input-align="right" />
            </div>
            <!-- <div class="box_item">
              <span class="left">{{ $t('lang125') }}</span>
              <van-field v-model="value" :placeholder="$t('lang118')" class="input" input-align="right" />
            </div> -->
          </div>
        </div>
        <div class="buy" @click="submit">
          <van-button class="buy_btn" type="primary">{{ $t('lang149') }}</van-button>
        </div>
        <div class="tips">
          <div>{{ $t('lang116') }}</div>
          <div v-html="tip"></div>
        </div>
      </div>
    </div>
    <van-overlay :show="show">
      <div class="wrapper" @click.stop>
        <van-loading type="spinner" class="loading" />
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { homeApi } from '@/api/index';
import { dateFormat } from '@/utils/formatTool.js';
import packApi from '@/methods/pack.js';
import { getErc20Contract } from '@/utils/contractHelp';
import usdt from '@/methods/usdt.js';
import { formatAmount } from '@/utils/format.js';
import { Dialog, Notify, Toast } from 'vant';
export default {
  data() {
    return {
      assets: 0,
      amount: '',
      payToken: undefined, //支付币种
      walletBalance: 0,
      show: false,
      pay_address: '',
      tip: '',
    };
  },
  mounted() {
    this.getUserInfo();
    this.getAddress();
  },
  methods: {
    //返回上一页
    back() {
      this.$router.back();
    },
    navigation(name) {
      this.$router.push({ name });
    },
    getAddress() {
      homeApi.getAddress().then(res => {
        if (res.code == 200) {
          console.log(res.data);
          this.pay_address = res.data.value;
          this.tip = res.data.name;
        } else {
        }
      });
    },
    getUserInfo() {
      homeApi.getUserInfo().then(res => {
        if (res.code == 200) {
          this.assets = res.data.balance;
          this.account = res.data.address;
          this.getPayToken(); //获取支付币种
        }
      });
    },
    getPayToken() {
      packApi.getPayToken(this.account).then(res => {
        this.payToken = res;
        // this.handleApproveBtnShow(); //获取授权余额
        this.getWalletBalance(); //获取钱包余额
      });
    },
    // 查询链上钱包余额
    async getWalletBalance() {
      const erc20Contract = getErc20Contract(this.payToken);
      let bal = await erc20Contract.methods.balanceOf(this.account).call();
      this.walletBalance = (formatAmount(bal, 18) * 1).toFixed(5);
    },
    submit() {
      if (!this.amount) {
        return this.$toast(this.$t('lang160'));
      }
      if (Number(this.walletBalance) < Number(this.amount)) {
        return this.$toast(this.$t('lang159').replace('XX', this.amount).replace('CC', this.walletBalance));
      }
      this.show = true;
      usdt
        .transfer(this.account, this.pay_address, this.amount, this.payToken)
        .then(res => {
          // 调回调接口
          let params = {
            amount: this.amount,
            tx_hash: res,
          };
          homeApi
            .updateOrder(params)
            .then(res => {
              if (res.code == 200) {
                this.amount = '';
                this.show = false;
                Notify({ type: 'success', message: this.$t('lang152') });
                this.getUserInfo();
              } else {
                this.show = false;
                Toast({ message: `${res.msg}` });
              }
            })
            .catch(err => {
              this.show = false;
              this.$toast(err.msg);
              return;
            });
        })
        .catch(err => {
          this.show = false;
          this.$toast(err.message);
          return;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.head {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(#000, 0.8);
  letter-spacing: 1.5px;
  font-weight: 550;
  background: #fff;
  padding: 15px 0;
  // z-index: 99;
  .arrow_img {
    position: absolute;
    left: 20px;
    width: 10px;
    height: 16px;
    // transform: translate(0, -50%);
  }
}
.f-sb {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.f-sa {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.f-sb-n {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.f-col {
  display: flex;
  flex-direction: column;
}
.assets {
  min-height: 100vh;
  padding: 50px 0 0;
  // background-color: #fafbfc;
  .top {
    color: #000;
    padding-bottom: 16px;
    margin: 0 6px;
  }
  .pd {
    padding: 4px;
    margin-top: 4px;
    // background-color: #fff;
  }
  .total_box {
    position: relative;
    display: flex;
    // align-items: center;
    flex-direction: column;
    justify-content: space-between;
    // position: relative;
    font-size: 13px;
    color: #fff;
    height: 140px;
    // border-radius: 16px;
    padding: 20px 20px;
    box-sizing: border-box;
    border-radius: 10px;
    margin: 10px;
    background: linear-gradient(to right, #1ab986, #25d7bb);

    .total {
      font-size: 28px;
      // text-align: center;
      padding-top: 10px;
    }
    .bo {
      font-size: 12px;
      display: flex;
      align-items: center;
      color: rgba(#fff, 0.8);
      margin: 10px 10px 0 0;

      .icon {
        width: 20px;
        height: 20px;
        margin-right: 6px;
        border-radius: 50%;
        padding: 4px;
        background-color: rgba(#000, 0.1);
      }
    }
    .mx {
      position: absolute;
      right: 20px;
      width: fit-content;
      font-size: 11px;
      color: rgba(#f7f7f7, 0.9);
      padding: 2px 12px;
      border-radius: 10px;
      background-color: rgba(#000, 0.1);
    }
    .text {
      color: rgba(#fff, 0.8);
    }
    .buy {
      position: absolute;
      right: 14px;
      bottom: 14px;

      &_btn {
        color: #29b286;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        background-color: #ffffff;
        border: none;
        padding: 0 16px;
        white-space: nowrap;
        border-radius: 30px;
      }
    }
  }

  .bare {
    text-align: center;
    font-size: 14px;
    padding: 60px 14px;
    color: #888;
  }
  .list {
    border-radius: 20px;
    padding: 0 20px;
    margin-top: 16px;
    background-color: #fff;
    margin: 16px 6px;

    .box {
      width: 100%;
      color: rgba(51, 51, 51, 1);
      font-size: 14px;
      padding: 18px 0 18px;
      .box_item:last-child {
        border-bottom: none;
      }
      &_item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 0;
        border-bottom: 0.5px solid rgba(190, 190, 190, 0.15);

        .key {
          color: #aaa;
          font-size: 12px;
        }
        .left {
          font-size: 13px;
        }
        .walletbalance::after {
          content: ' USDT';
          font-size: 12px;
        }
        .mobile {
          font-size: 14px;
          color: #000;
          font-weight: 550;
        }
        .input {
          width: 180px;
        }
      }
    }
  }
  .buy {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    &_btn {
      width: 80%;
      height: 46px;
      line-height: 46px;
      font-size: 14px;
      background-color: #29b286;
      border: none;
      padding: 0 10px;
      white-space: nowrap;
      border-radius: 30px;
    }
  }
  .tips {
    color: #aaa;
    font-size: 12px;
    line-height: 180%;
    padding: 14px;
  }
}
.wrapper {
  // display: flex;
  // justify-content: center;
  .loading {
    position: absolute;
    left: 46%;
    top: 46%;
  }
}
</style>