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

<template>
  <view class="index-data">
    <view class="index-top">
      <top-head @setBabAddress="setBabAddress"></top-head>
      <view class="top-text" @click="goToUrl(2)">
        {{ $t('index.index.top.one') }}
        <!--        <view class="text-item">{{$t('index.index.top.one')}}</view>-->
        <!--        <view class="text-item">{{$t('index.index.top.two')}}</view>-->
        <!--        <view class="text-item">{{$t('index.index.top.three')}}</view>-->
        <!--        <view class="text-item">{{$t('index.index.top.four')}}</view>-->
      </view>
      <view class="top-but">
        <button @click="goToUrl(1)">{{ $t('index.index.investment') }}</button>
      </view>
      <view class="top-bottom" @click="setClipboardData">
        <image class="bottom-img" src="@/static/img/index/cp.png" mode="aspectFill"></image>
        <text class="bottom-text bottom-text-two">{{ $t('index.index.top.cp') }}</text>
      </view>
      <view class="top-bottom" v-if="false">
        <image class="bottom-img" src="@/static/img/index/dagou.svg" mode="aspectFill"></image>
<!--        <text class="bottom-text">{{ $t('index.index.top.five') }}{{days}}{{$t('index.index.top.four')}}</text>-->
<!--        <text class="bottom-text">{{ $t('index.index.top.five') }}</text>-->
        <text class="bottom-text" @click="goToUrl(2)">{{ $t('index.index.top.six') }}</text>
      </view>
    </view>
    <view class="list-tab">
      <view class="tab-items">
        <view class="tab-item" @click="setListTab(1)" :class="{'option-tab':listTab===1}">
          {{ $t('index.index.list.title') }}
        </view>
        <view class="tab-item" @click="setListTab(2)" :class="{'option-tab':listTab===2}">
          {{ $t('index.index.list.title-two') }}
        </view>
        <!--          <view class="tab-item" @click="setListTab(3)" :class="{'option-tab':listTab===3}">-->
        <!--            {{ $t('index.index.code') }}-->
        <!--          </view>-->
      </view>
      <view class="tab-item-bg"
            :class="{'bg-location-1':listTab===1,'bg-location-2':listTab===2,'bg-location-3':listTab===3}"></view>
    </view>
    <view class="team-but" @click="goToUrl(4)">{{ $t('index.index.tds') }}》</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">{{ $t('index.index.list.title') }}({{ total }})</view>-->
<!--      </view>-->
<!--      <division></division>-->
      <view v-if="listTab===1">
        <earning-list @setTotal="setTotal"></earning-list>
      </view>
      <view v-else>
        <common-list @setTotal="setTotal"></common-list>
      </view>

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

</template>
<script>
import {getMemberInfo} from "@/api/member";
import Division from "@/pages/index/components/division";
import TopHead from "@/pages/index/components/top-head";
import EarningList from "@/pages/index/components/earning-list";
import CommonList from "@/pages/index/components/common-list";
import tokenpocketBnb from "@/common/wallet/tokenpocket-wallet/tokenpocket-bnb";

