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"
			  @scrolltolower="loadMore"
			  lower-threshold="50"
			>
				 <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.ruleClassifyName}}</text>
								<view class="urgent-tag" v-if="job.isDue">
									<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 {
  data() {
    return {
      tabIndex: 0,
      tabs: [
        { name: '全部', status: 0 },
        { name: '待审核', status: 1 },
        { name: '招聘中', status: 2 },
        { name: '已拒绝', status: 3 },
        { name: '已取消', status: 4 },
        { name: '已关闭', status: 5 },
        { name: '已拒绝', status: 6 }
      ],
      jobList: [],
      page: 1,        // 当前页码
      limit: 10,      // 每页条数
      count: 0,       // 总条数
      companyId: '',
      isLoading: false, // 防止重复请求标记
    }
  },
  onLoad() {
    this.companyId = uni.getStorageSync('companyId');
    this.getJobList();
    this.setBodyHeight();
  },
  methods: {
    // 获取职位列表（新增分页逻辑）
    getJobList() {
      if (this.isLoading) return; // 正在加载时，阻止重复请求
      this.isLoading = true;
      
      let data = {
        status: this.tabIndex == 0 ? '' : this.tabIndex,
        page: this.page,
        limit: this.limit,
        companyId: this.companyId
      }
      this.$Request.getT('/app/postPush/getMyPostPush', 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; // 更新总条数
        }
        this.isLoading = false;
        uni.stopPullDownRefresh();
      }).catch(err => {
        this.isLoading = false;
        uni.hideLoading();
        uni.stopPullDownRefresh();
      })
    },
    // 触底加载下一页
    loadMore() {
      if (this.jobList.length >= this.count) {
        uni.showToast({ title: '已加载全部数据', icon: 'none' });
        return;
      }
      this.page++; // 页码+1
      this.getJobList(); // 请求下一页
    },
    // 切换标签页（重置分页）
    tabChange(e) {
      const index = typeof e === 'number' ? e : e.index
      this.tabIndex = index
      this.page = 1; // 切换标签时重置为第1页
      this.jobList = [];
      this.getJobList();
    },
    // 下拉刷新（可选，若需要下拉刷新可添加）
    onPullDownRefresh() {
      this.page = 1;
      this.getJobList();
    },
    // 原有方法保持不变...
    goBack() { uni.navigateBack(); },
    goNav(url) { uni.navigateTo({ url }); },
    publishNewJob() { uni.navigateTo({ url: '/package/addJob/addJob' }); },
    getJobStatusClass(job) { /* 原有逻辑不变 */ },
    setBodyHeight() { /* 原有逻辑不变 */ },
  }
}
</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>