yunshan/pages/user/revenue.vue

<template>
	<view class="revenue">
		<view class="top-jg"></view>
		<view class="nav-wrapper">
			<view class="nav-item" v-for="(item, index) in navList" :key="index" :class="{ active: currentIndex === index }" @click="navClick(index)">{{ item.title }}</view>
		</view>
		<view class="list">
			<view class="list-item flex">
				<view class="item-tpl">
					<view class="tpl name">有效算力</view>
					<view class="tpl num">{{ list.doing  }}{{ navList[currentIndex].slUnit }}</view>
				</view>
				<view class="item-tpl">
					<view class="tpl name">待生效算力</view>
					<view class="tpl num">{{ list.stand }}{{ navList[currentIndex].slUnit }}</view>
				</view>
			</view>
			<view class="list-item">
				<view class="item-tpl tols">
					<view class="tpl name">可用</view>
					<view class="tpl num">{{ list.all_mining | four }}{{ navList[currentIndex].unit }}</view>
				</view>
				<!-- <view class="item-tpl">
					<view class="tpl name">当前锁仓</view>
					<view class="tpl num">{{list.all_lock}}FIL</view>
				</view> -->
			</view>
		</view>
		<scroll-view scroll-x="true" style="width: 750rpx; padding-top: 20rpx;">
			<view class="flex">
				<view class="info-cell">
					<view class="cell">总收益</view>
					<view class="cell-title">
						<!-- {{
							(navList[currentIndex].all_unlock * 1 + navList[currentIndex].all_lock + list.all_mining + navList[currentIndex].all_recommend)| four
						}}{{ navList[currentIndex].unit }} -->
					{{ navList[currentIndex].all_get | four }}{{ navList[currentIndex].unit }}
					</view>
				</view>
				<view class="info-cell">
					<view class="cell">分享收益</view>
					<view class="cell-title">{{ navList[currentIndex].all_recommend | four }}{{ navList[currentIndex].unit }}</view>
				</view>
				<view class="info-cell">
					<view class="cell">今日分享收益</view>
					<view class="cell-title">{{ navList[currentIndex].today_recommend  | four }}{{ navList[currentIndex].unit }}</view>
				</view>
				<!-- <view class="info-cell" v-if="navList[currentIndex].all_recommend != 0">
					<view class="cell">累计推荐</view>
					<view class="cell-title">{{navList[currentIndex].all_recommend | four}}{{ navList[currentIndex].unit }}</view>
				</view> -->
				<!-- <view class="info-cell" v-if="navList[currentIndex].today_recommend != 0">
					<view class="cell">今日推荐</view>
					<view class="cell-title">{{navList[currentIndex].today_recommend | four}}{{ navList[currentIndex].unit }}</view>
				</view> -->
			</view>
		</scroll-view>
		<!-- <view class="all-num">
			<view class="num-item">
				<view class="title">总收益</view>
				<view class="num">{{ (+navList[currentIndex].all_unlock + navList[currentIndex].all_lock + list.all_mining) == 0 ? 0 : (+navList[currentIndex].all_unlock + navList[currentIndex].all_lock + list.all_mining).toFixed(6)  }}{{ navList[currentIndex].unit }}</view>
			</view>
			<view class="num-item">
				<view class="title">累计释放</view>
				<view class="num">{{ navList[currentIndex].all_unlock }}{{ navList[currentIndex].unit }}</view>
			</view>
			<view class="num-item">
				<view class="title">待释放</view>
				<view class="num">{{ navList[currentIndex].all_lock }}{{ navList[currentIndex].unit }}</view>
			</view>
		</view> -->

		<view class="tip">
			<view class="line"></view>
			<view class="title">每日收益记录</view>
			<view class="line"></view>
		</view>
		<scroll-view :style="{ height: height }" class="days" scroll-y @scrolltolower="loadData()">
			<empty v-if="navList[currentIndex].loaded === true && navList[currentIndex].list.length === 0"></empty>

			<view class="day-item" v-for="(item, index) in navList[currentIndex].list" :key="index">
				<view v-if="item.step == 1 || item.step == 0">
					<view class="item">
						<view class="item-title">结算日期：</view>
						<view class="item-value">{{ item.add_date }}</view>
					</view>
					<view class="item">
						<view class="item-title">
							今日可用
							<!-- <text>{{ +item.machine.first_step_get_ratio }}</text> -->
						</view>
						<view class="item-value">{{ item.get_money | four }}{{ item.get_money_type }}</view>
					</view>

					<!-- <view class="item" v-if="((item.get_money * 1) / (item.machine.first_step_get_ratio * 1)) * 100 - item.get_money * 1 != 0">
						<view class="item-title">
							今日质押
							<text>{{ 100 - item.machine.second_step_get_ratio * 1 }}%</text>
						</view>
						<view class="item-value">{{ (((item.get_money * 1) / (item.machine.first_step_get_ratio * 1)) * 100 - item.get_money * 1) | four }}{{ item.get_money_type }}</view>
					</view> -->
				</view>
				<view v-if="item.step == 2">
					<!-- <view class=""> -->
					<view class="item">
						<view class="item-title">结算日期：</view>
						<view class="item-value">{{ item.add_date }}</view>
					</view>
					<view class="item">
						<view class="item-title">
							今日获得：
							<text>{{ +item.machine.second_step_get_ratio }}%</text>
						</view>
						<view class="item-value">{{ (item.get_money*1 - item.unlock*1) | four }}{{ item.get_money_type }}</view>
					</view>
					<view class="item" v-if="item.all_lock*1 != 0">
						<view class="item-title">
							今日冻结：
							<text>{{ 100 - item.machine.second_step_get_ratio }}%</text>
						</view>
						<view class="item-value">
							<text>{{ (+item.all_lock) | four }}{{ item.get_money_type }}</text>
						</view>
					</view>
					<view class="item" v-if="+item.unlock != 0">
						<view class="item-title">
							今日释放：
							<text>1/{{ item.machine.third_step_time }}</text>
						</view>
						<view class="item-value">
							<text>{{ (+item.unlock) | four}}{{ item.get_money_type }}</text>
						</view>
					</view>
				</view>

				<view v-if="item.step == 3">
					<view class="item">
						<view class="item-title">结算日期：</view>
						<view class="item-value">{{ item.add_date }}{{ item.get_money_type }}</view>
					</view>
					<view class="item">
						<view class="item-title">
							今日释放：
							<text>1/{{ item.machine.third_step_time }}</text>
						</view>
						<view class="item-value">{{ item.unlock | four}}{{ item.get_money_type }}</view>
					</view>
					<view class="item">
						<view class="item-title">
							解除质押：
							<text>1/{{ item.machine.third_step_time }}</text>
						</view>
						<view class="item-value">{{ item.unstand | four }}{{ item.get_money_type }}</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="navList[currentIndex].loadingType" v-if="navList[currentIndex].list !=0"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
