1

pages/user/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-2">
+    <el-page-header :icon="ArrowLeft" @back="goBack">
+      <template #content>
+        <span class="text-large font-600"> 用户中心</span>
+      </template>
+      <template #extra>
+        <nuxt-link to="/user/modify" class="text-gray-400 text-sm">修改资料</nuxt-link>
+      </template>
+      <div class="login-layout mt-10 sm:w-screen-xl w-full">
+        <div class="m-auto flex sm:flex-row flex-col sm:px-0">
+          <div class="flash bg-white rounded-lg w-full">
+            <div class="lg:w-screen-lg w-full sm:px-4 sm:py-4 mb-10 mt-5">
+              <el-descriptions :column="columnClasses" border class="px-4" title="用户资料">
+                <el-descriptions-item
+                    label="头像"
+                >
+                  <el-image
+                      style="width: 70px; height: 70px"
+                      :src="user?.avatar"
+                  />
+                </el-descriptions-item>
+                <el-descriptions-item label="手机号码">{{ user?.mobile }}</el-descriptions-item>
+                <el-descriptions-item label="用户ID">{{ user?.userId }}</el-descriptions-item>
+                <el-descriptions-item label="昵称">{{ user?.nickname }}</el-descriptions-item>
+                <el-descriptions-item label="性别">{{ user?.sexName }}</el-descriptions-item>
+                <el-descriptions-item label="邮箱">{{ user?.email }}</el-descriptions-item>
+<!--                <el-descriptions-item label="所在省份">{{ user?.province }}</el-descriptions-item>-->
+<!--                <el-descriptions-item label="所在城市">{{ user?.city }}</el-descriptions-item>-->
+                <el-descriptions-item label="可用余额">{{ user?.balance }}</el-descriptions-item>
+                <el-descriptions-item label="可用积分">{{ user?.points }}</el-descriptions-item>
+<!--                <el-descriptions-item :rowspan="1" :span="2" label="生日">{{ user?.birthday }}</el-descriptions-item>-->
+                <el-descriptions-item :rowspan="1" :span="2" label="个人签名">
+                  <p class="min-h-[60px]">{{ user?.introduction }}</p>
+                </el-descriptions-item>
+              </el-descriptions>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-page-header>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+import {ArrowLeft, View, Search} from '@element-plus/icons-vue'
+import useFormData from '@/utils/use-form-data';
+import type {User} from '@/api/system/user/model';
+import {ref} from 'vue'
+import {updateUser} from "~/api/layout";
+
+// 配置信息
+const route = useRoute();
+const router = useRouter();
+const user = useUser();
+const activeIndex = ref('');
+
+// 配置信息
+const {form, assignFields} = useFormData<User>({
+  userId: undefined,
+  nickname: undefined,
+  username: undefined,
+  phone: undefined,
+  mobile: undefined,
+  sex: undefined,
+  sexName: undefined,
+  email: undefined,
+  password: undefined,
+  code: undefined,
+  smsCode: undefined,
+  comments: undefined,
+  remember: true,
+  tenantName: undefined
+});
+
+const reload = async () => {
+  // 未登录状态(是否强制登录)
+  const token = localStorage.getItem('token');
+  if (!token || token == '') {
+    navigateTo('/passport/login');
+    return false;
+  }
+  if (user.value) {
+    form.userId = user.value.userId;
+    form.nickname = user.value.nickname;
+    form.realName = user.value.realName;
+    form.mobile = user.value.mobile;
+    form.email = user.value.email;
+    form.sex = user.value.sex;
+    form.comments = user.value.comments;
+  }
+}
+
+const goBack = () => {
+  router.back(); // 返回上一页
+}
+
+const onSubmit = () => {
+  updateUser(form).then(() => {
+    ElMessage.success('修改成功');
+  });
+}
+
+const columnClasses = computed(() => {
+  const width = window.innerWidth;
+  if (width < 640) { // 小于 640px 时为 1 列
+    return 1;
+  } else { // 大于等于 1024px 时为 4 列
+    return 2;
+  }
+});
+
+watch(
+    () => route.path,
+    (path) => {
+      activeIndex.value = path;
+      reload();
+    },
+    {immediate: true}
+);
+</script>