先看效果图：

 接下来看vue代码：

<template>
   <view class="box">
      <!-- 手机号 -->
      <view class="input-phone">
         <text class="phone-left">+86</text>
         <u-icon name="arrow-down-fill" color="#000000" size="7"></u-icon>
         <input 
            class="phone-inp"
            type="number" 
            placeholder="请输入手机号" 
            maxlength="11" 
            v-model="userNamePhone"
         >
      </view>
      
      <!-- 验证码 -->
      <view class="input-code">
         <input 
            type="number" 
            placeholder="请输入验证码" 
            maxlength="6" 
            v-model="userPwdPhone"
         >
         <view class="code-txt" @tap="getPhonecode">
            {{codeBtn.codeText}}
         </view>
      </view>
      <view class="btn" @tap="submitPhone">确定绑定</view>   
   </view>
</template>

<script>
   export default {
      data() {
         return {
            userNamePhone: "",
            userPwdPhone: "",
            //验证规则
            rules: {
               userNamePhone: {
                  rule: /^1[3-9]\d{9}$/,
                  msg: "手机号格式错误"
               },
               userPwdPhone: {
                  rule: /^[0-9]{6}$/,
                  msg: "请输入6位数字验证码"
               }
            },
            //验证码按钮
            codeBtn: {
               codeTime: 60,
               codeText: "获取验证码",
               codeStatus: true
            }
         }
      },
      methods: {
         //判断验证是否符合要求，合法性校验
         validate(key) {
            let bool = true;
            if (!this.rules[key].rule.test(this[key])) {
               //提示信息
               uni.showToast({
                  title: this.rules[key].msg,
               })
               //取反
               bool = false;
               return false;
            }
            return bool;
         },
         //手机验证码登录    
         submitPhone() {
            if (!this.validate('userNamePhone')) return;
            if (!this.validate("userPwdPhone")) return;
            //向服务器发送登陆请求
            uni.request({
               url: 'http://.....', //接口地址
               data: {
                  user_MobilePhone: this.userNamePhone,
                  user_Password: this.userPwdPhone
               },
               method: "POST",
               success: (res) => {
                  console.log("之前的数据状态" + "手机号：" + this.userNamePhone + "验证码：" + this.userPwdPhone)
                  let list = JSON(stringify(res.data))
                  console.log("数据状态:" + list)
                  if (list == "[]") {
                     uni.showToast({
                        icon: 'none',
                        title: '手机号或验证码错误'
                     })
                     return
                  }
                  uni.showToast({
                     icon: "none",
                     title: "绑定成功"
                  })
                  uni.navigateBack()
               },
               fail: () => {
                  uni.showToast({
                     icon: "error",
                     title: "网络异常，请稍后再试"
                  })
               }
            })
         },
         //获取验证码按钮点击计时事件
         getPhonecode() {
            if (this.validate('userNamePhone') && this.codeBtn.codeStatus) {
               this.codeBtn.codeStatus = false
               let timerId = setInterval(() => {
                  let codetime = this.codeBtn.codeTime
                  codetime--
                  this.codeBtn.codeTime = codetime
                  this.codeBtn.codeText = codetime + "s"
                  if (codetime < 1) {
                     clearInterval(timerId)
                     this.codeBtn.codeText = "重新获取"
                     this.codeBtn.codeTime = 60
                     this.codeBtn.codeStatus = true
                  }
               }, 1000)
            }
         },
      }
   }
</script>

<style scoped>
   .box{
      padding: 56rpx 33rpx;
   }
   /* 手机号 */
   .input-phone{
      display: flex;
      align-items: center;
      padding: 46rpx 0;
      border-bottom: 2rpx solid #EEEEEE;
   }
   .phone-left{
      font-size: 26rpx;
      margin-right: 16rpx;
   }
   .phone-inp{
      margin-left: 16rpx;
      padding-left: 17rpx;
      height: 32rpx;
      line-height: 32rpx;
      font-size: 32rpx;
      border-left: 2rpx solid #B9B9B9;
   }
   
   /* 验证码 */
   .input-code{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 46rpx 0;
      border-bottom: 2rpx solid #EEEEEE;
   }
   .code-txt{
      width: 160rpx;
      color: #A6A6A6;
      text-align: center;
      border: 2rpx solid #48CA4C;
      border-radius: 20rpx;
   }
   
   /* 按钮 */
   .btn{
      margin: 160rpx 17rpx;
      width: 650rpx;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      color: #FFFFFF;
      background-color: #48CA4C;
      border-radius: 17rpx;
      
   }
</style>