import empty from '@/components/empty';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import { mining, miningIndex, myMiningGet } from '@/api/calculation.js';
export default {
	components: {
		empty,
		uniLoadMore
	},
	data() {
		return {
			list: '',
			navList: [
				{
					title: 'BTC',
					unit: 'BTC',
					slUnit: 'T',
					list: [],
					page: 1,
					limit: 10,
					loadingType: 'more',
					all_lock: 0, //待释放
					all_get: 0, //总收益
					all_unlock: 0 //累计释放
				},
				// {
				// 	title: 'Chia',
				// 	unit: 'XCH',
				// 	slUnit: 'T',
				// 	list: [],
				// 	page: 1,
				// 	limit: 10,
				// 	loadingType: 'more',
				// 	all_lock: 0, //待释放
				// 	all_get: 0, //总收益
				// 	all_unlock: 0 //累计释放
				// },
				{
					title: 'ETH',
					unit: 'ETH',
					slUnit: 'T',
					list: [],
					page: 1,
					limit: 10,
					loadingType: 'more',
					all_lock: 0, //待释放
					all_get: 0, //总收益
					all_unlock: 0 //累计释放
				}
			],
			currentIndex: 0,
			height: 0,
			allIncome: 0, //总收益
			ljIncome: 0, //累计收益
			wait: 0, //待释放,
			all_lock: 0, //待释放
			all_get: 0, //总收益
			all_unlock: 0 //累计释放
		};
	},
	filters: {
		four(val) {
			if (val) {
				val = val.toString();
				let index = val.indexOf('.');
				if (index !== -1) {
					val = val.substring(0, 4 + index + 1);
				} else {
					val = val.substring(0);
				}
				return parseFloat(val).toFixed(4);
			}
			return '0.0000';
		}
	},
	onReady(res) {
		var _this = this;
		uni.getSystemInfo({
			success: resu => {
				const query = uni.createSelectorQuery();
				query.select('.days').boundingClientRect();
				query.exec(function(res) {
					console.log(res, 'ddddddddddddd');
					_this.height = resu.windowHeight - res[0].top + 'px';
					console.log('打印页面的剩余高度', _this.height);
				});
			},
			fail: res => {}
		});
	},
	onLoad() {
		let userInfo = uni.getStorageSync('userInfo') || '';
		this.level = userInfo.level;
		this.loadData();
		this.loadTopDate('BTC');
	},
	methods: {
		async loadTopDate(type) {
			uni.showLoading({
				title: '加载中...'
			});
			let obj = this;
			miningIndex({
				type: type
			}).then(({ data }) => {
				obj.list = data;
				uni.hideLoading();
				console.log(obj.list);
			});
		},
		//切换币种
		navClick(index) {
			if (index !== this.currentIndex) {
				this.currentIndex = index;
				this.loadTopDate(this.navList[index].unit);
				this.loadData('tabChange');
			}
		},
		loadData(source) {
			console.log('loadnoe');
			//这里是将list挂载到nav列表下
			let index = this.currentIndex;
			let navItem = this.navList[index];
			// let state = navItem.state;
			if (source === 'tabChange' && navItem.loaded === true) {
				//tab切换只有第一次需要加载数据
				return;
			}
			if (navItem.loadingType === 'loading') {
				//防止重复加载
				return;
			}
			if (navItem.loadingType === 'noMore') {
				//防止重复加载
				return;
			}
			// 修改当前对象状态为加载中
			navItem.loadingType = 'loading';
			myMiningGet({
				type: navItem.unit,
				page: navItem.page,
				limit: navItem.limit
			})
				.then(({ data }) => {
					console.log(data, '888888888888888888888');
					navItem.all_lock = data.all_lock;
					navItem.all_get = data.all_get;
					navItem.all_unlock = data.all_unlock;
					navItem.all_recommend = data.all_recommend*1
					navItem.today_recommend = data.today_recommend*1
					let arr = data.list.data.map(e => {
						return e;
					});
					navItem.list = navItem.list.concat(arr);
					console.log(arr);
					navItem.page++;
					if (navItem.limit == data.list.data.length) {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						navItem.loadingType = 'more';
						console.log('more');
						return;
					} else {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						navItem.loadingType = 'noMore';
						console.log('noMore');
					}
					this.$set(navItem, 'loaded', true);
				})
				.catch(e => {
					console.log(e);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	width: 100%;
}

.top-jg {
	height: 55rpx;
}

.nav-wrapper {
	margin: 0rpx auto 10rpx;
	width: 627rpx;
	height: 60rpx;
	border: 2px solid #141E47;
	border-radius: 5rpx;
	display: flex;

	.nav-item {
		width: 50%;
		text-align: center;
		line-height: 60rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #141E47;
	}

	.active {
		background: #141E47;
		color: #fff;
	}
}

.all-num {
	width: 627rpx;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;

	.num-item {
		width: 33.3%;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.title {
			padding-bottom: 20rpx;
		}

		.num {
			font-weight: 500;
		}
	}
}

.tip {
	width: 627rpx;
	margin: 30rpx auto 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.line {
		width: 193rpx;
		height: 2rpx;
		background: #FF6600;
	}

	.title {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF6600;
	}
}

.days {
	// background-color: red;
	padding: 0 65rpx;

	.day-item {
		// height: 230rpx;
		border-bottom: 1px solid #f3f4f6;
		background-color: #fff;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding: 20rpx 0;

		.item {
			display: flex;
			justify-content: space-between;

			text {
				display: inline-block;
				margin-left: 10rpx;
			}
		}
	}
}

.list {
	padding: 10rpx 65rpx 0;

	.list-item {
		// padding: 90rpx 118rpx 0 118rpx;

		margin-bottom: 15rpx;

		.item-tpl {
			background-color: #f7f6fb;
			text-align: center;
			// background-color: #FFFFFF;
			padding: 20rpx 0;
			width: 48%;

			.name {
				color: #666666;
				font-size: 24rpx;
			}

			.num {
				font-size: 32rpx;
				color: #333333;
				font-weight: bold;
				padding-top: 10rpx;
			}
		}
	}

	.tols {
		width: 100% !important;
	}
}
.info-cell {
	width: 33.33%;
	text-align: center;
	flex-shrink: 0;
	.cell {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}
	.cell-title {
		font-size: 26rpx;
		font-weight: 500;
		color:#333333;
		padding-top: 20rpx;
	}
}
</style>