zhywpt-sp/components/verification-code/verification-code.vue

<!-- 获取验证码 -->
<template>
  <view class="code as-gravity-center" :class="bg ? 'bg' : 'noBg'">
    <text class="code-btn" @click="sendSmsCode">
      {{ data.codeDuration ? data.codeDuration + "s" : "获取验证码" }}
    </text>
  </view>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { checkStr, msg } from "@/utils/utils";
import { request,requestNew } from "@/utils/network/request";
import { sendMessage,etcMobileChangeSmsCodeEtc,newMobileSmsCode} from "@/utils/network/api";

const props = defineProps({
  //手机号
  mobile: {
    type: String,
    default: "",
  },

  //短信模板编码
  templateCode: {
    type: String,
    default: "",
  },

  //有没有背景色
  bg: {
    type: Boolean,
    default: () => {
      return true;
    },
  },
  type: {
    type: String,
    default: "1",  //1正常发验证码   2 ETC预留手机号验证码发送
  },
  customerId: {
    type: String,
    default: "",  //1正常发验证码   2 ETC预留手机号验证码发送  3 ETC预留手机号修改-新手机验证码发送
  },
});

let interval = null;
const data = reactive({
  //倒计时时长
  codeDuration: 0,
});

/*发送验证码*/
const sendSmsCode = async () => {
  // 有倒计时，则已发送
  if (data.codeDuration) {
    uni.showModal({
      content: `请在${data.codeDuration}秒后重试`,
      showCancel: false,
    });
    return;
  }

  if (!props.mobile) {
    msg("请输入手机号！");
    return;
  }

  if (!checkStr(props.mobile, "mobile")) {
    msg("手机号码格式不正确！");
    return;
  }
 
  if(props.type=="1"){
	  const options = {
	    type: 2,
	    data: { mobile: props.mobile },
	    method: "POST",
	    showLoading: true,
	  };
	  requestNew(sendMessage, options).then((res) => {
	    msg("验证码发送成功！");
	    countdown();
	  });
  }else if(props.type=="2"){
	  const options1 = {
	    type: 2,
	    data: { mobile: props.mobile,
		customerId:props.customerId
		 },
	    method: "POST",
	    showLoading: true,
	  };
	  requestNew(etcMobileChangeSmsCodeEtc, options1).then((res) => {
	    msg("验证码发送成功！");
	    countdown();
	  });
  }else{
	  const options1 = {
	    type: 2,
	    data: { mobile: props.mobile,
	  		customerId:props.customerId
	  		 },
	    method: "POST",
	    showLoading: true,
	  };
	  requestNew(newMobileSmsCode, options1).then((res) => {
	    msg("验证码发送成功！");
	    countdown();
	  });
  }
  
};

/* 倒计时 */
const countdown = () => {
  data.codeDuration = 60;
  interval = setInterval(() => {
    data.codeDuration--;
    if (data.codeDuration === 0) {
      if (interval) {
        clearInterval(interval);
        interval = null;
      }
    }
  }, 1000);
};
</script>

<style lang="scss">
.code {
  width: 180rpx;
  height: 50rpx;
  text-align: right;
}

.bg {
  background-color: #2ce242;
  border-radius: 10rpx;
  color: #ffffff;
  font-size: 24rpx;
}

.noBg {
  color: #00b38b;
  background-color: transparent;
  font-size: 28rpx;
}

.code-btn {
  line-height: 50rpx;
  text-align: right;
}
</style>