parent
161b86e7d0
commit
69010141d5
19 changed files with 1052 additions and 1018 deletions
File diff suppressed because it is too large
Load Diff
@ -1,120 +1,131 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="left"> |
||||
<div class="inner"> |
||||
<div class="text-center"> |
||||
<img :src="avatar" class="avatar" /> |
||||
<el-upload :headers="{token}" :action="this.api.uploadUserAvatars" name="file" :limit="10" :show-file-list="false" :on-success="changeAvatar"> |
||||
<el-button type="text" size="small">点击更换头像</el-button> |
||||
</el-upload> |
||||
</div> |
||||
|
||||
<ul class="menu"> |
||||
<li v-for="item in typeList" :key="item.index" :class="{active: item.index == active}"> |
||||
{{ item.title }} |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div class="right"> |
||||
<info ref="info" @updateStatus="updateStatus"></info> |
||||
<div class="wrap"> |
||||
<div class="left"> |
||||
<div class="inner"> |
||||
<div class="text-center"> |
||||
<img :src="avatar" |
||||
class="avatar" /> |
||||
<el-upload :headers="{token}" |
||||
:action="this.api.uploadUserAvatars" |
||||
name="file" |
||||
:limit="10" |
||||
:show-file-list="false" |
||||
:on-success="changeAvatar"> |
||||
<el-button type="text" |
||||
size="small">点击更换头像</el-button> |
||||
</el-upload> |
||||
</div> |
||||
|
||||
<ul class="menu"> |
||||
<li v-for="item in typeList" |
||||
:key="item.index" |
||||
:class="{active: item.index == active}"> |
||||
{{ item.title }} |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div class="right"> |
||||
<info ref="info" |
||||
@updateStatus="updateStatus"></info> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Setting from '@/setting' |
||||
import { mapState,mapActions } from 'vuex' |
||||
import { mapState, mapActions } from 'vuex' |
||||
import info from './info' |
||||
import util from '@/libs/util' |
||||
export default { |
||||
data() { |
||||
return { |
||||
token: util.local.get(Setting.tokenKey), |
||||
typeList: [ |
||||
{ |
||||
index: '1', |
||||
title: '用户信息' |
||||
} |
||||
], |
||||
active: '1', |
||||
edited: false |
||||
}; |
||||
}, |
||||
components: { info }, |
||||
computed: { |
||||
...mapState('user', [ |
||||
'avatar' |
||||
]), |
||||
}, |
||||
// 离开的时候判断是否有保存更改的信息,没有则拦截并提示 |
||||
beforeRouteLeave(to, from, next) { |
||||
console.log("🚀 ~ file: index.vue:53 ~ beforeRouteLeave ~ this.edited", this.edited) |
||||
|
||||
if(this.edited){ |
||||
this.$confirm(`您所更改的内容未更新，是否更新？`, '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.$refs.info.save() |
||||
next() |
||||
}).catch(() => { |
||||
next() |
||||
}) |
||||
}else{ |
||||
next() |
||||
data () { |
||||
return { |
||||
token: util.local.get(Setting.tokenKey), |
||||
typeList: [ |
||||
{ |
||||
index: '1', |
||||
title: '用户信息' |
||||
} |
||||
], |
||||
active: '1', |
||||
edited: false |
||||
}; |
||||
}, |
||||
components: { info }, |
||||
computed: { |
||||
...mapState('user', [ |
||||
'avatar' |
||||
]), |
||||
}, |
||||
// 离开的时候判断是否有保存更改的信息,没有则拦截并提示 |
||||
beforeRouteLeave (to, from, next) { |
||||
console.log("🚀 ~ file: index.vue:53 ~ beforeRouteLeave ~ this.edited", this.edited) |
||||
|
||||
if (this.edited) { |
||||
this.$confirm(`您所更改的内容未更新，是否更新？`, '提示', { |
||||
type: 'warning', |
||||
closeOnClickModal: false |
||||
}).then(() => { |
||||
this.$refs.info.save() |
||||
next() |
||||
}).catch(() => { |
||||
next() |
||||
}) |
||||
} else { |
||||
next() |
||||
} |
||||
}, |
||||
mounted () { |
||||
|
||||
}, |
||||
methods: { |
||||
...mapActions('user', [ |
||||
'setAvatar' |
||||
]), |
||||
changeAvatar (res) { |
||||
this.setAvatar(res.message) |
||||
}, |
||||
mounted() { |
||||
|
||||
}, |
||||
methods: { |
||||
...mapActions('user', [ |
||||
'setAvatar' |
||||
]), |
||||
changeAvatar(res) { |
||||
this.setAvatar(res.message) |
||||
}, |
||||
updateStatus(status){ |
||||
this.edited = status |
||||
} |
||||
updateStatus (status) { |
||||
this.edited = status |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.main .wrap{ |
||||
.main .wrap { |
||||
display: flex; |
||||
width: $min-width; |
||||
padding: 12px 0 0; |
||||
.left{ |
||||
.left { |
||||
margin-right: 12px; |
||||
background-color: #fff; |
||||
box-shadow: 2px 0px 6px 0px #EEEEEE; |
||||
.inner{ |
||||
box-shadow: 2px 0px 6px 0px #eeeeee; |
||||
.inner { |
||||
width: 170px; |
||||
padding: 20px 0; |
||||
} |
||||
.avatar{ |
||||
.avatar { |
||||
width: 80px; |
||||
height: 80px; |
||||
border-radius: 50%; |
||||
} |
||||
.menu{ |
||||
.menu { |
||||
margin-top: 32px; |
||||
li{ |
||||
li { |
||||
padding: 0 20px; |
||||
color: #303133; |
||||
font-size: 14px; |
||||
line-height: 38px; |
||||
cursor: pointer; |
||||
&.active{ |
||||
&.active { |
||||
color: #fff; |
||||
background-color: #006EFF; |
||||
background-color: #006eff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.right{ |
||||
.right { |
||||
flex: 1; |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue