493 lines
14 KiB
Vue
493 lines
14 KiB
Vue
<template>
|
||
<KlNavTab active="" :type="1" />
|
||
<div class="personal-detail">
|
||
<!-- 个人信息头部 -->
|
||
<div class="profile-header">
|
||
<div class="profile-container">
|
||
<div class="avatar-container">
|
||
<el-image :src="userForm.avatar" alt="用户头像" class="avatar mt-[4px]" fit="cover" />
|
||
</div>
|
||
<div class="user-info">
|
||
<h2 class="username">{{ userForm.nickname }}</h2>
|
||
<!-- <div class="education">手机号码：{{ userForm.phone }}</div> -->
|
||
<div class="stats">
|
||
技能标签：<el-tag v-for="label in userForm.labels" :key="label" type="primary" class="mr-[10px]" size="small">{{ label }}</el-tag>
|
||
</div>
|
||
<div class="description">{{ userForm.description }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="items-flex-start mx-auto mt-[20px] max-w-[1200px] flex justify-center">
|
||
<div class="flex-1">
|
||
<!-- 导航标签 -->
|
||
<div class="nav-tabs">
|
||
<div class="tabs-container">
|
||
<div v-for="tab in tabs" :key="tab.id" :class="['tab', { active: query.type === tab.id }]" @click="handleClick(tab.id)">
|
||
{{ tab.name }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 作品展示区 -->
|
||
<div class="content w-[800px]">
|
||
<el-table v-loading="result.loading" :data="result.tableList" style="width: 100%" class="mt-[14px]">
|
||
<el-table-column prop="date" label="文件信息">
|
||
<template #default="scope">
|
||
<div class="flex items-center">
|
||
<el-image :src="scope.row.iconUrl" fit="cover" alt="" srcset="" class="h-[91px] w-[181px] rd-[4px]" />
|
||
<div class="ml-[17px]">
|
||
<div class="text-[16px] text-[#333333] font-normal">{{ scope.row.title }}</div>
|
||
<div class="text-[14px] text-[#666] font-normal my-[10px]!">{{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
|
||
<div class="flex items-center">
|
||
<div class="flex items-center">
|
||
<img src="~/assets/images/look.png" alt="" srcset="" class="h-[17px]" />
|
||
<span class="ml-[4px]">{{ scope.row.previewPoint }}</span>
|
||
</div>
|
||
<div class="ml-[13px] flex items-center">
|
||
<img src="~/assets/images/add.png" alt="" srcset="" class="h-[23px]" />
|
||
<span class="ml-[4px]">{{ scope.row.hotPoint }}</span>
|
||
</div>
|
||
<div class="ml-[13px] flex items-center">
|
||
<img src="~/assets/images/chat.png" alt="" srcset="" class="h-[17px]" />
|
||
<span class="ml-[4px]">{{ scope.row.commentsPoint }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="status" label="上传状态" width="180">
|
||
<template #default="scope">
|
||
{{ handleStatus(scope.row.status) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="address" label="操作" width="100">
|
||
<template #default="scope">
|
||
<el-link v-if="scope.row.status === 4" type="primary" :underline="false" @click="handleXiaJia(scope.row)">下架</el-link>
|
||
<el-link type="primary" :underline="false" @click="handleDelete(scope.row)">删除</el-link>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<!-- 分页 -->
|
||
<div class="mt-[10px] flex justify-center">
|
||
<el-pagination
|
||
v-model:current-page="query.pageNo"
|
||
v-model:page-size="query.pageSize"
|
||
:page-sizes="[10, 20, 30]"
|
||
:total="result.total"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
@size-change="handleClickSize"
|
||
@current-change="handeClickCurrent"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 常用软件区域 -->
|
||
<div class="software-section">
|
||
<h3 class="section-title">最近发表</h3>
|
||
<div class="software-list">
|
||
<div
|
||
v-for="item in mainWork"
|
||
:key="item.id"
|
||
class="flex cursor-pointer items-center justify-between px-[10px] py-[4px] hover:bg-[#f5f5f5]"
|
||
@click="handleClickV2(item.id)"
|
||
>
|
||
<div class="ellipsis text-[15px] text-[#333333] font-normal">{{ item.title }}发货速度发货速度开发还是看东方航空</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, reactive } from 'vue'
|
||
import type { UserExtendSaveReqVO } from '~/api/personal-center/types'
|
||
import { getMainWork } from '~/api/drawe-detail/index'
|
||
import { getOwnContentPage } from '~/api/personal-center/index'
|
||
import { offShelf, deleteResource, getUserExtend } from '~/api/personal-center'
|
||
import type { ProjectDrawMemberRespVO } from '~/api/drawe-detail/types'
|
||
import dayjs from 'dayjs'
|
||
import { useMessage } from '~/utils/useMessage'
|
||
const message = useMessage()
|
||
// 用户信息
|
||
const userForm = reactive<UserExtendSaveReqVO>({
|
||
id: undefined,
|
||
phone: '',
|
||
username: '',
|
||
avatar: '',
|
||
trueName: '',
|
||
city: '',
|
||
email: '',
|
||
isDomestic: undefined,
|
||
area: '',
|
||
country: '',
|
||
province: '',
|
||
county: '',
|
||
labels: [],
|
||
description: '',
|
||
authStatus: 0,
|
||
files: [],
|
||
nickname: '',
|
||
memberId: undefined,
|
||
})
|
||
|
||
const result = reactive({
|
||
tableList: [] as any[],
|
||
total: 0,
|
||
loading: false,
|
||
})
|
||
|
||
const query = reactive({
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
type: 1,
|
||
})
|
||
|
||
// 标签页
|
||
const tabs = ref([
|
||
{ id: 1, name: '图纸' },
|
||
{ id: 3, name: '模型' },
|
||
{ id: 2, name: '文本' },
|
||
])
|
||
|
||
const handleStatus = (status: number) => {
|
||
switch (status) {
|
||
case 1:
|
||
return '草稿'
|
||
case 2:
|
||
return '提交审核'
|
||
case 3:
|
||
return '审核成功'
|
||
case 4:
|
||
return '下架'
|
||
default:
|
||
return ''
|
||
}
|
||
}
|
||
|
||
const handleXiaJia = (row: any) => {
|
||
offShelf(row.id).then((res: any) => {
|
||
if (res.code === 0) {
|
||
ElMessage.success('下架成功')
|
||
}
|
||
})
|
||
}
|
||
|
||
const handleDelete = async (row: any) => {
|
||
const r = await message.confirm('是否删除该资源', '提示')
|
||
if (!r) return
|
||
deleteResource({ id: row.id }).then((res: any) => {
|
||
if (res.code === 0) {
|
||
ElMessage.success('删除成功')
|
||
}
|
||
})
|
||
}
|
||
|
||
const init = async () => {
|
||
const res = await getUserExtend()
|
||
if (res.code === 0) {
|
||
userForm.id = res.data.id
|
||
userForm.nickname = res.data.nickname
|
||
userForm.phone = res.data.mobile
|
||
userForm.email = res.data.email
|
||
userForm.isDomestic = +res.data.isDomestic
|
||
userForm.country = res.data.country
|
||
// await getAdress('province', userForm.isDomestic)
|
||
// // @ts-ignore
|
||
// userForm.province = +res.data.province
|
||
// await getAdress('city', userForm.province)
|
||
// // @ts-ignore
|
||
// userForm.city = +res.data.city
|
||
// await getAdress('county', userForm.city)
|
||
// @ts-ignore
|
||
userForm.county = +res.data.county
|
||
userForm.labels = res.data.labels
|
||
userForm.description = res.data.description
|
||
userForm.avatar = res.data.avatar
|
||
userForm.memberId = res.data.userAuthInfo.memberId
|
||
userForm.files = res.data.files.map((item: any) => {
|
||
return {
|
||
...item,
|
||
url: item.url,
|
||
name: item.title,
|
||
uid: item.id,
|
||
status: 'success',
|
||
}
|
||
})
|
||
|
||
// 最新发布
|
||
handleGetMainWork()
|
||
}
|
||
}
|
||
|
||
const fetchData = async () => {
|
||
result.loading = true
|
||
const res = await getOwnContentPage(query)
|
||
if (res.code === 0) {
|
||
result.total = res.data.total || 0
|
||
result.tableList = res.data.list || []
|
||
}
|
||
result.loading = false
|
||
}
|
||
|
||
const handleClickSize = (val: number) => {
|
||
query.pageSize = val
|
||
fetchData()
|
||
}
|
||
|
||
const handleClick = (val: number) => {
|
||
query.pageNo = 1
|
||
query.type = val
|
||
fetchData()
|
||
}
|
||
const handeClickCurrent = (val: number) => {
|
||
query.pageNo = val
|
||
fetchData()
|
||
}
|
||
|
||
const handleClickV2 = (id: string | number) => {
|
||
navigateTo(`/down-drawe-detail/${id}`) // 修改为在新窗口打开
|
||
}
|
||
// 获取最新发布
|
||
const mainWork = ref<ProjectDrawMemberRespVO[]>([])
|
||
const handleGetMainWork = () => {
|
||
getMainWork({ id: userForm.id, limit: 10, memberId: userForm.memberId }).then((res) => {
|
||
if (res.code === 0) {
|
||
mainWork.value = res.data
|
||
}
|
||
})
|
||
}
|
||
|
||
onMounted(() => {
|
||
// 可以在这里获取用户数据
|
||
init()
|
||
fetchData()
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
$primary-color: #2563eb;
|
||
$background-color: #f7f8fa;
|
||
$header-bg: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
|
||
$max-width: 1200px;
|
||
$text-dark: #222;
|
||
$text-light: #888;
|
||
$card-radius: 12px;
|
||
$card-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
|
||
$font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
|
||
|
||
.personal-detail {
|
||
width: 100%;
|
||
background-color: $background-color;
|
||
font-family: $font-family;
|
||
|
||
.profile-header {
|
||
background: #011a52;
|
||
color: white;
|
||
padding: 40px 0 32px 0;
|
||
.profile-container {
|
||
max-width: $max-width;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding: 0 32px;
|
||
}
|
||
}
|
||
.avatar-container {
|
||
margin-right: 32px;
|
||
.avatar {
|
||
width: 96px;
|
||
height: 96px;
|
||
border-radius: 50%;
|
||
border: 3px solid rgba(255, 255, 255, 0.7);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||
}
|
||
}
|
||
.user-info {
|
||
flex: 1;
|
||
.username {
|
||
margin: 0 0 10px 0;
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
letter-spacing: 1px;
|
||
}
|
||
.stats {
|
||
margin-bottom: 10px;
|
||
font-size: 15px;
|
||
color: #e0e7ef;
|
||
.el-tag {
|
||
margin-right: 8px;
|
||
border-radius: 8px;
|
||
background: #e0e7ef;
|
||
color: $primary-color;
|
||
border: none;
|
||
font-size: 13px;
|
||
padding: 2px 12px;
|
||
}
|
||
}
|
||
.description {
|
||
font-size: 15px;
|
||
line-height: 1.7;
|
||
margin-top: 12px;
|
||
color: #f3f4f6;
|
||
letter-spacing: 0.2px;
|
||
}
|
||
}
|
||
.nav-tabs {
|
||
background-color: #fff;
|
||
border-radius: $card-radius;
|
||
box-shadow: $card-shadow;
|
||
margin-bottom: 24px;
|
||
.tabs-container {
|
||
max-width: $max-width;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
padding: 0 32px;
|
||
}
|
||
.tab {
|
||
padding: 18px 32px 14px 32px;
|
||
cursor: pointer;
|
||
font-size: 15px;
|
||
color: $text-light;
|
||
position: relative;
|
||
transition: color 0.2s;
|
||
&.active {
|
||
color: $primary-color;
|
||
font-weight: 600;
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 3px;
|
||
background-color: $primary-color;
|
||
border-radius: 2px;
|
||
}
|
||
}
|
||
&:hover {
|
||
color: $primary-color;
|
||
}
|
||
}
|
||
}
|
||
.content {
|
||
background: #fff;
|
||
border-radius: $card-radius;
|
||
box-shadow: $card-shadow;
|
||
padding: 20px 32px 24px 32px;
|
||
min-height: 400px;
|
||
}
|
||
.el-table {
|
||
font-size: 15px;
|
||
th {
|
||
font-weight: 600;
|
||
background: #f3f4f6;
|
||
color: $text-dark;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
td {
|
||
padding: 16px 8px;
|
||
color: $text-dark;
|
||
}
|
||
.el-link {
|
||
margin-right: 12px;
|
||
font-size: 14px;
|
||
letter-spacing: 0.2px;
|
||
}
|
||
}
|
||
.el-pagination {
|
||
margin-top: 24px;
|
||
}
|
||
.software-section {
|
||
width: 400px;
|
||
margin: 0 0 0 48px;
|
||
padding: 0 24px;
|
||
.section-title {
|
||
font-size: 17px;
|
||
font-weight: 700;
|
||
margin-bottom: 18px;
|
||
color: $primary-color;
|
||
letter-spacing: 0.5px;
|
||
padding-left: 2px;
|
||
}
|
||
.software-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
.flex {
|
||
border-radius: 4px;
|
||
align-items: center;
|
||
position: relative;
|
||
cursor: pointer;
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 12px;
|
||
left: 0;
|
||
width: 5px;
|
||
height: 5px;
|
||
background: #1a65ff;
|
||
border-radius: 100%;
|
||
}
|
||
}
|
||
.ellipsis {
|
||
font-size: 15px;
|
||
color: $text-dark;
|
||
font-weight: 500;
|
||
letter-spacing: 0.2px;
|
||
flex: 1;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.color-999999 {
|
||
color: $text-light !important;
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
margin-left: 16px !important;
|
||
letter-spacing: 0.1px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 响应式优化
|
||
@media (max-width: 900px) {
|
||
.personal-detail {
|
||
.profile-container,
|
||
.tabs-container,
|
||
.content {
|
||
padding-left: 12px;
|
||
padding-right: 12px;
|
||
}
|
||
.software-section {
|
||
margin-left: 0;
|
||
padding: 0 8px;
|
||
}
|
||
}
|
||
}
|
||
@media (max-width: 600px) {
|
||
.personal-detail {
|
||
.profile-container {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.avatar-container {
|
||
margin-right: 0;
|
||
margin-bottom: 12px;
|
||
}
|
||
}
|
||
.content {
|
||
padding: 12px 4px;
|
||
}
|
||
.software-section {
|
||
padding: 0 2px;
|
||
}
|
||
}
|
||
}
|
||
:deep(.el-input__inner) {
|
||
text-align: center !important;
|
||
}
|
||
</style>
|