马宇豪
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.username" 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.password" 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() {
@@ -100,8 +101,8 @@
            showRePass: false,
            saveCode: false,
            ruleForm: {
                username: '',
                password: ''
                name: '',
                pwd: ''
            },
            loading: {
                signIn: false
@@ -113,7 +114,8 @@
                password: '',
                rePassword: ''
            },
            identifyDialog: false
            identifyDialog: false,
            menu: []
        });
        const identifyRef = ref<FormInstance>()
@@ -125,7 +127,7 @@
        const hasUserCodeOrPassword =()=> {
            if (localStorage.getItem('userCode') && localStorage.getItem('userPassword')) {
                state.ruleForm.username = localStorage.getItem('userCode') as string
                state.ruleForm.name = localStorage.getItem('userCode') as string
                state.ruleForm.password = Base64.decode(localStorage.getItem('userPassword'))//解密
                state.saveCode = true
            }
@@ -175,7 +177,7 @@
            realName: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
            identify: [{ required: true, validator: checkCode, trigger: 'blur'}],
            phone: [{ required: true, validator: checkPhone, trigger: 'blur' }],
            password: [{ required: true, validator: validatePass, trigger: 'blur' }],
            pwd: [{ required: true, validator: validatePass, trigger: 'blur' }],
            rePassword: [{ required: true, validator: validatePass2, trigger: 'blur' }]
        });
@@ -188,17 +190,16 @@
            state.loading.signIn = true;
            // 存储 token 到浏览器缓存
            let res = await useLoginApi().signIn(state.ruleForm);
            if (res.data.code === '200') {
            if (res.data.code === 100) {
              console.log(res.data.data,'user')
                await userInfo.setUserInfos(res.data.data);
                Cookies.set('token', res.data.data.accessToken);
                Cookies.set('projectId', '');
                Cookies.set('token', res.data.data.tk);
                Cookies.set('uid', res.data.data.uid);
                Cookies.set('depId', res.data.data.depId);
                // Session.set('token', res.data.data.accessToken);
                // Session.set('projectId', '');
                // Session.set('uid', res.data.data.uid);
                if (state.saveCode) {
                    localStorage.setItem('userCode', state.ruleForm.username)
                    localStorage.setItem('userCode', state.ruleForm.name)
                    localStorage.setItem('userPassword', Base64.encode(state.ruleForm.password),)
                } else {
                    localStorage.removeItem('userCode')
@@ -215,7 +216,7 @@
            state.loading.signIn = false;
            // Session.set('token', Math.random().toString(36).substr(0));
            // // 模拟数据,对接接口时,记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断(模拟数据)
            // Cookies.set('userName', state.ruleForm.username);
            // Cookies.set('name', state.ruleForm.name);
            // if (!themeConfig.value.isRequestRoutes) {
            //    // 前端控制路由,2、请注意执行顺序
            //    await initFrontEndControlRoutes();
@@ -228,17 +229,34 @@
            //    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 () => {
            // 初始化登录成功时间问候语
            let currentTimeInfo = currentTime.value;
            // 登录成功,跳到转首页
            // 如果是复制粘贴的路径,非首页/登录页,那么登录成功后重定向到对应的路径中
            // if (route.query?.redirect) {
            router.push('/newMenu');
            // if (route.json.query?.redirect) {
            getMenu()
            // console.log(state.menu,'menu')
            // router.push({
            //    path: <string>route.query?.redirect,
            //    query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
            //    path: <string>route.json.query?.redirect,
            //    query: Object.keys(<string>route.json.query?.params).length > 0 ? JSON.parse(<string>route.json.query?.params) : '',
            // });
            // } else {
            //     router.push('/loginPage');
@@ -294,6 +312,7 @@
        return {
            identifyRef,
            identityRules,
            getMenu,
            clearIdentity,
            onSignIn,
            identify,
@@ -309,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;
        }
@@ -352,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);
        }
    }
}