myjj

pages/user/myjj.vue

@@ -2,26 +2,247 @@
 	<view class="content">
 		<view class="top-bg">
 		</view>
-		<view class="">
-			
+		<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>
-</template>
-
+		<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
+			},
+			// 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>
-
+	}
+</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>