<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>æ·»åŠ æ‚£è€…</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- js引用 -->
<script src="../../js/config.js"></script>
<script src="../../js/h5toapp.js"></script>
<script src="../../js/h5to.js"></script>
<!-- 组件js引用 -->
<script src="../../js/mui.min.js"></script>
<!-- ç»„ä»¶æ ‡å‡†css引用 -->
<link rel="stylesheet" href="../../css/mui.min.css">
<link rel="stylesheet" href="../../css/mui.picker.min.css">
<link rel="stylesheet" href="../../css/mui.poppicker.css">
<!-- css引用 -->
<link href="../../css/currency.css" rel="stylesheet">
<link href="../../css/icon/iconfont.css" rel="stylesheet">
<link href="../../css/spinkit.css" rel="stylesheet">
<!-- ç•Œé¢æœ¬èº«css引用 -->
<link href="./tjhz.css" rel="stylesheet">
<style>
input::-webkit-input-placeholder {
color: #9393AA;
-webkit-text-fill-color: #9393AA;
}
.mui-dtpicker, .mui-poppicker {
background-color: #FFFFFF;
border-radius: 24px;
bottom: 40%;
width: 91.5%;
margin: 0 16px;
-webkit-transform: translateY(800px);
}
.mui-dtpicker-header {
height: 54px;
border-bottom: 1px solid #F6F6F6;
}
.mui-dtpicker .mui-picker {
border-radius: 24px;
}
.mui-dtpicker-header button {
font-size: 17px;
padding: 11px 10px;
}
.mui-btn-blue, .mui-btn-primary, input[type=submit] {
background-color: #FFFFFF;
border: 0;
color: #21D197;
}
.mui-btn {
border: 0;
}
.mui-dtpicker-title {
height: 0;
}
.mui-dtpicker-title h5 {
background-color: #FFFFFF;
border: 0;
margin-top: 30px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #838B98;
-webkit-text-fill-color: #838B98;
}
.mui-picker {
background-color: #FFFFFF;
}
.mui-pciker-rule-ft {
width: 104px;
margin-left: 10px;
}
.mui-dtpicker-body {
height: 150px;
}
.mui-poppicker-header {
height: 54px;
}
.mui-poppicker-header .mui-btn {
font-size: 17px;
padding: 11px;
}
</style>
</head>
<body>
<div style="background-color: #F9FAFC; height: 100vh; width: 100%; margin: 0; overflow: auto;">
<div id="loading" class="example">
<div class="sk-plane loading_location"></div>
</div>
<div class="mui-content">
<div style="margin:16px 16px 0px 16px ; box-sizing: border-box;">
<div class="mui-card">
<div class="z_menu_group" style="height: 97px;">
<div class="z_head">
<div class="z_head_text_l">
<span>姓å:</span>
</div>
<div class="z_menu_btn_icon">
<input type="text" id="my_name" name="username" onchange="change(this)" placeholder="请输入亲属姓å" class="inline z_head_text_r"style="height: 49px;border: 0px;margin: 0;margin-right: 10px;">
</div>
</div>
<div class="z_body" id="down_frame_locate">
<div class="z_body_text_l">
<span>性别:</span>
</div>
<div id="cover_background" style="width: 100vw;height: 100vh;display: none;position: fixed;z-index: 1;top: 0;left: 0;"
onclick="click_hidden()">
<div class="sffy_dropdown" style="width: 66px;right: 16px;">
<div class="sffy_dropdown_style" onclick="click_option(0)"><span class="sffy_dropdown_text">ç”·</span></div>
<div class="sffy_dropdown_style" onclick="click_option(1)"><span class="sffy_dropdown_text">女</span></div>
<div class="sffy_dropdown_style" onclick="click_option(2)"><span class="sffy_dropdown_text">其他</span></div>
</div>
</div>
<div class="z_menu_btn_icon">
<img src="../../img/ic_arrow_right.png" style="padding: 16px 0;" />
</div>
<div class="z_menu_btn_icon" onclick="f()">
<div id="sex" class="inline z_body_text_r" style="margin-right: 7px;">请选择</div>
</div>
</div>
</div>
<div class="z_foot">
<div class="z_foot_text_l">
<span>生日:</span>
</div>
<div class="z_menu_btn_icon" >
<div id="birth_txt" onclick="birth_change()" class="inline z_body_text_r" style="margin-right: 20px;">请选择</div>
</div>
</div>
</div>
</div>
</div>
<div style="margin:16px 16px 0px 16px ; box-sizing: border-box;">
<div class="mui-card">
<div class="z_menu_group">
<div class="z_head" id="down_frame_locate1">
<div class="z_head_text_l">
<span>亲属关系</span>
</div>
<div id="cover_background1" style="width: 100vw;height: 100vh;display: none;position: fixed;z-index: 1;top: 0;left: 0;"
onclick="click_hidden1()">
<div class="sffy_dropdown1" style="width: 80px;right: 16px;">
<div class="sffy_dropdown_style" onclick="click_option1(0)"><span class="sffy_dropdown_text">自己</span></div>
<div class="sffy_dropdown_style" onclick="click_option1(1)"><span class="sffy_dropdown_text">父亲</span></div>
<div class="sffy_dropdown_style" onclick="click_option1(2)"><span class="sffy_dropdown_text">æ¯äº²</span></div>
<div class="sffy_dropdown_style" onclick="click_option1(3)"><span class="sffy_dropdown_text">妻å</span></div>
<div class="sffy_dropdown_style" onclick="click_option1(4)"><span class="sffy_dropdown_text">丈夫</span></div>
<div class="sffy_dropdown_style" onclick="click_option1(5)"><span class="sffy_dropdown_text">å„¿å</span></div>
<div class="sffy_dropdown_style" onclick="click_option1(6)"><span class="sffy_dropdown_text">女儿</span></div>
<div class="sffy_dropdown_style" onclick="click_option1(7)"><span class="sffy_dropdown_text">亲戚</span></div>
<div class="sffy_dropdown_style" onclick="click_option1(8)"><span class="sffy_dropdown_text">朋å‹</span></div>
<div class="sffy_dropdown_style" onclick="click_option1(9)"><span class="sffy_dropdown_text">其他</span></div>
</div>
</div>
<div class="z_menu_btn_icon">
<img src="../../img/ic_arrow_right.png" style="padding: 16px 0;" />
</div>
<div class="z_menu_btn_icon" onclick="f1()">
<div id="my_role" class="inline z_head_text_r" style="margin-right: 7px;">请选择</div>
</div>
</div>
<div id="showCityPicker" class="z_body">
<div class="z_body_text_l">
<span>所在城市</span>
</div>
<div class="z_menu_btn_icon">
<div id="city_txt" onclick="cityName_change()" class="inline z_body_text_r" style="margin-right: 20px;">请选择</div>
</div>
</div>
<div class="z_foot">
<div class="z_foot_text_l">
<span>手机å·ç </span>
</div>
<div class="z_menu_btn_icon">
<input id = "mobile_text" onchange="change(this)" type="text" name="username" placeholder="便于获å–医生回å¤é€šçŸ¥" class="inline z_head_text_r"style="height: 49px;border: 0px;margin: 0;margin-right: 10px;">
</div>
</div>
</div>
</div>
</div>
<div class="z_bc">
<div class="bc" onclick="click_row(menurows[0])">
<span>ä¿å˜å¹¶å®Œå–„å¥åº·æ¡£æ¡ˆ</span>
</div>
</div>
</div>
</div>
<script src="../../js/mui.picker.min.js"></script>
<script src="../../js/mui.poppicker.js"></script>
<script src="../../js/city.data.js"></script>
<script type="text/javascript">
mui.init({
swipeBack: true //å¯ç”¨å³æ»‘å…³é—功能
});
//1. data
var name = "å¼ æ— å¿Œ"
var my_role = "自己";
var sex = "ç”·";
var birth = "1993/08/10";
var city = "湖北 黄冈"
var tel = "176****7585";
var rzzt = "未认è¯";
var menurows = [{
id: "1",
name: "å¥åº·æ¡£æ¡ˆ",
path: "./jkda",
_id: 1043,
},
];
setRouteParams({userId: "1352189979509854209",params: {}});
function f() {
var domObj = document.getElementById('down_frame_locate');
var aa = domObj.getBoundingClientRect().top;
document.getElementsByClassName('sffy_dropdown')[0].style.top = aa + 46 + "px";
document.getElementById('cover_background').style.display = "flex";
document.getElementsByClassName('sffy_dropdown')[0].classList.toggle('sffy_down');
if (document.getElementsByClassName('sffy_dropdown')[0].classList.contains('sffy_down')) {
setTimeout(function() {
document.getElementsByClassName('sffy_dropdown')[0].style.overflow = 'overlay';
document.getElementsByClassName('sffy_dropdown')[0].style.border = '1px solid #F2F2F2';
}, 100)
} else {
document.getElementsByClassName('sffy_dropdown')[0].style.overflow = 'hidden';
document.getElementsByClassName('sffy_dropdown')[0].style.border = '0px solid #F2F2F2';
}
}
function click_option(e){
if(e == 0){
document.getElementById('sex').innerText = "ç”·";
}else if(e == 1){
document.getElementById('sex').innerText = "女";
}else if(e == 2){
document.getElementById('sex').innerText = "其他";
}
change();
document.getElementsByClassName('sffy_dropdown')[0].style.overflow = 'hidden';
document.getElementsByClassName('sffy_dropdown')[0].style.border = '0px solid #F2F2F2';
document.getElementsByClassName('sffy_dropdown')[0].classList.toggle('sffy_down',false);
}
function click_hidden() {
document.getElementsByClassName('sffy_dropdown')[0].classList.toggle('sffy_down', false);
document.getElementById('cover_background').style.display = "none";
}
function f1() {
var domObj = document.getElementById('down_frame_locate1');
var aa = domObj.getBoundingClientRect().top;
document.getElementsByClassName('sffy_dropdown1')[0].style.top = aa + 50 + "px";
document.getElementById('cover_background1').style.display = "flex";
document.getElementsByClassName('sffy_dropdown1')[0].classList.toggle('sffy_down1');
if (document.getElementsByClassName('sffy_dropdown1')[0].classList.contains('sffy_down1')) {
setTimeout(function() {
document.getElementsByClassName('sffy_dropdown1')[0].style.overflow = 'overlay';
document.getElementsByClassName('sffy_dropdown1')[0].style.border = '1px solid #F2F2F2';
}, 100)
} else {
document.getElementsByClassName('sffy_dropdown1')[0].style.overflow = 'hidden';
document.getElementsByClassName('sffy_dropdown1')[0].style.border = '0px solid #F2F2F2';
}
}
var changeData = {};
function change(e){
changeData.clientId = user.id;
changeData.clientName = user.clientName;
changeData.patientName = document.getElementById('my_name').value;
changeData.avatar = "123456";
if(document.getElementById("sex").innerText == "ç”·"){
changeData.gender = "1";
}else if(document.getElementById("sex").innerText == "女"){
changeData.gender = "0";
}else{
changeData.gender = "2";
}
changeData.birth = document.getElementById("birth_txt").innerText;
//document.getElementById("my_role").innerText
changeData.relationType = e;
changeData.cityName = document.getElementById("city_txt").value;
changeData.mobile = document.getElementById("mobile_text").value;
console.info(changeData);
}
function birth_change(){
mui('body').on('tap', '.mui-dtpicker-header .mui-btn', function(event) {
event.cancelBubble = true;//阻æ¢å½“å‰äº‹ä»¶çš„冒泡
var a = this;
changeData.birth = document.getElementById('birth_txt').innerText;
});
}
function cityName_change(){
mui('body').on('tap', '.mui-dtpicker-header .mui-btn', function(event) {
event.cancelBubble = true;//阻æ¢å½“å‰äº‹ä»¶çš„冒泡
var a = this;
changeData.birth = document.getElementById('city_txt').innerText;
});
}
function click_option1(e) {
switch(e) {
case 0:
document.getElementById('my_role').innerText = "自己";
break;
case 1:
document.getElementById('my_role').innerText = "父亲";
break;
case 2:
document.getElementById('my_role').innerText = "æ¯äº²";
break;
case 3:
document.getElementById('my_role').innerText = "妻å";
break;
case 4:
document.getElementById('my_role').innerText = "丈夫";
break;
case 5:
document.getElementById('my_role').innerText = "å„¿å";
break;
case 6:
document.getElementById('my_role').innerText = "女儿";
break;
case 7:
document.getElementById('my_role').innerText = "亲戚";
break;
case 8:
document.getElementById('my_role').innerText = "朋å‹";
break;
case 9:
document.getElementById('my_role').innerText = "其他";
break;
default:
document.getElementById('my_role').innerText = "请选择";
}
change(e);
document.getElementsByClassName('sffy_dropdown1')[0].style.overflow = 'hidden';
document.getElementsByClassName('sffy_dropdown1')[0].style.border = '0px solid #F2F2F2';
document.getElementsByClassName('sffy_dropdown1')[0].classList.toggle('sffy_down1', false);
}
function click_hidden1() {
document.getElementsByClassName('sffy_dropdown1')[0].classList.toggle('sffy_down1', false);
document.getElementById('cover_background1').style.display = "none";
}
function initPage() {
mui.ready(function() {
// 二级è”示例
var cityPicker = new mui.PopPicker({
layer: 2
});
cityPicker.setData(cityData);
var showCityPickerButton = document.getElementById('showCityPicker');
// 监å¬ç¡®å®šç‚¹å‡»äº‹ä»¶
showCityPickerButton.addEventListener('tap', function(event) {
document.getElementsByClassName('mui-pciker-rule-ft')[0].style.marginLeft = '32px';
document.getElementsByClassName('mui-pciker-rule-ft')[1].style.marginLeft = '32px';
cityPicker.show(function(items) {
document.getElementById('city_txt').innerText = items[0].text + items[1].text;
});
}, false);
});
document.getElementById("birth_txt").addEventListener('tap', function() {
var dtpicker = new mui.DtPicker({
type: "date",//设置日历åˆå§‹è§†å›¾æ¨¡å¼
beginDate: new Date(1849, 12, 01),//设置开始日期
endDate: new Date(2100, 01, 30),//设置结æŸæ—¥æœŸ
labels: [' ',' ',' ','时','分'],
customData: {
}
})
dtpicker.setSelectedValue("2010-01-01");
dtpicker.show(function(rs) {
document.getElementById("birth_txt").innerText = rs.y.text+"-"+rs.m.text+"-"+rs.d.text;
}) ;
});
}
function click_row(row) {
var pam = {
_id: row._id,
params: {
userId: login_data.id
}
};
ajaxPost('client/api/patient/add',changeData, function(result) {
console.info(result);
patient = result.data
});
app_click("route", pam, callback);
}
function loadData() {
ajaxPost('client/api/getById',{id: login_data.userId}, function(result) {
user = result.data
doLoadData();
hideloading("loading");
});
}
function doLoadData() {
}
//3. run
mui.ready(function() {
onInitReady(function() {
// setRightBtn("rightBtn", {_id: 3000}, callback);
initPage();
loadData();
});
})
</script>
</body>
</html>