feat 登录页增加手机号验证码&下架接口替换

src/api/login/index.js

@@ -23,3 +23,15 @@ export async function getCaptcha() {
     }
     return Promise.reject(new Error(res.data.msg));
 }
+
+/**
+ * 发送手机验证码
+ */
+export async function sendMobileCode(data) {
+    const res = await request.post('/sendMobileCode', data);
+    if (res.data.code === 200) {
+        return res.data.msg;
+    }
+    return Promise.reject(new Error(res.data.msg));
+}
+

src/views/login/index.vue

@@ -71,6 +71,20 @@
                             </div>
                         </div>
                     </el-form-item>
+                    <el-form-item prop="phoneCode">
+                        <div class="login-captcha-group">
+                            <el-input
+                                clearable
+                                v-model="form.phoneCode"
+                                placeholder="手机号验证码"
+                                :prefix-icon="ProtectOutlined"
+                            />
+                            <div class="login-captcha" @click="handleSendMobileCode" style="text-align: center; cursor: pointer;">
+                                <span v-if="countdown > 0">{{ countdown }}s</span>
+                                <span v-else>发送验证码</span>
+                            </div>
+                        </div>
+                    </el-form-item>
                     <el-form-item>
                         <el-checkbox v-model="form.remember"
                             >记住密码</el-checkbox
@@ -130,7 +144,7 @@
     } from '@/components/icons';
     import { getToken } from '@/utils/token-util';
     import { usePageTab } from '@/utils/use-page-tab';
-    import { login, getCaptcha } from '@/api/login';
+    import { login, getCaptcha, sendMobileCode } from '@/api/login';
     import logoCover from '@/assets/logo-cover.png';
 
     const { currentRoute } = useRouter();
@@ -145,13 +159,18 @@
     /** 加载状态 */
     const loading = ref(false);
 
+    /** 手机验证码倒计时 */
+    const countdown = ref(0);
+    const countdownTimer = ref(null);
+
     /** 表单数据 */
     const form = reactive({
-        username: 'admin',
-        password: 'admin123',
+        username: '',
+        password: '',
         code: '',
         uuid: '',
-        remember: true
+        remember: true,
+        phoneCode: ''
     });
 
     /** 表单验证规则 */
@@ -179,6 +198,14 @@
                 type: 'string',
                 trigger: 'blur'
             }
+        ],
+        phoneCode: [
+            {
+                required: true,
+                message: '请输入手机号验证码',
+                type: 'string',
+                trigger: 'blur'
+            }
         ]
     });
 
@@ -234,6 +261,30 @@
         qrcode.value = `https://api.eleadmin.com/v2/auth/login?code=${Date.now()}`;
     };
 
+    /** 发送手机验证码 */
+    const handleSendMobileCode = async () => {
+        if (countdown.value > 0) {
+            return;
+        }
+        
+        try {
+            await sendMobileCode({ username: form.username,password: form.password });
+            EleMessage.success('验证码发送成功');
+            
+            // 开始60秒倒计时
+            countdown.value = 60;
+            countdownTimer.value = setInterval(() => {
+                countdown.value--;
+                if (countdown.value <= 0) {
+                    clearInterval(countdownTimer.value);
+                    countdownTimer.value = null;
+                }
+            }, 1000);
+        } catch (e) {
+            EleMessage.error(e.message);
+        }
+    };
+
     /** 选项卡切换事件 */
     const handleTabChange = (active) => {
         if (active === 2) {
@@ -277,7 +328,7 @@
             :deep(.ele-card-body) {
                 display: flex;
                 padding: 0;
-                height: 462px;
+                height: 520px;
             }
         }
     }