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

<template>
  <view class="index-data">
    <view class="index-top">
      <view class="top-head">
        <view class="head-item head-left">
          <view class="left-img">
            <image src="@/static/img/index/logo1.png" mode="aspectFill"></image>
          </view>
          <view class="left-text">
            <view class="item-item">BNBDAO</view>
            <view class="item-item">WEB3 DATA</view>
          </view>
        </view>
        <view class="head-item head-right">
          <view class="right-img" @click.stop="setShowLang"><image src="@/static/img/index/yy.svg" mode="aspectFill"></image></view>
          <view class="right-text">{{babAddress}}</view>
        </view>
      </view>
<!--      <view class="top-lang" :class="{'show-lang':showLang}">-->
<!--        <view class="lang-item" v-for="langItem in langList" @click.stop="setLocaleLang(langItem.name)">{{langItem.value}}</view>-->
<!--      </view>-->
      <view class="top-text">
        <view class="text-item">Use your NFTs as collateral</view>
        <view class="text-item"> to borrow ETH or deposit</view>
        <view class="text-item"> your ETH and earn yields</view>
        <view class="text-item">  instantly!</view>
      </view>
      <view class="top-but">
        <button>定金</button>
      </view>
      <view class="top-bottom">
        <image class="bottom-img" src="@/static/img/index/dagou.svg" mode="aspectFill"></image>
        <text class="bottom-text">Running SAFE for 236 days. Read more in the  </text>
        <text class="bottom-text"> Audit report</text>
      </view>
    </view>
    <view class="index-list">
      <view class="list-title">
        <view class="title-img"> <image src="@/static/img/index/bnb2.png" mode="aspectFill"></image></view>
        <view class="title-text">我的收支明细(100)</view>
      </view>
      <division ></division>
      <view v-for="i in 5" class="item">
        <view class="list-item">
          <view class="item-line">
            <view class="item-text">BNB</view>
          </view>
          <view class="item-line line-text">
            <view class="item-text">平台分润</view>
          </view>
          <view class="item-line">
            <view class="item-text">BNB Number</view>
            <view class="item-text text-two">
              <view class="text-img">
                <image src="@/static/img/index/bnb2.png"></image>
              </view>
              <view class="text">56</view>
            </view>
          </view>
          <view class="item-line">
            <view class="item-text">积分</view>
            <view class="item-text text-two">
              <view class="text-img">
                <image src="@/static/img/index/jf.svg"></image>
              </view>
              <view class="text">56</view>
            </view>
          </view>
          <view class="item-line">
            <view class="item-text">手续费</view>
            <view class="item-text">56 </view>
          </view>
          <view class="item-line">
            <view class="item-text">时间</view>
            <view class="item-text">56 </view>
          </view>
        </view>
        <division class="division-item"></division>
      </view>

    </view>
    <view class="index-bottom"></view>
  </view>

</template>
<script>
import {getInvestData, setInvest} from "@/api/contract";
import tools from "@/common/js/tools";
import tokenpocketBnb from "@/common/wallet/tokenpocket-wallet/tokenpocket-bnb";
import {getMemberInfo} from "@/api/member";
import Division from "@/pages/index/components/division";

