Add new components for login and comment functionality
This commit is contained in:
wangqiao
153
layout/kl-search/index.vue
Normal file
153
layout/kl-search/index.vue
Normal file
@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div>
|
||||
<header class="h-106px">
|
||||
<div class="mx-a ml--250px h-full flex items-center justify-center">
|
||||
<!-- Logo区域 -->
|
||||
<div class="h-100% flex cursor-pointer items-center" @click="router.push('/index')">
|
||||
<img src="@/assets/images/logo5.png" alt="图夕夕" class="h-51px w-182px" />
|
||||
</div>
|
||||
<!-- 搜索区域 -->
|
||||
<div class="relative ml-49px w-647px px4 p-r-0px!">
|
||||
<div class="search-input relative w-100%">
|
||||
<el-input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
placeholder="搜一搜"
|
||||
:prefix-icon="Search"
|
||||
class="no-right-border box-border h40 w-100% rounded-bl-4px rounded-br-0px rounded-tl-4px rounded-tr-0px bg-[#F8F8F8] text-14px outline-#999"
|
||||
@focus="handleHot(), (showHotList = true)"
|
||||
@input="handleInput"
|
||||
/>
|
||||
</div>
|
||||
<!-- 搜索框 获取到焦点 显示热门列表 -->
|
||||
<div
|
||||
v-if="showHotList"
|
||||
v-loading="loading"
|
||||
class="absolute z-100 w-625px 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="flex items-center">
|
||||
<button
|
||||
class="h-40px w-111px cursor-pointer border-width-1px border-color-#1A65FF rounded-bl-0px rounded-br-4px rounded-tl-0px rounded-tr-4px border-none border-solid text-center text-14px color-#fff bg-#1A65FF!"
|
||||
>
|
||||
搜索
|
||||
</button>
|
||||
<button
|
||||
class="m-l-16px h-40px w-111px cursor-pointer border-width-1px border-color-#E7B03B rounded-bl-6px rounded-br-6px rounded-tl-4px rounded-tr-6px border-none border-solid text-14px color-#fff bg-#E7B03B!"
|
||||
@click="handleUpload"
|
||||
>
|
||||
上传图纸
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
import useUserStore from '@/store/user'
|
||||
import router from '@/router'
|
||||
const userStore = useUserStore()
|
||||
|
||||
import { top } from '@/api/home/index'
|
||||
import type { ProjectDrawStatisticAppRespVO } from '@/api/home/type'
|
||||
import { page } from '@/api/upnew/index'
|
||||
|
||||
const searchQuery = ref('')
|
||||
const showHotList = ref(false)
|
||||
const hotItems = ref<ProjectDrawStatisticAppRespVO[]>([])
|
||||
|
||||
const handleUpload = () => {
|
||||
// 是否登录
|
||||
if (!userStore.token) return ElMessage.error('请先登录')
|
||||
// 新开窗口 用router跳转 新窗口打开
|
||||
window.open('/upnew/drawe', '_blank')
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
const handleHot = async () => {
|
||||
loading.value = true
|
||||
const res = await top({
|
||||
limit: 10,
|
||||
type: 1, // 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: 1, // 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) {
|
||||
window.open(`/drawe?level=${JSON.stringify(level)}&keywords=${item.title || ''}`, '_blank')
|
||||
} else if (item.type === 2) {
|
||||
window.open(`/text?level=${JSON.stringify(level)}&keywords=${item.title || ''}`, '_blank')
|
||||
} else if (item.type === 3) {
|
||||
window.open(`/model?level=${JSON.stringify(level)}&keywords=${item.title || ''}`, '_blank')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 监听点击事件
|
||||
document.addEventListener('click', (event) => {
|
||||
const target = event.target as HTMLElement
|
||||
if (!target.closest('.search-input')) {
|
||||
showHotList.value = false
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
.no-right-border :deep(.el-input__wrapper) {
|
||||
border-right: none !important;
|
||||
/* box-shadow: -1px 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset !important; */
|
||||
}
|
||||
|
||||
/* 如果需要调整右侧圆角，可以添加 */
|
||||
.no-right-border :deep(.el-input__wrapper) {
|
||||
border-top-right-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user