yizhizan-h5/pages/jobManagement/jobManagement.vue

<template>
	<view class="job-management-page">
		<!-- 固定顶部导航栏和标签页 -->
		<view class="fixed-header">
			<!-- 自定义导航栏 -->
			<view class="custom-navbar">
				<view class="navbar-content">
					<view class="nav-left" @click="goBack">
						<u-icon name="arrow-leftward" color="#333" size="32"></u-icon>
					</view>
					<view class="nav-title">职位管理</view>
					<view class="nav-right"></view>
				</view>
			</view>
			
			<!-- 标签页导航 - 使用uview的u-tabs组件 -->
			<view class="sticky-tabs">
				<u-tabs 
					:list="tabs" 
					:current="tabIndex" 
					@change="tabChange"
					:is-scroll="false"
					:height="88"
					:font-size="24"
					active-color="rgba(1, 107, 246, 1)"
					inactive-color="rgba(102, 102, 102, 1)"
					:bar-width="60"
					:bar-height="4"
					:gutter="0"
					bg-color="#ffffff"
				></u-tabs>
			</view>
		</view>
		
		<!-- 职位列表 -->
		<view class="job-list">
			<!-- 有数据时显示列表 -->
			<scroll-view scroll-y="true" style="width: 100%;height: 70vh;" v-if="jobList.length > 0">
				<view 
					class="job-card" 
					:class="getJobStatusClass(job)"
					v-for="(job, index) in jobList" 
					:key="index"
					@click="goNav('/my/order/pay?postPushId='+job.postPushId)"
				>
					<view class="job-card-content">
						<view class="job-header">
							<view class="job-title-section">
								<text class="job-title">{{job.stationName || job.title}}</text>
								<view class="urgent-tag" v-if="job.isUrgent">
									<text class="urgent-text">急聘</text>
								</view>
							</view>
							<view class="job-status" :class="getJobStatusClass(job)">
								<text class="status-text">{{job.statusName || job.status}}</text>
							</view>
						</view>
						<view class="job-info">
							<text class="job-details">{{job.city}}-{{job.county}} {{job.education}} {{job.experience}} {{job.salaryRange}} {{job.postType}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			
			<!-- 空状态显示 -->
			<view class="empty-state" v-else>
				<view class="empty-illustration">
					<image src="../../static/images/index/Hrempty.svg" class="empty-image" mode="aspectFit" />
				</view>
			</view>
		</view>
		
		<!-- 底部发布按钮 -->
		<view class="bottom-action">
			<view class="publish-btn" @click="publishNewJob">
				<text class="publish-text">发布新职位</text>
			</view>
		</view>
	</view>
</template>

<script>
import empty from '@/components/empty.vue'

export default {
	components: {
		empty
	},
	data() {
		return {
			tabIndex: 0,
			tabs: [
				{ name: '全部', status: 0 },
				{ name: '待审核', status: 1 },
				{ name: '招聘中', status: 2 },
				{ name: '已拒绝', status: 3 },
				{ name: '已取消', status: 4 },
				{ name: '已关闭', status: 5 }
			],
			jobList: [],
			page: 1,
			limit: 10,
			count: 0,
			companyId: ''
		}
	},
	onLoad() {
		this.companyId = uni.getStorageSync('companyId');
		this.getJobList();
		// 动态设置body和html高度
		this.setBodyHeight();
	},
	onShow() {
		this.getJobList();
	},
	onReachBottom() {
		if (this.jobList.length < this.count) {
			this.page = this.page + 1;
			this.getJobList();
		}
	},
	onPullDownRefresh() {
		this.page = 1;
		this.getJobList();
	},
	methods: {
		goBack() {
			// 检查页面栈，如果没有可返回的页面，则跳转到首页
			const pages = getCurrentPages()
			if (pages.length > 1) {
				uni.navigateBack()
			} else {
				// 如果没有可返回的页面，跳转到首页
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		},
		// 切换菜单
		tabChange(e) {
			// u-tabs组件的change事件传递的是事件对象，需要获取index
			const index = typeof e === 'number' ? e : e.index
			this.tabIndex = index
			this.jobList = []; // 置空列表,显示加载进度条
			this.page = 1;
			this.getJobList();
		},
		// 获取职位列表
		getJobList() {
			let data = {
				status: this.tabIndex == 0 ? '' : this.tabIndex,
				page: this.page,
				limit: this.limit,
				companyId: this.companyId
			}
			this.$Request.getT('/app/postPush/getPostPushList', data).then(res => {
				if (res.code == 0) {
					if (this.page == 1) this.jobList = []; //如果是第一页需手动制空列表
					res.data.records.forEach(ret => {
						ret.showpeop = false
						if (ret.status == 1) {
							ret.statusName = '待审核'
						} else if (ret.status == 2) {
							ret.statusName = '招聘中'
						} else if (ret.status == 3) {
							ret.statusName = '已拒绝'
						} else if (ret.status == 4) {
							ret.statusName = '已取消'
						} else if (ret.status == 5) {
							ret.statusName = '已关闭'
						}
						this.jobList.push(ret)
					})
					this.count = res.data.total
				}
				uni.hideLoading()
				uni.stopPullDownRefresh()
			}).catch(err => {
				uni.hideLoading()
				uni.stopPullDownRefresh()
			})
		},
		goNav(url) {
			uni.navigateTo({
				url
			})
		},
		publishNewJob() {
			// 跳转到发布新职位页面
			uni.navigateTo({
				url: '/package/addJob/addJob'
			})
		},
		// 获取职位状态样式类
		getJobStatusClass(job) {
			if (job.status === 2) {
				return 'status-trial';
			} else if (job.status === 1) {
				return 'status-review';
			} else if (job.status === 3 || job.status === 4) {
				return 'status-failed';
			} else if (job.status === 5) {
				return 'status-closed';
			}
			return '';
		},
		setBodyHeight() {
			// 动态设置body和html高度为auto
			if (typeof document !== 'undefined') {
				document.body.style.height = 'auto'
				document.documentElement.style.height = 'auto'
				document.body.style.minHeight = 'auto'
				document.documentElement.style.minHeight = 'auto'
			}
		}
	}
}
</script>

<style lang="scss" scoped>
/*
sticky生效条件：
1、父元素不能overflow:hidden或者overflow:auto属性。(mescroll-body设置:sticky="true"即可, mescroll-uni本身没有设置overflow)
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效,所以父元素必须是 mescroll
*/
.sticky-tabs {
	z-index: 990;
	position: sticky;
	top: var(--window-top);
	background-color: #fff;
}

page {
	background-color: #ffffff;
}
.job-management-page {
	background-color: #ffffff;
}

.fixed-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background-color: #ffffff;
}

.custom-navbar {
	padding-top: 80rpx;
	background-color: #ffffff;
	box-sizing: border-box;
	
	.navbar-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 40rpx;
		
		.nav-left, .nav-right {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.nav-title {
            color: rgba(51, 51, 51, 1);
            font-family: DM Sans;
            font-size: 30rpx;
            font-weight: 700;
            line-height: 52px;
            letter-spacing: 0.5%;
            text-align: center;
		}
	}
}

.job-list {
	padding: 0 40rpx;
	margin-top: 280rpx;
	
	.job-card {
		background: #ffffff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		padding: 32rpx;
        border: 0.5px solid rgba(227, 231, 236, 1);
		// box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
		
		.job-card-content {
			.job-header {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin-bottom: 16rpx;
				
				.job-title-section {
					display: flex;
					align-items: center;
					flex: 1;
                    gap: 28rpx;
					
					.job-title {
                        color: rgba(23, 23, 37, 1);
                        font-family: DM Sans;
                        font-size: 28rpx;
                        font-weight: 400;
                        line-height: 44rpx;
                        letter-spacing: 0.5%;
                        text-align: left;
					}
					
					.urgent-tag {
                        border-radius: 8rpx;
                        background: rgba(252, 233, 220, 1);
						padding: 4rpx 8rpx;
						
						.urgent-text {
                            color: rgba(1, 107, 246, 1);
                            font-family: DM Sans;
                            font-size: 16rpx;
                            font-weight: 400;
                            // line-height: 20rpx;
                            // letter-spacing: -0.5px;
                            text-align: left;
						}
					}
				}
				
				.job-status {
					&.status-trial {
						color: rgba(1, 107, 246, 1);
					}
					
					&.status-review {
						color: rgba(1, 107, 246, 1);
					}
					
					&.status-failed {
						color: rgba(153, 153, 153, 1);
						
						.status-text {
							color: rgba(153, 153, 153, 1) !important;
							background: none !important;
							-webkit-background-clip: unset !important;
							-webkit-text-fill-color: rgba(153, 153, 153, 1) !important;
							background-clip: unset !important;
							text-fill-color: rgba(153, 153, 153, 1) !important;
						}
					}
					
					&.status-closed {
						color: rgba(153, 153, 153, 1);
						
						.status-text {
							color: rgba(153, 153, 153, 1) !important;
							background: none !important;
							-webkit-background-clip: unset !important;
							-webkit-text-fill-color: rgba(153, 153, 153, 1) !important;
							background-clip: unset !important;
							text-fill-color: rgba(153, 153, 153, 1) !important;
						}
					}
					
					.status-text {
                        background: linear-gradient(132.53deg, rgba(106.94185638427734, 84.63434600830078, 214.0178680419922, 0.96),rgba(144.87640380859375, 87.8011474609375, 191.25, 1) 95%);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        background-clip: text;
                        text-fill-color: transparent;
                        font-family: DM Sans;
                        font-size: 18rpx;
                        font-weight: 400;
                        line-height: 20rpx;
                        letter-spacing: -0.5px;
                        text-align: right;
					}
				}
			}
			
			.job-info {
				.job-details {
                    color: rgba(120, 130, 138, 1);
                    font-family: DM Sans;
                    font-size: 28rpx;
                    font-weight: 400;
                    line-height: 36rpx;
                    letter-spacing: 0.5%;
                    text-align: left;
				}
			}
		}
		
		&.status-failed {
			.job-title {
				color: rgba(153, 153, 153, 1) !important;
			}
			
			.job-details {
				color: rgba(153, 153, 153, 1) !important;
			}
		}
		
		&.status-closed {
			.job-title {
				color: rgba(153, 153, 153, 1) !important;
			}
			
			.job-details {
				color: rgba(153, 153, 153, 1) !important;
			}
		}
	}
}

.empty-state {
	display: flex;
	// flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40rpx;
	
	.empty-illustration {
		margin-bottom: 40rpx;
		
		.empty-image {
			width: 700rpx;
			height: 800rpx;
		}
	}
	
	.empty-text {
		color: rgba(120, 130, 138, 1);
		font-family: DM Sans;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 36rpx;
		letter-spacing: 0.5%;
		text-align: center;
	}
}

.bottom-action {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 30rpx 40rpx;
	background: #ffffff;
	z-index: 9999;
	
	.publish-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.publish-text {
            color: rgba(255, 255, 255, 1);
            font-family: DM Sans;
            font-size: 32rpx;
            font-weight: 400;
            line-height: 48rpx;
            letter-spacing: 0%;
            text-align: center;
		}
	}
}
</style>