yizhizan-h5/pages/jobManagement/jobManagement.vue

<template>
	<view class="job-management-page">
		<view class="fixed-header">
			<nav-bar title="职位管理" :backUrl="backUrl" goMy="/pages/my/index">
				<view slot="left" v-if="canClose" @click="handleToIndex">
					<u-icon name="close" color="#333"></u-icon>
				</view>
			</nav-bar>
			<!-- 标签页导航 - 使用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: 100%;" 
			  v-if="jobList.length > 0"
			  @scrolltolower="loadMore"
			  lower-threshold="50"
			>
				<view class="list">
					<view 
						class="job-card"
						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">急聘</view>
								</view>
								<view class="job-status" :class="job.status | statusClassName">
									{{job.status | statusText}}
								</view>
							</view>
							<view class="base-info">
								<text class="info-item color-clip">{{ job.city }}</text>
								<text class="info-item color-clip">{{ job.education }}</text>
								<text class="info-item color-clip">{{ job.experience }}</text>
								<text class="info-item color-clip">{{ job.salaryRange }}·{{ job.salaryTimes }}</text>
							</view>
							<view class="tags">
								<view class="tag" v-for="(tag, i) in job.positionTags" :key="i">{{ tag }}</view>
							</view>
							<view class="company-info flex align-center">
								<image :src="job.company.companyLogo ? job.company.companyLogo : '/static/logo.png'" class="logo"></image>
								<text class="company-name">{{ job.company.companyName }}</text>
							</view>
							<view class="buttons flex align-center">
								<view class="button primary" v-if="job.status == 5" @click.stop="handleOpenPosition('open', job)">开启岗位</view>
								<view class="button plain" v-if="job.status != 1" @click.stop="handleEditPosition(job)">{{ job.status == 2 ? '下架并编辑' : '编辑修改' }}</view>
								<view class="button info" v-if="job.status == 2" @click.stop="handleOpenPosition('close', job)">关闭职位</view>
								<view class="button info" v-else @click.stop="handleDeletePosition(job)">删除</view>
							</view>
						</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="button-section">
			<view class="submit-btn" @click="publishNewJob">发布新职位</view>
		</view>
	</view>
</template>

<script>
import navBar from "@/components/nav-bar/index.vue";
import empty from '@/components/empty.vue'

export default {
	components: {
		navBar,
	},
  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, // 防止重复请求标记
	  backUrl:'',
	  status:'',
	  canClose: false, // 判断页面是否是关闭，如果是从“完善招聘名片”页面进入，则是可以关闭，反之则不可以
	  loading: false,
    }
  },
  filters: {
      statusText(value) {
        switch (value) {
          case 1: return '待审核'
          case 2: return '招聘中'
          case 3: return '已拒绝'
		  case 4: return '已取消'
		  case 5: return '已关闭'
		  case 6: return '暂存'
          default: return '暂无数据'
        }
      },
		statusClassName(value) {
			switch (value) {
				case 1: return ''
				case 2: return 'primary'
				case 3: return 'info'
				case 4: return 'error'
				case 5: return 'error'
				default: return ''
			}
		}
    },
  onLoad(options) {
	  if (options.type && options.type == 'canClose') {
		  this.canClose = true
	  }
	if(options.status){
		this.status=options.status
	}
	  this.backUrl = options.backUrl;
	  if(options.companyId){
		this.companyId=options.companyId;
	  }
    // this.companyId = uni.getStorageSync('companyId');
    this.getJobList();
    this.setBodyHeight();
  },
  onShow() {
  	this.getJobList();
  },
  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 = '已关闭'
            }
			ret.positionTags = ret.positionTag.split(',')
            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.switchTab({
			url: '/pages/my/index'
		});
		
	 },
    goNav(url) { uni.navigateTo({ url }); },
   // publishNewJob() { uni.navigateTo({ url: '/package/addJob/addJob' }); },
	 publishNewJob() { uni.navigateTo({ url: `/pages/my/jobPosting?status=${this.status}&companyId=${this.companyId}` }); },
	
    setBodyHeight() { /* 原有逻辑不变 */ },
	
	// 跳转至首页
	handleToIndex() {
		uni.reLaunch({
			url: '/pages/index/index'
		})
	},
	
	// 开启职位
	handleOpenPosition(type, item) {
		uni.showModal({
			title: '提示',
			content: type == 'close' ? '关闭岗位后，该岗位不会再推荐给用户，是否关闭？' : '开启岗位后，该岗位会重新推荐给用户，是否开启？',
			complete: (ret) => {
				if (ret.confirm) {
					this.closePosition(item)
				}
			}
		})
	},
	
	// 开启关闭岗位
	closePosition(item, callback) {
		if (this.loading) return
		this.loading = true
		
		uni.showLoading({
			title: '处理中'
		})
		
		this.$Request.getT('/app/postPush/closeOrOpen', {
			postPushId: item.postPushId
		}).then(res => {
			if (res.code == 0) {
				uni.showToast({
					title: '操作成功',
					duration: 1500,
					complete: () => {
						this.page = 1
						this.getJobList()
						if (typeof callback == 'function') {
							callback()
						}
					}
				})
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
		}).finally(() => {
			uni.hideLoading()
			this.loading = false
		})
	},
	
	// 编辑职位
	handleEditPosition(item) {
		// 如果是招聘中，则是下架并编辑，需要先下架再编辑
		if (item.status == 2) {
			uni.showModal({
				content: '确认下架并编辑该岗位？',
				title: '提示',
				confirmColor: '#016BF6',
				success: (it) => {
					if (it.confirm) {
						this.closePosition(item, () => {
							uni.navigateTo({
								url: `/pages/my/jobPosting?postPushId=${item.postPushId}&type=update`
							})	
						})
					}
				}
			})
		} else {
			uni.navigateTo({
				url: `/pages/my/jobPosting?postPushId=${item.postPushId}&type=update`
			})			
		}
	},
	
	// 删除职位
	handleDeletePosition(item) {
		uni.showModal({
			content: '确认删除该岗位吗？',
			title: '提示',
			confirmColor: '#016BF6',
			success: (iet) => {
				if (iet.confirm) {
					this.deletePosition(item)
				}
			}
		})
	},
	
	// 删除职位
	deletePosition(item) {
		if (this.loading) return
		this.loading = true
		
		uni.showLoading({
			title: '处理中'
		})
		this.$Request.post('/app/postPush/deletePostPush', {
			postPushId: item.postPushId,
		}).then(res => {
			if (res.code == 0) {
				uni.showToast({
					title: '删除成功',
					duration: 1500
				})
				this.page = 1
				this.getJobList()
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
		}).finally(() => {
			uni.hideLoading()
			this.loading = false
		})
	}
  }
}
</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;
	display: flex;
	flex-direction: column;
	height: 100vh;
	font-family: DM Sans;
	box-sizing: border-box;
}

