cxyy-web/src/views/six/index.vue

<template>
  <custom-layout class="main">
    <el-col :span="24" class="one">
      <el-image class="image" :src="lists" fit="fill" />
    </el-col>
    <div class="two">
      <div class="w_1300">
        <div class="active">
          <div class="active_1" v-show="industry && industry.length > 0">
            <div class="active_left">行业：</div>
            <div class="active_right">
              <div class="active_label" v-for="(item, index) in industry" :key="index">
                {{ item.title }}<el-icon @click="toDel(item, '1')"><Close /></el-icon>
              </div>
            </div>
          </div>
          <div class="active_1" v-show="city && city.length > 0">
            <div class="active_left">所在地：</div>
            <div class="active_right">
              <div class="active_label" v-for="(item, index) in city" :key="index">
                {{ item.name }}<el-icon @click="toDel(item, '2')"><Close /></el-icon>
              </div>
            </div>
          </div>
        </div>
        <div class="twoSeacher">
          <div class="twoLeft">
            <span>行业</span>
          </div>
          <div v-if="!oneShow" class="twoRight">
            <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in plateList.slice(0, 6)" :key="index" @click="toSelect(item, '1')">
              {{ item.title }}
            </div>
          </div>
          <div v-else class="twoRight">
            <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in plateList" :key="index" @click="toSelect(item, '2')">
              {{ item.title }}
            </div>
          </div>
          <div class="button">
            <span v-if="!oneShow" @click="oneShow = true">
              <el-icon><ArrowDown /></el-icon>
            </span>
            <span v-else @click="oneShow = false">
              <el-icon><ArrowUp /></el-icon>
            </span>
          </div>
        </div>
        <div class="twoSeacher">
          <div class="twoLeft">
            <span>所在地</span>
          </div>
          <div class="twoRight">
            <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in cityList" :key="index" @click="toSelect(item, '2')">
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="twoIpunt">
          <a-input class="input" size="large" v-model:value="searchForm.name" placeholder="中试平台/实验室名称" />
          <a-input class="input" size="large" v-model:value="searchForm.build" placeholder="建设主体" />
          <a-input class="input" size="large" v-model:value="searchForm.operate" placeholder="运营主体" />
          <a-input class="input" size="large" v-model:value="searchForm.field" placeholder="服务产业领域" />
          <a-button class="button" size="large" type="primary" @click="toSearchInfo">检索</a-button>
        </div>
      </div>
    </div>
    <el-col :span="24" class="thr">
      <div class="w_1300">
        <el-row :gutter="16">
          <el-col :span="6" v-for="(item, index) in list" :key="index" @click="toView(item)">
            <div class="list">
              <el-image class="image" :src="getUrl(item.file)" fit="cover"> </el-image>
              <el-col :span="24" class="name textOne">
                <el-tooltip effect="dark" :content="item.name" placement="top">
                  {{ item.name || '暂无名称' }}
                </el-tooltip>
              </el-col>
              <el-col :span="24" class="other_1">
                <span>建设主体：</span>
                {{ item.build || '暂无建设主体' }}
              </el-col>
              <el-col :span="24" class="other_1">
                <span>运营主体：</span>
                {{ item.operate || '暂无运营主体' }}
              </el-col>
              <el-col :span="24" class="other_1">
                <span>服务产业领域：</span>
                {{ item.field || '暂无服务产业领域' }}
              </el-col>
              <el-col :span="24" class="other_1">
                <span>地址：</span>
                {{ item.address || '暂无地址' }}
              </el-col>
              <el-col :span="24" class="other_1">
                <span>联系人：</span>
                {{ item.contacts || '暂无联系人' }}
              </el-col>
              <el-col :span="24" class="other_1">
                <span>联系电话：</span>
                {{ item.phone || '暂无联系电话' }}
              </el-col>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-col>
    <el-col :span="24" class="four">
      <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>
  </custom-layout>
</template>

