xinelu-applet-ui/pagesB/threeHundredAndSixty/threeHundredAndSixty.vue

<template>
	<view class="app">
		<view class="top">
			<u-tabs ref="tabs" :scrollable="false" :list="tabslist" bar-height="6" bar-width="60" active-color='#26A888'
				:is-scroll="false" :current="tabscurrent" gutter="50" @change="tabschange"></u-tabs>
		</view>
		<!-- 健康指数 -->
		<view class="health" v-if="tabscurrent==0">
			<healthindex></healthindex>
		</view>
		<!-- 健康处方 -->
		<view class="" v-if="tabscurrent==2">
			<Prescriptionrecords></Prescriptionrecords>
		</view>
		<!-- 疾病预警 -->
		<view class="disease" v-if="tabscurrent==1">
			<image :src="baseurl+ '/profile/weChatPicture/beijing.png'" class="background-image" />
			<view class="btnleftalls">
				<view class="left">
					<view class="btnleftall">
						<view class="btnleft" @tap="diseasecv">
							<image :src="require('../images/zitikuang.png')" />
							<span class="item">脑血管疾病</span>
						</view>
					</view>
					<view class="btnleftall">
						<view class="btnleft" @tap="diseaselc">
							<image :src="require('../images/zitikuang.png')" />
							<span class="item">缺血性心血管疾病风险</span>
						</view>
					</view>
					<view class="btnleftall">
						<view class="btnleft" @tap="diseaselu">
							<image :src="require('../images/zitikuang.png')" />
							<span class="item">肺癌风险</span>
						</view>
					</view>
					<view class="btnleftall">
						<view class="btnleft" @tap="diseaseck">
							<image :src="require('../images/zitikuang.png')" />
							<span class="item">肾功能不全风险</span>
						</view>
					</view>
				</view>
				<view class="btnright">
					<image :src="baseurl+ '/profile/weChatPicture/renti.png'" />
				</view>
			</view>
		</view>
		<!-- 心血管 -->
		<u-popup v-model="lookopen" mode="center" border-radius="30" :closeable='true'>
			<view class="popuptitle">未来十年心血管发病风险：
				{{lcdEvaRecord.riskLevel==1?'低危':''}}
				{{lcdEvaRecord.riskLevel==2?'中危':''}}
				{{lcdEvaRecord.riskLevel==3?'高危':''}}
			</view>
			<view style="font-size: 30rpx;">
				危险因素：
			</view>
			<u-table>
				<u-tr>
					<u-th>危险因素</u-th>
					<u-th>结果</u-th>
					<u-th>参考值</u-th>
				</u-tr>
				<u-tr>
					<u-td>年龄</u-td>
					<u-td v-if="lcdEvaRecord.age">{{lcdEvaRecord.age}}</u-td>
					<u-td v-else></u-td>
					<u-td>-</u-td>
				</u-tr>
				<u-tr>
					<u-td>糖尿病病史</u-td>
					<u-td v-if="lcdEvaRecord.disChd">
						{{lcdEvaRecord.disChd==1?'有':''}}
						{{lcdEvaRecord.disChd==0?'无':''}}</u-td>
					<u-td v-else></u-td>
					<u-td>无</u-td>
				</u-tr>
				<u-tr>
					<u-td>BMI</u-td>
					<u-td v-if="lcdEvaRecord.bmi">{{lcdEvaRecord.bmi}}</u-td>
					<u-td v-else></u-td>
					<u-td>
						大于等于18.5小于等于24
					</u-td>
				</u-tr>
				<u-tr>
					<u-td>总胆固醇</u-td>
					<!-- 	<u-td>{{cvdEvaRecord.tc}}</u-td> -->
					<u-td v-if="lcdEvaRecord.tc">{{lcdEvaRecord.tc}}</u-td>
					<u-td v-else></u-td>
					<u-td> 小于5.18mmol/L</u-td>
				</u-tr>
				<u-tr>
					<u-td>收缩压</u-td>

					<u-td v-if="lcdEvaRecord.sbp">{{lcdEvaRecord.sbp}}</u-td>
					<u-td v-else></u-td>
					<u-td>小于140mmHg</u-td>
				</u-tr>
				<u-tr>
					<u-td>吸烟情况</u-td>
					<u-td v-if="lcdEvaRecord.smoke">
						{{lcdEvaRecord.smoke==0?'不吸烟':''}}
						{{lcdEvaRecord.smoke==1?'偶尔吸烟':''}}
						{{lcdEvaRecord.smoke==2?'经常吸烟':''}}</u-td>

					<u-td v-else></u-td>
					<u-td>不吸烟</u-td>
				</u-tr>
			</u-table>
		</u-popup>
		<!-- 脑血管 -->
		<u-popup v-model="open" mode="center" border-radius="30" :closeable='true'>
			<view class="popuptitle">未来十年脑血管发病风险：
				{{cvdEvaRecord.riskLevel==1?'低危':''}}
				{{cvdEvaRecord.riskLevel==2?'中危':''}}
				{{cvdEvaRecord.riskLevel==3?'高危':''}}
			</view>
			<view style="font-size: 30rpx;">
				危险因素：
			</view>
			<u-table>
				<u-tr>
					<u-th>危险因素</u-th>
					<u-th>结果</u-th>
					<u-th>参考值</u-th>
				</u-tr>
				<u-tr>
					<u-td>年龄</u-td>
					<u-td v-if="cvdEvaRecord.age">{{cvdEvaRecord.age}}</u-td>
					<u-td v-else></u-td>
					<u-td>-</u-td>
				</u-tr>
				<u-tr>
					<u-td>冠心病病史</u-td>
					<u-td v-if="cvdEvaRecord.disChd">
						{{cvdEvaRecord.riskLevel==1?'有':''}}
						{{cvdEvaRecord.riskLevel==0?'无':''}}</u-td>
					<u-td v-else></u-td>
					<u-td>无</u-td>
				</u-tr>
				<u-tr>
					<u-td>脑血管疾病家族史</u-td>
					<u-td v-if="cvdEvaRecord.famDisCvd">
						{{cvdEvaRecord.famDisCvd==1?'有':''}}
						{{cvdEvaRecord.famDisCvd==0?'无':''}}</u-td>
					<u-td v-else></u-td>
					<u-td>无</u-td>
				</u-tr>
				<u-tr>
					<u-td>BMI</u-td>
					<u-td v-if="cvdEvaRecord.bmi">{{cvdEvaRecord.bmi}}</u-td>
					<u-td v-else></u-td>
					<u-td>
						大于等于18.5小于等于24

					</u-td>
				</u-tr>
				<u-tr>
					<u-td>总胆固醇</u-td>
					<!-- 	<u-td>{{cvdEvaRecord.tc}}</u-td> -->
					<u-td v-if="cvdEvaRecord.tc">{{cvdEvaRecord.tc}}</u-td>
					<u-td v-else></u-td>
					<u-td> 小于5.18mmol/L</u-td>
				</u-tr>
				<u-tr>
					<u-td>收缩压</u-td>

					<u-td v-if="cvdEvaRecord.sbp">{{cvdEvaRecord.sbp}}</u-td>
					<u-td v-else></u-td>
					<u-td>小于140mmHg</u-td>
				</u-tr>
				<u-tr>
					<u-td>吸烟情况</u-td>
					<u-td v-if="cvdEvaRecord.smoke">
						{{cvdEvaRecord.smoke==0?'不吸烟':''}}
						{{cvdEvaRecord.smoke==1?'偶尔吸烟':''}}
						{{cvdEvaRecord.smoke==2?'经常吸烟':''}}</u-td>

					<u-td v-else></u-td>
					<u-td>不吸烟</u-td>
				</u-tr>
				<u-tr>
					<u-td>饮酒情况</u-td>
					<u-td v-if="cvdEvaRecord.smoke">
						{{cvdEvaRecord.drink==0?'不饮酒':''}}
						{{cvdEvaRecord.drink==1?'偶尔饮酒':''}}
						{{cvdEvaRecord.drink==2?'经常饮酒':''}}</u-td>
					<u-td v-else></u-td>
					<u-td>不饮酒</u-td>
				</u-tr>
			</u-table>
		</u-popup>
		<!-- 肺癌 -->
		<u-popup v-model="openfeiai" mode="center" border-radius="30" :closeable='true'>
			<view class="popuptitle">未来十年肺癌发病风险：
				{{lucaEvaRecord.riskLevel==1?'低危':''}}
				{{lucaEvaRecord.riskLevel==2?'中危':''}}
				{{lucaEvaRecord.riskLevel==3?'高危':''}}
			</view>
			<view style="font-size: 30rpx;">
				危险因素：
			</view>
			<u-table>
				<u-tr>
					<u-th>危险因素</u-th>
					<u-th>结果</u-th>
					<u-th>参考值</u-th>
				</u-tr>

				<u-tr>
					<u-td>肺癌家族史</u-td>
					<u-td v-if="lucaEvaRecord.famDisLuca">
						{{lucaEvaRecord.famDisLuca==1?'有':''}}
						{{lucaEvaRecord.famDisLuca==0?'无':''}}</u-td>
					<u-td v-else></u-td>
					<u-td>无</u-td>
				</u-tr>
				<u-tr>
					<u-td>慢支炎/肺气肿疾病史</u-td>
					<u-td v-if="lucaEvaRecord.disCopd">
						{{lucaEvaRecord.disCopd==1?'有':''}}
						{{lucaEvaRecord.disCopd==0?'无':''}}</u-td>
					<u-td v-else></u-td>
					<u-td>无</u-td>
				</u-tr>
				<u-tr>
					<u-td>吸烟情况</u-td>
					<u-td v-if="lucaEvaRecord.smoke">
						{{lucaEvaRecord.smoke==0?'不吸烟':''}}
						{{lucaEvaRecord.smoke==1?'偶尔吸烟':''}}
						{{lucaEvaRecord.smoke==2?'经常吸烟':''}}</u-td>

					<u-td v-else></u-td>
					<u-td>不吸烟</u-td>
				</u-tr>

			</u-table>
		</u-popup>
		<!-- 肾功能不全 -->
		<u-popup v-model="lookopenck" mode="center" border-radius="30" :closeable='true'>
			<view class="popuptitle">未来十年肾功能不全发病风险：
				{{ckdEvaRecord.riskLevel==1?'低危':''}}
				{{ckdEvaRecord.riskLevel==2?'中危':''}}
				{{ckdEvaRecord.riskLevel==3?'高危':''}}
			</view>
			<view style="font-size: 30rpx;">
				危险因素：
			</view>
			<u-table>
				<u-tr>
					<u-th>危险因素</u-th>
					<u-th>结果</u-th>
					<u-th>参考值</u-th>
				</u-tr>

				<u-tr>
					<u-td>肾脏疾病家族史</u-td>
					<u-td v-if="ckdEvaRecord.famDisKd">
						{{ckdEvaRecord.famDisKd==1?'有':''}}
						{{ckdEvaRecord.famDisKd==0?'无':''}}</u-td>
					<u-td v-else></u-td>
					<u-td>无</u-td>
				</u-tr>
				<u-tr>
					<u-td>高血压疾病史</u-td>
					<u-td v-if="ckdEvaRecord.disHbp">
						{{ckdEvaRecord.disHbp==1?'有':''}}
						{{ckdEvaRecord.disHbp==0?'无':''}}</u-td>
					<u-td v-else></u-td>
					<u-td>无</u-td>
				</u-tr>
				<u-tr>
					<u-td>糖尿病疾病史</u-td>
					<u-td v-if="ckdEvaRecord.disDm">
						{{ckdEvaRecord.disDm==1?'有':''}}
						{{ckdEvaRecord.disDm==0?'无':''}}</u-td>
					<u-td v-else></u-td>
					<u-td>无</u-td>
				</u-tr>
				<u-tr>
					<u-td>吸烟情况</u-td>
					<u-td v-if="ckdEvaRecord.smoke">
						{{ckdEvaRecord.smoke==0?'不吸烟':''}}
						{{ckdEvaRecord.smoke==1?'偶尔吸烟':''}}
						{{ckdEvaRecord.smoke==2?'经常吸烟':''}}</u-td>

					<u-td v-else></u-td>
					<u-td>不吸烟</u-td>
				</u-tr>
				<u-tr>
					<u-td>饮酒情况</u-td>
					<u-td v-if="ckdEvaRecord.drink">
						{{ckdEvaRecord.drink==0?'不饮酒':''}}
						{{ckdEvaRecord.drink==1?'偶尔饮酒':''}}
						{{ckdEvaRecord.drink==2?'经常饮酒':''}}</u-td>

					<u-td v-else></u-td>
					<u-td>不吸烟</u-td>
				</u-tr>
			</u-table>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		riskWarning,
	} from '@/api/pagesB/threeHundredAndSixty/threeHundredAndSixty.js'
	import Prescriptionrecords from '../Prescriptionrecords/Prescriptionrecords.vue'
	import Healthindex from '../Healthindex/Healthindex.vue'
	import baseurl from '@/api/baseurl.js'
	export default {
		components: {
			Prescriptionrecords,
			Healthindex
		},
		data() {
			return {
				baseurl: '',
				lookopen: false,
				open: false,
				openfeiai: false,
				lookopenck: false,
				chartData: {},
				tabscurrent: 0,
				tabslist: [{
					name: '健康指数',
					orderStatus: '',
				}, {
					name: '疾病预警',
					orderStatus: 'WAIT_PAY',
				}, {
					name: '健康处方',
					orderStatus: 'WAIT_RECEIVED_GOODS',
				}],
				datalist: null,
				identity: '',
				cvdEvaRecord: {},
				lcdEvaRecord: {},
				ckdEvaRecord: {},
				lucaEvaRecord: {},
			};
		},
		onLoad() {
			this.baseurl = baseurl
		},
		onReady() {},
		methods: {
			goodsOrderinfo() {
				this.identity = uni.getStorageSync('userinfo').cardNo
				riskWarning(this.identity).then(res => {
					if (res.code == 200) {
						this.cvdEvaRecord = res.data.cvdEvaRecord
						this.lucaEvaRecord = res.data.lucaEvaRecord
						this.lcdEvaRecord = res.data.lcdEvaRecord
						this.ckdEvaRecord = res.data.ckdEvaRecord
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						})
					}
				})
			},
			// 脑
			diseasecv(item) {
				if (this.cvdEvaRecord) {
					this.open = true
				} else {
					this.$refs.uToast.show({
						title: '暂无内容',
						type: 'error'
					})
				}
			},
			// 心
			diseaselc() {
				if (this.lcdEvaRecord) {
					this.lookopen = true
				} else {
					this.$refs.uToast.show({
						title: '暂无内容',
						type: 'error'
					})
				}
			},
			// 肺癌
			diseaselu() {
				if (this.lucaEvaRecord) {
					this.openfeiai = true
				} else {
					this.$refs.uToast.show({
						title: '暂无内容',
						type: 'error'
					})
				}
			},
			diseaseck() {
				if (this.ckdEvaRecord) {
					this.lookopenck = true
				} else {
					this.$refs.uToast.show({
						title: '暂无内容',
						type: 'error'
					})
				}
			},
			//点击tabs
			tabschange(index) {
				console.log(index)
				this.tabscurrent = index;
				if (this.tabscurrent == 1) {
					this.goodsOrderinfo();
				}
				// this.orderTypeList.orderStatus = this.tabslist[index].orderStatus
			},
		},
	}
