lzf
/
djfp-app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
							<!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;color: #7f7c7c;}
           .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('CN',item.nickName,1)">
							<a class="mui-navigate-right"><span class="r">{{item.nickName}}</span>昵称</a>
						</li>
						<li class="mui-table-view-cell" @click="op('身高',item.height,3)">
							<a  class="mui-navigate-right"><span class="r">{{item.email}}</span>邮箱</a>
						</li>
						<li class="mui-table-view-cell">
							<a href="#sex" class="mui-navigate-right"><span class="r">{{item.size}}</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="sex" class="mui-popover mui-popover-action mui-popover-bottom">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" @click="size('S')"><a>S</a></li>
					<li class="mui-table-view-cell" @click="size('M')"><a>M</a></li>
					<li class="mui-table-view-cell" @click="size('L')"><a>L</a></li>
					<li class="mui-table-view-cell" @click="size('XL')"><a>XL</a></li>
					<li class="mui-table-view-cell" @click="size('均码')"><a>均码</a></li>
				</ul>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" style="color: red;">
						<a href="#sex"><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) {
							if(res.result == true) {
								vm.item = res.data;
								localStorage.setItem("user", JSON.stringify(res.data));
								vm.item.header=urls().path+vm.item.header;
								plus.webview.getWebviewById('tab/mine.html').reload(true);
							}else{
								mui.alert(res.msg);
							}
							plus.nativeUI.closeWaiting();
						})
					},
					//拍照
					takePhoto: function() {
						mui('#picture').popover('toggle');
						var cmr = plus.camera.getCamera();
						var res = cmr.supportedImageResolutions[0];
						var fmt = cmr.supportedImageFormats[0];
						plus.nativeUI.showWaiting("准备剪裁...");
						cmr.captureImage(function(path) {
							plus.io.resolveLocalFileSystemURL(path, function(entry) {
								plus.nativeUI.closeWaiting();
								if(cropper != null) {
									cropper.destroy();
								}
								cropper = getClipper(1, entry.toLocalURL());
							});
						}, function(error) {
							plus.nativeUI.closeWaiting();
						}, {
							resolution: res,
							format: fmt
						});
					},
					//选择现有
					pickImg: function() {
						mui('#picture').popover('toggle');
						// 从相册中选择图片然后裁剪
						plus.gallery.pick(function(path) {
							if(cropper != null) {
								cropper.destroy();
							}
							cropper = getClipper(1, path);
						}, {
							filter: "image"
						});
					},
					//裁剪结束并上传
					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';
					},
					//编辑尺码
					size: function(op) {
						mui('#sex').popover('toggle');
						request(urls().edit_info, {field: 'size',id: getUser().id,value: op}, function(res) {
							if(res.result == true) {
								mui.toast("修改成功");
								vm.item.size = op;
							}
							plus.nativeUI.closeWaiting();
						})
					},
					//编辑其它
					op: function(msg, val, op) {
						open('edit_info', 'edit_info.html', {msg: msg,value: val,op: op}, 'slide-in-bottom');
					}
				}
			})
		</script>
	</body>

</html>