hx/pages/index/share.vue

*-+
<template>
	<view class="content">
		<view class="box-top">
			<view class="bg3">
				<image src="../../static/index/img14.png" mode=""></image>
			</view>
			<view class="bg3 two">
				<image src="../../static/index/img08.png" mode=""></image>
			</view>
		</view>
		<view class="top-tit">
			邀请好友
			变成壕友
		</view>
		<view class="center-wrap">
			<image src="../../static/img/tj-bg.png" mode="" class="tj-bg"></image>
			<view class="center-tit">
				邀请地址
			</view>
			<view class="tj-jl flex" @click="opneYj">
				<text>业</text>
				<text>绩</text>
			</view>
			<view class="tj-lj-tit">
				【链接地址】
			</view>
			<view class="tj-lj flex">
				<view class="lj-tit">
					邀请链接：
				</view>
				<view class="lj-info clamp">
					山上有座庙，庙里有个老和尚和小和尚
				</view>
				<view class="lj-copy">
					复制链接
				</view>
			</view>
		</view>
		<view class="tj-look" @click="button()">
			查看推荐
		</view>
		<uni-popup ref="yeji" type="center">
			<view class="yj-wrap">
				<view class="yj-tit">
					收益明细
				</view>
				<image src="../../static/img/yj-bg.png" mode="" class="yj-logo"></image>
				<view class="yj-hj flex">
					<view class="yj-hj-item">
						<view class="hj-item-val">
							0
						</view>
						<view class="hj-item-name">
							KGC总业绩
						</view>
					</view>
					<view class="yj-hj-item">
						<view class="hj-item-val">
							0
						</view>
						<view class="hj-item-name">
							FL总业绩
						</view>
					</view>
				</view>
				<view class="yj-nav flex">
					<view class="nav-item" v-for="(navitem,index) in navList" :class="{'active': index == tabIndex}"
						@click="navClick(index)">
						{{navitem.name}}
					</view>
				</view>
				<view class="yj-info-wrap">
					<view class="yj-info-tit flex">
						<view class="">
							时间
						</view>
						<view class="">
							金额(KGC)
						</view>
					</view>
					<swiper class="yj-info-scroll" :current="tabIndex" duration="300">
						<swiper-item v-for="item in navList">
							<scroll-view scroll-y="true" class="yj-info-scroll" @scrolltolower="loadMore">
								<view v-for="itemt in item.list" class="">
									<view class="flex yj-info">
										<view class="">
											{{itemt.time}}
										</view>
										<view class="">
											{{itemt.val}}
										</view>
									</view>
								</view>
								<uni-load-more :status="item.loadingType"></uni-load-more>
							</scroll-view>
						</swiper-item>
					</swiper>
				</view>
			</view>

		</uni-popup>
		<uni-popup  ref="yeji1" type="center">
			<view class="yj-wrap">
				<view class="yj-tit">
					我的推荐
				</view>
				<image src="../../static/img/yj-bg.png" mode="" class="yj-logo"></image>
				<view class="yj-info-wrap">
					<view class="yj-info-tit flex">
						<view class="">
							钱包地址
						</view>
						<view class="">
							时间
						</view>
					</view>
					<swiper class="yj-info-scroll" :current="tabIndex" duration="300">
						<swiper-item v-for="item in navList">
							<scroll-view scroll-y="true" class="yj-info-scroll" @scrolltolower="loadMore">
								<view v-for="itemt in item.list" class="">
									<view class="flex yj-info">
										<view class="">
											{{itemt.time}}
										</view>
										<view class="">
											{{itemt.val}}
										</view>
									</view>
								</view>
								<uni-load-more :status="item.loadingType"></uni-load-more>
							</scroll-view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
	export default {
		data() {
			return {
				navList: [{
						name: '直推业绩',
						page: 1,
						limit: 8,
						list: [],
						loaded: false,
						loadingType: 'more'
					},
					{
						name: '间推业绩',
						page: 1,
						limit: 8,
						list: [],
						loaded: false,
						loadingType: 'more'
					}
				],
				tabIndex: 0,
			}
		},
		methods: {
			qrR() {

			},
			opneYj() {
				this.$refs.yeji.open()
			},
			button(){
						this.$refs.yeji1.open()
			},
			// 点击切换
			navClick(index) {
				this.tabIndex = index
			},
			// 下滑到底加载更多
			loadMore() {
				let obj = this
				let index = obj.tabIndex
				let navItem = obj.navList[index]
				if (navItem.loadingType == 'noMore' || navItem.loadingType == 'loading') {
					return
				}
				navItem.loadingType = 'loading'
				console.log('jiaz')
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #00050f;
	}

	.top-tit {
		text-align: center;
		font-size: 160rpx;
		font-family: zihun164hao-fangyuehei;
		font-weight: 400;
		font-style: italic;
		color: #08EDE7;
		line-height: 168rpx;
		margin-bottom: 62rpx;
	}

	.box-top {
		display: flex;
		padding: 36rpx 41rpx 72rpx 41rpx;

		.bg3 {
			width: 56rpx;
			height: 62rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.two {
			margin-left: 36rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.center-wrap {
		width: 680rpx;
		height: 891rpx;
		margin: auto;
		position: relative;

		.tj-bg {
			position: absolute;
			width: 680rpx;
			height: 891rpx;
		}

		.center-tit {
			width: 680rpx;
			height: 102rpx;
			line-height: 102rpx;
			text-align: center;
			font-size: 44rpx;
			font-family: zihun100hao-fangfangxianfengti;
			font-weight: 900;
			color: #08EDE7;
			position: absolute;
			top: 0;
		}

		.tj-jl {
			text-align: center;
			width: 61rpx;
			height: 110rpx;
			background: #08EDE7;
			border-radius: 10rpx 0px 0px 10rpx;
			position: absolute;
			right: 0;
			top: 170rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #001337;
			// line-height: 40rpx;
			flex-direction: column;
			justify-content: center;
		}

		.tj-qr {
			width: 383rpx;
			height: 383rpx;
			background: #FFFFFF;
			border: 5rpx solid #08EDE7;
			position: absolute;
			right: 0;
			left: 0;
			top: 204rpx;
			margin: auto;
		}

		.tj-lj-tit {
			width: 680rpx;
			text-align: center;
			font-size: 31rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 103px;
			position: absolute;
			top: 560rpx;
		}

		.tj-lj {
			width: 636rpx;
			height: 67rpx;
			background: #233B75;
			border: 2rpx solid #08EDE7;
			border-radius: 10rpx;
			position: absolute;
			bottom: 124rpx;
			right: 0;
			left: 0;
			margin: auto;

			.lj-tit {
				width: 148rpx;
				flex-shrink: 0;
				text-align: right;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 67rpx;
			}

			.lj-info {
				width: 148rpx;
				flex-grow: 1;
				text-align: right;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 67rpx;
			}

			.lj-copy {
				flex-shrink: 0;
				width: 148rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #08EDE7;
				line-height: 67rpx;
				// opacity: 0.75;
			}
		}
	}

	.tj-look {
		width: 450rpx;
		height: 75rpx;
		background: linear-gradient(0deg, #FF7206, #FFDD7E);
		box-shadow: 0px 2rpx 8rpx 0px rgba(207, 126, 57, 0.7);
		border-radius: 38rpx;
		margin: 55rpx auto 0;
		font-size: 36rpx;
		font-family: zihun164hao-fangyuehei;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 75rpx;
		text-align: center;
	}

	.yj-wrap {
		width: 680rpx;
		height: 854rpx;
		background: linear-gradient(180deg, #254FAB 0%, #230A8E 100%);
		border-radius: 20rpx;

		.yj-logo {
			display: block;
			width: 326rpx;
			height: 16rpx;
			margin: auto;
			border-radius: 20px;
		}

		.yj-tit {
			width: 100%;
			padding-top: 60rpx;
			padding-bottom: 15rpx;
			text-align: center;
			font-size: 46rpx;
			font-family: zihun100hao-fangfangxianfengti;
			font-weight: bold;
			color: #FFFFFF;
			// line-height: 38px;
		}

		.yj-hj {
			width: 653rpx;
			height: 147rpx;
			background: #233B75;
			border: 2rpx solid #08EDE7;
			border-radius: 10rpx;
			margin: 40rpx auto;

			.yj-hj-item {
				width: 50%;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 38rpx;

				// opacity: 0.7;
				.hj-item-val {
					font-size: 41rpx;
					padding-bottom: 10rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #08EDE7;
					line-height: 38rpx;
				}
			}
		}

		.yj-nav {
			width: 582rpx;
			border-bottom: 2rpx solid #fff;
			margin: auto;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #97a1d2;
			line-height: 38rpx;

			.nav-item {
				padding: 20rpx 40rpx;
			}

			.active {
				color: #fff;
			}
		}
	}

	.yj-info-wrap {
		height: 362rpx;
		width: 582rpx;
		margin: auto;

		// background-color: #fff;
		.yj-info-tit {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 38rpx;
			justify-content: space-between;
			padding: 10rpx 0;
		}

		.yj-info-scroll {
			// touch-action: none;
			width: 582rpx;
			height: 320rpx;

			// background-color: red;
			.yj-info {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 38rpx;
			}
		}
	}
</style>