property/user_ui/health/pages/health/detail.vue

<template>
  <view class="hdetail" :style="'padding-top:'+nvaHeight+'px;'">
		<view class="navbox">
			<uni-nav-bar  color="#ffffff" title="健康档案"  :background-color="backgroundColor" :border="false" statusBar='true' fixed="true" @clickLeft="getBackFn">
			</uni-nav-bar>
			<!-- 家人 -->
			<view class="headbox flexc" :style="'backgroundColor:'+backgroundColor">
				<view class="htop" :class="tabval==idx?'act':''" v-for="(ite,idx) in list" :key="idx" @click="getTabFn(idx)">
					<view class="img"><image :src="heada" class="imaga"></image></view>
					<view class="tit">{{ite.tit}}</view>
				</view>
				<view class="htop"  @click="getAddFn">
					<view class="img add"><image :src="addimg"></image></view>
					<view class="tit">添加</view>
				</view>
				
			</view>
		</view>
		<!-- 主体 -->
		<view class="wymain" >
			<view class="headbox flexc" style="opacity: 0;">
				<view class="htop">
					<view class="img"><image :src="heada" class="imaga"></image></view>
					<view class="tit">户主</view>
				</view>
			</view>
			<view class="hmain">
				<view class="hmtop mb20">
					<image :src="heada" class="head"></image>
					<view class="hmtopa flex1">
						<view class="flex mb14">
							<view class="tit">袁玥</view>
							<view class="btn btna">本人</view>
							<view class="btn btnb">党员</view>
							<view class="btn btnc">五保户</view>
						</view>
						<view class="hmtopb flexc mb10">
							<image :src="car" class="limg"></image>
							<view >
								<view class="hmtit">身份证号</view>
								<view class="hmtxt flexc">
									<view class="hmtxts">{{lookfalg?cartit:carpass}}</view>
								<image :src="eye" v-if="lookfalg" @click="lookfalg=false"></image>
								<image :src="neye" v-else @click="lookfalg=true"></image>
								
								</view>
							</view>
						</view>
						<view class="hmtopb flexc ">
							<image :src="adr" class="limg"></image>
							<view >
								<view class="hmtit">家庭住址</view>
								<view class="hmtxt">幸福小区1号楼3单元1101</view>
							</view>
						</view>
					</view>
					<view class="code" @click="getCodeFn">
						<image :src="headb"></image>
						<view>点击放大二维码</view>
					</view>
				</view>
				<view class="hline mb18 flexc">
					<view class="tit">MORE</view>
					<view class="line"></view>
				</view>
				<view class="detail mb24">
					<view class="detop mb14">
						<image :src="icon"></image>
						<view class="flexcj detit">基础信息<view class="detxt">更新时间：2024-10-24</view></view>
					</view>
					<view class="dlists">
						<view class="lists">
							<view class="ltit">性别</view><view class="ltxt">女</view>
						</view>
						<view class="lists">
							<view class="ltit">年龄</view><view class="ltxt">38岁</view>
						</view>
						<view class="lists">
							<view class="ltit">血型</view><view class="ltxt">B型</view>
						</view>
						<view class="lists">
							<view class="ltit">血压</view><view class="ltxt">65/120mmHg</view>
						</view>
						<block v-if="zhanList[0].zhanflag">
							<view class="lists">
								<view class="ltit">身高</view><view class="ltxt">165cm</view>
							</view>
							<view class="lists">
								<view class="ltit">体重</view><view class="ltxt">67kg</view>
							</view>
							<view class="lists">
								<view class="ltit">腰围</view><view class="ltxt">85cm</view>
							</view>
							<view class="lists">
								<view class="ltit">体质指数</view><view class="ltxt">142kg/m2</view>
							</view>
							<view class="lists">
								<view class="ltit">脉搏</view><view class="ltxt">90bpm</view>
							</view>
							<view class="lists">
								<view class="ltit">体温</view><view class="ltxt">36.4℃</view>
							</view>
							<view class="lists">
								<view class="ltit">呼吸频率</view><view class="ltxt">50次/分钟</view>
							</view>
						</block>
					</view>
					<view class="upbox" @click="getZhanFn(0)">
						<view>{{zhanList[0].zhanflag?'折叠':'展开'}}</view>
						<image :src="upimg" :class="zhanList[0].zhanflag?'':'zhe'"></image>
					</view>
				</view>
				<view class="detail mb24">
					<view class="detop mb14">
						<image :src="icon"></image>
						<view class="flexcj detit">健康病史<view class="detxt">更新时间：2024-10-24</view></view>
					</view>
					<view class="dlists">
						<view class="lists w100">
							<view class="ltit">基础疾病</view><view class="ltxt">慢性支气管炎</view>
						</view>
						<view class="lists w100">
							<view class="ltit">病史</view><view class="ltxt">高血压、高血糖、甲状腺结节 拷贝</view>
						</view>
						<block v-if="zhanList[1].zhanflag">
							<view class="lists">
								<view class="ltit">近视/远视</view><view class="ltxt">近视</view>
							</view>
							<view class="lists">
								<view class="ltit">近视/远视度数</view><view class="ltxt">左：375 右：400</view>
							</view>
						</block>
					</view>
					<view class="upbox" @click="getZhanFn(1)">
						<view>{{zhanList[1].zhanflag?'折叠':'展开'}}</view>
						<image :src="upimg" :class="zhanList[1].zhanflag?'':'zhe'"></image>
					</view>
				</view>
				<view class="detail">
					<view class="detop mb14">
						<image :src="icon"></image>
						<view class="flexcj detit">兴趣爱好<view class="detxt">更新时间：2024-10-24</view></view>
					</view>
					<view class="dlists">
						<view class="lists w100">
							<view class="ltit">兴趣爱好</view>
							<view class="ltxt">喜欢运动，经常参加马拉松比赛</view>
							<view class="ltxt">平时也好书法，参加书法展</view>
						</view>
					</view>
				</view>
				<view class="dbtns flexcj mt55">
					<view class="btna">删除档案</view>
					<view class="btnb">修改档案</view>
				</view>
			</view>
		</view>
	<loading></loading>
	<pop-up :type="type" @getClose='getClose'></pop-up>
  </view>
