NDAid/pages/report/report.vue

<template>
	<view class="">
		<navbar :title="$t('show_report')" size="48" :backtext="$t('back')"  color="#fff"></navbar>
	</view>
	<uv-toast ref="toast"></uv-toast>
	<view class="app_content">
		<view class="page">
			<view class="bottomarc"></view>
			<uv-row justify="space-between" customStyle="margin-top: 30%">
				<uv-col span="10" offset="1" class="box1">
					<uv-row justify="space-between" class="item">
						<uv-col span="4" align="center">{{$t('illness_title')}}</uv-col>
						<uv-col span="4" align="center">{{$t('report_score')}}</uv-col>
						<uv-col span="4" align="center">{{$t('report_result')}}</uv-col>
					</uv-row>
					<uv-row justify="space-between" v-for="(item,index) in list" :key="index" class="item">
						<uv-col span="4" align="center"> {{item.diseasename}}</uv-col>
						<uv-col span="4">
							<uv-text :type="item.havrisk>0?'error':'success'" :text="item.scoreresult?item.scoreresult:0"  align="center"></uv-text>
						</uv-col>
						<uv-col span="4">
								<uv-text :type="item.havrisk>0?'error':'success'" :text="item.havrisk>0?$t('risk'):$t('low_risk')" align="center"></uv-text>
						</uv-col>
					</uv-row>
				</uv-col>
			</uv-row>
			<view class="advicearea">
				<uv-row justify="space-between" class="item">
					<uv-col span="12" align="center">
						<view class="advicelabel">{{$t('report_detail')}}</view>
					</uv-col>
				</uv-row>
			</view>
			<view v-if="labellist.length>0"> 
				<uv-tabs :list="labellist" @click="click" customStyle="align-items: center"
				itemStyle="font-size:20px;height:40px;" current="0" @change="change"
				:activeStyle="activeStyle" lineWidth="30"
				></uv-tabs>
			</view>
			<view class="info_div">
				<view class=""  v-if="selectitem">
					<!-- <view class='diseasetitlestr'>
					  {{selectitem.titlestr}}
					</view> -->
					<br />
					<view v-show="selectitem.havrisk==0">
						<uv-text :text="$t('report_text_1')+selectitem.risklimit+$t('report_text_1_1')" align="center" type="success"></uv-text>
					</view>
					<view v-if="selectitem.havrisk==1">
						<uv-text :text="selectitem.riskmsg" align="center" type="error" :customStyle="customStyleRiskmsg"></uv-text>
						<uv-text :text="$t('report_error_text_1')" align="center" :customStyle="customStyleErrorText"></uv-text>
						<uv-text :text="$t('report_error_text_2')" align="center" :customStyle="customStyleErrorText"></uv-text>
						<uv-text :text="$t('report_error_text_3')" align="center" :customStyle="customStyleErrorText"></uv-text>
						<uv-row customStyle="margin-top:20rpx">
							<uv-col span="12">
								 <view v-show="selectitem.noticelist.length>0">
									<view v-for="(item,index) in  selectitem.noticelist" :key="index">
										<uv-text :text="index+1+'、'+item"></uv-text>
									 </view>
								 </view>
							</uv-col>
						</uv-row>
					</view>
					<view  v-show="selectitem.havrisk==1" class="noticearea">
						<uv-row customStyle="">
							<uv-col span="12" align="center">
								 <view class="noticelabel">{{$t('health_advice')}}</view>
							</uv-col>
						</uv-row>
						<uv-row customStyle="">
							<uv-col span="12">
								<view v-show="selectitem.advicelist.length>0">
									<view v-for="(item,index) in  selectitem.advicelist" :key="index">
										<uv-text :text="index+1+'、'+item"></uv-text>
									</view>
								</view>
							</uv-col>
						</uv-row>
					</view>
				</view>
				<view class="report_explain">
					<view class="advicearea">
						<uv-row justify="space-between" class="item">
							<uv-col span="12" align="center">
								<view class="advicelabel">{{$t('report_explain')}}</view>
							</uv-col>
						</uv-row>
					</view>
					<view class="info_div1">
						<uv-text v-if="info.age>=40" :text="$t('report_explain_text_1')" type="info" align="center"></uv-text>
						<uv-text v-if="info.gender=='男'" :text="$t('report_explain_text_2')" type="info" align="center"></uv-text>
						<uv-text v-if="info.bmi>24" 
							:text="$t('report_explain_text_3')+info.bmi+$t('report_explain_text_3_1')+info.height+$t('report_explain_text_3_2')+info.weightbmi24+$t('report_explain_text_3_3')" type="info" align="center"></uv-text>
						<uv-text v-if="info.sbp>=140" :text="$t('report_explain_text_4')" type="info"></uv-text>
					</view>
					<view class='info_div1'>
						<uv-text v-if="info.fhstroke>0||info.fhheart>0" :text="$t('report_explain_text_5')" type="info" align="center"></uv-text>
						<uv-text v-if="info.issmoke>0||info.isdrink>0||info.isunsport>0" :text="$t('report_explain_text_6')" type="info" align="center"></uv-text>
						<uv-text v-if="info.age>=40&&info.issmoke>0" :text="$t('report_explain_text_7')" type="info" align="center"></uv-text>
						<view class="" v-if="info.isinspectabodomen>0||info.isteghtness>0">
							<uv-text v-if="info.isinspectabodomen>1" :text="$t('report_explain_text_8')" type="info" align="center"></uv-text>
							<uv-text v-if="info.isteghtness>1" :text="$t('report_explain_text_9')" type="info" align="center"></uv-text>
						</view>
					</view>
				</view>
				<uv-line color="#933333"></uv-line>
				<view class="healthinfolist">
					<view class="grid">
						<uv-row justify="space-between" class="item">
							<uv-col span="3" align="center">
								<uv-text :text="$t('healthy_habits')" :bold="true" align="center"></uv-text>
							</uv-col>
							<uv-col span="2" align="center">
								<uv-text :text="$t('y_n')" :bold="true" align="center"></uv-text>
							</uv-col>
							<uv-col span="7" align="center">
								<uv-text :text="$t('healthy_personal_ratios')" :bold="true" align="center"></uv-text>
							</uv-col>
						</uv-row>
						<uv-row justify="space-between" class="item" v-for="(item,index) in healthlist" :key="index">
							<uv-col span="3" align="center">
								<uv-text :text="item.disstr" align="center" size="12"></uv-text>
							</uv-col>
							<uv-col span="2" align="center">
								<uv-text :text="item.strvalue" align="center"  size="12"></uv-text>
							</uv-col>
							<uv-col span="4" align="center">
								<uv-text :text="$t('all_people')+item.allpre+'%'" align="center"  size="12"></uv-text>
							</uv-col>
							<uv-col span="3" align="center">
								<uv-text :text="$t('group_people')+item.agepre+'%'" align="center"  size="12"></uv-text>
							</uv-col>
						</uv-row>
					</view>
					<uv-text :text="$t('report_text_4')"  align="center" type="info" :bold="true"></uv-text>
				</view>
				<!-- <uv-line color="#933333"></uv-line>
				<view class="info_div1">
					<uv-text :text="$t('report_text_5')"  align="center" :bold="true"></uv-text>
					<br />
					<uv-text :text="$t('report_text_6')"  type="info"></uv-text>
					<uv-text :text="$t('report_text_7')"  type="info"></uv-text>
					<uv-text :text="$t('report_text_8')"  type="info"></uv-text>
				</view> -->
				<uv-line color="#933333"></uv-line>
				<view class="info_div1">
					<uv-text :text="$t('report_text_9')" :bold="true"  align="center"></uv-text>
				</view>
				<uv-line color="#933333"></uv-line>
				<br />
				<!-- <share @dosharewechat="share"></share> -->
				<br>
				<view class="statement">
					<text class="statement_title">Data source:</text>	
					<br />
					<text class="statement_item">【1】Guideline for the prevention and treatment of type 2 diabetes mellitus in China(2020 edition)(Part 1) [J]. Chinese Journal of Practical Internal Medicine, 2021, 41 (08): 668-695. DOI:10.19538/j.nk2021080106.</text>
					<br />
					<text class="statement_item">【2】Guideline for the prevention and treatment of type 2 diabetes mellitus in China(2020 edition)(Part 2) [J]. Chinese Journal of Practical Internal Medicine, 2021, 41 (09): 757-784. DOI:10.19538/j.nk2021090106.</text>
					<br />
					<text class="statement_item">【3】Yang X, Li J, Hu D, Chen J, Li Y, Huang J, Liu X, Liu F, Cao J, Shen C, Yu L, Lu F, Wu X, Zhao L, Wu X and Gu Dongfeng. Predicting the 10-Year Risks of Atherosclerotic Cardiovascular Disease in Chinese Population: The China-PAR Project (Prediction for ASCVD Risk in China). Circulation. 2016;134:1430-40.</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {querymergereportlistbyuserid,queryuserhealthinfobyuid,querystemperinfobyuserid} from "@/common/api/health.js"
	import {tohome} from "/common/js/common.js"
	import share from "@/components/share/share.vue"
	import {addlog} from "@/common/api/system.js"
	
	export default {
		data() {
			return {
				list:[], 
				healthlist:[],
				info:{},
				userinfo:{},
				selectuser:{},
				labellist:[],
				activeStyle:{
					color:'#648EB8',
					fontWeight: 'bold',
					transform: 'scale(1.05)',
					// borderBottom:"2rpx double #648eb8"
				},
				selectitem:false,
				customStyleRiskmsg:{
					fontSize:'20px',
					marginBottom:'10rpx'
				},
				customStyleErrorText:{
					fontSize:'18px',
					marginBottom:'10rpx',
					color:"#648eb8"
				},
				share_userid:false,
				share_fmemberid:false
			}
		},
		methods: {
			getlist(){
				let data ={
					userid:this.share_userid?this.share_userid:this.userinfo.id,
					fmemberid:this.share_fmemberid?this.share_fmemberid:this.selectuser.fmemberid
				}
				querymergereportlistbyuserid(data).then(res=>{
					res = res.data
					if(0==res.code){
						this.$refs.toast.show({
							type: 'error',
							message: res.errmsg
						})
						return false
					}
					let list = res.resultData
					list.map((item,index)=>{
						item.noticelist =[];
						item.advicelist=[]
						if(parseInt(item.scoreresult)>parseInt(item.risklimit)){
							item.havrisk =1
							item.answerlist.map((alitem,alindex)=>{
								if(alitem.noticememo!=""){
									if(alitem.noticetype==1){
										item.noticelist.push(alitem.noticememo)
									}
									if(alitem.noticetype==2){
										item.advicelist.push(alitem.noticememo)
									}
								}
							})
						}else{
							item.havrisk =0
						}
						this.labellist.push({name:item.diseasename})
					})
					this.list = list
					this.selectitem = list[0]
				})
			},
			getinfo(){
				let data ={
					userid:this.share_userid?this.share_userid:this.userinfo.id,
					fmemberid:this.share_fmemberid?this.share_fmemberid:this.selectuser.fmemberid
				}
				queryuserhealthinfobyuid(data).then(res=>{
					res = res.data
					if(0==res.code){
						this.$refs.toast.show({
							type: 'error',
							message: res.errmsg
						})
						return false
					}
					if(200==res.code){
						this.info = res.resultData
					}
				})
			},
			gethealthlist(){
				let data ={
					userid:this.share_userid?this.share_userid:this.userinfo.id,
					fmemberid:this.share_fmemberid?this.share_fmemberid:this.selectuser.fmemberid
				}
				querystemperinfobyuserid(data).then(res=>{
					res = res.data
					if(0==res.code){
						this.$refs.toast.show({
							type: 'error',
							message: res.errmsg
						})
						return false
					}
					if(200==res.code){
						let list =  res.resultData
						list.map(item=>{
							if(item.hvalue==1){
							  item.strvalue=this.$t('y')
							}else{
							  item.strvalue=this.$t('n')
							}
						})
						this.healthlist =list
					}
				})
			},
			click(item){
				let index = item.index
				this.selectitem = this.list[index]
			},
			change(){
			},
			share(data){
				// this.$refs.toast.show({
				// 	type: 'error',
				// 	message: data.shareimg
				// })
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href:"testapp://pages/report/report?userid="+this.userid+"&fmemberid="+this.selectuser.fmemberid,
					//title: this.$t('navigationBarTitleText')+"分享",
					title: "分享",
					summary: "心脑血管早期筛查，简单易得，有利无害，分享给朋友家人。",
					imageUrl: data.shareimg,
					success: function (res) {
						addlog({
							json: JSON.stringify(res),
							type: 'uniapp信息'
						})
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						addlog({
							json: JSON.stringify(err),
							type: 'uniapp错误'
						})
						console.log("fail:" + JSON.stringify(err));
					}
				})
			}
		},
		mounted() {
			this.userinfo = uni.getStorageSync("userinfo")
			this.selectuser = uni.getStorageSync("selectuser")
			uni.setNavigationBarTitle({
				title: this.$t('show_report')
			});
			this.getlist()
			this.getinfo()
			this.gethealthlist()
		},
		onLoad: function (option) {
			this.share_userid=option.userid
			this.share_fmemberid=option.fmemberid
		},
		onBackPress:function(option){
			if(this.share_userid){
				uni.redirectTo({
					url: '/pages/index/show'
				});
			}else{
				tohome()
			}
			return true
		}
	}
