Skip to content

O
offical_web
Commit f59126f0 by qinjianhui
Options

feat: 个人中心

parent 445d37bd
Showing with 148 additions and 34 deletions
src/assets/images/logout.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1678692281445" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4160" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M867.5 470.8L758 365c-18.2-17-19.2-45.5-2.3-63.7 17-18.2 45.5-19.2 63.7-2.3 0.4 0.4 0.9 0.8 1.3 1.2l187.6 181.5c17.9 17.3 18.3 45.9 1 63.8L821.6 739.2c-18.1 17.1-46.6 16.3-63.7-1.7-16.1-17-16.5-43.5-0.9-61l112.1-115.6H422.3c-24.9 0-45.1-20.2-45.1-45.1 0-24.9 20.2-45.1 45.1-45.1l445.2 0.1zM92.1 917.3h555.4c24.9 1.1 44.1 22.1 43 47-1 23.3-19.7 42-43 43H47.1c-24.9 0-45-20.1-45.1-45V61.7c0-24.9 20.2-45.1 45.1-45.1h600.4c24.9 0 45.1 20.2 45.1 45.1 0 24.9-20.2 45.1-45.1 45.1H92l0.1 810.5z" p-id="4161"></path></svg>
\ No newline at end of file
src/components/head.vue
...@@ -19,7 +19,16 @@ ...@@ -19,7 +19,16 @@
</li> </li>
</ul> </ul>
</nav> </nav>
<div class="right_btn"> <div class="user-info" v-if="!userInfo">
<div class="user-msg">
<span class="user-name">{{ '小溪' }}</span>
<span>欢迎您</span>
</div>
<div class="logout" title="退出登录" @click="logout">
<img src="../assets/images/logout.png"/>
</div>
</div>
<div class="right_btn" v-else>
<!-- <el-button type="primary" size="mini" @click="login">登录</el-button> <!-- <el-button type="primary" size="mini" @click="login">登录</el-button>
<el-button size="mini" @click="register">注册</el-button> --> <el-button size="mini" @click="register">注册</el-button> -->
<div class="user-operate"> <div class="user-operate">
...@@ -34,6 +43,7 @@ ...@@ -34,6 +43,7 @@
</template> </template>
<script> <script>
import { mapMutations, mapState } from 'vuex'
import headerNavMobile from './headerNavMobile.vue' import headerNavMobile from './headerNavMobile.vue'
export default { export default {
...@@ -58,11 +68,13 @@ export default { ...@@ -58,11 +68,13 @@ export default {
} }
}, },
computed: { computed: {
...mapState(['userInfo']),
active() { active() {
return this.$route.path return this.$route.path
}, },
}, },
methods: { methods: {
...mapMutations(['setUserInfo']),
changePath() { changePath() {
this.scrollParent().scrollTo({ this.scrollParent().scrollTo({
behavior: 'smooth', behavior: 'smooth',
...@@ -78,6 +90,11 @@ export default { ...@@ -78,6 +90,11 @@ export default {
freeTrial() { freeTrial() {
window.open('https://demo.jomalls.com') window.open('https://demo.jomalls.com')
}, },
logout() {
localStorage.removeItem('userInfo')
this.setUserInfo(undefined)
this.$router.push('/login')
},
}, },
} }
</script> </script>
...@@ -127,12 +144,31 @@ export default { ...@@ -127,12 +144,31 @@ export default {
padding: 0 20px; padding: 0 20px;
color: #fff; color: #fff;
} }
.right_btn { .right_btn,
.user-info {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: auto; margin-left: auto;
} }
.user-msg {
margin-right: 50px;
}
.user-name {
margin-right: 10px;
}
.logout img {
width: 20px;
vertical-align: middle;
cursor: pointer;
}
.user-info {
color: #fff;
}
.login-btn { .login-btn {
position: relative; position: relative;
margin-right: 20px; margin-right: 20px;
......
src/main.js
...@@ -19,6 +19,12 @@ import './assets/css/common.css' ...@@ -19,6 +19,12 @@ import './assets/css/common.css'
import './assets/css/index.css' import './assets/css/index.css'
import './styles/index.scss' import './styles/index.scss'
const isMobile = () => window.innerWidth <= 1100
Vue.util.defineReactive(Vue.prototype, '$isMobile', isMobile())
window.addEventListener('resize', () => {
Vue.prototype.$isMobile = isMobile()
})
new Vue({ new Vue({
store, store,
......
src/store/index.js
...@@ -6,8 +6,12 @@ export default new Vuex.Store({ ...@@ -6,8 +6,12 @@ export default new Vuex.Store({
modules: { modules: {
}, },
state: { state: {
userInfo: JSON.parse(JSON.stringify(localStorage.getItem('userInfo'))) || undefined,
}, },
mutations: { mutations: {
setUserInfo(state, profile) {
state.userInfo = profile
}
}, },
actions: { actions: {
}, },
......
src/views/contact.vue
<template> <template>
<div class="login_bg"> <div class="login_bg">
<div class="login_content"> <div class="contact-header">
<h1 <div class="header-image">
style=" <img src="../assets/logo.png" height="40px" />
text-align: center; </div>
color: #fff; <div class="user-info">
font-size: 50px; <div class="user-msg">
line-height: 100px; <span class="user-name">{{ '小溪' }}</span>
font-family: '微软雅黑'; <span>欢迎您</span>
"> </div>
您尚未开通erp权限,请联系您的商务经理 <div class="logout" title="退出登录" @click="logout">
</h1> <img src="../assets/images/logout.png" />
<el-button </div>
style=" </div>
text-align: center;
font-size: 30px;
width: 160px;
height: 60px;
margin-left: 300px;
margin-top: 30px;
border-radius: 15px;
"
type="success"
@click="goBack">
返回首页
</el-button>
</div> </div>
<div class="login_content" v-if="userInfo">
<div class="no-authority">
<h1
style="
text-align: center;
color: #fff;
font-size: 50px;
line-height: 100px;
font-family: '微软雅黑';
">
您尚未开通erp权限,请联系您的商务经理
</h1>
<el-button
style="
text-align: center;
font-size: 30px;
width: 160px;
height: 60px;
margin-left: 300px;
margin-top: 30px;
border-radius: 15px;
"
type="success"
@click="goBack">
返回首页
</el-button>
</div>
</div>
<div class="contain" v-else></div>
</div> </div>
</template> </template>
<script> <script>
import { mapState } from 'vuex'
export default { export default {
name: 'register', name: 'register',
components: {}, components: {},
data() { data() {
return {} return {}
}, },
computed: {
...mapState(['userInfo']),
},
methods: { methods: {
goBack() { goBack() {
this.$router.push('/') this.$router.push('/')
}, },
logout() {},
}, },
} }
</script> </script>
...@@ -47,16 +70,55 @@ export default { ...@@ -47,16 +70,55 @@ export default {
.login_bg { .login_bg {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; display: flex;
background: url(../assets/contact.jpg) center / cover no-repeat; flex-direction: column;
} }
.login_content { .login_content {
flex: 1;
background: url(../assets/contact.jpg) center / cover no-repeat;
position: relative;
}
.contact-header {
display: flex;
align-items: center;
background-color: #182633;
height: 60px;
padding: 0 100px;
justify-content: space-between;
}
.user-msg {
color: #fff;
}
.user-info {
display: flex;
align-items: center;
}
.logout img {
width: 20px;
vertical-align: middle;
cursor: pointer;
}
.user-msg {
margin-right: 50px;
}
.user-name {
margin-right: 10px;
}
.no-authority {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 60%; transform: translateY(-50%);
transform: translate(-50%, -50%); left: 40%;
box-sizing: border-box; }
background-position: top right, center;
background-repeat: no-repeat; .contain {
flex: 1;
} }
</style> </style>
src/views/login.vue
...@@ -173,6 +173,7 @@ ...@@ -173,6 +173,7 @@
<script> <script>
import { post, get } from '../utils/axios' import { post, get } from '../utils/axios'
import md5 from 'js-md5' import md5 from 'js-md5'
import { mapMutations } from 'vuex'
export default { export default {
name: 'login', name: 'login',
components: {}, components: {},
...@@ -217,6 +218,7 @@ export default { ...@@ -217,6 +218,7 @@ export default {
}, },
}, },
methods: { methods: {
...mapMutations(['setUserInfo']),
async verCode() { async verCode() {
try { try {
await new Promise((resolve, reject) => { await new Promise((resolve, reject) => {
...@@ -291,6 +293,8 @@ export default { ...@@ -291,6 +293,8 @@ export default {
password: passwordHash, password: passwordHash,
}).then((res) => { }).then((res) => {
if (res.code === 200) { if (res.code === 200) {
localStorage.setItem('userInfo', res.data)
this.setUserInfo(res.data)
this.ruleForm = {} this.ruleForm = {}
this.$router.push('/contact') this.$router.push('/contact')
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment