From 7c120c83030dd8b25b07ef23af6eb55756dbfab9 Mon Sep 17 00:00:00 2001
From: wangxiang <1827945911@qq.com>
Date: Sat, 18 Feb 2023 02:01:07 +0800
Subject: [PATCH] =?UTF-8?q?:rocket:=20=E7=BC=96=E5=86=99=E4=B8=AA=E4=BA=BA?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E4=BF=A1=E6=81=AF=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/user/userInfo/index.vue | 33 +++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/views/system/user/userInfo/index.vue b/src/views/system/user/userInfo/index.vue
index 11bfb34..5baa0d2 100644
--- a/src/views/system/user/userInfo/index.vue
+++ b/src/views/system/user/userInfo/index.vue
@@ -69,8 +69,16 @@
       </ACard>
       <ACard class="info-modify w-3/5 xl:w-3/5">
         <template #title>
-          <SettingOutlined/> 资料修改
+          <CreditCardOutlined/> 资料修改
         </template>
+        <ACard :bordered="false"
+               :tab-list="tabListNoTitle"
+               :active-tab-key="state.currentCardKey"
+               @tabChange="key => state.currentCardKey = key"
+        >
+          <p v-if="state.currentCardKey === 'baseInfo'">修改基本信息待开发中。。。</p>
+          <p v-if="state.currentCardKey === 'uploadAvatar'">上传头像待开发中。。。</p>
+        </ACard>
       </ACard>
     </PageWrapper>
   </div>
@@ -79,17 +87,25 @@
 <script lang="ts" setup>
   import { Card, Avatar, Descriptions, Divider } from 'ant-design-vue';
   import { PageWrapper } from '/@/components/Page';
-  import { UserOutlined, SettingOutlined } from '@ant-design/icons-vue';
+  import { UserOutlined, CreditCardOutlined } from '@ant-design/icons-vue';
   import type { CSSProperties } from 'vue';
-  import { computed } from 'vue';
+  import {computed, reactive} from 'vue';
   import { Icon } from '/@/components/Icon';
 
+  interface InfoState {
+    currentCardKey: string;
+  }
+
   const ACard = Card;
   const AAvatar = Avatar;
   const ADescriptions = Descriptions;
   const ADescriptionsItem = Descriptions.Item;
   const ADivider = Divider;
 
+  const state = reactive<InfoState>({
+    currentCardKey: 'baseInfo'
+  });
+
   const getLabelStyle = computed((): CSSProperties => ({
     fontSize: '14px',
     display: 'inline',
@@ -105,6 +121,17 @@
     'font-size': '14px'
   }));
 
+  const tabListNoTitle = [
+    {
+      key: 'baseInfo',
+      tab: '基本信息',
+    },
+    {
+      key: 'uploadAvatar',
+      tab: '上传头像',
+    }
+  ];
+
 </script>
 
 <style lang="less" scoped>