jp-zeroWorkerStation/pages/main/index/index.vue

<template>
	<view>
		<u-navbar back-text="荆州经开区共享用工平台" :customBack="customBack" :background="background"
			:back-text-style="backColor"></u-navbar>



		<!-- 头部 -->
		<view class="top">
			<!-- 搜索框 -->
			<view class="search">
				<u-search placeholder="请输入找工关键字" @focus="gotoUrl('pages/packages/search/search?type=1')"
					:show-action="false"></u-search>
			</view>

		</view>
		<!-- 幻灯片 -->
		<view class="swiper">
			<u-swiper :list="bannerlist" @click="clickBanner"  ></u-swiper>

		</view>
		<!-- 功能区 -->
		<view class="function">
			<view class="function-item" @click="gotoUrl('pages/tab/choreInformation/choreInformation')">
				<view class="icon-box icon-box3">

					<view class="icon">
						<img src="@/assets/img/riFill-contacts-book-2-fill@1x.png" alt="">
					</view>

				</view>
				<view class="item-text">
					零工驿站
				</view>
			</view>
			<view class="function-item" @click="gotoUrl('pages/packages/news/news?t=3&title=爱心驿站')">
				<view class="icon-box icon-box2">

					<view class="icon">
						<img src="@/assets/img/riFill-heart-2-fill@1x.png" alt="">
					</view>

				</view>
				<view class="item-text">
					爱心驿站
				</view>
			</view>
			<view class="function-item" @click="gotoUrl('pages/packages/shareEmployment/shareEmployment')">
				<view class="icon-box">
					<view class="icon">
						<img src="@/assets/img/riFill-cloud-fill@1x.png" alt="">
					</view>
				</view>

				<view class="item-text">
					共享用工
				</view>
			</view>

			<view class="function-item" @click="gotoUrl('pages/packages/skillTraining/skillTraining')">
				<view class="icon-box icon-box4">

					<view class="icon">
						<img src="@/assets/img/riFill-tools-fill@1x.png" alt="">
					</view>

				</view>
				<view class="item-text">
					技能培训
				</view>
			</view>
			<view class="function-item" @click="gotoUrl('pages/packages/news/news?t=1&title=政策发布')">
				<view class="icon-box icon-box5">

					<view class="icon">
						<img src="@/assets/img/riFill-newspaper-fill@1x.png" alt="">
					</view>

				</view>
				<view class="item-text">
					政策发布
				</view>
			</view>


		</view>

		<!-- 标签 -->
		<view class="tabs">
			<view class="title">
				<u-tabs bg-color="#F0F0F2" :list="tabList" :is-scroll="false" :current="current"
					@change="change"></u-tabs>
				<view class="more" @click="gotoUrl('pages/tab/jobInformation/jobInformation')">
					更多
					<u-icon name="arrow-right"></u-icon>
				</view>

			</view>
			<!-- 卡片 -->
			<view class="classify-card">
				<view class="item" v-for="(item,i) in showList" :key="i"
				 
				 @click="gotoUrl('pages/packages/jobInformation/jobDetails?id='+item.id)">
					<view class="content-1">
						<!-- 职位 -->
						<view class="position">
						<span class="tophot" v-if="item.isTopping" >置顶</span>	{{item.positionName}}
						</view>
						<!-- 薪水 -->
						<view class="salary">
							{{item.salary}}{{getUnit(item)}}
						</view>
					</view>
					<view class="content-2">
						<!-- 标签 -->
						<view class="tag">
							<view class="tag-item">
								{{item.workArea}}
							</view>
							<view class="tag-item">
								{{item.settlementMethodN}}
							</view>
							<view class="tag-item">
								{{item.industryN}}
							</view>
							
						</view>
						<!-- 日期 -->
						<view class="date">
							{{getTime(item)}}
						</view>
					</view>
					<view class="content-3">
						<view class="issuer">
							{{item.contacts}}
						</view>
						<view class="address">
							{{item.address}}
						</view>
					</view>
				</view>

			</view>
			
		<u-divider style="margin-top: 10px;"
		 :isnone="showList.length==0" nonetext="没有找到相关内容" 
		 @click="gotoUrl('pages/tab/jobInformation/jobInformation')"
		border-color="#CFD2D5">查看更多</u-divider>
		</view>
		
		<tabbar :current="0"></tabbar>

	</view>



</template>

