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-qr">
				<tki-qrcode
					:cid="cid"
					ref="qrcode"
					:val="val"
					:size="size"
					:unit="unit"
					:background="background"
					:foreground="foreground"
					:pdground="pdground"
					:iconSize="iconSize"
					:lv="lv"
					:onval="onval"
					:loadMake="loadMake"
					:usingComponents="usingComponents"
					@result="qrR"
				/>
			</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">
			查看推荐
		</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>
	</view>
</template>

<script>
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
	export default {
		data() {
			return {
				cid: 'tki-qrcode-canvas', //canvasId，页面存在多个二维码组件时需设置不同的ID
				size: 378, //生成的二维码大小
				unit: 'upx', //大小单位尺寸
				show: true,//默认使用组件中的image标签显示二维码
				val: '强儿、岚儿都是我儿', //要生成的内容
				background: '#ffffff', //二维码背景色
				foreground: '#333333', //二维码前景色
				pdground: '#333333', //二维码角标色
				icon: '', //二维码图标URL（必须是本地图片，网络图需要先下载至本地）
				iconSize: 40, //二维码图标大小
				lv: 3, //容错级别
				onval: true, //监听val值变化自动重新生成二维码
				loadMake: true, //组件初始化完成后自动生成二维码，val需要有值
				usingComponents: false, //是否使用了自定义组件模式（主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题）
				showLoading: false, //是否显示loading
				loadingText: '二维码生成中', //loading文字
				src: '', // 二维码生成后的图片地址或base64
				ratio: 1, //页面比例用于计算
				ctxSrc: '', //要显示的图片
				loading: true,//是否载入图片中
				canHeight: '',//画布高度
				canWeidth: '',//画布宽度
				navList: [
					{
						name: '直推业绩',
						page: 1,
						limit: 8,
						list: [
							{
								time: 2020-1-10,
								val: 100
							},
							{
								time: 2020-1-10,
								val: 100
							},
							{
								time: 2020-1-10,
								val: 100
							},
							{
								time: 2020-1-10,
								val: 100
							},
							{
								time: 2020-1-10,
								val: 100
							},
							{
								time: 2020-1-10,
								val: 100
							},
							{
								time: 2020-1-10,
								val: 100
							},
							{
								time: 2020-1-10,
								val: 100
							},
							{
								time: 2020-1-10,
								val: 100
							},
							{
								time: 2020-1-10,
								val: 100
							},
							{
								time: 2020-1-10,
								val: 100
							}
						],
						loaded: false,
						loadingType: 'more'
					},
					{
						name: '间推业绩',
						page: 1,
						limit: 8,
						list: [
							{
								time: 2020-1-10,
								val: 200
							},
							{
								time: 2020-1-10,
								val: 200
							},
							{
								time: 2020-1-10,
								val: 200
							}
						],
						loaded: false,
						loadingType: 'more'
					}
				],
				tabIndex: 0,
			}
		},
		methods: {
			qrR() {
				
			},
			opneYj() {
				this.$refs.yeji.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: 550rpx;
		}
		.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>