register.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345
  1. <template>
  2. <view class="container">
  3. <view class="loginTitle"><text>注册卡羚能服</text></view>
  4. <view class="login_text">
  5. <view class="login_input flex">
  6. <view class="login_img">
  7. +86
  8. </view>
  9. <view class="login_name"><input class="uni-input" v-model="phone" focus placeholder="请输入手机号" /></view>
  10. </view>
  11. <view class="login_input flex">
  12. <view class="login_img">
  13. 密码
  14. </view>
  15. <view class="login_name"><input class="uni-input" type="password" v-model="password" focus
  16. placeholder="请输入密码" /></view>
  17. </view>
  18. <view class="login_input flex">
  19. <view class="login_img">
  20. 重复密码
  21. </view>
  22. <view class="login_name"><input class="uni-input" type="password" v-model="repassword" focus
  23. placeholder="请重复输入密码" /></view>
  24. </view>
  25. <view class="login_input flex" style="display: none;">
  26. <view class="login_img">
  27. 邀请码
  28. </view>
  29. <view class="login_name"><input class="uni-input" type="text" v-model="invitation" focus
  30. placeholder="请输入邀请码" /></view>
  31. </view>
  32. <view class="login_input flex">
  33. <view class="login_img">
  34. 验证码
  35. </view>
  36. <view class="login_name flex">
  37. <input class="uni-input width" v-model="code" focus placeholder="请输入验证码" />
  38. <view class="code" @click="verification">{{ countDown == 0 ? '验证码' : countDown }}</view>
  39. </view>
  40. </view>
  41. <view><button type="green" @click="register" class="uni-button uni-button-green">立即注册</button></view>
  42. <view>
  43. <navigator url="login">
  44. <button class="uni-button uni-button-green-plain" type="green" plain="true"
  45. hover-class="none">返回登录</button>
  46. </navigator>
  47. </view>
  48. </view>
  49. </view>
  50. </template>
  51. <script>
  52. import {
  53. register,
  54. verify
  55. } from '@/api/login.js';
  56. export default {
  57. data() {
  58. return {
  59. phone: '', //用户
  60. password: '', //密码
  61. repassword: '',
  62. invitation: '', //邀请码
  63. code: '', //验证码
  64. time: '', //保存倒计时对象
  65. countDown: 0, //倒计时
  66. navdom: false //注册后是否跳转到下载页
  67. };
  68. },
  69. onLoad(option) {
  70. // 判断是否有邀请人
  71. if (option.spread) {
  72. // 有邀请人时跳转到下载页
  73. this.navdom = true;
  74. uni.setStorageSync('spread', option.spread);
  75. }
  76. // 获取扫码邀请人id
  77. this.invitation = uni.getStorageSync('spread') || '';
  78. },
  79. watch: {
  80. // 监听倒计时
  81. countDown(i) {
  82. if (i == 0) {
  83. clearInterval(this.time);
  84. }
  85. }
  86. },
  87. methods: {
  88. // 注册
  89. register() {
  90. let obj = this;
  91. if (obj.phone == '') {
  92. obj.$api.msg('请输入电话号码');
  93. return;
  94. }
  95. if (this.phone.length != 11) {
  96. obj.$api.msg('请输入正确的手机号');
  97. return;
  98. }
  99. if (obj.password == '') {
  100. obj.$api.msg('请输入密码');
  101. return;
  102. }
  103. if (obj.repassword == '') {
  104. obj.$api.msg('请再次输入密码');
  105. return;
  106. }
  107. if (obj.repassword != obj.password) {
  108. obj.$api.msg('两次密码不正确');
  109. return;
  110. }
  111. register({
  112. account: obj.phone, //账号
  113. captcha: obj.code, //验证码
  114. password: obj.password, //密码
  115. spread: obj.invitation //上级推广人
  116. }).then(function(e) {
  117. uni.showToast({
  118. title: '注册成功',
  119. duration: 2000,
  120. position: 'top',
  121. mask:true
  122. });
  123. if (obj.navdom) {
  124. setTimeout(function() {
  125. uni.navigateTo({
  126. url: '/pages/public/domApp'
  127. });
  128. }, 1000)
  129. } else {
  130. setTimeout(function() {
  131. uni.navigateTo({
  132. url: '/pages/public/login'
  133. });
  134. }, 1000)
  135. }
  136. });
  137. //调用注册接口,成功跳转登录页
  138. },
  139. //发送验证码
  140. verification() {
  141. let obj = this;
  142. if (this.phone == '') {
  143. this.$api.msg('请输入电话号码');
  144. return;
  145. }
  146. if (this.phone.length < 11) {
  147. this.$api.msg('请输入正确的手机号');
  148. return;
  149. }
  150. // 判断是否在倒计时
  151. if (obj.countDown > 0) {
  152. return false;
  153. } else {
  154. obj.countDown = 60;
  155. obj.time = setInterval(() => {
  156. obj.countDown--;
  157. }, 1000);
  158. //调用验证码接口
  159. verify({
  160. phone: obj.phone,
  161. type: 'register'
  162. })
  163. .then(({
  164. data
  165. }) => {})
  166. .catch(err => {
  167. console.log(err);
  168. });
  169. }
  170. },
  171. login() {
  172. //返回登录
  173. uni.navigateTo({
  174. url: '/pages/public/login'
  175. });
  176. }
  177. }
  178. };
  179. </script>
  180. <style lang="scss">
  181. page {
  182. height: 100%;
  183. }
  184. .container {
  185. width: 100%;
  186. height: 100%;
  187. background-size: 100%;
  188. background-color: #FFFFFF;
  189. }
  190. .container_text {
  191. width: 100%;
  192. height: 500rpx;
  193. top: 0rpx;
  194. .banner-img {
  195. width: 100%;
  196. height: 100%;
  197. }
  198. }
  199. .login_text {
  200. margin: auto 50rpx;
  201. position: relative;
  202. background-color: #ffffff;
  203. border-radius: 20rpx;
  204. .login_input {
  205. border-bottom: 1px solid #f0f0f0;
  206. margin-bottom: 30rpx;
  207. padding: 30rpx 0;
  208. line-height: 1;
  209. .login_img {
  210. height: 35rpx;
  211. width: 150rpx;
  212. flex-shrink: 0;
  213. font-size: 30rpx;
  214. text-align: center;
  215. margin-right: 20rpx;
  216. color: $font-base;
  217. }
  218. .uni-input {
  219. text-align: left;
  220. width: 100%;
  221. font-size: 28rpx !important;
  222. }
  223. .login_name {
  224. color: #333333;
  225. flex-grow: 1;
  226. .code {
  227. color: #5dbc7c;
  228. font-size: 23rpx;
  229. border-left: 1px solid #eeeeee;
  230. width: 150rpx;
  231. flex-shrink: 0;
  232. text-align: center;
  233. }
  234. }
  235. }
  236. .other {
  237. margin-top: 60rpx;
  238. .fenge {
  239. width: 30%;
  240. height: 2rpx;
  241. background-color: #eeeeee;
  242. }
  243. .qita {
  244. font-size: 28rpx;
  245. color: #999999;
  246. }
  247. }
  248. .weixin {
  249. width: 75rpx;
  250. height: 75rpx;
  251. margin: 25rpx auto;
  252. }
  253. .weixin image {
  254. width: 100%;
  255. height: 100%;
  256. }
  257. .weixin_text {
  258. text-align: center;
  259. font-size: 28rpx;
  260. color: #999999;
  261. }
  262. .forget {
  263. font-size: 28rpx;
  264. width: 100%;
  265. text-align: right;
  266. color: #999999;
  267. }
  268. .uni-button-green {
  269. color: #ffffff;
  270. background-color: #5dbc7c;
  271. margin: 40rpx 10rpx;
  272. border-radius: 50rpx;
  273. box-shadow: 0px 8px 10px 0px rgba(166, 203, 184, 0.75);
  274. }
  275. .uni-button-green-plain {
  276. margin: 40rpx 10rpx;
  277. border-radius: 50rpx;
  278. color: $font-base;
  279. background-color: $page-color-base;
  280. border: none;
  281. }
  282. .uni-button {
  283. height: 80rpx;
  284. line-height: 80rpx;
  285. font-size: 28rpx;
  286. width: 100%;
  287. }
  288. }
  289. .loginTitle {
  290. padding: 150rpx 0;
  291. width: 100%;
  292. text-align: left;
  293. color: $font-base;
  294. font-size: 48rpx;
  295. margin: 0 50rpx;
  296. }
  297. .forget {
  298. width: 100rpx;
  299. font-size: 24rpx;
  300. color: #ffffff;
  301. margin: 0px auto;
  302. border-bottom: 1px solid #ffffff;
  303. }
  304. .width {
  305. width: 325rpx !important;
  306. }
  307. .code {
  308. color: #5dbc7c;
  309. font-size: 23rpx;
  310. border-left: 1px solid #eeeeee;
  311. width: 150rpx;
  312. flex-shrink: 0;
  313. text-align: center;
  314. }
  315. uni-button {
  316. height: 80rpx !important;
  317. line-height: 80rpx !important;
  318. }
  319. </style>