menduner-uniapp/pagesB/jobFair/positions.vue

<!-- 招聘会/企业详情 -->
<template>
  <view class="box">
    <scroll-view class="scrollBox" :scroll-y="true" :scroll-top="scrollTop" @scrolltolower="loadingMore" @scroll="onScroll" style="position:relative;">
      <view>
        <!-- 轮播图 -->
        <SwiperAd v-if="swiperAdList.length" :list="swiperAdList" imgUrlKey="img" margin="0" borderRadius="0" :strType="false" @click="handleToDetails"></SwiperAd>
        <view class="stick">
          <view class="titleBox">
            <view class="entName">{{ entName }}</view>
          </view>
        </view>
        <view v-if="listData?.length" class="listDataBox">
          <PositionList
            :list="listData"
            :noMore="false"
            :showEntInfo="false"
            :jobFairId="query.jobFairId"
            updateTimeAlign="left"
            noDataTextColor="#fff"
          ></PositionList>
          <uni-load-more :status="more" />
        </view>
        <view v-else class="nodata-img-parent">
          <image src="https://minio.citupro.com/dev/static/nodata.png" mode="widthFix" style="width: 100vw;height: 100vh;"></image>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref, reactive } from 'vue'
import { dealDictObjData } from '@/utils/position'
import { getJobFairEntJobPage } from '@/api/jobFair'
import PositionList from '@/components/PositionList'
import { getWebContent } from '@/api/common'
import SwiperAd from '@/components/SwiperAd'

const more = ref('more')
const listData = ref([])
const query = reactive({
  pageSize: 20, 
  pageNo: 1,
  jobFairId: undefined,
  enterpriseId: undefined,
})

const entName = ref('')

onLoad(async (options) => {
  entName.value = options.entName
  if (options?.jobFairId) {
    query.jobFairId = options.jobFairId
    query.enterpriseId = options.enterpriseId
    getData()
	}
})

// 获取轮播图
const swiperAdList = ref([])
const getSystemWebContent = async () => {
  const { data } = await getWebContent()
  swiperAdList.value = data?.appHomeCarousel || []
}
getSystemWebContent()

const getData = async () => {
  if (!query.jobFairId) {
    uni.showToast({ title: '获取企业岗位失败，请重试！', icon: 'none', duration: 2000 })
    return
  }
  try {
    const res = await getJobFairEntJobPage(query)
    const list = res?.data?.list || []
    list.forEach(e => {
      e.job = dealDictObjData({}, e)
    })
    listData.value = listData.value.concat(list)
    if (listData.value?.length === +res?.data?.total) {
      more.value = 'noMore'
      return
    }
  } catch (error) {
    query.pageNo--
    more.value = 'more'
  }
}

const scrollTop = ref(0)
const old = ref({
  scrollTop: 0
})
const onScroll = (e) =>{
  old.value.scrollTop = e.detail.scrollTop
}

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

// const goBack = () => {
// 	uni.navigateTo({
// 		url: '/pagesB/jobFair/index'
// 	})
// }

</script>

<style scoped lang="scss">
.stick {
  z-index: 1;
  position: sticky;
  top: 0;
  background-color: #7ec04c;
}
.box {
  height: 100vh;
  overflow: hidden;
  // padding-bottom: 120rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background-color: #7ec04c;
}
.listDataBox {
  // padding: 1px 0 120rpx;
  padding-bottom: 120rpx;
  margin: 0 5rpx;
}
.scrollBox{
  flex: 1;
  height: 0 !important;
  padding-bottom: 24rpx;
  box-sizing: border-box;
}

:deep(.uni-load-more__text) {
  color: #fff !important;
}

:deep(.uni-card) {
  padding: 0 !important;
  .uni-card__content {
    padding: 0 !important;
  }
}

.titleBox {
  text-align: center;
  padding: 15px 20rpx;
  .title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
  }
  .entName {
    color: #fff;
  }
}
</style>