LK/income_payments_enterprise_terminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初次登录设置密码

Browse Source
This commit is contained in:
zhaoxiao
2021-09-24 17:06:38 +08:00
parent 8e84d2d1ef
commit d87b8eeb94
6 changed files with 480 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/index.js
+1 -1
View File
@@ -1,5 +1,5 @@
const api = { const api = {
Login: '/sys/login', Login: '/company/login',
Logout: '/sys/logout', Logout: '/sys/logout',
ForgePassword: '/auth/forge-password', ForgePassword: '/auth/forge-password',
Register: '/auth/register', Register: '/auth/register',
src/api/login.js
+2 -2
View File
@@ -14,7 +14,7 @@ import { axios } from '@/utils/request'
*/ */
export function login(parameter) { export function login(parameter) {
return axios({ return axios({
url: '/sys/login', url: '/company/login',
method: 'post', method: 'post',
data: parameter data: parameter
}) })
@@ -22,7 +22,7 @@ export function login(parameter) {
export function phoneLogin(parameter) { export function phoneLogin(parameter) {
return axios({ return axios({
url: '/sys/phoneLogin', url: '/company/smsLogin',
method: 'post', method: 'post',
data: parameter data: parameter
}) })
src/store/modules/user.js
+48 -39
View File
@@ -1,16 +1,25 @@
import Vue from 'vue' import Vue from 'vue'
import { login, logout, phoneLogin, thirdLogin } from '@/api/login' import { login, logout, phoneLogin, thirdLogin } from '@/api/login'
import { ACCESS_TOKEN, USER_NAME,USER_INFO,USER_AUTH,SYS_BUTTON_AUTH,UI_CACHE_DB_DICT_DATA,TENANT_ID,CACHE_INCLUDED_ROUTES } from '@/store/mutation-types' import {
ACCESS_TOKEN,
USER_NAME,
USER_INFO,
USER_AUTH,
SYS_BUTTON_AUTH,
UI_CACHE_DB_DICT_DATA,
TENANT_ID,
CACHE_INCLUDED_ROUTES
} from '@/store/mutation-types'
import { welcome } from '@/utils/util' import { welcome } from '@/utils/util'
import { getAction } from '@/api/manage' import { getAction } from '@/api/manage'
import { routerData } from "@/config/router.config"; import { routerData } from '@/config/router.config'
const user = { const user = {
state: { state: {
token: '', token: '',
username: '', username: '',
realname: '', realname: '',
tenantid:'', tenantid: '',
welcome: '', welcome: '',
avatar: '', avatar: '',
permissionList: [], permissionList: [],
@@ -37,16 +46,16 @@ const user = {
}, },
SET_TENANT: (state, id) => { SET_TENANT: (state, id) => {
state.tenantid = id state.tenantid = id
}, }
}, },
actions: { actions: {
// CAS验证登录 // CAS验证登录
ValidateLogin({ commit }, userInfo) { ValidateLogin({ commit }, userInfo) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
getAction('/sys/cas/client/validateLogin',userInfo).then(response => { getAction('/sys/cas/client/validateLogin', userInfo).then(response => {
console.log('----cas 登录--------',response) console.log('----cas 登录--------', response)
if(response.success){ if (response.success) {
const result = response.result const result = response.result
const userInfo = result.userInfo const userInfo = result.userInfo
Vue.ls.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000) Vue.ls.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000)
@@ -54,10 +63,10 @@ const user = {
Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000) Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000)
commit('SET_TOKEN', result.token) commit('SET_TOKEN', result.token)
commit('SET_INFO', userInfo) commit('SET_INFO', userInfo)
commit('SET_NAME', { username: userInfo.username,realname: userInfo.realname, welcome: welcome() }) commit('SET_NAME', { username: userInfo.username, realname: userInfo.realname, welcome: welcome() })
commit('SET_AVATAR', userInfo.avatar) commit('SET_AVATAR', userInfo.avatar)
resolve(response) resolve(response)
}else{ } else {
resolve(response) resolve(response)
} }
}).catch(error => { }).catch(error => {
@@ -69,7 +78,7 @@ const user = {
Login({ commit }, userInfo) { Login({ commit }, userInfo) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
login(userInfo).then(response => { login(userInfo).then(response => {
if(response.code =='200'){ if (response.code == '200') {
const result = response.result const result = response.result
const userInfo = result.userInfo const userInfo = result.userInfo
Vue.ls.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000) Vue.ls.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000)
@@ -78,10 +87,10 @@ const user = {
Vue.ls.set(UI_CACHE_DB_DICT_DATA, result.sysAllDictItems, 7 * 24 * 60 * 60 * 1000) Vue.ls.set(UI_CACHE_DB_DICT_DATA, result.sysAllDictItems, 7 * 24 * 60 * 60 * 1000)
commit('SET_TOKEN', result.token) commit('SET_TOKEN', result.token)
commit('SET_INFO', userInfo) commit('SET_INFO', userInfo)
commit('SET_NAME', { username: userInfo.username,realname: userInfo.realname, welcome: welcome() }) commit('SET_NAME', { username: userInfo.username, realname: userInfo.realname, welcome: welcome() })
commit('SET_AVATAR', userInfo.avatar) commit('SET_AVATAR', userInfo.avatar)
resolve(response) resolve(response)
}else{ } else {
reject(response) reject(response)
} }
}).catch(error => { }).catch(error => {
@@ -92,26 +101,26 @@ const user = {
//手机号登录 //手机号登录
PhoneLogin({ commit }, userInfo) { PhoneLogin({ commit }, userInfo) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
phoneLogin(userInfo).then(response => { phoneLogin(userInfo).then(response => {
if(response.code =='200'){ if (response.code == '200') {
const result = response.result const result = response.result
const userInfo = result.userInfo const userInfo = result.userInfo
Vue.ls.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000) Vue.ls.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000)
Vue.ls.set(USER_NAME, userInfo.username, 7 * 24 * 60 * 60 * 1000) Vue.ls.set(USER_NAME, userInfo.username, 7 * 24 * 60 * 60 * 1000)
Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000) Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000)
Vue.ls.set(UI_CACHE_DB_DICT_DATA, result.sysAllDictItems, 7 * 24 * 60 * 60 * 1000) Vue.ls.set(UI_CACHE_DB_DICT_DATA, result.sysAllDictItems, 7 * 24 * 60 * 60 * 1000)
commit('SET_TOKEN', result.token) commit('SET_TOKEN', result.token)
commit('SET_INFO', userInfo) commit('SET_INFO', userInfo)
commit('SET_NAME', { username: userInfo.username,realname: userInfo.realname, welcome: welcome() }) commit('SET_NAME', { username: userInfo.username, realname: userInfo.realname, welcome: welcome() })
commit('SET_AVATAR', userInfo.avatar) commit('SET_AVATAR', userInfo.avatar)
resolve(response) resolve(response)
}else{ } else {
reject(response) reject(response)
} }
}).catch(error => { }).catch(error => {
reject(error) reject(error)
})
}) })
})
}, },
// 获取用户信息 // 获取用户信息
GetPermissionList({ commit }) { GetPermissionList({ commit }) {
@@ -119,8 +128,8 @@ const user = {
const menuData = routerData const menuData = routerData
const authData = [] const authData = []
const allAuthData = [] const allAuthData = []
sessionStorage.setItem(USER_AUTH,JSON.stringify(authData)) sessionStorage.setItem(USER_AUTH, JSON.stringify(authData))
sessionStorage.setItem(SYS_BUTTON_AUTH,JSON.stringify(allAuthData)) sessionStorage.setItem(SYS_BUTTON_AUTH, JSON.stringify(allAuthData))
if (menuData && menuData.length > 0) { if (menuData && menuData.length > 0) {
menuData.forEach((item) => { menuData.forEach((item) => {
if (item['children']) { if (item['children']) {
@@ -133,7 +142,7 @@ const user = {
} }
}) })
commit('SET_PERMISSIONLIST', menuData) commit('SET_PERMISSIONLIST', menuData)
resolve({result: {menu:menuData}}) resolve({ result: { menu: menuData } })
} else { } else {
reject('getPermissionList: permissions must be a non-null array !') reject('getPermissionList: permissions must be a non-null array !')
} }
@@ -169,8 +178,8 @@ const user = {
// 第三方登录 // 第三方登录
ThirdLogin({ commit }, param) { ThirdLogin({ commit }, param) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
thirdLogin(param.token,param.thirdType).then(response => { thirdLogin(param.token, param.thirdType).then(response => {
if(response.code =='200'){ if (response.code == '200') {
const result = response.result const result = response.result
const userInfo = result.userInfo const userInfo = result.userInfo
Vue.ls.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000) Vue.ls.set(ACCESS_TOKEN, result.token, 7 * 24 * 60 * 60 * 1000)
@@ -178,10 +187,10 @@ const user = {
Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000) Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000)
commit('SET_TOKEN', result.token) commit('SET_TOKEN', result.token)
commit('SET_INFO', userInfo) commit('SET_INFO', userInfo)
commit('SET_NAME', { username: userInfo.username,realname: userInfo.realname, welcome: welcome() }) commit('SET_NAME', { username: userInfo.username, realname: userInfo.realname, welcome: welcome() })
commit('SET_AVATAR', userInfo.avatar) commit('SET_AVATAR', userInfo.avatar)
resolve(response) resolve(response)
}else{ } else {
reject(response) reject(response)
} }
}).catch(error => { }).catch(error => {
@@ -189,7 +198,7 @@ const user = {
}) })
}) })
}, },
saveTenant({ commit }, id){ saveTenant({ commit }, id) {
Vue.ls.set(TENANT_ID, id, 7 * 24 * 60 * 60 * 1000) Vue.ls.set(TENANT_ID, id, 7 * 24 * 60 * 60 * 1000)
commit('SET_TENANT', id) commit('SET_TENANT', id)
} }
src/views/user/Login.vue
+324 -186
View File
@@ -5,59 +5,104 @@
<span class="title"> <span class="title">
<img src='../../assets/userLogin.png' alt=''> <img src='../../assets/userLogin.png' alt=''>
</span> </span>
<a-row>
<a-col :span="6"></a-col> <!-- 账号密码登录-->
<a-col :span="12"> <template v-if="!isVerificationCodeLogin">
<a-form-item> <a-row>
<a-input <a-col :span="6"></a-col>
size="large" <a-col :span="12">
v-decorator="['username',{initialValue:'', rules: validatorRules.username.rules,validateTrigger: 'blur'}]" <a-form-item>
type="text" <a-input
placeholder="请输入帐号"> size="large"
<a-icon slot="prefix" type="user" :style="{ color: '#B3B7C2',fontSize:'20px' }"/> v-decorator="['username',{initialValue:'', rules: validatorRules.username.rules,validateTrigger: 'blur'}]"
</a-input> type="text"
</a-form-item> placeholder="请输入帐号">
</a-col> <a-icon slot="prefix" type="user" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>
<a-col :span="6"></a-col> </a-input>
</a-row> </a-form-item>
<a-row> </a-col>
<a-col :span="6"></a-col> <a-col :span="6"></a-col>
<a-col :span="12"> </a-row>
<a-form-item> <a-row>
<a-input <a-col :span="6"></a-col>
v-decorator="['password',{initialValue:'', rules: validatorRules.password.rules,validateTrigger: 'blur'}]" <a-col :span="12">
size="large" <a-form-item>
type="password" <a-input
autocomplete="false" v-decorator="['password',{initialValue:'', rules: validatorRules.password.rules,validateTrigger: 'blur'}]"
placeholder="请输入密码" size="large"
> type="password"
<a-icon slot="prefix" type="lock" :style="{ color: '#B3B7C2',fontSize:'20px' }"/> autocomplete="false"
</a-input> placeholder="请输入密码"
</a-form-item> >
</a-col> <a-icon slot="prefix" type="lock" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>
<a-col :span="6"></a-col> </a-input>
</a-row> </a-form-item>
<a-row style="margin-bottom: 0%;"> </a-col>
<a-col :span="6"></a-col> <a-col :span="6"></a-col>
<a-col :span="7"> </a-row>
<a-form-item> <a-row style="margin-bottom: 0%;">
<a-input <a-col :span="6"></a-col>
v-decorator="['inputCode',validatorRules.inputCode]" <a-col :span="7">
size="large" <a-form-item>
type="text" <a-input
@change="inputCodeChange" v-decorator="['inputCode',validatorRules.inputCode]"
autocomplete="off" size="large"
placeholder="请输入验证码"> type="text"
<a-icon slot="prefix" type="safety" :style="{ color: '#B3B7C2',fontSize:'20px'}"/> @change="inputCodeChange"
</a-input> autocomplete="off"
</a-form-item> placeholder="请输入验证码">
</a-col> <a-icon slot="prefix" type="safety" :style="{ color: '#B3B7C2',fontSize:'20px'}"/>
<a-col :span="5" class='code' style='text-align: right'> </a-input>
<img v-if="requestCodeSuccess" :src="randCodeImage" @click="handleChangeCheckCode"/> </a-form-item>
<img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode"/> </a-col>
</a-col> <a-col :span="5" class='code' style='text-align: right'>
<a-col :span="4"></a-col> <img v-if="requestCodeSuccess" :src="randCodeImage" @click="handleChangeCheckCode"/>
</a-row> <img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode"/>
</a-col>
<a-col :span="4"></a-col>
</a-row>
</template>
<!-- 手机号验证码登录-->
<template v-else>
<a-row>
<a-col :span="6"></a-col>
<a-col :span="12">
<a-form-item>
<a-input
size="large"
v-decorator="['username',{initialValue:'', rules: validatorRules.username.rules,validateTrigger: 'blur'}]"
type="text"
placeholder="请输入手机号">
<a-icon slot="prefix" type="user" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>
</a-input>
</a-form-item>
</a-col>
<a-col :span="6"></a-col>
</a-row>
<a-row>
<a-col :span="6"></a-col>
<a-col :span="12">
<a-form-item class='captcha'>
<a-input
size="large"
v-decorator="['captcha', { rules: validatorRules.captcha.rules,validateTrigger: 'blur'}]"
type="text"
placeholder="请输入验证码">
<a-icon slot="prefix" type="safety" :style="{ color: '#B3B7C2',fontSize:'20px'}"/>
</a-input>
<a-button
tabindex="-1"
size="default"
:disabled="state.smsSendBtn"
@click.stop.prevent="getCaptcha"
v-text="!state.smsSendBtn && '获取验证码' || (state.time+' s')"></a-button>
</a-form-item>
</a-col>
<a-col :span="6"></a-col>
</a-row>
</template>
<a-row class="login-btn"> <a-row class="login-btn">
<a-col :span="6"></a-col> <a-col :span="6"></a-col>
<a-col :span="12"> <a-col :span="12">
@@ -70,16 +115,24 @@
:loading="loginBtn" :loading="loginBtn"
@click.stop.prevent="handleSubmit" @click.stop.prevent="handleSubmit"
:disabled="loginBtn"> :disabled="loginBtn">
{{ loginBtn ? "登录中" : "登录" }} {{ loginBtn ? '登录中' : '登录' }}
</a-button> </a-button>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="6"></a-col> <a-col :span="6"></a-col>
</a-row> </a-row>
<a-row style="margin-bottom: 2%;"> <a-row style="margin-bottom: 2%;">
<a-col :span="3"></a-col>
<a-col :span="4"></a-col>
<a-col :span="6"></a-col> <a-col :span="6"></a-col>
<!-- 切换登录方式-->
<a-col :span="4">
<a-form-item>
<span @click="switchingLoginMode" class="forget-password" style="margin-left: 5px; color: #BFBFBF;">
{{ isVerificationCodeLogin ? '账号密码登录' : '手机验证码登录' }}
</span>
</a-form-item>
</a-col>
<a-col :span="3">
</a-col>
<a-col :span="5" style="text-align: right;"> <a-col :span="5" style="text-align: right;">
<a-form-item> <a-form-item>
<span @click='forgetPassword' class="forget-password" style="float: right;color: #BFBFBF;"> <span @click='forgetPassword' class="forget-password" style="float: right;color: #BFBFBF;">
@@ -93,17 +146,18 @@
</div> </div>
</template> </template>
<script> <script>
import { mapActions } from "vuex" import { mapActions } from 'vuex'
import { timeFix } from "@/utils/util" import { timeFix } from '@/utils/util'
import Vue from 'vue' import Vue from 'vue'
import { ACCESS_TOKEN } from "@/store/mutation-types" import { ACCESS_TOKEN } from '@/store/mutation-types'
import { postAction,getAction } from '@/api/manage' import { postAction, getAction } from '@/api/manage'
import {getRSAPublicKey} from '@/api/login.js' import { getRSAPublicKey } from '@/api/login.js'
import {JSEncrypt} from 'jsencrypt' import { JSEncrypt } from 'jsencrypt'
import { phoneReg } from '@/utils/validate'
export default { export default {
components: {}, components: {},
data () { data() {
return { return {
loginBtn: false, loginBtn: false,
loginType: 0, loginType: 0,
@@ -111,36 +165,39 @@ export default {
form: this.$form.createForm(this), form: this.$form.createForm(this),
state: { state: {
time: 60, time: 60,
smsSendBtn: false, smsSendBtn: false
}, },
validatorRules:{ validatorRules: {
username:{rules: [{ required: true, message: '请输入用户名!'},{validator: this.handleUsernameOrEmail}]}, username: { rules: [{ required: true, message: '请输入手机号!'}, { validator: this.checkPhone }] },
password:{rules: [{ required: true, message: '请输入密码!',validator: 'click'}]}, password: { rules: [{ required: true, message: '请输入密码!' }] },
mobile:{rules: [{validator:this.validateMobile}]}, mobile: { rules: [{ validator: this.validateMobile }] },
captcha:{rule: [{ required: true, message: '请输入验证码!'}]}, captcha: { rule: [{ required: true, message: '请输入验证码!'}] },
inputCode:{rules: [{ required: true, message: '请输入验证码!'}]} inputCode: { rules: [{ required: true, message: '请输入验证码!' }] },
phone: { rules: [{ required: true, message: '请输入手机号!' }, { validator: this.checkPhone }] }
}, },
velorifiedCode:"", velorifiedCode: '',
inputCodeContent:"", inputCodeContent: '',
inputCodeNull:true, inputCodeNull: true,
currentUsername:"", currentUsername: '',
currdatetime:'', currdatetime: '',
randCodeImage:'', randCodeImage: '',
requestCodeSuccess:false, requestCodeSuccess: false,
rsaPublicKey:'' rsaPublicKey: '',
isVerificationCodeLogin: false, // 是否验证码登录，true--是；false--否；默认false，账号密码登录
needSetPassword: false, // 是否需要设置密码
} }
}, },
created () { created() {
this.currdatetime = new Date().getTime(); this.currdatetime = new Date().getTime()
Vue.ls.remove(ACCESS_TOKEN) Vue.ls.remove(ACCESS_TOKEN)
this.getRouterData(); this.getRouterData()
this.handleChangeCheckCode(); this.handleChangeCheckCode()
}, },
methods: { methods: {
...mapActions(['Login', 'Logout', 'PhoneLogin']), ...mapActions(['Login', 'Logout', 'PhoneLogin']),
handleUsernameOrEmail (rule, value, callback) { handleUsernameOrEmail(rule, value, callback) {
const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/; const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
if (regex.test(value)) { if (regex.test(value)) {
this.loginType = 0 this.loginType = 0
} else { } else {
@@ -148,170 +205,222 @@ export default {
} }
callback() callback()
}, },
handleSubmit () {
let that = this
let loginParams = {};
that.loginBtn = true;
that.form.validateFields([ 'username', 'password','inputCode', 'rememberMe' ], { force: true }, (err, values) => {
if (!err) {
/**
* 验证手机号
* @param rule
* @param value
* @param callback
*/
checkPhone(rule, value, callback) {
if (value) {
if (phoneReg(value)) {
callback()
} else {
callback('请输入正确格式的手机号')
}
} else {
callback()
}
},
handleSubmit() {
let that = this
let loginParams = {}
that.loginBtn = true
that.form.validateFields(['username', 'password', 'inputCode', 'captcha', 'rememberMe'], { force: true }, (err, values) => {
if (!err) {
loginParams.remember_me = values.rememberMe loginParams.remember_me = values.rememberMe
loginParams.captcha = that.inputCodeContent // 手机登录验证码
if (that.isVerificationCodeLogin) {
loginParams.captcha = values.captcha
} else {
loginParams.captcha = that.inputCodeContent
}
loginParams.checkKey = that.currdatetime loginParams.checkKey = that.currdatetime
loginParams.rsaPublicKey = that.rsaPublicKey; loginParams.rsaPublicKey = that.rsaPublicKey
// 新建JSEncrypt对象 // 新建JSEncrypt对象
let encrypt = new JSEncrypt(); let encrypt = new JSEncrypt()
encrypt.setPublicKey(loginParams.rsaPublicKey); encrypt.setPublicKey(loginParams.rsaPublicKey)
// 公钥加密 // 公钥加密
loginParams.username = encrypt.encrypt(values.username) loginParams.username = encrypt.encrypt(values.username)
loginParams.password = encrypt.encrypt(values.password) loginParams.password = encrypt.encrypt(values.password)
//登录 //登录
that.Login(loginParams).then((res) => { console.log(this.isVerificationCodeLogin)
this.loginSuccess() let httpFunction = null
if (this.isVerificationCodeLogin) {
httpFunction = that.PhoneLogin
} else {
httpFunction = that.Login
}
httpFunction(loginParams).then((response) => {
if (response.message.indexOf('updatePassword') > -1) {
this.$notification['error']({
message: '设置密码',
description: '初次登录需要设置密码',
duration: 4
})
this.$router.push({
path: '/user/alteration',
query: {
isFirstLogin: 'true',
}
})
} else {
this.loginSuccess()
}
}).catch((err) => { }).catch((err) => {
if (err.code === 500) { if (err.code === 500) {
// 刷新验证码 // 刷新验证码
this.handleChangeCheckCode(); this.handleChangeCheckCode()
} }
that.requestFailed(err); that.requestFailed(err)
}); })
}else { } else {
that.loginBtn = false; that.loginBtn = false
} }
}) })
}, },
getCaptcha (e) { getCaptcha(e) {
e.preventDefault(); e.preventDefault()
let that = this; let that = this
this.form.validateFields([ 'mobile' ], { force: true },(err,values) => { this.form.validateFields(['username'], { force: true }, (err, values) => {
if(!values.mobile){ if (!values.username) {
that.cmsFailed("请输入手机号"); that.cmsFailed('请输入手机号')
}else if (!err) { } else if (!err) {
this.state.smsSendBtn = true; this.state.smsSendBtn = true
let interval = window.setInterval(() => { let interval = window.setInterval(() => {
if (that.state.time-- <= 0) { if (that.state.time-- <= 0) {
that.state.time = 60; that.state.time = 60
that.state.smsSendBtn = false; that.state.smsSendBtn = false
window.clearInterval(interval); window.clearInterval(interval)
} }
}, 1000); }, 1000)
const hide = this.$message.loading('验证码发送中..', 0); const hide = this.$message.loading('验证码发送中..', 0)
let smsParams = {}; let smsParams = {}
smsParams.mobile=values.mobile; smsParams.phone = values.username
smsParams.smsmode="0"; getAction('/company/sendVerificationCode', smsParams)
postAction("/sys/sms",smsParams)
.then(res => { .then(res => {
if(!res.success){ if (!res.success) {
setTimeout(hide, 0); setTimeout(hide, 0)
this.cmsFailed(res.message); this.cmsFailed(res.message)
} }
setTimeout(hide, 500); setTimeout(hide, 500)
}) })
.catch(err => { .catch(err => {
setTimeout(hide, 1); setTimeout(hide, 1)
clearInterval(interval); clearInterval(interval)
that.state.time = 60; that.state.time = 60
that.state.smsSendBtn = false; that.state.smsSendBtn = false
this.requestFailed(err); this.requestFailed(err)
}); })
} }
} }
); )
},
/**
* 切换登录方式
*/
switchingLoginMode() {
this.isVerificationCodeLogin = !this.isVerificationCodeLogin
}, },
// 忘记密码 // 忘记密码
forgetPassword() { forgetPassword() {
this.$router.push({ name: 'alteration' }) this.$router.push({ name: 'alteration' })
}, },
handleChangeCheckCode(){ handleChangeCheckCode() {
this.currdatetime = new Date().getTime(); this.currdatetime = new Date().getTime()
getAction(`/sys/randomImage/${this.currdatetime}`).then(res=>{ getAction(`/sys/randomImage/${ this.currdatetime }`).then(res => {
if(res.success){ if (res.success) {
this.randCodeImage = res.result this.randCodeImage = res.result
this.requestCodeSuccess=true this.requestCodeSuccess = true
}else{ } else {
this.$message.error(res.message) this.$message.error(res.message)
this.requestCodeSuccess=false this.requestCodeSuccess = false
} }
}).catch(()=>{ }).catch(() => {
this.requestCodeSuccess=false this.requestCodeSuccess = false
}) })
this.getPublicKey(); this.getPublicKey()
}, },
//获取RSA公钥 //获取RSA公钥
getPublicKey(){ getPublicKey() {
// 获取公钥 // 获取公钥
getRSAPublicKey().then(res => { getRSAPublicKey().then(res => {
this.rsaPublicKey = res.result this.rsaPublicKey = res.result
}) })
}, },
loginSuccess () { loginSuccess() {
// this.$router.push({ path: "/dashboard/analysis" }).catch((res)=>{}) // this.$router.push({ path: "/dashboard/analysis" }).catch((res)=>{})
// 进入首页 // 进入首页
this.$router.push({ path: "/" }).catch((res)=>{}) this.$router.push({ path: '/' }).catch(() => {
})
this.$notification.success({ this.$notification.success({
message: '欢迎', message: '欢迎',
description: `${timeFix()}，欢迎回来`, description: `${ timeFix() }，欢迎回来`
}); })
}, },
cmsFailed(err){ cmsFailed(err) {
this.$notification[ 'error' ]({ this.$notification['error']({
message: "登录失败",
description:err,
duration: 4,
});
},
requestFailed (err) {
this.$notification[ 'error' ]({
message: '登录失败', message: '登录失败',
description: ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试", description: err,
duration: 4, duration: 4
}); })
this.loginBtn = false;
}, },
validateMobile(rule,value,callback){ requestFailed(err) {
if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)){ this.$notification['error']({
callback(); message: '登录失败',
}else{ description: ((err.response || {}).data || {}).message || err.message || '请求出现错误，请稍后再试',
callback("您的手机号码格式不正确!"); duration: 4
})
this.loginBtn = false
},
validateMobile(rule, value, callback) {
if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
callback()
} else {
callback('您的手机号码格式不正确!')
} }
}, },
validateInputCode(rule,value,callback){ validateInputCode(rule, value, callback) {
if(!value || this.verifiedCode==this.inputCodeContent){ if (!value || this.verifiedCode == this.inputCodeContent) {
callback(); callback()
}else{ } else {
callback("您输入的验证码不正确!"); callback('您输入的验证码不正确!')
} }
}, },
generateCode(value){ generateCode(value) {
this.verifiedCode = value.toLowerCase() this.verifiedCode = value.toLowerCase()
}, },
inputCodeChange(e){ inputCodeChange(e) {
this.inputCodeContent = e.target.value this.inputCodeContent = e.target.value
}, },
getRouterData(){ getRouterData() {
this.$nextTick(() => { this.$nextTick(() => {
if (this.$route.params.username) { if (this.$route.params.username) {
this.form.setFieldsValue({ this.form.setFieldsValue({
'username': this.$route.params.username 'username': this.$route.params.username
}); })
} }
}) })
}, }
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.ant-input-affix-wrapper/deep/ .ant-input:not(:first-child){ .ant-input-affix-wrapper /deep/ .ant-input:not(:first-child) {
padding-left: 40px; padding-left: 40px;
} }
.ant-row{
.ant-row {
margin-bottom: 4%; margin-bottom: 4%;
} }
.main{
.main {
height: 100%; height: 100%;
.user-layout-login{
.user-layout-login {
z-index: 99; z-index: 99;
width: 50%; width: 50%;
box-sizing: border-box; box-sizing: border-box;
@@ -320,32 +429,38 @@ export default {
right: 0; right: 0;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
.user-box{
.user-box {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-direction: column; flex-direction: column;
.title{
.title {
display: flex; display: flex;
justify-content: center; justify-content: center;
img{
img {
width: 395px; width: 395px;
height: 124px; height: 124px;
} }
} }
.code{
img{ .code {
img {
height: 60px; height: 60px;
border-radius: 30px; border-radius: 30px;
} }
} }
.login-btn{
.login-btn {
margin-top: 20px; margin-top: 20px;
margin-bottom: 0; margin-bottom: 0;
font-size: 10px; font-size: 10px;
/deep/.ant-btn-primary{
/deep/ .ant-btn-primary {
height: 60px; height: 60px;
background: #069F99; background: #069F99;
border: none; border: none;
@@ -354,16 +469,39 @@ export default {
} }
} }
} }
/deep/.ant-row{
/deep/ .ant-row {
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
/deep/.ant-input-affix-wrapper .ant-input{
/deep/ .ant-input-affix-wrapper .ant-input {
border-radius: 30px; border-radius: 30px;
height: 60px; height: 60px;
border: 1px solid #E6E3E3; border: 1px solid #E6E3E3;
} }
.forget-password{
.forget-password {
cursor: pointer; cursor: pointer;
} }
} }
.captcha {
position: relative;
/deep/ button {
border: none;
color: #069F99;
position: absolute;
right: 10px;
top: -6px;
box-shadow: none;
background: none;
}
}
/deep/ .ant-input {
border-radius: 30px;
height: 60px;
border: 1px solid #E6E3E3;
}
</style> </style>
src/views/user/alteration/Alteration.vue
+104 -66
View File
@@ -97,9 +97,12 @@
<script> <script>
import { getAction, postAction } from '@/api/manage' import { getAction, postAction } from '@/api/manage'
import { getRSAPublicKey } from '@api/login'
import { JSEncrypt } from 'jsencrypt'
import { timeFix } from '@/utils/util'
export default { export default {
name: "Alteration", name: 'Alteration',
components: {}, components: {},
data() { data() {
return { return {
@@ -108,11 +111,11 @@ export default {
validatorRules: { validatorRules: {
phone: { phone: {
rules: [ rules: [
{required: true, message: '请输入手机号码!'},{validator: this.validatePhone}], { required: true, message: '请输入手机号码!' }, { validator: this.validatePhone }],
validateTrigger: 'blur' validateTrigger: 'blur'
}, },
captcha: { captcha: {
rules: [{required: true, message: '请输入短信验证码!'}], rules: [{ required: true, message: '请输入短信验证码!' }],
validateTrigger: 'blur' validateTrigger: 'blur'
}, },
password: { password: {
@@ -127,15 +130,15 @@ export default {
}, },
confirmPassword: { confirmPassword: {
rules: [ rules: [
{required: true, message: '密码不能为空!'}, { required: true, message: '密码不能为空!' },
{validator: this.handlePasswordCheck} { validator: this.handlePasswordCheck }
], ],
validateTrigger: 'blur' validateTrigger: 'blur'
}, }
}, },
state: { state: {
time: 60, time: 60,
smsSendBtn: false, smsSendBtn: false
}, },
userList: {} userList: {}
} }
@@ -148,16 +151,29 @@ export default {
if (!err) { if (!err) {
let params = {} let params = {}
console.log(values, '======values') console.log(values, '======values')
params.phone = values.phone; params.rsaPublicKey = this.rsaPublicKey
params.password = values.password; let encrypt = new JSEncrypt()
params.captcha = values.captcha; encrypt.setPublicKey(params.rsaPublicKey)
params.confirmPassword = values.confirmPassword; params.phone = encrypt.encrypt(values.phone)
getAction("/sys/user/passwordChange", params).then((res) => { params.password = encrypt.encrypt(values.password)
params.verifyCode = values.captcha
params.verifyPassword = encrypt.encrypt(values.confirmPassword)
postAction('/company/verificationChangePassword', params).then((res) => {
if (res.success) { if (res.success) {
that.loading = false that.loading = false
that.$router.go(-1) if (this.$route.query.isFirstLogin === 'true') {
// 进入首页
this.$router.push({ path: '/' }).catch(() => {
})
this.$notification.success({
message: '欢迎',
description: `${ timeFix() }，欢迎回来`
})
} else {
that.$router.go(-1)
}
} else { } else {
this.passwordFailed(res.message); this.passwordFailed(res.message)
that.loading = false that.loading = false
} }
}) })
@@ -170,25 +186,25 @@ export default {
this.$router.go(-1) this.$router.go(-1)
}, },
passwordFailed(err) { passwordFailed(err) {
this.$notification[ 'error' ]({ this.$notification['error']({
message: "更改密码失败", message: '更改密码失败',
description:err, description: err,
duration: 4, duration: 4
}); })
}, },
validatePhone(rule,value,callback){ validatePhone(rule, value, callback) {
if(value){ if (value) {
var myreg=/^[1][3,4,5,7,8][0-9]{9}$/; var myreg = /^[1][3,4,5,7,8][0-9]{9}$/
if(!myreg.test(value)){ if (!myreg.test(value)) {
callback("请输入正确的手机号") callback('请输入正确的手机号')
}else{ } else {
callback(); callback()
} }
}else{ } else {
callback() callback()
} }
}, },
handlePasswordCheck (rule, value, callback) { handlePasswordCheck(rule, value, callback) {
let password = this.form.getFieldValue('password') let password = this.form.getFieldValue('password')
if (value && password && value.trim() !== password.trim()) { if (value && password && value.trim() !== password.trim()) {
callback(new Error('两次密码不一致')) callback(new Error('两次密码不一致'))
@@ -196,70 +212,79 @@ export default {
callback() callback()
}, },
getCaptcha(e) { getCaptcha(e) {
e.preventDefault(); e.preventDefault()
let that = this; let that = this
let phone=that.form.getFieldValue("phone") let phone = that.form.getFieldValue('phone')
if(!phone){ if (!phone) {
this.cmsFailed("手机号不能为空!"); this.cmsFailed('手机号不能为空!')
return; return
} }
this.state.smsSendBtn = true; this.state.smsSendBtn = true
let interval = window.setInterval(() => { let interval = window.setInterval(() => {
if (that.state.time-- <= 0) { if (that.state.time-- <= 0) {
that.state.time = 60; that.state.time = 60
that.state.smsSendBtn = false; that.state.smsSendBtn = false
window.clearInterval(interval); window.clearInterval(interval)
} }
}, 1000); }, 1000)
const hide = this.$message.loading('验证码发送中..', 0); const hide = this.$message.loading('验证码发送中..', 0)
let smsParams = { let smsParams = {
mobile: phone, phone: phone
smsmode: "2" }
}; getAction('/company/sendVerificationCode', smsParams).then(res => {
postAction("/sys/sms", smsParams).then(res => {
if (!res.success) { if (!res.success) {
setTimeout(hide, 1); setTimeout(hide, 1)
this.cmsFailed(res.message); this.cmsFailed(res.message)
} }
setTimeout(hide, 500); setTimeout(hide, 500)
}) })
this.getPublicKey()
}, },
cmsFailed(err) { cmsFailed(err) {
this.$notification['error']({ this.$notification['error']({
message: "验证错误", message: '验证错误',
description: err, description: err,
duration: 4, duration: 4
}); })
},
getPublicKey() {
getRSAPublicKey().then(res => {
this.rsaPublicKey = res.result
})
} }
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
/deep/.ant-card{ /deep/ .ant-card {
width: 100%; width: 100%;
} }
/deep/.ant-card-body{
/deep/ .ant-card-body {
padding: 0 !important; padding: 0 !important;
height: 100%; height: 100%;
background: #F0F2F5; background: #F0F2F5;
} }
.alteration-center{
.alteration-center {
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: #F0F2F5; background: #F0F2F5;
} }
.alteration-content{
.alteration-content {
margin: auto; margin: auto;
width: 1000px; width: 1000px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: #fff; background: #fff;
.setPassword{
.setPassword {
font-size: 26px; font-size: 26px;
display: block; display: block;
background: #fff; background: #fff;
@@ -268,28 +293,34 @@ export default {
margin-top: 30px; margin-top: 30px;
} }
} }
/deep/.ant-form{
/deep/ .ant-form {
width: 500px; width: 500px;
height: 500px; height: 500px;
} }
.alteration-head{
.alteration-head {
position: absolute; position: absolute;
top: 0; top: 0;
width: 100%; width: 100%;
background: #069F99; background: #069F99;
height: 60px; height: 60px;
} }
.logo { .logo {
box-shadow: none !important; box-shadow: none !important;
transition: background 300ms; transition: background 300ms;
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
padding-left: 12px; padding-left: 12px;
a { a {
color: white; color: white;
&:hover { &:hover {
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
} }
h1 { h1 {
margin-left: 12px; margin-left: 12px;
color: #fff; color: #fff;
@@ -299,35 +330,42 @@ export default {
} }
} }
.alteration-content{ .alteration-content {
} }
/deep/.ant-row{
/deep/ .ant-row {
margin-bottom: 20px !important; margin-bottom: 20px !important;
height: 60px; height: 60px;
} }
/deep/.ant-form-item-label{
/deep/ .ant-form-item-label {
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
} }
/deep/.ant-input{
/deep/ .ant-input {
border-radius: 30px; border-radius: 30px;
height: 50px; height: 50px;
border: 1px solid #E6E3E3; border: 1px solid #E6E3E3;
} }
.btn{
/deep/button{ .btn {
/deep/ button {
border-radius: 30px; border-radius: 30px;
margin: 0 20px; margin: 0 20px;
} }
.ant-btn-primary{
.ant-btn-primary {
background: #069F99; background: #069F99;
border: none; border: none;
} }
} }
.captcha{
.captcha {
position: relative; position: relative;
/deep/button{
/deep/ button {
border: none; border: none;
color: #069F99; color: #069F99;
position: absolute; position: absolute;
vue.config.js
+1 -1
View File
@@ -76,7 +76,7 @@ module.exports = {
}, },
devServer: { devServer: {
port: 3000, port: 3001,
proxy: { proxy: {
/* '/api': { /* '/api': {
target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro', //mock API接口系统 target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro', //mock API接口系统