opt: 将短信发送按钮封装成组件

web/src/components/BindMobile.vue

@@ -0,0 +1,68 @@
+<template>
+  <el-dialog
+      v-model="showDialog"
+      :close-on-click-modal="false"
+      :show-close="false"
+      :title="title"
+  >
+    <div class="form" id="password-form">
+      <el-form :model="form" label-width="120px">
+        <el-form-item label="手机号码">
+          <el-input v-model="form.mobile" type="password"/>
+        </el-form-item>
+        <el-form-item label="手机验证码">
+          <el-row :gutter="10">
+            <el-col :span="12">
+              <el-input v-model="form.code" type="password"/>
+            </el-col>
+            <el-col :span="12">
+              <send-msg size="large" v-model:mobile="form.mobile"/>
+            </el-col>
+          </el-row>
+
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="save">
+          提交绑定
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {ref} from "vue";
+import {checkSession} from "@/action/session";
+import SendMsg from "@/components/SendMsg.vue";
+
+const title = ref('绑定手机号')
+const showDialog = ref(false)
+const form = ref({
+  mobile: '',
+  code: ''
+})
+
+checkSession().then(user => {
+  if (user.mobile === '') {
+    showDialog.value = true
+  }
+}).catch(e => {
+  console.log(e.message)
+})
+
+const save = () => {
+
+}
+
+const sendMsg = () => {
+
+}
+</script>
+
+<style scoped>
+
+</style>

web/src/components/SendMsg.vue

@@ -0,0 +1,59 @@
+<template>
+  <el-button type="primary" class="sms-btn" :disabled="!canSend" :size="size" @click="sendMsg" plain>{{
+      btnText
+    }}
+  </el-button>
+</template>
+
+<script setup>
+// 发送短信验证码组件
+import {ref} from "vue";
+import {validateMobile} from "@/utils/validate";
+import {ElMessage} from "element-plus";
+import {httpGet, httpPost} from "@/utils/http";
+
+const props = defineProps({
+  mobile: String,
+  size: String,
+});
+const btnText = ref('发送验证码')
+const canSend = ref(true)
+
+const sendMsg = () => {
+  if (!canSend.value) {
+    return
+  }
+
+  if (!validateMobile(props.mobile)) {
+    return ElMessage.error("请输入合法的手机号")
+  }
+  canSend.value = false
+  httpGet('/api/verify/token').then(res => {
+    httpPost('/api/verify/sms', {token: res.data, mobile: props.mobile}).then(() => {
+      ElMessage.success('短信发送成功')
+      let time = 120
+      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
+      ElMessage.error('短信发送失败：' + e.message)
+    })
+  }).catch(e => {
+    console.log('failed to fetch token: ' + e.message)
+  })
+}
+
+</script>
+
+<style scoped>
+
+</style>