menduner/src/views/publicRecruitment/myRecommendation.vue

<!-- 我的推荐 -->
<template>
  <div class="d-flex">
    <div class="pa-3 mr-3 white-bgc" style="border-radius: 5px; flex: 1;">
      <div style="width: 100%;">
        <!-- 统计 -->
        <div class="statisticsBox">
          <div class="statisticsBox-item" :class="{'act': index === active}" v-for="(item, index) in statisticsList" :key="item.value" @click="handleStatisticsItem(item, index)">
            <div style="font-size: 18px; color: var(--color-333); font-weight: bold;">{{ item.count }}</div>
            <div style="font-size: 13px; color: var(--color-666);">{{ item.label }}</div>
          </div>
        </div>
        <div class="topTip">推荐好友入职得赏金</div>
        <!-- 数据 -->
        <TablePage :items="items"></TablePage>
        <CtPagination
          v-if="total > 0"
          :total="total"
          :page="query.pageNo"
          :limit="query.pageSize"
          @handleChange="handleChangePage"
        ></CtPagination>
      </div>
    </div>
    <!-- 滚动区域 -->
    <div class="pa-3 white-bgc" style="height: 300px; border-radius: 5px; width: 360px;">
      <bountyDisplay></bountyDisplay>
    </div>
  </div>
</template>

<script setup>
defineOptions({name: 'defineOptions-name'})
import { ref } from 'vue'
import { getDict } from '@/hooks/web/useDictionaries'
import { getHireJobCvRelCount, getHireJobCvRelPage } from '@/api/publicRecruitment'
import TablePage from './components/table.vue'
import bountyDisplay from './components/bountyDisplay.vue'

const active = ref(0)

// 数据统计
const statisticsList = ref([])
const getData = async () => {
  const data = await getHireJobCvRelCount()
  if (!data || !data.length) return
  statisticsList.value.forEach(e => {
    const obj = data.find(k => k.key === e.value)
    if (!obj) return
    e.count = obj.value
  })
}

// 列表
const items = ref([])
const total = ref(0)
const query = ref({
  pageSize: 10,
  pageNo: 1,
  status: null
})
const getTableList = async () => {
  const res = await getHireJobCvRelPage(query.value)
  items.value = res.list
  total.value = res.total
}

// 状态
const getStatusData = () => {
  getDict('menduner_hire_job_cv_status').then(({ data }) => {
    data = data?.length && data || []
    statisticsList.value = data.map(e => {
      return { ...e, count: 0 }
    })
    query.value.status = data[0].value
    getData()
    getTableList()
  })
}
getStatusData()

// 分页
const handleChangePage = (e) => {
  query.value.pageNo = e
  getTableList()
}

// 钻取
const handleStatisticsItem = (item, index) => {
  active.value = index
  query.value.pageNo = 1
  query.value.status = item.value
  getTableList()
}
</script>

<style lang="scss" scoped>
.topTip {
  color: var(--color-999);
  margin-top: 8px;
  font-size: 14px;
  padding: 5px 10px;
  width: 100%;
  // background-color: var(--default-bgc);
}
.statisticsBox {
  display: flex;
  justify-content: space-around;
  border-radius: 10px;
  text-align: center;
  padding: 10px 0;
  background-color: var(--default-bgc);
  .act {
    div, span { color: var(--v-primary-base) !important; }
  }
  .statisticsBox-item {
    cursor: pointer;
    &:hover {
      div { color: var(--v-primary-base) !important; }
    }
  }
}
</style>