jobslink-user-clent/pages/recruit/subPage/recruit.vue

<template>
    <view >
        <CustomNavbar @back="back" :titke="'发布招工'"></CustomNavbar>
        <view class="container">
        	<view class="wrapper" style="position: relative;">
        		<view class="top-title">在线提交招工需求</view>
        		<view class="tips">
        			<span>专属就业帮扶人</span>
        			<span>为您提供一对一撮合服务</span>
        		</view>
        		<!-- <img  src="../../static/img/index/bannerBg.png" alt="" /> -->
        		<view class="bottom">
        			<img src="../../../static/img/safe_icon.png" style="width: 40rpx;margin: 0 20rpx" alt="" />
        			<span>招工快.干活好.纠纷少.隐私保护</span>
        		</view>
        	</view>
        	
        	<view class="form-wrapper">
        		<!-- <view class="require">您的招工需求</view> -->
				<u-sticky offset-top="0" v-if="pageType === 'enterprise'">
					<view class="u-demo-block" style="background-color: #fff;padding: 20rpx 0;">
						<view class="u-demo-block__content">
							<view class="typeButtonWrapper" >
								<view class="typeButtonLeft">
							
									<view v-for="(item, index) in nonReactiveArray" :key="index"
										:class="['typeButton', index == activeTab ? 'activeButton' : '']" @click="changeTab(index)">{{ item
										}}</view>
								</view>
							</view>
							<!-- <view class="typeButtonWrapper" v-else>
								<view class="typeButtonLeft">
									<view v-for="(item, index) in nonReactiveArray" :key="index" v-show="index == 2"
										:class="['typeButton', index == activeTab ? 'activeButton' : '']" @click="changeTab(index)">{{ item
										}}</view>
								</view>
							</view> -->
						</view>
					</view>
				</u-sticky>
				
				<view v-if="activeTab == 0" class="u-demo-block" style="padding: 20rpx;padding-bottom: 140rpx;">
					<!-- <view>发布任务</view> -->
					<Task :company="companyInfo"></Task>
				</view>
				<view v-if="activeTab == 1" class="u-demo-block" style="padding: 20rpx;padding-bottom: 140rpx;">
					<!-- <view>发布岗位</view> -->
					<Work :company="companyInfo"></Work>
				</view>
				<view v-if="activeTab == 2" class="u-demo-block" style="padding: 20rpx;padding-bottom: 140rpx;">
					<Person :company="companyInfo"></Person>
				</view>
        	</view>
        	<!-- <view style="font-size: 36rpx;color: #000;font-weight: bold;padding: 0 20rpx;">招工指引</view>
        	<view class="zhiyin">
        		<view class="item">
        			<span>在线填写</span>
        			<span>招工需求</span>
        		</view>
        		<img src="../../../static/img/zhiyin_icon.png" alt="" />
        		<view class="item">
        			<span>专属人员</span>
        			<span>沟通发布</span>
        		</view>
        		<img src="../../../static/img/zhiyin_icon.png" alt="" />
        		<view class="item">
        			<span>平台/大屏展</span>
        			<span>示招工任务</span>
        		</view>
        	</view>
        	<view class="bottom">
        		<view class="btn">提交</view>
        	</view> -->
        </view>
		
        <CustomTabbar :currentpage="1"></CustomTabbar>
    </view>
</template>

<script>
    import CustomNavbar from '@/components/CustomNavbar/navbar.vue'
    import CustomTabbar from '@/components/CustomTabbar/custom_tabbar.vue'
	import Task from './task.vue' // 发布任务
	import Work from './work.vue' // 发布岗位
	import Person from './person.vue' // 个体户招工
	import { mapState } from 'vuex'
    import {getUserCompanyInfo} from '@/api/userrecruit.js'
	export default {
        components: {CustomTabbar, CustomNavbar, Task, Work, Person},
		data() {
			return {
				value2: '招工内容',
				pageType: null, // null： 个人 enterprise： 企业
				fileList1: [],
				nonReactiveArray: ["发布任务", "发布岗位"],
				activeTab: 0,
                companyInfo: null,
			}
		},
		onLoad({type}) {
		    if(this.enterprise){
		        this.pageType = 'enterprise'
		        // this.currentArrTitleID = 0
		    } else {
				this.activeTab = 2
			}
		    // this.getList('refresh')
            this.getInfo()
		},
		computed: {
		    ...mapState({
                enterprise: (state) => state.user.seeEnterprise, 
                idNumber: (state) => state.auth.authInfo.idNumber
            })
		},
		methods: {
			back() {
			    uni.reLaunch({
			        url: '/pages/my/my'
			    })
			},
			changeTab: function (e) {
				this.activeTab = e;
			},
            async getInfo() {
                let resData = await getUserCompanyInfo({idNumber: this.idNumber})
                if(resData.data.code === 200) {
                    if(!resData.data.data.length) return;
                    this.companyInfo = resData.data.data[0]
                }
            }
		}
	}
</script>

<style lang="scss" scoped>
.container {
	.wrapper {
		width: 100%;
		height: 300rpx;
		background: url(@/static/img/index/bannerBg.png) no-repeat center center;
		background-size: 100% 100%;
		.top-title {
			font-size: 34rpx;
			color: #372E33;
			font-weight: bold;
			position: absolute;
			left: 20rpx;
			top: 30rpx;
		}
		.tips {
			position: absolute;
			left: 20rpx;
			top: 90rpx;
			font-size: 26rpx;
			color: #999;
			display: flex;
			flex-direction: column;
			background-color: #E4F2FD;
			padding: 15rpx;
			border-radius: 10rpx;
		}
		.bottom{
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: left;
			color: #7C401E;
			font-size: 28rpx;
			left: 5%;
			bottom: 0;
			right: 5%;
			height: 80rpx;
			background: linear-gradient(to right, #FFEEDA, #FED38F);;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
		}
	}
	.top-banner {
		
	}
	.form-wrapper {
		padding: 20rpx;
		margin-bottom: 40rpx;
		.require {
			font-size: 36rpx;
			font-weight: 500;
			margin-bottom: 20rpx;
		}
	}
	.zhiyin {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 40rpx;
		padding: 0 20rpx;
		.item {
			display: flex;
			align-items: center;
			flex-direction: column;
			width: 260rpx;
			height: 80rpx;
			border-radius: 20rpx;
			justify-content: space-between;
			padding: 30rpx 0;
			margin: 0 20rpx;
			box-sizing: content-box;
			background-color: #F1F3FF;
			span {
				color: #63676A;
				font-size: 24rpx;
			}
		}
		img {
			width: 50rpx;
		}
	}
	.bottom {
		// position: fixed;
		// bottom: 0;
		// left: 0;
		// right: 0;
		height: 150rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
		.btn {
			width: 90%;
			height: 100rpx;
			text-align: center;
			color: #fff;
			border-radius: 20rpx;
			background-color: #4171F9;
			line-height: 100rpx;
		}
	}
}
.typeButtonWrapper {
	width: 92%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	/* margin-bottom: 10rpx; */
}

.typeButtonLeft {
	display: flex;
    
}

.typeButton {
	font-size: 14px;
	padding: 10rpx 40rpx;
	background: #f6f6f6;
	border-radius: 50px;
	margin-right: 10rpx;
    white-space: nowrap;
}

.activeButton {
	color: #4171f9;
	background-color: #cfdaf8;
}
</style>