property/user_ui/pages/health/index.vue

<template>
	<view :style="'padding-top:'+nvaHeight+'px;'">
		<view class="navbox">
			<uni-nav-bar color="#ffffff" :background-color="backgroundColor" :border="false" statusBar='true'
				fixed="true">
			</uni-nav-bar>
		</view>
		<!-- 主体 -->
		<image :src="navbg" class="navbg"></image>
		<view class="wymain">
			<view class="plr12">
				<view class="htop">
					<view class="flexcj plr15 mb6">
						<view class="tit">健康档案</view>
						<view class="more" @click="getMoreFn">查看更多</view>
					</view>
					<view class="txt plr15 mb12">点击查看更多，关爱家人健康~</view>
					<view class="hswiper">
						<view class="hslist ">
							<image :src="hbga" class="imga"></image>
							<view class="hsbox flexat">
								<view class="line"></view>
								<view class="flex1">
									<view class="name flexat">袁玥<view>业主</view></view>
									<view class="txt">38岁/B型</view>
									<view class="txt">165cm/67kg</view>
								</view>	
							</view>
						</view>
						<view class="hslist bgb">
							<image :src="hbgb" class="imga"></image>
							<view class="hsbox flexat">
								<view class="line"></view>
								<view class="flex1">
									<view class="name flexat">袁玥<view>丈夫</view></view>
									<view class="txt">38岁/B型</view>
									<view class="txt">165cm/67kg</view>
								</view>	
							</view>
						</view>
					</view>
				</view>
				<image :src="hbgc" class="moreimg"></image>
			</view>
			
			<view class="contbox">
				<view class="cont flexc mb9">
					<view class="line"></view>
					<view class="flex1 tit">健康资讯</view>
					<view class="morebox">
						<view class="flexc">更多<image :src="more"></image>
						</view>
					</view>
				</view>
				<view class="hlists">
					<box-list :datainfo="list" :wtdt="wtdt" type='health'></box-list>
				</view>
			</view>
		</view>
		<loading></loading>
		<footers v-if="isfootflag" :footerindex="footerindex"></footers>
	</view>
</template>

<script>
	import footers from '@/components/footer/footer.vue'
	import boxList from "@/components/box/list.vue"
	export default {
		components: {
			footers,
			boxList
		},
		data() {
			return {
				footerindex: 'health',
				isfootflag: true,
				nvaHeight: 44,
				// activeColor:'#A7CDF9',
				// nactiveColor:'#DADADA',
				backgroundColor: "transparent",
				navbg: require("@/static/images/health/hbg.png"),
				hbga:require("@/static/images/health/hbga.png"),
				hbgb:require("@/static/images/health/hbgb.png"),
				hbgc:require("@/static/images/health/hbgc.png"),
				more: require("@/static/images/health/more.png"),
				zhanflag: true,
				pageSize: 10,
				pageNum: 1,
				reachflag: true,
				wtdt: '',
				list: [{
					noticeTitle: "您有1条报修信息，请及时查看处理！",
					num: '4'
				}, {
					noticeTitle: "您有1条报修信息，请及时查看处理！",
					num: '12'
				}],
			}
		},
		onPageScroll(e) {
			var scrollTop = Number(e.scrollTop);
			if (scrollTop > 0) {
				this.backgroundColor = '#48CC9A'
			} else {
				this.backgroundColor = 'transparent'
			}
		},
		// 上拉触底加载更多触发事件
		onReachBottom() {
			if (this.reachflag) {
				this.pageNum++
				this.getDataFn()
			}
		},
		onLoad: function() {
			uni.getSystemInfo({
				success: (e) => {
					this.nvaHeight = Number(e.statusBarHeight) + 44;
				}
			})
		},
		methods: {
			getMoreFn() {
				this.$tab.navigateTo(`/health/pages/health/detail`)
			},
			getDataFn() {
				return
				var params = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
				}
				params.noticeType = this.tabidx
				getNoticeList(params).then(res => {
					if (res.code == 200) {
						if (res.rows.length < this.pageSize) {
							this.reachflag = false
							this.wtdt = '到底了~';
						} else {
							var num = parseInt(res.rows.length) + parseInt(this.pageSize) * parseInt(this.pageNum -
								1)
							if (num < res.total) {
								this.reachflag = true
								this.wtdt = ''
							} else {
								this.reachflag = false
								this.wtdt = '到底了~';
							}
						}
						if (this.pageNum == 1) {
							this.list = res.rows;
						} else {
							this.list = this.list.concat(res.rows)
						}
					} else {
						this.$toast(res.msg)
					}
				})

			},

		}
	}
</script>
<style>
	page {
		background: #F4F6F8;
	}
</style>
<style lang="scss" scoped>
.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;	}
.navbg{width: 100%;height: 688rpx;}
.wymain{z-index: 2;position: relative;padding-top: 244rpx;}
.htop{background: #FFFFFF;padding: 22rpx 0 32rpx;
border-radius: 20rpx;margin-bottom: 28rpx;
	.tit{font-weight: bold;font-size: 32rpx;color: #272727;}
	.more{font-weight: 500;font-size: 24rpx;color: #AAAAAA;}
	.txt{font-weight: 500;font-size: 24rpx;color: #666666;}
	.hswiper{flex-wrap: nowrap;display: flex;align-items: center;overflow: auto;padding-left:32rpx;padding-right: 8rpx;
		.hslist{margin-right: 24rpx;width: 384rpx;height: 174rpx;position: relative;
			.imga{width: 384rpx;height: 174rpx;}
			.hsbox{position: absolute;left: 0;top: 0;right: 0;bottom: 0;padding:26rpx 24rpx 0rpx;
			.line{width: 8rpx;height: 30rpx;border-radius: 4rpx;margin-right: 16rpx;flex: 0 0 auto;margin-top: 6rpx;background: #FF9E00;
				// &.bga{}
				// &.bgb{background: #45CB99;}
			}
			.name{font-weight: bold;font-size: 32rpx;color: #FFFFFF;margin-bottom: 12rpx;
				view{font-weight: bold;border-radius: 16rpx;border: 2rpx solid #FFFFFF;color: #FFFFFF;
font-size: 22rpx;margin-left: 18rpx;padding: 0 8rpx;margin-top: 4rpx;
				}
			}
			.txt{font-weight: 500;font-size: 24rpx;color: #FFFFFF;line-height: 36rpx;}
			}
			&.bgb{
				.line{background: #45CB99;}
				.name{color: #272727;
					view{border: 2rpx solid #FF9E00;color: #FF9E00;}
				}
				.txt{color: #666666;}
			}
		}
	}
}
.moreimg{width: 100%;height: 150rpx;margin-bottom: 34rpx;}


.hlists{margin: 0 24rpx 20rpx;
	background: #FFFFFF;padding: 0 12rpx;border-radius: 20rpx;
}
.contbox{padding-top: 6rpx;
	.cont{margin-bottom: 12rpx;position: relative;
		.line{width: 14rpx;height: 48rpx;margin-right: 22rpx;border-radius: 0 24rpx 24rpx 0;background-color: #45CB99;}
		.tit{font-size: 15px;color: #272727;font-weight: bold;}
		.morebox{padding-right: 24rpx;
			image{width: 18rpx;height: 16rpx;margin-left: 16rpx;}
			view{font-size: 24rpx;color: #AAAAAA;}
		}
	}

}
</style>