applet/pages/set/updatePhone.vue

<template>
  <view class="custom-form">
    <view class="custom-form-item">
      <text>原手机号</text>
      <input v-model="FormData.mobile" placeholder="" type="number" disabled />
    </view>
    <view class="custom-form-item">
      <text>新手机号</text>
      <input
        v-model="FormData.newMobile"
        placeholder="请输入新手机号"
        type="number"
        maxlength="11"

      />
    </view>
    <view class="custom-form-item">
      <text>原手机号验证码</text>
      <input v-model="FormData.captcha" placeholder="请输入" />
      <uv-code
        :seconds="seconds"
        @end="end"
        @start="start"
        ref="code"
        @change="codeChange"
      ></uv-code>
      <uv-button @tap="getCode" color="#FFECEC" shape="circle">{{
        tips
      }}</uv-button>
    </view>
  </view>
  <view class="submit">
    <uv-button
      type="error"
      color="#EB5153"
      text="确认提交"
      shape="circle"
      @tap="submit"
    ></uv-button>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { updateMobile_Api } from "@/api/userInfo.js";
import { smsCode } from "@/api/login.js";
import $config from "@/config/global.config";

const FormData = ref({
  captcha: "",
  mobile: "",
  newMobile: "",
});
const code = ref();
const seconds = ref(60);
const tips = ref("获取验证码");

const codeChange = (text) => {
  tips.value = text;
};
const getCode = () => {
  if (!FormData.value.mobile) {
    uni.$uv.toast("未获取到原手机号");
    return false;
  }
  if (code.value.canGetCode) {
    // 模拟向后端请求验证码
    uni.showLoading({
      title: "正在获取验证码",
    });
    smsCode({
      mobile: FormData.value.mobile,
    })
      .then((res) => {
        uni.$uv.toast("验证码已发送");
      })
      .finally((e) => {
        uni.hideLoading();
        // 这里此提示会被this.start()方法中的提示覆盖
        code.value.start();
      });
  } else {
    uni.$uv.toast("倒计时结束后再发送");
  }
};
const end = () => {
  uni.$uv.toast("倒计时结束");
};
const start = () => {
  uni.$uv.toast("倒计时开始");
};

const submit = () => {
  if (!FormData.value.newMobile) {
    return uni.$uv.toast("新手机号不能为空");
  }
  if (FormData.value.newMobile.length < 11) {
    uni.$uv.toast("新手机号长度不能少于11位");
    return;
  }
  if (!$config.telRegex.test(FormData.value.newMobile)) {
    uni.$uv.toast("请输入正确的手机号");
    return;
  }
  if (!FormData.value.captcha) {
    return uni.$uv.toast("验证码不能为空");
  }
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  updateMobile_Api(FormData.value)
    .then((res) => {
      uni.hideLoading();
      uni.showToast({
        title: "更换成功",
        icon: "success",
      });
      setTimeout(() => {
        uni.switchTab({
          url: "/pages/tabtar/personalCenter",
        });
      }, 500);
    })
    .catch((err) => {
      // uni.hideLoading();
    });
};

onMounted(() => {
  let user = uni.getStorageSync("personal") || {};
  if (user && user.mobile) {
    FormData.value.mobile = user.mobile;
  }
});
</script>

<style lang="scss" scoped>
.custom-form {
  padding: 20rpx 54rpx;
}

.custom-form {
  margin-bottom: 60rpx;

  .custom-form-item {
    display: flex;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f0f0f0;

    text {
      margin-right: 24rpx;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: normal;
      color: #1a1a1a;
      flex-shrink: 0;
    }

    :deep(.input-placeholder) {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: normal;
      color: #d9d9d9;
    }
  }

  :deep(.uv-button) {
    height: 55rpx;
    margin-left: auto;
    color: #ea3527 !important;
    font-size: 26rpx;
    font-family: PingFang SC, PingFang SC-Bold;
    font-weight: bold;
  }
}

.submit {
  margin: 0 60rpx;

  :deep(.uv-button) {
    height: 90rpx;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: normal;
    text-align: center;
    color: #ffffff;
  }
}
</style>