</script>

<style lang="scss">
	::v-deep .u-mode-center-box {
		width: 94% !important;
		padding: 40rpx 0;
	}

	.popuptitle {
		font-size: 30rpx;
		padding: 20rpx 50rpx 30rpx;
		text-align: center;
	}

	.app {
		width: 100%;
		height: 100vh;
		background-repeat: no-repeat;
		text-align: center;
		font-size: 36rpx;
		padding: 0;

		.top {
			height: 100rpx;
			width: 104%;
			transform: translateX(-2%);

			::v-deep .u-tabs {
				width: 100%;
				position: fixed;
				z-index: 999;
			}

			::v-deep .u-tabs-scroll-flex {
				background: #fff;
			}

			::v-deep .u-tabs__wrapper__nav__item {
				background: #FFFFFF;
			}
		}

		// .healths {
		// 	font-size: 22rpx;
		// }
		// }

		// }

		.health_body {
			width: 100%;

			.healthitem {
				text-align: left;
				padding: 0 0 40rpx 62rpx;
			}
		}

		.zx {
			width: 100%;
			height: 300rpx;
			// background: red;
		}

		// }

		.disease {
			width: 100%;
			position: relative;
			height: calc(100vh - 100rpx);
			z-index: 999;
			padding-top: 40rpx;
			color: #fff !important;

			.background-image {
				width: 100%;
				height: calc(100vh - 100rpx);
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}

			.btnleftalls {
				display: flex;
				width: 100%;
			}

			.left {
				display: flex;
				flex-wrap: wrap;
				width: 30%;
				height: 55vh;
			}

			.btnleftall {
				width: 100%;
			}

			.btnleft {
				position: relative;
				width: 86%;
				height: 160rpx;
				text-align: center;
				font-size: 20rpx;
				margin: 0 auto;

				image {
					position: absolute;
					width: 100%;
					height: 160rpx;
					left: 0;
					top: 0;
				}

				.item {
					display: inline-block;
					width: 80%;
					line-height: 30rpx;
					text-align: center;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.btnright {
				height: 55vh;
				width: 70%;

				image {
					width: 100%;
					height: 100%;
					// position: absolute;
					display: inline-block;
					// left: 21%;
				}
			}
		}
	}
</style>