|
@@ -0,0 +1,307 @@
|
|
|
+<template>
|
|
|
+ <view class="hb column hidden container">
|
|
|
+ <image class="bg" src="/static/images/health/jkda_top_bg.png" mode="widthFix"></image>
|
|
|
+ <view :style="{height: statusBarHeight,background: bgColor }"></view>
|
|
|
+ <u-navbar
|
|
|
+ title="健康档案" titleStyle="font-weight: bold;"
|
|
|
+ @rightClick="rightClick"
|
|
|
+ :autoBack="true"
|
|
|
+ :bg-color="bgColor"
|
|
|
+ >
|
|
|
+ </u-navbar>
|
|
|
+ <scroll-view class="content" :scroll-y="true">
|
|
|
+ <view class="justify-between align-center bg-white radius12 p28">
|
|
|
+ <view class="justify-start align-center">
|
|
|
+ <image :src="maleurl" class="w140 h140"></image>
|
|
|
+ <view class="ml30">
|
|
|
+ <view class="bold fs32 mb12">张小安</view>
|
|
|
+ <view class="justify-start align-center fs24">
|
|
|
+ <text class="orangebox">女</text>
|
|
|
+ <text class="orangebox ml12">56岁</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-icon name="arrow-right"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="fs36 bold mt20">健康数据</view>
|
|
|
+ <view class="health-monitoring">
|
|
|
+ <view class="health-monitoring-item" v-for="(item,index) in indexInfo" :key="index"
|
|
|
+ @tap="handleMonitoring(item)">
|
|
|
+ <view class="health-monitoring-title">
|
|
|
+ <view>
|
|
|
+ <view class="health-monitoring-maintitle bold">{{item.type.type}}</view>
|
|
|
+ <view>{{item.type.title}}</view>
|
|
|
+ </view>
|
|
|
+ <image :src="item.type.icon" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ <view class="health-bmi mt50" v-if="index==0">
|
|
|
+ <view class="justify-between align-center mb12">
|
|
|
+ <view class="justify-start align-center ">
|
|
|
+ <text class="color-text2 fs24 mr20">身高</text>
|
|
|
+ <view >{{item.height||'--'}}</view>
|
|
|
+ </view>
|
|
|
+ <image src="/static/images/health/services_edit_icon.png" class="w32 h32"></image>
|
|
|
+ </view>
|
|
|
+ <view class="justify-between align-center">
|
|
|
+ <view class="justify-start align-center ">
|
|
|
+ <text class="color-text2 fs24 mr20">体重</text>
|
|
|
+ <view >{{item.weight||'--'}}</view>
|
|
|
+ </view>
|
|
|
+ <image src="/static/images/health/services_edit_icon.png" class="w32 h32"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-else>
|
|
|
+ <view class="health-monitoring-res resnum">{{item.data || '--'}}</view>
|
|
|
+ <view class="health-monitoring-time">{{item.date && item.date.substring(5,16)}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="fs36 bold mtb20">健康史</view>
|
|
|
+ <view class="cardbox">
|
|
|
+ <view class="health-item" v-for="(item,index) in healthRecordsList" :key="index" @click="handleEditHealth(item,1)">
|
|
|
+ <image class="health-bgicon" :src="item.bgicon"></image>
|
|
|
+ <view class="health-item-info">
|
|
|
+ <view class="cardbox-maintitle" style="margin-bottom: 0;">{{item.title}}</view>
|
|
|
+ <view class="text-overflow" style="margin-top: 20rpx;">{{item.desc || "尚未记录"}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="h80"></view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ statusBarHeight:'',
|
|
|
+ top:0,
|
|
|
+ famaleurl:"/static/images/health/female_profile.png",
|
|
|
+ maleurl:"/static/images/health/my_heads.png",
|
|
|
+ indexInfo: [
|
|
|
+ {
|
|
|
+ data: "",
|
|
|
+ date: "",
|
|
|
+ height:'',
|
|
|
+ weight:'',
|
|
|
+ type: {
|
|
|
+ type: "BMI 24.8",
|
|
|
+ title: "肥胖",
|
|
|
+ icon:"/static/images/health/BMI_icon.png"
|
|
|
+ }
|
|
|
+ },{
|
|
|
+ data: "",
|
|
|
+ date: "",
|
|
|
+ type: {
|
|
|
+ type: "腰围",
|
|
|
+ title: "腰围",
|
|
|
+ icon:"/static/images/health/waist_circumference_icon.png"
|
|
|
+ }
|
|
|
+ },{
|
|
|
+ data: "",
|
|
|
+ date: "",
|
|
|
+ type: {
|
|
|
+ type: "臀围",
|
|
|
+ title: "臀围",
|
|
|
+ icon:"/static/images/health/hip_circumference_icon.png"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ data: "",
|
|
|
+ date: "",
|
|
|
+ type: {
|
|
|
+ type: "血糖",
|
|
|
+ title: "血糖健康监测",
|
|
|
+ icon: "/static/images/health/blood_sugar_icon.png"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ data: "",
|
|
|
+ date: "",
|
|
|
+ type: {
|
|
|
+ type: "血压",
|
|
|
+ title: "血压健康监测",
|
|
|
+ icon:"/static/images/health/blood_pressure_icon.png"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ data: "",
|
|
|
+ date: "",
|
|
|
+ type: {
|
|
|
+ type: "尿酸",
|
|
|
+ title: "尿酸健康监测",
|
|
|
+ icon:"/static/images/health/uric_acid_icon.png"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ healthRecordsList: [
|
|
|
+ {
|
|
|
+ title: '疾病史',
|
|
|
+ type: "healthHistory",
|
|
|
+ desc: '',
|
|
|
+ bgicon: "/static/images/health/jbs_icon.png",
|
|
|
+ }, {
|
|
|
+ title: '症状史',
|
|
|
+ type: "symptomHistory",
|
|
|
+ desc: '',
|
|
|
+ bgicon: "/static/images/health/zzs_icon.png",
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 计算属性的 getter
|
|
|
+ bgColor: function() {
|
|
|
+ var top=this.top/30;
|
|
|
+ return 'rgba(11,179,242, ' + top + ')';
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ // 获取系统信息
|
|
|
+ const sys = uni.getSystemInfoSync()
|
|
|
+ this.statusBarHeight = sys.statusBarHeight+'px'
|
|
|
+ },
|
|
|
+ onUnload() { //普通页面在 onUnload 生命周期中执行
|
|
|
+ uni.$emit('stop')
|
|
|
+ },
|
|
|
+ onHide() { //tabBar页面在onHide生命周期中执行
|
|
|
+ uni.$emit('stop')
|
|
|
+ },
|
|
|
+ onPageScroll(e) {
|
|
|
+ //console.log(e)
|
|
|
+ this.top=e.scrollTop;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.container{
|
|
|
+ position: relative;
|
|
|
+ .bg{
|
|
|
+ width: 100%;
|
|
|
+ height: 380rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+}
|
|
|
+.content{
|
|
|
+ padding-top: calc(var(--status-bar-height) + 140rpx) !important;
|
|
|
+ height: 100vh;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ padding: 20rpx;
|
|
|
+}
|
|
|
+.orangebox{
|
|
|
+ border-radius: 24rpx;
|
|
|
+ border: 1rpx solid #FFA599;
|
|
|
+ color: #FF4B33;
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding: 4rpx 20rpx;
|
|
|
+}
|
|
|
+.health-monitoring {
|
|
|
+ // @include u-flex(row, center, flex-start);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ // gap: 16rpx;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ margin-bottom: -16rpx;
|
|
|
+ margin-right: -16rpx;
|
|
|
+ &-item {
|
|
|
+ width: 343rpx;
|
|
|
+ min-height: 264rpx;
|
|
|
+ margin: 0 16rpx 16rpx 0;
|
|
|
+ overflow: hidden;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
|
+ padding: 24rpx 34rpx 24rpx 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-maintitle {
|
|
|
+ margin-bottom: 4rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ // @include u-flex(row, center, space-between);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 72rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .resnum {
|
|
|
+ font-family: DIN, DIN;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 64rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-res {
|
|
|
+ height: 78rpx;
|
|
|
+ margin: 20rpx 0 6rpx;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 48rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-time {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+}
|
|
|
+.cardbox {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 16rpx 14rpx;
|
|
|
+ &-maintitle {
|
|
|
+ margin-bottom: 4rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+}
|
|
|
+.health-item {
|
|
|
+ width: 343rpx;
|
|
|
+ height: 224rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+}
|
|
|
+.health-item-info {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.health-bgicon {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 168rpx;
|
|
|
+ height: 168rpx;
|
|
|
+}
|
|
|
+</style>
|