update

src/components/SendMsg.vue

@@ -1,14 +1,49 @@
 <script setup>
+import {ref} from "vue";
 import XLink from "./XLink.vue";
 import XInput from "./XInput.vue";
+import Api from "../api/index.js";
+import {showToast} from "../utils/uils.js";
 
 const modalValue = defineModel();
+const timer = ref(null);
+const props = defineProps({
+    mobile: {
+        type: String,
+        default: null
+    },
+    type: {
+        type: Number,
+        default: 1
+    },
+});
+
+const sendMsg = async () => {
+    const {msg} = await Api.system.sendSms({
+        mobile: props.mobile,
+        type: props.type,
+    });
+    showToast(msg);
+    timer.value = 60;
+    const send = () => {
+        if (timer.value === 0) {
+            timer.value = null;
+            return;
+        }
+        timer.value--;
+        setTimeout(send, 1000);
+    }
+    setTimeout(send, 1000);
+}
 </script>
 
 <template>
     <x-input v-bind="$attrs" v-model:model-value="modalValue" placeholder="验证码">
         <template #suffix>
-            <x-link>发送验证码</x-link>
+            <x-link @click="sendMsg">{{
+                    timer ? `${timer}秒后重试` : `发送验证码`
+                }}
+            </x-link>
         </template>
     </x-input>
 </template>

src/components/XInput.vue

@@ -27,7 +27,7 @@ const modelValue = defineModel();
     height: v-bind(height);
 
     :deep(input) {
-        background-color: rgba(0,0,0,0);
+        background-color: rgba(0, 0, 0, 0);
         flex-grow: 1;
     }
 }