zhywpt-sp/login/forget-pwd-step2.vue

<!-- 注册第2步 -->
<template>
  <view class="register-main">
    <view class="title">请输入验证码</view>
    <view class="hint">验证码已发送至：{{ phone }}</view>
    <view class="input-code">
      <verification-code-input v-model="code"></verification-code-input>
    </view>
    <view class="hint2">
      <view class="green">{{ codeDuration === 0 ? "" : codeDuration }}</view>
      <view class="grey" @click="sendRegisterCode">{{
        codeDuration === 0 ? "重新发送验证码" : "秒后可重新发送验证码"
      }}</view>
    </view>
  </view>

  <view class="btn">
    <submit-button title="下一步" @submit="nextStep"></submit-button>
  </view>
</template>

<script setup lang="ts">
import { msg, navTo } from "@/utils/utils";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import { request } from "@/utils/network/request";
import { sendCode } from "@/utils/network/api.js";

//上个界面传递的电话号码
const phone = ref("");
const code = ref(null);

//倒计时时常
const codeDuration = ref(0);
let interval = null;

onLoad((options) => {
  phone.value = options.phone;
  codeInterval();
});

/* 验证码倒计时 */
const codeInterval = () => {
  codeDuration.value = 60;
  interval = setInterval(() => {
    codeDuration.value--;
    if (codeDuration.value === 0) {
      if (interval) {
        clearInterval(interval);
        interval = null;
      }
    }
  }, 1000);
};

/* 发送验证码 */
const sendRegisterCode = () => {
  if (codeDuration.value !== 0) {
    return;
  }
  const options = {
    type: 2,
    data: { mobile: phone.value },
    method: "POST",
    showLoading: true,
  };
  request(sendCode, options).then((res) => {
    msg("验证码发送成功！");
    codeInterval();
  });
};

/* 下一步 */
const nextStep = () => {
  if (!code.value) {
    msg("请先输入验证码！");
    return;
  }
  navTo(`/login/forget-pwd-step3?phone=${phone.value}&code=${code.value}`);
};
</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;
  }
}
.input-code {
  margin: 100rpx -10rpx 0px;
}
.hint2 {
  margin-top: 40rpx;
  display: flex;
  .green {
    font-size: 28rpx;
    color: #00b38b;
  }
  .grey {
    font-size: 24rpx;
    color: #999999;
    margin-left: 16rpx;
  }
}

.btn {
  margin: 200rpx 40rpx 0px;
}
</style>