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

<template>
	<view class="page">
		
		<view class="banner">
			<uv-swiper
			:list="bannerList" 
			indicator
			height="620rpx"
			keyName="url"></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">
					<uv-grid-item 
					v-for="(item,index) in baseList"
					@click="$utils.navigateTo('/pages_order/work/workList')"
					:key="index">
						<image class="grid-icon" :src="item.icon" mode="aspectFill"></image>
						<text class="grid-text">{{item.title}}</text>
					</uv-grid-item>
				</uv-grid>
			</view>
		</view>
		
		<!-- 筛选器 -->
		<screenWork @clickItem="clickItem"/>
		
		
		<!-- 老板看到的 -->
		<userList ref="workList" v-if="role"/>
		
		<!-- 工人看到的 -->
		<workList ref="workList" v-else/>
		
		<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,
		mapGetters
	} from 'vuex'
	export default {
		components : {
			PrivacyAgreementPoup,
			workList,
			tabber,
			screenWork,
			userList
		},
		computed: {
			...mapState(['userInfo', 'role']),
		},
		data() {
			return {
				baseList : [
					{
						icon : '/static/image/home/1.png',
						title : '电工',
						path : '/pages_order/service/applyRelic',
					},
					{
						icon : '/static/image/home/1.png',
						title : '焊工',
						path : '/pages_order/service/applyRelic',
					},
					{
						icon : '/static/image/home/1.png',
						title : '叉车',
						path : '/pages_order/service/applyRelic',
					},
					{
						icon : '/static/image/home/1.png',
						title : '钳工',
						path : '/pages_order/service/applyRelic',
					},
					{
						icon : '/static/image/home/1.png',
						title : '其他招工',
						path : '/pages_order/service/applyRelic',
					},
				],
				bannerList: [
					{
						url: '/static/image/home/banner.png',
					}, 
				],
				productList: [],
				keyword : '',
			}
		},
		// onPullDownRefresh(){
		// 	this.$refs.videoList.queryVideoList()
		// 	this.queryBannerList()
		// },
		// onShow() {
		// 	this.$refs.videoList.queryVideoList()
		// 	this.queryBannerList()
		// },
		// //滚动到屏幕底部
		// onReachBottom() {
		// 	this.$refs.videoList.loadMoreData()
		// },
		methods: {
			clickItem(){
				
			},
		}
	}
</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;
					}
				}
			}
		}
		.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>