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