jp-zeroWorkerStation/pages/tab/as-components/jk-popup.vue

<template >
	<view>
		<!-- 筛选框 -->
		<u-popup v-model="popupShow" @close="close"   @open="popupShowOpen" mode="bottom" border-radius="20" :closeable="true">
			<view class="popup-content">
				<view class="headline">
					筛选
				</view>
				<!-- 行业 -->
				<view class="industry">
					<view class="title">
						<view>意向行业 <span style="color: #4696f6;">{{industryChecked!=-1?'已选中:'+industryList[industryChecked].name:''}}</span> (向下拉可滑动)</view>
						
						<u-search v-model="querypop"></u-search>
					</view>
						<!-- 选项 -->
						
						<scroll-view  class="scrollview" scroll-y="true" style="height: 520rpx;">
						
							<view class="options">
								
									<view 
									:class="{item,checked:industryChecked==index}" v-for="(item,index) in industryList"
									  v-show="item.name.indexOf(querypop)!=-1"
									 :key="index"
										@click="industryChecked=index">
										<!-- 快递跑腿/配送/分拣 -->{{item.name}}
									</view>
								
							</view>
						</scroll-view>
					
				</view>
				<!-- 工作经验 -->
				<view class="work-experience">
					<view class="title">
						结算方式
					</view>
					<!-- 选项 -->
					<view class="options">
						<view :class="{item,checked:methodChecked==index}" v-for="(item,index) in methodList" :key="index"
							@click="methodChecked=index">
							{{item.name}}
						</view>
					</view>
				</view>
				<!-- 薪资待遇 -->
				<view class="salary-package" v-show="methodChecked!=-1">
					<view class="title">
						薪资待遇
					</view>
					<!-- 选项 -->
					<view class="options">
						<view :class="{item,checked:saralyChecked==index}" v-for="(item,index) in salaryList"
							:key="index" @click="saralyChecked=index">
							{{item.name}}
						</view>
					</view>
				</view>
				
				<view class="button">
					<button class="reset" @click="reset()">重置</button>
					<button class="confirm" @click="queryBtn()" >确认</button>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import * as API_weixin from '@/apis/weixin.js'
	
 	export default {
		name:"tabbarJob",
		props:{
			current: 0,
			elderStatus: false
		},
		data() {
			return {
				popupShow: false,
				querypop:"",
				methodChecked: -1,
				industryChecked: -1,
				saralyChecked:-1,
				salaryStart:'',
				salaryEnd:'',
				
				methodList:[
					{
						name: '日结',
						value:"1"
					}, {
						name: '周结',
						value:"2"
					
					}, {
						name: '月结',
						value:"3"
					}
				],//结算方式
				industryList:[],// 
				//salaryList: [],
				salaryList3: [{
						name: '1000元/月以下',
						max:1000
					},
					 {
						name: '1000-1500元/月',
						min:1000,
						max:1500
					}, {
						name: '1500-3000元/月',
						
						min:1500,
						max:3000
					}, {
						name: '3000-5000元/月',
						min:3000,
						max:5000
					}, 
					{
						name: '5000元/月以上',
						min:5000,
					}
				],
				salaryList2: [{
						name: '500元/周以下',
						max:500
					},
					 {
						name: '500-800元/周',
						min:500,
						max:800
					}, {
						name: '800-1200元/周',
						
						min:800,
						max:1200
					}, {
						name: '1200-2000元/周',
						min:1200,
						max:2000
					}, 
					{
						name: '2000元/周以上',
						min:2000,
					
					}
				],
				salaryList1: [{
						name: '100元/天以下',
						max:100
					},
					 {
						name: '100-200元/天',
						min:100,
						max:200
					}, {
						name: '200-300元/天',
						
						min:200,
						max:300
					}, {
						name: '300-500元/天',
						min:300,
						max:500
					}, 
					{
						name: '500元/天以上',
						min:500,
						
					
					}
				],
				
			};
			
		},
		computed:{
			salaryList(){
				if(this.methodChecked!=-1){
					if(this.methodChecked==0){
						return this.salaryList1
					}
					if(this.methodChecked==1){
						return this.salaryList2
					}
					if(this.methodChecked==2){
						return this.salaryList3
					}
				}
				return []
			}
		},
		methods:{
			show(){
				this.popupShow=true;
			},
			hide(){
				this.popupShow=false;
			},
			popupShowOpen(){
				if(this.industryList.length==0){
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
					API_weixin.findListByCatalogName({
						name:'意向行业',
						
					}).then((res) => {
						uni.hideLoading();
						
						this.industryList=res.data.dictionaryList
						
					}).catch(error => {
					
						uni.showToast({icon: 'none',
							title: error
						})
						//this.getPhone()
						
					})
				}
				 
			},
			close(){},
			reset() {
			
				this.querypop=""
				this.methodChecked= -1
				this.industryChecked= -1
				this.saralyChecked=-1
				this.salaryStart=''
				this.salaryEnd=''
				this.$emit("reset",{})
			},
			queryBtn(){
				var queryForm={}
				if(this.saralyChecked!=-1){
					queryForm.salaryStart=this.salaryList[this.saralyChecked].min
					if(queryForm.salaryStart==undefined){
						queryForm.salaryStart=''
					}
					queryForm.salaryEnd=this.salaryList[this.saralyChecked].max
					if(queryForm.salaryEnd==undefined){
											queryForm.salaryEnd=''
					}
					
				} 
				if(this.methodChecked!=-1){
					queryForm.settlementMethod=this.methodList[this.methodChecked].value
				} 
				if(this.industryChecked!=-1){
					queryForm.industry=this.industryList[this.industryChecked].value
				} 
				
				this.$emit("queryBtn",queryForm)
			},
			
		},
		mounted(){
			
		},destroyed(){
			
		}
		
		
	}
