From f2a9cb154099a59a97de312ea2bb45d37639868b Mon Sep 17 00:00:00 2001
From: lohir <3399054449@qq.com>
Date: 星期四, 17 十月 2024 19:46:52 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/login/index.vue | 146 ++++++++++++++++++++++++++++++++++--------------
1 files changed, 104 insertions(+), 42 deletions(-)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 4e59a46..d1b9a0e 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,14 +1,15 @@
<template>
<div class="login-container">
- <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
+ <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
+ label-position="left">
<div class="title-container">
- <h3 class="title">瀛︿箣鎬濈鐞嗙郴缁�</h3>
+ <h3 class="title">姹熻タ璇煶瑙嗛鍩硅绯荤粺</h3>
</div>
<el-form-item prop="userName">
<span class="svg-container">
- <svg-icon icon-class="user" />
+ <svg-icon icon-class="user"/>
</span>
<el-input
ref="userName"
@@ -24,7 +25,7 @@
<el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
<el-form-item prop="password">
<span class="svg-container">
- <svg-icon icon-class="password" />
+ <svg-icon icon-class="password"/>
</span>
<el-input
:key="passwordType"
@@ -40,53 +41,86 @@
@keyup.enter.native="handleLogin"
/>
<span class="show-pwd" @click="showPwd">
- <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+ <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"/>
</span>
</el-form-item>
</el-tooltip>
<el-checkbox v-model="loginForm.remember" style="margin-bottom: 20px;margin-left: 5px;">璁颁綇瀵嗙爜</el-checkbox>
- <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">鐧诲綍</el-button>
+ <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;"
+ @click.native.prevent="handleLogin">鐧诲綍
+ </el-button>
</el-form>
- <div class="account-foot-copyright">
- <span>Copyright 漏2019-2024 姝︽眽鎬濈淮璺宠穬绉戞妧鏈夐檺鍏徃 鐗堟潈鎵�鏈�</span>
- </div>
+ <el-dialog
+ title="淇敼瀵嗙爜"
+ :visible.sync="forceUpdateShow"
+ :close-on-click-modal="false"
+ :close-on-press-escape="false"
+ width="400px"
+ :show-close="false"
+ >
+ <div style="margin-bottom: 10px; color: #aa1111">鎮ㄧ殑瀵嗙爜宸茬粡杩囨湡锛岃閲嶆柊璁剧疆~</div>
+ <el-form ref="updatePasswordForm" :model="updatePasswordForm" :rules="updatePasswordRules">
+ <el-form-item label="鏂板瘑鐮�" prop="newPassword">
+ <el-input v-model="updatePasswordForm.newPassword" placeholder="搴斿寘鍚ぇ灏忓啓銆佹暟瀛�" show-password></el-input>
+ </el-form-item>
+ <el-form-item label="纭瀵嗙爜">
+ <el-input v-model="updatePasswordForm.confirmPassword" placeholder="纭瀵嗙爜" show-password></el-input>
+ </el-form-item>
+ </el-form>
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="forceUpdateShow = false">鍏� 闂�</el-button>
+ <el-button type="primary" @click="updatePassword">淇� 鏀�</el-button>
+ </span>
+ </el-dialog>
+
</div>
</template>
<script>
import { mapMutations } from 'vuex'
import loginApi from '@/api/login'
+import UserApi from '@/api/user'
export default {
name: 'Login',
data () {
- const validateUsername = (rule, value, callback) => {
- if (value.length < 5) {
- callback(new Error('鐢ㄦ埛鍚嶄笉鑳藉皯浜�5涓瓧绗�'))
- } else {
- callback()
- }
- }
const validatePassword = (rule, value, callback) => {
- if (value.length < 5) {
- callback(new Error('瀵嗙爜涓嶈兘灏戜簬5涓瓧绗�'))
+ if (value === '') {
+ callback(new Error('璇疯緭鍏ュ瘑鐮�'))
+ } else if (!/[A-Z]/.test(value)) {
+ callback(new Error('瀵嗙爜蹇呴』鍖呭惈鑷冲皯涓�涓ぇ鍐欏瓧姣�'))
+ } else if (!/[a-z]/.test(value)) {
+ callback(new Error('瀵嗙爜蹇呴』鍖呭惈鑷冲皯涓�涓皬鍐欏瓧姣�'))
+ } else if (!/[0-9]/.test(value)) {
+ callback(new Error('瀵嗙爜蹇呴』鍖呭惈鑷冲皯涓�涓暟瀛�'))
} else {
callback()
}
}
return {
+ forceUpdateShow: false,
+ updatePasswordForm: {
+ userId: null,
+ newPassword: '',
+ confirmPassword: ''
+ },
+ updatePasswordRules: {
+ newPassword: [
+ { validator: validatePassword, trigger: 'blur' }
+ ]
+ },
loginForm: {
userName: '',
password: '',
remember: false
},
loginRules: {
- userName: [{ required: true, trigger: 'blur', validator: validateUsername }],
- password: [{ required: true, trigger: 'blur', validator: validatePassword }]
+ userName: [{ required: true, trigger: 'blur' }],
+ password: [{ required: true, trigger: 'blur' }]
},
passwordType: 'password',
capsTooltip: false,
@@ -108,6 +142,26 @@
// window.removeEventListener('storage', this.afterQRScan)
},
methods: {
+ updatePassword () {
+ let _this = this
+ _this.$refs.updatePasswordForm.validate(valid => {
+ if (valid) {
+ if (this.updatePasswordForm.newPassword !== this.updatePasswordForm.confirmPassword) {
+ _this.$message.error('涓ゆ杈撳叆鐨勫瘑鐮佷笉涓�鑷�')
+ return
+ }
+ UserApi.updatePassword(this.updatePasswordForm).then(res => {
+ if (res.code === 1) {
+ _this.$message.success('瀵嗙爜淇敼鎴愬姛銆傝閲嶆柊鐧诲綍')
+ _this.loginForm.password = ''
+ _this.forceUpdateShow = false
+ }
+ })
+ } else {
+ return false
+ }
+ })
+ },
checkCapslock ({ shiftKey, key } = {}) {
if (key && key.length === 1) {
// eslint-disable-next-line no-mixed-operators
@@ -136,10 +190,18 @@
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true
- loginApi.login(this.loginForm).then(function (result) {
+ loginApi.login(this.loginForm).then(result => {
+ // 濡傛灉code涓�205锛屽垯寮哄埗淇敼瀵嗙爜
+ if (result && result.code === 205) {
+ this.updatePasswordForm.userId = result.data
+ this.forceUpdateShow = true
+ this.loading = false
+ return
+ }
if (result && result.code === 1) {
_this.setUserName(_this.loginForm.userName)
- _this.$router.push({ path: '/' })
+ _this.setUserInfo(result.data)
+ _this.$router.push({ path: '/dashboard' })
} else {
_this.loading = false
_this.$message({
@@ -155,7 +217,7 @@
}
})
},
- ...mapMutations('user', ['setUserName'])
+ ...mapMutations('user', ['setUserName', 'setUserInfo'])
}
}
</script>
@@ -164,13 +226,12 @@
/* 淇input 鑳屾櫙涓嶅崗璋� 鍜屽厜鏍囧彉鑹� */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
-$bg:#283443;
-$light_gray:#fff;
+$bg: #283443;
+$light_gray: #fff;
$cursor: #fff;
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
.login-container .el-input input {
- color: $cursor;
}
}
@@ -182,50 +243,52 @@
width: 85%;
input {
- background: transparent;
+ background: white;
border: 0px;
-webkit-appearance: none;
border-radius: 0px;
padding: 12px 5px 12px 15px;
- color: $light_gray;
+ color: black;
height: 47px;
- caret-color: $cursor;
+ caret-color: black;
&:-webkit-autofill {
- box-shadow: 0 0 0px 1000px $bg inset !important;
- -webkit-text-fill-color: $cursor !important;
+ box-shadow: 0 0 0px 1000px white inset !important;
+ -webkit-text-fill-color: black !important;
}
}
}
.el-form-item {
- border: 1px solid rgba(255, 255, 255, 0.1);
- background: rgba(0, 0, 0, 0.1);
+ border: 1px solid darkgrey;
border-radius: 5px;
- color: #454545;
+ color: white;
}
}
</style>
<style lang="scss" scoped>
-$bg:#2d3a4b;
-$dark_gray:#889aa4;
-$light_gray:#eee;
+$bg: #2d3a4b;
+$dark_gray: #889aa4;
+$light_gray: #eee;
.login-container {
+ background-image: url('../../assets/loginBackground.png');
+ background-size: cover;
+ background-attachment: fixed;
min-height: 100%;
width: 100%;
- background-color: $bg;
+ background-color: white;
overflow: hidden;
.login-form {
position: relative;
width: 520px;
max-width: 100%;
- padding:30px 50px 10px 50px;
- margin:120px auto auto auto;
+ padding: 30px 50px 10px 50px;
+ margin: 200px auto auto auto;
overflow: hidden;
- background: rgba(252, 254, 255, 0.11)
+ background: white;
}
.tips {
@@ -253,7 +316,6 @@
.title {
font-size: 26px;
- color: $light_gray;
margin: 0px auto 40px auto;
text-align: center;
font-weight: bold;
--
Gitblit v1.8.0