rtdeviceApp/pages/user/healthReport.vue

<template>
	<view class="content">
		<!-- 个人信息 -->
		<view :style="{height:statusBarHeight}"></view>
		<view class="top-box" >
			<view class="back-box x-f">
				<image src="/static/image/device/back_icon32.png"></image>
				<view @click="goBack()">返回</view>
			</view>
			<view class="tab-box">
				健康报告
			</view>
<!-- 			<view :style="{width: width < height ?'18px':'102px'}"></view> -->
		</view>
		<view class="user-info">
			<view class="info-box">
				<view class="left">
					<view class="head-box">
						<image class="img" src="@/static/images/pages_watch/images/my_heads_icon.png" mode="aspectFill">
						</image>
					</view>
					<view class="info">
						<text class="name one-t">{{userInfo.username}}</text>
						<div class="info-top">
							<text class="sex">性别：{{userInfo.sex==1?'男':userInfo.sex==0?'女':'-'}}</text>
							<text>年龄：{{userInfo.age|| '-'}}岁</text>
						</div>
						<div class="phone">
							手机号：{{userInfo.phone|| '-'}}
						</div>
					</view>
				</view>
				<!-- <image  class="right" src="@/static/image/my/icon_edit.png" mode="aspectFill" @click="editInfo"></image> -->
			</view>
			<view class="userinfo-list x-bc">
				<view class="userinfo-item x-bc">
					<view>
						<view>身高</view>
						<view style="margin-top: 8rpx;"><text class="num">{{userInfo.height || '--'}}</text>cm</view>
					</view>
					<image src="@/static/images/pages_watch/icons/height_icon.png" mode="aspectFill"></image>
				</view>
				<view class="userinfo-item x-bc">
					<view>
						<view>体重</view>
						<view style="margin-top: 8rpx;"><text class="num">{{userInfo.weight || '--'}}</text>kg</view>
					</view>
					<image src="@/static/images/pages_watch/icons/weight_icon.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="userinfo-list x-bc">
				<view class="userinfo-item">
					<view>
						<view>既往病史</view>
						<view style="margin-top: 8rpx;height: 80rpx;" class="two-t"><text
								class="txt">{{userInfo.previousMedicalHistory|| '--'}}</text></view>
					</view>
					<!-- <image src="@/static/images/pages_watch/icons/weight_icon.png" mode="aspectFill"></image> -->
				</view>
				<view class="userinfo-item">
					<view>
						<view>过敏史</view>
						<view style="margin-top: 8rpx;height: 80rpx;" class="two-t"><text
								class="txt">{{userInfo.historyOfAllergies|| '--'}}</text></view>
					</view>
					<!-- <image src="@/static/image/healthRecords/gms_icon.png" mode="aspectFill"></image> -->
				</view>
			</view>
		</view>
		<!-- 详细信息 -->
		<view class="info-detail">
			<view class="item">
				<view class="x-bc">
					<text class="label">舌诊</text>
					<text class="time">{{infoTongue.createTime||'-'}}</text>
				</view>

				<view class="content" v-if="infoTongue">
					<view class="desc">
						{{infoTongue.taiseName||'无'}}：{{infoTongue.taiseDesc||'-'}}
					</view>
					<view class="desc">
						{{infoTongue.shemianName||'无'}}：{{infoTongue.shemianDesc||'-'}}
					</view>
					<view class="desc">
						{{infoTongue.botai==1?"有剥苔":"未见剥苔"}}：{{infoTongue.botaiDesc||'-'}}
					</view>
					<view class="desc">
						{{infoTongue.liewen==1?"有裂纹":"未见裂纹"}}：{{infoTongue.liewenDesc||'-'}}
					</view>
					<view class="desc">
						{{infoTongue.chihen==1?"有齿痕":"未见齿痕"}}：{{infoTongue.chihenDesc||'-'}}
					</view>
				</view>
			</view>
			<view class="item column">
				<view class="left">
					<view class="x-bc">
						<text class="label">面诊</text>
						<text class="time">{{formatCreateTime(infoSurface.createTime)||'-'}}</text>
					</view>
					<view class="content">
						<view class="desc">
							面色：{{infoSurface.complexionResult||'-'}}
						</view>
						<view class="desc">
							区域色斑：{{infoSurface.spotProblems||'-'}}
						</view>
						<view class="desc">
							浮肿特征：{{infoSurface.swellingProblems||'-'}}
						</view>
						<view class="desc">
							光泽度：{{infoSurface.glowResult||'-'}}
						</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="x-bc">
					<text class="label">脉诊</text>
					<text class="time">{{infoPulse.createTime||'-'}}</text>
				</view>
				<view class="content">
					<view class="desc">
						左手：{{leftHandResult}}
					</view>
					<view class="desc">
						右手：{{rightHandResult}}
					</view>
					<view class="desc">
						脉搏总结：{{infoPulse.pulseSummary||'-'}}
					</view>
				</view>
			</view>

		</view>
		<view class="footer" @click="addApp">
			<text>更多报告详情，请下载芳华未来APP</text>
		</view>
		<view v-if="isCode" class="mask">
			<view class="popup-container2">
				<view class="title-t">扫码下载APP</view>
				<!-- <view class="title-r">点击确认查看检测报告</view> -->
				<image style="width: 200px;height: 200px;margin-bottom: 20px;" src="@/static/images/afangh.png"></image>
				<view class="btn-r" @click="closeP">关闭</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfoByUserId,
		selectQueryFsUser,
		getDiagnosis
	} from '@/api/user.js';
	export default {
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
				avatar: "",
				nickName: "",
				deptName: "",
				postNames: "",
				phonenumber: "",
				email: "",
				sex: "",
				isShow: false,
				isCode:false,
				userId: undefined,
				userInfo: {},
				infoTongue: {},
				infoSurface: {},
				infoPulse: {},
				leftHandResult:null,
				rightHandResult:null,
				userId:null
			}
		},
		onLoad(options) {
			if (options.userId) {
				this.userId=options.userId
				this.getDiagnosis(this.userId)
			}
			//this.getDiagnosis('4054874814')
		},
		onShow() {

		},
		methods: {
			goBack(){
				uni.navigateBack({
					delta:1
				})
			},
			formatCreateTime(rawTime) {
				// 先处理“无时间”的情况，返回默认值 "-"
				if (!rawTime) return "-";

				const date = new Date(rawTime); // 将原始时间转为 Date 对象
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，补0成两位数
				const day = String(date.getDate()).padStart(2, "0"); // 日期补0
				const hour = String(date.getHours()).padStart(2, "0"); // 小时补0
				const minute = String(date.getMinutes()).padStart(2, "0"); // 分钟补0
				const second = String(date.getSeconds()).padStart(2, "0");
				// 返回最终格式（可按需调整，如只显示日期则去掉 hour:minute）
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
			},
			closeP(){
				this.isCode=false
			},
			addApp() {
				this.isCode=true
				// let platform = uni.getSystemInfoSync().platform;
				// // let isAndroid=platform=="android";
				// if (platform === 'android') {
				// 	// #ifdef H5
				// 	window.open("https://m.malink.cn/s/2UZjMz", '_blank');
				// 	// #endif
				// } else if(platform === 'ios'){
				// 	// #ifdef H5
				// 	window.open("https://apps.apple.com/cn/app/%E8%8A%B3%E5%8D%8E%E6%9C%AA%E6%9D%A5/id6738688148",
				// 		'_blank');
				// 	// #endif
				// }
			},
			selectQueryFsUser(userId) {
				uni.showLoading({
					title: '加载中'
				})
				var data = {
					userId: userId
				};
				selectQueryFsUser(data).then(
					res => {
						if (res.code == 200) {
							this.userInfo = res.data
							uni.hideLoading()
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
							uni.hideLoading()
						}
					},
					rej => {}
				);
			},
			getDiagnosis(userId) {
				uni.showLoading({
					title: '加载中'
				})
				var data = {
					userId: userId
				};
				getDiagnosis(data).then(
					res => {
						if (res.code == 200) {
							this.userInfo = res.data.user
							this.infoSurface = res.data.HealthSurface?res.data.HealthSurface:'暂无信息'
							this.infoTongue = res.data.HealthTongue?res.data.HealthTongue:'暂无信息'
							this.infoPulse = res.data.HealthPulse?res.data.HealthPulse:'暂无信息'
							this.leftHandResult=res.data.HealthPulse.leftHandResult?JSON.parse(res.data.HealthPulse.leftHandResult).leftHandResult:'-'
							this.rightHandResult=res.data.HealthPulse.rightHandResult?JSON.parse(res.data.HealthPulse.rightHandResult).rightHandResult:'-'
							uni.hideLoading()
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
							uni.hideLoading()
						}
					},
					rej => {}
				);
			},
		}
	}
