<!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>
<script src="../../js/mui.picker.min.js"></script>
<script src="../../js/mui.poppicker.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="./zhxx.css" rel="stylesheet">
<style type="text/css">
.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;
}
</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; box-sizing: border-box;">
<div class="mui-card">
<div class="z_menu_group">
<div class="z_tx">
<div class="z_tx_text">
<span>头åƒ</span>
</div>
<div class="z_menu_btn_icon" onclick="click_row(menurows[0])">
<img src="../../img/ic_arrow_right.png" />
</div>
<div class="z_menu_btn_icon" onclick="click_row(menurows[0])">
<div class="z_img_head1">
<img id="avatar" src="../../img/head.png" />
</div>
</div>
</div>
<div class="z_nc" style="height: 49px; line-height: 49px;" >
<!-- <div class="z_menu_btn_img"></div> -->
<div class="z_nc_text">
<span>昵称</span>
</div>
<div class="z_menu_btn_icon"onclick="click_row(menurows[1])">
<img src="../../img/ic_arrow_right.png" />
</div>
<div class="z_menu_btn_icon" onclick="click_row(menurows[1])">
<div id="my_name" class="inline margin12_lr z_nc_text_r"></div>
</div>
</div>
<!-- id="confirmBtn_sex" -->
<div id="confirmBtn_sex"class="z_xb" style="height: 46px; line-height: 46px;">
<!-- <div class="z_menu_btn_img"></div> -->
<div class="z_xb_text">
<span class="xb">性别</span>
</div>
<div class="z_menu_btn_icon">
<img src="../../img/ic_arrow_right.png" />
</div>
<div class="z_menu_btn_icon">
<div id="sexResult" class="inline margin12_lr z_sr_text_r">请选择</div>
</div>
</div>
<div class="z_sr " style="height: 54px; line-height: 54px;">
<!-- <div class="z_menu_btn_img"></div> -->
<div class="z_sr_text">
<span class="sr">生日</span>
</div>
<div class="z_menu_btn_icon">
<img src="../../img/ic_arrow_right.png" />
</div>
<div id="dateSelect" class="z_menu_btn_icon">
<div id="my_birth" class="inline margin12_lr z_sr_text_r"></div>
</div>
</div>
</div>
</div>
</div>
<div style="margin: 16px; box-sizing: border-box;">
<div class="mui-card">
<div id="confirmBtn_sjh" class="z_menu_btn_row" style="height: 57px; line-height: 57px;">
<div class="z_menu_btn_img" style="margin-right: 25px;">
<div class="z_menu_btn_img3">
<img src="../../img/形状(3).png" />
</div>
</div>
<div class="z_menu_btn_txt">
<span>手机å·</span>
</div>
<div class="z_menu_btn_icon">
<img src="../../img/ic_arrow_right.png" />
</div>
<div class="z_menu_btn_icon">
<div id="tel" class="inline margin11_lr z_menu_btn_txt_list" style="line-height: 16px;"></div>
</div>
</div>
<div id="confirmBtn_wx" class="z_menu_btn_row" style="height: 57px; line-height: 57px;">
<div class="z_menu_btn_img" style="margin-right: 25px;">
<div class="z_menu_btn_img3">
<img src="../../img/形状(4).png" />
</div>
</div>
<div class="z_menu_btn_txt">
<span>微信</span>
</div>
<div class="z_menu_btn_icon">
<img src="../../img/ic_arrow_right.png" />
</div>
<div class="z_menu_btn_icon">
<div id="zt" class="inline margin11_lr z_menu_btn_txt_list" style="line-height: 16px;"></div>
</div>
</div>
</div>
</div>
<div class="z_tj">
<div class="tj" onclick="click_row(menurows[4])">
<span class="tj_text">退出登录</span>
</div>
</div>
</div>
</div>
<div id="myModal" class="modal">
<div style="width:100%">
<div class="modal-content">
<div class="modal-header">
<div>是å¦æ›´æ¢å½“å‰å·²ç»‘定的手机å·</div>
</div>
<div class="modal-body">
<div id="tel_txt" class="sjh_txt"></div>
</div>
<div class="modal-footer">
<button class="cancel_button">å–消</button>
<button class="confirm_button" onclick="click_row(menurows[2])">æ›´æ¢</button>
</div>
</div>
</div>
</div>
<div id="myModal1" class="modal">
<div class="modal-content">
<div class="modal-header">
<div id="h1"></div>
</div>
<div class="modal-wx-body">
<div class="wx_txt"><span id="h2"></span><br/><span id="h3"></span></div>
</div>
<div class="modal-footer">
<button class="cancel_button">å–消</button>
<button id="bind" class="confirm_button" onclick="click_row_bind()"></button>
</div>
</div>
</div>
<div id="myModal2" class="modal">
<div style="width:100%">
<div class="modal-sex-content">
<div class="modal-header">
<div>é€‰æ‹©ä½ çš„æ€§åˆ«</div>
</div>
<div class="modal-sex-body">
<div id="0" class="sex_txt_n" onclick="click_sex_txt(this)">ç”·</div>
<div id="1" class="sex_txt_n" style="margin-top: 16px;" onclick="click_sex_txt(this)">女</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
mui.init({
swipeBack: true //å¯ç”¨å³æ»‘å…³é—功能
});
//1. data
var menurows = [{
id: "1",
name: "设置头åƒ",
path: "./sztx",
_id: 1051
}, {
id: "2",
name: "修改昵称",
path: "./xgnc",
_id: 1003
}, {
id: "3",
name: "绑定手机å·",
path: "./ghsj",
_id: 1004
}, {
id: "4",
name: "绑定微信",
path: "./sc",
_id: 2004
}, {
id: "5",
name: "退出登录",
path: "./",
_id: 2005
}
];
var personInfo = {
};
var wxOpenId = "";
//2. function
setRouteParams({userId: "1352189979509854209",params: {}});
function initPage() {
var modal = document.getElementById('myModal');
var btn = document.getElementById("confirmBtn_sjh");
var cancel_btn = document.getElementsByClassName('cancel_button')[0];
var modal1 = document.getElementById('myModal1');
var btn1 = document.getElementById("confirmBtn_wx");
var cancel_btn1 = document.getElementsByClassName('cancel_button')[1];
var modal2 = document.getElementById('myModal2');
var btn2 = document.getElementById("confirmBtn_sex");
btn.onclick = function() {
modal.style.display = "block";
}
cancel_btn.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
btn1.onclick = function() {
modal1.style.display = "block";
if(personInfo.wxOpenId != "") {
document.getElementById('bind').innerText = "ç«‹å³è§£ç»‘"
document.getElementById('h1').innerText = "ä½ æ˜¯å¦è¦è§£ç»‘微信账å·?";
document.getElementById('h2').innerText = "解除绑定åŽ";
document.getElementById('h3').innerText = "微信账å·å°†æ— 法用于快速登陆";
}
else {
document.getElementById('bind').innerText = "绑定"
document.getElementById('h1').innerText = "ä½ æ˜¯å¦è¦ç»‘定微信账å·?";
document.getElementById('h2').innerText = "è´¦å·ç»‘定åŽ";
document.getElementById('h3').innerText = "微信账å·å°†ç”¨äºŽå¿«é€Ÿç™»é™†";
}
}
cancel_btn1.onclick = function() {
modal1.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal1) {
modal1.style.display = "none";
}
}
btn2.onclick = function() {
modal2.style.display = "block";
}
window.onclick = function(event) {
if (event.target == modal2) {
modal2.style.display = "none";
}
}
document.getElementById("dateSelect").addEventListener('tap', function() {
var dtpicker = new mui.DtPicker({
type: "date",//设置日历åˆå§‹è§†å›¾æ¨¡å¼
beginDate: new Date(2009, 12, 01),//设置开始日期
endDate: new Date(2029, 01, 30),//设置结æŸæ—¥æœŸ
labels: [' ',' ',' ','时','分'],
customData: {}
})
dtpicker.setSelectedValue("2010-01-01");
dtpicker.show(function(rs) {
document.getElementById("my_birth").innerText = rs.y.text+"/"+rs.m.text+"/"+rs.d.text;
}) ;
});
}
function loadData() {
ajaxPost('client/api/getById',{id: login_data.userId}, function(result) {
if (result) {
personInfo = result.data
console.info(result);
}
doLoadData();
hideloading("loading");
});
}
function doLoadData() {
document.getElementById('avatar').src = personInfo.avatar;
document.getElementById('my_name').innerText = personInfo.clientName;
document.getElementById('my_birth').innerText = personInfo.birth.split(' ')[0];
var tel = personInfo.mobile.split('');
var telAhead = "";
var telBehind = "";
for(var i = 0;i < 5;i++){
telAhead += tel[i];
}
for(var i = 8;i < 11;i++){
telBehind += tel[i];
}
document.getElementById('tel').innerText = telAhead +"****"+ telBehind;
document.getElementById('tel_txt').innerText = personInfo.mobile;
if(personInfo.gender == 0){
document.getElementById('sexResult').innerText = "ç”·";
}else if(personInfo.gender == 1){
document.getElementById('sexResult').innerText = "女";
}else if(personInfo.gender == 2){
document.getElementById('sexResult').innerText = "未知";
}
if(personInfo.wxOpenId != "") {
document.getElementById('zt').innerText = "解绑";
// document.getElementById('bind').innerText = "ç«‹å³è§£ç»‘"
// document.getElementById('h1').innerText = "ä½ æ˜¯å¦è¦è§£ç»‘微信账å·?";
// document.getElementById('h2').innerText = "解除绑定åŽ";
// document.getElementById('h3').innerText = "微信账å·å°†æ— 法用于快速登陆";
}
else {
document.getElementById('zt').innerText = "绑定";
// document.getElementById('bind').innerText = "绑定"
// document.getElementById('h1').innerText = "ä½ æ˜¯å¦è¦ç»‘定微信账å·?";
// document.getElementById('h2').innerText = "è´¦å·ç»‘定åŽ";
// document.getElementById('h3').innerText = "微信账å·å°†ç”¨äºŽå¿«é€Ÿç™»é™†";
}
}
function click_sex_txt(e) {
if (e.innerText == "ç”·") {
document.getElementById('sexResult').innerText = "ç”·";
document.getElementById(0).classList.replace('sex_txt_n','sex_txt_y')
document.getElementById(1).classList.replace('sex_txt_y','sex_txt_n')
}
else {
document.getElementById('sexResult').innerText = "女";
document.getElementById(0).classList.replace('sex_txt_y','sex_txt_n')
document.getElementById(1).classList.replace('sex_txt_n','sex_txt_y')
}
document.getElementById('myModal2').style.display = 'none';
}
function click_row(row) {
var pam = {
_id: row._id,
params: {
userId: login_data.id
}
};
app_click("route", pam, callback);
}
// function getPushData(){
// var pageInfo = login_data;
// pageInfo.params.canshu = "963852741"
// var pam = {
// _id: 1051,
// params: {
// userId: login_data.id,
// pageInfo: pageInfo,
// }
// };
// rightBtnPush("route", pam, callback);
// }
function click_row_bind() {
if(personInfo.wxOpenId == ""){
var pam = {
_id: 2004,
params: {
userId: login_data.id
}
};
app_click("route", pam, setOpenId);
}
else {
ajaxPost('client/api/unbindWeChat',{id: login_data.userId},function(result){});
personInfo.wxOpenId = "";
document.getElementById('zt').innerText = "绑定";
}
document.getElementById('myModal1').style.display = "none";
}
function setOpenId(openId){
ajaxPost('client/api/bindWeChat',{id: login_data.userId,wxOpenId: openId});
personInfo.wxOpenId = openId;
document.getElementById('zt').innerText = "解绑";
}
//3. run
mui.ready(function() {
onInitReady(function() {
// setRightBtn("rightBtn", {_id: 3000}, callback);
initPage();
loadData();
});
})
</script>
</body>
</html>