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')"
					:show-action="false"></u-search>
			</view>

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

		</view>
		<!-- 功能区 -->
		<view class="function">
			<view class="function-item" @click="gotoUrl('pages/packages/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/mine/employmentService/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">
							{{item.positionName}}
						</view>
						<!-- 薪水 -->
						<view class="salary">
							{{item.salary}}元/{{tabList[item.settlementMethod].unit}}
						</view>
					</view>
					<view class="content-2">
						<!-- 标签 -->
						<view class="tag">
							<!-- <view class="tag-item">
								个人
							</view> -->
							<view class="tag-item">
								{{item.settlementMethodN}}
							</view>
						</view>
						<!-- 日期 -->
						<view class="date">
							{{item.createTime}}
						</view>
					</view>
					<view class="content-3">
						<view class="issuer">
							{{item.contacts}}
						</view>
						<view class="address">
							{{item.workArea}}
						</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"

	export default {
		components: {

			tabbar
		},
		data() {
			return {
				keyword: '',
				// 导航栏背景
				background: {
					backgroundColor: '#2795FD',
				},
				backColor: {
					color: '#ffffff'
				},
				bannerlist: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					}
				],
				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:[],
				
			}
		},
		onLoad() {
			this.findRecruitHomePage();
		},
		computed:{
			showRecordsTotal(){
				return this.tabList[this.current].recordsTotal
			},
			showList(){
				return this.tabList[this.current].list
			}
		},
		methods: {
			findRecruitHomePage(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.findRecruitHomePage({
					pageIndex:1,
					pageSize:5,
					type: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({
						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;
		}
	}

	// 头部
	.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';
					}

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

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

					// 标签
					.tag {
						display: flex;

						.tag-item {
							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;
						}
					}

					// 日期
					.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>