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/logo.gif" mode="aspectFill"></image>
          </view>
          <view class="left-text">bnb.dao</view>
        </view>
        <view class="head-item head-right">
          <view class="right-img" @click.stop="setShowLang"><image src="@/static/img/index/lang-img.png" mode="aspectFill"></image></view>
          <view class="right-text">{{getShowAddress()}}</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>
    <view :style="{'height':(100+(showLang?langList.length*100:0))+'rpx'}"></view>
    <view class="index-tab">
        <view class="tab-items">
          <view class="tab-item" @click.stop="setTabNum(1)" :class="{'select-item':tabNum===1}">{{$t('index.index.tab.one')}}</view>
          <view class="tab-item" @click.stop="setTabNum(0)" :class="{'select-item':tabNum===0}">{{$t('index.index.tab.two')}}</view>
        </view>
        <view class="tab-item-bg" :class="{'bg-location-1':tabNum===1,'bg-location-0':tabNum===0}"></view>
    </view>
    <view class="tab-one" v-if="tabNum===0">
      <view class="index-content">
        <view class="content-my">
          <view class="my-img"><image src="@/static/img/index/my-img.png"></image></view>
          <view class="my-text">{{$t('index.index.my.title')}}</view>
        </view>
        <view class="content-data">
          <view class="data-item">BP1.08</view>
          <view class="data-item">{{$t('index.index.data.text')}}</view>
        </view>
        <view class="content-item">
          <view class="item-value">{{$t('index.index.item.one')}} : {{memberData.levelName}}</view>
          <view class="item-value">ID : {{memberData.invite_code}}</view>
        </view>
        <view class="content-item">
          <view class="item-value">{{$t('index.index.item.two')}} : {{memberData.recommendNum}}</view><view class="item-value"></view>
        </view>
        <view class="content-item">
          <view class="item-value">{{$t('index.index.item.three')}} : {{memberData.teamNum}}</view><view class="item-value"></view>
        </view>
        <view class="content-share">
          <view class="share-title">{{$t('index.index.share.one')}}</view>
          <view class="share-join">{{$t('index.index.share.two')}}</view>
          <view class="share-join share-copy">{{$t('index.index.share.three')}}</view>
        </view>
      </view>
      <view class="index-list">
        <view class="list-title">
          <view class="title-img"><image src="@/static/img/index/my-img.png"></image></view>
          <view class="title-text">{{$t('index.index.list.title')}}</view>
        </view>
        <view class="list-item">
          <view class="item-name">{{$t('index.index.list.item1')}}</view>
          <view class="item-name">{{$t('index.index.list.item2')}}</view>
          <view class="item-name">{{$t('index.index.list.item3')}}</view>
          <view class="item-name">{{$t('index.index.list.item4')}}</view>
        </view>
      </view>

    </view>
    <view class="tab-two" v-else>
      <view class="content-item content-one">
        <view class="content-title">
          <view class="title-item"><view class="item-solid"></view> <view class="item-text">Contracts</view></view>
          <view class="title-item"><view class="item-text">How bn.dao contracts work</view></view>
        </view>
        <view class="content-img">
          <image src="@/static/img/index/p_0.c3c2de4e.png"></image>
        </view>
        <view class="content-text">
          <view class="text-title">The main advantage of the bn.dao ?</view>
          <view class="text-title">One key to start</view>
          <view class="text-title">Provide users with an integrated solution to automatically income that takes into account both high yield and high liquidity. Even novice users can easily get started.</view>
        </view>
        <view class="content-but">Start now</view>

      </view>
      <view class="content-item content-two">
        <view class="content-title">
          <view class="title-item"><view class="item-solid"></view> <view class="item-text">Earn interest</view></view>
          <view class="title-item"><view class="item-text">The interest source of the</view></view>
        </view>
        <view class="content-text">
          <view class="text-title">It aims to become a high-yield stablecoin Yu'e Bao, providing users with stablecoin interest income with the highest return in the market. Currently supported currencies Including
            BNB (BSC) based on Ethereum, BNB (BEP20) based on Binance based. Users only need to deposit tokens into the cooperative wallet App, and they can periodically obtain interest
            income.</view>
          <view class="text-title">As an interest aggregator, the BSC network has opened up a lending/liquidity protocol at the bottom layer. Through predictable currency holding data, we can dynamically adjust the
            transaction volume according to the rise and fall of miners' fees, which can provide users with access to market The highest deposit interest. We will continue to evaluate and
            integrate more open financial protocols, including Hybrid lending platform.</view>
        </view>
        <view class="content-but">Start now</view>
      </view>

    </view>
    <view class="index-button">
      <view class="button-item">Binance Smart Contract</view>
      <view class="button-item">Financial Program</view>
    </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";

