|
@@ -1,14 +1,128 @@
|
|
<template>
|
|
<template>
|
|
- <div>
|
|
|
|
- <BountyRewardsPage customClass=""></BountyRewardsPage>
|
|
|
|
|
|
+ <div class="resume-box">
|
|
|
|
+ <div class="resume-header">
|
|
|
|
+ <div class="resume-title">我的推荐</div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <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-family: 'MiSans-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" :total="total" :pageInfo="query" @page="handleChangePage"></TablePage>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 滚动区域 -->
|
|
|
|
+ <!-- <div class="pa-3 white-bgc" style="height: 300px; border-radius: 5px; width: 260px;">
|
|
|
|
+ <bountyDisplay></bountyDisplay>
|
|
|
|
+ </div> -->
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
-defineOptions({ name: 'bountyRewards'})
|
|
|
|
-import BountyRewardsPage from '@/views/publicRecruitment/index'
|
|
|
|
-</script>
|
|
|
|
|
|
+defineOptions({name: 'bountyRewards'})
|
|
|
|
+import { ref } from 'vue'
|
|
|
|
+import { getDict } from '@/hooks/web/useDictionaries'
|
|
|
|
+import { getHireJobCvRelCount, getHireJobCvRelPage } from '@/api/recruit/personal/personalCenter'
|
|
|
|
+import TablePage from './components/table.vue'
|
|
|
|
+// import bountyDisplay from './components/bountyDisplay.vue'
|
|
|
|
+import { useUserStore } from '@/store/user'
|
|
|
|
+
|
|
|
|
+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
|
|
|
|
+}
|
|
|
|
|
|
-<style scoped lang="scss">
|
|
|
|
|
|
+// 状态
|
|
|
|
+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()
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 更新账户信息
|
|
|
|
+const store = useUserStore()
|
|
|
|
+const updateAccountInfo = async () => {
|
|
|
|
+ await store.getUserAccountInfo()
|
|
|
|
+}
|
|
|
|
+updateAccountInfo()
|
|
|
|
+</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>
|
|
</style>
|