export default {
  components: {Division},
  data() {
    return {
      applicationLocale: '',
      systemLocale: '',
      showLang: false,
      isAjax: false,
      langList:[{'name':'zh-Hans','value':'简体中文'},{'name':'en','value':'English'},{'name':'ja','value':'日本語'},{'name':'ko','value':'한국어'}],
      tabNum:0,
      investData:{
        id: 1,
        invest_money: '',
        sysAddress: "",
        sendNum: "",
      },
      memberData:{
        "id": 30,
        "address": "",
        "invite_code": "72592982",
        "level_id": 0,
        "levelName": "V0",
        "recommendNum": 0,
        "teamNum": 0
      },
      bnbNum:0,
      babAddress:''

    }

  },
  watch: {},
  async onLoad(query) {
    this.applicationLocale = uni.getLocale();
    this.getInvestData()
    this.bnbNum = await tokenpocketBnb.getBalance();
    console.log('this.bnbNum:'+this.bnbNum)
   this.getMyData()
  },
  mounted() {

  },
  methods: {
    setShowLang() {
      this.showLang = !this.showLang
    },
    setLocaleLang(code) {
      uni.setLocale(code);
      this.$i18n.locale = code;
      this.applicationLocale = code;
      this.showLang = false
    },
    setTabNum(tabNum){
      if(tabNum!==this.tabNum){
        this.tabNum=tabNum
      }
    },
    getMyData(){
      this.babAddress= tokenpocketBnb.getMyAddress()
      getMemberInfo().then((res)=>{
        if(res.code===1){
          this.memberData=res.data
        }
      })
    },
    getInvestData() {
      getInvestData().then((res) => {
        if (res.code === 1) {
          this.investData = res.data
        } else {
          tools.goToError(4)
        }
      }).catch((e) => {
        tools.goToError(4)
      })
    },
    async setInvest() {
      if (this.bnbNum < this.investData.invest_money && !tools.isDevelopment()) {
        tools.error(this.$t('index.index.invest.no_usdt'))
        return
      }
      if (this.isAjax) {
        return
      }
      // this.isAjax = true
       tokenpocketBnb.getTransactionData(this.investData.sysAddress, 0.0001).then((data)=>{
         try {
           tokenpocketBnb.sendTransaction(data).then((res)=>{
             this.sendSetInvest(res)
           }).catch((e)=>{
             tools.error(this.$t('index.index.invest.send_no'))
           })
         }catch (e) {
           tools.error(this.$t('index.index.invest.send_no'))
         }
       })
    },
    sendSetInvest(hashRes){
      setInvest({'txid':hashRes,'id':this.investData.id}).then((res)=>{
        if(res.code===1){
          tools.success(res.msg)
          // setTimeout(()=>{
          //   tools.leftClick()
          // },1500)
        }else {
          this.isAjax = false
          tools.error(res.msg)
        }
      })
    },


  },
}
</script>
<style lang="scss" scoped>
//@import "/static/css/common.css";
.index-data{
  .index-top{
    box-shadow:0 0 24rpx 0 #000;
    box-sizing: border-box;
    overflow: hidden;
    padding: 40rpx 0;
    width: 100%;
    background: linear-gradient(0deg, rgb(64, 74, 96) 0%, rgb(9, 21, 36) 100%);
    .top-head{
      display: flex;
      justify-content: space-between;
      height: 84rpx;
      padding-left: 20rpx;
      .head-item{
        display: flex;
        justify-content: left;
      }
      .head-left{
        .left-img{
          margin-top: 1rpx;
          image{
            width: 80rpx;
            height: 80rpx;
          }
        }
        .left-text{
          padding-top: 5px;
          margin-left: 10px;

          .item-item{
            font-size: 22rpx;
            color: #fff;
          }
          .item-item:nth-of-type(1){
            font-size: 32rpx;
            font-weight: bold;
          }
        }
      }
      .head-right{
        justify-content: right;
        .right-img{
          width: 70rpx;
          height: 70rpx;
          image{
            width: 70rpx;
            height: 70rpx;
          }
        }
        .right-text{
          margin-left: 20rpx;
          height: 70rpx;
          line-height: 70rpx;
          width: 200rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          color: rgb(116, 132, 164);
        }
      }
    }
    .top-text{
      clear: both;
      padding: 40rpx;
      margin-top: 40rpx;
      .text-item{
        color: #fff;
        font-size: 50rpx;
        font-weight: bold;
      }
    }
    .top-but{
      width: 80%;
      margin: 60rpx auto 0;
      button{
        height: 90rpx;
        line-height:  90rpx;
        text-align: center;
        background: rgb(0, 87, 255);
        color: #fff;
        border-radius: 20rpx;
        font-weight: bold;
      }
    }
    .top-bottom{
      padding: 40rpx;
      .bottom-img{
        display: inline-block;
        width: 24rpx;
        height: 24rpx;
        margin-right: 10rpx;
      }
      .bottom-text{
        font-size: 24rpx;
        color: #7484a4;
      }
      .bottom-text:nth-of-type(2){
        margin-left: 0.5em;
        text-decoration: underline;
      }
    }
  }
  .index-list{
    background: #fff;
    width: 90%;
    margin: 40rpx auto;
    border-radius: 10px;
    padding: 20px 10px;
    overflow: hidden;
    font-size: 13px;
    box-shadow:  0 8rpx 16rpx 0 rgba(0,0,0,0.08);
    .list-title{
      display: flex;
      justify-content: left;
      .title-img{
        background: rgb(0, 87, 255);
        padding: 10rpx;
        border-radius: 20rpx;
        image{
          width: 80rpx;
          height: 80rpx;
        }
      }
      .title-text{
        margin-left: 20rpx;
        line-height: 100rpx;
        font-size: 34rpx;
        font-weight: bold;
      }
    }
    .list-item{
      margin-top: 20rpx;
      .item-line{
        margin-bottom: 20rpx;
        display: flex;
        justify-content: space-between;
        .item-text{
          font-size: 26rpx;
          color: rgb(177, 177, 177);
          line-height: 42rpx;
          height: 42rpx;
        }
        .text-two{
          display: flex;
          justify-content: right;
          .text-img{
            display: inline-block;
            padding: 6rpx;
            background: rgb(0, 87, 255);
            border-radius: 50%;
            height: 42rpx;
            width: 42rpx;
            box-sizing: border-box;
            image{
              width: 30rpx;
              height: 30rpx;
              z-index: 100;
            }
          }
          .text{
            margin-left: 10rpx;
            font-size: 30rpx;
          }
        }
      }
      .line-text{
        margin-bottom: 40rpx;
        .item-text{
          font-weight: bold;
          font-size: 26rpx;
          color: #222;
        }
      }
    }
    .item:last-child{
      .division-item{
        display: none;
      }
    }
  }
  .index-bottom{
    height: 50rpx;
  }
}



</style>