<script>
	import * as API from '@/apis/pagejs/main.js'
	import tabbar from "@/components/Tabbar.vue"
	import * as API_weixin from '@/apis/weixin.js'

	export default {
		components: {
			tabbar
		},
		onShareTimeline(){
			return {
				title: "荆州经开区共享用工平台",
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				//.log(res.target)
			}
			return {
				title: "荆州经开区共享用工平台",
				path: '/pages/main/index/index' 
			}
		},
		data() {
			return {
				keyword: '',
				// 导航栏背景
				background: {
					backgroundColor: '#2795FD',
				},
				backColor: {
					color: '#ffffff'
				},
				bannerlist: [
				],
				tabList: [{
					name: '最新',
					value:"",
					list:[],
					recordsTotal:0
				}, {
					name: '日结',
					unit:"日",
					value:"1",
					list:[],
					recordsTotal:0
				}, {
					name: '周结',
					unit:"周",
					value:"2",
					list:[],
					recordsTotal:0

				}, {
					name: '月结',
					unit:"月",
					value:"3",
					list:[],
					recordsTotal:0
				}],
				
				current: 0,
				homeList:[],
				
			}
		},
		onShow(){
			this.findRecruitHomePage();
		},
		onLoad(op) {
			
			
			this.getBannerList()
			this.findByOpenId(op);
		},
		computed:{
			showRecordsTotal(){
				return this.tabList[this.current].recordsTotal
			},
			showList(){
				return this.tabList[this.current].list
			}
		},
		onReachBottom() {
			uni.navigateTo({
				url:"/pages/tab/jobInformation/jobInformation"
			})
		},
		methods: {
			clickBanner(index,list) {
					
				var mod = list[index]
			
				if(mod){
					if(mod.linkUrl){
						
						uni.navigateTo({
							url:mod.linkUrl
						})
					}
				}
			},
			getBannerList(){
				API.bannerList({
								
				}).then((res) => {
					this.bannerlist	=res.data.data.map(item=>{
						return {
							image:item.picUrl,
							linkUrl:item.linkUrl
						}
					})	 
					
									 
				}).catch(error => {
									
				})
			},
			findByOpenId(op){
				
				 API_weixin.findByOpenId({
					 openId:this.carhelp.getOpenId(),
					 noerror:true
				 }).then((res) => {
					 
					 this.carhelp.setPersonInfo(res.data.regUser );
					 this.carhelp.setToken(res.data.token);
					 this.carhelp.setPersonInfoPlus(res.data);
					 
					 
				 }).catch(error => {
					this.carhelp.logoff();
				 })
				
			},
			findRecruitHomePage(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.findRecruitSearch({
					pageIndex:1,
					pageSize:5,
					status:0,
					statusType:this.tabList[this.current].value,
				}).then((res) => {
					uni.hideLoading();
					this.tabList[this.current].list=res.data.data
					this.tabList[this.current].recordsTotal=res.data.recordsTotal
					
				}).catch(error => {
				
					uni.showToast({icon: 'none',
						title: error
					})
					//this.getPhone()
					
				})
			},
			customBack() {},
			change(index) {
				this.current = index;
				this.findRecruitHomePage()
			}
		}
	}
</script>
<style>
	page {
		background: #F0F0F2;
		padding-bottom: 50px;
	}
</style>
<style scoped lang="scss">
	/deep/.u-navbar {
		.u-icon--right {
			display: none !important;
		}
	}
	.tophot{
		padding:2rpx 6rpx;
		border: 1px solid  #2795FD ;
		border-radius: 8rpx;
		color:#2795FD ;
		line-height: 24rpx;
		font-size: 24rpx;
		margin-right: 12rpx;

	}
	// 头部
	.top {

		// 搜索框
		.search {
			background-color: rgba(39, 149, 253, 1);
			padding: 16rpx 32rpx;

		}

	}

	// 功能区
	.function {
		background-color: #fff;
		padding: 32rpx 46rpx;
		display: flex;
		justify-content: space-between;

		.function-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.icon-box {
				width: 96rpx;
				height: 96rpx;
				background-color: rgba(240, 233, 255, 1);
				text-align: center;
				border-radius: 999px;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.icon-box2 {
				background-color: rgba(255, 234, 230, 1);
			}

			.icon-box3 {
				background-color: rgba(227, 246, 255, 1);
			}

			.icon-box4 {
				background-color: rgba(255, 242, 224, 1);
			}

			.icon-box5 {
				background-color: rgba(221, 247, 238, 1);
			}


			.icon {
				width: 48rpx;
				height: 48rpx;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.item-text {
				color: rgba(51, 51, 51, 1);
				margin-top: 8rpx;
				font-family: 'PingFang Medium';
			}
		}
	}

	// 标签
	.tabs {
		margin-top: 32rpx;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0rpx 24rpx;

			/deep/.u-tabs {
				width: 400rpx;
			}

			.more {
				color: rgba(119, 119, 119, 1);
			}
		}

		.classify-card {
			background-color: #fff;

			.item {
				padding: 24rpx 0;
				margin: 0 32rpx;
				border-bottom: 1px solid #F0F0F2;

				.content-1 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					// 职位
					.position {
						color: rgba(16, 16, 16, 1);
						font-size: 36rpx;
						font-family: 'PingFang Medium';
						
						    display: flex;
						    align-items: center;
					}

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

				.content-2 {
					margin-top: 12rpx;
					display: flex;
					justify-content: space-between;

					// 标签
					.tag {
						display: flex;

						.tag-item {
							min-width: 64rpx;
							height: 36rpx;
							line-height: 36rpx;
							border-radius: 8rpx;
							background-color: rgba(241, 241, 247, 1);
							color: rgba(129, 127, 153, 1);
							font-size: 24rpx;
							text-align: center;
							margin-right: 12rpx;
							padding: 0 8rpx;
						}
					}

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

				.content-3 {
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

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

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

			}
		}
	}
</style>