267 lines
8.6 KiB
Vue
267 lines
8.6 KiB
Vue
<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="navigateTo('/')" />
|
|
<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]">
|
|
<el-input
|
|
v-model="searchQuery"
|
|
placeholder="电子产品"
|
|
:prefix-icon="Search"
|
|
class="search-input h-[40px] w-[328px]"
|
|
@focus="handleHot(), (showHotList = true)"
|
|
@input="handleInput"
|
|
></el-input>
|
|
<!-- 搜索框 获取到焦点 显示热门列表 -->
|
|
<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]"
|
|
>
|
|
<!-- 这里放置热门列表的内容 -->
|
|
<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]"
|
|
@click="handleHotItem(item)"
|
|
>
|
|
<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>
|
|
</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] relative top-[7px] left-[10px]" />
|
|
<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>
|
|
<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>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item command="个人中心"
|
|
><el-icon><Setting /></el-icon>个人中心</el-dropdown-item
|
|
>
|
|
<el-dropdown-item command="退出"
|
|
><el-icon><SwitchButton /></el-icon>退出</el-dropdown-item
|
|
>
|
|
<!-- <el-dropdown-item>The Action 3st</el-dropdown-item> -->
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, getCurrentInstance, computed, onMounted } from 'vue'
|
|
import { Setting, SwitchButton } from '@element-plus/icons-vue'
|
|
import { page } from '~/api/upnew/index'
|
|
import { top } from '~/api/home/index'
|
|
import type { ProjectDrawStatisticAppRespVO } from '~/api/home/type'
|
|
import { Search } from '@element-plus/icons-vue'
|
|
import refreshToken from "~/utils/RefreshToken";
|
|
import useUserStore from '~/store/user'
|
|
const userStore = useUserStore()
|
|
const app = useNuxtApp()
|
|
|
|
const props = defineProps({
|
|
active: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
type: {
|
|
type: Number, // 1 图纸 2 模型 3 文本
|
|
default: 1,
|
|
},
|
|
})
|
|
|
|
const searchQuery = ref('')
|
|
const showHotList = ref(false)
|
|
const hotItems = ref<ProjectDrawStatisticAppRespVO[]>([])
|
|
|
|
// 是否登录
|
|
const isLogin = computed(() => {
|
|
console.log('userStore.token', refreshToken.getToken());
|
|
|
|
return !!userStore.token
|
|
})
|
|
|
|
const navList = ref(['首页', '图纸', '文本', '模型', '国外专区', '工具箱', '交流频道'])
|
|
|
|
const loading = ref(false)
|
|
const handleHot = async () => {
|
|
loading.value = true
|
|
const res = await top({
|
|
limit: 10,
|
|
type: props.type, // 1 图纸 2 模型 3 文本
|
|
})
|
|
hotItems.value = res.data
|
|
loading.value = false
|
|
}
|
|
handleHot()
|
|
|
|
const timer = ref(0)
|
|
const handleInput = (val: string) => {
|
|
searchQuery.value = val
|
|
loading.value = true
|
|
if (timer.value) {
|
|
window.clearTimeout(timer.value)
|
|
}
|
|
timer.value = window.setTimeout(async () => {
|
|
console.log('searchQuery', searchQuery.value)
|
|
const res = await page({
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
type: props.type, // 1 图纸 2 模型 3 文本
|
|
title: searchQuery.value, // 1 图纸 2 模型 3 文本
|
|
})
|
|
if (res.code === 0) {
|
|
hotItems.value = res.data.list.map((c) => {
|
|
return { ...c, projectTypeName: c.title }
|
|
})
|
|
}
|
|
loading.value = false
|
|
}, 200)
|
|
}
|
|
|
|
const handleHotItem = (item: ProjectDrawStatisticAppRespVO) => {
|
|
const normal = { id: '0', name: '图纸库', isChildren: false }
|
|
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 || ''}`)
|
|
} else if (item.type === 2) {
|
|
navigateTo(`/text?level=${JSON.stringify(level)}&keywords=${item.title || ''}`)
|
|
} else if (item.type === 3) {
|
|
navigateTo(`/model?level=${JSON.stringify(level)}&keywords=${item.title || ''}`)
|
|
}
|
|
}
|
|
|
|
const handleClick = (item: string) => {
|
|
switch (item) {
|
|
case '首页':
|
|
navigateTo({ path: '/'}) // 修改为在新窗口打开
|
|
break
|
|
case '图纸':
|
|
navigateTo('/drawe') // 修改为在新窗口打开
|
|
break
|
|
case '文本':
|
|
navigateTo('/text') // 修改为在新窗口打开
|
|
break
|
|
case '模型':
|
|
navigateTo('/model') // 修改为在新窗口打开
|
|
break
|
|
case '国外专区':
|
|
navigateTo('/foreign') // 修改为在新窗口打开
|
|
break
|
|
case '牛人社区':
|
|
navigateTo('/community') // 修改为在新窗口打开
|
|
break
|
|
case '交流频道':
|
|
navigateTo('/channel') // 修改为在新窗口打开
|
|
break
|
|
case '工具箱':
|
|
navigateTo('/toolbox') // 修改为在新窗口打开
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
}
|
|
const handleLogin = () => {
|
|
app?.$openLogin() // 调用全局方法
|
|
}
|
|
const handleCommand = (command: string) => {
|
|
if (command === '退出') {
|
|
userStore.logout()
|
|
userStore.$reset()
|
|
} else if (command === '个人中心') {
|
|
navigateTo('/personal/center/info')
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
// 监听点击事件
|
|
document.addEventListener('click', (event) => {
|
|
const target = event.target as HTMLElement
|
|
if (!target.closest('.search-input')) {
|
|
showHotList.value = false
|
|
}
|
|
})
|
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.active {
|
|
color: #1a65ff !important;
|
|
position: relative;
|
|
|
|
&::after {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 3px;
|
|
border-radius: 3px;
|
|
left: 0px;
|
|
bottom: -8px;
|
|
background-color: #1a65ff !important;
|
|
content: '';
|
|
transition: all 0.3s;
|
|
}
|
|
}
|
|
::v-deep(.el-input__wrapper) {
|
|
border-radius: 23px !important;
|
|
width: 328px;
|
|
height: 40px;
|
|
// border: 1px solid #d7d7d7;
|
|
}
|
|
.nav {
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
color: #333333;
|
|
margin-right: 40px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 添加自定义样式来调整图标大小 */
|
|
::v-deep(.el-input__prefix .el-icon) {
|
|
font-size: 16px; /* 调整图标大小 */
|
|
}
|
|
|
|
/* 修改 placeholder 的字体大小 */
|
|
::v-deep(.el-input__inner::placeholder) {
|
|
font-size: 14px; // 调整为你想要的字体大小
|
|
}
|
|
|
|
/* 添加下拉菜单样式修正 */
|
|
::v-deep(.el-dropdown__popper) {
|
|
border: none !important;
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1) !important;
|
|
|
|
.el-dropdown-menu__item {
|
|
padding: 8px 20px;
|
|
|
|
&:hover {
|
|
background: #f5f7fa;
|
|
}
|
|
}
|
|
|
|
/* 移除聚焦时的蓝色边框 */
|
|
.el-dropdown-menu {
|
|
border: 1px solid #ebeef5 !important;
|
|
}
|
|
}
|
|
|
|
/* 移除触发按钮的轮廓线 */
|
|
.el-dropdown span {
|
|
&:focus {
|
|
outline: none !important;
|
|
}
|
|
}
|
|
</style>
|