|
@@ -0,0 +1,354 @@
|
|
|
+<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>
|