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

<script>
	import tokenpocketBnb from "@/common/wallet/tokenpocket-wallet/tokenpocket-bnb";
	import {
		getTotalMoney
	} from "@/api/money";
	import {
		addPledge,
		getDividendList,
		getPledgeConfig,
		getPledgeList
	} from "@/api/pledge";
	import blank from "@/components/en-utils/en-blank/en-blank.vue"
	import web3 from "web3";
	import {
		ethers
	} from "ethers";
	import tools from "@/common/js/tools";
	export default {
		name: "home-index",
		props: {
			address: {
				default: ''
			}
		},
		components: {
			blank
		},
		watch: {
			'address': function() {
				this.getIconNum()
			},
			'pledgeNUm': function() {
				console.log(this.pledgeNUm)
				if (this.pledgeNUm === '') {
					return
				}
				if (this.listTab === 1) {
					if (this.coinNum < this.pledgeNUm) {
						this.pledgeNUm = this.coinNum
					}
				} else {
					if (this.pledgeTotal < this.pledgeNUm) {
						this.pledgeNUm = this.pledgeTotal
					}
				}
			}
		},
		data() {
			return {
				listTab: 1,
				coinNum: '',
				pledgeTotal: '',
				revenueTotal: '',
				price: '',
				page: 1,
				total: '',
				pledgeNUm: '',
				bnb_num: '',
				pledgeAddress: '',
				list: []
			};
		},

		mounted() {
			this.getIconNum()
			this.getTotalMoney()
			this.getDividendList()
			this.getPledgeConfig()
		},
		methods: {
			getPledgeConfig() {
				getPledgeConfig().then(res => {
					if (res.code === 1) {
						this.bnb_num = res.data.bnb_num
						this.pledgeAddress = res.data.address
					}
				})
			},
			setListTab(listTab) {
				if (this.listTab !== listTab) {
					this.listTab = listTab
					this.pledgeNUm = ''
				}
			},
			getDividendList() {
				if (this.total >= this.list.length && this.page>1) {
					return
				}
				getDividendList({
					'page': this.page
				}).then(res => {
					if (res.code === 1) {
						this.list.push(...res.data.items)
						this.total = res.data.total
						this.page++
					}
				})
			},
			async addPledge() {
				if (this.listTab === 1) {
					if (this.coinNum < this.pledgeNUm) {
						tools.error('DAO不足')
						return
					}
				} else {
					if (this.pledgeTotal < this.pledgeNUm) {
						tools.error('贡献不足')
						return
					}
					let bnbNUm = tokenpocketBnb.getBalance(this.address)
					if (bnbNUm < this.bnb_num) {
						tools.error('BNB不足')
						return
					}
				}
				let data = ''
				let transactionData
				if (this.listTab === 1) {
					data = '0xa9059cbb'
					//icon转账
					let formHex = web3.utils.numberToHex(ethers.utils.parseEther(this.pledgeNUm.toString())
						.toString());
					data = data + tools.replenishZero(this.pledgeAddress) + tools.replenishZero(formHex)
					transactionData = await tokenpocketBnb.getContractTransaction(data, 0);
				} else {
					//bnb转账
					transactionData = await tokenpocketBnb.getTransactionData(this.pledgeAddress, this.bnb_num);
				}
				tokenpocketBnb.sendTransaction(transactionData).then(res => {
					if (res) {
						addPledge({
							'type': this.listTab,
							'money': this.pledgeNUm,
							'hash': res
						}).then(res => {
							if (res.code === 0) {
								this.pledgeNUm = ''
								tools.success(res.msg)
								this.getTotalMoney()
							} else {
								tools.error(res.msg)
							}
						})
					} else {
						tools.error('发起失败')
					}
					console.log(res)
				})

			},
			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.listTab === 1) {
					this.pledgeNUm = this.coinNum
				} else {
					this.pledgeNUm = this.pledgeTotal
				}
			},
		},
	}
</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="addPledge">
					确定
				</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">贡献 {{item.pledge_money}} DAO</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>
			<!--			<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">{{item.type===1?'质押':'解压'}}</view>-->
			<!--						<view class="fs-24">{{item.created_date}}</view>-->
			<!--					</view>-->
			<!--					<view class="">-->
			<!--						<view class="fs-24" v-if="item.status===1">执行中</view>-->
			<!--						<view class="fs-24" v-else-if="item.status===2">已完成</view>-->
			<!--						<view class="fs-24" v-else>已作废</view>-->
			<!--						<view class="fs-28 ">数量：<text class="fc-ED301D">{{item.money}}</text></view>-->
			<!--					</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>