register.html 5.7 KB

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