base_info.html 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>个人信息</title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <link href="../../css/mui.min.css" rel="stylesheet" />
  8. <link href="../../css/animate.min.css" rel="stylesheet" />
  9. <link href="../../css/cropper.min.css" rel="stylesheet" />
  10. <link href="../../css/mui.picker.min.css" rel="stylesheet" />
  11. <style>
  12. .mui-content{padding: 75px 10px 10px 10px!important;}
  13. .mui-input-row{border-bottom: 1px solid #ececec;padding: 8px;}
  14. .mui-input-row:last-child{border-bottom: 0px;}
  15. .img{width: 60px;height: 80px;border-radius: 5px;}
  16. .mui-input-row label span{font-weight: bold;color: red;}
  17. .mui-input-row .mui-btn{width: 65%!important;padding: 0px;text-align: left!important;}
  18. .save{color:white;padding-top: 12px;}
  19. #clipp{position:fixed;width:100%;height:100%;top:0;background-color:black;display:none;z-index:9999999}
  20. #clipp img{max-width:100%;height:auto;vertical-align:middle;}
  21. #clipp .op{position:fixed;width:100%;bottom:0;}
  22. #clipp .mui-icon{color:white;font-size:50px;font-weight:bold}
  23. [v-cloak] {display: none;}
  24. </style>
  25. </head>
  26. <body>
  27. <div id="app" v-cloak>
  28. <header class="mui-bar mui-bar-nav">
  29. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  30. <h1 class="mui-title">基本信息</h1>
  31. <span class="save mui-pull-right" @click="save()">保存</span>
  32. </header>
  33. <div class="mui-content">
  34. <div style="background-color: white;border-radius: 5px;">
  35. <div class="mui-input-row">
  36. <label style="padding-top: 35px;">证件照片</label>
  37. <a href="#picture">
  38. <img :src="item.tx==null?'../../images/mp.jpg':item.tx " class="img">
  39. </a>
  40. </div>
  41. <div class="mui-input-row">
  42. <label>姓名 <span>*</span></label>
  43. <input type="text" v-model="item.mz" placeholder="输入姓名">
  44. </div>
  45. <div class="mui-input-row">
  46. <label>性别</label>
  47. <select class="mui-btn mui-btn-block" v-model="item.sex">
  48. <option :value="s" v-for="(s,index) in sex">{{s}}</option>
  49. </select>
  50. </div>
  51. <div class="mui-input-row">
  52. <label>出生年月 <span>*</span></label>
  53. <input type="text" v-model="item.csny" placeholder="选择日期" readonly @click="picker()">
  54. </div>
  55. <div class="mui-input-row">
  56. <label>最高学历</label>
  57. <select class="mui-btn mui-btn-block" v-model="item.zgxl">
  58. <option :value="x" v-for="(x,index) in xl">{{x}}</option>
  59. </select>
  60. </div>
  61. <div class="mui-input-row">
  62. <label>学位</label>
  63. <select class="mui-btn mui-btn-block" v-model="item.xw">
  64. <option :value="w" v-for="(w,index) in xw">{{w}}</option>
  65. </select>
  66. </div>
  67. <div class="mui-input-row">
  68. <label>毕业学校</label>
  69. <input type="text" v-model="item.xx" placeholder="输入毕业学校">
  70. </div>
  71. <div class="mui-input-row">
  72. <label>所学专业</label>
  73. <input type="text" v-model="item.zy" placeholder="输入所学专业">
  74. </div>
  75. <div class="mui-input-row">
  76. <label>函授学校</label>
  77. <input type="text" v-model="item.hs" placeholder="输入函授学校">
  78. </div>
  79. <div class="mui-input-row">
  80. <label>函授专业</label>
  81. <input type="text" v-model="item.hszy" placeholder="输入函授专业">
  82. </div>
  83. <div class="mui-input-row">
  84. <label>目前所在地</label>
  85. <input type="text" v-model="item.mqszd" placeholder="输入目前所在地">
  86. </div>
  87. <div class="mui-input-row">
  88. <label>联系电话 <span>*</span></label>
  89. <input type="tel" v-model="item.phone" placeholder="输入联系电话">
  90. </div>
  91. <div class="mui-input-row">
  92. <label>工作经验</label>
  93. <input type="tel" v-model="item.gzjy" placeholder="输入工作经验(年),无工作经验留空">
  94. </div>
  95. <div class="mui-input-row">
  96. <label>电子邮箱 </label>
  97. <input type="email" v-model="item.email" placeholder="输入电子邮箱">
  98. </div>
  99. </div>
  100. </div>
  101. <!--选择照片-->
  102. <div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
  103. <ul class="mui-table-view">
  104. <li class="mui-table-view-cell" @click="takePhoto()"><a>拍照</a></li>
  105. <li class="mui-table-view-cell" @click="pickImg()"><a>选取现有</a></li>
  106. </ul>
  107. <ul class="mui-table-view">
  108. <li class="mui-table-view-cell" style="color: red;"><a href="#picture"><b>取消</b></a></li>
  109. </ul>
  110. </div>
  111. <!--图片剪裁-->
  112. <div id="clipp">
  113. <img id="image" crossorigin="anonymous">
  114. <div class="op">
  115. <span class="mui-icon mui-icon mui-icon-closeempty mui-pull-left" @click="cancel()"></span>
  116. <span class="mui-icon mui-icon-checkmarkempty mui-pull-right" @click="upload()"></span>
  117. </div>
  118. </div>
  119. </div>
  120. <script src="../../js/mui.min.js"></script>
  121. <script src="../../js/app.js"></script>
  122. <script src="../../js/vue.min.js"></script>
  123. <script src="../../js/cropper.min.js"></script>
  124. <script src="../../js/mui.picker.min.js"></script>
  125. <script type="text/javascript">
  126. var cropper = null;
  127. var vm = new Vue({
  128. el: "#app",
  129. data: {
  130. sex: ['男', '女'],
  131. xl: xl(), //学历
  132. xw: xw(), //学位
  133. item: {sex:'男',zgxl:'本科',xw:'学士学位'}
  134. },
  135. mounted: function() {
  136. mui.plusReady(function() {
  137. vm.item = plus.webview.currentWebview().param;
  138. })
  139. },
  140. methods: {
  141. //选择时间
  142. picker: function() {
  143. var picker = new mui.DtPicker({
  144. "type": "date",
  145. "beginYear": 1990,
  146. "endYear": 2019
  147. });
  148. picker.show(function(rs) {
  149. vm.item.csny = rs.text;
  150. picker.dispose();
  151. });
  152. },
  153. //拍照
  154. takePhoto: function() {
  155. plus.nativeUI.showWaiting("准备剪裁...");
  156. takePhoto(function(path) {
  157. plus.io.resolveLocalFileSystemURL(path, function(entry) {
  158. plus.nativeUI.closeWaiting();
  159. if (cropper != null) {
  160. cropper.destroy();
  161. }
  162. cropper = getClipper(2 / 3, entry.toLocalURL());
  163. });
  164. })
  165. },
  166. //选择现有
  167. pickImg: function() {
  168. pickImg(function(p) {
  169. if (cropper != null) {
  170. cropper.destroy();
  171. }
  172. cropper = getClipper(2 / 3, p.files[0]);
  173. }, 1);
  174. },
  175. //裁剪结束并上传
  176. upload: function() {
  177. //获得裁剪对象
  178. var croppedCanvas = cropper.getCroppedCanvas({
  179. width: 200,
  180. height: 300
  181. })
  182. var dataUrl = croppedCanvas.toDataURL();
  183. request(urls().uploadPhoto, {
  184. dataImage: dataUrl
  185. }, function(res) {
  186. vm.item.tx = urls().path + res.url;
  187. mui.toast("上传成功");
  188. plus.nativeUI.closeWaiting();
  189. })
  190. document.getElementById("clipp").style.display = 'none';
  191. },
  192. //取消裁剪
  193. cancel: function() {
  194. document.getElementById("clipp").style.display = 'none';
  195. },
  196. //保存
  197. save: function() {
  198. deleteEmptyProperty(vm.item);
  199. request(urls().resume_save, this.item, function(res) {
  200. mui.toast("保存成功");
  201. plus.webview.getWebviewById('my_resume').reload(true);
  202. plus.nativeUI.closeWaiting();
  203. })
  204. }
  205. }
  206. })
  207. </script>
  208. </body>
  209. </html>