cxyy-web2/src/views/search/parts/all/project.vue

<template>
  <div class="main" v-loading="loading">
    <div class="w_1300" v-if="total > 0">
      <div class="one">
        <div class="list" :class="['list' + index]" v-for="(item, index) in list" :key="index" @click="toView(item)">
          <div class="type textOne">{{ item.industry || '暂无' }}</div>
          <div class="title">
            <p class="ellipsis-3">{{ item.name || '暂无' }}</p>
          </div>
          <div class="address" v-if="user && user.id">
            <el-icon color="#595959"><Location /></el-icon>
            <span class="textOne">{{ item.main || '暂无' }}</span>
          </div>
          <div class="biaoqian textOne" v-if="user && user.id">
            <span v-if="item.technology">{{ item.technology }}</span>
            <span v-if="item.sell">{{ item.sell }}</span>
          </div>
          <span class="state" :class="['state1']"></span>
        </div>
      </div>
      <div class="two">
        <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange" />
      </div>
    </div>
    <el-empty v-else description="暂无数据" />
  </div>
</template>

<script setup>
const $checkRes = inject('$checkRes')
// 接口
import { DictDataStore } from '@/store/api/system/dictData'
import { RegionStore } from '@/store/api/system/region'
import { SectorStore } from '@/store/api/platform/sector'
import { EsStore } from '@/store/api/es'
const esStore = EsStore()
const dictDataStore = DictDataStore()
const regionStore = RegionStore()
const sectorStore = SectorStore()
// 用户信息
import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
// 路由
const router = useRouter()

const searchValue = inject('searchValue')
// 加载中
const loading = ref(false)
const typeList = ref([])
const plateList = ref([])
// 字典表
const maturityList = ref([])
const cityList = ref([])
// 列表
const list = ref([])
let skip = 0
let limit = 15
const total = ref(0)
// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  await search({ skip, limit })
  loading.value = false
})
const searchOther = async () => {
  let result
  // 成熟度
  result = await dictDataStore.query({ code: 'projectMaturity', is_use: '0' })
  if ($checkRes(result)) maturityList.value = result.data
  // 技术领域
  result = await dictDataStore.query({ code: 'field', is_use: '0' })
  if ($checkRes(result)) typeList.value = result.data
  // 地区
  result = await regionStore.list({ level: 'city', parent_code: 22 })
  if ($checkRes(result)) cityList.value = result.data
  // 行业
  result = await sectorStore.query({ is_use: '0' })
  if ($checkRes(result)) plateList.value = result.data
}
const search = async (query = { skip, limit }) => {
  skip = query.skip
  limit = query.limit
  const info = { skip: query.skip, limit: query.limit, status: '1', is_use: '0' }
  if (searchValue.value) info.keyword = searchValue.value
  const res = await esStore.Sproject(info)
  if (res.errcode == '0') {
    list.value = res.data
    total.value = res.total
  }
}
// 查看
const toView = (item) => {
  if (user.value.id) {
    router.push({ path: `/project/detail`, query: { id: item.id || item._id } })
  } else ElMessage({ message: '未登录！', type: 'error' })
}
const currentPage = ref(1)
// 分页
const changePage = (page = currentPage.value) => {
  search({ skip: (page - 1) * limit, limit: limit })
}
const sizeChange = (limits) => {
  limit = limits
  currentPage.value = 1
  search({ skip: 0, limit: limit })
}
defineExpose({
  search
})
</script>
<style scoped lang="scss">
.main {
  .one {
    margin: 20px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    .list {
      position: relative;
      margin: 0 39px 39px 0;
      width: 208px;
      height: 286px;
      box-shadow: 3px 4px 4px 0px rgba(41, 41, 115, 0.32);
      border: solid 1px #ededed;
      .type {
        margin-left: 33px;
        padding: 22px 10px 0 0;
        font-size: $global-font-size-16;
        color: #414141;
      }
      .title {
        display: flex;
        align-items: center;
        margin: 24px 18px 0;
        height: 100px;
        font-size: $global-font-size-18;
        font-weight: bold;
        color: #ffffff;
        .ellipsis-3 {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          -webkit-line-clamp: 3;
        }
      }
      .address {
        margin-top: 80px;
        padding: 0 5px;
        font-size: $global-font-size-16;
        color: #282828;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
      .biaoqian {
        margin: 10px 5px 0 5px;
        text-align: right;
        overflow: hidden;
        span {
          padding: 0 5px;
          background-color: #f5f8ff;
          border-radius: 3px;
          border: solid 1px #d2daec;
          font-size: $global-font-size-14;
          line-height: 23px;
          color: #7d8aaa;
          margin-right: 2px;
        }
      }
    }
    .state {
      display: block;
      position: absolute;
      right: 0px;
      top: 0px;
      width: 75px;
      height: 24px;
      background: url(/images/project/dbhi-kcxm-item-xmyl.png) no-repeat;
    }
    .state1 {
      background: url(/images/project/dbhi-kcxm-item-xm1.png) no-repeat;
    }
    .state2 {
      background: url(/images/project/dbhi-kcxm-item-xm2.png) no-repeat;
    }
    .state3 {
      background: url(/images/project/dbhi-kcxm-item-xm3.png) no-repeat;
    }
    .list0 {
      background: url(/images/project/dbhi-kcxm-item1.png) no-repeat;
    }
    .list1 {
      background: url(/images/project/dbhi-kcxm-item2.png) no-repeat;
    }
    .list2 {
      background: url(/images/project/dbhi-kcxm-item3.png) no-repeat;
    }
    .list3 {
      background: url(/images/project/dbhi-kcxm-item4.png) no-repeat;
    }
    .list4 {
      background: url(/images/project/dbhi-kcxm-item5.png) no-repeat;
    }
    .list5 {
      background: url(/images/project/dbhi-kcxm-item6.png) no-repeat;
    }
    .list6 {
      background: url(/images/project/dbhi-kcxm-item7.png) no-repeat;
    }
    .list7 {
      background: url(/images/project/dbhi-kcxm-item8.png) no-repeat;
    }
    .list8 {
      background: url(/images/project/dbhi-kcxm-item9.png) no-repeat;
    }
    .list9 {
      background: url(/images/project/dbhi-kcxm-item10.png) no-repeat;
    }
    .list10 {
      background: url(/images/project/dbhi-kcxm-item1.png) no-repeat;
    }
    .list11 {
      background: url(/images/project/dbhi-kcxm-item2.png) no-repeat;
    }
    .list12 {
      background: url(/images/project/dbhi-kcxm-item3.png) no-repeat;
    }
    .list13 {
      background: url(/images/project/dbhi-kcxm-item4.png) no-repeat;
    }
    .list14 {
      background: url(/images/project/dbhi-kcxm-item5.png) no-repeat;
    }
    .list:nth-child(5n) {
      margin-right: 0;
    }
  }
  .two {
    display: flex;
    justify-content: center;
    margin: 20px 0;
  }
}
</style>