1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
| <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>
|
|
