Skip to content

B
basic-vue-admin
提交 7ad4cee7 作者: chen-xt 提交者： GitHub
操作

feat: add accountSetting page (#85)

上级 261936b1
正在显示 包含 525 行增加 和 0 行删除
mock/demo/account.ts 0 → 100644
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[];
src/api/demo/account.ts 0 → 100644
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,
});
}
src/api/demo/model/accountModel.ts 0 → 100644
export interface GetAccountInfoModel {
email: string;
name: string;
introduction: string;
phone: string;
address: string;
}
src/router/menus/modules/demo/page.ts
...@@ -51,6 +51,19 @@ const menu: MenuModule = { ...@@ -51,6 +51,19 @@ const menu: MenuModule = {
}, },
], ],
}, },
{
path: 'account',
name: '个人页',
tag: {
content: 'new',
},
children: [
{
path: 'setting',
name: '个人设置',
},
],
},
], ],
}, },
}; };
......
src/router/routes/modules/demo/page.ts
...@@ -116,6 +116,27 @@ const page: AppRouteModule = { ...@@ -116,6 +116,27 @@ const page: AppRouteModule = {
], ],
}, },
// =============================exception end============================= // =============================exception end=============================
// =============================account start=============================
{
path: '/account',
name: 'AccountPage',
redirect: '/page-demo/account/setting',
meta: {
title: '个人页',
},
children: [
{
path: 'setting',
name: 'AccountSettingPage',
component: () => import('/@/views/demo/page/account/setting/index.vue'),
meta: {
title: '个人设置',
},
},
],
},
// =============================account end=============================
], ],
}; };
......
src/views/demo/page/account/setting/AccountBind.vue 0 → 100644
<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>
src/views/demo/page/account/setting/BaseSetting.vue 0 → 100644
<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>
src/views/demo/page/account/setting/MsgNotify.vue 0 → 100644
<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>
src/views/demo/page/account/setting/SecureSetting.vue 0 → 100644
<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>
src/views/demo/page/account/setting/data.ts 0 → 100644
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: '待办任务将以站内信的形式通知',
},
];
src/views/demo/page/account/setting/index.vue 0 → 100644
<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>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论