odd_job_applet/pages/demand/demand.vue

<template>
	<view>
		<view class="cu-bar search">
			<view class="search-form round text-center">
				<text class="cuIcon-search"></text>
				<input @input="bindInput" :adjust-position="false" type="text" placeholder="搜索岗位或公司" confirm-type="search"></input>
			</view>
			<view class="action" v-if="searchval!==''">
				<button class="cu-btn bg-white shadow-blur round" @click="btnSearch()">搜索</button>
			</view>
		</view>
		
		
		<view class="filterbg">
		<view class="flex justify-between solids-bottom padding bg-white">
			<view class="text-bold">推荐</view>
			<view class="flex justify-end">
				<view class="cu-tag radius" data-filterbox="rectype" @tap="showFilter">{{rectypelist.title}}</view>
				<view class="cu-tag radius" data-filterbox="wtype" @tap="showFilter">{{wtypelist.title}}</view>
				<view class="cu-tag radius" data-filterbox="ftype" @tap="showFilter">{{ftypelist.title}}</view>
				<view class="cu-tag radius" data-filterbox="cate" @tap="showFilter">{{catelist.title}}</view>
				<view class="cu-tag radius" data-filterbox="area" @tap="showFilter">{{arealist.title}}</view>
			</view>
		</view>
		 
		<view class="filtercon" v-if="filterbox!==null">
			<view class="padding bg-white" v-if="filterbox=='rectype'">
				<block v-for="(item,index) in rectypelist.data" :key="index">
					<button class="cu-btn margin-lr-xs margin-tb-xs" @click="checkRectype(item.title,item.value)">{{item.title}}</button>
				</block>
			</view>
			
			<view class="padding bg-white" v-if="filterbox=='wtype'">
				<block v-for="(item,index) in wtypelist.data" :key="index">
					<button class="cu-btn margin-lr-xs margin-tb-xs" @click="checkWtype(item.title,item.value)">{{item.title}}</button>
				</block>
			</view>
			<view class="padding bg-white" v-if="filterbox=='ftype'">
				<block v-for="(item,index) in ftypelist.data" :key="index">
					<button class="cu-btn margin-lr-xs margin-tb-xs" @click="checkFtype(item.title,item.value)">{{item.title}}</button>
				</block>
			</view>
			<view class="padding bg-white" v-if="filterbox=='cate'">
				<block v-for="(item,index) in catelist.data" :key="index">
					<button class="cu-btn margin-lr-xs margin-tb-xs" @click="checkCate(item.title,item.value)">{{item.title}}</button>
				</block>
			</view>
			
			<view class="grid margin-bottom text-left col-3 bg-white" v-if="filterbox=='area'">
				<view class="solids-right padding-bottom">
					<scroll-view scroll-y="true" style="height: 600rpx;">
						<view class="solid-bottom text-gray padding-lr-sm padding-tb-sm">选择省</view>
						<view class="solid-bottom padding-lr-sm padding-tb-sm" @click="checkArea(4,0)">全部</view>
						<block v-for="(item,index) in arealist.data" :key="index">
							<view class="solid-bottom padding-lr-sm padding-tb-sm" @click="checkArea(1,index)">{{item.title}}</view>
						</block>
					</scroll-view>
				</view>
				<view class="solids-right padding-bottom">
					<scroll-view scroll-y="true" style="height: 600rpx;">
						<view class="solid-bottom text-gray padding-lr-sm padding-tb-sm">选择市</view>
						<block v-for="(item,index) in arealist.cityarr" :key="index">
							<view class="solid-bottom padding-lr-sm padding-tb-sm" @click="checkArea(2,index)">{{item.title}}</view>
						</block>
					</scroll-view>
				</view>
				<view class="padding-bottom">
					<scroll-view scroll-y="true" style="height: 600rpx;">
						<view class="solid-bottom text-gray padding-lr-sm padding-tb-sm">选择区县</view>
						<block v-for="(item,index) in arealist.districtarr" :key="index">
							<view class="solid-bottom padding-lr-sm padding-tb-sm" @click="checkArea(3,index)">{{item.title}}</view>
						</block>
					</scroll-view>
				</view>
			</view>
		</view>
		</view>
		
		
		<block v-for="(item,index) in plist" :key="index">
			<view class="cu-card dynamic no-card solid-bottom echo-demand-item">
				<view class="cu-item shadow padding-top-sm padding-bottom">
					<view class="padding-lr padding-bottom-xs flex justify-between align-center" @tap="goDetail(item.id)">
						<view class="basis-lg text-bold text-lg text-cut">{{item.title}}
							<text class="text-sm text-red">({{item.type_text}})</text>
							{{item.num}}人
						</view>
						<view class="basis-sm text-cut text-right text-gray text-sm">{{item.city}}</view>
					</view>
					<view class="padding-lr text-lg" @tap="goDetail(item.id)">
						<view v-if="item.wtype==1"><text class="text-red text-bold">{{item.bwagall}}~{{item.zwagall}}</text> <text class="text-gray text-sm padding-left-xs">元/月</text></view>
						<view v-if="item.wtype==2"><text class="text-red text-bold">{{item.bwagall}}</text> <text class="text-gray text-sm padding-left-xs">元/日</text></view>
						<view v-if="item.wtype==3"><text class="text-red text-bold">{{item.bwagall}}</text> <text class="text-gray text-sm padding-left-xs">元/时</text></view>
						<view v-if="item.wtype==4"><text class="text-red text-bold">面议</text></view>
					</view>
					
					<view class="padding-lr text-cut" @tap="goDetail(item.id)">
						<view v-for="(titem,tindex) in item.tags" :key="tindex" class="cu-tag light bg-gray text-grey sm">{{titem}}</view>
					</view>
					<view class="padding-lr text-sm text-cut" @tap="goShop(item.workerid)">
						<view class="text-gray">{{item.worker.title}}</view>
					</view>
					<view class="text-gray text-sm padding-lr flex align-center justify-between" @tap="goShop(item.workerid)">
						<view class="flex align-center">
							<image class="iconwyd" style="margin: 0rpx !important;" :src="$getImageUrl('static/images/applet/iconwyd.png')" mode="scaleToFill" v-if="item.isfree==2"></image>
						</view>
						<view class="text-gray text-right basis-xs">
							<text class="cuIcon-shop margin-right-xs text-lg"></text>
							进店
						</view>
					</view>
				</view>
			</view>
		</block>
		<uni-load-more :status="pstatus"></uni-load-more>
		
		
		<view class="padding-sm"></view>
		<view class="padding-xl"></view>
		<view class="cu-bar tabbar bg-white foot">
			<view class="action text-gray" @tap="goNavPage('/pages/worker/worker')">
				<view class="cuIcon-cu-image">
					<image src="../../static/tabbar/windex.png"></image>
				</view>
				首页
			</view>
			<view class="action text-blue" @tap="goNavPage('/pages/demand/demand')">
				<view class="cuIcon-cu-image">
					<image src="../../static/tabbar/wdemandSelected.png"></image>
				</view>
				抢单大厅
			</view>
			<!-- #ifndef MP-WEIXIN -->
			<view class="action text-gray videoimg" @tap="goNavPage('/pages/video/video')">
				<view class="cuIcon-cu-image">
					<image src="../../static/tabbar/video.png"></image>
				</view>
				录视频
			</view>
			<!-- #endif -->
			<view class="action text-gray" @tap="goNavPage('/pages/resume/resume')">
				<view class="cuIcon-cu-image">
					<image src="../../static/tabbar/resume.png"></image>
				</view>
				简历
			</view>
			<view class="action text-gray" @tap="goNavPage('/pages/supply/supply')">
				<view class="cuIcon-cu-image">
					<image src="../../static/tabbar/wsupply.png"></image>
				</view>
				共享用工
			</view>
			<!--
			<view class="action text-gray" @tap="goNavPage('/pages/worker/workerlist')">
				<view class="cuIcon-cu-image">
					<image src="../../static/tabbar/wworker.png"></image>
				</view>
				企业1
			</view>
			-->
		</view>
		<wxContact></wxContact>
	</view>
