王明 / Recruitment

<template>
	<view class="page">
		<customHead mode='searchNav' :title='headtitle'></customHead>
		<view class="main">
			<!-- banner -->
			<view class="banner">
				<swiper class="screen-swiper square-dot" indicator-dots="true" circular="true" autoplay="true"
					interval="5000" duration="500">
					<swiper-item v-for="(item,index) in bannerIImg" :key="index">
						<image :src="BASE_URL+item.image[0].url" mode="aspectFill"></image>
						<!-- <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video> -->
					</swiper-item>
				</swiper>
			</view>
			<!-- 限时抢购，好货精选 -->
			<view class="flash-good cf">
				<view class="flash-sale fl" @click="FindWord">
					<view class="goods-list">
						<view class="list">
							<view>
								<view class="list-title">我要找工作</view>
								<view class="list-small-title">轻松高薪</view>
							</view>
							<view class="list-img">
								<image src="../../static/home1-icon.png"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="good-choice fl" @click="Feedback">
					<view class="goods-list">
						<view class="list">
							<view>
								<view class="list-title">我要招工</view>
								<view class="list-small-title">人员可靠</view>
							</view>
							<view class="list-img">
								<image src="../../static/home2-icon.png"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="good-choice1 fl" @click="ConfirmOrder">
					<view class="goods-list">
						<view class="list">
							<view>
								<view class="list-title">人力资源外包</view>
								<view class="list-small-title">信息公开透明</view>
							</view>
							<view class="list-img">
								<image src="../../static/home3-icon.png"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="good-choice2 fl" @click="MyCoupon">
					<view class="goods-list">
						<view class="list">
							<view>
								<view class="list-title">培训考证</view>
								<view class="list-small-title">提升专业能力</view>
							</view>
							<view class="list-img">
								<image src="../../static/home4-icon.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="search-box">
				<view class="search">
					<view class="iconfont icon-fadajing"></view>
					<input type="text" v-model="SearchText" placeholder="热门搜索：成都、高薪" />
					<view class="search-btn" @click="AllWork">搜索</view>
				</view>
			</view>

			<view class="titleall-box">
				<view class="titleall-left">
					<view class="titleall-left-line"></view>职位列表
				</view>
				<view class="titleall-right" @click="AllWork">查看全部岗位<image src="../../static/right.png"></image>
				</view>
			</view>

			<view class="title-screen">
				<view class="title-screen-box">发布时间<image @click="orderSort" src="../../static/down.png"></image>
				</view>
			</view>

			<view class="record-list">
				<view class="list" @click="JobsDetails(item.id)" v-for="item in tbrecruitList">
					<view class="title-date">
						<view class="title">
							<text class="two-omit">{{item.companyName}}-{{item.jop}}</text>
						</view>
						<view class="date">
							<text class="one-omit">{{item.introduce}}</text>
						</view>
						<view>
							<view class="yellow-btn">{{getDifferTime(item.lastModifyTime)}}</view>
						</view>
					</view>
					<view class="integral">
						<text class="integral-btn">{{item.jopName}}</text>
						<view class="integral-num">{{item.pay}}</view>
					</view>
				</view>

			</view>

		</view>
		<!-- tabbar -->
		<TabBar :tabBarShow="0"></TabBar>
	</view>
</template>

