feat: add accountSetting page (#85)

mock/demo/account.ts

@@ -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[];

src/api/demo/account.ts

@@ -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,
+  });
+}

src/api/demo/model/accountModel.ts

@@ -0,0 +1,7 @@
+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 = {
           },
         ],
       },
+      {
+        path: 'account',
+        name: '个人页',
+        tag: {
+          content: 'new',
+        },
+        children: [
+          {
+            path: 'setting',
+            name: '个人设置',
+          },
+        ],
+      },
     ],
   },
 };

src/router/routes/modules/demo/page.ts

@@ -116,6 +116,27 @@ const page: AppRouteModule = {
       ],
     },
     // =============================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,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>

src/views/demo/page/account/setting/BaseSetting.vue

@@ -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>

src/views/demo/page/account/setting/MsgNotify.vue

@@ -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>

src/views/demo/page/account/setting/SecureSetting.vue

@@ -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>