cKey
5 years ago
63 changed files with 1578 additions and 1117 deletions
@ -0,0 +1,56 @@ |
|||
import ApiService from './serviceBase' |
|||
|
|||
const IdentityServiceUrl = process.env.VUE_APP_BASE_API |
|||
|
|||
export default class MyProfileService { |
|||
public static getMyProfile() { |
|||
const _url = '/api/identity/my-profile' |
|||
return ApiService.Get<MyProfile>(_url, IdentityServiceUrl) |
|||
} |
|||
|
|||
public static updateMyProfile(payload: UpdateMyProfile) { |
|||
const _url = '/api/identity/my-profile' |
|||
return ApiService.Put<MyProfile>(_url, payload, IdentityServiceUrl) |
|||
} |
|||
|
|||
public static changePassword(payload: ChangePassword) { |
|||
const _url = '/api/identity/my-profile/change-password' |
|||
return ApiService.Post<void>(_url, payload, IdentityServiceUrl) |
|||
} |
|||
} |
|||
|
|||
export class MyProfileBase { |
|||
userName?: string |
|||
email?: string |
|||
name?: string |
|||
surname?: string |
|||
phoneNumber?: string |
|||
|
|||
constructor( |
|||
name = '', |
|||
email = '', |
|||
userName = '', |
|||
surname = '', |
|||
phoneNumber = '' |
|||
) { |
|||
this.name = name |
|||
this.email = email |
|||
this.userName = userName |
|||
this.surname = surname |
|||
this.phoneNumber = phoneNumber |
|||
} |
|||
} |
|||
|
|||
export class MyProfile extends MyProfileBase { |
|||
isExternal!: boolean |
|||
hasPassword!: boolean |
|||
extraProperties?: {[key: string]: any } |
|||
} |
|||
|
|||
export class UpdateMyProfile extends MyProfileBase { |
|||
} |
|||
|
|||
export class ChangePassword { |
|||
currentPassword!: string |
|||
newPassword!: string |
|||
} |
|||
@ -0,0 +1,12 @@ |
|||
/* eslint-disable */ |
|||
/* tslint:disable */ |
|||
// @ts-ignore
|
|||
import icon from 'vue-svgicon' |
|||
icon.register({ |
|||
'logout': { |
|||
width: 128, |
|||
height: 128, |
|||
viewBox: '0 0 1024 1024', |
|||
data: '<path pid="0" _fill="#333" d="M783.536 240.464a32 32 0 10-45.248 45.248c124.768 124.768 124.768 327.776 0 452.544-124.768 124.768-327.776 124.768-452.544 0s-124.768-327.776 0-452.544a32 32 0 10-45.248-45.248c-149.968 149.968-149.968 393.104 0 543.056s393.104 149.968 543.056 0 149.936-393.088-.016-543.056zM512 512a32 32 0 01-32-32V160a32 32 0 0164 0v320a32 32 0 01-32 32z"/>' |
|||
} |
|||
}) |
|||
@ -0,0 +1,12 @@ |
|||
/* eslint-disable */ |
|||
/* tslint:disable */ |
|||
// @ts-ignore
|
|||
import icon from 'vue-svgicon' |
|||
icon.register({ |
|||
'profile': { |
|||
width: 128, |
|||
height: 128, |
|||
viewBox: '0 0 1024 1024', |
|||
data: '<path pid="0" _fill="#333" d="M639.3 483.2c55.9-39.4 89.3-103.5 89.6-171.9-2.8-120.2-102.5-215.6-222.8-212.9-116.5 2.6-210.3 96.4-212.9 212.9.3 68.4 33.6 132.5 89.6 171.9-137.9 50.4-230 181.1-231.1 327.8.9 65.4 54.6 117.8 120 116.9h478.8c65.4.8 119.1-51.5 120-116.9-1.3-146.7-93.4-277.4-231.2-327.8zM358.4 311.4c-2.1-84.3 64.5-154.3 148.8-156.4 84.3-2.1 154.3 64.5 156.4 148.8S599.1 458 514.8 460.1H511c-83.1 1-151.4-65.6-152.6-148.7zm392 552.8H271.6c-29.7.5-54.2-23.2-54.7-53v-.2c4.4-162.4 139.7-290.5 302.2-286.1 156.2 4.3 281.8 129.9 286.1 286.1-.4 29.7-24.8 53.5-54.5 53.1-.2.1-.2.1-.3.1z"/>' |
|||
} |
|||
}) |
|||
|
After Width: | Height: | Size: 641 B |
|
After Width: | Height: | Size: 874 B |
@ -0,0 +1,144 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<h4>{{ $t('AbpAccount.ManageYourProfile') }}</h4> |
|||
<el-divider /> |
|||
<el-form |
|||
v-model="myProfile" |
|||
label-width="180px" |
|||
> |
|||
<el-row> |
|||
<el-col :span="16"> |
|||
<el-form-item |
|||
:label="$t('AbpAccount.DisplayName:UserName')" |
|||
prop="userName" |
|||
> |
|||
<el-input v-model="myProfile.userName" /> |
|||
</el-form-item> |
|||
<el-form-item |
|||
:label="$t('AbpAccount.DisplayName:Name')" |
|||
prop="name" |
|||
> |
|||
<el-input v-model="myProfile.name" /> |
|||
</el-form-item> |
|||
<el-form-item |
|||
:label="$t('AbpAccount.DisplayName:Surname')" |
|||
prop="surname" |
|||
> |
|||
<el-input v-model="myProfile.surname" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<div class="user-avatar"> |
|||
<div class="box-center"> |
|||
<el-row> |
|||
<pan-thumb |
|||
:image="myAvatar" |
|||
:height="'100px'" |
|||
:width="'100px'" |
|||
:hoverable="false" |
|||
/> |
|||
</el-row> |
|||
<el-row> |
|||
<el-button> |
|||
<i class="el-icon-upload2" /> |
|||
更换头像 |
|||
</el-button> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
<el-form-item |
|||
:label="$t('AbpAccount.DisplayName:Email')" |
|||
prop="email" |
|||
> |
|||
<el-input v-model="myProfile.email" /> |
|||
</el-form-item> |
|||
<el-form-item |
|||
:label="$t('AbpAccount.DisplayName:PhoneNumber')" |
|||
prop="phoneNumber" |
|||
> |
|||
<el-input v-model="myProfile.phoneNumber" /> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button |
|||
type="primary" |
|||
@click="handleUpdateMyProfile" |
|||
> |
|||
更新个人资料 |
|||
</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import MyProfileService, { MyProfile, UpdateMyProfile } from '@/api/profile' |
|||
import { Component, Vue } from 'vue-property-decorator' |
|||
import PanThumb from '@/components/PanThumb/index.vue' |
|||
|
|||
@Component({ |
|||
name: 'MyProfile', |
|||
components: { |
|||
PanThumb |
|||
} |
|||
}) |
|||
export default class extends Vue { |
|||
private myProfile = new MyProfile() |
|||
|
|||
get myAvatar() { |
|||
if (this.myProfile.extraProperties) { |
|||
const avatar = this.myProfile.extraProperties.avatar |
|||
if (avatar) { |
|||
return avatar |
|||
} |
|||
} |
|||
return '' |
|||
} |
|||
|
|||
set myAvatar(avatar: string) { |
|||
if (this.myProfile.extraProperties) { |
|||
this.myProfile.extraProperties.avatar = avatar |
|||
} |
|||
} |
|||
|
|||
mounted() { |
|||
MyProfileService.getMyProfile().then(profile => { |
|||
this.myProfile = profile |
|||
}) |
|||
} |
|||
|
|||
private handleUpdateMyProfile() { |
|||
this.$confirm(this.$t('AbpAccount.ManageYourProfile').toString(), |
|||
this.$t('AbpAccount.AreYouSure').toString(), { |
|||
callback: (action) => { |
|||
if (action === 'confirm') { |
|||
const updateProfile = new UpdateMyProfile( |
|||
this.myProfile.name, |
|||
this.myProfile.email, |
|||
this.myProfile.userName, |
|||
this.myProfile.surname, |
|||
this.myProfile.phoneNumber |
|||
) |
|||
MyProfileService.updateMyProfile(updateProfile).then(profile => { |
|||
this.myProfile = profile |
|||
this.$message.success(this.$t('AbpAccount.PersonalSettingsSaved').toString()) |
|||
}) |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.box-center { |
|||
margin: 0 auto; |
|||
display: table; |
|||
} |
|||
.user-avatar { |
|||
.box-center { |
|||
padding-top: 10px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,33 @@ |
|||
<template> |
|||
<el-tabs |
|||
tab-position="left" |
|||
style="margin: 30px;" |
|||
> |
|||
<el-tab-pane label="基本设置"> |
|||
<my-profile /> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="安全设置"> |
|||
安全设置 |
|||
</el-tab-pane> |
|||
<el-tab-pane label="账号绑定"> |
|||
账号绑定 |
|||
</el-tab-pane> |
|||
<el-tab-pane label="消息通知"> |
|||
消息通知 |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import MyProfile from './components/MyProfile.vue' |
|||
import { Component, Vue } from 'vue-property-decorator' |
|||
|
|||
@Component({ |
|||
name: 'ProfileSettingEditForm', |
|||
components: { |
|||
MyProfile |
|||
} |
|||
}) |
|||
export default class extends Vue { |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue