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" v-if="bannerlist.length">
			<u-swiper  img-mode="scaleToFill"  mode="none" :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="false">置顶</span> {{item.positionName}}
						</view>
						<!-- 薪水 -->
						<view class="salary">
							{{item.salary}}{{getUnit(item)}}
						</view>
					</view>
					<view class="content-2">
						<!-- 标签 -->
						<view class="tag">

							<view class="tag-item tag-item2" v-if="getLastTime(item.lastLoginTime)">
								活跃
							</view>
							<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.getNewsInfo()
			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: {
			getNewsInfo() {

				API_weixin.bannerList({
					classify: 1,

				}).then((res) => {
					uni.hideLoading();

					//this.newsList = res.data.data;
					this.bannerlist = res.data.data.map(item => {
						item.image = item.picUrl
						return item
					})

				}).catch(error => {
					uni.showToast({
						icon: 'none',
						title: error,
						icon: "none"
					})
				})
			},

			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;
						flex-wrap: wrap;
						.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;
							overflow: hidden;
						}
						.tag-item2 {
							background-color:rgb(70, 150, 246);
							color: #fff;
						}
					}

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

				.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>