menduner-uniapp/pagesB/jobFair/details.vue

<template>
	<view class="box" :style="`background-color: ${jobFairInfo?.backgroundColour}`">
		<view class="d-flex" style="padding: 15px 15px 0 15px;">
			<view class="title-line"></view>
			<rich-text class="title" :nodes="jobFairInfo?.title?.replace(/<\/?p[^>]*>/gi, '')"></rich-text>
		</view>

		<uni-segmented-control :current="tab" :values="controlList" @clickItem="tabChange" styleType="text" activeColor="#00B760" />
		<scroll-view class="scrollBox" :scroll-y="true" style="position:relative;" @scrolltolower="loadingMore">
			<JobItem 
				v-if="jobFairPosition?.length"
				:list="jobFairPosition"
				:jobFairId="id"
				:tab="tab"
				:jobFairName="jobFairInfo?.title?.replace(/<\/?p[^>]*>/gi, '')"
				@refresh="tabChange({ currentIndex: tab })"
			/>
			<uni-load-more v-else status="noMore" />
		</scroll-view>

		<view class="bottom-sticky">
			<view class="bottom-content">
				<button class="btnStyle bgButtons ss-m-l-15" type="primary" plain="true" @tap.stop="handleToShare">我的分享海报</button>
        <button class="buttons btnStyle" type="primary" @tap.stop="handleJoinJobFair">职位加入</button>
      </view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { getJobFair, getJobFairPosition } from '@/api/jobFair.js'
import { getJobAdvertisedList } from '@/api/new/position'
import { dealDictArrayData } from '@/utils/position.js'
import JobItem from './jobItem.vue'

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

// 获取招聘会信息
const jobFairInfo = ref({})
const getJobFairInfo = async () => {
  const { data } = await getJobFair(id.value)
  if (!data) return
  jobFairInfo.value = data || {}
}

// 招聘中职位
const jobFairPosition = ref([])
const getJobList = async () => {
  try {
		uni.showLoading({ title: '加载中' })
		const { data } = await getJobFairPosition(id.value)
		if (!data || !data.length) {
			jobFairPosition.value = []
			return
		}
		jobFairPosition.value = dealDictArrayData([], data)
  } finally {
    uni.hideLoading()
  }
}

// 已关闭职位
const more = ref('more')
const pageTotal = ref(0)
const pageInfo = ref({
  pageSize: 10,
  pageNo: 1
})
const getProgressJobList = async () => {
  if (pageInfo.value.pageNo < 1) return
  if (pageInfo.value.pageNo === 1) jobFairPosition.value = []
  try {
    more.value = 'loading'
    const res = await getJobAdvertisedList({ ...pageInfo.value, status: '1', jobFairId: id.value, hire: false })
    const list = res?.data?.list?.length ? res.data.list : []
    pageTotal.value = res.data.total-0
    if (!list?.length) {
      more.value = 'noMore'
      return
    }
    jobFairPosition.value.push(...dealDictArrayData([], list))
    more.value = 'more'
    if (jobFairPosition.value.length === pageTotal.value) {
      more.value = 'noMore'
      return
    }
  } catch (error) {
    pageInfo.value.pageNo--
    more.value = 'more'
  }
}

// 加载更多
const loadingMore = () => {
	// 招聘中职位列表不需要加载更多，属于一次性拿回全部
	if (tab.value === 0) return
  if (more.value === 'noMore') return

  more.value = 'loading'
  pageInfo.value.pageNo++
  getProgressJobList()
}

const tabChange = (e) => {
  tab.value = e.currentIndex
  jobFairPosition.value = []
  
  if (tab.value === 0) return getJobList()
  pageInfo.value.pageNo = 1
  getProgressJobList()
}

onLoad((options) => {
	id.value = options.id
	if (!id.value) {
		uni.showToast({
			title: '缺少招聘会id',
			icon: 'none'
		})
		setTimeout(() => {
			uni.navigateBack({ delta: 1 })
		}, 1000)
		return
	}

	getJobFairInfo()
	getJobList()
})

onShow(() => {
	if (id.value) {
    jobFairPosition.value = []
    if (tab.value) {
      pageInfo.value.pageNo = 1
      getProgressJobList()
      return
    }
    getJobList()
  }
})

// 加入招聘会
const handleJoinJobFair = () => {
  uni.navigateTo({
		url: '/pagesB/jobFair/join?jobFairId=' + id.value
	})
}

// 我的分享海报
const handleToShare = () => {
	uni.navigateTo({
		url: '/pagesB/jobFair/jobFairEntShare?jobFairId=' + id.value
	})
}
</script>

<style scoped lang="scss">
.title {
	font-size: 18px;
	color: #fff;
}
.title-line {
	width: 7px;
	height: 18px;
	background-color: #fff;
	margin-right: 10px;
	border-radius: 6px;
	margin-top: 3px;
}
.bottom-content {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  margin: 20rpx 0;
  .btnStyle {
    flex: 1;
    margin-right: 20rpx;
		border-radius: 50rpx;
  }
  .bgButtons {
    border: 2rpx solid #00B760;
    color: #00B760;
  }
  &-tool {
    width: 160rpx;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
}
.box {
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.scrollBox{
  flex: 1;
  height: 0 !important;
  padding-bottom: 100rpx;
  box-sizing: border-box;
}
</style>