</script>

<style lang="scss" scoped>
	 // 筛选框
	 .popup-content {
	 	padding: 32rpx;
	 
	 	.headline {
	 		color: #101010;
	 		font-size: 40rpx;
	 		text-align: center;
	 	}
	 
	 	// 薪资待遇
		.industry,
	 	.salary-package,
	 	.work-experience {
	 		margin-top: 16rpx;
	 
	 		.title {
	 			font-size: 32rpx;
	 			color: #111111;
	 		}
	 
	 		// 选项
	 		.options {
	 			display: flex;
	 			flex-wrap: wrap;
	 			justify-content: flex-start;
	 			margin-top: 24rpx;
	 
	 			.item {
	 				height: 56rpx;
	 				line-height: 56rpx;
	 				min-width: 210rpx;
	 				text-align: center;
	 				margin-bottom: 16rpx;
	 				margin-right: 16rpx;
	 				color: #999999;
	 				background-color: #F3F3F4;
	 				border-radius: 4px;
	 			}
	 
	 			.checked {
	 				background-color: #2795FD;
	 				color: #fff;
	 			}
	 		}
	 	}
	 
	 	.button {
	 		display: flex;
	 
	 		margin-top: 8rpx;
	 		.reset:after{
	 				border:0
	 		}
	 		.reset {
	 			color: #999999;
	 			background-color: #F3F3F4;
	 			width: 200rpx;
	 			height: 72rpx;
	 			line-height: 72rpx;
	 			border-radius: 8px;
	 		}
	 
	 		.confirm {
	 			width: 440rpx;
	 			background-color: #2795FD;
	 			color: #fff;
	 			height: 72rpx;
	 			line-height: 72rpx;
	 			border-radius: 8px;
	 		}
	 	}
	 }
	 .industry,
	 .salary-form,
	 .clearing-form {
	 	.options {
	 		justify-content: start !important;
	 	}
	 
	 	.item {
	 		margin-right: 24rpx;
	 	}
	 }
	 .scrollview{
	 	border: 1px #101010 dashed;
		margin-bottom: 40rpx;
	 }
	 
</style>