马宇豪
2025-05-09 cbb23429b8beed72b58cbb57f9b3c56a0fb2b5d2
src/views/loginPage/component/accountLogin.vue
@@ -1,14 +1,14 @@
<template>
    <el-form size="large" class="login-content-form">
        <el-form-item class="login-animation1">
            <el-input type="text" :placeholder="$t('message.account.accountPlaceholder1')" v-model="ruleForm.name" clearable autocomplete="off" size="large">
            <el-input type="text" placeholder="请输入用户名" v-model="ruleForm.name" clearable autocomplete="off" size="large">
                <template #prefix>
                    <el-icon class="el-input__icon" style="margin-right: 20px"><img src="../../../assets/loginPage/login_icon_user.png" style="width: 24px; height: 24px" /></el-icon>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item class="login-animation2">
            <el-input :type="isShowPassword ? 'text' : 'password'" :placeholder="$t('message.account.accountPlaceholder2')" v-model="ruleForm.pwd" autocomplete="off" size="large" @keyup.enter.native="onSignIn">
            <el-input :type="isShowPassword ? 'text' : 'password'" placeholder="请输入密码" v-model="ruleForm.pwd" autocomplete="off" size="large" @keyup.enter.native="onSignIn">
                <template #prefix>
                    <el-icon class="el-input__icon" style="margin-right: 20px"><img src="../../../assets/loginPage/login_icon_password.png" style="width: 24px; height: 24px" /></el-icon>
                </template>
@@ -19,13 +19,13 @@
        </el-form-item>
        <el-form-item class="login-animation4 codeDeal">
            <el-checkbox v-model="saveCode" label="记住密码" size="large" />
            <span class="forgetCode" @click="identify">忘记密码?</span>
<!--            <span class="forgetCode" @click="identify">忘记密码?</span>-->
        </el-form-item>
        <el-form-item class="login-animation4">
        <div class="btnBox">
            <el-button type="primary" class="login-content-submit" round @click="onSignIn" :loading="loading.signIn">
                <span>登录系统</span>
                <span>登 录</span>
            </el-button>
        </el-form-item>
        </div>
    </el-form>
    <el-dialog v-model="identifyDialog" title="重置密码" width="30%" center @close="clearIdentity">
        <el-form :model="identity" label-width="80px" ref="identifyRef" :rules="identityRules">
@@ -84,9 +84,10 @@
import { useLoginApi } from '/@/api/login';
import { useUserInfo } from '/@/stores/userInfo';
import type { FormInstance, FormRules } from 'element-plus'
import {workApplyApi} from "/@/api/specialWorkSystem/workApply";
import {verifyPhone,verifyIdCard} from "/@/utils/toolsValidate"
import { Base64 } from 'js-base64'
import {useMenuApi} from "/@/api/systemManage/menu";
export default defineComponent({
    name: 'accountLogin',
    setup() {
@@ -113,7 +114,8 @@
                password: '',
                rePassword: ''
            },
            identifyDialog: false
            identifyDialog: false,
            menu: []
        });
        const identifyRef = ref<FormInstance>()
@@ -189,6 +191,7 @@
            // 存储 token 到浏览器缓存
            let res = await useLoginApi().signIn(state.ruleForm);
            if (res.data.code === 100) {
              console.log(res.data.data,'user')
                await userInfo.setUserInfos(res.data.data);
                Cookies.set('token', res.data.data.tk);
                Cookies.set('uid', res.data.data.uid);
@@ -226,6 +229,21 @@
            //    signInSuccess();
            // }
        };
      const getMenu = async () => {
        let res = await useMenuApi().getMenuAdmin();
        if (res.data.code === 100) {
          state.menu = JSON.parse(JSON.stringify(res.data.data))
          router.push(state.menu[0].children[0].path);
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      };
        // 登录成功后的跳转
        const signInSuccess = async () => {
            // 初始化登录成功时间问候语
@@ -233,7 +251,9 @@
            // 登录成功,跳到转首页
            // 如果是复制粘贴的路径,非首页/登录页,那么登录成功后重定向到对应的路径中
            // if (route.json.query?.redirect) {
            router.push('/newHome');
            getMenu()
            // console.log(state.menu,'menu')
            // router.push({
            //    path: <string>route.json.query?.redirect,
            //    query: Object.keys(<string>route.json.query?.params).length > 0 ? JSON.parse(<string>route.json.query?.params) : '',
@@ -292,6 +312,7 @@
        return {
            identifyRef,
            identityRules,
            getMenu,
            clearIdentity,
            onSignIn,
            identify,
@@ -307,13 +328,12 @@
<style scoped lang="scss">
.login-content-form {
    margin-top: 40px;
    width: 100%;
    width: 80%;
    .el-input::v-deep .el-input__wrapper {
        height: 56px;
        border-radius: 28px;
        border-radius: 4px;
        padding: 0 30px;
        background: #f2f2f2;
        &:focus-within {
            border: 1px solid #2053d7;
        }
@@ -350,19 +370,24 @@
        font-weight: bold;
        letter-spacing: 5px;
    }
    .btnBox{
        display: flex;
        justify-content: center;
    }
    .login-content-submit {
        width: 100%;
        width: 55%;
        height: 56px;
        font-size: 16px;
        border-radius: 28px;
        font-size: 18px;
        border-radius: 6px;
        letter-spacing: 4px;
        font-weight: 300;
        margin-top: 15px;
        background: #2053d7;
        background-image: linear-gradient(to right,#545EF1,#6B8CF1);
        transition: 0.3s;
        box-shadow: 0 8px 30px rgba(88,101,241,.4);
        &:hover {
            letter-spacing: 6px;
            background: #4e7aec;
            background-image: linear-gradient(to left,#545EF1,#6B8CF1);
        }
    }
}