NFT/pages/index/node.vue

<template>
	<view class="center">
		<view class="tab flex">
			<view class="left flex" @click="backIndex"><u-icon name="arrow-left" :size="40"></u-icon></view>
			<u-tabs-swiper
				class="tabBox"
				ref="uTabs"
				:height="70"
				:show-bar="false"
				active-color="#44969D"
				inactive-color="#6D7C88"
				:list="tabList"
				:current="current"
				@change="tabsChange"
				:is-scroll="false"
			></u-tabs-swiper>
		</view>
		<swiper class="tabSwiper" :current="current" @animationfinish="transition">
			<swiper-item class="swiper-item">
				<scroll-view class="boxItem" scroll-y @scrolltolower="onreachBottom">
					<view class="item" v-for="ls in tabList[0].list">
						<view class="flex title">
							<view class="tip"></view>
							<view class="name">{{ ls.name }}</view>
						</view>
						<view class="itemConetnt">
							<view class="ls">
								认购份额：
								<text class="text">{{ ls.num + ls.type }}</text>
							</view>
							<view class="ls">
								认
								<text class="textInterval "></text>
								购
								<text class="textInterval "></text>
								价：
								<text class="text">1{{ ls.moneyType + '=' + ls.ratio + ls.type }}</text>
							</view>
							<view class="ls">
								认购名额：
								<text class="text">{{ ls.limited }}</text>
							</view>
							<view class="ls">
								认购总额：
								<text class="text">{{ ls.allMoney + ls.moneyType }}</text>
							</view>
						</view>
						<view class="lsButtom" @click="buy()">立即认购</view>
					</view>
					<u-loadmore :status="tabList[0].loding"></u-loadmore>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y @scrolltolower="onreachBottom">
					<view class="boxItem flex" style=" flex-wrap: wrap;">
						<view class="item1" v-for="ls in tabList[1].list">
							<view class="rightTip">进行中</view>
							<view class="ls1">
								<view class="name1">{{ ls.name }}</view>
								<view class="title1">{{ ls.mask }}</view>
								<view class="title1">
									认购份额:{{ ls.allMoney + ls.type }}
									<text></text>
								</view>
							</view>
						</view>
					</view>
					<u-loadmore :status="tabList[1].loding"></u-loadmore>
				</scroll-view>
			</swiper-item>
		</swiper>
		<u-popup v-model="show" mode="center" width="548rpx" border-radius="14">
			<view class="psw-wrapper">
				<view class="psw-title">请输入支付密码</view>
				<input type="password" v-model="password" class="psw-ipt" />
				<view class="psw-btn">
					<text @click="cancel">取消</text>
					<text class="psw-qd" @click="pswQd">确定</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
