bn-q-icon/pages/convert/convert-index.vue

<script>
import tokenpocketBnb from "@/common/wallet/tokenpocket-wallet/tokenpocket-bnb";
import {getTotalMoney} from "@/api/money";

export default {
  name: "convert-index",
  components: {},
  data() {
    return {
      usdtNum:'',
      iconNum:'',
      type:1,
      toNum:'',
      formNUm:'',
      price:'',
      address:''
    };
  },
  watch:{
    'formNUm':function () {
      if(this.formNUm===''){
        this.toNum=''
      }else {
        this.toNum=this.formNUm*this.price
      }
    }
  },
  mounted() {
    this.getIconNum()
    this.getTotalMoney()
  },
  methods: {
    setMax(){
      if(this.type===1){
        this.formNUm=this.usdtNum
      }else {
        this.formNUm=this.iconNum
      }
    },
    getTotalMoney(){
      getTotalMoney().then(res=>{
        if (res.code===1){
          this.price=res.data.price

        }
      })
    },
    async  getIconNum(){
      this.address=tokenpocketBnb.getMyAddress()
      if(this.address===''){
        return
      }
      setTimeout(async ()=>{
        this.iconNum= await tokenpocketBnb.getTokenBalance(this.address,0)
        this.usdtNum= await tokenpocketBnb.getTokenBalance(this.address,1)
        console.log(this.coinNum,"icon-num----------------------")
      },100)

    },
    setType(){
      this.type=(this.type===1?2:1)
      this.formNUm=''
    }
  },
}
</script>

<template>
  <view class="bgc-f p-40 box-sizing-border b-rad-20">
    <view>
      <view class="bgc-F6F7FA b-rad-20 mb-20 p-20 box-sizing-border mb-20" v-if="type===1">
        <view class="align-items-start flex-justify-space mb-20">
          <view class="align-items-center">
            <image
                class="t-img mr-8"
                :src="require('@/static/img/index/index/usdt.png')"
            ></image>
            <view class="fs-28">USDT</view>
          </view>
          <view class="max-box b-rad-20 fs-28" @click="setMax">
            Max {{usdtNum}}
          </view>
        </view>
        <view>
          <input v-model="formNUm" placeholder="输入要兑换的USDT数量" placeholder-class="fs-28"></input>
        </view>
      </view>
      <view class="bgc-F6F7FA b-rad-20 mb-20 p-20 box-sizing-border mb-20" v-else>
        <view class="align-items-start flex-justify-space mb-20">
          <view class="align-items-center">
            <image
                class="t-img mr-8"
                :src="require('@/static/img/logo/logo.png')"
            ></image>
            <view class="fs-28">DAO</view>
          </view>
          <view class="max-box b-rad-20 fs-28" @click="setMax">
            Max {{iconNum}}
          </view>
        </view>
        <view>
          <input v-model="formNUm" placeholder="输入要兑换的DAO数量" placeholder-class="fs-28"></input>
        </view>
      </view>
    </view>

    <view class="flex-direction-column align-items-center flex-justify-center mb-20" @click="setType">
      <view class="fs-28">
        FORM
      </view>
      <image
          class="jh-img"
          :src="require('@/static/img/index/index/jiaohuan.png')"
          ></image>
      <view class="fs-28">
        TO
      </view>
    </view>
    <view>
      <view class="bgc-F6F7FA b-rad-20 mb-20 p-20 box-sizing-border mb-50" v-if="type===1">
        <view class="align-items-start flex-justify-space mb-20">
          <view class="align-items-center">
            <image
                class="logo-img mr-8"
                :src="require('@/static/img/logo/logo.png')"
            ></image>
            <view class="fs-28">DAO</view>
          </view>
        </view>
        <view class="fs-28" :class="toNum?'':'fc-808080'">
         {{toNum?toNum:'请输入需要兑换的USDT数量'}}
        </view>
      </view>
      <view class="bgc-F6F7FA b-rad-20 mb-20 p-20 box-sizing-border mb-50" v-else>
        <view class="align-items-start flex-justify-space mb-20">
          <view class="align-items-center">
            <image
                class="logo-img mr-8"
                :src="require('@/static/img/index/index/usdt.png')"
            ></image>
            <view class="fs-28">USDT</view>
          </view>
        </view>
        <view class="fs-28" :class="toNum?'':'fc-808080'">
          {{toNum?toNum:'请输入需要兑换的DAO数量'}}
        </view>
      </view>
    </view>

    <view class="convent-but b-rad-20 text-align-center fs-28 fc-f">
      兑换
    </view>
  </view>
</template>

<style scoped lang="scss">
.t-img{
  width: 70rpx;
  height: 60rpx;
}
.max-box{
  color: #0d81cf;
  border: 2rpx solid #0d81cf;
  padding: 6rpx 20rpx;
}
::v-deep .el-input__inner{
  background-color: transparent;
  border: none;
  padding: 0;
}
.jh-img{
  width: 60rpx;
  height: 60rpx;
}
.logo-img{
  width: 66rpx;
  height: 50rpx;
}
.convent-but{
  height: 80rpx;
  background: #0d81cf;
  color: #fff;
  line-height: 80rpx;
}
</style>