jp-zeroWorkerStation/pages/packages/mine/employmentService/laborManagement/laborManagement.vue

<template>
	<view>
		<u-navbar back-text="用工管理" back-icon-size="28" back-icon-color="#ffffff"
			:background="{backgroundColor: '#2795FD',}" :back-text-style="{color: '#ffffff'}"></u-navbar>
		<!-- 标签 -->
		<view class="tabs">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<!-- 发布中 -->
		<view class="my-registration" v-for="(item,i) in list[current].list"   :key="i">
			<view class="card">
				<view class="positon-salary">
					<view class="positon">
						<span class="positonSpan positonSpan1" v-if="item.isOnline">上架中</span> 
						<span class="positonSpan positonSpan2" v-else>已下架</span>
						{{item.positionName}}
					</view>
					<view class="salary">
						{{item.salary}}{{getUnit(item)}}
					</view>
				</view>
				<view class="tags-date">
					<view class="tags">
						招聘{{item.recruitingNumbers}}人
					</view>
					<view class="date">
						刷新时间：{{item.updateTime?item.updateTime:item.createTime}}
					</view>
				</view>
				<u-line color="#E6E6E6"></u-line>
				<view class="buttons">
					<span class="btn option1" v-show="item.status=='1'&&item.isOnline" @click="optionBtn(item,0)">
						下架
					</span>
					 <span class="btn option2" v-show="item.status=='1'&&!item.isOnline" @click="optionBtn(item,1)">
						上架
					</span>
					
					<span class="btn refresh" v-show="item.status=='1'" @click="refreshBtn(item)">
						刷新
					</span>
					<span class="btn amend"  @click="amendBtn(item)">
						修改
					</span>
					<span class="btn delete"  @click="deleteBtn(item)">
						删除
					</span>
				</view>
			</view>
		</view>
		<u-divider  v-if="list[current].recordsTotal==list[current].list.length"
				 :isnone="list[current].recordsTotal==0" nonetext="没有找到相关内容" 
				border-color="#CFD2D5">已经到底了</u-divider>
		

		<!-- 底部 -->
		<view class="bottom">
			<button class="issue" @click="addInfo">发布用工需求
			</button>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/packages.js'
	export default {
		data() {
			return {
				list: [{
					name: '发布中',
					pageIndex: 1,
					pageSize: 20,
					recordsTotal: 1,
					status: "1",
					list: []
				}, {
					name: '待审核',
					pageIndex: 1,
					pageSize: 20,
					recordsTotal: 1,
					status: "0",
					list: []
				}, {
					name: '未通过',
					pageIndex: 1,
					pageSize: 20,
					recordsTotal: 1,
					status: "2",
					list: []
				}],
				current: 0
			}
		},
		onReachBottom() {
			var obj = this.list[this.current]
			if (obj.list.length < obj.recordsTotal) {
				this.myLoadmore();
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			getList() {
			
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var list = this.list[this.current].list
				var obj = this.list[this.current]
				var listForm = {
					...obj
				}
				delete listForm.list
			
				API.myEmployment(listForm).then((res) => {
			
					if (listForm.pageIndex == 1) {
						list = res.data.data;
					} else {
						list = [
							...list,
							...res.data.data
						];
					}
			
					this.list[this.current].list = list
			
					this.list[this.current].recordsTotal = res.data.recordsTotal;
					uni.hideLoading();
				}).catch(error => {
					uni.showToast({icon: 'none',
						title: error,
						icon: "none"
					})
				})
			
			},
			myLoadmore() {
				this.list[this.current].pageIndex += 1;
				this.getList();
			},
			init() {
				//this.current = 0
				for(var i in this.list){
					this.list[i].pageIndex = 1
					this.list[i].list = []
				}
				this.getList()
			},
			amendBtn(item) {
				var url = "/pages/packages/mine/employmentService/laborManagement/postMessage?id=" +item.id;
				uni.navigateTo({
					url: url,
					events: {
						refreshData: () => {
							this.init()
						}
					}
				})
			},
			addInfo() {
				var url = "/pages/packages/mine/employmentService/laborManagement/postMessage";
				uni.navigateTo({
					url: url,
					events: {
						refreshData: () => {
							this.init()
						}
					}
				})
			},
			change(index) {
				this.current = index;
				var list = this.list[this.current].list
				if (list.length == 0) {
					this.getList();
				}
			},
			refreshBtn(item){
				
				API.myEmploymentRefresh({
					id:item.id
				}).then((res) => {
					item.updateTime=new Date().toLocaleString()
					uni.showToast({icon: 'none',
						title: "刷新成功",
						icon: "none"
					})
				}).catch(error => {
					uni.showToast({icon: 'none',
							title: error,
							icon: "none"
					})
				})
				
			},
			optionBtn(item,op){
				if(op==0){
					var _this=this;
					uni.showModal({
						title: '提示',
						content:"确认是否下架岗位",
						//content: '这是一个模态弹窗',
						success: function(res) {
							if (res.confirm) {
								_this.optionBtnMethod(item,op)
							} else if (res.cancel) {
								//.log('用户点击取消');
							}
						}
					});
				}else{
					this.optionBtnMethod(item,op)
				}
				
			},
			optionBtnMethod(item,op){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.updateRecruitOnline({
					id:item.id,
					isOnline:op
				}).then((res) => {
					item.isOnline=op
					uni.hideLoading()
				}).catch(error => {
					uni.showToast({icon: 'none',
							title: error,
							icon: "none"
					})
				})
				
			},
			
			deleteBtn(item){
				var _this=this;
				uni.showModal({
					title: '提示',
					content:"确认是否删除",
					//content: '这是一个模态弹窗',
					success: function(res) {
						if (res.confirm) {
							_this.deleteBtnMethod(item)
						} else if (res.cancel) {
							//.log('用户点击取消');
						}
					}
				});
			},
			deleteBtnMethod(item){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.myEmploymentDelete({
					id:item.id
				}).then((res) => {
					this.init()
				}).catch(error => {
					uni.showToast({icon: 'none',
							title: error,
							icon: "none"
					})
				})
				
			},
			
		}
	}
</script>
<style>
	page {
		background: #F0F0F2;
		padding-bottom: 150px;
	}
</style>
<style scoped lang="scss">
	.card {
		margin: 24rpx 32rpx;
		background-color: #fff;
		padding: 24rpx;
		border-radius: 12px;

		.positon-salary {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.positon {
				color: rgba(16, 16, 16, 1);
				font-size: 36rpx;

				font-family: 'PingFangSC-medium';
				.positonSpan{
					padding:0 6rpx;
					font-size: 24rpx;
					text-align: center;
					border-radius: 4px;
					color: rgba(255, 255, 255, 1);

				}
				.positonSpan1{
					background-color: rgba(34, 149, 255, 1);
				}
				.positonSpan2{
					background-color: rgba(178, 184, 190, 1);
				}
			}

			.salary {
			
				min-width: 260rpx;
				text-align: end;
				color: rgba(255, 61, 0, 1);
				font-size: 32rpx;
				font-family: 'PingFangSC-medium';
			}
		}

		.tags-date {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 16rpx;
			margin-bottom: 24rpx;

			.tags {

				color: rgba(102, 102, 102, 1);
			}

			.date {
				color: rgba(153, 153, 153, 1);
				font-size: 24rpx;
			}
		}

		// 按钮
		.buttons {
			//display: flex;
			//justify-content: flex-end;
			margin-top: 24rpx;
			height: 56rpx;
			.btn {
				width: 120rpx;
				height: 56rpx;
				line-height: 56rpx;
				border-radius: 50px;
				background-color: rgba(255, 255, 255, 1);
				color: rgba(119, 119, 119, 1);
				text-align: center;
				font-family: Microsoft Yahei;
				border: 1px solid rgba(207, 210, 213, 1);
				margin-left: 24rpx;
				 float: right;
			}
			.option1{
				margin-left: 0px;
				float: left;
				color:#EE3138 
			}
			.option2{
				margin-left: 0px;
				float: left;
				color:#2295FF
			}
			.delete {
				color: rgba(238, 49, 56, 1);
			}
		}
	}

	.bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;

		.issue {
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 50px;
			background-color: rgba(34, 149, 255, 1);
			color: rgba(241, 241, 241, 1);
			font-size: 36rpx;
			text-align: center;
			box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.03);
			margin: 24rpx 32rpx;
		}
	}
</style>