合并

MrShi

21 小时以前 ad1629e4f90490758dbd91c4d8a9bed4a8693dfc

 mini-program/pages/change-binding/change-binding.vue

@@ -2,29 +2,123 @@
   <view class="box">
      <view class="box-info">
         <text>验证当前登录手机号</text>
         <text>请输入 153****1677 收到的短信验证码</text>
         <text v-if="status === 1">请输入 {{phone1}} 收到的短信验证码</text>
         <text v-if="status === 2">换绑新手机号之后，可以用新的手机号登录</text>
      </view>
      <view class="list">
         <view class="input">
         <view class="input" v-if="status === 2">
            <view class="input-label">手机号</view>
            <input type="number" placeholder="请输入手机号" />
            <input type="number" v-model="newPhone" placeholder="请输入手机号" />
         </view>
         <view class="input">
            <view class="input-label">短信验证码</view>
            <input type="number" placeholder="请输入验证码" />
            <view class="input-send">获取验证码</view>
            <input type="number" v-model="code" placeholder="请输入验证码" />
            <view class="input-send" @click="send" v-if="num === 0">获取验证码</view>
            <view class="input-send" v-else>{{num}}</view>
         </view>
      </view>
      <view class="btn">下一步</view>
      <view class="btn" @click="submit">下一步</view>
   </view>
</template>

<script>
   import { mapState } from 'vuex'
   import { formatPhoneStar } from '@/utils/utils.js'
   export default {
      computed: {
         ...mapState(['userInfo'])
      },
      data() {
         return {
				
            status: 1,
            phone: '',
            phone1: '',
            newPhone: '',
            code: '',
            timer: null,
            num: 0
         };
      },
      onLoad() {
         this.phone = this.userInfo.phone
         this.phone1 = this.returnPhone(this.userInfo.phone)
      },
      methods: {
         returnPhone(phone) {
            return formatPhoneStar(phone)
         },
         // 下一步
         submit() {
            if (this.status === 1) {
               this.$u.api.verifyCode({
                  code: this.code,
                  phone: this.phone
               }).then(res => {
                  if (res.code === 200) {
                     this.status = 2
                     this.code = ''
                     this.num = 0
                  }
               })
            } else if (this.status === 2) {
               this.$u.api.updateUserPhone({
                  code: this.code,
                  phone: this.newPhone
               }).then(res => {
                  if (res.code === 200) {
                     this.num = 0
                     uni.showToast({
                        title: '换绑成功!',
                        icon: 'none'
                     })
                     uni.navigateBack({ delta: 1 });
                  }
               })
            }
            if (this.timer) {
               clearInterval(this.timer)
               this.timer = null
            }
         },
         // 发送验证码
         send() {
            if (this.status === 1) {
               this.$u.api.sendSmsCode({
                  phone: this.phone
               }).then(res => {
                  if (res.code === 200) {
                     uni.showToast({
                        title: '验证码发送成功',
                        icon: 'none'
                     })
                     this.jishi()
                  }
               })
            } else {
               this.$u.api.sendSmsCode({
                  phone: this.newPhone
               }).then(res => {
                  if (res.code === 200) {
                     uni.showToast({
                        title: '验证码发送成功',
                        icon: 'none'
                     })
                     this.jishi()
                  }
               })
            }
         },
         jishi() {
            this.num = 10
            this.timer = setInterval(() => {
               if (this.num > 0) {
                  this.num--
               } else {
                  clearInterval(this.timer)
                  this.timer = null
               }
            }, 1000)
         }
      }
   }
</script>