cxyy-web2/src/views/search/parts/supply.vue

<template>
  <div class="main">
    <div class="one">
      <div class="w_1300">
        <custom-search :cityList="cityList" :typeList="typeList" :plateList="plateList" :fields="fields" :searchFields="searchFields" @toSearchInfo="toSearchInfo"></custom-search>
      </div>
    </div>
    <div class="w_1300">
      <el-col :span="24" class="two">
        <div class="list" v-for="(item, index) in list" :key="index">
          <div class="title">
            {{ item.name || '暂无供给名称' }}
          </div>
          <div class="other_1 textOne" v-if="user && user.id">
            <span>技术领域：</span>
            <span>{{ item.field || '暂无技术领域' }}</span>
          </div>
          <div class="other_1 textOne" v-if="user && user.id">
            <span>所属产业：</span>
            <span>{{ item.industry || '暂无所属产业' }}</span>
          </div>
          <div class="other_1 textOne" v-if="user && user.id">
            <span>来源：</span>
            <span>{{ item.source || '暂无来源' }}</span>
          </div>
          <div class="button">
            <div @click="toView(item)" class="detail">查看详情</div>
          </div>
        </div>
      </el-col>
    </div>
    <el-col :span="24" class="thr">
      <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange" />
    </el-col>
  </div>
</template>

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

// 加载中
const loading = ref(false)
// 路由
const router = useRouter()

// 列表
const searchForm = ref({})
const list = ref([])
let skip = 0
let limit = inject('limit')
const total = ref(6)
// 字典表
const cityList = ref([])
const plateList = ref([])
const typeList = ref([])

const fields = ref([
  { model: 'name', label: '供应名称' },
  { model: 'tags', label: '标签名称' },
  { model: 'source', label: '所属来源' }
])
const searchFields = ref([
  { title: '行业', type: '1', list: plateList },
  { title: '技术领域', type: '2', list: typeList },
  { title: '所在地', type: '3', list: cityList }
])

// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  await search({ skip, limit })
  loading.value = false
})
const searchOther = async () => {
  let res
  // 城市
  res = await regionStore.list({ level: 'city', parent_code: 22 })
  if (res.errcode == '0') cityList.value = res.data
  cityList.value.unshift({ id: '-1', code: '-1', name: '不限', is_active: true })
  // 行业
  res = await sectorStore.query({ is_use: '0' })
  if (res.errcode == '0') plateList.value = res.data
  plateList.value.unshift({ id: '-1', title: '不限', is_active: true })
  // 技术领域
  res = await dictDataStore.query({ code: 'field', is_use: '0' })
  if (res.errcode == '0') typeList.value = res.data
  typeList.value.unshift({ id: '-1', value: '-1', label: '不限', is_active: true })
}
const search = async (query = { skip, limit }) => {
  skip = query.skip
  limit = query.limit
  const info = { skip: query.skip, limit: query.limit, is_use: '0', status: '1', ...searchForm.value }
  if (searchValue.value) info.keyword = searchValue.value
  const res = await esStore.Ssupply(info)
  if (res.errcode == '0') {
    list.value = res.data
    total.value = res.total
  }
}
// 搜索
const toSearchInfo = async (data) => {
  searchForm.value = data
  await search({ skip, limit })
}
// 查看详情
const toView = (item) => {
  if (user.value.id) {
    router.push({ path: '/supply/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 })
}
</script>
<style scoped lang="scss">
.main {
  .one {
    margin: 10px 0 0 0;
  }

  .two {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 10px 0;
    background-color: $global-color-fff;
    .list {
      padding-bottom: 20px;
      margin: 0 0 20px 0;
      width: 310px;
      font-size: 12px;
      color: #666666;
      border: 1px solid rgb(230, 230, 230);
      .title {
        color: #002147;
        background-color: #c8e0fc;
        width: 100%;
        height: 36px;
        text-align: center;
        line-height: 36px;
        font-family: PingFangSC-Medium;
        font-size: 20px;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        margin-bottom: 16px;
      }
      .other_1 {
        margin-bottom: 16px;
        padding: 0 20px;
        display: flex;
        color: #666666;
        font-size: 16px;
      }
      .button {
        margin: 30px 0 0 0;
        .detail {
          font-size: 16px;
          display: block;
          margin: 0 auto;
          width: 90px;
          height: 28px;
          text-align: center;
          line-height: 28px;
          border-radius: 28px;
          color: #2281ee;
          border: 1px solid #2281ee;
          cursor: default;
        }
      }
    }
    .list:hover {
      .button {
        .detail {
          color: #fff;
          background-color: #2281ee;
        }
      }
    }
  }
  .thr {
    display: flex;
    justify-content: center;
    margin: 20px 0;
  }
}
</style>