lnyk/pages/index/index.vue

<template>
	<view class="container">
		<view class="tiele-index">首页</view>
		<view class="swiper">
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange">
					<swiper-item v-for="swiper in banner" :key="swiper.id" @click="ToBanner(swiper)"><image :src="swiper.pic"></image></swiper-item>
				</swiper>
				<view class="indicator"><view class="dots" v-for="(swiper, index) in banner" :class="[swiperCurrent >= index ? 'on' : '']" :key="index"></view></view>
			</view>
		</view>
		<view class="notice-box">
			<view class="notice-title flex_item">
				<image src="../../static/img/img31.png"></image>
				<view class="title">通知</view>
			</view>
			<view class="notice-list flex">
				<view class="notice-tpl" @click="navTo('/pages/index/information')">
					<image src="../../static/img/img02.png"></image>
					<view class="name">产品专题</view>
				</view>
				<view class="notice-tpl" @click="navTo('/pages/index/pingtai')"> <!-- @click="navTo('/pages/index/introduce')" -->
					<image src="../../static/img/img03.png"></image>
					<view class="name">平台介绍</view>
				</view>
				<view class="notice-tpl" @click="navTo('/pages/index/notice')">
					<image src="../../static/img/img04.png"></image>
					<view class="name">通知公告</view>
				</view>
				<view class="notice-tpl" @click="navTo('/pages/index/share')">
					<image src="../../static/img/img05.png"></image>
					<view class="name">好友邀请</view>
				</view>
			</view>
		</view>
		<!-- <image class="logo-img" @click="navTo('/pages/index/information')" src="../../static/img/img44.png"></image> -->
		<view class="notice-box">
			<!-- <view class="notice-title flex_item">
				<image src="../../static/img/img32.png"></image>
				<view class="title">行情</view>
			</view>
			<view class="quotation-list">
				<view class="quotation-tpl" v-for="(ls,index) in list" :key='index' v-if="ls.name!='USDT'">
					<view class="tpl title">{{ls.name}}/USDT</view>
					<view class="tpl num">{{ls.usdt}}</view>
					<view class="tpl money">￥{{ls.price}}</view>
					<view class="tip-box">
						<image src="../../static/img/img30.png"></image>
						<view class="tip" v-if="ls.up > 0">{{ls.up * 100}}%</view>
						<view class="tip grenn" v-if="ls.up == 0 || ls.up < 0">{{ls.up * 100}}%</view>
					</view>
				</view>
			</view> -->
			<view class="title">
				六牛云储运营数据
			</view>
			<view class="info-box">
				<view class="top">
					<view class="top-left">Filcoin</view>
					<view class="top-right">
						<view class="top-right-top">
							全网算力
						</view>
						<view class="top-right-bottom">
							7.255 EiB
						</view>
					</view>
				</view>
				<view class="middle">
					<view class="middle-item">
						<view class="item-name">
							今日新增算力
						</view>
						<view class="item-val">
							285.77 TiB
						</view>
					</view>
					<view class="middle-item">
						<view class="item-name text-right">
							平台总算力
						</view>
						<view class="item-val text-right">
							25.770 PiB
						</view>
					</view>
				</view>
				<view class="bottom">
					<view class="bottom-item">
						<view class="item-name" style="color: #FB3A2F;">
							今日单T产量>>>
						</view>
						<view class="item-val">
							0.0255 FIL
						</view>
					</view>
					<view class="bottom-item">
						<view class="item-name text-right">
							FIL/USDT
						</view>
						<view class="item-val text-right">
							$53.800
						</view>
					</view>
				</view>
			</view>
			<view class="title" style="padding-top: 24rpx;">
				Swarm资讯
			</view>
			<view class="info-box">
				<view class="top">
					<view class="top-left">Bzz</view>
					<view class="top-right">
						<view class="top-right-top">
							
						</view>
						<view class="top-right-bottom">
							
						</view>
					</view>
				</view>
				<view class="middle">
					<view class="middle-item">
						<view class="item-name">
							可达节点数量
						</view>
						<view class="item-val">
							9789.00
						</view>
					</view>
					<view class="middle-item">
						<view class="item-name text-right">
							活跃节点总数
						</view>
						<view class="item-val text-right">
							258125
						</view>
					</view>
				</view>
				<view class="bottom">
					<view class="bottom-item">
						<view class="item-name">
							不可达节点数量
						</view>
						<view class="item-val">
							254562.00
						</view>
					</view>
					<view class="bottom-item">
						<view class="item-name text-right">
							已兑换总额
						</view>
						<view class="item-val text-right">
							1.9565 gbzz
						</view>
					</view>
				</view>
			</view>
			<view class="title" style="padding-top: 24rpx;">
				活动中心
			</view>
			<image src="../../static/img/ad.png" mode="" class="ad"></image>
			<view class="tit">
				六牛云储FIL节点
			</view>
			<view class="kg-item">
				<view class="item-na">
					矿工号：<text>f073844</text>
				</view>
				<view class="item-info">
					<view class="item-name">账户余额</view>
					<view class="item-val">152415.2 FIL</view>
				</view>
				<view class="item-info">
					<view class="item-name">可用余额</view>
					<view class="item-val">1725.123 FIL</view>
				</view>
				<view class="item-info">
					<view class="item-name">扇区抵押</view>
					<view class="item-val">100961.12 FIL</view>
				</view>
				<view class="item-info">
					<view class="item-name">挖矿锁仓</view>
					<view class="item-val">15996.266 FIL</view>
				</view>
				<view class="item-info">
					<view class="item-name">全网占比</view>
					<view class="item-val">0.15%</view>
				</view>
				<view class="item-info">
					<view class="item-name">全网排名</view>
					<view class="item-val">142</view>
				</view>
				<view class="item-info">
					<view class="item-name">原值算力</view>
					<view class="item-val">10.23 PiiB</view>
				</view>
				<view class="item-info">
					<view class="item-name">累计出块份数</view>
					<view class="item-val">5554</view>
				</view>
				<view class="item-info">
					<view class="item-name">累计出块奖励</view>
					<view class="item-val">125236.08 FIL</view>
				</view>
				<view class="item-info">
					<view class="item-name">扇区大小</view>
					<view class="item-val">32.0GiB</view>
				</view>
			</view>
			<view class="kg-item">
				<view class="item-na">
					矿工号：<text>f020742</text>
				</view>
				<view class="item-info">
					<view class="item-name">账户余额</view>
					<view class="item-val">152415.2 FIL</view>
				</view>
				<view class="item-info">
					<view class="item-name">可用余额</view>
					<view class="item-val">1725.123 FIL</view>
				</view>
				<view class="item-info">
					<view class="item-name">扇区抵押</view>
					<view class="item-val">100961.12 FIL</view>
				</view>
				<view class="item-info">
					<view class="item-name">挖矿锁仓</view>
					<view class="item-val">15996.266 FIL</view>
				</view>
				<view class="item-info">
					<view class="item-name">全网占比</view>
					<view class="item-val">0.15%</view>
				</view>
				<view class="item-info">
					<view class="item-name">全网排名</view>
					<view class="item-val">142</view>
				</view>
				<view class="item-info">
					<view class="item-name">原值算力</view>
					<view class="item-val">10.23 PiiB</view>
				</view>
				<view class="item-info">
					<view class="item-name">累计出块份数</view>
					<view class="item-val">5554</view>
				</view>
				<view class="item-info">
					<view class="item-name">累计出块奖励</view>
					<view class="item-val">125236.08 FIL</view>
				</view>
				<view class="item-info">
					<view class="item-name">扇区大小</view>
					<view class="item-val">32.0GiB</view>
				</view>
			</view>
		</view>
		<view class="list-box flex">
			<image src="../../static/img/img45.png"></image>
			<image src="../../static/img/img46.png"></image>
		</view>
	</view>