<script>
	import BASE_URL from '@/common/config.js'
	import TabBar from '../../components/TabBar/TabBar.vue';
	import customHead from "@/components/xy-customhead/xy-customhead.vue";
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			TabBar,
			customHead,
		},
		data() {
			return {
				BASE_URL,
				headtitle: '铭钛招聘',
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					use: false
				},
				swiperList: [{
						id: 0,
						type: 'image',
						url: '/static/img/banner_01.png'
					},
					{
						id: 1,
						type: 'image',
						url: '/static/img/banner_02.png'
					},
				],
				slideNum: 0,
				classifyShow: 0,
				// 页面高度
				pageHeight: 500,
				query: {
					currentPage: 1,
					pageSize: 10,
					keyword: "",
					sidx: "lastModifyTime",
					sort: "desc"
				},
				tbrecruitList: [],
				SearchText: "",
				bannerIImg: [],
			}
		},
		onReady() {
			uni.hideTabBar();
			// #ifdef MP
			uni.setNavigationBarTitle({
				title: '首页',
			})
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#fe3b0f',
			})
			// #endif
		},
		onLoad() {
			this.Gettbrecruit();
			this.API.Gettbbanner().then(res => {
				this.bannerIImg = res.data.list.map(res => {
					res.image = JSON.parse(res.image);
					return res;
				});
			});
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop;
			if (scrollTop > 0) {
				this.pageHeight = 210;
			} else {
				this.pageHeight = 500;
			}
		},
		onReachBottom() {
			console.log(12333);
		},
	 
		onPullDownRefresh(){
			this.Gettbrecruit();
			this.API.Gettbbanner().then(res => {
				this.bannerIImg = res.data.list.map(res => {
					res.image = JSON.parse(res.image);
					return res;
				});
			});
		},
		methods: { 
			orderSort() {
				if (this.query.sort == "asc") {
					this.query.sort = "desc";
				} else {
					this.query.sort = "asc";
				}
				this.Gettbrecruit();
			},
			getDifferTime(startDate) {
				startDate = this.formatDateTime(startDate);
				let startTime = new Date(Date.parse(startDate.replace(/-/g, "/"))).getTime();
				let endTime = new Date(Date.parse(this.getNowDate().replace(/-/g, "/"))).getTime();
				let dates = Math.abs((startTime - endTime)) / (1000 * 60 * 60 * 24);
				let DayNumber = Math.ceil(dates);
				if (DayNumber <= 7) {
					return DayNumber + "天内发布"
				} else {
					return DayNumber + "天前发布"
				}
			},
			getNowDate() {
				const timeOne = new Date()
				const year = timeOne.getFullYear()
				let month = timeOne.getMonth() + 1
				let day = timeOne.getDate()
				month = month < 10 ? '0' + month : month
				day = day < 10 ? '0' + day : day
				const NOW_MONTHS_AGO = `${year}-${month}-${day}`
				return NOW_MONTHS_AGO
			},
			formatDateTime(value) { // 时间戳转换日期格式方法
				if (value == null) {
					return ''
				} else {
					const date = new Date(value)
					const y = date.getFullYear() // 年
					let MM = date.getMonth() + 1 // 月
					MM = MM < 10 ? ('0' + MM) : MM
					let d = date.getDate() // 日
					d = d < 10 ? ('0' + d) : d
					let h = date.getHours() // 时
					h = h < 10 ? ('0' + h) : h
					let m = date.getMinutes() // 分
					m = m < 10 ? ('0' + m) : m
					let s = date.getSeconds() // 秒
					s = s < 10 ? ('0' + s) : s
					return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
				}
			},
			Gettbrecruit() {
				this.API.Gettbrecruit(this.query).then(res => {
					this.tbrecruitList = res.data.list;
				}); 
			},
			nvInputTap(e) {
				console.log(e);
			},
			nvInput(e) {
				console.log(e.detail.value);
			},
			nvFormSubmit(e) {
				console.log(e.detail.value);
				uni.showModal({
					title: "pyh-nv",
					content: "input提交：" + JSON.stringify(e.detail.value)
				})
			},
			nvAddressTap(e) {
				console.log("点击了地址");
				// this.nvConfig.address.province = "湖南省"
				uni.showModal({
					title: "pyh-nv",
					content: "点击了地址"
				})
			},
			// 回到上一页
			back: function() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 左侧返回按钮调用
			onBack() {
				this.$emit("onBack")
			},
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback() {
				this.mescroll.endSuccess();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				setTimeout(() => {
					this.mescroll.endByPage(10, 20);
				}, 2000)
			},
			/**
			 * 菜单导航滚动
			 */
			ScrollMenu(e) {
				let scrollLeft = e.target.scrollLeft;
				const query = uni.createSelectorQuery().in(this);
				query.select('.nav').boundingClientRect(data => {
					let wid = e.target.scrollWidth - data.width - (data.left * 2 + 5);
					this.slideNum = (scrollLeft / wid * 300) / 2;
				}).exec();
			},
			/**
			 * 搜索点击
			 */
			AllWork() {
				uni.navigateTo({
					url: '/pages/AllWork/AllWork?keyword=' + this.SearchText
				})
			},
			Feedback() {
				uni.navigateTo({
					url: '/pages/Feedback/Feedback'
				})
			},
			FindWord() {
				uni.navigateTo({
					url: '/pages/FindWord/FindWord'
				})
			},
			MyCoupon() {
				uni.navigateTo({
					url: '/pages/MyCoupon/MyCoupon'
				})
			},
			ConfirmOrder() {
				uni.navigateTo({
					url: '/pages/ConfirmOrder/ConfirmOrder'
				})
			},
			JobsDetails(id) {
				uni.navigateTo({
					url: '/pages/JobsDetails/JobsDetails?id=' + id
				})
			},
			/**
			 * 分类点击
			 * @param {Object} item
			 * @param {Number} index
			 */
			onClassify(item, index) {
				this.classifyShow = index;
			},
			/**
			 * 跳转点击
			 * @param {String} type 跳转类型
			 */
			onSkip(type) {
				switch (type) {
					case 'mess':
						uni.navigateTo({
							url: '/pages/Message/Message'
						})
						break;
					case 'paycode':
						uni.navigateTo({
							url: '/pages/PaymentCode/PaymentCode'
						})
						break;
					case 'menu':
						uni.navigateTo({
							url: '/pages/SearchGoodsList/SearchGoodsList'
						})
						break;
					case 'inform':
						break;
					case 'flash':
						uni.navigateTo({
							url: '/pages/FlashSale/FlashSale'
						})
						break;
					case 'GoodChoice':
						uni.navigateTo({
							url: '/pages/GoodChoice/GoodChoice'
						})
						break;
					case 'goods':
						uni.navigateTo({
							url: '/pages/GoodsDetails/GoodsDetails',
							animationType: 'zoom-fade-out',
							animationDuration: 200
						})
						break;
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	@import 'home.scss';
</style>