feat:about account

web/src/components/SendMsg.vue

@@ -1,21 +1,28 @@
 <template>
   <el-container class="send-verify-code">
-    <el-button type="primary" class="send-btn" :size="props.size" :disabled="!canSend" @click="sendMsg" plain>
+    <el-button
+      type="primary"
+      class="btn-normal"
+      :size="props.size"
+      :disabled="!canSend"
+      @click="sendMsg"
+      plain
+    >
       {{ btnText }}
     </el-button>
 
-    <captcha @success="doSendMsg" ref="captchaRef"/>
+    <captcha @success="doSendMsg" ref="captchaRef" />
   </el-container>
 </template>
 
 <script setup>
 // 发送短信验证码组件
-import {ref} from "vue";
-import {validateEmail, validateMobile} from "@/utils/validate";
-import {httpPost} from "@/utils/http";
-import {showMessageError, showMessageOK} from "@/utils/dialog";
+import { ref } from "vue";
+import { validateEmail, validateMobile } from "@/utils/validate";
+import { httpPost } from "@/utils/http";
+import { showMessageError, showMessageOK } from "@/utils/dialog";
 import Captcha from "@/components/Captcha.vue";
-import {getSystemInfo} from "@/store/cache";
+import { getSystemInfo } from "@/store/cache";
 
 // eslint-disable-next-line no-undef
 const props = defineProps({
@@ -23,58 +30,65 @@ const props = defineProps({
   size: String,
   type: {
     type: String,
-    default: 'mobile'
+    default: "mobile"
   }
 });
-const btnText = ref('发送验证码')
-const canSend = ref(true)
-const captchaRef = ref(null)
-const enableVerify = ref(false)
+const btnText = ref("发送验证码");
+const canSend = ref(true);
+const captchaRef = ref(null);
+const enableVerify = ref(false);
 
-getSystemInfo().then(res => {
-  enableVerify.value = res.data['enabled_verify']
-})
+getSystemInfo().then((res) => {
+  enableVerify.value = res.data["enabled_verify"];
+});
 
 const sendMsg = () => {
-  if (!validateMobile(props.receiver) && props.type === 'mobile') {
-    return showMessageError("请输入合法的手机号")
+  if (!validateMobile(props.receiver) && props.type === "mobile") {
+    return showMessageError("请输入合法的手机号");
   }
-  if (!validateEmail(props.receiver) && props.type === 'email') {
-    return showMessageError("请输入合法的邮箱地址")
+  if (!validateEmail(props.receiver) && props.type === "email") {
+    return showMessageError("请输入合法的邮箱地址");
   }
-  
+
   if (enableVerify.value) {
-    captchaRef.value.loadCaptcha()
+    captchaRef.value.loadCaptcha();
   } else {
-    doSendMsg({})
+    doSendMsg({});
   }
-}
+};
 
 const doSendMsg = (data) => {
   if (!canSend.value) {
-    return
+    return;
   }
 
-  canSend.value = false
-  httpPost('/api/sms/code', {receiver: props.receiver, key: data.key, dots: data.dots, x:data.x}).then(() => {
-    showMessageOK('验证码发送成功')
-    let time = 60
-    btnText.value = time
-    const handler = setInterval(() => {
-      time = time - 1
-      if (time <= 0) {
-        clearInterval(handler)
-        btnText.value = '重新发送'
-        canSend.value = true
-      } else {
-        btnText.value = time
-      }
-    }, 1000)
-  }).catch(e => {
-    canSend.value = true
-    showMessageError('验证码发送失败：' + e.message)
+  canSend.value = false;
+  httpPost("/api/sms/code", {
+    receiver: props.receiver,
+    key: data.key,
+    dots: data.dots,
+    x: data.x
   })
-}
+    .then(() => {
+      showMessageOK("验证码发送成功");
+      let time = 60;
+      btnText.value = time;
+      const handler = setInterval(() => {
+        time = time - 1;
+        if (time <= 0) {
+          clearInterval(handler);
+          btnText.value = "重新发送";
+          canSend.value = true;
+        } else {
+          btnText.value = time;
+        }
+      }, 1000);
+    })
+    .catch((e) => {
+      canSend.value = true;
+      showMessageError("验证码发送失败：" + e.message);
+    });
+};
 </script>
 
 <style lang="stylus" scoped>
@@ -84,4 +98,4 @@ const doSendMsg = (data) => {
     width: 100%;
   }
 }
-</style>
+</style>