| | |
| | | <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> |
| | |
| | | </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"> |
| | |
| | | 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() { |
| | |
| | | showRePass: false, |
| | | saveCode: false, |
| | | ruleForm: { |
| | | username: '', |
| | | password: '' |
| | | name: '', |
| | | pwd: '' |
| | | }, |
| | | loading: { |
| | | signIn: false |
| | |
| | | password: '', |
| | | rePassword: '' |
| | | }, |
| | | identifyDialog: false |
| | | identifyDialog: false, |
| | | menu: [] |
| | | }); |
| | | const identifyRef = ref<FormInstance>() |
| | | |
| | |
| | | |
| | | 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 |
| | | } |
| | |
| | | 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' }] |
| | | }); |
| | | |
| | |
| | | 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') |
| | |
| | | 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(); |
| | |
| | | // 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'); |
| | |
| | | return { |
| | | identifyRef, |
| | | identityRules, |
| | | getMenu, |
| | | clearIdentity, |
| | | onSignIn, |
| | | identify, |
| | |
| | | <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; |
| | | } |
| | |
| | | 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); |
| | | } |
| | | } |
| | | } |