新增：开发者中心功能、md编辑器等。
This commit is contained in:
@@ -8,7 +8,7 @@
|
||||
<el-table-column prop="createTime" label="下单时间" />
|
||||
<el-table-column prop="action" label="操作">
|
||||
<template #default="scope">
|
||||
<el-button @click="openSpmUrl(`https://${scope.row.tenantId}.websoft.top`,form,scope.row.tenantId,true)">控制台</el-button></template>
|
||||
<el-button @click="openUrl(`https://${scope.row.tenantId}.websoft.top`,form,scope.row.tenantId,true)">控制台</el-button></template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
@@ -4,25 +4,35 @@
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> 用户中心 </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 px-3">
|
||||
<!-- 用户菜单 -->
|
||||
<!-- <UserMenu :activeIndex="activeIndex" @done="onDone" class="sm:flex hidden"/>-->
|
||||
<div class="flash bg-white rounded-lg w-full">
|
||||
<div class="title text-xl text-gray-700 md:px-8 p-4 md:mt-3 font-500">账号信息</div>
|
||||
<div class="lg:w-screen-lg w-full sm:px-4 sm:py-4 mb-10">
|
||||
<el-descriptions class="px-4" :column="2" border>
|
||||
<el-descriptions-item label="用户ID">{{user?.userId}}</el-descriptions-item>
|
||||
<el-descriptions-item label="手机号码">{{user?.mobile}}</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?.birthday}}</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 label="个人简介">{{user?.introduction}}</el-descriptions-item>
|
||||
<div class="lg:w-screen-lg w-full sm:px-4 sm:py-4 mb-10 mt-5">
|
||||
<el-descriptions title="用户资料" :column="2" class="px-4" border>
|
||||
<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>
|
||||
@@ -32,14 +42,12 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ArrowLeft,View,Search } from '@element-plus/icons-vue'
|
||||
import {ArrowLeft, View, Search} from '@element-plus/icons-vue'
|
||||
import {useWebsite} from "~/composables/configState";
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import type {User} from '@/api/system/user/model';
|
||||
import {ref} from 'vue'
|
||||
import UserMenu from "./components/UserMenu.vue";
|
||||
import {updateUser} from "~/api/layout";
|
||||
import {openUrl} from "~/utils/common";
|
||||
|
||||
|
||||
// 配置信息
|
||||
@@ -53,19 +61,18 @@ const activeIndex = ref('');
|
||||
// 配置信息
|
||||
const {form, assignFields} = useFormData<User>({
|
||||
userId: undefined,
|
||||
nickname: '',
|
||||
username: '',
|
||||
phone: '',
|
||||
mobile: '',
|
||||
sex: '',
|
||||
sexName: '',
|
||||
email: '',
|
||||
password: '',
|
||||
code: '',
|
||||
smsCode: '',
|
||||
comments: '',
|
||||
nickname: undefined,
|
||||
username: undefined,
|
||||
phone: undefined,
|
||||
mobile: undefined,
|
||||
sex: undefined,
|
||||
sexName: undefined,
|
||||
email: undefined,
|
||||
password: undefined,
|
||||
code: undefined,
|
||||
smsCode: undefined,
|
||||
comments: undefined,
|
||||
remember: true,
|
||||
tenantId: undefined,
|
||||
tenantName: undefined
|
||||
});
|
||||
|
||||
@@ -82,10 +89,10 @@ const reload = async () => {
|
||||
// 未登录状态(是否强制登录)
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token || token == '') {
|
||||
navigateTo('/passport/login');
|
||||
return false;
|
||||
navigateTo('/passport/login');
|
||||
return false;
|
||||
}
|
||||
if(user.value){
|
||||
if (user.value) {
|
||||
form.userId = user.value.userId;
|
||||
form.nickname = user.value.nickname;
|
||||
form.realName = user.value.realName;
|
||||
@@ -100,6 +107,12 @@ const goBack = () => {
|
||||
router.back(); // 返回上一页
|
||||
}
|
||||
|
||||
const onSubmit = () => {
|
||||
updateUser(form).then(() => {
|
||||
ElMessage.success('修改成功');
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
(path) => {
|
||||
|
||||
177
pages/user/modify.vue
Normal file
177
pages/user/modify.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<div class="xl:w-screen-xl m-auto py-4 my-20">
|
||||
<el-page-header :icon="ArrowLeft" @back="goBack">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> 修改资料 </span>
|
||||
</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 px-3">
|
||||
<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-4">
|
||||
<el-form :model="form" label-width="auto" size="large" label-position="top">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="7">
|
||||
<el-form-item label="上传头像" class="px-4">
|
||||
<el-upload
|
||||
v-model:file-list="avatar"
|
||||
action="https://common-api.websoft.top/api/oss/upload"
|
||||
:headers="{
|
||||
Authorization: token,
|
||||
TenantId: 5,
|
||||
}"
|
||||
:limit="1"
|
||||
list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-remove="avatarRemove"
|
||||
:on-success="avatarSuccess"
|
||||
>
|
||||
<el-icon>
|
||||
<Plus/>
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-form-item label="手机号码" class="px-4">
|
||||
<el-input disabled v-model="form.mobile"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="昵称" class="px-4">
|
||||
<el-input v-model="form.nickname"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱账号" class="px-4">
|
||||
<el-input v-model="form.email" placeholder="邮箱账号"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" class="px-4">
|
||||
<el-radio-group v-model="form.sex">
|
||||
<el-radio value="1">男</el-radio>
|
||||
<el-radio value="2">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="个人签名" class="px-4">
|
||||
<el-input v-model="form.introduction" type="textarea" placeholder="个人签名" :rows="4"/>
|
||||
</el-form-item>
|
||||
<el-form-item class="px-4">
|
||||
<el-button type="primary" class="sm:w-auto w-full" size="large" @click="onSubmit">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-page-header>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {ArrowLeft, View, Search, Plus} from '@element-plus/icons-vue'
|
||||
import type {FormInstance, FormRules, UploadProps, UploadUserFile} from 'element-plus'
|
||||
import {useWebsite} from "~/composables/configState";
|
||||
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 runtimeConfig = useRuntimeConfig();
|
||||
const tenantId = localStorage.getItem('ServerTenantId')
|
||||
const token = useToken();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const website = useWebsite()
|
||||
const user = useUser();
|
||||
const activeIndex = ref('');
|
||||
const avatar = ref<UploadUserFile[]>([])
|
||||
const dialogImageUrl = ref('')
|
||||
const dialogVisible = ref(false)
|
||||
|
||||
// 配置信息
|
||||
const {form, assignFields} = useFormData<User>({
|
||||
userId: undefined,
|
||||
nickname: undefined,
|
||||
username: undefined,
|
||||
avatar: undefined,
|
||||
phone: undefined,
|
||||
mobile: undefined,
|
||||
sex: undefined,
|
||||
sexName: undefined,
|
||||
email: undefined,
|
||||
password: undefined,
|
||||
code: undefined,
|
||||
smsCode: undefined,
|
||||
comments: undefined,
|
||||
introduction: undefined,
|
||||
remember: true,
|
||||
tenantName: undefined
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: `用户中心`,
|
||||
meta: [{name: website.value.keywords, content: website.value.comments}]
|
||||
});
|
||||
|
||||
const onDone = (index: string) => {
|
||||
activeIndex.value = index;
|
||||
}
|
||||
|
||||
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.avatar = user.value.avatar;
|
||||
form.mobile = user.value.mobile;
|
||||
form.email = user.value.email;
|
||||
form.sex = user.value.sex;
|
||||
form.comments = user.value.comments;
|
||||
form.introduction = user.value.introduction
|
||||
avatar.value = []
|
||||
if(form.avatar){
|
||||
avatar.value.push({
|
||||
uid: form.userId,
|
||||
url: form.avatar,
|
||||
name: '用户头像',
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const goBack = () => {
|
||||
router.back(); // 返回上一页
|
||||
}
|
||||
|
||||
const avatarRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
|
||||
form.avatar = '';
|
||||
}
|
||||
|
||||
const avatarSuccess = (e: any) => {
|
||||
form.avatar = e.data.downloadUrl
|
||||
}
|
||||
|
||||
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
|
||||
dialogImageUrl.value = uploadFile.url!
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const onSubmit = () => {
|
||||
updateUser(form).then(() => {
|
||||
ElMessage.success('修改成功');
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
(path) => {
|
||||
activeIndex.value = path;
|
||||
reload();
|
||||
},
|
||||
{immediate: true}
|
||||
);
|
||||
</script>
|
||||
Reference in New Issue
Block a user