zhywpt-sp/personal-center/setting/change-phone.vue

<!-- 注册第1步 -->
<template>
  <view class="register-main">
    <view class="title">修改手机号</view>
    <view class="hint">请输入新的手机号</view>

    <view class="form-input">
      <view> +86</view>
      <image :src="`${$imgUrl}common/arror_down_black.png`" class="arror" />
      <input
        class="input"
        v-model="state.phone"
        focus
        placeholder="请输入手机号"
        placeholder-class="form-placeholder"
        type="number"
        maxlength="11"
      />
    </view>

    <view class="agreement">
      <u-checkbox
        v-model="state.checked"
        activeColor="#00B38B"
        size="30"
        icon-size="30"
        label-size="24"
      >我已阅读并同意</u-checkbox>
      <!-- <view class="txt-grey">我已阅读并同意</view> -->
      <view class="txt-green" @click="msg('阅读协议')"
        >《平台用户服务隐私协议》</view
      >
    </view>
  </view>

  <view class="btn">
    <submit-button
      title="同意协议并获取验证码"
      @submit="nextStep"
    ></submit-button>
  </view>
</template>

<script setup lang="ts">
import uCheckBox from "@/uni_modules/vk-uview-ui/components/u-checkbox/u-checkbox.vue";
import { reactive } from "vue";
import { checkStr, msg, navTo } from "@/utils/utils";
import { sendCode, regist } from "@/utils/network/api.js";
import { request } from "@/utils/network/request.js";

const state = reactive({
  phone: "", //电话
  checked: false, //是否勾选阅读协议
});

/* 下一步 */
const nextStep = () => {
  if (!state.phone) {
    msg("请输入手机号！");
    return;
  }
  if (!checkStr(state.phone, "mobile")) {
    msg("请输入正确的手机号！");
    return;
  }
  if (!state.checked) {
    msg("请勾选我已阅读并同意《平台用户服务隐私协议》");
    return;
  }

  const options = {
    type: 2,
    data: { mobile: state.phone },
    method: "POST",
    showLoading: true,
  };
  request(sendCode, options)
    .then((res) => {
      msg("验证码发送成功！");
      navTo(`/personal-center/setting/change-phone-code?phone=${state.phone}`);
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style lang="scss" scoped>
.register-main {
  border-top: 1rpx solid #dcdcdc;
  padding: 78rpx 30rpx 50rpx;
  .title {
    font-size: 32rpx;
    color: #333333;
    font-weight: 600;
  }
  .hint {
    font-size: 24rpx;
    color: #999999;
    margin-top: 20rpx;
  }

  .form-input {
    margin-top: 80rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 90rpx;
    border-bottom: 1rpx solid #dcdcdc;
    padding: 0rpx 12rpx;
    font-size: 28rpx;
    color: #333333;
    &:last-child {
      margin-top: 50rpx;
    }
    .input {
      flex: 1;
      padding-right: 48rpx;
    }
    .arror {
      width: 28rpx;
      height: 25rpx;
      margin-left: 16rpx;
      margin-right: 40rpx;
    }
    .eye {
      width: 48rpx;
      height: 48rpx;
    }
  }
  .form-placeholder {
    color: #999999;
  }

  .agreement {
    font-size: 24rpx;
    display: flex;
    align-items: center;
    margin-top: 60rpx;
    .txt-grey {
      color: #666666;
    }

    .txt-green {
      color: #00b38b;
    }
    :deep(.u-checkbox) {
      margin-right: -20rpx;
    }
  }
}
.btn {
  margin: 200rpx 40rpx 0px;
}
</style>