phone.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. <template>
  2. <view class="container">
  3. <view class="row b-b">
  4. <text class="tit">手机号</text>
  5. <input class="input" v-model="account" type="text" placeholder="请填写手机号" placeholder-class="placeholder" />
  6. </view>
  7. <view v-show="show">
  8. <view class="row b-b">
  9. <text class="tit">验证码</text>
  10. <input class="input" v-model="captcha" type="text" placeholder="请填写验证码" placeholder-class="placeholder" />
  11. <view class="code" @click="verification">{{ countDown == 0 ? '验证码' : countDown }}</view>
  12. </view>
  13. <button class="add-btn" :class="{'bg-gray':loding}" @click="loding?'':confirm()">提交</button>
  14. </view>
  15. </view>
  16. </template>
  17. <script>
  18. import { verify } from '@/api/login.js';
  19. import { mapState } from 'vuex';
  20. import { registerReset,binding } from '@/api/set.js';
  21. export default {
  22. data() {
  23. return {
  24. time: '', //保存倒计时对象
  25. countDown: 0, //倒计时
  26. account: '', //手机号
  27. captcha: '', //验证码
  28. password: '' ,//新密码
  29. loding:false,//是否载入中
  30. show:true
  31. };
  32. },
  33. watch: {
  34. // 监听倒计时
  35. countDown(i) {
  36. if (i == 0) {
  37. clearInterval(this.time);
  38. }
  39. }
  40. },
  41. computed: {
  42. ...mapState('user',['userInfo'])
  43. },
  44. onLoad() {
  45. if(this.userInfo.phone == null){
  46. this.account = '';
  47. }else{
  48. this.account = this.userInfo.phone;
  49. this.show = false;
  50. }
  51. },
  52. methods: {
  53. //发送验证码
  54. verification() {
  55. let obj = this;
  56. if (this.account == '') {
  57. this.$api.msg('请输入电话号码');
  58. return;
  59. }
  60. if (!/(^1[1|2|3|4|5|6|7|8|9][0-9]{9}$)/.test(this.account)) {
  61. this.$api.msg('请输入正确的手机号');
  62. return;
  63. }
  64. // 判断是否在倒计时
  65. if (obj.countDown > 0) {
  66. return false;
  67. } else {
  68. obj.countDown = 60;
  69. obj.time = setInterval(() => {
  70. obj.countDown--;
  71. }, 1000);
  72. //调用验证码接口
  73. verify({
  74. phone: obj.account,
  75. type: 'BDING_CODE'
  76. })
  77. .then(({ data }) => {})
  78. .catch(err => {
  79. console.log(err);
  80. });
  81. }
  82. },
  83. confirm(e) {
  84. this.loding = true;
  85. binding({
  86. phone: this.account,
  87. captcha: this.captcha
  88. })
  89. .then(({ data }) => {
  90. this.loding = false;
  91. this.$api.msg('绑定成功!');
  92. setTimeout(function() {
  93. uni.switchTab({
  94. url: '/pages/user/user'
  95. })
  96. }, 1000);
  97. })
  98. .catch(err => {
  99. this.loding = false;
  100. console.log(err);
  101. });
  102. }
  103. }
  104. };
  105. </script>
  106. <style lang="scss">
  107. page {
  108. background: $page-color-base;
  109. }
  110. .container {
  111. padding-top: 30rpx;
  112. }
  113. .row {
  114. display: flex;
  115. align-items: center;
  116. position: relative;
  117. padding: 0 30rpx;
  118. height: 110rpx;
  119. background: #fff;
  120. .tit {
  121. flex-shrink: 0;
  122. width: 120rpx;
  123. font-size: 30rpx;
  124. color: $font-color-dark;
  125. }
  126. .input {
  127. flex: 1;
  128. font-size: 30rpx;
  129. color: $font-color-dark;
  130. }
  131. .iconlocation {
  132. font-size: 36rpx;
  133. color: $font-color-light;
  134. }
  135. }
  136. .add-btn {
  137. display: flex;
  138. align-items: center;
  139. justify-content: center;
  140. width: 690rpx;
  141. height: 80rpx;
  142. margin: 60rpx auto;
  143. font-size: $font-lg;
  144. color: #fff;
  145. background-color: $base-color;
  146. border-radius: 10rpx;
  147. // box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
  148. }
  149. .bg-gray{
  150. background-color: $color-gray;
  151. }
  152. .code {
  153. color: #5dbc7c;
  154. font-size: 23rpx;
  155. border-left: 1px solid #eeeeee;
  156. width: 150rpx;
  157. flex-shrink: 0;
  158. text-align: center;
  159. }
  160. </style>