登录接口以及首页优化
This commit is contained in:
BianLzhaoMin
parent
bb5045f8ef
commit
a9654112b1
|
|
@ -0,0 +1,34 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 登录方法
|
||||
export function login(data) {
|
||||
return request({
|
||||
url: '/auth/login',
|
||||
headers: {
|
||||
isToken: false,
|
||||
repeatSubmit: false,
|
||||
},
|
||||
method: 'post',
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
|
||||
export function isAdmin(data) {
|
||||
return request({
|
||||
url: '/auth/isAdmin',
|
||||
headers: {
|
||||
isToken: false,
|
||||
repeatSubmit: false,
|
||||
},
|
||||
method: 'post',
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
|
||||
// 退出方法
|
||||
export function logout() {
|
||||
return request({
|
||||
url: '/auth/logout',
|
||||
method: 'post',
|
||||
})
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 551 B |
Binary file not shown.
|
After Width: | Height: | Size: 786 B |
Binary file not shown.
|
After Width: | Height: | Size: 875 B |
|
|
@ -4,14 +4,10 @@ import VueRouter from 'vue-router'
|
|||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [
|
||||
// {
|
||||
// path: '/demo',
|
||||
// name: 'index',
|
||||
// component: () => import('../views/index.vue'),
|
||||
// },
|
||||
{
|
||||
path: '/',
|
||||
name: 'index',
|
||||
redirect: '/login',
|
||||
component: () => import('../views/index.vue'),
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// import { login, logout } from '@/api/login'
|
||||
import { getToken, setToken, setExpiresIn, removeToken } from '@/utils/auth'
|
||||
import { login, isAdmin, logout } from '@/api/login'
|
||||
import { getToken, setToken, removeToken } from '@/utils/auth'
|
||||
|
||||
// import { encrypt } from '@/utils/jsencrypt'
|
||||
|
||||
|
|
@ -16,50 +16,37 @@ const user = {
|
|||
|
||||
actions: {
|
||||
// 登录
|
||||
async Login({ commit }, userInfo) {
|
||||
// const username = userInfo.username.trim()
|
||||
// const password = encrypt(userInfo.password)
|
||||
// // const password = userInfo.password
|
||||
// const code = userInfo.code
|
||||
// const uuid = userInfo.uuid
|
||||
// const textCode = userInfo.textCode
|
||||
// return new Promise((resolve, reject) => {
|
||||
// login(username, password, code, uuid, textCode)
|
||||
// .then((res) => {
|
||||
// let data = res.data
|
||||
// localStorage.setItem(
|
||||
// 'isCode',
|
||||
// data.login_user.forceChangePwd || '',
|
||||
// )
|
||||
// setToken(data.access_token)
|
||||
// commit('SET_TOKEN', data.access_token)
|
||||
// localStorage.setItem('token', data.access_token)
|
||||
// setExpiresIn(data.expires_in)
|
||||
// commit('SET_EXPIRES_IN', data.expires_in)
|
||||
// resolve()
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// reject(error)
|
||||
// })
|
||||
// })
|
||||
Login({ commit }, userInfo) {
|
||||
return login(userInfo)
|
||||
.then((res) => {
|
||||
const { access_token } = res.data
|
||||
setToken(access_token)
|
||||
commit('SET_TOKEN', access_token)
|
||||
return res
|
||||
})
|
||||
.catch((error) => Promise.reject(error))
|
||||
},
|
||||
|
||||
IsAdmin({ commit }, userInfo) {
|
||||
console.log(commit)
|
||||
return isAdmin(userInfo)
|
||||
.then((res) => res)
|
||||
.catch((error) => Promise.reject(error))
|
||||
},
|
||||
|
||||
// 退出系统
|
||||
LogOut({ commit, state }) {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// logout(state.token)
|
||||
// .then(() => {
|
||||
// commit('SET_TOKEN', '')
|
||||
// commit('SET_ROLES', [])
|
||||
// commit('SET_PERMISSIONS', [])
|
||||
// removeToken()
|
||||
// localStorage.removeItem('isCode')
|
||||
// resolve()
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// reject(error)
|
||||
// })
|
||||
// })
|
||||
return new Promise((resolve, reject) => {
|
||||
logout(state.token)
|
||||
.then(() => {
|
||||
commit('SET_TOKEN', '')
|
||||
removeToken()
|
||||
resolve()
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ export default {
|
|||
background-size: 100% 100%;
|
||||
transform: scale(1.5);
|
||||
position: relative;
|
||||
z-index: 9999;
|
||||
z-index: 9;
|
||||
|
||||
div {
|
||||
width: 14px;
|
||||
|
|
@ -147,7 +147,7 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: space-around;
|
||||
font-size: 16px;
|
||||
z-index: 9999;
|
||||
z-index: 9;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -20,17 +20,19 @@
|
|||
|
||||
<div class="title-name"> 智慧工地 </div>
|
||||
|
||||
<div class="time-box">
|
||||
<img src="../../assets/image/home/time_icon.png" alt="" />
|
||||
<div>
|
||||
<span class="text">
|
||||
<span>{{ dateYear }}</span>
|
||||
<span>{{ dateWeek }} </span>
|
||||
<span style="font-size: 20px; font-weight: bold">
|
||||
{{ dateDay }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="weather-box">
|
||||
<span>今天天气</span>
|
||||
<img src="../../assets/image/home/sunny.png" alt="" />
|
||||
<span>晴 </span>
|
||||
|
||||
<img src="../../assets/image/home/temperature.png" alt="" />
|
||||
<span> 16 ~ 30℃</span>
|
||||
|
||||
<img
|
||||
src="../../assets/image/home/exit.png"
|
||||
alt=""
|
||||
@click="onHandleLogout"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -297,6 +299,21 @@ export default {
|
|||
this.navShow = false
|
||||
}
|
||||
},
|
||||
|
||||
// 退出登录
|
||||
async onHandleLogout() {
|
||||
this.$confirm('确定退出系统吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
location.href = '/'
|
||||
})
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -328,14 +345,18 @@ export default {
|
|||
height: 83px;
|
||||
background: url('../../assets/image/home/title_bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
background-color: #031837;
|
||||
|
||||
.title-name {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding-bottom: 24px;
|
||||
margin: 0 17%;
|
||||
font-size: 28px;
|
||||
color: #fff;
|
||||
letter-spacing: 4px;
|
||||
|
|
@ -343,6 +364,10 @@ export default {
|
|||
}
|
||||
|
||||
& .time-box {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 12%;
|
||||
transform: translateY(-50%);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -357,6 +382,35 @@ export default {
|
|||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.weather-box {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 12%;
|
||||
transform: translateY(-50%);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
& span:first-child {
|
||||
margin-right: 18px;
|
||||
}
|
||||
& span:nth-child(3) {
|
||||
margin: 0 18px;
|
||||
}
|
||||
& span:nth-child(5) {
|
||||
margin: 0 18px;
|
||||
}
|
||||
& img:nth-child(6) {
|
||||
transform: translateX(160px);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ export default {
|
|||
created() {
|
||||
// const { params, query } = this.$route
|
||||
// const { path } = params
|
||||
this.$router.replace({ path: '/login' })
|
||||
this.$router.replace({ path: `${this.$router.options.base}/login` })
|
||||
},
|
||||
render: function (h) {
|
||||
return h() // avoid warning message
|
||||
|
|
|
|||
|
|
@ -3,17 +3,16 @@
|
|||
<div class="login-container" ref="appRef">
|
||||
<div class="login-form">
|
||||
<h3>智慧工地</h3>
|
||||
|
||||
<div class="form-container">
|
||||
<el-form>
|
||||
<el-form-item>
|
||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules">
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
placeholder="请输入用户名"
|
||||
v-model="loginForm.username"
|
||||
prefix-icon="el-icon-user-solid"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
prefix-icon="el-icon-lock"
|
||||
placeholder="请输入密码"
|
||||
|
|
@ -27,7 +26,9 @@
|
|||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-checkbox> 记住密码 </el-checkbox>
|
||||
<el-checkbox v-model="rememberPassWord">
|
||||
记住密码
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
|
|
@ -46,22 +47,126 @@
|
|||
|
||||
<script>
|
||||
import drawMixin from '../../utils/drawMixin'
|
||||
import Cookies from 'js-cookie'
|
||||
export default {
|
||||
mixins: [drawMixin],
|
||||
data() {
|
||||
return {
|
||||
loginForm: {
|
||||
username: '',
|
||||
code: '',
|
||||
loginType: 'USERNAME_PASSWORD',
|
||||
password: '',
|
||||
phoneUuid: '',
|
||||
username: '',
|
||||
uuid: '',
|
||||
verificationCode: '',
|
||||
},
|
||||
rememberPassWord: false,
|
||||
loginRules: {
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
message: '请输入您的账号',
|
||||
},
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
message: '请输入您的密码',
|
||||
},
|
||||
],
|
||||
},
|
||||
isAdmin: false, // 是否为超级管理员
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 登录
|
||||
onClickLogin() {
|
||||
console.log('登录')
|
||||
this.$refs.loginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
|
||||
this.$router.push('/home')
|
||||
this.$store
|
||||
.dispatch('IsAdmin', this.loginForm)
|
||||
.then((res) => {
|
||||
if (res.data) {
|
||||
this.isAdmin = res.data
|
||||
this.$message.success(
|
||||
'检测到您是超级管理账号,需进行手机检验',
|
||||
)
|
||||
} else {
|
||||
if (this.rememberPassWord) {
|
||||
Cookies.set(
|
||||
'username',
|
||||
this.loginForm.username,
|
||||
{
|
||||
expires: 30,
|
||||
},
|
||||
)
|
||||
Cookies.set(
|
||||
'password',
|
||||
this.loginForm.password,
|
||||
{
|
||||
expires: 30,
|
||||
},
|
||||
)
|
||||
Cookies.set(
|
||||
'rememberMe',
|
||||
this.rememberPassWord,
|
||||
{
|
||||
expires: 30,
|
||||
},
|
||||
)
|
||||
} else {
|
||||
Cookies.remove('username')
|
||||
Cookies.remove('password')
|
||||
Cookies.remove('rememberMe')
|
||||
}
|
||||
this.$store
|
||||
.dispatch('Login', this.loginForm)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
if (res.isLogin) {
|
||||
this.$modal
|
||||
.confirm(
|
||||
'账号已在其他地方登录是否继续登录！！！！',
|
||||
)
|
||||
.then(function () {})
|
||||
.then(() => {
|
||||
this.loading = false
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
} else {
|
||||
this.$router.push({
|
||||
path: '/home',
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getCookie() {
|
||||
const username = Cookies.get('username')
|
||||
const password = Cookies.get('password')
|
||||
const rememberMe = Cookies.get('rememberMe')
|
||||
this.loginForm.username = username || ''
|
||||
this.loginForm.password = password || ''
|
||||
this.rememberPassWord = rememberMe === 'true'
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getCookie()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -70,7 +175,6 @@ export default {
|
|||
.login-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background: url('../../assets/image/login/login_bg.png') no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
|
|
@ -82,7 +186,6 @@ export default {
|
|||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transform-origin: left top;
|
||||
// overflow: hidden;
|
||||
|
||||
.login-form {
|
||||
width: 604px;
|
||||
|
|
@ -91,11 +194,7 @@ export default {
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, -50%);
|
||||
// transform-origin: left top;
|
||||
|
||||
& h3 {
|
||||
text-align: center;
|
||||
letter-spacing: 2px;
|
||||
|
|
@ -114,12 +213,12 @@ export default {
|
|||
}
|
||||
|
||||
.el-form {
|
||||
width: 70%;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
|
||||
::v-deep .el-checkbox__label {
|
||||
color: #f1e2e2;
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -127,29 +226,28 @@ export default {
|
|||
|
||||
::v-deep .el-input__inner {
|
||||
background-color: transparent;
|
||||
height: 46px;
|
||||
height: 38px;
|
||||
color: #f1e2e2;
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
border: 1px solid #0a76dd;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox__inner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: transparent;
|
||||
|
||||
// border: 1px solid #f1e2e2;
|
||||
}
|
||||
::v-deep .el-checkbox__inner::after {
|
||||
height: 11px;
|
||||
left: 9px;
|
||||
height: 8px;
|
||||
left: 6px;
|
||||
top: 2px;
|
||||
}
|
||||
.el-button {
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
::v-deep .el-input__icon {
|
||||
line-height: 46px;
|
||||
font-size: 18px;
|
||||
line-height: 38px;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,9 +10,8 @@ module.exports = {
|
|||
transpileDependencies: [],
|
||||
publicPath:
|
||||
process.env.VUE_APP_ENV === 'production' ? '/smartSiteScreen' : '/',
|
||||
// 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
|
||||
|
||||
outputDir: 'dist',
|
||||
// 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
|
||||
assetsDir: 'static',
|
||||
// 是否开启eslint保存检测，有效值：ture | false | 'error'
|
||||
lintOnSave: process.env.NODE_ENV === 'development',
|
||||
|
|
@ -25,7 +24,7 @@ module.exports = {
|
|||
open: true,
|
||||
proxy: {
|
||||
[process.env.VUE_APP_BASE_API]: {
|
||||
target: 'http://example.com',
|
||||
target: 'http://192.168.0.60:38080',
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
['^' + process.env.VUE_APP_BASE_API]: '',
|
||||
|
|
|
|||
Loading…
Reference in New Issue