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

<template>
	<view>
		<view style="padding: 0 15px;">
			<uni-data-select 
				v-model="query.jobId" 
				:clear="false" 
				:localdata="jobList" 
				@change="handleChangeJob" 
				placeholder="招聘中职位"
			></uni-data-select>
		</view>
		
		<scroll-view class="scrollBox defaultBgc" :scroll-y="true" :scroll-top="scrollTop" @scrolltolower="loadingMore" @scroll="onScroll" style="position:relative;">
			<TalentItem v-if="query.jobId && (items?.length || more !== 'loading')" :items="items" />
			<uni-load-more v-if="query.jobId" :status="more" />
			<view v-else class="noJobId">请选择要推荐人才的职位</view>
		</scroll-view>
	</view>
</template>

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

defineProps({ jobList: Array })

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

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

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

		const list = dealDictArrayData([], data.list).map(e => {
      e.areaName = e.area?.str ?? ''
      e.regName = e.reg?.str ?? ''
      return e
    })
		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'
	}
}

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

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

const onScroll = (e) =>{
  old.value.scrollTop = e.detail.scrollTop
}
</script>

<style scoped lang="scss">
.noJobId {
	text-align: center;
	line-height: 60vh;
	color: #666;
}
.scrollBox{
  padding-bottom: 24rpx;
  box-sizing: border-box;
	margin-top: 10px;
	min-height: 80vh;
}
</style>