Refactor API requests and update component styles
This commit is contained in:
wangqiao
@ -2,27 +2,27 @@
|
||||
<div class="box-border">
|
||||
<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="" />
|
||||
<span class="ml-12px text-16px">全部资源分类</span>
|
||||
<span class="ml-[12px] text-[16px]">全部资源分类</span>
|
||||
</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
|
||||
v-for="(item, index) in menuItems"
|
||||
:key="index"
|
||||
: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 }}
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<img src="~/assets/images/user.png" alt="" srcset="" class="h-19px w-17px" />
|
||||
<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]" />
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
@ -35,7 +35,7 @@
|
||||
import { BellFilled } from '@element-plus/icons-vue'
|
||||
import { ref, computed } from 'vue'
|
||||
const menuItems = ref([
|
||||
{ name: '首页', path: '/index' },
|
||||
{ name: '首页', path: '/' },
|
||||
{ name: '图纸', path: '/drawe' },
|
||||
{ name: '文本', path: '/text' },
|
||||
{ name: '模型', path: '/model' },
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<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!">
|
||||
<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="w-[100%] border-b-[1px] border-b-[#eee] border-b-solid">
|
||||
<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')" />
|
||||
<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>
|
||||
</div>
|
||||
<div class="relative ml-30px">
|
||||
<div class="relative ml-[30px]">
|
||||
<el-input
|
||||
v-model="searchQuery"
|
||||
placeholder="电子产品"
|
||||
:prefix-icon="Search"
|
||||
class="search-input h-40px w-328px"
|
||||
class="search-input h-[40px] w-[328px]"
|
||||
@focus="handleHot(), (showHotList = true)"
|
||||
@input="handleInput"
|
||||
></el-input>
|
||||
@ -18,31 +18,31 @@
|
||||
<div
|
||||
v-if="showHotList"
|
||||
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
|
||||
v-for="(item, index) in hotItems"
|
||||
: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)"
|
||||
>
|
||||
<span class="color-#333333">{{ item.projectTypeName }}</span>
|
||||
<span v-if="item.count" class="color-#999999">{{ item.count }}份图纸</span>
|
||||
<span class="color-[#333333]">{{ item.projectTypeName }}</span>
|
||||
<span v-if="item.count" class="color-[#999999]">{{ item.count }}份图纸</span>
|
||||
</li>
|
||||
</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 class="absolute right-10px flex items-center">
|
||||
<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-else :src="userStore.userInfoRes.avatar" alt="" srcset="" class="h-19px w-17px rd-50%" />
|
||||
<div class="absolute right-[10px] flex items-center">
|
||||
<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-else :src="userStore.userInfoRes.avatar" alt="" srcset="" class="h-[19px] w-[17px] rd-[50%]" />
|
||||
</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">
|
||||
<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>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="个人中心"
|
||||
@ -135,18 +135,18 @@
|
||||
const level = item.pairs?.filter(Boolean).map((item) => ({ id: item?.id, name: item?.name, isChildren: false })) || []
|
||||
level.unshift(normal)
|
||||
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) {
|
||||
navigateTo(`/text?level=${JSON.stringify(level)}&keywords=${item.title || ''}`, '_blank')
|
||||
navigateTo(`/text?level=${JSON.stringify(level)}&keywords=${item.title || ''}`)
|
||||
} 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) => {
|
||||
switch (item) {
|
||||
case '首页':
|
||||
navigateTo('/index') // 修改为在新窗口打开
|
||||
navigateTo('/') // 修改为在新窗口打开
|
||||
break
|
||||
case '图纸':
|
||||
navigateTo('/drawe') // 修改为在新窗口打开
|
||||
@ -174,7 +174,7 @@
|
||||
}
|
||||
}
|
||||
const handleLogin = () => {
|
||||
$openLogin()
|
||||
// $openLogin()
|
||||
}
|
||||
const handleCommand = (command: string) => {
|
||||
if (command === '退出') {
|
||||
|
||||
@ -1,37 +1,30 @@
|
||||
<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-item v-for="(item, index) in level" :key="item.name" class="cursor-pointer" @click="handleClickBread(item, index)">{{
|
||||
item.name
|
||||
}}</el-breadcrumb-item>
|
||||
<el-breadcrumb-item v-for="(item, index) in level" :key="item.name" class="cursor-pointer"
|
||||
@click="handleClickBread(item, index)">{{
|
||||
item.name
|
||||
}}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<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="flex-shrink-0 text-15px text-[#333333] font-normal">{{ computType }}分类</div>
|
||||
<div class="ml-30px mt--6px flex flex-wrap">
|
||||
<div
|
||||
v-for="(item, index) in projectTypeList"
|
||||
:key="index"
|
||||
class="mb-8px mr-26px cursor-pointer rounded-15px px-15px py-6px text-14px text-[#666666] font-normal"
|
||||
:class="item.id === query.projectType ? 'bg-#EBEEFE! !text-[#1A65FF]' : ''"
|
||||
@click="handleClick(item)"
|
||||
>{{ item.name }}</div
|
||||
>
|
||||
<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="flex-shrink-0 text-[15px] text-[#333333] font-normal">{{ computType }}分类</div>
|
||||
<div class="ml-[30px] mt-[-6px] flex flex-wrap">
|
||||
<div v-for="(item, index) in projectTypeList" :key="index"
|
||||
class="mb-[8px] mr-[26px] cursor-pointer rounded-[15px] px-[15px] py-[6px] text-[14px] text-[#666666] font-normal"
|
||||
:class="item.id === query.projectType ? '!bg-[#ebeefe] !text-[#1A65FF]' : ''" @click="handleClick(item)">{{
|
||||
item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<div class="flex-shrink-0 text-15px text-[#333333] font-normal">软件分类</div>
|
||||
<div class="ml-30px mt--6px flex flex-wrap">
|
||||
<div
|
||||
v-for="(item, index) in editionsList"
|
||||
:key="index"
|
||||
class="mb-8px mr-26px cursor-pointer rounded-15px px-15px py-6px text-14px text-[#666666] font-normal"
|
||||
:class="item.id === query.editions ? '!bg-[#EBEEFE] !text-[#1A65FF]' : ''"
|
||||
@click="query.editions = item.id"
|
||||
>{{ item.name }}</div
|
||||
>
|
||||
<div class="flex-shrink-0 text-[15px] text-[#333333] font-normal">软件分类</div>
|
||||
<div class="ml-[30px] mt-[-6px] flex flex-wrap">
|
||||
<div v-for="(item, index) in editionsList" :key="index"
|
||||
class="mb-[8px] mr-[26px] cursor-pointer rounded-[15px] px-[15px] py-[6px] text-[14px] text-[#666666] font-normal"
|
||||
:class="item.id === query.editions ? '!bg-[#ebeefe] !text-[#1A65FF]' : ''" @click="query.editions = item.id">
|
||||
{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="mb-14px flex items-start">
|
||||
@ -50,96 +43,123 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { parent } from '~/api/upnew/index'
|
||||
import type { pageReq } from '~/api/upnew/types'
|
||||
import { ArrowRight } from '@element-plus/icons-vue'
|
||||
import { computed, ref } from 'vue'
|
||||
import { parent } from '~/api/upnew/index'
|
||||
import type { pageReq } from '~/api/upnew/types'
|
||||
import { ArrowRight } from '@element-plus/icons-vue'
|
||||
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
groundId: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
groundId: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
const query = defineModel<pageReq>('modelValue', {
|
||||
required: true,
|
||||
})
|
||||
const level = defineModel<{ id: string; name: string; isChildren?: boolean }[]>('level', {
|
||||
required: true,
|
||||
})
|
||||
const query = defineModel<pageReq>('modelValue', {
|
||||
required: true,
|
||||
})
|
||||
const level = defineModel<{ id: string; name: string; isChildren?: boolean }[]>('level', {
|
||||
required: true,
|
||||
})
|
||||
|
||||
const computType = computed(() => {
|
||||
return props.type === 1 ? '图纸' : props.type === 3 ? '模型' : '文本'
|
||||
})
|
||||
const computType = computed(() => {
|
||||
return props.type === 1 ? '图纸' : props.type === 3 ? '模型' : '文本'
|
||||
})
|
||||
|
||||
const handleParentId = (type?: string) => {
|
||||
if (level.value.length > 1) {
|
||||
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 - 1].id || '' // 获取最后一个元素的 id 或 defaul
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const handleParentId = (type?: string) => {
|
||||
if (level?.value?.length > 1) {
|
||||
if (type === 'init' && level.value.find((c: any) => c.isChildren)) {
|
||||
return level.value[level.value.length - 2].id || '' // 获取最后一个元素的 id 或 defaul
|
||||
}
|
||||
return '0'
|
||||
return level.value[level.value.length - 1].id || '' // 获取最后一个元素的 id 或 defaul
|
||||
}
|
||||
return '0'
|
||||
}
|
||||
|
||||
const projectTypeList = ref<any>([])
|
||||
/** 获取分类下拉框 */
|
||||
const getParent = (type?: string) => {
|
||||
parent({
|
||||
type: 1,
|
||||
// @ts-ignore
|
||||
parentId: handleParentId(type),
|
||||
}).then((res) => {
|
||||
if (Array.isArray(res.data)) {
|
||||
projectTypeList.value = [...[{ id: handleParentId(type), name: '全部' }], ...res.data]
|
||||
}
|
||||
})
|
||||
}
|
||||
getParent('init')
|
||||
// const projectTypeList = ref<any>([])
|
||||
/** 获取分类下拉框 */
|
||||
// const getParent = (type?: string) => {
|
||||
// parent({
|
||||
// type: 1,
|
||||
// parentId: handleParentId(type),
|
||||
// }).then((res) => {
|
||||
// if (Array.isArray(res.data)) {
|
||||
// // projectTypeList.value = [...[{ id: handleParentId(type), name: '全部' }], ...res.data]
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// getParent('init')
|
||||
|
||||
/** 版本 */
|
||||
const editionsList = ref<any>([])
|
||||
const getEditionsList = () => {
|
||||
parent({
|
||||
type: 2,
|
||||
parentId: 0,
|
||||
}).then((res) => {
|
||||
if (Array.isArray(res.data)) {
|
||||
editionsList.value = [...[{ id: '', name: '全部' }], ...res.data]
|
||||
}
|
||||
})
|
||||
}
|
||||
getEditionsList()
|
||||
/** 版本 */
|
||||
// const editionsList = ref<any>([])
|
||||
// const getEditionsList = () => {
|
||||
// parent({
|
||||
// type: 2,
|
||||
// parentId: 0,
|
||||
// }).then((res) => {
|
||||
// if (Array.isArray(res.data)) {
|
||||
// // editionsList.value = [...[{ id: '', name: '全部' }], ...res.data]
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// getEditionsList()
|
||||
|
||||
const handleClick = (row: any) => {
|
||||
query.value.title = ''
|
||||
query.value.projectType = row.id
|
||||
if (row.name === '全部') return
|
||||
const isChildren = level.value.find((c: any) => c.isChildren)
|
||||
if (!row.isChildren && isChildren) {
|
||||
const index = level.value.length - 1
|
||||
level.value[index] = { id: row.id, name: row.name, isChildren: true }
|
||||
} else if (!row.isChildren && !isChildren) {
|
||||
level.value.push({ id: row.id, name: row.name, isChildren: true })
|
||||
} else {
|
||||
level.value.push({ id: row.id, name: row.name })
|
||||
getParent()
|
||||
}
|
||||
}
|
||||
|
||||
const handleClickBread = (row: any, index: number) => {
|
||||
level.value.splice(index + 1)
|
||||
query.value.title = ''
|
||||
query.value.projectType = row.id
|
||||
getParent()
|
||||
|
||||
/** 是否是初始化 */
|
||||
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.projectType = row.id
|
||||
if (row.name === '全部') return
|
||||
const isChildren = level.value.find((c: any) => c.isChildren)
|
||||
if (!row.isChildren && isChildren) {
|
||||
const index = level.value.length - 1
|
||||
level.value[index] = { id: row.id, name: row.name, isChildren: true }
|
||||
} else if (!row.isChildren && !isChildren) {
|
||||
level.value.push({ id: row.id, name: row.name, isChildren: true })
|
||||
} else {
|
||||
level.value.push({ id: row.id, name: row.name })
|
||||
// getParent()
|
||||
queryType.value = ''
|
||||
refresh()
|
||||
}
|
||||
}
|
||||
|
||||
const handleClickBread = (row: any, index: number) => {
|
||||
level.value.splice(index + 1)
|
||||
query.value.title = ''
|
||||
query.value.projectType = row.id
|
||||
// getParent()
|
||||
queryType.value = ''
|
||||
refresh()
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user