register.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  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. <style>
  10. .lg {padding: 35px;margin-top: 10px;text-align: center;}
  11. .fq{padding: 0px 50px 20px 50px;}
  12. .input-group{height: auto;}
  13. .input-group i{margin: 13px 0px 10px 5px;font-size: 20px;}
  14. .input-group input{padding: 10px 11px 11px 35px;height: 47px!important;}
  15. .code{position: absolute;right: 0;top: 0;margin-top: 10px;margin-right: 12px;font-size: 12px;color: #fe580a;font-weight: bold;}
  16. .qy{color: darkgray;text-align: left;font-size: 12px;}
  17. img{max-width: 80px;border-radius: 7px;padding-top: 5px;}
  18. .btn{margin-top: 25px;}
  19. .divider{margin-top: 50px;}
  20. .register{margin-top: 50px;color: darkgray;font-size: 13px;}
  21. </style>
  22. </head>
  23. <body>
  24. <header class="mui-bar mui-bar-nav">
  25. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  26. <h1 class="mui-title">注册</h1>
  27. </header>
  28. <div class="mui-content" id="app">
  29. <div class="lg animated bounceIn">
  30. <div class="fq">
  31. <div class="mui-segmented-control">
  32. <a class="mui-control-item mui-active" id="0">个人用户</a>
  33. <a class="mui-control-item" id="1">企业用户</a>
  34. </div>
  35. </div>
  36. <div class="input-group">
  37. <i class="icon">&#xe63d;</i>
  38. <input type="tel" placeholder="手机号" v-model="item.account" />
  39. </div>
  40. <div class="input-group">
  41. <i class="icon">&#xe8b2;</i>
  42. <input type="password" placeholder="密码" v-model="item.password" />
  43. </div>
  44. <div class="input-group">
  45. <i class="icon">&#xe8b2;</i>
  46. <input type="password" placeholder="重复密码" v-model="item.again" />
  47. </div>
  48. <div class="input-group">
  49. <i class="icon">&#xe614;</i>
  50. <input type="tel" placeholder="验证码" v-model="item.code" />
  51. <span class="code" @click.stop="sendMessage()">{{msg}}</span>
  52. </div>
  53. <div class="input-group" v-if="item.mType==1">
  54. <i class="icon">&#xe724;</i>
  55. <input type="text" placeholder="企业名称" v-model="item.company"/>
  56. </div>
  57. <div class="qy" v-if="item.mType==1">
  58. <div class="qy">上传营业执照(需审核)</div>
  59. <a href="#picture"><img :src="img==''?'../../images/zz.png':img" /></a><br/>
  60. <span @click="view()" v-show="img!='' ">查看</span>
  61. </div>
  62. <button class="btn" @click="register()">立即注册</button>
  63. <div class="xy" @click="xy()">服务协议</div>
  64. <div class="divider">
  65. <div class="line" style="width: 30%;"></div>
  66. <div class="text" style="width: 40%;">已有账号?</div>
  67. <div class="line" style="width: 30%;"></div>
  68. <div class="clear"></div>
  69. </div>
  70. <div class="mui-action-back register" @click="register()">去登录</div>
  71. </div>
  72. <!--选择照片-->
  73. <div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
  74. <ul class="mui-table-view">
  75. <li class="mui-table-view-cell" @click="takePhoto()"><a>拍照</a></li>
  76. <li class="mui-table-view-cell" @click="pickImg()"><a>选取现有</a></li>
  77. </ul>
  78. <ul class="mui-table-view">
  79. <li class="mui-table-view-cell" style="color: red;"><a href="#picture"><b>取消</b></a></li>
  80. </ul>
  81. </div>
  82. </div>
  83. <script src="../../js/mui.min.js"></script>
  84. <script src="../../js/app.js"></script>
  85. <script src="../../js/vue.min.js"></script>
  86. <script type="text/javascript">
  87. var time = 60; //1分钟倒计时
  88. var vm = new Vue({
  89. el: "#app",
  90. data: {
  91. img:'',
  92. flag:true,
  93. msg: '发送验证码',
  94. item: {account: '',password: '',again:'',mType: 0,company:'',fj:'',code:''}
  95. },
  96. methods: {
  97. //发送验证码
  98. sendMessage: function() {
  99. if(!isPhone(vm.item.account)) {mui.toast("手机格式不正确");return;}
  100. if(vm.flag == false) {return;}
  101. request(urls().sendMessage, {phone: vm.item.account},function(res) {
  102. if(res.result == true) {
  103. mui.toast("发送成功");
  104. //一分钟倒计时
  105. var countdown = setInterval(function() {
  106. time--;
  107. if(time == 0) {
  108. vm.flag = true;
  109. vm.msg = '发送验证码';
  110. time = 60;
  111. clearInterval(countdown);
  112. } else {
  113. vm.flag = false;
  114. vm.msg = '重新获取(' + time + ')';
  115. }
  116. }, 1000)
  117. } else {
  118. mui.toast(res.msg);
  119. }
  120. plus.nativeUI.closeWaiting();
  121. })
  122. },
  123. //拍照
  124. takePhoto: function() {
  125. takePhoto(function(path) {
  126. plus.io.resolveLocalFileSystemURL(path, function(entry) {
  127. vm.compress(entry.toLocalURL());
  128. });
  129. })
  130. },
  131. //选取照片
  132. pickImg: function() {
  133. pickImg(function(p) {
  134. vm.compress(p.files[0]);
  135. }, 1);
  136. },
  137. //图片压缩上传
  138. compress: function(path) {
  139. compress(function(c) {
  140. upload(urls().uploadFj,path,function(res) {
  141. plus.nativeUI.closeWaiting();
  142. var res=JSON.parse(res.responseText);
  143. vm.item.fj=res.url;
  144. vm.img=urls().path+res.url;
  145. });
  146. }, path, '75%');
  147. },
  148. view:function(){
  149. var urls=[];
  150. urls.push(vm.img);
  151. plus.nativeUI.previewImage(urls,{current:0,loop: true,indicator: 'number'});
  152. },
  153. //服务协议
  154. xy:function(){
  155. open('agreement', '/pages/other/service.html', {url:urls().agreement,id: 'tpp',title: '兼职招聘APP协议'}, 'slide-in-bottom');
  156. },
  157. //注册
  158. register: function() {
  159. if(this.item.account=='') {mui.toast("输入手机号");return;}
  160. if(this.item.password=='') {mui.toast("输入密码");return;}
  161. request(urls().register,this.item, function(res) {
  162. if(res.result == true) {
  163. mui.toast("注册成功");
  164. mui.back();
  165. } else {
  166. mui.alert(res.msg);
  167. }
  168. plus.nativeUI.closeWaiting();
  169. })
  170. }
  171. }
  172. })
  173. mui('body').on('tap', '.mui-control-item', function(e) {
  174. vm.item.mType = e.target.id;
  175. })
  176. </script>
  177. </body>
  178. </html>