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 |
File diff suppressed because it is too large
@ -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