export default {
  components: {},
  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();
   this.getMyData()
  },
  mounted() {

  },
  methods: {
    getShowAddress(){
      return tools.getShowAddress(this.babAddress)
    },
    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
      let data = tokenpocketBnb.getTransactionData(this.investData.sysAddress, this.investData.invest_money)
      tokenpocketBnb.sendTransaction(data).then((res)=>{
        this.sendSetInvest(res)
      })
    },
    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>
.index-data {
  min-height: 100vh;
  background: rgb(21, 26, 47);
  position: relative;
  .index-top{
    z-index: 100;
    position: fixed;
    width: 100vw;
    padding: 20rpx;
    color: #fff;
    background: rgba(0,0,0,.67);
    box-sizing: border-box;
    .top-head{
      height: 60rpx;
      display: flex;
      justify-content: space-between;
      .head-item{
        height: 60rpx;
        display: flex;
        justify-content: left;
      }
      .head-left{
        .left-img{
          width: 60rpx;
          height: 60rpx;
          image{
            width: 60rpx;
            height: 60rpx;
          }
        }
        .left-text{
          font-weight: 600;
          color: #734ce2;
          font-size: 30rpx;
          line-height: 60rpx;
          margin-left: 10rpx;
        }
      }
      .head-right{
        .right-img{
          margin-top: 6rpx;
          width: 48rpx;
          height: 48rpx;
          image{
            width: 48rpx;
            height: 48rpx;
          }
        }
        .right-text{
          background: linear-gradient(to right, rgb(115, 76, 226), rgb(96, 107, 251));
          color: #fff;
          border-radius:52rpx;
          font-size: 24rpx;
          width: 208rpx;
          height: 52rpx;
          margin-top: 4rpx;
          margin-left: 20rpx;
          line-height: 52rpx;
          text-align: center;
        }
      }
    }
    .top-lang{
      transition: 0.5s ease;
      height: 0;
      overflow: hidden;
      .lang-item{
        height: 100rpx;
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 32rpx;
        padding-left: 40rpx;
        box-sizing: border-box;
      }
    }
    .show-lang{
      height: auto;
      transition: 0.5s ease;
    }



  }
  .index-tab{
    height: 88rpx;
    background-color: rgba(35,35,35,.8);
    border-radius: 20rpx;
    padding:14rpx 30rpx;
    margin: 20rpx 20rpx 0 20rpx;
    box-sizing: border-box;
    position: relative;
    .tab-items{
      display: flex;
      justify-content: space-between;
      .tab-item{
        width: calc((100% - 60rpx)/2);
        height: 60rpx;
        line-height: 60rpx;
        color: #fff;
        text-align: center;
        transition: 0.2s;
      }
    }
    .tab-item-bg{
      width: calc((100% - 120rpx)/2);
      height: 60rpx;
      background-color: hsla(0,0%,100%,.18);
      border-radius: 16rpx;
      top: 14rpx;
      position: absolute;
    }
    .bg-location-1{
      left: 30rpx;
      transition: .5s ease;
    }
    .bg-location-0{
      left: calc(50% + 30rpx);
      transition: .5s ease;
    }

  }
  .tab-one{
    .index-content{
      margin: 20rpx 20rpx 0 20rpx;
      padding: 30rpx;
      box-sizing: border-box;
      background-color: rgba(35,35,35,.8);
      backdrop-filter: saturate(180%) blur(20px);
      border-radius: 20rpx;
      height: 860rpx;
      background-image: url(@/static/img/index/inv_bg.png);
      background-size: cover;
      .content-my{
        display: flex;
        justify-content: left;
        height: 80rpx;
        padding: 16rpx 0;
        box-sizing: border-box;
        .my-img{
          width: 44rpx;
          image{
            width: 44rpx;
            height: 44rpx;
          }
        }
        .my-text{
          margin-left: 20rpx;
          color: #fff;
          font-size: 32rpx;
          line-height: 44rpx;
        }
      }
      .content-data{
        flex-direction: column;
        width: 200rpx;
        height: 200rpx;
        background-image: url(@/static/img/index/logo.gif);
        background-size: cover;
        margin: 20rpx auto;
        display: flex;
        align-items: center;
        justify-content: center;
        .data-item{
          font-size: 32rpx;
          color: #f0b90b;
        }
      }
      .content-item{
        display: flex;
        justify-content: space-between;
        height: 82rpx;
        .item-value{
          color: #fff;
          height: 82rpx;
          line-height: 82rpx;
          font-size: 32rpx;
        }
      }
      .content-share{
        width: 100%;
        min-height: 200rpx;
        box-sizing: border-box;
        border: 2rpx solid #000;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
        .share-title{
          font-size: 32rpx;
          margin: 0 auto 20rpx;
          text-align: center;
          color: #fff;
        }
        .share-join{
          width: 90%;
          margin: 0 5% 20rpx 5%;
          padding: 10px;
          box-sizing: border-box;
          border: 1px solid #666;
          border-radius: 20rpx;
          font-size: 24rpx;
          color: #999;
          word-break: break-all;
          text-align: center;
        }
        .share-copy{
          background: linear-gradient(to right, rgb(115, 76, 226), rgb(96, 107, 251));
          color: #fff;
          font-size: 26rpx;
          text-align: center;
        }
      }
    }
    .index-list{
      margin: 20rpx 20rpx 0 20rpx;
      padding: 30rpx;
      box-sizing: border-box;
      background-color: rgba(35,35,35,.8);
      backdrop-filter: saturate(180%) blur(20px);
      border-radius: 20rpx;
      height: 640rpx;
      background-image: url(@/static/img/index/gift_bg.png);
      background-size: cover;
      .list-title{
        display: flex;
        justify-content: left;
        height: 80rpx;
        padding: 16rpx 0;
        box-sizing: border-box;
        .title-img{
          width: 44rpx;
          image{
            width: 44rpx;
            height: 44rpx;
          }
        }
        .title-text{
          margin-left: 20rpx;
          color: #fff;
          font-size: 32rpx;
          line-height: 44rpx;
        }
      }
      .list-item{
        display: flex;
        justify-content: space-between;
        .item-name{
          width: 22%;
          text-align: center;
          color: #fff;
          font-size: 24rpx;
        }
        .item-name:nth-of-type(2){
          width: 43%;
        }
        .item-name:nth-of-type(3){
          width: 20%;
        }
        .item-name:nth-of-type(4){
          width: 15%;
        }

      }
    }
  }
  .tab-two{
    padding: 0 30rpx;
    .content-item{
      margin-top: 32px;
      background-color: #f5f3ff;
      border-radius: 48rpx;
      padding-bottom:30rpx;
      .content-title{
        box-sizing: border-box;
        padding: 36rpx 30rpx;
        .title-item{
          display: flex;
          justify-content: left;
          padding-left: 20rpx;
          .item-text{
            font-size: 36rpx;
            color: #7349f2;

            font-weight: 600;
          }
          .item-solid {
            display: inline-block;
            width: 48px;
            height: 2px;
            background-color: #7349f2;
            margin-top: 24rpx;
          }
        }
      }
      .content-text{
        padding: 36rpx 30rpx;
        .text-title{
          font-size: 30rpx;
        }
        .text-title:nth-of-type(1){
          color: #7349f2;
        }
        .text-title:nth-of-type(2){
          color: #292d33;
          font-weight: 600;
          margin-top: 20rpx;
        }
        .text-title:nth-of-type(3){
          color: #5c6066;
          margin-top: 20rpx;
        }
      }
      .content-but{
        margin-left: 36rpx;
        width: 200rpx;
        height: 90rpx;
        background-color: #7349f2;
        border-radius: 16rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30rpx;
        color: #fff;
      }
    }
    .content-one{
      position: relative;
      background-color: #f5f3ff;
      background-image: url("@/static/img/index/p.a945ca3b.png");
      background-size: contain;
      background-repeat: no-repeat;
      .content-img{
        height: 600rpx;
        image{
          position: absolute;
          top: 315rpx;
          left: -10rpx;
          width: calc(100vw - 20rpx);
          height: 432rpx;
          z-index: 9;
        }
      }
    }
    .content-two{
      background-color: #f2fffd;
      .content-title{
        .title-item{
          .item-text{
            color:#0ab192;
          }
          .item-solid {
            background-color: #0ab192;
          }
        }
      }
      .content-text{
        .text-title{
          color: #5c6066 !important;
          font-weight: 400 !important;
        }
      }
      .content-but{
        background-color: #0ab192;
      }
    }
  }
  .index-button{
    margin: 20rpx 20rpx 0 20rpx;
    height: 80rpx;
    display: flex;
    justify-content: space-between;
    .button-item{
      font-size: 32rpx;
      font-weight: 600;
      color: #fff;
    }
    .button-item:nth-of-type(1){
      color: rgb(115, 76, 226);
    }

  }

}


</style>