Refactor API requests and update component styles
This commit is contained in:
@ -15,7 +15,7 @@ import type {
|
|||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
export const hotTop = (params: ThotTopReq) => {
|
export const hotTop = (params: ThotTopReq) => {
|
||||||
return useDollarFetchRequest.get<IResponse<ProjectDrawPageRespVO[]>>('/prod-api/app-api/business/app/project-draw/hot-top', { params })
|
return useFetchRequest.get<IResponse<ProjectDrawPageRespVO[]>>('/prod-api/app-api/business/app/project-draw/hot-top', { query:params })
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -24,21 +24,21 @@ export const hotTop = (params: ThotTopReq) => {
|
|||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
export const recommendTop = (params: ThotTopReq) => {
|
export const recommendTop = (params: ThotTopReq) => {
|
||||||
return useFetchRequest.get<IResponse<ProjectDrawPageRespVO[]>>('/prod-api/app-api/business/app/project-draw/recommend-top', { params })
|
return useFetchRequest.get<IResponse<ProjectDrawPageRespVO[]>>('/prod-api/app-api/business/app/project-draw/recommend-top', { query:params })
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取最新图纸信息
|
* 获取最新图纸信息
|
||||||
*/
|
*/
|
||||||
export const newDraw = (params: { type: number; limit: number }) => {
|
export const newDraw = (params: { type: number; limit: number }) => {
|
||||||
return useDollarFetchRequest.get<IResponse<ProjectDrawPageRespVO[]>>('/prod-api/app-api/business/project/index/draw-new', { params })
|
return useFetchRequest.get<IResponse<ProjectDrawPageRespVO[]>>('/prod-api/app-api/business/project/index/draw-new', { query:params })
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 首页-热点标签
|
* 首页-热点标签
|
||||||
*/
|
*/
|
||||||
export const hotTag = (params: { type: number; limit: number; size: number }) => {
|
export const hotTag = (params: { type: number; limit: number; size: number }) => {
|
||||||
return useDollarFetchRequest.get<IResponse<ProjectDictNodeVO[]>>('/prod-api/app-api/business/project/index/index-hot-tab', { params })
|
return useFetchRequest.get<IResponse<ProjectDictNodeVO[]>>('/prod-api/app-api/business/project/index/index-hot-tab', { query:params })
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -59,7 +59,7 @@ export const top = (params: { type: number; limit: number }) => {
|
|||||||
* 获取用户top数据
|
* 获取用户top数据
|
||||||
*/
|
*/
|
||||||
export const userTop = (params: { type?: number }) => {
|
export const userTop = (params: { type?: number }) => {
|
||||||
return useDollarFetchRequest.get<IResponse<ProjectTrendingScoreUserInfoVO[]>>('/prod-api/app-api/business/project/index/user-top', { params })
|
return useFetchRequest.get<IResponse<ProjectTrendingScoreUserInfoVO[]>>('/prod-api/app-api/business/project/index/user-top', { query:params })
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -72,7 +72,7 @@ export const settinngPage = (params: { pageNo?: number; pageSize: number; type:
|
|||||||
* 获得首页设置信息分页
|
* 获得首页设置信息分页
|
||||||
*/
|
*/
|
||||||
export const getSettingPage = (params: { type: number }) => {
|
export const getSettingPage = (params: { type: number }) => {
|
||||||
return useFetchRequest.get<IResponse<PageResultIndexSettingRespVO[]>>('/prod-api/app-api/system/index-setting/list', { params })
|
return useFetchRequest.get<IResponse<PageResultIndexSettingRespVO[]>>('/prod-api/app-api/system/index-setting/list', { query: params })
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -15,8 +15,8 @@ export const create = (params: TcreateReq) => {
|
|||||||
* @param params
|
* @param params
|
||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
export const parent = (params: { type: string | number; parentId: number }) => {
|
export const parent = (params: { type: string | number; parentId: number | string }) => {
|
||||||
return useFetchRequest.get<IResponse<parentRes[]>>('/prod-api/app-api/business/app/dict/parent', params)
|
return useFetchRequest.get<IResponse<parentRes[]>>('/prod-api/app-api/business/app/dict/parent', { query:params })
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* 获取具有上下级的字典信息
|
* 获取具有上下级的字典信息
|
||||||
@ -48,7 +48,7 @@ export const labels = (params: { type: string | number }) => {
|
|||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
export const page = (params: pageReq) => {
|
export const page = (params: pageReq) => {
|
||||||
return useFetchRequest.get<IResponse<pageRes>>('/prod-api/app-api/business/app/project-draw/page', params)
|
return useFetchRequest.get<IResponse<pageRes>>('/prod-api/app-api/business/app/project-draw/page', {query:params})
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* 获得项目表内容信息分页
|
* 获得项目表内容信息分页
|
||||||
|
|||||||
@ -52,7 +52,7 @@ export interface pageReq {
|
|||||||
projectId?: number | string
|
projectId?: number | string
|
||||||
title?: string
|
title?: string
|
||||||
ownedUserId?: string
|
ownedUserId?: string
|
||||||
editions?: string
|
editions?: any
|
||||||
labels?: any[]
|
labels?: any[]
|
||||||
type?: number // 类型: 1 图纸 2 文本 3 模型
|
type?: number // 类型: 1 图纸 2 文本 3 模型
|
||||||
source?: number | string
|
source?: number | string
|
||||||
@ -60,7 +60,7 @@ export interface pageReq {
|
|||||||
status?: any
|
status?: any
|
||||||
createAddress?: string
|
createAddress?: string
|
||||||
createIp?: string
|
createIp?: string
|
||||||
projectType?: string
|
projectType?: any
|
||||||
}
|
}
|
||||||
export interface pageRes {
|
export interface pageRes {
|
||||||
list: {
|
list: {
|
||||||
|
|||||||
4
app.vue
4
app.vue
@ -6,3 +6,7 @@
|
|||||||
</NuxtLayout>
|
</NuxtLayout>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||||||
|
</script>
|
||||||
|
|||||||
@ -2,27 +2,27 @@
|
|||||||
<div class="box-border">
|
<div class="box-border">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<div class="box-border h-100% h-55px w-221px flex items-center rd-2px bg-[#1A65FF] pl-24px text-white">
|
<div class="box-border h-[100%] h-[55px] w-[221px] flex items-center rd-[2px] bg-[#1A65FF] pl-[24px] text-white">
|
||||||
<img src="~/assets/images/1.png" alt="" srcset="" />
|
<img src="~/assets/images/1.png" alt="" srcset="" />
|
||||||
<span class="ml-12px text-16px">全部资源分类</span>
|
<span class="ml-[12px] text-[16px]">全部资源分类</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-center ml-45px w-660px flex justify-between">
|
<div class="item-center ml-[45px] w-[660px] flex justify-between">
|
||||||
<nuxt-link
|
<nuxt-link
|
||||||
v-for="(item, index) in menuItems"
|
v-for="(item, index) in menuItems"
|
||||||
:key="index"
|
:key="index"
|
||||||
:to="item.path"
|
:to="item.path"
|
||||||
class="parent-links relative rounded-lg px3 py2 text-[#1A65FF]"
|
class="parent-links relative rounded-lg px-3 py-2 text-[#1A65FF]"
|
||||||
>
|
>
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
<img v-if="item.path === '/communication/channel'" src="~/assets/images/hot.png" alt="火" class="absolute right--15px top--2px" />
|
<img v-if="item.path === '/communication/channel'" src="~/assets/images/hot.png" alt="火" class="absolute right-[-15px] top-[-2px]" />
|
||||||
</nuxt-link>
|
</nuxt-link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="isLogin" class="flex flex-1 items-center justify-end">
|
<div v-if="isLogin" class="flex flex-1 items-center justify-end">
|
||||||
<div class="h-36px w-36px cursor-pointer border-rd-[50%] bg-[#F5F5F5] text-center line-height-44px" @click="handleUserCenter">
|
<div class="h-[36px] w-[36px] cursor-pointer border-rd-[50%] bg-[#F5F5F5] text-center line-height-[44px]" @click="handleUserCenter">
|
||||||
<img src="~/assets/images/user.png" alt="" srcset="" class="h-19px w-17px" />
|
<img src="~/assets/images/user.png" alt="" srcset="" class="h-[19px] w-[17px]" />
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-8px h-36px w-36px cursor-pointer border-rd-[50%] text-center line-height-44px" @click="handleMessageCenter">
|
<div class="ml-[8px] h-[36px] w-[36px] cursor-pointer border-rd-[50%] text-center line-height-[44px]" @click="handleMessageCenter">
|
||||||
<el-icon size="20px" color="#999999"><BellFilled /></el-icon>
|
<el-icon size="20px" color="#999999"><BellFilled /></el-icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -35,7 +35,7 @@
|
|||||||
import { BellFilled } from '@element-plus/icons-vue'
|
import { BellFilled } from '@element-plus/icons-vue'
|
||||||
import { ref, computed } from 'vue'
|
import { ref, computed } from 'vue'
|
||||||
const menuItems = ref([
|
const menuItems = ref([
|
||||||
{ name: '首页', path: '/index' },
|
{ name: '首页', path: '/' },
|
||||||
{ name: '图纸', path: '/drawe' },
|
{ name: '图纸', path: '/drawe' },
|
||||||
{ name: '文本', path: '/text' },
|
{ name: '文本', path: '/text' },
|
||||||
{ name: '模型', path: '/model' },
|
{ name: '模型', path: '/model' },
|
||||||
|
|||||||
@ -1,16 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="w-100% border-b-1px border-b-[#eee] border-b-solid">
|
<div class="w-[100%] border-b-[1px] border-b-[#eee] border-b-solid">
|
||||||
<div class="relative ma-auto flex items-center py-20px w-1500px!">
|
<div class="relative ma-auto flex items-center py-[20px] w-[1500px]!">
|
||||||
<img src="~/assets/images/logo5.png" alt="图夕夕" srcset="" class="h-51px w-182px cursor-pointer" @click="router.push('/index')" />
|
<img src="~/assets/images/logo5.png" alt="图夕夕" srcset="" class="h-[51px] w-[182px] cursor-pointer" @click="router.push('/index')" />
|
||||||
<div class="ml-60px flex items-center">
|
<div class="ml-[60px] flex items-center">
|
||||||
<span v-for="item in navList" :key="item" class="nav" :class="props.active === item ? 'active' : ''" @click="handleClick(item)">{{ item }}</span>
|
<span v-for="item in navList" :key="item" class="nav" :class="props.active === item ? 'active' : ''" @click="handleClick(item)">{{ item }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="relative ml-30px">
|
<div class="relative ml-[30px]">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="searchQuery"
|
v-model="searchQuery"
|
||||||
placeholder="电子产品"
|
placeholder="电子产品"
|
||||||
:prefix-icon="Search"
|
:prefix-icon="Search"
|
||||||
class="search-input h-40px w-328px"
|
class="search-input h-[40px] w-[328px]"
|
||||||
@focus="handleHot(), (showHotList = true)"
|
@focus="handleHot(), (showHotList = true)"
|
||||||
@input="handleInput"
|
@input="handleInput"
|
||||||
></el-input>
|
></el-input>
|
||||||
@ -18,31 +18,31 @@
|
|||||||
<div
|
<div
|
||||||
v-if="showHotList"
|
v-if="showHotList"
|
||||||
v-loading="loading"
|
v-loading="loading"
|
||||||
class="absolute left-16px top-42px z-100 w-276px border-width-1px border-color-#1A65FF rounded-bl-4px rounded-br-4px rounded-tl-0px rounded-tr-0px border-solid bg-[#fff] pa-10px"
|
class="absolute left-[16px] top-[42px] z-100 w-[276px] border-width-[1px] border-color-[#1A65FF] rounded-bl-[4px] rounded-br-[4px] rounded-tl-[0px] rounded-tr-[0px] border-solid bg-[#fff] pa-[10px]"
|
||||||
>
|
>
|
||||||
<!-- 这里放置热门列表的内容 -->
|
<!-- 这里放置热门列表的内容 -->
|
||||||
<ul class="flex flex-col gap-6px">
|
<ul class="flex flex-col gap-[6px]">
|
||||||
<li
|
<li
|
||||||
v-for="(item, index) in hotItems"
|
v-for="(item, index) in hotItems"
|
||||||
:key="index"
|
:key="index"
|
||||||
class="flex flex-row cursor-pointer items-center justify-between text-13px"
|
class="flex flex-row cursor-pointer items-center justify-between text-[13px]"
|
||||||
@click="handleHotItem(item)"
|
@click="handleHotItem(item)"
|
||||||
>
|
>
|
||||||
<span class="color-#333333">{{ item.projectTypeName }}</span>
|
<span class="color-[#333333]">{{ item.projectTypeName }}</span>
|
||||||
<span v-if="item.count" class="color-#999999">{{ item.count }}份图纸</span>
|
<span v-if="item.count" class="color-[#999999]">{{ item.count }}份图纸</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div v-if="!hotItems.length" class="text-12px color-#999">无数据</div>
|
<div v-if="!hotItems.length" class="text-[12px] color-[#999]">无数据</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="absolute right-10px flex items-center">
|
<div class="absolute right-[10px] flex items-center">
|
||||||
<div class="h-36px w-36px border-rd-[50%] bg-[#F5F5F5] text-center line-height-44px">
|
<div class="h-[36px] w-[36px] border-rd-[50%] bg-[#F5F5F5] text-center line-height-[44px]">
|
||||||
<img v-if="!isLogin" src="~/assets/images/user.png" alt="" srcset="" class="h-19px w-17px" />
|
<img v-if="!isLogin" src="~/assets/images/user.png" alt="" srcset="" class="h-[19px] w-[17px]" />
|
||||||
<img v-else :src="userStore.userInfoRes.avatar" alt="" srcset="" class="h-19px w-17px rd-50%" />
|
<img v-else :src="userStore.userInfoRes.avatar" alt="" srcset="" class="h-[19px] w-[17px] rd-[50%]" />
|
||||||
</div>
|
</div>
|
||||||
<span v-if="!isLogin" class="ml-14px cursor-pointer text-14px text-[#1A65FF] font-normal" @click="handleLogin">立即登录</span>
|
<span v-if="!isLogin" class="ml-[14px] cursor-pointer text-[14px] text-[#1A65FF] font-normal" @click="handleLogin">立即登录</span>
|
||||||
<el-dropdown v-else placement="top-start" @command="handleCommand">
|
<el-dropdown v-else placement="top-start" @command="handleCommand">
|
||||||
<span class="ml-14px cursor-pointer text-14px text-[#1A65FF] font-normal">{{ userStore.userInfoRes.nickname || '立即登录' }}</span>
|
<span class="ml-[14px] cursor-pointer text-[14px] text-[#1A65FF] font-normal">{{ userStore.userInfoRes.nickname || '立即登录' }}</span>
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<el-dropdown-menu>
|
<el-dropdown-menu>
|
||||||
<el-dropdown-item command="个人中心"
|
<el-dropdown-item command="个人中心"
|
||||||
@ -135,18 +135,18 @@
|
|||||||
const level = item.pairs?.filter(Boolean).map((item) => ({ id: item?.id, name: item?.name, isChildren: false })) || []
|
const level = item.pairs?.filter(Boolean).map((item) => ({ id: item?.id, name: item?.name, isChildren: false })) || []
|
||||||
level.unshift(normal)
|
level.unshift(normal)
|
||||||
if (item.type === 1) {
|
if (item.type === 1) {
|
||||||
navigateTo(`/drawe?level=${JSON.stringify(level)}&keywords=${item.title || ''}`, '_blank')
|
navigateTo(`/drawe?level=${JSON.stringify(level)}&keywords=${item.title || ''}`)
|
||||||
} else if (item.type === 2) {
|
} else if (item.type === 2) {
|
||||||
navigateTo(`/text?level=${JSON.stringify(level)}&keywords=${item.title || ''}`, '_blank')
|
navigateTo(`/text?level=${JSON.stringify(level)}&keywords=${item.title || ''}`)
|
||||||
} else if (item.type === 3) {
|
} else if (item.type === 3) {
|
||||||
navigateTo(`/model?level=${JSON.stringify(level)}&keywords=${item.title || ''}`, '_blank')
|
navigateTo(`/model?level=${JSON.stringify(level)}&keywords=${item.title || ''}`)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleClick = (item: string) => {
|
const handleClick = (item: string) => {
|
||||||
switch (item) {
|
switch (item) {
|
||||||
case '首页':
|
case '首页':
|
||||||
navigateTo('/index') // 修改为在新窗口打开
|
navigateTo('/') // 修改为在新窗口打开
|
||||||
break
|
break
|
||||||
case '图纸':
|
case '图纸':
|
||||||
navigateTo('/drawe') // 修改为在新窗口打开
|
navigateTo('/drawe') // 修改为在新窗口打开
|
||||||
@ -174,7 +174,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
const handleLogin = () => {
|
const handleLogin = () => {
|
||||||
$openLogin()
|
// $openLogin()
|
||||||
}
|
}
|
||||||
const handleCommand = (command: string) => {
|
const handleCommand = (command: string) => {
|
||||||
if (command === '退出') {
|
if (command === '退出') {
|
||||||
|
|||||||
@ -1,37 +1,30 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- 面包屑 -->
|
<!-- 面包屑 -->
|
||||||
<div v-if="level.length > 1" class="mb--10px mt-20px pl-20px">
|
<div v-if="level.length > 1" class="mb-[-10px] mt-[20px] pl-[20px]">
|
||||||
<el-breadcrumb :separator-icon="ArrowRight">
|
<el-breadcrumb :separator-icon="ArrowRight">
|
||||||
<el-breadcrumb-item v-for="(item, index) in level" :key="item.name" class="cursor-pointer" @click="handleClickBread(item, index)">{{
|
<el-breadcrumb-item v-for="(item, index) in level" :key="item.name" class="cursor-pointer"
|
||||||
|
@click="handleClickBread(item, index)">{{
|
||||||
item.name
|
item.name
|
||||||
}}</el-breadcrumb-item>
|
}}</el-breadcrumb-item>
|
||||||
</el-breadcrumb>
|
</el-breadcrumb>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-30px box-border w-100% border border-[#EEEEEE] rounded-12px border-solid bg-[#FFFFFF] px-20px py-26px">
|
<div class="mt-[30px] box-border w-[100%] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] px-[20px] py-[26px]">
|
||||||
<div class="mb-14px flex items-start">
|
<div class="mb-[14px] flex items-start">
|
||||||
<div class="flex-shrink-0 text-15px text-[#333333] font-normal">{{ computType }}分类</div>
|
<div class="flex-shrink-0 text-[15px] text-[#333333] font-normal">{{ computType }}分类</div>
|
||||||
<div class="ml-30px mt--6px flex flex-wrap">
|
<div class="ml-[30px] mt-[-6px] flex flex-wrap">
|
||||||
<div
|
<div v-for="(item, index) in projectTypeList" :key="index"
|
||||||
v-for="(item, index) in projectTypeList"
|
class="mb-[8px] mr-[26px] cursor-pointer rounded-[15px] px-[15px] py-[6px] text-[14px] text-[#666666] font-normal"
|
||||||
:key="index"
|
:class="item.id === query.projectType ? '!bg-[#ebeefe] !text-[#1A65FF]' : ''" @click="handleClick(item)">{{
|
||||||
class="mb-8px mr-26px cursor-pointer rounded-15px px-15px py-6px text-14px text-[#666666] font-normal"
|
item.name }}</div>
|
||||||
:class="item.id === query.projectType ? 'bg-#EBEEFE! !text-[#1A65FF]' : ''"
|
|
||||||
@click="handleClick(item)"
|
|
||||||
>{{ item.name }}</div
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-start">
|
<div class="flex items-start">
|
||||||
<div class="flex-shrink-0 text-15px text-[#333333] font-normal">软件分类</div>
|
<div class="flex-shrink-0 text-[15px] text-[#333333] font-normal">软件分类</div>
|
||||||
<div class="ml-30px mt--6px flex flex-wrap">
|
<div class="ml-[30px] mt-[-6px] flex flex-wrap">
|
||||||
<div
|
<div v-for="(item, index) in editionsList" :key="index"
|
||||||
v-for="(item, index) in editionsList"
|
class="mb-[8px] mr-[26px] cursor-pointer rounded-[15px] px-[15px] py-[6px] text-[14px] text-[#666666] font-normal"
|
||||||
:key="index"
|
:class="item.id === query.editions ? '!bg-[#ebeefe] !text-[#1A65FF]' : ''" @click="query.editions = item.id">
|
||||||
class="mb-8px mr-26px cursor-pointer rounded-15px px-15px py-6px text-14px text-[#666666] font-normal"
|
{{ item.name }}</div>
|
||||||
:class="item.id === query.editions ? '!bg-[#EBEEFE] !text-[#1A65FF]' : ''"
|
|
||||||
@click="query.editions = item.id"
|
|
||||||
>{{ item.name }}</div
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="mb-14px flex items-start">
|
<!-- <div class="mb-14px flex items-start">
|
||||||
@ -50,12 +43,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, ref } from 'vue'
|
import { computed, ref } from 'vue'
|
||||||
import { parent } from '~/api/upnew/index'
|
import { parent } from '~/api/upnew/index'
|
||||||
import type { pageReq } from '~/api/upnew/types'
|
import type { pageReq } from '~/api/upnew/types'
|
||||||
import { ArrowRight } from '@element-plus/icons-vue'
|
import { ArrowRight } from '@element-plus/icons-vue'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
type: {
|
type: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 1,
|
default: 1,
|
||||||
@ -68,59 +61,82 @@
|
|||||||
type: String,
|
type: String,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
const query = defineModel<pageReq>('modelValue', {
|
const query = defineModel<pageReq>('modelValue', {
|
||||||
required: true,
|
required: true,
|
||||||
})
|
})
|
||||||
const level = defineModel<{ id: string; name: string; isChildren?: boolean }[]>('level', {
|
const level = defineModel<{ id: string; name: string; isChildren?: boolean }[]>('level', {
|
||||||
required: true,
|
required: true,
|
||||||
})
|
})
|
||||||
|
|
||||||
const computType = computed(() => {
|
const computType = computed(() => {
|
||||||
return props.type === 1 ? '图纸' : props.type === 3 ? '模型' : '文本'
|
return props.type === 1 ? '图纸' : props.type === 3 ? '模型' : '文本'
|
||||||
})
|
})
|
||||||
|
|
||||||
const handleParentId = (type?: string) => {
|
|
||||||
if (level.value.length > 1) {
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const handleParentId = (type?: string) => {
|
||||||
|
if (level?.value?.length > 1) {
|
||||||
if (type === 'init' && level.value.find((c: any) => c.isChildren)) {
|
if (type === 'init' && level.value.find((c: any) => c.isChildren)) {
|
||||||
return level.value[level.value.length - 2].id || '' // 获取最后一个元素的 id 或 defaul
|
return level.value[level.value.length - 2].id || '' // 获取最后一个元素的 id 或 defaul
|
||||||
}
|
}
|
||||||
return level.value[level.value.length - 1].id || '' // 获取最后一个元素的 id 或 defaul
|
return level.value[level.value.length - 1].id || '' // 获取最后一个元素的 id 或 defaul
|
||||||
}
|
}
|
||||||
return '0'
|
return '0'
|
||||||
}
|
}
|
||||||
|
|
||||||
const projectTypeList = ref<any>([])
|
// const projectTypeList = ref<any>([])
|
||||||
/** 获取分类下拉框 */
|
/** 获取分类下拉框 */
|
||||||
const getParent = (type?: string) => {
|
// const getParent = (type?: string) => {
|
||||||
parent({
|
// parent({
|
||||||
type: 1,
|
// type: 1,
|
||||||
// @ts-ignore
|
// parentId: handleParentId(type),
|
||||||
parentId: handleParentId(type),
|
// }).then((res) => {
|
||||||
}).then((res) => {
|
// if (Array.isArray(res.data)) {
|
||||||
if (Array.isArray(res.data)) {
|
// // projectTypeList.value = [...[{ id: handleParentId(type), name: '全部' }], ...res.data]
|
||||||
projectTypeList.value = [...[{ id: handleParentId(type), name: '全部' }], ...res.data]
|
// }
|
||||||
}
|
// })
|
||||||
})
|
// }
|
||||||
}
|
// getParent('init')
|
||||||
getParent('init')
|
|
||||||
|
|
||||||
/** 版本 */
|
/** 版本 */
|
||||||
const editionsList = ref<any>([])
|
// const editionsList = ref<any>([])
|
||||||
const getEditionsList = () => {
|
// const getEditionsList = () => {
|
||||||
parent({
|
// parent({
|
||||||
type: 2,
|
// type: 2,
|
||||||
parentId: 0,
|
// parentId: 0,
|
||||||
}).then((res) => {
|
// }).then((res) => {
|
||||||
if (Array.isArray(res.data)) {
|
// if (Array.isArray(res.data)) {
|
||||||
editionsList.value = [...[{ id: '', name: '全部' }], ...res.data]
|
// // editionsList.value = [...[{ id: '', name: '全部' }], ...res.data]
|
||||||
}
|
// }
|
||||||
})
|
// })
|
||||||
}
|
// }
|
||||||
getEditionsList()
|
// getEditionsList()
|
||||||
|
|
||||||
const handleClick = (row: any) => {
|
|
||||||
|
|
||||||
|
/** 是否是初始化 */
|
||||||
|
const queryType = ref('init')
|
||||||
|
/**获取分类下拉框 */
|
||||||
|
const { data: projectTypeList, refresh } = useAsyncData(`projectType-draw-${props.type}-${Date.now()}`, async () => {
|
||||||
|
const res = await parent({ type: 1, parentId: handleParentId(queryType.value) })
|
||||||
|
const all= [{ id: handleParentId(queryType.value), name: '全部' }]
|
||||||
|
return [...all, ...res.data]
|
||||||
|
})
|
||||||
|
|
||||||
|
/** 版本 */
|
||||||
|
const { data: editionsList } = useAsyncData(`editionsList-${props.type}-${Date.now()}`, async () => {
|
||||||
|
const res = await parent({ type: 2, parentId: 0 })
|
||||||
|
const all = [{ id: '', name: '全部' }]
|
||||||
|
return [...all, ...res.data]
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleClick = (row: any) => {
|
||||||
query.value.title = ''
|
query.value.title = ''
|
||||||
query.value.projectType = row.id
|
query.value.projectType = row.id
|
||||||
if (row.name === '全部') return
|
if (row.name === '全部') return
|
||||||
@ -132,14 +148,18 @@
|
|||||||
level.value.push({ id: row.id, name: row.name, isChildren: true })
|
level.value.push({ id: row.id, name: row.name, isChildren: true })
|
||||||
} else {
|
} else {
|
||||||
level.value.push({ id: row.id, name: row.name })
|
level.value.push({ id: row.id, name: row.name })
|
||||||
getParent()
|
// getParent()
|
||||||
}
|
queryType.value = ''
|
||||||
|
refresh()
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const handleClickBread = (row: any, index: number) => {
|
const handleClickBread = (row: any, index: number) => {
|
||||||
level.value.splice(index + 1)
|
level.value.splice(index + 1)
|
||||||
query.value.title = ''
|
query.value.title = ''
|
||||||
query.value.projectType = row.id
|
query.value.projectType = row.id
|
||||||
getParent()
|
// getParent()
|
||||||
}
|
queryType.value = ''
|
||||||
|
refresh()
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
14
composables/states.ts
Normal file
14
composables/states.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
/** 用户信息 **/
|
||||||
|
export const useToken = () =>
|
||||||
|
useState<string>('token', () => {
|
||||||
|
const token = useCookie<string | undefined>('token');
|
||||||
|
return token.value ? 'Bearer ' + token.value : '';
|
||||||
|
});
|
||||||
|
|
||||||
|
/** 热门数据 */
|
||||||
|
export const useHotMeg = () => useState<any>('hotMsg', () => {
|
||||||
|
return {
|
||||||
|
projectType:'',
|
||||||
|
projectTypeTop: ''
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -19,13 +19,11 @@ const useServerRequest = async <T>(
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
onResponse({ response }) {
|
onResponse({ response }) {
|
||||||
console.log('response1---', response);
|
|
||||||
if (+response.status === 200 && +response._data.code !== 0) {
|
if (+response.status === 200 && +response._data.code !== 0) {
|
||||||
process.client && ElMessage.error(response._data.msg);
|
process.client && ElMessage.error(response._data.msg);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onResponseError({ response }) {
|
onResponseError({ response }) {
|
||||||
console.log('response2---', response);
|
|
||||||
process.client &&
|
process.client &&
|
||||||
ElMessage.error(
|
ElMessage.error(
|
||||||
isArray(response._data.data.msg)
|
isArray(response._data.data.msg)
|
||||||
@ -36,7 +34,8 @@ const useServerRequest = async <T>(
|
|||||||
};
|
};
|
||||||
// return useFetch<T>(url, { ...defaultOptions, ...opts } as any);
|
// return useFetch<T>(url, { ...defaultOptions, ...opts } as any);
|
||||||
// 明确转换返回类型
|
// 明确转换返回类型
|
||||||
const response = await useFetch<T>(url, { ...defaultOptions, ...opts, key: 'unique-key-' + Date.now(), } as any);
|
const response = await useFetch<T>(url, { ...defaultOptions, ...opts } as any);
|
||||||
|
console.log(url +'-----' + 'response----', response.data.value);
|
||||||
return response.data.value as unknown as T;
|
return response.data.value as unknown as T;
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -45,9 +44,8 @@ const useServerRequest = async <T>(
|
|||||||
endpoint: string,
|
endpoint: string,
|
||||||
config?: Omit<FetchOptions, 'method'>
|
config?: Omit<FetchOptions, 'method'>
|
||||||
): Promise<T> => {
|
): Promise<T> => {
|
||||||
console.log('config----', config);
|
console.log(endpoint + '----' + 'config----', config);
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
return useServerRequest<T>(endpoint, { ...config, method: 'GET' })
|
return useServerRequest<T>(endpoint, { ...config, method: 'GET' })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -11,7 +11,7 @@
|
|||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
|
||||||
// import KlQuickMenu from '~/components/kl-quick-menu/index.vue'
|
import KlQuickMenu from '~/components/kl-quick-menu/index.vue'
|
||||||
// import KlFooter from '~/components/kl-footer/index.vue'
|
// import KlFooter from '~/components/kl-footer/index.vue'
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -12,7 +12,7 @@ export default defineNuxtConfig({
|
|||||||
|
|
||||||
ssr: true,
|
ssr: true,
|
||||||
modules: ["@unocss/nuxt", "@pinia/nuxt", "@element-plus/nuxt"],
|
modules: ["@unocss/nuxt", "@pinia/nuxt", "@element-plus/nuxt"],
|
||||||
css: ["@unocss/reset/tailwind.css", "element-plus/dist/index.css"],
|
css: ["@unocss/reset/tailwind.css", "element-plus/dist/index.css","~/assets/scss/app.scss"],
|
||||||
vite: {
|
vite: {
|
||||||
css: {
|
css: {
|
||||||
preprocessorOptions: {
|
preprocessorOptions: {
|
||||||
|
|||||||
@ -1,17 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="relative mt-34px w-100%">
|
<div class="relative mt-[34px] w-[100%]">
|
||||||
<KlTabBar v-model="query.source" :data="tabBar" />
|
<KlTabBar v-model="query.source" :data="tabBar" />
|
||||||
<div class="absolute right-0px top-10px text-16px text-[#999999] font-normal"
|
<div class="absolute right-[0px] top-[10px] text-[16px] text-[#999999] font-normal"
|
||||||
>共<span class="color-#1A65FF">{{ result.total }}</span
|
>共<span class="color-[#1A65FF]">{{ result?.total }}</span
|
||||||
>个筛选结果</div
|
>个筛选结果</div
|
||||||
>
|
>
|
||||||
<div class="content mt-10px">
|
<div class="content mt-[10px]">
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col v-for="(item, index) in result.list" :key="index" :span="6">
|
<el-col v-for="(item, index) in result?.list" :key="index" :span="6">
|
||||||
<CardPicture :item-info="item" />
|
<CardPicture :item-info="item" />
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-empty v-if="!result.list.length" :image="emptyImg"></el-empty>
|
<el-empty v-if="!result?.list.length" :image="emptyImg"></el-empty>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -27,7 +27,7 @@
|
|||||||
required: true,
|
required: true,
|
||||||
})
|
})
|
||||||
|
|
||||||
const result = defineModel<pageRes>('result', {
|
const result = defineModel<pageRes | null>('result', {
|
||||||
required: true,
|
required: true,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- 导航 -->
|
<!-- 导航 -->
|
||||||
<KlNavTab active="图纸" :type="1" />
|
<KlNavTab active="图纸" :type="1" />
|
||||||
<div class="ma-auto w-1440px">
|
<div class="ma-auto w-[1440px]">
|
||||||
<!-- 图纸分类 -->
|
<!-- 图纸分类 -->
|
||||||
<KlWallpaperCategory v-model="query" v-model:level="level" :type="1" />
|
<KlWallpaperCategory v-model="query" v-model:level="level" :type="1" />
|
||||||
<!-- 推荐栏目 -->
|
<!-- 推荐栏目 -->
|
||||||
@ -9,12 +9,12 @@
|
|||||||
<!-- 精选专题 -->
|
<!-- 精选专题 -->
|
||||||
<!-- <FeaturedSpecials></FeaturedSpecials> -->
|
<!-- <FeaturedSpecials></FeaturedSpecials> -->
|
||||||
<!-- 分页 -->
|
<!-- 分页 -->
|
||||||
<div class="mt-10px flex justify-center">
|
<div class="mt-[10px] flex justify-center">
|
||||||
<el-pagination
|
<el-pagination
|
||||||
v-model:current-page="query.pageNo"
|
v-model:current-page="query.pageNo"
|
||||||
v-model:page-size="query.pageSize"
|
v-model:page-size="query.pageSize"
|
||||||
:page-sizes="[12, 24, 48]"
|
:page-sizes="[12, 24, 48]"
|
||||||
:total="result.total"
|
:total="result?.total"
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
@size-change="handleClickSize"
|
@size-change="handleClickSize"
|
||||||
@current-change="handeClickCurrent"
|
@current-change="handeClickCurrent"
|
||||||
@ -33,8 +33,8 @@
|
|||||||
import type { pageRes, pageReq } from '~/api/upnew/types'
|
import type { pageRes, pageReq } from '~/api/upnew/types'
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const level = ref(
|
const level = ref(
|
||||||
route.query.level
|
route.query?.valuelevel
|
||||||
? JSON.parse(route.query.level as string)
|
? JSON.parse(route.query.valuelevel as string)
|
||||||
: [
|
: [
|
||||||
{
|
{
|
||||||
id: '0',
|
id: '0',
|
||||||
@ -43,9 +43,9 @@
|
|||||||
},
|
},
|
||||||
]
|
]
|
||||||
)
|
)
|
||||||
const keywords = ref(route.query.keywords as string)
|
const keywords = ref(route.query?.valuekeywords as string || '')
|
||||||
|
|
||||||
const query = reactive<pageReq>({
|
const query = ref<pageReq>({
|
||||||
pageNo: 1,
|
pageNo: 1,
|
||||||
pageSize: 12,
|
pageSize: 12,
|
||||||
projectType: '',
|
projectType: '',
|
||||||
@ -54,39 +54,45 @@
|
|||||||
type: 1,
|
type: 1,
|
||||||
title: keywords.value,
|
title: keywords.value,
|
||||||
})
|
})
|
||||||
const result = reactive<pageRes>({
|
// const result = reactive<pageRes>({
|
||||||
list: [],
|
// list: [],
|
||||||
total: 0,
|
// total: 0,
|
||||||
})
|
// })
|
||||||
|
|
||||||
// 如果id存在,则设置projectType
|
// 如果id存在,则设置projectType
|
||||||
if (level.value.length) {
|
if (level.value.length) {
|
||||||
query.projectType = level.value[level.value.length - 1].id || ''
|
query.value.projectType = level.value[level.value.length - 1].id || ''
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleClickSize = (val: number) => {
|
const handleClickSize = (val: number) => {
|
||||||
query.pageSize = val
|
query.value.pageSize = val
|
||||||
getPage()
|
getPage()
|
||||||
}
|
}
|
||||||
|
|
||||||
const handeClickCurrent = (val: number) => {
|
const handeClickCurrent = (val: number) => {
|
||||||
query.pageNo = val
|
query.value.pageNo = val
|
||||||
getPage()
|
getPage()
|
||||||
}
|
}
|
||||||
|
|
||||||
const getPage = () => {
|
|
||||||
page(query).then((res) => {
|
const { data:result, refresh:getPage } = await useAsyncData(`draw-page-list-${Date.now()}`, async () => {
|
||||||
const { data, code } = res
|
const res = await page(query.value)
|
||||||
if (code === 0) {
|
return res.data
|
||||||
result.list = data.list
|
|
||||||
result.total = data.total
|
},{
|
||||||
}
|
immediate: true,
|
||||||
})
|
})
|
||||||
}
|
// const getPage = () => {
|
||||||
|
// page(query).then((res) => {
|
||||||
|
// const { data, code } = res
|
||||||
|
// if (code === 0) {
|
||||||
|
// result.list = data.list
|
||||||
|
// result.total = data.total
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
|
||||||
getPage()
|
watch([() => query.value.projectType, () => query.value.editions, () => query.value.source], (val) => {
|
||||||
|
|
||||||
watch([() => query.projectType, () => query.editions, () => query.source], (val) => {
|
|
||||||
if (val) {
|
if (val) {
|
||||||
getPage()
|
getPage()
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,63 +1,63 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<div>
|
<div>
|
||||||
<div class="my-32px mb-20px text-18px text-[#333333] font-normal flex items-center"><img src="~/assets/images/2.png" alt="" srcset="" class="mr-6px" /> 多多排行榜</div>
|
<div class="my-[32px] mb-[20px] text-[18px] text-[#333333] font-normal flex items-center"><img src="~/assets/images/2.png" alt="" srcset="" class="mr-[6px]" /> 多多排行榜</div>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<div class="ma-auto box-border h-470px w-460px border border-[#EEEEEE] rounded-12px border-solid bg-[#FFFFFF] px-28px">
|
<div class="ma-auto box-border h-[470px] w-[460px] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] px-[28px]">
|
||||||
<div class="title-bg ma-auto mb-40px mt-20px">一周图纸作者排行</div>
|
<div class="title-bg ma-auto mb-[40px] mt-[20px]">一周图纸作者排行</div>
|
||||||
<div v-for="(item, index) in topList" :key="item.ownUserId" class="mb-23px flex items-center">
|
<div v-for="(item, index) in topList" :key="item.ownUserId" class="mb-[23px] flex items-center">
|
||||||
<div class="w-30px text-center"
|
<div class="w-[30px] text-center"
|
||||||
><img
|
><img
|
||||||
v-if="index === 0 || index === 1 || index === 2"
|
v-if="index === 0 || index === 1 || index === 2"
|
||||||
:src="imagesUrl(index)"
|
:src="imagesUrl(index)"
|
||||||
alt=""
|
alt=""
|
||||||
srcset=""
|
srcset=""
|
||||||
:class="index === 0 ? 'w-20px h-22px' : 'w-28px h-29px'"
|
:class="index === 0 ? 'w-[20px] h-[22px]' : 'w-[28px] h-[29px]'"
|
||||||
/>
|
/>
|
||||||
<span v-else class="LiHei (Noncommercial) font-MF text-16px text-[#999999] font-normal">{{ index }}</span>
|
<span v-else class="LiHei (Noncommercial) font-MF text-[16px] text-[#999999] font-normal">{{ index }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-20px w-120px flex items-center text-16px text-[#333333] font-normal">
|
<div class="ml-[20px] w-[120px] flex items-center text-[16px] text-[#333333] font-normal">
|
||||||
<img :src="item?.avatar" alt="" srcset="" class="h-36px w-36px rd-50%" />
|
<img :src="item?.avatar" alt="" srcset="" class="h-[36px] w-[36px] rd-[50%]" />
|
||||||
<span class="ellipsis1 ml-10px">{{ item.nickname }}</span>
|
<span class="ellipsis1 ml-[10px]">{{ item.nickname }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-20px flex text-14px text-[#666666] font-normal">
|
<div class="ml-[20px] flex text-[14px] text-[#666666] font-normal">
|
||||||
<!-- <el-icon class="text-17px color-#a8abb2!"><Folder /></el-icon> -->
|
<!-- <el-icon class="text-17px color-#a8abb2!"><Folder /></el-icon> -->
|
||||||
<img src="~/assets/images/file.png" alt="" srcset="" class="h-18px" />
|
<img src="~/assets/images/file.png" alt="" srcset="" class="h-[18px]" />
|
||||||
<div class="ellipsis1 ml-10px">作品:{{ item.projectCount || 0 }}</div>
|
<div class="ellipsis1 ml-[10px]">作品:{{ item.projectCount || 0 }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-20px flex text-14px text-[#666666] font-normal">
|
<div class="ml-[20px] flex text-[14px] text-[#666666] font-normal">
|
||||||
<!-- <el-icon class="text-17px color-[#e4e7ed!]"><User /></el-icon> -->
|
<!-- <el-icon class="text-17px color-[#e4e7ed!]"><User /></el-icon> -->
|
||||||
<img src="~/assets/images/user4.png" alt="" srcset="" class="h-17px" />
|
<img src="~/assets/images/user4.png" alt="" srcset="" class="h-[17px]" />
|
||||||
<div class="ellipsis1 ml-10px">粉丝:{{ item.fansCount || 0 }}</div>
|
<div class="ellipsis1 ml-[10px]">粉丝:{{ item.fansCount || 0 }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 暂无数据 -->
|
<!-- 暂无数据 -->
|
||||||
<el-empty v-if="!topList.length" description="暂无数据"></el-empty>
|
<el-empty v-if="!topList.length" description="暂无数据"></el-empty>
|
||||||
</div>
|
</div>
|
||||||
<div class="ma-auto ml-18px box-border h-470px w-460px border border-[#EEEEEE] rounded-12px border-solid bg-[#FFFFFF] px-28px">
|
<div class="ma-auto ml-[18px] box-border h-[470px] w-[460px] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] px-[28px]">
|
||||||
<div class="title-bg ma-auto mb-40px mt-20px">优质上传作者图纸</div>
|
<div class="title-bg ma-auto mb-[40px] mt-[20px]">优质上传作者图纸</div>
|
||||||
<div v-for="(item, index) in userTopList" :key="index" class="mb-23px flex items-center">
|
<div v-for="(item, index) in userTopList" :key="index" class="mb-[23px] flex items-center">
|
||||||
<div class="w-30px text-center"
|
<div class="w-[30px] text-center"
|
||||||
><img
|
><img
|
||||||
v-if="index === 0 || index === 1 || index === 2"
|
v-if="index === 0 || index === 1 || index === 2"
|
||||||
:src="imagesUrl(index)"
|
:src="imagesUrl(index)"
|
||||||
alt=""
|
alt=""
|
||||||
srcset=""
|
srcset=""
|
||||||
:class="index === 0 ? 'w-20px h-22px' : 'w-28px h-29px'"
|
:class="index === 0 ? 'w-[20px] h-[22px]' : 'w-[28px] h-[29px]'"
|
||||||
/>
|
/>
|
||||||
<span v-else class="font-MF LiHei (Noncommercial) text-16px text-[#999999] font-normal">{{ index }}</span>
|
<span v-else class="font-MF LiHei (Noncommercial) text-[16px] text-[#999999] font-normal">{{ index }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-20px w-120px flex items-center text-16px text-[#333333] font-normal">
|
<div class="ml-[20px] w-[120px] flex items-center text-[16px] text-[#333333] font-normal">
|
||||||
<img :src="item?.avatar" alt="" srcset="" class="h-36px w-36px rd-50%" />
|
<img :src="item?.avatar" alt="" srcset="" class="h-[36px] w-[36px] rd-[50%]" />
|
||||||
<span class="ellipsis1 ml-10px">{{ item.nickname }}</span>
|
<span class="ellipsis1 ml-[10px]">{{ item.nickname }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-20px flex text-14px text-[#666666] font-normal">
|
<div class="ml-[20px] flex text-[14px] text-[#666666] font-normal">
|
||||||
<img src="~/assets/images/file.png" alt="" srcset="" class="h-18px" />
|
<img src="~/assets/images/file.png" alt="" srcset="" class="h-[18px]" />
|
||||||
<div class="ellipsis1 ml-10px">作品:{{ item.projectCount || 0 }}</div>
|
<div class="ellipsis1 ml-[10px]">作品:{{ item.projectCount || 0 }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-20px flex text-14px text-[#666666] font-normal">
|
<div class="ml-[20px] flex text-[14px] text-[#666666] font-normal">
|
||||||
<img src="~/assets/images/user4.png" alt="" srcset="" class="h-17px" />
|
<img src="~/assets/images/user4.png" alt="" srcset="" class="h-[17px]" />
|
||||||
<div class="ellipsis1 ml-10px">粉丝:{{ item.fansCount || 0 }}</div>
|
<div class="ellipsis1 ml-[10px]">粉丝:{{ item.fansCount || 0 }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 暂无数据 -->
|
<!-- 暂无数据 -->
|
||||||
@ -65,18 +65,18 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-63px">
|
<div class="ml-[63px]">
|
||||||
<div class="my-32px mb-20px text-18px text-[#333333] font-normal flex items-center"><img src="~/assets/images/2.png" alt="" srcset="" class="mr-6px" /> 发布动态</div>
|
<div class="my-[32px] mb-[20px] text-[18px] text-[#333333] font-normal flex items-center"><img src="~/assets/images/2.png" alt="" srcset="" class="mr-[6px]" /> 发布动态</div>
|
||||||
|
|
||||||
<div class="box-border h-470px w-437px border border-[#EEEEEE] rounded-12px border-solid bg-[#FFFFFF] p-15px">
|
<div class="box-border h-[470px] w-[437px] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] p-[15px]">
|
||||||
<div
|
<div
|
||||||
v-for="item in newDrawList"
|
v-for="item in newDrawList"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
class="flex cursor-pointer items-center justify-between px-10px py-10px text-15px text-[#333333] font-normal hover:bg-[#f5f5f5]"
|
class="flex cursor-pointer items-center justify-between px-[10px] py-[10px] text-[15px] text-[#333333] font-normal hover:bg-[#f5f5f5]"
|
||||||
@click="handleClick(item)"
|
@click="handleClick(item)"
|
||||||
>
|
>
|
||||||
<div class="ellipsis1 w-70%">{{ item.title }}</div>
|
<div class="ellipsis1 w-[70%]">{{ item.title }}</div>
|
||||||
<div class="text-15px color-#999">{{ dayjs(item.createTime).format('MM-DD') }}</div>
|
<div class="text-[15px] color-[#999]">{{ dayjs(item.createTime).format('MM-DD') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 暂无数据 -->
|
<!-- 暂无数据 -->
|
||||||
<el-empty v-if="!newDrawList.length" description="暂无数据"></el-empty>
|
<el-empty v-if="!newDrawList.length" description="暂无数据"></el-empty>
|
||||||
@ -105,28 +105,33 @@
|
|||||||
})
|
})
|
||||||
|
|
||||||
// 最新动态
|
// 最新动态
|
||||||
const newDrawList = ref<ProjectDrawPageRespVO[]>([])
|
// const newDrawList = ref<ProjectDrawPageRespVO[]>([])
|
||||||
const handlenewDraw = async () => {
|
// const handlenewDraw = async () => {
|
||||||
const res = await newDraw({
|
// const res = await newDraw({
|
||||||
|
// type: 1,
|
||||||
|
// limit: 11,
|
||||||
|
// })
|
||||||
|
// // newDrawList.value = res.data
|
||||||
|
// }
|
||||||
|
// handlenewDraw()
|
||||||
|
|
||||||
|
const [{data: topList},{ data: userTopList}, {data: newDrawList}] = await Promise.all([ userTop({ type: 1 }), userTop({}),newDraw({
|
||||||
type: 1,
|
type: 1,
|
||||||
limit: 11,
|
limit: 11,
|
||||||
})
|
})])
|
||||||
// newDrawList.value = res.data
|
|
||||||
}
|
|
||||||
handlenewDraw()
|
|
||||||
|
|
||||||
const topList = ref<ProjectTrendingScoreUserInfoVO[]>([]) // 最新动态
|
// const topList = ref<ProjectTrendingScoreUserInfoVO[]>([]) // 最新动态
|
||||||
const userTopList = ref<ProjectTrendingScoreUserInfoVO[]>([]) // 最新动态
|
// const userTopList = ref<ProjectTrendingScoreUserInfoVO[]>([]) // 最新动态
|
||||||
const handleuserTop = () => {
|
// const handleuserTop = () => {
|
||||||
Promise.all([userTop({ type: 1 }), userTop({})]).then((res) => {
|
// Promise.all([userTop({ type: 1 }), userTop({})]).then((res) => {
|
||||||
// topList.value = res[0].data
|
// topList.value = res[0].data
|
||||||
// userTopList.value = res[1].data
|
// userTopList.value = res[1].data
|
||||||
|
|
||||||
// console.log('res----',JSON.stringify(res));
|
// console.log('res----',JSON.stringify(res));
|
||||||
|
|
||||||
})
|
// })
|
||||||
}
|
// }
|
||||||
handleuserTop()
|
// handleuserTop()
|
||||||
|
|
||||||
const handleClick = (item: ProjectDrawPageRespVO) => {
|
const handleClick = (item: ProjectDrawPageRespVO) => {
|
||||||
window.open(`/down-drawe-detail?id=${item.id}`, '_blank') // 修改为在新窗口打开
|
window.open(`/down-drawe-detail?id=${item.id}`, '_blank') // 修改为在新窗口打开
|
||||||
|
|||||||
@ -1,13 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="mt-34px w-100%">
|
<div class="mt-[34px] w-[100%]">
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
<KlTabBar v-model="query.type" :data="tabBar" :show-icon="true" />
|
<KlTabBar v-model="query.type" :data="tabBar" :show-icon="true" />
|
||||||
<div class="flex gap-15px">
|
<div class="flex gap-[15px]">
|
||||||
<span
|
<span
|
||||||
v-for="(item, index) in projectTypeList"
|
v-for="(item, index) in projectTypeList"
|
||||||
:key="index"
|
:key="index"
|
||||||
:class="{ 'color-#1A65FF! border-b-2px border-b-solid border-b-[#1A65FF] rounded-1px pb-3px': query.projectTypeDay === item.id }"
|
:class="{ 'color-[#1A65FF!] border-b-[2px] border-b-solid border-b-[#1A65FF] rounded-[1px] pb-[3px]': query.projectTypeDay === item.id }"
|
||||||
class="cursor-pointer text-14px color-#333333"
|
class="cursor-pointer text-[14px] color-[#333333]"
|
||||||
@mouseenter="handleHover(item)"
|
@mouseenter="handleHover(item)"
|
||||||
@click="handleClickType(item)"
|
@click="handleClickType(item)"
|
||||||
>
|
>
|
||||||
@ -15,7 +15,7 @@
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content mt-10px flex">
|
<div class="content mt-[10px] flex">
|
||||||
<!-- <div class="sider">
|
<!-- <div class="sider">
|
||||||
<div class="box-border h-100% h-55px w-221px flex items-center rounded-lg bg-[#1A65FF] pl-24px text-white">
|
<div class="box-border h-100% h-55px w-221px flex items-center rounded-lg bg-[#1A65FF] pl-24px text-white">
|
||||||
<img src="~/assets/images/1.png" alt="" srcset="" />
|
<img src="~/assets/images/1.png" alt="" srcset="" />
|
||||||
@ -40,23 +40,23 @@
|
|||||||
<el-empty v-if="projectTypeList.length === 0" description="暂无数据"></el-empty>
|
<el-empty v-if="projectTypeList.length === 0" description="暂无数据"></el-empty>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="box-border w-100%">
|
<div class="box-border w-[100%]">
|
||||||
<div class="grid grid-cols-5 gap-17px">
|
<div class="grid grid-cols-5 gap-[17px]">
|
||||||
<div
|
<div
|
||||||
v-for="item in hotTopList"
|
v-for="item in hotTopList"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
class="cursor-pointer border border-[#EEEEEE] rounded-1px border-solid bg-[#FFFFFF]"
|
class="cursor-pointer border border-[#EEEEEE] rounded-[1px] border-solid bg-[#FFFFFF]"
|
||||||
@click="handleCardClick(item)"
|
@click="handleCardClick(item)"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div class="h-212px w-100%">
|
<div class="h-[212px] w-[100%]">
|
||||||
<el-image :src="item.iconUrl" alt="" srcset="" fit="cover" class="block h-100% w-100%" />
|
<el-image :src="item.iconUrl" alt="" srcset="" fit="cover" class="block h-[100%] w-[100%]" />
|
||||||
</div>
|
</div>
|
||||||
<div class="ellipsis mx-20px my-11px text-14px color-#333333 font-normal">{{ item.title }}</div>
|
<div class="ellipsis mx-[20px] my-[11px] text-[14px] color-[#333333] font-normal">{{ item.title }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<el-empty v-if="hotTopList.length === 0" description="暂无数据"></el-empty>
|
<el-empty v-if="hotTopList?.length === 0" description="暂无数据"></el-empty>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="morefont-400 text-16px text-[#1A65FF] text-right cursor-pointer"> 查看更多 >> </div> -->
|
<!-- <div class="morefont-400 text-16px text-[#1A65FF] text-right cursor-pointer"> 查看更多 >> </div> -->
|
||||||
@ -70,6 +70,11 @@
|
|||||||
import { hotTop, hotTag } from '~/api/home/index'
|
import { hotTop, hotTag } from '~/api/home/index'
|
||||||
import type { ProjectDrawPageRespVO, ProjectDictNodeVO } from '~/api/home/type'
|
import type { ProjectDrawPageRespVO, ProjectDictNodeVO } from '~/api/home/type'
|
||||||
|
|
||||||
|
/** tianjia key 接口刷新了 页面没变化 */
|
||||||
|
definePageMeta({
|
||||||
|
key: 'PopularDrawings', // 页面的唯一标识,用于区分不同的页面
|
||||||
|
})
|
||||||
|
|
||||||
/** 请求参数 */
|
/** 请求参数 */
|
||||||
const query = reactive({
|
const query = reactive({
|
||||||
type: 1,
|
type: 1,
|
||||||
@ -127,48 +132,77 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/** 热门数据 */
|
/** 热门数据 */
|
||||||
const hotTopList = ref<ProjectDrawPageRespVO[]>([])
|
// const hotTopList = ref<ProjectDrawPageRespVO[]>([])
|
||||||
const getHotTop = () => {
|
// const getHotTop = () => {
|
||||||
hotTop({
|
// hotTop({
|
||||||
type: query.type,
|
// type: query.type,
|
||||||
projectType: query.projectTypeDay,
|
// projectType: query.projectTypeDay,
|
||||||
isDomestic: query.isDomestic,
|
// isDomestic: query.isDomestic,
|
||||||
projectTypeTop: query.projectTypeDay,
|
// projectTypeTop: query.projectTypeDay,
|
||||||
}).then((res) => {
|
// }).then((res) => {
|
||||||
if (res.code === 0) {
|
// if (res.code === 0) {
|
||||||
hotTopList.value = res.data || []
|
// hotTopList.value = res.data || []
|
||||||
}
|
// }
|
||||||
})
|
// })
|
||||||
}
|
// }
|
||||||
|
|
||||||
/** 获取分类下拉框 */
|
const { data: projectTypeList, refresh: getParent } = useAsyncData('projectTypeListChildren-PopularDrawings-popularDrawings', async () => {
|
||||||
const projectTypeList = ref<ProjectDictNodeVO[]>([])
|
const res = await hotTag({
|
||||||
const projectTypeListChildren = ref<ProjectDictNodeVO[]>([])
|
|
||||||
const getParent = () => {
|
|
||||||
hotTag({
|
|
||||||
type: query.type,
|
type: query.type,
|
||||||
limit: 6,
|
limit: 6,
|
||||||
size: 1000,
|
size: 1000,
|
||||||
}).then((res) => {
|
|
||||||
if (res.code === 0) {
|
|
||||||
if (Array.isArray(res.data) && res.data.length > 0) {
|
|
||||||
projectTypeList.value = [...res.data, { id: '0', name: '全部分类', children: [] }]
|
|
||||||
projectTypeListChildren.value = res.data[0].children || []
|
|
||||||
query.projectTypeDay = res.data[0].id || ''
|
|
||||||
query.projectType = res.data[0]!.children?.[0]!.id || ''
|
|
||||||
// 热门数据
|
|
||||||
getHotTop()
|
|
||||||
} else {
|
|
||||||
hotTopList.value = []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
const all = [{ id: '0', name: '全部分类', children: [] }]
|
||||||
|
if (Array.isArray(res.data) && res.data?.length > 0) {
|
||||||
|
const total = [...res.data,...all]
|
||||||
|
// query.projectTypeDay = total[0]?.id || ''
|
||||||
|
// query.projectType = total[0]!.children?.[0]?.id || ''
|
||||||
|
return total
|
||||||
}
|
}
|
||||||
|
return []
|
||||||
|
})
|
||||||
|
|
||||||
|
const {data: hotTopList, refresh: getHotTop} = useAsyncData('hotTop-PopularDrawings-popularDrawings', async () => {
|
||||||
|
const res = await hotTop({
|
||||||
|
type: query.type,
|
||||||
|
// @ts-ignore
|
||||||
|
projectType: query.projectTypeDay,
|
||||||
|
isDomestic: query.isDomestic || 1,
|
||||||
|
projectTypeTop: query.projectTypeDay,
|
||||||
|
})
|
||||||
|
return res.data || []
|
||||||
|
})
|
||||||
|
|
||||||
|
/** 获取分类下拉框 */
|
||||||
|
// const projectTypeList = ref<ProjectDictNodeVO[]>([])
|
||||||
|
// // const projectTypeListChildren = ref<ProjectDictNodeVO[]>([])
|
||||||
|
// const getParent = () => {
|
||||||
|
// hotTag({
|
||||||
|
// type: query.type,
|
||||||
|
// limit: 6,
|
||||||
|
// size: 1000,
|
||||||
|
// }).then((res) => {
|
||||||
|
// if (res.code === 0) {
|
||||||
|
// if (Array.isArray(res.data) && res.data.length > 0) {
|
||||||
|
// projectTypeList.value = [...res.data, { id: '0', name: '全部分类', children: [] }]
|
||||||
|
// projectTypeListChildren.value = res.data[0].children || []
|
||||||
|
// query.projectTypeDay = res.data[0].id || ''
|
||||||
|
// query.projectType = res.data[0]!.children?.[0]!.id || ''
|
||||||
|
// // 热门数据
|
||||||
|
// getHotTop()
|
||||||
|
// } else {
|
||||||
|
// hotTopList.value = []
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const handleHover = (item: ProjectDictNodeVO) => {
|
const handleHover = (item: ProjectDictNodeVO) => {
|
||||||
query.projectTypeDay = item.id || ''
|
query.projectTypeDay = item.id || ''
|
||||||
if (item.name === '全部分类') return
|
if (item.name === '全部分类') return
|
||||||
projectTypeListChildren.value = item.children || []
|
// projectTypeListChildren.value = item.children || []
|
||||||
query.projectType = item.children?.[0].id || ''
|
query.projectType = item.children?.[0].id || ''
|
||||||
// 热门数据
|
// 热门数据
|
||||||
getHotTop()
|
getHotTop()
|
||||||
@ -182,11 +216,12 @@
|
|||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => query.type,
|
() => query.type,
|
||||||
() => {
|
async () => {
|
||||||
getParent()
|
await getParent();
|
||||||
|
await getHotTop();
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
immediate: true,
|
// immediate: true,
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user