分享：原生小程序绑定手机号

/*修改密码*/
page {
  background-color: #fff !important;
  border-top: 1px solid #eee
}

.ChangePassword .phone {
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  margin-top: 55rpx;
}

.ChangePassword .list {
  width: 580rpx;
  margin: 53rpx auto 0 auto;
}

.ChangePassword .list .item {
  width: 100%;
  height: 110rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.ChangePassword .list .item input {
  width: 100%;
  height: 100%;
  font-size: 28rpx;
}

.ChangePassword .list .item .placeholder {
  color: #b9b9bc;
}

.ChangePassword .list .item input.codeIput {
  width: 340rpx;
}

.ChangePassword .list .item .code {
  font-size: 33rpx;
  background-color: #fff;
  line-height: 1
}

.ChangePassword .list .item .code.on {
  color: #b9b9bc !important;
  border: 1px solid #eee;
  padding: 20rpx 20rpx;
}

.ChangePassword .confirmBnt {
  font-size: 32rpx;
  width: 580rpx;
  height: 90rpx;
  border-radius: 45rpx;
  color: #fff;
  margin: 92rpx auto 0 auto;
  text-align: center;
  line-height: 90rpx;
  background: #F56C6C
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item::after {
  content: " ";
  display: inline-block;
  height: 13rpx;
  width: 13rpx;
  border-width: 2rpx 1rpx 0 0;
  border-color: #c8c8cd;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  top: -4rpx;
  position: absolute;
  top: 50%;
  margin-top: -8rpx;
  right: 20rpx;

}

/* pages/bind-phone/bind-phone.wxss */

html,
body,
#app {
  height: 100%;
  width: 100%;
}

.YmContent {
  height: 100%;
  width: 100%;
}

uni-page-body,
#app {
  height: 100%;
}

button::after {
  border: none;
  width: auto;
}

input {
  outline: none;
  border: none;
  list-style: none;
  width: auto;
}

.list_item {
  float: left;
}

.ym_hide {
  display: none;
}

.ym_show {
  display: block;
}

.slide-image {
  width: 100%;
  height: 100%;
}

.list_horizontal {
  width: auto;
  display: inline-block;
}

.bind_mobile_number_27 {
  white-space: normal;
  width: 749rpx;
  height: 100%;
  padding: 0rpx;
  clear: both;
  float: left;
  background-color: #f0f2f3;
  text-align: left;
  border-radius: 0rpx;
  font-size: 8rpx;
}

.bind_mobile_number_27 .bind_mobile_number_16 {
  white-space: normal;
  width: 284rpx;
  height: 40rpx;
  padding: 0rpx;
  clear: both;
  /* margin-top: 255rpx; */
  margin-left: 233rpx;
  float: left;
  text-align: center;
  justify-content: center;
  border-radius: 0rpx;
  color: #646464;
  font-size: 37rpx;
  line-height: 40rpx;
}

.bind_mobile_number_27 .bind_mobile_number_28 {
  white-space: normal;
  width: 749rpx;
  height: 202rpx;
  padding: 0rpx;
  clear: both;
  margin-left: 0rpx;
  float: left;
  background-color: #fdfffd;
  text-align: left;
  border-radius: 0rpx;
  font-size: 8rpx;
}

.bind_mobile_number_27 .bind_mobile_number_28 .bind_mobile_number_29 {
  white-space: normal;
  width: 749rpx;
  height: 101rpx;
  padding: 0rpx;
  clear: both;
  margin-top: 0rpx;
  margin-left: 0rpx;
  float: left;
  text-align: left;
  border-bottom-color: #e1e1e1;
  border-bottom-width: 1rpx;
  border-bottom-style: solid;
  border-radius: 0rpx;
  font-size: 8rpx;
}

.bind_mobile_number_27 .bind_mobile_number_28 .bind_mobile_number_29 .mobile {
  white-space: normal;
  width: 702rpx;
  height: 40rpx;
  min-height: 29rpx;
  padding: 0rpx;
  margin-top: 31rpx;
  margin-left: 25rpx;
  float: left;
  text-align: left;
  border-radius: 0rpx;
  color: #646464;
  font-size: 29rpx;
  line-height: 40rpx;
}

.bind_mobile_number_27 .bind_mobile_number_28 .bind_mobile_number_22 {
  white-space: normal;
  width: 711rpx;
  height: 63rpx;
  padding: 0rpx;
  clear: both;
  margin-top: 24rpx;
  margin-left: 24rpx;
  float: left;
  text-align: left;
  border-radius: 0rpx;
  font-size: 61rpx;
  line-height: 63rpx;
}

.bind_mobile_number_27 .bind_mobile_number_28 .bind_mobile_number_22 .smsCode {
  white-space: normal;
  width: 511rpx;
  height: 40rpx;
  min-height: 40rpx;
  padding: 0rpx;
  margin-top: 7rpx;
  margin-left: 0rpx;
  float: left;
  text-align: left;
  border-radius: 0rpx;
  color: #646464;
  font-size: 29rpx;
  line-height: 40rpx;
}

.bind_mobile_number_27 .bind_mobile_number_28 .bind_mobile_number_22 .btSendCode {
  white-space: normal;
  width: 157rpx;
  height: 59rpx;
  padding: 0rpx;
  margin-top: 2rpx;
  margin-left: 32rpx;
  float: left;
  background-color: #555955;
  text-align: center;
  justify-content: center;
  border-radius: 0rpx;
  cursor: pointer;
  color: #ffffff;
  font-size: 25rpx;
  line-height: 59rpx;
}

.bind_mobile_number_27 .btSubmit {
  white-space: normal;
  width: 702rpx;
  height: 91rpx;
  padding: 0rpx;
  clear: both;
  margin-top: 49rpx;
  margin-left: 24rpx;
  float: left;
  background-color: #0299dc;
  text-align: center;
  justify-content: center;
  border-radius: 10rpx;
  cursor: pointer;
  color: #ffffff;
  font-size: 34rpx;
  line-height: 91rpx;
}

<form bindsubmit='phonebindsubmit'>
  <view class="YmContent">
    <view class="bind_mobile_number_27">
      <!-- <text decode="true" class="bind_mobile_number_16">请绑定手机号</text> -->
      <view class="bind_mobile_number_28">
        <view class="bind_mobile_number_29">
          <input placeholder="请输入电话号码" bindinput='inputPhone' class="mobile" name='phone' />
        </view>
        <view class="bind_mobile_number_22">
          <input placeholder="请输入验证码" class="smsCode" name='code' bindinput="codeInput" />
          <button class="btSendCode" bindtap="sendCode" disabled="{{disabled}}">{{timeNum}}
          </button>
        </view>
      </view>
      <button class="btSubmit" formType="submit">立即绑定 </button>
    </view>
  </view>
</form>