cxyy-web2/src/views/four/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 @tab-click="handleClick">
          <a-tab-pane :key="item.key" :tab="item.tab" v-for="item in menuList"> </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">
      <index></index>
    </el-col>
  </custom-layout>
</template>

<script setup>
// 组件
import index from './parts/index.vue'
import { TagsStore } from '@/store/api/system/tags'
const store = TagsStore()
// 加载中
const loading = ref(false)
const searchLoading = ref(false)
const activeKey = ref('1')
const searchValue = ref('')
const list = ref([])
const tagsList = ref([])
const menuList = ref([
  { key: '1', tab: '全部' },
  { key: '3', tab: '找项目' },
  { key: '4', tab: '找需求' },
  { key: '6', tab: '找成果' },
  { key: '-1', tab: '更多+' }
])
// 路由
const router = useRouter()
// 请求
onMounted(async () => {
  loading.value = true
  await 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 onSearch = async () => {
  router.push({ path: '/search', query: { name: searchValue.value, type: activeKey.value } })
}
const toSelect = (item) => {
  searchValue.value = item.title
  router.push({ path: '/search', query: { name: item.title, type: activeKey.value } })
}
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 = []
  }
}
// 选择
const handleClick = (tab) => {
  if (tab == -1) {
    menuList.value = [
      { key: '-1', tab: '全部' },
      { key: '3', tab: '找项目' },
      { key: '4', tab: '找需求' },
      { key: '5', tab: '找供给' },
      { key: '6', tab: '找成果' },
      { key: '1', tab: '找企业' }
    ]
  }
}
</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>