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

<template>
  <custom-layout class="main">
    <div class="w_1300">
      <div class="one">
        <custom-search :cityList="cityList" :typeList="typeList" :is_search="false" :searchFields="searchFields"></custom-search>
      </div>
      <el-col :span="24" class="two">
        <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.field || '暂无服务领域' }}
                </el-col>
                <el-col :span="24" class="other_1">
                  <span>登记时间：</span>
                  {{ item.time || '暂无登记时间' }}
                </el-col>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <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>
  </custom-layout>
</template>

<script setup>
// 接口
import { SupportStore } from '@/store/api/platform/support'
import { RegionStore } from '@/store/api/system/region'
import { DictDataStore } from '@/store/api/system/dictData'
const store = SupportStore()
const regionStore = RegionStore()
const dictDataStore = DictDataStore()
// 加载中
const loading = ref(false)
// 路由
const router = useRouter()
const cityList = ref([])
const typeList = ref([])
const searchForm = ref({})
const list = ref([])
let skip = 0
let limit = 8
const total = ref(0)
const searchFields = ref([
  { 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 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 }
  const res = await store.list(info)
  if (res.errcode == '0') {
    list.value = res.data
    total.value = res.total
  }
}
// 查看详情
const toView = (item) => {
  router.push({ path: '/service/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}`
}
</script>
<style scoped lang="scss">
.main {
  .one {
    margin: 10px 0 0 0;
    .image {
      width: 100%;
      height: 350px;
    }
  }
  .two {
    margin: 10px 0 0 0;
    .list {
      padding: 15px;
      border: 1px solid #f2f4f6;
      border-radius: 8px;
      margin: 0 0 15px 0;
      .image {
        width: 100%;
        height: 190px;
      }
      .name {
        font-size: $global-font-size-20;
        font-weight: bold;
        display: inline-block;
        margin: 8px 0;
      }

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

      .other_1 {
        font-size: $global-font-size-18;
        margin: 0 0 5px 0;
        cursor: default;
        span {
          color: #666;
        }
      }
    }
  }
  .thr {
    display: flex;
    justify-content: center;
    margin: 20px 0;
  }
}
</style>