初始版本，目前线上可用

frontEnd/src/pages/publicPages/user/userView.vue

@@ -0,0 +1,104 @@
+<template>
+  <el-descriptions
+    title="个人信息"
+    style="padding: 15px"
+    border
+    size="large"
+    :column="2"
+    v-loading="loading"
+    element-loading-text="正在初始化数据...">
+    <el-descriptions-item>
+      <template #label>
+        <el-icon>
+          <User />
+        </el-icon>
+        姓名 </template
+      >{{ user.name }}
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <el-icon>
+          <Female v-if="user.sex === 0 || user.sex === '女'" />
+          <Male v-if="user.sex === 1 || user.sex === '男'" />
+        </el-icon>
+        性别 </template
+      >{{ user.sex }}
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <el-icon>
+          <Iphone />
+        </el-icon>
+        电话 </template
+      >{{ user.phone }}</el-descriptions-item
+    >
+    <el-descriptions-item>
+      <template #label>
+        <el-icon> <Avatar /> </el-icon>状态
+      </template>
+      <el-tag type="success" v-if="user.userState || user.userState === 1"
+        >正常</el-tag
+      >
+      <el-tag type="danger" v-if="!user.userState || user.userState === 0"
+        >未启用</el-tag
+      >
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <el-icon> <UserFilled /> </el-icon>角色
+      </template>
+      <el-tag>
+        {{
+          roles.find((item) => Number(item.id) === Number(user.role))?.name ||
+          "无"
+        }}
+      </el-tag>
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <el-icon> <TakeawayBox /> </el-icon>生日 </template
+      >{{ dayjs(user.birthday).format("YYYYH-MM-DD") }}</el-descriptions-item
+    >
+    <!-- <el-descriptions-item label="年龄">{{ user.age }}</el-descriptions-item> -->
+    <el-descriptions-item>
+      <template #label>
+        <el-icon> <OfficeBuilding /> </el-icon>所在省市区
+      </template>
+      {{ user.province + "/" + user.city + "/" + user.area }}
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <el-icon><LocationInformation /></el-icon>详细地址
+      </template>
+      {{ user.address }}
+    </el-descriptions-item>
+  </el-descriptions>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from "vue";
+import { userType } from "@/types/user";
+import dayjs from "dayjs";
+import { roleDataList } from "@/lib/api/publicApiList";
+import { roleType } from "@/types/role";
+const props = defineProps<{
+  data: userType;
+}>();
+const user = props.data;
+let roles = ref<roleType[]>([]);
+let loading = ref(true);
+
+onMounted(async () => {
+  roles.value = await roleDataList();
+  loading.value = false;
+});
+</script>
+<style lang="scss" scoped>
+:deep(.el-descriptions__label) {
+  display: flex;
+  align-items: center;
+  .el-icon {
+    margin: 0 5px;
+  }
+}
+</style>