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>
			
			<!-- 标签页导航 -->
			<u-tabs 
				:list="tabList" 
				:current="activeTab" 
				@change="switchTab"
				:is-scroll="false"
				:height="88"
				:font-size="24"
				active-color="#016BF6"
				inactive-color="rgba(102, 102, 102, 1)"
				:bar-width="60"
				:bar-height="4"
				:gutter="0"
				bg-color="#ffffff"
			></u-tabs>
		</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="job.statusClass"
					v-for="(job, index) in jobList" 
					:key="index"
					@click="goToJobDetail(job)"
				>
					<view class="job-card-content">
						<view class="job-header">
							<view class="job-title-section">
								<text class="job-title">{{job.title}}</text>
								<view class="urgent-tag" v-if="job.isUrgent">
									<text class="urgent-text">急聘</text>
								</view>
							</view>
							<view class="job-status" :class="job.statusClass">
								<text class="status-text">{{job.status}}</text>
							</view>
						</view>
						<view class="job-info">
							<text class="job-details">{{job.location}} {{job.education}} {{job.experience}} {{job.salary}} {{job.type}}</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>
export default {
	data() {
		return {
			activeTab: 0,
			tabList: [
				{ name: '全部' },
				{ name: '开放中' },
				{ name: '审核失败' },
				{ name: '已关闭' }
			],
			jobList: []
		}
	},
	created() {
		// 页面创建时初始化数据
		this.filterJobsByTab(0)
		// 动态设置body和html高度
		this.setBodyHeight()
	},
	methods: {
		goBack() {
			// 检查页面栈，如果没有可返回的页面，则跳转到首页
			const pages = getCurrentPages()
			if (pages.length > 1) {
				uni.navigateBack()
			} else {
				// 如果没有可返回的页面，跳转到首页
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		},
		switchTab(e) {
			// u-tabs组件的change事件传递的是事件对象，需要获取index
			const index = typeof e === 'number' ? e : e.index
			this.activeTab = index
			// 这里可以根据选中的标签过滤职位列表
			this.filterJobsByTab(index)
		},
		filterJobsByTab(tabIndex) {
			// 根据标签过滤职位列表的逻辑
			console.log('切换到标签:', this.tabList[tabIndex].name)
			
			// 模拟不同标签的数据
			if (tabIndex === 0) { // 全部
				this.jobList = [
					{
						title: '亚马逊运营',
						location: '深圳-西乡',
						education: '本科',
						experience: '1-3年',
						salary: '10-15K·13薪',
						type: '全职',
						status: '免费试用中',
						statusClass: 'status-trial',
						isUrgent: true
					},
					{
						title: '亚马逊运营',
						location: '深圳-西乡',
						education: '本科',
						experience: '1-3年',
						salary: '10-15K·13薪',
						type: '全职',
						status: '审核中',
						statusClass: 'status-review',
						isUrgent: false
					},
					{
						title: '亚马逊运营',
						location: '深圳-西乡',
						education: '本科',
						experience: '1-3年',
						salary: '10-15K·13薪',
						type: '全职',
						status: '审核未通过',
						statusClass: 'status-failed',
						isUrgent: false
					},
					{
						title: '亚马逊运营',
						location: '深圳-西乡',
						education: '本科',
						experience: '1-3年',
						salary: '10-15K·13薪',
						type: '全职',
						status: '免费试用中',
						statusClass: 'status-trial',
						isUrgent: false
					},
					{
						title: '产品经理',
						location: '深圳-南山',
						education: '本科',
						experience: '3-5年',
						salary: '15-25K·14薪',
						type: '全职',
						status: '审核中',
						statusClass: 'status-review',
						isUrgent: true
					},
					{
						title: 'UI设计师',
						location: '深圳-福田',
						education: '本科',
						experience: '2-4年',
						salary: '12-18K·13薪',
						type: '全职',
						status: '免费试用中',
						statusClass: 'status-trial',
						isUrgent: false
					},
					{
						title: '前端开发工程师',
						location: '深圳-宝安',
						education: '本科',
						experience: '2-5年',
						salary: '15-22K·13薪',
						type: '全职',
						status: '审核中',
						statusClass: 'status-review',
						isUrgent: true
					},
					{
						title: '数据分析师',
						location: '深圳-龙岗',
						education: '硕士',
						experience: '1-3年',
						salary: '18-28K·14薪',
						type: '全职',
						status: '免费试用中',
						statusClass: 'status-trial',
						isUrgent: false
					},
					{
						title: '销售经理',
						location: '深圳-罗湖',
						education: '本科',
						experience: '3-6年',
						salary: '20-35K·15薪',
						type: '全职',
						status: '审核中',
						statusClass: 'status-review',
						isUrgent: false
					},
					{
						title: '运营专员',
						location: '深圳-盐田',
						education: '本科',
						experience: '1-2年',
						salary: '8-12K·13薪',
						type: '全职',
						status: '审核未通过',
						statusClass: 'status-failed',
						isUrgent: false
					},
					{
						title: '运营专员',
						location: '深圳-盐田',
						education: '本科',
						experience: '1-2年',
						salary: '8-12K·13薪',
						type: '全职',
						status: '审核未通过',
						statusClass: 'status-failed',
						isUrgent: false
					},
					{
						title: '运营专员',
						location: '深圳-盐田',
						education: '本科',
						experience: '1-2年',
						salary: '8-12K·13薪',
						type: '全职',
						status: '审核未通过',
						statusClass: 'status-failed',
						isUrgent: false
					},
					{
						title: '运营专员',
						location: '深圳-盐田',
						education: '本科',
						experience: '1-2年',
						salary: '8-12K·13薪',
						type: '全职',
						status: '审核未通过',
						statusClass: 'status-failed',
						isUrgent: false
					}
				]
			} else if (tabIndex === 1) { // 开放中
				this.jobList = [
					{
						title: '亚马逊运营',
						location: '深圳-西乡',
						education: '本科',
						experience: '1-3年',
						salary: '10-15K·13薪',
						type: '全职',
						status: '免费试用中',
						statusClass: 'status-trial',
						isUrgent: true
					},
					{
						title: '产品经理',
						location: '深圳-南山',
						education: '本科',
						experience: '3-5年',
						salary: '15-25K·14薪',
						type: '全职',
						status: '免费试用中',
						statusClass: 'status-trial',
						isUrgent: true
					},
					{
						title: 'UI设计师',
						location: '深圳-福田',
						education: '本科',
						experience: '2-4年',
						salary: '12-18K·13薪',
						type: '全职',
						status: '免费试用中',
						statusClass: 'status-trial',
						isUrgent: false
					}
				]
			} else if (tabIndex === 2) { // 审核失败
				this.jobList = [
					{
						title: '亚马逊运营',
						location: '深圳-西乡',
						education: '本科',
						experience: '1-3年',
						salary: '10-15K·13薪',
						type: '全职',
						status: '审核未通过',
						statusClass: 'status-failed',
						isUrgent: false
					}
				]
			} else if (tabIndex === 3) { // 已关闭
				this.jobList = [
					{
						title: '运营专员',
						location: '深圳-盐田',
						education: '本科',
						experience: '1-2年',
						salary: '8-12K·13薪',
						type: '全职',
						status: '已关闭',
						statusClass: 'status-closed',
						isUrgent: false
					}
				]
			}
		},
		goToJobDetail(job) {
			// 跳转到职位详情页面
			uni.navigateTo({
				url: '/pages/jobManagement/jobDetail'
			})
		},
		publishNewJob() {
			// 跳转到发布新职位页面
			uni.navigateTo({
				url: '/package/addJob/addJob'
			})
		},
		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>
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>