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