recruitment-wechat-uniapp-241012/pages/index/index.vue

<template>
	<view class="page">
		
		<view class="banner">
			<uv-swiper
			:list="bannerList" 
			indicator
			height="620rpx"
			keyName="image"></uv-swiper>
			<!-- indicatorStyle="bottom: 100rpx;" -->
			
			<view class="top">
				<view class="search">
					<uv-search 
					:placeholder="role ? '请输入简历名称' : '请输入岗位名称'" 
					:showAction="false"
					search-icon-size="40rpx"
					@search="search"
					v-model="keyword"></uv-search>
				</view>
			</view>
		</view>
		
		<!-- 工人看到的 -->
		<view class="content"
		v-if="!role">
			<view class="grid">
				<uv-grid :border="false"
				:col="5">
					<uv-grid-item 
					@click="$utils.navigateTo(`/pages_order/work/workList?typeId=${item.id}&title=${item.name}`)"
					v-for="(item,index) in jobTypeList"
					v-if="index < 4"
					:key="index">
						<image class="grid-icon" :src="item.image" mode="aspectFill"></image>
						<text class="grid-text">{{item.name}}</text>
					</uv-grid-item>
						<uv-grid-item 
						v-if="jobTypeList.length > 4"
						@click="$utils.navigateTo(`/pages_order/work/workTypeList`)"
						>
							<image class="grid-icon" src="/static/image/home/5.png" mode="aspectFill"></image>
							<text class="grid-text">其他招工</text>
						</uv-grid-item>
				</uv-grid>
			</view>
		</view>
		
		<!-- 筛选器 -->
		<screenWork ref="screenWork" @clickItem="clickItem"/>
		
		<!-- 老板看到的 -->
		<userList ref="workList" v-if="role"/>
		
		<!-- 工人看到的 -->
		<workList ref="workList" v-else/>
		
		<view class="box"
		@click="toAdd"
		v-if="role">
			<view class="left">
				发布
			</view>
			<view class="center">
				<image src="/static/image/home/c.png" mode=""></image>
			</view>
			<view class="right">
				招工
			</view>
		</view>
		
		<view class="switchIdentity"
		@click="switchIdentity">
			<image src="/static/image/home/x1.png" 
			v-if="role"
			mode="widthFix"></image>
			
			<image src="/static/image/home/x2.png" 
			v-else
			mode="widthFix"></image>
		</view>
		
	
		<checkinScore ref="checkinScore" v-if="UserExtensionInfo.signFlag == false"/>
		
		<PrivacyAgreementPoup/>
		
		<tabber select="0"/>
	</view>
</template>

<script>
	import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue'
	import workList from '@/components/list/workList/index.vue'
	import userList from '@/components/list/userList/index.vue'
	import tabber from '@/components/base/tabbar.vue'
	import screenWork from '@/components/screen/screenWork.vue'
	import checkinScore from '@/components/checkinScore.vue'
	import { mapState } from 'vuex'
	export default {
		components : {
			PrivacyAgreementPoup,
			workList,
			tabber,
			screenWork,
			userList,
			checkinScore,
		},
		computed: {
			...mapState([
				'userInfo', 
				'role', 
				'banner',
				'jobTypeList',
				'UserExtensionInfo',
			]),
			bannerList(){
				return this.banner.filter(n => n.type == 0)
			},
		},
		data() {
			return {
				productList: [],
				keyword : '',
				screenWorkList : [],
			}
		},
		onPullDownRefresh(){
			this.$refs.workList.getData(this.screenWorkList)
			this.$store.commit('getBanner')
		},
		// 页面显示的时候触发
		onShow() {
			this.$refs.workList.getData(this.screenWorkList)
			this.$store.commit('getBanner')
			if(uni.getStorageSync('token')){
				this.$store.commit('getUserExtensionInfo')
				this.$store.commit('getBanner')
			}
		},
		//滚动到屏幕底部
		onReachBottom() {
			this.$refs.workList.loadMoreData()
		},
		methods: {
			clickItem(result){
				this.screenWorkList = result
				this.$refs.workList.getData(this.screenWorkList)
			},
			toAdd(){
				if(this.role){
					// 在完成企业认证的情况下执行
					this.$store.commit('isAuthCertificationEnterprise', state => {
						this.$utils.navigateTo('/pages_order/work/jobPosting')
					})
				}else{
					this.$utils.navigateTo('/pages_order/work/addResume')
				}
			},
			search(){
				this.$utils.navigateTo(`/pages_order/work/workList?keyword=${this.keyword}`)
				this.keyword = ''
			},
			// 切换身份
			async switchIdentity(){
				
				// 在完成实名认证的情况下执行
				this.$store.commit('isAuthCertification', () => {
					// 在完成企业认证的情况下执行
					this.$store.commit('isAuthCertificationEnterprise', state => {
						uni.showModal({
							title: `确认切换到${
								this.role ? '师傅' : '雇主'
							}身份吗？`,
							success : e => {
								if(!e.confirm){
									return
								}
								this.$store.commit('setRole', !this.role)
								this.$nextTick(() => {
									this.$refs.workList.getData(this.screenWorkList)
								})
							}
						})
					})
				})
				
			},
		}
	}
</script>

<style scoped lang="scss">
	.page{
		.banner{
			position: relative;
			background-color: $uni-color;
			.top{
				position: absolute;
				top: 190rpx;
				left:00rpx;
				padding-top: 30rpx;
				display: flex;
				width: 100%;
				flex-direction: column;
				align-items: center;
				.search{
					width: 700rpx;
					/deep/ .uv-search__content__icon{
						padding: 10rpx 0;
					}
				}
				.title{
					image{
						width: 600rpx;
						height: 300rpx;
					}
				}
			}
		}
		.box{
			position: fixed;
			left: 50%;
			background: $uni-color;
			bottom: calc(env(safe-area-inset-bottom) + 150rpx);
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			transform: translate(-50%);
			border-radius: 20rpx;
			height: 80rpx;
			font-size: 28rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
			.left{
				padding-left: 30rpx;
			}
			.center{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background: $uni-color;
				margin: 0 20rpx;
				margin-top: -30rpx;
				box-shadow: 0 0 4rpx 4rpx #ffffff;
			}
			.right{
				padding-right: 30rpx;
			}
		}
		.content{
			position: relative;
			margin-top: -60rpx;
			.grid{
				padding-bottom: 30rpx;
				background-color: #fff;
				// border-radius: 60rpx;
				border-top-left-radius: 60rpx;
				border-top-right-radius: 60rpx;
				// box-shadow: 0 -10rpx 10rpx 10rpx #00000013;
				.grid-icon{
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 10rpx;
					margin-top: 30rpx;
				}
				.grid-text{
					font-size: 24rpx;
					font-weight: 900;
				}
			}
			
		}
		.switchIdentity{
			position: fixed;
			right: 30rpx;
			bottom: 300rpx;
			image{
				width: 130rpx;
			}
		}
	}
</style>