end7less
/
program_xm_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

登录、注册、重置密码等

master
qqkj 5 years ago
parent
1bbb3e412e
commit
10f5ba99ae
9 changed files with 958 additions and 363 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 95
      src/api/login.js
  2. 2
      src/mock/index.js
  3. 2
      src/mock/login.js
  4. 6
      src/store/modules/app.js
  5. 186
      src/store/modules/user.js
  6. 14
      src/utils/auth.js
  7. 231
      src/views/login/index.vue
  8. 332
      src/views/login/register.vue
  9. 285
      src/views/login/resetPassword.vue

95
src/api/login.js
View File

@ -1,38 +1,93 @@
import axios from '@/utils/request'
import { getToken, setToken, removeToken,getCacheUserInfo,setCacheUserInfo,removeCacheUserInfo} from '@/utils/auth'
import config from '@/common/config'
let base=config.getOauth2LoginBasePath();
//let base='';
export function loginByUsername(username, password,deptid) {
export function doLoginByUserloginid(userloginid, password,grantType,authType,deptid) {
removeToken();
const data = {
userloginid: username,
userloginid: userloginid,
password: password,
authType:'password_display_userid',
authType:authType,
deptid:deptid
}
return axios({
url: base+'/login/token?grantType=password',
url: base+'/login/token?grantType='+grantType,
method: 'post',
data
})
}
export function loginByPhoneno(phoneno, smsCode,isAdmin,deptid) {
export function checkUserid(userid ) {
removeToken();
const data = {
userloginid: phoneno,
password: smsCode,
authType:'sms',
isAdmin:true,
deptid:deptid
userid: userid
}
return axios({
url: base+'/user/check/userid',
method: 'post',
data
})
}
export function checkDisplayUserid(displayUserid ) {
removeToken();
const data = {
displayUserid: displayUserid
}
return axios({
url: base+'/user/check/displayUserid',
method: 'post',
data
})
}
export function checkPhoneno(phoneno ) {
removeToken();
const data = {
phoneno: phoneno
}
return axios({
url: base+'/user/check/phoneno',
method: 'post',
data
})
}
export function doRegister( userInfo ) {
removeToken();
const data = {
username:userInfo.username,
userid:userInfo.displayUserid,
displayUserid:userInfo.displayUserid,
password:userInfo.password,
phoneno:userInfo.phoneno,
smsCode:userInfo.smsCode,
deptid:userInfo.deptid
}
return axios({
url: base+'/login/token?grantType=password',
url: base+'/user/register',
method: 'post',
data
})
}
export function resetPasswordByPhoneno( userInfo ) {
removeToken();
const data = {
newPassword:userInfo.newPassword,
phoneno:userInfo.phoneno,
smsCode:userInfo.smsCode,
}
return axios({
url: base+'/user/password/reset?type=sms',
method: 'post',
data
})
}
export function logout() {
removeToken();
/**
return axios({
url: base+'/logout',
@ -54,21 +109,3 @@ export function getUserInfo(params) {
data
})
}
export function getUserDepts(userid) {
if( !userid ){
params={
userid:userid
}
}else{
return
}
const data= { params: params };
return axios({
url: base+'/user/depts',
method: 'get',
data
})
}
export function switchDept(params) {
return axios.post( base+'/login/switch', params )
}

2
src/mock/index.js
View File

@ -9,7 +9,7 @@ import transactionAPI from './transaction'
// })
// 登录相关
//Mock.mock(/\/login\/login/, 'post', loginAPI.loginByUsername)
//Mock.mock(/\/login\/login/, 'post', loginAPI.loginByUserloginid)
//Mock.mock(/\/login\/logout/, 'post', loginAPI.logout)
//Mock.mock(/\/user\/info\.*/, 'get', loginAPI.getUserInfo)

2
src/mock/login.js
View File

@ -18,7 +18,7 @@ const userMap = {
}
export default {
loginByUsername: config => {
loginByUserloginid: config => {
const { username } = JSON.parse(config.body)
return userMap[username]
},

6
src/store/modules/app.js
View File

@ -3,7 +3,7 @@ import Cookies from 'js-cookie'
const app = {
state: {
sidebar: {
opened: !+Cookies.get('sidebarStatus')
opened: Cookies.get('sidebarStatus')==1?true:false
},
language: Cookies.get('language') || 'zh'
},
@ -11,10 +11,10 @@ const app = {
TOGGLE_SIDEBAR: (state,toOpen) => {
if(toOpen==true){
Cookies.set('sidebarStatus', 1)
state.sidebar.opened =1
state.sidebar.opened =true
}else if(toOpen==false){
Cookies.set('sidebarStatus', 0)
state.sidebar.opened =0
state.sidebar.opened =false
}else{
if (state.sidebar.opened) {
Cookies.set('sidebarStatus', 1)

186
src/store/modules/user.js
View File

@ -1,5 +1,5 @@
import { loginByUsername, loginByPhoneno, logout, getUserInfo, switchDept } from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { doLoginByUserloginid, logout, getUserInfo } from '@/api/login'
import { getToken, setToken, removeToken,getCacheUserInfo,setCacheUserInfo,removeCacheUserInfo} from '@/utils/auth'
const user = {
state: {
@ -98,10 +98,10 @@ const user = {
actions: {
// 用户名登录
LoginByUsername({ commit }, userInfo) {
const username = userInfo.username.trim()
LoginByUserloginid({ commit }, loginParams) {
removeToken();
return new Promise((resolve, reject) => {
loginByUsername(username, userInfo.password,userInfo.deptid).then(res => {
doLoginByUserloginid(loginParams.userloginid, loginParams.password,loginParams.grantType,loginParams.authType,loginParams.deptid).then(res => {
if(res.data.tips.isOk==true){
let data = res.data
let userInfo=data.userInfo;
@ -137,49 +137,10 @@ const user = {
})
})
},
// 用户名登录
LoginByPhoneno({ commit }, userInfo) {
return new Promise((resolve, reject) => {
loginByPhoneno(userInfo.phoneno, userInfo.smsCode, userInfo.isAdmin,userInfo.deptid).then(res => {
if(res.data.tips.isOk==true){
let data = res.data
let userInfo=data.userInfo;
let roles=data.roles;
if(roles!=null && roles.length>0){
roles.forEach(role=>{
if(role.roleid=='superAdmin'){
userInfo.isSuperAdmin=true
}
if(role.roleid=='platformAdmin'){
userInfo.isPlatformAdmin=true
}
if(role.roleid=='branchAdmin'){
userInfo.isBranchAdmin=true
}
if(role.roleid=='shopAdmin'){
userInfo.isShopAdmin=true
}
if(role.roleid=='locationAdmin'){
userInfo.isLocationAdmin=true
}
});
}
commit('SET_USER_INFO', userInfo)
commit('SET_ROLES', roles)
commit('SET_QXS', data.qxs)
commit('SET_TOKEN', data.data.accessToken.tokenValue)
setToken( data.data.accessToken.tokenValue)
}
resolve(res)
}).catch(error => {
reject(error)
})
})
},
// 获取用户信息
GetUserInfo({ commit, state }) {
ParseUserInfo({commit},res){
return new Promise((resolve, reject) => {
getUserInfo({userid:state.userInfo.userid}).then(res=>{
if(res.data.tips.isOk==true){
let userInfo = res.data.userInfo;
let roles = res.data.roles;
@ -247,123 +208,41 @@ const user = {
commit('SET_USER_INFO',userInfo);
commit('SET_ROLES', roles)
commit('SET_QXS', qxs)
//commit('SET_TOKEN', res.data.access_token);
commit('SET_WORK_SHOP',userInfo);
commit('SET_IS_LOAD_OK', true)
}
resolve(res);
}).catch(error => {
reject(error)
});
/**
getUserInfo(state.access_token).then(response => {
if (!response.data) { // 由于mockjs 不支持自定义状态码只能这样hack
reject('error')
}else{
reject(res)
}
const data = response.data
commit('SET_USER_INFO', data.userInfo)
commit('SET_ROLES', data.roles)
commit('SET_TOKEN', data.userInfo.jsessionid)
setToken(data.userInfo.jsessionid)
resolve(response)
}).catch(error => {
reject(error)
})
*/
})
},
// 获取用户信息
SwitchDept({ commit,state } ,dept) {
GetUserInfo({ commit, state }) {
return new Promise((resolve, reject) => {
let userInfo=state.userInfo;
let params={deptName:dept.deptName,deptid:dept.deptid,branchId:dept.branchId,branchName:dept.branchName,userid:userInfo.userid}
switchDept(params).then(res=>{
if(res.data.tips.isOk==true){
let userInfo = res.data.userInfo;
let roles = res.data.roles;
let qxs=res.data.qxs;
if(roles!=null && roles.length>0){
roles.forEach(role=>{
if(role.roleid=='superAdmin'){
userInfo.isSuperAdmin=true
}
if(role.roleid=='platformAdmin'){
userInfo.isPlatformAdmin=true
}
if(role.roleid=='branchAdmin'){
userInfo.isBranchAdmin=true
}
if(role.roleid=='shopAdmin'){
userInfo.isShopAdmin=true
}
if(role.roleid=='locationAdmin'){
userInfo.isLocationAdmin=true
}
var cacheUserInfo=getCacheUserInfo();
if(cacheUserInfo){
this.dispatch("ParseUserInfo",cacheUserInfo).then(res2=>{
resolve(res2);
}).catch(error2=>{
reject(error2)
});
}
let branchs=res.data.branchs==null?[]:res.data.branchs;
let depts=res.data.depts==null?[]:res.data.depts;
let shops=res.data.shops==null?[]:res.data.shops;
let locations=res.data.locations==null?[]:res.data.locations
locations.forEach(l=>{
shops.forEach(s=>{
if(s.shopId==l.shopId){
l.shopName=s.shopName
}
})
depts.forEach(d=>{
if(d.deptid==l.deptid){
l.deptName=d.deptName
l.branchName=d.branchName
}
})
})
let posts=res.data.posts==null?[]:res.data.posts;
posts.forEach(post=>{
depts.forEach(dept=>{
if(dept.deptid==post.deptid){
post.deptName=dept.deptName
post.branchId=dept.branchId
post.branchName=dept.branchName
}
})
})
commit('SET_MYBRANCHS',branchs);
commit('SET_MYDEPTS',depts);
commit('SET_MYLOCATIONS',locations);
commit('SET_MYMENUS',res.data.menus);
commit('SET_MYPOSTS', posts);
commit('SET_USER_INFO',userInfo);
commit('SET_ROLES', roles)
commit('SET_QXS', qxs)
commit('SET_TOKEN', res.data.access_token)
commit('SET_WORK_SHOP',JSON.parse(JSON.stringify(userInfo)));
commit('SET_IS_LOAD_OK', true)
}
resolve(res);
}).catch((res)=>{
reject(res);
}else{
getUserInfo().then(res=>{
this.dispatch("ParseUserInfo",res).then(res2=>{
setCacheUserInfo(res);
resolve(res2);
}).catch(error2=>{
reject(error2)
});
}).catch(error => {
reject(error)
});
}
})
},
// 第三方验证登录
// LoginByThirdparty({ commit, state }, code) {
// return new Promise((resolve, reject) => {
// commit('SET_CODE', code)
// loginByThirdparty(state.status, state.email, state.code).then(response => {
// commit('SET_TOKEN', response.data.access_token)
// setToken(response.data.access_token)
// resolve()
// }).catch(error => {
// reject(error)
// })
// })
// },
// 登出
LogOut({ commit, state }) {
@ -377,16 +256,15 @@ const user = {
commit('SET_MYPOSTS', [])
commit('SET_USER_INFO', {})
removeToken()
removeCacheUserInfo();
resolve()
logout(state.token)
logout()
})
},
// 前端 登出
FedLogOut({ commit }) {
return new Promise(resolve => {
commit('SET_TOKEN', '')
removeToken()
return new Promise((resolve, reject) => {
resolve()
})
},

14
src/utils/auth.js
View File

@ -13,3 +13,17 @@ export function setToken(token) {
export function removeToken() {
return localStorage.removeItem(TokenKey)
}
export function getCacheUserInfo(){
var userInfo= localStorage.getItem(localStorage.getItem(TokenKey));
return JSON.parse(userInfo);
}
export function setCacheUserInfo(userInfo){
var tokenValue=localStorage.getItem(TokenKey)
localStorage.setItem(tokenValue, JSON.stringify(userInfo))
return;
}
export function removeCacheUserInfo() {
var tokenValue=localStorage.getItem(TokenKey)
return localStorage.removeItem(tokenValue)
}

231
src/views/login/index.vue
View File

@ -1,57 +1,54 @@
<template>
<div class="login-container">
<el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
<el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm">
<div class="title-container">
<h3 class="title">{{$t('login.title')}}</h3>
<div class="logo">
<img src="../../assets/image/logo1.png" alt="" />
<div class="logo-text">
<div class="systemName">{{$t('login.title')}}</div>
</div>
</div>
<lang-select class="set-language"></lang-select>
</div>
<el-form-item prop="authType">
<span class="svg-container svg-container_login">
<svg-icon icon-class="user" />
</span>
<el-radio v-model="loginForm.authType" label="password">账户密码登录</el-radio>
<el-radio v-model="loginForm.authType" label="sms">短信验证码快速登录</el-radio>
<el-radio-group v-model="loginForm.authType">
<el-radio label="password_display_userid">账户密码登录</el-radio>
<el-radio label="sms">短信验证码快速登录</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item prop="username" v-if="loginForm.authType=='password'">
<span class="svg-container svg-container_login">
<svg-icon icon-class="user" />
</span>
<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="用户编号" />
<el-form-item prop="displayUserid" v-show="loginForm.authType=='password_display_userid'">
<el-input name="displayUserid" type="text" v-model="loginForm.displayUserid" autoComplete="on" placeholder="用户编号" >
<template slot="prepend">账号</template>
</el-input>
</el-form-item>
<el-form-item prop="password" v-if="loginForm.authType=='password'">
<span class="svg-container">
<svg-icon icon-class="password" />
</span>
<el-input name="password" :type="passwordType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on" placeholder="password" />
<span class="show-pwd" @click="showPwd">
<el-form-item prop="password" v-show="loginForm.authType=='password_display_userid'">
<el-input name="password" :type="passwordType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on" placeholder="password">
<template slot="prepend">密码</template>
<span slot="append" class="show-pwd" @click="showPwd">
<svg-icon icon-class="eye" />
</span>
</el-input>
</el-form-item>
<el-form-item prop="phoneno" v-if="loginForm.authType=='sms'">
<span class="svg-container svg-container_login">
<svg-icon icon-class="user" />
</span>
<el-input name="phoneno" type="text" v-model="loginForm.phoneno" autoComplete="on" placeholder="手机号码" />
<el-form-item prop="phoneno" v-show="loginForm.authType=='sms'">
<el-input name="phoneno" type="text" v-model="loginForm.phoneno" autoComplete="on" placeholder="手机号码">
<template slot="prepend">手机号码&nbsp;&nbsp;&nbsp;</template>
<el-button slot="append" @click.prevent="sendPhonenoSmsCode">发送验证码</el-button>
</el-input>
</el-form-item>
<el-form-item prop="smsCode" v-if="loginForm.authType=='sms'">
<span class="svg-container svg-container_login">
<svg-icon icon-class="user" />
</span>
<el-input name="smsCode" type="text" v-model="loginForm.smsCode" autoComplete="on" placeholder="短信验证码" /><el-button @click.prevent="sendPhonenoSmsCode">发送验证码</el-button>
<el-form-item prop="smsCode" v-show="loginForm.authType=='sms'">
<el-input name="smsCode" type="text" v-model="loginForm.smsCode" autoComplete="on" placeholder="短信验证码">
<template slot="prepend">短信验证码</template>
<template slot="append">六位验证码</template>
</el-input>
</el-form-item>
<el-button type="primary" style="width:100%;margin-bottom:30px;" :loading="loading" @click.native.prevent="handleLogin">{{$t('login.logIn')}}</el-button>
<div class="tips">
<span> </span>
<span> </span>
</div>
<div class="tips">
<span style="margin-right:18px;"> </span>
<span> </span>
</div>
<el-button class="thirdparty-button" type="primary" @click="showTpLoginDialog=true">{{$t('login.thirdparty')}}</el-button>
<el-row>
<el-button type="success" plain round @click="showRegisterDialog=true">新用户注册</el-button>
<el-button type="warning" plain round @click="showResetPasswordDialog=true">忘记密码</el-button>
<el-button type="primary" plain round @click="showTpLoginDialog=true">{{$t('login.thirdparty')}}</el-button>
</el-row>
</el-form>
<el-dialog
title="请选择一个部门进行登陆"
@ -78,7 +75,14 @@
<br/>
<social-sign />
</el-dialog>
<!-- 注册窗口 -->
<el-dialog title="新用户注册" :visible.sync="showRegisterDialog" append-to-body>
<register />
</el-dialog>
<!-- 重置密码窗口 -->
<el-dialog title="重置密码" :visible.sync="showResetPasswordDialog" append-to-body>
<reset-password />
</el-dialog>
<!--新增 Branch 管理端机构表（机构下面若干部门）界面-->
<el-dialog title="新增机构" :visible.sync="addBranchFormVisible" width="50%" :close-on-click-modal="false" append-to-body>
<branch-add :visible="addBranchFormVisible" @cancel="addBranchFormVisible=false" @submit="afterAddBranchSubmit"></branch-add>
@ -87,49 +91,84 @@
</template>
<script>
import { isvalidUsername } from '@/utils/validate';
import { sendSmsCode,validateSmsCode } from '@/api/sms/sms';
import { getUserDepts } from '@/api/login';
import { sendSmsCode } from '@/api/sms/sms';
import LangSelect from '@/components/LangSelect';
import SocialSign from './socialsignin';
import Register from './register';
import ResetPassword from './resetPassword';
import BranchAdd from './BranchAdd';
import { mapGetters } from 'vuex';
import md5 from 'js-md5';
export default {
components: { LangSelect, SocialSign, BranchAdd },
components: { LangSelect, SocialSign, BranchAdd,Register,ResetPassword},
name: 'login',
data() {
const validateUsername = (rule, value, callback) => {
if (!isvalidUsername(value)) {
callback(new Error('请输入正确的用户账号'))
const validateDisplayUserid = (rule, value, callback) => {
if (this.loginForm.authType=='password_display_userid') {
if(value.length<=6){
callback(new Error('请输入6位以上用户账号'))
}else{
callback()
}
} else {
callback()
}
}
const validatePassword = (rule, value, callback) => {
if (this.loginForm.authType=='password_display_userid') {
if(value.length<6){
callback(new Error('密码必须大于六位'))
callback(new Error('密码最少为六位'))
}else{
callback()
}
} else {
callback()
}
}
const validatePhoneno = (rule, value, callback) => {
if (this.loginForm.authType=='sms') {
if(value.length !=11 ){
callback(new Error('手机号码必须为11位号码'))
}else{
callback()
}
} else {
callback()
}
}
const validateSmsCode = (rule, value, callback) => {
if (this.loginForm.authType=='sms') {
if(value.length !=6 ){
callback(new Error('请输入6位短信验证码'))
}else{
callback()
}
} else {
callback()
}
}
return {
loginForm: {
username: '',
displayUserid: '',
password: '',
authType:'password',//password/sms 分别为账户密码、短信验证码快捷登录
authType:'password_display_userid',//password/sms/password_display_userid 分别为账户密码、短信验证码快捷登录
phoneno:'',//手机号码
smsCode:'',//短信验证码
},
loginRules: {
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
password: [{ required: true, trigger: 'blur', validator: validatePassword }]
displayUserid: [{ required: true, trigger: 'blur', validator: validateDisplayUserid }],
password: [{ required: true, trigger: 'blur', validator: validatePassword }],
phoneno: [{ required: true, trigger: 'blur', validator: validatePhoneno }],
smsCode: [{ required: true, trigger: 'blur', validator: validateSmsCode }],
},
passwordType: 'password',
loading: false,
showResetPasswordDialog:false,//显示忘记密码重置密码窗口
showTpLoginDialog: false, //显示第三方登陆对话框
showRegisterDialog: false,//显示注册窗口
deptSelectVisible:false,//显示选择部门对话框
userDeptid:'',//选中的部门编号
addBranchFormVisible:false, //显示添加机构对话框
@ -162,18 +201,28 @@ export default {
if (valid) {
this.loading = true
let params={
username:this.loginForm.username,
displayUserid:this.loginForm.displayUserid,
password:md5(this.loginForm.password),
deptid:this.userDeptid,
authType:this.loginForm.authType,
phoneno:this.loginForm.phoneno,
smsCode:this.loginForm.smsCode
}
var dispatchName="LoginByUsername"
if(this.loginForm.authType=='sms'){
dispatchName="LoginByPhoneno"
}
this.$store.dispatch(dispatchName,params).then(res => {
var loginParams={ }
if(params.authType=='password_display_userid'){
loginParams.userloginid=params.displayUserid
loginParams.password=params.password
loginParams.grantType="password"
loginParams.authType='password_display_userid'
loginParams.deptid=params.deptid
}else if(params.authType=='sms'){
loginParams.userloginid=params.phoneno
loginParams.password=params.smsCode
loginParams.grantType="password"
loginParams.authType="sms"
loginParams.deptid=params.deptid
}
this.$store.dispatch("LoginByUserloginid",loginParams).then(res => {
this.loading = false
if(res.data.tips.isOk==true){
console.log(this.$store);
@ -299,34 +348,6 @@ export default {
}
</script>
<style rel="stylesheet/scss" lang="scss">
$bg:#2d3a4b;
$light_gray:#eee;
/* reset element-ui css */
.login-container {
.el-input {
display: inline-block;
height: 47px;
width: 85%;
input {
background: transparent;
border: 0px;
-webkit-appearance: none;
border-radius: 0px;
padding: 12px 5px 12px 15px;
color: $light_gray;
height: 47px;
}
}
.el-form-item {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.1);
border-radius: 5px;
color: #454545;
}
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
$bg:#2d3a4b;
@ -334,11 +355,12 @@ $dark_gray:#889aa4;
$light_gray:#ef1010;
.login-container {
position: fixed;
position:absolute;
height: 100%;
width: 100%;
background-color: $bg;
background:url(../../assets/image/yxin_login_backgroup_pc.png) no-repeat;
background-size: 100%;
background:url(../../assets/image/yxin_login_backgroup_pc.png) center center;
.login-form {
position: absolute;
left: 0;
@ -347,8 +369,7 @@ $light_gray:#ef1010;
padding: 35px 35px 15px 35px;
margin: 180px auto;
border-radius: 20px;
opacity: 0.9;
background-color:#f5f7faa3;
background-color:#f5f7faee;
}
.tips {
font-size: 14px;
@ -381,7 +402,7 @@ $light_gray:#ef1010;
font-weight: bold;
}
.set-language {
color: #fff;
color: rgb(95, 41, 221);
position: absolute;
top: 5px;
right: 0px;
@ -401,5 +422,33 @@ $light_gray:#ef1010;
right: 35px;
bottom: 28px;
}
.register-button {
position: absolute;
bottom: 28px;
}
}
.logo {
height: 100px;
width: 100%;
// padding: 0 20px;
display: flex;
align-items: left;
justify-content: center;
img {
height: 100%;
}
.logo-text {
display: flex;
align-items: center;
justify-content: center;
color: $light_gray;
.systemName {
font-size: 35px;
font-weight: 400;
color: $light_gray;
text-align: center;
font-weight: bold;
}
}
}
</style>

332
src/views/login/register.vue
View File

@ -0,0 +1,332 @@
<template>
<div>
<el-form autoComplete="on" label-width="120px" :model="loginForm" :rules="loginRules" ref="loginForm">
<div>
<div class="logo">
<img src="../../assets/image/logo1.png" alt="" />
<div class="logo-text">
<div class="systemName">{{$t('login.title')}}</div>
</div>
</div>
</div>
<el-form-item prop="phoneno" label="手机号码">
<el-input name="phoneno" type="text" v-model="loginForm.phoneno" autoComplete="on" placeholder="手机号码">
<el-button slot="append" @click.prevent="sendPhonenoSmsCode">发送验证码</el-button>
</el-input>
</el-form-item>
<el-form-item prop="smsCode" label="短信验证码">
<el-input name="smsCode" type="text" v-model="loginForm.smsCode" autoComplete="on" placeholder="短信验证码">
<template slot="append">六位验证码</template>
</el-input>
</el-form-item>
<el-form-item prop="username" label="用户名称">
<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="用户名称" >
</el-input>
</el-form-item>
<el-form-item prop="displayUserid" label="账号">
<el-input name="displayUserid" type="text" v-model="loginForm.displayUserid" autoComplete="on" placeholder="用户编号" >
<el-button slot="append" @click.prevent="checkDisplayUserid">检测是否已注册</el-button>
</el-input>
</el-form-item>
<el-form-item prop="password" label="密码">
<el-input name="password" :type="passwordType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on" placeholder="password">
<span slot="append" class="show-pwd" @click="showPwd">
<svg-icon icon-class="eye" />
</span>
</el-input>
</el-form-item>
<el-button type="primary" style="width:100%;margin-bottom:30px;" :loading="loading" @click.native.prevent="handleRegister">注册</el-button>
</el-form>
<el-dialog
title="请选择一个部门进行登陆"
:visible.sync="deptSelectVisible"
width="screenWidth<500?'90%':'500px" append-to-body>
<el-row class="app-container">
<el-col :span=20 v-for="(d,index) in myDepts" :key="index">
<el-col :span=20><el-radio v-model="userDeptid" :label="d.deptid">{{d.deptName}}({{d.branchName}}) </el-radio> </el-col>
</el-col>
</el-row >
<el-row class="app-container" style="text-align:right;">
<el-col :span=20 >
<el-button @click="deptSelectVisible = false">取 消</el-button>
<el-button type="primary" @click="deptChecked">确 定</el-button>
</el-col>
</el-row >
</el-dialog>
<!-- 第三方登陆窗口 -->
<el-dialog :title="$t('login.thirdparty')" :visible.sync="showTpLoginDialog" append-to-body>
{{$t('login.thirdpartyTips')}}
<br/>
<br/>
<br/>
<social-sign />
</el-dialog>
<!--新增 Branch 管理端机构表（机构下面若干部门）界面-->
<el-dialog title="新增机构" :visible.sync="addBranchFormVisible" width="50%" :close-on-click-modal="false" append-to-body>
<branch-add :visible="addBranchFormVisible" @cancel="addBranchFormVisible=false" @submit="afterAddBranchSubmit"></branch-add>
</el-dialog>
</div>
</template>
<script>
import { sendSmsCode } from '@/api/sms/sms';
import { checkPhoneno,checkDisplayUserid,doRegister } from '@/api/login';
import LangSelect from '@/components/LangSelect';
import SocialSign from './socialsignin';
import BranchAdd from './BranchAdd';
import { mapGetters } from 'vuex';
import md5 from 'js-md5';
export default {
components: { LangSelect, SocialSign, BranchAdd },
name: 'login',
data() {
const validateDisplayUserid = (rule, value, callback) => {
if(value.length<=6){
callback(new Error('请输入6位以上用户账号'))
}else{
callback()
}
}
const validatePassword = (rule, value, callback) => {
if(value.length<6){
callback(new Error('密码最少为六位'))
}else{
callback()
}
}
const validatePhoneno = (rule, value, callback) => {
if(value.length !=11 ){
callback(new Error('手机号码必须为11位号码'))
}else{
callback()
}
}
const validateSmsCode = (rule, value, callback) => {
if(value.length !=6 ){
callback(new Error('请输入6位短信验证码'))
}else{
callback()
}
}
const validateUsername = (rule, value, callback) => {
if(value.length <2 ){
callback(new Error('请输入用户名称'))
}else{
callback()
}
}
return {
loginForm: {
username:'',
displayUserid: '',
password: '',
authType:'password_display_userid',//password/sms/password_display_userid 分别为账户密码、短信验证码快捷登录
phoneno:'',//手机号码
smsCode:'',//短信验证码
},
loginRules: {
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
displayUserid: [{ required: true, trigger: 'blur', validator: validateDisplayUserid }],
password: [{ required: true, trigger: 'blur', validator: validatePassword }],
phoneno: [{ required: true, trigger: 'blur', validator: validatePhoneno }],
smsCode: [{ required: true, trigger: 'blur', validator: validateSmsCode }],
},
passwordType: 'password',
loading: false,
showTpLoginDialog: false, //显示第三方登陆对话框
deptSelectVisible:false,//显示选择部门对话框
userDeptid:'',//选中的部门编号
addBranchFormVisible:false, //显示添加机构对话框
}
},
methods: {
showPwd() {
if (this.passwordType === 'password') {
this.passwordType = ''
} else {
this.passwordType = 'password'
}
},
sendPhonenoSmsCode(){
if(!this.loginForm.phoneno){
this.$message.error("手机号码不能为空");
return;
}
if(this.loginForm.phoneno.length !=11 ){
this.$message.error("手机号码必须为11位");
return;
}
var params={
phoneno:this.loginForm.phoneno,
scene:"register"
}
checkPhoneno(this.loginForm.phoneno).then(res0=>{
if(res0.data.tips.isOk){
sendSmsCode(params).then(res=>{
if(res.data.tips.isOk){
this.$message.success(res.data.tips.msg);
}else{
this.$message.error(res.data.tips.msg);
}
})
}else{
this.$message.error("手机号码已存在，不允许注册，请直接登录");
}
})
},
checkDisplayUserid(){
if(!this.loginForm.displayUserid){
this.$message.error("账号不能为空");
return;
}
checkDisplayUserid(this.loginForm.displayUserid).then(res0=>{
if(res0.data.tips.isOk){
this.$message.success("该账户可以注册");
}else{
this.$message.error("该账户已存在，不允许再注册！");
}
})
},
handleRegister() {
this.loading = true
this.$refs.loginForm.validate(valid => {
if (valid) {
let params={
displayUserid:this.loginForm.displayUserid,
password:md5(this.loginForm.password),
deptid:this.userDeptid,
phoneno:this.loginForm.phoneno,
smsCode:this.loginForm.smsCode,
username:this.loginForm.username,
}
doRegister(params).then(res=>{
this.loading = false
if(res.data.tips.isOk){
this.$message.success(res.data.tips.msg);
}else{
this.$message.error(res.data.tips.msg);
}
})
} else {
this.loading = false
return false
}
})
},
deptChecked() {
if( !this.userDeptid){
this.$message.error("请选择登陆的部门")
return
}
let depts=this.myDepts.filter(d=>d.deptid==this.userDeptid)
if(this.$store.state.user.userInfo.deptid!=this.userDeptid){
this.handleLogin();
return;
}else{
this.rolesChecked();
}
},
//角色身份验证
rolesChecked(){
if(this.userInfo.isSuperAdmin){
this.$router.push({ path: '/' });
this.$message.info("欢迎登陆，超级管理员");
}else if(this.userInfo.isPlatformAdmin){
this.$router.push({ path: '/' });
this.$message.info("欢迎登陆，平台管理员");
}else{
this.$router.push({ path: '/' });
this.$message.info("欢迎登陆");
}
},
afterAddBranchSubmit(branch){
this.addBranchFormVisible=false;
this.loading=true
this.$store.dispatch('GetUserInfo').then((res)=>{
this.userDeptid=res.data.userInfo.deptid
this.loading = false;
//角色身份验证
this.rolesChecked();
});
},
afterQRScan() {
// const hash = window.location.hash.slice(1)
// const hashObj = getQueryObject(hash)
// const originUrl = window.location.origin
// history.replaceState({}, '', originUrl)
// const codeMap = {
// wechat: 'code',
// tencent: 'code'
// }
// const codeName = hashObj[codeMap[this.auth_type]]
// if (!codeName) {
// alert('第三方登录失败')
// } else {
// this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
// this.$router.push({ path: '/' })
// })
// }
}
},
created() {
// window.addEventListener('hashchange', this.afterQRScan)
},
destroyed() {
// window.removeEventListener('hashchange', this.afterQRScan)
},
computed: {
...mapGetters([
'myBranchs','myDepts','userInfo','roles'
]),
screenWidth:function(){
return screen.width;
},
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#ef1010;
.logo {
height: 100px;
width: 100%;
// padding: 0 20px;
display: flex;
align-items: left;
justify-content: center;
img {
height: 100%;
}
.logo-text {
display: flex;
align-items: center;
justify-content: center;
color: $light_gray;
.systemName {
font-size: 35px;
font-weight: 400;
color: $light_gray;
text-align: center;
font-weight: bold;
}
}
}
</style>

285
src/views/login/resetPassword.vue
View File

@ -0,0 +1,285 @@
<template>
<div>
<el-form autoComplete="on" label-width="120px" :model="loginForm" :rules="loginRules" ref="loginForm">
<div>
<div class="logo">
<img src="../../assets/image/logo1.png" alt="" />
<div class="logo-text">
<div class="systemName">{{$t('login.title')}}</div>
</div>
</div>
</div>
<el-form-item prop="phoneno" label="手机号码">
<el-input name="phoneno" type="text" v-model="loginForm.phoneno" autoComplete="on" placeholder="手机号码">
<el-button slot="append" @click.prevent="sendPhonenoSmsCode">发送验证码</el-button>
</el-input>
</el-form-item>
<el-form-item prop="smsCode" label="短信验证码">
<el-input name="smsCode" type="text" v-model="loginForm.smsCode" autoComplete="on" placeholder="短信验证码">
<template slot="append">六位验证码</template>
</el-input>
</el-form-item>
<el-form-item prop="password" label="新密码">
<el-input name="password" :type="passwordType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on" placeholder="password">
<span slot="append" class="show-pwd" @click="showPwd">
<svg-icon icon-class="eye" />
</span>
</el-input>
</el-form-item>
<el-button type="primary" style="width:100%;margin-bottom:30px;" :loading="loading" @click.native.prevent="handleResetPasswordByPhoneno">重置密码</el-button>
</el-form>
<el-dialog
title="请选择一个部门进行登陆"
:visible.sync="deptSelectVisible"
width="screenWidth<500?'90%':'500px" append-to-body>
<el-row class="app-container">
<el-col :span=20 v-for="(d,index) in myDepts" :key="index">
<el-col :span=20><el-radio v-model="userDeptid" :label="d.deptid">{{d.deptName}}({{d.branchName}}) </el-radio> </el-col>
</el-col>
</el-row >
<el-row class="app-container" style="text-align:right;">
<el-col :span=20 >
<el-button @click="deptSelectVisible = false">取 消</el-button>
<el-button type="primary" @click="deptChecked">确 定</el-button>
</el-col>
</el-row >
</el-dialog>
<!-- 第三方登陆窗口 -->
<el-dialog :title="$t('login.thirdparty')" :visible.sync="showTpLoginDialog" append-to-body>
{{$t('login.thirdpartyTips')}}
<br/>
<br/>
<br/>
<social-sign />
</el-dialog>
<!--新增 Branch 管理端机构表（机构下面若干部门）界面-->
<el-dialog title="新增机构" :visible.sync="addBranchFormVisible" width="50%" :close-on-click-modal="false" append-to-body>
<branch-add :visible="addBranchFormVisible" @cancel="addBranchFormVisible=false" @submit="afterAddBranchSubmit"></branch-add>
</el-dialog>
</div>
</template>
<script>
import { sendSmsCode } from '@/api/sms/sms';
import { checkPhoneno,resetPasswordByPhoneno } from '@/api/login';
import LangSelect from '@/components/LangSelect';
import SocialSign from './socialsignin';
import BranchAdd from './BranchAdd';
import { mapGetters } from 'vuex';
import md5 from 'js-md5';
export default {
components: { LangSelect, SocialSign, BranchAdd },
name: 'login',
data() {
const validatePassword = (rule, value, callback) => {
if(value.length<6){
callback(new Error('密码最少为六位'))
}else{
callback()
}
}
const validatePhoneno = (rule, value, callback) => {
if(value.length !=11 ){
callback(new Error('手机号码必须为11位号码'))
}else{
callback()
}
}
const validateSmsCode = (rule, value, callback) => {
if(value.length !=6 ){
callback(new Error('请输入6位短信验证码'))
}else{
callback()
}
}
return {
loginForm: {
password: '',
phoneno:'',//手机号码
smsCode:'',//短信验证码
},
loginRules: {
password: [{ required: true, trigger: 'blur', validator: validatePassword }],
phoneno: [{ required: true, trigger: 'blur', validator: validatePhoneno }],
smsCode: [{ required: true, trigger: 'blur', validator: validateSmsCode }],
},
passwordType: 'password',
loading: false,
showTpLoginDialog: false, //显示第三方登陆对话框
deptSelectVisible:false,//显示选择部门对话框
userDeptid:'',//选中的部门编号
addBranchFormVisible:false, //显示添加机构对话框
}
},
methods: {
showPwd() {
if (this.passwordType === 'password') {
this.passwordType = ''
} else {
this.passwordType = 'password'
}
},
sendPhonenoSmsCode(){
if(!this.loginForm.phoneno){
this.$message.error("手机号码不能为空");
return;
}
if(this.loginForm.phoneno.length !=11 ){
this.$message.error("手机号码必须为11位");
return;
}
var params={
phoneno:this.loginForm.phoneno,
scene:"changePassword"
}
checkPhoneno(this.loginForm.phoneno).then(res0=>{
if(res0.data.tips.isOk==false){
sendSmsCode(params).then(res=>{
if(res.data.tips.isOk){
this.$message.success(res.data.tips.msg);
}else{
this.$message.error(res.data.tips.msg);
}
})
}else{
this.$message.error("手机号码不存在");
}
})
},
handleResetPasswordByPhoneno() {
this.loading = true
this.$refs.loginForm.validate(valid => {
if (valid) {
let params={
newPassword:md5(this.loginForm.password),
phoneno:this.loginForm.phoneno,
smsCode:this.loginForm.smsCode
}
resetPasswordByPhoneno(params).then(res=>{
this.loading = false
if(res.data.tips.isOk){
this.$message.success(res.data.tips.msg);
}else{
this.$message.error(res.data.tips.msg);
}
})
} else {
this.loading = false
return false
}
})
},
deptChecked() {
if( !this.userDeptid){
this.$message.error("请选择登陆的部门")
return
}
let depts=this.myDepts.filter(d=>d.deptid==this.userDeptid)
if(this.$store.state.user.userInfo.deptid!=this.userDeptid){
this.handleLogin();
return;
}else{
this.rolesChecked();
}
},
//角色身份验证
rolesChecked(){
if(this.userInfo.isSuperAdmin){
this.$router.push({ path: '/' });
this.$message.info("欢迎登陆，超级管理员");
}else if(this.userInfo.isPlatformAdmin){
this.$router.push({ path: '/' });
this.$message.info("欢迎登陆，平台管理员");
}else{
this.$router.push({ path: '/' });
this.$message.info("欢迎登陆");
}
},
afterAddBranchSubmit(branch){
this.addBranchFormVisible=false;
this.loading=true
this.$store.dispatch('GetUserInfo').then((res)=>{
this.userDeptid=res.data.userInfo.deptid
this.loading = false;
//角色身份验证
this.rolesChecked();
});
},
afterQRScan() {
// const hash = window.location.hash.slice(1)
// const hashObj = getQueryObject(hash)
// const originUrl = window.location.origin
// history.replaceState({}, '', originUrl)
// const codeMap = {
// wechat: 'code',
// tencent: 'code'
// }
// const codeName = hashObj[codeMap[this.auth_type]]
// if (!codeName) {
// alert('第三方登录失败')
// } else {
// this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
// this.$router.push({ path: '/' })
// })
// }
}
},
created() {
// window.addEventListener('hashchange', this.afterQRScan)
},
destroyed() {
// window.removeEventListener('hashchange', this.afterQRScan)
},
computed: {
...mapGetters([
'myBranchs','myDepts','userInfo','roles'
]),
screenWidth:function(){
return screen.width;
},
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#ef1010;
.logo {
height: 100px;
width: 100%;
// padding: 0 20px;
display: flex;
align-items: left;
justify-content: center;
img {
height: 100%;
}
.logo-text {
display: flex;
align-items: center;
justify-content: center;
color: $light_gray;
.systemName {
font-size: 35px;
font-weight: 400;
color: $light_gray;
text-align: center;
font-weight: bold;
}
}
}
</style>
Write Preview
Loading…
Cancel
Save