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>

		<scroll-view class="scrollBox" :scroll-y="true" style="position:relative;">
			<JobItem 
				v-if="jobFairPosition?.length"
				:list="jobFairPosition"
				:jobFairId="id"
				:jobFairName="jobFairInfo?.title?.replace(/<\/?p[^>]*>/gi, '')"
				@refresh="getJobFairPositionList"
			/>
			<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 { dealDictArrayData } from '@/utils/position.js'
import JobItem from './jobItem.vue'

const id = ref(null)

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

// 获取招聘会职位
const jobFairPosition = ref([])
const getJobFairPositionList = async () => {
  const { data } = await getJobFairPosition(id.value)
  if (!data || !data.length) {
		jobFairPosition.value = []
		return
	}
  jobFairPosition.value = dealDictArrayData([], data)
}

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

	getJobFairInfo()
	getJobFairPositionList()
})

onShow(() => {
	if (id.value) getJobFairPositionList()
})

// 加入招聘会
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: 12px;
	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>