cxyy-web/src/views/detail/project.vue

<template>
  <custom-layout class="main">
    <el-col :span="24" class="one">
      <div class="w_1300">
        <el-col :span="24" class="one_1">
          <div class="search">
            <el-input v-model="searchForm.name" size="large" placeholder="请输入关键字" :suffix-icon="Search">
              <template #append>
                <el-button type="primary" size="large" @click="toSearchInfo">搜索</el-button>
              </template>
            </el-input>
          </div>
        </el-col>
        <el-col :span="24" class="one_2">
          <div class="one_2_1">
            <div class="Seacher">
              <div class="OneLeft">
                <span>行业</span>
              </div>
              <div v-if="!twoShow" class="OneRight">
                <el-checkbox class="label" @change="oneChange" v-for="(item, index) in plateList.slice(0, 4)" :key="index" v-model="checked1" :label="item.title" size="large" />
              </div>
              <div v-else class="OneRight">
                <el-checkbox class="label" @change="oneChange" v-for="(item, index) in plateList" :key="index" v-model="checked1" :label="item.title" size="large" />
              </div>
              <div class="button">
                <span v-if="!twoShow" @click="twoShow = true">
                  <el-icon><ArrowDown /></el-icon>
                </span>
                <span v-else @click="twoShow = false">
                  <el-icon><ArrowUp /></el-icon>
                </span>
              </div>
            </div>
            <div class="Seacher">
              <div class="OneLeft">
                <span>技术领域</span>
              </div>
              <div v-if="!oneShow" class="OneRight">
                <el-checkbox class="label" @change="oneChange" v-for="(item, index) in typeList.slice(0, 8)" :key="index" v-model="checked2" :label="item.label" size="large" />
              </div>
              <div v-else class="OneRight">
                <el-checkbox class="label" @change="oneChange" v-for="(item, index) in typeList" :key="index" v-model="checked2" :label="item.label" size="large" />
              </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="Seacher">
              <div class="OneLeft">
                <span>所在地</span>
              </div>
              <div class="OneRight">
                <el-checkbox class="label" @change="oneChange" v-for="(item, index) in cityList" :key="index" v-model="checked3" :label="item.name" size="large" />
              </div>
            </div>
            <div class="Seacher">
              <div class="OneLeft">
                <span>项目成熟度</span>
              </div>
              <div class="OneRight">
                <el-checkbox class="label" @change="oneChange" v-for="(item, index) in maturityList" :key="index" v-model="checked4" :label="item.label" size="large" />
              </div>
            </div>
            <div class="one_ipunt">
              <el-input class="input" clearable size="large" v-model="searchForm.tags" placeholder="标签名称" />
              <el-input class="input" clearable size="large" v-model="searchForm.source" placeholder="项目来源" />
              <el-input class="input" clearable size="large" v-model="searchForm.main" placeholder="项目主体" />
              <el-input class="input" clearable size="large" v-model="searchForm.progress" placeholder="项目进展" />
              <el-button class="button" size="large" type="primary" @click="toSearchInfo">检索</el-button>
            </div>
          </div>
          <div class="one_2_2">
            <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">
                <el-icon color="#595959"><Location /></el-icon>
                <span class="textOne">{{ item.main || '暂无' }}</span>
              </div>
              <div class="biaoqian textOne">
                <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="one_2_3">
            <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange" />
          </div>
        </el-col>
      </div>
    </el-col>
  </custom-layout>
</template>

<script setup>
const $checkRes = inject('$checkRes')
// 接口
import { ProjectStore } from '@/store/api/platform/project'
import { DictDataStore } from '@/store/api/system/dictData'
import { RegionStore } from '@/store/api/system/region'
import { SectorStore } from '@/store/api/platform/sector'
const store = ProjectStore()
const dictDataStore = DictDataStore()
const regionStore = RegionStore()
const sectorStore = SectorStore()
// 路由
const router = useRouter()
// 是否展开
const twoShow = ref(false)
const oneShow = ref(false)
// 加载中
const loading = ref(false)
const checked1 = ref([])
const checked2 = ref([])
const checked3 = ref([])
const checked4 = ref([])
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)
// 搜索
const searchForm = ref({})
// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  await search({ skip, limit })
  loading.value = false
})
const searchOther = async () => {
  let result
  // // 合作类型
  // result = await dictDataStore.query({ code: 'projectType', is_use: '0' })
  // if ($checkRes(result)) projectList.value = result.data
  // 成熟度
  result = await dictDataStore.query({ code: 'projectMaturity', is_use: '0' })
  if ($checkRes(result)) maturityList.value = result.data
  // // 行业分类
  // result = await dictDataStore.query({ code: 'industry', is_use: '0' })
  // if ($checkRes(result)) industryList.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, is_use: '0', status: '1', ...searchForm.value }
  const res = await store.list(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: `/project/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 oneChange = async () => {
  if (checked1.value && checked1.value.length > 0) {
    searchForm.value.industry = checked1.value
  } else if (checked2.value && checked2.value.length > 0) {
    searchForm.value.field = checked2.value
  } else if (checked3.value && checked3.value.length > 0) {
    searchForm.value.area = checked3.value
  } else if (checked4.value && checked4.value.length > 0) {
    searchForm.value.maturity = checked4.value
  } else searchForm.value = {}

  await search({ skip, limit })
}
</script>
<style scoped lang="scss">
.main {
  .one {
    background: url(/images/bg-tec-list.jpg) no-repeat;
    .one_1 {
      padding: 85px 0 0;
      .search {
        margin: 0 auto;
        width: 810px;
        :deep(.el-input--large .el-input__inner) {
          height: 60px;
        }
      }
    }
    .one_2 {
      margin-top: 100px;
      padding: 30px;
      background-color: $global-color-fff;
      .one_2_1 {
        .Seacher {
          display: flex;
          justify-content: center;
          align-items: stretch;
          position: relative;
          margin-bottom: 15px;
          .OneLeft {
            width: 134px;
            height: 36px;
            background-color: #f5f8ff;
            border-radius: 21px;
            font-size: $global-font-size-16;
            font-weight: bold;
            color: #000000;
            flex-shrink: 0;
            line-height: 36px;
            text-align: center;
          }
          .OneRight {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            padding: 0 12px;
            flex: 1;
            background-color: #fff;
            .label {
              cursor: pointer;
            }
            .label:hover {
              color: $global-color-107;
            }
          }
          .button {
            display: flex;
            align-items: center;
            margin: 0 5px 0 0;
          }
        }
        .one_ipunt {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 10px 0;
          .input {
            margin: 0 5px 0 0;
          }
          .button {
            margin: 0 0 0 5px;
          }
        }
      }
      .one_2_2 {
        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;
        }
      }
      .one_2_3 {
        display: flex;
        justify-content: center;
        margin: 20px 0;
      }
    }
  }
}
</style>