menduner-uniapp/pages/index/position.vue

<template>
  <view class="box defaultBgc">
    <scroll-view class="scrollBox" scroll-y="true" @scrolltolower="loadingMore" style="position:relative;">
      <view class="white-bgc">
        <uni-search-bar
          v-model="query.content"
          radius="8"
          placeholder="请输入关键字"
          cancelButton="none"
          :focus="false"
          @confirm="onSearch($event.value)"
          @clear="query.content = ''; onSearch()"
        />
      </view>
      <view class="white-bgc px-10 mb-10">
        <SwiperAd :list="swiperAdList"></SwiperAd>
        <view class="px-5">
          <FilterList :list="filterList" idValue="label" @change="handleSearch"></FilterList>
        </view>
      </view>
      <PositionList class="pb-10" :list="positionListData" :noMore="noMore"></PositionList>
    </scroll-view>
  </view>
</template>

<script setup>
import SwiperAd from '@/components/SwiperAd'
import FilterList from '@/components/FilterList'
import PositionList from '@/components/PositionList'
import { swiperAdListTest } from '@/utils/testData'
import { dealDictObjData } from '@/utils/position'
import { getJobAdvertisedSearch } from '@/api/position';

import { ref, reactive } from 'vue'

const swiperAdList = ref(swiperAdListTest)
const filterList = ref([
  { label: '城市', dictType: 'areaTreeData', key: 'areaIds', map: { text: 'name', value: 'id' } },
  { label: '行业', dictType: 'industryTreeData',key: 'industryIds', map: { text: 'nameCn', value: 'id' } },
  { label: '求职类型', dictType: 'menduner_job_type', key: 'jobType' },
  { label: '薪资待遇', dictType: 'menduner_pay_scope', key: 'payType' },
  { label: '工作经验', dictType: 'menduner_exp_type', key: 'expType' },
])

// 
const positionListData = ref([])
const noMore = ref(false)
const query = reactive({ 
  pageSize: 10, 
  pageNo: 1, 
  content: '',
  areaIds: [],
  industryIds: [],
  jobType: [],
  payType: [],
  expType: []
})
//
const getData = async () => {
  // console.log('query', query)
  const res = await getJobAdvertisedSearch(query)
  const list = res?.data?.list || []
  if (list?.length) {
    list.forEach(e => {
      e.job = { ...e.job, ...dealDictObjData({}, e.job) }
      e.enterprise = { ...e.enterprise, ...dealDictObjData({}, e.enterprise)}
    })
    positionListData.value = positionListData.value.concat(list)
  }
  if (list?.length < query.pageSize) noMore.value = true
}
getData()

const handleSearch = (key, value) => {
  query[key] = value ? [value] : []
  onSearch()
}

const onSearch = () => {
  query.pageNo = 1
  noMore.value = false
  positionListData.value = []
  getData()
}

const loadingMore = () => { // 加载更多
  query.pageNo++
  getData()
}

</script>

<style scoped lang="scss">
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.pb-10 { padding-bottom: 10px; }
.pb-20 { padding-bottom: 20px; }
.px-5 { padding-left: 5px; padding-right: 5px; }
.px-10 { padding-left: 10px; padding-right: 10px; }
.mx-10 { margin-left: 10px; margin-right: 10px }
.mx-20 { margin-left: 20px; margin-right: 20px; }
.mb-10 { margin-bottom: 10px; }
.box {
  height: 100vh;
  overflow: hidden;
}
.scrollBox{
  height: 100%;
}
</style>