odd_job_applet/pages/comjobs/recruitFast.vue

<template>
	<view>
		<view class="topBg" :style="'background-image:url('+$getImageUrl('static/images/applet/bg/course.png')+');'">
			<image class="topBg-image" :src="$getImageUrl('static/images/applet/index/hotRighrOne.png')"></image>
		</view>

		<view class="header">
			<view class="cu-bar search bg-gray">
				<view class="search-form round text-center">
					<text class="cuIcon-search"></text>
					<input v-model="searchval" :adjust-position="false" type="text" placeholder="请输入关键字"
						confirm-type="search" @confirm="btnSearch()"></input>
				</view>
				<view class="action" v-if="searchval!==''">
					<button class="cu-btn bg-white shadow-blur round" @click="btnSearch()">搜索</button>
				</view>
			</view>
			<view class="screen" @click="menuState = !menuState">
				<image class="screen-icon" :src="$getImageUrl('static/images/applet/comJobs/screen.png')"></image>
				<view class="">筛选</view>
			</view>
		</view>
		
		<view class="filterbg" v-if="menuState == true">
			<view class="flex justify-between padding bg-white">
				<view class="text-bold">
					<view class="radius text-themeRed" @tap="resetFilter">重置</view>
				</view>
				<view class="flex justify-end">
					<view class="cu-tag radius bg-tags" data-filterbox="wtype" @tap="showFilter">{{wtypelist.title}}
					</view>
					<view class="cu-tag radius bg-tags" data-filterbox="cate" @tap="showFilter">{{catelist.title}}
					</view>
					<view class="cu-tag radius bg-tags" data-filterbox="area" @tap="showFilter">{{arealist.title}}
					</view>
				</view>
			</view>

			<view class="filtercon" v-if="filterbox!==null" @click="hideFilter()">
				<view class="padding bg-white" v-if="filterbox=='wtype'" @click.stop>
					<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=='cate'" @click.stop>
					<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'" @click.stop>
					<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>

		<view class="list">
			<view class="card" v-for="(item,index) in plist" :key="index" @tap="goDetail(item.id)">
				<view class="card-top">
					<view class="card-top-item long">
						<image class="item-icon" :src="$getImageUrl('static/images/applet/index/cardA.png')"></image>
						<view class="item-text bold">{{item.title}}</view>
					</view>
					<view class="card-top-item short">
						<image class="item-icon" :src="$getImageUrl('static/images/applet/comJobs/icon-pageView.png')">
						</image>
						<view class="item-text">浏览量：{{item.volume}}</view>
					</view>
					<view class="card-top-item long">
						<image class="item-icon" :src="$getImageUrl('static/images/applet/comJobs/icon-sum.png')">
						</image>
						<view class="item-text red">工资：{{item.zwagall}}</view>
					</view>
					<view class="card-top-item short">
						<image class="item-icon" :src="$getImageUrl('static/images/applet/index/cardC.png')"></image>
						<view class="item-text">赏金<text class="item-text-money">{{item.retmoney}}元</text></view>
						<image class="item-iconA" v-if="item.is_pay == 1"
							:src="$getImageUrl('static/images/applet/other/paid.png')"></image>
					</view>
					<view class="card-top-item long">
						<image class="item-icon" :src="$getImageUrl('static/images/applet/index/cardB.png')"></image>
						<view class="item-text">工作时间：</view>
					</view>
					<view class="card-top-item short">
						<image class="item-icon" :src="$getImageUrl('static/images/applet/index/cardD.png')"></image>
						<view class="item-text">地点：{{item.district}}</view>
					</view>
				</view>
				<view class="card-bottom">
					<view class="bottom-title">{{item.worker.title}}</view>
					<u-icon name="more-dot-fill" color="#747474" size="20"></u-icon>
				</view>
			</view>

			<uni-load-more :status="pstatus"></uni-load-more>
		</view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				searchval: "",
				ppage: 1,
				psize: 20,
				plist: [],
				pstatus: 'more',
				wtypelist: {
					title: "类型",
					value: 0,
					data: []
				},
				catelist: {
					title: "岗位",
					value: 0,
					data: []
				},
				arealist: {
					title: "区域",
					value: "",
					cityarr: [],
					districtarr: [],
					area_2: 0,
					data: [],
					community: "",
				},
				filterbox: null,
				menuState: false,
			}
		},
		onLoad() {
			_this = this;
			_this.$req.ajax({
				path: "comjobs/pagecomjobs",
			}).then((data) => {
				console.log("分类", data)
				_this.catelist.data = data.catelist;
				_this.wtypelist.data = data.wtypelist;
				_this.arealist.data = require('@/common/area.json');
				_this.getMore();
			}).catch((err) => {
				uni.showModal({
					title: '信息提示',
					content: err,
					showCancel: false
				});
			});
		},
		methods: {
			checkWtype: function(title, value) {
				_this.wtypelist.title = title;
				_this.wtypelist.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;
					_this.arealist.area_2 = _this.arealist.cityarr[index].value;
				} else if (level == 3) {
					_this.arealist.value = _this.arealist.community = "";
					_this.arealist.title = _this.arealist.districtarr[index].title;
					if (_this.arealist.area_2 == "350582") {
						//晋江
						if (_this.arealist.cityarr[index].value == "350582") {
							_this.arealist.value = _this.arealist.districtarr[index].title;
						} else {
							_this.arealist.community = _this.arealist.districtarr[index].value;
						}
					} else {
						//其他区域
						_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();
				}
			},

			btnSearch: function() {
				if (_this.searchval == "") {
					uni.showModal({
						title: '信息提示',
						content: "请输入要搜索的关键字...",
						showCancel: false
					});
					return false;
				}
				_this.pageRefresh();
			},

			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
				});
			},

			resetFilter: function() {
				_this.searchval = "";
				_this.wtypelist.title = '类型';
				_this.wtypelist.value = 0;
				_this.catelist.title = '岗位';
				_this.catelist.value = 0;
				_this.arealist.title = '区域';
				_this.arealist.value = '';
				_this.arealist.cityarr = [];
				_this.arealist.districtarr = [];
				_this.pageRefresh();
			},

			pageRefresh: function() {
				_this.pstatus = 'more';
				_this.ppage = 1;
				_this.plist = [];
				_this.getMore();
			},

			goDetail: function(comjobsid) {
				uni.navigateTo({
					url: '/pages/comjobs/detail?comjobsid=' + comjobsid
				});
			},

			getMore() {
				_this.$req.ajax({
					path: "comjobs/listcomjobs",
					data: {
						// ppage: _this.ppage,
						// psize: _this.psize,
						// rectype: 2,
						ppage: _this.ppage,
						psize: _this.psize,
						searchval: _this.searchval,
						cateid: _this.catelist.value,
						wtype: _this.wtypelist.value,
						rectype: 2,
						district: _this.arealist.value,
						community: _this.arealist.community
					}
				}).then((data) => {
					_this.pstatus = data.pstatus;
					_this.plist = _this.plist.concat(data.plist);
					_this.ppage += 1;
					console.log("列表数据", _this.plist)
					uni.stopPullDownRefresh();
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	.topBg {
		height: 266rpx;
		padding-right: 54rpx;
		background-size: cover;
		background-position: center;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.topBg-image {
			width: 192rpx;
			height: 170rpx;
		}
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.search {
			flex: 1;
		}

		.screen {
			width: 150rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #191919;

			.screen-icon {
				margin-right: 10rpx;
				width: 28rpx;
				height: 28rpx;
			}
		}
	}

	.list {
		padding: 10rpx 26rpx 0;

		.card {
			margin-bottom: 30rpx;
			background: #FFFFFF;
			border-radius: 12rpx;

			.card-top {
				padding: 32rpx 32rpx 0;
				border-bottom: 2rpx solid #E2E2E2;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;

				.long {
					width: 50%;
				}

				.short {
					width: 45%;

				}

				.card-top-item {
					margin-bottom: 34rpx;
					display: flex;
					align-items: center;

					.item-icon {
						width: 35rpx;
						height: 35rpx;
					}

					.item-iconA {
						width: 40rpx;
						height: 40rpx;
					}

					.item-text {
						margin: 0 15rpx;
						// flex: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 1;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						font-size: 28rpx;
						font-weight: 400;
						color: #747474;

						.item-text-money {
							margin-left: 10rpx;
							font-size: 30rpx;
							font-weight: 600;
							color: #FF0000;
						}
					}

					.bold {
						font-weight: 600;
						color: #383838;
					}

					.red {
						color: #CA151C;
					}
				}
			}

			.card-bottom {
				padding: 20rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.bottom-title {
					width: 80%;
					font-size: 32rpx;
					font-weight: 600;
					color: #383838;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 1;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}
			}
		}
	}
</style>