williamet/jiace-web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

首页初始化

Browse Source
This commit is contained in:
熊丽君
2021-08-02 14:40:12 +08:00
parent fa85ca8a08
commit af3e7ee763
11 changed files with 415 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/App.vue
View File

@ -5,7 +5,13 @@
</template>
<script>
export default {
name: 'App'
}
export default {
name: 'App'
};
</script>
<style lang="scss">
.content {
width: 1400px;
margin: 0 auto;
}
</style>

26
src/api/login.js
View File

@ -1,18 +1,38 @@
import request from '@/utils/request';
// 登录方法
export function login(username, password, code) {
export function login(username, password, newPassword) {
const data = {
username,
password,
code
newPassword
};
return request({
url: '/admin/login',
url: '/mobile/login',
method: 'post',
data: data
});
}
// 注册
export function register(username, password, newPassword) {
const data = {
username,
password,
newPassword
};
return request({
url: '/mobile/register',
method: 'post',
data: data
});
}
// 获取验证码
export function getAuthCode(params) {
return request({
url: '/mobile/getAuthCode',
params
});
}
// 获取用户详细信息
export function getInfo() {

BIN
src/assets/image/01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 121 KiB

BIN
src/assets/image/index_welcome.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 135 KiB

BIN
src/assets/image/login-bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 268 KiB

After

Width:  |  Height:  |  Size: 50 KiB

BIN
src/assets/image/toubu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 562 KiB

BIN
src/assets/login.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

9
src/router/index.js
View File

@ -24,11 +24,14 @@ Vue.use(Router);
// 公共路由
export const constantRoutes = [
{
path: '/index',
path: '',
component: resolve => require(['@/views/index'], resolve),
// component: () => import("@/views/login/index"),
// hidden: true
name: 'index'
},
{
path: '/login',
component: resolve => require(['@/views/login'], resolve),
name: 'login'
}
// {
// path: '/redirect',

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

@ -1,5 +1,5 @@
import { login, logout, getInfo } from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { login, logout, getInfo } from '@/api/login';
import { getToken, setToken, removeToken } from '@/utils/auth';
const user = {
state: {
@ -12,84 +12,110 @@ const user = {
mutations: {
SET_TOKEN: (state, token) => {
state.token = token
state.token = token;
},
SET_NAME: (state, name) => {
state.name = name
state.name = name;
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
state.avatar = avatar;
},
SET_ROLES: (state, roles) => {
state.roles = roles
state.roles = roles;
},
SET_PERMISSIONS: (state, permissions) => {
state.permissions = permissions
state.permissions = permissions;
}
},
actions: {
// 登录
Login({ commit }, userInfo) {
const username = userInfo.username.trim()
const password = userInfo.password
const code = userInfo.code
const username = userInfo.username.trim();
const password = userInfo.password;
const newPassword = userInfo.newPassword;
return new Promise((resolve, reject) => {
login(username, password, code).then(res => {
setToken(res.data.token)
commit('SET_TOKEN', res.data.token)
resolve()
}).catch(error => {
reject(error)
})
})
login(username, password, newPassword)
.then(res => {
setToken(res.data.token);
commit('SET_TOKEN', res.data.token);
resolve();
})
.catch(error => {
reject(error);
});
});
},
// 注册
Register({ commit }, userInfo) {
const username = userInfo.username.trim();
const password = userInfo.password;
const newPassword = userInfo.newPassword;
return new Promise((resolve, reject) => {
register(username, password, newPassword)
.then(res => {
setToken(res.data.token);
commit('SET_TOKEN', res.data.token);
resolve();
})
.catch(error => {
reject(error);
});
});
},
// 获取用户信息
GetInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo(state.token).then(res => {
const user = res.data
const avatar = !res.data.icon ? require("@/assets/image/profile.jpg") : process.env.VUE_APP_BASE_API + user.icon;
if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
commit('SET_ROLES', res.roles)
// commit('SET_PERMISSIONS', res.permissions)
} else {
commit('SET_ROLES', ['ROLE_DEFAULT'])
}
commit('SET_NAME', user.userName)
commit('SET_AVATAR', avatar)
resolve(res)
}).catch(error => {
reject(error)
})
})
getInfo(state.token)
.then(res => {
const user = res.data;
const avatar = !res.data.icon
? require('@/assets/image/profile.jpg')
: process.env.VUE_APP_BASE_API + user.icon;
if (res.roles && res.roles.length > 0) {
// 验证返回的roles是否是一个非空数组
commit('SET_ROLES', res.roles);
// commit('SET_PERMISSIONS', res.permissions)
} else {
commit('SET_ROLES', ['ROLE_DEFAULT']);
}
commit('SET_NAME', user.userName);
commit('SET_AVATAR', avatar);
resolve(res);
})
.catch(error => {
reject(error);
});
});
},
// 退出系统
LogOut({ commit, state }) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
commit('SET_PERMISSIONS', [])
removeToken()
resolve()
}).catch(error => {
reject(error)
})
})
logout(state.token)
.then(() => {
commit('SET_TOKEN', '');
commit('SET_ROLES', []);
commit('SET_PERMISSIONS', []);
removeToken();
resolve();
})
.catch(error => {
reject(error);
});
});
},
// 前端 登出
FedLogOut({ commit }) {
return new Promise(resolve => {
commit('SET_TOKEN', '')
removeToken()
resolve()
})
commit('SET_TOKEN', '');
removeToken();
resolve();
});
}
}
}
};
export default user
export default user;