</template>
<script>
import { interceptor } from '@/utils/loginUtils';
import { loadIndexs,moneyType } from '@/api/index.js';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			swiperCurrent: 0,
			banner: [],
			list:''
		};
	},
	computed: {
		...mapState(['loginInterceptor','hasLogin']),
	},
	onLoad: function(option) {
		if (option.spread) {
			// 存储其他邀请人
			uni.setStorageSync('spread', option.spread);
		}
	},
	onShow: function() {
		// 判断是否强制登录
		if (this.loginInterceptor && !this.hasLogin) {
			// 登录拦截
			interceptor();
		}else{
			this.loadData();
			this.moneyType();
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		this.loadData();
		this.moneyType();
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		// 请求载入数据
		async loadData() {
			let obj = this;
			loadIndexs({}).then(({ data }) => {
			   obj.banner = data.banner;
			});
		},
		moneyType(){
			let obj = this;
			moneyType({index:1}).then(({ data }) => {
			   obj.list = data;
			   console.log('list-----',obj.list)
			});
		},
		/**
		 * 统一跳转接口,拦截未登录路由
		 * navigator标签现在默认没有转场动画，所以用view
		 */
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		//轮播图
		swiperChange(e) {
			let index = e.detail.current;
			this.swiperCurrent = index;
		},
	}
};
</script>

