122 lines
4.1 KiB
Vue
122 lines
4.1 KiB
Vue
<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>
|