export default {
	data() {
		return {
			show: false,
			password: '',
			current: 0, //当前选中的标签
			tabList: [
				{
					name: '节点认购',
					list: [
						{
							name: '节点认购第一期',
							num: 1000, //认购份额
							type: 'LALA', //认购货币类型
							ratio: 10, //认购比例
							limited: 20, //限购名额
							allMoney: 20, //认购总额
							moneyType: 'USDT' //兑换比例金额
						}
					],
					pages: 1,
					limit: 10,
					loding: 'loadmore' //loading加载中 nomore没有数据
				},
				{
					name: '我的认购',
					pages: 1,
					limit: 10,
					list: [
						{
							name: '节点认购第一期',
							num: 1000, //认购份额
							type: 'LALA', //认购货币类型
							allMoney: 20, //认购总额
							mask: '当前第六关'
						},
						{
							name: '节点认购第一期',
							num: 1000, //认购份额
							type: 'LALA', //认购货币类型
							allMoney: 20, //认购总额
							mask: '当前第六关'
						},
						{
							name: '节点认购第一期',
							num: 1000, //认购份额
							type: 'LALA', //认购货币类型
							allMoney: 20, //认购总额
							mask: '当前第六关'
						},
						{
							name: '节点认购第一期',
							num: 1000, //认购份额
							type: 'LALA', //认购货币类型
							allMoney: 20, //认购总额
							mask: '当前第六关'
						}
					],
					loding: 'loadmore' //loading加载中 nomore没有数据
				}
			]
		};
	},
	//页面加载即刻发生
	onload() {},
	methods: {
		backIndex() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		// 内容框切换事件
		transition(e) {
			console.log(e);
			this.current = e.detail.current;
		},
		// tab切换事件
		tabsChange(e) {
			this.current = e;
		},
		// 下拉到底部加载事件
		onreachBottom(e) {
			console.log(e);
		},
		buy() {
			this.show = true;
		},
		cancel() {
			this.show = false;
		}
	}
};
</script>
<style lang="scss">
page {
	height: 100%;
}
.tabBox {
	flex-grow: 1;
}
.center {
	height: 0;
	min-height: 100%;
}
.tab {
	background-color: #ffffff;
	align-items: stretch;
	.left {
		padding-left: 10rpx;
		padding-right: 20rpx;
	}
}
.tabSwiper {
	height: calc(100% - 70rpx);
	.swiper-item {
		padding: 30rpx;
		.boxItem {
			.item {
				background-color: #ffffff;
				line-height: 1;
				padding: 30rpx;
				margin-bottom: 30rpx;
				.title {
					justify-content: flex-start;
					padding-bottom: 30rpx;
					align-items: stretch;
					.tip {
						width: 7rpx;
						border-radius: 99rpx;
						background-color: $base-color;
					}
					.name {
						margin-left: 20rpx;
						font-size: 30rpx;
						font-weight: bold;
						color: $font-color-dark;
					}
				}
				.itemConetnt {
					padding: 20rpx 0;
					font-weight: bold;
					font-size: 28rpx;
					border-bottom: 1px solid $border-color-light;
					border-top: 1px solid $border-color-light;
					.ls {
						padding: 10rpx 0;
						color: $font-color-light;
						.textInterval {
							width: 0.5em;
						}
						.text {
							color: $font-color-dark;
						}
					}
				}
				.lsButtom {
					font-size: 30rpx;
					background-image: $bg-green-gradual;
					text-align: center;
					color: $font-color-white;
					padding: 30rpx 0;
					border-radius: 99rpx;
					margin: 20rpx 30rpx 0rpx 30rpx;
				}
			}
			.item1:nth-child(odd) {
				margin-right: 30rpx;
			}
			.item1 {
				line-height: 1;
				background: url(../../static/img/rengouBg.png) no-repeat;
				background-position: right bottom;
				background-size: 140rpx 115rpx;
				flex-grow: 1;
				min-width: 40%;
				margin-bottom: 30rpx;
				border-radius: 15rpx;
				background-color: #ffffff;
				border: 1px solid $uni-color-primary;
				padding: 15rpx 10rpx 35rpx 30rpx;
				.ls1 {
					font-weight: bold;
					.name1 {
						color: $font-color-dark;
						font-size: $font-base;
						margin-top: -10rpx;
					}
					.title1 {
						margin-top: 15rpx;
						color: $font-color-light;
						font-size: 22rpx;
					}
				}
				.rightTip {
					color: $uni-color-primary;
					text-align: right;
					font-size: 24rpx;
				}
			}
		}
	}
}
.psw-wrapper {
		width: 548rpx;
		height: 344rpx;
		background-color: #FFFFFF;
		.psw-title {
			width: 100%;
			font-size: 35rpx;
			padding: 43rpx 0 49rpx;
			text-align: center;
			font-weight: 800;
		}
		.psw-ipt {
			display: block;
			background-color: #dce3ed;
			height: 90rpx;
			width: 464rpx;
			padding-left: 30rpx;
			margin: 0 auto;
			font-size: 80rpx;
		}
		.psw-btn text{
			display: inline-block;
			text-align: center;
			width: 50%;
			padding-top: 29rpx;
			font-size: 35rpx;
		}
		.psw-qd {
			color:#45969B;
		}
	}

</style>