newyqg/pages/user/myjj.vue

<template>
	<view class="content">
		<view class="top-bg">
		</view>
		<view class="myjj-wrap">
			<view class="jj-tit">
				我的奖金(积分)
			</view>
			<view class="jj-val">
				0
			</view>
			<view class="jj-detail flex">
				<view class="jj-item">
					<view class="jj-detail-tit">
						冻结中
					</view>
					<view class="jj-detail-val">
						0
					</view>
				</view>
				<view class="jj-jg"></view>
				<view class="jj-item">
					<view class="jj-detail-tit">
						已释放
					</view>
					<view class="jj-detail-val">
						0
					</view>
				</view>
			</view>
		</view>
		<view class="jj-jl">
			<view class="jj-nav flex">
				<view class="jj-nav-item" v-for="(navItem,navIndex) in jjnav" :key="navItem.status"
					:class="{'action': navIndex == jjIndex}" @click="navClick(navIndex)">
					{{navItem.type}}
				</view>
			</view>
			<swiper :current="jjIndex" @change="swiperChange" class="jj-swiper" :style="{'height':height}">
				<swiper-item v-for="(sItem,sIndex) in jjnav" :key="sIndex">
					<scroll-view scroll-y="true" :style="{'height':height}" @scrolltolower="loadData()">
						<view v-for="(cItem,cIndex) in sItem.list" class="jj-jl-detail flex">
							<view class="jj-jl-detail-left">
								<view class="left-mask">
									推广奖励到账推广
								</view>
								<view class="left-time">
									2018-12-1  09:30
								</view>
							</view>
							<view class="jj-jl-detail-right">
								ddd
							</view>
						</view>
						<uni-load-more :status="sItem.loadingType"></uni-load-more>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: '', //页面剩余高度
				jjIndex: 0, //当前选择nav
				jjnav: [{
						status: 0,
						type: '收入',
						list: 10,
						loaded: false,
						loadingType: 'more',
						page: 1,
						limit: 10,
					},
					{
						status: 1,
						type: '支出',
						list: 5,
						loaded: false,
						loadingType: 'more',
						page: 1,
						limit: 10,
					}
				]
			}
		},
		onReady(res) {
			var obj = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.jj-swiper').boundingClientRect();
					query.exec(function(res) {
						obj.height = resu.windowHeight - res[0].top + 'px';
					});
				},
				fail: res => {}
			});
		},
		methods: {
			// 导航栏点击
			navClick(index) {
				this.jjIndex = index
				this.loadData('nav')
			},
			// swiper 切换
			swiperChange(e) {
				this.jjIndex = e.detail.current
			},
			loadData(type) {
				let obj = this
				let index = obj.jjIndex
				let navItem = obj.jjnav[index]
				// 判断是否是nav点击触发
				if (type == 'nav' && navItem.loaded) {
					return
				}
				// 判断是否加载中 或 无更多数据
				if (navItem.loadingType == 'loading' || navItem.loadingType == 'noMore') {
					return
				}
				navItem.loadingType = 'loading'
				// 获取数据

			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-bg {
		width: 750rpx;
		height: 480rpx;
		background: linear-gradient(-41deg, #FF6F30, #FFBE4C);
	}

	.myjj-wrap {
		text-align: center;
		width: 670rpx;
		height: 386rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 20rpx;
		margin: -324rpx auto 26rpx;
		padding: 60rpx 0 0;

		.jj-tit {

			font-size: 30rpx;
			font-weight: bold;
			color: #181818;
		}

		.jj-val {
			padding: 30rpx 0 60rpx;
			font-size: 48rpx;
			font-weight: bold;
			color: #181818;
		}

		.jj-detail {
			.jj-jg {
				width: 2rpx;
				height: 74rpx;
				background: #DCDFE6;
			}

			.jj-item {
				flex-grow: 1;

				.jj-detail-tit {
					font-size: 30rpx;
					font-weight: bold;
					color: #999999;
					padding-bottom: 33rpx;
				}

				.jj-detail-val {
					font-size: 30rpx;
					font-weight: bold;
					color: #181818;
				}
			}

		}
	}

	.jj-jl {
		background-color: #fff;

		.jj-nav {
			height: 85rpx;
			line-height: 85rpx;

			.jj-nav-item {
				text-align: center;
				flex-grow: 1;
			}

			.action {
				position: relative;

				&::after {
					content: '';
					width: 50rpx;
					height: 6rpx;
					background: #FE5B38;
					border-radius: 3rpx;
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto;
				}
			}
		}
	}

	.jj-jl-detail {
		width: 700rpx;
		padding: 30rpx 0 24rpx;
		border-bottom: 1px solid #F0F4F8;
		margin: auto;
		.jj-jl-detail-left {
			flex-grow: 1;
			.left-mask {
				font-size: 30rpx;
				font-weight: bold;
				color: #666666;
				padding-bottom: 10rpx;
			}
			.left-time {
				font-size: 26rpx;
				font-weight: 500;
				color: #AEAEAE;
			}
		}
		.jj-jl-detail-right {
			flex-shrink: 0;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FD3B39;
		}
	}
</style>