</script>

<style scoped>
	.page{
		overflow-y: auto;
	}
	.box1{
		background-color: #fff;
		border-radius:20rpx;
		box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.3);
		display:flex;
		flex-direction:column;
		align-items:center;
		width: 80%;
		padding: 1em;
		margin-bottom: 30rpx;
	}
	.box1 .item{
		margin-bottom: 10px;
	}
	.advicearea{
	    width:100%;
	    margin-top:35rpx;
	    margin-bottom:15rpx;
	}
	.advicelabel{
	    width:300rpx;
	
	    height:100rpx;
	    font-size:40rpx;
	    color:#648EB8;
	   /* border-radius:50rpx;*/
	   border-top:2rpx double #648eb8;
	    border-bottom:1rpx solid #648EB8;
	   /* box-shadow: 1px 2px 3px 2px rgba(0, 0, 0, 0.1);*/
	    display:flex;
	    justify-content:center;
	    align-items:center; 
	}
	.diseasetitlestr{
	    width:100%;
	    display:flex;
	    justify-content:center;
	    font-size:36rpx;
		margin-bottom: 20rpx;
		margin-top: 30rpx;
	    color:#993333;
	}
	.noticearea{
	    width:100%; 
	    margin-top:35rpx;
	    margin-bottom:15rpx;
		display:flex;
		flex-direction: column;
		justify-content:center;
	}
	.noticelabel{
	    width:300rpx;
	    height:100rpx;
	    font-size:40rpx;
	    color:#993333;
	    /*border-radius:50rpx;*/
		border-top:2rpx double #993333;
	    border-bottom:1rpx solid #993333;
	 /*   box-shadow: 1px 2px 3px 2px rgba(0, 0, 0, 0.1);*/
	    display:flex;
	    justify-content:center;
	    align-items:center; 
	    margin-bottom:30rpx;
	}
	.info_div{
		width: 90%;
		margin: 0 auto;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}
	.info_div1{
	    margin-top:10rpx;
	    margin-bottom:10rpx;    
	}
	.report_explain{
		margin-bottom: 20rpx;
	}
	.healthinfolist{
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}
	.healthinfolist .item:first {
		margin-bottom: 8rpx;
	}
	.healthinfolist .item {
		margin-bottom: 7rpx;
	}
	.healthinfolist .item:last-child {
		margin-bottom: 10rpx;
	}
	.healthinfolist .grid {
		margin-bottom: 8rpx;
	}
	.app_content{
	}
	.bottomarc{
		 height:30%;
	}
	.statement{
		padding: 10rpx;
	}
	.statement .statement_title{
		font-size: 24rpx;
		font-weight: bold;
	}
	.statement .statement_item{
		font-size:20rpx;
		line-height: 22rpx !important;
		display: inline-block;
	}
</style>