menduner-uniapp/pages/index/position.vue

<template>
  <view class="box defaultBgc">
    <scroll-view class="scrollBox" scroll-y="true" @scrolltolower="loadingMore" @refresherrefresh="refresh" style="position:relative;">
      <uni-search-bar
        class="ss-flex-1 white-bgc"
        radius="8"
        placeholder="请输入关键字"
        cancelButton="none"
        :focus="false"
        @confirm="onSearch($event.value)"
      />
      <view class="block">
        <SwiperAd class="pb-20" :list="swiperAdList"></SwiperAd>
        <FilterList class="pb-10" :list="filterList" idValue="label"></FilterList>
      </view>
      <PositionList class="pb-10" :list="positionListData" :noMore="noMore"></PositionList>
    </scroll-view>
  </view>
</template>

<script setup>
import SwiperAd from '@/components/SwiperAd'
// import SearchBar from '@/components/SearchBar'
import FilterList from '@/components/FilterList'
import PositionList from '@/components/PositionList'
import { positionList, swiperAdListTest } from '@/utils/testData'
import { dealDictObjData } from '@/utils/position'
import { getJobAdvertisedSearch } from '@/api/position';
import { ref, reactive } from 'vue'

let searchContent = ''
const swiperAdList = ref(swiperAdListTest)
const filterList = ref([
  { label: '行业' },
  { label: '城市' },
  { label: '工作性质' },
  { label: '月薪范围' },
  { label: '工作经验' },
])

// 
const positionListData = ref([])
const noMore = ref(false)
const query = reactive({ pageSize: 8, pageNo: 1 })
//
const getData = async () => {
  query.content = searchContent
  const res = await getJobAdvertisedSearch(query)
  const list = res?.data?.list || []
  if (list?.length) {
    list.forEach(e => {
      e.active = false
      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
  console.log('列表', positionListData.value)
}
getData()

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

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

const refresh = () => {  // 下拉刷新
  onSearch(searchContent)
}

</script>

<style scoped lang="scss">
.pb-10 { padding-bottom: 10px; }
.pb-20 { padding-bottom: 20px; }
.box {
  height: calc(100vh - 110px);
  overflow: hidden;
  .block{
    margin-bottom: 10px;
    padding: 0 10px;
    background-color: #fff;
  }
}
.scrollBox{
  height: 100%;
}
</style>