<script setup>
// 图片引入
import lists from '/images/bg-khal-list.jpg'
// 接口
import { FootplateStore } from '@/store/api/platform/footplate'
import { RegionStore } from '@/store/api/system/region'
import { SectorStore } from '@/store/api/platform/sector'
const store = FootplateStore()
const regionStore = RegionStore()
const sectorStore = SectorStore()
import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
// 加载中
const loading = ref(false)
// 路由
const router = useRouter()
// 是否展开
const oneShow = ref(false)
const cityList = ref([])
const plateList = ref([])
// 列表
const searchForm = ref({})
const list = ref([])
let skip = 0
let limit = inject('limit')
const total = ref(6)
// 查询
const industry = ref([])
const city = ref([])
// 请求
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 })
}
const search = async (query = { skip, limit }) => {
  skip = query.skip
  limit = query.limit
  const info = { skip: query.skip, limit: query.limit, ...searchForm.value }
  const res = await store.query(info)
  if (res.errcode == '0') {
    list.value = res.data
    total.value = res.total
  }
}
// 搜索
const toSearchInfo = async () => {
  await search({ skip, limit })
}
// 查看
const toView = (item) => {
  router.push({ path: '/platform/detail', query: { id: item.id || item._id } })
}
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 })
}
const getUrl = (item) => {
  if (item && item.length > 0) return `${import.meta.env.VITE_APP_HOST}${item[0].uri}`
}
const toSelect = (data, type) => {
  if (data.id != '-1') {
    if (type == '1') {
      for (const val of plateList.value) {
        if (data.id == val.id) val.is_active = true
        if (val.id == '-1') val.is_active = false
      }
      const res = industry.value.find((i) => i.id == data.id)
      if (!res) industry.value.push(data)
    } else {
      for (const val of cityList.value) {
        if (data.id == val.id) val.is_active = true
        if (val.id == '-1') val.is_active = false
      }
      const res = city.value.find((i) => i.id == data.id)
      if (!res) city.value.push(data)
    }
  } else {
    if (type == '1') {
      for (const val of plateList.value) {
        if (val.id == '-1') val.is_active = true
        else val.is_active = false
      }
      industry.value = []
    } else {
      for (const val of cityList.value) {
        if (val.id == '-1') val.is_active = true
        else val.is_active = false
      }
      city.value = []
    }
  }
}
const toDel = (data, type) => {
  if (type == '1') {
    for (const val of plateList.value) {
      if (data.id == val.id) val.is_active = false
    }
    industry.value = industry.value.filter((f) => f.id != data.id)
    if (industry.value.length == 0) {
      for (const val of plateList.value) {
        if (val.id == '-1') val.is_active = true
      }
    }
  } else {
    for (const val of cityList.value) {
      if (data.id == val.id) val.is_active = false
    }
    city.value = city.value.filter((f) => f.id != data.id)
    if (city.value.length == 0) {
      for (const val of cityList.value) {
        if (val.id == '-1') val.is_active = true
      }
    }
  }
}
</script>
<style scoped lang="scss">
.main {
  .one {
    .image {
      width: 100%;
      height: 350px;
    }
  }

  .two {
    margin: 10px 0;
    background-color: $global-color-fff;
    .active {
      margin: 0 0 10px 0;
      .active_1 {
        display: inline-flex;
        background: #f5f7f9;
        border-radius: 2px;
        min-height: 28px;
        line-height: 28px;
        margin: 0 10px 0 0;
        position: relative;
        background-color: #fff;
        .active_left {
          flex: 0 0 auto;
          font-family: PingFangSC-Regular;
          color: #525a68;
          line-height: 36px;
        }
        .active_right {
          font-family: PingFangSC-Regular;
          color: rgba(0, 0, 0, 0.85);
          line-height: 28px;
          padding-right: 4px;
          display: flex;
          flex-wrap: wrap;
          overflow: hidden;
          .active_label {
            overflow: hidden;
            display: inline-block;
            margin-right: 10px;
            margin-top: 3px;
            margin-bottom: 3px;
            padding: 10px;
            display: flex;
            align-items: center;
            flex: none;
            box-sizing: border-box;
            max-width: 100%;
            height: 30px;
            background: #f5f5f5;
            border: 1px solid #f0f0f0;
            border-radius: 2px;
            cursor: default;
          }
        }
      }
    }
    .twoSeacher {
      display: flex;
      justify-content: center;
      align-items: stretch;
      position: relative;
      border: solid 1px #e5e5e5;
      // border-bottom: 0;
      font-size: $global-font-size-18;
      color: #666;
      min-height: 60px;
      overflow: hidden;
      .twoLeft {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        width: 110px;
        text-align: center;
        color: #000;
        font-weight: bold;
        background-color: #fafafa;
      }
      .twoRight {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 12px;
        flex: 1;
        border-left: solid 1px #e5e5e5;
        background-color: #fff;
        .label {
          margin-right: 3px;
          color: #313131;
          margin-bottom: 10px;
          padding: 8px 10px;
          border-radius: 3px;
          background-color: #fff;
          border: solid 1px transparent;
          cursor: pointer;
        }
        .show {
          color: #0a58c2;
          border: solid 1px #006dd2;
        }

        .label:hover {
          color: $global-color-107;
        }
      }
      .button {
        display: flex;
        align-items: center;
        margin: 0 5px 0 0;
      }
    }
    .twoSeacher:first-child {
      border-bottom: 0;
    }

    .twoIpunt {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 10px 0 0 0;
      .input {
        margin: 0 5px 0 0;
      }
      .button {
        margin: 0 0 0 5px;
      }
    }
  }
  .thr {
    .list {
      padding: 15px;
      border: 1px solid #f2f4f6;
      border-radius: 8px;
      margin: 0 0 15px 0;
      .name {
        font-size: $global-font-size-20;
        font-weight: bold;
        display: inline-block;
        margin: 0 0 8px 0;
      }

      .name:hover {
        color: #2374ff;
        cursor: pointer;
      }

      .other_1 {
        font-family: 'PingFangSC-Light', 'Microsoft YaHei', 'WenQuanYi Micro Hei', arial, sans-serif;
        font-size: $global-font-size-18;
        font-weight: normal;
        color: #666;
      }

      .other_1:hover {
        color: #2374ff;
        cursor: pointer;
      }
    }
  }
  .four {
    display: flex;
    justify-content: center;
    margin: 20px 0;
  }
}
</style>