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

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

export default {
  name: "home-index",
  props:{
    address:{
      default:''
    }
  },
  components: {},
  watch:{
    'address':function () {
      this.getIconNum()
    }
  },
  data() {
    return {
      coinNum:'',
      pledgeTotal:'',
      revenueTotal:'',
      price:'',
      page:1,
      list:[]
    };
  },
  mounted() {
    this.getIconNum()
    this.getTotalMoney()
    this.getDividendList()
  },
  methods: {
    getDividendList(){
      getDividendList({'page':this.page}).then(res=>{
        if(res.code===1){
          this.list.push(...res.data.items)
        }
      })
    },
    getTotalMoney(){
      getTotalMoney().then(res=>{
        if (res.code===1){
          this.pledgeTotal=res.data.pledgeTotal
          this.revenueTotal=res.data.revenueTotal
          this.price=res.data.price

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

    },
  },
}
</script>

<template>
  <view>
    <view class="bgc-f p-20 box-sizing-border b-rad-20 mb-40">
      <image
          class="head-img"
          :src="require('@/static/img/index/index/bannerhome.png')"
		   mode="widthFix"
          ></image>
    </view>
    <view class="bgc-f p-20 box-sizing-border b-rad-20 mb-40">
      <view class="b-rad-20 h-80 align-items-center bgc-f1f9fe">
        <view class="flex-1 flex-direction-column align-items-center flex-justify-center">
          <view class="fs-28 mb-4">
            DAO價格($)
          </view>
          <view class="fs-28 fw-b">
            {{price}}
          </view>
        </view>
        <view class="flex-1 flex-direction-column align-items-center flex-justify-center">
          <view class="fs-28 mb-4">
            DAO餘額
          </view>
          <view class="fs-28 fw-b">
            {{coinNum}}
          </view>
        </view>
        <view class="flex-1 flex-direction-column align-items-center flex-justify-center">
          <view class="fs-28 mb-4">
            贡献总额
          </view>
          <view class="fs-28 fw-b">
            {{pledgeTotal}}
          </view>
        </view>
      </view>
    </view>
    <view class="bgc-f p-20 box-sizing-border b-rad-20 mb-40">
      <view class="fs-28 pt-5 mb-4">
        贡献收益记录
      </view>
      <view class="bgc-F6F7FA">
        <view class="item-box align-items-center flex-justify-space" v-for="item in 3" :key="item.id">
          <view>
            <view class="mb-4 fs-28 fw-b">贡献数量</view>
            <view class="fs-24">2025-01-10</view>
          </view>
          <view class="align-items-center">
            <view class="fs-24">奖励:</view>
            <view class="fs-28 fc-ED301D">2.5</view>
          </view>
        </view>
        <view class="h-50 text-align-center fs-28">
          ~暂无记录
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.head-img {
  width: 100%;
  // height: 128px;
}
.h-80{
  height: 160rpx;
}
.h-50{
  height: 100rpx;
  line-height: 100rpx;
}
.item-box{
  width: 100%;
  height: 120rpx;
  padding: 10rpx 20rpx;
  box-sizing: border-box;
  border-top: 2rpx solid #e5e5e5;
}
.item-box:first-child {
  border-top: none;
}
</style>