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";
	import blank from "@/components/en-utils/en-blank/en-blank.vue"
	export default {
		name: "home-index",
		props: {
			address: {
				default: ''
			}
		},
		components: {
			blank
		},
		watch: {
			'address': function() {
				this.getIconNum()
			}
		},
		data() {
			return {
        listTab:1,
				coinNum: '',
				pledgeTotal: '',
				revenueTotal: '',
				price: '',
				page: 1,
				total: '',
        pledgeNUm: '',
				list: []
			};
		},
		mounted() {
			this.getIconNum()
			this.getTotalMoney()
			this.getDividendList()
		},
		methods: {
      setListTab(listTab) {
        if (this.listTab !== listTab) {
          this.listTab = listTab
        }
      },
			getDividendList() {
				getDividendList({
					'page': this.page
				}).then(res => {
					if (res.code === 1) {
						this.list.push(...res.data.items)
						this.total = res.data.total
					}
				})
			},
			scrolltolower() {
				if (this.list.length < this.total) {
					++this.page
					this.getDividendList()
					// console.log('触底');
				}
			},
			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)

			},
      setMax(){
        if(this.type===1){
          this.formNUm=this.usdtNum
        }else {
          this.formNUm=this.iconNum
        }
      },
		},
	}
</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-8">
						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-8">
						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-8">
						贡献总额
					</view>
					<view class="fs-28 fw-b">
						{{pledgeTotal}}
					</view>
				</view>
			</view>
		</view>
    <view class="list-tab">
      <view class="tab-items">
        <view class="tab-item" @click="setListTab(1)" :class="{'option-tab':listTab===1}">
          质押
        </view>
        <view class="tab-item" @click="setListTab(2)" :class="{'option-tab':listTab===2}">
          解压
        </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 class="bgc-f p-40">
        <view class="bgc-F6F7FA b-rad-20 mb-20 p-20 box-sizing-border mb-20" >
          <view class="align-items-start flex-justify-space mb-20">
            <view class="align-items-center">
              <image
                  class="t-img mr-8"
                  :src="require('@/static/img/logo/logo.png')"
              ></image>
              <view class="fs-28">DAO</view>
            </view>
            <view class="max-box b-rad-20 fs-28" @click="setMax">
              Max {{listTab===1 ?coinNum:pledgeTotal}}
            </view>
          </view>
          <view>
            <input v-model="pledgeNUm" :placeholder="'输入要'+(listTab===1 ?'质押':'解压')+'的DAO数量'" placeholder-class="fs-28"></input>
          </view>
        </view>
        <view class="convent-but b-rad-20 text-align-center fs-28 fc-f" @click="">
          确定
        </view>
      </view>

    </view>
		<view class="bgc-f p-20 box-sizing-border b-rad-20" v-if="listTab===2">
			<view class="fs-28 pt-5 mb-8">
				贡献收益记录
			</view>
			<view v-if="list.length<=0" class="blank-box align-items-center flex-justify-center">
				<blank :showBlank="list.length<=0?true:false" message="暂无数据"></blank>
			</view>
			<view class="bgc-F6F7FA" v-else>
				<view class="item-box align-items-center flex-justify-space" v-for="item in list" :key="item.id">
					<view>
						<view class="mb-8 fs-28 fw-b">贡献数量</view>
						<view class="fs-24">{{item.created_date}}</view>
					</view>
					<view class="align-items-center">
						<view class="fs-24">奖励:</view>
						<view class="fs-28 fc-ED301D">{{item.sorting_money}}</view>
					</view>
				</view>
				<view class="h-50 text-align-center fs-28">
					~暂无记录
				</view>
			</view>
		</view>
    <view class="bgc-f p-20 box-sizing-border b-rad-20" v-else>
      <view class="fs-28 pt-5 mb-8">
        质押记录
      </view>
      <view v-if="list.length<=0" class="blank-box align-items-center flex-justify-center">
        <blank :showBlank="list.length<=0?true:false" message="暂无数据"></blank>
      </view>
      <view class="bgc-F6F7FA" v-else>
        <view class="item-box align-items-center flex-justify-space" v-for="item in list" :key="item.id">
          <view>
            <view class="mb-8 fs-28 fw-b">贡献数量</view>
            <view class="fs-24">{{item.created_date}}</view>
          </view>
          <view class="align-items-center">
            <view class="fs-24">奖励:</view>
            <view class="fs-28 fc-ED301D">{{item.sorting_money}}</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;
	}
  .list-tab {
    width: 100%;
    height: 100%;
    background: #eaf2ff;
    border-radius: 10rpx;
    cursor: pointer;
    position: relative;
    margin: 20rpx 0 ;

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

      .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: 10rpx 10rpx 0 0;
      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;
    }



  }
  .t-img{
    width: 70rpx;
    height: 60rpx;
  }
  .max-box{
    color: #0d81cf;
    border: 2rpx solid #0d81cf;
    padding: 6rpx 20rpx;
  }
  .convent-but{
    height: 80rpx;
    background: #0d81cf;
    color: #fff;
    line-height: 80rpx;
  }
</style>