menduner-uniapp/pages/index/crowdsourcing.vue

<template>
  <layout-page>
		<view class="content defaultBgc">
			<view class="content-top">
				<view class="content-top-title">
					<view class="content-top-title-label">
						<text class="content-top-title-label-l">全员猎聘</text>
						<text class="content-top-title-label-s">海量岗位 | 推荐有赏</text>
					</view>
				</view>
			</view>
			<scroll-view class="scrollBox" scroll-y="true" @scrolltolower="loadingMore" style="position:relative;">
				<view class="content-top">
					<view class="content-top-carousel">
						<view class="content-top-carousel-box">
							<SwiperAd :list="swiperAdList"></SwiperAd>
						</view>
					</view>
					<view class="content-top-recommend">
						<view class="content-top-recommend-box">
							<resume-status>
								<template #header>
									<view class="content-top-recommend-box-title">
										<text class="title">我的推荐</text>
									</view>
								</template>
							</resume-status>
						</view>
					</view>
				</view>
				<view class="content-main">
					<view class="content-main-list">
						<PositionList :list="items" :noMore="false"></PositionList>
						<uni-load-more :status="more" />
					</view>
				</view>
			</scroll-view>
		</view>
  </layout-page>
</template>

<script setup>
import { ref, reactive } from 'vue'
import SwiperAd from '@/components/SwiperAd'
// import { showAuthModal } from '@/hooks/useModal'
import { swiperAdListTest } from '@/utils/testData'
// import { userStore } from '@/store/user'
import layoutPage from '@/layout'
import ResumeStatus from '@/components/ResumeStatus'
import { getJobAdvertisedHire } from '@/api/position.js'
import { getDict } from '@/hooks/useDictionaries.js'
import { dealDictArrayData } from '@/utils/position.js'
import PositionList from '@/components/PositionList'
import { onShow, onLoad } from '@dcloudio/uni-app'
// 设置自定义tabbar选中值
onShow(() => {
    const currentPage = getCurrentPages()[0];  // 获取当前页面实例
    const currentTabBar = currentPage?.getTabBar?.();

    // 设置当前tab页的下标index
    currentTabBar?.setData({ selected: 3 });
})
onLoad(() => {
	getList()
})
const swiperAdList = ref(swiperAdListTest)
const items = reactive([])
const pageInfo = ref({
	pageNo: 1,
	pageSize: 20
})

const loading = ref(false)
const total = ref(0)

const more = ref('more')


const loadingMore = (e) => {
	if (total.value === items.length) {
		return
	}
	if (loading.value) {
		return
	}
	more.value = 'loading'
	pageInfo.value.pageNo++
	getList()
}

async function getList () {
	loading.value = true
	try {
		const { data } = await getJobAdvertisedHire({
			...pageInfo.value
		})
		if (!data?.list) {
			pageInfo.pageNo--
			return
		}
		const _items = dealDictArrayData([], data.list)
		items.push(..._items.map(e => {
			return {
				job: e,
				enterprise: {
					welfareList: e.tagList,
					logoUrl: e.logoUrl,
					anotherName: e.anotherName,
					industryName: e.industryName,
					scaleName: e.scaleName
				}
			}
		}))
		total.value = +data.total
		more.value = items.length === total.value ? 'noMore' : 'more'
	} catch (error) {
		more.value = more
		pageInfo.pageNo--
	} finally {
		loading.value = false
	}
	
}


</script>

<style scoped lang="scss">
$defaultColor: #999;
@mixin box {
	// border-radius: 24rpx;
	width: 100%;
	height: 100%;
	background: #FFF;
	overflow: hidden;
}
.content {
	height: 100vh;
	display: flex;
	flex-direction: column;
	&-top {		
		&-title {
			padding: 24rpx;
			box-sizing: border-box;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			background-color: #FFF;
			&-label {
				display: flex;
				align-items: flex-end;
				&-l {
					font-size: 46rpx;
					margin-right: 16rpx;
				}
				&-s {
					font-size: 24rpx;
					color: $defaultColor;
				}
			}
			&-local {
				color: $defaultColor;
				display: flex;
				align-items: flex-end;
			}
		}
		&-carousel {
			padding: 24rpx;
		}
		&-recommend {
			padding: 0 24rpx;
			margin-bottom: 20rpx;
			&-box {
				@include box;
				&-title {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					padding: 20rpx;
					font-size: 30rpx;
					.route {
						color: $defaultColor;
						font-size: .75em;
					}
				}
			}
		}
	}
	&-main {
		&-filter {
			padding: 24rpx;
			font-size: 30rpx;
			color: $defaultColor;
			display: flex;
			justify-content: space-between;
			&-type{
				&-item {
					padding: 20rpx;
					&.active {
						color: #000;
					}
				}
			}
		}
		&-list {
			width: 100%;
			padding: 0 24rpx 24rpx 24rpx;
			box-sizing: border-box;
			&-box {
				padding: 24rpx;
				margin-bottom: 24rpx;
				box-sizing: border-box;
				@include box;
				.top {
					width: 100%;
					display: flex;
					justify-content: space-between;
					.title {
						flex: 1;
						overflow: hidden; /* 隐藏超出部分 */  
						white-space: nowrap; /* 不换行 */  
						text-overflow: ellipsis; /* 超出部分显示省略号 */  
					}
					.remuneration {
						color: aquamarine;
					}
				}
				.main {
					display: flex;
					font-size: 24rpx;
					margin: 28rpx 0;
					.tag {
						&.blue {
							background: aliceblue;
							color: royalblue;
						}
						font-size: 20rpx;
						border-radius: 8rpx;
						color: #666;
						background: #eee;
						padding: 6rpx 10rpx;
						margin-right: 20rpx;
					}
				}
				.bottom {
					color: #666;
					display: flex;
					justify-content: space-between;
					.origin {
						font-size: 0.8em;
						.interval {
							padding: 0 16rpx;
						}
					}
					.local {
						color: #aaa;
						font-size: 0.6em;
					}
				}
			}
			.noMore {
				font-size: 24rpx;
				color: $defaultColor;
				text-align: center;
			}
		}
	}
}
.scrollBox {
	height: 0;
	flex: 1;
	padding-bottom: 120rpx;
}
</style>