</template>

<script>
	import slFilter from '@/components/sl-filter/sl-filter.vue';
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	var _this;
	export default {
		components: {
			slFilter,
			uniLoadMore
		},
		data() {
			return {
				filterbox: null,
				rectypelist: {
					title: "悬赏/普通",
					value: 0
				},
				wtypelist: {
					title: "薪资",
					value: 0,
					data: []
				},
				ftypelist: {
					title: "返费",
					value: 0,
					data: []
				},
				catelist: {
					title: "岗位",
					value: 0,
					data: []
				},
				arealist: {
					title: "区域",
					value: "",
					cityarr: [],
					districtarr: [],
					data: []
				},
								
				searchval: "",
				pstatus: 'more',
				ppage: 1,
				psize: 20,
				plist: []
			};
		},
		onLoad: function(option){
			_this = this;
			_this.$req.ajax({
				path: "demand/pagedemand",
			}).then((data) => {
				_this.catelist.data = data.catelist;
				_this.wtypelist.data = data.wtypelist;
				_this.rectypelist.data = data.rectypelist;
				_this.ftypelist.data = data.ftypelist;
				_this.arealist.data = require('@/common/area.json');
				// _this.menuList[2].detailList = data.ftypelist;
				// _this.menuList[3].detailList = data.provincelist;
				// _this.$refs.slFilter.resetMenuList(_this.menuList);
				_this.getMore();
			}).catch((err) => {
				uni.showModal({
					title: '信息提示',
					content: err,
					showCancel: false
				});
			});
		},
		onPullDownRefresh: function() {
			_this.pageRefresh();
		},
		onReachBottom: function() {
			if (_this.pstatus !== 'more') {
				return;
			}
			_this.getMore();
		},
		onShareAppMessage: function(res) {
			return {
				title: "企业招聘",
				path: "/pages/demand/demand"
		    }
		},
		methods: {
			showFilter: function(e) {
				var nowfilterbox = e.currentTarget.dataset.filterbox;
				if (_this.filterbox == nowfilterbox){
					_this.filterbox = null;
				}else{
					_this.filterbox = nowfilterbox;
				}
				uni.pageScrollTo({
				    scrollTop: 0,
				    duration: 300
				});
			},
			checkRectype: function(title,value) {
				_this.rectypelist.title = title;
				_this.rectypelist.value = value;
				_this.filterbox = null;
				_this.pageRefresh();
			},
			checkWtype: function(title,value) {
				_this.wtypelist.title = title;
				_this.wtypelist.value = value;
				_this.filterbox = null;
				_this.pageRefresh();
			},
			checkFtype: function(title,value) {
				_this.ftypelist.title = title;
				_this.ftypelist.value = value;
				_this.filterbox = null;
				_this.pageRefresh();
			},
			checkCate: function(title,value) {
				_this.catelist.title = title;
				_this.catelist.value = value;
				_this.filterbox = null;
				_this.pageRefresh();
			},
			checkArea: function(level, index) {
				if (level==1){
					_this.arealist.cityarr = _this.arealist.data[index].children;
					_this.arealist.districtarr = [];
				}else if (level==2){
					_this.arealist.districtarr = _this.arealist.cityarr[index].children;
				}else if (level==3){
					_this.arealist.title = _this.arealist.districtarr[index].title;
					_this.arealist.value = _this.arealist.districtarr[index].title;
					_this.filterbox = null;
					_this.pageRefresh();
				}else if (level==4){
					_this.arealist.cityarr = [];
					_this.arealist.districtarr = [];
					_this.arealist.title = "全部";
					_this.arealist.value = "";
					_this.filterbox = null;
					_this.pageRefresh();
				}
			},
			
			// 搜索
			bindInput: function(e) {
				_this.searchval = e.detail.value;
			},
			btnSearch: function() {
				if (_this.searchval == "") {
					uni.showModal({
						title: '信息提示',
						content: "请输入要搜索的关键字...",
						showCancel: false
					});
					return false;
				}
				_this.pageRefresh();
			},
			
			pageRefresh: function() {
				_this.pstatus = 'more';
				_this.ppage = 1;
				_this.plist = [];
				_this.getMore();
			},
			getMore: function() {
				_this.$req.ajax({
					path: "demand/listdemand",
					data: {
						ppage: _this.ppage,
						psize: _this.psize,
						searchval: _this.searchval,
						cateid: _this.catelist.value,
						wtype: _this.wtypelist.value,
						rectype: _this.rectypelist.value,
						ftype: _this.ftypelist.value,
						district: _this.arealist.value
					}
				}).then((data) => {
					_this.pstatus = data.pstatus;
					_this.plist = _this.plist.concat(data.plist);
					_this.ppage += 1;
					uni.stopPullDownRefresh();
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
			goDetail: function(demandid) {
				uni.navigateTo({
					url: '/pages/demand/detail?demandid=' + demandid
				});
			},
			goShop: function(workerid) {
				uni.navigateTo({
					url: '/pages/worker/shop?workerid=' + workerid
				});
			},
			result: function(e) {
				_this.cateid = e.cateid;
				_this.wtype = e.wtype;
				_this.ftype = e.ftype;
				_this.province = e.province;
				_this.pageRefresh();
			},
			
			goNavPage: function(pageurl) {
				_this.userinfo = _this.checkLogin("/pages/my/my");
				if (_this.userinfo === false) {
					return false;
				}
				uni.redirectTo({
					url: pageurl
				});
			},
		}
	}
</script>

<style>
</style>