初始化 ui.
This commit is contained in:
lijiahang
13
orion-ops-ui/src/views/user/child/index.vue
Normal file
13
orion-ops-ui/src/views/user/child/index.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<p>UserChild</p>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'UserChild',
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
13
orion-ops-ui/src/views/user/index.vue
Normal file
13
orion-ops-ui/src/views/user/index.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<p>这是user组件</p>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'User',
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,88 +0,0 @@
|
||||
<template>
|
||||
<a-card class="general-card" :title="$t('userInfo.title.latestActivity')">
|
||||
<template #extra>
|
||||
<a-link>{{ $t('userInfo.viewAll') }}</a-link>
|
||||
</template>
|
||||
<a-list :bordered="false">
|
||||
<a-list-item
|
||||
v-for="activity in activityList"
|
||||
:key="activity.id"
|
||||
action-layout="horizontal"
|
||||
>
|
||||
<a-skeleton
|
||||
v-if="loading"
|
||||
:loading="loading"
|
||||
:animation="true"
|
||||
class="skeleton-item"
|
||||
>
|
||||
<a-row :gutter="6">
|
||||
<a-col :span="2">
|
||||
<a-skeleton-shape shape="circle" />
|
||||
</a-col>
|
||||
<a-col :span="22">
|
||||
<a-skeleton-line :widths="['40%', '100%']" :rows="2" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-skeleton>
|
||||
<a-list-item-meta
|
||||
v-else
|
||||
:title="activity.title"
|
||||
:description="activity.description"
|
||||
>
|
||||
<template #avatar>
|
||||
<a-avatar>
|
||||
<img :src="activity.avatar" />
|
||||
</a-avatar>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { queryLatestActivity, LatestActivity } from '@/api/user-center';
|
||||
import useLoading from '@/hooks/loading';
|
||||
|
||||
const { loading, setLoading } = useLoading(true);
|
||||
const activityList = ref<LatestActivity[]>(new Array(7).fill({}));
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const { data } = await queryLatestActivity();
|
||||
activityList.value = data;
|
||||
} catch (err) {
|
||||
// you can report use errorHandler or other
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.latest-activity {
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.general-card :deep(.arco-list-item) {
|
||||
padding-left: 0;
|
||||
border-bottom: none;
|
||||
.arco-list-item-meta-content {
|
||||
flex: 1;
|
||||
padding-bottom: 27px;
|
||||
border-bottom: 1px solid var(--color-neutral-3);
|
||||
}
|
||||
.arco-list-item-meta-avatar {
|
||||
padding-bottom: 27px;
|
||||
}
|
||||
.skeleton-item {
|
||||
margin-top: 10px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid var(--color-neutral-3);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<a-card class="general-card" :title="$t('userInfo.title.latestNotification')">
|
||||
<a-skeleton v-if="loading" :animation="true">
|
||||
<a-skeleton-line :rows="3" />
|
||||
</a-skeleton>
|
||||
<a-result v-else status="404">
|
||||
<template #subtitle>
|
||||
{{ $t('userInfo.nodata') }}
|
||||
</template>
|
||||
</a-result>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import useLoading from '@/hooks/loading';
|
||||
|
||||
const { loading, setLoading } = useLoading(true);
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 500);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
:deep(.arco-result) {
|
||||
padding: 40px 32px 108px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,91 +0,0 @@
|
||||
<template>
|
||||
<a-card class="general-card" :title="$t('userInfo.title.myProject')">
|
||||
<template #extra>
|
||||
<a-link>{{ $t('userInfo.showMore') }}</a-link>
|
||||
</template>
|
||||
<a-row :gutter="16">
|
||||
<a-col
|
||||
v-for="(project, index) in projectList"
|
||||
:key="index"
|
||||
:xs="12"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="8"
|
||||
:xxl="8"
|
||||
class="my-project-item"
|
||||
>
|
||||
<a-card>
|
||||
<a-skeleton v-if="loading" :loading="loading" :animation="true">
|
||||
<a-skeleton-line :rows="3" />
|
||||
</a-skeleton>
|
||||
<a-space v-else direction="vertical">
|
||||
<a-typography-text bold>{{ project.name }}</a-typography-text>
|
||||
<a-typography-text type="secondary">
|
||||
{{ project.description }}
|
||||
</a-typography-text>
|
||||
<a-space>
|
||||
<a-avatar-group :size="24">
|
||||
{{ project.contributors }}
|
||||
<a-avatar
|
||||
v-for="(contributor, idx) in project.contributors"
|
||||
:key="idx"
|
||||
:size="32"
|
||||
>
|
||||
<img alt="avatar" :src="contributor.avatar" />
|
||||
</a-avatar>
|
||||
</a-avatar-group>
|
||||
<a-typography-text type="secondary">
|
||||
等{{ project.peopleNumber }}人
|
||||
</a-typography-text>
|
||||
</a-space>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { queryMyProjectList, MyProjectRecord } from '@/api/user-center';
|
||||
import useRequest from '@/hooks/request';
|
||||
|
||||
const defaultValue = Array(6).fill({} as MyProjectRecord);
|
||||
const { loading, response: projectList } = useRequest<MyProjectRecord[]>(
|
||||
queryMyProjectList,
|
||||
defaultValue
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
:deep(.arco-card-body) {
|
||||
min-height: 128px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.my-project {
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 18px !important;
|
||||
}
|
||||
|
||||
&-list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&-item {
|
||||
// padding-right: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,64 +0,0 @@
|
||||
<template>
|
||||
<a-card
|
||||
class="general-card"
|
||||
:title="$t('userInfo.tab.title.team')"
|
||||
:header-style="{ paddingBottom: '18px' }"
|
||||
:body-style="{ paddingBottom: '12px' }"
|
||||
>
|
||||
<a-list :bordered="false">
|
||||
<a-list-item
|
||||
v-for="team in teamList"
|
||||
:key="team.id"
|
||||
action-layout="horizontal"
|
||||
>
|
||||
<a-skeleton v-if="loading" :loading="loading" :animation="true">
|
||||
<a-row :gutter="6">
|
||||
<a-col :span="6">
|
||||
<a-skeleton-shape shape="circle" />
|
||||
</a-col>
|
||||
<a-col :span="16">
|
||||
<a-skeleton-line :widths="['100%', '40%']" :rows="2" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-skeleton>
|
||||
<a-list-item-meta v-else :title="team.name">
|
||||
<template #avatar>
|
||||
<a-avatar>
|
||||
<img :src="team.avatar" />
|
||||
</a-avatar>
|
||||
</template>
|
||||
<template #description> 共{{ team.peopleNumber }}人 </template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { queryMyTeamList, MyTeamRecord } from '@/api/user-center';
|
||||
import useRequest from '@/hooks/request';
|
||||
|
||||
const defaultValue: MyTeamRecord[] = new Array(4).fill({});
|
||||
const { loading, response: teamList } = useRequest<MyTeamRecord[]>(
|
||||
queryMyTeamList,
|
||||
defaultValue
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.general-card {
|
||||
height: 356px;
|
||||
.arco-list-item {
|
||||
height: 72px;
|
||||
padding-left: 0;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--color-neutral-3);
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.arco-list-item-meta {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,69 +0,0 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<a-space :size="12" direction="vertical" align="center">
|
||||
<a-avatar :size="64">
|
||||
<template #trigger-icon>
|
||||
<icon-camera />
|
||||
</template>
|
||||
<img :src="userInfo.avatar" />
|
||||
</a-avatar>
|
||||
<a-typography-title :heading="6" style="margin: 0">
|
||||
{{ userInfo.name }}
|
||||
</a-typography-title>
|
||||
<div class="user-msg">
|
||||
<a-space :size="18">
|
||||
<div>
|
||||
<icon-user />
|
||||
<a-typography-text>{{ userInfo.jobName }}</a-typography-text>
|
||||
</div>
|
||||
<div>
|
||||
<icon-home />
|
||||
<a-typography-text>
|
||||
{{ userInfo.organizationName }}
|
||||
</a-typography-text>
|
||||
</div>
|
||||
<div>
|
||||
<icon-location />
|
||||
<a-typography-text>{{ userInfo.locationName }}</a-typography-text>
|
||||
</div>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useUserStore } from '@/store';
|
||||
|
||||
const userInfo = useUserStore();
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 204px;
|
||||
color: var(--gray-10);
|
||||
background: url(//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/41c6b125cc2e27021bf7fcc9a9b1897c.svg~tplv-49unhts6dw-image.image)
|
||||
no-repeat;
|
||||
background-size: cover;
|
||||
border-radius: 4px;
|
||||
|
||||
:deep(.arco-avatar-trigger-icon-button) {
|
||||
color: rgb(var(--arcoblue-6));
|
||||
|
||||
:deep(.arco-icon) {
|
||||
vertical-align: -1px;
|
||||
}
|
||||
}
|
||||
.user-msg {
|
||||
.arco-icon {
|
||||
color: rgb(var(--gray-10));
|
||||
}
|
||||
.arco-typography {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,87 +0,0 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<Breadcrumb :items="['menu.user', 'menu.user.info']" />
|
||||
<UserInfoHeader />
|
||||
<div class="content">
|
||||
<div class="content-left">
|
||||
<a-grid :cols="24" :col-gap="16" :row-gap="16">
|
||||
<a-grid-item :span="24">
|
||||
<MyProject />
|
||||
</a-grid-item>
|
||||
<a-grid-item :span="24">
|
||||
<LatestActivity />
|
||||
</a-grid-item>
|
||||
</a-grid>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<a-grid :cols="24" :row-gap="16">
|
||||
<a-grid-item :span="24">
|
||||
<MyTeam />
|
||||
</a-grid-item>
|
||||
<a-grid-item class="panel" :span="24">
|
||||
<LatestNotification />
|
||||
</a-grid-item>
|
||||
</a-grid>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import UserInfoHeader from './components/user-info-header.vue';
|
||||
import LatestNotification from './components/latest-notification.vue';
|
||||
import MyProject from './components/my-project.vue';
|
||||
import LatestActivity from './components/latest-activity.vue';
|
||||
import MyTeam from './components/my-team.vue';
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Info',
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.container {
|
||||
padding: 0 20px 20px 20px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
margin-top: 12px;
|
||||
|
||||
&-left {
|
||||
flex: 1;
|
||||
margin-right: 16px;
|
||||
overflow: hidden;
|
||||
// background-color: var(--color-bg-2);
|
||||
|
||||
:deep(.arco-tabs-nav-tab) {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
width: 332px;
|
||||
}
|
||||
|
||||
.tab-pane-wrapper {
|
||||
padding: 0 16px 16px 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.mobile {
|
||||
.content {
|
||||
display: block;
|
||||
&-left {
|
||||
margin-right: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
&-right {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,15 +0,0 @@
|
||||
export default {
|
||||
'menu.user.info': 'User Info',
|
||||
'userInfo.editUserInfo': 'Edit Info',
|
||||
'userInfo.tab.title.overview': 'Overview',
|
||||
'userInfo.tab.title.project': 'Project',
|
||||
'userInfo.tab.title.team': 'My Team',
|
||||
'userInfo.title.latestActivity': 'Latest Activity',
|
||||
'userInfo.title.latestNotification': 'In-site Notification',
|
||||
'userInfo.title.myProject': 'My Project',
|
||||
'userInfo.showMore': 'Show More',
|
||||
'userInfo.viewAll': 'View All',
|
||||
'userInfo.nodata': 'No Data',
|
||||
'userInfo.visits.unit': 'times',
|
||||
'userInfo.visits.lastMonth': 'Last Month',
|
||||
};
|
||||
@@ -1,15 +0,0 @@
|
||||
export default {
|
||||
'menu.user.info': '用户信息',
|
||||
'userInfo.editUserInfo': '编辑信息',
|
||||
'userInfo.tab.title.overview': '总览',
|
||||
'userInfo.tab.title.project': '项目',
|
||||
'userInfo.tab.title.team': '我的团队',
|
||||
'userInfo.title.latestActivity': '最新动态',
|
||||
'userInfo.title.latestNotification': '站内通知',
|
||||
'userInfo.title.myProject': '我的项目',
|
||||
'userInfo.showMore': '查看更多',
|
||||
'userInfo.viewAll': '查看全部',
|
||||
'userInfo.nodata': '暂无数据',
|
||||
'userInfo.visits.unit': '人次',
|
||||
'userInfo.visits.lastMonth': '较上月',
|
||||
};
|
||||
@@ -1,162 +0,0 @@
|
||||
import Mock from 'mockjs';
|
||||
import setupMock, { successResponseWrap } from '@/utils/setup-mock';
|
||||
|
||||
setupMock({
|
||||
setup() {
|
||||
// 最新项目
|
||||
Mock.mock(new RegExp('/api/user/my-project/list'), () => {
|
||||
const contributors = [
|
||||
{
|
||||
name: '秦臻宇',
|
||||
email: 'qingzhenyu@arco.design',
|
||||
avatar:
|
||||
'//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
|
||||
},
|
||||
{
|
||||
name: '于涛',
|
||||
email: 'yuebao@arco.design',
|
||||
avatar:
|
||||
'//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
|
||||
},
|
||||
{
|
||||
name: '宁波',
|
||||
email: 'ningbo@arco.design',
|
||||
avatar:
|
||||
'//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
|
||||
},
|
||||
{
|
||||
name: '郑曦月',
|
||||
email: 'zhengxiyue@arco.design',
|
||||
avatar:
|
||||
'//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/8361eeb82904210b4f55fab888fe8416.png~tplv-uwbnlip3yd-webp.webp',
|
||||
},
|
||||
{
|
||||
name: '宁波',
|
||||
email: 'ningbo@arco.design',
|
||||
avatar:
|
||||
'//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
|
||||
},
|
||||
];
|
||||
const units = [
|
||||
{
|
||||
name: '企业级产品设计系统',
|
||||
description: 'Arco Design System',
|
||||
},
|
||||
{
|
||||
name: '火山引擎智能应用',
|
||||
description: 'The Volcano Engine',
|
||||
},
|
||||
{
|
||||
name: 'OCR文本识别',
|
||||
description: 'OCR text recognition',
|
||||
},
|
||||
{
|
||||
name: '内容资源管理',
|
||||
description: 'Content resource management ',
|
||||
},
|
||||
{
|
||||
name: '今日头条内容管理',
|
||||
description: 'Toutiao content management',
|
||||
},
|
||||
{
|
||||
name: '智能机器人',
|
||||
description: 'Intelligent Robot Project',
|
||||
},
|
||||
];
|
||||
return successResponseWrap(
|
||||
new Array(6).fill(null).map((_item, index) => ({
|
||||
id: index,
|
||||
name: units[index].name,
|
||||
description: units[index].description,
|
||||
peopleNumber: Mock.Random.natural(10, 1000),
|
||||
contributors,
|
||||
}))
|
||||
);
|
||||
});
|
||||
|
||||
// 最新动态
|
||||
Mock.mock(new RegExp('/api/user/latest-activity'), () => {
|
||||
return successResponseWrap(
|
||||
new Array(7).fill(null).map((_item, index) => ({
|
||||
id: index,
|
||||
title: '发布了项目 Arco Design System',
|
||||
description: '企业级产品设计系统',
|
||||
avatar:
|
||||
'//lf1-xgcdn-tos.pstatp.com/obj/vcloud/vadmin/start.8e0e4855ee346a46ccff8ff3e24db27b.png',
|
||||
}))
|
||||
);
|
||||
});
|
||||
|
||||
// 访问量
|
||||
Mock.mock(new RegExp('/api/user/visits'), () => {
|
||||
return successResponseWrap([
|
||||
{
|
||||
name: '主页访问量',
|
||||
visits: 5670,
|
||||
growth: 206.32,
|
||||
},
|
||||
{
|
||||
name: '项目访问量',
|
||||
visits: 5670,
|
||||
growth: 206.32,
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
// 项目和团队列表
|
||||
Mock.mock(new RegExp('/api/user/project-and-team/list'), () => {
|
||||
return successResponseWrap([
|
||||
{
|
||||
id: 1,
|
||||
content: '他创建的项目',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
content: '他参与的项目',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
content: '他创建的团队',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
content: '他加入的团队',
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
// 团队列表
|
||||
Mock.mock(new RegExp('/api/user/my-team/list'), () => {
|
||||
return successResponseWrap([
|
||||
{
|
||||
id: 1,
|
||||
avatar:
|
||||
'//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
|
||||
name: '火山引擎智能应用团队',
|
||||
peopleNumber: Mock.Random.natural(10, 100),
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
avatar:
|
||||
'//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
|
||||
name: '企业级产品设计团队',
|
||||
peopleNumber: Mock.Random.natural(5000, 6000),
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
avatar:
|
||||
'//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp',
|
||||
name: '前端/UE小分队',
|
||||
peopleNumber: Mock.Random.natural(10, 5000),
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
avatar:
|
||||
'//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/8361eeb82904210b4f55fab888fe8416.png~tplv-uwbnlip3yd-webp.webp',
|
||||
name: '内容识别插件小分队',
|
||||
peopleNumber: Mock.Random.natural(10, 100),
|
||||
},
|
||||
]);
|
||||
});
|
||||
},
|
||||
});
|
||||
@@ -1,159 +0,0 @@
|
||||
<template>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
class="form"
|
||||
:label-col-props="{ span: 8 }"
|
||||
:wrapper-col-props="{ span: 16 }"
|
||||
>
|
||||
<a-form-item
|
||||
field="email"
|
||||
:label="$t('userSetting.basicInfo.form.label.email')"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: $t('userSetting.form.error.email.required'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model="formData.email"
|
||||
:placeholder="$t('userSetting.basicInfo.placeholder.email')"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
field="nickname"
|
||||
:label="$t('userSetting.basicInfo.form.label.nickname')"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: $t('userSetting.form.error.nickname.required'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model="formData.nickname"
|
||||
:placeholder="$t('userSetting.basicInfo.placeholder.nickname')"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
field="countryRegion"
|
||||
:label="$t('userSetting.basicInfo.form.label.countryRegion')"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: $t('userSetting.form.error.countryRegion.required'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-select
|
||||
v-model="formData.countryRegion"
|
||||
:placeholder="$t('userSetting.basicInfo.placeholder.area')"
|
||||
>
|
||||
<a-option value="China">中国</a-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
field="area"
|
||||
:label="$t('userSetting.basicInfo.form.label.area')"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: $t('userSetting.form.error.area.required'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-cascader
|
||||
v-model="formData.area"
|
||||
:placeholder="$t('userSetting.basicInfo.placeholder.area')"
|
||||
:options="[
|
||||
{
|
||||
label: '北京',
|
||||
value: 'beijing',
|
||||
children: [
|
||||
{
|
||||
label: '北京',
|
||||
value: 'beijing',
|
||||
children: [
|
||||
{
|
||||
label: '朝阳',
|
||||
value: 'chaoyang',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
field="address"
|
||||
:label="$t('userSetting.basicInfo.form.label.address')"
|
||||
>
|
||||
<a-input
|
||||
v-model="formData.address"
|
||||
:placeholder="$t('userSetting.basicInfo.placeholder.address')"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
field="profile"
|
||||
:label="$t('userSetting.basicInfo.form.label.profile')"
|
||||
:rules="[
|
||||
{
|
||||
maxLength: 200,
|
||||
message: $t('userSetting.form.error.profile.maxLength'),
|
||||
},
|
||||
]"
|
||||
row-class="keep-margin"
|
||||
>
|
||||
<a-textarea
|
||||
v-model="formData.profile"
|
||||
:placeholder="$t('userSetting.basicInfo.placeholder.profile')"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="validate">
|
||||
{{ $t('userSetting.save') }}
|
||||
</a-button>
|
||||
<a-button type="secondary" @click="reset">
|
||||
{{ $t('userSetting.reset') }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { FormInstance } from '@arco-design/web-vue/es/form';
|
||||
import { BasicInfoModel } from '@/api/user-center';
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
const formData = ref<BasicInfoModel>({
|
||||
email: '',
|
||||
nickname: '',
|
||||
countryRegion: '',
|
||||
area: '',
|
||||
address: '',
|
||||
profile: '',
|
||||
});
|
||||
const validate = async () => {
|
||||
const res = await formRef.value?.validate();
|
||||
if (!res) {
|
||||
// do some thing
|
||||
// you also can use html-type to submit
|
||||
}
|
||||
};
|
||||
const reset = async () => {
|
||||
await formRef.value?.resetFields();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.form {
|
||||
width: 540px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,77 +0,0 @@
|
||||
<template>
|
||||
<a-card
|
||||
class="general-card"
|
||||
:title="$t('userSetting.certification.title.record')"
|
||||
:header-style="{ border: 'none' }"
|
||||
>
|
||||
<a-table v-if="renderData.length" :data="renderData">
|
||||
<template #columns>
|
||||
<a-table-column
|
||||
:title="$t('userSetting.certification.columns.certificationType')"
|
||||
>
|
||||
<template #cell>
|
||||
{{ $t('userSetting.certification.cell.certificationType') }}
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column
|
||||
:title="$t('userSetting.certification.columns.certificationContent')"
|
||||
data-index="certificationContent"
|
||||
/>
|
||||
<a-table-column :title="$t('userSetting.certification.columns.status')">
|
||||
<template #cell="{ record }">
|
||||
<p v-if="record.status === 0">
|
||||
<span class="circle"></span>
|
||||
<span>{{ $t('userSetting.certification.cell.auditing') }}</span>
|
||||
</p>
|
||||
<p v-if="record.status === 1">
|
||||
<span class="circle pass"></span>
|
||||
<span>{{ $t('userSetting.certification.cell.pass') }}</span>
|
||||
</p>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column
|
||||
:title="$t('userSetting.certification.columns.time')"
|
||||
data-index="time"
|
||||
/>
|
||||
<a-table-column
|
||||
:title="$t('userSetting.certification.columns.operation')"
|
||||
>
|
||||
<template #cell="{ record }">
|
||||
<a-space>
|
||||
<a-button type="text">
|
||||
{{ $t('userSetting.certification.button.check') }}
|
||||
</a-button>
|
||||
<a-button v-if="record.status === 0" type="text">
|
||||
{{ $t('userSetting.certification.button.withdraw') }}
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { PropType } from 'vue';
|
||||
import { CertificationRecord } from '@/api/user-center';
|
||||
|
||||
defineProps({
|
||||
renderData: {
|
||||
type: Array as PropType<CertificationRecord>,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
:deep(.arco-table-th) {
|
||||
&:last-child {
|
||||
.arco-table-th-item-title {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<a-spin :loading="loading" style="width: 100%">
|
||||
<EnterpriseCertification :enterprise-info="data.enterpriseInfo" />
|
||||
<CertificationRecords :render-data="data.record" />
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import {
|
||||
queryCertification,
|
||||
UnitCertification,
|
||||
EnterpriseCertificationModel,
|
||||
} from '@/api/user-center';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import EnterpriseCertification from './enterprise-certification.vue';
|
||||
import CertificationRecords from './certification-records.vue';
|
||||
|
||||
const { loading, setLoading } = useLoading(true);
|
||||
const data = ref<UnitCertification>({
|
||||
enterpriseInfo: {} as EnterpriseCertificationModel,
|
||||
record: [],
|
||||
});
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const { data: resData } = await queryCertification();
|
||||
data.value = resData;
|
||||
} catch (err) {
|
||||
// you can report use errorHandler or other
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
</script>
|
||||
|
||||
<style scoped lang="less"></style>
|
||||
@@ -1,116 +0,0 @@
|
||||
<template>
|
||||
<a-card
|
||||
class="general-card"
|
||||
:title="$t('userSetting.certification.title.enterprise')"
|
||||
:header-style="{ padding: '0px 20px 16px 20px' }"
|
||||
>
|
||||
<template #extra>
|
||||
<a-link>{{ $t('userSetting.certification.extra.enterprise') }}</a-link>
|
||||
</template>
|
||||
<a-descriptions
|
||||
class="card-content"
|
||||
:data="renderData"
|
||||
:column="3"
|
||||
align="right"
|
||||
layout="inline-horizontal"
|
||||
:label-style="{ fontWeight: 'normal' }"
|
||||
:value-style="{
|
||||
width: '200px',
|
||||
paddingLeft: '8px',
|
||||
textAlign: 'left',
|
||||
}"
|
||||
>
|
||||
<template #label="{ label }">{{ $t(label) }} :</template>
|
||||
<template #value="{ value, data }">
|
||||
<a-tag
|
||||
v-if="data.label === 'userSetting.certification.label.status'"
|
||||
color="green"
|
||||
size="small"
|
||||
>
|
||||
已认证
|
||||
</a-tag>
|
||||
<span v-else>{{ value }}</span>
|
||||
</template>
|
||||
</a-descriptions>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { PropType, computed } from 'vue';
|
||||
import { EnterpriseCertificationModel } from '@/api/user-center';
|
||||
import type { DescData } from '@arco-design/web-vue/es/descriptions/interface';
|
||||
|
||||
const props = defineProps({
|
||||
enterpriseInfo: {
|
||||
type: Object as PropType<EnterpriseCertificationModel>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const renderData = computed(() => {
|
||||
const {
|
||||
accountType,
|
||||
status,
|
||||
time,
|
||||
legalPerson,
|
||||
certificateType,
|
||||
authenticationNumber,
|
||||
enterpriseName,
|
||||
enterpriseCertificateType,
|
||||
organizationCode,
|
||||
} = props.enterpriseInfo;
|
||||
return [
|
||||
{
|
||||
label: 'userSetting.certification.label.accountType',
|
||||
value: accountType,
|
||||
},
|
||||
{
|
||||
label: 'userSetting.certification.label.status',
|
||||
value: status,
|
||||
},
|
||||
{
|
||||
label: 'userSetting.certification.label.time',
|
||||
value: time,
|
||||
},
|
||||
{
|
||||
label: 'userSetting.certification.label.legalPerson',
|
||||
value: legalPerson,
|
||||
},
|
||||
{
|
||||
label: 'userSetting.certification.label.certificateType',
|
||||
value: certificateType,
|
||||
},
|
||||
{
|
||||
label: 'userSetting.certification.label.authenticationNumber',
|
||||
value: authenticationNumber,
|
||||
},
|
||||
{
|
||||
label: 'userSetting.certification.label.enterpriseName',
|
||||
value: enterpriseName,
|
||||
},
|
||||
{
|
||||
label: 'userSetting.certification.label.enterpriseCertificateType',
|
||||
value: enterpriseCertificateType,
|
||||
},
|
||||
{
|
||||
label: 'userSetting.certification.label.organizationCode',
|
||||
value: organizationCode,
|
||||
},
|
||||
] as DescData[];
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.card-content {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
background-color: rgb(var(--gray-1));
|
||||
}
|
||||
.item-label {
|
||||
min-width: 98px;
|
||||
text-align: right;
|
||||
color: var(--color-text-8);
|
||||
&:after {
|
||||
content: ':';
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,124 +0,0 @@
|
||||
<template>
|
||||
<a-list :bordered="false">
|
||||
<a-list-item>
|
||||
<a-list-item-meta>
|
||||
<template #avatar>
|
||||
<a-typography-paragraph>
|
||||
{{ $t('userSetting.SecuritySettings.form.label.password') }}
|
||||
</a-typography-paragraph>
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="content">
|
||||
<a-typography-paragraph>
|
||||
{{ $t('userSetting.SecuritySettings.placeholder.password') }}
|
||||
</a-typography-paragraph>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<a-link>
|
||||
{{ $t('userSetting.SecuritySettings.button.update') }}
|
||||
</a-link>
|
||||
</div>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-list-item-meta>
|
||||
<template #avatar>
|
||||
<a-typography-paragraph>
|
||||
{{ $t('userSetting.SecuritySettings.form.label.securityQuestion') }}
|
||||
</a-typography-paragraph>
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="content">
|
||||
<a-typography-paragraph class="tip">
|
||||
{{
|
||||
$t('userSetting.SecuritySettings.placeholder.securityQuestion')
|
||||
}}
|
||||
</a-typography-paragraph>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<a-link>
|
||||
{{ $t('userSetting.SecuritySettings.button.settings') }}
|
||||
</a-link>
|
||||
</div>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-list-item-meta>
|
||||
<template #avatar>
|
||||
<a-typography-paragraph>
|
||||
{{ $t('userSetting.SecuritySettings.form.label.phone') }}
|
||||
</a-typography-paragraph>
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="content">
|
||||
<a-typography-paragraph>
|
||||
已绑定：150******50
|
||||
</a-typography-paragraph>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<a-link>
|
||||
{{ $t('userSetting.SecuritySettings.button.update') }}
|
||||
</a-link>
|
||||
</div>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-list-item-meta>
|
||||
<template #avatar>
|
||||
<a-typography-paragraph>
|
||||
{{ $t('userSetting.SecuritySettings.form.label.email') }}
|
||||
</a-typography-paragraph>
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="content">
|
||||
<a-typography-paragraph class="tip">
|
||||
{{ $t('userSetting.SecuritySettings.placeholder.email') }}
|
||||
</a-typography-paragraph>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<a-link>
|
||||
{{ $t('userSetting.SecuritySettings.button.update') }}
|
||||
</a-link>
|
||||
</div>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<style scoped lang="less">
|
||||
:deep(.arco-list-item) {
|
||||
border-bottom: none !important;
|
||||
.arco-typography {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.arco-list-item-meta-avatar {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
.arco-list-item-meta {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
:deep(.arco-list-item-meta-content) {
|
||||
flex: 1;
|
||||
border-bottom: 1px solid var(--color-neutral-3);
|
||||
|
||||
.arco-list-item-meta-description {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: space-between;
|
||||
|
||||
.tip {
|
||||
color: rgb(var(--gray-6));
|
||||
}
|
||||
.operation {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,155 +0,0 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<a-space :size="54">
|
||||
<a-upload
|
||||
:custom-request="customRequest"
|
||||
list-type="picture-card"
|
||||
:file-list="fileList"
|
||||
:show-upload-button="true"
|
||||
:show-file-list="false"
|
||||
@change="uploadChange"
|
||||
>
|
||||
<template #upload-button>
|
||||
<a-avatar :size="100" class="info-avatar">
|
||||
<template #trigger-icon>
|
||||
<icon-camera />
|
||||
</template>
|
||||
<img v-if="fileList.length" :src="fileList[0].url" />
|
||||
</a-avatar>
|
||||
</template>
|
||||
</a-upload>
|
||||
<a-descriptions
|
||||
:data="renderData"
|
||||
:column="2"
|
||||
align="right"
|
||||
layout="inline-horizontal"
|
||||
:label-style="{
|
||||
width: '140px',
|
||||
fontWeight: 'normal',
|
||||
color: 'rgb(var(--gray-8))',
|
||||
}"
|
||||
:value-style="{
|
||||
width: '200px',
|
||||
paddingLeft: '8px',
|
||||
textAlign: 'left',
|
||||
}"
|
||||
>
|
||||
<template #label="{ label }">{{ $t(label) }} :</template>
|
||||
<template #value="{ value, data }">
|
||||
<a-tag
|
||||
v-if="data.label === 'userSetting.label.certification'"
|
||||
color="green"
|
||||
size="small"
|
||||
>
|
||||
已认证
|
||||
</a-tag>
|
||||
<span v-else>{{ value }}</span>
|
||||
</template>
|
||||
</a-descriptions>
|
||||
</a-space>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import type {
|
||||
FileItem,
|
||||
RequestOption,
|
||||
} from '@arco-design/web-vue/es/upload/interfaces';
|
||||
import { useUserStore } from '@/store';
|
||||
import { userUploadApi } from '@/api/user-center';
|
||||
import type { DescData } from '@arco-design/web-vue/es/descriptions/interface';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const file = {
|
||||
uid: '-2',
|
||||
name: 'avatar.png',
|
||||
url: userStore.avatar,
|
||||
};
|
||||
const renderData = [
|
||||
{
|
||||
label: 'userSetting.label.name',
|
||||
value: userStore.name,
|
||||
},
|
||||
{
|
||||
label: 'userSetting.label.certification',
|
||||
value: userStore.certification,
|
||||
},
|
||||
{
|
||||
label: 'userSetting.label.accountId',
|
||||
value: userStore.accountId,
|
||||
},
|
||||
{
|
||||
label: 'userSetting.label.phone',
|
||||
value: userStore.phone,
|
||||
},
|
||||
{
|
||||
label: 'userSetting.label.registrationDate',
|
||||
value: userStore.registrationDate,
|
||||
},
|
||||
] as DescData[];
|
||||
const fileList = ref<FileItem[]>([file]);
|
||||
const uploadChange = (fileItemList: FileItem[], fileItem: FileItem) => {
|
||||
fileList.value = [fileItem];
|
||||
};
|
||||
const customRequest = (options: RequestOption) => {
|
||||
// docs: https://axios-http.com/docs/cancellation
|
||||
const controller = new AbortController();
|
||||
|
||||
(async function requestWrap() {
|
||||
const {
|
||||
onProgress,
|
||||
onError,
|
||||
onSuccess,
|
||||
fileItem,
|
||||
name = 'file',
|
||||
} = options;
|
||||
onProgress(20);
|
||||
const formData = new FormData();
|
||||
formData.append(name as string, fileItem.file as Blob);
|
||||
const onUploadProgress = (event: ProgressEvent) => {
|
||||
let percent;
|
||||
if (event.total > 0) {
|
||||
percent = (event.loaded / event.total) * 100;
|
||||
}
|
||||
onProgress(parseInt(String(percent), 10), event);
|
||||
};
|
||||
|
||||
try {
|
||||
// https://github.com/axios/axios/issues/1630
|
||||
// https://github.com/nuysoft/Mock/issues/127
|
||||
|
||||
const res = await userUploadApi(formData, {
|
||||
controller,
|
||||
onUploadProgress,
|
||||
});
|
||||
onSuccess(res);
|
||||
} catch (error) {
|
||||
onError(error);
|
||||
}
|
||||
})();
|
||||
return {
|
||||
abort() {
|
||||
controller.abort();
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.arco-card {
|
||||
padding: 14px 0 4px 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
:deep(.arco-avatar-trigger-icon-button) {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background-color: #e8f3ff;
|
||||
.arco-icon-camera {
|
||||
margin-top: 8px;
|
||||
color: rgb(var(--arcoblue-6));
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,57 +0,0 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<Breadcrumb :items="['menu.user', 'menu.user.setting']" />
|
||||
<a-row style="margin-bottom: 16px">
|
||||
<a-col :span="24">
|
||||
<UserPanel />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="wrapper">
|
||||
<a-col :span="24">
|
||||
<a-tabs default-active-key="1" type="rounded">
|
||||
<a-tab-pane key="1" :title="$t('userSetting.tab.basicInformation')">
|
||||
<BasicInformation />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" :title="$t('userSetting.tab.securitySettings')">
|
||||
<SecuritySettings />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" :title="$t('userSetting.tab.certification')">
|
||||
<Certification />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import UserPanel from './components/user-panel.vue';
|
||||
import BasicInformation from './components/basic-information.vue';
|
||||
import SecuritySettings from './components/security-settings.vue';
|
||||
import Certification from './components/certification.vue';
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Setting',
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.container {
|
||||
padding: 0 20px 20px 20px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding: 20px 0 0 20px;
|
||||
min-height: 580px;
|
||||
background-color: var(--color-bg-2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
:deep(.section-title) {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,91 +0,0 @@
|
||||
export default {
|
||||
'menu.user.setting': 'User Setting',
|
||||
'userSetting.menu.title.info': 'Personal Information',
|
||||
'userSetting.menu.title.account': 'Account Setting',
|
||||
'userSetting.menu.title.password': 'Password',
|
||||
'userSetting.menu.title.message': 'Message Notification',
|
||||
'userSetting.menu.title.result': 'Result',
|
||||
'userSetting.menu.title.data': 'Export Data',
|
||||
'userSetting.saveSuccess': 'Save Success',
|
||||
'userSetting.title.basicInfo': 'Basic Information',
|
||||
'userSetting.title.socialInfo': 'Social Information',
|
||||
'userSetting.label.avatar': 'Avatar',
|
||||
'userSetting.label.name': 'User Name',
|
||||
'userSetting.label.location': 'Office Location',
|
||||
'userSetting.label.introduction': 'Introduction',
|
||||
'userSetting.label.personalWebsite': 'Website',
|
||||
'userSetting.save': 'Save',
|
||||
'userSetting.cancel': 'Cancel',
|
||||
'userSetting.reset': 'Reset',
|
||||
// new
|
||||
'userSetting.label.certification': 'Certification',
|
||||
'userSetting.label.phone': 'Phone',
|
||||
'userSetting.label.accountId': 'Account Id',
|
||||
'userSetting.label.registrationDate': 'Registration Date',
|
||||
'userSetting.tab.basicInformation': 'Basic Information',
|
||||
'userSetting.tab.securitySettings': 'Security Settings',
|
||||
'userSetting.tab.certification': 'Certification',
|
||||
'userSetting.basicInfo.form.label.email': 'Email',
|
||||
'userSetting.basicInfo.placeholder.email': `Please enter your email address, such as xxx{'@'}bytedance.com`,
|
||||
'userSetting.form.error.email.required': 'Please enter email address',
|
||||
'userSetting.basicInfo.form.label.nickname': 'Nickname',
|
||||
'userSetting.basicInfo.placeholder.nickname': 'Please enter nickname',
|
||||
'userSetting.form.error.nickname.required': 'Please enter nickname',
|
||||
'userSetting.basicInfo.form.label.countryRegion': 'Country/region',
|
||||
'userSetting.basicInfo.placeholder.countryRegion':
|
||||
'Please select country/region',
|
||||
'userSetting.form.error.countryRegion.required':
|
||||
'Please select country/region',
|
||||
'userSetting.basicInfo.form.label.area': 'Area',
|
||||
'userSetting.basicInfo.placeholder.area': 'Please select area',
|
||||
'userSetting.form.error.area.required': 'Please Select a area',
|
||||
'userSetting.basicInfo.form.label.address': 'Address',
|
||||
'userSetting.basicInfo.placeholder.address': 'Please enter address',
|
||||
'userSetting.basicInfo.form.label.profile': 'Personal profile',
|
||||
'userSetting.basicInfo.placeholder.profile':
|
||||
'Please enter your profile, no more than 200 words',
|
||||
'userSetting.form.error.profile.maxLength': 'No more than 200 words',
|
||||
'userSetting.SecuritySettings.form.label.password': 'Login Password',
|
||||
'userSetting.SecuritySettings.placeholder.password':
|
||||
'Has been set. The password must contain at least six letters, digits, and special characters except Spaces. The password must contain both uppercase and lowercase letters.',
|
||||
'userSetting.SecuritySettings.form.label.securityQuestion':
|
||||
'Security Question',
|
||||
'userSetting.SecuritySettings.placeholder.securityQuestion':
|
||||
'You have not set the password protection question. The password protection question can effectively protect the account security.',
|
||||
'userSetting.SecuritySettings.form.label.phone': 'Phone',
|
||||
// 'userSetting.SecuritySettings.placeholder.phone': '已绑定：150******50',
|
||||
'userSetting.SecuritySettings.form.label.email': 'Email',
|
||||
'userSetting.SecuritySettings.placeholder.email':
|
||||
'You have not set a mailbox yet. The mailbox binding can be used to retrieve passwords and receive notifications.',
|
||||
'userSetting.SecuritySettings.button.settings': 'Settings',
|
||||
'userSetting.SecuritySettings.button.update': 'Update',
|
||||
'userSetting.certification.title.enterprise':
|
||||
'Enterprise Real Name Authentication',
|
||||
'userSetting.certification.extra.enterprise':
|
||||
'Modifying an Authentication Body',
|
||||
'userSetting.certification.label.accountType': 'Account Type',
|
||||
'userSetting.certification.label.status': 'status',
|
||||
'userSetting.certification.label.time': 'time',
|
||||
'userSetting.certification.label.legalPerson': 'Legal Person Name',
|
||||
'userSetting.certification.label.certificateType':
|
||||
'Types of legal person documents',
|
||||
'userSetting.certification.label.authenticationNumber':
|
||||
'Legal person certification number',
|
||||
'userSetting.certification.label.enterpriseName': 'Enterprise Name',
|
||||
'userSetting.certification.label.enterpriseCertificateType':
|
||||
'Types of corporate certificates',
|
||||
'userSetting.certification.label.organizationCode': 'Organization Code',
|
||||
'userSetting.certification.title.record': 'Certification Records',
|
||||
'userSetting.certification.columns.certificationType': 'Certification Type',
|
||||
'userSetting.certification.cell.certificationType':
|
||||
'Enterprise certificate Certification',
|
||||
'userSetting.certification.columns.certificationContent':
|
||||
'Certification Content',
|
||||
'userSetting.certification.columns.status': 'Status',
|
||||
'userSetting.certification.cell.pass': 'Pass',
|
||||
'userSetting.certification.cell.auditing': 'Auditing',
|
||||
'userSetting.certification.columns.time': 'Time',
|
||||
'userSetting.certification.columns.operation': 'Operation',
|
||||
'userSetting.certification.button.check': 'Check',
|
||||
'userSetting.certification.button.withdraw': 'Withdraw',
|
||||
};
|
||||
@@ -1,81 +0,0 @@
|
||||
export default {
|
||||
'menu.user.setting': '用户设置',
|
||||
'userSetting.menu.title.info': '个人信息',
|
||||
'userSetting.menu.title.account': '账号设置',
|
||||
'userSetting.menu.title.password': '密码',
|
||||
'userSetting.menu.title.message': '消息通知',
|
||||
'userSetting.menu.title.result': '结果页',
|
||||
'userSetting.menu.title.data': '导出数据',
|
||||
'userSetting.saveSuccess': '保存成功',
|
||||
'userSetting.title.basicInfo': '基本信息',
|
||||
'userSetting.title.socialInfo': '社交信息',
|
||||
'userSetting.label.avatar': '头像',
|
||||
'userSetting.label.name': '用户名',
|
||||
'userSetting.label.location': '办公地点',
|
||||
'userSetting.label.introduction': '个人简介',
|
||||
'userSetting.label.personalWebsite': '个人网站',
|
||||
'userSetting.save': '保存',
|
||||
'userSetting.cancel': '取消',
|
||||
'userSetting.reset': '重置',
|
||||
// new
|
||||
'userSetting.label.certification': '实名认证',
|
||||
'userSetting.label.phone': '手机号码',
|
||||
'userSetting.label.accountId': '账号ID',
|
||||
'userSetting.label.registrationDate': '注册时间',
|
||||
'userSetting.tab.basicInformation': '基础信息',
|
||||
'userSetting.tab.securitySettings': '安全设置',
|
||||
'userSetting.tab.certification': '实名认证',
|
||||
'userSetting.basicInfo.form.label.email': '邮箱',
|
||||
'userSetting.basicInfo.placeholder.email': `请输入邮箱地址，如xxx{'@'}bytedance.com`,
|
||||
'userSetting.form.error.email.required': '请输入邮箱',
|
||||
'userSetting.basicInfo.form.label.nickname': '昵称',
|
||||
'userSetting.basicInfo.placeholder.nickname': '请输入您的昵称',
|
||||
'userSetting.form.error.nickname.required': '请输入昵称',
|
||||
'userSetting.basicInfo.form.label.countryRegion': '国家/地区',
|
||||
'userSetting.basicInfo.placeholder.countryRegion': '请选择',
|
||||
'userSetting.form.error.countryRegion.required': '请选择国家/地区',
|
||||
'userSetting.basicInfo.form.label.area': '所在区域',
|
||||
'userSetting.basicInfo.placeholder.area': '请选择',
|
||||
'userSetting.form.error.area.required': '请选择所在区域',
|
||||
'userSetting.basicInfo.form.label.address': '具体地址',
|
||||
'userSetting.basicInfo.placeholder.address': '请输入您的地址',
|
||||
'userSetting.basicInfo.form.label.profile': '个人简介',
|
||||
'userSetting.basicInfo.placeholder.profile':
|
||||
'请输入您的个人简介，最多不超过200字。',
|
||||
'userSetting.form.error.profile.maxLength': '最多不超过200字',
|
||||
'userSetting.SecuritySettings.form.label.password': '登录密码',
|
||||
'userSetting.SecuritySettings.placeholder.password':
|
||||
'已设置。密码至少6位字符，支持数字、字母和除空格外的特殊字符，且必须同时包含数字和大小写字母。',
|
||||
'userSetting.SecuritySettings.form.label.securityQuestion': '密保问题',
|
||||
'userSetting.SecuritySettings.placeholder.securityQuestion':
|
||||
'您暂未设置密保问题，密保问题可以有效的保护账号的安全。',
|
||||
'userSetting.SecuritySettings.form.label.phone': '安全手机',
|
||||
// 'userSetting.SecuritySettings.placeholder.phone': '已绑定：150******50',
|
||||
'userSetting.SecuritySettings.form.label.email': '安全邮箱',
|
||||
'userSetting.SecuritySettings.placeholder.email':
|
||||
'您暂未设置邮箱，绑定邮箱可以用来找回密码、接收通知等。',
|
||||
'userSetting.SecuritySettings.button.settings': '设置',
|
||||
'userSetting.SecuritySettings.button.update': '修改',
|
||||
'userSetting.certification.title.enterprise': '企业实名认证',
|
||||
'userSetting.certification.extra.enterprise': '修改认证主体',
|
||||
'userSetting.certification.label.accountType': '账号类型',
|
||||
'userSetting.certification.label.status': '认证状态',
|
||||
'userSetting.certification.label.time': '认证时间',
|
||||
'userSetting.certification.label.legalPerson': '法人姓名',
|
||||
'userSetting.certification.label.certificateType': '法人证件类型',
|
||||
'userSetting.certification.label.authenticationNumber': '法人认证号码',
|
||||
'userSetting.certification.label.enterpriseName': '企业名称',
|
||||
'userSetting.certification.label.enterpriseCertificateType': '企业证件类型',
|
||||
'userSetting.certification.label.organizationCode': '组织机构代码',
|
||||
'userSetting.certification.title.record': '认证记录',
|
||||
'userSetting.certification.columns.certificationType': '认证类型',
|
||||
'userSetting.certification.cell.certificationType': '企业证件认证',
|
||||
'userSetting.certification.columns.certificationContent': '认证内容',
|
||||
'userSetting.certification.columns.status': '当前状态',
|
||||
'userSetting.certification.cell.pass': '已通过',
|
||||
'userSetting.certification.cell.auditing': '审核中',
|
||||
'userSetting.certification.columns.time': '创建时间',
|
||||
'userSetting.certification.columns.operation': '操作',
|
||||
'userSetting.certification.button.check': '查看',
|
||||
'userSetting.certification.button.withdraw': '撤回',
|
||||
};
|
||||
@@ -1,42 +0,0 @@
|
||||
import Mock from 'mockjs';
|
||||
import setupMock, { successResponseWrap } from '@/utils/setup-mock';
|
||||
|
||||
setupMock({
|
||||
setup() {
|
||||
Mock.mock(new RegExp('/api/user/save-info'), () => {
|
||||
return successResponseWrap('ok');
|
||||
});
|
||||
Mock.mock(new RegExp('/api/user/certification'), () => {
|
||||
return successResponseWrap({
|
||||
enterpriseInfo: {
|
||||
accountType: '企业账号',
|
||||
status: 0,
|
||||
time: '2018-10-22 14:53:12',
|
||||
legalPerson: '李**',
|
||||
certificateType: '中国身份证',
|
||||
authenticationNumber: '130************123',
|
||||
enterpriseName: '低调有实力的企业',
|
||||
enterpriseCertificateType: '企业营业执照',
|
||||
organizationCode: '7*******9',
|
||||
},
|
||||
record: [
|
||||
{
|
||||
certificationType: 1,
|
||||
certificationContent: '企业实名认证，法人姓名：李**',
|
||||
status: 0,
|
||||
time: '2021-02-28 10:30:50',
|
||||
},
|
||||
{
|
||||
certificationType: 1,
|
||||
certificationContent: '企业实名认证，法人姓名：李**',
|
||||
status: 1,
|
||||
time: '2020-05-13 08:00:00',
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
Mock.mock(new RegExp('/api/user/upload'), () => {
|
||||
return successResponseWrap('ok');
|
||||
});
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user