</template>

<script>
	import popUp from "@/health/components/popup/popup.vue"
  export default {
	components:{popUp},
	data(){
		return{
			nvaHeight:44,
			// activeColor:'#A7CDF9',
			// nactiveColor:'#DADADA',
			backgroundColor: "transparent",
			heada:require("@/health/static/health/heada.png"),
			headb:require("@/health/static/health/headb.png"),
			headc:require("@/health/static/health/headc.png"),
			headd:require("@/health/static/health/headd.png"),
			heade:require("@/health/static/health/heade.png"),
			headf:require("@/health/static/health/headf.png"),
			adr:require("@/health/static/health/adr.png"),
			car:require("@/health/static/health/car.png"),
			icon:require("@/health/static/health/icon.png"),
			addimg:require("@/health/static/health/add.png"),
			eye:require("@/static/images/home/eye.png"),
			neye:require("@/static/images/neye.png"),
			upimg:require("@/static/images/up.png"),
			lookfalg:false,	
			tabval:0,
			cartit:'378554199010206016',
			carpass:'3********6',
			list:[{tit:'户主'},{tit:'丈夫'},{tit:'儿子'},{tit:'女儿'},{tit:'婆婆'},{tit:'公公'},],
			datainfo:{
				
			},
			zhanList:[{zhanflag:true},{zhanflag:true},{zhanflag:true},{zhanflag:true}],
		}
	},
	watch:{
		lookfalg(val){
			if(val){
				
			}
		}
	},
	onPageScroll(e) {
		var scrollTop = Number(e.scrollTop);
		if (scrollTop > 0) {
			this.backgroundColor = '#48CC9A'
		} else {
			this.backgroundColor = 'transparent'
		}
	},
    onLoad: function() {
		uni.getSystemInfo({
			success: (e) => {
				this.nvaHeight = Number(e.statusBarHeight)+44;
			}
		})
    },
	methods:{	
		getClose(){
			this.type="";
		},
		getCodeFn(){
			this.type='code'
		},
		getZhanFn(idx){
			this.zhanList[idx].zhanflag=!this.zhanList[idx].zhanflag
		},
		getBackFn(){
			uni.navigateBack({
				delta:1
			})
		},
		getCode(code){
			var idCard='123456789'
			const firstPart = idCard.slice(0, 1);  
			  // 生成中间8位的星号  
			  const middlePart = '*'.repeat(idCard.length-2);  
			  // 获取后4位  
			  const lastPart = idCard.slice(idCard.length-1); 
			  var s= firstPart + middlePart + lastPart;
			  console.log(s)
			  // return firstPart + middlePart + lastPart;
		},
		getTabFn(val){
			this.tabval=val;
		},
		getDataFn(){
			var params={
				pageSize:this.pageSize,
				pageNum: this.pageNum,
			}
			params.noticeType=this.tabidx
			getNoticeList(params).then(res=>{
				if(res.code==200){
					
				}else{
					this.$toast(res.msg)
				}
			})
			
		},
		
	}
  }
