<template>
<div>
<div class="infinite-list-wrapper">
<ul v-infinite-scroll="load" class="list" :infinite-scroll-disabled="disabled">
<li v-for="(i,index) in recruitList" :key="index" class="list-item">
<div class="card-container">
<el-card class="resume-card" v-for="(j,index) in i" :key="index">
<div>
<el-descriptions
class="margin-top"
:title="j.companiesName"
:column="1"
border
>
<template #extra>
{{ j.postName }}
</template>
<el-descriptions-item>
<template #label>
<div class="cell-item">
<el-icon>
<iphone/>
</el-icon>
薪资
</div>
</template>
{{ j.salary }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="cell-item">
<el-icon>
<location/>
</el-icon>
工作城市
</div>
</template>
{{ j.workCity }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div class="cell-item">
<el-icon>
<tickets/>
</el-icon>
能力
</div>
</template>
<div style="max-height: 25px;overflow: hidden;">
<el-tag v-for="skill in j.skillList" :key="skill" size="small"
style="margin-right: 5px">{{ skill }}
</el-tag>
</div>
</el-descriptions-item>
</el-descriptions>
</div>
</el-card>
</div>
</li>
<p v-if="loading">正在加载...</p>
<p v-if="noMore">没有更多数据</p>
</ul>
</div>
</div>
</template>
<script setup>
import {computed, ref} from "vue";
import axios from "@/config/axiosConfig";
import {ElMessage} from "element-plus";
const loading = ref(false)
const recruitList = ref([]);
const currentPage = ref(0);
const noMore = ref(false)
const disabled = computed(() => loading.value || noMore.value)
const load = () => {
loading.value = true
setTimeout(() => {
select();
loading.value = false;
}, 500)
}
function select() {
axios.get(`/student/recommend/${currentPage.value}`).then((response) => {
if (response.data.code === 0) {
noMore.value = true;
ElMessage.info(response.data.msg)
} else {
currentPage.value += 1;
recruitList.value.push(response.data.data);
}
})
}
</script