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

<template>
  <div class="main" v-loading="loading">
    <div class="w_1300" v-if="total > 0">
      <div class="one">
        <div class="list" v-for="(item, index) in list" :key="index" @click="toView(item)">
          <div class="list_1">
            <el-image class="image" :src="file[index]" fit="fill" />
            <div class="box">
              <p class="name textMore">{{ item.name || '暂无' }}</p>
            </div>
            <div class="list_2" v-if="user && user.id">
              <div class="other">
                <el-image class="image" :src="one" fit="fill" />
                <div class="text textOne">{{ item.field || '暂无' }}</div>
              </div>
              <div class="other">
                <el-image class="image" :src="two" fit="fill" />
                <div class="text textOne">{{ item.person || '暂无' }}</div>
              </div>
              <div class="other">
                <el-image class="image" :src="thr" fit="fill" />
                <div class="text textOne">{{ item.source || '暂无' }}</div>
              </div>
            </div>
          </div>
        </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>
// 图片引入
import bg_1 from '/images/achievement/tec_bg_1.png'
import bg_2 from '/images/achievement/tec_bg_2.png'
import bg_3 from '/images/achievement/tec_bg_3.png'
import bg_4 from '/images/achievement/tec_bg_4.png'
import bg_5 from '/images/achievement/tec_bg_6.png'
import bg_6 from '/images/achievement/tec_bg_8.png'
import bg_7 from '/images/achievement/tec_bg_9.png'
import bg_8 from '/images/achievement/tec_bg_10.png'
import bg_9 from '/images/achievement/tec_bg_7.png'
import one from '/images/achievement/bg-cgyx-list-icon1.png'
import two from '/images/achievement/bg-cgyx-list-icon2.png'
import thr from '/images/achievement/bg-cgyx-list-icon3.png'

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 file = ref([bg_1, bg_2, bg_3, bg_4, bg_5, bg_6, bg_7, bg_8, bg_9, bg_1, bg_2, bg_3])
// 列表
const list = ref([])
let skip = 0
let limit = inject('limit')
const total = ref(0)
// 字典表
const moneyList = ref([])
const matureList = ref([])
const sellList = ref([])
const cityList = ref([])
const typeList = ref([])
const plateList = ref([])
// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  await search()
  loading.value = false
})
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.Sachievement(info)
  if (res.errcode == '0') {
    list.value = res.data
    total.value = res.total
  }
}
const searchOther = async () => {
  let result
  // 技术领域
  result = await dictDataStore.query({ code: 'field', is_use: '0' })
  if ($checkRes(result)) typeList.value = result.data
  // 成熟度
  result = await dictDataStore.query({ code: 'mature', is_use: '0' })
  if ($checkRes(result)) matureList.value = result.data
  // 出让方式
  result = await dictDataStore.query({ code: 'sell', is_use: '0' })
  if ($checkRes(result)) sellList.value = result.data
  // 价格
  result = await dictDataStore.query({ code: 'money', is_use: '0' })
  if ($checkRes(result)) moneyList.value = result.data
  // 处理数据
  for (const val of moneyList.value) {
    if (val.value == '0') val.is_active = true
  }
  matureList.value.unshift({ id: '-1', is_active: true, value: '-1', label: '不限' })
  sellList.value.unshift({ id: '-1', is_active: true, value: '-1', label: '不限' })
  typeList.value.unshift({ id: '-1', is_active: true, value: '-1', label: '不限' })
  result = await regionStore.list({ level: 'city', parent_code: 22 })
  if (result.errcode == '0') cityList.value = result.data
  cityList.value.unshift({ id: '-1', is_active: true, code: '-1', name: '不限' })
  result = await sectorStore.query({ is_use: '0' })
  if (result.errcode == '0') plateList.value = result.data
  plateList.value.unshift({ id: '-1', is_active: true, title: '不限' })
}
// 查看详情
const toView = async (item) => {
  if (user.value.id) {
    router.push({ path: '/achievement/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: 10px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .list {
      margin-right: 10px;
      margin-bottom: 15px;
      padding-top: 3px;
      width: 317px;
      height: 325px;
      background-color: #fff;
      box-shadow: 0 2px 5px 0 rgba(159, 158, 158, 0.3);
      .list_1 {
        position: relative;

        .image {
          height: 100%;
          width: 100%;
        }
        .box {
          display: flex !important;
          align-items: center;
          position: absolute;
          top: 45px;
          left: 0;
          padding: 15px 10px;
          width: 100%;
          height: 82px;
          background-color: rgba(0, 25, 79, 0.5);
          font-size: $global-font-size-18;
          line-height: 24px;
          color: #fff;
        }
      }
      .list_2 {
        margin: 10px 13px 0;
        .other {
          display: flex;
          align-items: center;
          margin: 0 0 5px 0;
          .image {
            width: 25px;
            height: 25px;
            margin: 0 5px 0 0;
          }
          .text {
            max-width: 260px;
            font-size: $global-font-size-16;
            line-height: 32px;
            color: #404040;
          }
        }
      }
    }
    .list:nth-child(4n) {
      margin-right: 0;
    }
    .list:hover {
      box-shadow: 0 2px 5px 0 rgba(159, 158, 158, 0.8);
    }
  }
  .two {
    display: flex;
    justify-content: center;
    margin: 20px 0;
  }
}
</style>