lzf
/
djfp-app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
							<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>个人信息</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link href="../../css/animate.min.css" rel="stylesheet" />
		<link href="../../css/cropper.min.css" rel="stylesheet" />
		<style>
		   .mui-bar-nav~.mui-content{padding-top: 60px;}
           .r{float: right;margin-right: 20px;color: darkgray;font-size: 14px;}
           .head{line-height: 45px;}
           .mui-table-view-cell{padding: 14px;font-size: 14px;}
           .mui-table-view:before{background-color: rgba(200, 199, 204, 0);}
           .mui-table-view:after{background-color: rgba(200, 199, 204, 0);}
           .mui-table-view-cell:after{background-color: #dedbdb;}
		   .img{width: 40px;height: 40px;border-radius: 50%;}
		   .m_box {padding: 0px 10px 0px 10px;margin: 15px;box-shadow: 0 1px 6px #dbdbdb;}
		   #clipp{position:fixed;width:100%;height:100%;top:0;background-color:black;display:none;z-index:9999999}
		   #clipp img{max-width:100%;height:auto;vertical-align:middle;}
		   #clipp .op{position:fixed;width:100%;bottom:0;}
		   #clipp .mui-icon{color:white;font-size:50px;font-weight:bold}
		  [v-cloak] {display: none;}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">个人信息</h1>
			</header>
			<div class="mui-content animated fadeInUp">
				<div class="m_box">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<a href="#picture" class="mui-navigate-right">
								<span class="r">
									<img :src="item.header" class="img">
								</span>
						        <span class="head">头像</span>
							</a>
						</li>
						<li class="mui-table-view-cell" @click="op(' 昵称',item.nickName,'nickName')">
							<a class="mui-navigate-right"><span class="r">{{item.nickName}}</span>昵称</a>
						</li>
						<li class="mui-table-view-cell" @click="pwd()">
							<a class="mui-navigate-right"><span class="r">修改密码</span>密码</a>
						</li>
						<li class="mui-table-view-cell" @click="op(' 邮箱',item.email=='null'?'':item.email,'email')">
							<a  class="mui-navigate-right"><span class="r">{{item.email=='null'?'未填':item.email}}</span>邮箱</a>
						</li>
						<li class="mui-table-view-cell">
							<a href="#sex" class="mui-navigate-right"><span class="r">{{item.mTime}}</span>注册时间</a>
						</li>
					</ul>
				</div>
			</div>
			<!--选择照片-->
			<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" @click="takePhoto()"><a>拍照</a></li>
					<li class="mui-table-view-cell" @click="pickImg()"><a>选取现有</a></li>
				</ul>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" style="color: red;"><a href="#picture"><b>取消</b></a></li>
				</ul>
			</div>
			<!--图片剪裁-->
			<div id="clipp">
				<img id="image" alt="Picture" src="../../images/APP-banner2.jpg">
				<div class="op">
					<span class="mui-icon mui-icon mui-icon-closeempty mui-pull-left" @click="cancel()"></span>
					<span class="mui-icon mui-icon-checkmarkempty mui-pull-right" @click="save()"></span>
				</div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/app.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/cropper.min.js"></script>
		<script type="text/javascript">
			var cropper = null;
			var vm = new Vue({
				el: "#app",
				data: {
					item: {}
				},
				mounted: function() {
					mui.plusReady(function() {
						vm.getData();
					})
				},
				methods: {
					getData: function() {
						request(urls().userInfo, {id: getUser().id}, function(res) {
								vm.item = res;
								localStorage.setItem("user", JSON.stringify(res));
								vm.item.header=urls().path+vm.item.header;
								setTimeout(function(){
									plus.webview.getWebviewById('tab/mine.html').reload(true);
								},500);
							    plus.nativeUI.closeWaiting();
						})
					},
					//拍照
					takePhoto: function() {
						plus.nativeUI.showWaiting("准备剪裁...");
						takePhoto(function(path) {
							plus.io.resolveLocalFileSystemURL(path, function(entry) {
								plus.nativeUI.closeWaiting();
								if(cropper != null) {
									cropper.destroy();
								}
								cropper = getClipper(1, entry.toLocalURL());
							});
						})
					},
					//选择现有
					pickImg: function() {
						pickImg(function(p) {
							if(cropper != null) {
								cropper.destroy();
							}
							cropper = getClipper(1, p.files[0]);
						}, 1);
					},
					//裁剪结束并上传
					save: function() {
						plus.nativeUI.showWaiting("正在上传...");
						//获得裁剪对象
						var croppedCanvas = cropper.getCroppedCanvas({width: 100,height: 100})
						var dataUrl = croppedCanvas.toDataURL();
						request(urls().user_upload,{id:getUser().id,dataImage:dataUrl},function(res) {
							vm.item.header=urls().path+res.url;
							mui.toast("上传成功");
							vm.getData();
							plus.nativeUI.closeWaiting();
						})
						document.getElementById("clipp").style.display = 'none';
					},
					//取消裁剪
					cancel: function() {
						document.getElementById("clipp").style.display = 'none';
					},
					//修改密码
					pwd:function(){
						open('find_pass', 'find_pass.html', null, 'slide-in-bottom');
					},
					//编辑其它
					op: function(msg, val, op) {
						open('edit_info', 'edit_info.html', {msg: msg,value: val,op: op}, 'slide-in-bottom');
					}
				}
			})
		</script>
	</body>

</html>