menduner-uniapp/pages/index/components/recommend.vue

<template>
	<view class="box defaultBgc">
		<view style="padding: 10px">
			<uni-data-select 
				v-model="query.jobId" 
				:clear="false" 
				:localdata="jobList" 
				@change="handleChangeJob" 
				placeholder="招聘中职位"
			></uni-data-select>
		</view>
		
		<scroll-view class="scrollBox" :scroll-y="true" @scrolltolower="loadingMore" style="position:relative;">
			<TalentItem v-if="items?.length || more !== 'loading'" :items="items" />
			<uni-load-more v-if="items?.length" :status="more" />
			<view v-if="!jobList?.length" class="noJobId text-center">暂无正在招聘中的职位</view>
			<view v-if="jobList?.length && !items?.length" class="noJobId">
				<view>请先选择上方正在招聘的职位</view>
				<view>我们将根据您选择的职位为您推荐合适的人才</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import TalentItem from './talentItem.vue'
import { getPersonRecommendPage } from '@/api/search'
import { dealDictArrayData } from '@/utils/position'

defineProps({ jobList: Array, navbarHeight: [Number, String] })

const query = ref({
	pageNo: 1,
	paeSize: 20,
	jobId: null
})
const items = ref([])
const more = ref('noMore')
const total = ref(0)

// 根据职位id获取推荐人才列表
const getRecommendList = async () => {
  try {
		more.value = 'loading'
		const { data } = await getPersonRecommendPage(query.value)

		if (!data.list.length) {
			more.value = 'noMore'
			return
		}

		const list = dealDictArrayData([], data.list)
		items.value = items.value.concat(list)
		total.value = data.total

		if (items.value.length === +data.total) {
      more.value = 'noMore'
      return
    }
	} catch {
		query.value.pageNo--
		more.value = 'more'
	}
}
getRecommendList()

// 选择招聘中职位
const handleChangeJob = () => {
	query.value.pageNo = 1
	items.value = []
	total.value = 0
	getRecommendList()
}

// 加载更多
const loadingMore = () => {
	if (more.value === 'noMore') return
  more.value = 'loading'
  query.value.pageNo++
	getRecommendList()
}
</script>

<style scoped lang="scss">
.noJobId {
	display: flex;
	flex-direction: column;
	margin-top: 26vh;
	color: #666;
	padding: 0 30rpx;
	view {
		text-align: center;
		margin-top: 4px;
	}
}
.box {
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.scrollBox{
	flex: 1;
  padding-bottom: 100px;
  box-sizing: border-box;
	height: 0 !important;
}
// .stick {
//   z-index: 1;
//   position: sticky;
//   background-color: #fff;
// }
</style>