179crm_user_app/pages_health/healthfiles.vue

<template>
	<view class="hb column hidden container">
		<image class="bg" src="/static/images/health/jkda_top_bg.png" mode="widthFix"></image>
		<view :style="{height: statusBarHeight,background: bgColor }"></view>
		<u-navbar
			title="健康档案" titleStyle="font-weight: bold;"
			@rightClick="rightClick"
			:autoBack="true"
			:bg-color="bgColor"
		>
		</u-navbar>
		<scroll-view class="content" :scroll-y="true">
			<view class="justify-between align-center bg-white radius12 p28">
				<view class="justify-start align-center">
					<image :src="maleurl" class="w140 h140"></image>
					<view class="ml30">
						<view class="bold fs32 mb12">张小安</view>
						<view class="justify-start align-center fs24">
							<text class="orangebox">女</text>
							<text class="orangebox ml12">56岁</text>
						</view>
					</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="fs36 bold mt20">健康数据</view>
			<view class="health-monitoring">
				<view class="health-monitoring-item" v-for="(item,index) in indexInfo" :key="index"
					@tap="handleMonitoring(item)">
					<view class="health-monitoring-title">
						<view>
							<view class="health-monitoring-maintitle bold">{{item.type.type}}</view>
							<view>{{item.type.title}}</view>
						</view>
						<image :src="item.type.icon" mode="aspectFill"></image>
					</view>
					<view class="health-bmi mt50" v-if="index==0">
						<view class="justify-between align-center mb12">
							<view class="justify-start align-center ">
								<text class="color-text2 fs24 mr20">身高</text>
								<view >{{item.height||'--'}}</view>
							</view>
							<image src="/static/images/health/services_edit_icon.png" class="w32 h32"></image>
						</view>
						<view class="justify-between align-center">
							<view class="justify-start align-center ">
								<text class="color-text2 fs24 mr20">体重</text>
								<view >{{item.weight||'--'}}</view>
							</view>
							<image src="/static/images/health/services_edit_icon.png" class="w32 h32"></image>
						</view>
					</view>
					<view v-else>
						<view class="health-monitoring-res resnum">{{item.data || '--'}}</view>
						<view class="health-monitoring-time">{{item.date && item.date.substring(5,16)}}</view>
					</view>
				</view>
			</view>
			<view class="fs36 bold mtb20">健康史</view>
			<view class="cardbox">
				<view class="health-item" v-for="(item,index) in healthRecordsList" :key="index" @click="handleEditHealth(item,1)">
					<image class="health-bgicon" :src="item.bgicon"></image>
					<view class="health-item-info">
						<view class="cardbox-maintitle" style="margin-bottom: 0;">{{item.title}}</view>
						<view class="text-overflow" style="margin-top: 20rpx;">{{item.desc || "尚未记录"}}</view>
					</view>
				</view>
			</view>
			<view class="h80"></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight:'',
				top:0,
				famaleurl:"/static/images/health/female_profile.png",
				maleurl:"/static/images/health/my_heads.png",
				indexInfo: [
					{
						data: "",
						date: "",
						height:'',
						weight:'',
						type: {
							type: "BMI 24.8",
							title: "肥胖",
							icon:"/static/images/health/BMI_icon.png"
						}
					},{
						data: "",
						date: "",
						type: {
							type: "腰围",
							title: "腰围",
							icon:"/static/images/health/waist_circumference_icon.png"
						}
					},{
						data: "",
						date: "",
						type: {
							type: "臀围",
							title: "臀围",
							icon:"/static/images/health/hip_circumference_icon.png"
						}
					},
					{
						data: "",
						date: "",
						type: {
							type: "血糖",
							title: "血糖健康监测",
							icon: "/static/images/health/blood_sugar_icon.png"
						}
					},
					{
						data: "",
						date: "",
						type: {
							type: "血压",
							title: "血压健康监测",
							icon:"/static/images/health/blood_pressure_icon.png"
						}
					},
					{
						data: "",
						date: "",
						type: {
							type: "尿酸",
							title: "尿酸健康监测",
							icon:"/static/images/health/uric_acid_icon.png"
						}
					},
				],
				healthRecordsList: [
					{
						title: '疾病史',
						type: "healthHistory",
						desc: '',
						bgicon: "/static/images/health/jbs_icon.png",
					}, {
						title: '症状史',
						type: "symptomHistory",
						desc: '',
						bgicon: "/static/images/health/zzs_icon.png",
					}
				],
			}
		},
		computed: {
			// 计算属性的 getter
			bgColor: function() {
				var top=this.top/30;
				return 'rgba(11,179,242, ' + top + ')';
			},
		},
		onLoad() {
		    // 获取系统信息
		    const sys = uni.getSystemInfoSync()
		    this.statusBarHeight = sys.statusBarHeight+'px'
		},
		onUnload() { //普通页面在 onUnload 生命周期中执行
		    uni.$emit('stop')
		},
		onHide() { //tabBar页面在onHide生命周期中执行
		    uni.$emit('stop')
		},
		onPageScroll(e) {
		  	//console.log(e)
		  	this.top=e.scrollTop;
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.container{
	position: relative;
	.bg{
		width: 100%;
		height: 380rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
}
.content{
	padding-top: calc(var(--status-bar-height) + 140rpx) !important;
	  height: 100vh;
	  box-sizing: border-box;
	  width: 100%;
	  padding: 20rpx;
}
.orangebox{
	border-radius: 24rpx;
	border: 1rpx solid #FFA599;
	color: #FF4B33;
	font-size: 24rpx;
	padding: 4rpx 20rpx;
}
.health-monitoring {
	// @include u-flex(row, center, flex-start);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	// gap: 16rpx;
	margin-top: 30rpx;
	margin-bottom: -16rpx;
	margin-right: -16rpx;
	&-item {
		width: 343rpx;
		min-height: 264rpx;
		margin: 0 16rpx 16rpx 0;
		overflow: hidden;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 24rpx 34rpx 24rpx 24rpx;
		box-sizing: border-box;
	}

	&-maintitle {
		margin-bottom: 4rpx;
		font-size: 30rpx;
		color: #333333;
	}

	&-title {
		// @include u-flex(row, center, space-between);
		display: flex;
		justify-content: space-between;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;

		image {
			width: 72rpx;
			height: 72rpx;
			flex-shrink: 0;
		}
	}

	.resnum {
		font-family: DIN, DIN;
		font-weight: 500;
		font-size: 64rpx;
	}

	&-res {
		height: 78rpx;
		margin: 20rpx 0 6rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 48rpx;
		color: #333333;
	}

	&-time {
		font-weight: 400;
		font-size: 22rpx;
		color: #999999;
	}
}
.cardbox {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16rpx 14rpx;
	&-maintitle {
		margin-bottom: 4rpx;
		font-weight: 600;
		font-size: 30rpx;
		color: #333333;
	}
}
.health-item {
	width: 343rpx;
	height: 224rpx;
	padding: 24rpx;
	box-sizing: border-box;
	background: #FFFFFF;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	overflow: hidden;
	position: relative;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #999999;
}
.health-item-info {
	position: relative;
}
.health-bgicon {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 168rpx;
	height: 168rpx;
}
</style>