wangqing
5 years ago
10 changed files with 254 additions and 35 deletions
@ -0,0 +1,200 @@ |
|||
<template> |
|||
<div class="member-container"> |
|||
<el-card class="member-box-card"> |
|||
<div class="member-info-view"> |
|||
<p class="title pl-5">账号信息</p> |
|||
<el-divider /> |
|||
<div v-if="userInfo" class="account-info-view"> |
|||
<table> |
|||
<tbody> |
|||
<tr> |
|||
<td width="80" style="text-align: right;">用户名：</td> |
|||
<td> |
|||
{{ userInfo.name }} |
|||
<el-link type="primary" @click="editDialogVisible=true">修改</el-link> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td width="80" style="text-align: right;">账号邮箱：</td> |
|||
<td> |
|||
{{ userInfo.email }} |
|||
<el-link type="primary">绑定</el-link> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td width="80" style="text-align: right;">密码：</td> |
|||
<td> |
|||
****** |
|||
<el-link type="primary">修改</el-link> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td width="80" style="text-align: right;">手机号：</td> |
|||
<td> |
|||
{{ userInfo.phoneNumber }} |
|||
<el-link type="primary">修改</el-link> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<div class="account-avatar-view"> |
|||
<my-upload v-model="showUploadAvatar" |
|||
field="file" |
|||
:width="300" |
|||
:height="300" |
|||
:url="getUploadUrl()" |
|||
:headers="getUploadHeader()" |
|||
img-format="png" |
|||
@crop-upload-success="cropUploadSuccess" |
|||
/> |
|||
<el-avatar |
|||
style="width: 100px; height: 100px;" |
|||
:src="userInfo.avatar" |
|||
@click.native="showUploadAvatar=true" |
|||
/> |
|||
<div style="margin-left: 10px; margin-top: 5px;"> |
|||
<el-button @click.native="showUploadAvatar=true">更换头像</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<p class="title pl-5">第三方账号</p> |
|||
<el-divider /> |
|||
<div v-if="userInfo" class="account-info-view"> |
|||
<table> |
|||
<tbody> |
|||
<tr> |
|||
<td width="80" style="text-align: right;">smile：</td> |
|||
<td> |
|||
{{ userInfo.name }} |
|||
<el-link type="primary" @click="editDialogVisible=true">修改</el-link> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td width="80" style="text-align: right;">smile：</td> |
|||
<td> |
|||
{{ userInfo.name }} |
|||
<el-link type="primary" @click="editDialogVisible=true">修改</el-link> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
<el-dialog |
|||
title="提示" |
|||
:visible.sync="editDialogVisible" |
|||
width="30%" |
|||
center |
|||
> |
|||
<el-form ref="form" :model="userInfo" label-width="80px"> |
|||
<el-form-item label="新用户名"> |
|||
<el-input v-model="userInfo.name" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="editDialogVisible = false">取 消</el-button> |
|||
<el-button type="primary" |
|||
@click="()=>{this.editDialogVisible = false;this.updateUserHandle()}" |
|||
>确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
<el-dialog |
|||
title="提示" |
|||
:visible.sync="pwdDialogVisible" |
|||
width="30%" |
|||
center |
|||
> |
|||
<el-form ref="form" :model="userInfo" label-width="80px"> |
|||
<el-form-item label="新用户名"> |
|||
<el-input v-model="userInfo.name" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="pwdDialogVisible = false">取 消</el-button> |
|||
<el-button type="primary" |
|||
@click="()=>{this.pwdDialogVisible = false;this.updateUserHandle()}" |
|||
>确 定</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import myUpload from 'vue-image-crop-upload' |
|||
|
|||
export default { |
|||
name: 'Member', |
|||
components: { |
|||
myUpload |
|||
}, |
|||
data() { |
|||
return { |
|||
editDialogVisible: false, |
|||
userInfo: {}, |
|||
showUploadAvatar: false |
|||
} |
|||
}, |
|||
created() { |
|||
this.$api.get('/user/current/detail').then(res => { |
|||
if (res.data) { |
|||
this.userInfo = res.data |
|||
} |
|||
}) |
|||
}, |
|||
methods: { |
|||
getUploadHeader() { |
|||
return { |
|||
'token': this.$store.getters['user/isLogin'] |
|||
} |
|||
}, |
|||
getUploadUrl() { |
|||
return `${process.env.VUE_APP_API_ROOT}/user/file/upload` |
|||
}, |
|||
updateUserHandle() { |
|||
this.$api.post('/user/update', this.userInfo).then(res => { |
|||
if (res.data) { |
|||
console.log(res.data) |
|||
this.msgSuccess('保存成功') |
|||
} |
|||
}) |
|||
}, |
|||
cropUploadSuccess(res) { |
|||
console.log(res) |
|||
this.userInfo.avatar = res.data |
|||
this.updateUserHandle() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.member-container { |
|||
display: flex; |
|||
align-content: center; |
|||
justify-content: center; |
|||
} |
|||
.title { |
|||
font-size: 16px; |
|||
} |
|||
.member-box-card { |
|||
margin-top: 20px; |
|||
width: 900px; |
|||
table { |
|||
color: #666; |
|||
font-size: 14px; |
|||
} |
|||
table tr { |
|||
line-height: 30px; |
|||
} |
|||
} |
|||
.account-info-view { |
|||
padding: 10px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
.account-avatar-view { |
|||
width: 180px; |
|||
} |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue