<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> <script src="../../assets/js/fontsize.js"></script> <link rel="stylesheet" href="../../assets/css/weui.min.css"> <link rel="stylesheet" href="../../assets/css/api.css"/> <link rel="stylesheet" href="../../assets/css/my_f.css"/> <link rel="stylesheet" href="http://at.alicdn.com/t/font_641470_jg64l6ijsg4lsor.css"> <title></title> <style> .health_head { background-color: #dbb25f; height: 4.76rem; display: flex; align-items: center; justify-content: center; padding-top: 20px; position: relative; /*overflow: hidden;*/ } .health_top { display: flex; align-items: center; justify-content: space-between; padding: 0.29rem 0.42rem; font-size: 15px; color: #fff; position: absolute; left: 0; /*top: 20px;*/ width: 100%; z-index: 9999; /*background-color: #dbb25f;*/ /*overflow: hidden;*/ } .health_top div { flex: 1; } .head_bgc { width: 145px; height: 145px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; } .head_info { background-image: url("../../assets/image/head_bgc.png"); background-size: cover; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 10; } .info_name { font-size: 18px; color: #A6894B; width: 1.2rem; } .info_sex { font-size: 12px; color: #A58541; } .info_pre { font-size: 10px; color: #C2A25E; } .icon-yiliao { font-size: 18px; } .header_info_item { font-size: 14px; color: #525254; display: flex; align-items: center; justify-content: space-between; padding: 0.15rem 0.5rem; border-bottom: 0.01rem solid #efefef; } .header_info_item:active { background-color: rgba(0, 0, 0, 0.1); } .header_info_item img { width: 0.35rem; margin-right: 0.16rem; } .header_info_img { display: flex; align-items: center; } .icon-xiangyou { margin-left: 0.14rem; } .life { background-color: #f1f1f1; } .life_list { padding: 0.46rem; } .life_item { display: flex; font-size: 11px; } .life_left { width: 2rem; } .life_right { padding: 0 0.28rem; border-left: 2px solid #dbb25f; padding-bottom: 0.5rem; position: relative; flex: 1; } .life_right_item { padding: 0.1rem 0 0.1rem 0.44rem; background-color: #dbb25f; color: #fff; border: 1px solid #dbb25f; margin: 0 0 0 0.5rem; } .life_right_bottom { border: 1px solid #dbb25f; padding: 0.17rem 0.3rem; margin: 0 0 0 0.5rem; } .life_circle { width: 0.4rem; height: 0.4rem; border-radius: 50%; background-color: #e5cb94; position: absolute; left: -0.2rem; z-index: 2; top: 0.1rem; display: flex; align-items: center; justify-content: center; } .life_circle_item { width: 0.25rem; height: 0.25rem; border-radius: 50%; background-color: #ddbb37; } .life_tri { width: 0; height: 0; border-top: 0.15rem solid transparent; border-right: 0.3rem solid #ddbb73; border-bottom: 0.15rem solid transparent; position: relative; left: -0.75rem; } .tans { transform: rotate(0deg); transition: 0.2s; } .tanss { transition: 0.2s; transform: rotate(90deg); } .icon-xiangyou { color: #7E725D; margin-left: 0.14rem; } .index_right { display: flex; align-items: center; justify-content: flex-end; /*text-align: center;*/ position: relative; text-align: right; } .index_right:before { position: absolute; left: -0.1rem; right: -0.1rem; top: -0.1rem; bottom: -0.1rem; content: ''; } .img_transform { transform: rotate(45deg); } .index_right .icon-yiliao { /*font-size: 25px;*/ } .health_mid { /*padding-left: 0.5rem;*/ text-align: center; } .index_right img { height: 0.44rem; } .health_menu { position: absolute; right: 0.42rem; top: 1rem; background-color: #fff; padding: 0.06rem 0; border-radius: 0.05rem; z-index: 30; } .health_item { border-bottom: 1px solid #eeeeee; padding: 0.06rem 0.12rem; font-size: 13px; color: #434A54; } .circle { position: relative; width: 130px; height: 130px; text-align: center; display: flex; align-items: center; justify-content: center; } .circle .track, .circle .left, .circle .right, .circle .mask { width: 108px; height: 108px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; border-radius: 50%; border: 0.15rem #dbb25f solid; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 20; } .circle .mask, .circle .left, .circle .right { clip: rect(0 54px 108px 0); } .circle .left, .circle .right { border-color: #C2A25E; } /*.circle .left {*/ /*border-color: #0bb20c;*/ /*background-color: #222222;*/ /*}*/ /*.circle .right {*/ /*border-color: #ce3c39;*/ /*background-color: #f2f2f2;*/ /*}*/ .circle .right { opacity: 0; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } /* 进度显示文字样式 */ .transition-rotate { -webkit-transition: transform 3s ease-in-out; -moz-transition: transform 3s ease-in-out; -ms-transition: transform 3s ease-in-out; -o-transition: transform 3s ease-in-out; transition: transform 3s ease-in-out; } </style> </head> <body> <div id="loadStart"></div> <div id="app"> <div class="health_head"> <!--<div class="health_top" :style="{top: top}">--> <!--<div @click="closeWindow()" class="close_left"><span class="iconfont icon-fanhui"></span></div>--> <!--<div class="health_mid" v-if="rid==0">健康档案</div>--> <!--<div class="health_mid" v-else>亲友档案</div>--> <!--<div class="index_right" @click="img_active=!img_active" v-if="rid==0">--> <!--<img src="../../assets/image/plus.png" alt="" :class="{img_transform:img_active}">--> <!--</div>--> <!--<div class="index_right" v-else></div>--> <div class="health_menu" v-show="img_active"> <div class="health_item" @click="addPerson">添加亲友档案</div> <div class="health_item" @click="openFriend">查看亲友档案</div> </div> <!--</div>--> <div class="head_bgc"> <div class="circle"> <div class="track"></div> <div class="left transition-rotate" :style="{transform:'rotate(' + left + 'deg)', webkitTransform: 'rotate(' + left + 'deg)'}"></div> <div class="right transition-rotate" :style="{opacity :opacity,transform:'rotate(' + right + 'deg)', webkitTransform: 'rotate(' + right + 'deg)'}"></div> <div class="mask" :style="{opacity:mask_opacity}"></div> </div> <div class="head_info"> <span class="info_name clamp1">{{info.name?info.name:''}}</span> <span class="info_sex"> {{info.sex}},{{info.birthday?info.birthday:0}}岁</span> <span class="info_pre">资料完整度{{record_data.complete?record_data.complete:0}}%</span> </div> </div> </div> <div class="header_info_item" @click="openPerson"> <div class="header_info_img"><img src="../../assets/image/h1.png" alt=""> <span v-if="rid==0">个人资料</span> <span v-else>亲友资料</span> </div> <div><span v-if="record_data.personal==1">已完善</span><span v-else>未完善</span><span class="iconfont icon-xiangyou"></span></div> </div> <div class="header_info_item" @click="openHistory"> <div class="header_info_img"><img src="../../assets/image/h2.png" alt=""><span>健康史</span></div> <div><span v-if="record_data.history==1">已完善</span><span v-else>未完善</span><span class="iconfont icon-xiangyou"></span></div> </div> <div class="header_info_item" @click="openData"> <div class="header_info_img"><img src="../../assets/image/h3.png" alt=""><span>健康数据</span></div> <div><span v-if="record_data.h_data==1">已完善</span><span v-else>未完善</span><span class="iconfont icon-xiangyou"></span></div> </div> <div :class="['header_info_item',list_show?'life':'' ]" @click="list_show=!list_show"> <div class="header_info_img"><img src="../../assets/image/h4.png" alt=""><span>全生命周期健康记录</span></div> <div><span>{{life_list.length}}份报告</span><span :class="['iconfont','icon-xiangyou',list_show?'tanss':'tans']"></span></div> </div> <div class="life_list" v-show="list_show"> <div class="nodata" v-if="life_list.length==0">暂无数据</div> <div class="life_item" @click="openLife(item.r_type,item.report_id,item.img,item.name)" v-else v-for="(item,index) in life_list"> <span class="life_left">{{item.checktime}}</span> <div class="life_right"> <span class="life_circle"><span class="life_circle_item"></span></span> <div class="life_right_item"><span class="life_tri"></span>[{{item.name}}]{{item.org}}</div> <div class="life_right_bottom"> {{item.descript}} </div> </div> </div> </div> </div> </body> </html> <script type="text/javascript" src="../../assets/js/weui.min.js"></script> <script type="text/javascript" src="../../assets/js/api.js"></script> <script type="text/javascript" src="../../assets/js/public.js"></script> <script type="text/javascript" src="../../assets/js/fastclick.js"></script> <script> new FastClick(document.body); </script> <script type="text/javascript" src="../../assets/js/vue.min.js"></script> <script type="text/javascript" src="../../assets/js/axios.min.js"></script> <script type="text/javascript" src="../../assets/icon/iconfont.js"></script> <script> var app = new Vue({ el: '#app', data: { list_show: false, img_active: false, record_data: [], rid: '', info: [], life_list: [], percent: 0, right: 180, left: 0, opacity: 1, mask_opacity: 1, top: '20' + 'px', type: '' // left_opacity: 1 }, created: function () { var app = this ; app.rid = localStorage.getItem('rid'); var Htype = localStorage.getItem('Htype'); app.type = Htype ? Htype : 0; app.record(); app.getHeathlyRecord(); // api.addEventListener({ // name: 'changeInfo' // }, function (ret, err) { // app.record(); // app.getHeathlyRecord(); // }); // api.addEventListener({ // name: 'add_success' // }, function (ret, err) { // app.record(); // app.getHeathlyRecord(); // }); // api.addEventListener({ // name: 'showlist' // }, function (ret, err) { // app.img_active = ret.value.img_active; // }); }, methods: { // close: function () { // alert(1) // api.closeWin({ // name: 'my_health' // }); // }, // 个人资料 openPerson: function () { var app = this; var name = ''; if (app.rid == 0) { name = '个人资料' } else { name = '亲友资料' } openView('my_detail', '../my/my_detail', name, 'my_detail', false, { type: app.type, rid: app.rid, name: name }) }, // 添加亲友 addPerson: function () { var app = this; app.img_active = false; api.sendEvent({ name: 'hidelist', extra: { img_active:app.img_active } }); openView('my_detail', 'my/my_detail', '添加亲友档案', 'my_detail', false, {type: 1, rid: app.rid}) }, // 健康数据 openData: function () { var app = this; app.img_active = false; api.sendEvent({ name: 'hidelist', extra: { img_active:app.img_active } }); openView('my_healthData', 'my/my_healthData', '健康数据', 'my_healthData', false, {rid: app.rid}) }, // 健康史 openHistory: function () { var app = this; app.img_active = false; openView('my_history', 'my/my_history', '健康史', 'my_history', false, {rid: app.rid}); }, // 亲友档案 openFriend: function () { var app = this; app.img_active = false; openView('my_fri', 'my/my_fri', '亲友健康档案', 'my_fri', false, false, false); }, // 获取个人档案完善情况 record: function () { var app = this; var header = { "XX-Device-Type": getDevice(), 'XX-Token': getToken(), }; var post = { rid: app.rid }; getRequest('post', 'user/index/record', post, header).then(function (res) { // alert(JSON.stringify(res)) if (res.data.code == 1) { app.record_data = res.data.data; app.info = res.data.data.info; app.percent = parseInt(app.record_data.complete); if (app.percent < 50) { app.left = 3.6 * app.percent; app.opacity = 0; app.mask_opacity = 1 // app.right= // alert(app.left) } else { app.opacity = 1; app.mask_opacity = 0; app.left = 180; app.right = 3.6 * app.percent; } } }) }, // 健康记录详情页面 openLife: function (r_type, id, img, name) { var app = this; switch (r_type) { case '1': case '2': case '3': api.openFrame({ bgColor: 'rgba(0,0,0,0.8)', name: 'life', url: '../common/life.html', bounces: false, animation: { type: "push", subType: "from_bottom", duration: 300 }, rect: { x: 0, y: 0, w: 'auto', h: 'auto' }, pageParam: { id: id, img: img } }); break; case '4': case '5': openView('my_report_detail', 'my/my_report_detail', '服务报告', 'my_report_detail', false, {report_id: id}); break; default: return; } }, // 获取全生命周期记录 getHeathlyRecord: function () { var app = this; var header = { "XX-Device-Type": getDevice(), 'XX-Token': getToken(), }; var post = { rid: app.rid }; getRequest('post', 'user/index/getHeathlyRecord', post, header).then(function (res) { if (res.data.code == 1) { app.life_list = res.data.data; } loadEnd() }) } } }) </script>