.fixed-header {
	background-color: #ffffff;
}

.job-list {
	padding: 20rpx 40rpx 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: auto;
	
	.list {
		padding-bottom: 30rpx;
	}
	
	.job-card {
		background: #ffffff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		padding: 16rpx 36rpx;
        border: 0.5px solid rgba(227, 231, 236, 1);
		
		.job-card-content {
			.job-header {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin-bottom: 8rpx;
				
				.job-title-section {
					display: flex;
					align-items: center;
					flex: 1;
					
					.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;
						padding: 8rpx;
						margin-left: 20rpx;
						background: radial-gradient(87.28% 72.40% at 49% 66%,rgba(255, 160, 162, 0.2),rgba(255, 246, 247, 1));
						font-size: 20rpx;
						line-height: 1;
						color: rgba(237, 66, 69, 1);
					}
				}
				
				.job-status {
					color: rgba(1, 107, 246, 1);
					padding: 8rpx;
					font-size: 20rpx;
					line-height: 1;
					border-radius: 4px;
					
					&.primary {
						color: rgba(1, 107, 246, 1);
						background: rgba(1, 107, 246, 0.1);
					}
					
					&.info {
						color: rgba(153, 153, 153, 1);
					}
					
					&.error {
						color: rgba(144.88, 87.8, 191.25, 1);
					}
				}
			}
			
			.base-info {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 8rpx;
				.info-item {
					margin-right: 12rpx;
				}
				.color-clip {
					background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					background-clip: text;
					text-fill-color: transparent;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 36rpx;
				}
			}
			
			.tags {
				display: flex;
				flex-wrap: wrap;
				.tag {
					padding: 8rpx;
					border-radius: 8rpx;
					background: rgba(153, 153, 153, 0.1);
					margin-right: 4px;
					margin-bottom: 4px;
					color: rgba(102, 102, 102, 1);
					font-size: 20rpx;
					font-weight: 400;
					line-height: 1;
				}
			}
			
			.company-info {
				.logo {
					display: block;
					width: 28rpx;
					height: 28rpx;
					border: 1px solid rgba(240, 240, 240, 1);
					border-radius: 28rpx;
					margin-right: 8rpx;
				}
				.company-name {
					flex: 1;
					width: 0;
					color: rgba(156, 164, 171, 1);
					font-size: 20rpx;
					font-weight: 400;
					line-height: 40rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
			
			.buttons {
				margin-top: 12rpx;
				.button {
					height: 60rpx;
					padding: 16rpx 32rpx;
					box-sizing: border-box;
					border-radius: 60rpx;
					border: 1px solid #fff;
					font-size: 24rpx;
					font-weight: 500;
					line-height: 24rpx;
					margin-right: 16rpx;
					
					&.primary {
						color: #fff;
						background: rgba(1, 107, 246, 1);
						border-color: rgba(1, 107, 246, 1);
					}
					
					&.plain {
						color: rgba(1, 107, 246, 1);
						background-color:  rgba(1, 107, 246, 0.1);
						border-color:  rgba(1, 107, 246, 0.1);
					}
					
					&.info {
						color: #999;
						border-color: #E8E8E8;
					}
				}
			}
		}
	}
}

.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;
	}
}

.button-section {
	padding: 28rpx 40rpx;
	box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.04);
}
.submit-btn {
	flex-shrink: 0;
	border-radius: 999px;
	box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.04);
	background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
	color: rgba(255, 255, 255, 1);
	font-family: DM Sans;
	font-size: 32rpx;
	font-weight: 400;
	line-height: 48rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 16rpx 32rpx;
	box-sizing: border-box;
}
</style>