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

<template>
	<view class="page">
		
		<view class="banner">
			<uv-swiper
			:list="banner" 
			indicator
			height="620rpx"
			keyName="image"></uv-swiper>
			<!-- indicatorStyle="bottom: 100rpx;" -->
			
			<view class="top">
				<view class="search">
					<uv-search 
					placeholder="请输入岗位/公司名称" 
					: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">
				<!-- @click="$utils.navigateTo('/pages_order/work/workList?id=' + item.id)" -->
					<uv-grid-item 
					v-for="(item,index) in jobTypeList"
					:key="index">
						<image class="grid-icon" :src="item.image" mode="aspectFill"></image>
						<text class="grid-text">{{item.name}}</text>
					</uv-grid-item>
				</uv-grid>
			</view>
		</view>
		
		<!-- 筛选器 -->
		<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>
		
		<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 {
		mapState,
	} from 'vuex'
	export default {
		components : {
			PrivacyAgreementPoup,
			workList,
			tabber,
			screenWork,
			userList
		},
		computed: {
			...mapState([
				'userInfo', 
				'role', 
				'banner',
				'jobTypeList'
			]),
		},
		data() {
			return {
				productList: [],
				keyword : '',
			}
		},
		// onPullDownRefresh(){
		// 	this.$refs.videoList.queryVideoList()
		// 	this.queryBannerList()
		// },
		
		// 页面显示的时候触发
		onShow() {
			this.$refs.workList.getData()
			this.$store.commit('getBanner')
		},
		//滚动到屏幕底部
		onReachBottom() {
			this.$refs.workList.loadMoreData()
		},
		methods: {
			clickItem(result){
				console.log(result);
				this.$refs.workList.getData(result)
			},
			toAdd(){
				if(this.role){
					this.$utils.navigateTo('/pages_order/work/jobPosting')
				}else{
					this.$utils.navigateTo('/pages_order/work/addResume')
				}
			},
		}
	}
</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;
				}
			}
			
		}
	}
</style>