rtdeviceApp/pages/user/healthReport.vue

<template>
	<view class="content">
		<!-- 个人信息 -->
		<!-- <view class="blur-bg-2"></view> -->
		<view class="top-btn">
			
			<view class="back x-c">
				<!-- <image src='/static/image/new/icon_back.svg'></image>
				返回 -->
			</view>
			<view class="title x-c">
				<image src='/static/image/new/img_title1.svg'></image>
				<text>检测报告</text>
				<image src='/static/image/new/img_title2.svg'></image>
			</view>
			<view class="index x-c" @click="goIndex">
				<image src='/static/image/new/icon_home.svg'></image>
				首页
			</view>
		</view>
		<view class="userBox">
			<view class="left">
				<view class="tizhi">
					<view class="title-l x-f">
						<image src='/static/image/new/icon_taiji.svg'></image>
						您的主体质为
					</view>
					<view class="titbox">
						<image class="img-l"  src='/static/image/new/img_cloud1.svg'></image>
						<view class="x-c">
							<view class="textbg x-c">阳</view>
							<view class="textbg x-c">虚</view>
							<view class="textbg x-c">质</view>
						</view>
						<image  class="img-r" src='/static/image/new/img_cloud2.svg'></image>
					</view>
					<view class="constitution x-bc">
						<view class="constitution-charts">
							<qiun-data-charts type="radar" :opts="constitutionOpts" :chartData="constitutiontData" />
						</view>
						<view class="table-wrapper">
							<view class="table topf" style="grid-template-columns:1fr .8fr">
								<view class="table-list u-f-ajc">
									体质
								</view>
								<view class="table-list u-f-ajc">
									积分
								</view>
							</view>
							<view class="">
								<view class="table color2 bgF u-f-ajc" style="grid-template-columns:1fr .8fr" v-for="(item,index) in constitution"
									:key="index">
									<view class="table-list u-f-ajc" style="border-right: 1px solid #96E5D1;background: #F4FFFC;">
										{{item.name}}
									</view>
									<view class="u-f-ajc">
										{{item.score}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="suggest">
						<image  class="tit" src='/static/image/new/img_advice.svg'></image>
					<view class="desc">
						日常宜温补阳气，多摄入生姜、韭菜、核桃，避冰饮、生食；规律作息，晨起适度运动，可艾灸足三里、关元穴。
					</view>
				</view>
			</view>
			<view class="right">
				<view class="temp x-start">
					
				 <view class="title-box x-start">
					 <image src='/static/image/new/icon_heat.svg'></image>
					 <view class="y-start">
						 <text class="txt">体温</text>
						 <view class="num x-end">36.5
						 <text class="unit">°C</text>
						 </view>
					 </view>
					 
				 </view>
				 <view class="status x-c">正常</view>
				</view>
				<view class="pressure x-start">
					
					<view class="title-box x-start">
						<image src='/static/image/new/icon_blood.svg'></image>
						<view class="y-start">
							<text class="txt">血压</text>
							<view class="num x-end">145/95
							<text class="unit">mmHg</text>
							</view>
							<view class="other">收缩压/舒张压</view>
						</view>
										
					</view>
					<view class="status2 x-c">偏高</view>
				</view>
				<view class="code">
					<view class="title-box x-f">
						<image src='/static/image/new/icon_report.svg'></image>
										 <text class="txt">获取详细报告</text>
					</view>
					<view class="tips">
						您的健康报告与个性化调理方案已生成，手机扫码查看。报告链接也会发送到您预留的手机上。
					</view>
					<view class="code-box">
						<image src="/static/logo_icon.png"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfoByUserId,
		getUserInfo
	} from '@/api/user.js';
	export default {
		data() {
			return {
				form: {
					username: '', // 姓名
					phone: '', // 手机号
					sex: 1, // 性别（1-男，0-女）
					age: '', // 年龄
					height: '', // 身高
					weight: '', // 体重
					idCard:'',
					// previousMedicalHistory: '', // 既往病史
					// habitList: [], //饮食习惯
					// historyOfAllergies: '' //过敏史
				},
				// 每个输入框的高亮状态
				highlightStatus: {
					username: false,
					phone: false,
					idCard: false,
					age: false,
					height: false,
					weight: false
				},
				constitution: [
					{name:'阳虚质',score:73},
					{name:'气虚质',score:56},
					{name:'阴虚质',score:50},
					{name:'痰湿质',score:42},
					{name:'湿热质',score:18},
					{name:'气郁质',score:9},
					{name:'特禀质',score:8},
					{name:'平和质',score:2},
					{name:'血瘀质',score:0},
				],
				constitutionOption:[
					{
					"特禀质": {
						  "定义": "属于先天禀赋异常，主要表现为对花粉、尘螨、某些食物或药物等过敏，易患哮喘、荨麻疹、过敏性鼻炎等过敏性疾病。",
						  "成因": "主要与先天遗传因素、环境因素或药物因素等密切相关。",
						  "经络": ["肺经", "脾经", "肾经"],
						  "分析": "特禀质以先天禀赋异常为主，肺经主卫外固表，脾经主运化水湿，肾经主藏精抗邪。拍打肺经增强卫外功能，脾经健脾益气，肾经固本培元，三经协同提高机体对过敏原的耐受性，减少哮喘、荨麻疹等发作。"
						}
					},
					{
					"平和质": {
						  "定义": "中医所推崇的理想体质状态，表现为阴阳气血调和，体态适中，面色红润且富有光泽，精力充沛，性格随和开朗，对环境的适应能力强，不易患病且恢复迅速。",
						  "成因": "主要与先天禀赋良好及后天调养得当密切相关，如作息规律、饮食均衡、心态平和等。",
						  "经络": ["肺经", "脾经", "肾经"],
						  "分析": "平和质者阴阳气血调和，肺经主气司呼吸，脾经主运化升清，肾经主藏精生髓，三经气血运行通畅，共同维持机体平衡。肺经通畅保障呼吸功能，脾经健运促进水谷精微吸收，肾经充盈支撑先天之本，三者协同维持健康状态。"
						}
					},
					{
					"气虚质": {
						  "定义": "以元气不足为主要特征，常表现为疲乏无力、气短懒言、精神不振、易出汗、舌淡红且边有齿痕，抵抗力较弱，易患感冒等疾病。",
						  "成因": "多因先天禀赋不足、后天脾胃虚弱、过度劳累或久病耗伤气血所致。",
						  "经络": ["肺经", "脾经", "胃经"],
						  "分析": "气虚质以肺脾两虚为主，肺经主气不足则呼吸短促，脾经运化无力则气血生化不足。胃经为多气多血之经，拍打胃经可增强脾胃功能，促进气血生成。三经调理需以补益肺气、健脾和胃为重点，改善乏力、气短症状。"
						}
					},
					{
					"阳虚质": {
						  "定义": "表现为阳气不足，以畏寒怕冷、手足不温、喜热饮食、精神不振、舌淡胖嫩且边有齿痕为主要特征，耐夏不耐冬。",
						  "成因": "主要与先天禀赋不足、久居寒冷环境、过度劳累耗伤阳气或年老体衰等因素有关。",
						  "经络": ["肾经", "脾经", "膀胱经"],
						  "分析": "阳虚质以肾阳不足为核心，肾经主温煦全身，脾经运化失司则水湿内停，膀胱经主一身之表，阳虚者易感外寒。拍打肾经可温补肾阳，脾经增强运化，膀胱经促进排寒，三经协同改善畏寒、四肢不温等症状。"
						}
					},
					{
					"阴虚质": {
						  "定义": "以体内阴液亏少为主要特征，常表现为口燥咽干、手足心热、潮热盗汗、心烦易怒、失眠多梦、大便干结、舌红少津。",
						  "成因": "多因先天阴液不足、久病伤阴、长期熬夜、过食辛辣燥热之品或高温环境工作等因素导致。",
						  "经络": ["肾经", "肝经", "心经"],
						  "分析": "阴虚质以肾阴亏虚为主，肾经失养则腰膝酸软，肝经阴虚则肝阳上亢（如潮热、盗汗），心经阴虚则心烦失眠。拍打肾经滋阴补肾，肝经平肝潜阳，心经清心除烦，三经调理可缓解口干、五心烦热等症。"
						}
					},
					{
					"痰湿质": {
						  "定义": "以痰湿凝聚为主要特征，表现为形体肥胖、腹部肥满松软、面部皮肤油脂较多、多汗且黏、胸闷痰多、口黏腻或甜、舌体胖大且苔白腻。",
						  "成因": "主要与先天禀赋因素、后天饮食不节（如暴饮暴食、嗜食肥甘厚味）、缺乏运动或年老脾胃功能减弱等因素有关。",
						  "经络": ["脾经", "肺经", "胃经"],
						  "分析": "痰湿质以脾失健运为核心，脾经运化水湿功能减弱，肺经通调水道受阻，胃经受纳腐熟异常则痰湿内生。拍打脾经可健脾祛湿，肺经宣肺化痰，胃经和胃降浊，三经协同改善肥胖、胸闷痰多等症状。"
						}
					},
					{
					"湿热质": {
						  "定义": "以湿热内蕴为主要特征，表现为面垢油光、易生痤疮粉刺、口苦口干、身重困倦、大便黏滞不爽或燥结、小便短黄、舌质偏红且苔黄腻。",
						  "成因": "多因先天湿热内蕴、长期居住潮湿环境、过食辛辣油腻食物或脾胃运化失常等因素导致。",
						  "经络": ["脾经", "胃经", "膀胱经"],
						  "分析": "湿热质以脾胃湿热为主，脾经运化失司致湿邪内生，胃经受纳腐熟异常则热邪蕴结，膀胱经排湿不畅则湿热下注。拍打脾经清热利湿，胃经清胃泻火，膀胱经利尿排湿，三经调理可缓解口苦、大便黏滞等症。"
						}
					},
					{
					"血瘀质": {
						  "定义": "以血液运行不畅为主要特征，表现为肤色晦暗、色素沉着、易出现瘀斑、口唇黯淡或紫、舌黯有瘀点且舌下络脉紫黯或增粗、脉涩。",
						  "成因": "主要与先天体质因素、外伤、久病入络或长期情绪抑郁等因素有关。",
						  "经络": ["肝经", "心经", "脾经"],
						  "分析": "血瘀质以肝郁气滞、心血瘀阻为主，肝经主疏泄，气滞则血瘀；心经主血脉，瘀阻则胸痛；脾经统血，脾虚则血行不畅。拍打肝经疏肝理气，心经活血通络，脾经健脾益气，三经协同改善面色晦暗、瘀斑等症状。"
						}
					},
					{
					"气郁质": {
						  "定义": "以气机郁滞为主要特征，表现为神情抑郁、忧虑脆弱、烦闷不乐、胸胁胀满、乳房胀痛、睡眠较差、舌淡红且苔薄白、脉弦。",
						  "成因": "多因先天性格内向、长期情志不舒、生活压力大或精神刺激等因素导致。",
						  "经络": ["肝经", "胆经", "三焦经"],
						  "分析": "气郁质以肝胆气机郁滞为核心，肝经主疏泄，胆经主决断，三焦经主气机升降。拍打肝经可疏肝解郁，胆经畅达气机，三焦经通调水道，三经协同缓解抑郁、胸胁胀满等症状。"
						}
					}
				],
				constitutionOpts: {
					padding: [0,0,0,0],
					dataLabel: false,
					enableScroll: false,
					legend: {
					  show: false,
					},
					fontSize: 22,
					color:['#37C3A0'],
					extra: {
					  radar: {
						gridType: "radar",
						gridColor: "rgba(55,195,160,0.3)",
						gridCount: 6,
						opacity: 0.2,
						max: 100,
						labelShow: true,
						border: true,
						radius: 200
					  }
					}
				},
				constitutiontData: {},
			}
		},
		onLoad(option) {
			this.getConstitutiont('阴虚质')
		},
		onShow() {
		},
		methods: {
			//首页
			goIndex(){
				uni.reLaunch({
					url: '/pages/index/index',
					animationType: 'none',
					animationDuration: 2000
				})
			},
			getConstitutiont(name) {
			 const data = this.constitutionOption.find(item => item[name]);
			 this.constitutionResult = data[name]
			 let res = {
			 	categories: this.constitution.map(it=>it.name),
			 	series: [
			 	  {
			 		name: "体质",
			 		data: this.constitution.map(it=>it.score)
			 	  }
			 	]
			   };
			 this.constitutiontData = JSON.parse(JSON.stringify(res));
			},
		}
	}
