menduner-uniapp/pages/index/position.vue

<template>
  
  <view class="box defaultBgc">
    <scroll-view class="scrollBox" scroll-y="true" @scrolltolower="loadingMore" style="position:relative;">
      <view>
        <view class="white-bgc stick">
          <uni-search-bar
            v-model="query.content"
            radius="8"
            placeholder="请输入关键字"
            cancelButton="none"
            :focus="false"
            @confirm="onSearch($event.value)"
            @clear="query.content = ''; onSearch()"
          />
        </view>
        <SwiperAd :list="swiperAdList"></SwiperAd>
        <view class="white-bgc px-10 mb-10 stickFilter">
          <FilterList :list="filterList" idValue="label" @change="handleSearch"></FilterList>
        </view>
        <PositionList :list="positionListData" :noMore="false"></PositionList>
        <uni-load-more :status="more" />
        
      </view>
    </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 { onShow } from '@dcloudio/uni-app'

import { ref, reactive } from 'vue'
// 设置自定义tabbar选中值
onShow(() => {
    const currentPage = getCurrentPages()[0];  // 获取当前页面实例
    const currentTabBar = currentPage?.getTabBar?.();
    // 设置当前tab页的下标index
    currentTabBar?.setData({ selected: 0 });
})

const more = ref('more')
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: 'payScope' },
  { label: '工作经验', dictType: 'menduner_exp_type', key: 'expType' },
])

// 
const positionListData = ref([])
const query = reactive({ 
  pageSize: 20, 
  pageNo: 1, 
  content: '',
  areaIds: [],
  industryIds: [],
  jobType: [],
  payScope: [],
  expType: []
})
//
const getData = async () => {
  try {
    const res = await getJobAdvertisedSearch(query)
    const list = res?.data?.list || []
    positionListData.value.push(...list.map(e => {
        if (!e) {
          return e
        }
        e.job = { ...e.job, ...dealDictObjData({}, e.job) }
        e.enterprise = { ...e.enterprise, ...dealDictObjData({}, e.enterprise)}
        return e
    }))
    if (positionListData.value.length === +res.data.total) {
      more.value = 'noMore'
      return
    }
  } catch (error) {
    query.pageNo--
    more.value = 'more'
  }
  
  
}
getData()

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

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

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

</script>

<style scoped lang="scss">
.stick {
  z-index: 1;
  position: sticky;
  top: 0;
}
.stickFilter {
  z-index: 1;
  position: sticky;
  box-shadow: 0px 10rpx 12rpx 0px rgba(195, 195, 195, .25);
  top: 100rpx;
}
.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;
  padding-bottom: 120rpx;
  // box-sizing: border-box;
  // padding-bottom: 160rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.scrollBox{
  // height: 100%;
  flex: 1;
  height: 0 !important;
  padding-bottom: 24rpx;
  box-sizing: border-box;
  // padding-bottom: 160rpx;
}
</style>