export default {
  components: {CommonList, EarningList, TopHead, Division},
  data() {
    return {
      listTab:1,
      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: '',
      total: 0,
      days:365

    }

  },
  watch: {},
  async onLoad(query) {
    this.getMyData()
    this.handlerDateDurationCurrent()
  },
  mounted() {

  },
  methods: {
    setClipboardData(){
      console.log(window.location)
      uni.setClipboardData({
        data: window.origin+'/#/pages/index/index?inviteCode='+this.babAddress,
        success: function () {
          console.log('success');
        }
      });
    },
    setBabAddress(babAddress){
      this.babAddress=babAddress
    },
    handlerDateDurationCurrent() {
      let d1 = new Date('2021-11-12')
      let d2 = new Date()

      let cha = Math.abs(d2.getTime() - d1.getTime())
      this.days = parseInt(cha / (24 * 60 * 60 * 1000))
      // let hours = parseInt(cha % (24 * 60 * 60 * 1000) / (60 * 60 * 1000))
      // let mins = parseInt(cha % (60 * 60 * 1000) / (60 * 1000))
    },
    setTotal(total) {
      this.total = total
    },
    goToUrl(type) {
      switch (type) {
        case 1:
          uni.navigateTo({
            'url': 'pages/index/contract'
          })
          break
        case 2:
          uni.navigateTo({
            'url': 'pages/index/intro'
          })
          break
        case 3:
          uni.navigateTo({
            'url': 'pages/index/contract'
          })
          break
        case 4:
          uni.navigateTo({
            'url': 'pages/index/team'
          })
          break
      }
    },
    setShowLang() {
      this.showLang = !this.showLang
    },
    setListTab(listTab) {
      if (this.listTab !== listTab) {
        this.listTab = listTab
      }
    },

    getMyData() {
      let token = uni.getStorageSync('token')
      if (token) {
        getMemberInfo().then((res) => {
          if (res.code === 1) {
            this.memberData = res.data
            tokenpocketBnb.getAccounts().then((babAddress)=>{
              if(babAddress && this.memberData.address.toLocaleLowerCase()!==babAddress.toLocaleLowerCase()){
                uni.clearStorageSync()
                uni.reLaunch({
                  'url': 'pages/login/index'
                })
              }
            })
          }
        })
      }

    },
  },
}
</script>
<style lang="scss" scoped>
//@import "/static/css/common.css";
.index-data {
  min-height: 100vh;
  .index-top {
    box-shadow: 0 0 24rpx 0 rgba(0, 0, 0, 0.08);
    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;
      color: #fff;
      font-size: 36rpx;
      font-weight: bold;
      line-height: 36px;

      .text-item {
        color: #fff;
        font-size: 30rpx;
        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: 10rpx 40rpx 0 40rpx;

      .bottom-img {
        display: inline-block;
        width: 24rpx;
        height: 24rpx;
        margin-right: 10rpx;
      }

      .bottom-text {
        font-size: 24rpx;
        color: #7484a4;
      }
      bottom-text-two{
        font-size: 23rpx !important;
      }

      .bottom-text:nth-of-type(2) {
        margin-left: 0.5em;
        text-decoration: underline;
      }
    }
    //.top-bottom

    //.top-bottom:nth-of-type(0) {
    //  //padding: 40rpx 40rpx 0 40rpx;
    //  .bottom-text{
    //    font-size: 28rpx;
    //  }
    //}
  }
  .list-tab {
    width: 90%;
    height: 100%;
    background: #eaf2ff;
    border-radius: 36px;
    cursor: pointer;
    position: relative;
    margin: 20rpx auto;

    .tab-items {
      z-index: 10;
      display: flex;
      justify-content: space-between;
      border-radius: 36px;

      .tab-item {
        z-index: 10;
        width: calc(100% / 2);
        font-size: 13px;
        color: #adbad0;
        display: block;
        height: 32px;
        line-height: 32px;
        text-align: center;
      }

      .option-tab {
        color: #292929;
      }
    }

    .tab-item-bg {
      position: absolute;
      border-radius: 36px;
      background: #fff;
      transition: .5s ease;
      height: 32px;
      width: calc(100% / 2);
      top: 0;
    }

    .bg-location-1 {
      left: 0;
      transition: .5s ease;
    }

    .bg-location-2 {
      left: 50%;
      transition: .5s ease;
    }

    .bg-location-3 {
      left: 66.66%;
      transition: .5s ease;
    }

  }

  .team-but{
    width: 90%;
    margin: auto;
    font-size: 13px;
    color: #adbad0;
    text-align: right;
    //height: 32px;
    //line-height: 32px;
  }

  .index-list {
    background: #fff;
    width: 90%;
    margin: 20rpx 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;
      }
    }


  }

  .index-bottom {
    height: 50rpx;
  }
}


</style>