Add new components for login and comment functionality
This commit is contained in:
wangqiao
264
components/kl-nav-tab/index.vue
Normal file
264
components/kl-nav-tab/index.vue
Normal file
@ -0,0 +1,264 @@
|
||||
<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">
|
||||
<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" />
|
||||
<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 useUserStore from '@/store/user'
|
||||
const userStore = useUserStore()
|
||||
const { $openLogin } = 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(() => {
|
||||
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 || ''}`, '_blank')
|
||||
} else if (item.type === 2) {
|
||||
navigateTo(`/text?level=${JSON.stringify(level)}&keywords=${item.title || ''}`, '_blank')
|
||||
} else if (item.type === 3) {
|
||||
navigateTo(`/model?level=${JSON.stringify(level)}&keywords=${item.title || ''}`, '_blank')
|
||||
}
|
||||
}
|
||||
|
||||
const handleClick = (item: string) => {
|
||||
switch (item) {
|
||||
case '首页':
|
||||
navigateTo('/index') // 修改为在新窗口打开
|
||||
break
|
||||
case '图纸':
|
||||
navigateTo('/drawe') // 修改为在新窗口打开
|
||||
break
|
||||
case '文本':
|
||||
navigateTo('/text') // 修改为在新窗口打开
|
||||
break
|
||||
case '模型':
|
||||
navigateTo('/model') // 修改为在新窗口打开
|
||||
break
|
||||
case '国外专区':
|
||||
navigateTo('/foreign') // 修改为在新窗口打开
|
||||
break
|
||||
case '牛人社区':
|
||||
navigateTo('/community') // 修改为在新窗口打开
|
||||
break
|
||||
case '交流频道':
|
||||
navigateTo('/communication/channel') // 修改为在新窗口打开
|
||||
break
|
||||
case '工具箱':
|
||||
navigateTo('/toolbox') // 修改为在新窗口打开
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
const handleLogin = () => {
|
||||
$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>
|
||||
Reference in New Issue
Block a user