menduner/src/views/personal/myPublicRecruitment/myRecommendation.vue

<!-- 我的推荐 -->
<template>
  <div class="d-flex">
    <div class="pa-3 mr-3 white-bgc" style="min-height: 500px; 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.name" @click="statisticsClick(item, index)">
            <div style="font-size: 18px; color: #333; font-weight: bold;">{{ statistics[item.name] || '0' }}</div>
            <div style="font-size: 13px; color: #666;">{{ item.label }}</div>
          </div>
        </div>
        <div class="topTip">推荐好友入职得赏金</div>
        <!-- 数据 -->
        <TablePage :items="dataList"></TablePage>
      </div>
    </div>
    <!-- 滚动区域 -->
    <div class="pa-3 white-bgc" style="height: 300px; border-radius: 5px; width: 360px;">
      滚动区域
    </div>
  </div>
</template>

<script setup>
import TablePage from './components/table.vue'
import { ref } from 'vue'
defineOptions({name: 'defineOptions-name'})
// 数据统计
const statistics = ref({ statisticsA: '3', statisticsB: '7', statisticsC: '5', statisticsD: '2', statisticsE: '1' })
const statisticsList = ref([
  { count: '', label: '已报名', name: 'statisticsA' },
  { count: '', label: '已过筛', name: 'statisticsB' },
  { count: '', label: '已过面', name: 'statisticsC' },
  { count: '', label: '已入职', name: 'statisticsD' },
  { count: '', label: '已结算', name: 'statisticsE' }
])

const avatarList = [
  'https://img0.baidu.com/it/u=230622178,1565949306&fm=253&fmt=auto&app=138&f=JPEG?w=449&h=300',
  'https://img0.baidu.com/it/u=1401084042,2724457850&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=726',
  'https://q7.itc.cn/q_70/images03/20240423/6d236fae5c8f44ed9b60d977f32debb7.jpeg',
  'https://q1.itc.cn/q_70/images03/20240609/1c1be14298be4dbe978e55bde6e958b0.jpeg',
  'https://q4.itc.cn/q_70/images03/20240528/298d4abda5e4469d98fa77e7cde46525.jpeg',
  'https://q5.itc.cn/q_70/images03/20240520/ceb0d77d1be24eea8cd3826994eac1c1.jpeg',
  'https://img1.baidu.com/it/u=3995643348,1848098846&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800',
]
const dataList = ref([])
const dataItem = {
  name: '用户',
  应聘公司: '门墩儿科技',
  应聘职位: '酒店前台',
  岗位薪资: '8000-10000/月',
  推荐进度: '已报名',
  赏金: '100积分',
}
const active = ref(0)
const statisticsClick = (item, index) => {
  active.value = index
  const count = statistics.value[item.name] ? statistics.value[item.name] - 0 : 0
  dataList.value = []
  for (let i = 0; i < count; i++) {
    dataList.value.push({ ...dataItem, avatar: avatarList[i], name: dataItem.name+(i+1) })
  }
}
statisticsClick(statisticsList.value[0])
</script>
<style lang="scss" scoped>
.topTip {
  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>