</script>


<style scoped lang="scss">
	page {
		background: #fff;
		font-size: 16px
	}
    .constitution {
    	&-charts {
    		width: 480px;
    		height: 416px;
    	}
    }
	.table-wrapper{
		min-width:180px;
		margin-top: 30px;
		.table-list {
			padding: 6px 18px;
			&:last-child{
				padding: 6px 11px !important;
			}
		}
	}
	.table {
		display: grid;
		grid-template-columns: 1fr 2fr 1fr;
		border: 1px solid #96E5D1;
		border-radius: 6px 0px 0px 0px;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 20px;
		color: #222222;
		&.topf{
			background: linear-gradient( 180deg, #E0FFF7 0%, #8DE2CC 100%);
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 20px;
			color: #4E6E66;
		}
		&:last-child {
			border-bottom: 1px solid #96E5D1;
		}
	
		.table-list {
			&:nth-child(2n) {
				border-left: 1px solid #96E5D1;
				border-right: 1px solid #96E5D1;
			}
		}
	}
	.content {
		width: 100%;
		height: 100vh;
		background: #D8F6EF;
		padding: 28px;
		display: flex;
		flex-direction: column;
		.blur-bg-2 {
		   width: 350px;
		   height: 350px;
		   background: #FFFDCC;
		   // opacity: 0.47;
		   filter: blur(200px);
		   position: absolute;
		   z-index: 1;
		   top: 60px;
		   right: calc(0px - 107px); 
		   pointer-events: none
		}
	}

	.top-btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
z-index:2;
		.back {
			width: 144px;
			height: 48px;
			// background: rgba(255, 255, 255, 0.64);
			// border-radius: 45px 45px 45px 45px;
			// border: 2px solid #FFFFFF;
			// font-family: PingFang SC, PingFang SC;
			// font-weight: 500;
			// font-size: 22px;
			// color: #327E6F;

			image {
				margin-right: 4px;
				width: 24px;
				height: 24px;
			}
		}

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 36px;
			color: #327E6F;
			line-height: 54px;

			text {
				margin: 0 14px;
			}

			image {

				width: 153px;
				height: 25px;
			}
		}

		.index {
			width: 140px;
			height: 48px;
			background: rgba(255, 255, 255, 0.64);
			border-radius: 55px 55px 55px 55px;
			border: 2px solid #FFFFFF;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 22px;
			color: #327E6F;

			image {
				margin-right: 4px;
				width: 24px;
				height: 24px;
			}
		}
	}

	.userBox {
		flex: 1;
		margin-top: 28px;
		background: rgba(255, 255, 255, 0.7);
		border-radius: 24px 24px 24px 24px;
		padding: 28px;
        z-index: 9;
		display: flex;
        align-items:start;
		.left{
			margin-right: 28px;
			.tizhi{
				padding: 28px;
				width: 798px;
				height: 650px;
				background: #FFFFFF;
				box-shadow: 0px 4px 14px 0px rgba(55,195,160,0.06);
				border-radius: 20px 20px 20px 20px;
            .title-l{
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24px;
				color: #333333;
				line-height: 42px;
				image{
					margin-right: 16px;
					width: 32px;
					height: 32px;
				}
				}
				.titbox{
					width: 100%;
					height: 112px;
					background: rgba(55,195,160,0.13);
					border-radius: 20px 20px 20px 20px;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					.textbg{
						width: 55px;
						height: 55px;
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						font-size: 31px;
						line-height: 44px;
						color: #333333;
						background-image:url(/static/image/new/bg_square.svg);
						background-repeat: no-repeat;
						background-size: 100% 100%;
						margin-right: 20px;
						&:last-child{
							margin-right: 0;
						}
					}
					.img-l{
						position: absolute;
						top: 16px;
						left:34px;
						width: 138px;
						height: 50px;
					}
					.img-r{
						position: absolute;
						bottom:20px;
						right: 48px;
						width: 118px;
						height: 34px;
					}
				}
			}
			.suggest{
				padding: 28px;
				margin-top: 28px;
				width: 798px;
				height: 159px;
				background: #FFFFFF;
				box-shadow: 0px 4px 14px 0px rgba(55,195,160,0.06);
				border-radius: 20px 20px 20px 20px;
				
				.tit{
						width: 88px;
						height: 33px;
					
				}
				.desc{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 22px;
					color: #333333;
					line-height: 34px;
				}
			}
		}
		.right{
			display: flex;
			flex-direction: column;
			align-items: center;
			.status{
				width: 56px;
				height: 32px;
				background: rgba(55,195,160,0.13);
				border-radius: 8px 8px 8px 8px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 18px;
				color: #37C3A0;
				position: absolute;
				top:20px;
				right: 28px;
			}
			.status2{
				width: 56px;
				height: 32px;
				background: rgba(255,162,31,0.13);
				border-radius: 8px 8px 8px 8px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 18px;
				color: #E89209;
				position: absolute;
				top:20px;
				right: 28px;
			}
			.temp{
				padding:20px 28px;
				width: 342px;
				height: 165px;
				background: #FFFFFF;
				box-shadow: 0px 4px 14px 0px rgba(55,195,160,0.06);
				border-radius: 20px 20px 20px 20px;
				flex-direction: row;
				justify-content: space-between;
				position: relative;
				image{
					width: 32px;
					height: 32px;
					margin-right: 20px;
				}
				.txt{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24px;
					color: #333333;
				}
				.num{
					margin-top: 10px;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 36px;
					color: #333333;
				}
				.unit{
					font-weight: 600;
					font-size: 24px;
				}
			}
			.pressure{
				margin-top: 28px;
				padding:20px 28px;
				width: 342px;
				height: 165px;
				background: #FFFFFF;
				box-shadow: 0px 4px 14px 0px rgba(55,195,160,0.06);
				border-radius: 20px 20px 20px 20px;
				flex-direction: row;
				justify-content: space-between;
				position: relative;
				image{
					width: 32px;
					height: 32px;
					margin-right: 20px;
				}
				.txt{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24px;
					color: #333333;
				}
				.num{
					margin-top: 10px;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 36px;
					color: #333333;
				}
				.unit{
					font-weight: 600;
					font-size: 24px;
				}
				.other{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 18px;
					color: #999999;
				}
			}
			.code{
				margin-top: 28px;
				padding:20px 28px;
				width: 342px;
				height: 451px;
				background: linear-gradient( 180deg, #DDFFF6 0%, #FFFFFF 100%);
				box-shadow: 0px 4px 14px 0px rgba(55,195,160,0.06);
				border-radius: 20px 20px 20px 20px;
				border: 2px solid #37C3A0;
				.title-box{
					image{
						width: 32px;
						height: 32px;
						margin-right: 20px;
					}
					.txt{
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24px;
						color: #333333;
					}
					
				}
				.tips{
					margin-top: 28px;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 22px;
					color: #666666;
					line-height: 34px;
					margin-bottom: 40px;
				}
				.code-box{
					margin: 0 auto;
					width: 148px;
					height: 148px;
					border-radius: 5px 5px 5px 5px;
					border: 1px solid #37C3A0;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 124px;
						height: 124px;
					}
				}
			}
		}
	}
</style>