Skip to content

C
corporateCulture-qd
Commit 6a3cf54d by lijiabin
Options

【需求 17679】 feat: 继续优化页面、调试企微API、优化搜索页面等

parent 890412b9
Showing with 333 additions and 420 deletions
package.json
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
"@element-plus/icons-vue": "^2.3.2", "@element-plus/icons-vue": "^2.3.2",
"@vueuse/components": "^14.0.0", "@vueuse/components": "^14.0.0",
"@vueuse/core": "^14.0.0", "@vueuse/core": "^14.0.0",
"@wecom/jssdk": "^2.3.3",
"archiver": "^7.0.1", "archiver": "^7.0.1",
"axios": "^1.13.0", "axios": "^1.13.0",
"dayjs": "^1.11.19", "dayjs": "^1.11.19",
......
pnpm-lock.yaml
...@@ -17,6 +17,9 @@ importers: ...@@ -17,6 +17,9 @@ importers:
'@vueuse/core': '@vueuse/core':
specifier: ^14.0.0 specifier: ^14.0.0
version: 14.0.0(vue@3.5.22(typescript@5.9.3)) version: 14.0.0(vue@3.5.22(typescript@5.9.3))
'@wecom/jssdk':
specifier: ^2.3.3
version: 2.3.3
archiver: archiver:
specifier: ^7.0.1 specifier: ^7.0.1
version: 7.0.1 version: 7.0.1
...@@ -89,7 +92,7 @@ importers: ...@@ -89,7 +92,7 @@ importers:
version: 5.9.3 version: 5.9.3
unocss: unocss:
specifier: ^66.5.4 specifier: ^66.5.4
version: 66.5.4(postcss@5.2.18)(vite@7.1.12(@types/node@22.18.12)(jiti@2.6.1)(sass-embedded@1.93.2)(sass@1.93.2)) version: 66.5.4(postcss@8.5.6)(vite@7.1.12(@types/node@22.18.12)(jiti@2.6.1)(sass-embedded@1.93.2)(sass@1.93.2))
unplugin-auto-import: unplugin-auto-import:
specifier: ^20.2.0 specifier: ^20.2.0
version: 20.2.0(@vueuse/core@14.0.0(vue@3.5.22(typescript@5.9.3))) version: 20.2.0(@vueuse/core@14.0.0(vue@3.5.22(typescript@5.9.3)))
...@@ -1080,6 +1083,9 @@ packages: ...@@ -1080,6 +1083,9 @@ packages:
'@vueuse/shared@9.13.0': '@vueuse/shared@9.13.0':
resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==} resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
'@wecom/jssdk@2.3.3':
resolution: {integrity: sha512-bazYSD39MoiaUV1xMVxrOPsTFa37ARY0xXAqDgth4kU/xk8n61o1YiAcdn4dPM+kBnJKOfukFYPjOPQv8K5l+w==}
abort-controller@3.0.0: abort-controller@3.0.0:
resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==} resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
engines: {node: '>=6.5'} engines: {node: '>=6.5'}
...@@ -4253,13 +4259,13 @@ snapshots: ...@@ -4253,13 +4259,13 @@ snapshots:
sirv: 3.0.2 sirv: 3.0.2
vue-flow-layout: 0.2.0 vue-flow-layout: 0.2.0
'@unocss/postcss@66.5.4(postcss@5.2.18)': '@unocss/postcss@66.5.4(postcss@8.5.6)':
dependencies: dependencies:
'@unocss/config': 66.5.4 '@unocss/config': 66.5.4
'@unocss/core': 66.5.4 '@unocss/core': 66.5.4
'@unocss/rule-utils': 66.5.4 '@unocss/rule-utils': 66.5.4
css-tree: 3.1.0 css-tree: 3.1.0
postcss: 5.2.18 postcss: 8.5.6
tinyglobby: 0.2.15 tinyglobby: 0.2.15
'@unocss/preset-attributify@66.5.4': '@unocss/preset-attributify@66.5.4':
...@@ -4594,6 +4600,8 @@ snapshots: ...@@ -4594,6 +4600,8 @@ snapshots:
- '@vue/composition-api' - '@vue/composition-api'
- vue - vue
'@wecom/jssdk@2.3.3': {}
abort-controller@3.0.0: abort-controller@3.0.0:
dependencies: dependencies:
event-target-shim: 5.0.1 event-target-shim: 5.0.1
...@@ -6973,12 +6981,12 @@ snapshots: ...@@ -6973,12 +6981,12 @@ snapshots:
universalify@2.0.1: {} universalify@2.0.1: {}
unocss@66.5.4(postcss@5.2.18)(vite@7.1.12(@types/node@22.18.12)(jiti@2.6.1)(sass-embedded@1.93.2)(sass@1.93.2)): unocss@66.5.4(postcss@8.5.6)(vite@7.1.12(@types/node@22.18.12)(jiti@2.6.1)(sass-embedded@1.93.2)(sass@1.93.2)):
dependencies: dependencies:
'@unocss/astro': 66.5.4(vite@7.1.12(@types/node@22.18.12)(jiti@2.6.1)(sass-embedded@1.93.2)(sass@1.93.2)) '@unocss/astro': 66.5.4(vite@7.1.12(@types/node@22.18.12)(jiti@2.6.1)(sass-embedded@1.93.2)(sass@1.93.2))
'@unocss/cli': 66.5.4 '@unocss/cli': 66.5.4
'@unocss/core': 66.5.4 '@unocss/core': 66.5.4
'@unocss/postcss': 66.5.4(postcss@5.2.18) '@unocss/postcss': 66.5.4(postcss@8.5.6)
'@unocss/preset-attributify': 66.5.4 '@unocss/preset-attributify': 66.5.4
'@unocss/preset-icons': 66.5.4 '@unocss/preset-icons': 66.5.4
'@unocss/preset-mini': 66.5.4 '@unocss/preset-mini': 66.5.4
......
src/App.vue
...@@ -7,16 +7,16 @@ ...@@ -7,16 +7,16 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import zhCn from 'element-plus/es/locale/lang/zh-cn' import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { useUserStore } from '@/stores/user'
import { initWxConfig } from '@/utils/wxUtil/initWXConfig' import { initWxConfig } from '@/utils/wxUtil/initWXConfig'
const locale = ref(zhCn) const locale = ref(zhCn)
// const userStore = useUserStore() // const userStore = useUserStore()
// userStore.fetchUserInfo().then((res) => { // userStore.fetchUserInfo().then((res) => {
// console.log(res) // console.log(res)
// }) // })
console.log('App.vue mounted')
onMounted(() => { onMounted(() => {
const userStore = useUserStore() setTimeout(() => {
alert('token' + userStore.token) initWxConfig()
initWxConfig() }, 3000);
}) })
</script> </script>
src/components/common/Comment/index.vue
...@@ -137,7 +137,7 @@ ...@@ -137,7 +137,7 @@
</div> </div>
</div> </div>
<!-- 回复列表 --> <!-- 回复列表 -->
<div v-if="item.children.length" class="mt-3 ml-4 space-y-3"> <div v-if="item.children?.length" class="mt-3 ml-4 space-y-3">
<div <div
v-for="child in item.children" v-for="child in item.children"
:key="child.id" :key="child.id"
...@@ -311,7 +311,7 @@ const handleReply = (item: CommentItemDto) => { ...@@ -311,7 +311,7 @@ const handleReply = (item: CommentItemDto) => {
} }
const showCommentBox = (item: CommentItemDto) => { const showCommentBox = (item: CommentItemDto) => {
return ( return (
currentCommentId.value === item.id || item.children.some((i) => i.id === currentCommentId.value) currentCommentId.value === item.id || item.children?.some((i) => i.id === currentCommentId.value)
) )
} }
......
src/config.ts
...@@ -24,8 +24,8 @@ export const app_config: { [key: string]: IConfig } = { ...@@ -24,8 +24,8 @@ export const app_config: { [key: string]: IConfig } = {
// 开发环境 // 开发环境
development: { development: {
// baseUrl: 'http://192.168.2.110:8082', // 线上测试机 baseUrl: 'http://culture.yswg.com.cn:8089', // 线上测试机
baseUrl: 'http://192.168.2.168:8089', // 立鹏本地 // baseUrl: 'http://192.168.2.168:8089', // 立鹏本地/
// baseUrl: 'http://192.168.2.55:8089', // 首拥本地 // baseUrl: 'http://192.168.2.55:8089', // 首拥本地
loginType: 1, loginType: 1,
// wxRedirect: 'oatest.yswg.com.cn:3457', // wxRedirect: 'oatest.yswg.com.cn:3457',
......
src/layoutCulture/index.vue
<template> <template>
<div class="layout-culture pb-11 h-full bg-[linear-gradient(to_bottom,#F0FBFD_0%,#ECEFFF_100%)]"> <div class="layout-culture pb-11 h-full bg-[linear-gradient(to_bottom,#F0FBFD_0%,#ECEFFF_100%)]">
<div <div
class="header flex px-40 items-center justify-between bg-white mb-1 shadow-sm fixed top-0 left-0 right-0 z-100 w-100vw" class="header flex px-40 items-center justify-between bg-white mb-1 shadow-sm fixed top-0 left-0 right-0 z-100 w-100vw">
>
<!-- Logo区域 --> <!-- Logo区域 -->
<div @click="router.push('/')" class="flex items-center flex-shrink-0 min-w-0 cursor-pointer"> <div @click="router.push('/')" class="flex items-center flex-shrink-0 min-w-0 cursor-pointer">
<img <img class="h-10 mr-3 object-contain flex-shrink-0 sm:h-10 sm:mr-4"
class="h-10 mr-3 object-contain flex-shrink-0 sm:h-10 sm:mr-4" src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2022/10/13/1665643779583.png" alt="" />
src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2022/10/13/1665643779583.png"
alt=""
/>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<!-- 搜索框 --> <!-- 搜索框 -->
<div class="flex-1 max-w-sm mx-4 hidden md:block lg:max-w-md lg:mx-6"> <div v-show="showSearchInupt" class="flex-1 max-w-sm mx-4 hidden md:block lg:max-w-md lg:mx-6">
<el-input v-model="search" class="h-8" placeholder="搜索"> <el-input v-model="search" class="h-8" placeholder="搜索">
<template #suffix> <template #suffix>
<el-icon class="text-gray-400" @click="router.push('/searchPage')"> <el-icon class="text-gray-400" @click="router.push('/searchPage?title=' + search)">
<Search /> <Search />
</el-icon> </el-icon>
</template> </template>
...@@ -27,44 +23,20 @@ ...@@ -27,44 +23,20 @@
<div class="flex items-center gap-1 flex-shrink-0 sm:gap-2 lg:gap-4"> <div class="flex items-center gap-1 flex-shrink-0 sm:gap-2 lg:gap-4">
<div <div
class="flex items-center cursor-pointer px-2 py-1 rounded transition-colors sm:px-3 sm:py-2 hover:shadow-lg duration-200" class="flex items-center cursor-pointer px-2 py-1 rounded transition-colors sm:px-3 sm:py-2 hover:shadow-lg duration-200"
@click="router.push('/userPage')" @click="router.push('/userPage')">
> <img class="w-8 h-8 object-contain flex-shrink-0 rounded-full" :src="userInfo?.avatar" alt="个人中心" />
<img <span class="ml-2 text-sm text-gray-700 whitespace-nowrap hidden lg:inline">个人中心</span>
class="w-8 h-8 object-contain flex-shrink-0 rounded-full"
:src="userInfo?.avatar"
alt="个人中心"
/>
<span class="ml-2 text-sm text-gray-700 whitespace-nowrap hidden lg:inline"
>个人中心</span
>
</div> </div>
<div <div class="flex items-center cursor-pointer px-2 py-1 rounded sm:px-3 sm:py-2 hover:shadow-lg duration-200">
class="flex items-center cursor-pointer px-2 py-1 rounded sm:px-3 sm:py-2 hover:shadow-lg duration-200" <img class="w-7 h-7 object-contain flex-shrink-0" src="@/assets/img/culture/feedback.png" alt="" />
> <span class="ml-2 text-sm text-gray-700 whitespace-nowrap hidden lg:inline">意见反馈</span>
<img
class="w-7 h-7 object-contain flex-shrink-0"
src="@/assets/img/culture/feedback.png"
alt=""
/>
<span class="ml-2 text-sm text-gray-700 whitespace-nowrap hidden lg:inline"
>意见反馈</span
>
</div> </div>
<el-dropdown <el-dropdown placement="top-start" @command="handlePost" @visible-change="(val) => (isDropdownHover = val)">
placement="top-start"
@command="handlePost"
@visible-change="(val) => (isDropdownHover = val)"
>
<button <button
class="cursor-pointer w-24 h-9 text-black hover:text-black bg-[linear-gradient(to_right,#B3B8FD_0%,#7083FF_100%)] border-none duration-200 flex-1 text-xs sm:text-sm rounded-xl group" class="cursor-pointer w-24 h-9 text-black hover:text-black bg-[linear-gradient(to_right,#B3B8FD_0%,#7083FF_100%)] border-none duration-200 flex-1 text-xs sm:text-sm rounded-xl group"
:class="{ 'shadow-[0_1px_8px_0_rgba(95,0,237,0.25)]': isDropdownHover }" :class="{ 'shadow-[0_1px_8px_0_rgba(95,0,237,0.25)]': isDropdownHover }">
> <img class="h-7 w-7 transition-transform duration-300 ease-in-out"
<img :class="{ 'rotate-90': isDropdownHover }" src="@/assets/img/culture/post.png" alt="" />
class="h-7 w-7 transition-transform duration-300 ease-in-out"
:class="{ 'rotate-90': isDropdownHover }"
src="@/assets/img/culture/post.png"
alt=""
/>
去发帖 去发帖
</button> </button>
<template #dropdown> <template #dropdown>
...@@ -80,9 +52,7 @@ ...@@ -80,9 +52,7 @@
</div> </div>
</div> </div>
<div class="flex-1 w-full flex items-center justify-center"> <div class="flex-1 w-full flex items-center justify-center">
<div <div class="container max-h-none px-20 lg:px-20 2xl:px-30 transition-all duration-300 min-h-[calc(100vh-96px)]">
class="container max-h-none px-20 lg:px-20 2xl:px-30 transition-all duration-300 min-h-[calc(100vh-96px)]"
>
<router-view v-slot="{ Component, route }"> <router-view v-slot="{ Component, route }">
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<!-- 注释不能放到keep-alive下面 route是最终的路由信息 Component是当前n级路由的组件 二级路由 homePage videoDetail --> <!-- 注释不能放到keep-alive下面 route是最终的路由信息 Component是当前n级路由的组件 二级路由 homePage videoDetail -->
...@@ -112,9 +82,11 @@ const userStore = useUserStore() ...@@ -112,9 +82,11 @@ const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore) const { userInfo } = storeToRefs(userStore)
const router = useRouter() const router = useRouter()
const route = useRoute()
const search = ref('') const search = ref('')
const PublishDialogRef = useTemplateRef<InstanceType<typeof PublishDialog>>('PublishDialogRef') const PublishDialogRef = useTemplateRef<InstanceType<typeof PublishDialog>>('PublishDialogRef')
console.log(route)
const showSearchInupt = computed(() => route.path !== '/searchPage')
// 获取二级路由的 key // 获取二级路由的 key
const getSecondLevelKey = (route: RouteLocationNormalizedLoadedGeneric) => { const getSecondLevelKey = (route: RouteLocationNormalizedLoadedGeneric) => {
// 取第一级作为key homePage // 取第一级作为key homePage
...@@ -137,6 +109,7 @@ const isDropdownHover = ref(false) ...@@ -137,6 +109,7 @@ const isDropdownHover = ref(false)
<style lang="scss" scoped> <style lang="scss" scoped>
.layout-culture { .layout-culture {
padding-top: 52px; padding-top: 52px;
.header { .header {
min-height: 52px; min-height: 52px;
color: #212121; color: #212121;
...@@ -145,11 +118,13 @@ const isDropdownHover = ref(false) ...@@ -145,11 +118,13 @@ const isDropdownHover = ref(false)
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.container { .container {
.main-container { .main-container {
.tabs-container { .tabs-container {
background: linear-gradient(90deg, #16cdea 0%, #d680ff 100%); background: linear-gradient(90deg, #16cdea 0%, #d680ff 100%);
} }
.right { .right {
.common-box { .common-box {
padding: 15px; padding: 15px;
...@@ -157,6 +132,7 @@ const isDropdownHover = ref(false) ...@@ -157,6 +132,7 @@ const isDropdownHover = ref(false)
border-radius: 10px; border-radius: 10px;
border: 1px solid #efe7dc; border: 1px solid #efe7dc;
} }
.common-btn { .common-btn {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -178,6 +154,7 @@ const isDropdownHover = ref(false) ...@@ -178,6 +154,7 @@ const isDropdownHover = ref(false)
opacity: 0; opacity: 0;
transform: translateY(10px); transform: translateY(10px);
} }
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active {
transition: all 0.3s ease; transition: all 0.3s ease;
......
src/utils/request/axios.ts
...@@ -54,9 +54,6 @@ export default class DhRequest { ...@@ -54,9 +54,6 @@ export default class DhRequest {
} }
return response.data return response.data
} else { } else {
if (response.status === 401) {
alert(JSON.stringify(response))
}
// 处理请求成功后错误 // 处理请求成功后错误
return handleResponseError(response) return handleResponseError(response)
} }
......
src/utils/request/error.ts
...@@ -71,9 +71,6 @@ export function handleRequestError(axiosError: AxiosError<BackendServiceResult>) ...@@ -71,9 +71,6 @@ export function handleRequestError(axiosError: AxiosError<BackendServiceResult>)
// 请求出错,如404， 403 // 请求出错,如404， 403
else { else {
const errorCode: ErrorStatus = axiosError.response?.status as ErrorStatus const errorCode: ErrorStatus = axiosError.response?.status as ErrorStatus
if (errorCode === 401) {
alert(JSON.stringify(axiosError))
}
const msg = const msg =
axiosError.response?.data.message || ERROR_STATUS[errorCode] || DEFAULT_REQUEST_ERROR_MSG axiosError.response?.data.message || ERROR_STATUS[errorCode] || DEFAULT_REQUEST_ERROR_MSG
Object.assign(error, { code: errorCode || DEFAULT_REQUEST_ERROR_CODE, msg }) Object.assign(error, { code: errorCode || DEFAULT_REQUEST_ERROR_CODE, msg })
......
src/utils/wxUtil/index.ts
export * from './wxLogin' export * from './wxLogin'
export * from './initWXConfig' export * from './initWXConfig'
import * as ww from '@wecom/jssdk'
// import wx from 'weixin-js-sdk'
/** /**
* 分享 * 分享
...@@ -16,13 +15,22 @@ interface IShareWxOption { ...@@ -16,13 +15,22 @@ interface IShareWxOption {
/** 分享封面 */ /** 分享封面 */
imgUrl?: string imgUrl?: string
} }
// export function wxShare(option: IShareWxOption) {
// const url = location.href.split('#')[0]
// option.link = url + '#' + option.link
// wx.invoke('shareAppMessage', option, function (res: any) {
// if (res.err_msg == 'openExistedChatWithMsg:ok') {
// console.log(res)
// }
// })
// }
export function wxShare(option: IShareWxOption) { export function wxShare(option: IShareWxOption) {
const url = location.href.split('#')[0] const url = location.href.split('#')[0]
option.link = url + '#' + option.link option.link = ww.shareAppMessage({
wx.invoke('shareAppMessage', option, function (res: any) { title: '测试一下',
if (res.err_msg == 'openExistedChatWithMsg:ok') { desc: '让每个企业都有自己的微信',
console.log(res) link: url + '#' + option.link,
} imgUrl: 'https://res.mail.qq.com/node/ww/wwmng/style/images/index_share_logo$13c64306.png',
}) })
} }
......
src/utils/wxUtil/initWXConfig.ts
/* 企业微信js配置 */ /* 企业微信js配置 */
//注意：如果要在页面调用企业微信内部方法，请现在下面的jsApiList数组中添加方法 //注意：如果要在页面调用企业微信内部方法，请现在下面的jsApiList数组中添加方法
import { getWxSignature } from '@/api' import { getWxSignature } from '@/api'
// import wx from 'weixin-js-sdk' import * as ww from '@wecom/jssdk'
// export async function initWxConfig() {
// const url = location.href.split('#')[0]
// const response = await getWxSignature(url)
// console.log('response', response, wx)
// const timestamp = response.data.timestamp //时间戳
// const nonceStr = response.data.nonceStr //随机字符串
// const signature = response.data.signature //签名
// const appId = response.data.appId //企业id
// wx.config({
// beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
// debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
// appId: appId, // 必填，企业微信的corpID
// timestamp: timestamp, // 必填，生成签名的时间戳
// nonceStr: nonceStr, // 必填，生成签名的随机串
// signature: signature, // 必填，签名，见附录1
// jsApiList: [
// // 所有要调用的 API 都要加到这个列表中
// 'shareAppMessage',
// 'selectEnterpriseContact',
// ],
// // success: function (result) {
// // // 回调
// // }
// })
// }
export async function initWxConfig() { export async function initWxConfig() {
const url = location.href.split('#')[0] const url = location.href.split('#')[0]
const response = await getWxSignature(url) const response = await getWxSignature(url)
...@@ -10,21 +36,26 @@ export async function initWxConfig() { ...@@ -10,21 +36,26 @@ export async function initWxConfig() {
const timestamp = response.data.timestamp //时间戳 const timestamp = response.data.timestamp //时间戳
const nonceStr = response.data.nonceStr //随机字符串 const nonceStr = response.data.nonceStr //随机字符串
const signature = response.data.signature //签名 const signature = response.data.signature //签名
const appId = response.data.appId //企业id // const appId = response.data.appId //企业id
wx.config({ const corpId = response.data.corpid //企业id
beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题 const agentId = response.data.agentid //应用id
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 ww.register({
appId: appId, // 必填，企业微信的corpID corpId, // 必填，当前用户企业所属企业ID
timestamp: timestamp, // 必填，生成签名的时间戳 agentId, // 必填，当前应用的AgentID
nonceStr: nonceStr, // 必填，生成签名的随机串 jsApiList: ['shareAppMessage'], // 必填，需要使用的JSAPI列表
signature: signature, // 必填，签名，见附录1 getConfigSignature: function () {
jsApiList: [ return {
// 所有要调用的 API 都要加到这个列表中 timestamp: timestamp,
'shareAppMessage', nonceStr: nonceStr,
'selectEnterpriseContact', signature: signature,
], }
// success: function (result) { }, // 必填，根据url生成企业签名的回调函数
// // 回调 getAgentConfigSignature: function () {
// } return {
timestamp: timestamp,
nonceStr: nonceStr,
signature: signature,
}
}, // 必填，根据url生成应用签名的回调函数
}) })
} }
src/views/homePage/index.vue
...@@ -11,19 +11,13 @@ ...@@ -11,19 +11,13 @@
<div class="flex gap-3"> <div class="flex gap-3">
<div class="left flex-1 basis-full xl:basis-3/4 transition-all duration-500"> <div class="left flex-1 basis-full xl:basis-3/4 transition-all duration-500">
<div ref="tabsRef" class="tabs-container h-75px flex relative rounded-lg mb-3 shadow-md"> <div ref="tabsRef" class="tabs-container h-75px flex relative rounded-lg mb-3 shadow-md">
<div <div v-for="tab in tabs" :key="tab.path"
v-for="tab in tabs"
:key="tab.path"
class="flex-1 flex items-center justify-center cursor-pointer relative transition-all duration-300 group" class="flex-1 flex items-center justify-center cursor-pointer relative transition-all duration-300 group"
@click="toggleTab(tab)" @click="toggleTab(tab)">
> <div class="flex items-center gap-2 px-12 py-2.5 rounded-lg transition-all duration-300" :class="{
<div 'bg-#fffdfd shadow-[inset_0_2px_4px_0_rgb(0,0,0,0.1)]': activeTab === tab.name,
class="flex items-center gap-2 px-12 py-2.5 rounded-lg transition-all duration-300" 'hover:bg-white/60': activeTab !== tab.name,
:class="{ }">
'bg-#fffdfd shadow-[inset_0_2px_4px_0_rgb(0,0,0,0.1)]': activeTab === tab.name,
'hover:bg-white/60': activeTab !== tab.name,
}"
>
<svg-icon :name="tab.svg" class="h-60px w-auto md:h-50px sm:h-40px" size="40" /> <svg-icon :name="tab.svg" class="h-60px w-auto md:h-50px sm:h-40px" size="40" />
<div class="text-18px font-500 text-gray-800 md:text-16px sm:text-14px"> <div class="text-18px font-500 text-gray-800 md:text-16px sm:text-14px">
{{ tab.name }} {{ tab.name }}
...@@ -33,8 +27,7 @@ ...@@ -33,8 +27,7 @@
</div> </div>
<div <div
class="content-container w-100% rounded-lg bg-#F5F8FD border-1px border-solid border-#EAEAEF shadow-[0_1px_4px_0_rgba(33,33,52,0.1)]" class="content-container w-100% rounded-lg bg-#F5F8FD border-1px border-solid border-#EAEAEF shadow-[0_1px_4px_0_rgba(33,33,52,0.1)]">
>
<div class="content-wrapper p-6"> <div class="content-wrapper p-6">
<router-view v-slot="{ Component, route }"> <router-view v-slot="{ Component, route }">
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
...@@ -49,10 +42,8 @@ ...@@ -49,10 +42,8 @@
<!-- 屏幕变小直接隐藏 --> <!-- 屏幕变小直接隐藏 -->
<div class="right flex-col gap-3 xl:flex xl:basis-1/4 hidden"> <div class="right flex-col gap-3 xl:flex xl:basis-1/4 hidden">
<!-- 等级等相关信息 --> <!-- 等级等相关信息 -->
<div <div ref="levelContainerRef"
ref="levelContainerRef" class="level-container common-box flex flex-col justify-center items-center gap-4 rounded-lg bg-#E4F5FE">
class="level-container common-box flex flex-col justify-center items-center gap-4 rounded-lg bg-#E4F5FE"
>
<div class="top flex items-center justify-center gap-3"> <div class="top flex items-center justify-center gap-3">
<img class="h-20" :src="currentLevelData?.iconUrl" alt="" /> <img class="h-20" :src="currentLevelData?.iconUrl" alt="" />
<div class="text-base flex-3/4 flex flex-col gap-1"> <div class="text-base flex-3/4 flex flex-col gap-1">
...@@ -60,20 +51,16 @@ ...@@ -60,20 +51,16 @@
<div class="font-semibold">等级：{{ currentLevelData?.label }}</div> <div class="font-semibold">等级：{{ currentLevelData?.label }}</div>
<el-tooltip <el-tooltip
:content="`当前经验：${userAccountData.expTotal}/${currentLevelData.expScope[1]} (${currentLevelData.percentage}%)`" :content="`当前经验：${userAccountData.expTotal}/${currentLevelData.expScope[1]} (${currentLevelData.percentage}%)`"
placement="top" placement="top">
>
<div class="relative w-20 cursor-pointer"> <div class="relative w-20 cursor-pointer">
<div <div class="relative w-full h-4 bg-#A5E4FF rounded-full border-1 border-#30C4FF border-solid">
class="relative w-full h-4 bg-#A5E4FF rounded-full border-1 border-#30C4FF border-solid"
>
<div class="absolute left-0 top-0 h-full bg-#30C4FF rounded-full"></div> <div class="absolute left-0 top-0 h-full bg-#30C4FF rounded-full"></div>
<div <div
class="absolute left-0 top-0 h-full bg-gradient-to-r from-blue-500 via-blue-400 to-cyan-400 rounded-full transition-all duration-500 ease-out" class="absolute left-0 top-0 h-full bg-gradient-to-r from-blue-500 via-blue-400 to-cyan-400 rounded-full transition-all duration-500 ease-out"
:style="{ width: `${currentLevelData.percentage}%` }" :style="{ width: `${currentLevelData.percentage}%` }">
>
<div <div
class="absolute top-0 left-0 w-full h-1/2 bg-gradient-to-b from-white/40 to-transparent rounded-t-full" class="absolute top-0 left-0 w-full h-1/2 bg-gradient-to-b from-white/40 to-transparent rounded-t-full">
></div> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -88,10 +75,7 @@ ...@@ -88,10 +75,7 @@
<div ref="dailySignBtnRef"> <div ref="dailySignBtnRef">
<el-button <el-button
class="bg-[linear-gradient(to_right,#FFD06A_0%,#FFB143_100%)] shadow-[0px_1px_8px_0_rgba(255,173,91,0.25)] border-none hover:-translate-y-1 hover:shadow-[0px_4px_10px_0_rgba(255,173,91,0.4)] hover:scale-105 active:scale-95 active:translate-y-0 transition-all duration-200 flex-1 text-xs sm:text-sm" class="bg-[linear-gradient(to_right,#FFD06A_0%,#FFB143_100%)] shadow-[0px_1px_8px_0_rgba(255,173,91,0.25)] border-none hover:-translate-y-1 hover:shadow-[0px_4px_10px_0_rgba(255,173,91,0.4)] hover:scale-105 active:scale-95 active:translate-y-0 transition-all duration-200 flex-1 text-xs sm:text-sm"
type="primary" type="primary" @click="onDailySign" v-if="!userRecordData.isSign">
@click="onDailySign"
v-if="!userRecordData.isSign"
>
<!-- v-if="!userRecordData.isSign" --> <!-- v-if="!userRecordData.isSign" -->
<svg-icon name="sign_in" size="35" /> <svg-icon name="sign_in" size="35" />
...@@ -100,9 +84,7 @@ ...@@ -100,9 +84,7 @@
</div> </div>
<el-button <el-button
class="bg-[linear-gradient(to_right,#ABB0FF_0%,#7495FF_100%)] shadow-[0_1px_8px_0_rgba(0,36,237,0.25)] border-none hover:-translate-y-1 transition-all duration-200 flex-1 text-xs sm:text-sm w-116px" class="bg-[linear-gradient(to_right,#ABB0FF_0%,#7495FF_100%)] shadow-[0_1px_8px_0_rgba(0,36,237,0.25)] border-none hover:-translate-y-1 transition-all duration-200 flex-1 text-xs sm:text-sm w-116px"
type="primary" type="primary" @click="router.push('/pointsStore')">
@click="router.push('/pointsStore')"
>
<svg-icon name="points_store" size="30" /> <svg-icon name="points_store" size="30" />
<span class="text-black text-xs sm:text-sm">积分商城</span> <span class="text-black text-xs sm:text-sm">积分商城</span>
</el-button> </el-button>
...@@ -121,9 +103,7 @@ ...@@ -121,9 +103,7 @@
<div class="flex justify-center items-center"> <div class="flex justify-center items-center">
<el-button <el-button
class="bg-[linear-gradient(to_right,#A3EADC_0%,#7BE0BD_100%)] shadow-[0_1px_4px_0_rgba(168,225,210,1)] border-none hover:-translate-y-1 transition-all duration-200 text-xs sm:text-sm w-116px" class="bg-[linear-gradient(to_right,#A3EADC_0%,#7BE0BD_100%)] shadow-[0_1px_4px_0_rgba(168,225,210,1)] border-none hover:-translate-y-1 transition-all duration-200 text-xs sm:text-sm w-116px"
type="primary" type="primary" @click="router.push('/publishCase')">
@click="router.push('/publishCase')"
>
<svg-icon name="submit" size="20" class="mr-2" /> <svg-icon name="submit" size="20" class="mr-2" />
<span class="text-black text-xs sm:text-sm">去投稿</span> <span class="text-black text-xs sm:text-sm">去投稿</span>
</el-button> </el-button>
...@@ -134,29 +114,26 @@ ...@@ -134,29 +114,26 @@
<div class="grid grid-cols-3 gap-2 sm:gap-4 mb-4"> <div class="grid grid-cols-3 gap-2 sm:gap-4 mb-4">
<div <div
class="flex flex-col items-center justify-center text-center cursor-pointer hover:-translate-y-1 transition-transform duration-200 p-2 rounded-lg hover:bg-white/10" class="flex flex-col items-center justify-center text-center cursor-pointer hover:-translate-y-1 transition-transform duration-200 p-2 rounded-lg hover:bg-white/10"
> @click="router.push('/homePage/askTab')">
<svg-icon name="topic_release" size="80" /> <svg-icon name="topic_release" size="80" />
<div class="text-xs sm:text-sm">话题发布</div> <div class="text-xs sm:text-sm">话题发布</div>
</div> </div>
<div <div
class="flex flex-col items-center justify-center text-center cursor-pointer hover:-translate-y-1 transition-transform duration-200 p-2 rounded-lg hover:bg-white/10" class="flex flex-col items-center justify-center text-center cursor-pointer hover:-translate-y-1 transition-transform duration-200 p-2 rounded-lg hover:bg-white/10"
> @click="router.push('/homePage/askTab')">
<svg-icon name="answer" size="80" /> <svg-icon name="answer" size="80" />
<div class="text-xs sm:text-sm">回答问题</div> <div class="text-xs sm:text-sm">回答问题</div>
</div> </div>
<div <div @click="router.push('/publishVideo')"
@click="router.push('/publishVideo')" class="flex flex-col items-center justify-center text-center cursor-pointer hover:-translate-y-1 transition-transform duration-200 p-2 rounded-lg hover:bg-white/10">
class="flex flex-col items-center justify-center text-center cursor-pointer hover:-translate-y-1 transition-transform duration-200 p-2 rounded-lg hover:bg-white/10"
>
<svg-icon name="video_release" size="80" /> <svg-icon name="video_release" size="80" />
<div class="text-xs sm:text-sm">视频发布</div> <div class="text-xs sm:text-sm">视频发布</div>
</div> </div>
</div> </div>
<div class="flex justify-center items-center"> <div class="flex justify-center items-center">
<el-button <el-button @click="router.push('/homePage/askTab')"
class="bg-[linear-gradient(to_right,#D6C9FF_0%,#C5B1FF_100%)] shadow-[0_1px_4px_0_rgba(95,0,237,0.25)] border-none hover:-translate-y-1 transition-all duration-200 text-xs sm:text-sm w-116px" class="bg-[linear-gradient(to_right,#D6C9FF_0%,#C5B1FF_100%)] shadow-[0_1px_4px_0_rgba(95,0,237,0.25)] border-none hover:-translate-y-1 transition-all duration-200 text-xs sm:text-sm w-116px"
type="primary" type="primary">
>
<svg-icon name="my_answer" size="20" class="mr-2" /> <svg-icon name="my_answer" size="20" class="mr-2" />
<span class="text-black text-xs sm:text-sm">我的回答</span> <span class="text-black text-xs sm:text-sm">我的回答</span>
</el-button> </el-button>
...@@ -171,17 +148,12 @@ ...@@ -171,17 +148,12 @@
<div class="w-1 h-4 bg-gradient-to-b from-pink-500 to-rose-500 rounded-full"></div> <div class="w-1 h-4 bg-gradient-to-b from-pink-500 to-rose-500 rounded-full"></div>
<h1 class="text-sm sm:text-base font-bold">任务中心</h1> <h1 class="text-sm sm:text-base font-bold">任务中心</h1>
</div> </div>
<h2 <h2 class="w-full text-xs sm:text-sm mt-1 text-gray-600 flex items-center justify-between">
class="w-full text-xs sm:text-sm mt-1 text-gray-600 flex items-center justify-between"
>
<div> <div>
<span <span v-for="item in taskTypeList" :key="item.value"
v-for="item in taskTypeList"
:key="item.value"
class="text-#333 cursor-pointer after:content-['|'] after:mx-2 after:text-#999 last:after:content-none" class="text-#333 cursor-pointer after:content-['|'] after:mx-2 after:text-#999 last:after:content-none"
:class="{ 'text-#999': currentTask !== item.value }" :class="{ 'text-#999': currentTask !== item.value }" @click="currentTask = item.value">{{ item.label
@click="currentTask = item.value" }}
>{{ 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?key=task`)">
...@@ -195,15 +167,12 @@ ...@@ -195,15 +167,12 @@
<div v-show="currentTaskList.length"> <div v-show="currentTaskList.length">
<div v-for="item in currentTaskList" :key="item.id"> <div v-for="item in currentTaskList" :key="item.id">
<div <div
class="flex items-center justify-between hover:bg-white/10 rounded-lg transition-colors duration-200 group" class="flex items-center justify-between hover:bg-white/10 rounded-lg transition-colors duration-200 group">
>
<div class="flex items-center min-w-0 flex-1"> <div class="flex items-center min-w-0 flex-1">
<div class="h-70px flex items-center justify-center"> <div class="h-70px flex items-center justify-center">
<svg-icon :name="item.svgName" size="50" /> <svg-icon :name="item.svgName" size="50" />
</div> </div>
<div <div class="flex flex-col items-start justify-center ml-2 sm:ml-3 min-w-0 flex-1">
class="flex flex-col items-start justify-center ml-2 sm:ml-3 min-w-0 flex-1"
>
<el-tooltip :content="item.description" placement="top"> <el-tooltip :content="item.description" placement="top">
<div class="text-14px truncate w-full font-medium mb-1 cursor-pointer"> <div class="text-14px truncate w-full font-medium mb-1 cursor-pointer">
{{ item.title }}({{ item.currentCount }}/{{ item.limitCount }}) {{ item.title }}({{ item.currentCount }}/{{ item.limitCount }})
...@@ -227,16 +196,10 @@ ...@@ -227,16 +196,10 @@
item.currentCount === item.limitCount item.currentCount === item.limitCount
? 'bg-#FFC5A1' ? 'bg-#FFC5A1'
: 'bg-[linear-gradient(to_right,#FFC5A1_0%,#FFB77F_100%)] hover:-translate-y-1 transition-all duration-200 cursor-pointer', : 'bg-[linear-gradient(to_right,#FFC5A1_0%,#FFB77F_100%)] hover:-translate-y-1 transition-all duration-200 cursor-pointer',
]" ]" @click="handleTask(item)">
@click="handleTask(item)" <span class="text-black text-sm" :style="{
> color: item.currentCount === item.limitCount ? '#999' : '#000',
<span }">{{ item.currentCount === item.limitCount ? '已完成' : '去完成' }}</span>
class="text-black text-sm"
:style="{
color: item.currentCount === item.limitCount ? '#999' : '#000',
}"
>{{ item.currentCount === item.limitCount ? '已完成' : '去完成' }}</span
>
</button> </button>
</div> </div>
<!-- 分割线 --> <!-- 分割线 -->
...@@ -366,19 +329,26 @@ const onDailySign = async () => { ...@@ -366,19 +329,26 @@ const onDailySign = async () => {
const handleTask = (item: TaskItemDto) => { const handleTask = (item: TaskItemDto) => {
console.log(item) console.log(item)
if (item.currentCount === item.limitCount) return if (item.currentCount === item.limitCount) return
if (item.svgName === 'VALID_COMMENT1') { // 先暂时写死
router.push(`/homePage/homeTab`) if (item.svgName === 'daily_sign') {
} else if (item.svgName === 'daily_sign') { //每日签到
handleBackTop()
triggerAnimation()
} else {
console.log(item)
// if (item.svgName === 'svgName') {
handleBackTop() handleBackTop()
triggerAnimation() triggerAnimation()
} else if (item.svgName === 'valid_comments') {
// 发布评论
ElMessage.info('快去文章评论区去发表评论吧~')
} else if (item.svgName === 'topic_publish') {
router.push('/homePage/askTab')
} else if (item.svgName === 'answer_ask') {
// 回答问题
router.push('/homePage/askTab')
} else if (item.svgName === 'video_publish') {
// 视频发布
router.push('/publishVideo')
} else if (item.svgName === 'practice_publish') {
// 个人实践/投稿
router.push('/publishCase')
} }
// }
} }
const initPage = () => { const initPage = () => {
...@@ -423,16 +393,20 @@ provide(TABS_REF_KEY, tabsRef) ...@@ -423,16 +393,20 @@ provide(TABS_REF_KEY, tabsRef)
height: 100% !important; height: 100% !important;
} }
} }
padding-bottom: 100px; padding-bottom: 100px;
.tabs-container { .tabs-container {
background: linear-gradient(to right, #d1f3ff 0%, #bebeff 100%); background: linear-gradient(to right, #d1f3ff 0%, #bebeff 100%);
} }
.right { .right {
.common-box { .common-box {
padding: 15px; padding: 15px;
border: 1px solid #eaeaef; border: 1px solid #eaeaef;
box-shadow: 0 1px 4px 0 rgba(33, 33, 52, 0.1); box-shadow: 0 1px 4px 0 rgba(33, 33, 52, 0.1);
} }
.common-btn { .common-btn {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -451,11 +425,13 @@ provide(TABS_REF_KEY, tabsRef) ...@@ -451,11 +425,13 @@ provide(TABS_REF_KEY, tabsRef)
opacity: 0; opacity: 0;
transform: translateY(10px); transform: translateY(10px);
} }
.fade-enter-to, .fade-enter-to,
.fade-leave-from { .fade-leave-from {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active {
transition: all 0.3s ease; transition: all 0.3s ease;
......
src/views/homePage/yaTab/components/columnList.vue
...@@ -2,42 +2,33 @@ ...@@ -2,42 +2,33 @@
<div> <div>
<div v-loading="loading" v-if="list.length"> <div v-loading="loading" v-if="list.length">
<div class="w-full max-w-6xl mx-auto"> <div class="w-full max-w-6xl mx-auto">
<div <div v-for="(item, index) in list" :key="index" class="bg-white rounded-lg shadow-sm mb-6 overflow-hidden"
v-for="(item, index) in list" :style="{ '--dynamic-color': item.color }">
:key="index" <div class="flex items-center justify-between pr-4 pl-4 pt-2 pb-2 bg-green-50 border-b border-green-100"
class="bg-white rounded-lg shadow-sm mb-6 overflow-hidden" :style="{ backgroundColor: item.color, '--dynamic-color': item.color }">
: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"> <h3 class="text-lg font-medium text-gray-800 flex items-center">
<span class="w-1 h-5 mr-2 bg-#444"></span> <span class="w-1 h-5 mr-2 bg-#444"></span>
{{ item.title }} {{ item.title }}
</h3> </h3>
<div class="flex items-center cursor-pointer"> <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> <span class="mr-1 text-14px color-#606266">查看更多 >></span>
</div> </div>
</div> </div>
<div class="p-4"> <div class="p-4">
<div v-if="item.yaColumnVoList.length" class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div v-if="item.yaColumnVoList.length" class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div <div v-for="i in item.yaColumnVoList" :key="i.articleId" class="group cursor-pointer"
v-for="i in item.yaColumnVoList" @click="router.push(`/articleDetail/${i.articleId}`)">
:key="i.articleId"
class="group cursor-pointer"
@click="router.push(`/articleDetail/${i.articleId}`)"
>
<div class="relative mb-3 overflow-hidden rounded-lg"> <div class="relative mb-3 overflow-hidden rounded-lg">
<img <img :src="i.faceUrl"
:src="i.faceUrl" class="w-full aspect-[5/3] object-cover group-hover:scale-105 transition-transform duration-300" />
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">
<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="" /> <img class="w-6" src="@/assets/img/culture/recommend.png" alt="" />
<div class="text-12px text-#000 line-height-12px">推荐</div> <div class="text-12px text-#000 line-height-12px">推荐</div>
</div> </div>
...@@ -51,15 +42,21 @@ ...@@ -51,15 +42,21 @@
<div class="flex items-center justify-between text-xs text-gray-500"> <div class="flex items-center justify-between text-xs text-gray-500">
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-4">
<span class="flex items-center"> <span class="flex items-center">
<el-icon class="mr-1"><View /></el-icon> <el-icon class="mr-1">
<View />
</el-icon>
{{ i.viewCount }} {{ i.viewCount }}
</span> </span>
<span class="flex items-center"> <span class="flex items-center">
<el-icon class="mr-1"><ChatDotRound /></el-icon> <el-icon class="mr-1">
<ChatDotRound />
</el-icon>
{{ i.replyCount }} {{ i.replyCount }}
</span> </span>
<span class="flex items-center"> <span class="flex items-center">
<el-icon class="mr-1"><Star /></el-icon> <el-icon class="mr-1">
<Star />
</el-icon>
{{ i.collectCount }} {{ i.collectCount }}
</span> </span>
</div> </div>
...@@ -82,23 +79,14 @@ ...@@ -82,23 +79,14 @@
</div> </div>
<!-- 右侧：分页器 --> <!-- 右侧：分页器 -->
<div class="right"> <div class="right">
<div <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3">
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"
<el-pagination class="custom-pagination" @current-change="
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) => { (e) => {
;(handleBackTop(), goToPage(e)) ; (handleBackTop(), goToPage(e))
} }
" " @size-change="changePageSize" />
@size-change="changePageSize"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -117,7 +105,7 @@ ...@@ -117,7 +105,7 @@
import { View, ChatDotRound, Star } from '@element-plus/icons-vue' import { View, ChatDotRound, Star } from '@element-plus/icons-vue'
import { getColumnList } from '@/api' import { getColumnList } from '@/api'
import { usePageSearch, useScrollTop } from '@/hooks' import { usePageSearch, useScrollTop } from '@/hooks'
import { TABS_REF_KEY } from '@/constants' import { ArticleTypeEnum, TABS_REF_KEY } from '@/constants'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
const router = useRouter() const router = useRouter()
......
src/views/homePage/yaTab/components/interviewList.vue
...@@ -2,44 +2,33 @@ ...@@ -2,44 +2,33 @@
<div> <div>
<div v-loading="loading" v-if="list.length"> <div v-loading="loading" v-if="list.length">
<div class="w-full max-w-6xl mx-auto"> <div class="w-full max-w-6xl mx-auto">
<div <div v-for="(item, index) in list" :key="index" class="bg-white rounded-lg shadow-sm mb-6 overflow-hidden"
v-for="(item, index) in list" :style="{ '--dynamic-color': item.color }">
:key="index" <div class="flex items-center justify-between pr-4 pl-4 pt-2 pb-2 bg-green-50 border-b border-green-100"
class="bg-white rounded-lg shadow-sm mb-6 overflow-hidden" :style="{ backgroundColor: item.color, '--dynamic-color': item.color }">
: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"> <h3 class="text-lg font-medium text-gray-800 flex items-center">
<span class="w-1 h-5 mr-2 bg-#444"></span> <span class="w-1 h-5 mr-2 bg-#444"></span>
{{ item.title }} {{ item.title }}
</h3> </h3>
<div class="flex items-center cursor-pointer hover:text-[var(--dynamic-color)]"> <div class="flex items-center cursor-pointer hover:text-[var(--dynamic-color)]" @click="router.push({
<span class="mr-1 text-14px color-#606266 hover:text-[var(--dynamic-color)]" path: '/searchPage',
>查看更多 >></span query: {
> type: ArticleTypeEnum.INTERVIEW
}
})">
<span class="mr-1 text-14px color-#606266 hover:text-[var(--dynamic-color)]">查看更多 >></span>
</div> </div>
</div> </div>
<div class="p-4"> <div class="p-4">
<div v-if="item.yaColumnVoList.length" class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div v-if="item.yaColumnVoList.length" class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div <div v-for="i in item.yaColumnVoList" :key="i.articleId" class="group cursor-pointer"
v-for="i in item.yaColumnVoList" @click="router.push(`/articleDetail/${i.articleId}`)">
:key="i.articleId"
class="group cursor-pointer"
@click="router.push(`/articleDetail/${i.articleId}`)"
>
<div class="relative mb-3 overflow-hidden rounded-lg"> <div class="relative mb-3 overflow-hidden rounded-lg">
<img <img :src="i.faceUrl"
:src="i.faceUrl" class="w-full aspect-[5/3] object-cover group-hover:scale-105 transition-transform duration-300" />
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">
<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="" /> <img class="w-6" src="@/assets/img/culture/recommend.png" alt="" />
<div class="text-12px text-#000 line-height-12px">推荐</div> <div class="text-12px text-#000 line-height-12px">推荐</div>
</div> </div>
...@@ -53,15 +42,21 @@ ...@@ -53,15 +42,21 @@
<div class="flex items-center justify-between text-xs text-gray-400"> <div class="flex items-center justify-between text-xs text-gray-400">
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-4">
<span class="flex items-center"> <span class="flex items-center">
<el-icon class="mr-1"><View /></el-icon> <el-icon class="mr-1">
<View />
</el-icon>
{{ i.viewCount }} {{ i.viewCount }}
</span> </span>
<span class="flex items-center"> <span class="flex items-center">
<el-icon class="mr-1"><ChatDotRound /></el-icon> <el-icon class="mr-1">
<ChatDotRound />
</el-icon>
{{ i.replyCount }} {{ i.replyCount }}
</span> </span>
<span class="flex items-center"> <span class="flex items-center">
<el-icon class="mr-1"><Star /></el-icon> <el-icon class="mr-1">
<Star />
</el-icon>
{{ i.collectCount }} {{ i.collectCount }}
</span> </span>
</div> </div>
...@@ -84,23 +79,14 @@ ...@@ -84,23 +79,14 @@
</div> </div>
<!-- 右侧：分页器 --> <!-- 右侧：分页器 -->
<div class="right"> <div class="right">
<div <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3">
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"
<el-pagination class="custom-pagination" @current-change="
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) => { (e) => {
;(handleBackTop(), goToPage(e)) ; (handleBackTop(), goToPage(e))
} }
" " @size-change="changePageSize" />
@size-change="changePageSize"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -119,11 +105,12 @@ ...@@ -119,11 +105,12 @@
import { ArrowRight, View, ChatDotRound, Star } from '@element-plus/icons-vue' import { ArrowRight, View, ChatDotRound, Star } from '@element-plus/icons-vue'
import { getInterviewList } from '@/api' import { getInterviewList } from '@/api'
import { usePageSearch, useScrollTop } from '@/hooks' import { usePageSearch, useScrollTop } from '@/hooks'
import { TABS_REF_KEY } from '@/constants' import { TABS_REF_KEY, ArticleTypeEnum } from '@/constants'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import dayjs from 'dayjs' import dayjs from 'dayjs'
const router = useRouter() const router = useRouter()
const tabsRef = inject(TABS_REF_KEY) const tabsRef = inject(TABS_REF_KEY)
const { handleBackTop, ScrollTopComp } = useScrollTop(tabsRef!) const { handleBackTop, ScrollTopComp } = useScrollTop(tabsRef!)
const { list, total, searchParams, goToPage, changePageSize, loading, refresh } = usePageSearch( const { list, total, searchParams, goToPage, changePageSize, loading, refresh } = usePageSearch(
......
src/views/homePage/yaTab/components/practiceList.vue
...@@ -6,26 +6,18 @@ ...@@ -6,26 +6,18 @@
<!-- 标签导航 --> <!-- 标签导航 -->
<div class="bg-white p-4 mb-6 rounded-lg shadow-sm"> <div class="bg-white p-4 mb-6 rounded-lg shadow-sm">
<div class="flex flex-wrap gap-2 mb-2"> <div class="flex flex-wrap gap-2 mb-2">
<el-tag <el-tag v-for="tag in filterOptions" :key="tag.id"
v-for="tag in filterOptions"
:key="tag.id"
:type="tag.id === searchParams.sortLogic ? 'primary' : 'info'" :type="tag.id === searchParams.sortLogic ? 'primary' : 'info'"
:effect="tag.id === searchParams.sortLogic ? 'dark' : 'plain'" :effect="tag.id === searchParams.sortLogic ? 'dark' : 'plain'" class="cursor-pointer"
class="cursor-pointer" @click="toggleFilter(tag.id)">
@click="toggleFilter(tag.id)"
>
{{ tag.title }} {{ tag.title }}
</el-tag> </el-tag>
</div> </div>
<div class="flex flex-wrap gap-2"> <div class="flex flex-wrap gap-2">
<el-tag <el-tag v-for="tag in tagList" :key="tag.id"
v-for="tag in tagList"
:key="tag.id"
:type="searchParams.tagIdList?.includes(tag.id) ? 'primary' : 'info'" :type="searchParams.tagIdList?.includes(tag.id) ? 'primary' : 'info'"
:effect="searchParams.tagIdList?.includes(tag.id) ? 'dark' : 'plain'" :effect="searchParams.tagIdList?.includes(tag.id) ? 'dark' : 'plain'" class="cursor-pointer"
class="cursor-pointer" @click="toggleTag(tag.id)">
@click="toggleTag(tag.id)"
>
{{ tag.title }} {{ tag.title }}
</el-tag> </el-tag>
</div> </div>
...@@ -41,22 +33,20 @@ ...@@ -41,22 +33,20 @@
{{ filterText }} {{ filterText }}
</h2> </h2>
</div> </div>
<div <div class="text-#999 cursor-pointer text-sm" @click="router.push({
class="text-#999 cursor-pointer text-sm" path: '/searchPage',
@click="router.push(`/userPage?key=practice`)" query: {
> type: ArticleTypeEnum.PRACTICE
}
})">
查看更多 >> 查看更多 >>
</div> </div>
</div> </div>
<el-divider class="my-1!" /> <el-divider class="my-1!" />
<div class="divide-y bg-#fff"> <div class="divide-y bg-#fff">
<div <div @click="router.push(`/articleDetail/${item.id}`)" v-for="item in list" :key="item.id"
@click="router.push(`/articleDetail/${item.id}`)" class="p-4 hover:bg-gray-50 transition-colors cursor-pointer">
v-for="item in list"
:key="item.id"
class="p-4 hover:bg-gray-50 transition-colors cursor-pointer"
>
<div class="flex gap-3 items-center"> <div class="flex gap-3 items-center">
<!-- 左侧内容 --> <!-- 左侧内容 -->
<div class="flex-1"> <div class="flex-1">
...@@ -66,12 +56,8 @@ ...@@ -66,12 +56,8 @@
<!-- 带图片的内容 --> <!-- 带图片的内容 -->
<div class="flex gap-3 mb-3"> <div class="flex gap-3 mb-3">
<img <img v-if="item.faceUrl" :src="item.faceUrl" :alt="item.title"
v-if="item.faceUrl" class="w-20 h-20 object-cover rounded-lg flex-shrink-0" />
:src="item.faceUrl"
:alt="item.title"
class="w-20 h-20 object-cover rounded-lg flex-shrink-0"
/>
<div class="flex-1"> <div class="flex-1">
<div class="text-gray-600 text-sm leading-relaxed line-clamp-3"> <div class="text-gray-600 text-sm leading-relaxed line-clamp-3">
{{ item.content }} {{ item.content }}
...@@ -82,15 +68,21 @@ ...@@ -82,15 +68,21 @@
<!-- 互动数据 --> <!-- 互动数据 -->
<div class="flex items-center gap-4 text-gray-400 text-sm"> <div class="flex items-center gap-4 text-gray-400 text-sm">
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<el-icon class="text-sm"><View /></el-icon> <el-icon class="text-sm">
<View />
</el-icon>
<span>{{ item.viewCount }}</span> <span>{{ item.viewCount }}</span>
</div> </div>
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<el-icon class="text-sm"><ChatDotRound /></el-icon> <el-icon class="text-sm">
<ChatDotRound />
</el-icon>
<span>{{ item.replyCount }}</span> <span>{{ item.replyCount }}</span>
</div> </div>
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<el-icon class="text-sm"><Star /></el-icon> <el-icon class="text-sm">
<Star />
</el-icon>
<span>{{ item.praiseCount }}</span> <span>{{ item.praiseCount }}</span>
</div> </div>
<div>{{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm') }}</div> <div>{{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm') }}</div>
...@@ -117,23 +109,14 @@ ...@@ -117,23 +109,14 @@
<!-- 右侧：分页器 --> <!-- 右侧：分页器 -->
<div class="right"> <div class="right">
<div <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3">
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="[5, 20, 1]" layout="prev, pager, next, jumper, total" :total="total"
<el-pagination class="custom-pagination" @current-change="
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) => { (e) => {
;(handleBackTop(), goToPage(e)) ; (handleBackTop(), goToPage(e))
} }
" " @size-change="changePageSize" />
@size-change="changePageSize"
/>
</div> </div>
</div> </div>
</div> </div>
......
src/views/homePage/yaTab/components/videoList.vue
...@@ -2,42 +2,33 @@ ...@@ -2,42 +2,33 @@
<div> <div>
<div v-loading="loading" v-if="list.length"> <div v-loading="loading" v-if="list.length">
<div class="w-full max-w-6xl mx-auto"> <div class="w-full max-w-6xl mx-auto">
<div <div v-for="(item, index) in list" :key="index" class="bg-white rounded-lg shadow-sm mb-6 overflow-hidden"
v-for="(item, index) in list" :style="{ '--dynamic-color': item.color }">
:key="index" <div class="flex items-center justify-between pr-4 pl-4 pt-2 pb-2 bg-green-50 border-b border-green-100"
class="bg-white rounded-lg shadow-sm mb-6 overflow-hidden" :style="{ backgroundColor: item.color, '--dynamic-color': item.color }">
: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"> <h3 class="text-lg font-medium text-gray-800 flex items-center">
<span class="w-1 h-5 mr-2 bg-#444"></span> <span class="w-1 h-5 mr-2 bg-#444"></span>
{{ item.title }} {{ item.title }}
</h3> </h3>
<div class="flex items-center cursor-pointer"> <div class="flex items-center cursor-pointer" @click="router.push({
path: '/searchPage',
query: {
type: ArticleTypeEnum.VIDEO
}
})">
<span class="mr-1 text-14px color-#606266">查看更多 >></span> <span class="mr-1 text-14px color-#606266">查看更多 >></span>
</div> </div>
</div> </div>
<div class="p-4"> <div class="p-4">
<div v-if="item.yaColumnVoList.length" class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div v-if="item.yaColumnVoList.length" class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div <div v-for="i in item.yaColumnVoList" :key="i.articleId" class="group cursor-pointer"
v-for="i in item.yaColumnVoList" @click="router.push(`/articleDetail/${i.articleId}`)">
:key="i.articleId"
class="group cursor-pointer"
@click="router.push(`/articleDetail/${i.articleId}`)"
>
<div class="relative mb-3 overflow-hidden rounded-lg"> <div class="relative mb-3 overflow-hidden rounded-lg">
<img <img :src="i.faceUrl"
:src="i.faceUrl" class="w-full aspect-[5/3] object-cover group-hover:scale-105 transition-transform duration-300" />
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">
<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="" /> <img class="w-6" src="@/assets/img/culture/recommend.png" alt="" />
<div class="text-12px text-#000 line-height-12px">推荐</div> <div class="text-12px text-#000 line-height-12px">推荐</div>
</div> </div>
...@@ -51,15 +42,21 @@ ...@@ -51,15 +42,21 @@
<div class="flex items-center justify-between text-xs text-gray-500"> <div class="flex items-center justify-between text-xs text-gray-500">
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-4">
<span class="flex items-center"> <span class="flex items-center">
<el-icon class="mr-1"><View /></el-icon> <el-icon class="mr-1">
<View />
</el-icon>
{{ i.viewCount }} {{ i.viewCount }}
</span> </span>
<span class="flex items-center"> <span class="flex items-center">
<el-icon class="mr-1"><ChatDotRound /></el-icon> <el-icon class="mr-1">
<ChatDotRound />
</el-icon>
{{ i.replyCount }} {{ i.replyCount }}
</span> </span>
<span class="flex items-center"> <span class="flex items-center">
<el-icon class="mr-1"><Star /></el-icon> <el-icon class="mr-1">
<Star />
</el-icon>
{{ i.collectCount }} {{ i.collectCount }}
</span> </span>
</div> </div>
...@@ -82,23 +79,14 @@ ...@@ -82,23 +79,14 @@
</div> </div>
<!-- 右侧：分页器 --> <!-- 右侧：分页器 -->
<div class="right"> <div class="right">
<div <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3">
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"
<el-pagination class="custom-pagination" @current-change="
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) => { (e) => {
;(handleBackTop(), goToPage(e)) ; (handleBackTop(), goToPage(e))
} }
" " @size-change="changePageSize" />
@size-change="changePageSize"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -117,9 +105,10 @@ ...@@ -117,9 +105,10 @@
import { View, ChatDotRound, Star } from '@element-plus/icons-vue' import { View, ChatDotRound, Star } from '@element-plus/icons-vue'
import { getVideoList } from '@/api' import { getVideoList } from '@/api'
import { usePageSearch, useScrollTop } from '@/hooks' import { usePageSearch, useScrollTop } from '@/hooks'
import { TABS_REF_KEY } from '@/constants' import { TABS_REF_KEY, ArticleTypeEnum } from '@/constants'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
const router = useRouter() const router = useRouter()
const tabsRef = inject(TABS_REF_KEY) const tabsRef = inject(TABS_REF_KEY)
const { handleBackTop, ScrollTopComp } = useScrollTop(tabsRef!) const { handleBackTop, ScrollTopComp } = useScrollTop(tabsRef!)
......
src/views/searchPage/index.vue
...@@ -4,13 +4,8 @@ ...@@ -4,13 +4,8 @@
<!-- 搜索栏 --> <!-- 搜索栏 -->
<div class="mb-1 p-4"> <div class="mb-1 p-4">
<div class="relative flex items-center gap-3"> <div class="relative flex items-center gap-3">
<el-input <el-input v-model="searchParams.title" placeholder="输入关键词搜索" class="w-300px! flex-1"
v-model="searchParams.title" @keyup.enter="handleSearch" clearable />
placeholder="输入关键词搜索"
class="w-300px! flex-1"
@keyup.enter="handleSearch"
clearable
/>
<el-button type="primary" @click="handleSearch"> 搜索 </el-button> <el-button type="primary" @click="handleSearch"> 搜索 </el-button>
</div> </div>
</div> </div>
...@@ -20,33 +15,18 @@ ...@@ -20,33 +15,18 @@
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="text-gray-600 text-14px">分类：</span> <span class="text-gray-600 text-14px">分类：</span>
<div class="flex gap-2"> <div class="flex gap-2">
<button <button v-for="sort in [{ label: '全部', value: '' }, ...articleTypeListOptions]" :key="sort.value"
v-for="sort in articleTypeListOptions" class="px-4 py-1.5 rounded-lg text-14px transition-colors cursor-pointer" :class="{
: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-blue-600 bg-blue-50': searchParams.type === sort.value,
'text-gray-600 hover:text-blue-600': 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 }} {{ sort.label }}
</button> </button>
</div> </div>
</div> </div>
<div class="text-gray-500 text-14px"> <div class="text-gray-500 text-14px">
<el-select <el-select v-model="searchParams.sortLogic" placeholder="请选择排序方式" class="w-100px!" @change="changeSort">
v-model="searchParams.sortLogic" <el-option v-for="sort in sortOptions" :key="sort.value" :label="sort.label" :value="sort.value" />
placeholder="请选择排序方式"
class="w-100px!"
@change="changeSort"
>
<el-option
v-for="sort in sortOptions"
:key="sort.value"
:label="sort.label"
:value="sort.value"
/>
</el-select> </el-select>
</div> </div>
</div> </div>
...@@ -77,22 +57,15 @@ ...@@ -77,22 +57,15 @@
<div v-show="list.length"> <div v-show="list.length">
<div class="space-y-4"> <div class="space-y-4">
<div <div v-for="item in list" :key="item.id"
v-for="item in list"
:key="item.id"
class="flex gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer" class="flex gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
@click="handleClick(item)" @click="handleClick(item)">
>
<!-- 封面图 --> <!-- 封面图 -->
<div <div v-if="item.faceUrl"
v-if="item.faceUrl" class="flex-shrink-0 w-240px h-135px rounded-lg overflow-hidden bg-gray-100 relative">
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" /> <img :src="item.faceUrl" class="w-full h-full object-cover" />
<div <div v-if="item.type === ArticleTypeEnum.VIDEO"
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">
class="absolute bottom-2 right-2 bg-black/70 text-white text-12px px-2 py-0.5 rounded"
>
{{ item.videoDuration }} {{ item.videoDuration }}
</div> </div>
</div> </div>
...@@ -116,15 +89,21 @@ ...@@ -116,15 +89,21 @@
<span>{{ item.showName }}</span> <span>{{ item.showName }}</span>
<span>{{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span> <span>{{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<el-icon class="text-sm"><View /></el-icon> <el-icon class="text-sm">
<View />
</el-icon>
<span class="font-medium text-gray-500">{{ item.viewCount }}</span> <span class="font-medium text-gray-500">{{ item.viewCount }}</span>
</div> </div>
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<el-icon class="text-sm"><ChatDotRound /></el-icon> <el-icon class="text-sm">
<ChatDotRound />
</el-icon>
<span class="font-medium">{{ item.replyCount }}</span> <span class="font-medium">{{ item.replyCount }}</span>
</div> </div>
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<el-icon class="text-sm"><Star /></el-icon> <el-icon class="text-sm">
<Star />
</el-icon>
<span class="font-medium">{{ item.praiseCount }}</span> <span class="font-medium">{{ item.praiseCount }}</span>
</div> </div>
</div> </div>
...@@ -133,7 +112,7 @@ ...@@ -133,7 +112,7 @@
<div class="flex-shrink-0 self-end"> <div class="flex-shrink-0 self-end">
<span class="text-blue-600 text-13px">{{ <span class="text-blue-600 text-13px">{{
articleTypeListOptions.find((i) => i.value === item.type)?.label articleTypeListOptions.find((i) => i.value === item.type)?.label
}}</span> }}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -148,23 +127,14 @@ ...@@ -148,23 +127,14 @@
<!-- 右侧：分页器 --> <!-- 右侧：分页器 -->
<div class="right"> <div class="right">
<div <div class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-3">
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="[5, 20, 1]" layout="prev, pager, next, jumper, total" :total="total"
<el-pagination class="custom-pagination" @current-change="
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) => { (e) => {
;(handleBackTop(), goToPage(e)) ; (handleBackTop(), goToPage(e))
} }
" " @size-change="changePageSize" />
@size-change="changePageSize"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -193,6 +163,10 @@ const route = useRoute() ...@@ -193,6 +163,10 @@ const route = useRoute()
const searchPageRef = ref<HTMLElement | null>(null) const searchPageRef = ref<HTMLElement | null>(null)
const { ScrollTopComp, handleBackTop } = useScrollTop(searchPageRef) const { ScrollTopComp, handleBackTop } = useScrollTop(searchPageRef)
const queryType = route.query.type || '' as ArticleTypeEnum | undefined
const querySearchTitle = route.query.title
const sortOptions = [ const sortOptions = [
{ label: '最热', value: 0 }, { label: '最热', value: 0 },
{ label: '最新', value: 1 }, { label: '最新', value: 1 },
...@@ -202,8 +176,9 @@ const { total, goToPage, changePageSize, refresh, searchParams, list } = usePage ...@@ -202,8 +176,9 @@ const { total, goToPage, changePageSize, refresh, searchParams, list } = usePage
getArticleList, getArticleList,
{ {
defaultParams: { defaultParams: {
type: articleTypeListOptions[0]?.value, type: queryType || '',
sortLogic: sortOptions[0]?.value, sortLogic: sortOptions[0]?.value,
title: querySearchTitle || '',
}, },
immediate: false, immediate: false,
}, },
...@@ -231,12 +206,8 @@ const handleClick = (item: ArticleListItemDto) => { ...@@ -231,12 +206,8 @@ const handleClick = (item: ArticleListItemDto) => {
} }
onActivated(() => { onActivated(() => {
if (route.query.title) { searchParams.value.title = route.query.title || ''
searchParams.value.title = route.query.title as string searchParams.value.type = route.query.type || ''
}
if (route.query.type) {
searchParams.value.type = route.query.type as ArticleTypeEnum
}
refresh() refresh()
}) })
</script> </script>
......
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