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

<template>
	<view class="box defaultBgc">
		<view style="background-color: #fff;">
			<uni-search-bar
        v-model="params.content"
        radius="5"
        placeholder="输入关键字"
        cancelButton="none"
        :focus="false"
				@clear="handleSearch('content', null)"
        @confirm="handleSearch('content', params.content)"
      ></uni-search-bar>
			<FilterList :list="filterList" idValue="label" @change="handleSearch"></FilterList>
		</view>
		
		<scroll-view class="scrollBox" :scroll-y="true" @scrolltolower="loadingMore" style="position:relative;">
			<TalentItem v-if="items?.length" :items="items" :showLastWorkExp="false" />
			<uni-load-more v-if="items.length" :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 FilterList from '@/components/FilterList'
import { getPersonConditionSearchPage } from '@/api/search'
import { dealDictArrayData } from '@/utils/position'
import { timesTampChange, getTimeDifferenceInChinese } from '@/utils/date'

const query = ref({
	pageNo: 1,
	pageSize: 10
})
const params = ref({
  content: null,
  positionIds: [],
  areaIds: [],
  expType: '',
  eduType: ''
})
const items = ref([])
const more = ref('more')
const total = ref(0)
const filterList = ref([
  { label: '职位', dictType: 'positionTreeData',key: 'positionId', map: { text: 'nameCn', value: 'id' } },
  { label: '城市', multiple: true, dictType: 'areaTreeData', key: 'areaIds', map: { text: 'name', value: 'id' } },
  { label: '最高学历', dictType: 'menduner_education_type', key: 'eduType' },
  { label: '工作经验', dictType: 'menduner_exp_type', key: 'expType' },
])

// 根据条件搜索人才
const getTalentList = async () => {
  try {
		more.value = 'loading'
		const { data } = await getPersonConditionSearchPage(Object.assign(query.value, params.value))

		if (!data.list.length) {
			more.value = 'noMore'
			items.value = []
			total.value = 0
			return
		}

		const list = dealDictArrayData([], data.list).map(e => {
      if (e.workList?.length) {
        e.workList.forEach(exp => {
          exp.startTimeStr = exp.startTime ? timesTampChange(exp.startTime, 'Y-M') : '未填写工作时间'
          exp.endTimeStr = exp.startTime ? exp.endTime ? timesTampChange(exp.endTime, 'Y-M') : '至今' : ''
          exp.year = exp.endTimeStr ? getTimeDifferenceInChinese(exp.startTime, exp.endTime) : ''
        })
      }
      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 checkValue = (obj) => {
  return Object.values(obj).some(value => {  
    return value !== null && value !== undefined && value !== '' && (Array.isArray(value) ? value.length > 0 : true)
  })
}

const handleSearch = (key, value) => {
	query.value.pageNo = 1
	params.value[key] = value

	if (!checkValue(params.value)) {
		uni.showToast({
			title: '请至少选择一个查询条件',
			icon: 'none',
			duration: 2000
		})
		more.value = 'noMore'
		items.value = []
		total.value = 0
		return
	}

	items.value = []
	total.value = 0
	getTalentList()
}

// 加载更多
const loadingMore = () => {
	if (more.value === 'noMore') return

  more.value = 'loading'
  query.value.pageNo++
	getTalentList()
}
</script>

<style scoped lang="scss">
.noJobId {
	text-align: center;
	line-height: 60vh;
	color: #666;
}
.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;
}
.stickFilter {
  z-index: 1;
  position: sticky;
  box-shadow: 0px 10rpx 12rpx 0px rgba(195, 195, 195, .25);
  top: 110rpx;
	background-color: #fff;
}
</style>