menduner-uniapp/pagesB/jobFair/join.vue

<template>
	<view class="box defaultBgc">
		<view style="background-color: #fff;">
			<uni-search-bar
        v-model="query.name"
        radius="5"
        placeholder="输入关键字"
        cancelButton="none"
        :focus="false"
				@clear="handleSearch"
        @confirm="handleSearch"
      ></uni-search-bar>
		</view>
		
		<scroll-view class="scrollBox" :scroll-y="true" @scrolltolower="loadingMore" style="position:relative;">
			<view  v-for="(item, index) in items" :key="index" class="mList">
				<view v-if="item?.hrName" class="d-flex align-center item-top">
          <view class="avatarBox">
            <image class="enterAvatar" :src="getUserAvatar(item.hrHeadImg)"></image>
          </view>
          <view class="ss-m-l-20 label-text">{{ item?.hrName }}</view>
        </view>
        <view class="list-shape">
          <view>
						<view class="titleBox">
							<view style="display: flex;align-items: center;">
								<rich-text v-if="item.name?.indexOf('style') !== -1" class="job-name" :nodes="item.name"></rich-text>
								<view v-else class="job-name">{{ formatName(item.name) }}</view>
							</view>
						</view>
						<view class="d-flex align-center justify-space-between ss-m-t-20">
							<view class="font-size-13 ellipsis" style="flex: 1;">
								<span class="tag-gap" style="color: #808080;">
									<span>{{item.area?.str ?? '全国' }}</span>
									<span class="divider-mx" v-if="item.eduName">|</span>
									<span>{{item.eduName }}</span>
									<span class="divider-mx" v-if="item.expName">|</span>
									<span>{{item.expName }}</span>
									<span class="divider-mx">|</span>
									<span>{{!item.payFrom && !item.payTo ? '面议' : `${item.payFrom}-${item.payTo}${item.payName ? '/' + item.payName : ''}` }}</span>
								</span>
							</view>
						</view>
					</view>
          <view class="sub-li-bottom">
						<view class="sub-li-bottom-item" @tap.stop="handleJoin(item)">添加至招聘会</view>
          </view>
        </view>
      </view>
			<uni-load-more :status="more" />
		</scroll-view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { formatName } from '@/utils/getText.js'
import { joinJobFairPosition, getJobFairPositionList } from '@/api/jobFair.js'
import { dealDictArrayData } from '@/utils/position'
import { getUserAvatar } from '@/utils/avatar'

const query = ref({
	pageSize: 10,
	pageNo: 1,
	name: null,
	jobFairId: null
})
const items = ref([])
const more = ref('more')
const total = ref(0)

const getData = async () => {
  try {
		more.value = 'loading'
		const { data } = await getJobFairPositionList(query.value)

		if (!data.list.length) {
			more.value = 'noMore'
			items.value = []
			total.value = 0
			return
		}

		const list = dealDictArrayData([], data.list)
		items.value = items.value.concat(list)
		total.value = data.total

		if (items.value.length === +data.total) {
      more.value = 'noMore'
      return
    }
	} catch {
		query.value.pageNo--
		more.value = 'more'
	}
}

// 关键字搜索
const handleSearch = () => {
	total.value = 0
	items.value = []
	query.value.pageNo = 1
	getData()
}

// 加载更多
const loadingMore = () => {
	if (more.value === 'noMore') return

  more.value = 'loading'
  query.value.pageNo++
	getData()
}

onLoad(async (options) => {
	query.value.jobFairId = options.jobFairId

	query.value.pageNo = 1
	await getData()
})

// 加入职位
const handleJoin = async (item) => {
	uni.showLoading({ title: '加载中' })
	try {
		await joinJobFairPosition({ jobId: item.id, jobFairId: query.value.jobFairId })
		uni.hideLoading()
		uni.showToast({ title: '加入成功', icon: 'success' })

		setTimeout(() => {
			uni.navigateBack({ delta: 1 })
		}, 1000)
	} catch (e) {
		uni.hideLoading()
	}
}
</script>

<style scoped lang="scss">
.enterAvatar{
	width: 60rpx;
	height: 60rpx;
	margin: auto;
	border-radius: 50%;
}
.avatarBox {
  max-width: 60rpx;
  max-height: 60rpx;
}
.item-top {
  padding: 20rpx 30rpx;
  background: linear-gradient(90deg,#f5fcfc,#fcfbfa);
  border-radius: 12px 12px 0 0;
  font-size: 28rpx;
  color: #0E100F;
  .label-text {
	  max-width: 100%;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	  overflow: hidden;
  }
}
.box {
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.scrollBox{
	flex: 1;
  padding-bottom: 24rpx;
  box-sizing: border-box;
	height: 0 !important;
}
.stickFilter {
  z-index: 1;
  position: sticky;
  box-shadow: 0px 10rpx 12rpx 0px rgba(195, 195, 195, .25);
  top: 110rpx;
	background-color: #fff;
}
.job-name {
  font-size: 16px;
  font-weight: 700;
  color: #0E100F;
  max-width: 80vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sub-li-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  font-size: 13px;
  color: #00B760;
	&-item {
		width: 100%;
		height: 35px;
		line-height: 35px;
		text-align: center;
		background-color: #f7f8fa;
		border-radius: 4px;
	}
}

.list-shape {
  background-color: #fff;
  border-radius: 0 0 12px 12px;
	padding: 30rpx;
  .titleBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.tag-gap{
	margin: 10rpx 10rpx 10rpx 0;
}
.divider-mx{
	margin: 0 10rpx;
}
.divider {
	color:#e4d4d2;
}
.mList {
	border-radius: 12px;
	margin: 0 30rpx 20rpx 30rpx;
  box-shadow: 1px 2px 12px rgba(0, 0, 0, 0.17);
	&:first-child {
		margin-top: 20rpx;
	}
}
</style>