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

<template>
  <custom-layout class="main">
    <el-col :span="24" class="one">
      <el-image class="image" :src="lists" 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" v-for="(item, index) in plateList.slice(0, 6)" :key="index">
              {{ item.label }}
            </div>
          </div>
          <div v-else class="twoRight">
            <div class="label" v-for="(item, index) in plateList" :key="index">
              {{ item.label }}
            </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" v-for="(item, index) in typeList" :key="index">
              {{ item.label }}
            </div>
          </div>
        </div>
        <div class="twoSeacher">
          <div class="twoLeft">
            <span>所在地</span>
          </div>
          <div v-if="!twoShow" class="twoRight">
            <div class="label" v-for="(item, index) in cityList.slice(0, 15)" :key="index">
              {{ item.label }}
            </div>
          </div>
          <div v-else class="twoRight">
            <div class="label" v-for="(item, index) in cityList" :key="index">
              {{ 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>
      <div class="twoTwo">
        <div class="twoTable">
          <div class="label" v-for="(item, index) in column" :key="index" :style="item.style">
            {{ item.name }}
          </div>
        </div>
        <div class="twoValue">
          <div class="value" v-for="(item, index) in list" :key="index">
            <div class="table-colunm table-colunm1">{{ index + 1 }}</div>
            <div class="table-colunm textOne">{{ item.name || '暂无' }}</div>
            <div class="table-colunm textOne table-colunm2">{{ item.work || '暂无' }}</div>
            <div class="table-colunm textOne">{{ item.title || '暂无' }}</div>
            <div class="table-colunm textOne">{{ item.industry || '暂无' }}</div>
            <div class="table-colunm button" @click="toView(item)">查看详情</div>
          </div>
        </div>
        <div class="twoTotal">
          <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>
    </div>
  </custom-layout>
</template>

<script setup>
// 图片引入
import lists from '/images/expert.png'
import { getCity } from '@/utils/city'
import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
// 接口
import { DictDataStore } from '@/store/api/system/dictData'
import { ExpertStore } from '@/store/api/user/expert'
const store = ExpertStore()
const dictDataStore = DictDataStore()
// 加载中
const loading = ref(false)
// 路由
const router = useRouter()
// 是否展开
const oneShow = ref(false)
const twoShow = ref(false)
const cityList = ref([])
const typeList = ref([
  { label: '不限', value: '-1' },
  { label: '教育休闲', value: '0' },
  { label: '包装印刷', value: '1' },
  { label: '电气自动化', value: '2' },
  { label: '采矿冶金', value: '3' },
  { label: '航空航天', value: '4' },
  { label: '海洋开发', value: '5' },
  { label: '衣林牧业', value: '6' },
  { label: '医药与医疗', value: '7' },
  { label: '电子信息', value: '8' }
])
const plateList = ref([
  { label: '汽车电子及新型汽车零部件', value: '0' },
  { label: '精细化工及天然气化工', value: '1' },
  { label: '农产品加工及绿色食品', value: '2' },
  { label: '光电子及智能传感器', value: '3' },
  { label: '车规级芯片及功率半导体器件', value: '4' },
  { label: '新能源及动力电池', value: '5' },
  { label: '生物基新材料', value: '6' },
  { label: '人工智能及智能机器人', value: '7' },
  { label: '碳纤维及复合材料', value: '8' },
  { label: '遥感卫星及航天航空技术', value: '9' },
  { label: '精密仪器及先进装备', value: '10' },
  { label: '生物医药及先进医疗器械', value: '11' },
  { label: '生物制造', value: '12' }
])
const column = ref([
  { name: '序号', style: { width: '116px' }, key: 'key' },
  { name: '名称', style: { width: '216px' }, key: 'name' },
  { name: '工作单位', style: { width: '316px' }, key: 'area' },
  { name: '学历/职称', style: { width: '216px' }, key: 'education' },
  { name: '所属产业', style: { width: '216px' }, key: 'industry' },
  { name: '操作', style: { width: '216px' }, key: 'operation' }
])
// 列表
const list = ref([])
let skip = 0
let limit = 15
const total = ref(0)
// 请求
onMounted(async () => {
  loading.value = true
  // 城市
  getCity().then((response) => (cityList.value = [{ label: '不限', value: '-1' }, ...response.address]))
  await searchOther()
  await search({ skip, limit })
  loading.value = false
})
const searchOther = async () => {}
const search = async (query = { skip, limit }) => {
  skip = query.skip
  limit = query.limit
  const info = {
    skip: query.skip,
    limit: query.limit
  }
  const res = await store.query(info)
  if (res.errcode == '0') {
    list.value = res.data
    total.value = res.total
  }
}
// 查看
const toView = (item) => {
  router.push({ path: `/expert/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 })
}
</script>
<style scoped lang="scss">
.main {
  background: url(/images/information.jpg) no-repeat top center;
  background-size: 100% 100%;
  .one {
    .image {
      width: 100%;
      height: 350px;
    }
  }
  .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 {
          color: #313131;
          margin-bottom: 10px;
          padding: 8px 10px;
          border-radius: 3px;
          background-color: #fff;
          border: solid 1px transparent;
          cursor: pointer;
        }
        .label:first-child {
          color: #0a58c2;
          border: solid 1px #006dd2;
        }
        .label:hover {
          color: $global-color-107;
        }
      }
      .button {
        display: flex;
        align-items: center;
        margin: 0 5px 0 0;
      }
    }
  }
  .twoTwo {
    margin: 10px 0;
    .twoTable {
      display: flex;
      justify-content: space-between;
      color: $global-color-fff;
      font-size: $global-font-size-20;
      background-color: rgba(255, 255, 255, 0.1);
      padding: 12px 0;
      .label {
        text-align: center;
      }
    }
    .twoValue {
      color: $global-color-fff;
      font-size: $global-font-size-20;
      .value {
        display: flex;
        justify-content: space-between;
        padding: 12px 0;
        .table-colunm {
          width: 216px;
          text-align: center;
        }
        .table-colunm1 {
          width: 116px !important;
        }
        .table-colunm2 {
          width: 316px !important;
        }
        .button {
          cursor: pointer; /* 改变鼠标样式为手形 */
        }
        .button:hover {
          color: $global-color-107;
        }
      }
      .value:nth-child(2n) {
        background-color: rgba(255, 255, 255, 0.1);
      }
    }
    .twoTotal {
      display: flex;
      justify-content: center;
      margin: 20px 0;
    }
  }
}
</style>