menduner-uniapp/pages/index/position.vue

<template>
  <view class="box defaultBgc">
    <uni-segmented-control :current="current" :values="controlList" @clickItem="handleChange" styleType="text" activeColor="#00B760" style="background-color: #fff"></uni-segmented-control>
    <scroll-view class="scrollBox" :scroll-y="true" @scrolltolower="loadingMore" style="position:relative;">
      <view>
        <!-- -->
        <view class="white-bgc stick ss-p-t-20" style="border-radius: 5px;">
          <view class="defaultBgc d-flex ss-m-x-20">
            <view class="stickBtn" @click="handleClick(0)">待发布(<text class="ss-m-x-2">{{ unpublished }}</text>)</view>
            <view class="stickBtn newPositionBtn" @click="handleClick(1)">发布新职位</view>
          </view>
          <!-- 搜索条 -->
          <uni-search-bar
            v-model="query.content"
            radius="5"
            placeholder="输入关键字"
            cancelButton="none"
            :focus="false"
            @confirm="onSearch"
          ></uni-search-bar>
        </view>
        <view v-if="noData" class="d-flex flex-column align-center justify-center" style="height: 80vh;">
          <view class="nodata-img-parent">
            <image src="https://minio.citupro.com/dev/static/nodata.png" mode="widthFix" style="width: 100vw;height: 100vh;"></image>
          </view>
          <view class="color-999">暂无职位</view>
          <view class="f-horizon-center">
            <button type="primary" size="default" class="ss-m-t-50" style="width: 60vw;" @click="fabClick">发布新职位</button>
          </view>
        </view>
        <view v-else>
          <PositionList v-if="positionListData?.length || more !== 'loading'" :list="positionListData" :noMore="false" :showJobFairEntrance="false"></PositionList>
          <uni-load-more :status="more" />
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import PositionList from '@/components/PositionList'
import { dealDictObjData } from '@/utils/position'
import { getJobAdvertisedSearch } from '@/api/position'
import { onShow } from '@dcloudio/uni-app'


const more = ref('more')
const noData = ref(false)
const unpublished = ref(0)

const positionListData = ref([])
const query = reactive({
  pageSize: 20, 
  pageNo: 1,
})
const getData = async () => {
  if (query.pageNo === 1) positionListData.value = []
  if (query.pageNo <= 0) return
  try {
    more.value = 'loading'
    const res = await getJobAdvertisedSearch(query)
    const list = res?.data?.list || []
    if (!list?.length) {
      more.value = 'noMore'
      return
    }
    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'
  } finally {
    if (!positionListData.value?.length) {
      noData.value = true
    }
  }
}

const current = ref(0)
const controlList = ['招聘中', '已关闭']

const handleChange = (e) => {
  current.value = e.currentIndex
}

// 设置自定义tabbar选中值
onShow(() => {
  const currentPage = getCurrentPages()[0] // 获取当前页面实例
  const currentTabBar = currentPage?.getTabBar?.()

  // 设置当前tab页的下标index
  currentTabBar?.setData({ selected: 1 })
  getData()
})

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

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

const handleClick = (type) => {
  let url = type ? '' : ''
  if (!type && !unpublished.value) return
  // 
  if (url) {
    uni.navigateTo({ url })
  }

}

</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: 110rpx;
}
.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;
  display: flex;
  flex-direction: column;
}
.scrollBox{
  flex: 1;
  height: 0 !important;
  padding-bottom: 24rpx;
  box-sizing: border-box;
}

.stickBtn{
  text-align: center;
  width: calc(50% - 2px);
  height: 24px;
  line-height: 24px;
  margin: 8px 0;
  color: grey;
  font-size: 13px;
}

.newPositionBtn{
  color: #00B760;
  border-left: 1px solid #c3c3c3;
}

// :deep(.uni-searchbar) {
//   padding: 10px 30rpx;
// }
</style>