<!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>
|
