cxyy-web2/src/views/nine/index.vue

<template>
  <custom-layout class="main">
    <el-col :span="24" class="one">
      <el-image class="image" :src="chengguo" fit="fill" />
    </el-col>
    <div class="w_1300">
      <div class="two">
        <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, '1')">
              {{ 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 v-if="!twoShow" class="twoRight">
            <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in typeList.slice(0, 10)" :key="index" @click="toSelect(item, '2')">
              {{ item.label }}
            </div>
          </div>
          <div v-else class="twoRight">
            <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in typeList" :key="index" @click="toSelect(item, '2')">
              {{ item.label }}
            </div>
          </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="twoSeacher">
          <div class="twoLeft">
            <span>成熟度</span>
          </div>
          <div class="twoRight">
            <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in matureList" :key="index" @click="toSelect(item, '3')">
              {{ item.label }}
            </div>
          </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 sellList" :key="index" @click="toSelect(item, '4')">
              {{ item.label }}
            </div>
          </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 moneyList" :key="index" @click="toSelect(item, '5')">
              {{ item.label }}
            </div>
          </div>
        </div>
        <div class="twoSeacher border">
          <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, '6')">
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="two_ipunt">
          <el-input class="input" clearable size="large" v-model="searchForm.name" placeholder="成果名称" />
          <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-button class="button" size="large" type="primary" @click="toSearchInfo">检索</el-button>
        </div>
      </div>
      <div class="thr">
        <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="four">
        <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>
  </custom-layout>
</template>

<script setup>
import { onBeforeRouteLeave } from 'vue-router'
// 图片引入
import chengguo from '/images/chengguo.png'
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'
import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
const $checkRes = inject('$checkRes')
// 接口
import { AchievementStore } from '@/store/api/platform/achievement'
import { DictDataStore } from '@/store/api/system/dictData'
import { RegionStore } from '@/store/api/system/region'
import { SectorStore } from '@/store/api/platform/sector'
const store = AchievementStore()
const dictDataStore = DictDataStore()
const regionStore = RegionStore()
const sectorStore = SectorStore()
// 路由
const router = useRouter()
const route = useRoute()

// 加载中
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 oneShow = ref(false)
const twoShow = ref(false)
// 字典表
const moneyList = ref([])
const matureList = ref([])
const sellList = ref([])
const cityList = ref([])
const typeList = ref([])
const plateList = ref([])
// 搜索
const searchForm = ref({})
// 查询
const industry = ref([])
const field = ref([])
const mature = ref([])
const sell = ref([])
const money = ref([])
const city = ref([])
// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  await search()
  router.replace({ name: 'nine' })
  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',
    ...searchForm.value
  }
  if (route.query.type) {
    info.field = route.query.type
    for (const val of typeList.value) {
      if (route.query.type == val.value) val.is_active = true
      if (val.id == '-1') val.is_active = false
    }
  }
  const res = await store.list(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 toSearchInfo = async () => {
  await search({ skip, limit })
}
// 查看详情
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 })
}
// 筛选条件
const toSearchFind = async () => {
  if (industry.value && industry.value.length > 0) {
    searchForm.value.industry = industry.value.map((i) => {
      return i.title
    })
  } else delete searchForm.value.industry

  if (field.value && field.value.length > 0) {
    searchForm.value.field = field.value.map((i) => {
      return i.label
    })
  } else delete searchForm.value.field

  if (mature.value && mature.value.length > 0) {
    searchForm.value.mature = mature.value.map((i) => {
      return i.value
    })
  } else delete searchForm.value.mature

  if (sell.value && sell.value.length > 0) {
    searchForm.value.sell = sell.value.map((i) => {
      return i.value
    })
  } else delete searchForm.value.sell

  if (money.value && money.value.length > 0) {
    searchForm.value.money = money.value.map((i) => {
      return i.value
    })
  } else delete searchForm.value.money

  if (city.value && city.value.length > 0) {
    searchForm.value.area = city.value.map((i) => {
      return i.name
    })
  } else delete searchForm.value.area

  await search({ skip, limit })
}
const toSelect = async (data, type) => {
  if (data.is_active) {
    toDel(data, type)
  } else {
    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 if (type == '2') {
        for (const val of typeList.value) {
          if (data.id == val.id) val.is_active = true
          if (val.id == '-1') val.is_active = false
        }
        const res = field.value.find((i) => i.id == data.id)
        if (!res) field.value.push(data)
      } else if (type == '3') {
        for (const val of matureList.value) {
          if (data.id == val.id) val.is_active = true
          if (val.id == '-1') val.is_active = false
        }
        const res = mature.value.find((i) => i.id == data.id)
        if (!res) mature.value.push(data)
      } else if (type == '4') {
        for (const val of sellList.value) {
          if (data.id == val.id) val.is_active = true
          if (val.id == '-1') val.is_active = false
        }
        const res = sell.value.find((i) => i.id == data.id)
        if (!res) sell.value.push(data)
      } else if (type == '5') {
        if (data.value != '0') {
          for (const val of moneyList.value) {
            if (data.id == val.id) val.is_active = true
            if (val.value == '0') val.is_active = false
          }
          const res = money.value.find((i) => i.id == data.id)
          if (!res) money.value.push(data)
        } else {
          for (const val of moneyList.value) {
            if (val.value == '0') val.is_active = true
            else val.is_active = false
          }
          money.value = []
        }
      } 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 if (type == '2') {
        for (const val of typeList.value) {
          if (val.id == '-1') val.is_active = true
          else val.is_active = false
        }
        field.value = []
      } else if (type == '3') {
        for (const val of matureList.value) {
          if (val.id == '-1') val.is_active = true
          else val.is_active = false
        }
        mature.value = []
      } else if (type == '4') {
        for (const val of sellList.value) {
          if (val.id == '-1') val.is_active = true
          else val.is_active = false
        }
        sell.value = []
      } else if (type == '5') {
        for (const val of moneyList.value) {
          if (val.value == '0') val.is_active = true
          else val.is_active = false
        }
        money.value = []
      } else {
        for (const val of cityList.value) {
          if (val.id == '-1') val.is_active = true
          else val.is_active = false
        }
        city.value = []
      }
    }
  }
  await toSearchFind()
}
const toDel = async (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 if (type == '2') {
    for (const val of typeList.value) {
      if (data.id == val.id) val.is_active = false
    }
    field.value = field.value.filter((f) => f.id != data.id)
    if (field.value.length == 0) {
      for (const val of typeList.value) {
        if (val.id == '-1') val.is_active = true
      }
    }
  } else if (type == '3') {
    for (const val of matureList.value) {
      if (data.id == val.id) val.is_active = false
    }
    mature.value = mature.value.filter((f) => f.id != data.id)
    if (mature.value.length == 0) {
      for (const val of matureList.value) {
        if (val.id == '-1') val.is_active = true
      }
    }
  } else if (type == '4') {
    for (const val of sellList.value) {
      if (data.id == val.id) val.is_active = false
    }
    sell.value = sell.value.filter((f) => f.id != data.id)
    if (sell.value.length == 0) {
      for (const val of sellList.value) {
        if (val.id == '-1') val.is_active = true
      }
    }
  } else if (type == '5') {
    for (const val of moneyList.value) {
      if (data.id == val.id) val.is_active = false
    }
    money.value = money.value.filter((f) => f.id != data.id)
    if (money.value.length == 0) {
      for (const val of moneyList.value) {
        if (val.value == '0') 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
      }
    }
  }
  await toSearchFind()
}
const scrollTop = ref(0)

onActivated(() => {
  // 配置参数依赖于浏览器
  document.documentElement.scrollTop = scrollTop.value
})
onBeforeRouteLeave((to, from, next) => {
  scrollTop.value = document.documentElement.scrollTop || document.body.scrollTop
  next()
})
</script>
<style scoped lang="scss">
.main {
  .one {
    .image {
      width: 100%;
      height: 350px;
    }
  }
  .active {
    .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;
      padding: 0 10px;
      .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;
        }
      }
    }
  }
  .two {
    margin: 10px 0;
    background-color: $global-color-fff;
    .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;
      }
    }
    .border {
      border: solid 1px #e5e5e5;
      border-bottom: 1 !important;
    }
    .two_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;
      }
    }
  }
  .thr {
    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);
    }
  }
  .four {
    display: flex;
    justify-content: center;
    margin: 20px 0;
  }
}
</style>