cxyy-web2/src/views/search/index.vue

<template>
  <custom-layout v-loading="loading">
    <el-col :span="24" class="one">
      <!-- <el-image class="image" :src="news" fit="fill" /> -->
      <div class="input">
        <a-tabs v-model:activeKey="activeKey" centered>
          <a-tab-pane key="1" tab="企业"> </a-tab-pane>
          <!-- <a-tab-pane key="2" tab="专家"> </a-tab-pane> -->
          <a-tab-pane key="3" tab="项目"> </a-tab-pane>
          <a-tab-pane key="4" tab="需求"> </a-tab-pane>
          <a-tab-pane key="5" tab="供给"> </a-tab-pane>
          <a-tab-pane key="6" tab="成果"> </a-tab-pane>
        </a-tabs>
        <div class="input_1">
          <el-select size="large" clearable v-model="searchValue" allow-create filterable remote reserve-keyword placeholder="请输入想要搜索的内容" :remote-method="remoteMethod" :loading="searchLoading">
            <el-option v-for="item in tagsList" :key="item.id" :label="item.title" :value="item.title" />
          </el-select>
          <el-button size="large" @click="onSearch" type="primary">搜索</el-button>
        </div>
        <div class="hot">
          <div class="hot_1">热门搜索：</div>
          <div class="hot_2">
            <span v-for="(item, index) in list" :key="index" @click="toSelect(item)">{{ item.title }}</span>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="24" class="two">
      <company ref="companyRef" v-if="activeKey == '1'"></company>
      <!-- <expert ref="expertRef" v-if="activeKey == '2'"></expert> -->
      <project ref="projectRef" v-if="activeKey == '3'"></project>
      <demand ref="demandRef" v-if="activeKey == '4'"></demand>
      <supply ref="supplyRef" v-if="activeKey == '5'"></supply>
      <achievement ref="achievementRef" v-if="activeKey == '6'"></achievement>
    </el-col>
  </custom-layout>
</template>

<script setup>
// 组件
// import expert from './parts/expert.vue'
import company from './parts/company.vue'
import project from './parts/project.vue'
import demand from './parts/demand.vue'
import supply from './parts/supply.vue'
import achievement from './parts/achievement.vue'
import { TagsStore } from '@/store/api/system/tags'
const store = TagsStore()

const activeKey = ref('1')
// 加载中
const loading = ref(false)
// 路由
const route = useRoute()
const router = useRouter()
const searchValue = ref('')
// 加载中
const searchLoading = ref(false)
const list = ref([])
const tagsList = ref([])

const companyRef = ref(null)
const achievementRef = ref(null)
const supplyRef = ref(null)
const projectRef = ref(null)
const expertRef = ref(null)
const demandRef = ref(null)
// 请求
onMounted(async () => {
  loading.value = true
  if (route.query.name) searchValue.value = route.query.name
  if (route.query.type) activeKey.value = route.query.type
  await search()
  router.replace({ name: 'search' })
  loading.value = false
})
const search = async () => {
  const info = { skip: 0, limit: 6, is_use: '0' }
  const res = await store.query(info)
  if (res.errcode == '0') list.value = res.data
}
const toSelect = (item) => {
  searchValue.value = item.title
}
const onSearch = () => {
  if (activeKey.value == '1') companyRef.value.search()
  else if (activeKey.value == '2') expertRef.value.search()
  else if (activeKey.value == '3') projectRef.value.search()
  else if (activeKey.value == '4') demandRef.value.search()
  else if (activeKey.value == '5') supplyRef.value.search()
  else achievementRef.value.search()
}
const remoteMethod = (query) => {
  if (query) {
    searchLoading.value = true
    setTimeout(async () => {
      searchLoading.value = false
      const info = { is_use: '0', title: query }
      const res = await store.query(info)
      if (res.errcode == '0') tagsList.value = res.data
    }, 200)
  } else {
    tagsList.value = []
  }
}
provide('searchValue', searchValue)
</script>
<style scoped lang="scss">
.main {
  .one {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 200px;
    background: url(/images/bg.png);
    background-size: 100% 100%;

    .input {
      width: 830px;
      .input_1 {
        display: flex;
      }
      .hot {
        display: flex;
        margin: 10px 0 0 0;
        padding: 10px;
        .hot_1 {
          font-size: $global-font-size-18;
          font-family:
            PingFangSC-Regular,
            PingFang SC;
          font-weight: 400;
        }
        .hot_2 {
          span {
            margin: 0 10px;
            font-size: $global-font-size-18;
            font-family:
              PingFangSC-Regular,
              PingFang SC;
            font-weight: 400;
            color: #666;
            line-height: $global-font-size-18;
            cursor: pointer;
          }
          span:hover {
            color: #1989fa;
          }
        }
      }
      :deep(.ant-tabs .ant-tabs-tab) {
        font-size: $global-font-size-18 !important;
      }
    }
  }
}
</style>