From cefcb88c6cd0690052e503d5f1c943cb7f8a03cb Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期三, 30 十一月 2022 09:18:32 +0800
Subject: [PATCH] Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqt
---
src/views/loginPage/component/accountLogin.vue | 526 ++++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 344 insertions(+), 182 deletions(-)
diff --git a/src/views/loginPage/component/accountLogin.vue b/src/views/loginPage/component/accountLogin.vue
index 86cca18..bcbe021 100644
--- a/src/views/loginPage/component/accountLogin.vue
+++ b/src/views/loginPage/component/accountLogin.vue
@@ -1,47 +1,75 @@
<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">
- <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"
- >
- <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>
- <template #suffix>
- <i
- class="iconfont el-input__icon login-content-password"
- :class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
- @click="isShowPassword = !isShowPassword"
- >
- </i>
- </template>
- </el-input>
- </el-form-item>
- <el-form-item class="login-animation4 codeDeal">
- <el-checkbox v-model="saveCode" label="记住密码" size="large" />
- <span class="forgetCode">忘记密码？</span>
- </el-form-item>
- <el-form-item class="login-animation4">
- <el-button type="primary" class="login-content-submit" round @click="onSignIn" :loading="loading.signIn">
- <span>登录系统</span>
- </el-button>
- </el-form-item>
- </el-form>
+ <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">
+ <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">
+ <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>
+ <template #suffix>
+ <i class="iconfont el-input__icon login-content-password" :class="isShowPassword ? 'icon-xianshimima' : 'icon-yincangmima'" @click="isShowPassword = !isShowPassword"> </i>
+ </template>
+ </el-input>
+ </el-form-item>
+ <el-form-item class="login-animation4 codeDeal">
+ <el-checkbox v-model="saveCode" label="记住密码" size="large" />
+ <span class="forgetCode" @click="identify">忘记密码？</span>
+ </el-form-item>
+ <el-form-item class="login-animation4">
+ <el-button type="primary" class="login-content-submit" round @click="onSignIn" :loading="loading.signIn">
+ <span>登录系统</span>
+ </el-button>
+ </el-form-item>
+ </el-form>
+ <el-dialog v-model="identifyDialog" title="重置密码" width="30%" center @close="clearIdentity">
+ <el-form :model="identity" label-width="80px" ref="identifyRef" :rules="identityRules">
+ <el-divider border-style="dashed">身份验证</el-divider>
+ <el-form-item label="姓名" prop="realName">
+ <el-input v-model="identity.realName"/>
+ </el-form-item>
+ <el-form-item label="身份证号" prop="identify">
+ <el-input v-model="identity.identify"/>
+ </el-form-item>
+ <el-form-item label="手机号" prop="phone">
+ <el-input v-model="identity.phone"/>
+ </el-form-item>
+ <el-divider border-style="dashed">重设密码</el-divider>
+ <el-form-item label="密码" prop="password">
+ <el-input v-model="identity.password" :type="showPass ? 'text': 'password'" autocomplete="off">
+ <template #suffix>
+ <i class="iconfont el-input__icon login-content-password" :class="showPass ? 'icon-xianshimima' : 'icon-yincangmima'" @click="showPass = !showPass"> </i>
+ </template>
+ </el-input>
+ </el-form-item>
+ <el-form-item label="确认密码" prop="rePassword">
+ <el-input
+ v-model="identity.rePassword"
+ :type="showRePass ? 'text': 'password'"
+ autocomplete="off"
+ >
+ <template #suffix>
+ <i class="iconfont el-input__icon login-content-password" :class="showRePass ? 'icon-xianshimima' : 'icon-yincangmima'" @click="showRePass = !showRePass"> </i>
+ </template>
+ </el-input>
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button type="warning" @click="identifyDialog = false" size="default">取消</el-button>
+ <el-button type="primary" @click="confirmIdentity(identifyRef)" size="default">确认</el-button>
+ </span>
+ </template>
+ </el-dialog>
</template>
<script lang="ts">
-import { toRefs, reactive, defineComponent, computed } from 'vue';
+import {toRefs, reactive, defineComponent, computed, ref, onMounted} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
@@ -54,155 +82,289 @@
import { formatAxis } from '/@/utils/formatTime';
import { NextLoading } from '/@/utils/loading';
import { useLoginApi } from '/@/api/login';
-import {useUserInfo} from "/@/stores/userInfo";
-
+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'
export default defineComponent({
- name: 'accountLogin',
- setup() {
- const { t } = useI18n();
- const userInfo = useUserInfo()
- const route = useRoute();
- const router = useRouter();
- const state = reactive({
- isShowPassword: false,
- ruleForm: {
- username: 'admin',
- password: '123456',
- },
- loading: {
- signIn: false,
- },
- });
- // 时间获取
- const currentTime = computed(() => {
- return formatAxis(new Date());
- });
- // 登录
- const onSignIn = async () => {
- state.loading.signIn = true;
- // 存储 token 到浏览器缓存
- let res = await useLoginApi().signIn(state.ruleForm)
- if(res.data.code === '200'){
- userInfo.setUserInfos(res.data.data)
- Session.set('token', res.data.data.accessToken);
- Session.set('projectId','');
- Session.set('uid',res.data.data.uid);
- await initBackEndControlRoutes();
- signInSuccess();
- }else{
- state.loading.signIn = false
- ElMessage({
- type:'warning',
- message:res.data.msg
- })
- }
- // Session.set('token', Math.random().toString(36).substr(0));
- // // 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
- // Cookies.set('userName', state.ruleForm.username);
- // if (!themeConfig.value.isRequestRoutes) {
- // // 前端控制路由，2、请注意执行顺序
- // await initFrontEndControlRoutes();
- // signInSuccess();
- // } else {
- // // 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
- // // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
- // await initBackEndControlRoutes();
- // // 执行完 initBackEndControlRoutes，再执行 signInSuccess
- // signInSuccess();
- // }
- };
- // 登录成功后的跳转
- const signInSuccess = async () => {
- // 初始化登录成功时间问候语
- let currentTimeInfo = currentTime.value;
- // 登录成功，跳到转首页
- // 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
- if (route.query?.redirect) {
- router.push('/homeMenu');
- // router.push({
- // path: <string>route.query?.redirect,
- // query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
- // });
- } else {
- router.push('/loginPage');
- }
- state.loading.signIn = true;
- const signInText = t('message.signInText');
- ElMessage.success(`${currentTimeInfo}，${signInText}`);
- // 登录成功提示
- // 关闭 loading
- // 添加 loading，防止第一次进入界面时出现短暂空白
- // NextLoading.start();
- };
- return {
- onSignIn,
- ...toRefs(state),
- };
- },
+ name: 'accountLogin',
+ setup() {
+ const { t } = useI18n();
+ const userInfo = useUserInfo();
+ const route = useRoute();
+ const router = useRouter();
+ const state = reactive({
+ isShowPassword: false,
+ showPass: false,
+ showRePass: false,
+ saveCode: false,
+ ruleForm: {
+ username: '',
+ password: ''
+ },
+ loading: {
+ signIn: false
+ },
+ identity:{
+ realName: '',
+ identify: '',
+ phone: '',
+ password: '',
+ rePassword: ''
+ },
+ identifyDialog: false
+ });
+ const identifyRef = ref<FormInstance>()
+
+ // 页面载入时执行方法
+ onMounted(() => {
+ hasUserCodeOrPassword()
+ // getAllDepartment();
+ });
+
+ const hasUserCodeOrPassword =()=> {
+ if (localStorage.getItem('userCode') && localStorage.getItem('userPassword')) {
+ state.ruleForm.username = localStorage.getItem('userCode') as string
+ state.ruleForm.password = Base64.decode(localStorage.getItem('userPassword'))//解密
+ state.saveCode = true
+ }
+ }
+ const checkCode = (rule: any, value: any, callback: any) => {
+ if (value == '') {
+ return callback(new Error('该内容不能为空'))
+ }
+ setTimeout(() => {
+ if (!verifyIdCard(value)) {
+ callback(new Error('身份证格式不正确'))
+ }else callback();
+ }, 400)
+ }
+ const checkPhone = (rule: any, value: any, callback: any) => {
+ if (value == '') {
+ return callback(new Error('该内容不能为空'))
+ }
+ setTimeout(() => {
+ if (!verifyPhone(value)) {
+ callback(new Error('手机号格式不正确'))
+ }else callback();
+ }, 400)
+ }
+ // 修改密码
+ const validatePass = (rule: any, value: any, callback: any) => {
+ if (value === '') {
+ callback(new Error('该内容不能为空'))
+ } else {
+ if (state.identity.rePassword !== '') {
+ if (!identifyRef.value) return
+ identifyRef.value.validateField('rePassword', () => null)
+ }
+ callback()
+ }
+ }
+ const validatePass2 = (rule: any, value: any, callback: any) => {
+ if (value === '') {
+ callback(new Error('该内容不能为空'))
+ } else if (value !== state.identity.password) {
+ callback(new Error("两次输入的密码不一致!"))
+ } else {
+ callback()
+ }
+ }
+ const identityRules = reactive({
+ 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' }],
+ rePassword: [{ required: true, validator: validatePass2, trigger: 'blur' }]
+ });
+
+ // 时间获取
+ const currentTime = computed(() => {
+ return formatAxis(new Date());
+ });
+ // 登录
+ const onSignIn = async () => {
+ state.loading.signIn = true;
+ // 存储 token 到浏览器缓存
+ let res = await useLoginApi().signIn(state.ruleForm);
+ if (res.data.code === '200') {
+ await userInfo.setUserInfos(res.data.data);
+ Cookies.set('token', res.data.data.accessToken);
+ Cookies.set('projectId', '');
+ Cookies.set('uid', res.data.data.uid);
+ // 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('userPassword', Base64.encode(state.ruleForm.password),)
+ } else {
+ localStorage.removeItem('userCode')
+ localStorage.removeItem('userPassword')
+ }
+ await signInSuccess();
+ } else {
+ state.loading.signIn = false;
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ state.loading.signIn = false;
+ // Session.set('token', Math.random().toString(36).substr(0));
+ // // 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
+ // Cookies.set('userName', state.ruleForm.username);
+ // if (!themeConfig.value.isRequestRoutes) {
+ // // 前端控制路由，2、请注意执行顺序
+ // await initFrontEndControlRoutes();
+ // signInSuccess();
+ // } else {
+ // // 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
+ // // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
+ // await initBackEndControlRoutes();
+ // // 执行完 initBackEndControlRoutes，再执行 signInSuccess
+ // signInSuccess();
+ // }
+ };
+ // 登录成功后的跳转
+ const signInSuccess = async () => {
+ // 初始化登录成功时间问候语
+ let currentTimeInfo = currentTime.value;
+ // 登录成功，跳到转首页
+ // 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
+ // if (route.query?.redirect) {
+ router.push('/newMenu');
+ // router.push({
+ // path: <string>route.query?.redirect,
+ // query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
+ // });
+ // } else {
+ // router.push('/loginPage');
+ // }
+ state.loading.signIn = true;
+ const signInText = t('message.signInText');
+ ElMessage.success(`${currentTimeInfo}，${signInText}`);
+ // 登录成功提示
+ // 关闭 loading
+ // 添加 loading，防止第一次进入界面时出现短暂空白
+ // NextLoading.start();
+ };
+
+ // 修改密码
+ const identify =()=>{
+ state.identifyDialog = true
+ }
+
+ // 提交验证
+ const confirmIdentity = (formEl: FormInstance | undefined) => {
+ if (!formEl) return
+ formEl.validate(async(valid) => {
+ if (valid) {
+ const res = await useLoginApi().changeCode(state.identity);
+ if(res.data.code == '200'){
+ ElMessage({
+ type: 'success',
+ message: '修改成功，请使用新密码登录'
+ });
+ }else{
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ state.identifyDialog = false
+ } else {
+ console.log('error submit!')
+ return false
+ }
+ })
+ }
+ const clearIdentity = ()=>{
+ state.identity = {
+ realName: '',
+ identify: '',
+ phone: '',
+ password: '',
+ rePassword: ''
+ }
+ }
+
+ return {
+ identifyRef,
+ identityRules,
+ clearIdentity,
+ onSignIn,
+ identify,
+ confirmIdentity,
+ validatePass,
+ validatePass2,
+ ...toRefs(state)
+ };
+ }
});
</script>
<style scoped lang="scss">
.login-content-form {
- margin-top: 40px;
- width: 420px;
+ margin-top: 40px;
+ width: 100%;
- .el-input::v-deep .el-input__wrapper{
- height: 56px;
- border-radius: 28px;
- padding: 0 30px;
- background: #F2F2F2;
- &:focus-within{
- border: 1px solid #2053D7;
- }
- }
- @for $i from 1 through 4 {
- .login-animation#{$i} {
- opacity: 0;
- animation-name: error-num;
- animation-duration: 0.5s;
- animation-fill-mode: forwards;
- animation-delay: calc($i/10) + s;
- }
- }
- .codeDeal::v-deep .el-form-item__content{
- display: flex;
- justify-content: space-between;
+ .el-input::v-deep .el-input__wrapper {
+ height: 56px;
+ border-radius: 28px;
+ padding: 0 30px;
+ background: #f2f2f2;
+ &:focus-within {
+ border: 1px solid #2053d7;
+ }
+ }
+ @for $i from 1 through 4 {
+ .login-animation#{$i} {
+ opacity: 0;
+ animation-name: error-num;
+ animation-duration: 0.5s;
+ animation-fill-mode: forwards;
+ animation-delay: calc($i/10) + s;
+ }
+ }
+ .codeDeal::v-deep .el-form-item__content {
+ display: flex;
+ justify-content: space-between;
- .forgetCode{
- color: #2053D7;
- cursor: pointer;
- }
- }
- .login-content-password {
- width: 100%;
- display: inline-block;
- width: 20px;
- cursor: pointer;
- &:hover {
- color: #909399;
- }
- }
- .login-content-code {
- width: 100%;
- padding: 0;
- font-weight: bold;
- letter-spacing: 5px;
- }
- .login-content-submit {
- width: 100%;
- height: 56px;
- font-size: 16px;
- border-radius: 28px;
- letter-spacing: 4px;
- font-weight: 300;
- margin-top: 15px;
- background: #2053D7;
- transition: .3s;
- &:hover{
- letter-spacing: 6px;
- background: #4E7AEC;
- }
- }
+ .forgetCode {
+ color: #2053d7;
+ cursor: pointer;
+ }
+ }
+ .login-content-password {
+ width: 100%;
+ display: inline-block;
+ cursor: pointer;
+ &:hover {
+ color: #909399;
+ }
+ }
+ .login-content-code {
+ width: 100%;
+ padding: 0;
+ font-weight: bold;
+ letter-spacing: 5px;
+ }
+ .login-content-submit {
+ width: 100%;
+ height: 56px;
+ font-size: 16px;
+ border-radius: 28px;
+ letter-spacing: 4px;
+ font-weight: 300;
+ margin-top: 15px;
+ background: #2053d7;
+ transition: 0.3s;
+ &:hover {
+ letter-spacing: 6px;
+ background: #4e7aec;
+ }
+ }
}
</style>
--
Gitblit v1.9.2