</script>
<style>
	page{background:#F4F6F8;}
</style>
<style lang="scss" scoped>
.w100{width: 100%;}
.hdetail{
	background: linear-gradient(180deg, #45CB99 0%, rgba(238,227,197,0) 100%) no-repeat;background-size: 100% 782rpx;min-height: 100vh;box-sizing: border-box;
}
.headbox{padding: 14rpx 20rpx 20rpx;overflow: auto;
	.htop{display: flex;flex-direction: column;align-items: center;margin: 0 16rpx;
		.img{width: 88rpx;height: 88rpx;border-radius: 50%;border: 8rpx solid #D4F6E5;margin-bottom: 16rpx;display: flex;align-items: center;justify-content: center;box-sizing: border-box;
		&.add{border: none;
			image{width: 86rpx;height: 86rpx;}
		}
			image{border-radius: 50%;}
			.imaga{width: 70rpx;height: 74rpx;}
			.imagb{width: 70rpx;height: 72rpx;}
			.imagc{width: 70rpx;height: 76rpx;}
			.imagd{width: 70rpx;height: 70rpx;}
			.image{width: 70rpx;height: 74rpx;}
		}
		.tit{font-weight: 500;font-size: 22rpx;color: #3FA47D;}
		&.act{
			.tit{font-weight: bold;color: #FFFFFF;}
		}
	}
}
.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;	}
.wymain{z-index: 2;position: relative;padding: 0 24rpx 24rpx;}
.hmain{background: #FFFFFF;border-radius: 20rpx;padding: 32rpx 24rpx 44rpx;
	.hmtop{display: flex;
		.head{width: 60rpx;height: 60rpx;border-radius: 8rpx;flex: 0 0 auto;margin-right: 28rpx;}
		.hmtopa{
			.tit{font-weight: bold;font-size: 32rpx;
color: #272727;}
			.btn{font-weight: bold;font-size: 22rpx;min-width: 64rpx;height: 30rpx;padding: 0 10rpx;box-sizing: border-box;margin-left: 14rpx;border-radius: 16rpx;display: flex;align-items: center;justify-content: center;margin-top: 6rpx;color: #FFFFFF;
			&.btna{border: 2rpx solid #2589FF;color: #2589FF;}
			&.btnb{background:#FF6969;}
			&.btnc{background:#F6C576;}
			}
		}
		.hmtopb{
			image{flex: 0 0 auto;}
			.limg{width: 46rpx;height: 46rpx;margin-right: 22rpx;}
			.hmtit{font-size: 26rpx;color: #AAAAAA;font-weight: 500;margin-bottom: 4rpx;}
			.hmtxt{font-size: 26rpx;color: #272727;font-weight: 500;
				.hmtxts{min-width: 270rpx;}
			 image{width: 26rpx;height: 18rpx;margin-left: 16rpx;
				// image{width: 100%;height: 100%;}
			 }
			}
		}
		.code{flex:0 0 auto;
			view{font-weight: 500;font-size: 20rpx;color: #AAAAAA;}
			image{width: 132rpx;height: 132rpx;margin-bottom: 10rpx;}
		}
	}
	.hline{
		.tit{font-weight: bold;font-size: 20rpx;color: #48CB9B;font-style: italic;margin-right: 22rpx;flex: 0 0 auto;}
		.line{flex: 1;border-bottom: 2rpx solid #E6E6E6;}
	}	
	.detail{
		.detop{position: relative;
			image{width: 30rpx;height: 30rpx;position: absolute;left: 0;top: 7rpx;z-index: 0;}
			.detit{font-size: 16px;color: #272727;font-weight: bold;line-height: 44rpx;padding-left: 10rpx;position: relative;z-index: 2;}
			.detxt{font-weight: 500;font-size: 22rpx;color: #666666;line-height: 36rpx;}
		}
	}
	.dlists{display: flex;align-items: center;flex-wrap: wrap;
		.lists{line-height: 36rpx;padding: 12rpx 0 12rpx 12rpx;min-width: 23%;box-sizing: border-box;
			.ltit{font-weight: 500;font-size: 26rpx;color: #AAAAAA;margin-bottom: 4rpx;}
			.ltxt{font-weight: 500;font-size: 26rpx;color: #272727;}
		}
	}
}
.upbox{display: flex;align-items: center;justify-content: center;margin-top: 8rpx;padding: 10rpx 0;
		image{width: 24rpx;height: 20rpx;transition: all 0.3s;margin-left: 14rpx;
			&.zhe{transform: rotate(-180deg);}
		}
		view{font-weight: 500;font-size: 22rpx;color: #AAAAAA;}
	}
.dbtns{
	view{width: 314rpx;box-sizing: border-box;display: flex;align-items: center;justify-content: center;font-weight: bold;font-size: 26rpx;height: 88rpx;border-radius: 10px;
	&.btna{border: 1px solid #FF6969;background: #FFEEEE;color: #FF6969;}
	&.btnb{background: #46CB99;color: #FFFFFF;}
	}
}
</style>