fix: 修改验证码登录

yangyin

2024-07-26 348006af285393016f36a8bd643cd99b8e21fead

fix: 修改验证码登录

 src/api/ai/chat.ts

@@ -2,7 +2,8 @@
import { toFormData } from '/@/utils/util';
const GET_SECTION_SAMPLE_API = '/section/get_section_sample';
const GET_SECTION_A_LIST_API = '/section/get_section_a_list';
export const NO_AUTH_API_LIST = [GET_SECTION_SAMPLE_API, GET_SECTION_A_LIST_API];
export const Get_LOGIN_SMS = '/login_sms';
export const NO_AUTH_API_LIST = [GET_SECTION_SAMPLE_API, GET_SECTION_A_LIST_API, Get_LOGIN_SMS];

//#region ====================== knowledge ======================


 src/api/ai/user.ts

@@ -1,3 +1,4 @@
import { Get_LOGIN_SMS } from './chat';
import request from '/@/utils/request';
export const LOGIN_URL = '/login';
export const TEL_LOGIN_URL = '/send_login_sms';
@@ -25,10 +26,22 @@
    });
};

//发送短信验证码
export const loginVerifyMessage = async (params, req: any = request) => {
    return req({
        url: TEL_LOGIN_URL,
        method: 'POST',
        data: params,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
    });
};

//发送短信验证码登录
export const loginMessageUser = async (params, req: any = request) => {
    return req({
        url: TEL_LOGIN_URL,
        url: Get_LOGIN_SMS,
        method: 'POST',
        data: params,
        headers: {

 src/layout/component/sidebar/components/MenuList.vue

@@ -48,7 +48,7 @@
                            ref="loginFormRef"
                            :model="state.loginForm"
                            :rules="loginRules"
                            class="demo-ruleForm mt-[24px] min-h-[126px]"
                            class="demo-ruleForm mt-[24px] min-h-[140px]"
                            size="large"
                        >
                            <el-form-item label="账号" prop="account">
@@ -65,8 +65,7 @@
                            :rules="loginPhoneRules"
                            :model="state.loginPhoneForm"
                            size="large"
                            label-width="67px"
                            class="mt-[24px] min-h-[126px]"
                            class="mt-[24px] min-h-[140px]"
                        >
                            <el-form-item label="手机号" prop="phoneUser">
                                <el-input v-model="state.loginPhoneForm.phoneUser" placeholder="请输入手机号码" clearable>
@@ -76,7 +75,9 @@
                            <el-form-item prop="verifyCode" label="验证码">
                                <el-input v-model="state.loginPhoneForm.verifyCode" placeholder="请输入四位验证码" maxlength="6" clearable>
                                    <template #append>
                                        <el-button type="primary" @click="handleSendVerifyCode">获取验证码</el-button>
                                        <el-button type="primary" @click="handleSendVerifyCode" :disabled="countdown > 0">{{
                                            countdown > 0 ? `${countdown}秒后重试` : '获取验证码'
                                        }}</el-button>
                                    </template>
                                </el-input>
                            </el-form-item>
@@ -95,7 +96,7 @@
<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import { computed, onMounted, reactive, ref, watchEffect } from 'vue';
import { PostLogin, loginMessageUser } from '/@/api/ai/user';
import { PostLogin, loginMessageUser, loginVerifyMessage } from '/@/api/ai/user';
import router from '/@/router';
import emitter from '/@/utils/mitt';
import { accessSessionKey, userNameKey } from '/@/utils/request';
@@ -105,6 +106,7 @@
const formPhoneRef = ref(); //手机号登录
const isLoginStatus = ref(!!Local.get(accessSessionKey));
const userName = ref('');
const countdown = ref(0);
const firstUserCharacter = computed(() => userName.value?.[0]?.toUpperCase());
watchEffect(() => {
    if (!isLoginStatus.value) return;
@@ -157,6 +159,7 @@
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        { pattern: /^1\d{10}$/, message: '请输入正确的手机号码', trigger: 'blur' },
    ],
    verifyCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
};
const handleClick = (item) => {
    gotoRoute({ name: item.routerName });
@@ -170,14 +173,27 @@
};
//登录
const onSubmit = async () => {
    const isValid = await loginFormRef.value.validate().catch(() => {});
    if (!isValid) return;
    const res = await PostLogin({
        user: state.loginForm.account,
        pass: state.loginForm.pwd,
    });
    if (state.activeLoginName === 'accountUser') {
        //账户密码登录
        const isValid = await loginFormRef.value.validate().catch(() => {});
        if (!isValid) return;
        const res = await PostLogin({
            user: state.loginForm.account,
            pass: state.loginForm.pwd,
        });

    LoginInfo.set(res.hswatersession, state.loginForm.account);
        LoginInfo.set(res.hswatersession, state.loginForm.account);
    } else if (state.activeLoginName === 'phoneUser') {
        //手机登录
        const isValid = await formPhoneRef.value.validate().catch(() => {});
        if (!isValid) return;
        const res = await loginMessageUser({
            phone: state.loginPhoneForm.phoneUser,
            code: state.loginPhoneForm.verifyCode,
        });

        LoginInfo.set(res.hswatersession, state.loginPhoneForm.phoneUser);
    }
    state.isShowLogin = false;
    isLoginStatus.value = true;
    window.location.reload();
@@ -212,10 +228,20 @@
const handleSendVerifyCode = async () => {
    formPhoneRef.value.validateField('phoneUser', async (valid: boolean) => {
        if (valid) {
            const res = await loginMessageUser({
            const res = await loginVerifyMessage({
                phone: state.loginPhoneForm.phoneUser,
            });
            console.log('🚀 ~ res:', res);
            if (res.json_ok) {
                countdown.value = 60; //开启倒计时
                // 倒计时逻辑
                const intervalId = setInterval(() => {
                    if (countdown.value > 0) {
                        countdown.value--;
                    } else {
                        clearInterval(intervalId);
                    }
                }, 1000);
            }
        }
    });
};
@@ -466,6 +492,9 @@
                    background-color: #fff;
                    border-radius: 5px;
                }
                :deep(.el-form-item--large .el-form-item__error) {
                    padding: unset !important;
                }
            }
            .set-pwd {
                text-align: right;