<style lang="scss">
page {
	min-height: 100%;
	background-color: #ffffff;
	.container {
		width: 100%;
		padding: 25rpx 40rpx;
	}
}
.tiele-index{
	font-weight: 500;
	font-size: 50rpx;
	padding: 15% 0rpx 30rpx 0rpx;
}
.top-head {
	position: fixed;
	top: 0;
	z-index: 99;
	width: 100%;
	background-color: #272f41;
	padding: 15rpx 35rpx;
	color: #edc959;
	image {
		width: 80rpx;
		height: 80rpx;
	}
	.top-name {
		padding-left: 15rpx;
	}
}
//轮播图
.swiper {
	width: 100%;
	display: flex;
	justify-content: center;
	border-radius: 15rpx;
	.swiper-box {
		width: 100%;
		height: 335rpx;
		overflow: hidden;
		// box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
		//兼容ios，微信小程序
		border-radius: 15rpx;
		position: relative;
		z-index: 1;
		swiper {
			width: 100%;
			height: 100%;
			swiper-item {
				image {
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
				}
			}
		}
		.indicator {
			position: absolute;
			bottom: 20upx;
			left: 20upx;
			background-color: rgba(255, 255, 255, 0.4);
			width: 150upx;
			height: 5upx;
			border-radius: 3upx;
			overflow: hidden;
			display: flex;
			.dots {
				width: 0upx;
				background-color: rgba(255, 255, 255, 1);
				transition: all 0.3s ease-out;
				&.on {
					width: (100%/3);
				}
			}
		}
	}
}
.notice-box{
	.text-right {
		text-align: right;
	}
	padding: 40rpx 0rpx;
	.title {
		font-size: 28rpx;
		padding-bottom: 19rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
		position: relative;
		left: -13rpx;
	}
	.info-box {
		width: 678rpx;
		height: 282rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border: 2px solid #5771DF;
		border-radius: 5rpx;
		padding: 15rpx 22rpx 25rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		// line-height: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		// justify-content: ;
		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.top-left {
				font-size: 63rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #5771DF;
			}
			.top-right {
				text-align: right;
				.top-right-bottom {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #5771DF;
				}
			}
		}
		.middle {
			display: flex;
			justify-content: space-between;
			.middle-item {
				display: flex;
				flex-direction: column;
				.item-val {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #5771DF;
				}
			}
		}
		.bottom {
			display: flex;
			justify-content: space-between;
			.item-val {
				display: flex;
				// justify-content: ;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #5771DF;
			}
		}
	}
	.ad {
		display: block;
		margin: 0 auto;
		width: 678rpx;
		height: 162rpx;
	}
	.tit {
		margin: 0 auto;
		margin-top: 31rpx;
		width: 678rpx;
		height: 59rpx;
		background: #5771DF;
		border-radius: 5rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 59rpx;
	}
	.kg-item {
		height: 100%;
		height: 610rpx;
		border-bottom: 1px solid #F3F4F6;
		padding: 40rpx 17rpx 0;
		line-height: 1;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		.item-na {
			padding-bottom: 39rpx;
			text {
				color:#FB3A2F;
			}
		}
		.item-info {
			padding-left: 16rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 1;
			padding-bottom: 24rpx;
			display: flex;
			justify-content: space-between;
		}
	}
	.notice-title{
		padding-bottom: 30rpx;
		image{
			width:35rpx;
			height: 32rpx;
		}
		.title{
			font-size: 34rpx;
			font-weight: bold;
			font-style: italic;
			color: #333333;
			margin-left: 15rpx;
		}
	}
	.notice-list{
		.notice-tpl{
			image{
				width: 99rpx;
				height: 113rpx;
			}
			.name{
				font-size: 26rpx;
				color: #5D616D;
			}
		}	
	}
}
.logo-img{
	width: 100%;
	height: 210rpx;
}
.quotation-list{
	display: flex;
	flex-wrap: wrap;
	.quotation-tpl{
		position: relative;
		padding: 22rpx 24rpx;
		height: 220rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		width:31%;
		margin-bottom: 4%;
		margin-right: 2%;
		// &:nth-child(2n + 1) {
		// 	margin-right: 2%;
		// }
		.tpl{
			z-index: 99;
			position: relative;
			font-size: 24rpx;
			padding-bottom: 10rpx;
		}
		.title{
			color: #333333;
			font-weight: bold;
			padding-bottom: 21rpx !important;
		}
		.num{
			color: #FB3A2F;
		}
		.money{
			color: #666666;
		}
		.tip-box{
			image{
				width: 100%;
				height: 118rpx;
				position: absolute;
				bottom: 0;
				left: 0;
			}
			.tip{
				position: relative;
				color: #FB3A2F;
				font-size: 26rpx;
				text-align: center;
				font-weight: 600;
				padding-top: 25rpx;
			}
			.grenn{
				color: #606266;
			}
			
		}
	}
}
.list-box{
	image{
		width: 326rpx;
		height: 210rpx;
	}
}
</style>