59
src/views/index.vue
View File

@ -1,6 +1,25 @@
<template>
<div class="dashboard-editor-container">
home
<div class="index_page">
<el-container>
<div class="img_box">
<img src="@/assets/image/toubu.png" alt="" />
</div>
<!-- 整体宽度 -->
<div class="content">
<!-- 头部 -->
<div class="header">
<div class="login">
<el-button type="text" @click="aaa">登录</el-button>
<i class="mark">|</i>
<el-button type="text" @click="aaa">注册</el-button>
</div>
</div>
</div>
<!-- <el-footer>
<el-button >登录</el-button>
<el-button v-for="item in 30" :key="item">注册</el-button>
</el-footer> -->
</el-container>
</div>
</template>
@ -10,11 +29,45 @@ export default {
data() {
return {};
},
methods: {}
methods: {
aaa() {
this.$router.push({ path: '/login' });
}
}
};
</script>
<style lang="scss" scoped>
.index_page {
padding-top: 200px;
.img_box {
width: 100%;
height: 750px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.header {
height: 206px;
background-image: url(../assets/image/01.png);
.login {
text-align: right;
padding-right: 100px;
.el-button {
font-size: 16px;
color: #4097e7;
}
.mark {
width: 1px;
color: #dcdcdc;
margin: 0 14px;
}
}
}
}
@media (max-width: 1024px) {
.chart-wrapper {
padding: 8px;

294
src/views/login.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="login">
<div class="login-title">
<!-- <img src="../assets/image/logo.png" alt="" /> -->
<!-- <span>嘉策服务平台</span> -->
</div>
<el-form
<!-- <div class="login-title">
<img src="../assets/image/logo.png" alt="" />
<span>嘉策服务平台</span>
</div> -->
<!-- <el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
@ -60,8 +60,109 @@
</el-button>
</el-form-item>
</div>
</el-form>
</el-form> -->
<!-- <div class="login-form-bg"></div> -->
<div class="my-box">
<div class="my-left">
<div class="bg-img">
<img src="@/assets/login.png" alt="" />
</div>
</div>
<div class="my-right">
<div style="min-width:360px;max-width:360px;padding-bottom: 55px;">
<div class="m-title">欢迎登录</div>
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
auto-complete="on"
label-position="left"
>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
type="text"
auto-complete="off"
placeholder="手机号"
>
<svg-icon
slot="prefix"
icon-class="user"
class="el-input__icon input-icon"
/>
</el-input>
</el-form-item>
<el-form-item prop="password" v-if="mode">
<el-input
v-model="loginForm.password"
type="password"
auto-complete="off"
placeholder="密码"
@keyup.enter.native="handleLogin"
>
<svg-icon
slot="prefix"
icon-class="password"
class="el-input__icon input-icon"
/>
</el-input>
</el-form-item>
<el-form-item prop="code" class="code-input" v-if="!mode">
<el-input
v-model="loginForm.password"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter.native="handleLogin"
>
<svg-icon
slot="prefix"
icon-class="validCode"
class="el-input__icon input-icon"
/>
</el-input>
<div class="login-code">
<el-button @click="getCode" type="primary" :disabled="!show">
获取验证码
<span v-show="!show" class="count">({{ count }}s)</span>
</el-button>
</div>
</el-form-item>
<div
class="check-box"
:class="mode ? '' : 'flex-end'"
style="padding:0 0 15px"
>
<el-checkbox v-if="mode">记住密码</el-checkbox>
<el-button type="text" @click="mode = false" v-if="mode"
>验证码登录</el-button
>
<el-button type="text" @click="mode = true" v-else
>密码登录</el-button
>
</div>
<el-button
id="login_btn"
:loading="loading"
type="primary"
style="width:100%"
@click.native.prevent="handleLogin"
>登录</el-button
>
</el-form>
<el-checkbox style="padding:15px 0 0"
>我已阅读并同意<el-button type="text"
>《用户协议》</el-button
></el-checkbox
>
<div style="color:#666;font-size:16px">
新用户通过手机验证码登录自动注册账号
</div>
</div>
</div>
</div>
<!-- 底部 -->
<!-- <div class="el-login-footer">
<span>版权所有：嘉策</span>
@ -72,11 +173,17 @@
<script>
import Cookies from 'js-cookie';
import { encrypt, decrypt } from '@/utils/jsencrypt';
import { getAuthCode } from '@/api/login';
export default {
name: 'Login',
data() {
return {
mode: true,
TIME_COUNT: 60,
show: true,
count: '', // 初始化次数
timer: null,
loginForm: {
username: '',
password: '',
@ -115,6 +222,28 @@ export default {
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
};
},
getCode() {
this.$refs.loginForm.validate(valid => {
if (valid) {
if (!this.timer) {
this.count = this.TIME_COUNT;
this.show = false;
getAuthCode({ phone: this.loginForm.username }).then(res => {
console.log(res);
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= this.TIME_COUNT) {
this.count--;
} else {
this.show = true;
clearInterval(this.timer); // 清除定时器
this.timer = null;
}
}, 1000);
});
}
}
});
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
@ -132,14 +261,26 @@ export default {
Cookies.remove('password');
Cookies.remove('rememberMe');
}
this.$store
.dispatch('Login', this.loginForm)
.then(() => {
this.$router.push({ path: this.redirect || '/' });
})
.catch(() => {
this.loading = false;
});
if (this.mode) {
this.$store
.dispatch('Login', this.loginForm)
.then(() => {
this.$router.push({ path: this.redirect || '/' });
})
.catch(() => {
this.loading = false;
});
} else {
this.$store
.dispatch('Register', this.loginForm)
.then(() => {
// this.$router.push({ path: this.redirect || '/' });
this.$router.go(-1);
})
.catch(() => {
this.loading = false;
});
}
}
});
}
@ -186,35 +327,35 @@ $loginForm: 383px;
.col {
color: #209cff;
}
.login-form {
border-radius: 10px;
background: #ffffff;
width: 520px;
min-height: $loginForm;
padding: 20px;
padding-top: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9;
// bottom: 0;
// margin: auto;
.el-input {
height: 38px;
input {
height: 38px;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
}
.login-info {
padding: 0 100px;
}
}
// .login-form {
// border-radius: 10px;
// background: #ffffff;
// width: 520px;
// min-height: $loginForm;
// padding: 20px;
// padding-top: 10px;
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
// z-index: 9;
// // bottom: 0;
// // margin: auto;
// .el-input {
// height: 38px;
// input {
// height: 38px;
// }
// }
// .input-icon {
// height: 39px;
// width: 14px;
// margin-left: 2px;
// }
// .login-info {
// padding: 0 100px;
// }
// }
.login-form-bg {
border-radius: 6px;
position: absolute;
@ -232,13 +373,7 @@ $loginForm: 383px;
color: #bfbfbf;
}
.login-code {
width: 33%;
height: 38px;
float: right;
img {
cursor: pointer;
vertical-align: middle;
}
margin-left: 10px;
}
.el-login-footer {
height: 40px;
@ -255,6 +390,65 @@ $loginForm: 383px;
.login-code-img {
height: 38px;
}
.my-box {
min-height: 454px;
display: flex;
border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.04);
border-radius: 10px;
overflow: hidden;
.my-left {
min-width: 500px;
.bg-img {
height: 100%;
background-color: #3494ff;
display: flex;
justify-content: center;
align-items: center;
img {
width: 405px;
height: 325px;
}
}
}
.my-right {
min-width: 550px;
display: flex;
justify-content: center;
.m-title {
color: #333;
font-size: 26px;
font-weight: 700;
text-align: center;
margin: 55px auto 45px;
}
.el-form {
.el-form-item {
.el-form-item__content {
display: flex;
}
}
.check-box {
padding: 0 5px;
display: flex;
justify-content: space-between;
}
}
}
}
.flex-end {
justify-content: flex-end !important;
}
// .code-input {
// .el-form-item__content {
// display: flex;
// justify-content: space-between;
// }
// }
</style>
<style>
.el-input__prefix {