feat: 用户设置

src/views/personal-center/user-settings/components/accreditation.vue

@@ -2,17 +2,33 @@
   <div>
     <a-row align="center" :gutter="[0, 16]">
       <a-col :span="24">
-        <a-card>
+        <a-card title="实名认证">
-          <div class="row-title margin-bottom">实名认证</div>
+          <template #extra>
+            <a-link>修改认证信息</a-link>
+          </template>
           <a-space direction="vertical" size="large">
-            <a-descriptions :data="data" :column="3" :align="{ label: 'right' }" table-layout="fixed" />
+            <a-descriptions :column="3" :align="{ label: 'right' }" table-layout="fixed">
+              <a-descriptions-item v-for="item of data" :key="item.label" :label="item.label">
+                <a-tag v-if="item.label == '实名认证：'" :color="item.value == 1 ? 'green' : 'red'">{{
+                  item.value == 1 ? "已认证" : "未认证"
+                }}</a-tag>
+                <span v-else>{{ item.value }}</span>
+              </a-descriptions-item>
+            </a-descriptions>
           </a-space>
         </a-card>
       </a-col>
       <a-col :span="24">
-        <a-card>
+        <a-card title="认证记录">
-          <div class="row-title margin-bottom">认证记录</div>
           <a-table :columns="tableColumns" :data="tableData" size="small">
+            <template #status="{ record }">
+              <a-space>
+                <a-space>
+                  <a-badge status="success" text="已通过" v-if="record.status == 1" />
+                  <a-badge status="processing" text="审核中" v-else />
+                </a-space>
+              </a-space>
+            </template>
             <template #optional>
               <a-space>
                 <a-button size="mini" type="text">查看</a-button>
@@ -50,7 +66,7 @@ const data = ref([
   },
   {
     label: "实名认证：",
-    value: "已认证"
+    value: 1
   },
   {
     label: "邮箱：",
@@ -77,7 +93,9 @@ const tableColumns = ref([
   },
   {
     title: "当前状态",
-    dataIndex: "status"
+    dataIndex: "status",
+    align: "center",
+    slotName: "status"
   },
   {
     title: "创建时间",
@@ -96,22 +114,22 @@ const tableData = reactive([
     key: "1",
     authenticationType: "证件认证",
     authenticationContent: "实名认证，鉴定信息",
-    status: "1",
+    status: "0",
-    createTime: "2024-06-20"
+    createTime: "2024-06-20 17:35:25"
   },
   {
     key: "2",
     authenticationType: "证件认证",
     authenticationContent: "实名认证，鉴定信息",
-    status: "0",
+    status: "1",
-    createTime: "2024-06-20"
+    createTime: "2024-06-08 15:25:37"
   },
   {
     key: "3",
     authenticationType: "证件认证",
     authenticationContent: "实名认证，鉴定信息",
     status: "1",
-    createTime: "2024-06-20"
+    createTime: "2024-06-01 10:55:21"
   }
 ]);
 </script>

src/views/personal-center/user-settings/components/security-settings.vue

@@ -4,18 +4,18 @@
       <a-form-item field="name" label="登录密码">
         <a-input v-model="form.name" placeholder="请输入登录密码" />
       </a-form-item>
-      <a-form-item field="name" label="密保问题">
-        <a-input v-model="form.name" placeholder="请输入密保问题" />
-      </a-form-item>
-      <a-form-item field="name" label="密保答案">
-        <a-input v-model="form.name" placeholder="请输入密保答案" />
-      </a-form-item>
       <a-form-item field="name" label="安全手机">
         <a-input v-model="form.name" placeholder="请输入安全手机" />
       </a-form-item>
       <a-form-item field="name" label="安全邮箱">
         <a-input v-model="form.name" placeholder="请输入安全邮箱" />
       </a-form-item>
+      <a-form-item field="name" label="密保问题">
+        <a-input v-model="form.name" placeholder="请输入密保问题" />
+      </a-form-item>
+      <a-form-item field="name" label="密保答案">
+        <a-input v-model="form.name" placeholder="请输入密保答案" />
+      </a-form-item>
       <a-form-item>
         <a-button>提交</a-button>
       </a-form-item>

src/views/personal-center/user-settings/user-settings.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <a-card>
+    <a-card :bordered="false">
       <a-row align="center">
         <a-col :span="2">
           <div>
@@ -19,7 +19,7 @@
         </a-col>
       </a-row>
     </a-card>
-    <a-card class="margin-top">
+    <a-card class="margin-top" :bordered="false">
       <a-row align="center">
         <a-col :span="24">
           <a-tabs :type="type" :size="size">