</script>


<style scoped lang="scss">
	page {
		background: linear-gradient(#FBF4EE 0%, #fff 100%);
		background-repeat: no-repeat;
	}
	
	.top-box {
		padding: 0 24rpx;
		margin-top: 20px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30px;
	
		.title {
			font-family: Source Han Serif CN, Source Han Serif CN;
			font-weight: bold;
			font-size: 30px;
			color: #8F6726;
			text-align: center;
		}
	     .tab-box{
			 font-size: 36rpx;
			 color: #8F6726;
		 }
		.back-box {
			width: 102px;
			height: 47px;
			background: #FFFFFF;
			border-radius: 6px 6px 6px 6px;
			border: 1px solid #8F6726;
			// padding: 12px 8px;
			justify-content: center;
	
			view {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 18px;
				color: #8F6726;
				text-align: center;
				margin-left: 10px;
			}
	
			// position: absolute;
			// left: 30px;
			image {
				width: 24px;
				height: 24px;
			}
		}
	
		.select {
			min-width: 160px;
			height: 47px;
			background: #FFFFFF;
			border-radius: 6px 6px 6px 6px;
			border: 1px solid #8F6726;
			padding: 12px;
			display: flex;
			align-items: center;
			justify-content: center;
	
			image {
				width: 24px;
				height: 24px;
	
				&:last-child {
					width: 12px;
					height: 12px;
				}
			}
	
			.date {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
	
			.text {
				margin-left: 10px;
				margin-right: 10px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 18px;
				color: #8F6726;
				text-align: center;
			}
		}
	}
.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
		animation: fadeIn 0.3s ease;
	}

	/* 弹窗容器样式 */
	.popup-container2 {
		//width: 50%;
		min-height: 250px;
		background: #FBF4EE;
		border-radius: 12px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
		animation: scaleIn 0.3s ease;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 30px 50px;

		.title-t {
			font-size: 24px;
			font-weight: bold;
			color: #8F6726;
			text-align: center;
			margin-bottom: 20px;
		}

		.title-r {
			font-size: 20px;
			color: #8F6726;
			text-align: center;
			padding: 20px 0;
		}

		.btn-r {
			text-align: center;
			background: #8F6726;
			font-size: 20px;
			color: #FBF4EE;
			border-radius: 12px;
			width: 100%;
			height: 50px;
			line-height: 50px;
		}
	}

	.one-t {
		white-space: nowrap;
		/* 强制文本不换行 */
		overflow: hidden;
		/* 隐藏超出容器的内容 */
		text-overflow: ellipsis;
		/* 超出部分显示省略号 */
	}

	.two-t {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* 强制显示2行，超出部分省略 */
		overflow: hidden;
	}

	.content {
		padding-bottom: 30rpx;
		// background: #FBF4EE;
		// 个人信息
		.user-info {
			// background: #FBF4EE;
			padding: 0 24rpx;

			.info-box {
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				.left {
					width: 100%;
					display: flex;
					align-items: center;
					padding: 20rpx;

					.head-box {
						width: 120rpx;
						height: 120rpx;
						line-height: 100rpx;
						font-size: 30rpx;
						text-align: center;
						margin-right: 20rpx;

						.img {
							border-radius: 50%;
							width: 100%;
							height: 100%;
						}
					}

					.info {
						width: calc(100% - 140rpx);
						height: 120rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						color: #333;

						.name {
							font-size: 30rpx;

						}

						.info-top {
							color: #999999;
							font-size: 24rpx;

							.sex {
								margin-right: 20rpx;
							}
						}

						.phone {
							font-size: 24rpx;
							color: #999999;
						}

						.title {
							font-size: 28rpx;
						}
					}
				}

				.right {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.userinfo-list {
				margin: 0 -16rpx 0 0;

				.userinfo-item {
					flex: 1;
					min-height: 136rpx;
					padding: 24rpx;
					box-sizing: border-box;
					margin: 0 16rpx 16rpx 0;
					background: #FFFFFF;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #757575;

					image {
						width: 56rpx;
						height: 56rpx;
					}

					.num {
						font-family: DIN, DIN;
						font-weight: 500;
						font-size: 36rpx;
						color: #333333;
						margin-right: 10rpx;
					}

					.txt {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #333333;
					}
				}
			}

			.comp-info {
				padding: 20rpx 0 40rpx;
				display: flex;
				align-items: center;

				.img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 20rpx;
				}

				.text {
					font-size: 30rpx;
					color: #fff;
				}
			}
		}

		// 详细信息
		.info-detail {
			padding: 0 24rpx;
			margin-top: 20rpx;
			overflow: hidden;

			.item {
				margin-bottom: 20rpx;
				border-bottom: 1px solid #f7f7f7;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.label {
					font-size: 36rpx;
					font-weight: bold;
					margin-right: 20rpx;
				}

				.time {
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}

				.content {
					margin-top: 20rpx;
					padding: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					background: #FFFFFF;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					border: 1px solid #FBF4EE;

					.desc {
						margin-bottom: 20rpx;
						padding-left: 20rpx;
						position: relative;
						line-height: 40rpx;

						&::before {
							content: '';
							position: absolute;
							z-index: 9;
							top: 15rpx;
							left: 0;
							width: 10rpx;
							height: 10rpx;
							background: #8F6726;
							border-radius: 5rpx;
						}
					}
				}
			}
		}

		.footer {
			margin: 30rpx 20rpx 0;
			padding: 20rpx 0;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			background: #8F6726;
			font-size: 28rpx;
			color: #fff;
			text-align: center;
		}
	}
</style>