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 {
				coinNum: '',
				pledgeTotal: '',
				revenueTotal: '',
				price: '',
				page: 1,
				total: '',
				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)
						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)

			},
		},
	}
</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="bgc-f p-20 box-sizing-border b-rad-20">
			<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;
	}
</style>