lzf
/
djfp-app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
							<!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" />
		<link href="../../css/mui.picker.min.css" rel="stylesheet" />
		<style>
		   .mui-content{padding-top: 70px!important;background-color: white;}
           .mui-input-row{border-bottom: 1px solid #ececec;padding: 8px;}
           .mui-input-row:last-child{border-bottom: 0px;}
		   .img{width: 60px;height: 80px;border-radius: 5px;}
		   .mui-input-row label span{font-weight: bold;color: red;}
		   .mui-input-row .mui-btn{width: 65%;padding: 0px;}
		   .save{color:white;padding-top: 12px;}
		   #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>
				<span class="save mui-pull-right" @click="save()">保存</span>
			</header>
			<div class="mui-content animated bounceInUp">
					<div class="mui-input-row">
						<label style="padding-top: 35px;">证件照片</label>
							<a href="#picture">
								<img :src="item.tx==null?'../../images/mp.jpg':item.tx " class="img">
							</a>
					</div>
					<div class="mui-input-row">
						<label>姓名 <span>*</span></label>
						<input type="text" v-model="item.mz" placeholder="输入姓名">
					</div>
					<div class="mui-input-row">
						<label>性别</label>
						<select class="mui-btn mui-btn-block" v-model="item.sex">
					        <option :value="s" v-for="(s,index) in sex">{{s}}</option>
				        </select>
					</div>
					<div class="mui-input-row">
						<label>出生年月 <span>*</span></label>
						<input type="text" v-model="item.csny" placeholder="选择日期" readonly @click="picker()">
					</div>
					<div class="mui-input-row">
						<label>最高学历</label>
						<select class="mui-btn mui-btn-block" v-model="item.zgxl">
					        <option :value="x" v-for="(x,index) in xl">{{x}}</option>
				        </select>
					</div>
					<div class="mui-input-row">
						<label>学位</label>
						<select class="mui-btn mui-btn-block" v-model="item.xw">
					        <option :value="w" v-for="(w,index) in xw">{{w}}</option>
				        </select>
					</div>	
					<div class="mui-input-row">
						<label>毕业学校</label>
						<input type="text" v-model="item.xx" placeholder="输入毕业学校">
					</div>
					<div class="mui-input-row">
						<label>所学专业</label>
						<input type="text" v-model="item.zy" placeholder="输入所学专业">
					</div>
					<div class="mui-input-row">
						<label>函授学校</label>
						<input type="text" v-model="item.hs" placeholder="输入函授学校">
					</div>
					<div class="mui-input-row">
						<label>函授专业</label>
						<input type="text" v-model="item.hszy" placeholder="输入函授专业">
					</div>
					<div class="mui-input-row">
						<label>目前所在地</label>
						<input type="text" v-model="item.mqszd" placeholder="输入目前所在地">
					</div>	
					<div class="mui-input-row">
						<label>联系电话 <span>*</span></label>
						<input type="tel" v-model="item.phone" placeholder="输入联系电话">
					</div>	
					<div class="mui-input-row">
						<label>工作经验</label>
						<input type="tel" v-model="item.gzjy" placeholder="输入工作经验(年),无工作经验留空">
					</div>	
					<div class="mui-input-row">
						<label>电子邮箱 </label>
						<input type="email" v-model="item.email" placeholder="输入电子邮箱">
					</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">
				<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="upload()"></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 src="../../js/mui.picker.min.js"></script>
		<script type="text/javascript">
			var cropper = null;
			var vm = new Vue({
				el: "#app",
				data: {
					sex:['男','女'],
					xl:xl(), //学历
					xw:xw(),//学位
					item: {}
				},
				mounted: function() {
					mui.plusReady(function() {
						vm.item=plus.webview.currentWebview().param;
					})
				},
				methods: {
					//选择时间
					picker:function(){
						var picker = new mui.DtPicker({"type":"date","beginYear":1990,"endYear":2019});
						picker.show(function(rs) {
							vm.item.csny=rs.text;
							picker.dispose();
						});
					},
					//拍照
					takePhoto: function() {
						plus.nativeUI.showWaiting("准备剪裁...");
						takePhoto(function(path) {
							plus.io.resolveLocalFileSystemURL(path, function(entry) {
								plus.nativeUI.closeWaiting();
								if(cropper != null) {
									cropper.destroy();
								}
								cropper = getClipper(2/3, entry.toLocalURL());
							});
						})
					},
					//选择现有
					pickImg: function() {
						pickImg(function(p) {
							if(cropper != null) {
								cropper.destroy();
							}
							cropper = getClipper(2/3, p.files[0]);
						}, 1);
					},
					//裁剪结束并上传
					upload: function() {
						//获得裁剪对象
						var croppedCanvas = cropper.getCroppedCanvas({width: 200,height: 300})
						var dataUrl = croppedCanvas.toDataURL();
						request(urls().uploadPhoto, {dataImage: dataUrl}, function(res) {
							vm.item.tx= urls().path + res.url;
							mui.toast("上传成功");
							plus.nativeUI.closeWaiting();
						})
						document.getElementById("clipp").style.display = 'none';
					},
					//取消裁剪
					cancel: function() {
						document.getElementById("clipp").style.display = 'none';
					},
					//保存
					save:function(){
						deleteEmptyProperty(vm.item);
						request(urls().resume_save,this.item, function(res) {
							mui.toast("保存成功");
							plus.webview.getWebviewById('my_resume').reload(true);
							plus.nativeUI.closeWaiting();
						})
					}
				}
			})
		</script>
	</body>
</html>