chen-xt
6 years ago
committed by
GitHub
GitHub
11 changed files with 525 additions and 0 deletions
@ -0,0 +1,62 @@ |
|||
import { MockMethod } from 'vite-plugin-mock'; |
|||
import { resultSuccess } from '../_util'; |
|||
|
|||
const userInfo = { |
|||
name: 'Serati Ma', |
|||
userid: '00000001', |
|||
email: 'antdesign@alipay.com', |
|||
signature: '海纳百川，有容乃大', |
|||
introduction: '微笑着，努力着，欣赏着', |
|||
title: '交互专家', |
|||
group: '蚂蚁集团－某某某事业群－某某平台部－某某技术部－UED', |
|||
tags: [ |
|||
{ |
|||
key: '0', |
|||
label: '很有想法的', |
|||
}, |
|||
{ |
|||
key: '1', |
|||
label: '专注设计', |
|||
}, |
|||
{ |
|||
key: '2', |
|||
label: '辣~', |
|||
}, |
|||
{ |
|||
key: '3', |
|||
label: '大长腿', |
|||
}, |
|||
{ |
|||
key: '4', |
|||
label: '川妹子', |
|||
}, |
|||
{ |
|||
key: '5', |
|||
label: '海纳百川', |
|||
}, |
|||
], |
|||
notifyCount: 12, |
|||
unreadCount: 11, |
|||
country: 'China', |
|||
province: { |
|||
label: '浙江省', |
|||
value: '330000', |
|||
}, |
|||
city: { |
|||
label: '杭州市', |
|||
value: '330100', |
|||
}, |
|||
address: '西湖区工专路 77 号', |
|||
phone: '0752-268888888', |
|||
}; |
|||
|
|||
export default [ |
|||
{ |
|||
url: '/api/account/getAccountInfo', |
|||
timeout: 1000, |
|||
method: 'get', |
|||
response: () => { |
|||
return resultSuccess(userInfo); |
|||
}, |
|||
}, |
|||
] as MockMethod[]; |
|||
@ -0,0 +1,16 @@ |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import { GetAccountInfoModel } from './model/accountModel'; |
|||
|
|||
enum Api { |
|||
ACCOUNT_INFO = '/account/getAccountInfo', |
|||
SECURE_LIST = '/account/getSecureList', |
|||
} |
|||
|
|||
// 获取个人中心--基础设置内容
|
|||
export function accountInfoApi(params: any) { |
|||
return defHttp.request<GetAccountInfoModel>({ |
|||
url: Api.ACCOUNT_INFO, |
|||
method: 'GET', |
|||
params, |
|||
}); |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
export interface GetAccountInfoModel { |
|||
email: string; |
|||
name: string; |
|||
introduction: string; |
|||
phone: string; |
|||
address: string; |
|||
} |
|||
@ -0,0 +1,59 @@ |
|||
<template> |
|||
<CollapseContainer title="账号绑定" :canExpan="false"> |
|||
<List> |
|||
<template v-for="item in list" :key="item.key"> |
|||
<ListItem> |
|||
<ListItemMeta> |
|||
<template #avatar> |
|||
<Icon v-if="item.avatar" class="avatar" :icon="item.avatar" :color="item.color" /> |
|||
</template> |
|||
<template #title> |
|||
{{ item.title }} |
|||
<div v-if="item.extra" class="extra"> {{ item.extra }} </div> |
|||
</template> |
|||
<template #description> |
|||
<div>{{ item.description }} </div> |
|||
</template> |
|||
</ListItemMeta> |
|||
</ListItem> |
|||
</template> |
|||
</List> |
|||
</CollapseContainer> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { List } from 'ant-design-vue'; |
|||
import { defineComponent, onMounted } from 'vue'; |
|||
import { CollapseContainer } from '/@/components/Container/index'; |
|||
import Icon from '/@/components/Icon/index'; |
|||
|
|||
import { accountBindList } from './data'; |
|||
|
|||
export default defineComponent({ |
|||
components: { |
|||
CollapseContainer, |
|||
List, |
|||
ListItem: List.Item, |
|||
ListItemMeta: List.Item.Meta, |
|||
Icon, |
|||
}, |
|||
setup() { |
|||
return { |
|||
list: accountBindList, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.avatar { |
|||
font-size: 40px !important; |
|||
} |
|||
|
|||
.extra { |
|||
float: right; |
|||
margin-top: 10px; |
|||
margin-right: 30px; |
|||
font-weight: normal; |
|||
color: #1890ff; |
|||
cursor: pointer; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,42 @@ |
|||
<template> |
|||
<CollapseContainer title="基本设置" :canExpan="false"> |
|||
<BasicForm @register="register" /> |
|||
<Button type="primary" @click="handleSubmit">更新基本信息</Button> |
|||
</CollapseContainer> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { Button } from 'ant-design-vue'; |
|||
import { defineComponent, onMounted } from 'vue'; |
|||
import { BasicForm, useForm } from '/@/components/Form/index'; |
|||
import { CollapseContainer } from '/@/components/Container/index'; |
|||
|
|||
import { useMessage } from '/@/hooks/web/useMessage'; |
|||
|
|||
import { accountInfoApi } from '/@/api/demo/account'; |
|||
import { baseSetschemas } from './data'; |
|||
|
|||
export default defineComponent({ |
|||
components: { BasicForm, CollapseContainer, Button }, |
|||
setup() { |
|||
const { createMessage } = useMessage(); |
|||
|
|||
const [register, { setFieldsValue }] = useForm({ |
|||
labelWidth: 120, |
|||
schemas: baseSetschemas, |
|||
showActionButtonGroup: false, |
|||
}); |
|||
|
|||
onMounted(async () => { |
|||
const data = await accountInfoApi(); |
|||
setFieldsValue(data); |
|||
}); |
|||
|
|||
return { |
|||
register, |
|||
handleSubmit: () => { |
|||
createMessage.success('更新成功！'); |
|||
}, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,53 @@ |
|||
<template> |
|||
<CollapseContainer title="新消息通知" :canExpan="false"> |
|||
<List> |
|||
<template v-for="item in list" :key="item.key"> |
|||
<ListItem> |
|||
<ListItemMeta> |
|||
<template #title> |
|||
{{ item.title }} |
|||
<Switch |
|||
class="extra" |
|||
checked-children="开" |
|||
un-checked-children="关" |
|||
default-checked |
|||
/> |
|||
</template> |
|||
<template #description> |
|||
<div>{{ item.description }} </div> |
|||
</template> |
|||
</ListItemMeta> |
|||
</ListItem> |
|||
</template> |
|||
</List> |
|||
</CollapseContainer> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { List, Switch } from 'ant-design-vue'; |
|||
import { defineComponent, onMounted } from 'vue'; |
|||
import { CollapseContainer } from '/@/components/Container/index'; |
|||
|
|||
import { msgNotifyList } from './data'; |
|||
|
|||
export default defineComponent({ |
|||
components: { |
|||
CollapseContainer, |
|||
List, |
|||
ListItem: List.Item, |
|||
ListItemMeta: List.Item.Meta, |
|||
Switch, |
|||
}, |
|||
setup() { |
|||
return { |
|||
list: msgNotifyList, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.extra { |
|||
float: right; |
|||
margin-top: 10px; |
|||
margin-right: 30px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,45 @@ |
|||
<template> |
|||
<CollapseContainer title="安全设置" :canExpan="false"> |
|||
<List> |
|||
<template v-for="item in list" :key="item.key"> |
|||
<ListItem> |
|||
<ListItemMeta> |
|||
<template #title> |
|||
{{ item.title }} |
|||
<div class="extra" v-if="item.extra"> {{ item.extra }} </div> |
|||
</template> |
|||
<template #description> |
|||
<div>{{ item.description }} </div> |
|||
</template> |
|||
</ListItemMeta> |
|||
</ListItem> |
|||
</template> |
|||
</List> |
|||
</CollapseContainer> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { List } from 'ant-design-vue'; |
|||
import { defineComponent, onMounted } from 'vue'; |
|||
import { CollapseContainer } from '/@/components/Container/index'; |
|||
|
|||
import { secureSettingList } from './data'; |
|||
|
|||
export default defineComponent({ |
|||
components: { CollapseContainer, List, ListItem: List.Item, ListItemMeta: List.Item.Meta }, |
|||
setup() { |
|||
return { |
|||
list: secureSettingList, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.extra { |
|||
float: right; |
|||
margin-top: 10px; |
|||
margin-right: 30px; |
|||
font-weight: normal; |
|||
color: #1890ff; |
|||
cursor: pointer; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,149 @@ |
|||
import { FormSchema } from '/@/components/Form/index'; |
|||
|
|||
export interface ListItem { |
|||
key: string; |
|||
title: string; |
|||
description: string; |
|||
extra?: string; |
|||
avatar?: string; |
|||
color?: string; |
|||
} |
|||
|
|||
// tab的list
|
|||
export const settingList = [ |
|||
{ |
|||
key: '1', |
|||
name: '基本设置', |
|||
component: 'BaseSetting', |
|||
}, |
|||
{ |
|||
key: '2', |
|||
name: '安全设置', |
|||
component: 'SecureSetting', |
|||
}, |
|||
{ |
|||
key: '3', |
|||
name: '账号绑定', |
|||
component: 'AccountBind', |
|||
}, |
|||
{ |
|||
key: '4', |
|||
name: '新消息通知', |
|||
component: 'MsgNotify', |
|||
}, |
|||
]; |
|||
|
|||
// 基础设置 form
|
|||
export const baseSetschemas: FormSchema[] = [ |
|||
{ |
|||
field: 'email', |
|||
component: 'Input', |
|||
label: '邮箱', |
|||
colProps: { span: 18 }, |
|||
}, |
|||
{ |
|||
field: 'name', |
|||
component: 'Input', |
|||
label: '昵称', |
|||
colProps: { span: 18 }, |
|||
}, |
|||
{ |
|||
field: 'introduction', |
|||
component: 'InputTextArea', |
|||
label: '个人简介', |
|||
colProps: { span: 18 }, |
|||
}, |
|||
{ |
|||
field: 'phone', |
|||
component: 'Input', |
|||
label: '联系电话', |
|||
colProps: { span: 18 }, |
|||
}, |
|||
{ |
|||
field: 'address', |
|||
component: 'Input', |
|||
label: '所在地区', |
|||
colProps: { span: 18 }, |
|||
}, |
|||
]; |
|||
|
|||
// 安全设置 list
|
|||
export const secureSettingList: ListItem[] = [ |
|||
{ |
|||
key: '1', |
|||
title: '账户密码', |
|||
description: '当前密码强度：：强', |
|||
extra: '修改', |
|||
}, |
|||
{ |
|||
key: '2', |
|||
title: '密保手机', |
|||
description: '已绑定手机：：138****8293', |
|||
extra: '修改', |
|||
}, |
|||
{ |
|||
key: '3', |
|||
title: '密保问题', |
|||
description: '未设置密保问题，密保问题可有效保护账户安全', |
|||
extra: '修改', |
|||
}, |
|||
{ |
|||
key: '4', |
|||
title: '备用邮箱', |
|||
description: '已绑定邮箱：：ant***sign.com', |
|||
extra: '修改', |
|||
}, |
|||
{ |
|||
key: '5', |
|||
title: 'MFA 设备', |
|||
description: '未绑定 MFA 设备，绑定后，可以进行二次确认', |
|||
extra: '修改', |
|||
}, |
|||
]; |
|||
|
|||
// 账号绑定 list
|
|||
export const accountBindList: ListItem[] = [ |
|||
{ |
|||
key: '1', |
|||
title: '绑定淘宝', |
|||
description: '当前未绑定淘宝账号', |
|||
extra: '绑定', |
|||
avatar: 'ant-design:taobao-outlined', |
|||
color: '#ff4000', |
|||
}, |
|||
{ |
|||
key: '2', |
|||
title: '绑定支付宝', |
|||
description: '当前未绑定支付宝账号', |
|||
extra: '绑定', |
|||
avatar: 'ant-design:alipay-outlined', |
|||
color: '#2eabff', |
|||
}, |
|||
{ |
|||
key: '3', |
|||
title: '绑定钉钉', |
|||
description: '当前未绑定钉钉账号', |
|||
extra: '绑定', |
|||
avatar: 'ri:dingding-fill', |
|||
color: '#2eabff', |
|||
}, |
|||
]; |
|||
|
|||
// 新消息通知 list
|
|||
export const msgNotifyList: ListItem[] = [ |
|||
{ |
|||
key: '1', |
|||
title: '账户密码', |
|||
description: '其他用户的消息将以站内信的形式通知', |
|||
}, |
|||
{ |
|||
key: '2', |
|||
title: '系统消息', |
|||
description: '系统消息将以站内信的形式通知', |
|||
}, |
|||
{ |
|||
key: '3', |
|||
title: '待办任务', |
|||
description: '待办任务将以站内信的形式通知', |
|||
}, |
|||
]; |
|||
@ -0,0 +1,58 @@ |
|||
<template> |
|||
<ScrollContainer> |
|||
<div ref="wrapperRef" class="m-4 account"> |
|||
<Tabs tab-position="left"> |
|||
<template v-for="item in settingList" :key="item.key"> |
|||
<TabPane :tab="item.name"> |
|||
<component :is="item.component" /> |
|||
</TabPane> |
|||
</template> |
|||
</Tabs> |
|||
</div> |
|||
</ScrollContainer> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import { Tabs } from 'ant-design-vue'; |
|||
|
|||
import { ScrollContainer } from '/@/components/Container/index'; |
|||
import { settingList } from './data'; |
|||
|
|||
import BaseSetting from './BaseSetting.vue'; |
|||
import SecureSetting from './SecureSetting.vue'; |
|||
import AccountBind from './AccountBind.vue'; |
|||
import MsgNotify from './MsgNotify.vue'; |
|||
|
|||
export default defineComponent({ |
|||
components: { |
|||
ScrollContainer, |
|||
Tabs, |
|||
TabPane: Tabs.TabPane, |
|||
BaseSetting, |
|||
SecureSetting, |
|||
AccountBind, |
|||
MsgNotify, |
|||
}, |
|||
setup() { |
|||
return { settingList }; |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.account { |
|||
background: #fff; |
|||
|
|||
/deep/ .base-title { |
|||
padding-left: 0; |
|||
} |
|||
|
|||
/deep/ .ant-tabs { |
|||
padding: 16px 0; |
|||
} |
|||
|
|||
/deep/ .ant-tabs-tab-active { |
|||
background-color: #e6f7ff; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue