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?BMI.toFixed(2):'--'}}</view>
							<view :class="bmiCategory=='超重'||bmiCategory=='肥胖'?'text-color':''">{{bmiCategory}}</view>
						</view>
						<image src="/static/images/health/BMI_icon.png" mode="aspectFill"></image>
					</view>
					<view class="health-bmi mt40">
						<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 v-if='index<2'>{{item.type==0?'正常':item.type==1?'偏小':'偏大'}}</view>
							<view v-if='index>1'>{{item.type==0?'正常':item.type==1?'轻微':'严重'}}</view>
						</view>
						<image :src="item.icon" 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/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: [],
				bgColor: 'rgba(11,179,242,0)',
				user: null,
				bmiCategory: '',
				info: {},
				infoList: [{
					title:'腰围',
					icon:"/static/images/health/waist_circumference_icon.png",
					type:0,
					value:{}
				},{
					title:'臀围',
					icon:"/static/images/health/hip_circumference_icon.png",
					type:0,
					value:{}
				},{
					title:'血糖',
					icon:"/static/images/health/blood_sugar_icon.png",
					type:0,
					value:{}
				},{
					title:'血压',
					icon:"/static/images/health/blood_pressure_icon.png",
					type:0,
					value:{}
				},{
					title:'尿酸',
					icon:"/static/images/health/uric_acid_icon.png",
					type:0,
					value:{}
				}
				],
				form: null,
				dataMap: {},
				BMI: null

			}
		},
		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'

			// 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.$off('refreshHealthFiles');
			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
				};
				getDoc(data).then(
					res => {
						if (res.code == 200) {
							this.form = res.data
							this.$set(this, 'form', res.data)
							if (this.form.weight && this.form.height) {
								const heightInMeter = this.form.height / 100; // cm → m
								this.BMI = this.form.weight / (heightInMeter * heightInMeter);
								// console.log(this.BMI,'bmi')
								this.setBmiCategory(); // 同步BMI分类
							} else {
								this.BMI = null;
								this.bmiCategory = '未填写';
							}
							if (form.birthdate !== null && res.data == null) {
								uni.navigateTo({
									url: '/pages_health/addDoc?userId=' + id
								})
							}
						} else {
							uni.showToast({
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			setBmiCategory() {
				if (!this.BMI) return;
				if (this.BMI < 18.5) {
					this.bmiCategory = '偏瘦';
				} else if (this.BMI < 24) {
					this.bmiCategory = '正常';
				} else if (this.BMI < 28) {
					this.bmiCategory = '超重';
				} else {
					this.bmiCategory = '肥胖';
				}
			},

			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);
							for (var i = 0; i < this.infoList.length; i++) {
							  // 假设list与infoList长度相同且对应
							  this.infoList[i].type = list[i].level;
							  this.infoList[i].value = list[i];
							}
						} 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>