179crm_user_app/pages_health/healthfiles.vue

<template>
	<view class="hb column hidden container">
		<image class="bg" src="https://user.test.ylrztop.com/images/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="info.avatar||maleurl" class="w140 h140"></image>
					<view class="ml30">
						<view class="bold fs32 mb12">{{info.username||'-'}}</view>
						<view class="justify-start align-center fs24">
							<text class="orangebox">{{info.sex==0?'男':'女'}}</text>
							<text class="orangebox ml12">{{info.age||'-'}}岁</text>
						</view>
					</view>
				</view>
				<u-icon name="arrow-right" @click="goToUser"></u-icon>
			</view>
			<view class="fs36 bold mt20">健康数据</view>
			<view class="health-monitoring">
				<view class="health-monitoring-item"
					@click="handleMonitoring(0)">
					<view class="health-monitoring-title">
						<view>
							<view class="health-monitoring-maintitle bold">{{BMI.toFixed(2)}}</view>
							<view :class="bmiCategory=='肥胖'?'text-color':''">{{bmiCategory}}</view>
						</view>
						<image src="/static/images/health/BMI_icon.png" mode="aspectFill"></image>
					</view>
					<view class="health-bmi mt50">
						<view class="justify-between align-center mb12">
							<view class="justify-start align-center ">
								<text class="color-text2 fs24 mr20">身高</text>
								<view class="fs24">{{form.height?form.height+'cm':'--'}}</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 class="fs24">{{form.weight?form.weight+'kg':'--'}}</view>
							</view>
							<image src="/static/images/health/services_edit_icon.png" class="w32 h32"></image>
						</view>
					</view>
				</view>
				<view class="health-monitoring-item" v-for="(item,index) in infoList" :key="index"
					@click="handleMonitoring(item,index+1)">
					<view class="health-monitoring-title">
						<view>
							<view class="health-monitoring-maintitle bold">{{item.title}}</view>
							<view>{{item.type==0?'正常':item.type==1?'偏小':'偏大'}}</view>
						</view>
						<image :src="img[index]" mode="aspectFill"></image>
					</view>
					<view>
						<view class="health-monitoring-res resnum">{{item.value.value1 || '--'}}</view>
						<view class="health-monitoring-time">{{item.value.measurementDate}} {{item.value.measurementTime}}</view>
					</view>
				</view>
			</view>
			<view class="fs36 bold mtb20">健康史</view>
			<view class="cardbox">
				<view class="health-item" @click="handleEditHealth()">
					<image class="health-bgicon" src="https://user.test.ylrztop.com/images/jbs_icon.png"></image>
					<view class="health-item-info">
						<view class="cardbox-maintitle" style="margin-bottom: 0;">疾病史</view>
						<view class="text-overflow" style="margin-top: 20rpx;">{{form.otherMedicalHistory || "尚未记录"}}</view>
					</view>
				</view>
				<view class="health-item" @click="handleEditHealth()">
					<image class="health-bgicon" src="https://user.test.ylrztop.com/images/zzs_icon.png"></image>
					<view class="health-item-info">
						<view class="cardbox-maintitle" style="margin-bottom: 0;">症状史</view>
						<view class="text-overflow" style="margin-top: 20rpx;">{{form.symptomHistory || "尚未记录"}}</view>
					</view>
				</view>
			</view>
			<view class="h80"></view>
		</scroll-view>
	</view>
</template>

<script>
	import {getUserInfo} from '@/api/user.js'
	import {getInfo,getDoc,homeInfo} from '@/api/healthUser.js'
import carKeyboard from '../uni_modules/uview-ui/libs/config/props/carKeyboard';
	export default {
		data() {
			return {
				statusBarHeight:'',
				top:0,
				null:0,
				famaleurl:"/static/images/health/female_profile.png",
				maleurl:"/static/images/health/my_heads.png",
				img:[
					"/static/images/health/waist_circumference_icon.png",
					"/static/images/health/hip_circumference_icon.png",
					 "/static/images/health/blood_sugar_icon.png",
					"/static/images/health/blood_pressure_icon.png",
					"/static/images/health/uric_acid_icon.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: "https://user.test.ylrztop.com/images/jbs_icon.png",
					}, {
						title: '症状史',
						type: "symptomHistory",
						desc: '',
						bgicon: "https://user.test.ylrztop.com/images/zzs_icon.png",
					}
				],
				user:null,
				info:{},
				infoList:[],
				form:null,
				dataMap:{},
				BMI:null
				
			}
		},
		computed: {
			// 计算属性的 getter
			bgColor: function() {
				var top=this.top/30;
				return 'rgba(11,179,242, ' + top + ')';
			},
			 // // 计算BMI值
			 //    bmiValue() {
			 //      // if (!this.isValidInput) return 0;
				//   if(this.form!==null) return '--';
				// 	   // 获取体重和身高，确保为数字类型
				// 	   // const weight = this.form.weight||0;
				// 	   // const height = this.form.height||0;
				// 	 if(this.form.weight>0 && this.form.height>0)  {
				// 	         const bmi = this.form.weight / (this.form.height * this.form.height);
				// 			 console.log(bmi,this.form.height,'---')
				// 			  return bmi.toFixed(2); // 保留两位小数
				//   }else{
				// 	  return '--'
				//   }
			 //    },
			    // 判断BMI对应的体重类别
			    bmiCategory() {
			      const bmi = parseFloat(this.bmiValue);
			      if (bmi < 18.5) return '偏轻';
			      if (bmi < 24) return '正常';
			      if (bmi < 28) return '超重';
			      return '肥胖';
			    }
		},
		onLoad() {
		    // 获取系统信息
		    const sys = uni.getSystemInfoSync()
		    this.statusBarHeight = sys.statusBarHeight+'px'
			
			// uni.navigateTo({
			// 	url: '/pages_health/doc?type=edit&docId='
			// })
			this.getUserInfo()
			uni.$on('refreshHealthFiles', () => {
				this.getDoc()
				this.getUserInfo()
				// this.homeInfo()
			})
			
			// this.getInfo()
			
		},
		onUnload() { //普通页面在 onUnload 生命周期中执行
		    uni.$emit('stop')
		},
		onHide() { //tabBar页面在onHide生命周期中执行
		    uni.$emit('stop')
		},
		onPageScroll(e) {
		  	//console.log(e)
		  	this.top=e.scrollTop;
		},
		methods: {
			getUserInfo(){
				getUserInfo().then(
					res => {
						if(res.code==200){
							if(res.user!=null){
								this.user=res.user;
								this.getInfo(this.user.userId)
								this.homeInfo(this.user.userId)
							}
							else{
								this.utils.loginOut();
							}
							
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			getInfo(id) {
				var that=this
				var data = {
					userId: id
				};
				getInfo(data).then(
					res => {
						if (res.code == 200) {
							var data=res.data
							if(res.data.birthdate==null){
								uni.showToast({
									icon: 'none',
									title: "请先完善用户信息",
								});
								setTimeout(function() {
									uni.navigateTo({
										url: '/pages_health/addUser?type=edit&userId='+id
									})
								}, 500);
								
							}else{
								this.getDoc(id,data)
							}
							
						} else {
							uni.showToast({
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			getDoc(id,form) {
				var data = {
					userId: id
				};
				this.BMI=0
				getDoc(data).then(
					res => {
						if (res.code == 200) {
							this.form=res.data
							this.$set(this,'form',res.data)
							this.BMI=res.data.weight / (res.data.height * res.data.height)
							if(form.birthdate!==null&&res.data==null){
								uni.navigateTo({
									url: '/pages_health/addDoc?userId='+id
								})
						}
						}else {
							uni.showToast({
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			homeInfo(id) {
				var data = {
					userId:id
				};
				homeInfo(data).then(
					res => {
						if (res.code == 200) {
							this.info=res.data
							const valueList = Object.values(res.data.dataMap);
							const list = valueList.filter(item=>item!==null)
							this.infoList=list.map((item,index)=>({
								title:index==0?'腰围':index==1?'臀围':index==2?'血糖':index==3?'血压':'尿酸',
								type: item.level,
								value:item
							}));
							console.log(this.infoList,'--')
							
						}else {
							uni.showToast({
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			handleMonitoring(item,index){
				console.log(index,'index')
				switch (index) {
				case 1:
				uni.navigateTo({
					url: '/pages_echarts/waistLine?userId='+this.user.userId
				})
				break;
				case 2:
				uni.navigateTo({
					url: '/pages_echarts/hips?userId='+this.user.userId
				})
				break;
				case 3:
				uni.navigateTo({
					url: '/pages_echarts/bloodSugar?userId='+this.user.userId
				})
				break;
				case 4:
				uni.navigateTo({
					url: '/pages_echarts/bloodPressure?userId='+this.user.userId
				})
				break;
				case 5:
				uni.navigateTo({
					url: '/pages_echarts/acid?userId='+this.user.userId
				})
				break;
				default:
				uni.navigateTo({
					url: '/pages_health/addDoc?type=add&userId='+this.user.userId
				})
				break;
				}
			},
			handleEditHealth(item,index){
				uni.navigateTo({
					url: '/pages_health/addDoc?type=add&userId='+this.user.userId
				})
			},
			goToUser(){
				console.log(this.info,'---')
				if(this.info!==null){
					uni.navigateTo({
						url: '/pages_health/addUser?type=edit&userId='+this.user.userId
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	position: relative;
	    background: #EFF3F7;
	.bg{
		width: 100%;
		height: 380rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index:0;
	}
}
.text-color{
	color:#FF4B33;
	width: 72rpx;
	height: 40rpx;
	text-align: center;
	line-height: 40rpx;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	border: 1rpx solid #FFA599;
}
.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: 20rpx;
	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>