123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210 |
- <!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: 75px 10px 10px 10px!important;}
- .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%!important;padding: 0px;text-align: left!important;}
- .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">
- <div style="background-color: white;border-radius: 5px;">
- <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>
- <!--选择照片-->
- <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" crossorigin="anonymous">
- <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: {sex:'男',zgxl:'本科',xw:'学士学位'}
- },
- 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>
|