Skip to content

C
corporateCulture-qd
Commit 7ba4f1e9 by lijiabin
Options

【需求 17679】 feat: 调整跳转方式等

parent daeb355b
Showing with 165 additions and 98 deletions
src/components/common/ArticleContent/index.vue
......@@ -35,7 +35,7 @@
<!-- 优化后的右侧内容 -->
<div class="flex items-center gap-3">
<span
class="px-3 py-1.5 text-sm font-medium bg-gray-100 text-gray-700 rounded-md"
class="px-3 py-1.5 text-sm font-medium bg-blue-50 text-blue-600 rounded-md hover:bg-blue-100 transition-colors""
v-if="articleDetail.relateColumn"
>
{{ articleDetail.relateColumn }}
......
src/views/homePage/homeTab/components/recommendList.vue
......@@ -127,8 +127,6 @@ import { TABS_REF_KEY, ArticleTypeEnum } from '@/constants'
import { useScrollTop } from '@/hooks'
import dayjs from 'dayjs'
const router = useRouter()
const { list, total, searchParams, loading, goToPage, changePageSize, refresh } = usePageSearch(
getArticleList,
{
......@@ -144,9 +142,9 @@ const { ScrollTopComp, handleBackTop } = useScrollTop(tabsRef!)
const handleClickItem = (item: ArticleItemDto) => {
if (item.type === ArticleTypeEnum.VIDEO) {
router.push(`/videoDetail/${item.id}`)
window.open(`/videoDetail/${item.id}`)
} else {
router.push(`/articleDetail/${item.id}`)
window.open(`/articleDetail/${item.id}`)
}
}
......
src/views/homePage/yaTab/components/columnList.vue
......@@ -2,33 +2,52 @@
<div>
<div v-loading="loading" v-if="list.length">
<div class="w-full max-w-6xl mx-auto">
<div v-for="(item, index) in list" :key="index" class="bg-white rounded-lg shadow-sm mb-6 overflow-hidden"
:style="{ '--dynamic-color': item.color }">
<div class="flex items-center justify-between pr-4 pl-4 pt-2 pb-2 bg-green-50 border-b border-green-100"
:style="{ backgroundColor: item.color, '--dynamic-color': item.color }">
<div
v-for="(item, index) in list"
:key="index"
class="bg-white rounded-lg shadow-sm mb-6 overflow-hidden"
:style="{ '--dynamic-color': item.color }"
>
<div
class="flex items-center justify-between pr-4 pl-4 pt-2 pb-2 bg-green-50 border-b border-green-100"
:style="{ backgroundColor: item.color, '--dynamic-color': item.color }"
>
<h3 class="text-lg font-medium text-gray-800 flex items-center">
<span class="w-1 h-5 mr-2 bg-#444"></span>
{{ item.title }}
</h3>
<div class="flex items-center cursor-pointer" @click="router.push({
path: '/searchPage',
query: {
type: ArticleTypeEnum.COLUMN
}
})">
<div
class="flex items-center cursor-pointer"
@click="
router.push({
path: '/searchPage',
query: {
type: ArticleTypeEnum.COLUMN,
},
})
"
>
<span class="mr-1 text-14px color-#606266">查看更多 >></span>
</div>
</div>
<div class="p-4">
<div v-if="item.yaColumnVoList.length" class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div v-for="i in item.yaColumnVoList" :key="i.articleId" class="group cursor-pointer"
@click="router.push(`/articleDetail/${i.articleId}`)">
<div
v-for="i in item.yaColumnVoList"
:key="i.articleId"
class="group cursor-pointer"
@click="openArticleDetail(i.articleId)"
>
<div class="relative mb-3 overflow-hidden rounded-lg">
<img :src="i.faceUrl"
class="w-full aspect-[5/3] object-cover group-hover:scale-105 transition-transform duration-300" />
<div v-if="i.isRecommend"
class="absolute top--1 left--1 w-15 h-7 z-1000 bg-#FFF9B9 flex items-center justify-center border-2px border-solid border-#f4f0eb rounded-tl-lg rounded-br-lg">
<img
:src="i.faceUrl"
class="w-full aspect-[5/3] object-cover group-hover:scale-105 transition-transform duration-300"
/>
<div
v-if="i.isRecommend"
class="absolute top--1 left--1 w-15 h-7 z-1000 bg-#FFF9B9 flex items-center justify-center border-2px border-solid border-#f4f0eb rounded-tl-lg rounded-br-lg"
>
<img class="w-6" src="@/assets/img/culture/recommend.png" alt="" />
<div class="text-12px text-#000 line-height-12px">推荐</div>
</div>
......@@ -79,14 +98,23 @@
</div>
<!-- 右侧：分页器 -->
<div class="right">
<div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3">
<el-pagination v-model:current-page="searchParams.current" v-model:page-size="searchParams.size"
:page-sizes="[15, 30, 45, 60]" layout="prev, pager, next, jumper, total" :total="total"
class="custom-pagination" @current-change="
<div
class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3"
>
<el-pagination
v-model:current-page="searchParams.current"
v-model:page-size="searchParams.size"
:page-sizes="[15, 30, 45, 60]"
layout="prev, pager, next, jumper, total"
:total="total"
class="custom-pagination"
@current-change="
(e) => {
; (handleBackTop(), goToPage(e))
;(handleBackTop(), goToPage(e))
}
" @size-change="changePageSize" />
"
@size-change="changePageSize"
/>
</div>
</div>
</div>
......@@ -125,6 +153,10 @@ defineExpose({
refresh()
},
})
const openArticleDetail = (id: number) => {
window.open(`/articleDetail/${id}`)
}
</script>
<style scoped></style>
src/views/homePage/yaTab/components/interviewList.vue
......@@ -2,33 +2,54 @@
<div>
<div v-loading="loading" v-if="list.length">
<div class="w-full max-w-6xl mx-auto">
<div v-for="(item, index) in list" :key="index" class="bg-white rounded-lg shadow-sm mb-6 overflow-hidden"
:style="{ '--dynamic-color': item.color }">
<div class="flex items-center justify-between pr-4 pl-4 pt-2 pb-2 bg-green-50 border-b border-green-100"
:style="{ backgroundColor: item.color, '--dynamic-color': item.color }">
<div
v-for="(item, index) in list"
:key="index"
class="bg-white rounded-lg shadow-sm mb-6 overflow-hidden"
:style="{ '--dynamic-color': item.color }"
>
<div
class="flex items-center justify-between pr-4 pl-4 pt-2 pb-2 bg-green-50 border-b border-green-100"
:style="{ backgroundColor: item.color, '--dynamic-color': item.color }"
>
<h3 class="text-lg font-medium text-gray-800 flex items-center">
<span class="w-1 h-5 mr-2 bg-#444"></span>
{{ item.title }}
</h3>
<div class="flex items-center cursor-pointer hover:text-[var(--dynamic-color)]" @click="router.push({
path: '/searchPage',
query: {
type: ArticleTypeEnum.INTERVIEW
}
})">
<span class="mr-1 text-14px color-#606266 hover:text-[var(--dynamic-color)]">查看更多 >></span>
<div
class="flex items-center cursor-pointer hover:text-[var(--dynamic-color)]"
@click="
router.push({
path: '/searchPage',
query: {
type: ArticleTypeEnum.INTERVIEW,
},
})
"
>
<span class="mr-1 text-14px color-#606266 hover:text-[var(--dynamic-color)]"
>查看更多 >></span
>
</div>
</div>
<div class="p-4">
<div v-if="item.yaColumnVoList.length" class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div v-for="i in item.yaColumnVoList" :key="i.articleId" class="group cursor-pointer"
@click="router.push(`/articleDetail/${i.articleId}`)">
<div
v-for="i in item.yaColumnVoList"
:key="i.articleId"
class="group cursor-pointer"
@click="openArticleDetail(i.articleId)"
>
<div class="relative mb-3 overflow-hidden rounded-lg">
<img :src="i.faceUrl"
class="w-full aspect-[5/3] object-cover group-hover:scale-105 transition-transform duration-300" />
<div v-if="i.isRecommend"
class="absolute top-0 left-0 w-15 h-7 z-1000 bg-#FFF9B9 flex items-center justify-center border-2px border-solid border-#f4f0eb rounded-tl-lg rounded-br-lg">
<img
:src="i.faceUrl"
class="w-full aspect-[5/3] object-cover group-hover:scale-105 transition-transform duration-300"
/>
<div
v-if="i.isRecommend"
class="absolute top-0 left-0 w-15 h-7 z-1000 bg-#FFF9B9 flex items-center justify-center border-2px border-solid border-#f4f0eb rounded-tl-lg rounded-br-lg"
>
<img class="w-6" src="@/assets/img/culture/recommend.png" alt="" />
<div class="text-12px text-#000 line-height-12px">推荐</div>
</div>
......@@ -79,14 +100,23 @@
</div>
<!-- 右侧：分页器 -->
<div class="right">
<div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3">
<el-pagination v-model:current-page="searchParams.current" v-model:page-size="searchParams.size"
:page-sizes="[15, 30, 45, 60]" layout="prev, pager, next, jumper, total" :total="total"
class="custom-pagination" @current-change="
<div
class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3"
>
<el-pagination
v-model:current-page="searchParams.current"
v-model:page-size="searchParams.size"
:page-sizes="[15, 30, 45, 60]"
layout="prev, pager, next, jumper, total"
:total="total"
class="custom-pagination"
@current-change="
(e) => {
; (handleBackTop(), goToPage(e))
;(handleBackTop(), goToPage(e))
}
" @size-change="changePageSize" />
"
@size-change="changePageSize"
/>
</div>
</div>
</div>
......@@ -102,7 +132,7 @@
</template>
<script setup lang="ts">
import { ArrowRight, View, ChatDotRound, Star } from '@element-plus/icons-vue'
import { View, ChatDotRound, Star } from '@element-plus/icons-vue'
import { getInterviewList } from '@/api'
import { usePageSearch, useScrollTop } from '@/hooks'
import { TABS_REF_KEY, ArticleTypeEnum } from '@/constants'
......@@ -125,6 +155,10 @@ defineExpose({
refresh()
},
})
const openArticleDetail = (id: number) => {
window.open(`/articleDetail/${id}`)
}
</script>
<style scoped></style>
src/views/homePage/yaTab/components/practiceList.vue
......@@ -59,7 +59,7 @@
<div class="divide-y bg-#fff">
<div
@click="router.push(`/articleDetail/${item.id}`)"
@click="openArticleDetail(item.id)"
v-for="item in list"
:key="item.id"
class="p-4 hover:bg-gray-50 transition-colors cursor-pointer"
......@@ -215,6 +215,10 @@ defineExpose({
refresh()
},
})
const openArticleDetail = (id: number) => {
window.open(`/articleDetail/${id}`)
}
</script>
<style scoped></style>
src/views/searchPage/index.vue
......@@ -2,16 +2,25 @@
<div ref="searchPageRef" class="bg-white/90">
<div>
<!-- 搜索栏 -->
<div class="mb-1 p-4">
<div class="relative flex items-center gap-3">
<el-input
v-model="searchParams.title"
placeholder="输入关键词搜索"
class="w-300px! flex-1"
@keyup.enter="handleSearch"
clearable
/>
<el-button type="primary" @click="handleSearch"> 搜索 </el-button>
<div class="p-4">
<div class="flex items-center gap-2 justify-between">
<el-button link @click="router.back()" class="text-gray-600 hover:text-primary">
<el-icon class="mr-1"><ArrowLeft /></el-icon>
返回
</el-button>
<div class="w-auto flex items-center gap-2">
<el-input
v-model="searchParams.title"
placeholder="输入关键词搜索"
class="w-400px"
size="default"
@keyup.enter="handleSearch"
clearable
/>
<el-button type="primary" @click="handleSearch">搜索</el-button>
</div>
</div>
</div>
......@@ -234,9 +243,9 @@ const handleSearch = () => {
const handleClick = (item: ArticleListItemDto) => {
if (item.type === ArticleTypeEnum.VIDEO) {
router.push(`/videoDetail/${item.id}`)
window.open(`/videoDetail/${item.id}`)
} else {
router.push(`/articleDetail/${item.id}`)
window.open(`/articleDetail/${item.id}`)
}
}
......
src/views/userPage/components/SelfComplaint.vue
......@@ -122,8 +122,6 @@ import { AuditStatusEnum, ArticleTypeEnum } from '@/constants'
import type { AuditComplaintDto, ComplaintListItemDto } from '@/api'
import type { TabPaneName } from 'element-plus'
const router = useRouter()
const toggleTab = (key: TabPaneName) => {
searchParams.value.status = key as AuditStatusEnum
refresh()
......@@ -159,9 +157,9 @@ const handleAudit = async (data: AuditComplaintDto) => {
const handleToDetail = (item: ComplaintListItemDto) => {
if (item.type === ArticleTypeEnum.VIDEO) {
router.push(`/videoDetail/${item.articleId}`)
window.open(`/videoDetail/${item.articleId}`)
} else {
router.push(`/articleDetail/${item.articleId}`)
window.open(`/articleDetail/${item.articleId}`)
}
}
</script>
src/views/userPage/components/selfAnswer.vue
......@@ -36,9 +36,7 @@
</div>
<div class="flex items-center text-gray-400 text-sm ml-4">
<el-button type="primary" link @click="router.push(`/articleDetail/${item.id}`)">
去回复
</el-button>
<el-button type="primary" link @click="openArticleDetail(item.id)"> 去回复 </el-button>
</div>
</div>
</div>
......@@ -70,8 +68,6 @@ import { answerQuestionPage } from '@/api'
import { usePageSearch } from '@/hooks'
import dayjs from 'dayjs'
const router = useRouter()
const { list, loading, searchParams, total, refresh, goToPage, changePageSize } = usePageSearch(
answerQuestionPage,
{
......@@ -81,4 +77,8 @@ const { list, loading, searchParams, total, refresh, goToPage, changePageSize }
onActivated(() => {
refresh()
})
const openArticleDetail = (id: number) => {
window.open(`/articleDetail/${id}`)
}
</script>
src/views/userPage/components/selfAudit.vue
......@@ -65,9 +65,7 @@
v-if="searchParams.isAudit === AuditStatusEnum.UNAUDITED"
class="flex items-center text-gray-400 text-sm ml-4"
>
<el-button type="info" link @click="router.push(`/auditArticle/${item.id}`)"
>去详情页审核</el-button
>
<el-button type="info" link @click="openArticleDetail(item.id)">去详情页审核</el-button>
<el-button
type="primary"
......@@ -126,12 +124,9 @@ import { usePageSearch } from '@/hooks'
import { auditTypeListOptions, articleTypeListOptions } from '@/constants/options'
import dayjs from 'dayjs'
import { AuditStatusEnum } from '@/constants'
import type { AuditArticleDto } from '@/api'
import type { AuditArticleDto, AuditListItemDto } from '@/api'
import type { TabPaneName } from 'element-plus'
import { ArticleTypeEnum } from '@/constants'
import type { ArticleItemDto } from '@/api'
const router = useRouter()
const toggleTab = (key: TabPaneName) => {
searchParams.value.isAudit = key as AuditStatusEnum
......@@ -166,11 +161,15 @@ const handleAudit = async (data: AuditArticleDto) => {
refresh()
}
const handleView = (item: ArticleItemDto) => {
const handleView = (item: AuditListItemDto) => {
if (item.type === ArticleTypeEnum.VIDEO) {
router.push(`/videoDetail/${item.id}`)
window.open(`/videoDetail/${item.id}`)
} else {
router.push(`/articleDetail/${item.id}`)
window.open(`/articleDetail/${item.id}`)
}
}
const openArticleDetail = (id: number) => {
window.open(`/articleDetail/${id}`)
}
</script>
src/views/userPage/components/selfCollect.vue
......@@ -84,8 +84,6 @@ import { ArticleTypeEnum } from '@/constants/enums'
import type { TabPaneName } from 'element-plus'
import type { SelfCollectDetailDto } from '@/api'
const router = useRouter()
const toggleTab = (key: TabPaneName) => {
searchParams.value.type = key as ArticleTypeEnum
refresh()
......@@ -101,11 +99,10 @@ const { list, loading, searchParams, total, refresh, goToPage, changePageSize }
)
const handleView = (item: SelfCollectDetailDto) => {
console.log(item)
if (item.type === ArticleTypeEnum.VIDEO) {
router.push(`/videoDetail/${item.id}`)
window.open(`/videoDetail/${item.id}`)
} else {
router.push(`/articleDetail/${item.id}`)
window.open(`/articleDetail/${item.id}`)
}
}
</script>
src/views/userPage/components/selfComment.vue
......@@ -99,7 +99,6 @@ import type { TabPaneName } from 'element-plus'
import type { SelfCommentItemDto } from '@/api/user/types'
const route = useRoute()
const router = useRouter()
const toggleTab = (key: TabPaneName) => {
searchParams.value.type = key as ArticleTypeEnum
......@@ -130,9 +129,9 @@ const handleDelete = async (id: number) => {
const handleView = (item: SelfCommentItemDto) => {
if (item.type === ArticleTypeEnum.VIDEO) {
router.push(`/videoDetail/${item.articleId}`)
window.open(`/videoDetail/${item.articleId}`)
} else {
router.push(`/articleDetail/${item.articleId}`)
window.open(`/articleDetail/${item.articleId}`)
}
}
......
src/views/userPage/components/selfPraise.vue
......@@ -82,8 +82,6 @@ import dayjs from 'dayjs'
import { ArticleTypeEnum } from '@/constants/enums'
import type { SelfPraiseDetailDto } from '@/api/user/types'
const router = useRouter()
const toggleTab = (key: TabPaneName) => {
searchParams.value.type = key as ArticleTypeEnum
refresh()
......@@ -100,9 +98,9 @@ const { list, loading, searchParams, total, refresh, goToPage, changePageSize }
const handleView = (item: SelfPraiseDetailDto) => {
if (item.type === ArticleTypeEnum.VIDEO) {
router.push(`/videoDetail/${item.id}`)
window.open(`/videoDetail/${item.id}`)
} else {
router.push(`/articleDetail/${item.id}`)
window.open(`/articleDetail/${item.id}`)
}
}
</script>
src/views/userPage/components/selfPublish.vue
......@@ -83,7 +83,6 @@ import dayjs from 'dayjs'
import { ArticleTypeEnum } from '@/constants/enums'
import type { SelfPublishDetailDto } from '@/api'
import type { TabPaneName } from 'element-plus'
const router = useRouter()
const toggleTab = (key: TabPaneName) => {
searchParams.value.type = key as ArticleTypeEnum
......@@ -101,9 +100,9 @@ const { list, loading, searchParams, total, refresh, goToPage, changePageSize }
const handleView = (item: SelfPublishDetailDto) => {
if (item.type === ArticleTypeEnum.VIDEO) {
router.push(`/videoDetail/${item.id}`)
window.open(`/videoDetail/${item.id}`)
} else {
router.push(`/articleDetail/${item.id}`)
window.open(`/articleDetail/${item.id}`)
}
}
const handleDelete = async (articleId: number) => {
......
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