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

<script>
import homeIndex from "@/pages/home/home-index.vue";
import myIndex from "@/pages/my/my-index.vue";
import convertIndex from "@/pages/convert/convert-index.vue";
import tokenpocketBnb from "@/common/wallet/tokenpocket-wallet/tokenpocket-bnb";
export default {
  components: { homeIndex, myIndex, convertIndex },
  data() {
    return {
      tab_index: 1,
      address:''
    };
  },
  mounted() {
    this.getMyData()
    // this.handlerDateDurationCurrent()
  },
  methods: {
    abbreviateString(str ){
      let startLength=4;
      let endLength=4;
      if (str.length <= startLength + endLength + 1) {
        return str; // 如果字符串长度不足以被截断，则返回原字符串
      }
      return str.slice(0, startLength) + '...' + str.slice(-endLength);
    },
    async getAccount(){
      tokenpocketBnb.getAccounts().then(async (Address) => {
        console.log(Address)
        if (Address) {
          this.address=Address
        } else {
          this.$message.error("获取信息失败")
        }
      }).catch((e)=>{
        console.log(e)
        // tools.goToError(2)
      })
    },
    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'
      //           // })
      //         }
      //       })
      //     }
      //   })
      // }

    },
    tabClick(num) {
      if(num) {
        this.tab_index = num
      }
    }
  },
}
</script>

<template>
<view class="flex-common-css">
  <view class="top-b bgc-f plr-20 box-sizing-border align-items-center flex-justify-space">
    <image
        class="img-box"
        src="@/static/img/logo/logo.png"
        ></image>
    <view class="fs-30">
      {{abbreviateString(address)}}
    </view>
  </view>
  <view class="content-b p-20 box-sizing-border">
    <view class="scroll-view-css">
      <homeIndex v-if="tab_index === 1"></homeIndex>
      <convertIndex v-else-if="tab_index === 2"></convertIndex>
      <myIndex v-else></myIndex>
    </view>
    <view class="tab-b align-items-center flex-justify-space b-rad-10 bgc-f">
      <view @click="tabClick(1)" class="flex-1 flex-direction-column align-items-center flex-justify-center">
        <image
            class="tab-img mb-4"
            v-if="tab_index === 1"
            :src="require('@/static/img/tab/index.svg')"
            ></image>
        <image
            class="tab-img mb-4"
            v-else
            :src="require('@/static/img/tab/index-two.svg')"
            ></image>
        <view class="fs-28" :class="tab_index === 1?'fc-f78820':''">首页</view>
      </view>
      <view @click="tabClick(2)" class="flex-1 flex-direction-column align-items-center flex-justify-center">
        <image
            class="tab-img mb-4"
            :src="require('@/static/img/tab/jh.svg')"
            ></image>
        <view class="fs-28" :class="tab_index === 2?'fc-f78820':''">兑换</view>
      </view>
      <view @click="tabClick(3)" class="flex-1 flex-direction-column align-items-center flex-justify-center">
        <image
            v-if="tab_index === 3"
            class="tab-img mb-4"
            :src="require('@/static/img/tab/my-two.svg')"
            ></image>
        <image
            v-else
            class="tab-img mb-4"
            :src="require('@/static/img/tab/my.svg')"
            ></image>
        <view class="fs-28" :class="tab_index === 3?'fc-f78820':''">我的</view>
      </view>
    </view>
  </view>
</view>
</template>

<style scoped lang="scss">
.content-b{
  width: 100%;
  height: calc(100vh - 98rpx);
  display: flex;
  flex-direction: column;
}
.top-b{
  width: 100%;
  height: 98rpx;
  line-height: 98rpx;
}
.img-box{
  width: 78rpx;
  height: 60rpx;
}
.tab-img{
  width: 50rpx;
  height: 50rpx;
}
.tab-b{
  width: 100%;
  height: 138rpx;
  padding: 20rpx 0;
  box-sizing: border-box;
}
</style>