lzf
/
partTime-app


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
							<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>新闻列表</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			.mui-bar{height: 80px!important;padding-top: 30px!important;}
		    .input-group input{padding: 15px 11px 11px 35px;height: 35px!important;background-color: white;text-align: left;font-size: 14px;margin: 8px 0!important;}
			.sousuo{font-size: 18px!important;margin: 17px 12px 6px 7px!important;}
			form{margin-top: 0px;position: relative;}
			.flex{margin-top: 80px;top:0;font-size: 14px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);color: #292929;padding: 15px;text-align: center;position: fixed;width: 100%;background-color: white;z-index: 666;}
		    .menu{position: fixed;width: 100%;top: -148px;max-height: 250px;overflow: scroll; background-color:white;z-index:6;transition-duration: 0.3s;}
		    .menu.active{top: 131px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);}
		    .mui-table-view-cell>a:not(.mui-btn){color: #5a5858;font-size: 15px;}
		    .mui-table-view-cell>a:not(.mui-btn).active{color: #00a0ea;}
		    .mui-table-view-cell:after{background-color: #dbdbdb;}
		    .mui-content{margin-top: 85px;padding: 0px 10px 0px 10px;}
		    .items{padding: 15px;font-size: 13px;background-color: white;border-radius: 3px;margin-top: 10px;}
		    .title{font-size: 16px;}
		    .items:last-child{border: 0px;}
		    .cn{color: #7e7e7e;padding-top: 8px;}
		    .dc{padding-right: 10px;}
		    .rmb{color: #FF5722;font-size: 15px;}
		    .right{float: right;}
		    .i{color: #00a0ea;}
		    [v-cloak] {display: none;}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<header class="mui-bar mui-bar-nav">
				<form class="input-group" v-on:submit.prevent="search()">
					<i class="icon sousuo">&#xeafe;</i>
					<input type="search" placeholder="搜索兼职工作等关键字" v-model="param.name" />
				</form>
			</header>
			<div class="flex">
				<div class="f" @click="popup(1)">{{msg1}} <i class="icon">&#xe64a;</i></div>
				<div class="f" @click="popup(2)">{{msg2}} <i class="icon">&#xe62b;</i></div>
				<!--<div class="f" @click="popup(3)">{{msg3}} <i class="icon">&#xe601;</i></div> -->
			</div>
			<div class="menu" :class="{active:m==1}">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" v-for="(item,index) in jzlx_list"
						@click="c1=index;param.jzlx=item;m=0;msg1=item;vm.refresh()">
						<a class="mui-navigate-right" :class="{active:c1==index}">{{item}}</a>
					</li>
				</ul>
			</div>
			<div class="menu" :class="{active:m==2}">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" v-for="(item,index) in jzqy_list"
						@click="c2=index;param.qy=item;m=0;msg2=item;vm.refresh()">
						<a class="mui-navigate-right" :class="{active:c2==index}">{{item}}</a>
					</li>
				</ul>
			</div>
			<!-- <div class="menu" :class="{active:m==3}">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell"v-for="(item,index) in xzdy_list" @click="c3=index;param.dy=item;m=0;msg3=item;vm.refresh()">
					    <a class="mui-navigate-right" :class="{active:c3==index}">{{item}}</a>
				   </li>
			    </ul>
			</div> -->


			<div class="mui-content">
				<div v-if="position_list.length>0">
					<div class="items" v-for="(item,index) in position_list" @click="detail(item.id)">
						<div class="title omit">{{item.parttime_title}} <span class="right rmb">{{item.salary}}</span>
						</div>
						<div class="cn">
							<span class="dc"><i class="icon i">&#xe602;</i> {{item.parttime_date}}</span>
							<span class="dc"><i class="icon i">&#xe604;</i> {{item.time_interval}}</span>
							<span class="dc"><i class="icon i">&#xe643;</i> 招{{item.hire_num}}人</span>
							<span class="right"> {{item.publish_date}}</span>
						</div>
						<div class="cn">
							<span class="dc">{{item.work_region}}</span>
							<span class="right">{{item.address}}</span>
						</div>
					</div>
				</div>
				<div class="no_data" v-else>
					<i class="icon icon-48">&#xe61a;</i><br />没有数据
				</div>
				<!--加载更多-->
				<div class="more">
					<div class="loading" v-if="loading">
						<span class="mui-spinner"></span>
						<div class="mc">加载中...</div>
					</div>
				</div>
			</div>
			<div class="mask" v-show="m!=0" @click="m=0"></div>
			<button class="btn add-c" @click="push()">+</button>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js"></script>
		<script src="../js/vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					position_list: [],
					jzlx_list: jzlx(), //兼职类型
					jzqy_list: jzqy(), //兼职名称
					//xzdy_list:xzdy(), //薪资待遇
					param: {
						page: 1,
						gzjy: '',
						xl: '',
						dy: ''
					},
					m: 0, //当前弹出菜单
					c1: 999, //当前选中条件
					c2: 999, //当前选中条件
					c3: 999, //当前选中条件
					msg1: '类型',
					msg2: '区域',
					msg3: '薪资待遇',
					current: 0,
					loading: false,
					hasMore: false,
				},
				mounted: function() {
					mui.plusReady(function() {
						vm.getData();
					})
					//监听滚动加载
					window.addEventListener('scroll', function() {
						//滚动高度+内高度>=文档高度  
						if (document.body.scrollTop + window.innerHeight + 20 >= document.body
							.offsetHeight) {
							if (vm.hasMore) {
								vm.loading = true;
								//避免重复加载
								vm.hasMore = false;
								vm.param.page++;
								setTimeout(function() {
									vm.getData()
								}, 1000);
							}
						}
					})
				},
				methods: {
					//获取数据
					getData: function() {
						request(urls().parttime_json_list, this.param, function(res) {


							res.list.forEach(function(item) {
								vm.position_list.push(item);
							});
							vm.hasMore = vm.param.page < res.total ? true : false;
							vm.loading = false;
							plus.nativeUI.closeWaiting();
						})
					},
					//弹出菜单
					popup: function(index) {
						vm.m = index;
					},
					//详情
					detail: function(id) {
						open('position_detail', '../pages/parttime/detail.html', {
							id: id
						}, 'slide-in-bottom');
					},
					//发布职位
					push: function() {
						open('add_parttime', '../pages/parttime/add_parttime.html', {
							type_list: vm.type_list
						}, 'slide-in-bottom');
					},
					//回车搜索
					search: function() {
						//隐藏键盘
						document.activeElement.blur();
						vm.param.jzlx = '';
						vm.param.qy = '';

						vm.refresh();
					},
					//刷新
					refresh: function() {
						vm.position_list = [];
						vm.param.page = 1;
						vm.getData();
					}
				}
			})
		</script>
	</body>

</html>