lzf
/
partTime-app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
							<!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: 12px;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: 10px 15px 0px 15px;overflow: hidden;}
		   #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}
		   .bbv{padding: 15px 18px 0px 18px;color: #7a7a7a;font-size: 14px;}
		   .bor{border-left: 5px solid #00a0ea;padding-right: 5px;}
		   .row .sm3{padding: 10px;width: 33.33%;text-align: center;font-size: 13px;color: #727171;}
		   .row .sm3 .img{width: 60px;height: 60px; border-radius: 3px;}
		  [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="bbv">
					<span class="bor"></span>
					<span>个人信息</span>
				</div>
				<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>
					</ul>
				</div>
				<div class="bbv">
					<span class="bor"></span>
					<span>收款方式</span>
				</div>
				<div class="m_box" style="margin-bottom: 15px;padding-bottom: 15px;">
					<div class="img_list">
						<div class="row">
							<div class="sm3" v-for="(item,index) in list">
								<img :src="item.pic" class="img" @click.stop="view(item.pic)" />
								<div class="sa">{{item.name}}</div>
							</div>
							<div class="clear"></div>
						</div>
					</div>
					<div class="divider" style="margin-top: 15px;">
						<div class="line" style="width: 30%;"></div>
						<div class="text" style="width: 40%;">银行卡信息</div>
						<div class="line" style="width: 30%;"></div>
						<div class="clear"></div>
					</div>
					<ul class="mui-table-view" style="margin-top: 15px;">
						<li class="mui-table-view-cell" @click="op('卡号',item.kh,'kh')">
							<a class="mui-navigate-right"><span class="r">{{item.kh}}</span>卡号</a>
						</li>
						<li class="mui-table-view-cell" @click="op('持卡人姓名',item.kName,'kName')">
							<a class="mui-navigate-right"><span class="r">{{item.kName=='null'?'未填':item.kName}}</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: {},
					list: [{
						name: '微信收款码',
						pic: '../../images/wx.jpg'
					}, {
						name: '支付宝收款码',
						pic: '../../images/zfb.jpg'
					}, {
						name: '银行卡转账',
						pic: '../../images/yhk.jpg'
					}],
				},
				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');
					},
					view: function(img) {
						plus.nativeUI.previewImage([img], {
							current: 0,
							loop: true,
							indicator: 'number'
						});
					},
					//编辑其它
					op: function(msg, val, op) {
						open('edit_info', 'edit_info.html', {
							msg: msg,
							value: val,
							op: op
						}, 'slide-in-bottom');
					}
				}
			})
		</script>
	</body>

</html>