Commit e02e14c2 by lijiabin

【需求 17679】 perf: 优化实践等部分

parent 741b36b7
......@@ -25,6 +25,7 @@ export interface PracticeSearchParams extends PageSearchParams {
sortLogic: number
tagIdList: number[]
deptIdList: string[]
title?: string
}
/**
......
......@@ -24,29 +24,29 @@
</button>
<button
class="cursor-pointer px-3 py-1.5 text-sm transition-all relative"
@click="((searchParams.sortType = 1), refresh())"
@click="((searchParams.sortType = 4), refresh())"
:class="{
'text-indigo-600 font-medium': searchParams.sortType === 1,
'text-gray-600 hover:text-gray-900': searchParams.sortType !== 1,
'text-indigo-600 font-medium': searchParams.sortType === 4,
'text-gray-600 hover:text-gray-900': searchParams.sortType !== 4,
}"
>
最多评论
最多点赞
<span
v-if="searchParams.sortType === 1"
v-if="searchParams.sortType === 4"
class="absolute bottom-0 left-0 right-0 h-0.5 bg-indigo-600"
></span>
</button>
<button
class="cursor-pointer px-3 py-1.5 text-sm transition-all relative"
@click="((searchParams.sortType = 4), refresh())"
@click="((searchParams.sortType = 1), refresh())"
:class="{
'text-indigo-600 font-medium': searchParams.sortType === 4,
'text-gray-600 hover:text-gray-900': searchParams.sortType !== 4,
'text-indigo-600 font-medium': searchParams.sortType === 1,
'text-gray-600 hover:text-gray-900': searchParams.sortType !== 1,
}"
>
最多点赞
最多评论
<span
v-if="searchParams.sortType === 4"
v-if="searchParams.sortType === 1"
class="absolute bottom-0 left-0 right-0 h-0.5 bg-indigo-600"
></span>
</button>
......@@ -122,7 +122,7 @@
<!-- <span class="px-2 py-0.5 text-xs bg-red-100 text-red-600 rounded-full">置顶</span> -->
</div>
<!-- 换行 -->
<p class="text-gray-700 my-2 break-all whitespace-pre-wrap">
<p class="text-gray-800 my-2 break-all whitespace-pre-wrap">
{{ item.content }}
</p>
<div class="flex items-center justify-between">
......@@ -166,11 +166,12 @@
/>
<div class="flex-1">
<div class="flex items-center gap-2 mb-1">
<span class="font-medium text-sm text-gray-800"
>{{ child.replyUser }} 回复 @{{ child.replyName }}</span
<span class="font-medium text-sm text-gray-800">
<span class="text-gray-600">{{ child.replyUser }} </span> 回复
<span>{{ child.replyName }}</span></span
>
</div>
<p class="text-gray-700 my-2 break-all whitespace-pre-wrap">
<p class="text-gray-800 my-2 break-all whitespace-pre-wrap">
{{ child.content }}
</p>
<div class="flex items-center justify-between">
......
......@@ -155,6 +155,12 @@ export const constantsRoute = [
name: 'CultureColumnSearchList',
component: () => import('@/views/columnSearchList/index.vue'),
},
// YA文化实践的搜索
{
path: 'practiceSearchList',
name: 'CulturePracticeSearchList',
component: () => import('@/views/practiceSearchList/index.vue'),
},
// YA文化视频的搜索
{
path: 'videoSearchList/:id?',
......
......@@ -12,8 +12,14 @@
</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-input
v-model="searchParams.title"
placeholder="输入关键词搜索"
class="w-400px"
size="default"
@keyup.enter="handleSearch"
clearable
/>
<el-button type="primary" @click="handleSearch">搜索</el-button>
</div>
......@@ -45,19 +51,29 @@
</div>
<div class="text-gray-500 text-14px">
<el-radio-group size="default" v-model="searchParams.sortLogic" @change="changeSort">
<el-radio-button v-for="sort in sortOptions" :key="sort.value" :label="sort.label" :value="sort.value" />
<el-radio-button
v-for="sort in sortOptions"
:key="sort.value"
:label="sort.label"
:value="sort.value"
/>
</el-radio-group>
</div>
</div>
<div v-show="list.length">
<div class="space-y-4">
<div v-for="item in list" :key="item.articleId"
<div
v-for="item in list"
:key="item.articleId"
class="flex gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
@click="handleClick(item)">
@click="handleClick(item)"
>
<!-- 封面图 -->
<div v-if="item.faceUrl"
class="flex-shrink-0 w-240px h-135px rounded-lg overflow-hidden bg-gray-100 relative">
<div
v-if="item.faceUrl"
class="flex-shrink-0 w-240px h-135px rounded-lg overflow-hidden bg-gray-100 relative"
>
<img :src="item.faceUrl" class="w-full h-full object-cover" />
<!-- <div
v-if="item.type === ArticleTypeEnum.VIDEO"
......@@ -76,9 +92,10 @@
</h3>
<!-- 描述 -->
<p class="text-14px text-gray-600 mb-3 line-clamp-2">
<!-- 富文本暂时去掉 -->
<!-- <p class="text-14px text-gray-600 mb-3 line-clamp-2">
{{ item.content }}
</p>
</p> -->
</div>
<!-- 底部信息 -->
......@@ -109,7 +126,7 @@
<div class="flex-shrink-0 self-end">
<span class="text-blue-600 text-13px">{{
articleTypeListOptions.find((i) => i.value === item.type)?.label
}}</span>
}}</span>
</div>
</div>
</div>
......@@ -125,13 +142,20 @@
<!-- 右侧:分页器 -->
<div class="right">
<div class="pr-4">
<el-pagination v-model:current-page="searchParams.current" v-model:page-size="searchParams.size"
:page-sizes="[5, 20, 1]" layout="prev, pager, next, jumper, total" :total="total"
class="custom-pagination" @current-change="
<el-pagination
v-model:current-page="searchParams.current"
v-model:page-size="searchParams.size"
:page-sizes="[5, 20, 1]"
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>
......@@ -162,8 +186,8 @@ const { ScrollTopComp, handleBackTop } = useScrollTop(searchPageRef)
const columnTitle = route.query.columnTitle || ''
const sortOptions = [
{ label: '最热', value: 0 },
{ label: '最新', value: 1 },
{ label: '最热', value: 0 },
]
const { total, goToPage, changePageSize, refresh, searchParams, list } = usePageSearch(
......@@ -193,7 +217,7 @@ const handleClick = (item: SearchMoreColumnItemDto) => {
window.open(`/articleDetail/${item.articleId}`)
}
onActivated(() => { })
onActivated(() => {})
</script>
<style scoped></style>
......@@ -55,9 +55,10 @@
<h3 class="text font-medium text-gray-800 mb-2 transition-colors line-clamp-1">
{{ i.title }}
</h3>
<p class="text-sm text-gray-500 mb-3 line-clamp-1">
<!-- 因为是富文本 暂时不显示 -->
<!-- <p class="text-sm text-gray-500 mb-3 line-clamp-1">
{{ i.content }}
</p>
</p> -->
<div class="flex items-center justify-between text-xs text-gray-500">
<div class="flex items-center space-x-4">
<span class="flex items-center">
......
......@@ -53,9 +53,10 @@
<h3 class="text-sm font-medium text-gray-800 mb-2 transition-colors line-clamp-1">
{{ i.title }}
</h3>
<p class="text-xs text-gray-500 mb-3 line-clamp-1">
<!-- 因为是富文本 暂时不显示 -->
<!-- <p class="text-xs text-gray-500 mb-3 line-clamp-1">
{{ i.content }}
</p>
</p> -->
<div class="flex items-center justify-between text-xs text-gray-400">
<div class="flex items-center space-x-4">
<span class="flex items-center">
......
......@@ -28,8 +28,9 @@
</div>
</div>
<!-- 先暂时去掉文化标签 -->
<!-- 标签筛选 (多选) -->
<div class="mb-6">
<!-- <div class="mb-6">
<div class="flex items-center gap-2 mb-3">
<div class="w-1 h-4 bg-gradient-to-b from-blue-400 to-blue-500 rounded-full"></div>
<span class="text-sm font-semibold text-gray-700">文化标签</span>
......@@ -61,7 +62,7 @@
</span>
</label>
</div>
</div>
</div> -->
<!-- 部门筛选 (多选) -->
<div>
......@@ -113,9 +114,11 @@
class="text-#999 cursor-pointer text-sm"
@click="
router.push({
path: '/searchPage',
path: '/practiceSearchList',
query: {
type: ArticleTypeEnum.PRACTICE,
sortLogic: searchParams.sortLogic,
tagIdList: searchParams.tagIdList.join(','),
deptIdList: searchParams.deptIdList.join(','),
},
})
"
......@@ -225,27 +228,26 @@
</template>
<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { getPracticeList } from '@/api/practice'
import { usePageSearch, useScrollTop } from '@/hooks'
import dayjs from 'dayjs'
import { TABS_REF_KEY } from '@/constants'
import { useTagsStore } from '@/stores/tags'
// import { useTagsStore } from '@/stores/tags'
// import { storeToRefs } from 'pinia'
import PublishPractice from '@/components/common/PublishBox/index.vue'
import { ArticleTypeEnum } from '@/constants'
import { jumpToArticleDetailPage } from '@/utils'
const tagsStore = useTagsStore()
const { tagList } = storeToRefs(tagsStore)
// const tagsStore = useTagsStore()
// const { tagList } = storeToRefs(tagsStore)
const router = useRouter()
const tabsRef = inject(TABS_REF_KEY)
const filterOptions = ref([
{ title: '最热', id: 0 },
{ title: '最新', id: 1 },
// { title: '最多观看', id: 2 },
{ title: '最热', id: 0 },
])
const firstDepList = ref([
{ id: '1825', name: 'Amazon产品开发部' },
......@@ -286,7 +288,6 @@ const filterText = computed(() => {
const toggleFilter = (id: number) => {
searchParams.value.sortLogic = id
refresh()
handleBackTop()
}
defineExpose({
......
<template>
<div ref="searchPageRef" class="bg-white/90">
<div>
<!-- 搜索栏 -->
<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>
<!-- 筛选面板 -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100/50 overflow-hidden mb-6">
<div class="px-6">
<!-- 排序方式 (单选) -->
<div class="mb-6">
<div class="flex items-center gap-2 mb-3">
<div class="w-1 h-4 bg-gradient-to-b from-blue-500 to-blue-600 rounded-full"></div>
<span class="text-sm font-semibold text-gray-700">排序方式</span>
</div>
<div class="flex flex-wrap gap-2">
<button
v-for="sort in sortOptions"
:key="sort.value"
@click="changeSort(sort.value)"
:class="[
'px-4 py-2 rounded-lg text-sm font-medium cursor-pointer transition-all duration-200',
searchParams.sortLogic === sort.value
? 'bg-blue-50 text-blue-600 border-2 border-blue-400 shadow-sm'
: 'bg-gray-50 text-gray-600 border-2 border-transparent hover:border-gray-200 hover:bg-gray-100',
]"
>
{{ sort.label }}
</button>
</div>
</div>
<!-- 部门筛选 (多选) -->
<div class="mb-6">
<div class="flex items-center gap-2 mb-3">
<div class="w-1 h-4 bg-gradient-to-b from-blue-400 to-blue-500 rounded-full"></div>
<span class="text-sm font-semibold text-gray-700">部门分类</span>
<span v-if="searchParams.deptIdList.length" class="text-xs text-gray-400">
(已选 {{ searchParams.deptIdList.length }} 个)
</span>
</div>
<div class="flex flex-wrap gap-2">
<label
v-for="item in firstDepList"
:key="item.id"
:class="[
'px-4 py-2 rounded-lg text-sm font-medium cursor-pointer transition-all duration-200',
searchParams.deptIdList.includes(item.id)
? 'bg-blue-50 text-blue-600 border-2 border-blue-400 shadow-sm'
: 'bg-gray-50 text-gray-600 border-2 border-transparent hover:border-gray-200 hover:bg-gray-100',
]"
>
<input
type="checkbox"
:value="item.id"
v-model="searchParams.deptIdList"
@change="refresh"
class="hidden"
/>
<span class="flex items-center gap-1.5">
<span v-if="searchParams.deptIdList.includes(item.id)" class="text-xs"></span>
{{ item.name }}
</span>
</label>
</div>
</div>
<!-- 标签筛选 (多选) -->
<div class="mb-6">
<div class="flex items-center gap-2 mb-3">
<div class="w-1 h-4 bg-gradient-to-b from-blue-400 to-blue-500 rounded-full"></div>
<span class="text-sm font-semibold text-gray-700">标签分类</span>
<span v-if="searchParams.tagIdList.length" class="text-xs text-gray-400">
(已选 {{ searchParams.tagIdList.length }} 个)
</span>
</div>
<div class="flex flex-wrap gap-2">
<label
v-for="item in tagList"
:key="item.id"
:class="[
'px-4 py-2 rounded-lg text-sm font-medium cursor-pointer transition-all duration-200',
searchParams.tagIdList.includes(item.id)
? 'bg-blue-50 text-blue-600 border-2 border-blue-400 shadow-sm'
: 'bg-gray-50 text-gray-600 border-2 border-transparent hover:border-gray-200 hover:bg-gray-100',
]"
>
<input
type="checkbox"
:value="item.id"
v-model="searchParams.tagIdList"
@change="refresh"
class="hidden"
/>
<span class="flex items-center gap-1.5">
<span v-if="searchParams.tagIdList.includes(item.id)" class="text-xs"></span>
{{ item.title }}
</span>
</label>
</div>
</div>
</div>
</div>
<div v-show="list.length" v-loading="loading">
<div class="space-y-4">
<div
v-for="item in list"
:key="item.id"
class="flex gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
@click="handleClick(item)"
>
<!-- 封面图 -->
<div
v-if="item.faceUrl"
class="flex-shrink-0 w-240px h-135px rounded-lg overflow-hidden bg-gray-100 relative"
>
<img :src="item.faceUrl" class="w-full h-full object-cover" />
<!-- <div
v-if="item.type === ArticleTypeEnum.VIDEO"
class="absolute bottom-2 right-2 bg-black/70 text-white text-12px px-2 py-0.5 rounded"
>
{{ item.videoDuration }}
</div> -->
</div>
<!-- 内容信息 -->
<div class="flex-1 flex flex-col justify-between min-w-0">
<div>
<!-- 标题 -->
<h3 class="text-16px font-500 text-gray-900 mb-2 line-clamp-1">
{{ item.title }}
</h3>
<!-- 描述 -->
<p class="text-14px text-gray-600 mb-3 line-clamp-2">
{{ item.content }}
</p>
</div>
<!-- 底部信息 -->
<div class="flex items-center gap-4 text-13px text-gray-500">
<span>{{ item.showName }}</span>
<span>{{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
<div class="flex items-center gap-1">
<el-icon class="text-sm">
<View />
</el-icon>
<span class="font-medium text-gray-500">{{ item.viewCount }}</span>
</div>
<div class="flex items-center gap-1">
<el-icon class="text-sm">
<ChatDotRound />
</el-icon>
<span class="font-medium">{{ item.replyCount }}</span>
</div>
<div class="flex items-center gap-1">
<el-icon class="text-sm">
<Star />
</el-icon>
<span class="font-medium">{{ item.praiseCount }}</span>
</div>
</div>
</div>
<div class="flex-shrink-0 self-end">
<span class="text-blue-600 text-13px">{{
articleTypeListOptions.find((i) => i.value === item.type)?.label
}}</span>
</div>
</div>
</div>
<div class="bottom-pagination backdrop-blur-8 border-t border-gray-200">
<div class="max-w-7xl mx-auto py-6">
<div class="flex items-center justify-end gap-4">
<!-- 左侧:回到顶部按钮 -->
<!-- <div class="left">
<ScrollTopComp />
</div> -->
<!-- 右侧:分页器 -->
<div class="right">
<div class="pr-4">
<el-pagination
v-model:current-page="searchParams.current"
v-model:page-size="searchParams.size"
:page-sizes="[5, 20, 1]"
layout="prev, pager, next, jumper, total"
:total="total"
class="custom-pagination"
@current-change="
async (e) => {
await goToPage(e)
handleBackTop()
}
"
@size-change="changePageSize"
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-show="!list.length">
<div class="flex items-center justify-center h-full">
<el-empty description="暂无数据" />
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ArticleTypeEnum, articleTypeListOptions } from '@/constants'
import { getPracticeList } from '@/api'
import { usePageSearch, useScrollTop } from '@/hooks'
import dayjs from 'dayjs'
import type { PracticeItemDto } from '@/api'
import { storeToRefs } from 'pinia'
import { useTagsStore } from '@/stores/tags'
const tagsStore = useTagsStore()
const { tagList } = storeToRefs(tagsStore)
const router = useRouter()
const route = useRoute()
const searchPageRef = ref<HTMLElement | null>(null)
const { handleBackTop } = useScrollTop(searchPageRef)
const firstDepList = ref([
{ id: '1825', name: 'Amazon产品开发部' },
{ id: '76', name: 'Amazon销售部' },
{ id: '139', name: 'Amazon运营部' },
{ id: '5114', name: 'Temu销售部' },
{ id: '4491', name: 'Tiktok项目部' },
{ id: '39', name: '视觉设计部' },
{ id: '23', name: '知识产权部' },
{ id: '499', name: '供应链管理部' },
{ id: '20', name: 'IT技术部' },
{ id: '5', name: '财务部' },
{ id: '2357', name: '人力发展中心' },
{ id: '683', name: '副总经理' },
{ id: '6', name: '总经理' },
{ id: '3', name: '董事长' },
])
const sortOptions = [
{ label: '最新', value: 1 },
{ label: '最热', value: 0 },
]
const { total, goToPage, changePageSize, refresh, searchParams, list, loading } = usePageSearch(
getPracticeList,
{
defaultParams: {
type: ArticleTypeEnum.PRACTICE,
sortLogic: 0,
tagIdList: [],
deptIdList: [],
},
immediate: false,
},
)
const changeSort = (value: number) => {
searchParams.value.sortLogic = value
refresh()
}
const handleSearch = () => {
refresh()
}
const handleClick = (item: PracticeItemDto) => {
window.open(`/articleDetail/${item.id}`)
}
onActivated(() => {
searchParams.value.sortLogic = Number(route.query.sortLogic) || 0
searchParams.value.tagIdList =
(route.query.tagIdList as string)?.split(',').filter(Boolean).map(Number) || []
searchParams.value.deptIdList =
(route.query.deptIdList as string)?.split(',').filter(Boolean) || []
console.log(searchParams.value)
refresh()
})
</script>
<style scoped></style>
......@@ -117,8 +117,8 @@
fill="#3b82f6"
>
<el-radio-button label="最新" :value="2" />
<el-radio-button label="最多评论" :value="1" />
<el-radio-button label="最多点赞" :value="4" />
<el-radio-button label="最多评论" :value="1" />
</el-radio-group>
<!-- <span
@click="changeSortType(2)"
......@@ -308,7 +308,7 @@ const { list, total, searchParams, goToPage, refresh } = usePageSearch(getCommen
// immediate: false,
defaultParams: {
articleId: questionId,
sortType: 1,
sortType: 2,
},
formatList: (list) =>
list.map((item) => ({
......
......@@ -12,8 +12,14 @@
</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-input
v-model="searchParams.title"
placeholder="输入关键词搜索"
class="w-400px"
size="default"
@keyup.enter="handleSearch"
clearable
/>
<el-button type="primary" @click="handleSearch">搜索</el-button>
</div>
......@@ -25,18 +31,28 @@
<div class="flex items-center gap-2">
<span class="text-gray-600 text-14px">分类:</span>
<div class="flex gap-2">
<button v-for="sort in [{ label: '全部', value: '' }, ...articleTypeListOptions]" :key="sort.value"
class="px-4 py-1.5 rounded-lg text-14px transition-colors cursor-pointer" :class="{
<button
v-for="sort in [{ label: '全部', value: '' }, ...articleTypeListOptions]"
:key="sort.value"
class="px-4 py-1.5 rounded-lg text-14px transition-colors cursor-pointer"
:class="{
'text-blue-600 bg-blue-50': searchParams.type === sort.value,
'text-gray-600 hover:text-blue-600': searchParams.type !== sort.value,
}" @click="changeType(sort.value)">
}"
@click="changeType(sort.value)"
>
{{ sort.label }}
</button>
</div>
</div>
<div class="text-gray-500 text-14px">
<el-radio-group size="default" v-model="searchParams.sortLogic" @change="changeSort">
<el-radio-button v-for="sort in sortOptions" :key="sort.value" :label="sort.label" :value="sort.value" />
<el-radio-button
v-for="sort in sortOptions"
:key="sort.value"
:label="sort.label"
:value="sort.value"
/>
</el-radio-group>
</div>
</div>
......@@ -67,15 +83,22 @@
<div v-show="list.length">
<div class="space-y-4">
<div v-for="item in list" :key="item.id"
<div
v-for="item in list"
:key="item.id"
class="flex gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
@click="handleClick(item)">
@click="handleClick(item)"
>
<!-- 封面图 -->
<div v-if="item.faceUrl"
class="flex-shrink-0 w-240px h-135px rounded-lg overflow-hidden bg-gray-100 relative">
<div
v-if="item.faceUrl"
class="flex-shrink-0 w-240px h-135px rounded-lg overflow-hidden bg-gray-100 relative"
>
<img :src="item.faceUrl" class="w-full h-full object-cover" />
<div v-if="item.type === ArticleTypeEnum.VIDEO"
class="absolute bottom-2 right-2 bg-black/70 text-white text-12px px-2 py-0.5 rounded">
<div
v-if="item.type === ArticleTypeEnum.VIDEO"
class="absolute bottom-2 right-2 bg-black/70 text-white text-12px px-2 py-0.5 rounded"
>
{{ item.videoDuration }}
</div>
</div>
......@@ -89,7 +112,14 @@
</h3>
<!-- 描述 -->
<p class="text-14px text-gray-600 mb-3 line-clamp-2">
<p
v-if="
item.type !== ArticleTypeEnum.POST &&
item.type !== ArticleTypeEnum.INTERVIEW &&
item.type !== ArticleTypeEnum.COLUMN
"
class="text-14px text-gray-600 mb-3 line-clamp-2"
>
{{ item.content }}
</p>
</div>
......@@ -122,7 +152,7 @@
<div class="flex-shrink-0 self-end">
<span class="text-blue-600 text-13px">{{
articleTypeListOptions.find((i) => i.value === item.type)?.label
}}</span>
}}</span>
</div>
</div>
</div>
......@@ -138,13 +168,20 @@
<!-- 右侧:分页器 -->
<div class="right">
<div class="pr-4">
<el-pagination v-model:current-page="searchParams.current" v-model:page-size="searchParams.size"
:page-sizes="[5, 20, 1]" layout="prev, pager, next, jumper, total" :total="total"
class="custom-pagination" @current-change="
<el-pagination
v-model:current-page="searchParams.current"
v-model:page-size="searchParams.size"
:page-sizes="[5, 20, 1]"
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>
......@@ -177,8 +214,8 @@ const queryType = route.query.type || ('' as ArticleTypeEnum | undefined)
const querySearchTitle = route.query.title
const sortOptions = [
{ label: '最热', value: 0 },
{ label: '最新', value: 1 },
{ label: '最热', value: 0 },
]
const { total, goToPage, changePageSize, refresh, searchParams, list } = usePageSearch(
......
......@@ -11,8 +11,14 @@
返回
</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-input
v-model="searchParams.title"
placeholder="输入关键词搜索"
class="w-400px"
size="default"
@keyup.enter="handleSearch"
clearable
/>
<el-button type="primary" @click="handleSearch">搜索</el-button>
</div>
......@@ -22,7 +28,9 @@
<!-- 一级分类 -->
<div class="flex items-center justify-between border-b border-gray-200 p-4">
<div class="flex items-center gap-2">
<span v-if="columnTitle" class="text-gray-600 text-base">当前栏目:{{ columnTitle }}</span>
<span v-if="columnTitle" class="text-gray-600 text-base"
>当前栏目:{{ columnTitle }}</span
>
<!-- <template v-else>
<span class="text-gray-600 text-14px">分类:</span>
......@@ -44,21 +52,33 @@
</div>
<div class="text-gray-500 text-14px">
<el-radio-group size="default" v-model="searchParams.sortLogic" @change="changeSort">
<el-radio-button v-for="sort in sortOptions" :key="sort.value" :label="sort.label" :value="sort.value" />
<el-radio-button
v-for="sort in sortOptions"
:key="sort.value"
:label="sort.label"
:value="sort.value"
/>
</el-radio-group>
</div>
</div>
<div v-show="list.length">
<div class="space-y-4">
<div v-for="item in list" :key="item.articleId"
<div
v-for="item in list"
:key="item.articleId"
class="flex gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
@click="handleClick(item)">
@click="handleClick(item)"
>
<!-- 封面图 -->
<div v-if="item.faceUrl"
class="flex-shrink-0 w-240px h-135px rounded-lg overflow-hidden bg-gray-100 relative">
<div
v-if="item.faceUrl"
class="flex-shrink-0 w-240px h-135px rounded-lg overflow-hidden bg-gray-100 relative"
>
<img :src="item.faceUrl" class="w-full h-full object-cover" />
<div class="absolute bottom-2 right-2 bg-black/70 text-white text-12px px-2 py-0.5 rounded">
<div
class="absolute bottom-2 right-2 bg-black/70 text-white text-12px px-2 py-0.5 rounded"
>
{{ item.videoDuration }}
</div>
</div>
......@@ -105,7 +125,7 @@
<div class="flex-shrink-0 self-end">
<span class="text-blue-600 text-13px">{{
articleTypeListOptions.find((i) => i.value === item.type)?.label
}}</span>
}}</span>
</div>
</div>
</div>
......@@ -121,13 +141,20 @@
<!-- 右侧:分页器 -->
<div class="right">
<div class="pr-4">
<el-pagination v-model:current-page="searchParams.current" v-model:page-size="searchParams.size"
:page-sizes="[5, 20, 1]" layout="prev, pager, next, jumper, total" :total="total"
class="custom-pagination" @current-change="
<el-pagination
v-model:current-page="searchParams.current"
v-model:page-size="searchParams.size"
:page-sizes="[5, 20, 1]"
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>
......@@ -158,8 +185,8 @@ const { ScrollTopComp, handleBackTop } = useScrollTop(searchPageRef)
const columnTitle = route.query.columnTitle || ''
const sortOptions = [
{ label: '最热', value: 0 },
{ label: '最新', value: 1 },
{ label: '最热', value: 0 },
]
const { total, goToPage, changePageSize, refresh, searchParams, list } = usePageSearch(
......
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