忘了写到哪了

src/components/webGetCode/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="login-code">
+    <el-button
+      class="x_btns login-code-img"
+      size="default"
+      type="primary"
+      style="width: 100%"
+      @click.prevent="getCode"
+      :disabled="isDisabled"
+    >
+      <span>{{ buttonName }}</span>
+    </el-button>
+  </div>
+</template>
+
+<script setup>
+import { getCodeImg } from "@/api/login";
+
+const props = defineProps({
+  mobile: String,
+});
+
+const disabled = ref(true);
+const buttonName = ref("获取验证码");
+const isDisabled = ref(false);
+const time = ref(60);
+
+const { proxy } = getCurrentInstance();
+
+function getCode() {
+  const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
+  if (!reg.test(props.mobile))
+    return proxy.$modal.msgError("请输入正确的手机号码");
+  isDisabled.value = true;
+  let interval = setInterval(function () {
+    buttonName.value = time.value + "后重新发送";
+    --time.value;
+    if (time.value < 0) {
+      buttonName.value = "重新发送";
+      time.value = 60;
+      isDisabled.value = false;
+      clearInterval(interval);
+    }
+  }, 1000);
+  getCodeImg({ mobile: props.mobile })
+    .then((res) => {})
+    .catch(() => {
+      isDisabled.value = false;
+      clearInterval(interval);
+    });
+}
+</script>
+
+<style lang="scss" scoped>
+.login-code {
+  width: 30%;
+  height: 38px;
+  float: right;
+  img {
+    cursor: pointer;
+    vertical-align: middle;
+  }
+}
+.login-code-img {
+  height: 36px;
+}
+</style>