Commit dff43d7d by lijiabin

【需求 17679】 feat: 继续完善页面

parent cefaabc9
...@@ -15,6 +15,7 @@ export * from './common' ...@@ -15,6 +15,7 @@ export * from './common'
export * from './login' export * from './login'
export * from './article' export * from './article'
export * from './online' export * from './online'
export * from './otherUserPage'
// 导出类型 // 导出类型
export * from './task/types' export * from './task/types'
export * from './shop/types' export * from './shop/types'
...@@ -31,3 +32,4 @@ export * from './common/types' ...@@ -31,3 +32,4 @@ export * from './common/types'
export * from './login/types' export * from './login/types'
export * from './article/types' export * from './article/types'
export * from './online/types' export * from './online/types'
export * from './otherUserPage/types'
import service from '@/utils/request/index' import service from '@/utils/request/index'
import type { AddOrUpdateCaseDto } from './types'
import type { BooleanFlag } from '@/constants' import type { BooleanFlag } from '@/constants'
// 其他用户页面数据 // 其他用户页面数据
...@@ -19,13 +18,13 @@ export const getOtherUserData = (data: { userId: string; isReal: BooleanFlag }) ...@@ -19,13 +18,13 @@ export const getOtherUserData = (data: { userId: string; isReal: BooleanFlag })
* 显示其他用户的发帖数据 * 显示其他用户的发帖数据
*/ */
export const getOtherUserPostData = (data: { export const getOtherUserPostData = (data: {
userId: string createUserId: string
isReal: BooleanFlag isReal: BooleanFlag
current: number current: number
size: number size: number
}) => { }) => {
return service.request({ return service.request({
url: '/api/personalCenter/userData', url: '/api/personalCenter/getUserArticleData',
method: 'POST', method: 'POST',
data, data,
}) })
......
...@@ -294,9 +294,14 @@ import dayjs from 'dayjs' ...@@ -294,9 +294,14 @@ import dayjs from 'dayjs'
import { useUserStore } from '@/stores' import { useUserStore } from '@/stores'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
const { id, defaultSize = 10 } = defineProps<{ const {
id,
defaultSize = 10,
isReal,
} = defineProps<{
id: number | string id: number | string
defaultSize?: number defaultSize?: number
isReal: BooleanFlag
}>() }>()
const emit = defineEmits<{ const emit = defineEmits<{
...@@ -476,7 +481,7 @@ const getCurrentChildrenList = (item: CommentItemDto) => { ...@@ -476,7 +481,7 @@ const getCurrentChildrenList = (item: CommentItemDto) => {
const handleUserInfo = (item: CommentItemDto) => { const handleUserInfo = (item: CommentItemDto) => {
console.log(item) console.log(item)
router.push(`/otherUserPage/${item.articleId}/1`) router.push(`/otherUserPage/${item.userId}/${isReal}`)
} }
defineExpose({ defineExpose({
......
...@@ -104,7 +104,7 @@ export const constantsRoute = [ ...@@ -104,7 +104,7 @@ export const constantsRoute = [
}, },
// 点进去其他用户的个人中心 // 点进去其他用户的个人中心
{ {
path: 'otherUserPage/:id/:isShiming', path: 'otherUserPage/:userId/:isReal',
name: 'CultureOtherUserPage', name: 'CultureOtherUserPage',
component: () => import('@/views/otherUserPage/index.vue'), component: () => import('@/views/otherUserPage/index.vue'),
}, },
......
...@@ -10,7 +10,12 @@ ...@@ -10,7 +10,12 @@
<ArticleContent :articleDetail="articleDetail" /> <ArticleContent :articleDetail="articleDetail" />
<!-- 评论区 --> <!-- 评论区 -->
<Comment ref="commentRef" :id="id" v-model:total="articleDetail.replyCount" /> <Comment
ref="commentRef"
:id="id"
v-model:total="articleDetail.replyCount"
:isReal="isReal"
/>
</div> </div>
</div> </div>
</template> </template>
...@@ -20,11 +25,18 @@ import { getArticleDetail, type ArticleItemDto } from '@/api' ...@@ -20,11 +25,18 @@ import { getArticleDetail, type ArticleItemDto } from '@/api'
import ActionButtons from './components/actionButtons.vue' import ActionButtons from './components/actionButtons.vue'
import Comment from '@/components/common/Comment/index.vue' import Comment from '@/components/common/Comment/index.vue'
import ArticleContent from '@/components/common/ArticleContent/index.vue' import ArticleContent from '@/components/common/ArticleContent/index.vue'
import { ArticleTypeEnum } from '@/constants'
const commentRef = useTemplateRef<typeof Comment | null>('commentRef') const commentRef = useTemplateRef<typeof Comment | null>('commentRef')
const route = useRoute() const route = useRoute()
const id = route.params.id as string const id = route.params.id as string
const isReal = computed(() => {
return +(
articleDetail.value.type === ArticleTypeEnum.PRACTICE ||
articleDetail.value.type === ArticleTypeEnum.INTERVIEW
)
})
const articleDetail = ref({} as ArticleItemDto) const articleDetail = ref({} as ArticleItemDto)
const initPage = () => { const initPage = () => {
......
...@@ -137,15 +137,13 @@ ...@@ -137,15 +137,13 @@
<div class="max-w-7xl mx-auto py-6"> <div class="max-w-7xl mx-auto py-6">
<div class="flex items-center justify-end gap-4"> <div class="flex items-center justify-end gap-4">
<!-- 左侧:回到顶部按钮 --> <!-- 左侧:回到顶部按钮 -->
<div class="left"> <!-- <div class="left">
<ScrollTopComp /> <ScrollTopComp />
</div> </div> -->
<!-- 右侧:分页器 --> <!-- 右侧:分页器 -->
<div class="right"> <div class="right">
<div <div class="pr-4">
class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3"
>
<el-pagination <el-pagination
v-model:current-page="searchParams.current" v-model:current-page="searchParams.current"
v-model:page-size="searchParams.size" v-model:page-size="searchParams.size"
......
...@@ -152,6 +152,7 @@ ...@@ -152,6 +152,7 @@
:id="item.id" :id="item.id"
:total="item.replyCount" :total="item.replyCount"
:defaultSize="5" :defaultSize="5"
:isReal="0"
@commentSuccess="() => handleCommentSuccess(item)" @commentSuccess="() => handleCommentSuccess(item)"
/> />
</Transition> </Transition>
......
...@@ -197,7 +197,7 @@ ...@@ -197,7 +197,7 @@
>{{ item.label }} >{{ item.label }}
</span> </span>
</div> </div>
<span class="text-#999 cursor-pointer" @click="router.push(`/userPage?key=task`)"> <span class="text-#999 cursor-pointer" @click="router.push(`/userPage/selfTask`)">
查看更多 查看更多
</span> </span>
</h2> </h2>
......
<template> <template>
<div class="min-h-screen bg-gray-50 rounded-lg"> <div class="min-h-screen bg-gray-50 rounded-lg">
<!-- 顶部背景区域 --> <!-- 顶部背景区域 -->
<div class="box relative h-200px bg-gradient-to-r from-purple-400 via-pink-300 to-blue-300"> <div
<!-- 顶部操作按钮 --> class="box relative h-150px bg-gradient-to-r from-purple-400 via-pink-300 to-blue-300"
<div class="absolute top-4 right-4 flex gap-2"> ></div>
<el-button v-if="!userInfo.isOfficialAccount" type="info" plain size="small"
@click="handleClearCache">清除缓存</el-button>
<el-button v-if="officialAccountList.length" type="info" plain size="small"
@click="handleSwitchAccount">切换账号</el-button>
<el-button v-if="userInfo.isOfficialAccount" type="info" plain size="small"
@click="handleBackUser">返回个人账号</el-button>
<!-- v-if="userInfo.isAdmin" 暂时不加权限 -->
<el-button type="primary" plain size="small" @click="handleAdmin">后台管理</el-button>
</div>
</div>
<!-- 主要内容区域 --> <!-- 主要内容区域 -->
<div class="relative -mt-20 p-6"> <div class="relative -mt-20 p-6">
...@@ -23,16 +13,20 @@ ...@@ -23,16 +13,20 @@
<!-- 个人信息卡片 --> <!-- 个人信息卡片 -->
<div class="bg-white rounded-lg shadow-sm p-6 mb-4"> <div class="bg-white rounded-lg shadow-sm p-6 mb-4">
<div class="flex items-start gap-4"> <div class="flex items-start gap-4">
<el-avatar :size="80" :src="userInfo?.avatar" class="border-4 border-white shadow-lg" /> <el-avatar
:size="80"
:src="userInfo?.avatar"
class="border-4 border-white shadow-lg"
/>
<div class="flex-1"> <div class="flex-1">
<h2 class="text-xl font-semibold text-gray-800 mb-1">{{ userInfo?.name }}</h2> <h2 class="text-xl font-semibold text-gray-800 mb-1">{{ userInfo?.name }}</h2>
<p class="text-gray-500 text-sm mb-2">{{ userInfo?.signature }}</p> <p class="text-gray-500 text-sm mb-2">{{ userInfo?.signature }}</p>
<el-button type="warning" size="small" plain @click="handleEdit"> <!-- <el-button type="warning" size="small" plain @click="handleEdit">
<el-icon> <el-icon>
<Edit /> <Edit />
</el-icon> </el-icon>
修改资料 修改资料
</el-button> </el-button> -->
</div> </div>
</div> </div>
</div> </div>
...@@ -49,10 +43,16 @@ ...@@ -49,10 +43,16 @@
</div> </div>
<div v-else class="space-y-4"> <div v-else class="space-y-4">
<div v-for="item in list" :key="item.id" <div
class="flex items-center p-2 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer px-6"> @click="handleOpenArticle(item)"
v-for="item in list"
:key="item.id"
class="flex items-center p-2 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer px-6"
>
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<div class="text-gray-900 font-medium truncate">{{ item.title || '测试标题' }}</div> <div class="text-gray-900 font-medium truncate">
{{ item.title || '测试标题' }}
</div>
<div class="text-gray-500 text-sm mt-1 truncate"> <div class="text-gray-500 text-sm mt-1 truncate">
<span class="mr-2"> <span class="mr-2">
{{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }} {{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
...@@ -64,12 +64,22 @@ ...@@ -64,12 +64,22 @@
</div> </div>
<div class="flex items-center text-gray-400 text-sm ml-4"> <div class="flex items-center text-gray-400 text-sm ml-4">
<el-button type="primary" link @click="openArticleDetail(item.id)"> <el-link type="primary" link>
去回复 {{ articleTypeListOptions.find((i) => i.value === item.type)?.label || '--' }}
</el-button> </el-link>
</div> </div>
<!-- <el-divider /> --> <!-- <el-divider /> -->
</div> </div>
<!-- 分页 -->
<div class="flex justify-end p-6">
<el-pagination
v-model:current-page="searchParams.current"
v-model:page-size="searchParams.size"
:total="total"
@size-change="changePageSize"
@current-change="goToPage"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -87,14 +97,21 @@ import { generateLoginKey, hasOfficialAccount, getOtherUserData, getOtherUserPos ...@@ -87,14 +97,21 @@ import { generateLoginKey, hasOfficialAccount, getOtherUserData, getOtherUserPos
import type { OfficialAccountItemDto } from '@/api/user/types' import type { OfficialAccountItemDto } from '@/api/user/types'
import { wxLogin } from '@/utils/wxUtil' import { wxLogin } from '@/utils/wxUtil'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { usePageSearch } from '@/hooks'
import { ArticleTypeEnum, articleTypeListOptions } from '@/constants'
const route = useRoute() const route = useRoute()
const list = [{}, {}]
const userStore = useUserStore() const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore) const { userInfo } = storeToRefs(userStore)
const { list, total, loading, searchParams, search, reset, goToPage, changePageSize, refresh } =
usePageSearch(getOtherUserPostData, {
defaultParams: {
createUserId: route.params.userId as string,
isReal: +(route.params.isReal as string),
},
})
const officialAccountList = ref<OfficialAccountItemDto[]>([]) const officialAccountList = ref<OfficialAccountItemDto[]>([])
const getIsOfficial = async () => { const getIsOfficial = async () => {
...@@ -103,17 +120,12 @@ const getIsOfficial = async () => { ...@@ -103,17 +120,12 @@ const getIsOfficial = async () => {
officialAccountList.value = data officialAccountList.value = data
} }
onMounted(() => { onMounted(() => {
// getOtherUserData({ getOtherUserData({
// userId: route.params.userId as string, userId: route.params.userId as string,
// isReal: 1, isReal: +(route.params.isReal as string),
// }) })
// getOtherUserPostData({
// userId: route.params.userId as string,
// isReal: 1,
// current: 1,
// size: 10,
// })
}) })
const handleSwitchAccount = async () => { const handleSwitchAccount = async () => {
const selectedEmail = ref('') const selectedEmail = ref('')
ElMessageBox({ ElMessageBox({
...@@ -221,6 +233,14 @@ const handleClearCache = async () => { ...@@ -221,6 +233,14 @@ const handleClearCache = async () => {
window.location.reload() window.location.reload()
} }
const handleOpenArticle = (item: any) => {
if (item.type === ArticleTypeEnum.VIDEO) {
window.open(`/videoDetail/${item.id}`)
} else {
window.open(`/articleDetail/${item.id}`)
}
}
onMounted(() => { onMounted(() => {
getIsOfficial() getIsOfficial()
}) })
......
...@@ -157,15 +157,13 @@ ...@@ -157,15 +157,13 @@
<div class="max-w-7xl mx-auto py-6"> <div class="max-w-7xl mx-auto py-6">
<div class="flex items-center justify-end gap-4"> <div class="flex items-center justify-end gap-4">
<!-- 左侧:回到顶部按钮 --> <!-- 左侧:回到顶部按钮 -->
<div class="left"> <!-- <div class="left">
<ScrollTopComp /> <ScrollTopComp />
</div> </div> -->
<!-- 右侧:分页器 --> <!-- 右侧:分页器 -->
<div class="right"> <div class="right">
<div <div class="pr-4">
class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3"
>
<el-pagination <el-pagination
v-model:current-page="searchParams.current" v-model:current-page="searchParams.current"
v-model:page-size="searchParams.size" v-model:page-size="searchParams.size"
......
...@@ -223,7 +223,7 @@ ...@@ -223,7 +223,7 @@
</div> </div>
</div> </div>
<Comment ref="commentRef" :id="videoId" v-model:total="videoDetail.replyCount" /> <Comment ref="commentRef" :id="videoId" v-model:total="videoDetail.replyCount" :isReal="0" />
<RewardDialog ref="rewardDialogRef" v-model:rewardNum="videoDetail.rewardNum" /> <RewardDialog ref="rewardDialogRef" v-model:rewardNum="videoDetail.rewardNum" />
</div> </div>
</template> </template>
......
...@@ -138,15 +138,13 @@ ...@@ -138,15 +138,13 @@
<div class="max-w-7xl mx-auto py-6"> <div class="max-w-7xl mx-auto py-6">
<div class="flex items-center justify-end gap-4"> <div class="flex items-center justify-end gap-4">
<!-- 左侧:回到顶部按钮 --> <!-- 左侧:回到顶部按钮 -->
<div class="left"> <!-- <div class="left">
<ScrollTopComp /> <ScrollTopComp />
</div> </div> -->
<!-- 右侧:分页器 --> <!-- 右侧:分页器 -->
<div class="right"> <div class="right">
<div <div class="pr-4">
class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3"
>
<el-pagination <el-pagination
v-model:current-page="searchParams.current" v-model:current-page="searchParams.current"
v-model:page-size="searchParams.size" v-model:page-size="searchParams.size"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment